/* RESET */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Orbitron', sans-serif;
  background-color: #101830;
  background-image:
    repeating-linear-gradient(
      to right,
      rgba(0, 255, 180, 0.12),
      rgba(0, 255, 180, 0.12) 1px,
      transparent 1px,
      transparent 30px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(0, 255, 180, 0.12),
      rgba(0, 255, 180, 0.12) 1px,
      transparent 1px,
      transparent 30px
    );
  background-size: 30px 30px;
  animation:
    matrixScroll 60s linear infinite,
    matrixColorShift 45s ease-in-out infinite,
    bgColorPulse 45s ease-in-out infinite;
  color: #e0e0e0;
  overflow-x: hidden;
  height: 100vh;
  position: relative;
}

/* Kotak kursor */
.cursor-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  background-color: rgba(0, 255, 255, 0.1);
  outline: 1px solid rgba(0, 255, 255, 0.2);
  pointer-events: none;
  z-index: 9999;
}

/* Background pulse smooth */
@keyframes bgColorPulse {
  0%, 100% {
    background-color: #101830;
  }
  50% {
    background-color: #162540; /* warna transisi lebih soft */
  }
}

/* Scroll animasi tetap */
@keyframes matrixScroll {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 400px 400px, 400px 400px; }
}

/* Warna grid transisi lebih lembut */
@keyframes matrixColorShift {
  0%, 100% {
    background-image:
      repeating-linear-gradient(
        to right,
        rgba(0, 255, 180, 0.12),
        rgba(0, 255, 180, 0.12) 1px,
        transparent 1px,
        transparent 30px
      ),
      repeating-linear-gradient(
        to bottom,
        rgba(0, 255, 180, 0.12),
        rgba(0, 255, 180, 0.12) 1px,
        transparent 1px,
        transparent 30px
      );
  }
  50% {
    background-image:
      repeating-linear-gradient(
        to right,
        rgba(0, 255, 200, 0.18),
        rgba(0, 255, 200, 0.18) 1px,
        transparent 1px,
        transparent 30px
      ),
      repeating-linear-gradient(
        to bottom,
        rgba(0, 255, 200, 0.18),
        rgba(0, 255, 200, 0.18) 1px,
        transparent 1px,
        transparent 30px
      );
  }
}

/* HEADER */
header { display: flex; justify-content: space-between; align-items: center; padding: 20px 40px; background: #0e1122; border-bottom: 2px solid #00ffff60; position: sticky; top: 0; z-index: 100; }
/* Logo Container */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #00ffdc;
  font-family: 'Orbitron', sans-serif;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #0e1122;
  border-bottom: 2px solid #00ffff60;
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
  z-index: 9999;
}

header.scrolled {
  background: rgba(14, 17, 34, 0.6); /* transparan */
  backdrop-filter: blur(6px); /* efek blur futuristik */
  border-bottom: 2px solid rgba(0,255,220,0.4);
}


/* E besar */
.logo-icon {
  font-size: 3rem; /* ukuran E besar */
  font-weight: bold;
  line-height: 1;
}

/* Teks di samping E */
.logo-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

/* Judul atas */
.logo-title {
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
}

/* Subjudul bawah */
.logo-subtitle {
  font-size: 0.8rem;
  text-transform: uppercase;
  font-weight: 900;
  color: #0e1122; /* isi huruf = warna header */
  -webkit-text-stroke: 0.5px #00ffdc; /* outline = cyan neon */
  text-shadow: 0 0 6px rgba(0,255,220,0.7), 0 0 12px rgba(0,255,220,0.5);
  letter-spacing: 1px;
}

nav { display: flex; gap: 20px; }
nav a { color: #fff; text-decoration: none; padding: 8px 16px; transition: .3s; }
nav a:hover { border-bottom: 2px solid #00ffff; color: #00ffff; }

/* HERO */
.hero { display: flex; justify-content: space-between; align-items: flex-start; padding: 40px 40px 60px; padding-top: 120px;}
.hero-text { max-width: 50%; }
.hero-text h1 { font-size: 2.5rem; color: #00ffff; text-shadow: 0 0 5px #00ffff; margin-bottom: 20px; }
.hero-text p { font-size: 1rem; color: #ccc; margin-bottom: 20px; }
.tags { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.tags a { background: #1a1f3c; color: #00ffff; padding: 6px 12px; border-radius: 6px; text-decoration: none; border: 1px solid #00ffff40; transition: .3s; }
.tags a:hover { background: #00ffff20; color: #ffff00; border-color: #00ffff; }
.socials { display: flex; gap: 16px; }
.socials a { background: #1a1f3c; padding: 8px 12px; border-radius: 8px; }
.socials i { font-size: 1.4rem; color: #00ffff; }
.socials a:hover i { color: #ffff00; }

/* ID CARD */
/* Container tetap 3D */
.id-card-container {
  perspective: 1600px;
  margin-right: 80px; /* Tambah jarak dari sisi kanan */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Card lebih tebal & 3D */
.id-card {
  width: 200px;
  height: 280px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
  cursor: grab;
  border-radius: 12px;
  box-shadow: 
    0 8px 15px rgba(0,0,0,0.6),
    inset 0 0 20px rgba(0,255,220,0.2);
}

/* Sisi ketebalan */
.id-card::after {
  content: '';
  position: absolute;
  top: 0;
  width: 6px;
  height: 100%;
  border-radius: 0 12px 12px 0;
  transform-style: preserve-3d;
  z-index: 1;
}

/* Depan dan belakang */
.id-card .face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: 2;
}

.id-card .face.front {
  transform: rotateY(0deg);
  z-index: 3;
}

.id-card .face.back {
  transform: rotateY(180deg);
}

/* Efek flip di container utama (trigger manual atau via JS hover) */
.id-card-container:hover .id-card {
  transform: rotateY(180deg);
}


/* ABOUT */
.about-section { display: flex; justify-content: space-between; align-items: center; padding: 60px 40px; gap: 40px; }
.about-left iframe { width: 400px; height: 400px; border: none; }
.about-right h2 { font-size: 1.5rem; color: #fff; margin-bottom: 10px; font-family: 'Cascadia Code', monospace; }
.about-right h1 { font-size: 2.5rem; color: #00ffff; margin-bottom: 20px; font-family: 'Cascadia Code', monospace; }
.about-right p { color: #ccc; margin-bottom: 20px; line-height: 1.6; font-family: 'Cascadia Code', monospace; }
.download-btn { display: inline-block; padding: 10px 20px; background: #00ffdc; color: #000; border-radius: 8px; text-decoration: none; font-weight: bold; transition: 0.3s; }
.download-btn:hover { background: #00c8a8; }

/* PROJECTS */
.projects-section { padding: 60px 40px; text-align: center; }
.projects-section h2 { font-size: 2rem; margin-bottom: 40px; }
.portfolio-title { color: #00ffdc; text-shadow: 0 0 10px #00ffdc; }
.showcase-title { color: #fff; text-shadow: 0 0 10px #fff; }
.project-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.project-item {
  width: 242px;
  height: 175px;
  background: #1a1f3c;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,255,255,.3);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform .3s;
}
.project-item:hover {
  transform: scale(1.02);
}

/* Gambar isi box (crop biar full) */
.project-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* Teks overlay di bawah (tidak mengubah ukuran box) */
.project-item p {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin: 0;
  padding: 10px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 1rem;
  text-align: center;
}

/* MODAL */
.modal { position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.8); display:flex; align-items:center; justify-content:center; z-index:1000; }
.modal-content { position:relative; }
.modal-content img { max-width:90vw; max-height:80vh; border-radius:8px; }
.close-btn { position:absolute; top:10px; right:20px; font-size:2rem; color:#fff; cursor:pointer; }

/* Contact Section */
.contact-section {
  padding: 60px 40px;
}

/* Bungkus judul biar full width */
.contact-title-wrapper {
  width: 100%;
  text-align: center;
  margin-bottom: 40px;
}
.contact-title {
  font-size: 2.5rem;
  display: inline-block;
}
.hubungi-title {
  color: #00ffdc;
  text-shadow: 0 0 10px #00ffdc;
}
.kami-title {
  color: #fff;
  text-shadow: 0 0 10px #fff;
}

/* Container box */
.contact-container {
  display: flex;
  gap: 40px;
  justify-content: center;
  margin-bottom: 40px;
}

/* Box Form Kirim Pesan */
.contact-form {
  flex: 1;
  background: #1a1f3c;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,255,255,.2);
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: none;
  border-radius: 6px;
  background: #0e1122;
  color: #fff;
  font-size: 1rem;
}
.contact-form textarea {
  min-height: 120px;
  resize: none;
}
.contact-form button {
  width: 100%;
  padding: 10px;
  background: #00ffdc;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}
.contact-form button:hover {
  background: #00c8a8;
}

/* Box Connect With Me */
.contact-social {
  flex: 1;
  background: #1a1f3c;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,255,255,.2);
}
.contact-social h3 {
  text-align: center;
  font-size: 1.2rem;
  margin-bottom: 20px;
}

/* Tombol Sosial Media */
.social-btn {
  display: block;
  padding: 10px;
  margin: 10px auto;
  border-radius: 6px;
  text-align: center;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
  font-size: 1rem;
}
.social-btn i {
  margin-right: 8px;
}

/* Warna sesuai brand */
.social-btn.whatsapp { background: #25D366; }
.social-btn.whatsapp:hover { background: #1ebe57; }
.social-btn.facebook { background: #1877F2; }
.social-btn.facebook:hover { background: #0d5dc1; }
.social-btn.instagram { background: #E4405F; }
.social-btn.instagram:hover { background: #c13584; }

/* Map Box */
.map-box iframe {
  width: 100%;
  height: 300px;
  border: none;
  border-radius: 8px;
}

/* FOOTER */
footer { text-align:center; padding:20px; background:#0e1122; border-top:2px solid #00ffff60; color:#ccc; }

/* Shine Animation */
.shine-text { position: relative; display: inline-block; background: linear-gradient(90deg,#fff,#00ffdc,#fff); background-size: 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shine 3s linear infinite; }
@keyframes shine { 0%{background-position:0%} 100%{background-position:200%} }

/* Tabs Portofolio */
.portfolio-tabs {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}
.tab-btn {
  background: #1a1f3c;
  color: #00ffdc;
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid #00ffff40;
  cursor: pointer;
}
.tab-btn.active {
  background: #00ffdc;
  color: #000;
}
.portfolio-content { display: none; }
.portfolio-content.active { display: block; }

/* PRELOADER */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0e1122;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  transition: opacity 0.5s ease;
}

#loading-text {
  color: #00ffdc;
  font-size: 1.2rem;
  margin-top: 20px;
  font-family: 'Orbitron', sans-serif;
}

.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.loader .circle {
  width: 20px;
  height: 20px;
  background: #00ffdc;
  border-radius: 50%;
  animation: bounce 0.6s infinite alternate;
  box-shadow: 0 0 10px #00ffdc, 0 0 20px #00ffdc55;
}
.loader .circle:nth-child(2) { animation-delay: 0.2s; }
.loader .circle:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
  to {
    transform: translateY(-15px);
    background: #00c8a8;
  }
}

#preloader.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Tambahkan background grid neon animasi di belakang preloader */
#preloader::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 200%;
  height: 200%;
  background:
    repeating-linear-gradient(0deg, rgba(0,255,220,0.1) 0 2px, transparent 2px 40px),
    repeating-linear-gradient(90deg, rgba(0,255,220,0.1) 0 2px, transparent 2px 40px);
  transform: translateY(0);
  animation: moveGrid 8s linear infinite;
  z-index: 0;
}

@keyframes moveGrid {
  from { transform: translateY(0); }
  to { transform: translateY(-40px); }
}

/* Pastikan loader di depan grid */
#preloader .loader,
#preloader p {
  position: relative;
  z-index: 1;
}