/* Tuntung Situs — mengikuti "00 · Style Guide" di Figma */
:root {
	--trs-cream: #fbf6ee;
	--trs-surface: #ffffff;
	--trs-peach: #f6e3d3;
	--trs-ink: #2a211c;
	--trs-muted: #6b5e55;
	--trs-on-dark: #fffcf7;
	--trs-border: #eadfd1;
	--trs-terracotta: #c2522d;
	--trs-terracotta-dark: #9e3f20;
	--trs-herb: #2f4a3a;
	--trs-mustard: #e0a82e;
	--trs-serif: "Fraunces", Georgia, "Times New Roman", serif;
	--trs-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--trs-radius: 16px;
	--trs-wadah: 1280px;
	/* variabel kartu produk Tuntung Affiliate, agar kartu tampil benar di luar .ta-grid */
	--ta-cream: #fbf6ee;
	--ta-surface: #ffffff;
	--ta-peach: #f6e3d3;
	--ta-ink: #2a211c;
	--ta-muted: #6b5e55;
	--ta-border: #eadfd1;
	--ta-terracotta: #c2522d;
	--ta-terracotta-dark: #9e3f20;
	--ta-herb: #2f4a3a;
	--ta-mustard: #e0a82e;
}

/* ---------- Dasar ---------- */
html body.trs {
	background: var(--trs-cream) !important;
	background-image: none !important;
	color: var(--trs-ink);
	font-family: var(--trs-sans);
	font-size: 16px;
	line-height: 26px;
	-webkit-font-smoothing: antialiased;
}
body.trs a { color: var(--trs-terracotta); }
body.trs a:hover { color: var(--trs-terracotta-dark); }
body.trs h1, body.trs h2, body.trs h3, body.trs h4 { color: var(--trs-ink); }
body.trs img { max-width: 100%; height: auto; }
body.trs .site-main,
body.trs main.trs-main { max-width: none; padding: 0; margin: 0; }
body.trs:not(.trs-beranda):not(.trs-artikel):not(.trs-arsip) .site-main {
	max-width: 824px;
	margin: 0 auto;
	padding: 48px 20px 80px;
}
body.trs .page-header .entry-title {
	font-family: var(--trs-serif);
	font-weight: 600;
	font-size: 40px;
	line-height: 48px;
	letter-spacing: -0.5px;
	max-width: none;
	padding: 0;
	margin: 0 0 24px;
}
body.trs .page-content h2 { font-family: var(--trs-serif); font-weight: 600; font-size: 28px; line-height: 36px; margin: 40px 0 12px; }
body.trs .page-content ul { padding-left: 1.2em; }

.trs-wadah {
	max-width: calc(var(--trs-wadah) + 2 * 80px);
	margin: 0 auto;
	padding: 0 80px;
	box-sizing: border-box;
}

.trs-eyebrow {
	display: block;
	font-family: var(--trs-sans);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--trs-herb);
	margin: 0 0 8px;
}
.trs-eyebrow--terracotta { color: var(--trs-terracotta); }
.trs-eyebrow--mustard { color: var(--trs-mustard); }

body.trs .trs-display {
	font-family: var(--trs-serif);
	font-weight: 600;
	font-size: 56px;
	line-height: 64px;
	letter-spacing: -1px;
	margin: 0 0 24px;
}
body.trs .trs-h1 {
	font-family: var(--trs-serif);
	font-weight: 600;
	font-size: 40px;
	line-height: 48px;
	letter-spacing: -0.5px;
	margin: 0 0 28px;
}
body.trs .trs-h2 {
	font-family: var(--trs-serif);
	font-weight: 600;
	font-size: 28px;
	line-height: 36px;
	margin: 0 0 20px;
}

/* ---------- Tombol ---------- */
body.trs .trs-tombol,
body.trs .ta-tombol.trs-tombol {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: 999px;
	background: var(--trs-terracotta);
	border: 1.5px solid var(--trs-terracotta);
	color: var(--trs-on-dark);
	font-family: var(--trs-sans);
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	text-decoration: none;
	transition: background .15s, border-color .15s;
	box-sizing: border-box;
}
body.trs .trs-tombol:hover { background: var(--trs-terracotta-dark); border-color: var(--trs-terracotta-dark); color: var(--trs-on-dark); }
body.trs .trs-tombol--garis { background: transparent; color: var(--trs-ink); border-color: var(--trs-ink); }
body.trs .trs-tombol--garis:hover { background: var(--trs-ink); color: var(--trs-on-dark); border-color: var(--trs-ink); }
body.trs .trs-tombol--penuh { display: flex; width: 100%; }
body.trs .trs-link-panah { font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }

/* ---------- Header ---------- */
.trs-header {
	background: var(--trs-surface);
	border-bottom: 1px solid var(--trs-border);
	position: sticky;
	top: 0;
	z-index: 50;
}
.admin-bar .trs-header { top: 32px; }
.trs-header__dalam {
	display: flex;
	align-items: center;
	gap: 32px;
	min-height: 80px;
}
body.trs .trs-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--trs-ink);
	flex-shrink: 0;
}
.trs-logo__mark {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--trs-terracotta);
	display: inline-block;
	object-fit: cover;
}
body.trs .trs-logo__teks {
	font-family: var(--trs-serif);
	font-weight: 600;
	font-size: 26px;
	line-height: 36px;
	margin: 0;
	color: var(--trs-ink);
}
.trs-nav { flex: 1; display: flex; justify-content: center; }
body.trs .trs-nav__list {
	display: flex;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}
body.trs .trs-nav__list a {
	color: var(--trs-ink);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-decoration: none;
	white-space: nowrap;
}
body.trs .trs-nav__list a:hover,
body.trs .trs-nav__list .current-menu-item a,
body.trs .trs-nav__list .trs-nav__deal a { color: var(--trs-terracotta); }
.trs-cari {
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--trs-cream);
	border: 1px solid var(--trs-border);
	border-radius: 999px;
	padding: 0 16px;
	height: 40px;
	width: 240px;
	box-sizing: border-box;
}
.trs-cari__ikon { font-size: 13px; }
body.trs .trs-cari input[type="search"] {
	border: 0;
	background: transparent;
	padding: 0;
	font-family: var(--trs-sans);
	font-size: 14px;
	color: var(--trs-ink);
	width: 100%;
	outline: none;
	box-shadow: none;
}
.trs-cari:focus-within { border-color: var(--trs-terracotta); }
.trs-cari--mobile { display: none; }
body.trs .trs-header__toggle {
	display: none;
	margin-left: auto;
	background: transparent;
	border: 1px solid var(--trs-border);
	border-radius: 10px;
	color: var(--trs-ink);
	font-size: 20px;
	padding: 6px 12px;
	line-height: 1;
}

/* ---------- Beranda ---------- */
.trs-hero { padding: 80px 0 64px; }
.trs-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
	gap: 64px;
	align-items: center;
}
body.trs .trs-hero__teks .trs-display { max-width: 560px; }
.trs-hero__lead { color: var(--trs-muted); max-width: 540px; margin: 0 0 24px; }
.trs-hero__tombol { display: flex; flex-wrap: wrap; gap: 12px; }
.trs-hero__foto {
	position: relative;
	aspect-ratio: 560 / 440;
	background: var(--trs-peach);
	border-radius: 24px;
	overflow: hidden;
}
.trs-hero__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.trs .trs-hero__kartu {
	position: absolute;
	left: 24px;
	bottom: 24px;
	background: var(--trs-surface);
	border-radius: 12px;
	padding: 14px 18px;
	text-decoration: none;
	box-shadow: 0 8px 24px rgba(42, 33, 28, .08);
	max-width: calc(100% - 48px);
}
.trs-hero__kartu .trs-eyebrow { margin-bottom: 4px; }
.trs-hero__kartu-nama { display: block; color: var(--trs-ink); font-size: 14px; font-weight: 700; line-height: 20px; }

.trs-kategori { padding: 0 0 64px; }
body.trs .trs-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}
body.trs .trs-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 20px;
	background: var(--trs-surface);
	border: 1px solid var(--trs-border);
	border-radius: 999px;
	color: var(--trs-ink);
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	text-decoration: none;
	transition: border-color .15s, background .15s;
}
body.trs .trs-chip:hover { border-color: var(--trs-terracotta); background: var(--trs-peach); color: var(--trs-ink); }

.trs-seksi { padding: 64px 0; }
.trs-seksi--putih { background: var(--trs-surface); }
.trs-seksi--atas0 { padding-top: 32px; }
.trs-seksi__judul {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
}
body.trs .trs-seksi__judul .trs-h1 { margin: 0; }

.trs-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	background: var(--trs-herb);
	border-radius: 24px;
	padding: 48px 56px;
}
.trs-banner__judul {
	font-family: var(--trs-serif);
	font-weight: 600;
	font-size: 40px;
	line-height: 48px;
	letter-spacing: -0.5px;
	color: var(--trs-on-dark);
	max-width: 640px;
	margin: 0;
}
.trs-banner .trs-tombol { flex-shrink: 0; }

.trs-grid-artikel {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.trs-kartu-artikel {
	background: var(--trs-surface);
	border: 1px solid var(--trs-border);
	border-radius: var(--trs-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow .15s, transform .15s;
}
.trs-kartu-artikel:hover { box-shadow: 0 10px 30px rgba(42, 33, 28, .08); transform: translateY(-2px); }
.trs-kartu-artikel__foto { display: block; aspect-ratio: 400 / 220; background: var(--trs-peach); }
.trs-kartu-artikel__foto img, .trs-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
.trs-kartu-artikel__isi { padding: 20px 24px 24px; }
body.trs .trs-kartu-artikel__judul {
	font-family: var(--trs-sans);
	font-size: 20px;
	font-weight: 700;
	line-height: 28px;
	margin: 0 0 8px;
}
body.trs .trs-kartu-artikel__judul a { color: var(--trs-ink); text-decoration: none; }
body.trs .trs-kartu-artikel__judul a:hover { color: var(--trs-terracotta); }
.trs-kartu-artikel__meta { color: var(--trs-muted); font-size: 14px; line-height: 20px; margin: 0; }

.trs-kosong {
	background: var(--trs-surface);
	border: 1px dashed var(--trs-border);
	border-radius: var(--trs-radius);
	padding: 32px;
	text-align: center;
	color: var(--trs-muted);
	margin: 0;
}

/* ---------- Footer ---------- */
.trs-footer {
	background: var(--trs-ink);
	color: var(--trs-on-dark);
	padding: 56px 0 40px;
	font-size: 14px;
	line-height: 20px;
}
.trs-footer__atas {
	display: flex;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}
.trs-footer__brand { max-width: 320px; }
.trs-footer__brand p { margin: 0; }
p.trs-footer__nama {
	font-family: var(--trs-serif);
	font-weight: 600;
	font-size: 28px;
	line-height: 36px;
	margin: 0 0 10px;
}
body.trs .trs-footer__tautan {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}
body.trs .trs-footer a { color: var(--trs-on-dark); text-decoration: none; }
body.trs .trs-footer a:hover { color: var(--trs-mustard); }
.trs-footer__disclosure { max-width: 900px; margin: 24px 0 0; opacity: .85; }
.trs-footer__hak { margin: 16px 0 0; opacity: .6; font-size: 12px; }

/* ---------- Artikel ---------- */
.trs-artikel__grid {
	display: grid;
	grid-template-columns: minmax(0, 824px) 320px;
	gap: 56px;
	justify-content: center;
	padding-top: 56px;
	padding-bottom: 64px;
}
body.trs .trs-breadcrumb { font-size: 14px; line-height: 20px; color: var(--trs-muted); margin-bottom: 32px; }
body.trs .trs-breadcrumb a { color: var(--trs-muted); text-decoration: none; }
body.trs .trs-breadcrumb a:hover { color: var(--trs-terracotta); }
.trs-artikel__header { margin-bottom: 32px; }
body.trs .trs-artikel__judul {
	font-family: var(--trs-serif);
	font-weight: 600;
	font-size: 56px;
	line-height: 64px;
	letter-spacing: -1px;
	margin: 0 0 14px;
}
.trs-artikel__meta { color: var(--trs-muted); font-size: 14px; line-height: 20px; margin: 0; }
.trs-artikel__foto { margin: 0 0 32px; border-radius: var(--trs-radius); overflow: hidden; }
.trs-info {
	background: var(--trs-peach);
	border-radius: 12px;
	padding: 14px 18px;
	font-size: 14px;
	line-height: 20px;
	color: var(--trs-ink);
	margin: 0 0 32px;
}
.trs-konten { font-size: 17px; line-height: 28px; }
body.trs .trs-konten h2 {
	font-family: var(--trs-serif);
	font-weight: 600;
	font-size: 32px;
	line-height: 40px;
	margin: 48px 0 16px;
	scroll-margin-top: 110px;
}
body.trs .trs-konten h3 { font-family: var(--trs-sans); font-weight: 700; font-size: 20px; line-height: 28px; margin: 32px 0 10px; }
.trs-konten p { margin: 0 0 18px; }
.trs-konten ul, .trs-konten ol { margin: 0 0 18px; padding-left: 1.3em; }
.trs-konten li { margin-bottom: 6px; }
.trs-konten blockquote { border-left: 4px solid var(--trs-terracotta); margin: 24px 0; padding: 4px 0 4px 20px; color: var(--trs-muted); }

.trs-ringkasan {
	background: var(--trs-surface);
	border: 1px solid var(--trs-border);
	border-radius: 20px;
	padding: 30px;
	margin: 0 0 40px;
}
body.trs .trs-konten .trs-ringkasan__judul { font-family: var(--trs-serif); font-weight: 600; font-size: 28px; line-height: 36px; margin: 0 0 20px; }
.trs-ringkasan__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.trs-ringkasan__item {
	background: var(--trs-cream);
	border-radius: 14px;
	padding: 18px;
	display: flex;
	flex-direction: column;
}
.trs-konten .trs-ringkasan__nama { font-size: 16px; font-weight: 700; line-height: 24px; margin: 0 0 8px; }
.trs-konten .trs-ringkasan__harga { font-size: 22px; font-weight: 700; line-height: 28px; color: var(--trs-terracotta); margin: 0 0 12px; }
.trs-ringkasan__item .trs-tombol { margin-top: auto; width: 100%; }

.trs-tabel-wadah { overflow-x: auto; margin: 0 0 40px; border: 1px solid var(--trs-border); border-radius: 14px; background: var(--trs-surface); }
body.trs .trs-tabel { width: 100%; border-collapse: collapse; margin: 0; font-size: 14px; line-height: 20px; border: 0; }
body.trs .trs-tabel th, body.trs .trs-tabel td { padding: 14px 20px; text-align: left; border: 0; border-bottom: 1px solid var(--trs-border); background: transparent; }
body.trs .trs-tabel thead th { background: var(--trs-peach); font-weight: 700; }
body.trs .trs-tabel tbody tr:last-child th, body.trs .trs-tabel tbody tr:last-child td { border-bottom: 0; }
body.trs .trs-tabel tbody th { font-weight: 600; }
body.trs .trs-tabel tbody th a { color: var(--trs-ink); }
.trs-tabel__harga { color: var(--trs-terracotta); font-weight: 700; white-space: nowrap; }

.trs-ulasan { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; margin: 20px 0 40px; align-items: start; }
.trs-ulasan--tanpa-produk { display: block; }
.trs-ulasan__kartu .ta-grid { margin: 0; grid-template-columns: 1fr; }
.trs-ulasan__isi > :first-child { margin-top: 0; }
.trs-pm { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 16px 0 24px; }
.trs-pm__kolom { border-radius: 14px; padding: 18px 19px; }
.trs-pm__kolom--plus { background: #eaf1ec; }
.trs-pm__kolom--minus { background: var(--trs-peach); }
.trs-pm__kolom--minus .trs-eyebrow { color: var(--trs-terracotta-dark); }
body.trs .trs-pm ul { list-style: none; padding: 0; margin: 0; }
body.trs .trs-pm li { font-size: 14px; line-height: 20px; margin: 0 0 8px; }
.trs-pm__kolom--plus li span { color: var(--trs-herb); font-weight: 700; }
.trs-pm__kolom--minus li span { color: var(--trs-terracotta); font-weight: 700; }

.trs-sidebar { display: flex; flex-direction: column; gap: 24px; }
.trs-toc, .trs-deal-sidebar { border-radius: var(--trs-radius); padding: 24px 25px; }
.trs-toc { background: var(--trs-surface); border: 1px solid var(--trs-border); position: sticky; top: 112px; }
.admin-bar .trs-toc { top: 144px; }
body.trs .trs-toc ol { list-style: none; margin: 12px 0 0; padding: 0; }
body.trs .trs-toc li { margin: 0 0 12px; font-size: 14px; line-height: 20px; }
body.trs .trs-toc a { color: var(--trs-ink); text-decoration: none; }
body.trs .trs-toc a:hover { color: var(--trs-terracotta); }
.trs-deal-sidebar { background: var(--trs-herb); }
.trs-deal-sidebar__judul { font-family: var(--trs-serif); font-weight: 600; font-size: 22px; line-height: 28px; color: var(--trs-on-dark); margin: 0 0 16px; }

/* ---------- Arsip ---------- */
.trs-arsip__header { padding: 64px 0 16px; }
body.trs .trs-arsip__header .trs-h1 { margin-bottom: 12px; }
.trs-arsip__desk { color: var(--trs-muted); max-width: 640px; }
.trs-arsip__desk p { margin: 0; }
.trs-paginasi { display: flex; justify-content: center; gap: 8px; margin-top: 40px; flex-wrap: wrap; }
body.trs .trs-paginasi .page-numbers {
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid var(--trs-border);
	background: var(--trs-surface);
	color: var(--trs-ink);
	text-decoration: none;
	font-size: 14px;
}
body.trs .trs-paginasi .current { background: var(--trs-terracotta); border-color: var(--trs-terracotta); color: var(--trs-on-dark); }
.trs-arsip .trs-cari { margin: 24px auto 0; width: 320px; background: var(--trs-surface); }

/* ---------- Responsif ---------- */
@media (max-width: 1200px) {
	.trs-wadah { padding: 0 40px; }
	.trs-artikel__grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; }
	.trs-nav__list { gap: 20px; }
	.trs-cari--desktop { width: 200px; }
}
@media (max-width: 1024px) {
	.trs-hero__grid { grid-template-columns: 1fr; gap: 40px; }
	.trs-hero { padding-top: 48px; }
	.trs-artikel__grid { grid-template-columns: minmax(0, 1fr); }
	.trs-toc { position: static; }
	.trs-grid-artikel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.trs-cari--desktop { display: none; }
	body.trs .trs-header__toggle { display: inline-block; }
	.trs-nav {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: var(--trs-surface);
		border-bottom: 1px solid var(--trs-border);
		padding: 16px 40px 24px;
		flex-direction: column;
		gap: 16px;
	}
	.trs-nav.is-open { display: flex; }
	body.trs .trs-nav__list { flex-direction: column; gap: 14px; }
	body.trs .trs-nav__list a { font-size: 16px; }
	.trs-cari--mobile { display: flex; width: 100%; }
	.trs-header__dalam { position: relative; }
}
@media (max-width: 782px) {
	.admin-bar .trs-header { top: 46px; }
}
@media (max-width: 720px) {
	.trs-wadah { padding: 0 20px; }
	.trs-nav { padding: 16px 20px 24px; }
	.trs-header__dalam { min-height: 64px; }
	body.trs .trs-logo__teks { font-size: 22px; }
	body.trs .trs-display, body.trs .trs-artikel__judul { font-size: 38px; line-height: 44px; letter-spacing: -0.5px; }
	body.trs .trs-h1, .trs-banner__judul { font-size: 30px; line-height: 38px; }
	.trs-seksi { padding: 48px 0; }
	.trs-seksi__judul { flex-direction: column; align-items: flex-start; }
	.trs-banner { flex-direction: column; align-items: flex-start; padding: 32px 24px; gap: 24px; }
	.trs-grid-artikel { grid-template-columns: 1fr; }
	.trs-ulasan { grid-template-columns: 1fr; }
	.trs-ulasan__kartu { max-width: 320px; }
	body.trs .trs-chip { padding: 10px 16px; font-size: 15px; }
	.trs-artikel__grid { padding-top: 32px; }
	body.trs .trs-konten h2 { font-size: 26px; line-height: 34px; }
	.trs-ringkasan { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
	.trs-kartu-artikel, .trs-chip, .trs-tombol { transition: none; }
	.trs-kartu-artikel:hover { transform: none; }
}

/* Kartu produk di dalam konten artikel: netralkan gaya h3/p konten */
body.trs .trs-konten .ta-kartu p,
body.trs .trs-konten .ta-kartu h3 { margin-top: 0; }
body.trs .trs-konten .ta-kartu__meta { margin-bottom: 6px; }
body.trs .trs-konten h3.ta-kartu__nama { font-family: var(--trs-sans); font-size: 16px; font-weight: 500; line-height: 24px; margin: 0 0 6px; }
body.trs .trs-konten .ta-kartu__rating { margin-bottom: 6px; font-size: 14px; line-height: 20px; }
body.trs .trs-konten .ta-kartu__harga { margin-bottom: 14px; }
body.trs .trs-konten .ta-kartu a.ta-tombol { color: var(--trs-on-dark); text-decoration: none; }