html {
  scroll-behavior: smooth;
}

/* Kustomisasi Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #0a0a0a; 
}

::-webkit-scrollbar-thumb {
  background: #2a1b42; /* Ungu gelap */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a855f7; /* Ungu terang Tailwind saat di-hover */
}

/* Scrollbar untuk Light Mode */
body.light ::-webkit-scrollbar-track {
  background: #f5f5f5;
}
body.light ::-webkit-scrollbar-thumb {
  background: #d8b4fe;
}
body.light ::-webkit-scrollbar-thumb:hover {
  background: #9333ea;
}

/* Pastikan body punya posisi relative */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: #000; /* Hitam pekat dulu buat ngetes */
  position: relative;
  overflow-x: hidden;
}

/* Kita pakai id atau class pembungkus kalau ::before masih bandel */
.bg-grid-animate {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* Kita gabungkan Grid dengan Radial Gradient agar tetap ada depth-nya */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    radial-gradient(circle at top, rgba(10, 15, 28, 0.5), #000); /* Gelap di bawah */
  background-size:
    50px 50px,
    50px 50px,
    100% 100%;
  z-index: -1;
  animation: bgGridMove 10s linear infinite;
  pointer-events: none;
}

@keyframes bgGridMove {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 50px;
  }
}

/* HERO GRID */
/* Update di style.css kamu */
.hero-bg {
  background-color: transparent; /* Ubah dari #0a0f1c jadi transparent */
  background-image: none; /* Hapus gradient statisnya */
  transform: perspective(500px) rotateX(8deg);
}

/* Efek saat card sedang di-drag */
#card-wrapper.dragging {
  cursor: grabbing;
}

#card-wrapper.dragging .id-card {
  transition: none; /* Matikan efek hover bawaan saat sedang ditarik */
}

/* FOTO */
.photo-box {
  width: 220px;
  height: 220px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #2a2a40;
  background: #111827;
}

/* BUTTON */
.btn-primary {
  padding: 12px 25px;
  border-radius: 999px;
  border: 2px solid #a855f7;
  transition: 0.3s;
}

.btn-secondary {
  border: 2px solid #a855f7;
  transition: 0.3s;
}

.btn-primary:hover {
  background: #a855f7;
  box-shadow: 0 0 15px #a855f7;
}

.btn-outline {
  padding: 12px 25px;
  border-radius: 999px;
  border: 2px solid #555;
}

.btn-outline:hover {
  border-color: #6707c1;
}

/* ABOUT */
.glow-box {
  box-shadow: 0 0 60px rgba(168, 85, 247, 0.15);
}

/* LANYARD */
.lanyard {
  position: absolute;
  top: -60px;
  width: 4px;
  height: 80px;
  background: linear-gradient(to bottom, #000, #666);
}

/* CARD */
.id-card {
  background: #0b0b0f;
  padding: 20px;
  border-radius: 20px;
  width: 200px;
  text-align: center;
  border: 1px solid rgba(168, 85, 247, 0.3);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.2);
  transition: 0.4s;
}

.id-card:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 0 30px rgba(168, 85, 247, 0.5);
}

/* SKILLS */
.skill-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  background: #111;
  border: 1px solid #222;
  padding: 20px;
  border-radius: 14px;
  transition: 0.3s;
}

.skill-card:hover {
  background: #ffffff;
  color: rgb(0, 0, 0);
  border-color: #ffffff;
  box-shadow: 0 0 15px rgb(169, 85, 247);
}

.skill-card iconify-icon {
  transition: 0.3s;
}

.skill-card:hover iconify-icon {
  transform: scale(1.2);
}

.project-card {
  background: #0d0d12;
  border: 1px solid #222;
  padding: 20px;
  border-radius: 18px;
  transition: 0.3s;
}

.project-card:hover {
  transform: translateY(-8px);
  border-color: #a855f7;
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.3);
}

/* PROJECT IMAGE HOVER EFFECT */
.project-image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 16px; 
}

.project-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-card:hover .project-image-wrapper img {
  transform: scale(1.1);
}

.project-overlay {
  position: absolute;
  inset: 0;
  background: rgba(168, 85, 247, 0.4); 
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.5s ease;
}

.project-card:hover .project-overlay {
  opacity: 1;
}

.project-overlay iconify-icon {
  font-size: 48px;
  color: white;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.5s ease 0.1s;
}

.project-card:hover .project-overlay iconify-icon {
  transform: translateY(0);
  opacity: 1;
}

/* BUTTON */
.project-btn {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #a855f7;
}

.project-btn:hover {
  background: #a855f7;
}

.project-btn-outline {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #444;
}

.project-btn-outline:hover {
  border-color: #a855f7;
}

.contact-input {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  background: #0d0d12;
  border: 1px solid #222;
  color: white;
  outline: none;
  transition: 0.3s;
}

.contact-input:focus {
  border-color: #a855f7;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
}

.social-icon {
  font-size: 32px;
  padding: 14px;
  border-radius: 50%;
  background: #0d0d12;
  border: 1px solid #222;
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hover effect */
.social-icon:hover {
  transform: translateY(-5px) scale(1.1);
  border-color: #a855f7;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
}

/* Icon warna hover */
.social-icon:hover iconify-icon {
  color: #a855f7;
}

.reveal {
  opacity: 0;
  transform: translateY(60px);
  transition: 0.8s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.cursor {
  animation: blink 1s infinite;
}

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

/* =========================================
   ✨ LIGHT MODE AESTHETIC (CLEAN & MODERN) ✨
   ========================================= */

body.light {
  background: #fafafa;
  color: #111827;
}

/* Grid Background - Soft & Premium */
body.light .bg-grid-animate {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    radial-gradient(circle at top, #ffffff 0%, #f3f4f6 100%);
  background-color: transparent;
}

/* Navbar - Glassmorphism Halus */
body.light nav {
  background: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
}

body.light nav h1 {
  color: #111827;
}

/* Link Navbar Hover Style Baru */
.nav-link {
  padding: 8px 16px;
  border-radius: 999px;
  transition: all 0.3s ease;
  border: 1px solid transparent; /* Supaya layout tidak geser saat border muncul */
}

.nav-link:hover {
  background: #a855f7;
  color: white;
  border-color: #a855f7;
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.6);
}

/* Teks - Memaksa warna Tailwind berubah di Light Mode */
body.light p,
body.light .text-gray-300,
body.light .text-gray-400,
body.light .text-gray-500 {
  color: #4b5563 !important;
}

/* Foto Box & Glow (Lebih elegan) */
body.light .photo-box {
  background: #ffffff;
  border: 4px solid #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

body.light .glow-box {
  box-shadow: 0 0 60px rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.2);
}

/* Semua Card (Skills, Projects, ID Card) - Soft Shadow */
body.light .skill-card,
body.light .project-card,
body.light .id-card,
body.light .social-icon {
  background: #ffffff;
  color: #111827;
  border: 1px solid rgba(168, 85, 247, 0.15); /* Border ungu sangat tipis */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Efek Hover Card - Melayang dengan bayangan ungu */
body.light .skill-card:hover,
body.light .project-card:hover,
body.light .id-card:hover,
body.light .social-icon:hover {
  transform: translateY(-6px);
  border-color: #a855f7;
  box-shadow: 0 12px 25px rgba(168, 85, 247, 0.15);
  background: #fafafa;
}

/* Input Form Contact */
body.light .contact-input {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #111827;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

body.light .contact-input:focus {
  border-color: #a855f7;
  box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.15); /* Ring ungu ala Tailwind */
  background: #ffffff;
}

/* Tombol Primary */
body.light .btn-primary {
  background: #ffffff;
  border: 2px solid #9333ea;
  color: #9333ea;
  font-weight: 600;
}

body.light .btn-primary:hover {
  background: #9333ea;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(147, 51, 234, 0.3);
  transform: translateY(-2px);
}

/* Tombol Outline (Project Demo/Code) */
body.light .project-btn-outline {
  border-color: #d1d5db;
  color: #4b5563;
}

body.light .project-btn-outline:hover {
  border-color: #a855f7;
  color: #9333ea;
  background: #f3e8ff;
}

body.light .skill-card:hover {
  background: #ffffff;
  color: rgb(255, 253, 253);
  border-color: #ffffff;
  box-shadow: 0 0 15px rgb(169, 85, 247);
}

/* Fix for specific dark backgrounds in light mode */
body.light .light-card-fix {
  background-color: #ffffff !important;
  border-color: rgba(168, 85, 247, 0.15) !important;
}

body.light .light-card-fix h3.text-white {
  color: #111827 !important;
}

/* Pastikan teks Github Activity tetap abu-abu di light mode */
body.light #github-container p,
body.light #github-container .text-gray-400 {
  color: #ffffff !important;
}

/* Mobile Menu saat Light Mode */
body.light #mobile-menu {
  background: rgba(255, 255, 255, 0.95);
}

body.light #hamburger {
  color: #111;
}

body.light .mobile-link {
  color: #111;
}

body.light .mobile-link:hover {
  color: #7c3aed;
}

/* =========================================
   ORBIT ANIMATION (HERO SECTION)
   ========================================= */

/* Animasi putar container utama searah jarum jam */
@keyframes spinOrbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Animasi putar ikon berlawanan arah jarum jam (biar logonya tetap tegak) */
@keyframes counterSpinOrbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

.animate-orbit {
  animation: spinOrbit 20s linear infinite;
}

/* Kelas untuk menghentikan animasi saat di-hover */
.pause-animate,
.pause-animate .orbit-icon {
  animation-play-state: paused !important;
}

/* Styling setiap bola ikon */
/* Styling setiap bola ikon */
.orbit-icon {
  position: absolute;
  top: -22px;  /* Geser ke atas supaya pas di tengah garis orbit */
  left: -22px; /* Geser ke kiri supaya pas di tengah garis orbit */
  width: 44px;
  height: 44px;
  background: #0d0d12;
  border: 1px solid rgba(168, 85, 247, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
}

/* Menambahkan animasi counter-spin ke setiap ikon. 
   Waktunya WAJIB sama dengan spinOrbit (20s) */
.animate-orbit .orbit-icon {
  animation: counterSpinOrbit 20s linear infinite;
}

.orbit-icon:hover {
  background: #1a1a2e;
  transform: scale(1.2);
  border-color: #a855f7;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.8);
  cursor: pointer;
}

/* Penyesuaian untuk Light Mode */
body.light .orbit-icon {
  background: #ffffff;
  border-color: rgba(168, 85, 247, 0.2);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* =========================================
   PROJECT DETAIL MODAL STYLING
   ========================================= */

/* Penyesuaian Light Mode untuk Project Modal */
body.light #project-modal-window {
  background: #ffffff;
  border-color: rgba(168, 85, 247, 0.15);
  color: #111827;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

body.light #project-modal-window h2,
body.light #project-modal-window h3,
body.light #project-modal-window h4.modal-tech-name {
  color: #111827 !important;
}

body.light #project-modal-window p,
body.light #project-modal-window .text-gray-300,
body.light #project-modal-window .text-gray-400,
body.light #project-modal-window p.modal-tech-role {
  color: #4b5563 !important;
}

body.light #close-project-modal {
  color: #4b5563;
}

body.light #close-project-modal:hover {
  color: #111827;
}

body.light #modal-project-code {
  color: #4b5563;
  border-color: #d1d5db;
}

body.light #modal-project-code:hover {
  border-color: #a855f7;
  color: #9333ea;
  background: #f3e8ff;
}

/* =========================================
   ANGRY CODER GAME STYLING
   ========================================= */

/* Canvas cursor styling */
#angry-canvas {
  touch-action: none;
}

/* Light Mode support for Angry Coder Game */
body.light #angry-game-window {
  background: #ffffff;
  border-color: rgba(168, 85, 247, 0.15);
  color: #111827;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

body.light #angry-game-window h2 {
  color: #111827 !important;
}

body.light #angry-game-window .text-gray-400,
body.light #angry-game-window .text-gray-300,
body.light #angry-game-window p {
  color: #4b5563 !important;
}

body.light #close-angry-game {
  color: #4b5563;
}

body.light #close-angry-game:hover {
  color: #111827;
}

body.light #angry-game-window .angry-canvas-container {
  background-color: #f9fafb !important;
}

body.light #angry-canvas {
  border-color: #d1d5db;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Power-ups styling */
.pw-btn.pw-active {
  border-color: #a855f7 !important;
  background-color: rgba(168, 85, 247, 0.15) !important;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
}

#pw-bulk.pw-active {
  border-color: #f43f5e !important;
  background-color: rgba(244, 63, 94, 0.15) !important;
  box-shadow: 0 0 10px rgba(244, 63, 94, 0.3);
}

#pw-over.pw-active {
  border-color: #06b6d4 !important;
  background-color: rgba(6, 182, 212, 0.15) !important;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.3);
}

#pw-multi.pw-active {
  border-color: #a855f7 !important;
  background-color: rgba(168, 85, 247, 0.15) !important;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.3);
}

#pw-bomb.pw-active {
  border-color: #f59e0b !important;
  background-color: rgba(245, 158, 11, 0.15) !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

body.light .pw-btn {
  background: #ffffff;
  color: #111827 !important;
  border-color: #d1d5db;
}

body.light .pw-btn:hover {
  background: #f9fafb;
}

body.light #pw-bulk.pw-active {
  border-color: #f43f5e !important;
  background-color: rgba(244, 63, 94, 0.1) !important;
}

body.light #pw-over.pw-active {
  border-color: #06b6d4 !important;
  background-color: rgba(6, 182, 212, 0.1) !important;
}

body.light #pw-multi.pw-active {
  border-color: #9333ea !important;
  background-color: rgba(147, 51, 234, 0.1) !important;
}

body.light #pw-bomb.pw-active {
  border-color: #d97706 !important;
  background-color: rgba(217, 119, 6, 0.1) !important;
}

#pw-kame.pw-active {
  border-color: #22d3ee !important;
  background-color: rgba(34, 211, 238, 0.15) !important;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.3);
}

body.light #pw-kame.pw-active {
  border-color: #06b6d4 !important;
  background-color: rgba(6, 182, 212, 0.1) !important;
}

/* Leaderboard list styles */
.leaderboard-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

body.light .leaderboard-row {
  background-color: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.05);
  color: #111827 !important;
}

.leaderboard-row.user-row {
  background-color: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.3);
}

body.light .leaderboard-row.user-row {
  background-color: rgba(147, 51, 234, 0.1);
  border-color: rgba(147, 51, 234, 0.2);
}