/* Reset kecil */
body { 
  box-sizing: border-box; 
}

/* Latar & kedalaman stainless steel */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, #e8e8e8 0%, #d4d4d4 25%, #f0f0f0 50%, #d4d4d4 75%, #e8e8e8 100%);
  opacity: 0.3;
}

/* Animasi */
.fade-in { 
  animation: fade 0.6s ease-out both;
}

@keyframes fade { 
  from {
    opacity: 0; 
    transform: translateY(8px);
  } 
  to {
    opacity: 1; 
    transform: none;
  } 
}

/* Efek 3D tanpa border */
.glow-border {
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.6),
    0 4px 16px rgba(0, 212, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  transform: perspective(1000px) rotateX(2deg);
  transform-style: preserve-3d;
}

/* Warna tautan: neon blue aesthetic */
a { 
  color: #00d4ff !important; 
  text-decoration: none; 
}

a:hover { 
  color: #33e0ff !important; 
  text-decoration: underline;
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
}

h1 a, h2 a, h3 a { 
  color: #00d4ff !important; 
}

h1 a:hover, h2 a:hover, h3 a:hover { 
  color: #33e0ff !important; 
  text-shadow: 0 0 12px rgba(0, 212, 255, 0.8);
}

/* Warna khusus untuk tautan di dalam artikel */
#article .content a { 
  color: #00d4ff !important; 
}

#article .content a:hover { 
  color: #33e0ff !important; 
  text-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
}

/* Menu button styling dengan efek 3D */
.menu-button {
  display: block;
  text-align: center;
  padding: 12px 16px;
  background: linear-gradient(to bottom, #ef4444, #dc2626, #b91c1c);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: white !important;
  transition: all 0.3s ease;
  transform: perspective(600px) rotateX(5deg) translateZ(0);
  box-shadow: 
    0 8px 20px rgba(0,0,0,0.4), 
    0 4px 10px rgba(239, 68, 68, 0.3),
    inset 0 2px 4px rgba(255,255,255,0.2), 
    inset 0 -2px 4px rgba(0,0,0,0.3);
  transform-style: preserve-3d;
}

.menu-button:hover {
  background: linear-gradient(to bottom, #dc2626, #b91c1c, #991b1b);
  transform: perspective(600px) rotateX(5deg) translateZ(10px) scale(1.02);
  box-shadow: 
    0 12px 28px rgba(0,0,0,0.5), 
    0 6px 14px rgba(239, 68, 68, 0.4),
    inset 0 2px 4px rgba(255,255,255,0.25), 
    inset 0 -2px 4px rgba(0,0,0,0.4);
  color: white !important;
  text-decoration: none;
}

.menu-button:active {
  transform: perspective(600px) rotateX(5deg) translateZ(5px) scale(0.98);
}

/* Protection message animation */
@keyframes fadeInOut {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}