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

body {
	font-family: 'Roboto Condensed', sans-serif;
	background:#0c0a12 url(img/bg-sgp.jpg) center center no-repeat; 
	font-weight:300;
	background-size:cover; 
	background-attachment:fixed;
	color:#e5e0ff;
}
a {
	color:#a78bfa; text-decoration:none;
}
a:hover {
	color:#c4b5fd;
}
img {
	max-width:100%;
}
.theborder {
	border:1px solid #8b5cf6;
	box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
}
.bgwrap {
	background-color: rgba(12, 10, 18, 0.85);
	border-top-width:30px;
}
.bgpg {
	background-color: #0c0a12e6;
}
.border-danger {
	border-color:#8b5cf6 !important;
}
header {
	background:#1a1625;	text-align:center; padding:0; border-bottom:2px solid #8b5cf6;
}
#menu {
	list-style:none; margin:0; padding:0;
	display: flex; justify-content: left;
	background: linear-gradient(90deg, #7c3aed 0%, #8b5cf6 100%); 
	position:relative;
}
#menu:after {
	display:block; width:100%; height:100%; content:'';
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.20) 50%, rgba(0,0,0,0) 100%);
	z-index:1; position:absolute; left:0; top:0;
}
#menu li {
	padding:0; z-index:2; border-right:1px solid rgba(255,255,255,0.1); position:relative;
}
#menu li:first-child {
	margin-left:10px;
}
#menu li a {
	display:block; padding:11px 18px 11px; text-decoration:none; color:#FFF; font-weight:700;
	text-transform:capitalize; font-size:16px;
    text-shadow: 0 1px 2px #000;
	font-family: 'Poppins', sans-serif;
}
#menu li a:hover {
	background:#c4b5fd; color:#1a1625; text-decoration:none;
    text-shadow: none;
}
.articles {
	font-size:15px;
}
.articles h1 {
	color:#c4b5fd; font-size:30px; font-family: 'Poppins', sans-serif;
}
.articles h2 {
	color:#a78bfa; font-size:24px; font-family: 'Poppins', sans-serif;
}

/* === TABEL DESKTOP TENGAH + MOBILE MENTOK === */
.datapaito-wrapper {
	width: 100%;
	overflow-x: auto; /* kunci scroll di hp */
	margin: 0 auto 30px; /* auto biar di tengah di desktop */
	background:#1a1625;
	border: 1px solid #2e2942;
	max-width: 800px; /* batasi lebar di desktop biar kecil */
	border-radius: 8px;
}
.datapaito {
	width:100%; 
	margin: 0; 
	background:transparent;
	border-radius: 0;
	border: none;
	border-collapse: collapse;
}
.datapaito td, .datapaito th {
	border:1px solid #2e2942; 
	padding:8px 4px;  
	font-weight:600; 
	text-align:center;
	white-space: nowrap; 
	font-size: 13px;
}
.datapaito .tahun th {
	background: linear-gradient(90deg, #7c3aed 0%, #8b5cf6 100%); 
	padding:10px 4px; 
	font-size:16px; 
	font-weight:700; 
	color:#FFF;
	font-family: 'Poppins', sans-serif;
}
.datapaito .hari th {
	background: #2e2942;
	font-weight:700; 
	width:14.285%;
	color:#c4b5fd; 
	text-shadow:0 1px 1px #000;
	font-family: 'Poppins', sans-serif;
	font-size: 13px;
}
.datapaito tr:not(.hari):not(.tahun) td {
	background:transparent; 
	color:#e5e0ff; 
}
.datapaito tr:nth-child(even):not(.hari):not(.tahun) td {
	background: #141021;
}
.datapaito tr:hover td {
	background: rgba(139, 92, 246, 0.25);
	color: #c4b5fd;
}

#footer {
	background: linear-gradient(90deg, #7c3aed 0%, #8b5cf6 100%); 
	position:relative;
}
#footer:after {
	display:block; width:100%; height:100%; content:'';
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.20) 50%, rgba(0,0,0,0) 100%);
	z-index:1; position:absolute; left:0; top:0;
}
.copyright {
	color:#FFF; margin-bottom:0; font-size:14px; text-transform:uppercase; padding:10px 0; z-index:2; position:relative;
}
.copyright a {
	color:#FFF;
}
.copyright a:hover {
	text-decoration:underline;
}

@media (min-width: 760px){
	.container {
		max-width: 900px !important;
	}
}
@media (max-width:767px){
	body > .container {
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		font-size:14px;
	}
	.datapaito-wrapper {
		border-left: none;
		border-right: none;
		border-radius: 0;
		max-width: 100%; /* di hp full */
		margin: 0 0 30px 0; /* buang margin auto biar mentok */
	}
	#menu {
		display: block; margin:0; padding:0;
	}
	#menu li:first-child {
		margin-left: 0;
	}
	#menu li {
		display:block; margin:0;
		border-bottom:1px solid rgba(255,255,255,0.1);
	}
	#menu li a {
		display:block; text-align:center; padding-top:8px; padding-bottom:8px;
	}
	.datapaito td, .datapaito th {
		font-size:11px;
		padding: 6px 1px;
	}
	.datapaito .tahun th {
		font-size:14px;
	}
	.articles {
		font-size:13px;
	}
	.articles h1 {
		font-size:24px;
	}
	.articles h2 {
		font-size:18px;
	}
}
@media (max-width:400px){
	.datapaito td, .datapaito th {
		font-size:10px;
		padding: 5px 1px;
	}
}