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

body {
	font-family: 'Poppins', sans-serif;
	background:#010b1a; /* Navy hampir hitam */
	font-weight:400; 
	color:#e0f2ff; /* Biru muda, adem di mata */
}
a { color:#FFC857; transition: color 0.3s ease; } /* Gold */
a:hover { color:#FFDF8A; }
img { max-width:100%; height:auto; }
.border-danger { border-color:#3B82F6 !important; } /* Biru */
.boxshadow { box-shadow: 0 0 15px rgba(59, 130, 246, 0.4); }

header .container {
	background:url(img/bg-head.png) 50% 50% repeat;
	background-color:#010b1a;
	padding: 10px;
}
header p { color:#93c5fd; font-weight:600; font-size:16px; padding-bottom:10px; } /* Biru langit */
.onclick { cursor:pointer; }

.headtitle {
	font-family: 'Tilt Prism', sans-serif; 
	font-weight:400; 
	font-size:80px; 
	line-height:1.1; 
	text-transform:capitalize;
	background: linear-gradient(90deg, #FFC857, #3B82F6, #FFC857); /* Gold ke Biru */
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	word-break: break-word; 
}

#menu {
	list-style:none; 
	margin:0; padding:0;
	display: flex; 
	justify-content: center; flex-wrap:wrap;
	background: linear-gradient(to bottom,  #0a1f44 0%,#1e3a8a 100%); /* Navy gradient */
	border-radius: 8px; overflow:hidden;
	border: 1px solid #1e3a8a;
}
#menu li {
	padding:0; 
	border-right:1px solid rgba(255,255,255,0.1);
	flex: 1 1 auto;
}
#menu li:first-child { border-left:1px solid rgba(255,255,255,0.1); }
#menu li a {
	display:block; 
	padding:12px 18px; 
	text-decoration:none; 
	color:#FFF; 
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:0.5px; text-align:center;
}
#menu li a:hover { background: rgba(255, 200, 87, 0.15); color:#FFC857; }

/* WRAPPER BIAR TABEL BISA SCROLL DI HP */
#paitowrap { 
	width:100%; 
	overflow-x:auto; 
	-webkit-overflow-scrolling: touch;
	border: 1px solid #1e3a8a;
	border-radius: 8px;
	margin: 10px 0;
	background: #010b1a;
}
#paitotable {
    background: #010b1a;
    border-collapse: collapse;
    width: 100%; min-width:600px; 
    color: #e0f2ff;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
#paitotable td {
    border: 1px solid #1e3a8a;
    text-align: center;
    padding: 6px 4px;
    font-size: 14px;
    color:#e0f2ff;
    font-weight:400;
    white-space:nowrap;
}
#paitotable tr:nth-child(even) { background: #081c3a; } /* Zebra strip navy */
#paitotable tr:hover { background: rgba(59, 130, 246, 0.2); } /* Hover biru */
#paitotable .disabled { background: #081c3a; color:#60a5fa; }
#paitotable td.nxpx { color: #60a5fa; background-color:#081c3a; }

#paitocolor { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:12px 0; }
#paitocolor .color {
    height: 30px; width: 30px;
    cursor:pointer;
    border-radius: 6px;
    border:2px solid #1e3a8a;
	transition: all 0.2s ease;
}
#paitocolor .color:hover { transform: scale(1.1); box-shadow: 0 0 10px #3B82F6; }
#paitocolor .color.eraser { background: #010b1a; border-style: dashed; }
#paitocolor .color.Blue { background: #3B82F6; }
#paitocolor .color.Aqua { background: #22D3EE; }
#paitocolor .color.Teal { background: #14B8A6; }
#paitocolor .color.Lime { background: #84CC16; }
#paitocolor .color.Yellow { background: #FFC857; } /* Gold */
#paitocolor .color.Orange { background: #F97316; }
#paitocolor .color.Red { background: #EF4444; }
#paitocolor .color.Pink { background: #EC4899; }
#paitocolor .color.Purple { background: #8B5CF6; }
#paitocolor .color.Silver { background: #94A3B8; }
#paitocolor .selected { box-shadow: 0 0 0 3px #FFC857; border-color:#FFC857; }

#paitocontainer { font-weight: bold; position: relative; }
#paitotable thead td {
    text-transform: uppercase; font-weight: 700;
    padding: 10px 4px !important;
    border: 1px solid #1e3a8a;
	background: linear-gradient(to bottom,  #0a1f44 0%,#1e3a8a 100%);
	color:#FFC857; font-size:15px; letter-spacing:0.8px;
	position: sticky;
	top: 0;
	z-index: 2;
}
#clear {
    margin: 10px auto; display:block;
	background:#1e3a8a; color:#FFC857; border:1px solid #3B82F6; padding:8px 16px; border-radius:6px; font-weight:600;
}
#clear:hover { background:#2563eb; }

#floatmenu { padding:10px 5px; z-index: 999; }
#floatmenu.fixed {
    position: fixed; top: 0; left: 0; width:100%;
    z-index: 9999;
    background: rgba(1, 11, 26, 0.9);
	backdrop-filter: blur(8px);
}

/* WARNA MARKING BARU - ROYAL */
.rek { background-color:#3B82F6 !important; color: white !important; font-weight:700; } /* Biru */
.rke { background-color:#22D3EE !important; color: #010b1a !important; font-weight:700; } /* Cyan */
.rko { background-color:#8B5CF6 !important; color: white !important; font-weight:700; } /* Ungu */
.ras { background-color:#14B8A6 !important; color: white !important; font-weight:700; } /* Teal */
.rd { background-color:#EF4444 !important; color: white !important; font-weight:700; } /* Merah */

.copyright { color:#93c5fd; margin-bottom:30px; font-size:14px; text-align:center; }

/* ===== RESPONSIVE FIX ===== */
@media (min-width: 990px){
	.container { max-width: 990px !important; }
}

@media (max-width:767px){
	body > .container { width:auto; margin:0 10px; padding:0; }
	
	#menu { display: flex; flex-direction:column; margin:0; padding:0; border-radius:6px; }
	#menu li { display:block; border-bottom:1px solid #1e3a8a; border-right:0; border-left:0; }
	#menu li:first-child { border-left:0; }
	#menu li a { display:block; text-align:center; padding:10px; }
	
	.headtitle { font-size:42px; text-align:center; }
	header p { font-size:14px; text-align:center; }
	
	#paitotable td { font-size: 11px; padding:4px 2px; }
	#paitocolor .color { height: 26px; width: 26px; }
	#clear { font-size:12px; padding:6px 12px; }
}

@media (max-width:480px){
	body { font-size:12px; line-height:1.5; }
    .headtitle { font-size:32px; }
    #paitotable td { font-size: 10px; padding:3px 1px; }
    #paitocolor .color { height: 24px; width: 24px; }
	header p { font-size:12px; }
}