/**
 * home.css — Stylesheet halaman home First Outbound
 *
 * File ini di-load HANYA di front page (lihat functions.php).
 * Berisi style untuk semua section custom home.
 *
 * Struktur file (akan diisi section by section):
 *   1. Reset/utilities
 *   2. Container & section base
 *   3. Komponen reusable (button, card, badge)
 *   4. Section-specific styles (hero, paket, USP, dll)
 *
 * Sekarang: hanya placeholder + base.
 * Section hero akan ditulis di iterasi berikut setelah user upload foto.
 */

/* ============================================== */
/*  CONTAINER & SECTION BASE                      */
/* ============================================== */

.fo-container {
	max-width: var(--fo-container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--fo-container-padding);
	padding-right: var(--fo-container-padding);
}

@media (min-width: 1024px) {
	.fo-container {
		padding-left: var(--fo-container-padding-lg);
		padding-right: var(--fo-container-padding-lg);
	}
}

.fo-container--narrow {
	max-width: var(--fo-container-narrow);
}

.fo-section {
	padding-top: var(--fo-section-py);
	padding-bottom: var(--fo-section-py);
	background: var(--fo-color-bg);
}

@media (min-width: 1024px) {
	.fo-section {
		padding-top: var(--fo-section-py-desktop);
		padding-bottom: var(--fo-section-py-desktop);
	}
}

/* Section variasi background */
.fo-section--alt   { background: var(--fo-color-bg-section); }
.fo-section--dark  { background: var(--fo-color-bg-dark); color: var(--fo-color-text-inverse); }

/* ============================================== */
/*  HEADING UTILITIES (responsive)                */
/* ============================================== */

.fo-h1 {
	font-size: var(--fo-text-4xl);
	font-weight: var(--fo-fw-extrabold);
	color: var(--fo-color-primary);
	letter-spacing: -0.02em;
}
.fo-h2 {
	font-size: var(--fo-text-3xl);
	font-weight: var(--fo-fw-bold);
	color: var(--fo-color-primary);
	letter-spacing: -0.01em;
}
.fo-h3 {
	font-size: var(--fo-text-xl);
	font-weight: var(--fo-fw-semibold);
	color: var(--fo-color-text-strong);
}

@media (min-width: 1024px) {
	.fo-h1 { font-size: var(--fo-text-5xl); }
	.fo-h2 { font-size: var(--fo-text-4xl); }
	.fo-h3 { font-size: var(--fo-text-2xl); }
}

.fo-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--fo-space-2);
	padding: var(--fo-space-2) var(--fo-space-3);
	font-size: var(--fo-text-sm);
	font-weight: var(--fo-fw-semibold);
	color: var(--fo-color-primary);
	background: var(--fo-color-primary-50);
	border-radius: var(--fo-radius-full);
	letter-spacing: 0.02em;
}

.fo-section-subhead {
	font-size: var(--fo-text-lg);
	color: var(--fo-color-text-muted);
	line-height: var(--fo-lh-normal);
	max-width: 720px;
}

/* ============================================== */
/*  BUTTON COMPONENTS                             */
/* ============================================== */

.fo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--fo-space-2);
	padding: var(--fo-space-3) var(--fo-space-6);
	font-family: var(--fo-font-body);
	font-size: var(--fo-text-base);
	font-weight: var(--fo-fw-semibold);
	border-radius: var(--fo-radius-full);
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	line-height: 1.2;
	transition: all var(--fo-duration-base) var(--fo-ease-out);
	white-space: nowrap;
}

/* Primary CTA — orange (paling kuat, untuk WhatsApp & action utama) */
.fo-btn--primary {
	background: var(--fo-color-accent);
	color: var(--fo-color-text-inverse);
	box-shadow: var(--fo-shadow-cta);
}
.fo-btn--primary:hover {
	background: var(--fo-color-accent-hover);
	transform: translateY(-2px);
	box-shadow: 0 12px 24px rgba(255, 107, 26, 0.35);
	color: var(--fo-color-text-inverse);
}

/* Secondary — navy bg (untuk action sekunder) */
.fo-btn--secondary {
	background: var(--fo-color-primary);
	color: var(--fo-color-text-inverse);
}
.fo-btn--secondary:hover {
	background: var(--fo-color-primary-hover);
	transform: translateY(-2px);
	color: var(--fo-color-text-inverse);
}

/* Outline navy — buat tombol tertiary */
.fo-btn--outline {
	background: transparent;
	color: var(--fo-color-primary);
	border-color: var(--fo-color-primary);
}
.fo-btn--outline:hover {
	background: var(--fo-color-primary);
	color: var(--fo-color-text-inverse);
}

/* WhatsApp button — green official */
.fo-btn--wa {
	background: var(--fo-color-wa);
	color: var(--fo-color-text-inverse);
}
.fo-btn--wa:hover {
	background: #1ebd57;
	transform: translateY(-2px);
	color: var(--fo-color-text-inverse);
}

/* Size variants */
.fo-btn--lg {
	padding: var(--fo-space-4) var(--fo-space-8);
	font-size: var(--fo-text-lg);
}
.fo-btn--sm {
	padding: var(--fo-space-2) var(--fo-space-4);
	font-size: var(--fo-text-sm);
}

/* ============================================== */
/*  BADGE                                         */
/* ============================================== */

.fo-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--fo-space-1);
	padding: var(--fo-space-1) var(--fo-space-3);
	font-size: var(--fo-text-xs);
	font-weight: var(--fo-fw-semibold);
	border-radius: var(--fo-radius-full);
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
.fo-badge--accent  { background: var(--fo-color-accent);   color: white; }
.fo-badge--primary { background: var(--fo-color-primary);  color: white; }
.fo-badge--success { background: var(--fo-color-success);  color: white; }
.fo-badge--warning { background: var(--fo-color-warning);  color: white; }
.fo-badge--soft    { background: var(--fo-color-accent-light); color: var(--fo-color-accent); }

/* ============================================== */
/*  CARD                                          */
/* ============================================== */

.fo-card {
	background: var(--fo-color-bg);
	border: 1px solid var(--fo-color-border);
	border-radius: var(--fo-radius-md);
	overflow: hidden;
	transition: transform var(--fo-duration-base) var(--fo-ease-out),
	            box-shadow var(--fo-duration-base) var(--fo-ease-out);
}
.fo-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--fo-shadow-lg);
}

/* ============================================== */
/*  GRID UTILITIES                                */
/* ============================================== */

.fo-grid {
	display: grid;
	gap: var(--fo-grid-gap);
}
.fo-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fo-grid--3 { grid-template-columns: 1fr; }
.fo-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 768px) {
	.fo-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.fo-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.fo-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================================== */
/*  ANIMATION ON SCROLL                           */
/* ============================================== */

.fo-fade-in {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity var(--fo-duration-slow) var(--fo-ease-out),
	            transform var(--fo-duration-slow) var(--fo-ease-out);
}
.fo-fade-in.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.fo-fade-in {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* STICKY WHATSAPP BUTTON: rules dipindah ke style.css (sitewide) */

/* ============================================== */
/*  HOME — FULL WIDTH OVERRIDE                    */
/*                                                */
/*  GeneratePress default: #page.grid-container   */
/*    has max-width 1200px + horizontal padding.  */
/*  Plus content-wrap / content-card add box      */
/*    styling. Untuk home, kita NETRALKAN semua. */
/* ============================================== */

/* Pakai class fo-fullwidth (added via body_class filter di home only)
   atau .home / .page-id-17 untuk safety fallback */

.fo-fullwidth #page,
.home #page,
.page-id-17 #page {
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100%;
}

.fo-fullwidth .site-content,
.fo-fullwidth #content,
.home .site-content,
.home #content,
.page-id-17 .site-content,
.page-id-17 #content {
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	display: block !important;  /* override grid jika ada */
	width: 100%;
}

.fo-fullwidth .content-area,
.home .content-area,
.page-id-17 .content-area {
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100%;
	float: none !important;
}

/* Sembunyikan sidebar (jika muncul) di home */
.fo-fullwidth .widget-area,
.fo-fullwidth #right-sidebar,
.fo-fullwidth #left-sidebar,
.home .widget-area,
.home #right-sidebar,
.home #left-sidebar {
	display: none !important;
}

/* Netralkan content-wrap & content-card (GP card layout) */
.fo-fullwidth .content-wrap,
.fo-fullwidth .content-card,
.home .content-wrap,
.home .content-card,
.page-id-17 .content-wrap,
.page-id-17 .content-card {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
	max-width: 100% !important;
	width: 100%;
}

/* Sembunyikan featured image header & breadcrumb di home */
.fo-fullwidth .featured-image,
.fo-fullwidth .page-header-image,
.fo-fullwidth .entry-header,
.fo-fullwidth .rank-math-breadcrumb,
.home .featured-image,
.home .page-header-image,
.home .entry-header,
.home .rank-math-breadcrumb,
.page-id-17 .featured-image,
.page-id-17 .page-header-image,
.page-id-17 .entry-header,
.page-id-17 .rank-math-breadcrumb {
	display: none !important;
}

/* Reset article wrapper */
.fo-fullwidth .inside-article,
.fo-fullwidth .entry-content,
.fo-fullwidth article.page,
.home .inside-article,
.home .entry-content,
.home article.page,
.page-id-17 .inside-article,
.page-id-17 .entry-content,
.page-id-17 article.page {
	margin: 0 !important;
	padding: 0 !important;
	max-width: 100% !important;
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
}

/* Pastikan main full width */
.fo-home {
	background: var(--fo-color-bg);
	width: 100%;
	max-width: 100%;
}

/* Reset entry-content typography defaults yang mungkin override */
.fo-home p {
	margin: 0 0 var(--fo-space-3) 0;
}
.fo-home p:last-child {
	margin-bottom: 0;
}

.fo-section__header {
	margin-bottom: var(--fo-space-12);
}
.fo-section__header--center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.fo-section__header--center .fo-section-subhead {
	margin-left: auto;
	margin-right: auto;
}

/* ============================================== */
/*  SECTION 1 — HERO                              */
/* ============================================== */

.fo-hero {
	padding-top: var(--fo-space-12);
	padding-bottom: var(--fo-space-12);
	background: var(--fo-color-bg);
	overflow: hidden;
}
@media (min-width: 1024px) {
	.fo-hero {
		padding-top: var(--fo-space-20);
		padding-bottom: var(--fo-space-20);
	}
}

.fo-hero__grid {
	display: grid;
	gap: var(--fo-space-10);
	align-items: center;
}
@media (min-width: 1024px) {
	.fo-hero__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--fo-space-16);
	}
}

.fo-hero__title {
	margin-top: var(--fo-space-4);
	margin-bottom: var(--fo-space-5);
}

.fo-hero__subhead {
	font-size: var(--fo-text-lg);
	color: var(--fo-color-text-muted);
	line-height: var(--fo-lh-normal);
	margin-bottom: var(--fo-space-8);
}
@media (min-width: 1024px) {
	.fo-hero__subhead { font-size: var(--fo-text-xl); }
}

.fo-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fo-space-3);
	margin-bottom: var(--fo-space-8);
}

.fo-hero__proof {
	display: flex;
	align-items: center;
	gap: var(--fo-space-3);
	flex-wrap: wrap;
}
.fo-hero__stars {
	display: inline-flex;
	gap: 2px;
	color: var(--fo-color-warning);
}
.fo-hero__proof-text {
	color: var(--fo-color-text-muted);
	font-size: var(--fo-text-sm);
}

.fo-hero__media {
	position: relative;
}
.fo-hero__image {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--fo-radius-lg);
	box-shadow: var(--fo-shadow-xl);
	background: var(--fo-color-bg-section);
}

.fo-hero__floating-badge {
	position: absolute;
	bottom: -20px;
	left: -20px;
	background: var(--fo-color-primary);
	color: white;
	padding: var(--fo-space-4) var(--fo-space-5);
	border-radius: var(--fo-radius-md);
	box-shadow: var(--fo-shadow-lg);
	display: flex;
	align-items: center;
	gap: var(--fo-space-3);
}
.fo-hero__badge-number {
	font-size: var(--fo-text-4xl);
	font-weight: var(--fo-fw-extrabold);
	color: var(--fo-color-accent);
	line-height: 1;
}
.fo-hero__badge-label {
	font-size: var(--fo-text-xs);
	font-weight: var(--fo-fw-semibold);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.2;
}

@media (max-width: 767px) {
	.fo-hero__floating-badge { display: none; }  /* sembunyi di mobile, focus to image */
}

/* ============================================== */
/*  SECTION 2 — TRUST BAR                         */
/* ============================================== */

.fo-trust-bar__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--fo-space-6);
	text-align: center;
}
@media (min-width: 768px) {
	.fo-trust-bar__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.fo-trust-bar__item {
	padding: var(--fo-space-4);
}
.fo-trust-bar__icon {
	width: 40px;
	height: 40px;
	color: var(--fo-color-accent);
	margin: 0 auto var(--fo-space-3);
}
.fo-trust-bar__icon svg { width: 100%; height: 100%; }
.fo-trust-bar__number {
	font-size: var(--fo-text-3xl);
	font-weight: var(--fo-fw-extrabold);
	color: var(--fo-color-primary);
	line-height: 1.1;
	margin-bottom: var(--fo-space-1);
}
@media (min-width: 1024px) {
	.fo-trust-bar__number { font-size: var(--fo-text-4xl); }
}
.fo-trust-bar__label {
	font-size: var(--fo-text-sm);
	color: var(--fo-color-text-muted);
	font-weight: var(--fo-fw-medium);
}

/* ============================================== */
/*  SECTION 3 — PAKET FEATURED                    */
/* ============================================== */

/* Tab filter (CSS-only via :checked + sibling selector) */
.fo-paket__filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fo-space-2);
	justify-content: center;
	margin-bottom: var(--fo-space-10);
}
.fo-paket__filter-input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.fo-paket__filter-label {
	display: inline-block;
	padding: var(--fo-space-3) var(--fo-space-5);
	background: var(--fo-color-bg);
	border: 2px solid var(--fo-color-border);
	border-radius: var(--fo-radius-full);
	font-size: var(--fo-text-sm);
	font-weight: var(--fo-fw-semibold);
	color: var(--fo-color-text-muted);
	cursor: pointer;
	transition: all var(--fo-duration-fast) var(--fo-ease-out);
	user-select: none;
}
.fo-paket__filter-label:hover {
	border-color: var(--fo-color-primary);
	color: var(--fo-color-primary);
}
.fo-paket__filter-input:checked + .fo-paket__filter-label {
	background: var(--fo-color-primary);
	border-color: var(--fo-color-primary);
	color: white;
}

/* Filter logic: ketika filter !semua dipilih, hide kartu yang tidak match.
   Pakai :has() selector (modern browsers) — dengan fallback show all. */
.fo-paket {
	scroll-margin-top: 80px; /* offset untuk anchor link */
}

@supports selector(:has(*)) {
	.fo-paket:has(#filter-corporate:checked)    .fo-paket-card:not([data-kategori="corporate"]),
	.fo-paket:has(#filter-family:checked)       .fo-paket-card:not([data-kategori="family"]),
	.fo-paket:has(#filter-anak-pelajar:checked) .fo-paket-card:not([data-kategori="anak-pelajar"]),
	.fo-paket:has(#filter-event:checked)        .fo-paket-card:not([data-kategori="event"]) {
		display: none;
	}
}

/* Grid 1 → 2 → 3 kolom responsive */
.fo-paket__grid {
	display: grid;
	gap: var(--fo-space-6);
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.fo-paket__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.fo-paket__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.fo-paket-card {
	background: var(--fo-color-bg);
	border: 1px solid var(--fo-color-border);
	border-radius: var(--fo-radius-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform var(--fo-duration-base) var(--fo-ease-out),
	            box-shadow var(--fo-duration-base) var(--fo-ease-out);
	scroll-margin-top: 80px;
}
.fo-paket-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--fo-shadow-lg);
}

.fo-paket-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--fo-color-bg-section);
}
.fo-paket-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--fo-duration-slow) var(--fo-ease-out);
}
.fo-paket-card:hover .fo-paket-card__image {
	transform: scale(1.05);
}

.fo-paket-card__badge {
	position: absolute;
	top: var(--fo-space-3);
	left: var(--fo-space-3);
}

.fo-paket-card__body {
	padding: var(--fo-space-5);
	display: flex;
	flex-direction: column;
	flex: 1;
}

.fo-paket-card__title {
	margin-bottom: var(--fo-space-3);
	color: var(--fo-color-primary);
	line-height: var(--fo-lh-snug);
}

.fo-paket-card__meta {
	list-style: none;
	margin: 0 0 var(--fo-space-3) 0;
	padding: 0;
	font-size: var(--fo-text-sm);
	color: var(--fo-color-text-muted);
	display: grid;
	gap: var(--fo-space-1);
}
.fo-paket-card__meta strong {
	color: var(--fo-color-text);
}

.fo-paket-card__desc {
	font-size: var(--fo-text-base);
	color: var(--fo-color-text);
	margin-bottom: var(--fo-space-4);
}

.fo-paket-card__details {
	margin-bottom: var(--fo-space-4);
	border-top: 1px solid var(--fo-color-border);
	padding-top: var(--fo-space-3);
}
.fo-paket-card__details summary {
	cursor: pointer;
	font-size: var(--fo-text-sm);
	font-weight: var(--fo-fw-semibold);
	color: var(--fo-color-primary);
	padding: var(--fo-space-2) 0;
	list-style: none;
	user-select: none;
}
.fo-paket-card__details summary::-webkit-details-marker { display: none; }
.fo-paket-card__details summary::after {
	content: '▾';
	float: right;
	transition: transform var(--fo-duration-fast);
}
.fo-paket-card__details[open] summary::after {
	transform: rotate(180deg);
}

.fo-paket-card__details h4 {
	font-size: var(--fo-text-sm);
	font-weight: var(--fo-fw-semibold);
	color: var(--fo-color-primary);
	margin: var(--fo-space-3) 0 var(--fo-space-2) 0;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.fo-paket-card__itinerary {
	margin: 0 0 var(--fo-space-3) 0;
	padding-left: 1.25rem;
	font-size: var(--fo-text-sm);
	color: var(--fo-color-text);
}
.fo-paket-card__itinerary li { margin-bottom: var(--fo-space-1); }

.fo-paket-card__termasuk {
	list-style: none;
	margin: 0 0 var(--fo-space-3) 0;
	padding: 0;
	font-size: var(--fo-text-sm);
}
.fo-paket-card__termasuk li {
	display: flex;
	align-items: flex-start;
	gap: var(--fo-space-2);
	margin-bottom: var(--fo-space-1);
}
.fo-paket-card__termasuk svg {
	color: var(--fo-color-success);
	margin-top: 2px;
	flex-shrink: 0;
}

.fo-paket-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fo-space-3);
	margin-top: auto;
	padding-top: var(--fo-space-3);
	border-top: 1px solid var(--fo-color-border);
}
.fo-paket-card__price {
	font-size: var(--fo-text-base);
	font-weight: var(--fo-fw-bold);
	color: var(--fo-color-accent);
	line-height: 1.2;
}

.fo-paket__cta-custom {
	margin-top: var(--fo-space-12);
	text-align: center;
	padding: var(--fo-space-6);
	background: var(--fo-color-bg-section);
	border-radius: var(--fo-radius-md);
}
.fo-paket__cta-custom p {
	margin: 0 0 var(--fo-space-4) 0;
	font-size: var(--fo-text-lg);
	color: var(--fo-color-text);
}

/* ============================================== */
/*  SECTION 4 — USP                               */
/* ============================================== */

.fo-usp__grid {
	display: grid;
	gap: var(--fo-space-6);
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.fo-usp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.fo-usp__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.fo-usp__item {
	background: var(--fo-color-bg);
	padding: var(--fo-space-6);
	border-radius: var(--fo-radius-md);
	border: 1px solid var(--fo-color-border);
	text-align: center;
	transition: transform var(--fo-duration-base);
}
.fo-usp__item:hover {
	transform: translateY(-4px);
	border-color: var(--fo-color-primary-light);
}

.fo-usp__icon {
	width: 56px;
	height: 56px;
	margin: 0 auto var(--fo-space-4);
	color: var(--fo-color-accent);
	background: var(--fo-color-accent-light);
	border-radius: var(--fo-radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
}
.fo-usp__icon svg { width: 100%; height: 100%; }

.fo-usp__judul {
	font-size: var(--fo-text-lg);
	font-weight: var(--fo-fw-bold);
	color: var(--fo-color-primary);
	margin-bottom: var(--fo-space-3);
}

.fo-usp__desc {
	font-size: var(--fo-text-sm);
	color: var(--fo-color-text-muted);
	line-height: var(--fo-lh-normal);
	margin: 0;
}

/* ============================================== */
/*  SECTION 5 — PROSES PEMESANAN                  */
/* ============================================== */

.fo-proses__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--fo-space-6);
	grid-template-columns: 1fr;
	counter-reset: proses-step;
	position: relative;
}
@media (min-width: 1024px) {
	.fo-proses__steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--fo-space-4);
	}
}

.fo-proses__step {
	position: relative;
	text-align: center;
	padding: var(--fo-space-6) var(--fo-space-4);
	background: var(--fo-color-bg);
	border-radius: var(--fo-radius-md);
	border: 1px solid var(--fo-color-border);
}

/* Garis penghubung antar step (desktop only) */
@media (min-width: 1024px) {
	.fo-proses__step:not(:last-child)::after {
		content: '';
		position: absolute;
		top: 50%;
		right: calc(var(--fo-space-4) * -1);
		width: var(--fo-space-4);
		height: 2px;
		background: var(--fo-color-accent);
		transform: translateY(-50%);
	}
}

.fo-proses__num {
	width: 40px;
	height: 40px;
	margin: 0 auto var(--fo-space-3);
	background: var(--fo-color-primary);
	color: white;
	border-radius: var(--fo-radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: var(--fo-fw-extrabold);
	font-size: var(--fo-text-lg);
}
.fo-proses__icon {
	width: 32px;
	height: 32px;
	margin: 0 auto var(--fo-space-3);
	color: var(--fo-color-accent);
}
.fo-proses__icon svg { width: 100%; height: 100%; }
.fo-proses__judul {
	font-size: var(--fo-text-base);
	font-weight: var(--fo-fw-bold);
	color: var(--fo-color-primary);
	margin-bottom: var(--fo-space-2);
}
.fo-proses__desc {
	font-size: var(--fo-text-sm);
	color: var(--fo-color-text-muted);
	margin: 0;
	line-height: var(--fo-lh-normal);
}

/* ============================================== */
/*  SECTION 6 — TESTIMONI                         */
/* ============================================== */

.fo-testimoni__widget {
	max-width: 1024px;
	margin: 0 auto;
}
.fo-testimoni__cta {
	text-align: center;
	margin-top: var(--fo-space-8);
}

/* ============================================== */
/*  SECTION 7 — GALLERY                           */
/* ============================================== */

.fo-gallery__grid {
	display: grid;
	gap: var(--fo-space-3);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
	.fo-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.fo-gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.fo-gallery__item {
	margin: 0;
	overflow: hidden;
	border-radius: var(--fo-radius-md);
	aspect-ratio: 1 / 1;
	background: var(--fo-color-bg-section);
}
.fo-gallery__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--fo-duration-slow) var(--fo-ease-out);
}
.fo-gallery__item:hover .fo-gallery__image {
	transform: scale(1.08);
}

.fo-gallery__cta {
	text-align: center;
	margin-top: var(--fo-space-8);
}

/* ============================================== */
/*  SECTION 8 — ARTIKEL TERBARU                   */
/* ============================================== */

.fo-artikel__grid {
	display: grid;
	gap: var(--fo-space-6);
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.fo-artikel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.fo-artikel__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.fo-artikel__card {
	background: var(--fo-color-bg);
	border: 1px solid var(--fo-color-border);
	border-radius: var(--fo-radius-md);
	overflow: hidden;
	transition: transform var(--fo-duration-base);
}
.fo-artikel__card:hover {
	transform: translateY(-4px);
	box-shadow: var(--fo-shadow-md);
}

.fo-artikel__link {
	display: block;
	text-decoration: none;
	color: inherit;
}
.fo-artikel__link:hover { color: inherit; }

.fo-artikel__media {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--fo-color-bg-section);
}
.fo-artikel__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--fo-duration-slow) var(--fo-ease-out);
}
.fo-artikel__card:hover .fo-artikel__image { transform: scale(1.05); }

.fo-artikel__body {
	padding: var(--fo-space-5);
}
.fo-artikel__title {
	margin: var(--fo-space-3) 0 var(--fo-space-2) 0;
	color: var(--fo-color-primary);
	line-height: var(--fo-lh-snug);
}
.fo-artikel__excerpt {
	font-size: var(--fo-text-sm);
	color: var(--fo-color-text-muted);
	margin-bottom: var(--fo-space-3);
}
.fo-artikel__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--fo-space-1);
	font-size: var(--fo-text-sm);
	font-weight: var(--fo-fw-semibold);
	color: var(--fo-color-accent);
}
.fo-artikel__cta-all {
	text-align: center;
	margin-top: var(--fo-space-8);
}

/* ============================================== */
/*  SECTION 9 — FAQ                               */
/* ============================================== */

.fo-faq__list {
	display: grid;
	gap: var(--fo-space-3);
}
.fo-faq__item {
	background: var(--fo-color-bg);
	border: 1px solid var(--fo-color-border);
	border-radius: var(--fo-radius-md);
	overflow: hidden;
}
.fo-faq__item[open] {
	border-color: var(--fo-color-primary);
	box-shadow: var(--fo-shadow-sm);
}

.fo-faq__question {
	padding: var(--fo-space-4) var(--fo-space-5);
	cursor: pointer;
	font-weight: var(--fo-fw-semibold);
	color: var(--fo-color-primary);
	font-size: var(--fo-text-base);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fo-space-3);
	list-style: none;
	user-select: none;
	transition: background var(--fo-duration-fast);
}
.fo-faq__question::-webkit-details-marker { display: none; }
.fo-faq__question:hover { background: var(--fo-color-bg-section); }
@media (min-width: 1024px) {
	.fo-faq__question { font-size: var(--fo-text-lg); }
}
.fo-faq__icon {
	flex-shrink: 0;
	color: var(--fo-color-accent);
	transition: transform var(--fo-duration-base);
}
.fo-faq__item[open] .fo-faq__icon {
	transform: rotate(180deg);
}

.fo-faq__answer {
	padding: 0 var(--fo-space-5) var(--fo-space-5);
	color: var(--fo-color-text);
	line-height: var(--fo-lh-normal);
	font-size: var(--fo-text-base);
}

/* ============================================== */
/*  SECTION 10 — CTA AKHIR + FORM                 */
/* ============================================== */

.fo-cta-form {
	color: var(--fo-color-text-inverse);
}
.fo-cta-form__grid {
	display: grid;
	gap: var(--fo-space-10);
	align-items: start;
}
@media (min-width: 1024px) {
	.fo-cta-form__grid {
		grid-template-columns: 3fr 2fr;
		gap: var(--fo-space-12);
	}
}

.fo-cta-form__title {
	color: white;
	margin-bottom: var(--fo-space-5);
}
.fo-cta-form__lead {
	font-size: var(--fo-text-lg);
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: var(--fo-space-6);
	line-height: var(--fo-lh-normal);
}

.fo-cta-form__contact {
	list-style: none;
	margin: var(--fo-space-6) 0 0 0;
	padding: 0;
	display: grid;
	gap: var(--fo-space-3);
}
.fo-cta-form__contact li {
	display: flex;
	align-items: center;
	gap: var(--fo-space-3);
	color: rgba(255, 255, 255, 0.9);
	font-size: var(--fo-text-base);
}
.fo-cta-form__contact svg { color: var(--fo-color-accent); flex-shrink: 0; }
.fo-cta-form__contact a {
	color: white;
	text-decoration: none;
}
.fo-cta-form__contact a:hover { color: var(--fo-color-accent); }

.fo-cta-form__formbox {
	background: white;
	color: var(--fo-color-text);
	padding: var(--fo-space-8);
	border-radius: var(--fo-radius-lg);
	box-shadow: var(--fo-shadow-xl);
}
.fo-cta-form__form-title {
	color: var(--fo-color-primary);
	font-size: var(--fo-text-2xl);
	font-weight: var(--fo-fw-bold);
	margin-bottom: var(--fo-space-2);
}
.fo-cta-form__form-sub {
	font-size: var(--fo-text-sm);
	color: var(--fo-color-text-muted);
	margin-bottom: var(--fo-space-5);
}

.fo-cta-form__placeholder {
	padding: var(--fo-space-5);
	background: var(--fo-color-bg-section);
	border: 2px dashed var(--fo-color-border-strong);
	border-radius: var(--fo-radius-md);
	color: var(--fo-color-text-muted);
	font-size: var(--fo-text-sm);
}
.fo-cta-form__placeholder code {
	background: var(--fo-color-primary-50);
	padding: 2px 6px;
	border-radius: 4px;
	color: var(--fo-color-primary);
	font-size: 0.9em;
}

/* Style untuk Contact Form 7 dalam container ini */
.fo-cta-form__formbox .wpcf7 input[type="text"],
.fo-cta-form__formbox .wpcf7 input[type="email"],
.fo-cta-form__formbox .wpcf7 input[type="tel"],
.fo-cta-form__formbox .wpcf7 input[type="number"],
.fo-cta-form__formbox .wpcf7 input[type="date"],
.fo-cta-form__formbox .wpcf7 textarea {
	width: 100%;
	padding: var(--fo-space-3);
	border: 1px solid var(--fo-color-border);
	border-radius: var(--fo-radius-sm);
	font-size: var(--fo-text-base);
	font-family: var(--fo-font-body);
	margin-bottom: var(--fo-space-3);
}
.fo-cta-form__formbox .wpcf7 input:focus,
.fo-cta-form__formbox .wpcf7 textarea:focus {
	outline: none;
	border-color: var(--fo-color-primary);
	box-shadow: 0 0 0 3px rgba(15, 44, 89, 0.1);
}
.fo-cta-form__formbox .wpcf7 input[type="submit"] {
	background: var(--fo-color-accent);
	color: white;
	padding: var(--fo-space-3) var(--fo-space-6);
	border: none;
	border-radius: var(--fo-radius-full);
	font-weight: var(--fo-fw-bold);
	cursor: pointer;
	font-size: var(--fo-text-base);
	width: 100%;
	transition: background var(--fo-duration-fast);
}
.fo-cta-form__formbox .wpcf7 input[type="submit"]:hover {
	background: var(--fo-color-accent-hover);
}

/* ============================================== */
/*  MOBILE RESPONSIVE FIXES                       */
/*                                                */
/*  Override agar tombol & komponen tidak         */
/*  overflow di layar kecil (<640px) terutama     */
/*  device 320-375px.                             */
/* ============================================== */

/* Safety net: cegah horizontal scroll dari overflow apa pun */
html, body { overflow-x: hidden; }

/* Image safety: pastikan semua img responsive */
.fo-home img,
.fo-home video,
.fo-home iframe {
	max-width: 100%;
	height: auto;
}

/* Word-break untuk long URL / kode di placeholder */
.fo-home code,
.fo-home pre {
	word-break: break-word;
	overflow-wrap: break-word;
}

/* ============================================== */
/*  BREAKPOINT: <640px (small phone)              */
/* ============================================== */
@media (max-width: 639px) {

	/* Container: padding lebih kecil tapi cukup */
	.fo-container {
		padding-left: var(--fo-space-4);
		padding-right: var(--fo-space-4);
	}

	/* Section padding lebih kecil di mobile */
	.fo-section {
		padding-top: var(--fo-space-10);
		padding-bottom: var(--fo-space-10);
	}
	.fo-hero {
		padding-top: var(--fo-space-8);
		padding-bottom: var(--fo-space-10);
	}
	.fo-section__header { margin-bottom: var(--fo-space-8); }

	/* Heading scale down */
	.fo-h1 { font-size: var(--fo-text-3xl); }   /* 30px */
	.fo-h2 { font-size: var(--fo-text-2xl); }   /* 24px */
	.fo-h3 { font-size: var(--fo-text-lg); }    /* 18px */
	.fo-section-subhead { font-size: var(--fo-text-base); }

	/* TOMBOL: izinkan wrap text di mobile (kalau perlu) */
	.fo-btn {
		white-space: normal;
		line-height: 1.3;
		text-align: center;
	}

	/* Tombol size lg: padding lebih ringkas */
	.fo-btn--lg {
		padding: var(--fo-space-3) var(--fo-space-5);
		font-size: var(--fo-text-base);
	}

	/* === HERO === */
	.fo-hero__title { margin-top: var(--fo-space-3); }
	.fo-hero__subhead { font-size: var(--fo-text-base); margin-bottom: var(--fo-space-6); }

	/* Hero CTA: stack vertikal full-width */
	.fo-hero__cta {
		flex-direction: column;
		align-items: stretch;
		gap: var(--fo-space-3);
	}
	.fo-hero__cta .fo-btn {
		width: 100%;
		justify-content: center;
	}

	/* Hero proof text wrapping */
	.fo-hero__proof {
		font-size: var(--fo-text-xs);
	}

	/* Hero eyebrow badge: wrap */
	.fo-eyebrow {
		font-size: var(--fo-text-xs);
		flex-wrap: wrap;
		max-width: 100%;
	}

	/* === TRUST BAR === */
	.fo-trust-bar__number { font-size: var(--fo-text-2xl); }
	.fo-trust-bar__label { font-size: var(--fo-text-xs); }
	.fo-trust-bar__grid { gap: var(--fo-space-4); }
	.fo-trust-bar__item { padding: var(--fo-space-3); }

	/* === PAKET === */
	/* Filter tab: scrollable horizontal saat banyak */
	.fo-paket__filter {
		flex-wrap: nowrap;
		overflow-x: auto;
		justify-content: flex-start;
		padding-bottom: var(--fo-space-2);
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}
	.fo-paket__filter-label {
		flex-shrink: 0;
		padding: var(--fo-space-2) var(--fo-space-4);
		font-size: var(--fo-text-xs);
	}

	/* Paket card body padding ringkas */
	.fo-paket-card__body { padding: var(--fo-space-4); }

	/* Paket card footer: stack price + button vertikal */
	.fo-paket-card__footer {
		flex-direction: column;
		align-items: stretch;
		gap: var(--fo-space-3);
	}
	.fo-paket-card__footer .fo-btn {
		width: 100%;
		justify-content: center;
	}
	.fo-paket-card__price { font-size: var(--fo-text-base); }
	.fo-paket-card__meta { font-size: var(--fo-text-xs); }

	/* CTA custom paket */
	.fo-paket__cta-custom { padding: var(--fo-space-5); }
	.fo-paket__cta-custom p { font-size: var(--fo-text-base); }

	/* === USP === */
	.fo-usp__item { padding: var(--fo-space-5); }
	.fo-usp__icon {
		width: 48px;
		height: 48px;
		padding: 12px;
	}

	/* === PROSES === */
	.fo-proses__step {
		padding: var(--fo-space-5) var(--fo-space-4);
	}
	.fo-proses__num { width: 36px; height: 36px; font-size: var(--fo-text-base); }
	.fo-proses__icon { width: 28px; height: 28px; }

	/* === FAQ === */
	.fo-faq__question {
		font-size: var(--fo-text-base);
		padding: var(--fo-space-3) var(--fo-space-4);
		gap: var(--fo-space-2);
	}
	.fo-faq__answer {
		padding: 0 var(--fo-space-4) var(--fo-space-4);
		font-size: var(--fo-text-sm);
		word-wrap: break-word;
	}

	/* === CTA FORM === */
	.fo-cta-form__formbox { padding: var(--fo-space-5); }
	.fo-cta-form__lead { font-size: var(--fo-text-base); }
	.fo-cta-form__contact li { font-size: var(--fo-text-sm); }
	.fo-cta-form .fo-btn--lg { width: 100%; justify-content: center; }

	/* === GALLERY: 2 col tetap, gap kecil === */
	.fo-gallery__grid { gap: var(--fo-space-2); }

	/* === ARTIKEL === */
	.fo-artikel__body { padding: var(--fo-space-4); }
	.fo-artikel__title { font-size: var(--fo-text-base); }

	/* STICKY WA mobile: rules dipindah ke style.css */
}

/* ============================================== */
/*  BREAKPOINT: <380px (very small phone)         */
/* ============================================== */
@media (max-width: 379px) {
	/* Sangat small: heading lebih kecil */
	.fo-h1 { font-size: 1.625rem; }   /* 26px */
	.fo-h2 { font-size: 1.375rem; }   /* 22px */

	/* Tombol icon-only di sangat kecil (kalau text terlalu panjang) */
	.fo-btn { font-size: var(--fo-text-sm); padding: var(--fo-space-2) var(--fo-space-4); }
	.fo-btn--lg { font-size: var(--fo-text-base); padding: var(--fo-space-3) var(--fo-space-4); }

	/* Container padding super kecil */
	.fo-container {
		padding-left: var(--fo-space-3);
		padding-right: var(--fo-space-3);
	}

	/* Trust bar: 2 col masih cukup */
	.fo-trust-bar__number { font-size: var(--fo-text-xl); }
}

/* ============================================== */
/*  LEAD FORM (custom, replace CF7)               */
/* ============================================== */
.fo-lead-form { display: flex; flex-direction: column; gap: var(--fo-space-3); }

.fo-lead-form .fo-form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.fo-lead-form .fo-form-row-2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--fo-space-3);
}

.fo-lead-form label {
	font-weight: 600;
	font-size: 0.9rem;
	color: #1a1a1a;
}

.fo-lead-form .fo-req {
	color: #dc3545;
	font-weight: 700;
}

.fo-lead-form input[type="text"],
.fo-lead-form input[type="email"],
.fo-lead-form input[type="number"],
.fo-lead-form input[type="date"],
.fo-lead-form textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid #d4d4d8;
	border-radius: 6px;
	font-size: 0.95rem;
	font-family: inherit;
	background: #fff;
	transition: border-color 150ms ease, box-shadow 150ms ease;
	box-sizing: border-box;
}

.fo-lead-form input:focus,
.fo-lead-form textarea:focus {
	outline: none;
	border-color: var(--fo-color-accent, #FF6B1A);
	box-shadow: 0 0 0 3px rgba(255, 107, 26, 0.15);
}

.fo-lead-form textarea {
	resize: vertical;
	min-height: 80px;
}

.fo-form-submit {
	margin-top: var(--fo-space-2);
	width: 100%;
	cursor: pointer;
	border: none;
}

.fo-form-note {
	font-size: 0.8rem;
	color: #6b7280;
	text-align: center;
	margin-top: 8px;
}

@media (max-width: 640px) {
	.fo-lead-form .fo-form-row-2col {
		grid-template-columns: 1fr;
	}
}