/* Separated CSS from inline <style> in index.html */
:root {
  /* Tukar spektrum: merah <-> kuning (termasuk turunannya) */
  --primary-red: #ff7300;   /* kuning -> merah */
  --dark-red: #cc9600;      /* kuning gelap -> merah gelap */
  --neon-red: #ffda33;     /* kuning neon -> merah neon */

  --dark-bg: #0a0a0a;
  --darker-bg: #050505;
  --terminal-green: #00ff00;

  --warning-yellow: #fbff00; /* merah -> kuning */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--dark-bg);
  color: #fff;
  font-family: 'Source Code Pro', monospace;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Override Bootstrap "text-danger" agar ikut swap merah<->kuning */
.text-danger {
  color: var(--terminal-green) !important;
}

/* Advanced Background Animations */
.animated-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

/* Circuit Board Pattern */
.circuit-pattern {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(90deg, rgba(255, 238, 0, 0.1) 1px, transparent 1px),
    linear-gradient(rgba(255, 230, 0, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: circuit-move 20s linear infinite;
}

@keyframes circuit-move {
  0% { transform: translate(0, 0); }
  100% { transform: translate(50px, 50px); }
}

/* Hexagon Grid */
.hex-grid {
  position: absolute;
  width: 120%;
  height: 120%;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ff0000' fill-opacity='0.05'%3E%3Cpath d='M30 0l25.98 15v30L30 60 4.02 45V15z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  animation: hex-drift 30s linear infinite;
}

@keyframes hex-drift {
  0% { transform: translate(-10%, -10%) rotate(0deg); }
  100% { transform: translate(10%, 10%) rotate(360deg); }
}

/* Particle System */
.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--primary-red);
  border-radius: 50%;
}

.particle-1 { animation: particle-float-1 15s infinite linear; }
.particle-2 { animation: particle-float-2 18s infinite linear; }
.particle-3 { animation: particle-float-3 12s infinite linear; }

@keyframes particle-float-1 {
  0% { transform: translate(0, 100vh) scale(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translate(100px, -100px) scale(1); opacity: 0; }
}

@keyframes particle-float-2 {
  0% { transform: translate(100vw, 100vh) scale(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translate(-100px, -100px) scale(1); opacity: 0; }
}

@keyframes particle-float-3 {
  0% { transform: translate(50vw, 100vh) scale(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translate(-50px, -100px) scale(1); opacity: 0; }
}

/* Scan Lines Effect */
.scan-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    transparent 50%,
    rgba(238, 255, 0, 0.03) 50%
  );
  background-size: 100% 4px;
  animation: scan-move 0.1s linear infinite;
}

@keyframes scan-move {
  0% { background-position: 0 0; }
  100% { background-position: 0 4px; }
}

/* Digital Rain (not matrix) */
.digital-rain {
  position: absolute;
  color: var(--primary-red);
  font-family: 'Source Code Pro', monospace;
  font-size: 10px;
  opacity: 0.3;
  animation: digital-fall 8s linear infinite;
}

@keyframes digital-fall {
  0% { transform: translateY(-100vh); opacity: 0; }
  10% { opacity: 0.3; }
  90% { opacity: 0.3; }
  100% { transform: translateY(100vh); opacity: 0; }
}

/* Geometric Shapes */
.geo-shape {
  position: absolute;
  border: 1px solid rgba(255, 0, 0, 0.1);
  animation: geo-rotate 20s linear infinite;
}

.geo-triangle {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 35px solid rgba(251, 255, 0, 0.05);
}

.geo-square {
  width: 30px;
  height: 30px;
  background: rgba(255, 196, 0, 0.03);
}

@keyframes geo-rotate {
  0% { transform: rotate(0deg) translateX(100px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(100px) rotate(-360deg); }
}

/* Glitch Effect */
.glitch {
  position: relative;
  color: var(--primary-red);
  font-family: 'Orbitron', monospace;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch::before {
  animation: glitch-1 2s infinite;
  color: #ffd000;
  z-index: -1;
}

.glitch::after {
  animation: glitch-2 2s infinite;
  color: #00ffff;
  z-index: -2;
}

@keyframes glitch-1 {
  0%, 14%, 15%, 49%, 50%, 99%, 100% {
    transform: translate(0);
  }
  15%, 49% { transform: translate(-2px, 0); }
}

@keyframes glitch-2 {
  0%, 20%, 21%, 62%, 63%, 99%, 100% {
    transform: translate(0);
  }
  21%, 62% { transform: translate(2px, 0); }
}

/* Container Styling */
.hacker-container {
  background: linear-gradient(135deg, rgba(10, 10, 10, 0.95) 0%, rgba(20, 14, 0, 0.95) 100%);
  border: 2px solid var(--primary-red);
  border-radius: 15px;
  box-shadow:
    0 0 30px rgba(255, 230, 0, 0.3),
    inset 0 0 30px rgba(255, 238, 0, 0.1);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.hacker-container::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, var(--primary-red), transparent, var(--primary-red));
  z-index: -1;
  border-radius: 15px;
  animation: border-glow 3s ease-in-out infinite alternate;
}

@keyframes border-glow {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}

/* Header Styling */
.hacker-header {
  background: linear-gradient(90deg, var(--darker-bg) 0%, var(--dark-red) 50%, var(--darker-bg) 100%);
  border-bottom: 2px solid var(--primary-red);
  padding: 20px;
  text-align: center;
  position: relative;
}

.system-info {
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid var(--primary-red);
  border-radius: 5px;
  padding: 10px;
  font-size: 12px;
  margin-bottom: 15px;
}

/* Step Indicator */
.step-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px 0;
}

.step-dot {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 230, 0, 0.2);
  border: 2px solid var(--primary-red);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 15px;
  font-weight: bold;
  transition: all 0.3s ease;
  position: relative;
}

.step-dot.active {
  background: var(--primary-red);
  box-shadow: 0 0 20px var(--primary-red);
  animation: pulse 2s infinite;
}

.step-dot.completed {
  background: var(--terminal-green);
  border-color: var(--terminal-green);
  box-shadow: 0 0 20px var(--terminal-green);
}

@keyframes pulse {
  0% { box-shadow: 0 0 20px var(--primary-red); }
  50% { box-shadow: 0 0 30px var(--primary-red), 0 0 40px var(--primary-red); }
  100% { box-shadow: 0 0 20px var(--primary-red); }
}

.step-connector {
  width: 80px;
  height: 2px;
  background: var(--primary-red);
  opacity: 0.3;
}

.step-connector.active {
  opacity: 1;
  animation: scan-line 2s infinite;
}

@keyframes scan-line {
  0% { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}

/* Form Styling */
.form-group {
  margin-bottom: 25px;
}

.form-label {
  color: var(--neon-red);
  font-weight: 600;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.form-control, .form-select {
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid var(--primary-red);
  border-radius: 8px;
  color: #fff;
  padding: 12px 15px;
  font-family: 'Source Code Pro', monospace;
  transition: all 0.3s ease;
}

.form-control:focus, .form-select:focus {
  background: rgba(0, 0, 0, 0.9);
  border-color: var(--neon-red);
  box-shadow: 0 0 15px rgba(255, 208, 0, 0.3);
  color: #fff;
}

.form-select option {
  background: var(--darker-bg);
  color: #fff;
}

/* Button Styling */
.btn-hacker {
  background: linear-gradient(45deg, var(--terminal-green), #00cc00);
  border: none;
  color: var(--darker-bg);
  padding: 12px 30px;
  border-radius: 8px;
  font-family: 'Orbitron', monospace;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-hacker::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.btn-hacker:hover::before {
  left: 100%;
}

.btn-hacker:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(255, 238, 0, 0.4);
}

.btn-secondary {
  background: rgba(0, 255, 0, 0.08);
  border: 1px solid rgba(0, 255, 0, 0.35);
  color: var(--terminal-green);
}

.btn-secondary:hover {
  background: rgba(255,255,255,0.2);
  border-color: #999;
}

/* Modal Styling */
.modal-content {
  background: var(--dark-bg);
  border: 2px solid var(--primary-red);
  border-radius: 15px;
}

.modal-header {
  border-bottom: 1px solid var(--primary-red);
  background: linear-gradient(90deg, var(--darker-bg), var(--dark-red), var(--darker-bg));
}

.modal-title {
  font-family: 'Orbitron', monospace;
  color: var(--neon-red);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.btn-close {
  filter: invert(1);
}

/* Terminal Output */
.terminal-output {
  background: var(--darker-bg);
  border: 1px solid var(--terminal-green);
  border-radius: 8px;
  padding: 20px;
  height: 300px;
  overflow-y: auto;
  font-family: 'Source Code Pro', monospace;
  font-size: 14px;
  line-height: 1.6;
}

.terminal-line {
  color: var(--terminal-green);
  margin-bottom: 5px;
}

.terminal-line.error {
  color: var(--primary-red);
}

.terminal-line.warning {
  color: var(--warning-yellow);
}

/* Result Display */
.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.result-card {
  background: rgba(0,0,0,0.8);
  border: 1px solid var(--primary-red);
  border-radius: 10px;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.result-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: var(--neon-red);
  animation: scan 3s infinite;
}

@keyframes scan {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

.result-label {
  color: var(--primary-red);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.result-value {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.pattern-display {
  background: var(--darker-bg);
  border: 2px solid var(--terminal-green);
  border-radius: 10px;
  padding: 25px;
  font-family: 'Source Code Pro', monospace;
  white-space: pre-wrap;
  line-height: 1.8;
  margin: 25px 0;
  position: relative;
}

.pattern-display::before {
  content: 'PATTERN DATA';
  position: absolute;
  top: -10px;
  left: 20px;
  background: var(--dark-bg);
  color: var(--terminal-green);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
}

/* Warning Box */
.warning-box {
  background: linear-gradient(45deg, rgba(255,255,0,0.1), rgba(255,0,0,0.1));
  border: 2px solid var(--warning-yellow);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  margin: 25px 0;
  animation: warning-blink 2s infinite;
}

@keyframes warning-blink {
  0%, 50% { border-color: var(--warning-yellow); }
  51%, 100% { border-color: var(--primary-red); }
}

/* Final Action Button */
.final-action {
  background: linear-gradient(45deg, var(--terminal-green), #00cc00);
  color: var(--darker-bg);
  padding: 20px;
  border-radius: 10px;
  text-decoration: none;
  display: block;
  text-align: center;
  font-family: 'Orbitron', monospace;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 25px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.final-action::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s;
}

.final-action:hover::before {
  transform: translateX(100%);
}

.final-action:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(0,255,0,0.3);
  color: var(--darker-bg);
}

/* Mobile Loading and Transition Effects */
.mobile-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--dark-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.mobile-loading.hidden {
  opacity: 0;
  pointer-events: none;
}

.loader-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid rgba(255, 238, 0, 0.3);
  border-top: 3px solid var(--primary-red);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Enhanced Mobile Transitions */
.step-container {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.step-container.slide-in {
  animation: slideInRight 0.5s ease-out;
}

.step-container.slide-out {
  animation: slideOutLeft 0.5s ease-out;
}

@keyframes slideInRight {
  0% { transform: translateX(100%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutLeft {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(-100%); opacity: 0; }
}

/* Hacker Text Animations */
.scramble-text {
  font-family: 'Source Code Pro', monospace;
  font-weight: 600;
}

.terminal-cursor::after {
  content: '▋';
  color: var(--terminal-green);
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.hex-code {
  color: var(--primary-red);
  font-family: 'Source Code Pro', monospace;
  font-size: 0.8em;
  opacity: 0.7;
}

/* Mobile Button Ripple Effect */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s;
}

.btn-ripple:active::after {
  width: 300px;
  height: 300px;
}

/* Mobile Card Flip Animation */
.result-card {
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.result-card.flip {
  transform: rotateY(180deg);
}

/* Mobile Progress Bar */
.mobile-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-red), var(--neon-red));
  z-index: 1000;
  transition: width 0.3s ease;
}

/* Mobile Vibration Classes */
.vibrate {
  animation: vibrate 0.3s ease-in-out;
}

@keyframes vibrate {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

/* Medium/Small responsive (tetap dari inline, dipadatkan) */
@media (max-width: 768px) {
  body { padding: 10px; }
  .hacker-container { margin: 0; border-radius: 20px; overflow: hidden; }
  .hacker-header { padding: 15px; border-radius: 20px 20px 0 0; }
  .system-info { padding: 8px; font-size: 10px; margin-bottom: 10px; }
  .hex-code { font-size: 10px; margin-bottom: 10px; }
  .step-indicator { flex-direction: row; justify-content: space-between; margin: 20px 0; padding: 0 20px; }
  .step-dot { width: 40px; height: 40px; font-size: 12px; margin: 0; }
  .step-connector { flex: 1; width: auto; height: 2px; margin: 0 10px; }
  .step-container { padding: 20px 15px; }
  .form-group { margin-bottom: 20px; }
  .form-label { font-size: 0.9rem; margin-bottom: 8px; }
  .form-control, .form-select { padding: 15px 12px; font-size: 16px; border-radius: 12px; background: rgba(0,0,0,0.9); }
  .btn-hacker { padding: 15px 25px; font-size: 14px; width: 100%; margin-bottom: 10px; border-radius: 12px; }
  .btn-secondary { width: 48%; padding: 12px 15px; font-size: 14px; border-radius: 12px; }
  .d-flex.justify-content-between .btn-secondary { width: 48%; }
  .d-flex.justify-content-between .btn-hacker { width: 48%; margin-bottom: 0; }
  .modal-dialog { margin: 10px; max-width: calc(100% - 20px); }
  .modal-content { border-radius: 20px; }
  .modal-header { padding: 15px 20px; border-radius: 20px 20px 0 0; }
  .modal-title { font-size: 1rem; letter-spacing: 1px; }
  .modal-body { padding: 20px; }
  .terminal-output { height: 250px; font-size: 12px; padding: 15px; border-radius: 12px; }
  .result-grid { grid-template-columns: 1fr; gap: 15px; margin-bottom: 20px; }
  .result-card { padding: 15px; border-radius: 12px; }
  .result-label { font-size: 11px; margin-bottom: 6px; }
  .result-value { font-size: 14px; }
  .pattern-display { padding: 15px; font-size: 12px; line-height: 1.6; border-radius: 12px; margin: 20px 0; }
  .warning-box { padding: 15px; margin: 20px 0; border-radius: 12px; }
  .final-action { padding: 18px; font-size: 14px; border-radius: 12px; margin-top: 20px; letter-spacing: 1px; }
}