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

body {
	font-family: 'Poppins', sans-serif;
	
	/* PILIH SALAH SATU BACKGROUND DI BAWAH INI */
	
	/* 1. BIRU GELAP POLOS - Paling enak di mata */
	background:#0a0f1a; 
	
	/* 2. BIRU GELAP + TEKSTUR PRISM - Kayak sebelumnya */
	/* background:#0a0f1a url(img/prism.png) 0 0 repeat; */
	
	/* 3. GRADIENT BIRU - Kesan premium */
	/* background: linear-gradient(180deg, #0a0f1a 0%, #15243a 100%); */
	
	font-weight:400;
	color:#e0e8f5;
	font-size:14px;
	line-height:1.7;
	letter-spacing:0.2px;
	-webkit-font-smoothing: antialiased;
}
a {
	color:#8ab4ff; text-decoration:none;
	transition: color 0.3s ease;
}
a:hover {
	color:#cfe0ff;
}
img {
	max-width:100%;
}
.bgwrap {
	background:#0f1729; border:2px solid #2a4a7c;
}
.border-danger {
	border-color:#2a4a7c !important;
}
header {
	background:#0f1729 url(img/bgweb2.png) 50% 50% no-repeat;
	background-size:cover;
	text-align:center; padding:0 0 25px;
	border-bottom:2px solid #2a4a7c;
}
header p {
	color:#a8b8d8; font-weight:400; font-size:14px;
	line-height:1.6;
}

/* === HEADING BIRU === */
h1, h2, h3, h4 {
	font-family: 'Oswald', sans-serif;
	font-weight:600;
	color:#8ab4ff;
	margin: 20px 0 12px 0;
	line-height:1.3;
}
h1 {
	font-size:32px;
	letter-spacing:1px;
	text-transform:uppercase;
	background: linear-gradient(#6aa8ff, #1e4d8a);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
h2 {
	font-size:24px;
	letter-spacing:0.8px;
	border-bottom:1px solid #2a4a7c;
	padding-bottom:6px;
}
h3 {
	font-size:18px;
	letter-spacing:0.5px;
	color:#a8c8ff;
}
h4 {
	font-size:15px;
	font-weight:500;
	color:#c0d4ff;
}

.headtitle {
	font-family: 'Oswald', sans-serif;
	font-weight:700; 
	font-size:40px;
	line-height:1.2; 
	text-transform:uppercase;
	letter-spacing:1.5px;
	background: linear-gradient(#6aa8ff, #1e4d8a);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 2px 8px rgba(106,168,255,0.3);
}

#menu {
	list-style:none; margin:0;
	display: flex; justify-content: center;
	background: linear-gradient(to bottom,  #2a4a7c 0%,#15243a 100%);
}
#menu li { padding:0; }
#menu li a {
	display:block; padding:10px 16px 10px; text-decoration:none; color:#FFF; 
	font-family: 'Oswald', sans-serif;
	font-weight:600;
	text-transform:uppercase; 
	font-size:13px;
	letter-spacing:0.8px;
	transition: all 0.3s ease;
}
#menu li a:hover {
	color:#8ab4ff; background:rgba(255,255,255,0.05);
}
.datapaito {
	width:760px; margin-bottom:30px; max-width:100%; margin-left:auto; margin-right:auto; background:#0a1222;
	border-collapse: collapse;
}
.datapaito td, .datapaito th {
	border:1px solid #2a3f5f; padding:8px 4px;  font-weight:400; text-align:center;
	font-family: 'Poppins', sans-serif;
	font-size:13px;
}
.datapaito .tahun th {
	font-family: 'Oswald', sans-serif;
	background: linear-gradient(to bottom,  #2a4a7c 0%,#15243a 100%); 
	padding:10px 0; font-size:110%; font-weight:700; color:#FFF;
	letter-spacing:1px;
	text-transform:uppercase;
}
.datapaito .hari th {
	font-family: 'Oswald', sans-serif;
	background: linear-gradient(to bottom,  #3a5a8c 0%,#1a2a3f 100%); 
	font-weight:600; width:14.2%;
	color:#cfe0ff; text-shadow:0 1px 2px #000;
	letter-spacing:0.5px;
	font-size:13px;
}
.datapaito tr:not(.hari):not(.tahun) td {
	background:transparent; color:#e0e8f5; font-size:13px;
}
.datapaito tr:hover td {
	background:#121e33 !important;
}
p { margin-bottom:14px; }
.copyright {
	color:#8ab4ff; margin-bottom:30px; font-size:12px;
	text-align:center;
	opacity:0.8;
}

@media (min-width: 992px){
	.container { max-width: 990px !important; }
}

@media (max-width:767px){
	h1 { font-size:24px; }
	h2 { font-size:20px; }
	h3 { font-size:16px; }
	h4 { font-size:14px; }
	
	.datapaito .tahun th { font-size:15px; }
	.datapaito td, .datapaito th { font-size:11px; padding:6px 2px; }
	body > .container {
		width:auto; margin-left:10px; margin-right:10px;
		font-size:13px;
		line-height:1.6;
	}
	#menu { display: block; margin:0; padding:0; }
	#menu li { display:block; border-bottom:1px solid #2a4a7c; }
	#menu li a { display:block; text-align:center; font-size:12px; }
	.headtitle { font-size: 28px; letter-spacing:1px; }
	header p { font-size:12px; }	
	.datapaito tr:not(.hari):not(.tahun) td { font-size:11px; }
}

@media (max-width:330px){
	.datapaito tr:not(.hari):not(.tahun) td { font-size:10px; }
}