/* ===========================
   page6: style-page6.css
   =========================== */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden !important; /* cegah horizontal scroll */
}

#matrix-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw !important;  /* selalu pas viewport */
  height: 100vh !important; /* selalu pas viewport */
  z-index: -1;
  pointer-events: none;
}

/* ============================================================
   🌤 LIGHT MODE BACKGROUND FIX + SMOOTH TRANSITION
   ============================================================ */

/* Default transition halus untuk semua canvas dan body */
body, canvas, #digital-quake-lightning {
  transition: background 1.2s ease, box-shadow 1.2s ease, color 0.8s ease;
}

/* Light mode background bersih */
body:not(.dark-mode) #digital-quake-lightning {
  background: #f8f8f8 !important;
  box-shadow: 0 0 40px rgba(255,255,255,0.6) inset;
}

/* Dark mode tetap hitam */
body.dark-mode #digital-quake-lightning {
  background: #000 !important;
  box-shadow: 0 0 25px rgba(0,255,255,0.4) inset;
}

/* Divider juga ikut smooth */
.navbar-divider {
  transition: background 1s ease, box-shadow 1s ease;
}

/* =========================================================
   🌤 LIGHT MODE FIX FOR NAVBAR (WHITE NEON + HAMBURGER)
   ========================================================= */

/* === Navbar Background === */
body:not(.dark-mode) .navbar {
  background: #fff !important;
  box-shadow: 0 0 15px rgba(255,255,255,0.8),
              0 0 25px rgba(255,255,255,0.5);
}

/* === Navbar Links === */
body:not(.dark-mode) .navbar a {
  color: #000 !important;
  border: 2px solid #000;
  background: rgba(255,255,255,0.3);
  box-shadow: 0 0 10px #000, inset 0 0 10px rgba(255,255,255,0.6);
  transition: all 0.3s ease;
}

body:not(.dark-mode) .navbar a:hover,
body:not(.dark-mode) .navbar a.active {
  color: #fff !important;
  background: #000 !important;
  box-shadow: 0 0 15px #000, 0 0 30px rgba(0,0,0,0.8);
}

/* === Navbar Divider (White Neon Glow) === */
body:not(.dark-mode) .navbar-divider {
  background: linear-gradient(90deg, #fff, #fff);
  box-shadow: 0 0 10px #fff, 0 0 20px rgba(255,255,255,0.8);
}

/* === Hamburger Menu Icon === */
body:not(.dark-mode) .hamburger div {
  background: #fff !important;
  box-shadow: 0 0 10px #fff, 0 0 20px rgba(255,255,255,0.8);
  transition: all 0.3s ease;
}

/* Hover efek hamburger */
body:not(.dark-mode) .hamburger:hover div {
  background: #000 !important;
  box-shadow: 0 0 15px #000, 0 0 25px rgba(0,0,0,0.8);
}

/* === Mobile Menu Background === */
body:not(.dark-mode) .mobile-menu {
  background: rgba(255,255,255,0.9);
  box-shadow: 0 0 25px rgba(255,255,255,0.8);
}

/* Mobile menu text */
body:not(.dark-mode) .mobile-menu a {
  color: #000 !important;
  text-shadow: 0 0 5px #fff;
}
body:not(.dark-mode) .mobile-menu a:hover {
  color: #fff !important;
  background: #000 !important;
  text-shadow: 0 0 10px #000;
}

/* === Navbar Home Icon (🏠) === */
body:not(.dark-mode) .nav-left a.home-icon {
  background: rgba(255,255,255,0.7);
  border: 2px solid #000;
  color: #000;
  box-shadow: 0 0 10px #000;
}
body:not(.dark-mode) .nav-left a.home-icon:hover {
  background: #000;
  color: #fff;
  box-shadow: 0 0 20px #000;
}

/* ============================================================
   🌗 LIGHT MODE NAVBAR DIVIDER — BLACK NEON EFFECT
   ============================================================ */
body:not(.dark-mode) .navbar-divider {
  background: linear-gradient(90deg, #000, #000);
  box-shadow: 0 0 10px #000, 0 0 20px rgba(0,0,0,0.6);
}

/* Divider full width */
.navbar-divider {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, #00ffee, #00ffee);
  box-shadow: 0 0 10px #00ffee, 0 0 20px #00ffee;
}

/* Title */
h1 {
  color: #00ffcc;
  font-size: 36px;
  margin: 0 auto 10px;
  text-align: center;
  margin-top: 40px;
  text-shadow: 0 0 10px #00ffcc, 0 0 20px #00ffcc;
  animation: glowTitle 2s infinite alternate;
}

@keyframes glowTitle {
  from { text-shadow: 0 0 10px #00ffcc, 0 0 20px #00ffcc; }
  to   { text-shadow: 0 0 20px #00ffee, 0 0 40px #00ffee; }
}

p {
  margin-bottom: 60px;
  font-size: 16px;
  color: #ccc;
  text-align: center;
}

/* === GLOBAL HEADER (toggle + mute btn) === */
.global-header {
  position: absolute !important; /* bukan fixed, jadi ikut scroll */
  top: 20px;
  right: 90px;
  display: flex;
  align-items: center;
  gap: 15px;
  z-index: 99;
}
/* ============================================================
   🌤 LIGHT MODE GLOBAL BACKGROUND FIX + SMOOTH TRANSITION
   ============================================================ */
body, #digital-quake-lightning {
  transition: background 1.2s ease, box-shadow 1.2s ease, color 0.8s ease;
}

/* Light mode clean white */
body:not(.dark-mode),
body:not(.dark-mode) #digital-quake-lightning {
  background: #f5f5f5 !important;
  color: #000;
  box-shadow: 0 0 40px rgba(0,0,0,0.2) inset;
}

/* Dark mode clean black */
body.dark-mode,
body.dark-mode #digital-quake-lightning {
  background: #000 !important;
  color: #fff;
  box-shadow: 0 0 40px rgba(0,255,255,0.4) inset;
}

/* Divider smooth neon */
.navbar-divider {
  transition: background 1s ease, box-shadow 1s ease;
}


/* === Container Contact Responsive === */
.contact-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 50px 20px;
}

@media (min-width: 768px) {
  .contact-container {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1100px;
    margin: 0 auto;
  }
}

.contact-box {
  position: relative;
  width: 520px; 
  height: 130px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 25px;
  padding: 0 30px;
  font-size: 16px;
  cursor: pointer;
  overflow: hidden;
  border: 3px solid #fff;          /* default putih */
  background: linear-gradient(145deg, #111, #1a1a1a, #000);
  box-shadow: 0 0 20px #fff;       /* default glow putih */
  transition: transform 0.2s ease, box-shadow 0.3s ease, opacity 0.5s ease;
  will-change: transform, opacity;
  opacity: 0;
  transform: translateY(50px) scale(0.9);
}

.contact-box img {
  width: 60px;
  height: 60px;
}

.contact-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.contact-text span {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 6px;
  color: #fff; /* default putih */
  transition: all 0.2s ease;
}

.contact-text small {
  font-size: 14px;
  color: #ccc;
}

/* Hover neon aktif */
.contact-box:hover {
  border-color: var(--neon-color);
  box-shadow: 0 0 25px var(--neon-color),
              0 0 50px var(--neon-color),
              0 0 80px var(--neon-color);
}

.contact-box:hover .contact-text span {
  animation: glitch 0.8s infinite;
  color: var(--neon-color);
  text-shadow: 0 0 5px var(--neon-color), 0 0 15px var(--neon-color);
}

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

.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: rippleAnim 0.6s linear;
  background: var(--neon-color);
  opacity: 0.7;
  pointer-events: none;
}

@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* Warna neon unik */
.github    { --neon-color: #00fff7; }
.linkedin  { --neon-color: #ff6f00; }
.instagram { --neon-color: #ff0099; }
.facebook  { --neon-color: #8a2be2; }
.whatsapp  { --neon-color: #7fff00; }
.line      { --neon-color: #ff1744; }
.email     { --neon-color: #ffe600; }

/* Animasi masuk/keluar */
.animate-in {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  transition: all 0.7s ease;
}
.animate-out {
  opacity: 0 !important;
  transform: translateY(50px) scale(0.9) !important;
  transition: all 0.5s ease;
}
/* Spark efek */
.contact-box::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 250%;   /* lebih gede */
  height: 250%;  /* lebih gede */
  background: radial-gradient(circle, var(--neon-color) 15%, transparent 16%);
  background-size: 25px 25px;   /* percikan jarak lebih lebar */
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  filter: blur(1px); /* biar glow */
}
.contact-box:hover::after {
  opacity: 0.5; /* lebih jelas */
  animation: spark-move 2s linear infinite;
}

/* ===========================================
   🌤 LIGHT MODE FIX FOR CONTACT PAGE TITLES
   =========================================== */
/* =======================================================
   🌤 UNIVERSAL LIGHT MODE FIX (tanpa ubah JS/HTML)
   ======================================================= */

/* Jika bukan dark mode (berarti light mode aktif) */
body:not(.dark-mode) h1 {
  color: #000 !important;
  text-shadow:
    0 0 8px #fff,
    0 0 16px #fff,
    0 0 25px rgba(255,255,255,0.8) !important;
  animation: none !important;
}

body:not(.dark-mode) p {
  color: #333 !important;
  text-shadow:
    0 0 6px #fff,
    0 0 12px rgba(255,255,255,0.7) !important;
}



/* === MOBILE CENTER FIX FOR CONTACT BOX === */
@media (max-width: 768px) {
  .contact-box {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  .contact-text {
    align-items: center !important;
    text-align: center !important;
  }

  .contact-text span,
  .contact-text small {
    display: block;
    width: 100%;
    text-align: center;
  }

  /* biar ikon juga ikut center */
  .contact-box img {
    margin: 0 auto;
    display: block;
  }
}


@keyframes spark-move {
  from { transform: translate(0, 0); }
  to   { transform: translate(25px, 25px); } /* percikan jalan lebih jauh */
}
/* Responsive Contact Box - HP lebih rapi */

/* === MOBILE THEME TOGGLE === */
@media (max-width: 768px) {
  /* Sembunyikan label text */
  .toggle-slider .label-text {
    display: none !important;
  }

  /* Sembunyikan slider background */
  .toggle-slider {
    background: none !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    padding: 0;
  }

  /* Knob jadi tombol bulat */
  .toggle-slider .knob {
    position: static !important;
    transform: none !important;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  /* === Dark Mode Knob === */
  body.dark-mode .toggle-slider .knob {
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid #0ff;
    box-shadow: 0 0 10px #0ff;
  }
  body.dark-mode .toggle-slider .knob span.icon {
    color: #0ff;
  }

  /* === Light Mode Knob === */
  body:not(.dark-mode) .toggle-slider .knob {
    background: #fff;
    border: 2px solid #000;
    box-shadow: 0 0 10px #000;
  }
  body:not(.dark-mode) .toggle-slider .knob span.icon {
    color: #000;
  }

  /* Hover effect */
  .toggle-slider .knob:hover {
    transform: scale(1.1);
  }
}


@media (max-width: 768px) {
  .contact-box {
    width: 90%;          /* biar gak mepet kiri-kanan */
    max-width: 400px;    /* biar kotak ga terlalu besar */
    margin: 0 auto;      /* center horizontal */
    height: auto;
    padding: 20px;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 15px;
  }

  .contact-box img {
    width: 48px;
    height: 48px;
  }

  .contact-text span {
    font-size: 18px;
  }
  .contact-text small {
    font-size: 13px;
  }
}