/* Reset & Setup Halaman */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
  background-color: #f0f2f5; 
  /* Mengurangi padding atas agar konten halaman tidak tertutup menu yang menempel di atas */
  padding-top: 100px; 
}

/* Container Utama Menu (DIUBAH MENJADI DI ATAS & LEBAR PENUH) */
.slanted-menu {
  position: fixed;    /* Membuat menu menempel saat halaman di-scroll */
  top: 0;             /* Menempel tepat di batas paling atas */
  left: 0;            /* Menempel di batas kiri */
  width: 100%;        /* Lebar penuh 100% layar */
  z-index: 1000;      /* Memastikan menu selalu berada di lapisan paling depan */

  display: flex;
  justify-content: center; /* Membuat item menu jajar genjang tetap berada di tengah */
  gap: 15px;
  background: #1e222b; 
  padding: 5px 35px; /* Sedikit mengurangi padding vertikal agar tidak terlalu tebal di layar */
  border-radius: 0;   /* Menghapus border-radius karena menempel penuh di tepi layar */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Desain Item Jajar Genjang */
.menu-item {
  position: relative;
  text-decoration: none;
  color: #94a3b8; 
  background: #2a303c;
  padding: 5px 35px; /* Sedikit disesuaikan agar proporsional untuk navbar atas */
  display: block;
  
  /* Trik Utama: Memiringkan kotak sebesar -20 derajat */
  transform: skewX(-20deg); 
  
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

/* Konten di Dalam Menu (Ikon & Teks) */
.menu-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  
  /* Trik Kedua: Mengembalikan konten agar TIDAK ikut miring */
  transform: skewX(20deg); 
}

.menu-content i {
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.menu-content span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
}

/* --- EFEK HOVER (INTERAKSI AKTIF) --- */

.menu-item:hover {
  background: #242933;
  color: #fff; /* Mengubah warna teks ke putih saat di-hover agar kontras */
  
  /* Efek Border Menyala Oranye/Neon seperti di gambar */
  border-color: #ff6b35; 
  box-shadow: 0 0 15px rgba(255, 107, 53, 0.5), 
              inset 0 0 10px rgba(255, 107, 53, 0.2);
  
  /* Membuat posisi kotak sedikit bergeser naik */
  transform: skewX(-20deg) translateY(-3px); 
}

/* Efek Animasi Mini pada Ikon saat di-hover */
.menu-item:hover .menu-content i {
  transform: translateY(-2px) scale(1.1);
}

/* Garis Indikator Tipis di Bagian Bawah Menu Saat Hover */
.menu-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #ff6b35;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.menu-item:hover::after {
  transform: scaleX(1);
}