html, body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
background: transparent !important;
background-color: rgba(0, 0, 0, 0) !important;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #ffffff;
font-size: 14px;
overflow: hidden;
user-select: none;
-webkit-user-drag: none;
}
* {
box-sizing: border-box;
background: transparent;
}
/* Container Utama HUD (Top Bar) */
.hud-container {
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%);
width: 98%;
max-width: 1150px;
display: flex;
flex-direction: column;
z-index: 9999;
background: transparent !important;
}
/* KAPSUL ATAS UTAMA */
.top-capsule-bar {
position: relative;
width: 100%;
height: 48px;
background: transparent !important;
border: 2px solid #ff69b4;
border-radius: 25px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
clip-path: polygon(
0% 0%,
100% 0%,
100% 100%,
calc(50% + 105px) 100%,
calc(50% + 105px) 0%,
calc(50% - 105px) 0%,
calc(50% - 105px) 100%,
0% 100%
);
}
/* KELOMPOK ITEM ATAS KIRI & KANAN */
.top-left-group, .top-right-group {
display: flex;
flex-direction: row !important;
align-items: center;
gap: 18px;
z-index: 2;
flex: 1;
background: transparent !important;
}
.top-left-group {
justify-content: flex-start;
}
.top-right-group {
justify-content: flex-end;
}
/* KOTAK TENGAH TRANSPARAN */
.center-speed-box {
position: absolute;
top: -2px;
left: 50%;
transform: translateX(-50%);
width: 210px;
height: 75px;
background: transparent !important;
border: 2px solid #ff69b4;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
z-index: 10;
}
/* KONTEN SUB BAR BAWAH */
.bottom-bars-wrapper {
display: flex;
flex-direction: row !important;
justify-content: space-between;
width: 100%;
margin-top: 4px;
padding-left: 60px;
padding-right: 60px;
background: transparent !important;
}
/* Sub Bar Bawah Kiri */
.sub-bar-left {
height: 32px;
background: transparent !important;
border-left: 2px solid #ff69b4;
border-bottom: 2px solid #ff69b4;
border-bottom-left-radius: 14px;
padding: 0 16px;
display: flex;
flex-direction: row !important;
align-items: center;
gap: 16px;
}
/* Sub Bar Bawah Kanan */
.sub-bar-right {
height: 32px;
background: transparent !important;
border-right: 2px solid #ff69b4;
border-bottom: 2px solid #ff69b4;
border-bottom-right-radius: 14px;
padding: 0 16px;
display: flex;
flex-direction: row !important;
align-items: center;
gap: 16px;
}
/* STYLING TEKS & IKON */
.hud-item {
display: flex;
flex-direction: row !important;
align-items: center;
gap: 7px;
font-size: 14px;
font-weight: bold;
color: #ffffff;
white-space: nowrap;
text-shadow:
-1.5px -1.5px 0 #000,
1.5px -1.5px 0 #000,
-1.5px 1.5px 0 #000,
1.5px 1.5px 0 #000,
0px 2px 4px rgba(0, 0, 0, 0.9);
}
.hud-item i {
color: #ffffff;
font-size: 16px;
filter: drop-shadow(-1px -1px 0 #000)
drop-shadow(1px -1px 0 #000)
drop-shadow(-1px 1px 0 #000)
drop-shadow(1px 1px 0 #000);
}
.truck-slot {
min-width: 50px;
}
/* STYLING RPM DENGAN REDLINE */
.rpm-item span {
color: #2ecc71;
transition: color 0.2s ease, text-shadow 0.2s ease;
}
.rpm-item span.rpm-high {
color: #e74c3c !important;
text-shadow:
-1.5px -1.5px 0 #000,
1.5px -1.5px 0 #000,
-1.5px 1.5px 0 #000,
1.5px 1.5px 0 #000,
0 0 8px rgba(231, 76, 60, 0.8) !important;
}
/* Badge VID dan Plat Nomor */
.badge-vid {
font-size: 12px;
color: #ff69b4;
background: rgba(0, 0, 0, 0.6);
padding: 2px 7px;
border-radius: 4px;
border: 1px solid #ff69b4;
margin-left: 6px;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.badge-plate {
font-size: 12px;
color: #000000;
background: #f1c40f;
padding: 2px 7px;
border-radius: 4px;
font-weight: bold;
margin-left: 6px;
text-shadow: none;
}
/* =========================================================
STYLING SPEDO KEDUA (PINK GLOW MATCHING SPEDO ATAS)
========================================================= */
.analog-speedo-container {
position: fixed;
bottom: 25px;
right: 25px;
width: 240px;
height: 240px;
z-index: 9999;
pointer-events: none;
filter: drop-shadow(0 0 12px rgba(255, 105, 180, 0.4));
}
.analog-gauge {
width: 100%;
height: 100%;
}
/* Ring Pink */
.gauge-neon-ring {
fill: none;
stroke: #ff69b4;
stroke-width: 3.5;
filter: drop-shadow(0 0 6px #ff69b4);
}
.gauge-bg {
fill: #121212;
stroke: #ff69b4;
stroke-width: 1.5;
}
/* Striping Skala */
.gauge-ticks {
fill: none;
stroke: #ff69b4;
stroke-width: 2.5;
stroke-dasharray: 2, 6;
}
/* Teks mph */
.gauge-unit-text {
font-family: 'Segoe UI', Arial, sans-serif;
font-size: 11px;
font-weight: bold;
fill: #ff69b4;
text-anchor: middle;
letter-spacing: 1px;
}
/* Angka Putih Jelas */
.gauge-num {
font-family: 'Arial Black', sans-serif;
font-size: 10px;
font-weight: 900;
fill: #ffffff;
text-anchor: middle;
dominant-baseline: central;
user-select: none;
filter: drop-shadow(0 0 2px #ff69b4);
}
/* Jarum Putih Glowing */
.gauge-needle {
stroke: #ffffff;
stroke-width: 3.5;
stroke-linecap: round;
transform-origin: 100px 100px;
transform: rotate(0deg);
transition: transform 0.05s linear;
filter: drop-shadow(0 0 6px #ffffff);
}
/* Tutup Tengah Jarum */
.gauge-center-cap-outer {
fill: #ff69b4;
}
.gauge-center-cap-inner {
fill: #121212;
stroke: #ff69b4;
stroke-width: 1.5;
}
/* Display Angka Digital Tambahan di Tengah */
.analog-display {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'Arial Black', sans-serif;
color: #ffffff;
pointer-events: none;
}
.gear-box {
position: absolute;
top: 110px;
background: rgba(0, 0, 0, 0.8);
padding: 1px 8px;
font-size: 16px;
border-radius: 4px;
border: 1px solid #ff69b4;
color: #ff69b4;
}
.speed-box {
position: absolute;
top: 138px;
background: rgba(0, 0, 0, 0.8);
padding: 1px 12px;
font-size: 20px;
border-radius: 4px;
border: 1px solid #ff69b4;
color: #ffffff;
}