/***************************************************
 * BRAND — PT Niaga Nusa Abadi
 * ------------------------------------------------
 * Override brand di atas main.css (template Agntix).
 * Sumber aturan: .claude/skills/brand-identity.md
 *
 * 01. Font face (Metropolis)
 * 02. Brand token (warna & font)
 * 03. Override variabel template
 * 04. Tipografi dasar
 * 05. Aksen oranye (CTA, highlight, hover)
 * 06. Logo & header
 ***************************************************/

/* ============================================
   01. FONT FACE — Metropolis
   Self-hosted, 5 weight saja (performance rule).
   ============================================ */
@font-face {
	font-family: "Metropolis";
	src: url("../fonts/Metropolis-Light.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Metropolis";
	src: url("../fonts/Metropolis-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Metropolis";
	src: url("../fonts/Metropolis-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Metropolis";
	src: url("../fonts/Metropolis-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Metropolis";
	src: url("../fonts/Metropolis-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ============================================
   02. BRAND TOKEN
   ============================================ */
:root {
	/* --- Font stack (brief: Metropolis / Calibri / Roboto) --- */
	--nna-ff-primary: "Metropolis", "Calibri", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* --- Primary: Biru (RGB 46, 49, 146 / Pantone 299 C) --- */
	--nna-blue: #2e3192;
	--nna-blue-rgb: 46, 49, 146;
	--nna-blue-dark: #21246b;
	--nna-blue-deep: #171a4d;
	--nna-blue-soft: #3f43b8;
	--nna-blue-soft-rgb: 63, 67, 184;
	--nna-blue-tint: #eceded;

	/* --- Secondary: Oranye (RGB 243, 112, 33 / Pantone 151 C) --- */
	--nna-orange: #f37021;
	--nna-orange-rgb: 243, 112, 33;
	--nna-orange-dark: #d55c14;
	--nna-orange-soft: #ff8a45;
	--nna-orange-tint: #fef1e9;

	/* --- Netral --- */
	--nna-white: #ffffff;
	--nna-ink: #14152e;
	--nna-body: #4a4c66;
	--nna-muted: #7b7d95;
	--nna-line: #e4e5ef;
	--nna-surface: #f7f8fc;
}

/* ============================================
   03. OVERRIDE VARIABEL TEMPLATE
   main.css memakai --tp-*, jadi kita remap
   supaya seluruh komponen bawaan ikut berubah
   tanpa perlu edit main.css.
   ============================================ */
:root {
	/* Font — semua slot font template diarahkan ke Metropolis */
	--tp-ff-body: var(--nna-ff-primary);
	--tp-ff-heading: var(--nna-ff-primary);
	--tp-ff-p: var(--nna-ff-primary);
	--tp-ff-inter: var(--nna-ff-primary);
	--tp-ff-teko: var(--nna-ff-primary);
	--tp-ff-besley: var(--nna-ff-primary);
	--tp-ff-grotesk: var(--nna-ff-primary);
	--tp-ff-platform: var(--nna-ff-primary);
	--tp-ff-playfair: var(--nna-ff-primary);
	--tp-ff-phudu: var(--nna-ff-primary);
	--tp-ff-poppins: var(--nna-ff-primary);
	--tp-ff-onest: var(--nna-ff-primary);
	--tp-ff-clash-light: var(--nna-ff-primary);
	--tp-ff-clash-regular: var(--nna-ff-primary);
	--tp-ff-clash-medium: var(--nna-ff-primary);
	--tp-ff-clash-semibold: var(--nna-ff-primary);
	--tp-ff-clash-bold: var(--nna-ff-primary);
	--tp-ff-mango-thin: var(--nna-ff-primary);
	--tp-ff-mango-light: var(--nna-ff-primary);
	--tp-ff-mango: var(--nna-ff-primary);
	--tp-ff-mango-medium: var(--nna-ff-primary);
	--tp-ff-mango-semibold: var(--nna-ff-primary);
	--tp-ff-mango-bold: var(--nna-ff-primary);
	--tp-ff-dirtyline: var(--nna-ff-primary);

	/* Warna dasar */
	--tp-common-black: var(--nna-ink);
	--tp-common-black-2: #1d1f3d;
	--tp-common-black-3: var(--nna-blue-deep);
	--tp-common-black-4: #101128;
	--tp-common-black-5: #16183a;
	--tp-common-black-6: #1d1f3d;
	--tp-common-black-7: var(--nna-blue-deep);
	--tp-common-black-8: #1a1c3e;
	--tp-common-black-9: var(--nna-blue-dark);
	--tp-common-black-10: #21246b;
	--tp-text-body: var(--nna-body);

	/* Semua warna aksen template -> oranye brand.
	   Template aslinya penuh hijau/pink/kuning; ini yang
	   bikin theme terlihat "template", jadi dinetralkan. */
	--tp-theme-green: var(--nna-orange);
	--tp-theme-pink: var(--nna-orange);
	--tp-theme-yellow: var(--nna-orange);
	--tp-common-yellow: var(--nna-orange);
	--tp-common-yellow-1: var(--nna-orange);
	--tp-common-yellow-green: var(--nna-orange);
	--tp-common-green-light: var(--nna-orange-soft);
	--tp-common-green-regular: var(--nna-orange);
	--tp-common-green-1: var(--nna-orange);
	--tp-common-green-solid: var(--nna-blue-dark);
	--tp-common-pink-light: var(--nna-orange-tint);
	--tp-common-paste: var(--nna-orange);
	--tp-common-paste-2: var(--nna-blue-dark);
	--tp-common-sky: var(--nna-blue-tint);
	--tp-common-red: var(--nna-orange);
	--tp-common-red-2: var(--nna-orange);
	--tp-common-red-3: var(--nna-orange);
	--tp-common-blue: var(--nna-blue);
	--tp-common-brown: var(--nna-blue-dark);
	--tp-common-cream: var(--nna-surface);
	--tp-common-cream-2: var(--nna-orange-tint);
	--tp-common-cream-3: var(--nna-surface);
	--tp-coffe-1: var(--nna-blue-dark);
	--tp-coffe-2: var(--nna-blue-deep);
	--tp-cream-1: var(--nna-muted);
	--tp-cream-2: var(--nna-orange-tint);

	/* Grey & border */
	--tp-grey-1: var(--nna-surface);
	--tp-grey-2: #eff1f7;
	--tp-grey-3: var(--nna-surface);
	--tp-grey-4: var(--nna-surface);
	--tp-border-1: var(--nna-line);
	--tp-border-2: var(--nna-line);
}

/* ============================================
   04. TIPOGRAFI DASAR
   ============================================ */
body {
	font-family: var(--nna-ff-primary);
	font-weight: 400;
	color: var(--nna-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.tp-section-title,
.tp-hero-title {
	font-family: var(--nna-ff-primary);
	font-weight: 700;
	color: var(--nna-ink);
	letter-spacing: -0.02em;
	line-height: 1.15;
}

h1 { font-weight: 700; }
h5, h6 { font-weight: 600; }

p {
	font-family: var(--nna-ff-primary);
	font-weight: 400;
	color: var(--nna-body);
	line-height: 1.7;
}

/* Metropolis lebih ramping dari Clash Display —
   kompensasi supaya heading tetap terasa tegas. */
.tp-section-title,
.tp-hero-title {
	font-weight: 700;
}

/* ============================================
   05. AKSEN ORANYE
   Aturan brand: oranye maksimal 10–20%, khusus
   CTA / highlight / hover.
   ============================================ */
a {
	color: var(--nna-blue);
	text-decoration: none;
	transition: color 0.3s ease;
}

a:hover {
	color: var(--nna-orange);
}

::selection {
	background-color: var(--nna-orange);
	color: var(--nna-white);
}

/* Scrollbar (desktop) */
::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: var(--nna-surface);
}

::-webkit-scrollbar-thumb {
	background: var(--nna-blue);
	border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--nna-orange);
}

/* Tombol utility brand */
.nna-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 34px;
	border: 1px solid transparent;
	border-radius: 6px;
	font-family: var(--nna-ff-primary);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.01em;
	border-radius: 50px;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.nna-btn-primary {
	background-color: var(--nna-orange);
	color: var(--nna-white);
}

.nna-btn-primary:hover {
	background-color: var(--nna-orange-dark);
	color: var(--nna-white);
	transform: translateY(-2px);
}

.nna-btn-secondary {
	background-color: var(--nna-blue);
	color: var(--nna-white);
}

.nna-btn-secondary:hover {
	background-color: var(--nna-orange);
	color: var(--nna-white);
	transform: translateY(-2px);
}

.nna-btn-outline {
	background-color: transparent;
	border-color: var(--nna-line);
	color: var(--nna-ink);
}

.nna-btn-outline:hover {
	border-color: var(--nna-orange);
	color: var(--nna-orange);
}

/* Varian outline di atas media/section gelap */
.nna-btn-outline.nna-btn-on-dark {
	border-color: rgba(255, 255, 255, 0.45);
	color: var(--nna-white);
	background-color: rgba(255, 255, 255, 0.08);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-radius: 50px;
}

.nna-btn-outline.nna-btn-on-dark:hover {
	border-color: var(--nna-white);
	background-color: var(--nna-white);
	color: var(--nna-ink);
}

/* Helper warna */
.nna-text-blue   { color: var(--nna-blue) !important; }
.nna-text-orange { color: var(--nna-orange) !important; }
.nna-bg-blue     { background-color: var(--nna-blue) !important; color: var(--nna-white); }
.nna-bg-orange   { background-color: var(--nna-orange) !important; color: var(--nna-white); }
.nna-bg-surface  { background-color: var(--nna-surface) !important; }

/* ============================================
   06. LOGO & HEADER
   ============================================ */
.tp-header-logo img,
.tp-offcanvas-logo img,
.tp-footer-logo img {
	width: 150px;
	height: auto;
	max-width: 100%;
}

@media (max-width: 767px) {
	.tp-header-logo img,
	.tp-offcanvas-logo img,
	.tp-footer-logo img {
		width: 122px;
	}
}

/* --- Floating header bar -------------------------------------
   Layout 3 bagian: logo kiri | menu tengah | aksi kanan.
   Kiri & kanan dibuat flex-basis sama (1 1 0) supaya blok menu
   benar-benar center terhadap layar, bukan sekadar center di
   sisa ruang. */
.nna-header {
	position: fixed;
	top: 18px;
	left: 0;
	right: 0;
	z-index: 99;
}

/* Template mengubah padding header saat sticky
   (.tp-header-3-style: 30px -> .header-sticky: 10px 0), sehingga tinggi
   header "loncat". Semua state dikunci 0 supaya tingginya konsisten. */
.nna-header,
.nna-header.header-sticky,
.nna-header.tp-header-3-style,
.nna-header.header-sticky.tp-header-3-style {
	padding: 0;
}

.nna-header-inner {
	gap: 24px;
	/* padding kiri-kanan simetris supaya blok menu center presisi */
	padding: 20px 16px;
	border-radius: 16px;
	/* Glass: tint tipis + blur kuat, bukan warna solid */
	background-color: rgba(20, 23, 66, 0.68);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: none;
	transition: background-color 0.35s ease;
}

/* Logo diberi jarak dari sisi bar tanpa mengganggu titik tengah */
.nna-header-left .tp-header-logo {
	padding-left: 14px;
}

/* Template punya rule .header-sticky global:
     position:fixed; top:0; background:rgba(38,37,40,.9);
     box-shadow:0 2px 6px rgba(19,19,22,.08); animation:fadeInDown;
   Itu sumber "band gelap" + shadow di belakang bar saat fixed,
   sekaligus menggeser bar ke top:0. Semuanya dinetralkan di sini. */
.nna-header.header-sticky {
	top: 18px;
	background: transparent;
	box-shadow: none;
	animation: none;
	z-index: 99;
}

/* Saat di-scroll, tint dinaikkan sedikit agar teks tetap terbaca
   di atas konten terang — tinggi & shadow tidak berubah. */
.nna-header.header-sticky .nna-header-inner {
	background-color: rgba(20, 23, 66, 0.76);
}

/* Tinggi bar dikunci: template mengubah padding link menu jadi
   22px 0 saat sticky, yang bikin tinggi header "loncat". */
.nna-header .tp-header-menu > nav > ul > li > a,
.nna-header.header-sticky .tp-header-menu > nav > ul > li > a {
	padding: 11px 0;
}

.nna-header .tp-header-menu > nav > ul > li > a::after {
	bottom: 5px;
}

/* Logo header dibuat lebih ringkas supaya bar tidak terlalu tinggi */
.nna-header .tp-header-logo img {
	width: 122px;
}

@media (max-width: 767px) {
	.nna-header .tp-header-logo img {
		width: 104px;
	}
}

/* Browser tanpa backdrop-filter tidak bisa blur, jadi tint dinaikkan
   supaya kontras teks putih tetap aman. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.nna-header-inner,
	.nna-header.header-sticky .nna-header-inner {
		background-color: rgba(20, 23, 66, 0.86);
	}
}

.nna-header-left {
	flex: 1 1 0;
	min-width: 0;
}

.nna-header-center {
	flex: 0 0 auto;
}

.nna-header-right {
	flex: 1 1 0;
	min-width: 0;
	gap: 6px;
}

@media (max-width: 1199px) {
	.nna-header-inner {
		padding: 8px 14px;
		gap: 16px;
	}
}

@media (max-width: 767px) {
	.nna-header {
		top: 12px;
	}

	.nna-header-inner {
		padding: 8px 12px;
		border-radius: 14px;
	}

	.nna-header-left .tp-header-logo {
		padding-left: 6px;
	}
}

/* Menu utama */
.tp-header-menu > nav > ul > li > a {
	font-family: var(--nna-ff-primary);
	font-size: 15px;
	font-weight: 500;
	color: var(--nna-ink);
	letter-spacing: 0.01em;
	transition: color 0.3s ease;
}

.tp-header-menu > nav > ul > li > a:hover,
.tp-header-menu > nav > ul > li.active > a {
	color: var(--nna-orange);
}

/* Template memberi ul margin-left 35px (sisa layout lama, menu rata kiri).
   Di layout center margin ini menggeser menu, jadi dinolkan. */
.nna-header .tp-header-menu > nav > ul {
	margin-left: 0;
}

/* Menu di dalam bar gelap */
.nna-header .tp-header-menu > nav > ul > li > a {
	color: rgba(255, 255, 255, 0.95);
}

.nna-header .tp-header-menu > nav > ul > li:hover > a,
.nna-header .tp-header-menu > nav > ul > li.active > a {
	color: var(--nna-white);
}

/* Garis aksen oranye mengikuti lebar teks */
.nna-header .tp-header-menu > nav > ul > li > a::after {
	bottom: 14px;
}

/* Hamburger jadi putih */
.nna-header .tp-header-bar .tp-offcanvas-open-btn i {
	background-color: var(--nna-white);
}

/* Garis aksen tipis di bawah item aktif */
.tp-header-menu > nav > ul > li {
	position: relative;
}

.tp-header-menu > nav > ul > li > a::after {
	content: "";
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 18px;
	height: 2px;
	background-color: var(--nna-orange);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.35s ease;
}

.tp-header-menu > nav > ul > li:hover > a::after,
.tp-header-menu > nav > ul > li.active > a::after {
	transform: scaleX(1);
}

/* Dropdown submenu */
.tp-header-menu > nav > ul > li .tp-submenu {
	border-top: 3px solid var(--nna-orange);
}

.tp-header-menu > nav > ul > li .tp-submenu li a {
	font-family: var(--nna-ff-primary);
	font-size: 14px;
	font-weight: 500;
	color: var(--nna-body);
}

.tp-header-menu > nav > ul > li .tp-submenu li a:hover {
	color: var(--nna-orange);
}

/* Offcanvas / mobile menu */
.tp-offcanvas-menu ul li a {
	font-family: var(--nna-ff-primary);
	font-weight: 600;
	color: var(--nna-ink);
}

.tp-offcanvas-menu ul li a:hover {
	color: var(--nna-orange);
}

/* ============================================
   07. SECTION ABOUT (HOME)
   Layout mengikuti referensi Agntix "why choose us",
   tapi seluruh visual dibangun ulang:
   - shape gradient pakai CSS blob (aset .html template rusak)
   - palet dikunci ke biru & oranye brand
   ============================================ */
.nna-about-area {
	position: relative;
	overflow: hidden;
	padding: 150px 0 160px;
	background-color: var(--nna-white);
}

/* Blob bawah terpotong tepat di tepi section dan menyisakan
   semburat biru. Ditutup fade ke putih supaya section About
   berakhir di warna yang persis sama dengan awal gradient
   section Layanan — inilah yang bikin keduanya menyatu. */
.nna-about-area::after {
	position: absolute;
	content: "";
	left: 0;
	right: 0;
	bottom: 0;
	height: 220px;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
}

/* --- Dekorasi background ------------------------------------- */
.nna-about-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

/* Grid halus, difade ke tepi supaya tidak terasa "kotak" */
.nna-about-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(var(--nna-blue-rgb), 0.055) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(var(--nna-blue-rgb), 0.055) 1px, transparent 1px);
	background-size: 96px 96px;
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, #000 0%, transparent 78%);
	mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, #000 0%, transparent 78%);
}

/* Blob gradient — pengganti gradient-shape-1 bawaan template */
.nna-about-blob {
	position: absolute;
	display: block;
	border-radius: 50%;
	filter: blur(110px);
	will-change: transform;
}

/* Biru utama — sisi kiri, sejajar headline supaya benar-benar terbaca */
.nna-about-blob-blue {
	top: -40px;
	left: 50%;
	width: 720px;
	height: 620px;
	opacity: 0.85;
	transform: translateX(-92%);
	background: radial-gradient(circle at 50% 50%, rgba(var(--nna-blue-rgb), 0.50) 0%, rgba(var(--nna-blue-rgb), 0.18) 42%, rgba(var(--nna-blue-rgb), 0) 72%);
}

/* Biru sekunder — kanan bawah, menyeimbangkan oranye di kanan atas */
.nna-about-blob-blue-2 {
	right: 50%;
	bottom: 40px;
	width: 620px;
	height: 520px;
	opacity: 0.7;
	transform: translateX(88%);
	background: radial-gradient(circle at 50% 50%, rgba(var(--nna-blue-soft-rgb), 0.34) 0%, rgba(var(--nna-blue-rgb), 0.12) 45%, rgba(var(--nna-blue-rgb), 0) 73%);
}

.nna-about-blob-orange {
	top: -110px;
	left: 50%;
	width: 580px;
	height: 500px;
	opacity: 0.5;
	transform: translateX(-8%);
	background: radial-gradient(circle at 50% 50%, rgba(var(--nna-orange-rgb), 0.38) 0%, rgba(var(--nna-orange-rgb), 0) 70%);
}

.nna-about-blob-soft {
	left: 50%;
	bottom: -240px;
	width: 900px;
	height: 520px;
	opacity: 0.6;
	transform: translateX(-50%);
	background: radial-gradient(circle at 50% 50%, rgba(var(--nna-blue-rgb), 0.30) 0%, rgba(var(--nna-blue-rgb), 0.12) 38%, rgba(var(--nna-orange-rgb), 0.07) 58%, rgba(255, 255, 255, 0) 76%);
}

/* Titik kecil aksen (detail yang ada di referensi) */
.nna-about-dot {
	position: absolute;
	top: 42px;
	left: 32%;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-color: var(--nna-ink);
}

/* --- Judul ---------------------------------------------------- */
.nna-about-title-box {
	position: relative;
	z-index: 1;
	margin-bottom: 80px;
}

.nna-about-subtitle {
	display: block;
	margin-bottom: 22px;
}

.nna-about-subtitle-icon {
	display: block;
	margin-bottom: 10px;
	line-height: 1;
	color: var(--nna-orange);
}

.nna-about-subtitle-text {
	display: inline-block;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	background: linear-gradient(96deg, var(--nna-blue) 0%, var(--nna-blue-soft) 38%, var(--nna-orange) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.nna-about-title {
	font-size: 66px;
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.025em;
	margin-bottom: 28px;
	color: var(--nna-ink);
}

/* Chip oranye di tengah headline — pengganti emoji ⚡ referensi */
.nna-about-title-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 46px;
	margin: 0 6px;
	border-radius: 14px;
	color: var(--nna-white);
	transform: translateY(-4px);
	background: linear-gradient(135deg, var(--nna-orange) 0%, var(--nna-orange-dark) 100%);
	box-shadow: 0 10px 24px rgba(var(--nna-orange-rgb), 0.32);
}

.nna-about-desc {
	max-width: max-content;
	margin: 0 auto;
}

.nna-about-desc p {
	font-size: 19px;
	font-weight: 400;
	line-height: 1.75;
	margin-bottom: 0;
	color: var(--nna-body);
}

/* --- Item highlight ------------------------------------------- */
.nna-about-item-box {
	position: relative;
	z-index: 1;
}

.nna-about-item {
	margin-bottom: 80px;
}

.nna-about-icon {
	margin-right: 20px;
	flex: 0 0 auto;
}

.nna-about-icon span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	color: var(--nna-blue);
	background-color: rgba(var(--nna-blue-rgb), 0.07);
	border: 1px solid rgba(var(--nna-blue-rgb), 0.10);
	transition: color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}

.nna-about-item:hover .nna-about-icon span {
	color: var(--nna-orange);
	background-color: rgba(var(--nna-orange-rgb), 0.10);
	border-color: rgba(var(--nna-orange-rgb), 0.22);
	transform: translateY(-4px);
}

.nna-about-text p {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.45;
	margin-bottom: 0;
	color: var(--nna-ink);
}

/* --- Catatan bawah -------------------------------------------- */
.nna-about-bottom-wrap {
	position: relative;
	z-index: 1;
}

.nna-about-bottom-text {
	display: inline-block;
	padding: 8px 24px;
	border-radius: 100px;
	background-color: rgba(255, 255, 255, 0.72);
	border: 1px solid var(--nna-line);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 6px 20px rgba(var(--nna-blue-rgb), 0.06);
}

.nna-about-bottom-text p {
	font-size: 17px;
	font-weight: 500;
	line-height: 1.73;
	margin-bottom: 0;
	color: var(--nna-muted);
}

.nna-about-bottom-text p a {
	font-weight: 600;
	color: var(--nna-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.3s ease;
}

.nna-about-bottom-text p a:hover {
	color: var(--nna-orange);
}

/* --- Responsive ----------------------------------------------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
	.nna-about-title {
		font-size: 59px;
	}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.nna-about-area {
		padding: 110px 0 110px;
	}
	.nna-about-title {
		font-size: 51px;
	}
	.nna-about-text p {
		font-size: 18px;
	}
	.nna-about-item {
		margin-bottom: 60px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.nna-about-area {
		padding: 90px 0 80px;
	}
	.nna-about-title {
		font-size: 46px;
	}
	.nna-about-title-chip {
		width: 54px;
		height: 40px;
	}
	.nna-about-title-box {
		margin-bottom: 55px;
	}
	.nna-about-item {
		margin-bottom: 45px;
	}
	.nna-about-dot {
		display: none;
	}
}

@media (max-width: 767px) {
	.nna-about-area {
		padding: 80px 0 70px;
	}
	.nna-about-title {
		font-size: 37px;
		line-height: 1.25;
	}
	.nna-about-title-chip {
		width: 46px;
		height: 34px;
		border-radius: 11px;
		transform: translateY(-2px);
	}
	.nna-about-title-chip svg {
		width: 20px;
		height: 20px;
	}
	.nna-about-title-box {
		margin-bottom: 45px;
	}
	.nna-about-desc p {
		font-size: 17px;
		line-height: 1.72;
	}
	.nna-about-text p {
		font-size: 18px;
	}
	.nna-about-text p br {
		display: none;
	}
	.nna-about-item {
		margin-bottom: 35px;
	}
	.nna-about-icon {
		margin-right: 16px;
	}
	.nna-about-icon span {
		width: 52px;
		height: 52px;
	}
	.nna-about-blob {
		filter: blur(70px);
	}
	.nna-about-blob-blue,
	.nna-about-blob-blue-2,
	.nna-about-blob-orange {
		width: 340px;
		height: 320px;
	}
	.nna-about-blob-blue {
		top: 0;
		transform: translateX(-88%);
	}
	.nna-about-blob-blue-2 {
		bottom: 20px;
		transform: translateX(84%);
	}
	.nna-about-blob-orange {
		transform: translateX(-12%);
	}
	.nna-about-blob-soft {
		width: 420px;
		bottom: -160px;
	}
	.nna-about-grid {
		background-size: 64px 64px;
	}
	.nna-about-dot {
		display: none;
	}
	.nna-about-bottom-text {
		padding: 10px 20px;
	}
	.nna-about-bottom-text p {
		font-size: 16px;
	}
}

/* Hormati preferensi reduce-motion */
@media (prefers-reduced-motion: reduce) {
	.nna-about-icon span {
		transition: none;
	}
	.nna-about-item:hover .nna-about-icon span {
		transform: none;
	}
}

/* ============================================
   08. SECTION LAYANAN (HOME)
   Layout bento mengikuti rivian.com:
   kartu media + kartu gelap + kartu lebar.

   Kunci "menyatu": background section adalah
   gradient yang START dari putih (warna penutup
   section About) dan END di --nna-scene-sky-top
   (warna baris teratas foto langit pada scene di
   bawahnya), jadi tidak ada garis batas di kedua
   sisi. Pola yang sama dipakai rivian.com.
   ============================================ */
.nna-service-area {
	position: relative;
	padding: 130px 0 150px;
	background: linear-gradient(180deg,
			#ffffff 0%,
			#f5f6f9 15%,
			#e7eaef 30%,
			#d3d9e2 45%,
			#b9c2d2 60%,
			#9ca9be 72%,
			#7c8da9 82%,
			#607597 90%,
			#486087 96%,
			var(--nna-scene-sky-top) 100%);
}

/* --- Judul section -------------------------------------------- */
.nna-service-head {
	margin-bottom: 50px;
}

.nna-service-eyebrow {
	display: inline-block;
	margin-bottom: 18px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nna-orange);
}

.nna-service-title {
	font-size: 63px;
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.025em;
	margin-bottom: 0;
	color: var(--nna-ink);
}

.nna-service-head-link {
	padding-bottom: 10px;
}

/* --- Baris kartu ---------------------------------------------- */
.nna-service-row {
	--bs-gutter-x: 24px;
	--bs-gutter-y: 24px;
}

/* --- Kartu dasar ----------------------------------------------
   Semua kartu memakai treatment yang sama dengan kartu lebar
   Pemasaran: foto full-bleed + overlay, teks putih di atasnya.
   Judul menempel di atas, konten di bawah.
   -------------------------------------------------------------- */
.nna-service-card {
	position: relative;
	display: flex;
	height: 100%;
	min-height: 560px;
	overflow: hidden;
	border-radius: 24px;
	background-color: var(--nna-blue-deep);
	box-shadow: 0 18px 50px rgba(var(--nna-blue-rgb), 0.18);
}

.nna-service-media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background-color: var(--nna-blue-deep);
}

.nna-service-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Gelap di atas dan bawah, foto tetap terbaca di tengah —
   dua zona teks jadi aman tanpa menenggelamkan gambarnya. */
.nna-service-media::after {
	position: absolute;
	content: "";
	inset: 0;
	background: linear-gradient(180deg,
			rgba(var(--nna-blue-rgb), 0.78) 0%,
			rgba(23, 26, 77, 0.42) 26%,
			rgba(23, 26, 77, 0.58) 58%,
			rgba(23, 26, 77, 0.93) 100%);
}

.nna-service-card:hover .nna-service-media img {
	transform: scale(1.05);
}

.nna-service-body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	padding: 40px;
}

.nna-service-card-top {
	margin-bottom: 40px;
}

/* Nomor urut layanan */
.nna-service-index {
	display: block;
	margin-bottom: 10px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.08em;
	color: var(--nna-orange);
}

.nna-service-card-title {
	font-size: 46px;
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.025em;
	margin-bottom: 0;
	color: var(--nna-white);
}

.nna-service-card-text {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.7;
	margin-bottom: 24px;
	color: rgba(255, 255, 255, 0.78);
}

/* Meta dua kolom (pola "alamat / jam buka" pada referensi) */
.nna-service-meta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin-bottom: 30px;
}

.nna-service-meta-col strong {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--nna-white);
}

.nna-service-meta-col span {
	display: block;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.6);
}

/* Baris "field" — meniru stack input pada kartu form referensi.
   Di atas foto dibuat glass supaya gambarnya tetap terbaca. */
.nna-service-fields {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 22px;
}

.nna-service-field-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.nna-service-field {
	padding: 14px 20px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	color: rgba(255, 255, 255, 0.92);
	background-color: rgba(10, 12, 40, 0.34);
	border: 1px solid rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.nna-service-field:hover {
	background-color: rgba(var(--nna-orange-rgb), 0.22);
	border-color: rgba(var(--nna-orange-rgb), 0.5);
}

.nna-service-note {
	font-size: 13px;
	font-weight: 400;
	line-height: 1.65;
	margin-bottom: 24px;
	color: rgba(255, 255, 255, 0.58);
}

/* --- Kartu lebar (pemasaran) ---------------------------------- */
.nna-service-wide {
	position: relative;
	display: flex;
	overflow: hidden;
	min-height: 460px;
	border-radius: 24px;
	background-color: var(--nna-blue-deep);
}

.nna-service-wide-media {
	position: absolute;
	inset: 0;
}

.nna-service-wide-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.nna-service-wide:hover .nna-service-wide-media img {
	transform: scale(1.04);
}

/* Overlay biar teks tetap terbaca di atas foto apa pun */
.nna-service-wide-media::after {
	position: absolute;
	content: "";
	inset: 0;
	background: linear-gradient(100deg,
			rgba(var(--nna-blue-rgb), 0.92) 0%,
			rgba(23, 26, 77, 0.78) 34%,
			rgba(23, 26, 77, 0.30) 62%,
			rgba(23, 26, 77, 0.10) 100%);
}

.nna-service-wide-body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	padding: 48px 50px;
}

.nna-service-wide-title {
	font-size: 56px;
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.025em;
	margin-bottom: 0;
	color: var(--nna-white);
}

.nna-service-wide-bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}

.nna-service-wide-text {
	max-width: 460px;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.7;
	margin-bottom: 0;
	color: rgba(255, 255, 255, 0.78);
}

/* --- Tombol & link -------------------------------------------- */
.nna-service-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 28px;
}

.nna-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	padding: 0 34px;
	border-radius: 100px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: var(--nna-white);
	background-color: var(--nna-ink);
	transition: background-color 0.35s ease, color 0.35s ease, transform 0.35s ease;
}

.nna-pill:hover {
	color: var(--nna-white);
	background-color: var(--nna-orange);
	transform: translateY(-2px);
}

.nna-pill-light {
	color: var(--nna-ink);
	background-color: var(--nna-white);
}

.nna-pill-light:hover {
	color: var(--nna-white);
	background-color: var(--nna-orange);
}

/* Link setingkat section — dulu teks bergaris bawah,
   kini pil bergaris supaya sasaran kliknya jelas dan
   sebanding dengan tombol lain di halaman. */
/* Link setingkat section — dibuat terisi oranye, sama
   dengan tombol "Hubungi Kami" di header, supaya jelas
   terbaca sebagai tombol dan bukan teks biasa. */
.nna-service-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 54px;
	padding: 0 32px;
	border-radius: 100px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	/* Teks tinta, bukan putih: oranye brand + putih hanya
	   2.94:1, sedangkan + tinta 6.08:1. Warna latarnya tetap
	   oranye brand yang sama, jadi rupanya tidak berubah. */
	color: var(--nna-ink);
	background-color: var(--nna-orange);
	border: 1px solid var(--nna-orange);
	box-shadow: 0 10px 26px rgba(var(--nna-orange-rgb), 0.26);
	transition: color 0.32s ease, background-color 0.32s ease, border-color 0.32s ease, transform 0.32s ease, box-shadow 0.32s ease;
}

.nna-service-link:hover {
	color: var(--nna-white);
	background-color: var(--nna-ink);
	border-color: var(--nna-ink);
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(var(--nna-orange-rgb), 0.34);
}

.nna-service-link-light {
	color: var(--nna-ink);
	background-color: var(--nna-white);
	border-color: var(--nna-white);
	box-shadow: 0 10px 26px rgba(10, 12, 40, 0.22);
}

.nna-service-link-light:hover {
	color: var(--nna-ink);
	background-color: var(--nna-orange);
	border-color: var(--nna-orange);
}

/* --- Responsive ----------------------------------------------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
	.nna-service-title {
		font-size: 56px;
	}
	.nna-service-wide-title {
		font-size: 49px;
	}
	.nna-service-body {
		padding: 34px;
	}
	.nna-service-card-title {
		font-size: 41px;
	}
	.nna-service-card {
		min-height: 520px;
	}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.nna-service-area {
		padding: 100px 0 110px;
	}
	.nna-service-title {
		font-size: 49px;
	}
	.nna-service-card-title {
		font-size: 34px;
	}
	.nna-service-card {
		min-height: 480px;
	}
	.nna-service-body {
		padding: 28px;
	}
	.nna-service-card-top {
		margin-bottom: 30px;
	}
	.nna-service-meta {
		gap: 16px;
	}
	.nna-service-meta-col strong {
		font-size: 14px;
	}
	.nna-service-wide {
		min-height: 400px;
	}
	.nna-service-wide-title {
		font-size: 41px;
	}
	.nna-service-wide-body {
		padding: 38px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.nna-service-area {
		padding: 85px 0 90px;
	}
	.nna-service-head {
		margin-bottom: 40px;
	}
	.nna-service-title {
		font-size: 44px;
	}
	.nna-service-title br {
		display: none;
	}
	.nna-service-head-link {
		margin-top: 20px;
	}
	.nna-service-card {
		min-height: 460px;
	}
	.nna-service-body {
		padding: 32px;
	}
	.nna-service-card-top {
		margin-bottom: 30px;
	}
	.nna-service-wide {
		min-height: 380px;
	}
	.nna-service-wide-title {
		font-size: 41px;
	}
	.nna-service-wide-body {
		padding: 36px;
	}
}

@media (max-width: 767px) {
	.nna-service-area {
		padding: 70px 0 80px;
		/* Di mobile section jauh lebih pendek, gradient dirapatkan
		   supaya transisi ke biru gelap tetap terjadi mulus. */
		background: linear-gradient(180deg,
				#ffffff 0%,
				#f2f4f8 14%,
				#dde3ea 32%,
				#bcc5d4 54%,
				#93a2ba 74%,
				#647a9b 90%,
				var(--nna-scene-sky-top) 100%);
	}
	.nna-service-head {
		margin-bottom: 32px;
	}
	.nna-service-eyebrow {
		font-size: 14px;
		margin-bottom: 14px;
	}
	.nna-service-title {
		font-size: 34px;
		line-height: 1.22;
	}
	.nna-service-title br {
		display: none;
	}
	.nna-service-head-link {
		margin-top: 18px;
		padding-bottom: 0;
	}
	.nna-service-row {
		--bs-gutter-y: 16px;
	}
	.nna-service-card {
		border-radius: 20px;
	}
	.nna-service-card {
		min-height: 430px;
	}
	.nna-service-body {
		padding: 28px 22px 30px;
	}
	.nna-service-card-top {
		margin-bottom: 40px;
	}
	.nna-service-card-title {
		font-size: 34px;
	}
	.nna-service-card-text {
		font-size: 17px;
		margin-bottom: 22px;
	}
	.nna-service-meta {
		grid-template-columns: 1fr;
		gap: 14px;
		margin-bottom: 26px;
	}
	.nna-service-field-row {
		grid-template-columns: 1fr;
	}
	.nna-service-field {
		padding: 13px 18px;
		font-size: 14px;
	}
	.nna-service-wide {
		min-height: 0;
		border-radius: 20px;
	}
	.nna-service-wide-body {
		padding: 30px 22px 32px;
	}
	.nna-service-wide-top {
		margin-bottom: 120px;
	}
	.nna-service-wide-title {
		font-size: 34px;
	}
	.nna-service-wide-title br {
		display: none;
	}
	.nna-service-wide-bottom {
		gap: 22px;
	}
	.nna-service-wide-text {
		font-size: 16px;
	}
	.nna-service-wide-media::after {
		background: linear-gradient(170deg,
				rgba(var(--nna-blue-rgb), 0.86) 0%,
				rgba(23, 26, 77, 0.80) 45%,
				rgba(23, 26, 77, 0.72) 100%);
	}
	.nna-pill {
		height: 48px;
		padding: 0 26px;
		font-size: 14px;
	}
	.nna-service-actions {
		gap: 10px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nna-service-media img,
	.nna-service-wide-media img {
		transition: none;
	}

	.nna-service-card:hover .nna-service-media img,
	.nna-service-wide:hover .nna-service-wide-media img {
		transform: none;
	}

	.nna-pill:hover {
		transform: none;
	}
}

/* ============================================
   09. SCENE PARALLAX (LAYANAN -> BRAND)
   Dua layer gambar yang di-scrub saat section
   di-pin: langit di belakang, armada PNG
   transparan di depan.

   --nna-scene-sky-top adalah SATU sumber warna
   untuk dua tempat: akhir gradient section
   Layanan dan warna dasar scene. Selama nilainya
   sama dengan warna baris paling atas
   scene-sky.webp, sambungannya tak terlihat.
   Kalau langitnya diganti, cukup ubah nilai ini.
   ============================================ */
:root {
	/* Diambil dari baris paling atas assets/img/scene/truck-2.jpeg.
	   Kalau fotonya diganti, sampel ulang baris teratasnya dan
	   ubah dua nilai di bawah — tidak ada tempat lain yang perlu
	   disentuh, gradient section Layanan ikut otomatis. */
	--nna-scene-sky-top: #38527d;
	--nna-scene-sky-top-rgb: 56, 82, 125;
	--nna-scene-end: #16183a;
}

.nna-scene {
	position: relative;
	z-index: 1;
	/* Angka ini menentukan berapa lama layar ditahan:
	   tinggi section dikurangi 100vh tinggi stage.
	   150vh = ditahan 50vh — cukup untuk merasakan
	   drift dan tint, tanpa terasa halaman macet.

	   Dulu 220vh saat scene masih tiga lapis (langit
	   memudar + tint naik + armada menimpa). Sekarang
	   isinya satu foto, jadi tahanan sepanjang itu
	   membuat halaman terasa berhenti tanpa sebab. */
	height: 150vh;
	background-color: var(--nna-scene-sky-top);
}

.nna-scene-stage {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-color: var(--nna-scene-sky-top);
}

.nna-scene-layer {
	position: absolute;
	inset: 0;
	will-change: transform;
}

.nna-scene-layer img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Tint gelap — opacity-nya di-scrub JS mengikuti scroll,
   supaya foto meredup menuju warna section berikutnya.
   Nilai default di sini dipakai kalau GSAP gagal load. */
.nna-scene-tint {
	position: absolute;
	inset: 0;
	z-index: 2;
	opacity: 0.25;
	background-color: var(--nna-scene-end);
}

/* Layer foto dibuat lebih tinggi dari stage supaya
   pergeseran parallax tidak pernah menyingkap celah
   di tepi atas maupun bawah. */
.nna-scene-truck {
	z-index: 1;
	top: -8%;
	height: 116%;
}

.nna-scene-truck img {
	object-position: center center;
}

/* Fade pembuka: baris teratas foto diselaraskan dengan
   warna penutup section Layanan. Ini yang menutup sisa
   selisih warna saat object-fit: cover memotong foto
   berbeda-beda di tiap ukuran layar. */
.nna-scene-stage::before {
	position: absolute;
	content: "";
	left: 0;
	right: 0;
	top: 0;
	z-index: 5;
	height: 22%;
	pointer-events: none;
	background: linear-gradient(180deg,
			var(--nna-scene-sky-top) 0%,
			rgba(var(--nna-scene-sky-top-rgb), 0.72) 28%,
			rgba(var(--nna-scene-sky-top-rgb), 0.30) 62%,
			rgba(var(--nna-scene-sky-top-rgb), 0) 100%);
}

/* Fade penutup: bagian bawah armada (aspal) diarahkan
   ke warna section berikutnya supaya tetap menyatu. */
.nna-scene-veil {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 4;
	height: 42%;
	pointer-events: none;
	background: linear-gradient(180deg,
			rgba(22, 24, 58, 0) 0%,
			rgba(22, 24, 58, 0.35) 48%,
			rgba(22, 24, 58, 0.82) 80%,
			var(--nna-scene-end) 100%);
}

/* Reduce-motion / JS gagal: tampilkan komposisi statis,
   section dipendekkan jadi setinggi stage saja. */
.nna-scene.is-static {
	height: 100vh;
}

.nna-scene.is-static .nna-scene-tint {
	opacity: 0.35;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.nna-scene {
		height: 200vh;
	}
}

@media (max-width: 767px) {
	.nna-scene {
		height: 175vh;
	}
	/* Potret memotong frame cukup dalam — geser fokus ke
	   sisi kanan supaya kabin & logo tetap terlihat. */
	.nna-scene-truck img {
		object-position: 68% center;
	}
	.nna-scene-veil {
		height: 34%;
	}
}

/* ============================================
   10. SECTION KEMITRAAN (HOME)
   Diapit dua section black-bg-5 (#16183a), jadi
   warnanya dibuat sama persis — sambungannya
   mulus tanpa perlu gradient transisi.

   Logo mitra warnanya gelap (navy/hitam/merah),
   jadi ditaruh di atas plate terang. Plate juga
   yang menyamakan tinggi tampil tiap logo yang
   rasionya berbeda-beda.
   ============================================ */
.nna-partner-area {
	position: relative;
	overflow: hidden;
	padding: 40px 0 140px;
	background-color: #16183a;
}

/* Sapuan cahaya biru-oranye, bikin blok gelap
   panjang ini tidak terasa mati. */
.nna-partner-glow {
	position: absolute;
	top: 100px;
	left: 50%;
	width: 1100px;
	height: 620px;
	z-index: 0;
	pointer-events: none;
	transform: translateX(-50%);
	background:
		radial-gradient(ellipse 46% 60% at 32% 50%, rgba(var(--nna-blue-soft-rgb), 0.26) 0%, rgba(var(--nna-blue-rgb), 0) 70%),
		radial-gradient(ellipse 40% 55% at 72% 46%, rgba(var(--nna-orange-rgb), 0.16) 0%, rgba(var(--nna-orange-rgb), 0) 70%);
	filter: blur(60px);
}

/* --- Judul ---------------------------------------------------- */
.nna-partner-head {
	position: relative;
	z-index: 1;
	margin-bottom: 60px;
}

.nna-partner-eyebrow {
	display: inline-block;
	margin-bottom: 18px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nna-orange);
}

.nna-partner-title {
	font-size: 63px;
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.025em;
	margin-bottom: 0;
	color: var(--nna-white);
}

.nna-partner-intro p {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.75;
	margin-bottom: 18px;
	color: rgba(255, 255, 255, 0.62);
}

.nna-partner-intro .nna-service-link {
	color: var(--nna-ink);
	background-color: var(--nna-orange);
	border-color: var(--nna-orange);
}

.nna-partner-intro .nna-service-link:hover {
	color: var(--nna-ink);
	background-color: var(--nna-white);
	border-color: var(--nna-white);
}

/* --- Kartu mitra ---------------------------------------------- */
.nna-partner-row {
	position: relative;
	z-index: 1;
	--bs-gutter-x: 24px;
	--bs-gutter-y: 24px;
}

.nna-partner-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 28px;
	border-radius: 24px;
	/* background-color: rgba(255, 255, 255, 0.035); */
	transition: background-color 0.4s ease, transform 0.4s ease;
	border-bottom: none !important;
}

/* --- Border kartu -------------------------------------------
   border biasa tidak bisa dibuat memudar, jadi garisnya dibuat
   dari pseudo-element: kotak sebesar kartu diisi gradient, lalu
   bagian dalamnya dilubangi mask supaya yang tersisa hanya
   cincin 1px. Karena isinya gradient, opacity garis bisa diatur
   per sisi — inilah yang bikin sisi bawah menghilang.

   ::before = kondisi diam (putih, memudar ke bawah)
   ::after  = kondisi hover (gradient brand, penuh sekeliling)
   ------------------------------------------------------------ */
.nna-partner-card::before,
.nna-partner-card::after {
	position: absolute;
	content: "";
	inset: 0;
	padding: 1px;
	border-radius: inherit;
	pointer-events: none;
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	transition: opacity 0.45s ease;
}

/* Diam: terang di atas lalu habis sebelum sampai dasar kartu. */
.nna-partner-card::before {
	opacity: 1;
	background: linear-gradient(180deg,
			rgba(255, 255, 255, 0.26) 0%,
			rgba(255, 255, 255, 0.15) 38%,
			rgba(255, 255, 255, 0.05) 72%,
			rgba(255, 255, 255, 0) 96%);
}

/* Hover: cincin gradient oranye -> biru mengelilingi kartu.
   conic-gradient dipakai supaya warnanya benar-benar berputar
   mengikuti tepi; nilai awal dan akhir disamakan agar tidak
   ada garis sambungan yang terlihat. */
.nna-partner-card::after {
	opacity: 0;
	background: conic-gradient(from 200deg at 50% 50%,
			var(--nna-orange) 0deg,
			var(--nna-orange-soft) 48deg,
			var(--nna-blue-soft) 140deg,
			var(--nna-blue) 200deg,
			var(--nna-blue-soft) 262deg,
			var(--nna-orange) 360deg);
}

.nna-partner-card:hover {
	transform: translateY(-6px);
	background-color: rgba(255, 255, 255, 0.06);
}

.nna-partner-card:hover::before {
	opacity: 0;
}

.nna-partner-card:hover::after {
	opacity: 1;
}

/* Plate kaca — panel transparan yang mem-blur apa pun
   di belakangnya (glow section + dasar kartu), dengan
   sheen diagonal dan garis highlight di tepi atas
   supaya terbaca sebagai permukaan kaca, bukan
   sekadar kotak transparan. */
.nna-partner-plate {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 132px;
	padding: 24px 32px;
	margin-bottom: 26px;
	overflow: hidden;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background-color: #fff;
	background-image: linear-gradient(135deg,
			rgba(255, 255, 255, 0.12) 0%,
			rgba(255, 255, 255, 0.02) 44%,
			rgba(255, 255, 255, 0.07) 100%);
	backdrop-filter: blur(16px) saturate(130%);
	-webkit-backdrop-filter: blur(16px) saturate(130%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
	transition: border-color 0.4s ease, background-color 0.4s ease;
}

/* Kilau tipis melintang — detail kecil yang bikin
   permukaannya terasa memantulkan cahaya. */
.nna-partner-plate::after {
	position: absolute;
	content: "";
	top: -60%;
	left: -20%;
	width: 55%;
	height: 220%;
	pointer-events: none;
	transform: rotate(18deg);
	background: linear-gradient(90deg,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.07) 50%,
			rgba(255, 255, 255, 0) 100%);
}

.nna-partner-card:hover .nna-partner-plate {
	background-color: rgba(255, 255, 255, 0.085);
	border-color: rgba(255, 255, 255, 0.24);
}

/* Logo aslinya gelap (navy/hitam/merah) — di atas kaca
   gelap tidak akan terbaca, jadi dijadikan siluet putih.
   Konsekuensinya warna brand mitra tidak tampil; ini
   memang harga dari menaruh logo gelap di panel gelap. */
.nna-partner-plate img {
	position: relative;
	z-index: 1;
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	opacity: 0.86;
	/* filter: brightness(0) invert(1); */
	transition: opacity 0.4s ease;
}

.nna-partner-card:hover .nna-partner-plate img {
	opacity: 1;
}

.nna-partner-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.nna-partner-meta {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 12px;
}

.nna-partner-index {
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.08em;
	color: var(--nna-orange);
}

.nna-partner-since {
	position: relative;
	padding-left: 16px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	color: rgba(255, 255, 255, 0.45);
}

.nna-partner-since::before {
	position: absolute;
	content: "";
	left: 0;
	top: 50%;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	transform: translateY(-50%);
	background-color: rgba(255, 255, 255, 0.28);
}

.nna-partner-name {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
	margin-bottom: 20px;
	margin-top: 20px;
	color: var(--nna-white);
}

.nna-partner-text {
	font-size: 17px;
	font-weight: 400;
	line-height: 1.72;
	margin-bottom: 22px;
	color: rgba(255, 255, 255, 0.62);
	height: 200px;
}

/* Merek yang didistribusikan */
.nna-partner-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 30px;
}

.nna-partner-tags span {
	padding: 7px 14px;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	color: rgba(255, 255, 255, 0.8);
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.nna-partner-card:hover .nna-partner-tags span {
	color: var(--nna-white);
	background-color: rgba(var(--nna-orange-rgb), 0.14);
	border-color: rgba(var(--nna-orange-rgb), 0.3);
}

/* --- Ajakan kerja sama ---------------------------------------- */
.nna-partner-cta {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	margin-top: 24px;
	padding: 40px 48px;
	border-radius: 24px;
	background: linear-gradient(112deg,
			rgba(var(--nna-blue-rgb), 0.55) 0%,
			rgba(var(--nna-blue-soft-rgb), 0.28) 52%,
			rgba(var(--nna-orange-rgb), 0.18) 100%);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.nna-partner-cta-text h3 {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
	margin-bottom: 8px;
	color: var(--nna-white);
}

.nna-partner-cta-text p {
	font-size: 17px;
	font-weight: 400;
	line-height: 1.6;
	margin-bottom: 0;
	color: rgba(255, 255, 255, 0.68);
}

/* --- Responsive ----------------------------------------------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
	.nna-partner-title {
		font-size: 56px;
	}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.nna-partner-area {
		padding: 30px 0 100px;
	}
	.nna-partner-title {
		font-size: 49px;
	}
	.nna-partner-name {
		font-size: 26px;
	}
	.nna-partner-plate {
		height: 116px;
		padding: 20px 26px;
	}
	.nna-partner-cta {
		padding: 34px 36px;
	}
	.nna-partner-cta-text h3 {
		font-size: 27px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.nna-partner-area {
		padding: 20px 0 85px;
	}
	.nna-partner-head {
		margin-bottom: 45px;
	}
	.nna-partner-title {
		font-size: 44px;
	}
	.nna-partner-title br {
		display: none;
	}
	.nna-partner-intro {
		margin-top: 24px;
	}
	.nna-partner-plate {
		height: 120px;
	}
	.nna-partner-cta {
		padding: 34px 32px;
	}
	.nna-partner-cta-text h3 {
		font-size: 27px;
	}
}

@media (max-width: 767px) {
	.nna-partner-area {
		padding: 10px 0 70px;
	}
	.nna-partner-glow {
		width: 520px;
		height: 380px;
		top: 100px;
		filter: blur(45px);
	}
	.nna-partner-head {
		margin-bottom: 34px;
	}
	.nna-partner-eyebrow {
		font-size: 14px;
		margin-bottom: 14px;
	}
	.nna-partner-title {
		font-size: 34px;
		line-height: 1.22;
	}
	.nna-partner-title br {
		display: none;
	}
	.nna-partner-intro {
		margin-top: 20px;
	}
	.nna-partner-intro p {
		font-size: 15px;
	}
	.nna-partner-row {
		--bs-gutter-y: 16px;
	}
	.nna-partner-card {
		padding: 20px;
		border-radius: 20px;
	}
	.nna-partner-plate {
		height: 98px;
		padding: 18px 22px;
		margin-bottom: 20px;
		border-radius: 14px;
	}
	.nna-partner-name {
		font-size: 24px;
	}
	.nna-partner-text {
		font-size: 16px;
		margin-bottom: 18px;
	}
	.nna-partner-tags span {
		padding: 6px 12px;
		font-size: 12px;
	}
	.nna-partner-cta {
		gap: 24px;
		margin-top: 16px;
		padding: 28px 22px;
		border-radius: 20px;
	}
	.nna-partner-cta-text h3 {
		font-size: 24px;
	}
	.nna-partner-cta-text p {
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nna-partner-card,
	.nna-partner-card::before,
	.nna-partner-card::after {
		transition: none;
	}

	.nna-partner-card:hover {
		transform: none;
	}
}

/* ============================================
   11. SECTION GALERI (HOME)
   Menggantikan "Our exclusive case studies".

   Semua foto sumbernya 4:5 potret. Kalau ditata
   seragam hasilnya kaku, jadi dipakai mosaik:
   dua kotak besar diagonal, satu tinggi, satu
   melebar, sisanya kecil. object-fit: cover yang
   mengurus pemotongan tiap rasio.

   Lightbox memakai Magnific Popup yang sudah
   ada di template (.popup-image, mode gallery),
   jadi tidak ada library tambahan.
   ============================================ */
.nna-gallery-area {
	position: relative;
	padding: 0 0 250px;
	background-color: #16183a;
}

/* Jembatan warna gelap -> putih.
   Tinggi dipatok 270px (bukan persen) supaya panjang
   transisinya tetap sama berapa pun tinggi section —
   pakai persen, titik gradasinya ikut bergeser dan bisa
   jatuh di tengah mosaik.

   Section berikutnya (.dgm-team-area) tidak punya
   background sendiri, jadi mendarat di putih body.
   Ujung gradient ini disamakan ke #ffffff supaya
   pertemuannya tidak terlihat. */
.nna-gallery-area::after {
	position: absolute;
	content: "";
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	height: 270px;
	pointer-events: none;
	background: linear-gradient(180deg,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.04) 22%,
			rgba(255, 255, 255, 0.14) 42%,
			rgba(255, 255, 255, 0.34) 60%,
			rgba(255, 255, 255, 0.62) 76%,
			rgba(255, 255, 255, 0.87) 90%,
			#ffffff 100%);
}

/* Konten dinaikkan di atas jembatan tadi */
.nna-gallery-area > .container {
	position: relative;
	z-index: 1;
}

/* --- Judul ---------------------------------------------------- */
.nna-gallery-head {
	margin-bottom: 50px;
}

.nna-gallery-eyebrow {
	display: inline-block;
	margin-bottom: 18px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nna-orange);
}

.nna-gallery-title {
	font-size: 63px;
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.025em;
	margin-bottom: 0;
	color: var(--nna-white);
}

.nna-gallery-intro p {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.75;
	margin-bottom: 18px;
	color: rgba(255, 255, 255, 0.62);
}

.nna-service-link {
	color: #fff !important;
	background-color: var(--nna-orange);
	border-color: var(--nna-orange);
}

.nna-gallery-intro .nna-service-link:hover {
	color: #000;
	background-color: var(--nna-white);
	border-color: var(--nna-white);
}

/* --- Dua baris berjalan ---------------------------------------
   Menggantikan mosaik. Baris atas bergerak ke kiri, baris bawah
   ke kanan. Kartu sengaja dibiarkan menembus tepi layar (di luar
   .container) supaya terbaca sebagai aliran yang tak berujung,
   bukan galeri yang punya awal dan akhir.

   Isi track digandakan oleh JS lalu digeser -50% — itu sebabnya
   putarannya mulus tanpa lompatan.
   --------------------------------------------------------------- */
.nna-gallery-marquee {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 34px;
	/* Tepi kiri-kanan dipudarkan supaya kartu tidak terpotong
	   mentah di batas layar. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.nna-gallery-row {
	overflow: hidden;
}

.nna-gallery-track {
	display: flex;
	align-items: flex-start;
	gap: 22px;
	width: max-content;
	will-change: transform;
	animation: nna-marquee-left 58s linear infinite;
}

.nna-gallery-row[data-dir="right"] .nna-gallery-track {
	animation-name: nna-marquee-right;
}

@keyframes nna-marquee-left {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-50%, 0, 0);
	}
}

@keyframes nna-marquee-right {
	from {
		transform: translate3d(-50%, 0, 0);
	}

	to {
		transform: translate3d(0, 0, 0);
	}
}

/* Berhenti saat disentuh supaya kartunya bisa dibaca & diklik */
.nna-gallery-row:hover .nna-gallery-track,
.nna-gallery-row:focus-within .nna-gallery-track {
	animation-play-state: paused;
}

/* Track hanya digandakan sekali; kalau JS gagal jalan, baris
   tetap tampil normal tanpa animasi (tidak ada yang rusak). */
.nna-gallery-marquee:not(.is-ready) .nna-gallery-track {
	animation: none;
}

/* --- Kartu ---------------------------------------------------- */
.nna-gallery-item {
	flex: 0 0 auto;
	width: 296px;
	display: block;
}

.nna-gallery-thumb {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	margin-bottom: 14px;
	border-radius: 16px;
	background-color: rgba(255, 255, 255, 0.05);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
	transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.nna-gallery-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.nna-gallery-item:hover .nna-gallery-thumb {
	transform: translateY(-5px);
	box-shadow: inset 0 0 0 1px rgba(var(--nna-orange-rgb), 0.55),
		0 18px 40px rgba(0, 0, 0, 0.32);
}

.nna-gallery-item:hover .nna-gallery-thumb img {
	transform: scale(1.07);
}

/* --- Keterangan di bawah kartu -------------------------------- */
.nna-gallery-info {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 2px;
}

.nna-gallery-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.72);
	background-color: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease;
}

.nna-gallery-item:hover .nna-gallery-ico {
	color: var(--nna-white);
	background-color: rgba(var(--nna-orange-rgb), 0.2);
	border-color: rgba(var(--nna-orange-rgb), 0.45);
}

.nna-gallery-meta {
	display: block;
	min-width: 0;
}

.nna-gallery-name {
	display: block;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--nna-white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nna-gallery-sub {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.48);
}

/* --- Lightbox (Magnific Popup) -------------------------------- */
.mfp-bg {
	background-color: #0b0d24;
	opacity: 0.96;
}

.mfp-figure figure {
	line-height: 0;
}

.mfp-img {
	border-radius: 14px;
}

.mfp-title {
	padding-top: 14px;
	font-family: var(--nna-ff-primary);
	font-size: 18px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.82);
}

.mfp-counter {
	font-family: var(--nna-ff-primary);
	font-size: 13px;
	color: rgba(255, 255, 255, 0.5);
}

.mfp-arrow::before,
.mfp-arrow::after {
	border-color: transparent;
}

.mfp-arrow:hover::after {
	opacity: 1;
}

.mfp-arrow-left::after {
	border-right-color: var(--nna-orange);
}

.mfp-arrow-right::after {
	border-left-color: var(--nna-orange);
}

.mfp-close {
	color: var(--nna-white);
	opacity: 0.8;
	transition: color 0.3s ease, opacity 0.3s ease;
}

.mfp-close:hover {
	color: var(--nna-orange);
	opacity: 1;
}

/* --- Responsive ----------------------------------------------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
	.nna-gallery-title {
		font-size: 56px;
	}
	.nna-gallery-item {
		width: 274px;
	}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.nna-gallery-area {
		padding-bottom: 210px;
	}
	.nna-gallery-area::after {
		height: 230px;
	}
	.nna-gallery-title {
		font-size: 49px;
	}
	.nna-gallery-item {
		width: 250px;
	}
	.nna-gallery-track {
		gap: 18px;
	}
	.nna-gallery-marquee {
		gap: 28px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.nna-gallery-area {
		padding-bottom: 190px;
	}
	.nna-gallery-area::after {
		height: 205px;
	}
	.nna-gallery-head {
		margin-bottom: 40px;
	}
	.nna-gallery-title {
		font-size: 44px;
	}
	.nna-gallery-item {
		width: 232px;
	}
	.nna-gallery-track {
		gap: 16px;
	}
	.nna-gallery-marquee {
		gap: 26px;
	}
	.nna-gallery-title br {
		display: none;
	}
	.nna-gallery-intro {
		margin-top: 24px;
	}
}

@media (max-width: 767px) {
	.nna-gallery-area {
		padding-bottom: 150px;
	}
	.nna-gallery-area::after {
		height: 165px;
	}
	.nna-gallery-head {
		margin-bottom: 32px;
	}
	.nna-gallery-eyebrow {
		font-size: 14px;
		margin-bottom: 14px;
	}
	.nna-gallery-title {
		font-size: 34px;
		line-height: 1.22;
	}
	.nna-gallery-title br {
		display: none;
	}
	.nna-gallery-intro {
		margin-top: 20px;
	}
	.nna-gallery-intro p {
		font-size: 15px;
	}
	.nna-gallery-marquee {
		gap: 20px;
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
	}
	.nna-gallery-track {
		gap: 12px;
		animation-duration: 40s;
	}
	.nna-gallery-item {
		width: 208px;
	}
	.nna-gallery-thumb {
		margin-bottom: 11px;
		border-radius: 13px;
	}
	.nna-gallery-ico {
		width: 32px;
		height: 32px;
	}
	.nna-gallery-ico svg {
		width: 14px;
		height: 14px;
	}
	.nna-gallery-name {
		font-size: 17px;
	}
	.nna-gallery-sub {
		font-size: 12px;
	}

}

@media (prefers-reduced-motion: reduce) {
	.nna-gallery-thumb img {
		transition: none;
	}

	.nna-gallery-item:hover .nna-gallery-thumb img {
		transform: none;
	}
}

/* ============================================
   12. SECTION BERITA & INSIGHT (HOME)
   Menggantikan blog area bawaan template.

   Susunan mengikuti referensi:
   - kartu utama: media kiri + teks kanan,
     dengan kartu angka melayang di atas foto
   - "Artikel Terbaru": judul + subjudul kiri,
     panah navigasi kanan, lalu slider 3 kartu
   ============================================ */
.nna-news-area {
	position: relative;
	overflow: hidden;
	padding: 130px 0 140px;
	background-color: var(--nna-white);
}

/* --- Dekorasi background -------------------------------------
   Motif yang sama dengan section Tentang Kami, hanya posisinya
   digeser mengikuti bobot layout di sini: blob berkumpul di
   sekitar kartu utama (atas), lalu satu sapuan lembut di bawah
   sebagai alas slider artikel.
   ------------------------------------------------------------- */
.nna-news-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.nna-news-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(var(--nna-blue-rgb), 0.055) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(var(--nna-blue-rgb), 0.055) 1px, transparent 1px);
	background-size: 96px 96px;
	-webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 34%, #000 0%, transparent 80%);
	mask-image: radial-gradient(ellipse 78% 62% at 50% 34%, #000 0%, transparent 80%);
}

.nna-news-blob {
	position: absolute;
	display: block;
	border-radius: 50%;
	filter: blur(110px);
	will-change: transform;
}

/* Biru — sisi kiri, di belakang foto kartu utama */
.nna-news-blob-blue {
	top: 100px;
    left: 35%;
	width: 700px;
	height: 600px;
	opacity: 0.8;
	transform: translateX(-96%);
	background: radial-gradient(circle at 50% 50%, rgba(var(--nna-blue-rgb), 0.46) 0%, rgba(var(--nna-blue-rgb), 0.16) 42%, rgba(var(--nna-blue-rgb), 0) 72%);
}

/* Oranye — sisi kanan, di belakang judul kartu utama */
.nna-news-blob-orange {
	top: 190px;
	left: 75%;
	width: 600px;
	height: 520px;
	opacity: 0.52;
	transform: translateX(-4%);
	background: radial-gradient(circle at 50% 50%, rgba(var(--nna-orange-rgb), 0.36) 0%, rgba(var(--nna-orange-rgb), 0) 70%);
}

/* Sapuan lembut sebagai alas slider artikel */
.nna-news-blob-soft {
	left: 50%;
	bottom: 0;
	width: 980px;
	height: 560px;
	opacity: 0.55;
	transform: translateX(-50%);
	background: radial-gradient(circle at 50% 50%, rgba(var(--nna-blue-rgb), 0.26) 0%, rgba(var(--nna-blue-rgb), 0.10) 38%, rgba(var(--nna-orange-rgb), 0.06) 58%, rgba(255, 255, 255, 0) 76%);
}

.nna-news-dot {
	position: absolute;
	top: 58px;
	right: 26%;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-color: var(--nna-ink);
}

/* Konten dinaikkan di atas dekorasi */
.nna-news-area > .container {
	position: relative;
	z-index: 1;
}

/* --- Kartu utama ---------------------------------------------- */
/* Kartu dibuat semi-transparan supaya blob di belakangnya
   tetap terbaca. Kalau solid, dekorasi tadi hanya kelihatan
   di margin kiri-kanan dan bagian ini terasa datar. */
.nna-news-feature {
	position: relative;
	margin-bottom: 96px;
	padding: 28px;
	border-radius: 28px;
	background-color: rgba(255, 255, 255, 0.58);
	border: 1px solid rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(18px) saturate(115%);
	-webkit-backdrop-filter: blur(18px) saturate(115%);
	box-shadow: 0 20px 60px rgba(var(--nna-blue-rgb), 0.07);
}

.nna-news-feature-media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: 20px;
	background-color: var(--nna-blue-tint);
}

.nna-news-feature-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.nna-news-feature-media:hover img {
	transform: scale(1.05);
}

/* Kartu angka melayang — angkanya diambil dari data
   operasional NNA, bukan hiasan kosong. */
.nna-news-stat {
	position: absolute;
	z-index: 1;
	display: block;
	min-width: 168px;
	padding: 12px 16px 14px;
	border-radius: 12px;
	background-color: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 10px 30px rgba(var(--nna-blue-rgb), 0.18);
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.nna-news-stat-1 {
	top: 12%;
	right: 6%;
}

.nna-news-stat-2 {
	top: 42%;
	right: 16%;
}

.nna-news-stat-3 {
	top: 70%;
	right: 30%;
}

.nna-news-feature-media:hover .nna-news-stat-1 {
	transform: translateY(-5px);
}

.nna-news-feature-media:hover .nna-news-stat-2 {
	transform: translateY(-8px);
}

.nna-news-feature-media:hover .nna-news-stat-3 {
	transform: translateY(-11px);
}

.nna-news-stat-label {
	display: block;
	margin-bottom: 2px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--nna-muted);
}

.nna-news-stat-value {
	display: block;
	margin-bottom: 8px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--nna-ink);
}

.nna-news-stat-bar {
	display: block;
	height: 4px;
	border-radius: 100px;
	overflow: hidden;
	background-color: var(--nna-line);
}

.nna-news-stat-bar i {
	display: block;
	height: 100%;
	border-radius: inherit;
	background-color: var(--nna-blue);
}

.nna-news-stat-2 .nna-news-stat-bar i,
.nna-news-stat-3 .nna-news-stat-bar i {
	background-color: var(--nna-orange);
}

/* --- Teks kartu utama ----------------------------------------- */
.nna-news-feature-body {
	padding: 20px 20px 20px 50px;
}

.nna-news-feature-meta {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 22px;
}

.nna-news-badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 16px;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--nna-white);
	background-color: var(--nna-orange);
}

.nna-news-date {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--nna-muted);
}

.nna-news-feature-title {
	font-size: 49px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.025em;
	margin-bottom: 20px;
}

.nna-news-feature-title a {
	color: var(--nna-ink);
	transition: color 0.3s ease;
}

.nna-news-feature-title a:hover {
	color: var(--nna-blue);
}

.nna-news-feature-text {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.75;
	margin-bottom: 26px;
	color: var(--nna-body);
}

/* --- Link "Selengkapnya" -------------------------------------- */
/* Link di dalam kartu — pil yang lebih ringkas dari
   pil setingkat section, supaya hierarkinya tetap
   terbaca meski keduanya sama-sama tombol. */
/* Link di dalam kartu — terisi biru brand, bukan oranye.
   Oranye di 17 kartu sekaligus akan mendominasi halaman
   dan melanggar porsi aksen di panduan brand. */
.nna-news-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 46px;
	padding: 0 24px;
	border-radius: 100px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: var(--nna-white);
	background-color: var(--nna-blue);
	border: 1px solid var(--nna-blue);
	transition: color 0.32s ease, background-color 0.32s ease, border-color 0.32s ease;
}

.nna-news-link i {
	display: inline-flex;
	line-height: 0;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.nna-news-link:hover {
	color: var(--nna-white);
	background-color: var(--nna-ink);
	border-color: var(--nna-ink);
}

.nna-news-link:hover i {
	transform: translate(2px, -2px);
}

/* --- Artikel terbaru ------------------------------------------ */
.nna-news-recent-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: 40px;
}

.nna-news-recent-title {
	font-size: 63px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.025em;
	margin-bottom: 8px;
	color: var(--nna-ink);
}

.nna-news-recent-sub {
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	margin-bottom: 0;
	color: var(--nna-muted);
}

.nna-news-nav {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.nna-news-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	color: var(--nna-ink);
	background-color: transparent;
	border: 1px solid var(--nna-line);
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.nna-news-arrow:hover {
	color: var(--nna-white);
	background-color: var(--nna-orange);
	border-color: var(--nna-orange);
}

/* Swiper menandai tombol yang tidak bisa dipakai lagi */
.nna-news-arrow.swiper-button-disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* --- Kartu artikel -------------------------------------------- */
.nna-news-slider {
	overflow: hidden;
}

.nna-news-card-media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	margin-bottom: 18px;
	border-radius: 16px;
	background-color: var(--nna-blue-tint);
}

.nna-news-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.nna-news-card:hover .nna-news-card-media img {
	transform: scale(1.06);
}

.nna-news-card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 12px;
}

.nna-news-cat {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--nna-orange);
}

.nna-news-card-title {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: -0.02em;
	margin-bottom: 12px;
}

.nna-news-card-title a {
	color: var(--nna-ink);
	transition: color 0.3s ease;
}

.nna-news-card-title a:hover {
	color: var(--nna-blue);
}

.nna-news-card-text {
	font-size: 17px;
	font-weight: 400;
	line-height: 1.7;
	margin-bottom: 18px;
	color: var(--nna-body);
}

/* --- Responsive ----------------------------------------------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
	.nna-news-feature-title {
		font-size: 41px;
	}
	.nna-news-feature-body {
		padding-left: 34px;
	}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.nna-news-area {
		padding: 100px 0 110px;
	}
	.nna-news-feature {
		margin-bottom: 76px;
		padding: 22px;
	}
	.nna-news-feature-body {
		padding: 12px 8px 12px 28px;
	}
	.nna-news-feature-title {
		font-size: 34px;
	}
	.nna-news-feature-text {
		font-size: 17px;
		margin-bottom: 22px;
	}
	.nna-news-stat {
		min-width: 138px;
		padding: 10px 13px 12px;
	}
	.nna-news-stat-value {
		font-size: 18px;
	}
	.nna-news-recent-title {
		font-size: 52px;
	}
	.nna-news-card-title {
		font-size: 22px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.nna-news-area {
		padding: 85px 0 90px;
	}
	.nna-news-dot {
		display: none;
	}
	.nna-news-blob-blue,
	.nna-news-blob-orange {
		width: 460px;
		height: 420px;
	}
	.nna-news-feature {
		margin-bottom: 64px;
		padding: 20px;
	}
	.nna-news-feature-body {
		padding: 30px 6px 6px;
	}
	.nna-news-feature-title {
		font-size: 37px;
	}
	.nna-news-recent-title {
		font-size: 44px;
	}
}

@media (max-width: 767px) {
	.nna-news-area {
		padding: 70px 0 75px;
	}
	.nna-news-dot {
		display: none;
	}
	.nna-news-grid {
		background-size: 64px 64px;
	}
	.nna-news-blob {
		filter: blur(70px);
	}
	.nna-news-blob-blue,
	.nna-news-blob-orange {
		width: 320px;
		height: 300px;
	}
	.nna-news-blob-blue {
		transform: translateX(-88%);
	}
	.nna-news-blob-orange {
		transform: translateX(-12%);
	}
	.nna-news-blob-soft {
		width: 440px;
		bottom: -180px;
	}
	.nna-news-feature {
		margin-bottom: 50px;
		padding: 14px;
		border-radius: 22px;
	}
	.nna-news-feature-media {
		aspect-ratio: 4 / 3;
		border-radius: 16px;
	}

	/* Tiga kartu angka bertumpuk terlalu ramai di layar
	   kecil — sisakan satu, dipindah ke sudut bawah. */
	.nna-news-stat-2,
	.nna-news-stat-3 {
		display: none;
	}
	.nna-news-stat-1 {
		top: auto;
		right: 12px;
		bottom: 12px;
		min-width: 140px;
		padding: 10px 13px 12px;
	}
	.nna-news-stat-value {
		font-size: 18px;
	}
	.nna-news-feature-body {
		padding: 24px 4px 4px;
	}
	.nna-news-feature-meta {
		margin-bottom: 16px;
	}
	.nna-news-feature-title {
		font-size: 29px;
		line-height: 1.28;
		margin-bottom: 14px;
	}
	.nna-news-feature-text {
		font-size: 17px;
		margin-bottom: 20px;
	}
	.nna-news-recent-head {
		gap: 20px;
		margin-bottom: 26px;
	}
	.nna-news-recent-title {
		font-size: 30px;
	}
	.nna-news-recent-sub {
		font-size: 14px;
	}
	.nna-news-arrow {
		width: 38px;
		height: 38px;
	}
	.nna-news-card-title {
		font-size: 22px;
	}
	.nna-news-card-text {
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nna-news-feature-media img,
	.nna-news-card-media img,
	.nna-news-stat,
	.nna-news-link,
	.nna-news-link i {
		transition: none;
	}

	.nna-news-feature-media:hover img,
	.nna-news-card:hover .nna-news-card-media img,
	.nna-news-feature-media:hover .nna-news-stat-1,
	.nna-news-feature-media:hover .nna-news-stat-2,
	.nna-news-feature-media:hover .nna-news-stat-3 {
		transform: none;
	}
}

/* ============================================
   13. DIVIDER KARIR
   Pita CTA bersudut besar, mengikuti pola panel
   penutup rivian.com — teks di kiri, aksi di
   kanan, tanpa form.

   Blok berdiri sendiri (tidak bergantung section
   di atas/bawahnya), jadi bisa dipindah ke
   antara section mana pun cukup dengan
   memindahkan markup-nya.
   ============================================ */
.nna-cta-area {
	position: relative;
	padding: 0 0 120px;
	background-color: var(--nna-white);
}

.nna-cta-band {
	position: relative;
	overflow: hidden;
	padding: 72px 80px;
	border-radius: 32px;
	/* Oranye brand dengan sedikit kemiringan gelap di sudut
	   kanan bawah — flat satu warna di bidang selebar ini
	   cenderung terlihat mentah. */
	/* Warna dasar dipertahankan sebagai cadangan: kalau
	   fotonya gagal dimuat, pita ini tetap tampil oranye
	   penuh, bukan kotak kosong. */
	background-color: var(--nna-orange);
	box-shadow: 0 26px 70px rgba(var(--nna-orange-rgb), 0.28);
}

/* Foto latar */
.nna-cta-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.nna-cta-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 38%;
}

/* Oranye kini jadi lapisan di atas foto, bukan warna solid.
   Dua lapis:
   1. scrim gelap tipis di sisi kiri — tempat teks berada.
      Tanpa ini teks putih di atas oranye hanya 2.94:1,
      di bawah ambang WCAG.
   2. oranye brand dengan alpha, makin tipis ke kanan
      supaya fotonya tetap terbaca di sisi yang kosong. */
.nna-cta-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(96deg,
			rgba(26, 14, 4, 0.42) 0%,
			rgba(26, 14, 4, 0.18) 44%,
			rgba(26, 14, 4, 0) 68%),
		linear-gradient(118deg,
			rgba(var(--nna-orange-rgb), 0.94) 0%,
			rgba(var(--nna-orange-rgb), 0.88) 48%,
			rgba(230, 101, 26, 0.8) 78%,
			rgba(213, 92, 20, 0.74) 100%);
}

/* Sapuan cahaya tipis di kiri atas supaya bidangnya
   terasa punya kedalaman, bukan blok datar. */
.nna-cta-glow {
	position: absolute;
	z-index: 2;
	top: -40%;
	left: -6%;
	width: 620px;
	height: 620px;
	z-index: 0;
	pointer-events: none;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%,
			rgba(255, 255, 255, 0.22) 0%,
			rgba(255, 255, 255, 0) 68%);
}

.nna-cta-content,
.nna-cta-action {
	position: relative;
	z-index: 3;
}

/* --- Teks ----------------------------------------------------- */
.nna-cta-eyebrow {
	display: inline-block;
	margin-bottom: 20px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.78);
}

.nna-cta-title {
	font-size: 54px;
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -0.025em;
	margin-bottom: 20px;
	color: var(--nna-white);
}

.nna-cta-text {
	max-width: 620px;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.75;
	margin-bottom: 0;
	color: rgba(255, 255, 255, 0.86);
}

/* --- Tombol --------------------------------------------------- */
.nna-cta-action {
	display: flex;
	justify-content: flex-end;
}

.nna-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 60px;
	padding: 0 38px;
	border-radius: 100px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	/* Oranye di atas putih hanya sekitar 3.6:1 — kurang untuk
	   teks 16px. Dipakai tinta gelap supaya tetap terbaca. */
	color: var(--nna-ink);
	background-color: var(--nna-white);
	box-shadow: 0 10px 26px rgba(120, 45, 0, 0.18);
	transition: color 0.35s ease, background-color 0.35s ease, gap 0.35s ease, transform 0.35s ease;
}

.nna-cta-btn i {
	display: inline-flex;
	line-height: 0;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.nna-cta-btn:hover {
	gap: 16px;
	color: var(--nna-white);
	background-color: var(--nna-ink);
	transform: translateY(-3px);
}

.nna-cta-btn:hover i {
	transform: translate(2px, -2px);
}

/* --- Responsive ----------------------------------------------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
	.nna-cta-band {
		padding: 62px 60px;
	}
	.nna-cta-title {
		font-size: 46px;
	}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.nna-cta-area {
		padding-bottom: 100px;
	}
	.nna-cta-band {
		padding: 54px 48px;
	}
	.nna-cta-title {
		font-size: 39px;
	}
	.nna-cta-title br {
		display: none;
	}
	.nna-cta-text {
		font-size: 17px;
	}
	.nna-cta-btn {
		height: 54px;
		padding: 0 30px;
		font-size: 15px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.nna-cta-area {
		padding-bottom: 85px;
	}
	.nna-cta-band {
		padding: 48px 44px;
	}
	.nna-cta-title {
		font-size: 37px;
	}
	.nna-cta-title br {
		display: none;
	}
	/* Kolom menyempit — tombol turun ke bawah teks
	   supaya tidak terjepit di sisi kanan. */
	.nna-cta-action {
		justify-content: flex-start;
		margin-top: 32px;
	}
}

@media (max-width: 767px) {
	.nna-cta-area {
		padding-bottom: 70px;
	}
	.nna-cta-band {
		padding: 36px 24px 38px;
		border-radius: 24px;
	}
	.nna-cta-glow {
		width: 340px;
		height: 340px;
		top: -30%;
	}
	.nna-cta-eyebrow {
		font-size: 14px;
		margin-bottom: 14px;
	}
	.nna-cta-title {
		font-size: 32px;
		line-height: 1.26;
		margin-bottom: 14px;
	}
	.nna-cta-title br {
		display: none;
	}
	.nna-cta-text {
		font-size: 17px;
		line-height: 1.72;
	}
	.nna-cta-action {
		justify-content: flex-start;
		margin-top: 28px;
	}
	.nna-cta-btn {
		height: 52px;
		padding: 0 28px;
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nna-cta-btn,
	.nna-cta-btn i {
		transition: none;
	}

	.nna-cta-btn:hover {
		transform: none;
	}

	.nna-cta-btn:hover i {
		transform: none;
	}
}

/* ============================================
   14. SCENE PESAWAT + FOOTER MENYATU
   Penutup halaman: foto langit full-bleed yang
   muncul dari blok putih di atasnya lalu larut
   ke warna footer.

   Beda pendekatan dengan scene truk: di sana
   warna section atas disamakan ke baris teratas
   foto (--nna-scene-sky-top). Di sini fotonya
   yang di-fade dari putih, jadi tidak ada warna
   yang perlu dicocokkan sama sekali — foto boleh
   diganti kapan saja tanpa menyetel ulang apa pun.
   ============================================ */
:root {
	/* Padanan solid dari tint header bar
	   rgba(20, 23, 66, .68) — dipakai footer dan
	   ujung bawah scene supaya benar-benar sewarna. */
	--nna-footer-bg: #141742;
}

.nna-sky {
	position: relative;
	overflow: hidden;
	min-height: 780px;
	display: flex;
	align-items: flex-end;
	background-color: var(--nna-footer-bg);
}

.nna-sky-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	will-change: transform;
}

.nna-sky-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* Foto muncul dari putih — inilah sambungan ke
   blok artikel/karir di atasnya. */
.nna-sky-fade-top {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	height: 34%;
	pointer-events: none;
	background: linear-gradient(180deg,
			#ffffff 0%,
			rgba(255, 255, 255, 0.86) 18%,
			rgba(255, 255, 255, 0.46) 46%,
			rgba(255, 255, 255, 0.16) 72%,
			rgba(255, 255, 255, 0) 100%);
}

/* Lalu larut ke warna footer. Porsinya besar karena
   sekaligus jadi alas teks penutup. */
/* Varian untuk halaman yang section di atas divider-nya sudah biru
   (service.php). Fade pembukanya berangkat dari warna yang sama
   dengan footer, jadi foto pesawat muncul dari biru — bukan dari
   putih yang tidak ada di sana. */
.nna-sky-from-blue .nna-sky-fade-top {
	background: linear-gradient(180deg,
			var(--nna-footer-bg) 0%,
			rgba(20, 23, 66, 0.86) 18%,
			rgba(20, 23, 66, 0.46) 46%,
			rgba(20, 23, 66, 0.16) 72%,
			rgba(20, 23, 66, 0) 100%);
}

.nna-sky-fade-bottom {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	height: 68%;
	pointer-events: none;
	/* Warna footer dicapai di 86%, lalu ditahan solid
	   sampai 100%. Kalau baru pas di 100%, baris piksel
	   terakhir masih sedikit lebih terang dan batasnya
	   jadi terbaca sebagai garis. */
	background: linear-gradient(180deg,
			rgba(20, 23, 66, 0) 0%,
			rgba(20, 23, 66, 0.28) 32%,
			rgba(20, 23, 66, 0.62) 55%,
			rgba(20, 23, 66, 0.9) 74%,
			var(--nna-footer-bg) 86%,
			var(--nna-footer-bg) 100%);
}

/* --- Konten penutup ------------------------------------------- */
.nna-sky-body {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-bottom: 110px;
}

.nna-sky-eyebrow {
	display: inline-block;
	margin-bottom: 20px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nna-orange-soft);
}

.nna-sky-title {
	font-size: 66px;
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.025em;
	margin-bottom: 20px;
	color: var(--nna-white);
	text-shadow: 0 2px 24px rgba(10, 12, 40, 0.35);
}

.nna-sky-text {
	margin: 0 auto 34px;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.84);
}

.nna-sky-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 58px;
	padding: 0 36px;
	border-radius: 100px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: var(--nna-ink);
	background-color: var(--nna-white);
	transition: color 0.35s ease, background-color 0.35s ease, gap 0.35s ease, transform 0.35s ease;
}

.nna-sky-btn i {
	display: inline-flex;
	line-height: 0;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.nna-sky-btn:hover {
	gap: 16px;
	color: var(--nna-white);
	background-color: var(--nna-orange);
	transform: translateY(-3px);
}

.nna-sky-btn:hover i {
	transform: translate(2px, -2px);
}

/* --- Responsive ----------------------------------------------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
	.nna-sky {
		min-height: 700px;
	}
	.nna-sky-title {
		font-size: 56px;
	}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.nna-sky {
		min-height: 620px;
	}
	.nna-sky-body {
		padding-bottom: 90px;
	}
	.nna-sky-title {
		font-size: 49px;
	}
	.nna-sky-btn {
		height: 54px;
		padding: 0 30px;
		font-size: 15px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.nna-sky {
		min-height: 560px;
	}
	.nna-sky-body {
		padding-bottom: 75px;
	}
	.nna-sky-title {
		font-size: 44px;
	}
	.nna-sky-title br {
		display: none;
	}
}

@media (max-width: 767px) {
	.nna-sky {
		min-height: 520px;
	}
	.nna-sky-body {
		padding-bottom: 60px;
	}
	/* Frame potret memotong dalam — geser fokus ke atas
	   supaya pesawatnya tetap masuk bingkai. */
	.nna-sky-media img {
		object-position: 50% 38%;
	}
	.nna-sky-fade-top {
		height: 26%;
	}
	.nna-sky-fade-bottom {
		height: 74%;
	}
	.nna-sky-eyebrow {
		font-size: 14px;
		margin-bottom: 14px;
	}
	.nna-sky-title {
		font-size: 34px;
		line-height: 1.24;
		margin-bottom: 14px;
	}
	.nna-sky-title br {
		display: none;
	}
	.nna-sky-text {
		font-size: 17px;
		margin-bottom: 26px;
	}
	.nna-sky-btn {
		height: 52px;
		padding: 0 28px;
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nna-sky-btn,
	.nna-sky-btn i {
		transition: none;
	}

	.nna-sky-btn:hover,
	.nna-sky-btn:hover i {
		transform: none;
	}
}

/* ============================================
   15. FOOTER
   Ditulis ulang dari struktur template.
   Empat lapis dari atas ke bawah:
     01 newsletter  — panel kaca menonjol
     02 kolom       — brand, dua menu, kantor + QR
     03 wordmark    — nama perusahaan raksasa
     04 baris bawah — copyright & legal

   Warna dasar memakai --nna-footer-bg (#141742),
   padanan solid dari tint header bar, supaya
   footer dan header terbaca sewarna.
   ============================================ */
.nna-footer {
	position: relative;
	overflow: hidden;
	padding: 90px 0 0;
	background-color: var(--nna-footer-bg);
}

/* --- Dekorasi ------------------------------------------------- */
/* Seluruh dekorasi difade masuk sepanjang 260px pertama.
   Ini inti sambungannya: 260px teratas footer jadi warna
   dasar polos, persis sama dengan piksel penutup scene
   pesawat — jadi tidak ada perubahan tekstur maupun
   kecerahan yang menandai batas section. */
.nna-footer-deco {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 260px);
	mask-image: linear-gradient(180deg, transparent 0, #000 260px);
}

.nna-footer-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 96px 96px;
	/* Pusat mask diturunkan dari 14% ke 34% supaya grid
	   tidak lagi paling pekat tepat di tepi atas. */
	-webkit-mask-image: radial-gradient(ellipse 76% 58% at 50% 34%, #000 0%, transparent 82%);
	mask-image: radial-gradient(ellipse 76% 58% at 50% 34%, #000 0%, transparent 82%);
}

/* Digeser turun (-220px -> -20px) supaya puncaknya jatuh
   di belakang panel newsletter, bukan di tepi atas yang
   sekarang sudah di-mask. Tanpa ini glow-nya ikut terpotong
   habis dan footer jadi datar. */
.nna-footer-glow {
	position: absolute;
	top: -20px;
	left: 50%;
	width: 1200px;
	height: 640px;
	transform: translateX(-50%);
	filter: blur(80px);
	background:
		radial-gradient(ellipse 44% 58% at 26% 50%, rgba(var(--nna-blue-soft-rgb), 0.30) 0%, rgba(var(--nna-blue-rgb), 0) 70%),
		radial-gradient(ellipse 40% 54% at 76% 46%, rgba(var(--nna-orange-rgb), 0.16) 0%, rgba(var(--nna-orange-rgb), 0) 70%);
}

.nna-footer > .container {
	position: relative;
	z-index: 1;
}

/* --- 01. Newsletter ------------------------------------------- */
.nna-newsletter {
	position: relative;
	padding: 46px 52px;
	margin-bottom: 80px;
	border-radius: 24px;
	background-color: rgba(255, 255, 255, 0.045);
	border: 1px solid rgba(255, 255, 255, 0.11);
	background-image: linear-gradient(126deg,
			rgba(var(--nna-blue-soft-rgb), 0.20) 0%,
			rgba(255, 255, 255, 0.01) 52%,
			rgba(var(--nna-orange-rgb), 0.12) 100%);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.nna-newsletter-eyebrow {
	display: inline-block;
	margin-bottom: 14px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nna-orange);
}

.nna-newsletter-title {
	font-size: 34px;
	font-weight: 700;
	line-height: 1.24;
	letter-spacing: -0.02em;
	margin-bottom: 10px;
	color: var(--nna-white);
}

.nna-newsletter-text p {
	max-width: 420px;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.7;
	margin-bottom: 0;
	color: rgba(255, 255, 255, 0.6);
}

/* Input dan tombol dalam satu pil — tombol tidak
   dibuat terpisah supaya barisnya tetap rapi di
   kolom yang sempit. */
.nna-newsletter-field {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 7px 7px 22px;
	border-radius: 100px;
	background-color: rgba(10, 12, 40, 0.42);
	border: 1px solid rgba(255, 255, 255, 0.14);
	transition: border-color 0.3s ease, background-color 0.3s ease;
}

.nna-newsletter-field:focus-within {
	background-color: rgba(10, 12, 40, 0.6);
	border-color: rgba(var(--nna-orange-rgb), 0.55);
}

.nna-newsletter-field input {
	flex: 1 1 auto;
	width: 100%;
	height: 44px;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font-family: var(--nna-ff-primary);
	font-size: 15px;
	font-weight: 400;
	color: var(--nna-white);
}

.nna-newsletter-field input::placeholder {
	color: rgba(255, 255, 255, 0.42);
}

.nna-newsletter-field button {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex: 0 0 auto;
	height: 46px;
	padding: 0 26px;
	border: 0;
	border-radius: 100px;
	font-family: var(--nna-ff-primary);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: var(--nna-white);
	background-color: var(--nna-orange);
	transition: background-color 0.3s ease, gap 0.3s ease;
}

.nna-newsletter-field button i {
	display: inline-flex;
	line-height: 0;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.nna-newsletter-field button:hover {
	gap: 13px;
	background-color: var(--nna-orange-dark);
}

.nna-newsletter-field button:hover i {
	transform: translate(2px, -2px);
}

.nna-newsletter-note {
	margin: 12px 0 0;
	padding-left: 22px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.42);
}

.nna-newsletter-note a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.nna-newsletter-note a:hover {
	color: var(--nna-orange-soft);
}

/* --- 02. Kolom ------------------------------------------------ */
.nna-footer-row {
	--bs-gutter-y: 44px;
	padding-bottom: 70px;
}

.nna-footer-logo {
	display: inline-block;
	margin-bottom: 24px;
}

.nna-footer-logo img {
	width: 150px;
	height: auto;
}

.nna-footer-brand p {
	max-width: 340px;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.75;
	margin-bottom: 26px;
	color: rgba(255, 255, 255, 0.58);
}

.nna-footer-social {
	display: flex;
	align-items: center;
	gap: 10px;
}

.nna-footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.75);
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.nna-footer-social a:hover {
	color: var(--nna-white);
	background-color: var(--nna-orange);
	border-color: var(--nna-orange);
	transform: translateY(-3px);
}

/* Judul kolom dengan garis aksen oranye pendek */
.nna-footer-col-title {
	position: relative;
	margin-bottom: 26px;
	padding-top: 14px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--nna-white);
}

.nna-footer-col-title::before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background-color: var(--nna-orange);
}

.nna-footer-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nna-footer-menu li {
	margin-bottom: 12px;
}

.nna-footer-menu li:last-child {
	margin-bottom: 0;
}

/* Panah kecil yang muncul saat hover — link statis
   terasa mati kalau hanya berubah warna. */
.nna-footer-menu a {
	position: relative;
	display: inline-block;
	padding-left: 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.58);
	transition: color 0.3s ease, padding-left 0.3s ease;
}

.nna-footer-menu a::before {
	position: absolute;
	content: "";
	left: 0;
	top: 50%;
	width: 8px;
	height: 1px;
	opacity: 0;
	transform: translateY(-50%);
	background-color: var(--nna-orange);
	transition: opacity 0.3s ease;
}

.nna-footer-menu a:hover {
	padding-left: 16px;
	color: var(--nna-white);
}

.nna-footer-menu a:hover::before {
	opacity: 1;
}

/* --- Kantor pusat + QR ---------------------------------------- */
.nna-footer-office-inner {
	display: flex;
	align-items: flex-start;
	gap: 28px;
	flex-wrap: wrap;
}

.nna-footer-office-text {
	flex: 1 1 220px;
}

.nna-footer-office address {
	margin-bottom: 18px;
	font-style: normal;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.58);
}

.nna-footer-contact {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nna-footer-contact li {
	margin-bottom: 8px;
}

.nna-footer-contact a {
	font-size: 15px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.78);
	transition: color 0.3s ease;
}

.nna-footer-contact a:hover {
	color: var(--nna-orange-soft);
}

/* QR wajib di atas plate terang — kode-nya hitam,
   tidak akan terbaca langsung di atas biru. */
.nna-footer-qr {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.nna-footer-qr-plate {
	display: block;
	padding: 10px;
	border-radius: 14px;
	background-color: var(--nna-white);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.nna-footer-qr-plate img {
	display: block;
	width: 94px;
	height: 94px;
}

.nna-footer-qr:hover .nna-footer-qr-plate {
	transform: translateY(-4px);
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3);
}

.nna-footer-qr-label {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	color: rgba(255, 255, 255, 0.55);
	transition: color 0.3s ease;
}

.nna-footer-qr:hover .nna-footer-qr-label {
	color: rgba(255, 255, 255, 0.85);
}

/* --- 03. Wordmark --------------------------------------------- */
.nna-footer-mark {
	position: relative;
	z-index: 1;
	overflow: hidden;
	padding: 0 24px;
	text-align: center;
	line-height: 0.86;
	user-select: none;
}

/* Diisi gradient yang memudar ke bawah, jadi terbaca
   seperti tenggelam di dasar halaman — bukan teks
   besar yang sekadar diturunkan opacity-nya. */
.nna-footer-mark span {
	display: block;
	font-size: clamp(46px, 11.2vw, 178px);
	font-weight: 700;
	letter-spacing: -0.04em;
	white-space: nowrap;
	background: linear-gradient(180deg,
			rgba(255, 255, 255, 0.13) 0%,
			rgba(255, 255, 255, 0.05) 52%,
			rgba(255, 255, 255, 0) 92%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* --- 04. Baris bawah ------------------------------------------ */
.nna-footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px 32px;
	flex-wrap: wrap;
	padding: 26px 0 30px;
	border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.nna-footer-copy {
	margin-bottom: 0;
	font-size: 16px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.5);
}

.nna-footer-copy a {
	color: rgba(255, 255, 255, 0.78);
}

.nna-footer-copy a:hover {
	color: var(--nna-orange-soft);
}

.nna-footer-legal {
	display: flex;
	align-items: center;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nna-footer-legal a {
	font-size: 14px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.5);
	transition: color 0.3s ease;
}

.nna-footer-legal a:hover {
	color: var(--nna-orange-soft);
}

/* --- Responsive ----------------------------------------------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
	.nna-newsletter {
		padding: 40px 40px;
	}
	.nna-newsletter-title {
		font-size: 30px;
	}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.nna-footer {
		padding-top: 75px;
	}
	.nna-newsletter {
		padding: 36px 34px;
		margin-bottom: 64px;
	}
	.nna-newsletter-title {
		font-size: 28px;
	}
	.nna-newsletter-field {
		padding-left: 18px;
	}
	.nna-newsletter-field button {
		padding: 0 20px;
		font-size: 14px;
	}
	.nna-footer-office-inner {
		gap: 20px;
	}
	.nna-footer-qr-plate img {
		width: 82px;
		height: 82px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.nna-footer {
		padding-top: 65px;
	}
	.nna-newsletter {
		padding: 34px 30px;
		margin-bottom: 56px;
	}
	.nna-newsletter-text {
		margin-bottom: 28px;
	}
	.nna-newsletter-title {
		font-size: 29px;
	}
	.nna-footer-row {
		padding-bottom: 56px;
	}
}

@media (max-width: 767px) {
	.nna-footer {
		padding-top: 55px;
	}
	.nna-footer-grid {
		background-size: 64px 64px;
	}
	.nna-footer-glow {
		width: 560px;
		height: 380px;
		top: -10px;
		filter: blur(55px);
	}
	/* Footer jauh lebih pendek di mobile — fade dekorasi
	   dipendekkan supaya tidak memakan porsi terlalu besar. */
	.nna-footer-deco {
		-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 170px);
		mask-image: linear-gradient(180deg, transparent 0, #000 170px);
	}
	.nna-newsletter {
		padding: 26px 22px 28px;
		margin-bottom: 46px;
		border-radius: 20px;
	}
	.nna-newsletter-text {
		margin-bottom: 24px;
	}
	.nna-newsletter-title {
		font-size: 26px;
	}
	.nna-newsletter-text p {
		font-size: 16px;
	}

	/* Input + tombol sebaris jadi terlalu sempit di
	   layar kecil — dipecah jadi dua baris. */
	.nna-newsletter-field {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 14px;
		border-radius: 16px;
	}
	.nna-newsletter-field input {
		height: 34px;
		padding: 0 8px;
	}
	.nna-newsletter-field button {
		justify-content: center;
		width: 100%;
		height: 48px;
	}
	.nna-newsletter-note {
		padding-left: 0;
		font-size: 11px;
	}
	.nna-footer-row {
		--bs-gutter-y: 34px;
		padding-bottom: 42px;
	}
	.nna-footer-logo img {
		width: 132px;
	}
	.nna-footer-brand p {
		font-size: 16px;
		margin-bottom: 22px;
	}
	.nna-footer-col-title {
		margin-bottom: 18px;
		font-size: 18px;
	}
	.nna-footer-menu a,
	.nna-footer-office address,
	.nna-footer-contact a {
		font-size: 14px;
	}
	.nna-footer-office-inner {
		gap: 24px;
	}
	.nna-footer-qr-plate img {
		width: 86px;
		height: 86px;
	}
	.nna-footer-mark span {
		letter-spacing: -0.03em;
	}
	.nna-footer-bottom {
		justify-content: center;
		text-align: center;
		padding: 22px 0 26px;
	}
	.nna-footer-copy,
	.nna-footer-legal a {
		font-size: 15px;
	}
	.nna-footer-legal {
		gap: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nna-footer-social a,
	.nna-footer-menu a,
	.nna-footer-qr-plate,
	.nna-newsletter-field button,
	.nna-newsletter-field button i {
		transition: none;
	}

	.nna-footer-social a:hover,
	.nna-footer-qr:hover .nna-footer-qr-plate,
	.nna-newsletter-field button:hover i {
		transform: none;
	}
}

/* ============================================
   16. HALAMAN KONTAK
   Susunan mengikuti referensi:
     01 keterangan + formulir
     02 strip logo mitra
     03 FAQ (accordion Bootstrap)
     04 peta — menggantikan pita CTA ungu
        pada referensi

   Header halaman ini fixed dan melayang di atas
   konten, jadi seluruh <main> butuh jarak atas
   supaya judul tidak tertutup bar menu.
   ============================================ */
/* Jarak untuk header melayang TIDAK ditaruh di sini.
   Kalau <main> yang diberi padding, pita putih itu berada
   di luar section — sementara dekorasi section terpotong
   overflow: hidden di tepi atasnya, dan batasnya terbaca
   sebagai garis. Padding-nya dipindah ke dalam section
   pertama tiap halaman, jadi dekorasi ikut naik sampai
   ujung atas halaman. */
.nna-page {
	padding-top: 0;
}

/* --- 01. Kontak ----------------------------------------------- */
.nna-contact-area {
	position: relative;
	overflow: hidden;
	/* Jarak dari header sudah ditangani banner di atasnya */
	padding: 110px 0 120px;
	background-color: var(--nna-white);
}

/* Dekorasi difade masuk sepanjang 150px pertama supaya
   tidak muncul mendadak tepat di bawah bar menu. */
.nna-contact-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 150px);
	mask-image: linear-gradient(180deg, transparent 0, #000 150px);
}

.nna-contact-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(var(--nna-blue-rgb), 0.055) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(var(--nna-blue-rgb), 0.055) 1px, transparent 1px);
	background-size: 96px 96px;
	-webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 28%, #000 0%, transparent 80%);
	mask-image: radial-gradient(ellipse 78% 62% at 50% 28%, #000 0%, transparent 80%);
}

.nna-contact-blob {
	position: absolute;
	display: block;
	border-radius: 50%;
	filter: blur(110px);
}

.nna-contact-blob-blue {
	top: -20px;
	left: 50%;
	width: 680px;
	height: 580px;
	opacity: 0.8;
	transform: translateX(-96%);
	background: radial-gradient(circle at 50% 50%, rgba(var(--nna-blue-rgb), 0.44) 0%, rgba(var(--nna-blue-rgb), 0.15) 42%, rgba(var(--nna-blue-rgb), 0) 72%);
}

.nna-contact-blob-orange {
	top: -60px;
	left: 50%;
	width: 580px;
	height: 500px;
	opacity: 0.5;
	transform: translateX(-6%);
	background: radial-gradient(circle at 50% 50%, rgba(var(--nna-orange-rgb), 0.34) 0%, rgba(var(--nna-orange-rgb), 0) 70%);
}

.nna-contact-area > .container {
	position: relative;
	z-index: 1;
}

/* --- Keterangan kiri ------------------------------------------ */
.nna-contact-intro {
	padding-right: 40px;
}

.nna-contact-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 22px;
	padding: 8px 18px;
	border-radius: 100px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.04em;
	color: var(--nna-blue);
	background-color: rgba(var(--nna-blue-rgb), 0.07);
	border: 1px solid rgba(var(--nna-blue-rgb), 0.14);
}

.nna-contact-eyebrow i {
	display: inline-flex;
	line-height: 0;
}

.nna-contact-title {
	font-size: 66px;
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.03em;
	margin-bottom: 20px;
	color: var(--nna-ink);
}

.nna-contact-text {
	max-width: 440px;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.75;
	margin-bottom: 40px;
	color: var(--nna-body);
}

.nna-contact-list {
	margin: 0 0 38px;
	padding: 0;
	list-style: none;
}

.nna-contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 24px;
}

.nna-contact-list li:last-child {
	margin-bottom: 0;
}

.nna-contact-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	color: var(--nna-blue);
	background-color: rgba(var(--nna-blue-rgb), 0.07);
	border: 1px solid rgba(var(--nna-blue-rgb), 0.11);
	transition: color 0.35s ease, background-color 0.35s ease;
}

.nna-contact-list li:hover .nna-contact-ico {
	color: var(--nna-white);
	background-color: var(--nna-orange);
}

.nna-contact-label {
	display: block;
	margin-bottom: 3px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--nna-muted);
}

.nna-contact-detail a {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--nna-ink);
}

.nna-contact-detail a:hover {
	color: var(--nna-orange);
}

.nna-contact-detail address {
	margin-bottom: 0;
	font-style: normal;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--nna-ink);
}

/* Ikon sosial memakai komponen yang sama dengan footer,
   hanya nadanya dibalik untuk latar terang. */
.nna-contact-social .nna-footer-social a {
	color: var(--nna-body);
	background-color: rgba(var(--nna-blue-rgb), 0.06);
	border-color: rgba(var(--nna-blue-rgb), 0.12);
}

.nna-contact-social .nna-footer-social a:hover {
	color: var(--nna-white);
	background-color: var(--nna-orange);
	border-color: var(--nna-orange);
}

.nna-contact-social .nna-contact-label {
	margin-bottom: 12px;
}

/* --- Kartu formulir ------------------------------------------- */
.nna-form-card {
	padding: 40px;
	border-radius: 28px;
	background-color: rgba(255, 255, 255, 0.72);
	border: 1px solid var(--nna-line);
	backdrop-filter: blur(18px) saturate(115%);
	-webkit-backdrop-filter: blur(18px) saturate(115%);
	box-shadow: 0 24px 70px rgba(var(--nna-blue-rgb), 0.09);
}

.nna-form-row {
	--bs-gutter-x: 18px;
	--bs-gutter-y: 20px;
}

.nna-field label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--nna-ink);
}

.nna-field label b {
	font-weight: 600;
	color: var(--nna-orange);
}

.nna-field input,
.nna-field select,
.nna-field textarea {
	width: 100%;
	padding: 13px 16px;
	border-radius: 12px;
	font-family: var(--nna-ff-primary);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--nna-ink);
	background-color: var(--nna-white);
	border: 1px solid var(--nna-line);
	outline: 0;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.nna-field textarea {
	resize: vertical;
	min-height: 130px;
}

/* Panah select bawaan berbeda-beda antar browser —
   diganti ikon sendiri supaya seragam dengan input lain. */
.nna-field select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 42px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%237b7d95' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
}

.nna-field input::placeholder,
.nna-field textarea::placeholder {
	color: var(--nna-muted);
}

.nna-field input:focus,
.nna-field select:focus,
.nna-field textarea:focus {
	border-color: var(--nna-orange);
	box-shadow: 0 0 0 3px rgba(var(--nna-orange-rgb), 0.14);
}

.nna-form-foot {
	display: flex;
	align-items: center;
	gap: 16px 24px;
	flex-wrap: wrap;
	margin-top: 28px;
}

.nna-form-btn {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	height: 54px;
	padding: 0 34px;
	border: 0;
	border-radius: 100px;
	font-family: var(--nna-ff-primary);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	color: var(--nna-white);
	background-color: var(--nna-orange);
	transition: background-color 0.35s ease, gap 0.35s ease, transform 0.35s ease;
}

.nna-form-btn i {
	display: inline-flex;
	line-height: 0;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.nna-form-btn:hover {
	gap: 15px;
	background-color: var(--nna-ink);
	transform: translateY(-2px);
}

.nna-form-btn:hover i {
	transform: translate(2px, -2px);
}

.nna-form-note {
	margin-bottom: 0;
	font-size: 13px;
	font-weight: 400;
	color: var(--nna-muted);
}

/* --- 02. Strip logo mitra ------------------------------------- */
.nna-trust-area {
	padding: 0 0 90px;
	background-color: var(--nna-white);
}

.nna-trust-label {
	margin-bottom: 30px;
	text-align: center;
	font-size: 16px;
	font-weight: 500;
	color: var(--nna-muted);
}

.nna-trust-logos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px 70px;
	flex-wrap: wrap;
	padding-bottom: 60px;
	border-bottom: 1px solid var(--nna-line);
}

.nna-banner {
	border-radius: 0 0 24px 24px;
}

.nna-trust-logo img {
	display: block;
	width: auto;
	height: 50px;
	/* Diredam jadi abu supaya barisnya terbaca sebagai satu
	   deret, warna aslinya muncul saat disentuh. */
	filter: grayscale(1);
	opacity: 0.55;
	transition: filter 0.4s ease, opacity 0.4s ease;
}

.nna-trust-logo:hover img {
	filter: grayscale(0);
	opacity: 1;
}

/* --- 03. FAQ -------------------------------------------------- */
.nna-faq-area {
	padding: 0 0 120px;
	background-color: var(--nna-white);
}

.nna-faq-intro {
	padding-right: 40px;
}

.nna-faq-title {
	font-size: 51px;
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.025em;
	margin-bottom: 16px;
	color: var(--nna-ink);
}

.nna-faq-intro p {
	max-width: 340px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
	margin-bottom: 28px;
	color: var(--nna-body);
}

.nna-faq-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 50px;
	padding: 0 28px;
	border-radius: 100px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	color: var(--nna-white);
	background-color: var(--nna-ink);
	transition: color 0.35s ease, background-color 0.35s ease, gap 0.35s ease;
}

.nna-faq-btn:hover {
	gap: 14px;
	color: var(--nna-white);
	background-color: var(--nna-orange);
}

/* Accordion Bootstrap dinetralkan lalu ditulis ulang —
   bawaannya punya border, shadow, dan ikon panah sendiri. */
.nna-faq-item {
	margin-bottom: 14px;
	border: 1px solid var(--nna-line);
	border-radius: 18px !important;
	background-color: var(--nna-white);
	overflow: hidden;
	transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.nna-faq-item:last-child {
	margin-bottom: 0;
}

.nna-faq-item:has(.accordion-button:not(.collapsed)) {
	border-color: rgba(var(--nna-blue-rgb), 0.22);
	box-shadow: 0 14px 40px rgba(var(--nna-blue-rgb), 0.08);
}

.nna-faq-q {
	padding: 22px 26px;
	font-family: var(--nna-ff-primary);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--nna-ink);
	background-color: transparent;
	box-shadow: none;
	transition: color 0.3s ease;
}

.nna-faq-q:not(.collapsed) {
	color: var(--nna-blue);
	background-color: transparent;
	box-shadow: none;
}

.nna-faq-q:focus {
	box-shadow: none;
	border-color: transparent;
}

.nna-faq-q:hover {
	color: var(--nna-orange);
}

/* Ikon plus/minus menggantikan panah bawaan */
.nna-faq-q::after {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	margin-left: 18px;
	border-radius: 50%;
	background-color: rgba(var(--nna-blue-rgb), 0.07);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M6 1V11M1 6H11' stroke='%232e3192' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
	background-size: 12px 12px;
	background-position: center;
	background-repeat: no-repeat;
	transform: none;
	transition: background-color 0.3s ease;
}

.nna-faq-q:not(.collapsed)::after {
	transform: none;
	background-color: rgba(var(--nna-orange-rgb), 0.14);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M1 6H11' stroke='%23f37021' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

.nna-faq-a {
	padding: 0 26px 24px;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.75;
	color: var(--nna-body);
}

.nna-faq-a a {
	font-weight: 500;
	color: var(--nna-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.nna-faq-a a:hover {
	color: var(--nna-orange);
}

/* --- 04. Peta -------------------------------------------------
   Menggantikan pita CTA berlatar ungu pada referensi.
   Kartu keterangan dibuat kecil dan ditaruh di satu sisi
   supaya sebagian besar peta tetap bisa digeser & di-zoom.
   -------------------------------------------------------------- */
.nna-map-area {
	position: relative;
	padding: 0;
	background-color: var(--nna-white);
}

.nna-map-frame {
	position: relative;
	height: 620px;
	overflow: hidden;
	background-color: var(--nna-blue-tint);
}

/* Peta itu iframe — isinya tidak bisa diwarnai dari luar,
   jadi kedua tepinya ditutup lapisan gradient: atas larut
   ke putih (section FAQ), bawah ke warna footer.
   pointer-events dimatikan supaya peta tetap bisa
   digeser dan di-zoom lewat lapisan ini. */
.nna-map-frame::before,
.nna-map-frame::after {
	position: absolute;
	content: "";
	left: 0;
	right: 0;
	z-index: 1;
	pointer-events: none;
}

.nna-map-frame::after {
	bottom: 0;
	height: 210px;
	background: linear-gradient(180deg,
			rgba(20, 23, 66, 0) 0%,
			rgba(20, 23, 66, 0.3) 38%,
			rgba(20, 23, 66, 0.7) 66%,
			rgba(20, 23, 66, 0.93) 86%,
			var(--nna-footer-bg) 100%);
}

.nna-map-frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	/* Peta Google warnanya ramai; diredam sedikit supaya
	   tidak berkelahi dengan palet brand. */
	filter: saturate(0.82) contrast(1.02);
}

/* Container-nya sendiri yang dilayangkan di atas peta.
   Kalau kartunya yang dibuat absolute, acuannya container
   yang tingginya nol — kartu malah jatuh di bawah peta.
   pointer-events dimatikan di sini lalu dinyalakan lagi
   di kartu, supaya peta di sekelilingnya tetap bisa
   digeser dan di-zoom. */
.nna-map-area > .container {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 130px;
	z-index: 1;
	pointer-events: none;
}

.nna-map-card {
	position: relative;
	width: 372px;
	max-width: 100%;
	padding: 34px;
	border-radius: 24px;
	pointer-events: auto;
	background-color: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--nna-line);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: 0 24px 60px rgba(var(--nna-blue-rgb), 0.16);
}

.nna-map-eyebrow {
	display: inline-block;
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nna-orange);
}

.nna-map-title {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin-bottom: 14px;
	color: var(--nna-ink);
}

.nna-map-card address {
	margin-bottom: 16px;
	font-style: normal;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.7;
	color: var(--nna-body);
}

.nna-map-contact {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.nna-map-contact li {
	margin-bottom: 6px;
}

.nna-map-contact a {
	font-size: 15px;
	font-weight: 600;
	color: var(--nna-ink);
}

.nna-map-contact a:hover {
	color: var(--nna-orange);
}

.nna-map-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 50px;
	padding: 0 28px;
	border-radius: 100px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	color: var(--nna-white);
	background-color: var(--nna-blue);
	transition: color 0.35s ease, background-color 0.35s ease, gap 0.35s ease;
}

.nna-map-btn:hover {
	gap: 14px;
	color: var(--nna-white);
	background-color: var(--nna-orange);
}

/* --- Responsive ----------------------------------------------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
	.nna-contact-title {
		font-size: 56px;
	}
	.nna-faq-title {
		font-size: 46px;
	}
	.nna-form-card {
		padding: 34px;
	}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.nna-contact-area {
		padding: 95px 0 100px;
	}
	.nna-contact-intro,
	.nna-faq-intro {
		padding-right: 20px;
	}
	.nna-contact-title {
		font-size: 49px;
	}
	.nna-form-card {
		padding: 28px;
	}
	.nna-faq-title {
		font-size: 40px;
	}
	.nna-faq-q {
		padding: 19px 22px;
		font-size: 16px;
	}
	.nna-faq-a {
		padding: 0 22px 20px;
	}
	.nna-map-frame {
		height: 560px;
	}
	.nna-map-frame::after {
		height: 190px;
	}
	.nna-map-area > .container {
		bottom: 115px;
	}
	.nna-map-card {
		width: 340px;
		padding: 28px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.nna-contact-area {
		padding: 85px 0 80px;
	}
	.nna-contact-intro {
		padding-right: 0;
		margin-bottom: 48px;
	}
	.nna-contact-title {
		font-size: 49px;
	}
	.nna-contact-title br {
		display: none;
	}
	.nna-contact-text {
		max-width: 560px;
	}
	.nna-faq-intro {
		padding-right: 0;
		margin-bottom: 40px;
	}
	.nna-faq-title {
		font-size: 41px;
	}
	.nna-faq-title br {
		display: none;
	}
	.nna-map-frame {
		height: 520px;
	}
	.nna-map-frame::after {
		height: 175px;
	}
	.nna-map-area > .container {
		bottom: 105px;
	}
}

@media (max-width: 767px) {
	.nna-contact-area {
		padding: 70px 0 60px;
	}
	.nna-contact-bg {
		-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 110px);
		mask-image: linear-gradient(180deg, transparent 0, #000 110px);
	}
	.nna-contact-blob {
		filter: blur(70px);
	}
	.nna-contact-blob-blue,
	.nna-contact-blob-orange {
		width: 330px;
		height: 300px;
	}
	.nna-contact-grid {
		background-size: 64px 64px;
	}
	.nna-contact-intro {
		padding-right: 0;
		margin-bottom: 40px;
	}
	.nna-contact-eyebrow {
		font-size: 14px;
		margin-bottom: 16px;
	}
	.nna-contact-title {
		font-size: 39px;
		margin-bottom: 14px;
	}
	.nna-contact-title br {
		display: none;
	}
	.nna-contact-text {
		font-size: 17px;
		margin-bottom: 30px;
	}
	.nna-contact-list {
		margin-bottom: 30px;
	}
	.nna-contact-list li {
		gap: 13px;
		margin-bottom: 20px;
	}
	.nna-contact-ico {
		width: 42px;
		height: 42px;
		border-radius: 12px;
	}
	.nna-contact-detail a,
	.nna-contact-detail address {
		font-size: 15px;
	}
	.nna-form-card {
		padding: 22px 18px 26px;
		border-radius: 22px;
	}
	.nna-form-foot {
		margin-top: 22px;
	}
	.nna-form-btn {
		width: 100%;
		justify-content: center;
	}
	.nna-trust-area {
		padding-bottom: 60px;
	}
	.nna-trust-logos {
		gap: 24px 36px;
		padding-bottom: 40px;
	}
	.nna-trust-logo img {
		height: 24px;
	}
	.nna-faq-area {
		padding-bottom: 70px;
	}
	.nna-faq-intro {
		padding-right: 0;
		margin-bottom: 32px;
	}
	.nna-faq-title {
		font-size: 33px;
	}
	.nna-faq-title br {
		display: none;
	}
	.nna-faq-intro p {
		font-size: 15px;
		margin-bottom: 22px;
	}
	.nna-faq-q {
		padding: 17px 18px;
		font-size: 15px;
	}
	.nna-faq-q::after {
		width: 26px;
		height: 26px;
		margin-left: 12px;
	}
	.nna-faq-a {
		padding: 0 18px 18px;
		font-size: 14px;
	}

	/* Kartu keluar dari atas peta — kalau ditumpuk,
	   peta tinggal sesobek dan tidak bisa digeser. */
	/* Kartu keluar dari peta di mobile, jadi fade bawah
	   dipendekkan — peta yang tersisa tinggal sedikit. */
	.nna-map-frame {
		height: 340px;
	}
	.nna-map-frame::before {
		height: 70px;
	}
	.nna-map-frame::after {
		height: 90px;
	}
	.nna-map-area > .container {
		position: relative;
		bottom: auto;
		pointer-events: auto;
	}
	.nna-map-card {
		width: 100%;
		margin: -40px 0 0;
		padding: 26px 22px;
		border-radius: 20px;
	}
	.nna-map-title {
		font-size: 28px;
	}
	.nna-map-btn {
		width: 100%;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nna-contact-ico,
	.nna-form-btn,
	.nna-form-btn i,
	.nna-trust-logo img {
		transition: none;
	}

	.nna-form-btn:hover,
	.nna-form-btn:hover i {
		transform: none;
	}
}

/* ============================================
   17. BANNER HALAMAN DALAM
   Sengaja ditulis generik (.nna-banner), bukan
   khusus halaman kontak — halaman berikutnya
   cukup pakai markup yang sama, ganti gambar
   dan teksnya.

   Tingginya 500px mengikuti rasio 1920x500.
   Foto dipasang object-fit: cover, jadi layar
   selebar apa pun tetap terisi penuh.
   ============================================ */
.nna-banner {
	position: relative;
	display: flex;
	align-items: center;
	height: 500px;
	overflow: hidden;
	background-color: var(--nna-blue-deep);
}

.nna-banner-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.nna-banner-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
}

/* Gelap di kiri (tempat teks) dan menipis ke kanan,
   supaya foto tetap terbaca tapi judul tetap kontras. */
.nna-banner-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(96deg,
			rgba(20, 23, 66, 0.9) 0%,
			rgba(20, 23, 66, 0.74) 36%,
			rgba(20, 23, 66, 0.42) 68%,
			rgba(20, 23, 66, 0.28) 100%);
}

/* Tepi bawah larut ke putih — menyambung ke section
   berikutnya tanpa garis batas, pola yang sama
   dipakai di seluruh situs. */
.nna-banner-fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	height: 130px;
	pointer-events: none;
	background: linear-gradient(180deg,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.24) 46%,
			rgba(255, 255, 255, 0.66) 76%,
			#ffffff 100%);
}

.nna-banner-body {
	position: relative;
	z-index: 3;
	width: 100%;
	/* Header melayang setinggi ~80px; konten digeser turun
	   sedikit supaya titik tengahnya tetap terasa center. */
	padding-top: 40px;
}

/* --- Breadcrumb ----------------------------------------------- */
.nna-breadcrumb ol {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.nna-breadcrumb li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--nna-white);
}

/* Pemisah dibuat dari pseudo-element, bukan karakter di
   markup — supaya tidak ikut terbaca screen reader. */
.nna-breadcrumb li + li::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.4);
}

.nna-breadcrumb a {
	color: rgba(255, 255, 255, 0.66);
	transition: color 0.3s ease;
}

.nna-breadcrumb a:hover {
	color: var(--nna-orange-soft);
}

/* --- Judul ---------------------------------------------------- */
.nna-banner-title {
	font-size: 71px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.03em;
	margin-bottom: 14px;
	color: var(--nna-white);
}

.nna-banner-text {
	max-width: 480px;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.65;
	margin-bottom: 0;
	color: rgba(255, 255, 255, 0.78);
}

/* --- Responsive ----------------------------------------------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
	.nna-banner-title {
		font-size: 63px;
	}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.nna-banner {
		height: 440px;
	}
	.nna-banner-title {
		font-size: 56px;
	}
	.nna-banner-text {
		font-size: 18px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.nna-banner {
		height: 400px;
	}
	.nna-banner-title {
		font-size: 51px;
	}
	.nna-banner-text {
		font-size: 18px;
	}
}

@media (max-width: 767px) {
	.nna-banner {
		height: 330px;
	}
	/* Frame jauh lebih sempit — overlay diubah jadi vertikal
	   supaya teks tetap kontras tanpa menutupi foto. */
	.nna-banner-overlay {
		background: linear-gradient(170deg,
				rgba(20, 23, 66, 0.82) 0%,
				rgba(20, 23, 66, 0.7) 50%,
				rgba(20, 23, 66, 0.5) 100%);
	}
	.nna-banner-fade {
		height: 90px;
	}
	.nna-banner-body {
		padding-top: 32px;
	}
	.nna-breadcrumb ol {
		margin-bottom: 12px;
	}
	.nna-breadcrumb li {
		font-size: 15px;
	}
	.nna-banner-title {
		font-size: 39px;
		margin-bottom: 10px;
	}
	.nna-banner-text {
		font-size: 17px;
	}
}

/* ============================================
   18. PRELOADER
   Versi sebelumnya truk berjalan lengkap dengan
   roda berputar dan garis kecepatan. Terbaca
   ramah, tapi terlalu bermain untuk perusahaan
   distribusi yang menjual keandalan.

   Sekarang ditahan seminimal mungkin: satu logo,
   satu garis rambut, satu baris tagline. Tidak
   ada yang bercerita — layar ini cuma jeda dua
   detik, dan wibawa datang dari menahan diri.

   Geraknya tinggal dua, keduanya kecil dan
   setempat: kilau yang menyapu logo, dan segmen
   oranye yang berjalan di garis. Cukup sebagai
   tanda halaman masih bekerja.

   Seluruhnya CSS murni tanpa gambar tambahan
   dan tanpa library — layar ini tampil paling
   awal, jadi tidak boleh menunggu unduhan aset.

   Elemen #preloader dan fadeOut-nya tetap milik
   main.js; di sini hanya isinya yang diganti.
   ============================================ */
#preloader {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--nna-footer-bg);
	/* Satu sumber cahaya saja, tepat di belakang logo. Versi
	   sebelumnya punya dua termasuk semburat oranye di sudut,
	   yang membuat latarnya ramai tanpa alasan. */
	background-image:
		radial-gradient(ellipse 52% 44% at 50% 46%, rgba(var(--nna-blue-soft-rgb), 0.26) 0%, rgba(var(--nna-blue-rgb), 0) 74%);
}

.nna-loader {
	width: 100%;
	max-width: 360px;
	padding: 0 24px;
	text-align: center;
}

/* --- Logo ------------------------------------------------------- */
.nna-loader-mark {
	position: relative;
	display: inline-block;
	margin-bottom: 34px;
	overflow: hidden;
}

.nna-loader-mark img {
	display: block;
	width: 168px;
	height: auto;
}

/* Kilau yang menyapu logo sekali tiap putaran. Miring 18 derajat
   supaya terbaca sebagai pantulan cahaya, bukan bar yang lewat. */
.nna-loader-sheen {
	position: absolute;
	top: -30%;
	left: -60%;
	width: 40%;
	height: 160%;
	pointer-events: none;
	transform: rotate(18deg);
	background: linear-gradient(90deg,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.42) 50%,
			rgba(255, 255, 255, 0) 100%);
	animation: nna-loader-sheen 2.4s ease-in-out infinite;
}

@keyframes nna-loader-sheen {
	0% {
		transform: translateX(0) rotate(18deg);
	}

	55%,
	100% {
		transform: translateX(420%) rotate(18deg);
	}
}

/* --- Garis rambut ------------------------------------------------ */
/* Sengaja indeterminate: progres unduhan yang sebenarnya tidak
   kita ketahui, jadi bar berangka hanya akan berbohong. */
.nna-loader-rule {
	position: relative;
	height: 2px;
	margin-bottom: 20px;
	overflow: hidden;
	border-radius: 2px;
	background-color: rgba(255, 255, 255, 0.1);
}

.nna-loader-rule i {
	position: absolute;
	top: 0;
	left: 0;
	width: 34%;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg,
			rgba(var(--nna-orange-rgb), 0) 0%,
			var(--nna-orange) 50%,
			rgba(var(--nna-orange-rgb), 0) 100%);
	animation: nna-loader-run 1.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes nna-loader-run {
	0% {
		transform: translateX(-110%);
	}

	100% {
		transform: translateX(400%);
	}
}

/* --- Tagline ----------------------------------------------------- */
.nna-loader-text {
	margin-bottom: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

/* --- Responsive --------------------------------------------------- */
@media (max-width: 767px) {
	.nna-loader {
		max-width: 280px;
	}
	.nna-loader-mark {
		margin-bottom: 26px;
	}
	.nna-loader-mark img {
		width: 132px;
	}
	.nna-loader-text {
		font-size: 11px;
		letter-spacing: 0.18em;
	}
}

/* Kedua gerakannya kecil dan setempat, sekelas spinner biasa, dan
   justru dibutuhkan sebagai tanda halaman masih memuat. Yang
   dilepas hanya kilau logonya — itu murni hiasan. */
@media (prefers-reduced-motion: reduce) {

	.nna-loader-sheen {
		display: none;
	}
}

/* ============================================
   19. HALAMAN KARIR

   RANTAI WARNA ANTAR-SECTION
   Ini yang bikin halaman terbaca sebagai satu
   bidang utuh, bukan tumpukan kotak:

     banner   -> tutup ke #ffffff (nna-banner-fade)
     ajakan   -> #ffffff
     lowongan -> #ffffff
     kenapa   -> #ffffff
     penutup  -> gradient #ffffff ke #141742
     footer   -> #141742

   Tidak satu pun section memakai warna dasar yang
   berbeda dari penutup section sebelumnya, jadi
   tidak ada batas yang bisa terlihat.
   ============================================ */

/* --- Shape pada banner ---------------------------------------- */
/* Grid tipis di atas foto — motif yang sama dengan
   section lain, supaya banner tidak terasa asing. */
.nna-banner-shape {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
	background-size: 84px 84px;
	-webkit-mask-image: radial-gradient(ellipse 62% 78% at 22% 46%, #000 0%, transparent 82%);
	mask-image: radial-gradient(ellipse 62% 78% at 22% 46%, #000 0%, transparent 82%);
}

/* ============================================
   19.1 AJAKAN + FOTO BERJALAN
   ============================================ */
.nna-join-area {
	position: relative;
	overflow: hidden;
	padding: 110px 0 0;
	background-color: var(--nna-white);
}

.nna-join-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.nna-join-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(var(--nna-blue-rgb), 0.055) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(var(--nna-blue-rgb), 0.055) 1px, transparent 1px);
	background-size: 96px 96px;
	-webkit-mask-image: radial-gradient(ellipse 70% 58% at 50% 26%, #000 0%, transparent 80%);
	mask-image: radial-gradient(ellipse 70% 58% at 50% 26%, #000 0%, transparent 80%);
}

.nna-join-blob {
	position: absolute;
	display: block;
	border-radius: 50%;
	filter: blur(110px);
}

.nna-join-blob-blue {
	top: -80px;
	left: 50%;
	width: 680px;
	height: 560px;
	opacity: 0.8;
	transform: translateX(-88%);
	background: radial-gradient(circle at 50% 50%, rgba(var(--nna-blue-rgb), 0.42) 0%, rgba(var(--nna-blue-rgb), 0) 72%);
}

.nna-join-blob-orange {
	top: -110px;
	left: 50%;
	width: 580px;
	height: 500px;
	opacity: 0.5;
	transform: translateX(-8%);
	background: radial-gradient(circle at 50% 50%, rgba(var(--nna-orange-rgb), 0.34) 0%, rgba(var(--nna-orange-rgb), 0) 70%);
}

.nna-join-area > .container {
	position: relative;
	z-index: 1;
}

.nna-join-eyebrow {
	display: inline-block;
	margin-bottom: 18px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nna-orange);
}

.nna-join-title {
	font-size: 61px;
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.025em;
	margin-bottom: 20px;
	color: var(--nna-ink);
}

.nna-join-text {
	margin: 0 auto 34px;
	font-size: 20px !important;
	font-weight: 400;
	line-height: 1.75;
	color: var(--nna-body);
	text-align: center !important;
}

.nna-vacancy-note p {
	text-align: left !important;
}

/* --- Strip foto berjalan -------------------------------------- */
.nna-strip {
	position: relative;
	z-index: 1;
	margin-top: 70px;
}

.nna-strip-row {
	overflow: hidden;
	/* Tepi kiri-kanan dilarutkan supaya foto tidak terpotong
	   mendadak di batas layar. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.nna-strip-track {
	display: flex;
	gap: 20px;
	width: max-content;
	animation: nna-strip-run 40s linear infinite;
}

/* Isi digandakan lewat JS, jadi bergeser -50% berarti
   tepat satu set penuh — sambungannya tidak terlihat. */
@keyframes nna-strip-run {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

.nna-strip-row:hover .nna-strip-track {
	animation-play-state: paused;
}

.nna-strip-item {
	display: block;
	flex: 0 0 auto;
	width: 300px;
	overflow: hidden;
	border-radius: 20px;
	background-color: var(--nna-blue-tint);
}

.nna-strip-item img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
	transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.nna-strip-item:hover img {
	transform: scale(1.06);
}

/* ============================================
   19.2 DAFTAR LOWONGAN
   ============================================ */
.nna-vacancy-area {
	position: relative;
	padding: 110px 0 110px;
	background-color: var(--nna-white);
}

.nna-vacancy-head {
	margin-bottom: 46px;
}

.nna-vacancy-eyebrow {
	display: inline-block;
	margin-bottom: 16px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nna-orange);
}

.nna-vacancy-title {
	font-size: 56px;
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.025em;
	margin-bottom: 0;
	color: var(--nna-ink);
}

.nna-vacancy-note p {
	margin-bottom: 0;
	font-size: 17px;
	line-height: 1.75;
	color: var(--nna-muted);
}

.nna-vacancy-note a {
	font-weight: 600;
	color: var(--nna-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nna-vacancy-note a:hover {
	color: var(--nna-orange);
}

/* --- Baris lowongan ------------------------------------------- */
.nna-vacancy-list {
	border-top: 1px solid var(--nna-line);
}

.nna-vacancy-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 30px 28px;
	border-bottom: 1px solid var(--nna-line);
	transition: background-color 0.4s ease, padding-left 0.4s ease;
}

/* Garis aksen yang tumbuh dari kiri saat hover — penanda
   baris aktif tanpa perlu mengubah warna latar drastis. */
.nna-vacancy-item::before {
	position: absolute;
	content: "";
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background-color: var(--nna-orange);
	transform: scaleY(0);
	transform-origin: center top;
	transition: transform 0.4s ease;
}

.nna-vacancy-item:hover {
	padding-left: 38px;
	background-color: var(--nna-surface);
}

.nna-vacancy-item:hover::before {
	transform: scaleY(1);
}

.nna-vacancy-no {
	flex: 0 0 auto;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	color: var(--nna-muted);
}

.nna-vacancy-main {
	flex: 1 1 auto;
	min-width: 0;
}

.nna-vacancy-name {
	display: block;
	margin-bottom: 6px;
	font-size: 29px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--nna-ink);
	transition: color 0.3s ease;
}

.nna-vacancy-item:hover .nna-vacancy-name {
	color: var(--nna-blue);
}

.nna-vacancy-desc {
	display: block;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--nna-body);
}

/* Lokasi jadi chip — beberapa posisi punya 12 kota,
   kalau ditulis sebagai kalimat barisnya jadi panjang. */
.nna-vacancy-loc {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	flex: 0 1 auto;
	max-width: 340px;
	justify-content: flex-end;
}

.nna-vacancy-loc span {
	padding: 5px 12px;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	color: var(--nna-body);
	background-color: var(--nna-surface);
	border: 1px solid var(--nna-line);
}

.nna-vacancy-item:hover .nna-vacancy-loc span {
	background-color: var(--nna-white);
}

.nna-vacancy-go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	color: var(--nna-ink);
	border: 1px solid var(--nna-line);
	transition: color 0.35s ease, background-color 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}

.nna-vacancy-item:hover .nna-vacancy-go {
	color: var(--nna-white);
	background-color: var(--nna-orange);
	border-color: var(--nna-orange);
	transform: rotate(45deg);
}

/* --- Peringatan penipuan -------------------------------------- */
.nna-vacancy-warn {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	margin-top: 44px;
	padding: 26px 30px;
	border-radius: 18px;
	background-color: var(--nna-orange-tint);
	border: 1px solid rgba(var(--nna-orange-rgb), 0.24);
}

.nna-vacancy-warn-ico {
	display: inline-flex;
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--nna-orange-dark);
}

.nna-vacancy-warn-text h3 {
	margin-bottom: 6px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--nna-ink);
}

.nna-vacancy-warn-text p {
	margin-bottom: 0;
	font-size: 17px;
	line-height: 1.72;
	color: var(--nna-body);
}

.nna-vacancy-warn-text strong {
	font-weight: 600;
	color: var(--nna-ink);
}

/* ============================================
   19.3 KENAPA BEKERJA DI NNA
   ============================================ */
.nna-why-area {
	position: relative;
	padding: 0 0 120px;
	background-color: var(--nna-white);
}

.nna-why-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	margin-bottom: 40px;
}

.nna-why-title {
	font-size: 49px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.025em;
	margin-bottom: 0;
	color: var(--nna-ink);
}

.nna-why-nav {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.nna-why-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	color: var(--nna-ink);
	background-color: transparent;
	border: 1px solid var(--nna-line);
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.nna-why-arrow:hover {
	color: var(--nna-white);
	background-color: var(--nna-orange);
	border-color: var(--nna-orange);
}

.nna-why-arrow.swiper-button-disabled {
	opacity: 0.35;
	pointer-events: none;
}

.nna-why-slider {
	overflow: hidden;
}

.nna-why-card {
	height: 100%;
	padding: 38px 32px 40px;
	border-radius: 22px;
	border: 1px solid var(--nna-line);
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Tiap kartu diberi rona berbeda supaya deretannya tidak
   monoton, tapi tetap di dalam dua warna brand. */
.nna-why-card-1 {
	background-color: #f2f3fa;
}

.nna-why-card-2 {
	background-color: var(--nna-orange-tint);
}

.nna-why-card-3 {
	background-color: #eef0f8;
}

.nna-why-card-4 {
	background-color: #fdf3ec;
}

.nna-why-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 46px rgba(var(--nna-blue-rgb), 0.1);
}

.nna-why-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	margin-bottom: 26px;
	border-radius: 18px;
	color: var(--nna-blue);
	background-color: rgba(255, 255, 255, 0.72);
}

.nna-why-card-2 .nna-why-ico,
.nna-why-card-4 .nna-why-ico {
	color: var(--nna-orange-dark);
}

.nna-why-card h3 {
	margin-bottom: 12px;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--nna-ink);
}

.nna-why-card p {
	margin-bottom: 0;
	font-size: 17px;
	line-height: 1.72;
	color: var(--nna-body);
}

/* ============================================
   19.4 DIVIDER PENUTUP
   Bidang terakhir sebelum footer. Gradient-nya
   berangkat dari putih (warna penutup section
   di atas) dan berakhir tepat di --nna-footer-bg,
   jadi footer terbaca sebagai lanjutan section
   ini, bukan blok baru.
   ============================================ */
.nna-hire-area {
	position: relative;
	overflow: hidden;
	padding: 130px 0 140px;
	background: linear-gradient(180deg,
			#ffffff 0%,
			#f3f4fa 12%,
			#dfe2ef 26%,
			#aeb2d3 44%,
			#5d61a6 64%,
			#2e3192 78%,
			#1e2160 90%,
			var(--nna-footer-bg) 100%);
}

.nna-hire-eyebrow {
	display: inline-block;
	margin-bottom: 18px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nna-orange-soft);
}

.nna-hire-title {
	font-size: 56px;
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.025em;
	margin-bottom: 16px;
	color: var(--nna-white);
}

.nna-hire-text {
	max-width: 460px;
	font-size: 18px;
	line-height: 1.75;
	margin-bottom: 32px;
	color: rgba(255, 255, 255, 0.8);
}

/* --- Orbit foto mengelilingi logo -----------------------------
   Tiga lapis, karena satu elemen tidak bisa menjalankan dua
   transform sekaligus:

     .nna-hire-ring  -> berputar  0 -> 360deg
     .nna-hire-slot  -> penempatan statis di lingkaran
     .nna-hire-face  -> berputar 0 -> -360deg (melawan ring)

   Lapis ketiga itu yang bikin foto tetap tegak, tidak ikut
   jungkir balik mengikuti putaran.
   -------------------------------------------------------------- */
.nna-hire-orbit {
	position: relative;
	width: 100%;
	max-width: 400px;
	aspect-ratio: 1 / 1;
	margin-left: auto;
}

.nna-hire-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 124px;
	height: 124px;
	padding: 24px;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	background-color: var(--nna-blue);
	border: 2px solid rgba(255, 255, 255, 0.28);
	box-shadow: 0 14px 40px rgba(10, 12, 40, 0.32);
}

.nna-hire-logo img {
	display: block;
	width: 100%;
	height: auto;
}

.nna-hire-ring {
	position: absolute;
	inset: 0;
	display: block;
	animation: nna-orbit 30s linear infinite;
}

@keyframes nna-orbit {
	to {
		transform: rotate(360deg);
	}
}

/* Penempatan: diputar ke sudutnya, digeser sejauh jari-jari,
   lalu diputar balik supaya bingkainya tetap lurus. */
.nna-hire-slot {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 92px;
	height: 92px;
	margin: -46px 0 0 -46px;
	transform:
		rotate(calc(var(--i) * 60deg))
		translate(148px)
		rotate(calc(var(--i) * -60deg));
}

.nna-hire-face {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.1);
	border: 2px solid rgba(255, 255, 255, 0.22);
	animation: nna-orbit-rev 30s linear infinite;
}

@keyframes nna-orbit-rev {
	to {
		transform: rotate(-360deg);
	}
}

.nna-hire-face img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Jeda saat disentuh, supaya fotonya sempat dilihat */
.nna-hire-orbit:hover .nna-hire-ring,
.nna-hire-orbit:hover .nna-hire-face {
	animation-play-state: paused;
}

/* --- Responsive ----------------------------------------------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
	.nna-join-title {
		font-size: 54px;
	}
	.nna-vacancy-title,
	.nna-hire-title {
		font-size: 49px;
	}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.nna-join-area {
		padding-top: 90px;
	}
	.nna-join-title {
		font-size: 46px;
	}
	.nna-vacancy-area {
		padding: 90px 0;
	}
	.nna-vacancy-title,
	.nna-hire-title {
		font-size: 41px;
	}
	.nna-why-title {
		font-size: 39px;
	}
	.nna-why-area {
		padding-bottom: 100px;
	}
	.nna-hire-area {
		padding: 100px 0 110px;
	}
	.nna-strip-item {
		width: 250px;
	}
	.nna-strip-item img {
		height: 185px;
	}
	.nna-vacancy-name {
		font-size: 26px;
	}
	.nna-vacancy-loc {
		max-width: 250px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.nna-join-area {
		padding-top: 80px;
	}
	.nna-join-title,
	.nna-vacancy-title,
	.nna-hire-title {
		font-size: 39px;
	}
	.nna-join-title br,
	.nna-vacancy-title br,
	.nna-hire-title br {
		display: none;
	}
	.nna-vacancy-area {
		padding: 80px 0;
	}
	.nna-vacancy-note {
		margin-top: 20px;
	}
	.nna-why-title {
		font-size: 34px;
	}
	.nna-why-area {
		padding-bottom: 85px;
	}
	.nna-hire-area {
		padding: 85px 0 90px;
	}
	.nna-strip-item {
		width: 230px;
	}
	.nna-strip-item img {
		height: 170px;
	}
	.nna-vacancy-item {
		flex-wrap: wrap;
		gap: 16px;
	}
	.nna-vacancy-loc {
		max-width: 100%;
		justify-content: flex-start;
		flex: 1 1 100%;
		order: 3;
	}
	.nna-hire-orbit {
		margin: 44px auto 0;
		max-width: 340px;
	}
	.nna-hire-slot {
		width: 78px;
		height: 78px;
		margin: -39px 0 0 -39px;
		transform:
			rotate(calc(var(--i) * 60deg))
			translate(126px)
			rotate(calc(var(--i) * -60deg));
	}
	.nna-hire-logo {
		width: 104px;
		height: 104px;
		padding: 20px;
	}
}

@media (max-width: 767px) {
	.nna-banner-shape {
		background-size: 60px 60px;
	}
	.nna-join-area {
		padding-top: 64px;
	}
	.nna-join-grid {
		background-size: 64px 64px;
	}
	.nna-join-blob {
		filter: blur(70px);
	}
	.nna-join-blob-blue,
	.nna-join-blob-orange {
		width: 320px;
		height: 300px;
	}
	.nna-join-eyebrow {
		font-size: 14px;
		margin-bottom: 14px;
	}
	.nna-join-title {
		font-size: 33px;
		line-height: 1.24;
	}
	.nna-join-title br {
		display: none;
	}
	.nna-join-text {
		font-size: 17px;
		margin-bottom: 28px;
	}
	.nna-strip {
		margin-top: 48px;
	}
	.nna-strip-track {
		gap: 12px;
	}
	.nna-strip-item {
		width: 176px;
		border-radius: 16px;
	}
	.nna-strip-item img {
		height: 132px;
	}

	.nna-vacancy-area {
		padding: 60px 0 64px;
	}
	.nna-vacancy-head {
		margin-bottom: 30px;
	}
	.nna-vacancy-eyebrow {
		font-size: 14px;
	}
	.nna-vacancy-title {
		font-size: 32px;
		line-height: 1.24;
	}
	.nna-vacancy-title br {
		display: none;
	}
	.nna-vacancy-note {
		margin-top: 18px;
	}
	.nna-vacancy-note p {
		font-size: 16px;
	}

	/* Baris jadi bertumpuk; tombol panah dipindah
	   ke sudut kanan atas agar tidak memakan baris sendiri. */
	.nna-vacancy-item {
		flex-wrap: wrap;
		gap: 12px;
		padding: 22px 0;
	}
	.nna-vacancy-item:hover {
		padding-left: 12px;
	}
	.nna-vacancy-no {
		order: 1;
	}
	.nna-vacancy-go {
		order: 2;
		width: 38px;
		height: 38px;
		margin-left: auto;
	}
	.nna-vacancy-main {
		order: 3;
		flex: 1 1 100%;
	}
	.nna-vacancy-loc {
		order: 4;
		flex: 1 1 100%;
		max-width: 100%;
		justify-content: flex-start;
	}
	.nna-vacancy-name {
		font-size: 23px;
	}
	.nna-vacancy-desc {
		font-size: 16px;
	}

	.nna-vacancy-warn {
		gap: 14px;
		margin-top: 32px;
		padding: 20px 18px;
		border-radius: 16px;
	}
	.nna-vacancy-warn-text h3 {
		font-size: 18px;
	}
	.nna-vacancy-warn-text p {
		font-size: 16px;
	}

	.nna-why-area {
		padding-bottom: 70px;
	}
	.nna-why-head {
		gap: 16px;
		margin-bottom: 26px;
	}
	.nna-why-title {
		font-size: 29px;
	}
	.nna-why-arrow {
		width: 38px;
		height: 38px;
	}
	.nna-why-card {
		padding: 28px 22px 30px;
		border-radius: 18px;
	}
	.nna-why-ico {
		width: 54px;
		height: 54px;
		margin-bottom: 20px;
	}
	.nna-why-card h3 {
		font-size: 23px;
	}
	.nna-why-card p {
		font-size: 16px;
	}

	.nna-hire-area {
		padding: 70px 0 75px;
		background: linear-gradient(180deg,
				#ffffff 0%,
				#f0f1f8 10%,
				#d5d8e9 24%,
				#9599c4 44%,
				#4a4d9e 66%,
				#232660 86%,
				var(--nna-footer-bg) 100%);
	}
	.nna-hire-eyebrow {
		font-size: 14px;
		margin-bottom: 14px;
	}
	.nna-hire-title {
		font-size: 32px;
		line-height: 1.24;
	}
	.nna-hire-title br {
		display: none;
	}
	.nna-hire-text {
		font-size: 17px;
		margin-bottom: 26px;
	}
	.nna-hire-orbit {
		max-width: 280px;
		margin: 38px auto 0;
	}
	.nna-hire-slot {
		width: 66px;
		height: 66px;
		margin: -33px 0 0 -33px;
		transform:
			rotate(calc(var(--i) * 60deg))
			translate(104px)
			rotate(calc(var(--i) * -60deg));
	}
	.nna-hire-logo {
		width: 88px;
		height: 88px;
		padding: 16px;
		border-width: 2px;
	}
}

@media (prefers-reduced-motion: reduce) {

	/* Marquee tidak dibekukan, hanya diperlambat separuh.
	   Membekukannya berarti hanya foto pertama yang pernah
	   terlihat — isinya jadi hilang, bukan sekadar diam. */
	.nna-strip-track {
		animation-duration: 80s;
	}

	/* Orbit diperlambat separuh, bukan dihentikan —
	   fotonya tetap terlihat semua walau berhenti,
	   jadi memperlambat sudah cukup. */
	.nna-hire-ring,
	.nna-hire-face {
		animation-duration: 60s;
	}

	.nna-strip-item img,
	.nna-vacancy-item,
	.nna-vacancy-go,
	.nna-why-card {
		transition: none;
	}

	.nna-strip-item:hover img,
	.nna-why-card:hover {
		transform: none;
	}

	.nna-vacancy-item:hover .nna-vacancy-go {
		transform: none;
	}
}

/* ============================================
   20. MODAL
   Dipakai popup himbauan penipuan rekrutmen.
   Ditulis generik supaya modal berikutnya cukup
   memakai markup .nna-modal yang sama.
   ============================================ */
.nna-modal {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	/* Dibuka lewat atribut [hidden]; opacity dipakai
	   untuk transisi masuk-keluarnya. */
	opacity: 0;
	transition: opacity 0.3s ease;
}

.nna-modal.is-open {
	opacity: 1;
}

.nna-modal[hidden] {
	display: none;
}

.nna-modal-backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(10, 12, 40, 0.62);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.nna-modal-dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 560px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	padding: 44px 44px 40px;
	border-radius: 24px;
	outline: 0;
	background-color: var(--nna-white);
	box-shadow: 0 30px 80px rgba(10, 12, 40, 0.34);
	transform: translateY(16px) scale(0.98);
	transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}

.nna-modal.is-open .nna-modal-dialog {
	transform: translateY(0) scale(1);
}

.nna-modal-close {
	position: absolute;
	top: 18px;
	right: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: var(--nna-body);
	background-color: var(--nna-surface);
	transition: color 0.3s ease, background-color 0.3s ease;
}

.nna-modal-close:hover {
	color: var(--nna-white);
	background-color: var(--nna-orange);
}

.nna-modal-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	margin-bottom: 22px;
	border-radius: 18px;
	color: var(--nna-orange-dark);
	background-color: var(--nna-orange-tint);
}

.nna-modal-title {
	margin-bottom: 16px;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -0.02em;
	color: var(--nna-ink);
}

.nna-modal-body p {
	margin-bottom: 16px;
	font-size: 17px;
	line-height: 1.75;
	color: var(--nna-body);
}

.nna-modal-body strong {
	font-weight: 600;
	color: var(--nna-ink);
}

.nna-modal-list {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.nna-modal-list li {
	position: relative;
	margin-bottom: 10px;
	padding-left: 26px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--nna-body);
}

/* Penanda dibuat dari pseudo-element supaya bentuk dan
   warnanya konsisten, tidak bergantung bullet bawaan. */
.nna-modal-list li::before {
	position: absolute;
	content: "";
	left: 4px;
	top: 10px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--nna-orange);
}

.nna-modal-note {
	padding-top: 14px;
	border-top: 1px solid var(--nna-line);
	font-size: 14px !important;
	color: var(--nna-muted) !important;
}

.nna-modal-note a {
	font-weight: 600;
	color: var(--nna-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nna-modal-note a:hover {
	color: var(--nna-orange);
}

.nna-modal-action {
	margin-top: 26px;
}

.nna-modal-action .nna-pill {
	width: 100%;
	border: 0;
	font-family: var(--nna-ff-primary);
}

/* Scroll halaman dikunci selama modal terbuka.
   ScrollSmoother dipause lewat JS; ini cadangan untuk
   kondisi ketika smoother tidak aktif. */
html.nna-modal-open,
html.nna-modal-open body {
	overflow: hidden;
}

@media (max-width: 767px) {
	.nna-modal {
		padding: 16px;
		align-items: flex-end;
	}
	.nna-modal-dialog {
		max-height: calc(100vh - 32px);
		padding: 32px 22px 26px;
		border-radius: 20px;
	}
	.nna-modal-close {
		top: 12px;
		right: 12px;
		width: 32px;
		height: 32px;
	}
	.nna-modal-ico {
		width: 54px;
		height: 54px;
		margin-bottom: 18px;
	}
	.nna-modal-title {
		font-size: 26px;
	}
	.nna-modal-body p,
	.nna-modal-list li {
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.nna-modal,
	.nna-modal-dialog {
		transition: none;
	}

	.nna-modal .nna-modal-dialog {
		transform: none;
	}
}

/* ============================================
   21. HALAMAN ARTIKEL & BERITA

   Kartu daftar memakai .nna-news-card yang sama
   persis dengan section berita di index.php —
   tidak ada gaya kartu kedua yang perlu dirawat.
   Di sini hanya bagian yang khas halaman ini:
   hero pencarian, sorotan, daftar ringkas, dan
   pita filter.

   Rantai warna: hero putih -> semua section
   putih -> footer. Pita filter memakai biru,
   tapi ia kartu di dalam bidang putih, bukan
   latar section, jadi tidak memotong alur.
   ============================================ */

/* --- Hero ----------------------------------------------------- */
.nna-art-hero {
	position: relative;
	overflow: hidden;
	padding: 150px 0 70px;
	background-color: var(--nna-white);
}

.nna-art-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 130px);
	mask-image: linear-gradient(180deg, transparent 0, #000 130px);
}

.nna-art-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(var(--nna-blue-rgb), 0.055) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(var(--nna-blue-rgb), 0.055) 1px, transparent 1px);
	background-size: 96px 96px;
	-webkit-mask-image: radial-gradient(ellipse 72% 66% at 50% 34%, #000 0%, transparent 82%);
	mask-image: radial-gradient(ellipse 72% 66% at 50% 34%, #000 0%, transparent 82%);
}

.nna-art-blob {
	position: absolute;
	display: block;
	border-radius: 50%;
	filter: blur(110px);
}

.nna-art-blob-blue {
	top: -40px;
	left: 50%;
	width: 660px;
	height: 540px;
	opacity: 0.78;
	transform: translateX(-90%);
	background: radial-gradient(circle at 50% 50%, rgba(var(--nna-blue-rgb), 0.4) 0%, rgba(var(--nna-blue-rgb), 0) 72%);
}

.nna-art-blob-orange {
	top: -70px;
	left: 50%;
	width: 560px;
	height: 480px;
	opacity: 0.48;
	transform: translateX(-10%);
	background: radial-gradient(circle at 50% 50%, rgba(var(--nna-orange-rgb), 0.34) 0%, rgba(var(--nna-orange-rgb), 0) 70%);
}

.nna-art-hero > .container {
	position: relative;
	z-index: 1;
}

/* Breadcrumb versi terang — varian di banner dipakai
   di atas foto gelap, di sini latarnya putih. */
.nna-breadcrumb-dark li {
	color: var(--nna-ink);
}

.nna-breadcrumb-dark a {
	color: var(--nna-muted);
}

.nna-breadcrumb-dark a:hover {
	color: var(--nna-orange);
}

.nna-breadcrumb-dark li + li::before {
	background-color: rgba(var(--nna-blue-rgb), 0.3);
}

.nna-art-hero-box {
	margin-top: 26px;
}

.nna-art-hero-title {
	font-size: 66px;
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.03em;
	margin-bottom: 14px;
	color: var(--nna-ink);
}

.nna-art-hero-desc p {
	max-width: 520px;
	margin: 0 auto 32px;
	font-size: 19px;
	line-height: 1.7;
	color: var(--nna-body);
}

/* --- Kolom pencarian ------------------------------------------ */
.nna-art-search {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 100%;
	margin: 0 auto 16px;
	padding: 7px 8px 7px 20px;
	border-radius: 100px;
	background-color: var(--nna-white);
	border: 1px solid var(--nna-line);
	box-shadow: 0 14px 40px rgba(var(--nna-blue-rgb), 0.08);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.nna-art-search:focus-within {
	border-color: rgba(var(--nna-orange-rgb), 0.55);
	box-shadow: 0 14px 40px rgba(var(--nna-orange-rgb), 0.14);
}

.nna-art-search-ico {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--nna-muted);
}

.nna-art-search input {
	flex: 1 1 auto;
	width: 100%;
	height: 44px;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font-family: var(--nna-ff-primary);
	font-size: 15px;
	color: var(--nna-ink);
}

.nna-art-search input::placeholder {
	color: var(--nna-muted);
}

/* Bawaan browser: silang pembersih ganda pada input
   type=search. Kita sudah punya tombolnya sendiri. */
.nna-art-search input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.nna-art-search button {
	flex: 0 0 auto;
	height: 42px;
	padding: 0 22px;
	border: 0;
	border-radius: 100px;
	font-family: var(--nna-ff-primary);
	font-size: 14px;
	font-weight: 600;
	color: var(--nna-white);
	background-color: var(--nna-ink);
	transition: background-color 0.3s ease;
}

.nna-art-search button:hover {
	background-color: var(--nna-orange);
}

.nna-art-search button[hidden] {
	display: none;
}

.nna-art-hint {
	margin-bottom: 0;
	font-size: 13px;
	color: var(--nna-muted);
}

/* --- Judul bagian --------------------------------------------- */
.nna-art-latest {
	position: relative;
	padding: 40px 0 0;
	background-color: var(--nna-white);
}

.nna-art-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 32px;
}

.nna-art-head-title {
	font-size: 63px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.025em;
	margin-bottom: 0;
	color: var(--nna-ink);
}

.nna-art-head-link {
	flex: 0 0 auto;
	padding: 10px 22px;
	border-radius: 100px;
	font-size: 14px;
	font-weight: 600;
	color: var(--nna-ink);
	border: 1px solid var(--nna-line);
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.nna-art-head-link:hover {
	color: var(--nna-white);
	background-color: var(--nna-ink);
	border-color: var(--nna-ink);
}

.nna-art-latest-row {
	--bs-gutter-x: 24px;
	--bs-gutter-y: 24px;
}

/* --- Kartu sorotan -------------------------------------------- */
.nna-art-feature {
	height: 100%;
	overflow: hidden;
	border-radius: 22px;
	background-color: var(--nna-white);
	border: 1px solid var(--nna-line);
}

.nna-art-feature-media {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background-color: var(--nna-blue-tint);
}

.nna-art-feature-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.nna-art-feature:hover .nna-art-feature-media img {
	transform: scale(1.05);
}

.nna-art-feature-body {
	padding: 28px 30px 30px;
}

.nna-art-feature-title {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -0.02em;
	margin-bottom: 12px;
}

.nna-art-feature-title a {
	color: var(--nna-ink);
	transition: color 0.3s ease;
}

.nna-art-feature-title a:hover {
	color: var(--nna-blue);
}

.nna-art-feature-text {
	font-size: 17px;
	line-height: 1.72;
	margin-bottom: 18px;
	color: var(--nna-body);
}

/* --- Daftar ringkas ------------------------------------------- */
.nna-art-mini-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
}

/* Padding dilepas dari kartu dan dipindah ke badan teks,
   supaya thumbnail bisa menempel penuh ke tepi kiri —
   tinggi gambar otomatis mengikuti tinggi kartu. */
.nna-art-mini {
	display: flex;
	align-items: stretch;
	flex: 1 1 auto;
	overflow: hidden;
	border-radius: 18px;
	background-color: var(--nna-white);
	border: 1px solid var(--nna-line);
	transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.nna-art-mini:hover {
	background-color: var(--nna-surface);
	border-color: rgba(var(--nna-blue-rgb), 0.18);
	box-shadow: 0 14px 34px rgba(var(--nna-blue-rgb), 0.08);
}

.nna-art-mini-media {
	position: relative;
	display: block;
	flex: 0 0 152px;
	width: 152px;
	overflow: hidden;
	background-color: var(--nna-blue-tint);
}

.nna-art-mini-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.nna-art-mini:hover .nna-art-mini-media img {
	transform: scale(1.06);
}

.nna-art-mini-body {
	flex: 1 1 auto;
	min-width: 0;
	padding: 18px 20px 18px 22px;
}

.nna-art-mini-text {
	margin: 8px 0 12px;
	font-size: 15px;
	line-height: 1.62;
	color: var(--nna-body);
}

.nna-art-mini-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 0 20px;
	border-radius: 100px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: var(--nna-white);
	background-color: var(--nna-blue);
	border: 1px solid var(--nna-blue);
	transition: color 0.32s ease, background-color 0.32s ease, border-color 0.32s ease;
}

.nna-art-mini-link i {
	display: inline-flex;
	line-height: 0;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.nna-art-mini-link:hover {
	color: var(--nna-white);
	background-color: var(--nna-ink);
	border-color: var(--nna-ink);
}

.nna-art-mini-link:hover i {
	transform: translate(2px, -2px);
}

.nna-art-mini-body h4 {
	margin-bottom: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.38;
	letter-spacing: -0.015em;
}

.nna-art-mini-body h4 a {
	color: var(--nna-ink);
	transition: color 0.3s ease;
}

.nna-art-mini-body h4 a:hover {
	color: var(--nna-blue);
}

.nna-art-mini .nna-news-card-meta {
	margin-bottom: 8px;
}

/* Dua artikel di sumber tidak punya gambar (404 di server).
   Diberi bidang brand berlogo — jujur kosong, bukan foto
   yang dipinjam dari artikel lain. */
.nna-news-card-media-empty,
.nna-art-mini-media-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--nna-blue) 0%, var(--nna-blue-deep) 100%);
}

.nna-news-card-media-empty img,
.nna-art-mini-media-empty img {
	width: 54%;
	height: auto;
	object-fit: contain;
	opacity: 0.9;
}

.nna-art-mini-media-empty img {
	width: 74%;
}

.nna-art-mini:hover .nna-art-mini-media-empty img {
	transform: none;
}

.nna-news-card:hover .nna-news-card-media-empty img {
	transform: none;
}

/* --- Pita filter ---------------------------------------------- */
.nna-art-filter-area {
	position: relative;
	padding: 70px 0 0;
	background-color: var(--nna-white);
}

.nna-art-filter {
	position: relative;
	overflow: hidden;
	padding: 40px 44px;
	border-radius: 24px;
	background: linear-gradient(116deg,
			var(--nna-blue-deep) 0%,
			var(--nna-blue) 58%,
			#3a3ea8 100%);
}

/* Rona oranye tipis di sudut kanan supaya bidang biru
   selebar ini tidak terasa rata. */
.nna-art-filter::after {
	position: absolute;
	content: "";
	top: -60%;
	right: -6%;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(circle at 50% 50%, rgba(var(--nna-orange-rgb), 0.26) 0%, rgba(var(--nna-orange-rgb), 0) 70%);
}

.nna-art-filter-text {
	position: relative;
	z-index: 1;
	margin-bottom: 26px;
}

.nna-art-filter-eyebrow {
	display: inline-block;
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nna-orange-soft);
}

.nna-art-filter-title {
	margin-bottom: 0;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.28;
	letter-spacing: -0.02em;
	color: var(--nna-white);
}

.nna-art-filter-form {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.1fr auto;
	gap: 14px;
	align-items: end;
}

.nna-art-field label {
	display: block;
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.nna-art-field input,
.nna-art-field select {
	width: 100%;
	height: 48px;
	padding: 0 16px;
	border-radius: 12px;
	outline: 0;
	font-family: var(--nna-ff-primary);
	font-size: 14px;
	font-weight: 500;
	color: var(--nna-white);
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	transition: background-color 0.3s ease, border-color 0.3s ease;
	/* Ikon kalender bawaan browser ikut jadi terang —
	   tanpa ini ikonnya hitam dan hilang di atas biru. */
	color-scheme: dark;
}

.nna-art-field input:focus,
.nna-art-field select:focus {
	background-color: rgba(255, 255, 255, 0.14);
	border-color: rgba(var(--nna-orange-rgb), 0.6);
}

/* Panah bawaan select dimatikan, diganti ikon sendiri
   supaya bentuknya sama di semua browser. */
.nna-art-select {
	position: relative;
}

.nna-art-select select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 40px;
	cursor: pointer;
}

.nna-art-select span {
	position: absolute;
	top: 50%;
	right: 16px;
	display: inline-flex;
	pointer-events: none;
	transform: translateY(-50%);
	color: rgba(255, 255, 255, 0.7);
}

.nna-art-select option {
	color: var(--nna-ink);
	background-color: var(--nna-white);
}

.nna-art-field-action button {
	height: 48px;
	padding: 0 24px;
	border: 0;
	border-radius: 12px;
	font-family: var(--nna-ff-primary);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--nna-ink);
	background-color: var(--nna-white);
	transition: color 0.3s ease, background-color 0.3s ease;
}

.nna-art-field-action button:hover {
	color: var(--nna-white);
	background-color: var(--nna-orange);
}

/* --- Daftar artikel ------------------------------------------- */
.nna-art-list-area {
	position: relative;
	padding: 50px 0 130px;
	background-color: var(--nna-white);
}

.nna-art-list {
	--bs-gutter-x: 24px;
	--bs-gutter-y: 40px;
}

.nna-art-list > [hidden] {
	display: none;
}

/* Kartu daftar tidak memakai .tp_fade_anim (lihat catatan
   di article-filter.js), jadi kemunculannya diurus di sini.
   Animasi ini tidak bergantung posisi scroll, sehingga aman
   walau kartunya disaring, diurut, atau berpindah halaman. */
.nna-art-list > * {
	animation: nna-card-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes nna-card-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --- Pagination ----------------------------------------------- */
.nna-art-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 56px;
}

.nna-art-pager[hidden] {
	display: none;
}

.nna-art-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border-radius: 12px;
	font-family: var(--nna-ff-primary);
	font-size: 15px;
	font-weight: 600;
	color: var(--nna-ink);
	background-color: var(--nna-white);
	border: 1px solid var(--nna-line);
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.nna-art-page:hover:not(:disabled):not(.is-active) {
	color: var(--nna-blue);
	border-color: rgba(var(--nna-blue-rgb), 0.35);
}

.nna-art-page.is-active {
	color: var(--nna-white);
	background-color: var(--nna-ink);
	border-color: var(--nna-ink);
}

.nna-art-page-arrow {
	min-width: 44px;
	padding: 0;
	color: var(--nna-body);
}

.nna-art-page:disabled {
	opacity: 0.35;
	cursor: default;
}

/* --- Keadaan kosong ------------------------------------------- */
.nna-art-empty {
	padding: 60px 24px;
	text-align: center;
}

.nna-art-empty[hidden] {
	display: none;
}

.nna-art-empty-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	margin-bottom: 18px;
	border-radius: 50%;
	color: var(--nna-muted);
	background-color: var(--nna-surface);
}

.nna-art-empty h3 {
	margin-bottom: 8px;
	font-size: 21px;
	font-weight: 700;
	color: var(--nna-ink);
}

.nna-art-empty p {
	margin-bottom: 0;
	font-size: 15px;
	color: var(--nna-muted);
}

.nna-art-empty button {
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--nna-ff-primary);
	font-size: 15px;
	font-weight: 600;
	color: var(--nna-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nna-art-empty button:hover {
	color: var(--nna-orange);
}

/* --- Responsive ----------------------------------------------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
	.nna-art-hero-title {
		font-size: 56px;
	}
	.nna-art-feature-title {
		font-size: 28px;
	}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.nna-art-hero {
		padding: 130px 0 60px;
	}
	.nna-art-hero-title {
		font-size: 49px;
	}
	.nna-art-head-title {
		font-size: 52px;
	}
	.nna-art-feature-title {
		font-size: 26px;
	}
	.nna-art-feature-body {
		padding: 24px 24px 26px;
	}
	.nna-art-mini-media {
		width: 96px;
	}
	.nna-art-mini-body h4 {
		font-size: 15px;
	}
	.nna-art-filter {
		padding: 34px 32px;
	}
	.nna-art-filter-title {
		font-size: 28px;
	}
	.nna-art-filter-form {
		grid-template-columns: repeat(2, 1fr);
	}
	.nna-art-mini-media {
		flex: 0 0 128px;
		width: 128px;
	}
	.nna-art-list-area {
		padding-bottom: 100px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.nna-art-hero {
		padding: 120px 0 55px;
	}
	.nna-art-hero-title {
		font-size: 46px;
	}
	.nna-art-head-title {
		font-size: 44px;
	}
	.nna-art-filter {
		padding: 32px 28px;
	}
	.nna-art-filter-title {
		font-size: 27px;
	}
	.nna-art-filter-form {
		grid-template-columns: repeat(2, 1fr);
	}
	.nna-art-list-area {
		padding-bottom: 85px;
	}
}

@media (max-width: 767px) {
	.nna-art-hero {
		padding: 105px 0 46px;
	}
	.nna-art-hero-bg {
		-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 96px);
		mask-image: linear-gradient(180deg, transparent 0, #000 96px);
	}
	.nna-art-grid {
		background-size: 64px 64px;
	}
	.nna-art-blob {
		filter: blur(70px);
	}
	.nna-art-blob-blue,
	.nna-art-blob-orange {
		width: 320px;
		height: 290px;
	}
	.nna-art-hero-box {
		margin-top: 18px;
	}
	.nna-art-hero-title {
		font-size: 35px;
		line-height: 1.22;
	}
	.nna-art-hero-desc p {
		font-size: 17px;
		margin-bottom: 24px;
	}

	/* Tombol bersihkan turun ke baris sendiri kalau sebaris
	   dengan input — sisa ruang ketiknya jadi terlalu sempit. */
	.nna-art-search {
		flex-wrap: wrap;
		padding: 12px 14px;
		border-radius: 18px;
	}
	.nna-art-search input {
		width: auto;
		height: 34px;
		font-size: 14px;
	}
	.nna-art-search button {
		width: 100%;
		height: 40px;
		margin-top: 4px;
	}
	.nna-art-hint {
		font-size: 12px;
	}

	.nna-art-latest {
		padding-top: 28px;
	}
	.nna-art-head {
		gap: 14px;
		margin-bottom: 22px;
		flex-wrap: wrap;
	}
	.nna-art-head-title {
		font-size: 30px;
	}
	.nna-art-head-link {
		padding: 8px 18px;
		font-size: 13px;
	}
	.nna-art-feature {
		border-radius: 18px;
	}
	.nna-art-feature-body {
		padding: 20px 18px 22px;
	}
	.nna-art-feature-title {
		font-size: 24px;
	}
	.nna-art-feature-text {
		font-size: 16px;
	}

	.nna-art-mini {
		border-radius: 16px;
	}
	.nna-art-mini-media {
		flex: 0 0 106px;
		width: 106px;
	}
	.nna-art-mini-body {
		padding: 14px 15px;
	}
	.nna-art-mini-text {
		margin: 6px 0 10px;
		font-size: 14px;
	}
	.nna-art-mini-body h4 {
		font-size: 14px;
	}

	.nna-art-filter-area {
		padding-top: 46px;
	}
	.nna-art-filter {
		padding: 26px 20px 28px;
		border-radius: 20px;
	}
	.nna-art-filter-text {
		margin-bottom: 20px;
	}
	.nna-art-filter-title {
		font-size: 24px;
	}
	.nna-art-filter-form {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.nna-art-field input,
	.nna-art-field select,
	.nna-art-field-action button {
		height: 44px;
	}
	.nna-art-field-action button {
		width: 100%;
	}
	.nna-art-list-area {
		padding: 36px 0 70px;
	}
	.nna-art-list {
		--bs-gutter-y: 30px;
	}
	.nna-art-pager {
		margin-top: 38px;
		gap: 6px;
	}
	.nna-art-page {
		min-width: 38px;
		height: 38px;
		padding: 0 8px;
		font-size: 14px;
	}
	.nna-art-page-arrow {
		min-width: 38px;
	}
	.nna-art-empty {
		padding: 44px 12px;
	}
	.nna-art-empty h3 {
		font-size: 19px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.nna-art-feature-media img,
	.nna-art-mini,
	.nna-art-mini-media img,
	.nna-art-mini-link,
	.nna-art-head-link,
	.nna-art-page {
		transition: none;
	}

	/* Kartu langsung tampil, tanpa geser masuk */
	.nna-art-list > * {
		animation: none;
	}

	.nna-art-feature:hover .nna-art-feature-media img,
	.nna-art-mini:hover .nna-art-mini-media img {
		transform: none;
	}
}

/* ============================================
   22. HALAMAN TENTANG KAMI

   Seluruh section berlatar putih, ditutup
   .nna-sky yang melarut ke warna footer. Tidak
   ada section yang memakai warna dasar berbeda,
   jadi tidak ada batas yang bisa terlihat —
   pemisah antar bagian hanya jarak dan skala
   tipografi, bukan blok warna.
   ============================================ */

/* --- Hero ----------------------------------------------------- */
.nna-ab-hero {
	position: relative;
	overflow: hidden;
	padding: 150px 0 0;
	background-color: var(--nna-white);
}

.nna-ab-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 130px);
	mask-image: linear-gradient(180deg, transparent 0, #000 130px);
}

.nna-ab-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(var(--nna-blue-rgb), 0.055) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(var(--nna-blue-rgb), 0.055) 1px, transparent 1px);
	background-size: 110px 110px;
	-webkit-mask-image: radial-gradient(ellipse 74% 60% at 50% 26%, #000 0%, transparent 82%);
	mask-image: radial-gradient(ellipse 74% 60% at 50% 26%, #000 0%, transparent 82%);
}

.nna-ab-blob {
	position: absolute;
	display: block;
	border-radius: 50%;
	filter: blur(120px);
}

.nna-ab-blob-blue {
	top: -60px;
	left: 50%;
	width: 820px;
	height: 660px;
	opacity: 0.8;
	transform: translateX(-92%);
	background: radial-gradient(circle at 50% 50%, rgba(var(--nna-blue-rgb), 0.42) 0%, rgba(var(--nna-blue-rgb), 0) 72%);
}

.nna-ab-blob-orange {
	top: -90px;
	left: 50%;
	width: 700px;
	height: 600px;
	opacity: 0.5;
	transform: translateX(-6%);
	background: radial-gradient(circle at 50% 50%, rgba(var(--nna-orange-rgb), 0.34) 0%, rgba(var(--nna-orange-rgb), 0) 70%);
}

.nna-ab-hero > .container {
	position: relative;
	z-index: 1;
}

.nna-ab-hero-row {
	margin-top: 34px;
	margin-bottom: 96px;
}

.nna-ab-hero-title {
	font-size: 82px;
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.035em;
	margin-bottom: 0;
	color: var(--nna-ink);
}

/* Penegasan pada bagian judul — memakai warna, bukan
   ukuran, supaya tinggi barisnya tetap rata. */
.nna-ab-hero-title em {
	font-style: normal;
	color: var(--nna-orange);
}

.nna-ab-hero-side p {
	font-size: 19px;
	line-height: 1.75;
	margin-bottom: 26px;
	color: var(--nna-body);
}

/* ============================================
   22.1 PITA FOTO
   Memakai komponen .nna-sky yang sama dengan
   scene pesawat di beranda, hanya dengan varian
   -light: tepi bawah melarut ke putih (bukan ke
   warna footer), karena di sini section sesudahnya
   masih putih.
   ============================================ */
.nna-sky-light {
	min-height: 620px;
	background-color: var(--nna-white);
}

.nna-sky-light .nna-sky-fade-top {
	height: 30%;
}

.nna-sky-light .nna-sky-fade-bottom {
	height: 38%;
	background: linear-gradient(180deg,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.28) 42%,
			rgba(255, 255, 255, 0.72) 74%,
			#ffffff 100%);
}

.nna-sky-light .nna-sky-body {
	padding-bottom: 56px;
}

.nna-ab-hero-badge {
	display: inline-block;
	padding: 18px 26px;
	border-radius: 18px;
	background-color: rgba(255, 255, 255, 0.9);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 16px 40px rgba(10, 12, 40, 0.18);
}

.nna-ab-hero-badge b {
	display: block;
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--nna-ink);
}

.nna-ab-hero-badge span {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 500;
	color: var(--nna-muted);
}

/* --- Profil --------------------------------------------------- */
.nna-ab-profil {
	position: relative;
	padding: 110px 0 0;
	background-color: var(--nna-white);
}

/* Label bagian dengan titik oranye — penanda ringan
   yang dipakai berulang di halaman ini. */
.nna-ab-label span {
	position: relative;
	display: inline-block;
	padding-left: 18px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nna-muted);
}

.nna-ab-label span::before {
	position: absolute;
	content: "";
	left: 0;
	top: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	transform: translateY(-50%);
	background-color: var(--nna-orange);
}

.nna-ab-statement p {
	font-size: 34px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.02em;
	margin-bottom: 48px;
	color: var(--nna-ink);
}

.nna-ab-statement em {
	font-style: normal;
	color: var(--nna-blue);
}

.nna-ab-point-row {
	--bs-gutter-x: 40px;
	--bs-gutter-y: 28px;
}

.nna-ab-point {
	padding-top: 22px;
	border-top: 1px solid var(--nna-line);
}

.nna-ab-point-no {
	display: block;
	margin-bottom: 10px;
	font-size: 15px;
	font-weight: 600;
	color: var(--nna-orange);
}

.nna-ab-point p {
	margin-bottom: 0;
	font-size: 17px;
	line-height: 1.75;
	color: var(--nna-body);
}

/* --- Foto + kartu angka --------------------------------------- */
.nna-ab-figure {
	position: relative;
	padding: 110px 0 0;
	background-color: var(--nna-white);
}

.nna-ab-figure-wrap {
	position: relative;
}

.nna-ab-figure-media {
	overflow: hidden;
	border-radius: 28px;
	aspect-ratio: 16 / 8;
	background-color: var(--nna-blue-tint);
}

.nna-ab-figure-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 32%;
}

/* Kartu angka melayang di atas foto — pola yang sama
   dengan section berita di beranda, supaya bahasa
   visualnya konsisten antar halaman. */
.nna-ab-fcard {
	position: absolute;
	z-index: 1;
	display: block;
	min-width: 176px;
	padding: 16px 20px 18px;
	border-radius: 16px;
	background-color: rgba(255, 255, 255, 0.94);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 14px 40px rgba(var(--nna-blue-rgb), 0.2);
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.nna-ab-fcard b {
	display: block;
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.025em;
	color: var(--nna-ink);
}

.nna-ab-fcard span {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--nna-muted);
}

.nna-ab-fcard-1 {
	top: 12%;
	right: 6%;
}

.nna-ab-fcard-2 {
	top: 42%;
	right: 16%;
}

.nna-ab-fcard-3 {
	bottom: 10%;
	left: 6%;
}

.nna-ab-figure-wrap:hover .nna-ab-fcard-1 {
	transform: translateY(-6px);
}

.nna-ab-figure-wrap:hover .nna-ab-fcard-2 {
	transform: translateY(-9px);
}

.nna-ab-figure-wrap:hover .nna-ab-fcard-3 {
	transform: translateY(-5px);
}

/* --- Prinsip & arah ------------------------------------------- */
.nna-ab-value {
	position: relative;
	padding: 120px 0 0;
	background-color: var(--nna-white);
}

.nna-ab-eyebrow {
	display: inline-block;
	margin-bottom: 16px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nna-orange);
}

/* Judul melintang di atas grid — dulu menempel sticky di
   kolom kiri, tapi dengan kartu yang tingginya seragam
   pola itu tidak lagi berguna. */
.nna-ab-value-head {
	margin-bottom: 46px;
}

.nna-ab-value-head h2 {
	font-size: 51px;
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.03em;
	margin-bottom: 0;
	color: var(--nna-ink);
}

.nna-ab-value-lead p {
	margin-bottom: 0;
	font-size: 20px;
	line-height: 1.75;
	text-align: left;
	color: var(--nna-body);
}

.nna-ab-value-grid {
	--bs-gutter-x: 24px;
	--bs-gutter-y: 24px;
}

/* --- Kartu ------------------------------------------------------ */
.nna-ab-value-card {
	position: relative;
	height: 100%;
	padding: 38px 32px 36px;
	overflow: hidden;
	border-radius: 24px;
	border: 1px solid var(--nna-line);
	transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Rona berbeda tiap kartu supaya deretannya tidak monoton,
   tapi tetap di dalam dua warna brand. */
.nna-ab-value-card-1 {
	background-color: #f2f3fa;
}

.nna-ab-value-card-2 {
	background-color: var(--nna-orange-tint);
}

.nna-ab-value-card-3 {
	background-color: #eef0f8;
}

.nna-ab-value-card-4 {
	background-color: #fdf3ec;
}

.nna-ab-value-card:hover {
	transform: translateY(-6px);
	border-color: rgba(var(--nna-blue-rgb), 0.2);
	box-shadow: 0 22px 50px rgba(var(--nna-blue-rgb), 0.1);
}

/* Nomor besar samar di sudut — penanda urutan tanpa
   memakan ruang baca. */
.nna-ab-value-no {
	position: absolute;
	top: 18px;
	right: 24px;
	font-size: 58px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	color: rgba(var(--nna-blue-rgb), 0.07);
}

.nna-ab-value-card-2 .nna-ab-value-no,
.nna-ab-value-card-4 .nna-ab-value-no {
	color: rgba(var(--nna-orange-rgb), 0.14);
}

.nna-ab-value-ico {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	margin-bottom: 26px;
	border-radius: 18px;
	color: var(--nna-blue);
	background-color: rgba(255, 255, 255, 0.74);
}

.nna-ab-value-card-2 .nna-ab-value-ico,
.nna-ab-value-card-4 .nna-ab-value-ico {
	color: var(--nna-orange-dark);
}

.nna-ab-value-card h3 {
	position: relative;
	margin-bottom: 12px;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.26;
	letter-spacing: -0.02em;
	color: var(--nna-ink);
}

.nna-ab-value-card p {
	position: relative;
	margin-bottom: 0;
	font-size: 18px;
	line-height: 1.72;
	text-align: left;
	color: var(--nna-body);
}

/* --- Manajemen ------------------------------------------------ */
.nna-ab-team {
	position: relative;
	padding: 120px 0 130px;
	background-color: var(--nna-white);
}

.nna-ab-team-head {
	margin-bottom: 42px;
}

.nna-ab-team-title {
	margin-bottom: 0;
	font-size: 56px;
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.03em;
	color: var(--nna-ink);
}

.nna-ab-team-note p {
	margin-bottom: 0;
	font-size: 17px;
	line-height: 1.78;
	color: var(--nna-body);
}

.nna-ab-team-media {
	overflow: hidden;
	border-radius: 28px;
	background-color: var(--nna-blue-tint);
}

.nna-ab-team-media img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- Responsive ----------------------------------------------- */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
	.nna-ab-hero-title {
		font-size: 68px;
	}
	.nna-ab-statement p {
		font-size: 31px;
	}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.nna-ab-hero {
		padding-top: 130px;
	}
	.nna-ab-hero-title {
		font-size: 56px;
	}
	.nna-ab-statement p {
		font-size: 27px;
		margin-bottom: 38px;
	}
	.nna-ab-profil,
	.nna-ab-figure,
	.nna-ab-value {
		padding-top: 90px;
	}
	.nna-ab-team {
		padding: 90px 0 100px;
	}
	.nna-ab-fcard {
		min-width: 146px;
		padding: 13px 16px 14px;
	}
	.nna-ab-fcard b {
		font-size: 24px;
	}
	.nna-ab-hero-badge {
		left: 26px;
		bottom: 26px;
		padding: 14px 20px;
	}
	.nna-ab-hero-badge b {
		font-size: 28px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.nna-ab-hero {
		padding-top: 120px;
	}
	.nna-ab-hero-title {
		font-size: 51px;
	}
	.nna-ab-hero-side {
		margin-top: 26px;
	}
	.nna-sky-light {
		min-height: 540px;
	}
	.nna-ab-label {
		margin-bottom: 20px;
	}
	.nna-ab-statement p {
		font-size: 26px;
		margin-bottom: 34px;
	}
	.nna-ab-profil,
	.nna-ab-figure,
	.nna-ab-value {
		padding-top: 80px;
	}
	.nna-ab-team {
		padding: 80px 0 85px;
	}

	/* Sticky dilepas — kolomnya sudah bertumpuk,
	   judul yang menempel malah menutupi daftar. */
	.nna-ab-team-note {
		margin-top: 20px;
	}
	.nna-ab-fcard-3 {
		left: 4%;
	}
}

@media (max-width: 767px) {
	.nna-ab-hero {
		padding-top: 105px;
	}
	.nna-ab-hero-bg {
		-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 96px);
		mask-image: linear-gradient(180deg, transparent 0, #000 96px);
	}
	.nna-ab-grid {
		background-size: 64px 64px;
	}
	.nna-ab-blob {
		filter: blur(70px);
	}
	.nna-ab-blob-blue,
	.nna-ab-blob-orange {
		width: 320px;
		height: 290px;
	}
	.nna-ab-hero-row {
		margin-top: 20px;
		margin-bottom: 44px;
	}
	.nna-ab-hero-title {
		font-size: 39px;
		line-height: 1.14;
	}
	.nna-ab-hero-side {
		margin-top: 20px;
	}
	.nna-ab-hero-side p {
		font-size: 15px;
		margin-bottom: 20px;
	}
	.nna-sky-light {
		min-height: 470px;
	}
	.nna-ab-hero-badge {
		left: 16px;
		bottom: 16px;
		padding: 12px 16px;
		border-radius: 14px;
	}
	.nna-ab-hero-badge b {
		font-size: 24px;
	}
	.nna-ab-hero-badge span {
		font-size: 12px;
	}

	.nna-ab-profil,
	.nna-ab-figure,
	.nna-ab-value {
		padding-top: 60px;
	}
	/* Layar kecil: jarak scroll dipendekkan supaya tidak
	   terasa menahan pengguna terlalu lama. */
	.nna-ab-team {
		padding: 60px 0 66px;
	}
	.nna-ab-label {
		margin-bottom: 16px;
	}
	.nna-ab-statement p {
		font-size: 21px;
		line-height: 1.55;
		margin-bottom: 28px;
	}
	.nna-ab-point-row {
		--bs-gutter-y: 22px;
	}
	.nna-ab-point p {
		font-size: 16px;
	}

	.nna-ab-figure-media {
		aspect-ratio: 4 / 3;
		border-radius: 20px;
	}

	/* Tiga kartu melayang terlalu ramai di layar kecil —
	   sisakan satu, dipindah ke sudut bawah. */
	.nna-ab-fcard-1,
	.nna-ab-fcard-2 {
		display: none;
	}
	.nna-ab-fcard-3 {
		left: 14px;
		bottom: 14px;
		min-width: 140px;
		padding: 12px 15px 13px;
		border-radius: 13px;
	}
	.nna-ab-fcard b {
		font-size: 22px;
	}
	.nna-ab-fcard span {
		font-size: 12px;
	}

	.nna-ab-team-title {
		font-size: 32px;
		line-height: 1.22;
	}
	.nna-ab-team-title br {
		display: none;
	}
	.nna-ab-team-note {
		margin-top: 16px;
	}
	.nna-ab-team-media {
		border-radius: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.nna-ab-fcard,

	.nna-sky-light .nna-sky-media img {
		transform: none;
	}

	.nna-ab-figure-wrap:hover .nna-ab-fcard-1,
	.nna-ab-figure-wrap:hover .nna-ab-fcard-2,
	.nna-ab-figure-wrap:hover .nna-ab-fcard-3 {
		transform: none;
	}
}

/* ============================================
   23. SKALA BESAR
   Deskripsi dibuat rata kiri-kanan, dan bidang
   foto dinaikkan mengikuti container 1750 —
   dengan container selebar itu, foto berukuran
   lama terlihat mengambang di ruang kosong.
   ============================================ */

/* --- Foto diperbesar ------------------------------------------- */
.nna-service-media {
	aspect-ratio: 16 / 11;
}

.nna-news-card-media {
	aspect-ratio: 16 / 11;
}

.nna-news-feature-media {
	aspect-ratio: 1 / 1;
}

.nna-gallery-item {
	width: 400px;
}

.nna-gallery-thumb {
	aspect-ratio: 10 / 14;
}

.nna-strip-item {
	width: 400px;
}

.nna-strip-item img {
	height: 290px;
}

.nna-ab-figure-media {
	aspect-ratio: 16 / 7;
}

.nna-ab-team-media,
.nna-art-feature-media {
	aspect-ratio: auto;
}

.nna-sky-light {
	min-height: 760px;
}

.nna-art-mini-media {
	flex: 0 0 190px;
	width: 190px;
}

.nna-partner-plate {
	height: 168px;
}

.nna-map-frame {
	height: 700px;
}

@media (max-width: 1199px) {
	.nna-gallery-item,
	.nna-strip-item {
		width: 300px;
	}
	.nna-strip-item img {
		height: 220px;
	}
	.nna-sky-light {
		min-height: 560px;
	}
	.nna-partner-plate {
		height: 140px;
	}
	.nna-map-frame {
		height: 560px;
	}
	.nna-art-mini-media {
		flex: 0 0 150px;
		width: 150px;
	}
}

@media (max-width: 767px) {
	/* Kolom sempit + justify = celah antar kata melebar
	   berlebihan. Di bawah 768px dikembalikan rata kiri. */
	.nna-about-desc p,
	.nna-service-card-text,
	.nna-news-card-text,
	.nna-sky-text,
	.nna-join-text,
	.nna-hire-text,
	.nna-vacancy-desc,
	.nna-why-card p,
	.nna-ab-point p,
	.nna-strip-item img {
		height: 158px;
	}
	.nna-sky-light {
		min-height: 380px;
	}
	.nna-partner-plate {
		height: 120px;
	}
	.nna-map-frame {
		height: 360px;
	}
	.nna-art-mini-media {
		flex: 0 0 118px;
		width: 118px;
	}
}

/* Di kartu berlatar foto gelap, pil memakai garis putih. */
.nna-service-card .nna-news-link,
.nna-service-wide .nna-news-link {
	color: var(--nna-ink);
	background-color: var(--nna-white);
	border-color: var(--nna-white);
}

.nna-service-card .nna-news-link:hover,
.nna-service-wide .nna-news-link:hover {
	color: var(--nna-white);
	background-color: var(--nna-ink);
	border-color: var(--nna-ink);
}

@media (max-width: 767px) {
	.nna-service-link {
		height: 48px;
		padding: 0 26px;
		font-size: 15px;
	}

	.nna-news-link {
		height: 42px;
		padding: 0 20px;
		font-size: 14px;
	}

	.nna-art-mini-link {
		height: 38px;
		padding: 0 16px;
		font-size: 13px;
	}
}

/* ============================================
   24. PERATAAN PARAGRAF
   Perataan mengikuti bloknya: paragraf di dalam
   blok yang rata tengah ikut rata tengah, sisanya
   rata kiri-kanan. Justify di dalam blok center
   terlihat salah — baris terakhir menggantung ke
   kiri sementara judul di atasnya di tengah.

   Ukurannya sendiri diatur di bagian terakhir
   stylesheet ini (SKALA TEKS ISI), bukan di sini —
   supaya tidak bisa ditimpa bagian di bawahnya.
   ============================================ */
/* Paragraf isi rata kiri-kanan. Pernyataan besar di
   halaman Tentang Kami ikut rata kiri-kanan juga, tapi
   ukurannya dibiarkan besar — itu tipe display, bukan
   isi paragraf biasa. */
.nna-hero-text,
.nna-about-text p,
.nna-service-card-text,
.nna-service-wide-text,
.nna-gallery-intro p,
.nna-news-card-text,
.nna-news-feature-text,
.nna-cta-text,
.nna-banner-text,
.nna-hire-text,
.nna-vacancy-desc,
.nna-vacancy-note p,
.nna-vacancy-warn-text p,
.nna-why-card p,
.nna-partner-text,
.nna-partner-intro p,
.nna-partner-cta-text p,
.nna-contact-text,
.nna-faq-intro p,
.nna-ab-hero-side p,
.nna-ab-point p,
.nna-ab-value-head p,
.nna-ab-value-card p,
.nna-ab-value-lead p,
.nna-ab-statement p {
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* Paragraf yang induknya rata tengah.
   Daftarnya diambil dari blok ber-.text-center di markup
   dan selector ber-text-align:center di stylesheet ini. */
.nna-about-desc p,
.nna-about-bottom-text p,
.nna-sky-text,
.nna-join-text,
.nna-art-hero-desc p,
.nna-art-empty p {
	text-align: center;
}

@media (max-width: 767px) {
	/* Kolom sempit + justify = celah antar kata melebar
	   berlebihan walau sudah ada hyphens. Dikembalikan
	   rata kiri; yang rata tengah tetap tengah. */
	.nna-hero-text,
	.nna-about-text p,
	.nna-service-card-text,
	.nna-service-wide-text,
	.nna-gallery-intro p,
	.nna-news-card-text,
	.nna-news-feature-text,
	.nna-cta-text,
	.nna-banner-text,
	.nna-hire-text,
	.nna-vacancy-desc,
	.nna-vacancy-note p,
	.nna-vacancy-warn-text p,
	.nna-why-card p,
	.nna-partner-text,
	.nna-partner-intro p,
	.nna-partner-cta-text p,
	.nna-contact-text,
	.nna-faq-intro p,
	.nna-ab-hero-side p,
	.nna-ab-point p,
	.nna-ab-value-head p,
	.nna-ab-value-card p,
	.nna-ab-value-lead p,
	.nna-ab-statement p {
		text-align: left;
		-webkit-hyphens: none;
		hyphens: none;
	}
}

/* ============================================
   25. PITA FILTER DI HALAMAN KARIR
   Memakai komponen .nna-art-filter yang sama
   dengan halaman artikel; yang berbeda hanya
   penempatannya dan jumlah bidangnya (3, bukan 4).
   ============================================ */
.nna-vacancy-filter {
	margin-bottom: 44px;
}

.nna-vacancy-filter .nna-art-filter-form {
	grid-template-columns: 1.2fr 1.2fr 1fr auto;
}

.nna-vacancy-empty {
	padding: 54px 24px;
}

@media (max-width: 1199px) {
	.nna-vacancy-filter .nna-art-filter-form {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.nna-vacancy-filter {
		margin-bottom: 30px;
	}
	.nna-vacancy-filter .nna-art-filter-form {
		grid-template-columns: 1fr;
	}
}

/* ============================================
   26. FILOSOFI LOGO
   Kartu gelap bersudut besar di dalam bidang
   putih — jadi tidak butuh jembatan warna ke
   section di atas maupun bawahnya.

   Menggantikan urutan ter-pin sebelumnya:
   tanpa pin, tanpa penguncian scroll, isinya
   dinavigasi lewat dua tombol panah.
   ============================================ */
.nna-phil {
	position: relative;
	padding: 120px 0 0;
	background-color: var(--nna-white);
}

.nna-phil-card {
	position: relative;
	overflow: hidden;
	padding: 60px 62px 62px;
	border-radius: 34px;
	/* Biru gelap yang sama dengan section Kemitraan &
	   Galeri di beranda, bukan hitam. */
	background-color: #16183a;
}

/* Sapuan cahaya samar supaya bidang segelap ini
   tidak terasa rata. */
.nna-phil-card::before {
	position: absolute;
	content: "";
	top: -30%;
	left: 22%;
	width: 780px;
	height: 620px;
	pointer-events: none;
	border-radius: 50%;
	filter: blur(120px);
	background:
		radial-gradient(circle at 40% 50%, rgba(var(--nna-blue-soft-rgb), 0.34) 0%, rgba(var(--nna-blue-rgb), 0) 70%),
		radial-gradient(circle at 78% 46%, rgba(var(--nna-orange-rgb), 0.16) 0%, rgba(var(--nna-orange-rgb), 0) 70%);
}

.nna-phil-card > .row {
	position: relative;
	z-index: 1;
	--bs-gutter-x: 60px;
}

/* --- Kolom kiri ------------------------------------------------ */
.nna-phil-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 22px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nna-orange);
}

.nna-phil-eyebrow i {
	display: inline-flex;
	line-height: 0;
}

.nna-phil-title {
	font-size: 58px;
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.03em;
	margin-bottom: 22px;
	color: var(--nna-white);
}

.nna-phil-lead p {
	max-width: 480px;
	margin-bottom: 34px;
	font-size: 20px;
	line-height: 1.75;
	text-align: left;
	color: rgba(255, 255, 255, 0.62);
}

/* --- Bidang logo ----------------------------------------------- */
.nna-phil-media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 11;
	margin-bottom: 16px;
	border-radius: 20px;
	background-color: var(--nna-white);
}

/* Kelima tahap ditumpuk, berputar terus lewat JS.
   Tanpa absolute + opacity 0 semuanya tampil sekaligus.

   Dua tahap selalu saling menimpa saat bertukar, jadi
   bidangnya tidak pernah kosong di tengah pergantian —
   itu yang bikin perpindahannya terbaca sebagai satu
   bentuk yang tumbuh, bukan gambar yang diganti. */
.nna-phil-frame {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	padding: 34px 34px 46px;
	object-fit: contain;
	opacity: 0;
	transform: scale(1.035);
	transition: opacity 0.9s ease, transform 1.2s ease;
	will-change: opacity;
}

.nna-phil-frame.is-on {
	opacity: 1;
	transform: scale(1);
}

/* --- Penanda tahap --------------------------------------------- */
.nna-phil-dots {
	position: absolute;
	right: 24px;
	bottom: 24px;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 7px;
}

.nna-phil-dots i {
	display: block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: rgba(46, 49, 146, 0.22);
	transition: width 0.45s ease, background-color 0.45s ease;
}

.nna-phil-dots i.is-on {
	width: 20px;
	border-radius: 3px;
	background-color: var(--nna-orange);
}

.nna-phil-cap {
	position: absolute;
	left: 24px;
	bottom: 22px;
	z-index: 1;
	display: block;
}

.nna-phil-cap b {
	display: block;
	margin-bottom: 3px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--nna-orange);
}

.nna-phil-cap span {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: var(--nna-body);
}

/* --- Pita merek ------------------------------------------------ */
.nna-phil-brand {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 24px;
	border-radius: 18px;
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.nna-phil-brand-name {
	font-size: 20px;
	font-weight: 600;
	color: var(--nna-white);
}

.nna-phil-brand-name sup {
	font-size: 11px;
	top: -0.7em;
}

.nna-phil-brand-mark img {
	display: block;
	width: 46px;
	height: auto;
	opacity: 0.85;
}

/* --- Kolom kanan ----------------------------------------------- */
.nna-phil-right {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.nna-phil-top {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 28px;
}

.nna-phil-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 54px;
	padding: 0 30px;
	border-radius: 100px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	color: var(--nna-white);
	border: 1px solid rgba(255, 255, 255, 0.28);
	transition: color 0.32s ease, background-color 0.32s ease, border-color 0.32s ease;
}

.nna-phil-cta:hover {
	color: var(--nna-ink);
	background-color: var(--nna-white);
	border-color: var(--nna-white);
}

/* Jendela setinggi dua butir; sisanya digeser masuk
   lewat tombol panah, bukan lewat scroll halaman. */
.nna-phil-viewport {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
	height: 420px;
}

.nna-phil-track {
	transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}

.nna-phil-item {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	height: 210px;
	padding: 26px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.nna-phil-item:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.nna-phil-step {
	flex: 0 0 200px;
	padding-top: 6px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.45);
}

.nna-phil-body h3 {
	margin-bottom: 10px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.24;
	letter-spacing: -0.02em;
	color: var(--nna-white);
}

.nna-phil-body p {
	margin-bottom: 0;
	font-size: 18px;
	line-height: 1.72;
	text-align: left;
	color: rgba(255, 255, 255, 0.6);
}

/* --- Tombol panah ---------------------------------------------- */
.nna-phil-nav {
	position: absolute;
	right: -34px;
	top: 50%;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transform: translateY(-50%);
}

.nna-phil-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.75);
	background-color: rgba(255, 255, 255, 0.1);
	transition: color 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;
}

.nna-phil-arrow:hover:not(:disabled) {
	color: var(--nna-white);
	background-color: var(--nna-orange);
}

.nna-phil-arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

/* --- Responsive ------------------------------------------------ */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
	.nna-phil-card {
		padding: 50px 46px 52px;
	}
	.nna-phil-title {
		font-size: 48px;
	}
	.nna-phil-step {
		flex-basis: 160px;
	}
	.nna-phil-body h3 {
		font-size: 25px;
	}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.nna-phil {
		padding-top: 90px;
	}
	.nna-phil-card {
		padding: 42px 34px 44px;
		border-radius: 28px;
	}
	.nna-phil-card > .row {
		--bs-gutter-x: 34px;
	}
	.nna-phil-title {
		font-size: 38px;
	}
	.nna-phil-lead p {
		font-size: 18px;
		margin-bottom: 26px;
	}
	.nna-phil-viewport {
		height: 380px;
	}
	.nna-phil-item {
		height: 190px;
		gap: 24px;
	}
	.nna-phil-step {
		flex-basis: 130px;
		font-size: 15px;
	}
	.nna-phil-body h3 {
		font-size: 22px;
	}
	.nna-phil-body p {
		font-size: 16px;
	}
	.nna-phil-nav {
		right: -20px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.nna-phil {
		padding-top: 80px;
	}
	.nna-phil-card {
		padding: 40px 32px 44px;
		border-radius: 26px;
	}
	.nna-phil-title {
		font-size: 36px;
	}
	.nna-phil-title br {
		display: none;
	}
	.nna-phil-right {
		margin-top: 40px;
	}
	.nna-phil-top {
		justify-content: flex-start;
	}
	.nna-phil-viewport {
		height: 380px;
	}
	.nna-phil-item {
		height: 190px;
	}
	.nna-phil-step {
		flex-basis: 150px;
	}
	.nna-phil-nav {
		position: static;
		flex-direction: row;
		margin-top: 22px;
		transform: none;
	}
}

@media (max-width: 767px) {
	.nna-phil {
		padding-top: 60px;
	}
	.nna-phil-card {
		padding: 28px 20px 30px;
		border-radius: 22px;
	}
	.nna-phil-card > .row {
		--bs-gutter-x: 20px;
	}
	.nna-phil-eyebrow {
		font-size: 12px;
		margin-bottom: 16px;
	}
	.nna-phil-title {
		font-size: 30px;
	}
	.nna-phil-title br {
		display: none;
	}
	.nna-phil-lead p {
		font-size: 16px;
		margin-bottom: 24px;
	}
	.nna-phil-frame {
		padding: 20px 20px 34px;
	}
	.nna-phil-cap {
		left: 16px;
		bottom: 14px;
	}
	.nna-phil-dots {
		right: 16px;
		bottom: 16px;
	}
	.nna-phil-cap span {
		font-size: 13px;
	}
	.nna-phil-brand {
		padding: 16px 18px;
	}
	.nna-phil-brand-name {
		font-size: 17px;
	}
	.nna-phil-brand-mark img {
		width: 38px;
	}
	.nna-phil-right {
		margin-top: 32px;
	}
	.nna-phil-top {
		justify-content: flex-start;
		margin-bottom: 20px;
	}
	.nna-phil-cta {
		height: 48px;
		padding: 0 24px;
		font-size: 15px;
	}

	/* Layar sempit: satu butir per tampilan, dan label
	   pindah ke atas judulnya. */
	.nna-phil-viewport {
		height: 260px;
	}
	.nna-phil-item {
		flex-direction: column;
		gap: 10px;
		height: 260px;
		padding: 20px 0;
	}
	.nna-phil-step {
		flex: 0 0 auto;
		padding-top: 0;
		font-size: 13px;
	}
	.nna-phil-body h3 {
		font-size: 21px;
	}
	.nna-phil-body p {
		font-size: 15px;
	}
	.nna-phil-nav {
		position: static;
		flex-direction: row;
		margin-top: 18px;
		transform: none;
	}
	.nna-phil-arrow {
		width: 42px;
		height: 42px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.nna-phil-track,
	.nna-phil-arrow,
	.nna-phil-cta {
		transition: none;
	}

	/* Pergantian tahap logo tetap dijalankan: gerakannya
	   di tempat, tidak ada perpindahan posisi yang bikin
	   pusing. Yang dimatikan cuma zoom halusnya. */
	.nna-phil-frame {
		transform: none;
		transition: opacity 0.9s ease;
	}

	.nna-phil-frame.is-on {
		transform: none;
	}
}

/* ============================================
   27. TESTIMONI
   Kartu gelap seperti section Filosofi Logo,
   jadi keduanya terbaca satu bahasa.

   Kartu tengah menonjol, kartu sisi diredupkan —
   itu yang bikin fokusnya jelas walau deretannya
   terus berjalan.
   ============================================ */
.nna-testi {
	position: relative;
	padding: 120px 0 0;
	background-color: var(--nna-white);
}

.nna-testi-card {
	position: relative;
	overflow: hidden;
	padding: 66px 0 62px;
	border-radius: 34px;
	background-color: #16183a;
}

.nna-testi-card::before {
	position: absolute;
	content: "";
	top: -34%;
	left: 50%;
	width: 900px;
	height: 660px;
	pointer-events: none;
	border-radius: 50%;
	transform: translateX(-50%);
	filter: blur(120px);
	background:
		radial-gradient(circle at 38% 50%, rgba(var(--nna-blue-soft-rgb), 0.32) 0%, rgba(var(--nna-blue-rgb), 0) 70%),
		radial-gradient(circle at 76% 46%, rgba(var(--nna-orange-rgb), 0.16) 0%, rgba(var(--nna-orange-rgb), 0) 70%);
}

/* --- Judul ----------------------------------------------------- */
.nna-testi-head {
	position: relative;
	z-index: 1;
	max-width: 760px;
	margin: 0 auto 44px;
	padding: 0 24px;
	text-align: center;
}

.nna-testi-eyebrow {
	display: inline-block;
	margin-bottom: 22px;
	padding: 9px 20px;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
}

.nna-testi-title {
	font-size: 54px;
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.03em;
	margin-bottom: 18px;
	color: var(--nna-white);
}

.nna-testi-lead p {
	margin-bottom: 0;
	font-size: 20px;
	line-height: 1.7;
	text-align: center;
	color: rgba(255, 255, 255, 0.58);
}

/* --- Deretan foto ---------------------------------------------- */
.nna-testi-avatars {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-bottom: 44px;
}

.nna-testi-avatar {
	position: relative;
	width: 64px;
	height: 64px;
	padding: 0;
	overflow: hidden;
	border-radius: 50%;
	border: 2px solid transparent;
	background-color: rgba(255, 255, 255, 0.08);
	opacity: 0.45;
	transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease;
}

/* Yang sedang tampil dibesarkan — penanda posisi tanpa
   perlu titik atau nomor tambahan. */
.nna-testi-avatar.is-on {
	opacity: 1;
	transform: scale(1.28);
	border-color: var(--nna-orange);
}

.nna-testi-avatar:hover {
	opacity: 0.85;
}

.nna-testi-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Slot yang belum ada fotonya: inisial, bukan foto orang lain */
.nna-testi-avatar.is-empty span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 20px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.4);
	background-color: rgba(255, 255, 255, 0.06);
}

/* --- Deretan kartu --------------------------------------------- */
.nna-testi-slider {
	position: relative;
	z-index: 1;
	overflow: hidden;
	padding: 10px 0 6px;
	/* Tepi kiri-kanan dilarutkan supaya kartu tidak
	   terpotong mendadak di batas kartu gelap. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

.nna-testi-item {
	height: 100%;
	padding: 30px 32px 32px;
	border-radius: 22px;
	background-color: rgba(255, 255, 255, 0.045);
	border: 1px solid rgba(255, 255, 255, 0.1);
	opacity: 0.42;
	transition: opacity 0.5s ease, border-color 0.5s ease, background-color 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	transform: scale(0.94);
}

.swiper-slide-active .nna-testi-item {
	opacity: 1;
	transform: scale(1);
	border-color: rgba(var(--nna-orange-rgb), 0.55);
	background-color: rgba(255, 255, 255, 0.07);
}

.nna-testi-kind {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 24px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	color: rgba(255, 255, 255, 0.5);
}

.nna-testi-kind i {
	display: inline-flex;
	line-height: 0;
	color: var(--nna-orange);
}

.nna-testi-person {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 22px;
}

.nna-testi-photo {
	display: block;
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	overflow: hidden;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.08);
}

.nna-testi-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nna-testi-photo-blank {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.4);
}

.nna-testi-who b {
	display: block;
	margin-bottom: 3px;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--nna-white);
}

.nna-testi-who span {
	display: block;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.52);
}

.nna-testi-quote {
	margin: 0 0 24px;
	font-size: 19px;
	line-height: 1.72;
	text-align: left;
	color: rgba(255, 255, 255, 0.86);
}

/* Slot yang menunggu isi — dibedakan supaya tidak
   pernah tertukar dengan testimoni sungguhan. */
.nna-testi-item.is-blank .nna-testi-quote {
	font-style: italic;
	color: rgba(255, 255, 255, 0.4);
}

.nna-testi-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.nna-testi-tags span {
	padding: 7px 14px;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	color: rgba(255, 255, 255, 0.72);
	background-color: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

/* --- Tombol panah ---------------------------------------------- */
.nna-testi-nav {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 40px;
}

.nna-testi-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 14px;
	color: rgba(255, 255, 255, 0.8);
	background-color: rgba(255, 255, 255, 0.09);
	transition: color 0.3s ease, background-color 0.3s ease;
}

.nna-testi-arrow:hover {
	color: var(--nna-white);
	background-color: var(--nna-orange);
}

/* --- Responsive ------------------------------------------------ */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
	.nna-testi-title {
		font-size: 46px;
	}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.nna-testi {
		padding-top: 90px;
	}
	.nna-testi-card {
		padding: 54px 0 50px;
		border-radius: 28px;
	}
	.nna-testi-title {
		font-size: 38px;
	}
	.nna-testi-lead p {
		font-size: 18px;
	}
	.nna-testi-avatar {
		width: 56px;
		height: 56px;
	}
	.nna-testi-quote {
		font-size: 17px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.nna-testi {
		padding-top: 80px;
	}
	.nna-testi-card {
		padding: 46px 0 46px;
		border-radius: 26px;
	}
	.nna-testi-title {
		font-size: 34px;
	}
	.nna-testi-title br {
		display: none;
	}
	.nna-testi-avatar {
		width: 52px;
		height: 52px;
	}
	.nna-testi-quote {
		font-size: 17px;
	}
}

@media (max-width: 767px) {
	.nna-testi {
		padding-top: 60px;
	}
	.nna-testi-card {
		padding: 34px 0 34px;
		border-radius: 22px;
	}
	.nna-testi-head {
		margin-bottom: 30px;
		padding: 0 18px;
	}
	.nna-testi-eyebrow {
		font-size: 12px;
		margin-bottom: 16px;
		padding: 8px 16px;
	}
	.nna-testi-title {
		font-size: 27px;
	}
	.nna-testi-title br {
		display: none;
	}
	.nna-testi-lead p {
		font-size: 16px;
	}
	.nna-testi-avatars {
		gap: 10px;
		margin-bottom: 30px;
	}
	.nna-testi-avatar {
		width: 44px;
		height: 44px;
	}
	.nna-testi-avatar.is-on {
		transform: scale(1.18);
	}
	.nna-testi-avatar.is-empty span {
		font-size: 15px;
	}
	/* Layar sempit: kartu sisi tidak sempat terlihat,
	   jadi topeng tepinya dipersempit. */
	.nna-testi-slider {
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
	}
	.nna-testi-item {
		padding: 24px 20px 26px;
		border-radius: 18px;
	}
	.nna-testi-kind {
		margin-bottom: 18px;
		font-size: 13px;
	}
	.nna-testi-photo {
		width: 46px;
		height: 46px;
	}
	.nna-testi-who b {
		font-size: 17px;
	}
	.nna-testi-who span {
		font-size: 14px;
	}
	.nna-testi-quote {
		font-size: 16px;
		margin-bottom: 20px;
	}
	.nna-testi-nav {
		margin-top: 28px;
	}
	.nna-testi-arrow {
		width: 42px;
		height: 42px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.nna-testi-avatar,
	.nna-testi-item,
	.nna-testi-arrow {
		transition: none;
	}
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
	.nna-ab-value-head h2 {
		font-size: 44px;
	}
	.nna-ab-value-card {
		padding: 32px 26px 30px;
	}
	.nna-ab-value-card h3 {
		font-size: 23px;
	}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.nna-ab-value-head h2 {
		font-size: 38px;
	}
	.nna-ab-value-card {
		padding: 30px 26px 30px;
	}
	.nna-ab-value-card h3 {
		font-size: 22px;
	}
	.nna-ab-value-card p {
		font-size: 17px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.nna-ab-value-head {
		margin-bottom: 34px;
	}
	.nna-ab-value-head h2 {
		font-size: 34px;
	}
	.nna-ab-value-head h2 br {
		display: none;
	}
	.nna-ab-value-lead {
		margin-top: 20px;
	}
	.nna-ab-value-card h3 {
		font-size: 21px;
	}
	.nna-ab-value-card p {
		font-size: 17px;
	}
}

@media (max-width: 767px) {
	.nna-ab-value-head {
		margin-bottom: 26px;
	}
	.nna-ab-value-head h2 {
		font-size: 28px;
		line-height: 1.22;
	}
	.nna-ab-value-head h2 br {
		display: none;
	}
	.nna-ab-value-lead {
		margin-top: 16px;
	}
	.nna-ab-value-lead p {
		font-size: 16px;
	}
	.nna-ab-value-grid {
		--bs-gutter-y: 16px;
	}
	.nna-ab-value-card {
		padding: 26px 22px 28px;
		border-radius: 20px;
	}
	.nna-ab-value-no {
		font-size: 46px;
		top: 14px;
		right: 18px;
	}
	.nna-ab-value-ico {
		width: 54px;
		height: 54px;
		margin-bottom: 20px;
	}
	.nna-ab-value-card h3 {
		font-size: 20px;
	}
	.nna-ab-value-card p {
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nna-ab-value-card {
		transition: none;
	}

	.nna-ab-value-card:hover {
		transform: none;
	}
}

/* ============================================
   28. PANGGUNG MITRA (mitra.php)
   Section setinggi (jumlah mitra x 100vh) berisi
   panggung position:sticky. Sticky, bukan fixed:
   begitu jatah tingginya habis, panggung terlepas
   sendiri dan halaman lanjut ke CTA + footer tanpa
   perlu satu baris JS pun.

   JS-nya hanya menambah kunci "satu roda = satu
   mitra". Kalau JS mati, halaman ini tetap utuh
   dan tetap bisa digulung.
   ============================================ */
.nna-mtr-stage {
	position: relative;
	height: calc(var(--mtr-count, 4) * 100vh);
	background-color: var(--nna-blue-deep);
}

/* Sasaran tautan #testimoni dari menu utama. */
.nna-mtr-anchor {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
}

/* Sticky di sini hanya jaring pengaman untuk keadaan tanpa
   JS — waktu itu ScrollSmoother juga tidak jalan, tidak ada
   transform, dan sticky-nya sah. Begitu JS hidup, pemakuan
   diambil alih ScrollTrigger (lihat mitra-stage.js) dan
   sticky justru harus dilepas supaya tidak bentrok. */
.nna-mtr-viewport {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
}

.nna-mtr-stage.is-pinned .nna-mtr-viewport {
	position: relative;
	top: auto;
}

/* --- Slide ------------------------------------------------------ */
.nna-mtr-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.8s ease, visibility 0.8s;
}

.nna-mtr-slide.is-on {
	opacity: 1;
	visibility: visible;
}

.nna-mtr-slide > .container {
	position: relative;
	z-index: 2;
	width: 100%;
}

/* --- Video + gradasi -------------------------------------------- */
.nna-mtr-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background-color: var(--nna-blue-deep);
}

/* Sedikit membesar saat slide masuk lalu kembali normal —
   memberi kesan kamera bergerak tanpa menggeser apa pun. */
.nna-mtr-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.07);
	transition: transform 2.4s ease-out;
}

.nna-mtr-slide.is-on .nna-mtr-video {
	transform: scale(1);
}

/* Warna khas tiap mitra. Sementara keempat slide memakai
   rekaman yang sama, lapisan inilah yang membedakannya. */
.nna-mtr-grade {
	position: absolute;
	inset: 0;
}

.nna-mtr-grade-1 {
	background: linear-gradient(115deg, rgba(var(--nna-blue-rgb), 0.72) 0%, rgba(23, 26, 77, 0.3) 70%);
}

.nna-mtr-grade-2 {
	background: linear-gradient(115deg, rgba(var(--nna-orange-rgb), 0.5) 0%, rgba(23, 26, 77, 0.34) 70%);
}

.nna-mtr-grade-3 {
	background: linear-gradient(115deg, rgba(var(--nna-blue-soft-rgb), 0.6) 0%, rgba(23, 26, 77, 0.3) 70%);
}

.nna-mtr-grade-4 {
	background: linear-gradient(115deg, rgba(213, 92, 20, 0.52) 0%, rgba(23, 26, 77, 0.36) 70%);
}

/* Peredup baca: sisi kanan sengaja dipekatkan lagi karena
   di situ panel kacanya berdiri. */
.nna-mtr-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(15, 16, 40, 0.82) 0%, rgba(15, 16, 40, 0.34) 46%, rgba(15, 16, 40, 0.66) 100%),
		linear-gradient(0deg, rgba(15, 16, 40, 0.6) 0%, rgba(15, 16, 40, 0) 42%);
}

/* --- Panel kaca ------------------------------------------------- */
.nna-mtr-panel {
	position: relative;
	padding: clamp(26px, 2.3vw, 40px);
	border-radius: 26px;
	background-color: rgba(20, 23, 66, 0.4);
	-webkit-backdrop-filter: blur(26px) saturate(135%);
	backdrop-filter: blur(26px) saturate(135%);
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: 0 34px 90px rgba(8, 9, 30, 0.42);
	color: var(--nna-white);
	/* Tanpa ini isi panel bisa menumbuk tepi di layar pendek.
	   Sengaja hidden, bukan auto: penggulung di dalam panel akan
	   memakan event roda yang dibutuhkan panggung. */
	overflow: hidden;
}

/* Isi panel naik bergiliran saat slide-nya aktif. */
.nna-mtr-panel > * {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.nna-mtr-slide.is-on .nna-mtr-panel > * {
	opacity: 1;
	transform: none;
}

.nna-mtr-slide.is-on .nna-mtr-panel > *:nth-child(1) { transition-delay: 0.12s; }
.nna-mtr-slide.is-on .nna-mtr-panel > *:nth-child(2) { transition-delay: 0.19s; }
.nna-mtr-slide.is-on .nna-mtr-panel > *:nth-child(3) { transition-delay: 0.26s; }
.nna-mtr-slide.is-on .nna-mtr-panel > *:nth-child(4) { transition-delay: 0.33s; }
.nna-mtr-slide.is-on .nna-mtr-panel > *:nth-child(5) { transition-delay: 0.40s; }
.nna-mtr-slide.is-on .nna-mtr-panel > *:nth-child(6) { transition-delay: 0.47s; }
.nna-mtr-slide.is-on .nna-mtr-panel > *:nth-child(7) { transition-delay: 0.54s; }
.nna-mtr-slide.is-on .nna-mtr-panel > *:nth-child(8) { transition-delay: 0.61s; }

.nna-mtr-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: clamp(16px, 1.6vw, 24px);
}

.nna-mtr-eyebrow {
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nna-white);
	background-color: rgba(var(--nna-orange-rgb), 0.9);
}

.nna-mtr-count {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.6);
}

.nna-mtr-count b {
	font-size: 22px;
	font-weight: 700;
	color: var(--nna-white);
}

.nna-mtr-count i {
	margin: 0 2px;
	font-style: normal;
	color: rgba(255, 255, 255, 0.4);
}

/* Logo mitra berlatar putih — logonya berwarna dan tidak
   akan terbaca di atas panel gelap. */
.nna-mtr-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: clamp(56px, 5vw, 72px);
	padding: 0 20px;
	margin-bottom: clamp(14px, 1.4vw, 20px);
	border-radius: 14px;
	background-color: var(--nna-white);
}

.nna-mtr-logo img {
	max-height: clamp(30px, 3vw, 42px);
	width: auto;
	object-fit: contain;
}

.nna-mtr-since {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--nna-orange-soft);
}

.nna-mtr-name {
	margin-bottom: clamp(12px, 1.2vw, 18px);
	font-size: clamp(26px, 2.5vw, 40px);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.02em;
	color: var(--nna-white);
}

.nna-mtr-desc {
	margin-bottom: clamp(14px, 1.4vw, 20px);
	font-size: 20px;
	line-height: 1.62;
	color: rgba(255, 255, 255, 0.76);
}

/* --- Merek yang didistribusikan --------------------------------- */
.nna-mtr-brands {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 clamp(18px, 1.8vw, 26px);
	padding: 0;
	list-style: none;
}

.nna-mtr-brands li {
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.86);
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
}

/* --- Testimoni -------------------------------------------------- */
.nna-mtr-quote {
	position: relative;
	margin: 0 0 clamp(20px, 2vw, 30px);
	padding: clamp(18px, 1.8vw, 24px) clamp(18px, 1.8vw, 26px);
	border-radius: 18px;
	border-left: 3px solid var(--nna-orange);
	background-color: rgba(255, 255, 255, 0.06);
}

.nna-mtr-quote blockquote {
	margin: 0;
}

.nna-mtr-quote blockquote p {
	margin-bottom: 14px;
	font-size: 20px;
	font-weight: 500;
	font-style: italic;
	line-height: 1.6;
	color: var(--nna-white);
}

.nna-mtr-quote figcaption {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.nna-mtr-quote-role {
	font-size: 15px;
	font-weight: 600;
	color: var(--nna-white);
}

.nna-mtr-quote-org {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.58);
}

/* --- Kaki panel : logo NNA + ajakan gulung ---------------------- */
.nna-mtr-panel-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding-top: clamp(16px, 1.6vw, 22px);
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.nna-mtr-mark img {
	height: clamp(26px, 2.4vw, 34px);
	width: auto;
	object-fit: contain;
}

.nna-mtr-scroll {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 0;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.72);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: color 0.3s ease;
}

.nna-mtr-scroll:hover {
	color: var(--nna-white);
}

.nna-mtr-mouse {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: 22px;
	height: 34px;
	border-radius: 12px;
	border: 1.6px solid rgba(255, 255, 255, 0.55);
	transition: border-color 0.3s ease;
}

.nna-mtr-scroll:hover .nna-mtr-mouse {
	border-color: var(--nna-white);
}

.nna-mtr-mouse i {
	position: absolute;
	top: 7px;
	left: 50%;
	width: 3px;
	height: 6px;
	margin-left: -1.5px;
	border-radius: 2px;
	background-color: var(--nna-orange);
	animation: nnaMtrWheel 1.9s ease-in-out infinite;
}

@keyframes nnaMtrWheel {
	0%   { transform: translateY(0); opacity: 0; }
	22%  { opacity: 1; }
	72%  { opacity: 1; }
	100% { transform: translateY(11px); opacity: 0; }
}

/* Di mitra terakhir arahnya bukan ke slide lain lagi,
   melainkan keluar panggung — panahnya dibuat mendatar. */
.nna-mtr-scroll.is-end .nna-mtr-mouse {
	border-color: rgba(var(--nna-orange-rgb), 0.75);
}

/* --- Kontrol ---------------------------------------------------- */
.nna-mtr-rail {
	position: absolute;
	left: clamp(24px, 5vw, 85px);
	bottom: clamp(30px, 5vh, 58px);
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 16px;
}

.nna-mtr-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	padding: 0;
	border-radius: 50%;
	color: var(--nna-white);
	background-color: rgba(255, 255, 255, 0.1);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}

.nna-mtr-arrow:hover:not(:disabled) {
	background-color: var(--nna-orange);
	border-color: var(--nna-orange);
}

.nna-mtr-arrow:disabled {
	opacity: 0.32;
	cursor: default;
}

.nna-mtr-dots {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nna-mtr-dots button {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 4px;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.55);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.35s ease;
}

.nna-mtr-dots button i {
	display: block;
	width: 22px;
	height: 3px;
	border-radius: 2px;
	background-color: rgba(255, 255, 255, 0.32);
	transition: width 0.45s ease, background-color 0.45s ease;
}

/* Nama mitra hanya muncul di titik yang sedang aktif —
   kalau semua ditampilkan, railnya jadi sepanjang layar. */
.nna-mtr-dots button span {
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-width 0.5s ease, opacity 0.4s ease;
}

.nna-mtr-dots button:hover {
	color: rgba(255, 255, 255, 0.85);
}

.nna-mtr-dots li.is-on button {
	color: var(--nna-white);
}

.nna-mtr-dots li.is-on button i {
	width: 40px;
	background-color: var(--nna-orange);
}

.nna-mtr-dots li.is-on button span {
	max-width: 220px;
	opacity: 1;
}

.nna-mtr-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	height: 3px;
	background-color: rgba(255, 255, 255, 0.14);
}

.nna-mtr-progress span {
	display: block;
	width: 100%;
	height: 100%;
	transform: scaleX(0);
	transform-origin: left center;
	background-color: var(--nna-orange);
	transition: transform 0.35s ease;
}

/* --- CTA penutup ------------------------------------------------ */
.nna-mtr-cta {
	padding: clamp(70px, 9vw, 130px) 0;
	background-color: var(--nna-white);
}

.nna-mtr-cta-card {
	padding: clamp(30px, 4vw, 62px);
	border-radius: 28px;
	background:
		radial-gradient(120% 140% at 100% 0%, rgba(var(--nna-orange-rgb), 0.24) 0%, rgba(var(--nna-orange-rgb), 0) 55%),
		var(--nna-blue-deep);
}

.nna-mtr-cta-eyebrow {
	display: inline-block;
	margin-bottom: 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--nna-orange-soft);
}

.nna-mtr-cta-text h2 {
	margin-bottom: 16px;
	font-size: clamp(28px, 3vw, 46px);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.02em;
	color: var(--nna-white);
}

.nna-mtr-cta-text p {
	margin-bottom: 0;
	font-size: 20px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.7);
}

.nna-mtr-cta-action {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.nna-mtr-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 58px;
	padding: 0 32px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 600;
	color: var(--nna-white);
	background-color: var(--nna-orange);
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.nna-mtr-cta-btn:hover {
	color: var(--nna-white);
	background-color: var(--nna-orange-dark);
	transform: translateY(-2px);
}

.nna-mtr-cta-btn i {
	display: inline-flex;
	line-height: 0;
}

.nna-mtr-cta-alt {
	font-size: 15px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.66);
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	transition: color 0.3s ease, border-color 0.3s ease;
}

.nna-mtr-cta-alt:hover {
	color: var(--nna-white);
	border-color: var(--nna-white);
}

/* --- Layar pendek ----------------------------------------------- */
/* Panel isinya banyak; di laptop 768px ke bawah semuanya
   perlu dirapatkan supaya tidak terpotong. */
@media (min-width: 992px) and (max-height: 820px) {
	.nna-mtr-panel {
		padding: 22px 26px;
	}
	.nna-mtr-logo {
		height: 50px;
		margin-bottom: 12px;
	}
	.nna-mtr-name {
		font-size: 26px;
		margin-bottom: 10px;
	}
	.nna-mtr-desc {
		font-size: 17px;
		line-height: 1.5;
		margin-bottom: 12px;
	}
	.nna-mtr-quote {
		padding: 14px 18px;
		margin-bottom: 16px;
	}
	.nna-mtr-quote blockquote p {
		font-size: 17px;
		line-height: 1.5;
		margin-bottom: 10px;
	}
	.nna-mtr-brands {
		margin-bottom: 14px;
	}
}

/* --- Panggung dibongkar ----------------------------------------- */
/* Dipasang JS kalau GSAP tidak tersedia. Tanpa GSAP panggungnya
   tidak bisa dipaku sama sekali, dan panggung yang tidak terpaku
   cuma menyisakan tiga layar kosong. Lebih baik jadi tumpukan
   biasa: semua mitra tetap terbaca. */
.nna-mtr-stage.is-flat {
	height: auto;
}

.nna-mtr-stage.is-flat .nna-mtr-viewport {
	position: relative;
	top: auto;
	height: auto;
	overflow: visible;
}

.nna-mtr-stage.is-flat .nna-mtr-slide {
	position: relative;
	inset: auto;
	display: block;
	padding: 120px 0 70px;
	opacity: 1;
	visibility: visible;
}

.nna-mtr-stage.is-flat .nna-mtr-video {
	transform: none;
}

.nna-mtr-stage.is-flat .nna-mtr-panel > * {
	opacity: 1;
	transform: none;
}

.nna-mtr-stage.is-flat .nna-mtr-rail,
.nna-mtr-stage.is-flat .nna-mtr-progress,
.nna-mtr-stage.is-flat .nna-mtr-scroll {
	display: none;
}

/* --- Tablet & ponsel : panggung dibongkar ----------------------- */
/* Mengunci gulungan di layar sentuh membuat halaman terasa
   macet. Di bawah 992px tiap mitra jadi section biasa yang
   digulung normal dari atas ke bawah. */
@media (max-width: 991px) {
	.nna-mtr-stage {
		height: auto;
	}
	.nna-mtr-viewport {
		position: relative;
		top: auto;
		height: auto;
		overflow: visible;
	}
	.nna-mtr-slide {
		position: relative;
		inset: auto;
		display: block;
		padding: 120px 0 70px;
		opacity: 1;
		visibility: visible;
	}
	.nna-mtr-video {
		transform: none;
	}
	.nna-mtr-panel > * {
		opacity: 1;
		transform: none;
	}
	/* Kontrol dan ajakan gulung tidak relevan lagi begitu
	   slide-nya jadi tumpukan biasa. */
	.nna-mtr-rail,
	.nna-mtr-progress,
	.nna-mtr-scroll {
		display: none;
	}
	.nna-mtr-panel-foot {
		justify-content: flex-start;
	}
	.nna-mtr-cta-action {
		margin-top: 30px;
	}
}

@media (max-width: 767px) {
	.nna-mtr-slide {
		padding: 100px 0 56px;
	}
	.nna-mtr-panel {
		padding: 24px 20px;
		border-radius: 20px;
	}
	.nna-mtr-name {
		font-size: 24px;
	}
	.nna-mtr-quote blockquote p {
		font-size: 18px;
	}
	.nna-mtr-cta-card {
		padding: 28px 22px;
		border-radius: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {

	/* Perpindahan slide tetap jalan — itu inti halamannya.
	   Yang dimatikan hanya gerak besar: kamera merayap dan
	   isi panel yang naik. Titik roda mouse dibiarkan sebab
	   dia penanda arah, bukan hiasan. */
	.nna-mtr-video {
		transform: none;
		transition: none;
	}

	.nna-mtr-panel > *,
	.nna-mtr-slide.is-on .nna-mtr-panel > * {
		transform: none;
		transition: opacity 0.5s ease;
	}

	.nna-mtr-cta-btn:hover {
		transform: none;
	}
}

/* ============================================
   29. PELAYANAN & JASA (service.php)

   Keadaan awal animasi (gambar tertutup, kartu
   turun) sengaja dikurung di bawah html.svc-anim.
   Class itu dipasang service-reveal.js begitu
   berkasnya dieksekusi. Artinya: kalau JS mati
   atau gagal dimuat, class-nya tidak pernah ada,
   keadaan awal tidak berlaku, dan seluruh isi
   halaman tampil normal — tidak ada gambar yang
   tersangkut tak terlihat selamanya.
   ============================================ */
.nna-svc {
	background-color: var(--nna-white);
}

/* --- Dasar yang dipakai berulang -------------------------------- */
.nna-svc-eyebrow,
.nna-svc-tag {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 16px;
	margin-bottom: 20px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--nna-orange);
	background-color: var(--nna-orange-tint);
}

.nna-svc-title,
.nna-svc-detail-title {
	font-size: clamp(30px, 3.4vw, 54px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.025em;
	color: var(--nna-ink);
}

.nna-svc-link {
	display: inline-flex;
	align-items: center;
	font-size: 16px;
	font-weight: 600;
	color: var(--nna-blue);
	border-bottom: 1px solid rgba(var(--nna-blue-rgb), 0.35);
	transition: color 0.3s ease, border-color 0.3s ease;
}

.nna-svc-link:hover {
	color: var(--nna-orange);
	border-color: var(--nna-orange);
}

.nna-svc-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 58px;
	padding: 0 32px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 600;
	color: var(--nna-white);
	background-color: var(--nna-blue);
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.nna-svc-btn:hover {
	gap: 16px;
	color: var(--nna-white);
	background-color: var(--nna-orange);
	transform: translateY(-3px);
}

.nna-svc-btn i {
	display: inline-flex;
	line-height: 0;
	transition: transform 0.35s ease;
}

/* Panah ikut melesat ke arah tujuannya — gerakan kecil ini yang
   membuat tombol terasa merespons, bukan sekadar berganti warna. */
.nna-svc-btn:hover i {
	transform: translate(2px, -2px);
}

.nna-svc-btn-ghost {
	display: inline-flex;
	align-items: center;
	height: 58px;
	padding: 0 28px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 600;
	color: var(--nna-ink);
	background-color: transparent;
	border: 1px solid var(--nna-line);
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.nna-svc-btn-ghost:hover {
	color: var(--nna-white);
	background-color: var(--nna-blue);
	border-color: var(--nna-blue);
	transform: translateY(-3px);
}

.nna-svc-btn-ghost-light:hover {
	color: var(--nna-ink);
	background-color: var(--nna-white);
	border-color: var(--nna-white);
}

.nna-svc-btn-ghost-light {
	color: var(--nna-white);
	border-color: rgba(255, 255, 255, 0.32);
}

.nna-svc-btn-ghost-light:hover {
	color: var(--nna-white);
	border-color: var(--nna-white);
}

/* --- 01. Hero --------------------------------------------------- */
.nna-svc-hero {
	padding: 150px 0 clamp(60px, 7vw, 100px);
}

.nna-svc-hero-row {
	margin-top: clamp(24px, 3vw, 44px);
}

.nna-svc-hero-title {
	margin-bottom: 24px;
	font-size: clamp(34px, 4.2vw, 50px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.03em;
	color: var(--nna-ink);
}

/* Kata kunci diberi garis bawah lengkung, bukan blok warna —
   lebih ringan tapi tetap menarik mata. */
.nna-svc-hl {
	position: relative;
	color: var(--nna-orange);
	white-space: nowrap;
}

.nna-svc-hl::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.06em;
	height: 0.1em;
	border-radius: 999px;
	background-color: rgba(var(--nna-orange-rgb), 0.3);
	/* Garis bawah ikut tumbuh seiring frasa diketik, bukan langsung
	   penuh sepanjang ruang yang sudah dipesan. */
	transform-origin: left center;
	transition: transform 0.12s linear;
}

/* Selagi mengetik, lebar elemennya sudah dikunci di lebar akhir
   supaya tata letak tidak gemetar. Garis bawahnya karena itu perlu
   diskalakan mengikuti panjang teks yang sudah tampil. */
.nna-svc-hl.is-typing::after {
	transform: scaleX(var(--svc-type-progress, 0));
}

/* Kursor. Ditempel di ujung teks yang sedang tumbuh, bukan di tepi
   elemennya — supaya ia benar-benar mengikuti huruf terakhir. */
.nna-svc-type-in {
	font-style: inherit;
}

.nna-svc-hl.is-typing .nna-svc-type-in::after {
	content: "";
	display: inline-block;
	width: 0.06em;
	height: 0.82em;
	margin-left: 0.04em;
	vertical-align: -0.06em;
	background-color: var(--nna-orange);
	animation: nna-svc-caret 1s steps(1, end) infinite;
}

@keyframes nna-svc-caret {

	0%,
	50% {
		opacity: 1;
	}

	51%,
	100% {
		opacity: 0;
	}
}

.nna-svc-hero-lead {
	max-width: 560px;
	margin-bottom: 32px;
	font-size: 20px;
	line-height: 1.7;
	color: var(--nna-body);
}

.nna-svc-hero-act {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: clamp(32px, 4vw, 52px);
}

.nna-svc-hero-stat {
	display: flex;
	flex-wrap: wrap;
	/* Jaraknya sengaja tidak besar: pemisahnya sudah dipegang
	   garis vertikal antar angka. */
	gap: clamp(16px, 2vw, 26px);
	padding-top: 30px;
	border-top: 1px solid var(--nna-line);
}

/* Antar angka diberi garis pemisah, bukan cuma jarak — deretan
   tiga angka tanpa batas terbaca seperti satu kalimat panjang. */
.nna-svc-stat-item + .nna-svc-stat-item {
	padding-left: clamp(18px, 2.4vw, 34px);
	border-left: 1px solid var(--nna-line);
}

.nna-svc-stat-item > b {
	display: block;
	margin-bottom: 6px;
	font-size: clamp(30px, 3.2vw, 44px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	/* Lebar digit disamakan supaya angka tidak bergoyang
	   selama animasi menghitung naik. */
	font-variant-numeric: tabular-nums;
	color: var(--nna-blue);
}

/* Angka penghitungnya elemen <span> di dalam <b>. Tanpa aturan
   ini ia tersapu selector label di bawah — itu sebabnya "300"
   sempat tampil kecil dan abu-abu sementara "rb+" besar biru. */
.nna-svc-stat-item b span,
.nna-svc-bento-stat b span {
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
}

/* Satuan dibuat lebih kecil dan beraksen oranye supaya angkanya
   yang jadi tumpuan mata, bukan huruf satuannya. */
.nna-svc-stat-item b i,
.nna-svc-bento-stat b i {
	margin-left: 2px;
	font-size: 0.5em;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--nna-orange);
}

.nna-svc-stat-item > span {
	display: block;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--nna-muted);
}

.nna-svc-hero-media {
	position: relative;
}

/* --- Bingkai gambar --------------------------------------------- */
.nna-svc-frame {
	position: relative;
	overflow: hidden;
	margin: 0;
	border-radius: 26px;
	background-color: var(--nna-surface);
	aspect-ratio: 5 / 4;
}

.nna-svc-frame-tall {
	aspect-ratio: 4 / 5;
}

.nna-svc-frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Atropos memasang perspective di elemen akarnya dan memutar dua
   pembungkus di dalamnya, jadi akar hanya boleh mengurus posisi.
   Seluruh tampilan kartunya pindah ke .atropos-inner supaya ikut
   miring bersama rotasinya. Kebetulan menguntungkan juga: GSAP
   menaruh parallax di akar, Atropos di anaknya — tidak rebutan
   properti transform yang sama. */
.nna-svc-float {
	position: absolute;
	left: clamp(-10px, -1vw, 0px);
	bottom: clamp(20px, 3vw, 40px);
	max-width: 300px;
}

.nna-svc-float .atropos-inner {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 22px;
	border-radius: 18px;
	background-color: var(--nna-white);
	box-shadow: 0 24px 60px rgba(20, 21, 46, 0.16);
}

.nna-svc-float-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	color: var(--nna-white);
	background-color: var(--nna-orange);
}

.nna-svc-float-text > b {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: var(--nna-ink);
}

.nna-svc-float-text > span {
	display: block;
	font-size: 14px;
	color: var(--nna-muted);
}

.nna-svc-badge {
	position: absolute;
	right: clamp(-8px, -1vw, 0px);
	bottom: clamp(24px, 3vw, 44px);
}

.nna-svc-badge .atropos-inner {
	display: block;
	padding: 18px 24px;
	border-radius: 18px;
	background-color: var(--nna-white);
	box-shadow: 0 24px 60px rgba(20, 21, 46, 0.16);
}

.nna-svc-badge .atropos-inner > b {
	display: block;
	margin-bottom: 2px;
	font-size: 24px;
	font-weight: 700;
	color: var(--nna-orange);
}

.nna-svc-badge .atropos-inner > span {
	display: block;
	max-width: 190px;
	font-size: 14px;
	color: var(--nna-body);
}



/* --- 02. Strip foto --------------------------------------------- */
.nna-svc-strip {
	padding-bottom: clamp(60px, 7vw, 100px);
}

.nna-svc-tile {
	position: relative;
	overflow: hidden;
	margin: 0;
	border-radius: 20px;
	aspect-ratio: 1 / 1;
	background-color: var(--nna-surface);
}

.nna-svc-tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s ease;
}

.nna-svc-tile:hover img {
	transform: scale(1.06);
}

.nna-svc-tile figcaption {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 16px;
	border-radius: 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--nna-white);
	background-color: rgba(20, 23, 66, 0.6);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.nna-svc-tile figcaption i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.18);
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.nna-svc-tile:hover figcaption i {
	background-color: var(--nna-orange);
	transform: rotate(45deg);
}

/* Tirai penyingkap. Gerakannya transition CSS, bukan GSAP —
   pseudo-element tidak bisa disentuh GSAP, dan memakainya di
   sini berarti tidak ada simpul tambahan di DOM.

   Bawaannya scaleY(0) alias tidak menutup apa-apa; yang
   menutup justru html.svc-anim. Jadi tanpa JS ubinnya
   langsung terlihat, bukan tertutup selamanya. */
/* transition-delay tidak diwariskan ke pseudo-element, tapi
   custom property diwariskan. Jadi jeda bergilirnya dititipkan
   lewat --svc-delay yang dipasang JS di elemen induknya. */
.nna-svc-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background-color: var(--nna-blue);
	transform: scaleY(0);
	transform-origin: top center;
	pointer-events: none;
	transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1);
	transition-delay: var(--svc-delay, 0s);
}

html.svc-anim .nna-svc-tile::after {
	transform: scaleY(1);
}

html.svc-anim .nna-svc-tile.is-shown::after {
	transform: scaleY(0);
}

/* --- 03. Tiga pilar --------------------------------------------- */
.nna-svc-pillar {
	padding: clamp(60px, 7vw, 100px) 0;
	background-color: var(--nna-surface);
}

.nna-svc-head {
	margin-bottom: clamp(36px, 4vw, 58px);
}

.nna-svc-head-side p {
	margin-bottom: 16px;
	font-size: 20px;
	line-height: 1.7;
	color: var(--nna-body);
}

.nna-svc-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: clamp(24px, 2.4vw, 34px);
	border-radius: 26px;
	background-color: var(--nna-white);
	border: 1px solid var(--nna-line);
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.nna-svc-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 30px 70px rgba(20, 21, 46, 0.1);
}

/* Tiap kartu punya rona sendiri supaya deretannya tidak
   terbaca sebagai tiga kotak yang sama. */
.nna-svc-card-a {
	background-color: var(--nna-orange-tint);
	border-color: rgba(var(--nna-orange-rgb), 0.18);
}

.nna-svc-card-b {
	background-color: #eef0fb;
	border-color: rgba(var(--nna-blue-rgb), 0.14);
}

.nna-svc-card-c {
	background-color: var(--nna-white);
}

.nna-svc-card-no {
	display: block;
	margin-bottom: 14px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--nna-orange);
}

.nna-svc-card h3 {
	margin-bottom: 12px;
	font-size: clamp(22px, 2vw, 28px);
	font-weight: 700;
	color: var(--nna-ink);
}

.nna-svc-card p {
	margin-bottom: 18px;
	font-size: 20px;
	line-height: 1.62;
	color: var(--nna-body);
}

.nna-svc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

.nna-svc-chips li {
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	color: var(--nna-ink);
	background-color: rgba(255, 255, 255, 0.72);
	border: 1px solid rgba(20, 21, 46, 0.08);
}

.nna-svc-card-media {
	position: relative;
	overflow: hidden;
	margin: 0 0 20px;
	border-radius: 18px;
	aspect-ratio: 16 / 10;
	background-color: var(--nna-surface);
}

.nna-svc-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}




/* --- 04-06. Bagian rinci ---------------------------------------- */
.nna-svc-detail {
	padding: clamp(60px, 8vw, 120px) 0;
	/* Anchor dari menu tidak boleh tertutup bar menu melayang. */
	scroll-margin-top: 110px;
}


.nna-svc-detail-media {
	position: relative;
}

.nna-svc-detail-text {
	padding-left: clamp(0px, 2vw, 40px);
}

.flex-lg-row-reverse .nna-svc-detail-text {
	padding-left: 0;
	padding-right: clamp(0px, 2vw, 40px);
}

.nna-svc-detail-title {
	margin-bottom: 20px;
}

.nna-svc-detail-lead {
	margin-bottom: 18px;
	font-size: 20px;
	line-height: 1.72;
	color: var(--nna-body);
}




/* --- Lima langkah kunjungan -------------------------------------- */
.nna-svc-steps {
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.nna-svc-steps li {
	display: flex;
	gap: 18px;
	padding: 18px 0;
	border-top: 1px solid var(--nna-line);
}

.nna-svc-steps li:last-child {
	border-bottom: 1px solid var(--nna-line);
}

.nna-svc-step-no {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--nna-orange);
	padding-top: 3px;
}

.nna-svc-steps h4 {
	margin-bottom: 4px;
	font-size: 19px;
	font-weight: 600;
	color: var(--nna-ink);
}

.nna-svc-steps p {
	margin-bottom: 0;
	font-size: 18px;
	line-height: 1.6;
	color: var(--nna-muted);
}

/* --- Kisi strategi pemasaran ------------------------------------- */
.nna-svc-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin-top: 30px;
}

.nna-svc-grid-item {
	padding: 20px;
	border-radius: 16px;
	background-color: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.nna-svc-grid-item > b {
	display: block;
	margin-bottom: 6px;
	font-size: 17px;
	font-weight: 600;
	color: var(--nna-white);
}

.nna-svc-grid-item > span {
	display: block;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.6);
}

/* --- Bento angka distribusi -------------------------------------- */
.nna-svc-bento {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: minmax(190px, auto);
	gap: 16px;
	margin-top: clamp(40px, 5vw, 70px);
}

.nna-svc-bento > * {
	border-radius: 22px;
	overflow: hidden;
}

/* Kartu angka berlatar foto, bukan blok warna rata. Warna
   mereknya tetap dipegang — hanya dipindah ke lapisan overlay
   di atas fotonya, jadi kontras teks putihnya tidak berubah. */
.nna-svc-bento-stat {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 26px;
	isolation: isolate;
}

.nna-svc-bento-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s ease;
}

.nna-svc-bento-stat:hover .nna-svc-bento-bg {
	transform: scale(1.06);
}

/* Overlay warna. Dibuat gradasi, bukan satu nilai rata, supaya
   fotonya masih terbaca di bagian atas sementara teks di bawah
   tetap dapat alas yang pekat. */
.nna-svc-bento-stat::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.nna-svc-bento-stat > b,
.nna-svc-bento-stat > span {
	position: relative;
	z-index: 2;
}

.nna-svc-bento-stat > b {
	font-size: clamp(44px, 5vw, 68px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	/* Bayangan tipis menahan angka tetap terbaca kalau ada bagian
	   foto yang kebetulan terang. */
	text-shadow: 0 2px 18px rgba(15, 16, 40, 0.28);
}

.nna-svc-bento-stat > span {
	font-size: 16px;
	line-height: 1.55;
}

/* background-color tetap dipasang sebagai alas: kalau fotonya
   gagal dimuat, kartunya kembali jadi blok warna utuh, bukan
   kotak kosong dengan teks putih di atas putih. */
.nna-svc-bento-stat-orange {
	color: var(--nna-white);
	background-color: var(--nna-orange);
}

.nna-svc-bento-stat-orange::after {
	background:
		linear-gradient(180deg, rgba(var(--nna-orange-rgb), 0.74) 0%, rgba(213, 92, 20, 0.93) 100%);
}

.nna-svc-bento-stat-orange > span {
	color: rgba(255, 255, 255, 0.92);
}

.nna-svc-bento-stat-blue {
	color: var(--nna-white);
	background-color: var(--nna-blue);
}

.nna-svc-bento-stat-blue::after {
	background:
		linear-gradient(180deg, rgba(var(--nna-blue-rgb), 0.72) 0%, rgba(23, 26, 77, 0.93) 100%);
}

.nna-svc-bento-stat-blue > span {
	color: rgba(255, 255, 255, 0.9);
}

.nna-svc-bento-media {
	position: relative;
	margin: 0;
	background-color: var(--nna-surface);
}

.nna-svc-bento-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nna-svc-bento-media figcaption {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 18px;
	padding: 12px 16px;
	border-radius: 14px;
	font-size: 15px;
	font-weight: 500;
	color: var(--nna-white);
	background-color: rgba(20, 23, 66, 0.58);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.nna-svc-bento-tall {
	grid-column: span 2;
	grid-row: span 2;
}

/* Kartu ketiga jadi kartu foto: overlay-nya netral gelap, bukan
   warna merek, supaya truk ber-logo di baliknya masih terbaca.
   Itu yang membedakannya dari dua kartu angka di atas. */
.nna-svc-bento-note {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 26px;
	background-color: var(--nna-blue-deep);
	isolation: isolate;
}

.nna-svc-bento-note::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(15, 16, 40, 0.62) 0%, rgba(15, 16, 40, 0.93) 72%);
}

.nna-svc-bento-note:hover .nna-svc-bento-bg {
	transform: scale(1.06);
}

/* Fotonya harus tetap absolute — kalau ikut kena position:relative
   di sini, ia jatuh kembali ke aliran normal dan mendorong teks. */
.nna-svc-bento-note > :not(.nna-svc-bento-bg) {
	position: relative;
	z-index: 2;
}

.nna-svc-bento-note h3 {
	margin-bottom: 10px;
	font-size: 22px;
	font-weight: 700;
	color: var(--nna-white);
}

.nna-svc-bento-note p {
	margin-bottom: 14px;
	font-size: 18px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.76);
}

/* Pil tautan di atas latar gelap. */


/* Penutup halaman memakai komponen .nna-sky yang sama dengan
   beranda (foto pesawat larut ke biru footer), jadi tidak ada
   gaya CTA tersendiri di sini. */

/* ============================================
   Animasi masuk — seluruhnya transition CSS.

   Yang dikerjakan JS hanya menempelkan class
   .is-shown saat elemennya benar-benar terlihat
   (lewat IntersectionObserver). Tidak ada satu pun
   animasi masuk yang bergantung pada GSAP, jadi
   tidak ada teks yang bisa tersangkut tak terlihat
   gara-gara posisi trigger meleset.

   Keadaan awalnya sendiri dikurung di bawah
   html.svc-anim, class yang dipasang JS sendiri.
   Tanpa JS, keadaan awal tidak pernah berlaku dan
   seluruh isi halaman tampil apa adanya.
   ============================================ */

/* Bingkai tersingkap dari bawah ke atas, sementara gambar di
   dalamnya menyusut. Durasi gambar dibuat lebih panjang supaya
   masih bergerak sedikit setelah tirainya selesai. */
html.svc-anim [data-svc-clip] {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 1.1s cubic-bezier(0.76, 0, 0.24, 1);
}

html.svc-anim [data-svc-clip] img {
	transform: scale(1.28);
	transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

html.svc-anim [data-svc-clip].is-shown {
	clip-path: inset(0 0 0% 0);
}

html.svc-anim [data-svc-clip].is-shown img {
	transform: none;
}

/* Naik-dan-muncul biasa. Ini pengganti tp_fade_anim milik
   template: mekanismenya sama-sama fade + naik, tapi tidak lagi
   bergantung pada gsap.from + ScrollTrigger yang bisa
   meninggalkan teks tersangkut di opacity 0. */
html.svc-anim [data-svc-fade] {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--svc-delay, 0s);
}

html.svc-anim [data-svc-fade].is-shown {
	opacity: 1;
	transform: none;
}

/* Anak-anak kisi naik bergantian. Jeda tiap anak dipasang JS
   sebagai transition-delay, jadi geraknya tetap milik CSS. */
html.svc-anim [data-svc-stagger] > * {
	opacity: 0;
	transform: translateY(42px);
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

html.svc-anim [data-svc-stagger].is-shown > * {
	opacity: 1;
	transform: none;
}

/* --- Responsif --------------------------------------------------- */
@media (max-width: 1199px) {
	.nna-svc-bento {
		grid-template-columns: repeat(2, 1fr);
	}
	.nna-svc-bento-tall {
		grid-column: span 2;
		grid-row: span 1;
		min-height: 300px;
	}
}

@media (max-width: 991px) {
	.nna-svc-hero {
		padding-top: 130px;
	}
	.nna-svc-hero-media {
		margin-top: 44px;
	}
	.nna-svc-detail-text {
		margin-top: 44px;
		padding-left: 0;
	}
	.flex-lg-row-reverse .nna-svc-detail-text {
		padding-right: 0;
	}
	.nna-svc-frame-tall {
		aspect-ratio: 4 / 3;
	}
	.nna-svc-float,
	.nna-svc-badge {
		left: auto;
		right: 16px;
		bottom: 16px;
	}
}

@media (max-width: 767px) {
	.nna-svc-hero {
		padding-top: 118px;
	}
	.nna-svc-hero-act {
		flex-direction: column;
		align-items: stretch;
	}
	.nna-svc-btn,
	.nna-svc-btn-ghost {
		justify-content: center;
	}
	.nna-svc-hero-stat {
		gap: 20px 30px;
	}
	/* Begitu angkanya membungkus ke baris baru, garis vertikal di
	   sisi kiri jadi menggantung tanpa pasangan. Dilepas saja. */
	.nna-svc-stat-item + .nna-svc-stat-item {
		padding-left: 0;
		border-left: 0;
	}
	.nna-svc-grid,
	.nna-svc-bento {
		grid-template-columns: 1fr;
	}
	.nna-svc-bento-tall {
		grid-column: span 1;
		min-height: 260px;
	}
	.nna-svc-bento-media {
		min-height: 220px;
	}
	.nna-svc-float {
		position: static;
		max-width: none;
		margin-top: 14px;
	}
	.nna-svc-badge {
		position: static;
		display: inline-block;
		margin-top: 14px;
	}
	.nna-svc-float .atropos-inner,
	.nna-svc-badge .atropos-inner {
		box-shadow: none;
		border: 1px solid var(--nna-line);
	}
	.nna-svc-steps li {
		gap: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {

	/* Penyingkapan gambar tetap dijalankan lewat JS dengan durasi
	   pendek — yang dimatikan di sini gerak besar yang berulang
	   tiap kali kursor lewat. */
	.nna-svc-card,
	.nna-svc-tile img,
	.nna-svc-btn,
	.nna-svc-btn i,
	.nna-svc-btn-ghost,
	.nna-svc-tile figcaption i {
		transition: none;
	}

	.nna-svc-btn:hover i,
	.nna-svc-btn-ghost:hover {
		transform: none;
	}

	.nna-svc-card:hover,
	.nna-svc-btn:hover {
		transform: none;
	}

	.nna-svc-tile:hover img {
		transform: none;
	}

	.nna-svc-bento-bg {
		transition: none;
	}

	.nna-svc-bento-stat:hover .nna-svc-bento-bg,
	.nna-svc-bento-note:hover .nna-svc-bento-bg {
		transform: none;
	}

	/* Penyingkapannya tetap ada supaya halaman tidak terasa mati,
	   tapi jadi singkat dan tanpa perpindahan posisi — yang
	   tersisa cuma opacity dan tirai yang naik di tempat. */
	html.svc-anim [data-svc-clip] {
		transition-duration: 0.4s;
	}

	html.svc-anim [data-svc-clip] img {
		transform: none;
		transition: none;
	}

	html.svc-anim [data-svc-fade],
	html.svc-anim [data-svc-stagger] > * {
		transform: none;
		transition: opacity 0.4s ease;
	}

	.nna-svc-tile::after {
		transition-duration: 0.4s;
	}
}


/* ============================================
   PELAYANAN & JASA — LANJUTAN
   Shape dekoratif, pembatas bergambar, dan
   tombol. Ditaruh setelah blok utama supaya
   aturan di sini menang tanpa perlu !important.
   ============================================ */

/* --- Shape gradient ---------------------------------------------- */
/* Bahasa visualnya sama dengan beranda: grid halus di belakang plus
   beberapa blob gradient warna merek yang diburamkan kuat. Bukan
   bentuk tegas — yang dicari kesan cahaya, bukan stiker. */
.nna-svc-hero,
.nna-svc-pillar,
.nna-svc-detail {
	position: relative;
	z-index: 1;
}

.nna-svc-deco {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

.nna-svc-grid-line {
	position: absolute;
	inset: 0;
	display: block;
	background-image:
		linear-gradient(to right, rgba(var(--nna-blue-rgb), 0.055) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(var(--nna-blue-rgb), 0.055) 1px, transparent 1px);
	background-size: 96px 96px;
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, #000 0%, transparent 78%);
	mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, #000 0%, transparent 78%);
}

.nna-svc-blob {
	position: absolute;
	display: block;
	border-radius: 50%;
	filter: blur(110px);
}

.nna-svc-blob-blue {
	top: -120px;
	left: -180px;
	width: 680px;
	height: 580px;
	opacity: 0.8;
	background: radial-gradient(circle at 50% 50%, rgba(var(--nna-blue-rgb), 0.42) 0%, rgba(var(--nna-blue-rgb), 0.14) 44%, rgba(var(--nna-blue-rgb), 0) 72%);
}

.nna-svc-blob-orange {
	top: -160px;
	right: -140px;
	width: 560px;
	height: 500px;
	opacity: 0.55;
	background: radial-gradient(circle at 50% 50%, rgba(var(--nna-orange-rgb), 0.4) 0%, rgba(var(--nna-orange-rgb), 0) 70%);
}

.nna-svc-blob-soft {
	right: 12%;
	bottom: -260px;
	width: 820px;
	height: 620px;
	opacity: 0.6;
	background: radial-gradient(circle at 50% 50%, rgba(var(--nna-blue-soft-rgb), 0.3) 0%, rgba(var(--nna-blue-rgb), 0) 70%);
}

.nna-svc-blob-orange-2 {
	top: 8%;
	left: -220px;
	width: 620px;
	height: 540px;
	opacity: 0.45;
	background: radial-gradient(circle at 50% 50%, rgba(var(--nna-orange-rgb), 0.32) 0%, rgba(var(--nna-orange-rgb), 0) 70%);
}

.nna-svc-blob-blue-2 {
	right: -200px;
	bottom: -180px;
	width: 700px;
	height: 600px;
	opacity: 0.7;
	background: radial-gradient(circle at 50% 50%, rgba(var(--nna-blue-rgb), 0.32) 0%, rgba(var(--nna-blue-rgb), 0) 72%);
}

/* --- Pembatas bergambar ------------------------------------------ */
/* Menggantikan pergantian warna latar antar section. Fotonya larut
   ke putih di sisi atas dan bawah, jadi terbaca sebagai jeda yang
   menyatu — bukan kotak yang ditempel di tengah halaman.

   Pola yang sama dengan scene di beranda, tapi jauh lebih ringan:
   scene beranda memaku layar setinggi 150vh, yang kalau dipakai
   berulang di sini membuat halaman terasa berhenti berkali-kali. */
.nna-svc-band {
	position: relative;
	height: clamp(420px, 64vw, 860px);
	overflow: hidden;
	background-color: var(--nna-blue-deep);
}

.nna-svc-band-media {
	position: absolute;
	/* Fotonya dibuat lebih tinggi dari bidangnya supaya pergeseran
	   parallax tidak pernah menyingkap celah di tepi. Kelebihannya
	   16% di tiap sisi, sementara drift-nya hanya 12% — sisa 4%
	   itu marginnya, jadi tepi foto tidak pernah pas-pasan. */
	top: -16%;
	left: 0;
	right: 0;
	height: 132%;
}

.nna-svc-band-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	will-change: transform;
}

.nna-svc-band-fade-top,
.nna-svc-band-fade-bottom {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 2;
	display: block;
	height: 38%;
	pointer-events: none;
}

.nna-svc-band-fade-top {
	top: 0;
	background: linear-gradient(180deg, var(--nna-white) 0%, rgba(255, 255, 255, 0.72) 30%, rgba(255, 255, 255, 0) 100%);
}

.nna-svc-band-fade-bottom {
	bottom: 0;
	background: linear-gradient(0deg, var(--nna-white) 0%, rgba(255, 255, 255, 0.72) 30%, rgba(255, 255, 255, 0) 100%);
}

/* Pembatas yang berdiri di tengah bentangan biru: kedua sisinya
   larut ke biru, bukan ke putih. Tanpa ini ada garis potong tajam
   di perbatasan atas dan bawahnya. */
.nna-svc-band-from-blue {
	background-color: var(--nna-footer-bg);
}

.nna-svc-band-from-blue .nna-svc-band-fade-top {
	background: linear-gradient(180deg, var(--nna-footer-bg) 0%, rgba(20, 23, 66, 0.74) 30%, rgba(20, 23, 66, 0) 100%);
}

.nna-svc-band-from-blue .nna-svc-band-fade-bottom {
	background: linear-gradient(0deg, var(--nna-footer-bg) 0%, rgba(20, 23, 66, 0.74) 30%, rgba(20, 23, 66, 0) 100%);
}

/* --- Latar disatukan --------------------------------------------- */
/* Pillar tidak lagi berlatar abu dan Pemasaran tidak lagi gelap.
   Seluruh halaman berdiri di atas satu warna; yang memisahkan
   antar bagian sekarang pembatas bergambar di atas. */
.nna-svc-pillar {
	background-color: transparent;
}

/* Kartu strategi pemasaran, versi terang. Dipakai sebagai dasar;
   di dalam section biru dia ditimpa aturan di bawahnya. */
.nna-svc-grid-item {
	background-color: #eef0fb;
	border-color: rgba(var(--nna-blue-rgb), 0.14);
}

.nna-svc-grid-item > b {
	color: var(--nna-ink);
}

.nna-svc-grid-item > span {
	color: var(--nna-body);
}

/* --- Bentangan biru ---------------------------------------------- */
/* Separuh bawah halaman — Pemasaran sampai pembatas pesawat —
   berdiri di atas satu warna biru.

   Warnanya sengaja --nna-footer-bg, token yang sama yang dipakai
   footer. Jadi Pemasaran, pembatas pelabuhan, Distribusi, pembatas
   pesawat, dan footer benar-benar sewarna: tidak ada satu pun
   perbatasan yang terbaca sebagai garis. */
.nna-svc-detail-blue {
	background-color: var(--nna-footer-bg);
}

/* Pintu masuk ke bentangan biru. Hanya dipakai section biru
   pertama; sisanya sudah berdiri di atas biru dan tidak perlu
   peralihan lagi.

   Ramp-nya sengaja cepat (rampung di 24%) dan padding atas
   dilebihkan, supaya seluruh peralihan warna terjadi di ruang
   kosong. Kalau ramp-nya lambat, judul dan eyebrow akan duduk di
   tengah gradasi dan kontrasnya berubah-ubah sepanjang teks.

   Titik singgah #e4e7f7 dan --nna-blue itu perlu: interpolasi
   langsung putih ke biru tua melewati abu-keunguan yang kotor. */
.nna-svc-detail-blue-enter {
	padding-top: clamp(96px, 12vw, 180px);
	background: linear-gradient(180deg,
			var(--nna-white) 0%,
			#e4e7f7 5%,
			var(--nna-blue) 12%,
			var(--nna-footer-bg) 24%,
			var(--nna-footer-bg) 100%);
}

.nna-svc-detail-blue .nna-svc-detail-title {
	color: var(--nna-white);
}

.nna-svc-detail-blue .nna-svc-detail-lead {
	color: rgba(255, 255, 255, 0.74);
}

.nna-svc-detail-blue .nna-svc-tag {
	color: var(--nna-orange-soft);
	background-color: rgba(var(--nna-orange-rgb), 0.16);
}

.nna-svc-detail-blue .nna-svc-grid-item {
	background-color: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.12);
}

.nna-svc-detail-blue .nna-svc-grid-item > b {
	color: var(--nna-white);
}

.nna-svc-detail-blue .nna-svc-grid-item > span {
	color: rgba(255, 255, 255, 0.62);
}

/* Kartu bento berdiri di atas biru yang nyaris sewarna dengan
   overlay-nya sendiri, jadi tepinya hilang. Garis rambut ini yang
   mengembalikan batasnya tanpa mengubah bahasa desainnya. */
.nna-svc-detail-blue .nna-svc-bento > * {
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.nna-svc-detail-blue .nna-svc-bento-note {
	background-color: var(--nna-blue-dark);
}

/* Langkah kunjungan dan catatan lain yang aslinya bergaris terang. */
.nna-svc-detail-blue .nna-svc-steps li {
	border-color: rgba(255, 255, 255, 0.14);
}

.nna-svc-detail-blue .nna-svc-steps h4 {
	color: var(--nna-white);
}

.nna-svc-detail-blue .nna-svc-steps p {
	color: rgba(255, 255, 255, 0.6);
}

/* --- Tombol kecil ------------------------------------------------- */
/* Menggantikan tautan bergaris bawah. Tiga varian: isi penuh untuk
   ajakan utama, garis untuk di dalam kartu, dan versi terang untuk
   di atas foto gelap. */
.nna-svc-btn-sm {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 48px;
	padding: 0 24px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--nna-white);
	background-color: var(--nna-blue);
	border: 1px solid var(--nna-blue);
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.nna-svc-btn-sm:hover {
	gap: 15px;
	color: var(--nna-white);
	background-color: var(--nna-orange);
	border-color: var(--nna-orange);
	transform: translateY(-3px);
}

.nna-svc-btn-sm i {
	display: inline-flex;
	line-height: 0;
	transition: transform 0.35s ease;
}

.nna-svc-btn-sm:hover i {
	transform: translate(2px, -2px);
}

.nna-svc-btn-sm-ghost {
	margin-top: auto;
	color: var(--nna-blue);
	background-color: transparent;
	border-color: rgba(var(--nna-blue-rgb), 0.28);
}

.nna-svc-btn-sm-ghost:hover {
	color: var(--nna-white);
	background-color: var(--nna-blue);
	border-color: var(--nna-blue);
}

.nna-svc-btn-sm-light {
	align-self: flex-start;
	color: var(--nna-ink);
	background-color: var(--nna-white);
	border-color: var(--nna-white);
}

.nna-svc-btn-sm-light:hover {
	color: var(--nna-white);
	background-color: var(--nna-orange);
	border-color: var(--nna-orange);
}

/* Jarak dirapatkan tepat setelah pembatas: fotonya sudah memberi
   jeda visualnya sendiri, jadi padding penuh di situ membuat ruang
   kosongnya berlebihan. */
.nna-svc-band + .nna-svc-detail {
	padding-top: clamp(48px, 5vw, 84px);
}

@media (max-width: 991px) {
	.nna-svc-blob {
		filter: blur(80px);
	}
	.nna-svc-blob-soft,
	.nna-svc-blob-blue-2 {
		display: none;
	}
	.nna-svc-band {
		height: clamp(320px, 70vw, 480px);
	}
}

@media (max-width: 767px) {
	.nna-svc-btn-sm {
		height: 46px;
		padding: 0 20px;
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.nna-svc-btn-sm,
	.nna-svc-btn-sm i {
		transition: none;
	}

	.nna-svc-btn-sm:hover,
	.nna-svc-btn-sm:hover i {
		transform: none;
	}
}

/* ============================================
   30. SKALA TEKS ISI — 20px
   Client minta seluruh teks isi tampil besar.

   Blok ini sengaja ditaruh paling akhir: banyak
   section di atas menurunkan ukuran paragrafnya
   sendiri lewat @media, dan @media tidak menambah
   specificity. Yang menang adalah yang terakhir
   ditulis — jadi satu daftar di sini mengunci
   ukurannya untuk semua lebar layar sekaligus,
   tanpa perlu !important dan tanpa perlu menyisir
   puluhan aturan lama satu per satu.

   Yang TIDAK ikut ke sini: judul, label kecil
   (uppercase), catatan kaki, dan hak cipta. Itu
   UI chrome, bukan teks isi — kalau ikut 20px,
   footer dan form-nya yang jadi rusak.
   ============================================ */
p,
.nna-hero-text,
.nna-about-subtitle-text,
.nna-about-desc p,
.nna-about-text p,
.nna-about-bottom-text p,
.nna-service-card-text,
.nna-service-wide-text,
.nna-gallery-intro p,
.nna-news-card-text,
.nna-news-feature-text,
.nna-newsletter-text p,
.nna-cta-text,
.nna-sky-text,
.nna-banner-text,
.nna-join-text,
.nna-hire-text,
.nna-vacancy-desc,
.nna-vacancy-note p,
.nna-vacancy-warn-text p,
.nna-why-card p,
.nna-partner-text,
.nna-partner-intro p,
.nna-partner-cta-text p,
.nna-contact-text,
.nna-faq-intro p,
.nna-faq-a,
.nna-modal-body p,
.nna-art-hero-desc p,
.nna-art-feature-text,
.nna-art-mini-text,
.nna-art-empty p,
.nna-ab-hero-side p,
.nna-ab-point p,
.nna-ab-team-note p,
.nna-ab-value-head p,
.nna-ab-value-card p,
.nna-ab-value-lead p,
.nna-phil-lead p,
.nna-phil-body p,
.nna-testi-lead p,
.nna-testi-quote {
	font-size: 20px;
}

/* Baris jadi lebih rapat begitu hurufnya membesar,
   jadi jarak antar barisnya ikut dilonggarkan biar
   paragraf panjang tetap enak dibaca. */
.nna-faq-a,
.nna-phil-body p,
.nna-testi-quote {
	line-height: 1.7;
}