/* style.css */
:root {
	--wafins-primary: #25D366;
	--wafins-secondary: #075E54;
	--wafins-accent: #128C7E;
	--wafins-light: #DCF8C6;
	--wafins-dark: #1a1a1a;
}

body {
	color: rgb(0 0 0);
}

.wafins-section {
	display: block;
	padding: 30px 0;
	scroll-margin-top: 80px;
	overflow: clip;
	margin-top: 3rem !important;
	margin-bottom: 3rem !important;
}

.bg-wafins-hero {
	width: 100%;
	min-height: 100vh;
	padding: 120px 0 60px 0;
	align-items: center;
	background: url(images/bg-hero.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	opacity: 1;
	position: absolute;
	overflow: hidden;
	z-index: -1;
}

.bg-va-hero::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	z-index: 2;
}


/* ===================================== */
/* -------------------
 * Overlap Container (Dibuat Responsive)
 * ------------------- */
.wafins-overlap-container {
	position: relative;
	width: 90%;
	max-width: 600px;
	height: 0;
	min-height: 250px;
	overflow: hidden;
}

.wafins-3d-asset {
	max-width: 450px;
}

.wafins-hero-top h1{
	color: var(--wafins-primary);
}
.wafins-hero-top h3{
	color: var(--wafins-secondary);
}
/* -------------------
 * Main Graphic (Ilustrasi 3D WhatsApp)
 * ------------------- */
.wafins-graphic-main {
	position: absolute;
	top: 0;
	right: 0;
	/* Ganti dari 450px menjadi persentase relatif terhadap container */
	width: 85%;
	height: 85%;
	z-index: 10;
	background: linear-gradient(135deg, var(--wafins-teal), var(--wafins-green-dark));
	border-radius: 40px;
	box-shadow: 0 20px 50px var(--wafins-shadow-color);
}

/* Pseudo-element Latar Belakang (Tidak perlu diubah, karena sudah relatif terhadap parent-nya, .wafins-graphic-main) */
.wafins-graphic-main::before {
	content: '';
	position: absolute;
	top: -50px;
	left: -50px;
	width: 120%;
	height: 120%;
	background-color: var(--wafins-teal);
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	z-index: -1;
	transform: rotate(30deg);
}

/* -------------------
 * Chat Mockup (Foreground)
 * ------------------- */
.wafins-graphic-chat {
	position: absolute;
	bottom: -120px;
	left: 0;
	width: 50%;
	height: 70%;
	z-index: 20;
	padding: 5%;
	border-radius: 25px;
}

.wafins-image-wrapper {
	/* 1. Menentukan konteks posisi untuk shadow */
	position: relative;
	display: inline-block;
	/* Agar container hanya selebar gambar */
	padding: 20px;
	/* Beri sedikit ruang agar shadow tidak terpotong */
	margin: 10px;
}


.wafins-image-wrapper::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: #38C750;
	box-shadow: 0 0 60px 60px #38C750;
	opacity: 0.2;
}

/* ===================================== */
/* MEDIA QUERY: Penyesuaian untuk Layar Sangat Kecil (Mobile) */
/* ===================================== */
@media (max-width: 576px) {
	.wafins-overlap-container {
		/* Rasio aspek sedikit diperkecil di mobile */
		padding-bottom: 100%;
		margin-top: 20px;
		min-height: 200px;
	}

	.wafins-graphic-main {
		width: 100%;
		/* Penuh di mobile */
		height: 100%;
		border-radius: 20px;
	}

	.wafins-graphic-chat {
		width: 50%;
		height: 60%;
		bottom: -15%;
		left: 25%;
		transform: translateX(-50%);
		padding: 15px;
	}

}

@media (max-width: 991px) {
	.wafins-image-wrapper {
		display: none;
	}
}

.wafins-hero-top {
	color: #38C750;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	margin-top: 0px !important;
	margin-bottom: 0px !important;
	padding-top: 0px !important;
	padding-bottom: 0px !important;
}

.wafins-hero-top h2 {
	color: #007F6F;
}

.wafins-card-header {
	background-color: #3AC45D;
	min-height: 90px;
	align-content: center;
	color: #ffffff;
}

.wafins-card-header h4{
	color: #ffffff;
}
.wafins-section-fitur h3{
	color: #007F6F;
}
.wafins-section-fitur .bg-fitur {
	background: linear-gradient(135deg, #EBEBEB, #007F6F);
	border-radius: 25px;
}

.wafins-section-fitur .wafins-feature-card {
	position: relative;
}

.wafins-section-fitur .wafins-feature-card .wafins-feature-icon {
	width: 100%;
	max-width: 100px;
	position: absolute;
	top: -50px;
	left: 50%;
	transform: translateX(-50%);
}

.wafins-section-benefit img {
	max-height: 350px;
}

.wafins-section-benefit h4 {
	color: #007F6F;
}

.wafins-section-tentang .wafins-feature-card {
	z-index: 1;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25) !important;
}

.wafins-section-tentang .wafins-card-wrapper {
	position: relative;
	display: inline-block;
}

.wafins-section-tentang .wafins-card-wrapper::after {
	content: '';
	position: absolute;
	top: 68%;
	left: 75%;
	transform: translate(-50%, -50%);
	z-index: 0;
	width: 50%;
	height: 50%;
	border-radius: 50%;
	background-color: #38C750;
	box-shadow: 0 0 60px 60px #38C750;
	opacity: 0.2;
}

.wafins-section-api .card {
	border: none;
}

.wafins-section-api .wafins-icon-api {
	width: 100%;
	max-width: 70px;
	height: auto;
}

.wafins-section-api .wafins-card-wrapper::after {
	content: '';
	position: absolute;
	top: 70%;
	left: 45%;
	transform: translate(-50%, -50%);
	z-index: 0;
	width: 10%;
	height: 10%;
	border-radius: 50%;
	background-color: #38C750;
	box-shadow: 0 0 60px 60px #38C750;
	opacity: 0.2;
}

.wafins-section-manfaat h5, .wafins-section-bussines-api h5{
	color: #000;
	font-weight:600 !important;
}

.wafins-section-bussines-api .wafins-icon-api {
	width: 100%;
	max-width: 70px;
	height: auto;
}

.wafins-section-bussines-api .wafins-card {
	padding: 15px;
	border-radius: 15px;
	background: linear-gradient(to right, #ffffffde 0%, #007f6f99 100%);
}

.wafins-section-info .card-title {
	display: block;
	line-height: 1.5;
	color: #fff;
	background-color: #3AC45D;
	border-color: #3AC45D;
	margin: .25rem .125rem;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	padding: .375rem .75rem;
	font-size: 1rem;
	border-radius: .50rem;
	width: 200px;
}

.wafins-section-info .wafins-section-info-card {
	border: none;
	background: transparent;
}

.wafins-section-info .global-card {
	background-color: white;
	border-radius: 25px;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25) !important;
}

.wafins-section-manfaat {
	width: 100%;
	margin: 50px auto;
	padding: 0 15px;
	position: relative;
}

.wafins-section-manfaat img {
	max-width: 500px;
}

.wafins-section-manfaat .wafins-card-wrapper::after {
	content: '';
	position: absolute;
	top: 20%;
	left: 35%;
	transform: translate(-50%, -50%);
	z-index: -1;
	width: 10%;
	height: 10%;
	border-radius: 50%;
	background-color: #38C750;
	box-shadow: 0 0 60px 60px #38C750;
	opacity: 0.2;
}

/* 1. Kolom Manfaat */
.benefit-section {
	flex: 1;
	/* Alokasi ruang yang sama */
	padding-top: 10px;
	/* Penyesuaian vertikal */
}

.title.green {
	/* Warna Hijau untuk Judul Manfaat */
	color: #007F6F;
	font-weight: 700;
	font-size: 24px;
	margin-bottom: 25px;
}

.benefit-list {
	list-style: none;
	/* Hilangkan bullet default */
	padding-left: 0;
}

.benefit-list li {
	font-size: 16px;
	margin-bottom: 15px;
	position: relative;
	padding-left: 25px;
	/* Ruang untuk custom bullet */
	line-height: 1.5;
	/* Font style untuk list item (jika menggunakan Poppins atau sejenisnya) */
	font-weight: 400;
}

/* Custom Bullet Hijau */
.benefit-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	background-color: #00A699;
	/* Warna bullet hijau (seperti di gambar) */
	border-radius: 50%;
}

.benefit-list.top li::before {
	top: 13px !important;
}


/* 2. Kolom Ilustrasi (Tengah) */
.illustration-section {
	flex: 1.2;
	/* Beri sedikit ruang lebih untuk gambar/ilustrasi */
	display: flex;
	justify-content: center;
	align-items: center;
	height: 500px;
	/* Beri ketinggian agar layout seimbang */
	/*
        CATATAN: Di sini adalah tempat meletakkan ilustrasi handphone (seperti di
        kode HTML kamu di awal). Karena di HTML terakhir kamu hanya tag kosong,
        kita asumsikan gambar diletakkan di sini.
        Jika kamu ingin memasukkan gambar, gunakan:
        background: url('path/ke/gambar/handphone.png') no-repeat center center / contain;
    */
}

/* 3. Kolom Template */
.template-section {
	flex: 1.5;
	/* Beri ruang lebih banyak karena kontennya padat */
	padding-top: 10px;
	/* Penyesuaian vertikal */
}

.title.black {
	color: #000000;
	font-weight: 700;
	font-size: 24px;
	margin-bottom: 25px;
}

.template-item {
	margin-bottom: 30px;
}

.template-heading {
	font-weight: 600;
	font-size: 16px;
	/* Font agak kecil untuk subheading */
	margin-bottom: 5px;
	position: relative;
	padding-left: 20px;
	/* Ruang untuk custom bullet */
}

/* Custom Bullet Hitam (atau sangat gelap) untuk Sub-heading Template */
.template-heading::before {
	content: '●';
	/* Menggunakan karakter bullet (bisa juga '•' atau char code) */
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	color: #000000;
	/* Warna bullet hitam */
	font-size: 10px;
	line-height: 1;
}

.template-description {
	line-height: 1.6;
	color: #333333;
	/* Warna teks deskripsi sedikit lebih lembut */
}

/* --- Media Query untuk Responsif (Penting!) --- */
@media (max-width: 992px) {
	.wafins-sect {
		/* Ubah ke susunan vertikal (stack) di layar tablet/HP */
		flex-direction: column;
		gap: 30px;
	}

	.illustration-section {
		height: 300px;
		/* Perkecil tinggi ilustrasi saat di HP */
	}
}

.wafins-comparison-table {
	border-collapse: separate;
	border-spacing: 0;
	min-width: 700px;
	/* biar table tetap punya lebar minimum */
	transition: all 0.3s ease;
}

.wafins-comparison-table thead {
	background: linear-gradient(90deg, #007bff, #00b4d8);
}

.wafins-comparison-table th,
.wafins-comparison-table td {
	vertical-align: middle;
	padding: 1rem;
	white-space: nowrap;
	/* biar kolom gak patah di mobile */
}

.wafins-comparison-table tbody tr {
	transition: background 0.2s ease, transform 0.2s ease;
}

.wafins-comparison-table tbody tr:hover {
	background-color: #f8f9fa;
	transform: scale(1.01);
}

.table-responsive {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	border-radius: 10px;
}

/* Optional: tambahkan efek shadow & gradient di sisi kanan saat bisa di-scroll */
.table-responsive {
	position: relative;
}

.table-responsive::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 40px;
	height: 100%;
	pointer-events: none;
	background: linear-gradient(to left, rgba(255, 255, 255, 0.9), transparent);
	display: none;
}

@media (max-width: 767px) {
	.table-responsive::after {
		display: block;
	}
}

.wafins-alur .bg-fitur {
	background: #E1E1E1;
	padding: 30px;
	border-radius: 25px;
}

.g-6,
.gy-6 {
	--bs-gutter-y: 4rem;
}