/**
 * Halaman Info: About Us, Shipping Policy, Pre-Order, Stockists, Contact Us,
 * Track Order. Dimuat HANYA di halaman itu (takkan_enqueue_info_page_assets()).
 *
 * Isi halaman = konten biasa dari wp-admin (h2/h3/p/a), jadi cuma elemen
 * dasarnya yang ditata. Global di style.css memaksa semua heading ke
 * 14px/400 — di sini judul halaman dan subjudul sengaja dikecualikan
 * (selector diawali `.tk-info-page` supaya tidak bocor ke halaman lain).
 */

/* Jarak dari navbar ke konten teratas (judul) —
   SATU angka untuk semua halaman Info: 40px (revisi klien 5 Okt 2026; sebelumnya
   20px bawaan GeneratePress, About Us 48px/24px). Margin `main` bawaan 20px
   ditimpa. */
.tk-info-page {
	--tk-info-top: 40px;
}

.tk-info-page .site-main {
	margin-top: var(--tk-info-top);
}

/* Judul halaman — sama dengan judul PLP/Wishlist. */
.tk-info-page .entry-header .entry-title {
	margin: 0 0 16px; /* Jarak judul → isi: 16px (revisi klien 4 Okt 2026), semua halaman Info. */
	font-size: var(--tk-title-size);
	font-weight: var(--tk-title-weight);
	letter-spacing: var(--tk-title-tracking);
	text-transform: uppercase;
}

/* Kolom teks sempit supaya baris tidak terlalu panjang di layar lebar. */
.tk-info-page .entry-content {
	max-width: 720px;
	margin-top: 0;
}

.tk-info-page .entry-content p {
	margin: 0 0 16px;
	line-height: 1.6;
}

/* Subjudul bagian (mis. "SHIPPING INFORMATION", kota di Stockists). */
.tk-info-page .entry-content h2 {
	margin: 32px 0 12px;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
}

.tk-info-page .entry-content h2:first-child {
	margin-top: 0;
}

.tk-info-page .entry-content a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Blok Group bawaan WordPress (dipakai per toko di Stockists) mendapat
   padding 40px di .wp-block-group__inner-container dari GeneratePress —
   dinolkan supaya tampilannya sama dengan versi HTML biasa. */
.tk-info-page .entry-content .wp-block-group,
.tk-info-page .entry-content .wp-block-group__inner-container {
	padding: 0;
}

/* ---------- Stockists ---------- */
/* Tiap lokasi = KONTAINER bergaris tipis, jarak antar kontainer 32px (revisi user 14 Okt 2026, desktop & HP).
   `.wp-block-group` di atas menolkan padding Group bawaan WP (spesifisitas 0,3,0) — padding kontainer
   ditulis dengan selector yang lebih spesifik supaya menang. Judul kota (h2) yang langsung sesudah
   kontainer tidak menambah jarak atas lagi (32px dari margin-bawah kontainer sudah cukup). */
.tk-info-page .entry-content .tk-stockist.wp-block-group {
	margin: 0 0 32px;
	padding: 24px;
	border: 1px solid #e5e5e5;
	border-radius: 0;
	background: #fff;
}

.tk-info-page .entry-content .tk-stockist > :last-child,
.tk-info-page .entry-content .tk-stockist p:last-child,
.tk-info-page .entry-content .tk-stockist .wp-block-group__inner-container > :last-child {
	margin-bottom: 0;
}

.tk-info-page .entry-content .tk-stockist + h2 {
	margin-top: 0;
}

/* Brand dengan beberapa cabang (mis. K-LIFE: Bumi Flagship, Blok M) — SATU kontainer, satu tautan di bawah
   (revisi user 14 Okt 2026): judul = nama brand (h3), tiap cabang = grup `.tk-stockist__branch` berisi nama cabang
   + alamat, jarak antar cabang 16px, tautan brand satu kali di akhir. Pola blok "Stockist" tersedia di editor
   (Add block → Patterns → Takkan). */
.tk-info-page .entry-content .tk-stockist .tk-stockist__branch {
	margin: 0 0 16px;
}

.tk-info-page .entry-content .tk-stockist p.tk-stockist__branch-name {
	margin: 0 0 4px;
	color: #1a1a1a;
	font-weight: 500;
}

.tk-info-page .entry-content .tk-stockist .tk-stockist__branch p:last-child {
	margin-bottom: 0;
}

@media (max-width: 600px) {
	.tk-info-page .entry-content .tk-stockist.wp-block-group {
		padding: 20px;
	}
}

.tk-info-page .entry-content .tk-stockist h3 {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 600;
}

.tk-info-page .entry-content .tk-stockist p {
	margin: 0 0 4px;
	color: var(--tk-fg-muted);
}

/* ---------- Contact Us ---------- */
.tk-info-page .entry-content .tk-info-label {
	margin-bottom: 4px;
	color: var(--tk-fg-muted);
}

/* ---------- Track Order (woocommerce/order/form-tracking.php) ----------
   Selector diawali `.tk-info-page .tk-track-form` supaya menang atas
   woocommerce.css (form-row-first/last, input) tanpa !important. */
.tk-info-page .tk-track-form {
	/* Selebar kolom isi (600px di layout dua kolom), sama dengan form Contact Us.
	   Sebelumnya dibatasi 420px sehingga tampak lebih sempit dari halaman lain. */
	max-width: 100%;
}

.tk-info-page .tk-track-form .tk-track-form__intro {
	margin: 0 0 24px;
}

.tk-info-page .tk-track-form .form-row {
	float: none;
	width: 100%;
	margin: 0 0 16px;
	padding: 0;
}

.tk-info-page .tk-track-form label {
	display: block;
	margin: 0 0 6px;
	font-size: 14px;
}

.tk-info-page .tk-track-form input.input-text {
	display: block;
	width: 100%;
	height: 52px; /* Sama dengan field Contact Us / Checkout. */
	padding: 0 12px;
	border: 1px solid #d9d9d9;
	border-radius: 0;
	background: #ffffff;
	color: var(--tk-fg);
	font: inherit;
	box-sizing: border-box;
}

.tk-info-page .tk-track-form input.input-text:focus {
	border-color: #1a1a1a;
	box-shadow: 0 0 0 1px #1a1a1a;
	outline: none;
}

/* Tombol: abu-abu sampai kedua kolom terisi, lalu hitam. Warna ditulis
   untuk :hover/:focus juga — GeneratePress menimpa color + background
   semua <button> di kedua state itu. */
.tk-info-page .tk-track-form button.tk-track-form__submit,
.tk-info-page .tk-track-form button.tk-track-form__submit:hover,
.tk-info-page .tk-track-form button.tk-track-form__submit:focus {
	display: block;
	width: 100%;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: #1a1a1a;
	color: #ffffff;
	font: inherit;
	cursor: pointer;
}

.tk-info-page .tk-track-form:has( input.input-text:placeholder-shown ) button.tk-track-form__submit,
.tk-info-page .tk-track-form:has( input.input-text:placeholder-shown ) button.tk-track-form__submit:hover,
.tk-info-page .tk-track-form:has( input.input-text:placeholder-shown ) button.tk-track-form__submit:focus {
	background: #bdbdbd;
}

/* ---------- About Us (acuan layout: marni.com/en-us/about-marni) ----------
   Judul + paragraf rata tengah dalam kolom sempit, video selebar layar di
   bawahnya. Body class `tk-about-page` dipasang takkan_info_body_class().
   Video = blok Video bawaan WordPress (class `tk-about-video`): autoplay,
   muted, loop, tanpa kontrol (videonya memang tanpa suara). */
.tk-about-page {
	/* 100vw (video selebar layar) ikut menghitung lebar scrollbar vertikal;
	   `clip` memotong kelebihannya tanpa membuat body jadi wadah scroll. */
	overflow-x: clip;
}

.tk-about-page .entry-header .entry-title {
	text-align: center;
}

.tk-about-page .entry-content {
	max-width: none;
}

.tk-about-page .entry-content > p {
	max-width: 680px;
	margin: 0 auto 8px; /* Jarak antar paragraf 8px (revisi klien 4 Okt 2026). */
	text-align: center;
	/* Baris terakhir tidak boleh menyisakan satu kata sendirian ("wear."):
	   panjang baris diseimbangkan (revisi klien 6 Okt 2026). Di teks juga ada
	   &nbsp; antara "to" dan "wear." sebagai cadangan untuk browser lama. */
	text-wrap: balance;
}

.tk-about-page .entry-content .tk-about-video {
	position: relative;
	/* Abu-abu muda sebagai latar sebelum frame pertama video termuat (blok video
	   tidak lagi membawa gambar poster tetap — poster lama akan tertinggal kalau
	   klien mengganti videonya). */
	background: #f1f1f1;
	width: 100vw;
	max-width: none;
	margin: 48px 0 0; /* Jarak teks → video: 48px desktop, 24px HP (revisi klien 4 Okt 2026). */
	margin-left: calc(50% - 50vw);
	line-height: 0;
}

.tk-about-page .entry-content .tk-about-video video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	max-height: 85vh;
	object-fit: cover;
}

@media (max-width: 768px) {
	.tk-about-page .entry-content .tk-about-video {
		margin-top: 24px;
	}

	/* Video HP seperti Marni: potongan potret 4:5 selebar layar. Sumbernya
	   16:9, jadi dipotong tengah (object-fit: cover). Kalau klien kirim
	   versi vertikal, cukup ganti video di editor.
	   ⚠️ !important disengaja: WordPress menyisipkan `style="aspect-ratio:
	   1920 / 1080"` inline di tag <video> (dari dimensi lampiran), dan style
	   inline mengalahkan selector apa pun tanpa !important. */
	.tk-about-page .entry-content .tk-about-video video {
		aspect-ratio: 4 / 5 !important;
		max-height: none;
	}
}

/* ---------- Contact Us: form "Message Us" ----------
   Dicetak shortcode [takkan_contact_form] (plugin takkan-core). Gaya field
   SAMA dengan Checkout (cart-checkout.css ±495–600: kotak 52px, label di
   dalam kotak yang mengecil ke atas saat fokus/terisi) — disalin dengan
   awalan `.tk-contact-form`, karena selector aslinya terikat
   `.woocommerce-checkout form.checkout`. JS: contact-form.js (kelas
   `tk-filled`). Selector diawali `.tk-info-page` supaya menang atas gaya
   input GeneratePress dan atas `.entry-content p` di atas. */
.tk-info-page .tk-contact-form {
	--cf-field: #d9d9d9;
	--cf-muted: #707070;
	--cf-ink: #1a1a1a;
	--cf-error: #c0392b;

	max-width: 720px;
	margin: 0;
}

.tk-info-page .tk-contact-form .tk-cf-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.tk-info-page .tk-contact-form .tk-cf-row {
	position: relative;
	margin: 0 0 12px;
}

.tk-info-page .tk-contact-form .tk-cf-row > label {
	position: absolute;
	z-index: 2;
	top: 26px;
	left: 13px;
	right: 36px;
	margin: 0;
	transform: translateY(-50%);
	overflow: hidden;
	color: var(--cf-muted);
	font-size: 14px;
	line-height: 1.2;
	white-space: nowrap;
	text-overflow: ellipsis;
	pointer-events: none;
	transition: top 0.15s, font-size 0.15s, transform 0.15s;
}

.tk-info-page .tk-contact-form .tk-cf-row--textarea > label {
	top: 14px;
	transform: none;
}

/* Terisi / fokus → label kecil di atas. */
.tk-info-page .tk-contact-form .tk-cf-row.tk-filled > label,
.tk-info-page .tk-contact-form .tk-cf-row:focus-within > label {
	top: 7px;
	transform: none;
	font-size: 12px;
}

.tk-info-page .tk-contact-form .tk-cf-row input[type="text"],
.tk-info-page .tk-contact-form .tk-cf-row input[type="email"],
.tk-info-page .tk-contact-form .tk-cf-row select,
.tk-info-page .tk-contact-form .tk-cf-row textarea {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 22px 12px 6px;
	border: 1px solid var(--cf-field);
	border-radius: 0;
	background: #ffffff;
	color: var(--cf-ink);
	font: inherit;
	line-height: 22px;
	box-shadow: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.tk-info-page .tk-contact-form .tk-cf-row textarea {
	height: 140px;
	padding-top: 26px;
	resize: vertical;
}

.tk-info-page .tk-contact-form .tk-cf-row select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 36px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23707070' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	cursor: pointer;
}

.tk-info-page .tk-contact-form .tk-cf-row input:focus,
.tk-info-page .tk-contact-form .tk-cf-row select:focus,
.tk-info-page .tk-contact-form .tk-cf-row textarea:focus {
	outline: none;
	border-color: var(--cf-ink);
	box-shadow: 0 0 0 1px var(--cf-ink);
}

.tk-info-page .tk-contact-form .tk-cf-row.has-error input,
.tk-info-page .tk-contact-form .tk-cf-row.has-error select,
.tk-info-page .tk-contact-form .tk-cf-row.has-error textarea {
	border-color: var(--cf-error);
}

.tk-info-page .entry-content .tk-contact-form .tk-cf-error {
	margin: 4px 0 0;
	color: var(--cf-error);
	font-size: 12px;
	line-height: 1.4;
}

.tk-info-page .entry-content .tk-contact-form .tk-cf-error:empty {
	display: none;
}

/* Tombol Send: hitam penuh lebar. :hover/:focus ditulis eksplisit —
   GeneratePress menimpa color + background semua <button> di kedua state. */
.tk-info-page .tk-contact-form button.tk-cf-submit,
.tk-info-page .tk-contact-form button.tk-cf-submit:hover,
.tk-info-page .tk-contact-form button.tk-cf-submit:focus {
	display: block;
	width: 100%;
	height: 52px;
	margin: 16px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--cf-ink);
	color: #ffffff;
	font: inherit;
	cursor: pointer;
}

.tk-info-page .tk-contact-form button.tk-cf-submit:disabled,
.tk-info-page .tk-contact-form button.tk-cf-submit:disabled:hover,
.tk-info-page .tk-contact-form button.tk-cf-submit:disabled:focus {
	background: #bdbdbd; /* Abu-abu = belum bisa dikirim (sama dengan tombol Track Order). */
	cursor: not-allowed;
}

.tk-info-page .entry-content .tk-contact-form .tk-cf-status {
	margin: 12px 0 0;
	color: var(--cf-error);
}

/* Kartu terima kasih setelah form terkirim (revisi user 12 Okt 2026: lebih
   menonjol + bisa kirim pesan lagi). Pola kartu = kartu Email (abu sangat muda,
   rata tengah); tombol "Send another message" = tombol sekunder Takkan. */
.tk-info-page .entry-content .tk-cf-done {
	margin: 24px 0 0;
	padding: 40px 24px;
	background: #fafafa;
	text-align: center;
}

.tk-info-page .entry-content .tk-cf-done:focus {
	outline: none;
}

.tk-info-page .entry-content .tk-cf-done__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	margin: 0 0 16px;
	border: 1px solid #1a1a1a;
	border-radius: 50%;
	color: #1a1a1a;
}

.tk-info-page .entry-content .tk-cf-done__title {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

.tk-info-page .entry-content .tk-cf-done__text {
	margin: 0;
	color: #707070;
	line-height: 1.6;
}

.tk-info-page .entry-content button.tk-cf-done__again,
.tk-info-page .entry-content button.tk-cf-done__again:hover,
.tk-info-page .entry-content button.tk-cf-done__again:focus {
	box-sizing: border-box;
	min-height: 52px;
	margin: 24px 0 0;
	padding: 0 24px;
	border: 1px solid #dedede;
	border-radius: 0;
	background: #ffffff;
	color: #1a1a1a;
	font: inherit;
	cursor: pointer;
}

@media (hover: hover) {
	.tk-info-page .entry-content button.tk-cf-done__again:hover {
		border-color: #1a1a1a;
	}
}

/* ---------- Layout Info: satu kolom 600px di tengah ----------
   Semua halaman Info kecuali About Us (body class `tk-info-layout`,
   takkan_info_layout_enabled()). Navigasi Info di kiri DIHAPUS 8 Okt 2026
   (feedback klien; sempat sticky). Judul, isi, dan foto berbagi satu kolom. */
.tk-info-layout .inside-article {
	max-width: 600px;
	margin-right: auto;
	margin-left: auto;
}

/* Foto halaman Info (Featured Image; Pre-Order dulu): di BAWAH teks, kolom isi,
   di semua lebar layar (revisi user 8 Okt 2026: sempat dicoba di kolom kanan,
   kurang bagus). Selebar kolom isi (sama dengan paragraf), tinggi alami. */
.tk-info-layout .inside-article > .tk-info-photo {
	margin: 32px 0 0;
}

.tk-info-layout .tk-info-photo img {
	display: block;
	width: 100%;
	height: auto;
}

/* Lebar kolom isi 600px untuk semua elemen di dalamnya (paragraf, kartu, form);
   sebelumnya 720px dari aturan dasar halaman Info di atas. */
.tk-info-layout .entry-content,
.tk-info-layout .entry-content .tk-contact-form {
	max-width: 600px;
}

/* Jarak judul → isi 24px di layout ini (revisi klien). Baris kosong <br> di awal
   paragraf pengantar (hasil ketikan di editor) disembunyikan supaya tidak
   menambah jarak; isi paragrafnya sendiri tidak diubah. */
.tk-info-layout .entry-header .entry-title {
	margin-bottom: 24px;
}

.tk-info-layout .entry-content > p > br:first-child {
	display: none;
}

/* ---------- Kartu kontak (Contact Us) ----------
   Satu blok Group `tk-contact-card` (EMAIL) DI ATAS form, selebar kolom isi
   (revisi 8 Okt 2026: kartu Instagram DM dihapus, kartu Email naik ke atas
   form). Latar abu sangat muda, teks rata tengah. Bisa diedit klien di wp-admin. */
.tk-info-page .entry-content .wp-block-group.tk-contact-card {
	margin: 24px 0 0;
	padding: 32px 20px;
	background: #fafafa;
	text-align: center;
}

.tk-info-page .entry-content .tk-contact-card p {
	margin: 0;
}

.tk-info-page .entry-content .tk-contact-card .tk-contact-card__label {
	margin-bottom: 10px;
	font-size: 11px;
	letter-spacing: 0;
	text-transform: uppercase;
}

.tk-info-page .entry-content .tk-contact-card .tk-contact-card__value {
	margin-bottom: 8px;
	font-size: 16px;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.tk-info-page .entry-content .tk-contact-card .tk-contact-card__value a {
	text-decoration: none;
}

.tk-info-page .entry-content .tk-contact-card .tk-contact-card__caption {
	color: var(--tk-fg-muted);
	font-size: 12px;
	line-height: 1.5;
}

@media (hover: hover) {
	.tk-info-page .entry-content .tk-contact-card .tk-contact-card__value a:hover {
		text-decoration: underline;
		text-underline-offset: 3px;
	}
}

/* ---------- Form: field upload gambar (opsional) ----------
   Kotak 52px seperti field lain; <input type=file> asli tetap ada (bisa
   difokus keyboard) tapi tak terlihat, label di dalam kotak yang membuka
   dialog. Setelah memilih file: label mengecil ke atas, nama file tampil,
   tombol × muncul. Tanpa tanda * (opsional). */
.tk-info-page .tk-contact-form .tk-cf-file {
	position: relative;
}

.tk-info-page .tk-contact-form .tk-cf-file__input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.tk-info-page .tk-contact-form .tk-cf-file__box {
	position: relative;
	box-sizing: border-box;
	display: block;
	height: 52px;
	margin: 0;
	padding: 22px 44px 6px 12px;
	border: 1px solid var(--cf-field);
	background: #ffffff;
	color: var(--cf-ink);
	line-height: 22px;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.tk-info-page .tk-contact-form .tk-cf-file__label {
	position: absolute;
	top: 26px;
	left: 13px;
	right: 44px;
	transform: translateY(-50%);
	overflow: hidden;
	color: var(--cf-muted);
	font-size: 14px;
	line-height: 1.2;
	white-space: nowrap;
	text-overflow: ellipsis;
	transition: top 0.15s, font-size 0.15s, transform 0.15s;
}

.tk-info-page .tk-contact-form .tk-cf-row--file.tk-filled .tk-cf-file__label {
	top: 7px;
	transform: none;
	font-size: 12px;
}

.tk-info-page .tk-contact-form .tk-cf-file__name {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Petunjuk "unggah": panah ke atas di kanan, hilang setelah file dipilih. */
.tk-info-page .tk-contact-form .tk-cf-file__box::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 14px;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23707070' stroke-width='2'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.tk-info-page .tk-contact-form .tk-cf-row--file.tk-filled .tk-cf-file__box::after {
	display: none;
}

.tk-info-page .tk-contact-form .tk-cf-file__input:focus-visible + .tk-cf-file__box {
	border-color: var(--cf-ink);
	box-shadow: 0 0 0 1px var(--cf-ink);
}

.tk-info-page .tk-contact-form .tk-cf-row--file.has-error .tk-cf-file__box {
	border-color: var(--cf-error);
}

/* Tombol ×: GeneratePress menimpa color + background semua <button> di
   :hover/:focus, jadi ditulis eksplisit. [hidden] dijaga manual karena
   `display` di bawah akan mengalahkan atribut hidden. */
.tk-info-page .tk-contact-form .tk-cf-file__clear,
.tk-info-page .tk-contact-form .tk-cf-file__clear:hover,
.tk-info-page .tk-contact-form .tk-cf-file__clear:focus {
	position: absolute;
	top: 50%;
	right: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-top: -18px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--cf-ink);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.tk-info-page .tk-contact-form .tk-cf-file__clear[hidden] {
	display: none;
}

/* ---------- FAQ (acuan: Gentle Monster customer care) ----------
   Isi halaman = blok editor: tiap kategori = Group `.tk-faq-category` berisi
   judul + blok Details (ringkasan = pertanyaan). faq.js membungkus tiap Group
   jadi kotak `.tk-faq__item` (baris judul + panel) yang membuka ke bawah. Tanpa
   JS semua kategori tampil terbuka berurutan. Warna kotak = kartu kontak
   (#fafafa). `<button>` ditulis eksplisit untuk :hover/:focus — GeneratePress
   menimpa color + background semua <button>. Panel: grid 0fr→1fr (animasi
   tinggi tanpa angka tetap) + visibility berjeda supaya isi yang tertutup tidak
   bisa di-Tab. */
.tk-info-page .entry-content.tk-faq-js {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Paragraf pengantar mengikuti jarak normal; flex gap hanya antar kotak. */
.tk-info-page .entry-content.tk-faq-js > p {
	margin: 0 0 16px;
}

.tk-info-page .entry-content .tk-faq__item {
	background: #fafafa;
}

.tk-info-page .entry-content .tk-faq__row,
.tk-info-page .entry-content .tk-faq__row:hover,
.tk-info-page .entry-content .tk-faq__row:focus {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 52px;
	padding: 0 16px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--tk-fg);
	font: inherit;
	font-size: 12px;
	font-weight: 600; /* Judul kategori semibold (revisi klien 7 Okt 2026). */
	letter-spacing: 0;
	text-align: left;
	text-transform: uppercase;
	cursor: pointer;
}

.tk-info-page .entry-content .tk-faq__row:focus-visible,
.tk-info-page .entry-content .tk-faq-category summary:focus-visible {
	outline: 2px solid var(--tk-fg);
	outline-offset: -2px;
}

.tk-info-page .entry-content .tk-faq__chevron {
	flex: none;
	transition: transform 0.25s;
}

/* Terbuka: panah menghadap ke atas. */
.tk-info-page .entry-content .tk-faq__item.is-open .tk-faq__chevron {
	transform: rotate(-90deg);
}

@media (hover: hover) {
	.tk-info-page .entry-content .tk-faq__item:not(.is-open) .tk-faq__row:hover .tk-faq__chevron {
		transform: translateX(3px);
	}
}

.tk-info-page .entry-content .tk-faq__panel {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows 0.3s cubic-bezier(0.104, 0.204, 0.492, 1), visibility 0s linear 0.3s;
}

.tk-info-page .entry-content .tk-faq__item.is-open .tk-faq__panel {
	grid-template-rows: 1fr;
	visibility: visible;
	transition-delay: 0s;
}

.tk-info-page .entry-content .tk-faq-category {
	min-height: 0;
	overflow: hidden;
	margin: 0;
	padding: 0 16px;
}

/* Judul kategori sudah ada di baris kotak (JS aktif); tetap ada untuk tanpa-JS & editor. */
.tk-info-page .entry-content.tk-faq-js .tk-faq-category > h2,
.tk-info-page .entry-content.tk-faq-js .tk-faq-category .wp-block-heading {
	display: none;
}

/* Tanpa JS: kategori berjudul biasa, berurutan. */
.tk-info-page .entry-content .tk-faq-category h2 {
	margin: 24px 0 12px;
}

/* Pertanyaan = Details bawaan, tanpa garis pemisah (acuan), penanda +/− di kanan. */
.tk-info-page .entry-content .tk-faq-category summary {
	position: relative;
	display: block;
	padding: 14px 32px 14px 0;
	line-height: 22px; /* Tinggi baris pasti → ikon bisa dipusatkan tepat ke baris pertama. */
	cursor: pointer;
	list-style: none;
	transition: font-size 0.25s, line-height 0.25s;
}

.tk-info-page .entry-content .tk-faq-category summary::-webkit-details-marker {
	display: none;
}

/* Ikon +/− = SVG 14×14 (bukan huruf "+" yang metriknya membuatnya turun), tepat
   di tengah baris pertama pertanyaan. Sumbu tengahnya sama dengan chevron
   kategori (kotak berpadding 16px, ikon 14px → pusat 23px dari tepi kanan). */
.tk-info-page .entry-content .tk-faq-category summary::after {
	content: "";
	position: absolute;
	top: 18px; /* padding-top 14 + setengah tinggi baris 22 − setengah ikon 7 */
	right: 0;
	width: 14px;
	height: 14px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%23000' stroke-width='1.4' fill='none'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
	transition: top 0.25s;
}

.tk-info-page .entry-content .tk-faq-category details[open] > summary::after {
	top: 20px; /* padding-top 14 + setengah baris terbuka 26 − setengah ikon 7 */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1 7h12' stroke='%23000' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");
}

/* Pertanyaan yang sedang dibuka membesar (±1,35× ukuran biasa) seperti acuan
   Gentle Monster; jawaban tampil di bawahnya dengan jarak lega. */
.tk-info-page .entry-content .tk-faq-category details[open] > summary {
	padding-bottom: 20px;
	font-size: 19px;
	line-height: 26px;
}

.tk-info-page .entry-content .tk-faq-category details > :not(summary) {
	margin: 0 0 14px;
	padding-right: 32px;
	color: var(--tk-fg-muted);
	line-height: 1.6;
}

.tk-info-page .entry-content .tk-faq-category details > :not(summary) a {
	color: var(--tk-fg);
}

.tk-info-page .entry-content .tk-faq-category details > ul {
	padding-left: 18px;
}

/* Jarak lega sesudah jawaban terakhir sebelum pertanyaan berikutnya. */
.tk-info-page .entry-content .tk-faq-category details[open] {
	padding-bottom: 20px;
}

/* Beri sedikit napas di bawah pertanyaan terakhir di dalam kotak. */
.tk-info-page .entry-content .tk-faq-category > :last-child {
	margin-bottom: 8px;
}

.tk-info-page .entry-content .tk-faq__empty {
	margin: 0;
	padding: 0 0 16px;
	color: var(--tk-fg-muted);
}

/* ==========================================================================
   HALAMAN LEGAL (Terms & Conditions, Refund and Returns, Privacy Policy)
   --------------------------------------------------------------------------
   Revisi user 12 Okt 2026 (acuan: judul besar + "Latest update" + isi bernomor
   di kiri + daftar isi menempel di kanan). Bagian bernomor = H2 di editor;
   nomor dari CSS counter (isi & daftar isi), daftar isi dibuat `legal.js`.
   Bukan layout Info 600px (`takkan_info_layout_enabled()` mengecualikan halaman ini).
   ========================================================================== */
/* `.no-sidebar` perlu: `.separate-containers.no-sidebar .site-main` (0,3,0) milik GeneratePress menolkan margin. */
body.tk-legal-page.no-sidebar .site-main {
	max-width: 1040px;
	margin-right: auto;
	margin-left: auto;
}

body.tk-legal-page .inside-article {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 240px;
	column-gap: 64px;
	align-items: start;
}

body.tk-legal-page .entry-header {
	grid-column: 1 / -1;
}

body.tk-legal-page .entry-header .entry-title {
	margin: 0 0 8px;
}

body.tk-legal-page .tk-legal-updated {
	grid-column: 1 / -1;
	margin: 0 0 40px;
	color: var(--tk-fg-muted);
	font-size: 12px;
	line-height: 1.4;
}

body.tk-legal-page .entry-content {
	grid-column: 1;
	max-width: 720px;
	counter-reset: tk-legal;
}

body.tk-legal-page .entry-content p,
body.tk-legal-page .entry-content li {
	line-height: 1.7;
}

body.tk-legal-page .entry-content ul {
	margin: 0 0 16px 1.25em;
	padding: 0;
}

body.tk-legal-page .entry-content li {
	margin: 0 0 8px;
}

body.tk-legal-page .entry-content h2 {
	margin: 40px 0 12px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: none;
	counter-increment: tk-legal;
	scroll-margin-top: 96px;
}

body.tk-legal-page .entry-content h2::before {
	content: counter(tk-legal) ". ";
}

/* Bagian pengantar (sebelum H2 pertama) tidak diberi jarak atas ekstra. */
body.tk-legal-page .entry-content > p:first-child {
	margin-top: 0;
}

/* Daftar isi kanan: menempel di bawah navbar (61px) + 32px. */
body.tk-legal-page .tk-legal-toc {
	grid-column: 2;
	grid-row: 3;
	position: sticky;
	top: 96px;
	align-self: start;
}

body.tk-legal-page .tk-legal-toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: tk-toc;
}

body.tk-legal-page .tk-legal-toc li {
	margin: 0 0 12px;
	counter-increment: tk-toc;
}

body.tk-legal-page .tk-legal-toc a {
	display: block;
	color: var(--tk-fg-muted);
	font-size: 13px;
	line-height: 1.4;
	text-decoration: none;
}

body.tk-legal-page .tk-legal-toc a::before {
	content: counter(tk-toc) ". ";
}

body.tk-legal-page .tk-legal-toc a[aria-current="true"] {
	color: var(--tk-fg);
	font-weight: 600;
}

@media (hover: hover) {
	body.tk-legal-page .tk-legal-toc a:hover {
		color: var(--tk-fg);
		text-decoration: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html:has(body.tk-legal-page) {
		scroll-behavior: smooth;
	}
}

/* Layar sempit: satu kolom, daftar isi disembunyikan (isi tetap bernomor). */
@media (max-width: 900px) {
	body.tk-legal-page .inside-article {
		display: block;
	}

	body.tk-legal-page .tk-legal-toc {
		display: none;
	}

	body.tk-legal-page .tk-legal-updated {
		margin-bottom: 32px;
	}
}