@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;500;600;700&display=swap');

:root {
	--bg-forest: #0A120F;
	--bg-card: #111C18;
	--emerald: #10B981;
	--emerald-light: #34D399;
	--gold: #FBBF24;
	--text: #D1FAE5;
	--text-muted: #6EE7B7;
}

body {
	font-family: 'Inter Tight', sans-serif;
	background: linear-gradient(160deg, #0A120F 0%, #0F1A15 100%); 
	font-weight:400; font-size:15px;
	color: var(--text);
}
a {
	color:var(--emerald-light); text-decoration:none;
	transition: all 0.3s ease;
}
a:hover {
	color:var(--gold);
	text-shadow: 0 0 6px rgba(251, 191, 36, 0.5);
}
img {
	max-width:100%;
	border-radius: 8px;
}
body > .container {
    margin-top: 20px;
    margin-bottom: 20px;
    background: var(--bg-card);
    border: 1px solid rgba(16, 185, 129, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    border-radius: 16px;
	padding: 20px;
}

/* MENU DAUN */
#menu {
	list-style:none; margin:0 0 25px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 12px;
    padding: 5px;
}
#menu li {
	padding:0;	
    margin: 3px;
}
#menu li a {
	display:block; padding:10px 18px; text-decoration:none; color:var(--text-muted); font-weight:600; text-transform:capitalize; font-size:15px;
	border-radius: 8px;
	transition: all 0.3s ease;
}
#menu li a:hover {
	color: #000;
	background: linear-gradient(90deg, var(--emerald) 0%, var(--emerald-light) 100%);
	box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

/* TABEL DATA */
#dataresultwrap {
	width:720px; max-width:100%; margin:25px auto 30px;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid rgba(16, 185, 129, 0.3);
}
#dataresultwrap tr.bg-danger td, #dataresultwrap tr.bg-danger th {
	background: linear-gradient(90deg, var(--gold) 0%, #F59E0B 100%);
	color: #000;
	font-weight: 700;
}
#dataresultwrap td {
	font-size:15px;
	background: rgba(17, 28, 24, 0.8);
	border-color: rgba(16, 185, 129, 0.2) !important;
}
#dataresultwrap tr:hover td {
	background: rgba(16, 185, 129, 0.1);
}
#dataresultwrap .bg-dark {
	background: rgba(10, 18, 15, 0.9) !important;
}
.copyright { 
	color:var(--text-muted); margin-bottom:10px; font-size:12px;
	text-align: center;
	opacity: 0.7;
}

/* BOX LIVEDRAW ALAM */
.livedraw {
	background: linear-gradient(135deg, #065F46 0%, var(--emerald) 100%); 
	width:520px; max-width:100%; margin:auto;
	overflow:hidden; border-radius:14px; border:1px solid var(--emerald-light);
	font-size:18px; padding:12px;
	box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2), 0 10px 30px rgba(0,0,0,0.5);
}
.livedraw a {
	text-decoration:none; color:#FFF; font-weight: 700;
	letter-spacing: 0.5px;
}
.livedraw table {
	width:100%; text-align:center;
}
.livedraw table td, .livedraw table th {
	padding:8px 4px; font-weight:600;
	color: #FFF;
}
.Bglive span {
	background: rgba(0,0,0,0.3);
	color: var(--emerald-light);
	border: 1px solid rgba(52, 211, 153, 0.4);
}
.Bglive2 span {
	background: rgba(0,0,0,0.3);
	color: var(--gold);
	border: 1px solid rgba(251, 191, 36, 0.4);
}
.Bglive3 span {
	background: linear-gradient(90deg, var(--gold) 0%, #F59E0B 100%); 
	border-radius:6px;
	color:#000;
	font-weight: 700;
}
.radiuslive, .livedraw .Bglive span, .livedraw .Bglive2 span {
	border-radius:8px;
}

/* HEADING */
#contents h1 { font-size:36px; color: var(--emerald-light); font-weight: 700; }
#contents h2 { font-size:26px; color: var(--gold); border-left: 4px solid var(--emerald); padding-left: 12px; }
#contents h3 { font-size:20px; color: var(--text-muted); }

/* RESPONSIVE */
@media screen and (max-width: 1200px) {
	.Wrap-Body { font-size: 16px; }
	.Header-Table { font-size: 18px; color: var(--emerald-light); }
	.Body-Table-Parent {
		border: 2px solid var(--emerald);
		padding: 8px 0;
		color: #fff;
		border-radius: 10px;
		background: rgba(16,185,129,0.05);
	}
	.Wrap-Table { width:100%; }
}

@media (min-width: 990px){
	.container { max-width: 1050px !important; }	
	#dataresultwrap { font-size:18px; }
}
@media (max-width:767px){
	body > .container { width:auto; margin-left:12px; margin-right:12px; padding: 15px; }
}
@media (max-width:575px){
	body > .container { width:auto; margin-left:10px; margin-right:10px; }
	#menu { display:block; }
	#menu li { margin: 5px 0; }
	#contents h1 { font-size:26px; }
	#contents h2 { font-size:20px; }
	#contents h3 { font-size:16px; }
	#menu li a { font-size:14px; }
	.livedraw { padding:8px; font-size:15px; width: 100%; }
	.livedraw .mobmoresm .Bglive2 { font-size:11px; }
}