/* TM Design System — komponen. Prefix tm-, tanpa !important (kecuali dicatat). */

/* ---------- Section & layout ---------- */
.tm-section { padding-block: var(--tm-section-pad); }
.tm-section--paper { background: var(--tm-paper); }
.tm-section--navy {
	background: var(--tm-ink-deep);
	color: var(--tm-paper);
}
.tm-section--navy h2, .tm-section--navy h3 { color: #fff; }
.tm-section--navy .tm-muted { color: rgba(237, 240, 245, 0.7); }

.tm-grid-2 { display: grid; gap: 48px; grid-template-columns: 1fr; }
.tm-grid-3 { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 900px) {
	.tm-grid-2 { grid-template-columns: 5fr 7fr; align-items: start; }
	.tm-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Pembatas berundak di atas section navy (spec §3.3). */
.tm-bench-divider {
	height: 28px;
	background: var(--tm-ink-deep);
	clip-path: polygon(0 100%, 0 66%, 18% 66%, 18% 33%, 36% 33%, 36% 0, 100% 0, 100% 100%);
}

/* ---------- Eyebrow ---------- */
.tm-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--tm-font-mono);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tm-steel);
	margin-bottom: 16px;
}
.tm-eyebrow::before {
	content: "";
	width: 16px;
	height: 2px;
	background: var(--tm-ember);
}
.tm-section--navy .tm-eyebrow { color: rgba(237, 240, 245, 0.65); }

/* ---------- Tombol ---------- */
.tm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 28px;
	border-radius: var(--tm-radius-sm);
	font-family: var(--tm-font-body);
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.tm-btn--primary { background: var(--tm-ember); color: #fff; }
.tm-btn--primary:hover { background: var(--tm-ember-dark); transform: translateY(-1px); }
.tm-btn--ghost { border-color: var(--tm-ink); color: var(--tm-ink); background: transparent; }
.tm-btn--ghost:hover { background: rgba(21, 42, 78, 0.06); transform: translateY(-1px); }
.tm-btn--light { border-color: rgba(255, 255, 255, 0.7); color: #fff; background: transparent; }
.tm-btn--light:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-1px); }

/* ---------- Kartu ---------- */
.tm-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--tm-line);
	border-radius: var(--tm-radius);
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.tm-card::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	background: var(--tm-ember);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}
.tm-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--tm-shadow);
	border-color: rgba(21, 42, 78, 0.24);
}
.tm-card:hover::after { transform: scaleX(1); }
.tm-card__media { aspect-ratio: 3 / 2; overflow: hidden; }
.tm-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* Potongan undakan kecil di sudut kanan-bawah foto kartu (spec §3.3). */
.tm-card__media--bench {
	clip-path: polygon(0 0, 100% 0, 100% 72%, 86% 72%, 86% 86%, 72% 86%, 72% 100%, 0 100%);
}
.tm-card__body { padding: 24px; }
.tm-card__body h3 { margin-bottom: 8px; }
.tm-card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	font-weight: 500;
	color: var(--tm-ember);
	text-decoration: none;
}
.tm-card__link:hover { text-decoration: underline; }

/* ---------- Statistik ---------- */
.tm-stats-band {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px 24px;
	padding-block: 40px;
	border-top: 1px solid var(--tm-line);
}
@media (min-width: 900px) { .tm-stats-band { grid-template-columns: repeat(4, 1fr); } }
.tm-stat__num {
	font-family: var(--tm-font-mono);
	font-weight: 500;
	font-size: clamp(32px, 3.4vw, 44px);
	font-variant-numeric: tabular-nums;
	color: var(--tm-ink);
	line-height: 1;
}
.tm-stat__suffix { color: var(--tm-hivis); }
.tm-stat__label {
	font-family: var(--tm-font-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tm-steel);
	margin-top: 8px;
}

/* ---------- Bench mask (hero) ---------- */
.tm-bench-mask {
	clip-path: polygon(0 32%, 14% 32%, 14% 16%, 28% 16%, 28% 0, 100% 0, 100% 100%, 0 100%);
	border-radius: var(--tm-radius);
	overflow: hidden;
}
.tm-bench-mask img { width: 100%; height: 100%; object-fit: cover; }
.tm-bench-figure { position: relative; }
/* Chip merah berundak kecil di belakang foto — kedalaman, gema logo. */
.tm-bench-chip {
	position: absolute;
	left: -14px;
	bottom: -14px;
	width: 120px;
	height: 72px;
	background: var(--tm-ember);
	clip-path: polygon(0 100%, 0 50%, 33% 50%, 33% 0, 100% 0, 100% 100%);
	z-index: -1;
}

/* ---------- Grid logo mitra (di section navy) ---------- */
.tm-logos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px 24px;
	align-items: center;
}
@media (min-width: 900px) { .tm-logos { grid-template-columns: repeat(6, 1fr); } }
.tm-logos img {
	max-height: 44px;
	width: 100%;
	object-fit: contain;
	filter: grayscale(1) brightness(0) invert(1);
	opacity: 0.55;
	transition: filter 0.2s ease, opacity 0.2s ease;
}
.tm-logos img:hover { filter: none; opacity: 1; }

/* ---------- Header ---------- */
.tm-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #fff;
	border-bottom: 1px solid var(--tm-line);
}
.tm-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 72px;
}
.tm-header__logo img { height: 44px; width: auto; }
.tm-nav { display: none; align-items: center; gap: 28px; }
@media (min-width: 900px) { .tm-nav { display: flex; } }
.tm-nav a {
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	color: var(--tm-ink);
	padding-block: 6px;
	background: linear-gradient(var(--tm-ember), var(--tm-ember)) left bottom / 0 2px no-repeat;
	transition: background-size 0.2s ease;
}
.tm-nav a:hover, .tm-nav a[aria-current="page"] { background-size: 100% 2px; }
.tm-header__toggle {
	display: inline-flex;
	background: none;
	border: 1px solid var(--tm-line);
	border-radius: var(--tm-radius-sm);
	padding: 10px 12px;
	font: inherit;
	color: var(--tm-ink);
}
@media (min-width: 900px) { .tm-header__toggle { display: none; } }
.tm-header__drawer { display: none; border-top: 1px solid var(--tm-line); padding: 16px 0 24px; }
.tm-header__drawer.is-open { display: block; }
.tm-header__drawer a { display: block; padding: 12px 0; font-weight: 500; text-decoration: none; color: var(--tm-ink); }

/* ---------- Footer ---------- */
.tm-footer { background: #fff; border-top: 1px solid var(--tm-line); padding-block: 64px 32px; }
.tm-footer__grid { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .tm-footer__grid { grid-template-columns: 4fr 2fr 2fr 3fr; } }
.tm-footer h3 { font-size: 15px; font-family: var(--tm-font-mono); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tm-steel); }
.tm-footer a { text-decoration: none; }
.tm-footer a:hover { color: var(--tm-ember); }
.tm-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tm-footer__legal {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--tm-line);
	font-size: 14px;
	color: var(--tm-steel);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
}
.tm-social { display: flex; gap: 16px; list-style: none; margin: 16px 0 0; padding: 0; }
.tm-social a { font-family: var(--tm-font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; }

/* ---------- Reveal (dipakai motion.js) ---------- */
/* Status tersembunyi digate @media (scripting: enabled): tanpa JS (crawler,
   script diblokir, no-JS), konten SELALU tampil — konstrain "konten tetap tampil". */
@media (scripting: enabled) {
	[data-tm-reveal] {
		opacity: 0;
		translate: 0 8px;
	}
}
[data-tm-reveal] {
	transition:
		opacity 0.5s ease calc(var(--tm-stagger, 0) * 60ms),
		translate 0.5s ease calc(var(--tm-stagger, 0) * 60ms),
		transform 0.2s ease,
		box-shadow 0.2s ease,
		border-color 0.2s ease;
	/* transform/box-shadow/border-color ikut dalam daftar (tanpa delay) supaya
	   transisi hover .tm-card tidak tertimpa oleh rule attribute ini. */
}
[data-tm-reveal].is-in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
	[data-tm-reveal] { opacity: 1; translate: none; transition: none; }
	.tm-btn, .tm-card, .tm-nav a, .tm-logos img { transition: none; }
}