/* ===========================

   HERO SECTION

   =========================== */

.hero-section {

	position: relative;

	background: var(--background);

	height: 95vh;

	margin: 0 !important; /* override themedemo section { margin: 0 30px } */

	overflow: visible;

}



/* Background split: kanan gelap */

.hero-section::before {

	content: '';

	position: absolute;

	top: 0;

	right: 0;

	width: 50%;

	height: 100%;

	background: var(--background-green);

	z-index: 0;

	border-radius: 0 0 0 60px;

}



.hero-container {

	position: relative;

	z-index: 1;

}



.hero-row {

	/* min-height: 100vh; */

	padding-top: 50px;

	

}



/* ===========================

   LEFT SIDE

   =========================== */

.hero-left {

	padding-right: 32px;

}



.hero-title {

	font-size: clamp(34px, 2.6vw, 96px);

	font-weight: 800;

	color: var(--text-green);

	line-height: 1.18;

	margin-bottom: 20px;

}



.hero-desc {

	color: var(--text-description-2);

	font-size: clamp(15px, 1.05vw, 28px);

	line-height: 1.85;

	margin-bottom: 36px;

	max-width: clamp(430px, 32vw, 900px);

}

.hero-desc ul,

.hero-desc ol {

	margin-top: -16px !important; 

	padding-left: 20px;

	margin-bottom: 12px;

}

.hero-desc ul { list-style: disc; }

.hero-desc ol { list-style: decimal; }

.hero-desc li { margin-bottom: 4px; }



.hero-btns {

	display: flex;

	align-items: center;

	gap: 14px;

	flex-wrap: wrap;

}



.btn-hero-primary {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	background: var(--background-brown);

	color: #fff;

	border-radius: 50px;

	padding: 13px 32px;

	font-size: 15px;

	text-decoration: none;

	transition: all .2s ease;

	border: 1.5px solid var(--background-brown);

}



.btn-hero-primary:hover {

	background: var(--background-brown-hover);

	cursor: pointer;

	color: #fff;

	box-shadow: 0 10px 26px rgba(185, 132, 102, 0.35);

}



.btn-hero-secondary {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	background: transparent;

	color: var(--text-brown);

	border: 1.5px solid var(--text-brown);

	border-radius: 50px;

	padding: 13px 32px;

	font-size: 15px;

	text-decoration: none;

	transition: all .2s ease;

}



.btn-hero-secondary:hover {

	background: var(--background-brown-hover);

	color: #fff;

	box-shadow: 0 10px 26px rgba(185, 132, 102, 0.35);

}



/* ===========================

   RIGHT SIDE — PHONE + BADGES

   =========================== */

.hero-right {

	display: flex;

	align-items: center;

	justify-content: center;

	min-height: calc(100vh - 72px);

}



.hero-phone-wrapper {

	position: relative;

	margin: 0 auto;

	transform: translate(-90px, -10px); /* phone sedikit keluar ke kiri melewati batas hijau */

}



.hero-phone-img {

	width: 100%;

	height: clamp(400px, 48vw, 400px);
	position: relative;
	z-index: 2;
	/* background: red !Important; */

	filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.05));

}



/* ===========================

   BADGE CARDS

   =========================== */

.hero-badge {

	position: absolute;

	z-index: 3;

	display: flex;

	align-items: center;

	gap: 10px;

	background: var(--background-navbar);

	backdrop-filter: blur(16px);

	-webkit-backdrop-filter: blur(16px);



	border-radius: 12px;

	padding: 16px 28px;

	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);

	white-space: nowrap;

}



.hero-badge-teks {

	font-size: 13px;

	font-weight: 500;

	color: var(--text-card);

}



.hero-badge-check {

	width: 28px;

	height: 28px;

	border-radius: 50%;

	background: var(--text-green);

	color: #fff;

	display: inline-flex;

	align-items: center;

	justify-content: center;

	font-size: 11px;

	flex-shrink: 0;

}



.hero-badge-icon {

	width: 20px;

	height: 20px;

	object-fit: contain;

	flex-shrink: 0;

}



/* Posisi 4 badge — entrance dulu, baru float */

.hero-badge-1 {

	top: 15%;

	right: 35%;

	animation:

		badgeEntrance 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.0s both,

		floatBadge    3.2s ease-in-out                        1.5s infinite;

}



.hero-badge-2 {

	top: 30%;

	right: -35%;

	animation:

		badgeEntrance 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s both,

		floatBadge    3.2s ease-in-out                        1.7s infinite;

}



.hero-badge-3 {

	top: 50%;

	left: -25%;

	animation:

		badgeEntrance 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.4s both,

		floatBadge    3.2s ease-in-out                        1.9s infinite;

}



.hero-badge-4 {

	bottom: 20%;

	right: -35%;

	animation:

		badgeEntrance 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.6s both,

		floatBadge    3.2s ease-in-out                        2.1s infinite;

}



@keyframes floatBadge {

	0%, 100% { transform: translateY(0px); }

	50%       { transform: translateY(-7px); }

}



/* ===========================

   ENTRANCE ANIMATIONS

   =========================== */



/* 1. Title — word-by-word spring */

.hero-title-word {

	display: inline-block;

	animation: wordSpring 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;

}

@keyframes wordSpring {

	from { opacity: 0; transform: translateY(28px) rotate(-4deg); }

	to   { opacity: 1; transform: translateY(0)    rotate(0deg);  }

}



/* 2. Desc — blur reveal */

.hero-desc {

	animation: blurReveal 0.8s ease both;

	animation-delay: 0.6s;

}

@keyframes blurReveal {

	from { opacity: 0; filter: blur(8px); transform: translateY(10px); }

	to   { opacity: 1; filter: blur(0);   transform: translateY(0);    }

}



/* 3. Buttons — bounce overshoot */

.hero-btns {

	animation: bounceIn 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) both;

	animation-delay: 0.85s;

}

@keyframes bounceIn {

	from { opacity: 0; transform: scale(0.85) translateY(16px); }

	to   { opacity: 1; transform: scale(1)    translateY(0);    }

}



/* 4. Phone — 3D tilt masuk dari bawah */

.hero-right {

	animation: phone3DEnter 0.9s cubic-bezier(0.22, 0.68, 0, 1.2) both;

	animation-delay: 0.05s;

}

@keyframes phone3DEnter {

	from { opacity: 0; transform: perspective(1000px) rotateX(14deg) translateY(40px); }

	to   { opacity: 1; transform: perspective(1000px) rotateX(0deg)  translateY(0);    }

}



/* 5. Badges — muncul satu per satu lalu float */

@keyframes badgeEntrance {

	from { opacity: 0; transform: scale(0.7) translateY(12px); }

	to   { opacity: 1; transform: scale(1)   translateY(0);    }

}



/* ===========================

   BUTTON SHIMMER

   =========================== */

.btn-hero-primary {

	position: relative;

	overflow: hidden;

}

.btn-hero-primary::after {

	content: '';

	position: absolute;

	top: 0;

	left: -80%;

	width: 55%;

	height: 100%;

	background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.28) 50%, transparent 100%);

	animation: shimmerBtn 4s ease-in-out infinite;

	animation-delay: 1.5s;

	pointer-events: none;

}

@keyframes shimmerBtn {

	0%   { left: -80%; }

	30%  { left: 125%; }

	100% { left: 125%; }

}



/* ===========================

   PHONE TILT (CSS vars diisi JS)

   =========================== */

.hero-phone-img {

	--tiltX: 0deg;

	--tiltY: 0deg;

	transform: perspective(900px) rotateY(var(--tiltX)) rotateX(var(--tiltY));

}



/* ===========================

   BACKGROUND ORBS

   =========================== */

.hero-orb {

	position: absolute;

	display: none;

	border-radius: 50%;

	pointer-events: none;

	z-index: 0;

	filter: blur(70px);

	opacity: 0.1;

}

.hero-orb-1 {

	width: 480px;

	height: 480px;

	background: var(--background-brown);

	top: -120px;

	left: -60px;

	animation: orbDrift 14s ease-in-out infinite alternate;

}

.hero-orb-2 {

	width: 360px;

	height: 360px;

	background: var(--text-green);

	bottom: 0;

	right: 8%;

	animation: orbDrift 18s ease-in-out infinite alternate-reverse;

}

@keyframes orbDrift {

	from { transform: translate(0, 0) scale(1); }

	to   { transform: translate(25px, 20px) scale(1.06); }

}



/* ===========================

   RESPONSIVE

   =========================== */

@media (max-width: 1199.98px) {

	.hero-title { font-size: 38px; }

	.hero-phone-wrapper { width: 260px; transform: translateX(-40px); }

	.hero-badge-1 { right: -30%; }

	.hero-badge-2 { right: -36%; }

	.hero-badge-3 { left: -30%; }

	.hero-badge-4 { right: -32%; }

}



@media (max-width: 991.98px) {

	.hero-section {

		height: auto;

	}



	.hero-section::before {

		width: 100%;

		height: 58%;

		top: auto;

		bottom: 0;

		border-radius: 40px 40px 0 0;

	}



	.hero-row {

		padding: 96px 0 0;

		min-height: auto;

	}



	.hero-left {

		padding-right: 0;

		padding-bottom: 40px;

		text-align: center;

		position: relative;

		z-index: 2;

	}



	.hero-title { font-size: 32px; }

	.hero-desc  { margin-left: auto; margin-right: auto; font-size: 16px; }

	.hero-desc ul,

	.hero-desc ol { text-align: left !important; margin-top: 0; }

	.hero-btns  { justify-content: center; }



	.hero-right {

		min-height: auto;

		padding: 40px 0 100px;

		position: relative;

		z-index: 1;

	}



	.hero-phone-wrapper { width: 100%; transform: none; }

	.hero-phone-img     { width: 100%; height: auto; }



	.hero-badge      { padding: 10px 18px; gap: 10px; }

	.hero-badge-teks { font-size: 12px; }



	.hero-badge-1 { top: 10px;    left:  10px; right: auto;  animation-delay: 0s; }

	.hero-badge-2 { top: 30%;     right: 10px; left:  auto; animation-delay: 0.6s; }

	.hero-badge-3 { top: 55%;     left:  10px; right: auto;  animation-delay: 1.2s; }

	.hero-badge-4 { bottom: 10px; right: 10px; left:  auto; animation-delay: 1.8s; }

}



@media (max-width: 575.98px) {

	.hero-row   { 

		padding-top: 112px;

		flex-direction: column;

	 }

	.hero-title { font-size: 24px; }

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

	.btn-hero-primary,

	.btn-hero-secondary { justify-content: center; }



	.hero-right { padding: 30px 0 0; }



	.hero-phone-wrapper {

		width: 100%;

		transform: none;

	}

	.hero-phone-img     { width: 100%; height: auto; }



	.hero-badge      { padding: 9px 14px; gap: 8px; }

	.hero-badge-teks { font-size: 11px; }

	.hero-badge-check,

	.hero-badge-icon { width: 22px; height: 22px; font-size: 10px; }



	.hero-badge-1 { top: 80px;   left:  8px; right: auto; }

	.hero-badge-2 { top: 30%;    right: 8px; left:  auto; }

	.hero-badge-3 { top: 55%;    left:  8px; right: auto; }

	.hero-badge-4 { bottom: 80px; right: 8px; left:  auto; }

}




/* ===========================

   LAYAR BESAR — biar konten ikut melebar mengejar split hijau (50% layar)

   =========================== */

   /* 1280 */
@media (min-width: 1280px)  {
	.hero-container {
		max-width: 1200px;
	}

	.hero-row{ align-items:center !important; }
	.hero-title {font-size: 40px;}
	.hero-badge-1 {
		top: 15%; right: 50% !important; 
	}
	.hero-badge-2 {
		top: 35%; right: 0% !important;
	}
	.hero-badge-3 {
		top: 50%; left: -10% !important;
	}
	.hero-badge-4 {
		bottom: 20%; right: 0% !important;
	}
	.hero-phone-wrapper {
		transform: translate(-80px, 70px )
	}
	.hero-phone-img {
		height: 600px;
	}
}
@media (min-width: 1200px) {
	.hero-row  { align-items: flex-start !important; }
	.hero-left { padding-top: 80px; }
}

@media (min-width: 1400px) {

	/* .hero-container { max-width: 1320px; }

	.hero-phone-wrapper { transform: translate(-140px, 40px); } */

	.hero-container     { max-width: 1320px; }
	.hero-row           { align-items: center !important; }
	.hero-left          { padding-top: 50px; }
	.hero-title         { font-size: 48px; }
	.hero-badge-1 {
		top: 15%; right: 50% !important; 
	}

	.hero-badge-2 {
		top: 35%; right: 0% !important;
	}

	.hero-badge-3 {
		top: 50%; left: -10% !important;
	}

	.hero-badge-4 {
		bottom: 20%; right: 0% !important;
	}
	.hero-phone-wrapper { transform: translate(-120px, 100px); }
	.hero-phone-img {
		height: 750px;
	}

}



@media (min-width: 1600px) {

	.hero-container { max-width: 1480px; }

	.hero-phone-wrapper { transform: translate(-160px, 40px); }

}



@media (min-width: 1920px) {
	.hero-container     { max-width: 1680px; }
	.hero-row           { align-items: flex-start !important; }
	.hero-left          { padding-top: 100px; }
	.hero-title         { font-size: 60px; }
	.hero-badge-1 {
		top: 15%; right: 50% !important; 
	}

	.hero-badge-2 {
		top: 35%; right: 0% !important;
	}

	.hero-badge-3 {
		top: 50%; left: -10% !important;
	}

	.hero-badge-4 {
		bottom: 20%; right: 0% !important;
	}
	.hero-phone-wrapper { transform: translate(-180px, 80px); }
}

/* ===========================
   LAYAR SANGAT BESAR — proporsional untuk 2K, 4K, dsb
   =========================== */
@media (min-width: 2400px) {
	.hero-container     { max-width: 2100px; }
	.hero-left          { padding-top: 120px; }
	.hero-title         { font-size: 76px; }
	.hero-phone-wrapper { transform: translate(-215px, 120px); }
}

@media (min-width: 3200px) {
	.hero-container     { max-width: 2800px; }
	.hero-left          { padding-top: 140px; }
	.hero-title         { font-size: 96px; }
	.hero-phone-wrapper { transform: translate(-285px, 0px); }
}

@media (min-width: 3840px) {
	.hero-container     { max-width: 3360px; }
	.hero-left          { padding-top: 160px; }
	.hero-title         { font-size: 116px; }
	.hero-phone-wrapper { transform: translate(-345px, 0px); }
}