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

body { 
	background:#0F172A; 
	color:#CBD5E1; 
	font-family: 'Poppins', sans-serif; 
	font-size:14px;
	font-weight:400;
	line-height:1.7;
	margin:0;
	-webkit-font-smoothing: antialiased;
}
a { 
	color:#38BDF8; 
	text-decoration:none;
	transition: all 0.3s ease;
} 
a:hover { 
	color:#7DD3FC;
	text-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
}
img {
	max-width:100%;
	height:auto;
}

/* ===== LOGO ===== */
header .logo {
	max-width: 160px;
	height: auto;
	display: block;
	margin: 15px auto 10px;
	filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.4));
}

.bgwrap { 
	background:#1E293B; 
	border:1px solid #334155; 
	box-shadow: 0 0 20px rgba(51,65,85,0.3); 
	border-radius:12px;
	max-width: 900px;
	margin: 20px auto;
	padding: 20px;
}
.border-danger {
	border-color:#38BDF8 !important;
}

header {
	background:transparent;
	text-align:center; 
	padding:0 0 20px;
	border-bottom:1px solid #334155;
}
header p {
	color:#94A3B8; 
	font-weight:500; 
	font-size:14px;
	line-height:1.6;
}

/* ===== HEADING ===== */
h1, h2, h3, h4 { 
	color:#F8FAFC;
	font-weight:700;
	margin: 20px 0 12px 0;
	line-height:1.3;
}
h1 {
	font-size:32px;
	letter-spacing:0.5px;
}
h2 {
	font-size:24px;
	border-bottom:1px solid #334155;
	padding-bottom:8px;
}
h3 {
	font-size:18px;
	color:#E2E8F0;
}
h4 {
	font-size:15px;
	font-weight:600;
	color:#CBD5E1;
}

.headtitle { 
	background: linear-gradient(90deg, #38BDF8, #0EA5E9); 
	-webkit-background-clip: text; 
	-webkit-text-fill-color: transparent; 
	font-size:40px;
	font-weight:700;
	letter-spacing:1px;
}

/* ===== MENU ===== */
#menu {
	list-style:none; 
	margin:20px 0;
	display: flex; 
	justify-content: center;
	flex-wrap: wrap;
	background: #334155;
	border-radius: 8px;
	overflow: hidden;
}
#menu li {
	padding:0; 
	border-right: 1px solid #475569;
	flex: 1 1 auto;
}
#menu li:last-child {
	border-right: none;
}
#menu li a {
	display:block; 
	padding:12px 18px; 
	text-decoration:none; 
	color:#F8FAFC; 
	font-weight:600;
	text-transform:uppercase; 
	font-size:13px;
	letter-spacing:0.8px;
	text-align:center;
	transition: all 0.3s ease;
}
#menu li a:hover {
	color:#0F172A; 
	background:#38BDF8;
}

/* ===== TABEL PAITO ===== */
.datapaito {
	width:100%; 
	margin-bottom:30px; 
	background:#0F172A;
	border-collapse: collapse;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid #334155;
}
.datapaito td, .datapaito th {
	border:1px solid #334155; 
	padding:10px 6px;  
	font-weight:500; 
	text-align:center; 
	width:12.5%;
	font-size:13px;
}
.datapaito .tahun th { 
	background:#0EA5E9; 
	color:#0F172A;
	padding:12px 0; 
	font-size:16px; 
	font-weight:700; 
	letter-spacing:1px;
	text-transform:uppercase;
}
.datapaito .hari th { 
	background:#1E293B; 
	color:#38BDF8; 
	border-bottom:2px solid #38BDF8;
	font-weight:600;
	letter-spacing:0.5px;
}
.datapaito tr:not(.hari):not(.tahun) td {
	background:transparent; 
	color:#CBD5E1; 
	font-size:14px;
}
.datapaito tr:not(.hari):not(.tahun):hover td {
	background: #1E293B !important;
	color:#F8FAFC;
}
.datapaito tr:not(.hari):not(.tahun):nth-child(even) td {
    background: rgba(30, 41, 59, 0.5); /* zebra */
}

.copyright {
	color:#64748B; 
	margin: 30px 0 10px; 
	font-size:12px;
	text-align:center;
}
.copyright a {
	color:#38BDF8;
}
.copyright a:hover {
	color:#7DD3FC;
}

/* ===== RESPONSIVE ===== */
@media (min-width: 850px){
	.container {
		max-width: 850px !important;
	}
@media (max-width:767px){
	header .logo {
		max-width: 120px;
	}
	h1 { font-size:24px; }
	h2 { font-size:20px; }
	h3 { font-size:16px; }
	
	.datapaito .tahun th {
		font-size:14px;
		padding:10px 0;
	}
	.datapaito td, .datapaito th {
		font-size:11px;
		padding:6px 3px;
	}
	body > .container {
		width:auto; 
		margin:10px;
		font-size:13px;
	}
	#menu {
		display: block; 
		margin:15px 0; 
		padding:0;
	}
	#menu li {
		display:block;
		border-bottom:1px solid #475569;
		border-right: 0;
	}
	#menu li a {
		display:block; 
		text-align:center;
		font-size: 13px;
		padding:10px;
	}
	.headtitle {
		font-size: 28px;
		letter-spacing:0.5px;
	}
	header p {
		font-size:13px;
	}	
	.datapaito tr:not(.hari):not(.tahun) td {
		font-size:11px;
	}
	.bgwrap {
		line-height:1.6; 
		font-size:13px;
		margin:10px;
		padding:15px;
	}
@media (max-width:340px){
	header .logo {
		max-width: 100px;
	}
	.datapaito tr:not(.hari):not(.tahun) td {
		font-size:10px;
	}
	.headtitle { font-size: 24px; }
}