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

body {
	font-family: 'Poppins', sans-serif; 
	font-size:14px;
	background:#0a0505; /* hitam darah */
	font-weight:400; 
	color:#f2e6e6;
	margin:0;
}
a {
	color:#FFB800; /* emas */
	text-decoration:none;
	transition: all 0.3s ease;
}
a:hover {
	color:#FFD700;
	text-shadow: 0 0 6px rgba(255, 184, 0, 0.7);
}
img {
	max-width:100%;
}

.bgwrap {
	background: linear-gradient(180deg, #1a0a0a 0%, #0a0505 100%);
	text-align:left; 
	margin:15px auto;
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.4); /* glow merah */
    border: 1px solid #DC2626;
    border-radius: 8px;
	max-width: 900px;
	padding: 15px;
}

.border-danger {
	border-color:#DC2626 !important; /* merah darah */
}

header {
	background:transparent;
	text-align:center; 
	padding:10px 0;
	border-bottom: 2px solid #DC2626;
}
header p {
	color:#d1a3a3; 
	font-weight:600; 
	font-size:15px;
	letter-spacing: 0.5px;
}

.headtitle {
	font-family: 'Oswald', sans-serif; /* font tegas */
	font-size: 50px;
	color: #DC2626;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-align:center;
	margin: 10px 0;
	text-shadow: 0 0 10px rgba(220, 38, 38, 0.6);
}

#menu {
	list-style:none; 
	margin:15px 0;
	display: flex; 
	justify-content: center;
	flex-wrap: wrap;
	background: linear-gradient(90deg, #7F1D1D 0%, #DC2626 100%); /* merah gradient */
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid #450a0a;
}
#menu li {
	padding:0; 
	border-right: 1px solid rgba(0,0,0,0.4);
	flex: 1 1 auto;
}
#menu li:first-child {
	border-left:none;
}
#menu li:last-child {
	border-right:none;
}
#menu li a {
	display:block; 
	padding:12px 18px; 
	text-decoration:none; 
	color:#FFF; 
	font-weight:700;
	text-transform:uppercase; 
	font-size:13px;
	letter-spacing: 1px;
	text-align:center;
}
#menu li a:hover {
	background: #FFB800; /* hover emas */
	color:#1a0a0a;
}

/* ===== TABEL DATA PAITO MERAH ===== */
.datapaito {
	width:100%; 
	margin-bottom:30px; 
	max-width:100%; 
	margin-left:auto; 
	margin-right:auto; 
	background: #0f0707;
	border-collapse: collapse;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid #DC2626;
}
.datapaito td, .datapaito th {
	border:1px solid #450a0a; 
	padding:8px 4px;  
	font-weight:600; 
	text-align:center; 
	width:12.5%;
}
.datapaito .tahun th {
	background: linear-gradient(90deg, #DC2626, #991B1B); 
	padding:10px 0; 
	font-size:18px; 
	font-weight:700; 
	color:#FFB800; /* tahun warna emas */
	letter-spacing: 1px;
	font-family: 'Oswald', sans-serif;
}
.datapaito .hari th {
	background: #7F1D1D; 
	font-weight:700;
	color:#FFF; 
}
.datapaito tr:not(.hari):not(.tahun) td {
	background:transparent; 
	color:#f2e6e6; 
	font-size:14px;
}
.datapaito tr:not(.hari):not(.tahun):hover td {
	background: rgba(220, 38, 38, 0.2); /* efek hover merah */
}
.datapaito tr:not(.hari):not(.tahun):nth-last-child(5n+1) td {
    background: #1a0a0a; /* zebra strip hitam merah */
}

.bgwrap h1 {
	font-size:32px;
	color: #DC2626;
	font-family: 'Oswald', sans-serif;
}
.bgwrap h2 {
	font-size:26px;
	color: #EF4444;
	font-family: 'Oswald', sans-serif;
}
.bgwrap h3 {
	font-size:20px;
	color: #FFB800; /* sub judul emas */
	font-family: 'Oswald', sans-serif;
}

.copyright {
	color:#8f6f6f; 
	margin: 30px 0 10px; 
	font-size:12px;
	text-align:center;
}
.copyright a {
	color:#DC2626;
}
.copyright a:hover {
	color:#FFB800;
}

/* ===== RESPONSIVE ===== */
@media (min-width: 850px){
	.container {
		max-width: 850px !important;
	}
}
@media (max-width:767px){
	.datapaito .tahun th {
		font-size:15px;
	}
	.datapaito td, .datapaito th {
		font-size:11px;
		padding: 5px 2px;
	}
	body > .container {
		width:auto; margin:5px;
		font-size:13px;
	}
	#menu {
		display: flex;
		flex-direction:column; 
		margin:10px 0; 
		padding:0;
		border-radius:6px;
	}
	#menu li {
		display:block;
		border-bottom:1px solid #450a0a;
		border-right: 0;
	}
	#menu li a {
		display:block; 
		text-align:center;
		font-size: 13px;
	}
	.headtitle {
		font-size: 34px;
	}
	header p {
		font-size:13px;
	}	
	.datapaito tr:not(.hari):not(.tahun) td {
		font-size:11px;
	}
	.bgwrap {
		line-height:1.6; 
		font-size:13px;
		margin:8px;
		padding:10px;
	}
	.bgwrap h1 { font-size:24px; }
	.bgwrap h2 { font-size:20px; }
	.bgwrap h3 { font-size:17px; }
}
@media (max-width:340px){
	.datapaito tr:not(.hari):not(.tahun) td {
		font-size:9px;
	}
	.headtitle { font-size: 28px; }
}