@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:#0d0a1a;
	font-weight:400; 
	color:#e9e6ff;
}
a { color:#FFD166; transition: color 0.3s ease; }
a:hover { color:#FFE299; }
img { max-width:100%; height:auto; }
.border-danger { border-color:#A855F7 !important; }
.boxshadow { box-shadow: 0 0 12px rgba(168, 85, 247, 0.5); }

/* ===== UKURAN HEADING BARU - LEBIH KECIL ===== */
h1, .h1 { font-size: 32px; line-height: 1.2; font-weight: 700; margin: 0.5em 0; }
h2, .h2 { font-size: 26px; line-height: 1.3; font-weight: 700; margin: 0.5em 0; }
h3, .h3 { font-size: 20px; line-height: 1.4; font-weight: 600; margin: 0.5em 0; }
h4, .h4 { font-size: 18px; line-height: 1.4; font-weight: 600; margin: 0.5em 0; }

.headtitle {
	font-family: 'Tilt Prism', sans-serif; 
	font-weight:400; 
	font-size:48px; /* DARI 80px JADI 48px */
	line-height:1.1; 
	text-transform:capitalize;
	background: linear-gradient(90deg, #FFD166, #A855F7, #FFD166);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	word-break: break-word;
}

header .container {
	background:url(img/bg-head.png) 50% 50% repeat;
	background-color:#0d0a1a;
	padding: 10px;
}
header p { color:#a39cc8; font-weight:600; font-size:16px; padding-bottom:10px; }
.onclick { cursor:pointer; }

#menu {
	list-style:none; 
	margin:0; padding:0;
	display: flex; 
	justify-content: center; flex-wrap:wrap;
	background: linear-gradient(to bottom,  #3B1E6B 0%,#5B21B6 100%);
	border-radius: 8px; overflow:hidden;
}
#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, 209, 102, 0.15); color:#FFD166; }

#paitowrap { 
	width:100%; 
	overflow-x:auto; 
	-webkit-overflow-scrolling: touch; 
}
#paitotable {
    background: #0d0a1a;
    border-collapse: collapse;
    width: 100%; min-width:600px;
    color: #000;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
#paitotable td {
    border: 1px solid #2a2147;
    text-align: center;
    padding: 6px 4px;
    width: 20px;
    font-size: 14px;
    color:#e9e6ff;
    font-weight:400;
    white-space:nowrap;
}
#paitotable tr:nth-last-child(5n+1) { background: #1a1433; }
#paitotable .disabled { background: #1a1433; color:#6e658f; }
#paitotable td.nxpx { color: #6e658f; background-color:#1a1433; }
#paitotable thead td.nxpx { color:#FFD166; }

#paitocolor { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
#paitocolor .color {
    height: 28px; width: 28px;
    cursor:pointer;
    border-radius: 8px;
    border:2px solid #2a2147;
	transition: transform 0.2s ease;
}
#paitocolor .color:hover { transform: scale(1.1); }
#paitocolor .color.eraser { background: #0d0a1a; border-style: dashed; }
#paitocolor .color.Blue { background: #60A5FA; }
#paitocolor .color.Aqua { background: #22D3EE; }
#paitocolor .color.Teal { background: #2DD4BF; }
#paitocolor .color.Lime { background: #A3E635; }
#paitocolor .color.Yellow { background: #FFD166; }
#paitocolor .color.Orange { background: #FB923C; }
#paitocolor .color.Red { background: #F87171; }
#paitocolor .color.Pink { background: #F472B6; }
#paitocolor .color.Purple { background: #A855F7; }
#paitocolor .color.Silver { background: #C4B5FD; }
#paitocolor .selected { box-shadow: 0 0 0 3px #FFD166; border-color:#FFD166; }

#paitocontainer { font-weight: bold; position: relative; }
#paitotable thead td {
    text-transform: uppercase; font-weight: 700;
    padding: 8px 4px !important;
    border: 1px solid #2a2147;
	background: linear-gradient(to bottom,  #3B1E6B 0%,#5B21B6 100%);
	color:#FFD166; font-size:15px; letter-spacing:0.8px;
}
#clear {
    margin: 10px auto; display:block;
	background:#5B21B6; color:#FFF; border:none; padding:8px 16px; border-radius:6px;
}
#clear:hover { background:#7C3AED; }

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

.rek { background-color:#60A5FA !important; color: white !important; } 
.rke { background-color:#A3E635 !important; color: #0d0a1a !important; }
.rko { background-color:#A855F7 !important; color: white !important; } 
.ras { background-color:#2DD4BF !important; color: #0d0a1a !important; }
.rd { background-color:#F87171 !important; color: white !important; }
.copyright { color:#a39cc8; 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; }
	
	/* HEADING DI HP JUGA DIKECILIN */
	h1, .h1 { font-size: 26px; }
	h2, .h2 { font-size: 22px; }
	h3, .h3 { font-size: 18px; }
	h4, .h4 { font-size: 16px; }

	#menu { display: flex; flex-direction:column; margin:0; padding:0; border-radius:6px; }
	#menu li { display:block; border-bottom:1px solid #3B1E6B; 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:36px; text-align:center; } /* DARI 42px JADI 36px */
	header p { font-size:14px; text-align:center; }
	
	#paitotable td { font-size: 11px; padding:4px 2px; }
	#paitocolor .color { height: 24px; width: 24px; border-radius: 6px; }
	#clear { font-size:12px; padding:6px 12px; }
}

@media (max-width:480px){
	body { font-size:12px; line-height:1.5; }
    
	/* HEADING DI HP KECIL */
	h1, .h1 { font-size: 22px; }
	h2, .h2 { font-size: 18px; }
	h3, .h3 { font-size: 16px; }
	h4, .h4 { font-size: 14px; }

	.headtitle { font-size:28px; } /* DARI 32px JADI 28px */
    #paitotable td { font-size: 9px; padding:3px 1px; }
    #paitocolor .color { height: 22px; width: 22px; }
	header p { font-size:12px; }
}