/*
 * Raja Web Klaten Silo Builder — CSS inti
 *
 * Aturan yang dipegang di seluruh file:
 * 1. Custom property WAJIB di :root, bukan di wrapper. Kalau di-scope ke
 *    wrapper, styling jebol begitu ada blok yang dirender di luar wrapper.
 * 2. Padding vertikal hanya di .rwk-section. Tidak pernah di komponen dalamnya.
 * 3. Tidak ada selektor elemen telanjang. Semua berprefix rwk-.
 * 4. Maksimal dua level nesting.
 */

/* ---------------------------------------------------------------
 * Token
 * --------------------------------------------------------------- */

:root {
	/*
	 * Palet — diambil dari material dan lingkungan kerja bengkel las:
	 * baja galvanis, oranye keselamatan proyek, dan warna naungan.
	 *
	 * Versi 1.2 menambah dua hal yang sebelumnya tidak ada, dan ketiadaannya
	 * itu yang membuat halaman terbaca sebagai dokumen, bukan sebagai situs:
	 *
	 * 1. Permukaan bertingkat. Sebelumnya cuma putih, abu, dan hitam — tiga
	 *    nilai, sehingga delapan section berderet punya bobot visual identik.
	 * 2. Warna kedua. Oranye sendirian harus melayani aksen, penekanan, DAN
	 *    ajakan bertindak sekaligus; akibatnya tidak ada yang benar-benar
	 *    menonjol. Biru baja mengambil peran aksen struktural, dan oranye
	 *    dikembalikan ke tugas aslinya: hanya untuk hal yang ingin diklik.
	 */

	/* Netral */
	--rwk-ink: #0b1014;
	--rwk-ink-2: #151d24;
	--rwk-ink-3: #1e2830;
	--rwk-ink-80: rgba(11, 16, 20, .8);
	--rwk-steel: #57636e;
	--rwk-steel-2: #7d8894;
	--rwk-mist: #eef1f4;
	--rwk-mist-2: #f7f9fa;
	--rwk-surface: #ffffff;
	/* Putih kehangatan sedikit. Dipakai untuk section yang bersebelahan
	   dengan putih murni — bedanya nyaris tak sadar dilihat, tapi cukup
	   untuk membuat batas section terbaca tanpa garis. */
	--rwk-surface-2: #fbfaf9;
	--rwk-line: #dfe5ea;
	--rwk-line-2: #eceff2;

	/*
	 * Aksi — oranye keselamatan. Hanya untuk yang bisa diklik.
	 *
	 * SELURUH warna oranye di berkas ini WAJIB diturunkan dari empat token
	 * pertama di bawah, tidak boleh ditulis sebagai nilai literal.
	 *
	 * Alasannya bukan kerapian. Pengaturan → Warna aksen situs bekerja dengan
	 * menimpa token-token ini lewat inline style. Setiap oranye yang dipatok
	 * langsung akan mengabaikan pilihan itu — dan di 1.2.0 itulah yang terjadi:
	 * gradien tombol, tint, dan bayangannya semua memakai hex literal, jadi
	 * mengganti warna aksen nyaris tidak terlihat efeknya.
	 *
	 * --rwk-spark-rgb ada supaya rgba() bisa dipakai tanpa color-mix, yang
	 * belum tentu didukung browser di ponsel lawas.
	 */
	--rwk-spark: #ff6a00;
	--rwk-spark-rgb: 255, 106, 0;
	--rwk-spark-gelap: #d95400;
	--rwk-spark-terang: #ff9838;
	--rwk-spark-tint: rgba(var(--rwk-spark-rgb), .09);
	--rwk-sun: #ffc94a;

	/* Struktur — biru baja galvanis. Untuk aksen yang BUKAN ajakan klik:
	   label, ikon, garis penekanan, latar bernuansa. */
	--rwk-baja: #1f4d63;
	--rwk-baja-2: #2c6a86;
	--rwk-baja-terang: #6fa3b8;
	--rwk-baja-tint: #eef4f7;

	/* Gradien. Ditulis sebagai token supaya arah dan titik hentinya sama di
	   mana pun dipakai — gradien yang sudutnya berbeda-beda per komponen
	   justru terbaca sebagai ketidaksengajaan. */
	--rwk-grad-spark: linear-gradient(135deg, var(--rwk-spark-terang) 0%, var(--rwk-spark) 52%, var(--rwk-spark-gelap) 100%);
	--rwk-grad-ink: linear-gradient(158deg, #1e2830 0%, #131b22 45%, #0b1014 100%);
	--rwk-grad-baja: linear-gradient(158deg, #2c6a86 0%, #1f4d63 55%, #163a4b 100%);
	--rwk-grad-mist: linear-gradient(180deg, #ffffff 0%, #f2f5f7 100%);

	/* Tipografi */
	--rwk-font-display: "Bricolage Grotesque", "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
	--rwk-font-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--rwk-font-data: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--rwk-t-display: clamp(2.5rem, 1.5rem + 4.4vw, 4.75rem);
	--rwk-t-h1: clamp(2.125rem, 1.35rem + 3.2vw, 3.75rem);
	--rwk-t-h2: clamp(1.625rem, 1.2rem + 1.85vw, 2.625rem);
	--rwk-t-h3: clamp(1.1875rem, 1.05rem + .65vw, 1.5rem);
	/*
	 * Jarak huruf judul.
	 *
	 * Jadi token karena nilainya bergantung hurufnya. Nilai negatif merapatkan
	 * grotesque lebar seperti Bricolage; diterapkan ke huruf condensed seperti
	 * Oswald, hurufnya justru saling menempel dan judulnya jadi sulit dibaca.
	 */
	--rwk-lacak-judul: -.02em;

	--rwk-t-body: clamp(1rem, .97rem + .18vw, 1.0938rem);
	--rwk-t-kecil: .875rem;
	--rwk-t-mikro: .75rem;

	/*
	 * Spacing.
	 *
	 * Jarak besar diturunkan dari --rwk-skala supaya preset kepadatan bisa
	 * merapatkan atau melonggarkan seluruh halaman lewat satu angka.
	 *
	 * sp-1 dan sp-2 sengaja TIDAK ikut diskalakan. Keduanya dipakai untuk
	 * jarak antar baris teks dan padding tombol; mengecilkannya bukan
	 * merapatkan tampilan, tapi merusak keterbacaan dan target sentuh.
	 */
	--rwk-skala: 1;

	--rwk-sp-1: .5rem;
	--rwk-sp-2: 1rem;
	--rwk-sp-3: calc(1.5rem * var(--rwk-skala));
	--rwk-sp-4: calc(2.5rem * var(--rwk-skala));
	--rwk-sp-5: calc(4rem * var(--rwk-skala));
	--rwk-sp-6: calc(6rem * var(--rwk-skala));
	--rwk-sp-7: calc(8rem * var(--rwk-skala));

	/* Layout */
	--rwk-wrap: 1220px;
	--rwk-wrap-sempit: 760px;

	/*
	 * Skala radius.
	 *
	 * Sebelumnya satu nilai, 4px, dipakai untuk kartu sebesar apa pun sampai
	 * badge sekecil apa pun. Sudut setajam itu membuat semuanya terbaca
	 * seperti tabel. Sekarang berskala: makin besar permukaannya, makin
	 * besar radiusnya — itu yang membuat sudut terlihat disengaja.
	 */
	--rwk-radius-xs: 6px;
	--rwk-radius-sm: 10px;
	--rwk-radius: 14px;
	--rwk-radius-lg: 22px;
	--rwk-radius-xl: 32px;
	--rwk-radius-pil: 999px;

	/*
	 * Empat tingkat kedalaman. Bayangan dibuat dua lapis — satu rapat untuk
	 * tepi, satu lebar untuk jarak — supaya kartu terlihat terangkat, bukan
	 * sekadar berbayang kabur.
	 */
	--rwk-elev-1: 0 1px 2px rgba(11, 16, 20, .05), 0 2px 8px rgba(11, 16, 20, .04);
	--rwk-elev-2: 0 2px 4px rgba(11, 16, 20, .06), 0 14px 34px rgba(11, 16, 20, .10);
	--rwk-elev-3: 0 4px 8px rgba(11, 16, 20, .08), 0 28px 64px rgba(11, 16, 20, .18);
	--rwk-elev-4: 0 8px 16px rgba(11, 16, 20, .10), 0 44px 96px rgba(11, 16, 20, .24);
	--rwk-elev-spark: 0 2px 6px rgba(11, 16, 20, .12), 0 12px 28px rgba(var(--rwk-spark-rgb), .28);
	--rwk-shadow: var(--rwk-elev-2);

	/*
	 * Motif tanda tangan — bilah kanopi. Sudut dan kerapatannya diubah per
	 * silo di bawah; bentuk motifnya sendiri diubah lewat preset.
	 *
	 * Seluruh gambar motif ditaruh di satu token supaya preset bisa
	 * menggantinya dengan kisi, titik, atau tanpa motif sama sekali — tanpa
	 * menyentuh satu pun aturan komponen yang memakainya.
	 */
	--rwk-slat-sudut: 14deg;
	--rwk-slat-jarak: 8px;
	--rwk-slat-warna: rgba(11, 16, 20, .055);

	--rwk-motif: repeating-linear-gradient(
		var(--rwk-slat-sudut),
		var(--rwk-slat-warna) 0 1px,
		transparent 1px var(--rwk-slat-jarak)
	);
	--rwk-motif-ukuran: auto;

	--rwk-rule-motif: repeating-linear-gradient(
		var(--rwk-slat-sudut),
		var(--rwk-spark) 0 1px,
		transparent 1px var(--rwk-slat-jarak)
	);

	--rwk-cahaya-motif: repeating-linear-gradient(
		calc(var(--rwk-slat-sudut) + 62deg),
		rgba(255, 255, 255, .13) 0 2px,
		rgba(255, 255, 255, .04) 2px 5px,
		transparent 5px calc(var(--rwk-slat-jarak) * 2.6)
	);
	--rwk-cahaya-ukuran: auto;
}

.rwk-silo-produk {
	--rwk-slat-sudut: 14deg;
	--rwk-slat-jarak: 8px;
}

.rwk-silo-klien {
	--rwk-slat-sudut: 0deg;
	--rwk-slat-jarak: 16px;
}

.rwk-silo-lokasi {
	--rwk-slat-sudut: 26deg;
	--rwk-slat-jarak: 12px;
}

/* Font opsional. Letakkan file woff2 di assets/fonts/.
   Kalau file tidak ada, browser jatuh ke stack sistem tanpa error. */
@font-face {
	font-family: "Bricolage Grotesque";
	src: url("../fonts/bricolage-grotesque.woff2") format("woff2");
	/* Rentang bobot harus mencakup seluruh sumbu wght berkas variabelnya.
	   Kalau dipersempit, browser mensintesis bobot di luar rentang dengan
	   menebalkan garis secara kasar — hasilnya kotor di ukuran besar. */
	font-weight: 200 800;
	font-stretch: 75% 100%;
	font-display: swap;
	font-style: normal;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter Tight";
	src: url("../fonts/inter-tight.woff2") format("woff2");
	font-weight: 300 700;
	font-display: swap;
	font-style: normal;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Huruf preset tambahan.
 *
 * Dideklarasikan selalu, apa pun preset yang aktif. Browser hanya mengunduh
 * berkas yang benar-benar dirujuk oleh --rwk-font-display, jadi deklarasi yang
 * tidak terpakai tidak membebani pengunjung sama sekali — yang bertambah cuma
 * satu setengah kilobyte teks CSS.
 */
@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces.woff2") format("woff2");
	font-weight: 300 800;
	font-display: swap;
	font-style: normal;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Oswald";
	src: url("../fonts/oswald.woff2") format("woff2");
	font-weight: 300 700;
	font-display: swap;
	font-style: normal;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------
 * Reset seperlunya
 * --------------------------------------------------------------- */

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

/*
 * Item flex dan jalur grid boleh menyusut di bawah isinya.
 *
 * Bawaan CSS memberi tiap item flex dan tiap jalur grid lantai setinggi
 * min-content — lebar kata terpanjang di dalamnya. Lantai itu MENOLAK
 * ditembus, jadi satu kata panjang di dalam kepala grid, dl profil, item FAQ,
 * atau label formulir membuat seluruh kolomnya melebar melewati layar. Teksnya
 * sendiri sudah rapi dipenggal; yang tidak mau menyusut adalah kotaknya.
 *
 * Ditaruh di reset supaya urutan sumber menyelesaikan bentroknya sendiri:
 * empat tempat yang memang butuh lebar minimum — tabel banding, kartu sibling,
 * kolom galeri, menu tempel — semuanya ditulis di berkas yang dimuat SESUDAH
 * berkas ini, jadi mereka tetap menang dengan spesifisitas yang sama.
 */
.rwk-silo * {
	min-width: 0;
}

body.rwk-mode-canvas {
	margin: 0;
	font-size: var(--rwk-t-body);
	line-height: 1.65;
	color: var(--rwk-ink);
	background: var(--rwk-surface);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

/*
 * Teks panjang tanpa spasi tidak boleh mendorong halaman.
 *
 * Semua isi yang diketik manusia lewat sini: intro, konten bebas, FAQ,
 * testimoni, spesifikasi. Satu alamat email, satu URL yang ditempel tanpa
 * dijadikan tautan, atau satu nama material yang terlanjur diketik tanpa spasi
 * sudah cukup untuk membuat SATU baris lebih lebar daripada layar — dan begitu
 * satu baris lebih lebar, seluruh halaman ikut bisa digeser ke samping di
 * ponsel. Section lain yang sebenarnya baik-baik saja ikut terlihat rusak.
 *
 * Pemenggalan hanya terjadi kalau katanya memang tidak muat. Kalimat normal
 * tidak berubah sedikit pun.
 *
 * Ditulis per elemen, bukan `.rwk-silo *`. Selektor bintang ikut mengenai
 * pembungkus flex dan grid, dan di sana properti ini ikut mengubah cara kotak
 * dihitung — bukan cuma cara teksnya dipenggal.
 */
.rwk-silo p,
.rwk-silo li,
.rwk-silo dt,
.rwk-silo dd,
.rwk-silo td,
.rwk-silo th,
.rwk-silo h1,
.rwk-silo h2,
.rwk-silo h3,
.rwk-silo h4,
.rwk-silo h5,
.rwk-silo h6,
.rwk-silo blockquote,
.rwk-silo figcaption,
.rwk-silo summary,
.rwk-silo label,
.rwk-silo address,
.rwk-silo code,
.rwk-silo kbd,
.rwk-silo samp,
/*
 * Tautan, tombol, dan span ikut.
 *
 * Teks di dalamnya sama-sama diketik pengguna — label CTA dari Pengaturan,
 * nama menu, nilai badge kepercayaan — dan ketiganya sempat terlewat karena
 * isinya simpul teks telanjang, bukan elemen. Pemindai yang mencari elemen
 * meluber tidak akan pernah melihatnya: yang keluar dari halaman adalah
 * teksnya, sementara kotak tombolnya tetap rapi di dalam layar.
 */
.rwk-silo a,
.rwk-silo button,
.rwk-silo span,
.rwk-silo strong,
.rwk-silo em,
.rwk-silo small,
.rwk-silo time {
	/*
	 * `break-word`, BUKAN `anywhere`.
	 *
	 * Keduanya sama-sama menutup lubang ini. Bedanya `anywhere` juga
	 * mengecilkan lebar-minimum yang dilaporkan elemennya, dan lebar-minimum
	 * itu dipakai jauh dari sini: ia lantai bagi item flex dan jalur grid.
	 *
	 * Diukur di pratinjau, `anywhere` menggeser 284 dari 324 elemen di satu
	 * halaman — menu geser 8px, satu section turun 25px — pada isi yang sama
	 * sekali normal. Perbaikan yang menggeser tata letak halaman yang sudah
	 * tayang bukan perbaikan.
	 *
	 * Jalur grid yang menolak menyusut ditangani di tempatnya sendiri, dengan
	 * `minmax(0, 1fr)` dan `min-width: 0`, bukan dari sini.
	 */
	overflow-wrap: break-word;
}

/*
 * Kolom isian tidak boleh lebih lebar daripada tempatnya.
 *
 * <input> punya lebar bawaan dari atribut `size`, dan lebar itu tidak peduli
 * sama sekali pada lebar induknya. Di formulir WhatsApp, satu input bawaan
 * sudah cukup melebihi layar ponsel.
 */
.rwk-silo input,
.rwk-silo select,
.rwk-silo textarea,
.rwk-silo button {
	max-width: 100%;
}

/*
 * Wadah flex yang isinya simpul teks telanjang.
 *
 * Teks langsung di dalam wadah flex jadi "item flex anonim", dan item anonim
 * tidak bisa disasar selektor apa pun — `min-width: 0` di atas tidak
 * menjangkaunya. Kotaknya boleh terkunci selebar layar, teks di dalamnya tetap
 * keluar: diukur, tombol selebar 327px dengan teks yang berakhir di 438px.
 *
 * Semua yang didaftar memuat teks yang diketik pengguna — label CTA dari
 * Pengaturan, eyebrow, nama pemberi testimoni, nilai badge, nama wilayah.
 *
 * `anywhere`, bukan `break-word`: hanya `anywhere` yang ikut mengecilkan
 * lebar-minimum, dan lebar-minimum itulah yang menahan item anonim tersebut.
 * Daftarnya sengaja tidak menyentuh header maupun menu — keduanya tidak memuat
 * teks bebas, jadi tidak ada yang perlu diselamatkan di sana.
 */
.rwk-silo .rwk-btn,
.rwk-silo .rwk-eyebrow,
.rwk-silo .rwk-kartu__panah,
.rwk-silo .rwk-testi__nama,
.rwk-silo .rwk-trust__nilai,
.rwk-silo .rwk-trust__label,
.rwk-silo .rwk-area-pil__item,
.rwk-silo .rwk-logo__item,
.rwk-silo .rwk-faq__tanya,
.rwk-silo .rwk-grid-anak__jumlah,
.rwk-silo .rwk-area-jumlah {
	max-width: 100%;
	overflow-wrap: anywhere;
}

/*
 * Teks praformat.
 *
 * <pre> mempertahankan baris apa adanya, jadi satu baris panjang yang ditempel
 * dari tempat lain keluar dari halaman tanpa perlawanan sama sekali. Ini yang
 * paling parah dari semua kasus: satu <pre> membuat halaman 755px di layar
 * 375px.
 *
 * Membungkusnya menutup kasus yang umum; gulir sendiri menutup sisanya, untuk
 * baris yang memang tidak boleh dipenggal.
 */
.rwk-silo pre {
	white-space: pre-wrap;
	overflow-x: auto;
	max-width: 100%;
}

/*
 * Tabel yang datang dari editor.
 *
 * Tabel milik section sendiri (banding) sudah punya pembungkus bergulir. Yang
 * ini untuk tabel yang ditempel ke isi bebas, yang tidak punya pembungkus apa
 * pun dan tidak bisa diberi satu tanpa menyentuh isi tulisan penggunanya.
 */
.rwk-konten table,
.rwk-prosa table {
	display: block;
	width: 100%;
	overflow-x: auto;
}

/*
 * Reset warna tautan, dibungkus :where() supaya spesifisitasnya nol.
 *
 * Versi sebelumnya ditulis sebagai `.rwk-silo a` — spesifisitas (0,1,1), yang
 * ternyata LEBIH TINGGI daripada `.rwk-btn--primer` maupun `.rwk-btn--sekunder`
 * yang keduanya (0,1,0). Akibatnya setiap tombol mewarisi warna induknya, dan
 * itu tidak terlihat di section terang karena warisannya kebetulan sama dengan
 * yang dimaksud.
 *
 * Di section gelap akibatnya nyata: tombol sekunder jadi putih di atas latar
 * putih — hilang sama sekali — dan tombol utama jadi teks putih di atas oranye,
 * padahal warna gelap dipilih justru karena kontrasnya jauh lebih aman.
 *
 * :where() membuat reset ini kalah dari aturan apa pun yang menyebut warna
 * secara sengaja, termasuk warna hover pada pil.
 */
:where(.rwk-silo a) {
	color: inherit;
}

/* ---------------------------------------------------------------
 * Layout
 * --------------------------------------------------------------- */

.rwk-wrap {
	width: 100%;
	max-width: var(--rwk-wrap);
	margin-inline: auto;
	padding-inline: var(--rwk-sp-3);
}

.rwk-wrap--sempit {
	max-width: var(--rwk-wrap-sempit);
}

/* Satu-satunya tempat padding vertikal antar-blok diatur. */
.rwk-section {
	padding-block: var(--rwk-sp-5);
	position: relative;
	/* Section yang punya latar sendiri harus menumpuk di atas elemen
	   melayang milik section sebelumnya, bukan tertimpa olehnya. */
	isolation: isolate;
}

.rwk-section--rapat {
	padding-block: var(--rwk-sp-4);
}

.rwk-section--lega {
	padding-block: var(--rwk-sp-6);
}

.rwk-section--mist {
	background: var(--rwk-mist);
}

/*
 * Varian latar.
 *
 * Sebelumnya hanya ada tiga: putih, abu, hitam. Delapan section berderet
 * dengan tiga nilai latar membuat halaman terbaca rata — tidak ada yang
 * memberi tahu mata di mana satu bagian berakhir dan bagian lain mulai.
 *
 * Lima varian di bawah dipakai bergantian, dan aturannya cuma satu: dua
 * section bersebelahan tidak boleh memakai varian yang sama.
 */

.rwk-section--hangat {
	background: var(--rwk-surface-2);
}

.rwk-section--gradien {
	background: var(--rwk-grad-mist);
}

.rwk-section--baja {
	background: var(--rwk-grad-baja);
	color: rgba(255, 255, 255, .82);
}

.rwk-section--baja .rwk-h2,
.rwk-section--baja .rwk-h3 {
	color: #fff;
}

.rwk-section--baja .rwk-eyebrow {
	background: rgba(255, 255, 255, .12);
	color: #fff;
}

.rwk-section--baja .rwk-lead {
	color: rgba(255, 255, 255, .74);
}

.rwk-section--ink {
	background: var(--rwk-grad-ink);
	color: rgba(255, 255, 255, .78);
	position: relative;
	isolation: isolate;
}

/*
 * Cahaya sudut di section gelap. Satu lingkaran gradien besar di kiri atas,
 * meniru sinar yang masuk lewat celah bilah. Tanpa ini, blok gelap sebesar
 * layar terbaca sebagai kotak hitam mati — dan itulah yang terjadi di versi
 * sebelumnya.
 */
.rwk-section--ink::after,
.rwk-section--baja::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(58% 78% at 8% 0%, rgba(var(--rwk-spark-rgb), .16) 0%, transparent 62%),
		radial-gradient(46% 62% at 96% 100%, rgba(111, 163, 184, .14) 0%, transparent 60%);
}

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

.rwk-section--ink .rwk-lead,
.rwk-section--ink .rwk-kartu__teks {
	color: rgba(255, 255, 255, .72);
}

/*
 * Tepi cahaya: garis tipis di batas atas section gelap, meniru sisi bilah
 * yang tersorot matahari. Menggantikan garis pemisah datar, dan yang bikin
 * peralihan terang ke gelap terasa disengaja.
 */
.rwk-section--tepi {
	position: relative;
}

.rwk-section--tepi::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--rwk-spark) 22%,
		var(--rwk-sun) 50%,
		var(--rwk-spark) 78%,
		transparent
	);
	opacity: .85;
}

@media (min-width: 1024px) {
	.rwk-section {
		padding-block: var(--rwk-sp-6);
	}
}

/* ---------------------------------------------------------------
 * Motif tanda tangan: shade-rule
 * --------------------------------------------------------------- */

.rwk-shade {
	position: relative;
}

.rwk-shade::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: var(--rwk-motif);
	background-size: var(--rwk-motif-ukuran);
}

.rwk-section--ink .rwk-shade::before,
.rwk-shade--terang::before {
	--rwk-slat-warna: rgba(255, 255, 255, .08);
}

/* Garis pemisah antar section, memakai motif yang sama dalam bentuk pipih. */
.rwk-rule {
	height: 6px;
	border: 0;
	margin: 0;
	background-image: var(--rwk-rule-motif);
	opacity: .55;
}

/* ---------------------------------------------------------------
 * Tipografi
 * --------------------------------------------------------------- */

.rwk-h1,
.rwk-h2,
.rwk-h3 {
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: var(--rwk-lacak-judul);
	margin: 0;
	/* Kata Indonesia panjang ("pemasangan", "kabupaten") tidak boleh meluber
	   di layar 360px. */
	overflow-wrap: break-word;
	hyphens: auto;
}

.rwk-h1 {
	font-size: var(--rwk-t-h1);
	font-weight: 800;
}

.rwk-h2 {
	font-size: var(--rwk-t-h2);
}

.rwk-h3 {
	font-size: var(--rwk-t-h3);
	font-weight: 600;
	letter-spacing: -.01em;
}

/*
 * Eyebrow sekarang lencana, bukan teks bergaris.
 *
 * Warnanya biru baja, bukan oranye. Sebelumnya eyebrow dan tombol CTA sama-
 * sama oranye, jadi mata harus memilah mana yang bisa diklik — padahal
 * eyebrow tidak bisa. Oranye dikembalikan khusus untuk yang bisa diklik.
 */
.rwk-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .4rem .85rem .4rem .7rem;
	border-radius: var(--rwk-radius-pil);
	background: var(--rwk-baja-tint);
	font-size: var(--rwk-t-mikro);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--rwk-baja);
	margin: 0 0 var(--rwk-sp-2);
}

.rwk-eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--rwk-spark);
	flex: none;
}

.rwk-lead {
	font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
	color: var(--rwk-steel);
	margin: var(--rwk-sp-2) 0 0;
	max-width: 58ch;
}

.rwk-prosa > *:first-child {
	margin-top: 0;
}

.rwk-prosa > *:last-child {
	margin-bottom: 0;
}

.rwk-prosa p {
	margin: 0 0 var(--rwk-sp-2);
	max-width: 68ch;
}

.rwk-data {
	font-family: var(--rwk-font-data);
	font-size: var(--rwk-t-kecil);
	font-variant-numeric: tabular-nums;
}

/*
 * Judul blok dengan penanda batang pendek di atasnya.
 *
 * Sebelumnya penandanya garis putus-putus oranye — empat strip pendek yang
 * dari jarak baca normal terbaca seperti elemen yang gagal dimuat, bukan
 * seperti hiasan. Diganti satu batang utuh bergradien: bentuk yang sama
 * dengan garis di bawah tombol dan di tepi kartu, jadi ketiganya terbaca
 * sebagai satu keluarga.
 */
.rwk-judul-blok {
	position: relative;
	margin-bottom: var(--rwk-sp-4);
	max-width: 46ch;
}

.rwk-judul-blok::before {
	content: "";
	display: block;
	width: 48px;
	height: 4px;
	margin-bottom: var(--rwk-sp-2);
	border-radius: var(--rwk-radius-pil);
	background: var(--rwk-grad-spark);
}

/* Di section gelap batangnya dibuat lebih terang supaya tetap terbaca. */
.rwk-section--ink .rwk-judul-blok::before,
.rwk-section--baja .rwk-judul-blok::before {
	background: linear-gradient(135deg, var(--rwk-sun) 0%, var(--rwk-spark) 100%);
}

/* ---------------------------------------------------------------
 * Tombol
 * --------------------------------------------------------------- */

.rwk-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .9rem 1.65rem;
	font-family: var(--rwk-font-body);
	font-size: var(--rwk-t-body);
	font-weight: 650;
	line-height: 1.2;
	letter-spacing: -.005em;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: var(--rwk-radius-pil);
	cursor: pointer;
	transition: transform .18s cubic-bezier(.2, .7, .3, 1), box-shadow .18s ease,
		background-color .15s ease, border-color .15s ease;
	min-height: 52px;
}

.rwk-btn:active {
	transform: translateY(1px);
}

/*
 * Tombol utama memakai gradien, bukan warna datar.
 *
 * Bukan demi hiasan: satu bidang oranye rata seluas tombol terbaca sebagai
 * stiker yang ditempel. Gradien miring 135 derajat memberi arah cahaya yang
 * sama dengan bayangannya, jadi tombol terbaca sebagai benda yang terangkat.
 */
.rwk-btn--primer {
	background: var(--rwk-grad-spark);
	/* Teks gelap di atas oranye, bukan putih — kontrasnya jauh lebih aman. */
	color: var(--rwk-ink);
	border-color: transparent;
	box-shadow: var(--rwk-elev-spark);
}

.rwk-btn--primer:hover,
.rwk-btn--primer:focus-visible {
	/* Hover memakai gradien yang sama, cuma digeser lebih terang lewat
	   filter — supaya tidak perlu menulis tiga hex literal lagi. */
	filter: brightness(1.08);
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(11, 16, 20, .14), 0 18px 40px rgba(var(--rwk-spark-rgb), .34);
}

.rwk-btn--sekunder {
	background: var(--rwk-surface);
	color: var(--rwk-ink);
	border-color: var(--rwk-line);
	box-shadow: var(--rwk-elev-1);
}

.rwk-btn--sekunder:hover,
.rwk-btn--sekunder:focus-visible {
	border-color: var(--rwk-ink);
	transform: translateY(-2px);
	box-shadow: var(--rwk-elev-2);
}

/* Tombol teks — untuk aksi sekunder yang tidak boleh bersaing dengan CTA. */
.rwk-btn--polos {
	background: transparent;
	border-color: transparent;
	color: var(--rwk-spark);
	padding-inline: .5rem;
	box-shadow: none;
}

.rwk-btn--polos:hover,
.rwk-btn--polos:focus-visible {
	color: var(--rwk-spark-gelap);
	gap: .8rem;
}

.rwk-section--ink .rwk-btn--sekunder {
	color: var(--rwk-surface);
	border-color: rgba(255, 255, 255, .35);
}

.rwk-silo a:focus-visible,
.rwk-silo button:focus-visible {
	outline: 3px solid var(--rwk-spark);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------
 * Kartu & grid
 * --------------------------------------------------------------- */

.rwk-grid {
	display: grid;
	gap: var(--rwk-sp-3);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.rwk-grid--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.rwk-kartu {
	display: flex;
	flex-direction: column;
	background: var(--rwk-surface);
	border: 1px solid var(--rwk-line);
	border-radius: var(--rwk-radius-lg);
	overflow: hidden;
	text-decoration: none;
	box-shadow: var(--rwk-elev-1);
	transition: transform .24s cubic-bezier(.2, .7, .3, 1), box-shadow .24s ease, border-color .24s ease;
}

.rwk-kartu:hover,
.rwk-kartu:focus-visible {
	border-color: transparent;
	transform: translateY(-6px);
	box-shadow: var(--rwk-elev-3);
}

/*
 * Garis oranye yang tumbuh dari tepi atas saat kartu disentuh. Menggantikan
 * perubahan warna border keliling, yang di radius besar justru terbaca
 * seperti kartu berkedip.
 */
.rwk-kartu::before {
	content: "";
	position: absolute;
	inset: 0 auto auto 0;
	z-index: 4;
	height: 4px;
	width: 0;
	background: var(--rwk-grad-spark);
	transition: width .32s cubic-bezier(.2, .7, .3, 1);
}

.rwk-kartu:hover::before,
.rwk-kartu:focus-visible::before {
	width: 100%;
}

/* Foto ikut membesar sedikit saat kartu disentuh — gerakan yang menandakan
   kartunya bisa diklik, bukan animasi tambahan. */
.rwk-kartu__media img {
	transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}

.rwk-kartu:hover .rwk-kartu__media img {
	transform: scale(1.05);
}

/*
 * Ajakan di kaki kartu.
 *
 * Dulu ini teks oranye polos dengan panah, dan gerakan satu-satunya adalah
 * jarak panahnya melebar saat kartu disentuh. Di dalam kartu yang seluruh
 * bidangnya bisa diklik, teks tanpa bentuk terbaca sebagai keterangan — bukan
 * sebagai tombol. Akibatnya kartu tidak punya satu pun titik yang jelas
 * mengatakan "ini yang ditekan", dan di layar sentuh tidak ada keadaan hover
 * yang bisa menggantikannya.
 *
 * Bingkai pil memberi bentuk itu tanpa menambah tautan baru: elemennya tetap
 * <span>, karena <a> di dalam <a> bukan HTML yang sah dan pembaca layar akan
 * membacanya sebagai dua tautan untuk satu tujuan yang sama.
 *
 * Lebarnya mengikuti isi, bukan selebar kartu. Tombol selebar kartu bersaing
 * dengan tombol ajakan utama di kaki halaman, padahal ini aksi sekunder.
 */
.rwk-kartu__panah {
	align-self: flex-start;
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .6rem 1.1rem;
	border: 1.5px solid var(--rwk-spark);
	border-radius: var(--rwk-radius-pil);
	background: transparent;
	color: var(--rwk-spark);
	font-size: var(--rwk-t-kecil);
	font-weight: 650;
	line-height: 1.2;
	white-space: nowrap;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/*
 * Terisi penuh saat kartunya disentuh, meniru tombol utama: gradien dengan
 * teks gelap, bukan putih.
 *
 * Warna teksnya ditulis eksplisit. Warna yang cuma diwarisi kalah dari
 * deklarasi apa pun di tema — termasuk aturan `a { color }` yang menargetkan
 * pembungkus kartunya — dan itu sudah dua kali membuat tulisan hilang di
 * plugin ini.
 */
.rwk-kartu:hover .rwk-kartu__panah,
.rwk-kartu:focus-visible .rwk-kartu__panah {
	background: var(--rwk-grad-spark);
	border-color: transparent;
	color: var(--rwk-ink);
}

.rwk-section--ink .rwk-kartu {
	background: var(--rwk-ink-2);
	border-color: rgba(255, 255, 255, .1);
	color: var(--rwk-surface);
}

.rwk-kartu__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--rwk-mist);
	overflow: hidden;
}

/* Gelap tipis di kaki foto. Judul kartu yang duduk tepat di bawah foto
   terang jadi punya batas yang jelas tanpa perlu garis. */
.rwk-kartu__media::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 42%;
	pointer-events: none;
	background: linear-gradient(to top, rgba(11, 16, 20, .28), transparent);
}

.rwk-kartu__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rwk-kartu__isi {
	padding: var(--rwk-sp-3);
	display: flex;
	flex-direction: column;
	gap: var(--rwk-sp-1);
	flex: 1;
}

.rwk-kartu__judul {
	font-family: var(--rwk-font-display);
	font-size: 1.1875rem;
	font-weight: 650;
	line-height: 1.22;
	letter-spacing: -.015em;
	margin: 0;
}

.rwk-kartu__teks {
	font-size: var(--rwk-t-kecil);
	color: var(--rwk-steel);
	margin: 0;
}


/* ---------------------------------------------------------------
 * Pil / tag
 * --------------------------------------------------------------- */

.rwk-pil-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rwk-sp-1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.rwk-pil {
	display: inline-block;
	padding: .5rem .95rem;
	border: 1px solid var(--rwk-line);
	border-radius: var(--rwk-radius-pil);
	font-size: var(--rwk-t-kecil);
	font-weight: 550;
	text-decoration: none;
	background: var(--rwk-surface);
	box-shadow: var(--rwk-elev-1);
	transition: border-color .15s ease, color .15s ease,
		transform .18s cubic-bezier(.2, .7, .3, 1), box-shadow .18s ease;
}

.rwk-pil:hover,
.rwk-pil:focus-visible {
	border-color: var(--rwk-spark);
	color: var(--rwk-spark-gelap);
	transform: translateY(-2px);
	box-shadow: var(--rwk-elev-2);
}

/* ---------------------------------------------------------------
 * Embed peta
 *
 * Ada di core.css, bukan di CSS section, karena peta dirender di dua tempat
 * dengan aturan pemuatan berbeda: section Peta & Landmark, dan kolom footer.
 * CSS section hanya dimuat kalau section-nya dipakai — jadi peta footer akan
 * kehilangan gayanya di hampir setiap halaman kalau aturan ini ditaruh di
 * sana.
 * --------------------------------------------------------------- */

.rwk-peta-embed {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--rwk-line);
	border-radius: var(--rwk-radius-lg);
	background: var(--rwk-mist);
	/* Rasio dipatok supaya tempat petanya sudah dipesan sebelum iframe-nya
	   tiba. Tanpa ini, isi di bawahnya melompat saat peta selesai dimuat. */
	aspect-ratio: 4 / 3;
	box-shadow: var(--rwk-elev-1);
}

.rwk-peta-embed iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Versi footer: lebih pendek, dan menyesuaikan latar gelap. */
.rwk-peta-facade--footer {
	aspect-ratio: 3 / 2;
	border-color: rgba(255, 255, 255, .14);
	background: rgba(255, 255, 255, .04);
	box-shadow: none;
}

.rwk-footer__kolom--peta {
	min-width: 220px;
}

/* ---------------------------------------------------------------
 * Aksesibilitas & preferensi pengguna
 * --------------------------------------------------------------- */

.rwk-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--rwk-ink);
	color: var(--rwk-surface);
	padding: var(--rwk-sp-2);
	z-index: 999;
}

.rwk-skip:focus {
	left: 0;
}

.rwk-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.rwk-silo *,
	.rwk-silo *::before,
	.rwk-silo *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------
 * Header & footer mode canvas
 * --------------------------------------------------------------- */


/* Bar CTA lengket dipakai di kedua mode render, jadi tetap di core. */
@media (max-width: 767px) {
	body.rwk-silo {
		padding-bottom: 72px;
	}
}

/* ---------------------------------------------------------------
 * Pita unggulan
 *
 * Pita diagonal di sudut kartu. Dipakai untuk satu halaman saja per
 * silo — kalau semuanya ditandai, tidak ada yang menonjol.
 * --------------------------------------------------------------- */

.rwk-kartu {
	position: relative;
}

.rwk-kartu--unggulan {
	border-color: rgba(var(--rwk-spark-rgb), .45);
	box-shadow: var(--rwk-elev-2), 0 0 0 4px var(--rwk-spark-tint);
}

.rwk-kartu--unggulan::before {
	width: 100%;
}

.rwk-pita {
	position: absolute;
	top: 14px;
	right: -34px;
	z-index: 3;
	width: 132px;
	padding: 5px 0;
	transform: rotate(45deg);
	background: var(--rwk-spark);
	color: var(--rwk-surface);
	text-align: center;
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	box-shadow: 0 4px 12px rgba(15, 20, 25, .22);
	pointer-events: none;
}

/* ---------------------------------------------------------------
 * Kartu melayang di hero
 *
 * Menumpuk ke section berikutnya di layar lebar, sehingga batas antar
 * section tidak terbaca sebagai garis lurus yang kaku.
 * --------------------------------------------------------------- */

/*
 * Kartu ringkas hero.
 *
 * Isinya berjajar, bukan menumpuk. Tiga poin yang ditumpuk vertikal
 * menghasilkan panel putih setinggi hero-nya sendiri — itu yang membuatnya
 * terasa "sangat besar" dan mendominasi seluruh bagian atas halaman.
 * Berjajar, tingginya tinggal sepertiganya dan tetap terbaca sekali pandang.
 */
.rwk-hero__kartu {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
	gap: var(--rwk-sp-3);
	padding: var(--rwk-sp-3);
	background: var(--rwk-surface);
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: var(--rwk-radius-lg);
	box-shadow: var(--rwk-elev-4);
}


.rwk-hero--penuh .rwk-hero__kartu {
	background: rgba(255, 255, 255, .97);
	color: var(--rwk-ink);
}

.rwk-hero__kartu-item {
	position: relative;
	padding-left: var(--rwk-sp-3);
	border-left: 3px solid transparent;
	border-image: var(--rwk-grad-spark) 1;
}

.rwk-hero__kartu-judul {
	font-family: var(--rwk-font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	margin: 0 0 .25rem;
	color: var(--rwk-ink);
}

.rwk-hero__kartu-teks {
	margin: 0;
	font-size: var(--rwk-t-kecil);
	color: var(--rwk-steel);
}

@media (min-width: 1024px) {
	.rwk-hero__kartu {
		margin-bottom: calc(var(--rwk-sp-5) * -1);
		position: relative;
		z-index: 4;
	}

	.rwk-hero--split:has(.rwk-hero__kartu) {
		padding-bottom: var(--rwk-sp-6);
	}
}

/* Daftar bertanda centang, dipakai di kartu dan akordeon. */
.rwk-cek {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rwk-cek li {
	position: relative;
	padding-left: 28px;
	margin-bottom: .5rem;
	font-size: var(--rwk-t-kecil);
	color: var(--rwk-steel);
}

/*
 * Centang duduk di dalam cakram bertint, bukan melayang telanjang. Bentuk
 * bulat memberi centang bobot visual yang cukup untuk terbaca sebagai
 * daftar terverifikasi, bukan sekadar bullet yang kebetulan miring.
 */
.rwk-cek li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--rwk-spark-tint);
}

.rwk-cek li::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 6px;
	width: 5px;
	height: 9px;
	border: solid var(--rwk-spark);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Penanda halaman draft — hanya dirender untuk editor. */
.rwk-draf {
	display: inline-block;
	margin-bottom: .4rem;
	padding: 3px 10px;
	border-radius: var(--rwk-radius-pil);
	background: #8a6d00;
	color: #fff;
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}