/* ==========================================================================
   FPSI KONTEN — tampilan shortcode & halaman satuan
   Memakai token dari fpsi-design/design-layer.css (--fpsi-*), dengan nilai
   cadangan supaya tetap layak bila lapisan desain dimatikan.

   Daftar isi
   01. Elemen dasar (pill, tombol, prosa, kosong)
   02. Kartu fitur (Inovasi, Jurnal, Instrumen)
   03. Grid kartu + filter (Pengabdian, PKP)
   04. Tab vertikal (Ekstrakurikuler)
   05. Carousel (Fasilitas, Galeri, foto organisasi)
   06. Tabel (Beasiswa, Prestasi, Alumni, PPID)
   07. Intro tengah (halaman Fasilitas) + Zona Integritas, tombol PPID
   08. Halaman satuan (Pengabdian, PKP, Fasilitas)
   09. Tablet & HP
   ========================================================================== */

.fpsi-k-ico { width: 1.1em; height: 1.1em; flex: none; }

/* ==========================================================================
   01. ELEMEN DASAR
   ========================================================================== */

.fpsi-k-pill {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	width: fit-content;
	margin: 0;
	padding: 6px 14px;
	border-radius: var(--fpsi-r-pill, 999px);
	background: var(--fpsi-surface-2, #E9F6FB);
	color: var(--fpsi-ink, #003A4D);
	font-size: .82rem;
	font-weight: 600;
	line-height: 1.35;
}
.fpsi-k-pill--dark   { background: var(--fpsi-ink, #003A4D); color: #fff; }
.fpsi-k-pill--soft   { background: #EEF2F6; color: #334155; font-weight: 500; }
.fpsi-k-pill--soft strong { color: var(--fpsi-ink, #003A4D); }
.fpsi-k-pill--accent { background: #FFF4DB; color: #7A4B00; }

.fpsi-k-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

.fpsi-k-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

.fpsi-k-btn {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	padding: 12px 22px;
	border: 2px solid var(--fpsi-cta-navy, #395A7F);
	border-radius: var(--fpsi-r-sm, 10px);
	background: var(--fpsi-cta-navy, #395A7F);
	color: #fff !important;
	font-size: .92rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none !important;
	transition: background-color var(--fpsi-base, .3s) var(--fpsi-ease, ease),
	            border-color var(--fpsi-base, .3s) var(--fpsi-ease, ease),
	            transform var(--fpsi-base, .3s) var(--fpsi-ease, ease),
	            box-shadow var(--fpsi-base, .3s) var(--fpsi-ease, ease);
}
.fpsi-k-btn:hover,
.fpsi-k-btn:focus-visible {
	background: var(--fpsi-ink, #003A4D);
	border-color: var(--fpsi-ink, #003A4D);
	transform: translateY(-2px);
	box-shadow: var(--fpsi-shadow-2);
}
.fpsi-k-btn--ghost { background: #fff; color: var(--fpsi-ink, #003A4D) !important; border-color: #CBD5E1; }
.fpsi-k-btn--ghost:hover,
.fpsi-k-btn--ghost:focus-visible { background: var(--fpsi-surface, #F5FAFC); color: var(--fpsi-ink, #003A4D) !important; border-color: var(--fpsi-ink, #003A4D); }
.fpsi-k-btn--pill { border-radius: var(--fpsi-r-pill, 999px); }
.fpsi-k-btn--teal { background: #2F6F73; border-color: #2F6F73; }

.fpsi-k-link {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	color: var(--fpsi-primary-deep, #00799B);
	font-weight: 700;
	text-decoration: none;
}
a.fpsi-k-link:hover,
a.fpsi-k-link:focus { color: var(--fpsi-ink, #003A4D); text-decoration: underline; text-underline-offset: 3px; }

.fpsi-k-prose { color: #41556B; font-size: 1rem; line-height: 1.8; }
.fpsi-k-prose p { margin: 0 0 .9em; }
.fpsi-k-prose p:last-child { margin-bottom: 0; }
.fpsi-k-prose ul, .fpsi-k-prose ol { margin: .4em 0 1em; padding-inline-start: 1.3em; }

.fpsi-k-empty {
	margin: 12px 0 0;
	padding: 22px 24px;
	border: 1px dashed #C9D6E0;
	border-radius: var(--fpsi-r-md, 16px);
	background: var(--fpsi-surface, #F5FAFC);
	color: var(--fpsi-muted, #526478);
	text-align: center;
}

.fpsi-k-noimg {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	min-height: 180px;
	background: linear-gradient(145deg, #E6F4FA 0%, #CFE7F1 100%);
	color: #7FA7B8;
}
.fpsi-k-noimg .fpsi-k-ico { width: 44px; height: 44px; }

/* ==========================================================================
   02. KARTU FITUR — gambar kiri, teks kanan
   ========================================================================== */

.fpsi-k-list { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 32px); margin-top: 8px; }

.fpsi-k-feature {
	display: grid;
	grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
	gap: clamp(20px, 3vw, 40px);
	padding: clamp(14px, 1.6vw, 20px);
	border: 1px solid var(--fpsi-line, #E2E8F0);
	border-radius: var(--fpsi-r-lg, 20px);
	background: #fff;
	box-shadow: var(--fpsi-shadow-2);
}

.fpsi-k-feature__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--fpsi-r-md, 16px);
	background: #F1F5F9;
	aspect-ratio: 1 / 1;
	align-self: start;
}
.fpsi-k-feature__media img,
.fpsi-k-feature__media .fpsi-k-noimg { width: 100%; height: 100%; object-fit: cover; display: block; }

.fpsi-k-feature__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	padding: 6px clamp(0px, 1vw, 12px) 6px 0;
	min-width: 0;
}

.fpsi-k-feature__title {
	margin: 0;
	color: var(--fpsi-ink, #003A4D);
	font-size: clamp(1.35rem, 2.3vw, 1.9rem);
	font-weight: 800;
	line-height: 1.2;
}

/* Jurnal: sampul tegak, tidak dipotong. */
.fpsi-k-feature--cover .fpsi-k-feature__media { aspect-ratio: 4 / 5; display: grid; place-items: center; padding: clamp(16px, 3vw, 36px); }
.fpsi-k-feature--cover .fpsi-k-feature__media img { width: auto; height: auto; max-height: 100%; object-fit: contain; box-shadow: 0 18px 36px rgba(0, 30, 45, .22); border-radius: 4px; }

/* Instrumen: kolom kiri sempit. */
.fpsi-k-feature--compact { grid-template-columns: 180px minmax(0, 1fr); }
.fpsi-k-feature--compact .fpsi-k-feature__media { aspect-ratio: 1 / 1; }
.fpsi-k-feature--compact .fpsi-k-feature__title { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
.fpsi-k-docicon {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(150deg, var(--fpsi-surface-2, #E9F6FB), #D3ECF6);
	color: var(--fpsi-primary-deep, #00799B);
}
.fpsi-k-docicon .fpsi-k-ico { width: 56px; height: 56px; }

/* ==========================================================================
   03. GRID KARTU + FILTER
   ========================================================================== */

.fpsi-k-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-bottom: 18px;
	margin: 8px 0 24px;
	border-bottom: 1px solid var(--fpsi-line, #E2E8F0);
}

.fpsi-k-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.fpsi-k-chip {
	padding: 9px 18px;
	border: 1px solid #CBD5E1;
	border-radius: var(--fpsi-r-pill, 999px);
	background: #fff;
	color: var(--fpsi-ink, #003A4D);
	font: inherit;
	font-size: .88rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--fpsi-fast, .18s), color var(--fpsi-fast, .18s), border-color var(--fpsi-fast, .18s);
}
.fpsi-k-chip:hover { border-color: var(--fpsi-ink, #003A4D); }
.fpsi-k-chip.is-on { background: var(--fpsi-ink, #003A4D); border-color: var(--fpsi-ink, #003A4D); color: #fff; }

.fpsi-k-search { position: relative; display: block; width: min(100%, 260px); margin-inline-start: auto; }
.fpsi-k-search input {
	width: 100%;
	padding: 10px 38px 10px 14px;
	border: 1px solid #CBD5E1;
	border-radius: var(--fpsi-r-sm, 10px);
	background: #fff;
	font: inherit;
	font-size: .9rem;
}
.fpsi-k-search input:focus { outline: 2px solid var(--fpsi-primary, #00AEEF); outline-offset: 1px; border-color: transparent; }
.fpsi-k-search .fpsi-k-ico { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #94A3B8; pointer-events: none; }

.fpsi-k-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }

.fpsi-k-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--fpsi-r-md, 16px);
	background: #fff;
	box-shadow: var(--fpsi-shadow-2);
	transition: transform var(--fpsi-base, .3s) var(--fpsi-ease, ease), box-shadow var(--fpsi-base, .3s) var(--fpsi-ease, ease);
}
.fpsi-k-card[hidden] { display: none; }
.fpsi-k-card:hover,
.fpsi-k-card:focus-within { transform: translateY(-5px); box-shadow: var(--fpsi-shadow-3); }

.fpsi-k-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #EEF2F6; }
.fpsi-k-card__media img,
.fpsi-k-card__media .fpsi-k-noimg { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 0; transition: transform var(--fpsi-slow, .6s) var(--fpsi-ease, ease); }
.fpsi-k-card:hover .fpsi-k-card__media img { transform: scale(1.05); }

.fpsi-k-card__count {
	position: absolute;
	top: 12px;
	right: 12px;
	padding: 5px 11px;
	border-radius: var(--fpsi-r-pill, 999px);
	background: rgba(255, 255, 255, .92);
	color: var(--fpsi-ink, #003A4D);
	font-size: .75rem;
	font-weight: 700;
}

.fpsi-k-card__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 18px 18px; }

.fpsi-k-card__meta { display: flex; gap: 14px; margin: 0 0 4px; }
.fpsi-k-card__meta > div + div { padding-inline-start: 14px; border-inline-start: 1px solid var(--fpsi-line, #E2E8F0); }
.fpsi-k-card__meta dt { margin: 0; color: var(--fpsi-muted, #526478); font-size: .75rem; }
.fpsi-k-card__meta dd { margin: 2px 0 0; color: var(--fpsi-ink, #003A4D); font-size: .88rem; font-weight: 600; }

.fpsi-k-card__title { margin: 0; font-size: 1.12rem; font-weight: 800; line-height: 1.3; }
.fpsi-k-card__title a { color: var(--fpsi-ink, #003A4D); text-decoration: none; }
/* Seluruh kartu dapat diklik lewat tautan judul. */
.fpsi-k-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.fpsi-k-card__title a:focus-visible { outline: none; }
.fpsi-k-card:has(.fpsi-k-card__title a:focus-visible) { outline: 3px solid var(--fpsi-ink, #003A4D); outline-offset: 2px; }

.fpsi-k-card__by { margin: 0; color: #334155; font-size: .88rem; font-weight: 600; }
.fpsi-k-card__text { margin: 0; color: var(--fpsi-muted, #526478); font-size: .88rem; line-height: 1.55; }
.fpsi-k-card__more { display: inline-flex; align-items: center; gap: .35em; margin-top: auto; padding-top: 6px; color: var(--fpsi-ink, #003A4D); font-size: .88rem; font-weight: 700; }
.fpsi-k-card:hover .fpsi-k-card__more .fpsi-k-ico { transform: translateX(3px); }
.fpsi-k-card__more .fpsi-k-ico { transition: transform var(--fpsi-fast, .18s); }

/* ==========================================================================
   04. TAB VERTIKAL — Ekstrakurikuler
   ========================================================================== */

.fpsi-k-tabs {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	margin-top: 8px;
	border: 1px solid var(--fpsi-line, #E2E8F0);
	border-radius: var(--fpsi-r-lg, 20px);
	background: #fff;
	box-shadow: var(--fpsi-shadow-2);
	overflow: hidden;
}

.fpsi-k-tabs__list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 14px;
	border-inline-end: 1px solid var(--fpsi-line, #E2E8F0);
	background: #FBFDFE;
}

.fpsi-k-tabs__tab {
	padding: 12px 16px;
	border: 0;
	border-radius: var(--fpsi-r-md, 16px);
	background: transparent;
	color: #334155;
	font: inherit;
	font-size: .95rem;
	font-weight: 500;
	line-height: 1.35;
	text-align: start;
	cursor: pointer;
	transition: background-color var(--fpsi-fast, .18s), color var(--fpsi-fast, .18s), box-shadow var(--fpsi-fast, .18s);
}
.fpsi-k-tabs__tab:hover { background: var(--fpsi-tint-8, rgba(0,174,239,.08)); color: var(--fpsi-ink, #003A4D); }
.fpsi-k-tabs__tab[aria-selected="true"] {
	background: #DCE8F3;
	color: var(--fpsi-ink, #003A4D);
	font-weight: 700;
	box-shadow: 0 6px 16px rgba(0, 58, 77, .12);
}
.fpsi-k-tabs__tab:focus-visible { outline: 3px solid var(--fpsi-ink, #003A4D); outline-offset: 1px; }

.fpsi-k-tabs__panel { display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 3vw, 36px); min-width: 0; }
.fpsi-k-tabs__panel[hidden] { display: none; }
.fpsi-k-tabs__panel:focus-visible { outline: none; }
.fpsi-k-tabs__title { margin: 0; color: var(--fpsi-ink, #003A4D); font-size: clamp(1.35rem, 2.3vw, 1.85rem); font-weight: 800; line-height: 1.2; }

/* ==========================================================================
   05. CAROUSEL
   ========================================================================== */

.fpsi-k-car { position: relative; margin: 8px 0 4px; }

.fpsi-k-car__track {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding: 6px 2px 10px;
	outline: none;
}
.fpsi-k-car__track::-webkit-scrollbar { display: none; }
.fpsi-k-car__track:focus-visible { outline: 3px solid var(--fpsi-ink, #003A4D); outline-offset: 2px; border-radius: 12px; }

.fpsi-k-car__item {
	flex: 0 0 auto;
	margin: 0;
	scroll-snap-align: center;
	text-decoration: none;
	color: inherit;
}
.fpsi-k-car__img { display: block; overflow: hidden; border-radius: var(--fpsi-r-md, 16px); background: #EEF2F6; }
.fpsi-k-car__img img,
.fpsi-k-car__img .fpsi-k-noimg { display: block; width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.fpsi-k-car__cap { display: block; margin-top: 10px; text-align: center; color: var(--fpsi-ink, #003A4D); font-weight: 700; }

/* Mode strip: deret foto seukuran. */
.fpsi-k-car--strip .fpsi-k-car__item { width: clamp(180px, 30%, 260px); }
.fpsi-k-car--strip .fpsi-k-car__img { aspect-ratio: 4 / 5; }
.fpsi-k-car--strip .fpsi-k-car__btn { top: calc(50% - 18px); }

/* Mode cover: kartu tengah membesar, sisi memudar — rujukan klien. */
.fpsi-k-car--cover .fpsi-k-car__track {
	gap: clamp(12px, 2vw, 24px);
	padding: 24px 0 18px;
	/* Ruang kosong kiri-kanan supaya kartu pertama/terakhir bisa di tengah. */
	padding-inline: calc(50% - min(38vw, 260px));
}
.fpsi-k-car--cover .fpsi-k-car__item { width: min(76vw, 520px); }
.fpsi-k-car--cover .fpsi-k-car__img {
	aspect-ratio: 16 / 10;
	transform: scale(.82);
	opacity: .45;
	box-shadow: var(--fpsi-shadow-1);
	transition: transform var(--fpsi-slow, .6s) var(--fpsi-ease, ease), opacity var(--fpsi-slow, .6s) var(--fpsi-ease, ease), box-shadow var(--fpsi-slow, .6s) var(--fpsi-ease, ease);
}
.fpsi-k-car--cover .fpsi-k-car__item.is-near .fpsi-k-car__img { opacity: .8; transform: scale(.88); }
.fpsi-k-car--cover .fpsi-k-car__item.is-active .fpsi-k-car__img { transform: scale(1); opacity: 1; box-shadow: var(--fpsi-shadow-3); }
.fpsi-k-car--cover .fpsi-k-car__cap { opacity: .55; font-weight: 600; transition: opacity var(--fpsi-base, .3s); }
.fpsi-k-car--cover .fpsi-k-car__item.is-active .fpsi-k-car__cap { opacity: 1; font-size: 1.12rem; font-weight: 800; }
.fpsi-k-car--cover a.fpsi-k-car__item:focus-visible { outline: none; }
.fpsi-k-car--cover a.fpsi-k-car__item:focus-visible .fpsi-k-car__img { outline: 3px solid var(--fpsi-ink, #003A4D); outline-offset: 3px; }

.fpsi-k-car__btn {
	position: absolute;
	z-index: 2;
	top: calc(50% - 32px);
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(15, 23, 32, .82);
	color: #fff;
	cursor: pointer;
	transition: background-color var(--fpsi-fast, .18s), opacity var(--fpsi-fast, .18s);
}
.fpsi-k-car__btn:hover { background: #0F1720; }
.fpsi-k-car__btn:focus-visible { outline: 3px solid var(--fpsi-primary, #00AEEF); outline-offset: 2px; }
.fpsi-k-car__btn:disabled { opacity: .25; cursor: default; }
.fpsi-k-car__btn .fpsi-k-ico { width: 22px; height: 22px; }
.fpsi-k-car__btn--prev { left: 6px; }
.fpsi-k-car__btn--next { right: 6px; }
.fpsi-k-car--cover .fpsi-k-car__btn--prev { left: calc(50% - min(38vw, 260px) - 8px); }
.fpsi-k-car--cover .fpsi-k-car__btn--next { right: calc(50% - min(38vw, 260px) - 8px); }

.fpsi-k-car__dots { display: flex; justify-content: center; gap: 7px; margin-top: 6px; }
.fpsi-k-car__dots span { width: 7px; height: 7px; border-radius: 50%; background: #CBD5E1; transition: background-color var(--fpsi-fast, .18s), width var(--fpsi-fast, .18s); }
.fpsi-k-car__dots span.is-on { width: 20px; border-radius: 4px; background: var(--fpsi-ink, #003A4D); }

.fpsi-k-car.is-single .fpsi-k-car__btn,
.fpsi-k-car.is-single .fpsi-k-car__dots { display: none; }

/* ==========================================================================
   06. TABEL
   ========================================================================== */

.fpsi-k-table-wrap {
	margin-top: 8px;
	overflow-x: auto;
	border: 1px solid var(--fpsi-line, #E2E8F0);
	border-radius: var(--fpsi-r-md, 16px);
	background: #fff;
	box-shadow: var(--fpsi-shadow-1);
}
.fpsi-k-table { width: 100%; margin: 0; border-collapse: collapse; font-size: .95rem; }
.fpsi-k-table th {
	padding: 14px 18px;
	border: 0;
	background: var(--fpsi-ink, #003A4D);
	color: #fff;
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-align: start;
}
.fpsi-k-table td {
	padding: 14px 18px;
	border: 0;
	border-top: 1px solid var(--fpsi-line, #E2E8F0);
	color: #334155;
	line-height: 1.55;
	vertical-align: top;
}
.fpsi-k-table tbody tr:nth-child(even) td { background: #FAFCFD; }
.fpsi-k-table td strong { color: var(--fpsi-ink, #003A4D); }
.fpsi-k-table__no { width: 64px; text-align: center !important; font-variant-numeric: tabular-nums; }
.fpsi-k-table__ket { display: block; margin-bottom: 4px; }
.fpsi-k-table__empty td { text-align: center; color: var(--fpsi-muted, #526478); font-style: italic; padding: 22px 18px; }

.fpsi-k-ppid { display: flex; flex-direction: column; gap: 30px; margin-top: 8px; }
.fpsi-k-ppid__title { margin: 0 0 4px; color: var(--fpsi-ink, #003A4D); font-size: 1.2rem; font-weight: 800; }
.fpsi-k-ppid__desc { margin: 0 0 8px; color: var(--fpsi-muted, #526478); }

/* ==========================================================================
   07. INTRO TENGAH (widget Elementor ber-kelas fpsi-k-intro*)
   ========================================================================== */

.fpsi-k-intro { text-align: center; }
.fpsi-k-intro .fpsi-k-intro__eyebrow .elementor-heading-title {
	display: inline-block;
	padding-bottom: 10px;
	color: var(--fpsi-muted, #526478);
	font-size: .9rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	background: linear-gradient(var(--fpsi-primary, #00AEEF), var(--fpsi-primary, #00AEEF)) center bottom / 32px 2px no-repeat;
}
.fpsi-k-intro .fpsi-k-intro__title .elementor-heading-title {
	color: var(--fpsi-ink, #003A4D);
	font-size: clamp(1.9rem, 4vw, 2.9rem);
	font-weight: 800;
	line-height: 1.15;
}
.fpsi-k-intro .fpsi-k-intro__text { max-width: 72ch; margin-inline: auto; color: #41556B; font-size: 1.08rem; line-height: 1.8; }

/* ==========================================================================
   07b. ZONA INTEGRITAS (widget HTML) + tombol PPID + tautan kembali
   ========================================================================== */

.fpsi-k-backwrap { margin-bottom: 4px; }
.fpsi-doc .fpsi-doc__body > .fpsi-k-backwrap + .fpsi-doc__section { --padding-top: 18px; }

.fpsi-k-zi { max-width: 80ch; color: #41556B; font-size: 1.0625rem; line-height: 1.85; }
.fpsi-k-zi p { margin: 0 0 1em; }
.fpsi-k-zi__lead { margin-top: -4px !important; color: var(--fpsi-primary-deep, #00799B); font-size: 1.12rem; font-weight: 700; line-height: 1.5; }
.fpsi-k-zi__h { margin: 1.6em 0 .55em; color: var(--fpsi-ink, #003A4D); font-size: 1.25rem; font-weight: 800; line-height: 1.3; }
.fpsi-k-zi__quote {
	margin: 0 0 1em;
	padding: 20px 24px;
	border: 0;
	border-inline-start: 4px solid var(--fpsi-accent, #FFB020);
	border-radius: 0 var(--fpsi-r-md, 16px) var(--fpsi-r-md, 16px) 0;
	background: #FFF9EC;
	color: #4A3A12;
	font-style: italic;
}
.fpsi-k-zi__quote p { margin: 0; }
.fpsi-k-zi__grid {
	counter-reset: zi;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}
.fpsi-k-zi__grid li {
	counter-increment: zi;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 20px 18px 64px;
	border: 1px solid var(--fpsi-line, #E2E8F0);
	border-radius: var(--fpsi-r-md, 16px);
	background: #fff;
	box-shadow: var(--fpsi-shadow-1);
	font-size: .95rem;
	line-height: 1.6;
}
.fpsi-k-zi__grid li::before {
	content: counter(zi, decimal-leading-zero);
	position: absolute;
	top: 18px;
	left: 18px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: var(--fpsi-ink, #003A4D);
	color: #fff;
	font-size: .8rem;
	font-weight: 800;
}
.fpsi-k-zi__grid strong { color: var(--fpsi-ink, #003A4D); font-size: 1rem; }
.fpsi-k-zi-wrap + .fpsi-k-sc { margin-top: 18px; }

.fpsi-doc .fpsi-k-ppid-actions { --flex-direction: row; --flex-wrap: wrap; --gap: 12px; --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; }
.fpsi-doc .fpsi-k-ppid-actions .fpsi-doc__btn { margin-top: 0; width: auto; }

@media (max-width: 767px) {
	.fpsi-k-zi__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   08. HALAMAN SATUAN
   ========================================================================== */

body.fpsi-k-single-page #site-content .customify-container { max-width: none; padding: 0; }
body.fpsi-k-single-page #site-content .customify-grid,
body.fpsi-k-single-page #site-content .content-area { margin: 0; padding: 0; width: 100%; max-width: none; flex-basis: 100%; }
body.fpsi-k-single-page .content-inner { padding: 0; }

.fpsi-k-single {
	max-width: 1180px;
	margin: 0 auto;
	padding: clamp(28px, 4vw, 52px) var(--fpsi-gutter, 24px) clamp(48px, 6vw, 88px);
}

.fpsi-k-single__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; }

.fpsi-k-back {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	padding: 8px 16px 8px 12px;
	border: 1px solid #CBD5E1;
	border-radius: var(--fpsi-r-sm, 10px);
	background: #fff;
	color: var(--fpsi-ink, #003A4D) !important;
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none !important;
	transition: border-color var(--fpsi-fast, .18s), background-color var(--fpsi-fast, .18s);
}
.fpsi-k-back:hover { border-color: var(--fpsi-ink, #003A4D); background: var(--fpsi-surface, #F5FAFC); }

.fpsi-k-sdgs { display: flex; align-items: center; gap: 8px; }
.fpsi-k-sdgs__label { margin-inline-end: 4px; color: var(--fpsi-ink, #003A4D); font-size: .88rem; font-weight: 700; }
.fpsi-k-sdg { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 6px; background: var(--c); color: #fff; font-size: 1rem; box-shadow: var(--fpsi-shadow-1); }

.fpsi-k-single__head { padding-bottom: 20px; margin-bottom: 26px; border-bottom: 1px solid var(--fpsi-line, #E2E8F0); }
.fpsi-k-single__title { margin: 0 0 10px; color: var(--fpsi-ink, #003A4D); font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 800; line-height: 1.18; }
.fpsi-k-single__meta { display: flex; flex-wrap: wrap; margin: 0; color: var(--fpsi-muted, #526478); font-size: .92rem; }
.fpsi-k-single__meta span + span::before { content: ""; display: inline-block; width: 1px; height: .9em; margin: 0 12px; background: #CBD5E1; vertical-align: -1px; }

.fpsi-k-single__grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: clamp(20px, 3vw, 36px); align-items: start; }
.fpsi-k-single__grid--full { grid-template-columns: minmax(0, 1fr); }
.fpsi-k-single__main { display: flex; flex-direction: column; gap: 28px; min-width: 0; }

.fpsi-k-photos__main { overflow: hidden; border-radius: var(--fpsi-r-md, 16px); background: #EEF2F6; aspect-ratio: 16 / 9; }
.fpsi-k-photos__main img,
.fpsi-k-photos__main .fpsi-k-noimg { width: 100%; height: 100%; object-fit: cover; display: block; }
.fpsi-k-photos__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 10px; }
.fpsi-k-photos__thumb { padding: 0; border: 2px solid transparent; border-radius: var(--fpsi-r-sm, 10px); overflow: hidden; background: none; cursor: pointer; aspect-ratio: 4 / 3; opacity: .72; transition: opacity var(--fpsi-fast, .18s), border-color var(--fpsi-fast, .18s); }
.fpsi-k-photos__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fpsi-k-photos__thumb:hover,
.fpsi-k-photos__thumb.is-on { opacity: 1; border-color: var(--fpsi-primary, #00AEEF); }
.fpsi-k-photos__thumb:focus-visible { outline: 3px solid var(--fpsi-ink, #003A4D); outline-offset: 2px; }

.fpsi-k-single__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.fpsi-k-single__cols--one { grid-template-columns: minmax(0, 1fr); }
.fpsi-k-single__h2 { margin: 0 0 10px; color: var(--fpsi-ink, #003A4D); font-size: 1.2rem; font-weight: 800; }

.fpsi-k-bullets { margin: 0; padding-inline-start: 1.2em; color: #41556B; line-height: 1.7; }
.fpsi-k-bullets li { margin-bottom: .5em; }
.fpsi-k-bullets li::marker { color: var(--fpsi-primary-deep, #00799B); }

.fpsi-k-team {
	position: sticky;
	top: calc(var(--fpsi-header-h, 120px) + 20px);
	padding: 20px 22px;
	border-radius: var(--fpsi-r-md, 16px);
	background: #EEF2F6;
}
.fpsi-k-team__title { margin: 0 0 14px; color: var(--fpsi-ink, #003A4D); font-size: 1.15rem; font-weight: 800; }
.fpsi-k-team__role { margin: 0; color: var(--fpsi-muted, #526478); font-size: .8rem; }
.fpsi-k-team__name { margin: 2px 0 14px; color: var(--fpsi-ink, #003A4D); font-weight: 700; line-height: 1.4; }
.fpsi-k-team__partner { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid #D5DEE7; color: var(--fpsi-ink, #003A4D); font-weight: 600; }
.fpsi-k-team__partner .fpsi-k-ico { width: 30px; height: 30px; padding: 5px; border-radius: 8px; background: #fff; color: var(--fpsi-primary-deep, #00799B); }
.fpsi-k-team__partner a { color: inherit; }

/* --- Fasilitas ------------------------------------------------------------ */

.fpsi-k-hero {
	position: relative;
	padding: clamp(36px, 6vw, 64px) max(var(--fpsi-gutter, 24px), (100% - var(--fpsi-max, 1400px)) / 2);
	background: linear-gradient(115deg, #00293A 0%, #004E67 48%, #00799B 100%);
	overflow: hidden;
}
.fpsi-k-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: linear-gradient(90deg, var(--fpsi-primary, #00AEEF), var(--fpsi-accent, #FFB020), var(--fpsi-primary, #00AEEF)); }
.fpsi-k-hero__eyebrow { display: block; margin-bottom: 6px; color: #7FE3FF; font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.fpsi-k-hero__title { margin: 0; color: #fff; font-size: clamp(1.9rem, 4.4vw, 3rem); font-weight: 800; line-height: 1.1; text-shadow: 0 2px 16px rgba(0, 24, 34, .35); }

.fpsi-k-about { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.fpsi-k-about__media { overflow: hidden; border-radius: var(--fpsi-r-md, 16px); aspect-ratio: 16 / 10; background: #EEF2F6; box-shadow: var(--fpsi-shadow-2); }
.fpsi-k-about__media img,
.fpsi-k-about__media .fpsi-k-noimg { width: 100%; height: 100%; object-fit: cover; display: block; }
.fpsi-k-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--fpsi-muted, #526478); font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.fpsi-k-eyebrow::after { content: ""; width: 28px; height: 2px; background: var(--fpsi-primary, #00AEEF); }
.fpsi-k-about .fpsi-k-prose { text-align: justify; hyphens: auto; }

.fpsi-k-gallery { margin-top: clamp(40px, 6vw, 72px); }
.fpsi-k-gallery__title { margin: 0 0 6px; color: var(--fpsi-ink, #003A4D); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; }

/* --------------------------------------------------------------------------
   Penangkal gaya <button> bawaan Customify.
   Tema memberi SEMUA <button> latar hijau-toska, teks putih, tinggi minimum,
   dan overlay gradien saat hover/fokus lewat selector
   `button:not(...):not(...):hover` (spesifisitas 0,3,1) — lebih kuat dari
   kelas tunggal kita. Maka warna di sini sengaja memakai !important, dan
   hanya untuk tombol milik komponen ini.
   -------------------------------------------------------------------------- */

button.fpsi-k-chip,
button.fpsi-k-tabs__tab,
button.fpsi-k-car__btn,
button.fpsi-k-photos__thumb {
	min-height: 0;
	max-width: none;
	line-height: 1.35;
	background-image: none !important;
}

button.fpsi-k-chip { display: inline-flex; padding: 9px 18px; border: 1px solid #CBD5E1; border-radius: var(--fpsi-r-pill, 999px); background-color: #fff !important; color: var(--fpsi-ink, #003A4D) !important; }
button.fpsi-k-chip:hover,
button.fpsi-k-chip:focus-visible { border-color: var(--fpsi-ink, #003A4D); background-color: var(--fpsi-surface, #F5FAFC) !important; }
button.fpsi-k-chip.is-on,
button.fpsi-k-chip.is-on:hover,
button.fpsi-k-chip.is-on:focus { border-color: var(--fpsi-ink, #003A4D); background-color: var(--fpsi-ink, #003A4D) !important; color: #fff !important; }

button.fpsi-k-tabs__tab { display: block; width: 100%; padding: 12px 16px; border: 0; border-radius: var(--fpsi-r-md, 16px); background-color: transparent !important; color: #334155 !important; text-align: start; }
button.fpsi-k-tabs__tab:hover,
button.fpsi-k-tabs__tab:focus { background-color: var(--fpsi-tint-8, rgba(0, 174, 239, .08)) !important; color: var(--fpsi-ink, #003A4D) !important; }
button.fpsi-k-tabs__tab[aria-selected="true"],
button.fpsi-k-tabs__tab[aria-selected="true"]:hover,
button.fpsi-k-tabs__tab[aria-selected="true"]:focus { background-color: #DCE8F3 !important; color: var(--fpsi-ink, #003A4D) !important; }

button.fpsi-k-car__btn { display: grid; padding: 0; border: 0; border-radius: 50%; background-color: rgba(15, 23, 32, .82) !important; color: #fff !important; }
button.fpsi-k-car__btn:hover,
button.fpsi-k-car__btn:focus { background-color: #0F1720 !important; color: #fff !important; }

button.fpsi-k-photos__thumb { display: block; padding: 0; border: 2px solid transparent; border-radius: var(--fpsi-r-sm, 10px); background-color: transparent !important; }
button.fpsi-k-photos__thumb:hover,
button.fpsi-k-photos__thumb.is-on { border-color: var(--fpsi-primary, #00AEEF); }

/* Tautan: warna tema (toska) tidak boleh menimpa tombol & judul kartu. */
a.fpsi-k-car__item,
a.fpsi-k-car__item:hover { color: inherit; }

/* Tabel: gaya bawaan tema (padding, border, hover) ditimpa. */
.fpsi-k-table-wrap .fpsi-k-table { margin: 0; }
.fpsi-k-table-wrap .fpsi-k-table th,
.fpsi-k-table-wrap .fpsi-k-table td { font-size: .95rem; }
.fpsi-k-table-wrap .fpsi-k-table th { background-color: var(--fpsi-ink, #003A4D); color: #fff; border-bottom: 0; vertical-align: middle; }
.fpsi-k-table-wrap .fpsi-k-table td { border-bottom: 0; }
.fpsi-k-table-wrap .fpsi-k-table tbody tr:hover td { background-color: var(--fpsi-surface-2, #E9F6FB); }

/* Daftar & kutipan: margin bawaan tema dinolkan di komponen kita. */
.fpsi-k-card__meta dd { margin: 2px 0 0; }
.fpsi-k-zi ol.fpsi-k-zi__grid { margin: 14px 0 0; }
.fpsi-k-bullets { margin: 0; }
.fpsi-k-zi blockquote.fpsi-k-zi__quote { margin: 0 0 1em; font-size: 1em; }
.fpsi-k-car figure.fpsi-k-car__item { margin: 0; }
.fpsi-k-tabs__panel .fpsi-k-car { margin-top: 4px; }

/* ==========================================================================
   09. TABLET & HP
   ========================================================================== */

@media (max-width: 1024px) {
	.fpsi-k-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fpsi-k-single__grid { grid-template-columns: minmax(0, 1fr); }
	.fpsi-k-team { position: static; }
}

@media (max-width: 767px) {
	.fpsi-k-feature,
	.fpsi-k-feature--compact { grid-template-columns: minmax(0, 1fr); }
	.fpsi-k-feature__body { padding: 0 4px 6px; }
	.fpsi-k-feature--compact .fpsi-k-feature__media { aspect-ratio: 16 / 7; }
	.fpsi-k-feature--cover .fpsi-k-feature__media { aspect-ratio: auto; max-height: 420px; }

	.fpsi-k-grid { grid-template-columns: minmax(0, 1fr); }
	.fpsi-k-search { width: 100%; margin-inline-start: 0; }

	.fpsi-k-tabs { grid-template-columns: minmax(0, 1fr); }
	.fpsi-k-tabs__list {
		flex-direction: row;
		overflow-x: auto;
		padding: 12px;
		border-inline-end: 0;
		border-bottom: 1px solid var(--fpsi-line, #E2E8F0);
		scrollbar-width: thin;
	}
	.fpsi-k-tabs__tab { flex: none; white-space: nowrap; padding: 10px 14px; }

	.fpsi-k-car--strip .fpsi-k-car__item { width: 62%; }
	.fpsi-k-car__btn { width: 38px; height: 38px; }

	.fpsi-k-single__cols,
	.fpsi-k-about { grid-template-columns: minmax(0, 1fr); }

	/* Tabel jadi tumpukan kartu. */
	.fpsi-k-table-wrap { overflow: visible; border: 0; background: none; box-shadow: none; }
	.fpsi-k-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.fpsi-k-table,
	.fpsi-k-table tbody,
	.fpsi-k-table tr,
	.fpsi-k-table td { display: block; width: 100%; }
	.fpsi-k-table tr { margin-bottom: 12px; border: 1px solid var(--fpsi-line, #E2E8F0); border-radius: var(--fpsi-r-md, 16px); background: #fff; overflow: hidden; }
	.fpsi-k-table td { border-top: 0; padding: 10px 16px; background: #fff !important; }
	.fpsi-k-table td + td { border-top: 1px solid #F1F5F9; }
	.fpsi-k-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--fpsi-muted, #526478); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
	.fpsi-k-table__no { width: 100%; text-align: start !important; }
	.fpsi-k-table__empty td::before { content: none; }
}

@media (prefers-reduced-motion: reduce) {
	.fpsi-k-car__track { scroll-behavior: auto; }
	.fpsi-k-card, .fpsi-k-card__media img, .fpsi-k-car__img, .fpsi-k-btn { transition: none !important; }
}