/* === Gaya Umum === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}



/* === Navbar === */
header {
  background-color: #0f172a; /* lebih gelap dari body */
  padding: 1rem 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  position: sticky;
  top: 0;
  z-index: 10;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  color: #60a5fa; /* biru muda elegan */
  font-weight: 700;
  letter-spacing: 1px;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.nav-links a {
  text-decoration: none;
  color: #e5e7eb;
  font-weight: 500;
  transition: color 0.3s;
}

.nav-links a:hover {
  color: #60a5fa;
}

/* === Reset dasar === */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* === Hero Section === */
/* === Hero Section === */
.hero {
  width: 100%;
  min-height: 100vh;
  padding-top: 140px;    /* ← FIX yang mengatasi efek naik */
  padding-bottom: 60px;  /* biar orbit tidak mentok bawah */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* ← JANGAN center */
  align-items: center;
  text-align: center;
  background-color: #0a0f24;
  position: relative;
  overflow: visible;
  
}


/* === Orbit Container (lingkaran utama) === */
.orbit-container {
  position: relative;
  width: 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
   z-index: 1;
}

.profile-pic {
  position: absolute;
  top: 56%;
  left: 56%;
  width: 290px;
  height: 290px;
  border-radius: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: 5;
  box-shadow: 0 0 30px #8a63ff;
}

.orbit-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 291px;
  height: 291px;
  border-radius: 50%;
  border: 15px solid #8a63ff;
  box-shadow: 0 0 40px #8a63ff;
  z-index: 10;
  
}

.orbit {
  position: absolute;
  border-radius: 50%;
  z-index: 15;
}

/* ===== ORNAMEN BINTANG TAMBAHAN DI BACKGROUND ===== */

.star-ornament {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.star-ornament::before {
  content: "";
  position: absolute;
  width: 3px;
  height: 3px;
  background: white;
  border-radius: 50%;
  opacity: 0.8;

  /* 150+ BINTANG MENYEBAR */
  box-shadow:
    /* KIRI (pakai nilai negatif) */
    -20px 40px white,
    -80px 120px white,
    -150px 300px white,
    -250px 200px white,
    -300px 450px white,
    -380px 170px white,
    -450px 330px white,
    -520px 90px white,
    -590px 260px white,
    -650px 410px white,
    -720px 140px white,
    -820px 360px white,
    -900px 220px white,
    -1000px 500px white,
    -1100px 120px white,
    -1300px 300px white,
    -1500px 450px white,

    /* TENGAH & KANAN */
    10px 20px white,
    50px 80px white,
    90px 150px white,
    130px 40px white,
    170px 200px white,
    260px 300px white,
    380px 90px white,
    420px 350px white,
    540px 300px white,
    700px 330px white,
    820px 430px white,
    1000px 200px white,
    1400px 380px white,
    1800px 360px white;


  animation: twinkle2 9s ease-in-out infinite alternate;
}

@keyframes twinkle2 {
  0% { opacity: .3; transform: scale(.9); }
  100% { opacity: 1; transform: scale(1.1); }
}


/* Orbit kecil berputar */
.orbit {
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #0b0428;
  box-shadow: 0 0 15px 5px rgba(69, 40, 238, 0.6);
  animation: rotate 6s linear infinite;
}
.orbit1 { animation-delay: 0s; }
.orbit2 { animation-delay: 2s; }
.orbit3 { animation-delay: 4s; }

@keyframes rotate {
  from { transform: rotate(0deg) translateX(130px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(130px) rotate(-360deg); }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow:
      0 0 20px rgba(255, 192, 203, 0.3),
      0 0 40px rgba(255, 192, 203, 0.2),
      0 0 70px rgba(255, 192, 203, 0.1);
  }
  50% {
    box-shadow:
      0 0 40px rgba(255, 192, 203, 0.5),
      0 0 80px rgba(255, 192, 203, 0.4),
      0 0 120px rgba(255, 192, 203, 0.3);
  }
}

/* Text Hero */
.hero-text {
  margin-top: 90px;
  text-align: center;
}

.hero-text h2 {
  font-size: 2.4rem;
  color: #ffffff;
  font-weight: 700;
}

.hero-text span {
  color: #fcfcfc;
}

.hero-text p {
  color: #cfcfcf;
  max-width: 500px;
  margin: 10px auto 0;
  line-height: 1.6;
}

/* Tombol CTA */
#cta {
  margin-top: 59px;
  padding: 12px 30px;
  border: none;
  border-radius: 30px;
  background: linear-gradient(135deg, #2563eb, #100526);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
  box-shadow: 0 0 20px rgba(193, 58, 242, 0.6);
}

#cta:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(242, 58, 136, 0.8);
}


/* === Tentang Saya dengan animasi mengetik === */
.about {
  background: #111827;
  text-align: center;
  color: #fff;
  padding: 100px 10%;
}

.about h2 {
  font-size: 2rem;
  color: #8ec5fc;
  margin-bottom: 20px;
}

#typing-text {
  display: inline-block;
  font-size: 1rem;
  color: #f4f4f4;
  border-right: 2px solid #8ec5fc;
  white-space: pre-line; /* biar bisa ganti baris */
  line-height: 1.8;
  animation: caret 0.8s infinite;
  text-align: center;
  max-width: 800px;
}

@keyframes caret {
  50% { border-color: transparent; }
}


.education {
  background: #111827;
  color: #fff;
  text-align: center;
  padding: 100px 10%;
}

.education h2 {
  font-size: 2rem;
  color: #8ec5fc;
  margin-bottom: 40px;
}

.edu-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 20px;
}

/* bola biru — sejajar persis dengan garis */
.highlight-ball {
  position: absolute;
  top: 80px; /* posisi vertikal di tengah garis */
  left: 25%;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, rgba(142,197,252,1) 0%, rgba(7, 128, 234, 0.6) 70%);
  border-radius: 50%;
  box-shadow: 0 0 25px 10px rgba(153, 196, 238, 0.6);
  transform: translate(-50%, -50%);
  transition: left 0.8s ease;
  z-index: 0; /* di belakang teks tapi di atas garis */
  pointer-events: none;
}

/* kartu */
.edu-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 25px 10px;
  width: 320px;
  transition: 0.3s;
  cursor: pointer;
  position: relative;
}

.edu-card:hover {
  background: rgba(255, 192, 203, 0.12);
  transform: translateY(-3px);
}

.edu-card h3 {
  color: #fff;
  font-size: 1.2rem;
  margin-bottom: 6px;
}

.edu-year {
  color: #8ec5fc;
  font-size: 0.95rem;
  margin-bottom: 10px;
}

/* garis pembatas */
.divider {
  width: 100%;
  height: 1.7px;
  background: rgba(255, 255, 255, 0.3);
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}

/* === Pengalaman === */
.experience {
  background: #111827;
  color: #fff;
  text-align: center;
  padding: 80px 10%;
}

.experience h2 {
  font-size: 2rem;
  color: #8ec5fc;
  margin-bottom: 30px;
}

.exp-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.exp-box {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
  max-width: 600px;
  text-align: left;
  transition: 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.exp-box:hover {
  background: rgba(255, 192, 203, 0.15);
  transform: translateY(-3px);
}


/* === Work Experience Section === */
.work {
  background: #111827;
  padding: 5rem 2rem;
  text-align: center;
  color: #e5e7eb;
  position: relative;
  overflow: hidden;
}

.work h2 {
  color: #60a5fa;
  font-size: 2rem;
  margin-bottom: 3rem;
  text-shadow: 0 0 10px #111827;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}
.project-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.tech-logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.work-card {
  background: #4f4ddfe6;
  border: 1px solid rgba(20, 15, 71, 0.3);
  border-radius: 20px;
    padding: 3rem 1rem;
  transition: all 0.4s ease;
  box-shadow: 0 0 25px rgba(2, 0, 9, 0.15);
  position: relative;
  
}

.work-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 40px rgba(28, 24, 112, 0.4);
}

.work-card img {
  width: 159px;
  height: 90px;
  margin-bottom: 1rem;
  filter: drop-shadow(0 0 6px #645f72);
  
}
/* Slider container */
.work-slider {
  width: 100%;
  height: 110px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 1rem;
}

/* Images inside slider */
.work-slider img {
  width: 159px;
  height: 200;
  position: absolute;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  filter: drop-shadow(0 0 6px #645f72);
}

/* Image that is shown */
.work-slider img.active {
  opacity: 1;
}

.draggable {
  cursor: grab;
  position: relative;
}

.draggable:active {
  cursor: grabbing;
}

.work-card h3 {
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.work-card p {
  color: #d1d5db;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.btn-small {
  display: inline-block;
  background: #111827;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  text-decoration: none;
  transition: 0.3s;
}

.btn-small:hover {
  transform: scale(1.05);
  box-shadow: 0 0 10px #0f0528;
}

/* Footer text inside Work section */
.work-footer {
  margin-top: 4rem;
}

.work-footer p {
  color: #cbd5e1;
  font-size: 1rem;
  margin-bottom: 1rem;
}

.work-footer .highlight {
  color: #a78bfa;
  font-weight: 600;
}ubah dari code ini

.figma-logo {
    width: 32px;
    cursor: pointer;
    transition: 0.2s;
}

.figma-logo {
  width: 35px !important;
  height: auto !important;
  display: block;
  margin: 10px auto 0;
}
.figma-logo:hover {
    transform: scale(1.1);
    opacity: 0.85;
}

/* Tooltip */
.figma-link {
    position: relative;
    display: inline-block;
    position: absolute;
  top: 10px;
  left: 10px;
  z-index: 20; /* biar di atas gambar slider */

}

.figma-link:hover::after {
    content: "Lihat Proyek di Figma";
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.75);
    color: #fff;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
}



/* === Skills Section (Glowing Style) === */
.skills {
  text-align: center;
  padding: 5rem 2rem 8rem;
  color: #e5e7eb;
  position: relative;
  overflow: hidden;
}

.skills h2 {
  font-size: 1.4rem;
  font-weight: 500;
  color: #cbd5e1;
  margin-bottom: 0.5rem;
}

.skills .highlight {
  color: #a78bfa; /* ungu neon */
  font-weight: 600;
}

.skills p {
  font-size: 0.95rem;
  color: #9ca3af;
  margin-bottom: 2.5rem;
}

.skills-icons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 4rem;
}

.skills-icons img {
  width: 45px;
  height: 45px;
  filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.6));
  transition: transform 0.3s, filter 0.3s;
}

.skills-icons img:hover {
  transform: translateY(-5px) scale(1.1);
  filter: drop-shadow(0 0 12px rgba(167, 139, 250, 0.9));
}

.glow-orb {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(94, 69, 117, 0.9), rgba(88, 28, 135, 0.4));
  box-shadow: 0 0 40px 20px rgba(18, 2, 58, 0.3);
  animation: pulse 3s infinite ease-in-out;
}

.orb-center {
  font-size: 3rem;
  color: white;
  font-weight: 700;
  line-height: 220px;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 40px 15px rgba(147, 51, 234, 0.3);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 60px 25px rgba(167, 139, 250, 0.6);
    transform: scale(1.05);
  }
}


.contact {
  background: #111827;
  text-align: center;
  padding: 80px 10%;
  color: #fff;
}

.contact h2 {
  color: #8ec5fc;
  margin-bottom: 10px;
}

.contact p {
  margin-bottom: 25px;
  color: #ccc;
}

.contact-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.contact-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.1);
  padding: 10px 18px;
  border-radius: 30px;
  transition: all 0.3s ease;
  font-weight: 500;
  color: #fff;
  backdrop-filter: blur(5px);
}

.contact-btn img {
  width: 22px;
  height: 22px;
}

.contact-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(255, 182, 193, 0.5);
}

/* warna khas tiap platform */
.whatsapp:hover { background-color: #25d366; }
.linkedin:hover { background-color: #0077b5; }
.email:hover { background-color: #db4437; }
.instagram:hover { background-color: #e4405f; }

form button {
  background-color: #2563eb;
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  cursor: pointer;
  transition: 0.3s;
  font-weight: 600;
}

form button:hover {
  background-color: #60a5fa;
  color: #0a0f24;
}

/* === Footer === */
footer {
  background-color: #0f172a;
  text-align: center;
  color: #9ca3af;
  padding: 1rem;
  font-size: 0.9rem;
  border-top: 1px solid #1e3a8a;
}
.corner-beaver {
  width: 150px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;

  animation:
    breathe 3s ease-in-out infinite,
    float 4s ease-in-out infinite,
    wiggle 2.5s ease-in-out infinite,
    blink 5s ease-in-out infinite;
  transform-origin: center bottom;
}

/* Napas naik turun */
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

/* Loncat pelan */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Goyang kepala */
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(2deg); }
}

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



.footer-container {
  max-width: 900px;
  margin: auto;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin-top: 15px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.footer-links a {
  color: #9bb0ff;
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s;
}

.footer-links a:hover {
  color: #ffffff;
}

/* =============================
   📱 RESPONSIVE FIX FOR MOBILE
   ============================= */

@media (max-width: 600px) {

  /* Navbar */
  nav {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .nav-links {
    gap: 1rem;
  }


  /* Hero section */
  .orbit-container {
    width: 180px !important;
    height: 180px !important;
  }

  .profile-pic {
    width: 190px !important;
    height: 190px !important;
    top: 50% !important;
    left: 50% !important;
  }

  .orbit-border {
    width: 200px !important;
    height: 200px !important;
    border-width: 8px !important;
  }

  .hero-text h2 {
    font-size: 1.6rem !important;
  }

  #cta {
    margin-top: 30px;
    padding: 10px 20px;
    font-size: 0.9rem;
  }


  /* Education – stack vertically */
  .edu-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .highlight-ball {
    display: none; /* bola highlight menyebabkan overflow */
  }


  /* Work Grid – 1 kolom saja */
  .work-grid {
    grid-template-columns: 1fr !important;
  }

  .work-card {
    width: 100%;
    padding: 2rem 1rem;
  }

  .work-slider img {
    width: 130px !important;
    height: auto !important;
  }

  /* Figma logo reposition */
  .figma-link {
    top: 5px;
    left: 5px;
  }

  .figma-logo {
    width: 28px !important;
  }

  .figma-link:hover::after {
    font-size: 10px;
    bottom: -25px;
  }


  /* Skills */
  .skills-icons img {
    width: 38px !important;
    height: 38px !important;
  }

  /* Contact buttons */
  .contact-buttons {
    flex-direction: column;
    gap: 15px;
  }


  /* Footer */
  footer {
    font-size: 0.8rem;
    padding: 15px;
  }

  .corner-beaver {
    width: 90px !important;
    bottom: 10px;
    right: 10px;
  }
}