/* ============================================================================
   AspriAgen Landing: gaya tampilan tema
   ----------------------------------------------------------------------------
   Daftar isi
     1.  Token warna & dasar
     2.  Tipografi & alat bantu
     3.  Tombol
     4.  Bilah navigasi
     5.  Bagian pembuka (hero)
     6.  Bilah statistik
     7.  Kerangka bagian
     8.  Masalahnya
     9.  Solusinya
     10. Galeri tampilan aplikasi
     11. Fitur
     12. Cara kerjanya
     13. Blok perusahaan agency
     14. Harga
     15. Pertanyaan umum
     16. Ajakan penutup
     17. Kaki halaman
     18. Tombol WhatsApp mengapung
     19. Halaman biasa, 404, arsip
     20. Kelas bawaan WordPress
   ========================================================================== */

/* ============================================================ 1. TOKEN */

:root {
	/* Warna inti, dapat diubah dari Appearance > Customize */
	--ag-primary:        #0F6E56;
	--ag-primary-dark:   #0A5442;
	--ag-primary-soft:   #E6F1DA;
	--ag-primary-mid:    #C0DD97;
	--ag-accent:         #EF9F27;
	--ag-accent-soft:    #FDF1DC;

	--ag-secondary:      #1D9E75;
	--ag-secondary-soft: #DFF1EA;

	--ag-bg:        #FFFFFF;
	--ag-panel:     #F2F7F4;
	--ag-panel-2:   #E9F2ED;
	--ag-line:      #DCE7E1;
	--ag-line-soft: #EDF3EF;

	--ag-text:      #0B1F17;
	--ag-muted:     #5C6B63;
	--ag-muted-2:   #8A9691;
	--ag-danger:    #C0392B;

	--ag-radius:    16px;
	--ag-radius-sm: 11px;
	--ag-radius-lg: 26px;

	--ag-shadow-sm: 0 1px 2px rgba(11, 31, 23, .05), 0 1px 3px rgba(11, 31, 23, .04);
	--ag-shadow:    0 6px 24px rgba(11, 31, 23, .08);
	--ag-shadow-lg: 0 24px 64px rgba(11, 31, 23, .16);

	--ag-font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--ag-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--ag-wrap: 1120px;
	--ag-nav-h: 68px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--ag-nav-h) + 12px);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--ag-bg);
	color: var(--ag-text);
	font-family: var(--ag-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

/* Jangan biarkan gaya tema mengganggu dasbor WordPress. */
body.wp-admin,
body.block-editor-page { font-family: inherit; }

/* ==================================================== 2. TIPOGRAFI */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ag-font-display);
	margin: 0;
	line-height: 1.18;
	letter-spacing: -.015em;
	font-weight: 700;
	color: var(--ag-text);
}

p { margin: 0; }

a {
	color: var(--ag-primary);
	text-decoration: none;
	transition: color .16s ease;
}

a:hover { color: var(--ag-primary-dark); }

.ag-h2 {
	font-size: clamp(25px, 4.4vw, 38px);
	max-width: 22ch;
}

.ag-h2--light { color: #fff; }

.ag-wrap {
	width: 100%;
	max-width: var(--ag-wrap);
	margin: 0 auto;
	padding: 0 20px;
}

.ag-wrap--narrow { max-width: 820px; }

.ag-anchor {
	display: block;
	position: relative;
	top: calc(-1 * (var(--ag-nav-h) + 8px));
	visibility: hidden;
}

.ag-kicker {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ag-secondary);
	margin-bottom: 12px;
}

.ag-kicker--light { color: var(--ag-primary-mid); }

.ag-micro {
	font-size: 13.5px;
	color: var(--ag-muted);
	margin-top: 14px;
}

.ag-src {
	font-size: 12.5px;
	color: var(--ag-muted-2);
	margin-top: 20px;
	line-height: 1.6;
}

.ag-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--ag-primary);
	color: #fff;
	padding: 12px 18px;
	border-radius: 0 0 var(--ag-radius-sm) 0;
	font-weight: 600;
}

.ag-skip:focus { left: 0; color: #fff; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

:focus-visible {
	outline: 3px solid var(--ag-secondary);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ========================================================= 3. TOMBOL */

.ag-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 48px;
	padding: 0 22px;
	border: 1px solid transparent;
	border-radius: 12px;
	font-family: var(--ag-font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	white-space: nowrap;
	transition: transform .1s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}

.ag-btn svg { width: 19px; height: 19px; flex: none; }
.ag-btn:active { transform: scale(.985); }

.ag-btn--primary {
	background: var(--ag-primary);
	color: #fff;
	box-shadow: 0 4px 16px rgba(15, 110, 86, .22);
}
.ag-btn--primary:hover {
	background: var(--ag-primary-dark);
	color: #fff;
	box-shadow: 0 8px 24px rgba(15, 110, 86, .28);
}

.ag-btn--accent {
	background: var(--ag-accent);
	color: #3A2400;
	box-shadow: 0 4px 16px rgba(239, 159, 39, .3);
}
.ag-btn--accent:hover { background: #E08F12; color: #3A2400; }

.ag-btn--outline {
	background: #fff;
	border-color: var(--ag-line);
	color: var(--ag-text);
}
.ag-btn--outline:hover { border-color: var(--ag-secondary); color: var(--ag-primary); }

.ag-btn--lg { min-height: 56px; padding: 0 28px; font-size: 16px; border-radius: 14px; }
.ag-btn--sm { min-height: 42px; padding: 0 17px; font-size: 14px; border-radius: 10px; }
.ag-btn--block { width: 100%; }

/* ============================================================ 4. NAV */

.ag-nav {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(255, 255, 255, .9);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--ag-line);
	transition: box-shadow .2s ease;
}

.ag-nav.is-scrolled { box-shadow: 0 6px 24px rgba(11, 31, 23, .09); }

.ag-nav__in {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: var(--ag-nav-h);
}

.ag-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--ag-font-display);
	font-weight: 700;
	font-size: 19px;
	color: var(--ag-primary);
	flex: none;
}
.ag-brand:hover { color: var(--ag-primary); }

.ag-brand__mark { display: inline-flex; }
.ag-brand__mark svg { width: 32px; height: 32px; }
.ag-brand__logo { border-radius: 9px; object-fit: contain; }

.ag-brand--light { color: #fff; }
.ag-brand--light:hover { color: #fff; }

.ag-nav__menu {
	display: flex;
	align-items: center;
	gap: 26px;
	margin-left: auto;
}

.ag-nav__links {
	display: none;
	align-items: center;
	gap: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ag-nav__links a {
	color: var(--ag-muted);
	font-size: 14.5px;
	font-weight: 500;
}
.ag-nav__links a:hover { color: var(--ag-primary); }

.ag-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	width: 44px;
	height: 44px;
	padding: 0;
	background: #fff;
	border: 1px solid var(--ag-line);
	border-radius: 11px;
	cursor: pointer;
	color: var(--ag-text);
}

.ag-nav__bars {
	display: grid;
	gap: 4px;
	width: 18px;
}
.ag-nav__bars i {
	display: block;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}
.ag-nav__toggle[aria-expanded="true"] .ag-nav__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.ag-nav__toggle[aria-expanded="true"] .ag-nav__bars i:nth-child(2) { opacity: 0; }
.ag-nav__toggle[aria-expanded="true"] .ag-nav__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Menu ponsel */
@media (max-width: 899px) {
	.ag-nav__menu {
		position: fixed;
		inset: var(--ag-nav-h) 0 auto 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: #fff;
		border-bottom: 1px solid var(--ag-line);
		box-shadow: 0 20px 40px rgba(11, 31, 23, .12);
		padding: 8px 20px 20px;
		max-height: calc(100vh - var(--ag-nav-h));
		overflow-y: auto;
		display: none;
	}
	.ag-nav__menu.is-open { display: flex; }

	.ag-nav__links {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin: 0 0 14px;
	}

	.ag-nav__links a {
		display: block;
		padding: 14px 4px;
		font-size: 16px;
		border-bottom: 1px solid var(--ag-line-soft);
	}
}

@media (min-width: 900px) {
	.ag-nav__toggle { display: none; }
	.ag-nav__links { display: flex; }
	.ag-nav__menu { display: flex !important; }
}

/* =========================================================== 5. HERO */

.ag-hero {
	position: relative;
	padding: 44px 0 0;
	background:
		radial-gradient(1000px 480px at 6% -8%, var(--ag-primary-soft) 0%, rgba(230, 241, 218, 0) 62%),
		radial-gradient(780px 440px at 100% 2%, #EAF5F0 0%, rgba(234, 245, 240, 0) 58%),
		var(--ag-bg);
	overflow: hidden;
}

.ag-hero__in {
	display: grid;
	gap: 44px;
	align-items: center;
}

.ag-eyebrow {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ag-primary);
	background: var(--ag-primary-soft);
	border-radius: 999px;
	padding: 7px 15px;
	margin-bottom: 20px;
}

.ag-hero__title {
	font-size: clamp(31px, 6.2vw, 54px);
	font-weight: 700;
	max-width: 17ch;
}

.ag-lede {
	font-size: clamp(16px, 2.3vw, 18.5px);
	color: var(--ag-muted);
	margin-top: 18px;
	max-width: 60ch;
}
.ag-lede p { margin: 0 0 .8em; }
.ag-lede p:last-child { margin-bottom: 0; }
.ag-lede strong { color: var(--ag-text); font-weight: 600; }

.ag-checklist {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.ag-checklist li {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-size: 15.5px;
}

.ag-checklist__ico {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	border-radius: 50%;
	background: var(--ag-secondary-soft);
	color: var(--ag-primary);
}
.ag-checklist__ico svg { width: 13px; height: 13px; stroke-width: 3; }

.ag-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}

/* Visual: ponsel */
.ag-hero__visual {
	position: relative;
	display: flex;
	justify-content: center;
	padding: 10px 0 26px;
}

.ag-glow {
	position: absolute;
	inset: 8% 4% 0;
	background: radial-gradient(closest-side, rgba(29, 158, 117, .22), rgba(29, 158, 117, 0));
	filter: blur(28px);
	z-index: 0;
}

.ag-phone {
	position: relative;
	z-index: 1;
	width: 288px;
	max-width: 82vw;
	background: #0B1F17;
	border-radius: 40px;
	padding: 9px;
	box-shadow: var(--ag-shadow-lg);
}

.ag-phone__notch {
	position: absolute;
	top: 15px;
	left: 50%;
	transform: translateX(-50%);
	width: 84px;
	height: 20px;
	background: #0B1F17;
	border-radius: 999px;
	z-index: 2;
}

.ag-phone__screen {
	width: 100%;
	border-radius: 32px;
	background: #fff;
	display: block;
}

.ag-floatcard {
	position: absolute;
	z-index: 3;
	left: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 260px;
	background: #fff;
	border: 1px solid var(--ag-line);
	border-radius: 14px;
	padding: 11px 14px;
	box-shadow: var(--ag-shadow);
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--ag-muted);
}

.ag-floatcard__dot {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--ag-accent);
	box-shadow: 0 0 0 4px var(--ag-accent-soft);
}

.ag-floatcard__txt b {
	display: block;
	font-size: 11.5px;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--ag-primary);
}

@media (min-width: 900px) {
	.ag-hero { padding-top: 66px; }
	.ag-hero__in { grid-template-columns: 1.05fr .95fr; gap: 56px; }
	.ag-floatcard { left: -14px; bottom: 34px; }
}

/* ========================================================= 6. STATS */

.ag-stats { padding: 0 0 8px; }

.ag-stats__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	margin-top: 46px;
	background: var(--ag-line);
	border: 1px solid var(--ag-line);
	border-radius: var(--ag-radius);
	overflow: hidden;
}

.ag-stats__item {
	background: #fff;
	padding: 18px;
}

.ag-stats__item b {
	display: block;
	font-family: var(--ag-font-display);
	font-size: clamp(21px, 3.4vw, 27px);
	font-weight: 700;
	line-height: 1.15;
	color: var(--ag-primary);
}

.ag-stats__item span {
	display: block;
	font-size: 13px;
	line-height: 1.45;
	color: var(--ag-muted);
	margin-top: 5px;
}

.ag-stats__item.is-warn b { color: #B26A00; }

@media (min-width: 760px) {
	.ag-stats__grid { grid-template-columns: repeat(4, 1fr); margin-top: 60px; }
}

/* ======================================================= 7. SECTION */

.ag-section { padding: 74px 0; }
.ag-section--alt { background: var(--ag-panel); }
.ag-section--shot { background: linear-gradient(180deg, #fff 0%, var(--ag-panel) 100%); }

.ag-section__lede {
	font-size: 17px;
	color: var(--ag-muted);
	margin-top: 16px;
	max-width: 68ch;
}

.ag-grid {
	display: grid;
	gap: 16px;
	margin-top: 38px;
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {
	.ag-grid--3, .ag-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
	.ag-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.ag-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ======================================================== 8. MASALAH */

.ag-pain {
	background: #fff;
	border: 1px solid var(--ag-line);
	border-radius: var(--ag-radius);
	padding: 24px 22px;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ag-pain:hover {
	border-color: var(--ag-primary-mid);
	box-shadow: var(--ag-shadow);
	transform: translateY(-2px);
}

.ag-pain__n {
	font-family: var(--ag-font-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--ag-secondary);
}

.ag-pain h3 { font-size: 16.5px; font-weight: 600; margin: 10px 0 8px; }
.ag-pain p { font-size: 14.5px; color: var(--ag-muted); }

.ag-callout {
	margin-top: 32px;
	padding: 20px 24px;
	border-left: 4px solid var(--ag-secondary);
	border-top: 1px solid var(--ag-line);
	border-right: 1px solid var(--ag-line);
	border-bottom: 1px solid var(--ag-line);
	border-radius: 0 var(--ag-radius) var(--ag-radius) 0;
	background: #fff;
	font-size: 16px;
	color: var(--ag-muted);
}
.ag-callout strong { color: var(--ag-text); }

/* ======================================================== 9. SOLUSI */

.ag-pillar {
	background: #fff;
	border: 1px solid var(--ag-line);
	border-radius: var(--ag-radius);
	padding: 28px 26px;
}

.ag-pillar__ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 18px;
	border-radius: 14px;
	background: var(--ag-primary-soft);
	color: var(--ag-primary);
}

.ag-pillar h3 { font-size: 18px; font-weight: 600; margin-bottom: 9px; }
.ag-pillar p { font-size: 14.5px; color: var(--ag-muted); }

/* ======================================================== 10. GALERI */

.ag-showcase { margin-top: 36px; }

.ag-showcase__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 22px;
}

.ag-showcase__tab {
	appearance: none;
	border: 1px solid var(--ag-line);
	background: #fff;
	color: var(--ag-muted);
	font-family: var(--ag-font-body);
	font-size: 14px;
	font-weight: 600;
	padding: 10px 17px;
	border-radius: 999px;
	cursor: pointer;
	transition: all .16s ease;
}
.ag-showcase__tab:hover { border-color: var(--ag-secondary); color: var(--ag-primary); }
.ag-showcase__tab.is-active {
	background: var(--ag-primary);
	border-color: var(--ag-primary);
	color: #fff;
	box-shadow: 0 4px 14px rgba(15, 110, 86, .22);
}

/* Tanpa JavaScript: tab disembunyikan, semua panel tampil bertumpuk
   sehingga tidak ada satu pun tangkapan layar yang hilang. */
.ag-showcase:not(.is-ready) .ag-showcase__tabs { display: none; }
.ag-showcase:not(.is-ready) .ag-showcase__panel { margin-bottom: 52px; }

/* Dengan JavaScript: hanya panel yang aktif yang ditampilkan. */
.ag-showcase.is-ready .ag-showcase__panel { display: none; }
.ag-showcase.is-ready .ag-showcase__panel.is-active { display: block; }

.ag-showcase__stage {
	position: relative;
	padding-bottom: 0;
}

.ag-browser {
	background: #fff;
	border: 1px solid var(--ag-line);
	border-radius: var(--ag-radius);
	overflow: hidden;
	box-shadow: var(--ag-shadow);
}

.ag-browser__bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 11px 14px;
	background: var(--ag-panel);
	border-bottom: 1px solid var(--ag-line);
}

.ag-browser__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #D3DED7;
}

.ag-browser__url {
	margin-left: 12px;
	font-size: 11.5px;
	color: var(--ag-muted-2);
	background: #fff;
	border: 1px solid var(--ag-line);
	border-radius: 999px;
	padding: 3px 12px;
}

.ag-browser__img { width: 100%; display: block; }

/* Tangkapan ponsel: hanya dipakai bila panel punya versi ponsel. */
.ag-showcase__phone {
	display: none;
	background: #0B1F17;
	border-radius: 26px;
	padding: 6px;
	box-shadow: var(--ag-shadow-lg);
}
.ag-showcase__phone img { border-radius: 21px; display: block; }

/* Layar sempit: tangkapan desktop terlalu kecil untuk dibaca, jadi versi
   ponsel yang ditampilkan sebagai gambar utama. Panel tanpa versi ponsel
   tetap menampilkan tangkapan desktop. */
@media (max-width: 779px) {
	.ag-showcase__stage.has-mobile .ag-browser { display: none; }
	.ag-showcase__stage.has-mobile .ag-showcase__phone {
		display: block;
		width: min(272px, 74vw);
		margin: 0 auto;
	}
}

/* Layar lebar: bingkai peramban jadi utama, versi ponsel mengambang di sudut. */
@media (min-width: 780px) {
	.ag-showcase__stage.has-mobile { padding-bottom: 44px; }
	.ag-showcase__stage.has-mobile .ag-showcase__phone {
		display: block;
		position: absolute;
		right: 30px;
		bottom: -44px;
		width: 188px;
	}
}

@media (min-width: 1040px) {
	.ag-showcase__stage.has-mobile .ag-showcase__phone { width: 208px; right: 38px; }
}

.ag-showcase__meta {
	margin-top: 40px;
	max-width: 62ch;
}
.ag-showcase__meta h3 {
	font-size: clamp(19px, 2.6vw, 24px);
	font-weight: 600;
	margin-bottom: 9px;
}
.ag-showcase__meta p { font-size: 15.5px; color: var(--ag-muted); }

.ag-showcase__cta { margin-top: 34px; }

/* ========================================================= 11. FITUR */

.ag-feat {
	background: #fff;
	border: 1px solid var(--ag-line);
	border-radius: var(--ag-radius-sm);
	padding: 20px 18px;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ag-feat:hover {
	border-color: var(--ag-primary-mid);
	box-shadow: var(--ag-shadow);
	transform: translateY(-2px);
}

.ag-feat__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 14px;
}

.ag-feat__ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: var(--ag-primary-soft);
	color: var(--ag-primary);
}
.ag-feat__ico svg { width: 20px; height: 20px; }

.ag-tag {
	display: inline-block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 4px 10px;
}
.ag-tag--tersedia { background: var(--ag-secondary-soft); color: var(--ag-primary-dark); }
.ag-tag--segera { background: var(--ag-accent-soft); color: #8A5A00; }

.ag-feat h3 { font-size: 15.5px; font-weight: 600; margin-bottom: 6px; }
.ag-feat p { font-size: 13.5px; color: var(--ag-muted); }

/* ======================================================= 12. LANGKAH */

.ag-steps {
	list-style: none;
	margin: 40px 0 0;
	padding: 0;
	display: grid;
	gap: 24px;
	counter-reset: none;
}

.ag-steps__item { display: flex; gap: 16px; align-items: flex-start; }

.ag-steps__n {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--ag-primary);
	color: #fff;
	font-family: var(--ag-font-display);
	font-weight: 700;
	font-size: 16px;
}

.ag-steps__item h3 { font-size: 17px; font-weight: 600; margin-bottom: 5px; }
.ag-steps__item p { font-size: 14.5px; color: var(--ag-muted); }

@media (min-width: 840px) {
	.ag-steps { grid-template-columns: repeat(4, 1fr); gap: 24px; }
	.ag-steps__item { flex-direction: column; gap: 14px; }
}

/* ======================================================== 13. AGENCY */

.ag-agency {
	position: relative;
	overflow: hidden;
	padding: 80px 0;
	background: #0B1F17;
	color: #C7D6CF;
}

.ag-agency__bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(760px 460px at 88% 6%, rgba(29, 158, 117, .34) 0%, rgba(29, 158, 117, 0) 62%),
		radial-gradient(620px 420px at 4% 96%, rgba(239, 159, 39, .16) 0%, rgba(239, 159, 39, 0) 60%);
	pointer-events: none;
}

.ag-agency__in {
	position: relative;
	display: grid;
	gap: 44px;
	align-items: start;
}

.ag-agency__lede {
	font-size: 16.5px;
	line-height: 1.65;
	color: #A9BDB3;
	margin-top: 18px;
	max-width: 56ch;
}

.ag-agency__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 30px;
}

.ag-agency__note { font-size: 13.5px; color: #8FA69B; }

.ag-agency__grid {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.ag-agency__grid { grid-template-columns: 1fr 1fr; }
}

.ag-agency__card {
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--ag-radius);
	padding: 22px 20px;
	transition: background .18s ease, border-color .18s ease;
}
.ag-agency__card:hover {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(192, 221, 151, .38);
}

.ag-agency__ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-bottom: 14px;
	border-radius: 12px;
	background: rgba(192, 221, 151, .16);
	color: var(--ag-primary-mid);
}

.ag-agency__card h3 {
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	margin-bottom: 7px;
}
.ag-agency__card p { font-size: 14px; color: #9FB4AA; line-height: 1.6; }

@media (min-width: 960px) {
	.ag-agency { padding: 96px 0; }
	.ag-agency__in { grid-template-columns: 1fr 1.05fr; gap: 64px; }
}

/* ========================================================= 14. HARGA */

.ag-price-grid { align-items: stretch; }

.ag-price {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--ag-line);
	border-radius: var(--ag-radius);
	padding: 28px 26px;
}

.ag-price--featured {
	border: 2px solid var(--ag-primary);
	box-shadow: var(--ag-shadow);
}

.ag-price__badge {
	position: absolute;
	top: -13px;
	left: 26px;
	background: var(--ag-accent);
	color: #3A2400;
	font-size: 11.5px;
	font-weight: 700;
	border-radius: 999px;
	padding: 5px 13px;
}

.ag-price h3 { font-size: 17px; font-weight: 600; }

.ag-price__num {
	font-family: var(--ag-font-display);
	font-size: clamp(30px, 4vw, 36px);
	font-weight: 700;
	line-height: 1.1;
	color: var(--ag-primary);
	margin-top: 12px;
}

.ag-price__per { font-size: 13.5px; color: var(--ag-muted); margin-top: 4px; }

.ag-price__list {
	list-style: none;
	margin: 22px 0 24px;
	padding: 0;
	display: grid;
	gap: 11px;
}

.ag-price__list li {
	position: relative;
	padding-left: 27px;
	font-size: 14.5px;
	color: var(--ag-muted);
	line-height: 1.5;
}

.ag-price__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--ag-secondary-soft);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F6E56' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-size: 10px;
	background-repeat: no-repeat;
	background-position: center;
}

.ag-price__note { font-size: 12.5px; color: var(--ag-muted-2); margin-bottom: 18px; }
.ag-price .ag-btn { margin-top: auto; }

/* =========================================================== 15. FAQ */

.ag-faq { margin-top: 34px; display: grid; gap: 10px; }

.ag-faq__item {
	background: #fff;
	border: 1px solid var(--ag-line);
	border-radius: var(--ag-radius-sm);
	padding: 0 22px;
	transition: border-color .18s ease;
}
.ag-faq__item[open] { border-color: var(--ag-primary-mid); }

.ag-faq__q {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	cursor: pointer;
	list-style: none;
	padding: 18px 0;
	font-family: var(--ag-font-display);
	font-weight: 600;
	font-size: 15.5px;
	line-height: 1.4;
	color: var(--ag-text);
}
.ag-faq__q::-webkit-details-marker { display: none; }

.ag-faq__chev {
	flex: none;
	position: relative;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	border-radius: 50%;
	background: var(--ag-primary-soft);
	transition: transform .2s ease;
}
.ag-faq__chev::before {
	content: '';
	position: absolute;
	top: 8px;
	left: 7px;
	width: 6px;
	height: 6px;
	border-right: 2px solid var(--ag-primary);
	border-bottom: 2px solid var(--ag-primary);
	transform: rotate(45deg);
}
.ag-faq__item[open] .ag-faq__chev { transform: rotate(180deg); }

.ag-faq__a {
	padding: 0 0 20px;
	font-size: 14.5px;
	color: var(--ag-muted);
	max-width: 70ch;
}
.ag-faq__a p { margin: 0 0 .8em; }
.ag-faq__a p:last-child { margin-bottom: 0; }

.ag-faq__more {
	margin-top: 26px;
	font-size: 15px;
	color: var(--ag-muted);
}
.ag-faq__more a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================== 16. CTA */

.ag-cta { background: linear-gradient(180deg, var(--ag-panel) 0%, #fff 62%); }

.ag-cta__card {
	background: #fff;
	border: 1px solid var(--ag-line);
	border-radius: var(--ag-radius-lg);
	padding: 38px 26px;
	text-align: center;
	box-shadow: var(--ag-shadow);
}

.ag-cta__ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	margin: 0 auto 22px;
	border-radius: 50%;
	background: var(--ag-primary-soft);
	color: var(--ag-primary);
}
.ag-cta__ico svg { width: 30px; height: 30px; }

.ag-cta__title { margin: 0 auto; max-width: 24ch; }

.ag-cta__lede {
	font-size: 16.5px;
	color: var(--ag-muted);
	margin: 16px auto 28px;
	max-width: 56ch;
}

.ag-cta__meta {
	font-size: 13.5px;
	color: var(--ag-muted-2);
	margin-top: 18px;
}
.ag-cta__meta strong { color: var(--ag-text); }

/* ======================================================== 17. FOOTER */

.ag-footer {
	background: #0B1F17;
	color: #C7D6CF;
	padding: 56px 0 28px;
	margin-top: 0;
}

.ag-footer__in {
	display: grid;
	gap: 34px;
	grid-template-columns: 1fr;
}

@media (min-width: 700px) {
	.ag-footer__in { grid-template-columns: 1.1fr .8fr 1fr; }
}
@media (min-width: 1000px) {
	.ag-footer__in { grid-template-columns: 1.2fr .7fr .9fr 1.3fr; gap: 40px; }
}

.ag-footer__tag {
	font-size: 14px;
	color: #8FA69B;
	margin-top: 14px;
	max-width: 30ch;
}

.ag-social {
	display: flex;
	gap: 9px;
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
}

.ag-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .1);
	color: #C7D6CF;
}
.ag-social a:hover { background: var(--ag-primary); border-color: var(--ag-primary); color: #fff; }
.ag-social svg { width: 19px; height: 19px; }

.ag-footer__col h4 {
	font-size: 13.5px;
	font-weight: 600;
	color: #fff;
	margin-bottom: 14px;
	letter-spacing: .01em;
}

.ag-footer__col a {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	color: #A9BDB3;
	padding: 5px 0;
}
.ag-footer__col a:hover { color: #fff; }
.ag-footer__col a svg { width: 17px; height: 17px; flex: none; }

.ag-footer__wa {
	color: var(--ag-primary-mid) !important;
	font-weight: 600;
}
.ag-footer__wa:hover { color: #fff !important; }

.ag-footer__note {
	font-size: 13px;
	line-height: 1.68;
	color: #8FA69B;
}

.ag-footer__link {
	margin-top: 12px;
	color: var(--ag-primary-mid) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ag-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	justify-content: space-between;
	margin-top: 42px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.ag-footer__bottom span {
	font-size: 12.5px;
	line-height: 1.6;
	color: #7E9188;
	max-width: 70ch;
}

/* ================================================= 18. WA MENGAPUNG */

.ag-float {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 70;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 54px;
	padding: 0 20px;
	border-radius: 999px;
	background: #25D366;
	color: #06301A;
	font-weight: 700;
	font-size: 14.5px;
	box-shadow: 0 12px 32px rgba(11, 31, 23, .28);
	transition: transform .16s ease, box-shadow .16s ease;
}
.ag-float:hover {
	transform: translateY(-2px);
	color: #06301A;
	box-shadow: 0 16px 38px rgba(11, 31, 23, .34);
}
.ag-float svg { width: 22px; height: 22px; }

.ag-float__label { display: none; }

@media (min-width: 560px) { .ag-float__label { display: inline; } }

/* ============================================ 19. HALAMAN & 404 */

.ag-page, .ag-404, .ag-archive { padding: 60px 0 80px; }

.ag-prose {
	margin-top: 26px;
	font-size: 16.5px;
	color: #24382F;
	line-height: 1.75;
}
.ag-prose h2 { font-size: 22px; margin: 34px 0 12px; }
.ag-prose h3 { font-size: 18px; margin: 26px 0 10px; }
.ag-prose p { margin: 0 0 1.1em; }
.ag-prose ul, .ag-prose ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.ag-prose li { margin-bottom: .5em; }
.ag-prose a { text-decoration: underline; text-underline-offset: 3px; }
.ag-prose blockquote {
	margin: 22px 0;
	padding: 4px 0 4px 20px;
	border-left: 4px solid var(--ag-secondary);
	color: var(--ag-muted);
}
.ag-prose img { border-radius: var(--ag-radius-sm); }
.ag-prose code {
	background: var(--ag-panel-2);
	padding: 2px 7px;
	border-radius: 6px;
	font-size: .92em;
}
.ag-prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: 15px; }
.ag-prose th, .ag-prose td { border: 1px solid var(--ag-line); padding: 10px 12px; text-align: left; }
.ag-prose th { background: var(--ag-panel); font-weight: 600; }

.ag-page__back { margin-top: 40px; }

.ag-page__help {
	margin-top: 36px;
	padding: 24px;
	border-radius: var(--ag-radius);
	background: var(--ag-panel);
	border: 1px solid var(--ag-line);
	text-align: center;
}
.ag-page__help p { font-size: 15px; color: var(--ag-muted); margin-bottom: 16px; }

.ag-404__code {
	font-family: var(--ag-font-display);
	font-size: clamp(64px, 16vw, 120px);
	font-weight: 700;
	line-height: 1;
	color: var(--ag-primary-soft);
	margin-bottom: 10px;
}
.ag-404__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.ag-posts { margin-top: 32px; display: grid; gap: 16px; }
.ag-post {
	background: #fff;
	border: 1px solid var(--ag-line);
	border-radius: var(--ag-radius);
	padding: 24px;
}
.ag-post h2 { font-size: 20px; margin-bottom: 6px; }
.ag-post__meta { font-size: 13px; color: var(--ag-muted-2); margin-bottom: 10px; }
.ag-post p { font-size: 15px; color: var(--ag-muted); }
.ag-post__more { display: inline-block; margin-top: 12px; font-weight: 600; font-size: 14.5px; }

.ag-archive .pagination, .ag-archive .navigation.pagination {
	margin-top: 30px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.ag-archive .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--ag-line);
	border-radius: 11px;
	font-size: 14px;
	font-weight: 600;
	background: #fff;
}
.ag-archive .page-numbers.current { background: var(--ag-primary); border-color: var(--ag-primary); color: #fff; }

/* ============================================ 20. BAWAAN WORDPRESS */

.alignwide { max-width: 1120px; margin-left: auto; margin-right: auto; }
.alignfull { max-width: none; width: 100%; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin: 0 22px 16px 0; }
.alignright { float: right; margin: 0 0 16px 22px; }

.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-element-caption {
	font-size: 13px;
	color: var(--ag-muted-2);
	margin-top: 8px;
	text-align: center;
}

.sticky .ag-post { border-color: var(--ag-primary-mid); }

.wp-block-image img { border-radius: var(--ag-radius-sm); }

/* ============================================ AKSESIBILITAS & CETAK */

/* Kelas .ag-reveal hanya dipasang oleh JavaScript, jadi bila JavaScript mati
   seluruh konten tetap terlihat sejak awal. */
.ag-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .5s ease, transform .5s ease;
}
.ag-reveal.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

@media print {
	.ag-nav, .ag-float, .ag-hero__visual, .ag-showcase__tabs { display: none !important; }
	body { color: #000; background: #fff; }
	.ag-section, .ag-agency { padding: 20px 0; }
	.ag-agency { background: #fff; color: #000; }
	.ag-agency__card h3, .ag-h2--light { color: #000; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}