/* =====================================================
   TETSU HOME HERO
===================================================== */

.tm-hero {
	position: relative;

	display: flex;

	width: 100%;

	max-width: none;

	min-height: 650px;

	margin-inline:
		calc(50% - 50vw);

	overflow: hidden;

	background: #eef6fe;

	box-sizing: border-box;
}


/* =====================================================
   GLOBAL BOX SIZING
===================================================== */

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


/* =====================================================
   LEFT CORPORATE CONTENT
===================================================== */

.tm-hero-content {
	position: relative;

	z-index: 2;

	display: flex;

	flex-direction: column;

	justify-content: center;

	width: 42%;

	min-height: 650px;

	padding:
		80px
		60px
		80px
		max(60px, calc((100vw - 1320px) / 2));

	transition:
		transform 1.3s cubic-bezier(.22,.8,.25,1),
		opacity .6s ease;

	will-change:
		transform,
		opacity;
}


/* =====================================================
   HERO TEXT
===================================================== */

.tm-hero-title {
	margin: 0 0 28px;

	font-size:
		clamp(38px, 3.5vw, 54px);

	line-height: 1.12;

	font-weight: 800;

	color: #1d1d1f;

	text-transform: uppercase;
}


.tm-hero-title span {
	color: var(--acm-primary);
}


.tm-hero-desc {
	max-width: 520px;

	margin: 0 0 14px;

	font-size: 17px;

	line-height: 1.7;

	color: #4d5562;
}


.tm-hero-actions {
	display: flex;

	gap: 20px;

	margin-top: 22px;
}


/* =====================================================
   HERO BUTTON
===================================================== */

.tm-hero-actions .btn-primary {
	display: inline-flex;

	align-items: center;

	gap: 12px;

	padding: 16px 28px;

	border: 0;

	border-radius: 8px;

	background: #173b70;

	color: #fff;

	font-size: 14px;

	font-weight: 700;

	text-decoration: none;

	transition:
		background .25s ease,
		transform .25s ease;
}


.tm-hero-actions .btn-primary:hover {
	background: #102d57;

	transform:
		translateY(-2px);
}


/* =====================================================
   RIGHT BUSINESS AREA
===================================================== */

/*
 * Kemiringan batas kiri dibuat sama
 * dengan kemiringan panel.
 *
 * Panel:
 * width    : 31%
 * diagonal : 12%
 *
 * 31% × 12% = 3.72%
 */

.tm-hero-right {
	position: absolute;

	top: 0;

	right: -2px;

	z-index: 3;

	width: calc(58% + 2px);

	height: 100%;

	margin: 0;

	padding: 0;

	overflow: hidden;

	background: #10243d;

	clip-path:
		polygon(
			3.72% 0,
			100% 0,
			100% 100%,
			0 100%
		);

	transition:
		width 1.3s cubic-bezier(.22,.8,.25,1),
		clip-path .85s cubic-bezier(.22,.8,.25,1);

	will-change:
		width,
		clip-path;
}


/* =====================================================
   PANEL WRAPPER
===================================================== */

.tm-business-panels {
	position: relative;

	width: 100%;

	height: 100%;

	margin: 0;

	padding: 0;

	overflow: hidden;

	background: #10243d;
}


/* =====================================================
   BUSINESS PANEL
===================================================== */

.tm-business-panel {
	position: absolute;

	top: 0;

	width: 31%;

	height: 100%;

	margin: 0;

	padding: 0;

	border: 0;

	border-radius: 0;

	background: #10243d;

	cursor: pointer;

	overflow: hidden;

	/*
	 * Bentuk diagonal /
	 *
	 * Atas bergeser ke kanan.
	 * Bawah bergeser ke kiri.
	 */

	clip-path:
		polygon(
			12% 0,
			100% 0,
			88% 100%,
			0 100%
		);

	transition:
		left 1.3s cubic-bezier(.22,.8,.25,1),
		width 1.3s cubic-bezier(.22,.8,.25,1),
		clip-path .85s cubic-bezier(.22,.8,.25,1),
		opacity .5s ease;

	will-change:
		left,
		width,
		clip-path;
}


/* =====================================================
   INITIAL PANEL POSITIONS
===================================================== */

.tm-panel-auto {
	left: 0;

	z-index: 4;
}


.tm-panel-medical {
	left: 24%;

	z-index: 5;
}


.tm-panel-home {
	left: 48%;

	z-index: 6;
}


/*
 * Panel terakhir dibuat sedikit lebih lebar.
 *
 * Tujuannya agar sisi kanan tidak menyisakan
 * background kosong.
 */

.tm-panel-office {
	left: 72%;

	width: calc(31% + 4px);

	z-index: 7;
}


/* =====================================================
   PANEL IMAGE
===================================================== */

.tm-business-panel img {
	position: absolute;

	inset: -2%;

	width: 104%;

	height: 104%;

	max-width: none;

	object-fit: cover;

	object-position: center;

	transform:
		scale(1.05);

	filter:
		none;

	transition:
		transform 1.25s cubic-bezier(.22,.8,.25,1),
		filter .9s ease;

	will-change:
		transform,
		filter;
}


/* =====================================================
   PANEL OVERLAY
===================================================== */

.tm-panel-overlay {
	position: absolute;

	inset: 0;

	z-index: 1;

	background:
		linear-gradient(
			180deg,
			rgba(4,17,33,.06) 15%,
			rgba(4,17,33,.88) 100%
		);

	transition:
		background .9s ease;
}


/* =====================================================
   PANEL CONTENT
===================================================== */

.tm-panel-content {
	position: relative;

	z-index: 2;

	display: flex;

	flex-direction: column;

	justify-content: center;

	align-items: center;

	width: 100%;

	height: 100%;

	padding:
		55px
		35px;

	color: #fff;

	text-align: center;

	transform:
		translateY(0);

	transition:
		transform .8s cubic-bezier(.22,.8,.25,1);
}


/* =====================================================
   PANEL ICON
===================================================== */

.tm-panel-icon {
	display: flex;

	align-items: center;

	justify-content: center;

	margin-bottom: 18px;

	font-size: 34px;

	line-height: 1;

	color: #fff;

	transition:
		transform .75s cubic-bezier(.22,.8,.25,1),
		opacity .55s ease;
}


/* =====================================================
   PANEL NAME
===================================================== */

.tm-panel-name {
	display: block;

	font-size: 12px;

	font-weight: 700;

	letter-spacing: .13em;

	line-height: 1.4;

	white-space: nowrap;

	transition:
		transform .75s cubic-bezier(.22,.8,.25,1),
		opacity .55s ease;
}


/* =====================================================
   PANEL DETAIL
===================================================== */

.tm-panel-detail {
	max-width: 600px;

	max-height: 0;

	overflow: hidden;

	opacity: 0;

	transform:
		translateY(25px);

	transition:
		max-height .9s ease,
		opacity .65s ease,
		transform .8s cubic-bezier(.22,.8,.25,1);
}


.tm-panel-detail h2 {
	margin:
		20px
		0
		14px;

	font-size:
		clamp(32px, 4.3vw, 64px);

	line-height: 1.08;

	font-weight: 700;
	color: #fff;
}


.tm-panel-detail p {
	max-width: 460px;

	margin: 0 auto;

	font-size: 16px;

	line-height: 1.7;

	color:
		rgba(255,255,255,.88);
}


/* =====================================================
   HERO ACTIVE STATE
===================================================== */


/* Konten kiri keluar */

.tm-hero.is-panel-active
.tm-hero-content {
	transform:
		translateX(-115%);

	opacity: 0;

	pointer-events: none;
}


/*
 * Area business memenuhi seluruh hero.
 *
 * right tetap -2px agar tidak muncul
 * garis kosong di sisi kanan.
 */

.tm-hero.is-panel-active
.tm-hero-right {
	right: -2px;

	width:
		calc(100% + 2px);

	clip-path:
		inset(0);
}


/* =====================================================
   ACTIVE PANEL
===================================================== */

.tm-hero.is-panel-active
.tm-business-panel.is-active {
	clip-path:
		inset(0);
}


/* Detail aktif */

.tm-hero.is-panel-active
.tm-business-panel.is-active
.tm-panel-detail {
	max-height: 420px;

	opacity: 1;

	transform:
		translateY(0);
}


/* Icon aktif */

.tm-hero.is-panel-active
.tm-business-panel.is-active
.tm-panel-icon {
	transform:
		translateY(-4px);
}


/* Nama aktif */

.tm-hero.is-panel-active
.tm-business-panel.is-active
.tm-panel-name {
	transform:
		translateY(-5px);
}


/* Gambar aktif */

.tm-hero.is-panel-active
.tm-business-panel.is-active img {
	transform:
		scale(1.09);

	filter:
		none;
}

.tm-hero.is-panel-active
.tm-business-panel.is-active .tm-panel-icon img {
	filter:
		brightness(0)
		invert(1);
}

/* =====================================================
   INACTIVE PANEL BLUR
===================================================== */

.tm-hero.is-panel-active
.tm-business-panel:not(.is-active) img {
	filter:
		blur(5px)
		brightness(.65);

	transform:
		scale(1.11);
}


/* =====================================================
   ACTIVE OVERLAY
===================================================== */

.tm-hero.is-panel-active
.tm-business-panel.is-active
.tm-panel-overlay {
	background:
		linear-gradient(
			90deg,
			rgba(4,17,33,.88) 0%,
			rgba(4,17,33,.68) 34%,
			rgba(4,17,33,.24) 67%,
			rgba(4,17,33,.05) 100%
		);
}


/* =====================================================
   ACTIVE: AUTO
===================================================== */

.tm-hero.active-auto
.tm-panel-auto {
	left: 0;

	width: 79%;

	z-index: 10;
}


.tm-hero.active-auto
.tm-panel-medical {
	left: 76%;

	width: 24%;

	z-index: 11;
}


.tm-hero.active-auto
.tm-panel-home {
	left: 94%;

	width: 24%;

	z-index: 12;
}


.tm-hero.active-auto
.tm-panel-office {
	left: 112%;

	width: 24%;

	z-index: 13;
}


/* =====================================================
   ACTIVE: MEDICAL
===================================================== */

.tm-hero.active-medical
.tm-panel-auto {
	left: -18%;

	width: 24%;

	z-index: 8;
}


.tm-hero.active-medical
.tm-panel-medical {
	left: 3%;

	width: 79%;

	z-index: 10;
}


.tm-hero.active-medical
.tm-panel-home {
	left: 79%;

	width: 24%;

	z-index: 11;
}


.tm-hero.active-medical
.tm-panel-office {
	left: 97%;

	width: 24%;

	z-index: 12;
}


/* =====================================================
   ACTIVE: HOME
===================================================== */

.tm-hero.active-home
.tm-panel-auto {
	left: -36%;

	width: 24%;

	z-index: 6;
}


.tm-hero.active-home
.tm-panel-medical {
	left: -18%;

	width: 24%;

	z-index: 8;
}


.tm-hero.active-home
.tm-panel-home {
	left: 3%;

	width: 79%;

	z-index: 10;
}


.tm-hero.active-home
.tm-panel-office {
	left: 79%;

	width: 24%;

	z-index: 11;
}


/* =====================================================
   ACTIVE: OFFICE
===================================================== */

.tm-hero.active-office
.tm-panel-auto {
	left: -54%;

	width: 24%;

	z-index: 6;
}


.tm-hero.active-office
.tm-panel-medical {
	left: -36%;

	width: 24%;

	z-index: 7;
}


.tm-hero.active-office
.tm-panel-home {
	left: -18%;

	width: 24%;

	z-index: 8;
}


/*
 * Office aktif:
 *
 * left 3%
 * width 97% + overscan
 *
 * Dengan tambahan 4px, panel dipastikan
 * melewati batas kanan hero.
 */

.tm-hero.active-office
.tm-panel-office {
	left: 3%;

	width:
		calc(97% + 4px);

	z-index: 10;
}


/* =====================================================
   INITIAL HOVER FEEDBACK
===================================================== */

.tm-hero:not(.is-panel-active)
.tm-business-panel:hover img {
	transform:
		scale(1.09);
}


.tm-hero:not(.is-panel-active)
.tm-business-panel:hover
.tm-panel-overlay {
	background:
		linear-gradient(
			180deg,
			rgba(4,17,33,.03) 10%,
			rgba(4,17,33,.74) 100%
		);
}


/* =====================================================
   PANEL ICON
===================================================== */

.tm-panel-content {
	position: relative;

	z-index: 2;

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	width: 100%;

	height: 100%;

	padding: 55px 35px;

	color: #fff;

	text-align: center;
}


.tm-panel-icon {
	position: relative;

	display: flex;

	align-items: center;

	justify-content: center;

	width: auto;

	height: auto;

	margin: 0 0 16px;

	padding: 0;

	line-height: 0;

	flex: 0 0 auto;

	transform: none;
}


.tm-panel-icon img {
	position: relative;

	inset: auto;

	display: block;

	width: 46px;

	height: 46px;

	max-width: none;

	object-fit: contain;

	transform: none;

	filter: none;
}

.tm-panel-icon img {
	filter:
		brightness(0)
		invert(1);
}
/* =====================================================
   TABLET
===================================================== */

@media (max-width: 991px) {

	.tm-hero {
		display: block;

		width: 100%;

		min-height: auto;

		margin-inline: 0;

		overflow: visible;
	}


	.tm-hero-content {
		width: 100%;

		min-height: auto;

		padding:
			70px
			30px;
	}


	.tm-hero-right {
		position: relative;

		top: auto;

		right: auto;

		width: 100%;

		height: 500px;

		overflow: hidden;

		clip-path:
			inset(0);
	}


	.tm-hero.is-panel-active
	.tm-hero-content {
		transform: none;

		opacity: 1;

		pointer-events: auto;
	}


	.tm-hero.is-panel-active
	.tm-hero-right {
		right: auto;

		width: 100%;
	}


	.tm-hero-title {
		font-size: 40px;
	}


	.tm-hero-desc {
		font-size: 16px;
	}


	.tm-panel-detail h2 {
		font-size:
			clamp(28px, 6vw, 48px);
	}
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 640px) {

	.tm-hero-content {
		padding:
			55px
			24px;
	}


	.tm-hero-title {
		font-size: 34px;
	}


	.tm-hero-right {
		height: 430px;
	}


	.tm-panel-content {
		padding:
			40px
			20px;
	}


	.tm-panel-name {
		font-size: 10px;

		letter-spacing: .09em;
	}


	.tm-panel-detail h2 {
		font-size: 30px;
	}


	.tm-panel-detail p {
		font-size: 14px;
	}
}