/*
 * Kerangka mode canvas: header, navigasi, footer, dan media sosial.
 *
 * Dipisah dari core.css karena halaman bermode render "theme" memakai
 * header dan footer tema — tidak satu pun aturan di berkas ini terpakai
 * di sana. Memuatnya tetap berarti mengirim belasan kilobyte sia-sia.
 */

.rwk-header {
	background: var(--rwk-surface);
	border-bottom: 1px solid var(--rwk-line);
	position: sticky;
	top: 0;
	z-index: 50;
}

.rwk-header__bar {
	display: flex;
	align-items: center;
	gap: var(--rwk-sp-3);
	min-height: 68px;
	/* Padding vertikal supaya logo tinggi tidak menempel persis di garis
	   batas header. Tanpa ini, logo 100 px menyentuh tepi atas dan bawah. */
	padding-block: .55rem;
}

.rwk-header__brand {
	text-decoration: none;
	display: flex;
	align-items: center;
	margin-right: auto;
}

/*
 * Tinggi logo datang dari Pengaturan, bukan dipatok di sini.
 *
 * Angka yang pas bergantung pada bentuk logo, dan bentuk logo berbeda di tiap
 * klien: logo memanjang berisi nama bisnis sudah seimbang di 40-56 px,
 * sedangkan logo berbentuk lambang persegi terlihat kekecilan sampai 80-110 px.
 * Satu angka yang dipatok pasti salah untuk sebagian situs.
 */
.rwk-header__logo {
	max-height: var(--rwk-logo-tinggi, 56px);
	width: auto;
}

/*
 * Di ponsel tingginya dijepit, berapa pun setelannya.
 *
 * Header ini lengket. Logo 110 px di layar 360 px berarti hampir sepertiga
 * tinggi layar hilang sepanjang halaman digulir — dan itu ruang baca, bukan
 * ruang kosong.
 */
@media (max-width: 767px) {
	.rwk-header__logo {
		max-height: min(var(--rwk-logo-tinggi, 56px), 52px);
	}
}

.rwk-header__nama {
	font-size: 1.125rem;
	font-weight: 800;
	letter-spacing: -.02em;
}

.rwk-header__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: none;
	border: 1px solid var(--rwk-line);
	border-radius: var(--rwk-radius);
	cursor: pointer;
}

/* Ikon menu memakai motif bilah yang sama dengan shade-rule. */
.rwk-header__garis {
	display: block;
	width: 20px;
	height: 12px;
	background-image: repeating-linear-gradient(
		to bottom,
		var(--rwk-ink) 0 2px,
		transparent 2px 5px
	);
}

/* ---------------------------------------------------------------
 * Navigasi utama
 *
 * Di layar kecil menu jadi panel yang terbuka, submenu tampil sebagai
 * daftar bertingkat. Di layar lebar submenu muncul sebagai dropdown.
 * --------------------------------------------------------------- */

.rwk-nav {
	display: none;
}

.rwk-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.rwk-nav__item {
	position: relative;
}

.rwk-nav__item > a {
	display: block;
	padding: .65rem 0;
	text-decoration: none;
	font-weight: 500;
}

.rwk-nav__item > a:hover,
.rwk-nav__item > a:focus-visible {
	color: var(--rwk-spark);
}

.rwk-nav__item > a[aria-current="page"] {
	color: var(--rwk-spark);
	font-weight: 600;
}

/* Tombol pembuka submenu — hanya tampil di layar kecil. */
.rwk-nav__buka {
	position: absolute;
	right: 0;
	top: 0;
	width: 44px;
	height: 44px;
	background: none;
	border: 0;
	cursor: pointer;
	display: grid;
	place-items: center;
}

.rwk-nav__buka span {
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--rwk-steel);
	border-bottom: 2px solid var(--rwk-steel);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .18s ease;
}

.rwk-nav__buka[aria-expanded="true"] span {
	transform: rotate(-135deg) translate(-3px, -3px);
}

.rwk-nav__sub {
	list-style: none;
	margin: 0;
	padding: 0 0 .5rem 1rem;
	display: none;
	border-left: 2px solid var(--rwk-line);
}

.rwk-nav__sub.is-buka {
	display: block;
}

.rwk-nav__sub a {
	display: block;
	padding: .45rem 0;
	font-size: var(--rwk-t-kecil);
	color: var(--rwk-steel);
	text-decoration: none;
}

.rwk-nav__sub a:hover,
.rwk-nav__sub a:focus-visible {
	color: var(--rwk-spark);
}

.rwk-nav.is-open {
	display: block;
	position: absolute;
	inset: 68px 0 auto 0;
	background: var(--rwk-surface);
	border-bottom: 1px solid var(--rwk-line);
	padding: var(--rwk-sp-3);
	max-height: calc(100vh - 68px);
	overflow-y: auto;
	box-shadow: var(--rwk-elev-2);
}

@media (min-width: 1024px) {
	.rwk-header__toggle {
		display: none;
	}

	.rwk-nav {
		display: block;
	}

	.rwk-nav__list {
		flex-direction: row;
		gap: var(--rwk-sp-3);
		align-items: center;
	}

	.rwk-nav__item > a {
		padding: 1.4rem 0;
		font-size: .9375rem;
		white-space: nowrap;
	}

	/* Garis penanda halaman aktif, memakai motif bilah yang sama. */
	.rwk-nav__item > a[aria-current="page"]::after {
		content: "";
		position: absolute;
		inset: auto 0 0 0;
		height: 3px;
		background-image: repeating-linear-gradient(90deg, var(--rwk-spark) 0 6px, transparent 6px 10px);
	}

	.rwk-nav__buka {
		display: none;
	}

	.rwk-nav__sub {
		display: block;
		position: absolute;
		top: 100%;
		left: -14px;
		min-width: 230px;
		padding: .5rem 0;
		background: var(--rwk-surface);
		border: 1px solid var(--rwk-line);
		border-radius: var(--rwk-radius);
		box-shadow: var(--rwk-elev-2);
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity .15s ease, transform .15s ease, visibility .15s;
		z-index: 60;
	}

	.rwk-nav__item--punya-anak:hover .rwk-nav__sub,
	.rwk-nav__item--punya-anak:focus-within .rwk-nav__sub {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.rwk-nav__sub a {
		padding: .5rem 1rem;
	}

	.rwk-nav__sub a:hover {
		background: var(--rwk-mist);
	}
}

.rwk-header__cta {
	display: none;
}

@media (min-width: 1024px) {
	.rwk-header__toggle {
		display: none;
	}

	.rwk-nav {
		display: block;
	}

	.rwk-nav__list {
		flex-direction: row;
		gap: var(--rwk-sp-3);
		align-items: center;
	}

	.rwk-header__cta {
		display: inline-flex;
		padding: .6rem 1.1rem;
		min-height: 44px;
	}
}

.rwk-footer {
	background: var(--rwk-ink);
	color: rgba(255, 255, 255, .78);
	margin-top: 0;
}

.rwk-footer__grid {
	display: grid;
	gap: var(--rwk-sp-4);
	padding-block: var(--rwk-sp-5);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.rwk-footer__nama {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--rwk-surface);
	margin: 0 0 var(--rwk-sp-1);
}

.rwk-footer__judul {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--rwk-sun);
	margin: 0 0 var(--rwk-sp-2);
}

.rwk-footer__teks {
	font-size: var(--rwk-t-kecil);
	margin: 0 0 .4rem;
}

.rwk-footer__teks a {
	text-decoration: none;
}

.rwk-footer__teks a:hover {
	color: var(--rwk-sun);
}

.rwk-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--rwk-t-kecil);
}

.rwk-footer__menu a {
	display: block;
	padding: .25rem 0;
	text-decoration: none;
}

.rwk-footer__menu a:hover {
	color: var(--rwk-sun);
}

.rwk-footer__bawah {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem var(--rwk-sp-3);
	padding-block: var(--rwk-sp-3);
	border-top: 1px solid rgba(255, 255, 255, .12);
	font-size: var(--rwk-t-kecil);
}

.rwk-footer__bawah > * {
	margin: 0;
}

/*
 * Kredit pembuat situs.
 *
 * Sengaja diredupkan. Ini kredit, bukan ajakan — kalau kontrasnya disamakan
 * dengan nama bisnis klien di sebelahnya, dua-duanya jadi bersaing dan yang
 * kalah justru nama kliennya sendiri di footer situsnya sendiri.
 */
.rwk-footer__kredit {
	color: rgba(255, 255, 255, .5);
	font-size: var(--rwk-t-mikro);
	letter-spacing: .02em;
}

.rwk-footer__kredit a {
	/* inline-block + padding vertikal menaikkan target sentuh dari 17px ke
	   sekitar 25px, memenuhi batas minimum WCAG 2.2, tanpa mengubah
	   tampilannya sedikit pun. */
	display: inline-block;
	padding-block: 4px;
	color: rgba(255, 255, 255, .78);
	font-weight: 650;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .28);
	transition: color .18s ease, border-color .18s ease;
}

.rwk-footer__kredit a:hover,
.rwk-footer__kredit a:focus-visible {
	color: #fff;
	border-bottom-color: var(--rwk-spark);
}

/* Bar CTA lengket menutupi bagian bawah halaman di mobile. */
@media (max-width: 767px) {
	body.rwk-silo {
		padding-bottom: 72px;
	}
}

/* ---------------------------------------------------------------
 * Breadcrumb
 * --------------------------------------------------------------- */

.rwk-breadcrumb {
	background: var(--rwk-surface);
	border-bottom: 1px solid var(--rwk-line);
	font-size: var(--rwk-t-kecil);
}

.rwk-breadcrumb__list {
	list-style: none;
	margin: 0;
	padding: .75rem 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
	color: var(--rwk-steel);
}

.rwk-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}

/* Pemisah memakai bilah miring — motif yang sama dengan shade-rule,
   supaya elemen kecil ini tetap terasa bagian dari sistem yang sama. */
.rwk-breadcrumb__item + .rwk-breadcrumb__item::before {
	content: "";
	width: 1px;
	height: 11px;
	background: var(--rwk-line);
	transform: rotate(20deg);
	margin-right: .25rem;
}

.rwk-breadcrumb a {
	color: var(--rwk-steel);
	text-decoration: none;
}

.rwk-breadcrumb a:hover,
.rwk-breadcrumb a:focus-visible {
	color: var(--rwk-spark);
	text-decoration: underline;
	text-underline-offset: .18em;
}

.rwk-breadcrumb [aria-current="page"] {
	color: var(--rwk-ink);
	font-weight: 600;
}

/* Markup Yoast memakai <span> polos, bukan <ol>. */
.rwk-breadcrumb__list > span {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
}

/* ---------------------------------------------------------------
 * Tipografi: mandiri vs warisi tema
 *
 * Aturan font sengaja dikumpulkan di sini dan dijaga oleh
 * :not(.rwk-gaya-tema). Kalau situs disetel mewarisi styling tema,
 * seluruh blok ini tidak berlaku — sehingga aturan tipografi tema
 * yang bekerja, termasuk yang diatur lewat Customizer.
 *
 * Pendekatan ini dipilih daripada menimpa variabel font dengan
 * "inherit": heading kita berupa elemen h1-h3 asli, jadi begitu
 * aturan kita mundur, aturan h1-h3 milik tema langsung berlaku —
 * termasuk font heading yang berbeda dari font body.
 *
 * Ukuran huruf tetap milik plugin, karena skala clamp() kita yang
 * menjaga judul panjang berbahasa Indonesia tidak meluber di layar
 * 360px.
 * --------------------------------------------------------------- */

body.rwk-mode-canvas:not(.rwk-gaya-tema) {
	font-family: var(--rwk-font-body);
}

body:not(.rwk-gaya-tema) .rwk-h1,
body:not(.rwk-gaya-tema) .rwk-h2,
body:not(.rwk-gaya-tema) .rwk-h3,
body:not(.rwk-gaya-tema) .rwk-hero__h1,
body:not(.rwk-gaya-tema) .rwk-kartu__judul,
body:not(.rwk-gaya-tema) .rwk-header__nama,
body:not(.rwk-gaya-tema) .rwk-footer__nama,
body:not(.rwk-gaya-tema) .rwk-cta__judul,
body:not(.rwk-gaya-tema) .rwk-faq__tanya,
body:not(.rwk-gaya-tema) .rwk-keunggulan__judul,
body:not(.rwk-gaya-tema) .rwk-konten h2,
body:not(.rwk-gaya-tema) .rwk-konten h3,
body:not(.rwk-gaya-tema) .rwk-logo__teks,
body:not(.rwk-gaya-tema) .rwk-proses__judul,
body:not(.rwk-gaya-tema) .rwk-kasus__judul,
body:not(.rwk-gaya-tema) .rwk-intro .rwk-prosa p:first-child::first-letter {
	font-family: var(--rwk-font-display);
}

body:not(.rwk-gaya-tema) .rwk-eyebrow,
body:not(.rwk-gaya-tema) .rwk-btn,
body:not(.rwk-gaya-tema) .rwk-banding th {
	font-family: var(--rwk-font-body);
}

/* ---------------------------------------------------------------
 * Irama section
 *
 * Sebelumnya seluruh halaman berlatar putih dan abu muda bergantian,
 * dan itu yang membuatnya terasa datar. Sekarang section CTA dan
 * profil memakai latar gelap, sehingga halaman punya tarikan napas
 * terang - gelap - terang.
 * --------------------------------------------------------------- */

/*
 * Dua section gelap yang bersebelahan.
 *
 * Kalau keduanya memakai padding penuh dan garis tepi masing-masing, batas di
 * antaranya terbaca sebagai kesalahan tata letak — dua kotak gelap yang
 * kebetulan bertumpuk. Padding atas dihapus dan garis tepi dimatikan supaya
 * keduanya terbaca sebagai satu bagian gelap yang memang disengaja.
 *
 * Urutan ini bukan hipotetis: di halaman pilar, proses kerja (biru baja)
 * memang selalu tepat di atas profil singkat (hitam).
 */
/*
 * Hanya section gelap SEWARNA yang boleh kehilangan padding atasnya.
 *
 * Percobaan sebelumnya ikut menghapus padding untuk pasangan biru baja dan
 * hitam. Keduanya berbeda warna, jadi batasnya tetap terlihat — dan teks
 * paragraf pertama jadi menempel persis di garis peralihan. Di halaman pilar
 * itu terlihat seperti section yang terpotong, bukan seperti peralihan yang
 * disengaja.
 */
.rwk-section--ink + .rwk-section--ink {
	padding-top: 0;
}

.rwk-section--baja + .rwk-section--ink::before,
.rwk-section--ink + .rwk-section--baja::before {
	content: none;
}

/* ---------------------------------------------------------------
 * Munculan saat digulir
 *
 * Hanya aktif kalau JavaScript jalan — kelas rwk-js dipasang JS di
 * <html>. Tanpa JS, konten tampil normal dan tidak pernah tersembunyi.
 * --------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.rwk-js .rwk-muncul {
		opacity: 0;
		transform: translate3d(0, 18px, 0);
		transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .3, 1);
	}

	.rwk-js .rwk-muncul.is-tampil {
		opacity: 1;
		transform: none;
	}

	/* Anak grid muncul berurutan, jeda sangat pendek. Lebih dari lima
	   jeda terasa lambat, jadi setelahnya serentak. */
	.rwk-js .rwk-muncul.is-tampil > *:nth-child(1) { transition-delay: 0ms; }
	.rwk-js .rwk-muncul.is-tampil > *:nth-child(2) { transition-delay: 60ms; }
	.rwk-js .rwk-muncul.is-tampil > *:nth-child(3) { transition-delay: 120ms; }
	.rwk-js .rwk-muncul.is-tampil > *:nth-child(4) { transition-delay: 180ms; }
	.rwk-js .rwk-muncul.is-tampil > *:nth-child(5) { transition-delay: 240ms; }
}

/* Kartu di dalam section gelap */
.rwk-section--ink .rwk-kartu__judul {
	color: var(--rwk-surface);
}

.rwk-section--ink .rwk-kartu:hover {
	border-color: rgba(255, 255, 255, .28);
}

.rwk-section--ink .rwk-prosa {
	color: rgba(255, 255, 255, .82);
}

/* ---------------------------------------------------------------
 * Jaring pengaman kontras section gelap
 *
 * Aturan di atas sudah menyetel warna per komponen. Blok ini menutup
 * sisanya: elemen apa pun yang dirender di dalam section gelap — termasuk
 * blok Gutenberg dari editor, yang kelasnya tidak kita kendalikan.
 *
 * Sengaja memakai selektor keturunan, bukan `inherit` pada komponen.
 * Alasannya sama dengan bug judul CTA: pewarisan kalah dari aturan tema
 * yang menargetkan h2 secara langsung, sedangkan aturan ini tidak.
 * --------------------------------------------------------------- */

.rwk-section--ink h1,
.rwk-section--ink h2,
.rwk-section--ink h3,
.rwk-section--ink h4,
.rwk-section--ink strong,
.rwk-section--ink dt {
	color: var(--rwk-surface);
}

.rwk-section--ink p,
.rwk-section--ink li,
.rwk-section--ink dd,
.rwk-section--ink td {
	color: rgba(255, 255, 255, .82);
}

.rwk-section--ink a:not(.rwk-btn) {
	color: var(--rwk-sun);
}

.rwk-section--ink hr,
.rwk-section--ink table,
.rwk-section--ink th,
.rwk-section--ink td {
	border-color: rgba(255, 255, 255, .14);
}

/* ---------------------------------------------------------------
 * Footer: kolom merek, brief, dan media sosial
 * --------------------------------------------------------------- */

.rwk-footer__kolom--merek {
	max-width: 42ch;
}

.rwk-footer__tagline {
	font-size: var(--rwk-t-kecil);
	color: var(--rwk-sun);
	margin: 0 0 var(--rwk-sp-2);
	font-weight: 500;
}

.rwk-footer__brief {
	font-size: var(--rwk-t-kecil);
	line-height: 1.65;
	color: rgba(255, 255, 255, .72);
	margin: 0 0 var(--rwk-sp-3);
}

.rwk-sos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rwk-sos__tautan {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--rwk-radius);
	border: 1px solid rgba(255, 255, 255, .16);
	color: rgba(255, 255, 255, .82);
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.rwk-sos__tautan:hover,
.rwk-sos__tautan:focus-visible {
	background: var(--rwk-spark);
	border-color: var(--rwk-spark);
	color: var(--rwk-ink);
	transform: translateY(-2px);
}

/* WhatsApp dibedakan karena itu jalur kontak utama, bukan sekadar
   tautan profil — pengunjung harus bisa menemukannya lebih cepat. */
.rwk-sos__tautan--whatsapp {
	border-color: rgba(255, 255, 255, .38);
	color: #fff;
}

.rwk-sos__ikon {
	display: block;
}