*{
	margin:0;
	padding:0;
	box-sizing:border-box;
	font-family:'Inter',sans-serif;
}

html{
	height:auto;
	min-height:100%;
}

body{
	position:relative;
	color:#1e293b;
	min-height:100vh;
	overflow-x:hidden;
	overflow-y:auto;
	background:#edf7ef;
}

/* ==================================
AMBIENT BACKGROUND
================================== */

/* soft cinematic light */
body::after{
	content:'';
	position:fixed;
	inset:0;

	background:
	radial-gradient(
		circle at center,
		rgba(255,255,255,.10),
		transparent 72%
	);

	z-index:-1;
	pointer-events:none;
}

/* ambient motion */
@keyframes bgAmbientMove{

	0%{
		transform:
		translate3d(-12px,-10px,0)
		scale(1.04);
	}

	50%{
		transform:
		translate3d(14px,8px,0)
		scale(1.055);
	}

	100%{
		transform:
		translate3d(-8px,10px,0)
		scale(1.045);
	}
}

.container{
	width:100%;
	max-width:1400px;
	margin:auto;
	padding:30px;
	padding-bottom:15px;
}

/* ===========================
HEADER
=========================== */
.header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom:40px;
}

.brand{
	display:flex;
	align-items:center;
	gap:18px;
}

.brand img{
	width:70px;
	height:70px;
	object-fit:contain;
	background:#fff;
	border-radius:20px;
	padding:10px;
	box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.brand-title h1{
	font-size:26px;
	font-weight:800;
	color:#0f172a;
	margin-bottom:4px;
}

.brand-title p{
	font-size:14px;
	color:#64748b;
}

.login-btn{
	background:#4e2aa6;
	color:#fff;
	border:none;
	padding:14px 24px;
	border-radius:14px;
	font-size:14px;
	font-weight:700;
	cursor:pointer;
	box-shadow:0 10px 30px rgba(78,42,166,.3);
	transition:.3s;
}

.login-btn:hover{
	transform:translateY(-2px);
}

/* ===========================
HERO
=========================== */
.hero{
	background:rgba(255,255,255,.85);
	backdrop-filter:blur(12px);
	border-radius:34px;
	padding:60px;
	text-align:center;
	box-shadow:0 20px 50px rgba(0,0,0,.08);
	margin-bottom:30px;
}

.hero h2{
	font-size:60px;
	font-weight:800;
	letter-spacing:2px;
	color:#0f172a;
}

.hero h3{
	font-size:32px;
	font-weight:600;
	margin-top:10px;
	color:#1e293b;
}

.hero p{
	max-width:850px;
	margin:25px auto 0;
	font-size:18px;
	line-height:1.8;
	color:#475569;
}

/* ===========================
STATS
=========================== */
.stats{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:20px;
	margin-bottom:30px;
}

.stat-card{
	position:relative;
	background:rgba(255,255,255,.88);
	backdrop-filter:blur(10px);
	border-radius:26px;
	padding:30px;
	box-shadow:0 10px 30px rgba(0,0,0,.05);
	overflow:hidden;
}

.stat-card h4{
	font-size:14px;
	color:#64748b;
	margin-bottom:12px;
	position:relative;
	z-index:2;
}

.stat-card h2{
	font-size:40px;
	font-weight:800;
	color:#0f172a;
	position:relative;
	z-index:2;
}

.stat-icon{
	position:absolute;
	right:18px;
	bottom:12px;
	font-size:72px;
	color:#4e2aa6;
	opacity:.08;
	pointer-events:none;
	transform:rotate(-10deg);
}

/* ===========================
CONTENT GRID
=========================== */
.content-grid{
	display:grid;
	grid-template-columns:2fr 1.2fr;
	gap:25px;
	margin-bottom:30px;
}

.left-section{
	display:flex;
	flex-direction:column;
	gap:25px;
}

.card{
	background:rgba(255,255,255,.88);
	backdrop-filter:blur(10px);
	border-radius:30px;
	padding:35px;
	box-shadow:0 10px 35px rgba(0,0,0,.06);
}

.card-title{
	font-size:24px;
	font-weight:700;
	margin-bottom:25px;
	color:#0f172a;
}

.menu-list{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:20px;
}

.menu-item{
	background:#f8fafc;
	border:1px solid #e2e8f0;
	border-radius:20px;
	padding:22px;
	transition:.3s;
	cursor:pointer;
}

.menu-item:hover{
	transform:translateY(-3px);
	box-shadow:0 10px 25px rgba(0,0,0,.06);
}

.menu-item h5{
	font-size:18px;
	margin-bottom:8px;
	color:#0f172a;
}

.menu-item p{
	font-size:14px;
	color:#64748b;
	line-height:1.7;
}

/* ===========================
FORM CEK SOYA
=========================== */
.form-group{
	margin-bottom:18px;
}

.form-group label{
	display:block;
	font-size:14px;
	font-weight:600;
	margin-bottom:8px;
	color:#334155;
}

.form-control{
	width:100%;
	height:52px;
	border-radius:14px;
	border:1px solid #dbe2ea;
	padding:0 18px;
	font-size:14px;
	outline:none;
}

.form-control:focus{
	border-color:#4e2aa6;
}

.btn-search{
	width:100%;
	border:none;
	height:54px;
	background:#4e2aa6;
	color:#fff;
	border-radius:14px;
	font-size:15px;
	font-weight:700;
	cursor:pointer;
}

/* ===========================
LIVE INFORMATION
=========================== */

.iframe-card{
	background:rgba(255,255,255,.88);
	backdrop-filter:blur(10px);
	border-radius:30px;
	padding:20px;
	margin:20px 0;
	box-shadow:0 10px 35px rgba(0,0,0,.06);
}

.iframe-card iframe{
	width:100%;
	height:480px;
	border:none;
	border-radius:20px;
	display:block;
}

/* ===========================
FOOTER
=========================== */
.footer{
	margin:10px 0 0;
	background:rgba(255,255,255,.88);
	border-radius:24px;
	padding:22px 30px;
	text-align:center;
	box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.footer h4{
	font-size:20px;
	margin:0 0 8px;
}

.footer p{
	color:#64748b;
	line-height:1.5;
	margin:3px 0;
}

/* ===========================
RESPONSIVE
=========================== */
@media(max-width:1100px){

	.stats{
		grid-template-columns:repeat(2,1fr);
	}

	.content-grid{
		grid-template-columns:1fr;
	}
}

@media(max-width:768px){

	.container{ padding:20px; }
	.header{
		flex-direction:column;
		gap:20px;
		text-align:center;
	}
	.hero{ padding:35px 25px; }
	.hero h2{ font-size:38px; }
	.hero h3{ font-size:22px; }
	.hero p{ font-size:15px; }
	.stats{ grid-template-columns:1fr; }
	.menu-list{ grid-template-columns:1fr; }
}

.popup-soya{

	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,.55);
	display:none;
	align-items:center;
	justify-content:center;
	z-index:99999;
	backdrop-filter:blur(5px);

}

.popup-content{

	width:90%;
	max-width:900px;
	max-height:90vh;
	overflow:auto;
	background:#fff;
	border-radius:18px;
	box-shadow:0 20px 60px rgba(0,0,0,.3);

}

.popup-header{

	padding:20px 30px;
	display:flex;
	justify-content:space-between;
	align-items:center;
	border-bottom:1px solid #eee;

}

.popup-header h2{

	margin:0;
	font-size:28px;

}

.popup-close{

	background:none;
	border:none;
	font-size:34px;
	cursor:pointer;

}

.popup-body{

	padding:30px;

}

.hasil-table{

	width:100%;
	border-collapse:collapse;
	font-size:16px;

}

.hasil-table th{

	width:220px;
	background:#f7f7f7;
	text-align:left;
	padding:12px;
	border:1px solid #ddd;

}

.hasil-table td{

	padding:12px;
	border:1px solid #ddd;

}

.badge-miskin{

	display:inline-block;
	padding:6px 15px;
	background:#f39c12;
	color:#fff;
	border-radius:30px;
	font-weight:bold;

}