/**
 * Footer situs-lebar — SEMUA halaman KECUALI Home (21 Sep 2026, layout
 * DIROMBAK 22 Sep 2026 mengikuti struktur demo React acuan user PERSIS:
 * baris atas [logo kiri | ikon sosial kanan] → garis pembatas → baris
 * bawah [copyright kiri (2 baris) | link Info 1 baris kanan-atas | link
 * legal 1 baris kanan-bawah]. Lihat blok komentar di functions.php
 * (`takkan_render_site_footer()`) untuk alasan lengkap tiap penyesuaian.
 *
 * Warna latar & teks EKSPLISIT (bukan var(--tk-fg)/var(--tk-bg)) — halaman
 * polos non-WooCommerce (Info/Track Order/Wishlist, dan halaman-halaman
 * footer ini) belum tentu kanvasnya sudah diputihkan seperti Shop/PDP
 * (token terang di style.css cuma di-scope ke body.woocommerce-page/
 * body.woocommerce). Footer ini harus selalu tampil benar di halaman
 * manapun dia dipasang, tidak bergantung pada kanvas halaman itu sendiri —
 * konsisten dengan navbar varian --solid (putih+hitam) yang juga dipasang
 * di semua halaman non-Home.
 */

.tk-site-footer {
	background: #ffffff;
	color: #000000;
}

.tk-site-footer__inner {
	padding-top: 40px;
	/* ⚠️ Padding bawah SENGAJA lebih besar dari yang terlihat perlu — bukan
	   angka bebas. Tombol "kembali ke atas" (`.tk-back-to-top` di plp.css)
	   melayang `position:fixed; right:24px; bottom:24px` di SEMUA halaman
	   non-Home, jadi menempati ±64px terakhir dari sudut kanan-bawah
	   DOKUMEN begitu halaman digulir sampai mentok — persis posisi baris
	   link legal (kanan-bawah footer). Diverifikasi bertabrakan waktu
	   layout ini baru dibuat (22 Sep 2026): baris "TERMS & CONDITIONS"
	   tertimpa tombolnya. Padding ini mendorong baris terakhir footer naik
	   melewati zona itu — TIDAK ADA solusi lebih rapi tanpa mengubah posisi
	   tombolnya sendiri (yang dipakai di banyak halaman lain, di luar
	   cakupan perubahan ini).
	*/
	padding-bottom: 72px;
}

/* ---------- Baris atas: logo kiri, ikon sosial kanan ---------- */

.tk-site-footer__top {
	display: flex;
	align-items: center;
	justify-content: flex-end; /* Logo dihapus 25 Sep 2026 — ikon sosial rata kanan di desktop. */
	gap: 24px;
}

.tk-site-footer__logo-link {
	display: inline-block;
	line-height: 0;
}

.tk-site-footer__logo {
	/* ⚠️ BUG ditemukan & diperbaiki 22 Sep 2026 — versi sebelumnya
	   (`width:170px; height:38px`) TIDAK sesuai rasio asli berkas
	   (logo-black-nav.png, 320×160 = rasio 2:1). Karena `object-fit:contain`
	   mempertahankan rasio asli, box 170×38 (rasio ±4,5:1) MEMAKSA gambar
	   diskalakan mengikuti sisi yang lebih membatasi (tinggi 38px → lebar
	   efektif cuma 76px) lalu DIPUSATKAN di tengah box yang jauh lebih
	   lebar — hasilnya logo terlihat KECIL & DI TENGAH dengan ruang kosong
	   di kiri-kanan, walau `<a>` pembungkusnya sendiri sudah rata kiri.
	   Diverifikasi lewat getBoundingClientRect(): imgRect lebar 170px tapi
	   isi sungguhannya cuma mengisi 76px di tengah.
	   Perbaikan (permintaan user: tinggi 48px, rata kiri, "yang rapih"):
	   HANYA `height` yang dipatok, `width: auto` — browser menghitung
	   lebar dari rasio asli sendiri (48 × 2 = 96px), jadi kotak <img>
	   PERSIS sebesar isinya, tidak ada spasi kosong tersembunyi, dan
	   `<a>` pembungkus (inline-block) ikut menciut pas sebesar itu —
	   rata kiri jadi benar-benar rata kiri. */
	height: 48px;
	width: auto;
	display: block;
}

.tk-site-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 12px;
}

.tk-site-footer__social a {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #f5f5f5;
	color: #000000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tk-site-footer__social a:hover {
	color: #000000;
	opacity: 0.7;
}

.tk-site-footer__social .tk-icon {
	width: 18px;
	height: 18px;
}

/* ---------- Garis pembatas + baris bawah ---------- */

.tk-site-footer__bottom-grid {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-template-areas:
		'copyright nav'
		'copyright legal';
	column-gap: 40px;
	row-gap: 8px;
	align-items: start;
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid #f2f2f2;
}

.tk-site-footer__copyright {
	grid-area: copyright;
	font-size: 14px;
	color: rgba( 0, 0, 0, 0.55 );
	line-height: 1.6;
}

.tk-site-footer__nav {
	grid-area: nav;
}

.tk-site-footer__legal {
	grid-area: legal;
}

.tk-site-footer__links,
.tk-site-footer__legal-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px 24px;
}

.tk-site-footer__links a {
	/* 14px → 12px (22 Sep 2026, permintaan user) — dikecualikan dari
	   ukuran teks global situs (14px), pola yang sama seperti trigger
	   Sort PLP (juga sengaja 12px, alasan yang sama: teks KAPITAL terasa
	   lebih besar & berat di ukuran yang sama dengan teks biasa). */
	font-size: 12px;
	text-transform: uppercase;
	color: #000000;
	text-decoration: none;
}

.tk-site-footer__links a:hover {
	color: #000000;
	opacity: 0.7;
}

.tk-site-footer__legal-links a {
	font-size: 12px;
	text-transform: uppercase;
	color: rgba( 0, 0, 0, 0.55 );
	text-decoration: none;
}

.tk-site-footer__legal-links a:hover {
	color: rgba( 0, 0, 0, 0.55 );
	opacity: 0.7;
}

@media ( max-width: 767px ) {
	.tk-site-footer__inner {
		padding-top: 32px;
		/* 64px → 24px (25 Sep 2026, klien). Aman dari tombol kembali-ke-atas
		   karena di HP copyright rata TENGAH (tombol di pojok kanan). */
		padding-bottom: 24px;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	/* ⚠️ 25 Sep 2026 (revisi klien): ikon sosial di HP dipindah KE BAWAH
	   daftar menu. Murni CSS: pembungkus grid dijadikan `display: contents`
	   supaya menu, legal, ikon & copyright jadi anak langsung `.inner`
	   (flex column) yang bisa diurutkan ulang dengan `order`:
	   menu Info → legal → garis + ikon sosial → copyright. */
	.tk-site-footer__bottom-grid {
		display: contents;
	}

	.tk-site-footer__nav {
		order: 1;
	}

	.tk-site-footer__legal {
		order: 2;
	}

	.tk-site-footer__top {
		order: 3;
		justify-content: flex-start;
		margin-top: 8px; /* 16px gap + 8px = 24px dari link terakhir */
		padding-top: 24px;
		border-top: 1px solid #f2f2f2;
	}

	.tk-site-footer__copyright {
		order: 4;
		margin-top: 8px; /* 16px gap + 8px = 24px dari ikon (atau link terakhir kalau tanpa ikon) */
		text-align: center;
		/* Satu baris: "© 2026 Takkan  All rights reserved". */
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		column-gap: 6px;
	}

	/* Menu 2 kolom, jarak 16px (revisi klien 25 Sep 2026). */
	.tk-site-footer__links,
	.tk-site-footer__legal-links {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px;
		justify-content: stretch;
	}
}