/*
 * Kargoin. Diterjemahkan dari Kargoin Design Canvas, artboard 1a sampai 1h.
 *
 * Token diambil apa adanya dari canvas. Jangan menambah warna atau ukuran huruf
 * di luar daftar di :root. Kalau desainnya butuh nilai baru, tambahkan tokennya
 * dulu supaya seluruh situs ikut, bukan menulis nilai lepas di satu selektor.
 *
 * Mobile first. Perilaku ponsel diatur di catatan artboard 1c: kartu moda jadi
 * carousel bergeser, tabel perbandingan jadi kartu bertumpuk, panel rute jadi
 * vertikal. Perilaku itu ada di bagian paling bawah berkas ini.
 *
 * Aturan tata letak yang tidak boleh dilanggar: halaman tidak pernah bergeser
 * mendatar. Yang boleh bergeser hanya wadah yang memang punya overflow-x.
 */

:root {
	/* Tinta dan permukaan */
	--ck-tinta: #1C1F26;
	--ck-tinta-62: rgba(28, 31, 38, 0.62);
	--ck-tinta-50: rgba(28, 31, 38, 0.5);
	--ck-tinta-42: rgba(28, 31, 38, 0.42);
	--ck-tinta-30: rgba(28, 31, 38, 0.3);
	--ck-tinta-12: rgba(28, 31, 38, 0.12);
	--ck-tinta-08: rgba(28, 31, 38, 0.08);

	--ck-terang: #EEF2F5;
	--ck-terang-66: rgba(238, 242, 245, 0.66);
	--ck-terang-55: rgba(238, 242, 245, 0.55);
	--ck-terang-50: rgba(238, 242, 245, 0.5);
	--ck-terang-30: rgba(238, 242, 245, 0.3);
	--ck-putih: #FFFFFF;

	/* Aksen */
	--ck-teal: #12B5A5;
	--ck-teal-gelap: #0E8C7F;
	--ck-teal-muda: #E3F6F3;

	/* Peringatan, dipakai khusus tarif yang sudah lewat ambang */
	--ck-amber: #C9772B;
	--ck-amber-latar: rgba(201, 119, 43, 0.1);
	--ck-amber-garis: rgba(201, 119, 43, 0.4);

	/* Huruf */
	--ck-judul: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ck-teks: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Bentuk */
	--ck-r-kecil: 5px;
	--ck-r: 8px;
	--ck-r-kartu: 10px;
	--ck-r-panel: 12px;

	--ck-lebar: 1440px;
	--ck-sela: 20px;
}

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

body {
	margin: 0;
	background: var(--ck-terang);
	color: var(--ck-tinta);
	font: 400 15px/1.6 var(--ck-teks);
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: var(--ck-teal-gelap);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--ck-teal);
	text-decoration: underline;
}

h1,
h2,
h3 {
	font-family: var(--ck-judul);
	color: var(--ck-tinta);
	letter-spacing: -0.01em;
	text-wrap: balance;
	margin: 0 0 12px;
}

h1 {
	font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.125rem);
	font-weight: 700;
	line-height: 1.15;
}

h2 {
	font-size: clamp(1.125rem, 0.95rem + 0.9vw, 1.625rem);
	font-weight: 700;
	line-height: 1.2;
}

h3 {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}

p {
	margin: 0 0 12px;
}

.ck-ikon {
	flex: none;
	vertical-align: middle;
}

.ck-wadah {
	width: 100%;
	max-width: var(--ck-lebar);
	margin-inline: auto;
	padding-inline: var(--ck-sela);
}

.ck-lewati,
.screen-reader-text {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ck-lewati:focus {
	left: var(--ck-sela);
	top: var(--ck-sela);
	z-index: 20;
	background: var(--ck-putih);
	padding: 10px 14px;
	border-radius: var(--ck-r);
}

/* ---------- Label mata, dipakai di seluruh desain ---------- */

.ck-eyebrow {
	display: block;
	font: 600 11px/1 var(--ck-judul);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ck-tinta-62);
}

/* ---------- Kepala situs ---------- */

.ck-kepala {
	background: var(--ck-putih);
	border-bottom: 1px solid var(--ck-tinta-12);
}

.ck-kepala__isi {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 72px;
}

.ck-merek {
	margin: 0;
	font: 700 20px/1 var(--ck-judul);
}

.ck-merek a {
	color: var(--ck-tinta);
	text-decoration: none;
}

.ck-merek__tld {
	color: var(--ck-teal);
}

.ck-nav ul {
	display: flex;
	align-items: center;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ck-nav a {
	font: 500 14px/1 var(--ck-teks);
	color: var(--ck-tinta);
	text-decoration: none;
}

.ck-nav a:hover {
	color: var(--ck-teal-gelap);
}

.ck-kepala__wa {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 15px;
	border: 1px solid var(--ck-tinta);
	border-radius: var(--ck-r);
	font: 600 13px/1 var(--ck-teks);
	color: var(--ck-tinta);
	white-space: nowrap;
}

.ck-kepala__wa:hover {
	background: var(--ck-tinta);
	color: var(--ck-terang);
	text-decoration: none;
}

/* ---------- Remah roti ---------- */

.ck-remah {
	font: 400 12px/1 var(--ck-teks);
	color: var(--ck-tinta-62);
	padding-block: 16px;
}

.ck-remah ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ck-remah li + li::before {
	content: "/";
	margin-right: 8px;
	color: var(--ck-tinta-30);
}

.ck-remah a {
	color: var(--ck-tinta-62);
}

.ck-remah [aria-current] {
	color: var(--ck-tinta);
	font-weight: 600;
}

/* ---------- Panel rute gelap ---------- */

.ck-panel-rute {
	background: var(--ck-tinta);
	border-radius: var(--ck-r-panel);
	padding: 24px 20px;
	color: var(--ck-terang);
}

.ck-panel-rute h1 {
	color: var(--ck-terang);
	margin-top: 22px;
}

.ck-panel-rute .ck-meta {
	color: var(--ck-terang-66);
}

.ck-panel-rute .ck-meta li + li::before {
	color: var(--ck-terang-30);
}

/* ---------- Garis rute ---------- */

.ck-garis {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: start;
	gap: 14px;
}

.ck-garis__kota {
	min-width: 0;
}

.ck-garis__kota--tujuan {
	text-align: right;
}

.ck-garis__nama {
	font: 600 17px/1.2 var(--ck-judul);
	color: var(--ck-terang);
}

.ck-garis__kode {
	display: block;
	margin-top: 5px;
	font: 700 11px/1.5 var(--ck-judul);
	letter-spacing: 0.2em;
	color: var(--ck-teal);
}

.ck-garis__simpul {
	display: block;
	margin-top: 2px;
	font: 400 12px/1.4 var(--ck-teks);
	color: var(--ck-terang-55);
}

.ck-garis__tengah {
	padding-top: 6px;
	min-width: 90px;
}

.ck-garis__jarak {
	text-align: center;
	font: 700 13px/1 var(--ck-judul);
	letter-spacing: 0.1em;
	color: var(--ck-teal);
	margin-bottom: 10px;
}

.ck-garis__jalur {
	display: flex;
	align-items: center;
}

.ck-garis__titik {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--ck-teal);
	flex: none;
}

.ck-garis__batang {
	flex: 1;
	height: 2px;
	background: var(--ck-teal);
}

.ck-garis__moda {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	color: rgba(238, 242, 245, 0.75);
}

.ck-garis__moda li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 500 11px/1 var(--ck-teks);
}

/* Ukuran besar, dipakai di panel gelap header rute pada layar lebar. */
.ck-garis--besar .ck-garis__titik {
	width: 14px;
	height: 14px;
}

.ck-garis--besar .ck-garis__nama {
	font-size: 22px;
}

/* Ukuran mini, dipakai di daftar dan grid. */
.ck-garis--mini .ck-garis__titik {
	width: 9px;
	height: 9px;
}

.ck-garis--mini .ck-garis__batang {
	opacity: 0.5;
}

/* ---------- Meta halaman ---------- */

.ck-kepala-halaman {
	margin-block: 0 24px;
}

.ck-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	font: 400 13px/1.5 var(--ck-teks);
	color: var(--ck-tinta-62);
}

.ck-meta li + li::before {
	content: "|";
	margin-right: 12px;
	color: var(--ck-tinta-30);
}

.ck-bagian {
	margin-block: 40px;
}

/* Halaman teks panjang seperti Tentang, Kontak, Kebijakan Privasi, dan
   Metodologi. Lebar baca dibatasi supaya matanya tidak kehilangan baris saat
   pindah ke baris berikutnya. Tabel dan gambar boleh melebar sendiri. */
.ck-artikel {
	max-width: 68ch;
	margin-block: 32px 56px;
}

/* Ilustrasi pendamping. Di ponsel gambarnya duduk di atas teks, di layar lebar
   pindah ke kolom kanan dan menempel saat halaman digulir, mengisi ruang yang
   tadinya kosong di samping kolom baca. Gambarnya murni hiasan, jadi alt-nya
   kosong dan bungkusnya aria-hidden. */
.ck-halaman--bergambar {
	display: flex;
	flex-direction: column;
}

.ck-halaman__gambar {
	/* Di ponsel gambar naik ke atas judul. Tanpa ini dia terdampar di dasar
	   halaman setelah teks panjang, jauh dari apa pun yang menjelaskannya. */
	order: -1;
	margin: 8px 0 28px;
	border-radius: var(--ck-r-panel);
	overflow: hidden;
	background: var(--ck-tinta-08);
}

.ck-halaman__gambar img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
}

.ck-artikel h2 {
	margin-top: 32px;
}

.ck-artikel li {
	margin-bottom: 8px;
}

.ck-artikel > table,
.ck-artikel > figure,
.ck-artikel > .ck-tabel-bungkus {
	max-width: none;
}

.ck-catatan {
	max-width: 62ch;
	font: 400 13px/1.6 var(--ck-teks);
	color: var(--ck-tinta-62);
}

.ck-kosong {
	color: var(--ck-tinta-42);
}

.ck-intro,
.ck-intro__ringkas {
	max-width: 62ch;
	font: 400 15px/1.7 var(--ck-teks);
	color: var(--ck-tinta-62);
}

/* ---------- Chip ---------- */

.ck-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 7px;
	border-radius: var(--ck-r-kecil);
	background: var(--ck-terang);
	border: 1px solid var(--ck-tinta-08);
	font: 500 11px/1.2 var(--ck-teks);
	color: var(--ck-tinta-62);
	white-space: normal;
	text-align: left;
}

a.ck-chip:hover {
	border-color: var(--ck-tinta-30);
	color: var(--ck-tinta);
	text-decoration: none;
}

.ck-chip--peringatan {
	padding: 4px 8px;
	background: var(--ck-amber-latar);
	border-color: var(--ck-amber-garis);
	color: var(--ck-amber);
	font-weight: 600;
}

.ck-lencana {
	display: inline-flex;
	align-items: center;
	padding: 4px 7px;
	border-radius: var(--ck-r-kecil);
	background: var(--ck-teal);
	color: var(--ck-putih);
	font: 700 10px/1 var(--ck-judul);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ---------- Angka tarif ----------
 *
 * Struktur kelasnya tetap sama dengan sebelum desain ini masuk, karena
 * bin/audit-situs.php mengenali angka bersumber lewat kelas .ck-tarif dan
 * .ck-estimasi. Yang berubah hanya tampilannya, tergantung konteks kartu atau
 * tabel. Jangan ubah nama kelasnya tanpa ikut mengubah auditnya.
 */

.ck-tarif,
.ck-estimasi {
	display: block;
}

.ck-tarif__angka,
.ck-estimasi__angka {
	display: block;
	font: 600 15px/1.3 var(--ck-judul);
	color: var(--ck-tinta);
	overflow-wrap: break-word;
}

.ck-tarif__satuan {
	font: 600 13px/1 var(--ck-judul);
	color: var(--ck-tinta-62);
}

.ck-tarif__sumber,
.ck-estimasi__sumber {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 6px;
	padding: 3px 7px;
	border-radius: var(--ck-r-kecil);
	background: var(--ck-terang);
	border: 1px solid var(--ck-tinta-08);
	font: 500 11px/1.2 var(--ck-teks);
	color: var(--ck-tinta-62);
}

.ck-tarif__sumber a {
	color: inherit;
}

.ck-tarif__lama,
.ck-estimasi__lama {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 6px;
	padding: 4px 8px;
	border-radius: var(--ck-r-kecil);
	background: var(--ck-amber-latar);
	border: 1px solid var(--ck-amber-garis);
	font: 600 11px/1.2 var(--ck-teks);
	color: var(--ck-amber);
}

/* ---------- Kartu moda ---------- */

.ck-kartu-moda {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin-block: 20px;
}

.ck-kartu-moda > * {
	min-width: 0;
}

.ck-kartu {
	position: relative;
	background: var(--ck-putih);
	border: 1px solid var(--ck-tinta-12);
	border-radius: var(--ck-r-kartu);
	padding: 22px;
}

.ck-kartu--sorot {
	border: 2px solid var(--ck-teal);
	padding: 21px;
}

.ck-kartu__badge {
	position: absolute;
	top: -11px;
	left: 22px;
	background: var(--ck-teal);
	color: var(--ck-putih);
	font: 700 11px/1 var(--ck-judul);
	letter-spacing: 0.1em;
	padding: 6px 10px;
	border-radius: var(--ck-r-kecil);
	text-transform: uppercase;
}

.ck-kartu__judul {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	font: 600 18px/1 var(--ck-judul);
	color: var(--ck-tinta);
}

/* Urutan artboard 1b: nama moda, angka, garis, dua baris rincian, lalu chip
   sumber paling bawah. ck_tarif() mencetak angka dan chip dalam satu bungkus,
   dan bungkus itu tidak boleh dipecah karena aturan situs mewajibkan setiap
   angka lewat satu komponen. display:contents melarutkan bungkusnya jadi anak
   langsung kartu, sehingga order boleh mengatur letaknya tanpa mengubah PHP. */
.ck-kartu-moda .ck-kartu {
	display: flex;
	flex-direction: column;
}

.ck-kartu-moda .ck-kartu__judul {
	order: 1;
}

.ck-kartu-moda .ck-tarif {
	display: contents;
}

.ck-kartu-moda .ck-tarif__angka {
	order: 2;
}

.ck-kartu-moda .ck-kartu__rinci {
	order: 3;
}

.ck-kartu-moda .ck-tarif__sumber {
	order: 4;
}

.ck-kartu-moda .ck-tarif__lama {
	order: 5;
}

/* Angka besar khas kartu moda. */
.ck-kartu .ck-tarif {
	margin-top: 16px;
}

.ck-kartu .ck-tarif__angka {
	margin-top: 16px;
	font: 700 34px/1.1 var(--ck-judul);
}

/* Rentang dua angka, misalnya tarif udara port sampai door to door, tidak muat
   di 34px. Hanya rentang yang diturunkan, angka tunggal tetap seperti canvas. */
.ck-kartu .ck-tarif--rentang .ck-tarif__angka {
	font-size: clamp(22px, 2.2vw, 26px);
	line-height: 1.15;
}

.ck-kartu .ck-tarif__satuan {
	font: 600 18px/1 var(--ck-judul);
	color: var(--ck-tinta-62);
	white-space: nowrap;
}

.ck-kartu .ck-tarif--rentang .ck-tarif__satuan {
	font-size: 16px;
}

.ck-kartu .ck-tarif__sumber,
.ck-kartu .ck-tarif__lama {
	margin-top: 14px;
	align-self: flex-start;
}

/* Tarif lewat ambang: angkanya diredupkan, sesuai catatan artboard 1g. */
.ck-kartu .ck-tarif.is-lama .ck-tarif__angka {
	color: var(--ck-tinta-62);
}

.ck-kartu__rinci {
	margin: 16px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--ck-tinta-12);
}

.ck-kartu__rinci > div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font: 400 13px/1.8 var(--ck-teks);
	color: var(--ck-tinta-62);
}

.ck-kartu__rinci dt {
	margin: 0;
}

.ck-kartu__rinci dd {
	margin: 0;
	color: var(--ck-tinta);
	font-weight: 600;
	text-align: right;
}

.ck-kartu__desk {
	margin: 12px 0 0;
	font: 400 13px/1.6 var(--ck-teks);
	color: var(--ck-tinta-62);
}

/* ---------- Tabel perbandingan ---------- */

.ck-tabel-bungkus {
	margin-block: 16px;
	background: var(--ck-putih);
	border: 1px solid var(--ck-tinta-12);
	border-radius: var(--ck-r-kartu);
	overflow: hidden;
}

.ck-tabel {
	width: 100%;
	border-collapse: collapse;
}

.ck-tabel thead th {
	background: var(--ck-terang);
	border-bottom: 1px solid var(--ck-tinta-12);
	padding: 12px 16px;
	text-align: left;
	font: 600 11px/1 var(--ck-judul);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ck-tinta-62);
	white-space: nowrap;
}

.ck-tabel td,
.ck-tabel tbody th {
	padding: 16px;
	border-bottom: 1px solid var(--ck-tinta-12);
	text-align: left;
	vertical-align: top;
	font: 400 14px/1.5 var(--ck-teks);
}

.ck-tabel tbody tr:last-child td,
.ck-tabel tbody tr:last-child th {
	border-bottom: 0;
}

.ck-tabel__nama {
	font: 600 15px/1.3 var(--ck-judul);
	color: var(--ck-tinta);
}

.ck-tabel__promo {
	display: block;
	margin-top: 4px;
	font: 500 12px/1.4 var(--ck-teks);
	color: var(--ck-teal-gelap);
}

.ck-baris-mitra {
	background: rgba(18, 181, 165, 0.04);
}

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

.ck-tombol {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 12px 20px;
	border: 1px solid var(--ck-tinta);
	border-radius: var(--ck-r);
	background: var(--ck-tinta);
	color: var(--ck-terang);
	font: 600 14px/1 var(--ck-teks);
	text-decoration: none;
	cursor: pointer;
	transition: background 0.12s ease, border-color 0.12s ease;
}

.ck-tombol:hover,
.ck-tombol:focus {
	background: var(--ck-teal-gelap);
	border-color: var(--ck-teal-gelap);
	color: var(--ck-putih);
	text-decoration: none;
}

.ck-tombol--utama {
	background: var(--ck-teal);
	border-color: var(--ck-teal);
	color: var(--ck-putih);
}

.ck-tombol--utama:hover,
.ck-tombol--utama:focus {
	background: var(--ck-teal-gelap);
	border-color: var(--ck-teal-gelap);
}

.ck-tombol--garis {
	background: transparent;
	color: var(--ck-tinta);
}

/* Tombol WhatsApp.
 *
 * Memakai hijau merek WhatsApp, bukan teal Kargoin. Alasannya bukan selera:
 * tombol yang membuka aplikasi lain harus terbaca sebagai aplikasi itu sebelum
 * diklik. Warna dan lambangnya jadi penanda ke mana orang akan dibawa.
 *
 * Warnanya sengaja tidak masuk daftar token di :root, karena ini warna milik
 * pihak lain dan tidak boleh dipakai untuk elemen Kargoin yang lain. */
.ck-tombol--wa {
	background: #25D366;
	border-color: #25D366;
	color: #FFFFFF;
}

.ck-tombol--wa:hover,
.ck-tombol--wa:focus {
	background: #1DA851;
	border-color: #1DA851;
	color: #FFFFFF;
	text-decoration: none;
}

.ck-ikon--wa {
	flex: none;
}

.ck-tombol--garis:hover,
.ck-tombol--garis:focus {
	background: var(--ck-tinta);
	color: var(--ck-terang);
	border-color: var(--ck-tinta);
}

.ck-tombol--kecil {
	min-height: 34px;
	padding: 8px 12px;
	font-size: 13px;
}

/* ---------- Kalkulator ---------- */

.ck-kalkulator {
	margin-block: 32px;
	background: var(--ck-teal-muda);
	border: 1px solid rgba(18, 181, 165, 0.28);
	border-radius: var(--ck-r-panel);
	padding: 22px 20px;
}

.ck-kalkulator__judul {
	margin-bottom: 6px;
}

.ck-kalkulator__pengantar {
	margin-bottom: 18px;
	font: 400 13px/1.6 var(--ck-teks);
	color: var(--ck-tinta-62);
	max-width: 62ch;
}

.ck-kalkulator__form {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

.ck-bidang {
	margin: 0;
	min-width: 0;
}

.ck-bidang > label,
.ck-bidang legend {
	display: block;
	margin-bottom: 7px;
	font: 600 11px/1 var(--ck-judul);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ck-tinta-62);
}

.ck-bidang input,
.ck-bidang select,
.ck-bidang textarea {
	width: 100%;
	min-height: 46px;
	padding: 11px 14px;
	border: 1px solid var(--ck-tinta-12);
	border-radius: var(--ck-r);
	background: var(--ck-putih);
	color: var(--ck-tinta);
	font: 500 15px/1.3 var(--ck-teks);
}

.ck-bidang textarea {
	min-height: 90px;
	resize: vertical;
	line-height: 1.6;
}

.ck-bidang input:focus,
.ck-bidang select:focus,
.ck-bidang textarea:focus {
	outline: 2px solid var(--ck-teal);
	outline-offset: 1px;
	border-color: var(--ck-teal);
}

.ck-bidang--dimensi {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
}

.ck-bidang--dimensi legend {
	grid-column: 1 / -1;
	padding: 0;
}

.ck-bidang--dimensi span {
	position: relative;
	display: block;
}

.ck-bidang--dimensi span label {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	font: 600 11px/1 var(--ck-judul);
	color: var(--ck-tinta-42);
	pointer-events: none;
}

.ck-bidang--kirim {
	align-self: end;
}

.ck-kalkulator__hasil:empty {
	display: none;
}

/* ---------- Kalkulator inline di halaman rute. Artboard 1b ---------- */

/* Canvas menaruh form di kiri dan panel estimasi putih di kanan, tinggi sama,
   dengan kotak dasar perhitungan menempel di dasar panel kanan. */
.ck-kalkulator--inline .ck-kalkulator__hasil {
	background: var(--ck-putih);
	border-radius: var(--ck-r-kartu);
	padding: 20px;
	display: flex;
	flex-direction: column;

	/* Lebar panel ini kadang ditentukan grid halaman, kadang selebar kartu,
	   tergantung lebar layar. Karena itu baris moda di dalamnya bertanya pada
	   panelnya sendiri, bukan pada lebar layar. Dideklarasikan di sini, di luar
	   media query mana pun, supaya container query di bawah tetap punya wadah
	   pada setiap lebar. */
	container-type: inline-size;
	container-name: ck-panel;
}

.ck-hasil-moda__kepala-daftar {
	margin: 0 0 4px;
	letter-spacing: 0.14em;
	font-size: 12px;
}

/* Di dalam panel putih, tiap moda jadi baris bergaris, bukan kartu sendiri. */
.ck-kalkulator--inline .ck-hasil-moda {
	gap: 0;
}

.ck-kalkulator--inline .ck-hasil-moda__item {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ck-tinta-12);
	border-radius: 0;
	padding: 16px 0;
}

.ck-kalkulator--inline .ck-hasil-moda__item:last-child {
	border-bottom: 0;
}

.ck-kalkulator--inline .ck-hasil-moda__item.is-termurah {
	border-color: var(--ck-tinta-12);
}

.ck-kalkulator--inline .ck-berat {
	margin-top: auto;
	background: var(--ck-terang);
	border-radius: var(--ck-r);
	padding: 12px 14px;
}

.ck-kalkulator--inline .ck-hasil-moda__belum {
	margin-bottom: 0;
	font-size: 12px;
}

.ck-kalkulator__ringkas {
	margin: 20px 0 10px;
	font: 600 13px/1.5 var(--ck-teks);
	color: var(--ck-tinta);
}

.ck-hasil-moda {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ck-hasil-moda > * {
	min-width: 0;
}

.ck-hasil-moda__item {
	background: var(--ck-putih);
	border: 1px solid var(--ck-tinta-12);
	border-radius: var(--ck-r);
	padding: 14px 16px;
}

.ck-hasil-moda__item.is-termurah {
	border-color: var(--ck-teal);
}

.ck-hasil-moda__kepala {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
}

.ck-hasil-moda__nama {
	font: 600 15px/1 var(--ck-judul);
}

.ck-hasil-moda__angka {
	margin: 0 0 6px;
}

.ck-hasil-moda__angka .ck-estimasi__angka {
	font-size: 19px;
	font-weight: 700;
}

.ck-hasil-moda__dasar,
.ck-hasil-moda__hari {
	margin: 0;
	font: 400 12px/1.6 var(--ck-teks);
	color: var(--ck-tinta-62);
}

/* ---------- Daftar ---------- */

.ck-grup__judul {
	margin: 26px 0 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--ck-tinta-12);
	font: 600 11px/1 var(--ck-judul);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ck-tinta-62);
}

.ck-daftar-tujuan {
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--ck-putih);
	border: 1px solid var(--ck-tinta-12);
	border-radius: var(--ck-r-kartu);
	overflow: hidden;
}

.ck-daftar-tujuan li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 16px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--ck-tinta-12);
}

.ck-daftar-tujuan li:last-child {
	border-bottom: 0;
}

.ck-daftar-tujuan__tautan {
	font: 600 15px/1.3 var(--ck-judul);
	color: var(--ck-tinta);
}

.ck-daftar-tujuan__tautan:hover {
	color: var(--ck-teal-gelap);
}

.ck-daftar-mendatar,
.ck-daftar-mitra {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ck-daftar-mitra li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: var(--ck-putih);
	border: 1px solid var(--ck-tinta-12);
	border-radius: var(--ck-r);
}

.ck-daftar-mitra__nama {
	font: 600 14px/1 var(--ck-judul);
}

.ck-rinci {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 0 0 16px;
}

.ck-rinci dt {
	font: 600 11px/1 var(--ck-judul);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ck-tinta-62);
	margin-bottom: 4px;
}

.ck-rinci dd {
	margin: 0;
	font: 600 15px/1.4 var(--ck-teks);
}

.ck-langkah {
	max-width: 62ch;
	padding-left: 20px;
	color: var(--ck-tinta-62);
}

.ck-langkah li {
	margin-bottom: 8px;
}

/* Daftar bercentang, dipakai syarat packing dan dokumen. */
.ck-daftar-periksa {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ck-daftar-periksa li {
	display: flex;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid var(--ck-tinta-08);
	font: 400 14px/1.6 var(--ck-teks);
	color: var(--ck-tinta-62);
}

.ck-daftar-periksa li:last-child {
	border-bottom: 0;
}

.ck-daftar-periksa .ck-ikon {
	margin-top: 4px;
	color: var(--ck-teal);
}

/* ---------- FAQ ---------- */

.ck-faq {
	margin-block: 40px;
}

.ck-faq__item {
	background: var(--ck-putih);
	border: 1px solid var(--ck-tinta-12);
	border-radius: var(--ck-r);
	margin-bottom: 8px;
}

.ck-faq__item summary {
	padding: 14px 16px;
	font: 600 15px/1.4 var(--ck-judul);
	cursor: pointer;
	list-style: none;
}

.ck-faq__item summary::-webkit-details-marker {
	display: none;
}

.ck-faq__item summary::after {
	content: "+";
	float: right;
	color: var(--ck-teal);
	font-weight: 700;
}

.ck-faq__item[open] summary::after {
	content: "\2212";
}

.ck-faq__jawab {
	padding: 0 16px 14px;
	max-width: 68ch;
	font: 400 14px/1.7 var(--ck-teks);
	color: var(--ck-tinta-62);
}

.ck-faq__jawab p {
	margin-top: 0;
}

/* ---------- CTA dan form lead ---------- */

.ck-cta {
	margin-block: 40px;
	background: var(--ck-tinta);
	border-radius: var(--ck-r-panel);
	padding: 24px 20px;
	color: var(--ck-terang);
}

.ck-cta__judul {
	color: var(--ck-terang);
	margin-bottom: 8px;
}

.ck-cta__teks {
	max-width: 62ch;
	font: 400 14px/1.7 var(--ck-teks);
	color: var(--ck-terang-66);
}

.ck-cta .ck-bidang > label,
.ck-cta .ck-bidang legend {
	color: var(--ck-terang-66);
}

.ck-cta .ck-catatan {
	color: var(--ck-terang-55);
}

.ck-cta .ck-tombol--garis {
	border-color: var(--ck-terang);
	color: var(--ck-terang);
}

.ck-cta .ck-tombol--garis:hover {
	background: var(--ck-terang);
	color: var(--ck-tinta);
	border-color: var(--ck-terang);
}

.ck-form-lead__isi {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin-top: 18px;
}

/* Honeypot. Disembunyikan lewat posisi, bukan display none, supaya bot yang
   menyaring field tersembunyi tetap mengisinya. */
.ck-jebakan {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ck-sukses {
	margin-bottom: 18px;
	padding: 16px 18px;
	background: var(--ck-putih);
	border: 1px solid var(--ck-teal);
	border-radius: var(--ck-r);
	color: var(--ck-tinta);
}

.ck-sukses__judul {
	margin-top: 0;
	font: 600 16px/1.4 var(--ck-judul);
}

.ck-peringatan,
.ck-pesan {
	margin-block: 12px;
	padding: 12px 14px;
	border-radius: var(--ck-r);
	background: var(--ck-amber-latar);
	border: 1px solid var(--ck-amber-garis);
	color: var(--ck-amber);
	font: 500 13px/1.6 var(--ck-teks);
}

/* ---------- Tautan terkait ---------- */

.ck-terkait {
	margin-block: 40px;
}

.ck-terkait__kolom {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.ck-terkait h3 {
	font: 600 11px/1 var(--ck-judul);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ck-tinta-62);
	margin-bottom: 10px;
}

.ck-terkait ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ck-terkait li {
	padding: 7px 0;
	border-bottom: 1px solid var(--ck-tinta-08);
	font: 500 14px/1.5 var(--ck-teks);
}

.ck-terkait li:last-child {
	border-bottom: 0;
}

/* ---------- Disclaimer dan kaki ---------- */

.ck-disclaimer {
	display: flex;
	gap: 10px;
	margin-block: 32px 0;
	padding: 14px 16px;
	background: var(--ck-putih);
	border: 1px solid var(--ck-tinta-12);
	border-radius: var(--ck-r);
	font: 400 12px/1.7 var(--ck-teks);
	color: var(--ck-tinta-62);
	max-width: 78ch;
}

.ck-disclaimer .ck-ikon {
	margin-top: 3px;
	color: var(--ck-tinta-42);
}

.ck-kaki {
	margin-top: 44px;
	background: var(--ck-putih);
	border-top: 1px solid var(--ck-tinta-12);
	color: var(--ck-tinta-62);
	padding-block: 36px 40px;
	font: 400 13px/1.7 var(--ck-teks);
}

.ck-kaki__isi {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.ck-kaki__merek {
	max-width: 420px;
}

.ck-kaki .ck-merek {
	font-size: 18px;
}

.ck-kaki .ck-merek a {
	color: var(--ck-tinta);
}

.ck-kaki__ringkas {
	margin: 10px 0 0;
	font: 400 12px/1.6 var(--ck-teks);
	color: var(--ck-tinta-62);
}

.ck-kaki__kolom {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
}

.ck-kaki h2 {
	font: 600 11px/1 var(--ck-judul);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ck-tinta-50);
	margin-bottom: 12px;
}

.ck-kaki ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ck-kaki li {
	margin-bottom: 8px;
}

.ck-kaki a {
	font: 400 13px/1 var(--ck-teks);
	color: var(--ck-tinta);
}

.ck-kaki a:hover {
	color: var(--ck-teal-gelap);
}

.ck-kaki__hak {
	margin: 24px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--ck-tinta-12);
	color: var(--ck-tinta-50);
	font-size: 12px;
}

/* ---------- Ponsel: perilaku khusus dari artboard 1c ---------- */

@media (max-width: 47.99rem) {

	/* Header ringkas. Artboard 1c hanya menampilkan merek plus dua tombol ikon,
	   bukan menu teks. Menu teks dibiarkan ada di DOM untuk pembaca layar dan
	   crawler, tetapi disembunyikan dari tampilan supaya header tidak tumbuh
	   jadi tiga baris di layar 375px. */
	.ck-kepala__isi {
		min-height: 56px;
	}

	.ck-nav {
		position: absolute;
		left: -9999px;
		width: 1px;
		height: 1px;
		overflow: hidden;
	}

	.ck-kepala__wa {
		padding: 8px 12px;
		font-size: 12px;
	}

	/* Kartu moda jadi carousel bergeser dengan snap. Kartu ketiga sengaja
	   terlihat terpotong di kanan supaya terbaca bisa digeser. */
	.ck-kartu-moda {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding: 12px 0 14px;
		margin-inline: calc(var(--ck-sela) * -1);
		padding-inline: var(--ck-sela);
		scrollbar-width: thin;
	}

	.ck-kartu-moda > * {
		flex: 0 0 250px;
		scroll-snap-align: start;
	}

	.ck-kartu-moda::-webkit-scrollbar {
		height: 6px;
	}

	.ck-kartu-moda::-webkit-scrollbar-thumb {
		background: var(--ck-tinta-12);
		border-radius: 3px;
	}

	/* Tabel perbandingan jadi kartu bertumpuk. Satu ekspedisi satu kartu. */
	.ck-tabel-bungkus {
		background: transparent;
		border: 0;
		border-radius: 0;
		overflow: visible;
	}

	.ck-tabel,
	.ck-tabel tbody,
	.ck-tabel tr,
	.ck-tabel td,
	.ck-tabel tbody th {
		display: block;
		width: 100%;
	}

	.ck-tabel thead {
		position: absolute;
		left: -9999px;
	}

	.ck-tabel tbody tr {
		background: var(--ck-putih);
		border: 1px solid var(--ck-tinta-12);
		border-radius: var(--ck-r-kartu);
		padding: 16px;
		margin-bottom: 12px;
	}

	.ck-tabel tbody th,
	.ck-tabel tbody td {
		padding: 0;
		border-bottom: 0;
	}

	.ck-tabel tbody td {
		display: flex;
		justify-content: space-between;
		gap: 12px;
		padding-top: 8px;
		font-size: 13px;
		color: var(--ck-tinta-62);
	}

	/* Label kolom dimunculkan lagi sebagai teks, karena kepala tabelnya
	   disembunyikan pada tata letak kartu. */
	.ck-tabel tbody td::before {
		content: attr(data-kolom);
		font: 600 11px/1.6 var(--ck-judul);
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--ck-tinta-42);
		flex: none;
	}

	.ck-tabel tbody td.ck-sel-tarif {
		display: block;
		padding-top: 12px;
	}

	.ck-tabel tbody td.ck-sel-tarif::before {
		display: block;
		margin-bottom: 4px;
	}

	.ck-tabel tbody td.ck-sel-tarif .ck-tarif__angka {
		font-size: 22px;
		font-weight: 700;
	}

	.ck-tabel tbody td.ck-sel-aksi {
		display: block;
		padding-top: 12px;
	}

	.ck-tabel tbody td.ck-sel-aksi::before {
		display: none;
	}

	.ck-tabel tbody td.ck-sel-aksi .ck-tombol {
		width: 100%;
		min-height: 44px;
	}
}

@media (min-width: 48rem) {
	:root {
		--ck-sela: 56px;
	}

	.ck-panel-rute {
		padding: 40px;
	}

	/* Artboard 1b memakai kolom tetap, bukan auto-fit. Dengan auto-fit, rute
	   yang cuma punya satu moda melebarkan kartunya sampai selebar halaman dan
	   isinya jadi terpencar. Kolom tetap membuat satu kartu tetap seukuran
	   kartu di canvas. Tablet dapat dua kolom, tiga kolom baru di 1024px ke
	   atas karena di 768px kartunya cuma 205px dan angka rentang jadi pecah. */
	.ck-kartu-moda {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
		margin-block: 26px;
	}

	.ck-kalkulator {
		padding: 32px;
	}

	/* Aturan umum di atas memecah daftar moda jadi beberapa kolom. Di panel
	   sempit ini canvas memakai satu baris per moda, jadi dikunci satu kolom. */
	.ck-kalkulator--inline .ck-hasil-moda {
		grid-template-columns: 1fr;
	}

	/* Rincian hitungan dan penjelas berat tidak ada di panel canvas. Dasarnya
	   sudah diringkas di kotak abu abu paling bawah. */
	.ck-kalkulator--inline .ck-hasil-moda__hitung,
	.ck-kalkulator--inline .ck-hasil-moda__dasar {
		display: none;
	}

	.ck-kalkulator__form,
	.ck-form-lead__isi {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: end;
	}

	.ck-bidang--dimensi,
	.ck-bidang--penuh {
		grid-column: 1 / -1;
	}

	.ck-hasil-moda {
		grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	}

	.ck-terkait__kolom {
		grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
		gap: 28px;
	}

	.ck-rinci {
		grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
		gap: 20px;
	}

	.ck-bagian,
	.ck-cta {
		margin-block: 56px;
	}

	.ck-kaki__isi {
		flex-direction: row;
		justify-content: space-between;
		gap: 40px;
	}

	.ck-kaki__kolom {
		flex-wrap: nowrap;
		gap: 64px;
	}

	.ck-garis__tengah {
		min-width: 180px;
	}
}

/* Baris artboard 1b: nama moda di kiri, angka di kanan, keterangan di
   bawahnya selebar kartu.

   Versi sebelumnya menaruh angka BERIKUT chip sumbernya di satu kolom auto.
   Lebar kolom itu jadi selebar semua chip berjajar. Begitu sebuah rute punya
   chip kedua, yaitu peringatan tarif lewat ambang kesegaran, lebarnya sekitar
   515px sedangkan panelnya cuma 600px, jadi kolom kiri tersisa 69px dan
   kalimat lama kirim pecah satu kata per baris.

   Sekarang chip punya barisnya sendiri selebar kartu, jadi kolom kanan cuma
   selebar angkanya dan tidak bisa lagi menghimpit kolom kiri berapa pun jumlah
   chipnya.

   ck_estimasi() mencetak angka dan chipnya dalam satu bungkus, dan bungkus itu
   tidak boleh dipecah di PHP karena bin/audit-situs.php mengenali angka
   bersumber lewat kelas .ck-estimasi. display:contents melarutkannya jadi anak
   grid tanpa menyentuh HTML, pola yang sama dengan kartu tujuan.

   Syaratnya lebar panel, bukan lebar layar, karena panel yang sama bisa jadi
   satu kolom grid halaman atau selebar kartu tergantung lebar layar. Di bawah
   ambang ini baris moda memakai tata letak dasar yang bertumpuk. */
@container ck-panel (min-width: 30rem) {

	.ck-kalkulator--inline .ck-hasil-moda__item {
		display: grid;
		/* Kolom kiri auto, kanan 1fr. Kebalikannya membuat angka memaksa
		   lebarnya sendiri lalu menggencet nama moda. Dengan urutan ini
		   nama moda selalu utuh dan angkanya yang mengalah lalu turun
		   baris kalau ruangnya tinggal sedikit. */
		grid-template-columns: auto minmax(0, 1fr);
		gap: 2px 16px;
		align-items: start;
	}

	.ck-kalkulator--inline .ck-hasil-moda__angka,
	.ck-kalkulator--inline .ck-hasil-moda__angka .ck-estimasi {
		display: contents;
	}

	.ck-kalkulator--inline .ck-hasil-moda__kepala {
		grid-column: 1;
		grid-row: 1;
		margin: 0;
	}

	.ck-kalkulator--inline .ck-hasil-moda__angka .ck-estimasi__angka {
		grid-column: 2;
		grid-row: 1;
		text-align: right;
	}

	/* Ketiganya sengaja tanpa grid-row supaya penempatannya mengikuti
	   urutan HTML: chip sumber, chip tarif lama, lalu lama kirim. Rute
	   tanpa chip kedua tidak menyisakan baris kosong. */
	.ck-kalkulator--inline .ck-hasil-moda__angka .ck-estimasi__sumber,
	.ck-kalkulator--inline .ck-hasil-moda__angka .ck-estimasi__lama,
	.ck-kalkulator--inline .ck-hasil-moda__hari {
		grid-column: 1 / -1;
		margin: 0;
	}

	.ck-kalkulator--inline .ck-hasil-moda__angka .ck-estimasi__sumber,
	.ck-kalkulator--inline .ck-hasil-moda__angka .ck-estimasi__lama {
		justify-self: end;
		max-width: 100%;
	}
}

@media (min-width: 64rem) {

	/* Artboard 1b: judul, pengantar dan form di kolom kiri, panel estimasi
	   memenuhi kolom kanan dari atas sampai bawah.

	   Dulu belahnya mulai 48rem. Di lebar itu tiap kolom cuma 227px, dan panel
	   estimasi jadi terlalu sempit untuk isinya: angka rentang pecah dua baris
	   dan chip sumber memenuhi seluruh lebar. Di bawah 64rem form dan panel
	   sekarang bertumpuk, masing masing selebar kartu. */
	.ck-kalkulator--inline {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto 1fr;
		gap: 8px 40px;
		align-items: start;
	}

	.ck-kalkulator--inline > .ck-kalkulator__judul,
	.ck-kalkulator--inline > .ck-kalkulator__pengantar,
	.ck-kalkulator--inline > .ck-kalkulator__form {
		grid-column: 1;
		margin-top: 14px;
	}

	.ck-kalkulator--inline > .ck-kalkulator__hasil {
		grid-column: 2;
		grid-row: 1 / -1;
		align-self: stretch;
		padding: 24px;
	}

	.ck-halaman--bergambar {
		display: grid;
		grid-template-columns: minmax(0, 68ch) minmax(0, 1fr);
		gap: 56px;
		align-items: start;
	}

	.ck-halaman--bergambar .ck-artikel {
		max-width: none;
	}

	.ck-halaman--bergambar .ck-halaman__gambar {
		/* Di layar lebar order dikembalikan, karena posisinya sudah ditentukan
		   kolom grid, bukan urutan. */
		order: 0;
		position: sticky;
		top: 32px;
		margin: 32px 0 56px;
	}

	.ck-halaman--bergambar .ck-halaman__gambar img {
		height: auto;
		aspect-ratio: 4 / 5;
	}

	.ck-kartu-moda {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ck-panel-rute--dua {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 48px;
		align-items: center;
	}

	.ck-panel-rute--dua h1 {
		margin-top: 0;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ==========================================================================
 * Beranda. Artboard 1a.
 * ========================================================================== */

.ck-hero {
	background: var(--ck-tinta);
	color: var(--ck-terang);
	padding-block: 40px 44px;
}

.ck-hero__judul {
	color: var(--ck-terang);
	max-width: 1040px;
	text-wrap: wrap;
	font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.75rem);
	margin-bottom: 14px;
}

.ck-hero__ringkas {
	max-width: 620px;
	font: 400 16px/1.6 var(--ck-teks);
	color: var(--ck-terang-66);
	margin-bottom: 32px;
}

.ck-hero__catatan {
	margin: 14px 0 0;
	font: 400 13px/1.5 var(--ck-teks);
	color: var(--ck-terang-50);
}

/* Kotak pencarian di hero. */
.ck-cari-rute {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	padding: 18px;
	background: rgba(238, 242, 245, 0.06);
	border: 1px solid rgba(238, 242, 245, 0.14);
	border-radius: var(--ck-r-panel);
}

.ck-cari-rute .ck-bidang > label {
	color: var(--ck-terang-66);
}

.ck-cari-rute__tukar {
	display: none;
	width: 44px;
	height: 44px;
	border-radius: var(--ck-r);
	border: 1px solid rgba(238, 242, 245, 0.24);
	align-items: center;
	justify-content: center;
	color: var(--ck-teal);
	align-self: end;
	margin-bottom: 1px;
}

.ck-cari-rute .ck-tombol {
	width: 100%;
}

/* Kepala bagian dengan tautan di kanan. */
.ck-bagian__kepala {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 16px;
	margin-bottom: 22px;
}

.ck-bagian__kepala h2 {
	margin: 0;
}

.ck-bagian__kepala a {
	font: 500 14px/1 var(--ck-teks);
}

/* Grid kartu rute. */
.ck-grid-rute,
.ck-grid-jenis {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

.ck-grid-rute > *,
.ck-grid-jenis > * {
	min-width: 0;
}

.ck-kartu-rute {
	position: relative;
	background: var(--ck-putih);
	border: 1px solid var(--ck-tinta-12);
	border-radius: var(--ck-r-kartu);
	padding: 18px;
}

.ck-kartu-rute:hover {
	border-color: var(--ck-teal);
}

/* Seluruh kartu bisa diklik, tetapi tautan sumber di dalamnya tetap bisa
   dijangkau karena berada di atas lapisan ini. */
.ck-kartu-rute__tautan {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.ck-kartu-rute .ck-tarif__sumber {
	position: relative;
	z-index: 2;
}

.ck-garis-inline {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ck-garis-inline .ck-garis__titik {
	width: 9px;
	height: 9px;
}

.ck-garis-inline .ck-garis__batang {
	background: rgba(18, 181, 165, 0.5);
}

.ck-garis-inline__km {
	font: 700 10px/1 var(--ck-judul);
	letter-spacing: 0.1em;
	color: var(--ck-teal-gelap);
	white-space: nowrap;
}

.ck-kartu-rute__kota {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 10px;
}

.ck-kartu-rute__kota--kanan {
	text-align: right;
}

.ck-kartu-rute__nama {
	display: block;
	font: 600 15px/1.2 var(--ck-judul);
	color: var(--ck-tinta);
}

.ck-kartu-rute__kode {
	display: block;
	font: 700 10px/1.4 var(--ck-judul);
	letter-spacing: 0.16em;
	color: var(--ck-tinta-50);
}

.ck-kartu-rute__tarif {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--ck-tinta-12);
}

.ck-kartu-rute__tarif .ck-tarif__angka {
	font-size: 18px;
	font-weight: 700;
}

.ck-kartu-rute .ck-eyebrow {
	margin-bottom: 4px;
	font: 400 11px/1 var(--ck-teks);
	letter-spacing: normal;
	text-transform: none;
	color: var(--ck-tinta-62);
}

.ck-kartu-rute__jumlah {
	font: 500 12px/1 var(--ck-teks);
	color: var(--ck-tinta-62);
}

.ck-kartu-rute__kode {
	line-height: 1.4;
}

/* Kartu jenis kiriman. */
.ck-kartu-jenis .ck-kartu__judul a {
	color: var(--ck-tinta);
}

.ck-kartu-jenis .ck-kartu__judul a:hover {
	color: var(--ck-teal-gelap);
	text-decoration: none;
}

.ck-kartu-jenis__rute {
	margin: 10px 0 8px;
	font: 400 12px/1.5 var(--ck-teks);
	color: var(--ck-tinta-62);
}

.ck-kartu-jenis .ck-tarif__angka {
	font-size: 20px;
	font-weight: 700;
}

/* Jenis yang tarifnya selalu lewat penawaran. Bukan angka, jadi ukurannya
   lebih kecil daripada tarif supaya tidak terbaca seperti harga. */
.ck-kartu-jenis__penawaran {
	margin: 10px 0 0;
	font: 600 15px/1.2 var(--ck-judul);
	color: var(--ck-tinta);
}

.ck-faktor-biaya {
	margin-bottom: 18px;
}

/* Langkah bernomor. */
/* Dua kartu putih berdampingan. Artboard 1b memakainya untuk blok pelabuhan
   plus penjelas lama kirim, dan untuk blok packing plus dokumen. */
.ck-dua-kartu {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.ck-dua-kartu > .ck-kartu {
	padding: 22px 20px;
}

.ck-dua-kartu > .ck-kartu > h2 {
	font: 700 20px/1.2 var(--ck-judul);
	margin: 0 0 18px;
}

.ck-dua-kartu > .ck-kartu > p:last-child,
.ck-dua-kartu > .ck-kartu > ul:last-child {
	margin-bottom: 0;
}

.ck-dua-kartu .ck-rinci {
	margin: 0;
}

.ck-bagian__ket {
	font: 400 13px/1 var(--ck-teks);
	color: var(--ck-tinta-62);
}

.ck-panel-cara {
	background: var(--ck-putih);
	border: 1px solid var(--ck-tinta-12);
	border-radius: var(--ck-r-panel);
	padding: 24px 20px;
}

.ck-panel-cara > h2 {
	margin: 0 0 26px;
}

.ck-langkah-nomor {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.ck-langkah-nomor__angka {
	display: block;
	margin-bottom: 10px;
	font: 700 13px/1 var(--ck-judul);
	letter-spacing: 0.16em;
	color: var(--ck-teal);
}

.ck-langkah-nomor h3 {
	margin-bottom: 0;
	font: 600 17px/1.3 var(--ck-judul);
}

.ck-langkah-nomor p {
	margin: 8px 0 0;
	font: 400 14px/1.6 var(--ck-teks);
	color: var(--ck-tinta-62);
}

.ck-panel-cara__lanjut {
	margin: 22px 0 0;
	font: 500 14px/1 var(--ck-teks);
}

/* Pita ajakan mitra. Canvas menaruh teks di kiri dan tombol garis di kanan,
   sejajar tengah, bukan tombol menumpuk di bawah teks. */
.ck-cta--mitra {
	text-align: left;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.ck-cta--mitra__teks {
	max-width: 640px;
}

.ck-cta--mitra .ck-cta__judul {
	font-size: clamp(1.375rem, 1.05rem + 1.5vw, 1.875rem);
	line-height: 1.25;
	margin-bottom: 12px;
}

.ck-cta--mitra .ck-cta__teks {
	margin: 0;
	font: 400 15px/1.6 var(--ck-teks);
}

.ck-cta--mitra .ck-tombol {
	flex: none;
	min-height: 52px;
	padding: 0 26px;
	font: 600 15px/1 var(--ck-teks);
}

@media (min-width: 48rem) {
	.ck-hero {
		padding-block: 56px 48px;
	}

	.ck-cari-rute {
		grid-template-columns: 1fr auto 1fr 1fr auto;
		align-items: end;
		gap: 14px;
		padding: 20px;
	}

	.ck-cari-rute__tukar {
		display: inline-flex;
	}

	.ck-cari-rute .ck-tombol {
		width: auto;
	}

	.ck-grid-rute {
		grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
		gap: 18px;
	}

	.ck-grid-jenis {
		grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
		gap: 18px;
	}

	.ck-dua-kartu {
		grid-template-columns: 1fr 1fr;
	}

	.ck-dua-kartu > .ck-kartu {
		padding: 28px;
	}

	.ck-panel-cara {
		padding: 36px 40px;
	}

	.ck-langkah-nomor {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 34px;
	}

	.ck-cta--mitra {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 40px;
		padding: 44px 40px;
	}
}

/* ==========================================================================
 * Hub kota asal. Artboard 1f.
 * ========================================================================== */

/* Dua tombol di hero hub. Artboard 1f. */
.ck-panel-rute__aksi {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 22px 0 0;
}

.ck-panel-rute__aksi .ck-tombol {
	min-height: 52px;
	padding: 0 22px;
	font: 600 15px/1 var(--ck-teks);
}

/* Panel hero berlatar gelap, jadi tombol garis memakai warna terang. */
.ck-panel-rute .ck-tombol--garis {
	border-color: var(--ck-terang);
	color: var(--ck-terang);
}

.ck-panel-rute .ck-tombol--garis:hover,
.ck-panel-rute .ck-tombol--garis:focus {
	background: var(--ck-terang);
	color: var(--ck-tinta);
	border-color: var(--ck-terang);
}

/* Grid kartu tujuan pada hub kota asal. Artboard 1f. */
.ck-grid-tujuan {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ck-grid-tujuan > * {
	min-width: 0;
}

.ck-baris-tujuan {
	display: flex;
	flex-direction: column;
	gap: 0;
	background: var(--ck-putih);
	border: 1px solid var(--ck-tinta-12);
	border-radius: var(--ck-r-kartu);
	padding: 18px;
}

.ck-baris-tujuan:hover {
	border-color: var(--ck-teal);
}

/* ck_tarif() mencetak angka dan chip sumber dalam satu bungkus dan bungkus itu
   tidak boleh dipecah. display:contents melarutkannya jadi anak kartu supaya
   chip sumber bisa turun ke dasar kartu seperti canvas. */
.ck-baris-tujuan__tarif,
.ck-baris-tujuan .ck-tarif {
	display: contents;
}

.ck-baris-tujuan__kota {
	order: 1;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.ck-baris-tujuan__garis {
	order: 2;
	margin: 10px 0 12px;
}

.ck-baris-tujuan .ck-tarif__angka {
	order: 3;
}

.ck-baris-tujuan__rinci {
	order: 4;
	margin-top: 6px;
	justify-content: space-between;
}

.ck-baris-tujuan .ck-tarif__sumber,
.ck-baris-tujuan .ck-tarif__lama {
	order: 5;
	margin-top: 10px;
	align-self: flex-start;
}

.ck-baris-tujuan__nama {
	font: 600 15px/1.2 var(--ck-judul);
	color: var(--ck-tinta);
}

.ck-baris-tujuan__nama:hover {
	color: var(--ck-teal-gelap);
	text-decoration: none;
}

.ck-baris-tujuan__kode {
	margin-left: 8px;
	font: 700 10px/1.4 var(--ck-judul);
	letter-spacing: 0.16em;
	color: var(--ck-tinta-50);
}

.ck-baris-tujuan .ck-tarif__angka {
	font-size: 20px;
	font-weight: 700;
}

.ck-baris-tujuan__rinci {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	font: 400 12px/1.5 var(--ck-teks);
	color: var(--ck-tinta-62);
}

.ck-panel-rute .ck-catatan,
.ck-panel-rute .ck-intro {
	color: var(--ck-terang-66);
}

@media (min-width: 48rem) {
	.ck-grid-tujuan {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ==========================================================================
 * Hasil kalkulator. Artboard 1d.
 * ========================================================================== */

.ck-berat {
	margin: 20px 0 14px;
	padding: 14px 16px;
	background: var(--ck-putih);
	border: 1px solid var(--ck-tinta-12);
	border-radius: var(--ck-r);
}

.ck-berat__angka {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 16px;
	margin: 10px 0 0;
}

.ck-berat__angka dt {
	font: 400 11px/1.4 var(--ck-teks);
	color: var(--ck-tinta-62);
}

.ck-berat__angka dd {
	margin: 0;
	font: 600 15px/1.3 var(--ck-judul);
	color: var(--ck-tinta);
}

.ck-hasil-moda__hitung {
	margin: 0 0 4px;
	font: 500 12px/1.5 var(--ck-teks);
	color: var(--ck-tinta-62);
}

.ck-hasil-moda__belum {
	margin-top: 14px;
}

@media (min-width: 48rem) {
	.ck-berat__angka {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ==========================================================================
 * Landing mitra. Artboard 1h.
 * ========================================================================== */

.ck-hero__eyebrow {
	color: var(--ck-teal);
	margin-bottom: 12px;
}

.ck-angka {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	gap: 16px;
	margin: 28px 0 0;
	padding-top: 24px;
	border-top: 1px solid rgba(238, 242, 245, 0.14);
}

.ck-angka dt {
	font: 400 12px/1.4 var(--ck-teks);
	color: var(--ck-terang-55);
	order: 2;
}

.ck-angka dd {
	margin: 0 0 4px;
	font: 700 30px/1 var(--ck-judul);
	color: var(--ck-terang);
}

.ck-angka > div {
	display: flex;
	flex-direction: column;
}

.ck-paket__harga {
	margin: 14px 0 12px;
	padding-top: 12px;
	border-top: 1px solid var(--ck-tinta-12);
}

.ck-paket__angka {
	font: 700 24px/1.1 var(--ck-judul);
	color: var(--ck-tinta);
}

.ck-paket__unit {
	font: 500 13px/1 var(--ck-teks);
	color: var(--ck-tinta-62);
	margin-left: 4px;
}

.ck-daftar-periksa strong {
	display: block;
	font: 600 14px/1.4 var(--ck-judul);
	color: var(--ck-tinta);
}

.ck-daftar-periksa__ket {
	display: block;
	margin-top: 2px;
	font: 400 13px/1.6 var(--ck-teks);
	color: var(--ck-tinta-62);
}

.ck-kartu-rute__baris {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 4px;
}

.ck-kartu-rute__jumlah {
	font: 400 12px/1.5 var(--ck-teks);
	color: var(--ck-tinta-62);
	white-space: nowrap;
}

.ck-kartu-rute__kode {
	text-transform: uppercase;
}

/* Kartu jenis kiriman dengan foto. Foto dipasang aria-hidden karena judulnya
   sudah jadi tautan yang menjelaskan tujuannya, jadi pembaca layar tidak
   mendengar tautan yang sama dua kali. */
.ck-kartu-jenis {
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.ck-kartu-jenis__foto {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--ck-terang);
}

.ck-kartu-jenis__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.25s ease;
}

.ck-kartu-jenis:hover .ck-kartu-jenis__foto img {
	transform: scale(1.03);
}

.ck-kartu-jenis > :not(.ck-kartu-jenis__foto) {
	padding-inline: 18px;
}

.ck-kartu-jenis .ck-kartu__judul {
	margin-top: 16px;
}

.ck-kartu-jenis > :last-child {
	padding-bottom: 18px;
	margin-top: auto;
}

.ck-kartu-jenis__catatan {
	margin: 8px 0 0;
	font: 400 13px/1.6 var(--ck-teks);
	color: var(--ck-tinta-62);
}

@media (prefers-reduced-motion: reduce) {
	.ck-kartu-jenis__foto img {
		transition: none;
	}

	.ck-kartu-jenis:hover .ck-kartu-jenis__foto img {
		transform: none;
	}
}

/* ---------- Panel permintaan rute yang datanya belum cukup ----------
 *
 * Sengaja dibedakan dari kartu hasil: ini bukan hasil hitungan, melainkan
 * penjelasan kenapa hitungannya tidak ada, berikut satu jalan keluar.
 */

.ck-permintaan {
	margin-top: 16px;
	padding: 16px;
	border: 1px solid var(--ck-amber-garis);
	border-radius: var(--ck-r);
	background: var(--ck-amber-latar);
}

.ck-permintaan .ck-eyebrow {
	margin: 0 0 6px;
	color: var(--ck-amber);
}

.ck-permintaan p {
	margin: 0 0 10px;
	font: 400 13px/1.6 var(--ck-teks);
	color: var(--ck-tinta);
}

.ck-permintaan__utama {
	font-weight: 600;
}

.ck-permintaan .ck-catatan {
	margin-bottom: 0;
	font-size: 12px;
	color: var(--ck-tinta-62);
}