@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/*====================================
   Variabel CSS (Warna & Shadow)
   ====================================*/
:root {
  /* Mode Terang (Default) */
  --light-bg: #f0f2f5; /* Softer white/off-white background */
  --dark-text: #2c3e50; /* Darker, more serious text color */
  --primary-purple: #6a1b9a; /* Deeper, richer purple */
  --secondary-purple: #9c27b0; /* Slightly brighter, but still rich purple */
  --accent-glow: rgba(156, 39, 176, 0.4); /* Glow effect color */
  --light-gray-text: #7f8c8d; /* Muted gray for descriptions */
  --btn-secondary-bg: #e0e0e0; /* Softer gray for secondary button */
  --btn-secondary-hover-bg: #cecece;
  --shadow-subtle: 0px 5px 15px rgba(0, 0, 0, 0.08),
    0px 2px 5px rgba(0, 0, 0, 0.05); /* Multi-layer shadow */
  --shadow-strong: 0px 10px 30px rgba(0, 0, 0, 0.15),
    0px 5px 10px rgba(0, 0, 0, 0.08);
  --text: #000000; /* Umumnya untuk teks navigasi atau teks gelap lainnya */

  /* Mode Gelap - Definisi Awal (akan di-override saat .dark-mode aktif) */
  --dark-mode-bg: #1a202c; /* Background yang sangat gelap */
  --dark-mode-text: #e2e8f0; /* Teks terang untuk background gelap */
  --dark-mode-light-gray-text: #a0aec0; /* Abu-abu terang untuk deskripsi */
  --dark-mode-header-link: #cbd5e0; /* Warna link header di mode gelap */
  --dark-mode-project-card-bg: rgba(
    45,
    55,
    72,
    0.75
  ); /* Background kartu proyek gelap transparan */
  --dark-mode-project-card-border: 1px solid rgba(74, 85, 104, 0.5); /* Border kartu proyek gelap */
  --dark-mode-shadow-subtle: 0px 5px 15px rgba(0, 0, 0, 0.3),
    0px 2px 5px rgba(0, 0, 0, 0.2);
  --dark-mode-shadow-strong: 0px 10px 30px rgba(0, 0, 0, 0.4),
    0px 5px 10px rgba(0, 0, 0, 0.25);
  --dark-mode-btn-secondary-bg: #4a5568;
  --dark-mode-btn-secondary-hover-bg: #2d3748;

  /* Tambahan Variabel untuk Projects dan Modal */
  --filter-btn-bg: #eee;
  --filter-btn-text: #333;
  --filter-btn-active-bg: var(--primary-purple);
  --filter-btn-active-text: #fff;
  --modal-bg: #ffffff;
  --modal-text: var(--dark-text);
  --modal-tech-text: #888;
  --modal-close-btn: var(--dark-text);
  --modal-close-btn-hover: var(--primary-purple);
}

/*====================================
   Mode Gelap (Override Variabel)
   ====================================*/
body.dark-mode {
  --light-bg: var(--dark-mode-bg);
  --dark-text: var(--dark-mode-text);
  --light-gray-text: var(--dark-mode-light-gray-text);
  --btn-secondary-bg: var(--dark-mode-btn-secondary-bg);
  --btn-secondary-hover-bg: var(--dark-mode-btn-secondary-hover-bg);
  --shadow-subtle: var(--dark-mode-shadow-subtle);
  --shadow-strong: var(--dark-mode-shadow-strong);
  --text: var(
    --dark-mode-header-link
  ); /* Mengubah warna teks umum, seperti di navbar */

  /* Override variabel Projects dan Modal untuk Dark Mode */
  --filter-btn-bg: var(--dark-mode-btn-secondary-bg);
  --filter-btn-text: var(--dark-mode-text);
  --filter-btn-active-bg: var(--primary-purple);
  --filter-btn-active-text: #fff;
  --modal-bg: var(--dark-mode-bg);
  --modal-text: var(--dark-mode-text);
  --modal-tech-text: var(--dark-mode-light-gray-text);
  --modal-close-btn: var(--dark-mode-text);
  --modal-close-btn-hover: var(--secondary-purple);
}

/*====================================
   Styling Dasar & Global
   ====================================*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  background-color: var(--light-bg); /* Menggunakan variabel */
  color: var(--dark-text); /* Menggunakan variabel */
  line-height: 1.6;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease; /* Transisi untuk mode gelap */
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
  outline: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Menghilangkan efek focus dan active pada elemen yang dapat diklik */
button,
a,
input,
textarea,
select,
.summary,
[role="button"],
.hamburger-menu {
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent; /* Hilangkan efek biru di mobile Safari/Chrome */
  -webkit-box-shadow: none !important;
}

/*====================================
   Styling Page Container
   ====================================*/
.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

/*====================================
   Styling Header & Navbar
   ====================================*/
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  margin-bottom: 3rem;
  position: relative;
  z-index: 10;
}

.logo {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--dark-text); /* Menggunakan variabel */
  letter-spacing: -0.5px;
  font-family: "poppins", sans-serif;
  font-style: italic;
}

.warna {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  font-family: "poppins", sans-serif;
  font-style: italic;
  /* --- PERBAIKAN UNTUK GRADIENT TEKS --- */
  background-image: linear-gradient(90deg, #ff0095, #9c27b0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; /* Fallback */
  /* ------------------------------------- */
}

/* Wadah baru untuk elemen di sisi kanan header (nav, hamburger, social icons) */
.header-right-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem; /* Jarak antara elemen di sisi kanan header */
}

.nav ul {
  display: flex;
  gap: 3rem;
  font-weight: 500;
}

.nav ul li a {
  position: relative;
  padding-bottom: 0.5rem;
  color: var(--text); /* Menggunakan variabel */
  transition: color 0.3s ease, transform 0.3s ease;
  font-weight: 700;
}

.nav ul li a.active,
.nav ul li a:hover {
  color: var(--primary-purple); /* Tidak berubah di dark mode, tetap ungu */
  transform: translateY(-2px);
}

/* Efek garis bawah aktif untuk navbar */
.nav ul li a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--primary-purple),
    var(--secondary-purple)
  );
  border-radius: 2px;
  opacity: 1;
  transition: width 0.3s ease;
  width: 100%;
}

/* Efek garis bawah saat hover untuk navbar */
.nav ul li a:not(.active)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--primary-purple),
    var(--secondary-purple)
  );
  border-radius: 2px;
  width: 0;
  transition: width 0.3s ease;
}

.nav ul li a:hover:not(.active)::after {
  width: 100%;
}

.social-icon i {
  font-size: 1.6rem;
  color: var(--dark-text); /* Menggunakan variabel */
  transition: color 0.3s ease, transform 0.3s ease;
}

.social-icon i:hover {
  color: var(--primary-purple); /* Tidak berubah di dark mode, tetap ungu */
  transform: scale(1.1);
}

/* Styling Tombol Mode Gelap */
.dark-mode-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.6rem;
  color: var(--dark-text); /* Menggunakan variabel teks */
  transition: color 0.3s ease, transform 0.3s ease;
  padding: 0;
  line-height: 1; /* Pastikan ikon tidak memiliki spasi berlebih */
  display: none; /* Default tersembunyi di desktop */
}

.dark-mode-toggle:hover {
  color: var(--primary-purple); /* Warna saat hover */
  transform: scale(1.1);
}

/* Sesuaikan warna ikon tombol mode gelap di mode gelap */
body.dark-mode .dark-mode-toggle {
  color: var(--dark-mode-header-link); /* Warna ikon di dark mode */
}

body.dark-mode .dark-mode-toggle:hover {
  color: var(--secondary-purple); /* Warna hover di dark mode */
}

/* Sembunyikan LI untuk tombol mode gelap di desktop */
.dark-mode-toggle-li {
  display: none;
}

/*====================================
   Styling Hamburger Menu
   ====================================*/
.hamburger-menu {
  display: none; /* Hidden by default on desktop */
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 22px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  z-index: 100; /* Ensure it's above everything */
  position: relative;
}

.hamburger-menu .bar {
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--dark-text); /* Menggunakan variabel */
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
}

/* Animasi untuk menu aktif (berubah menjadi 'X') */
.hamburger-menu.active .bar:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.hamburger-menu.active .bar:nth-child(2) {
  opacity: 0; /* Middle bar fades out */
}

.hamburger-menu.active .bar:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* Overlay Navigasi Mobile */
.nav {
  display: flex; /* Default: flex untuk desktop */
  transition: transform 0.4s ease-in-out;
}

/*====================================
   Styling Hero Section (Home Page)
   ====================================*/
.hero-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
  padding: 4rem 0;
  min-height: calc(100vh - 150px);
  position: relative;
}

/* Efek background di hero section */
.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 100%;
  background: radial-gradient(
    circle at 50% 20%,
    rgba(156, 39, 176, 0.05) 0%,
    transparent 60%
  );
  pointer-events: none;
  z-index: -1;
}

/* Sesuaikan efek background di hero section untuk mode gelap */
body.dark-mode .hero-section::before {
  background: radial-gradient(
    circle at 50% 20%,
    rgba(156, 39, 176, 0.02) 0%,
    /* Kurangi opacity di dark mode */ transparent 60%
  );
}

.hero-content-left {
  flex: 1;
  max-width: 650px;
  animation: fadeInSlideUp 1s ease-out forwards;
  opacity: 0;
  transform: translateY(20px);
}

@keyframes fadeInSlideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.greeting {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--light-gray-text); /* Menggunakan variabel */
  margin-bottom: 0.8rem;
  letter-spacing: 0.5px;
}

.hero-content-left h1 {
  font-size: 4.8rem;
  font-weight: 800;
  line-height: 1.05;
  color: var(--dark-text); /* Menggunakan variabel */
  margin-bottom: 2rem;
  position: relative;
}

/* Efek di bawah judul hero */
.hero-content-left h1::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 20px;
  background: linear-gradient(
    to right,
    var(--primary-purple) 0%,
    transparent 80%
  );
  filter: blur(25px);
  opacity: 0.6;
  pointer-events: none;
}

/* Sesuaikan efek di bawah judul hero untuk mode gelap */
body.dark-mode .hero-content-left h1::before {
  background: linear-gradient(
    to right,
    var(--secondary-purple) 0%,
    /* Gunakan secondary purple di dark mode */ transparent 80%
  );
  filter: blur(20px); /* Kurangi blur */
  opacity: 0.4; /* Kurangi opacity */
}

.description {
  font-size: 1.15rem;
  color: var(--light-gray-text); /* Menggunakan variabel */
  margin-bottom: 3rem;
  max-width: 550px;
  line-height: 1.7;
}

.cta-buttons {
  display: flex;
  gap: 2rem;
}

/* Styling Tombol (Button) */
.btn {
  padding: 1.1rem 2.5rem;
  border-radius: 35px;
  font-weight: 600;
  font-size: 1.05rem;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease,
    transform 0.3s ease;
  box-shadow: var(--shadow-subtle); /* Menggunakan variabel */
}

.btn-primary {
  background: linear-gradient(
    135deg,
    var(--primary-purple) 0%,
    var(--secondary-purple) 100%
  );
  color: var(--light-bg); /* Menggunakan variabel */
}

.btn-primary:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-strong); /* Menggunakan variabel */
  background: linear-gradient(
    135deg,
    var(--secondary-purple) 0%,
    var(--primary-purple) 100%
  );
}

.btn-secondary {
  background-color: var(--btn-secondary-bg); /* Menggunakan variabel */
  color: var(--dark-text); /* Menggunakan variabel */
}

.btn-secondary:hover {
  background-color: var(--btn-secondary-hover-bg); /* Menggunakan variabel */
  transform: translateY(-3px);
  box-shadow: var(--shadow-subtle); /* Menggunakan variabel */
}

.hero-content-right {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeInScale 1s ease-out 0.3s forwards;
  opacity: 0;
  transform: scale(0.9);
}

@keyframes fadeInScale {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Styling Frame Gambar di Hero Section */
.image-frame {
  width: 450px;
  height: 450px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(
    45deg,
    #feda75,
    #fa7e1e,
    #d62976,
    #962fbf,
    #4f5bd5
  );
  padding: 10px;
  box-shadow: var(--shadow-strong); /* Menggunakan variabel */
  position: relative;
}

/* Efek glow di frame gambar */
.image-frame::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    var(--accent-glow) 0%,
    transparent 60%
  );
  filter: blur(30px);
  opacity: 0.7;
  pointer-events: none;
  z-index: 1;
}

/* Sesuaikan efek glow di frame gambar untuk mode gelap */
body.dark-mode .image-frame::before {
  background: radial-gradient(
    circle at 50% 50%,
    rgba(156, 39, 176, 0.2) 0%,
    /* Kurangi opacity di dark mode */ transparent 60%
  );
  filter: blur(20px); /* Kurangi blur */
  opacity: 0.5;
}

.image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  filter: grayscale(80%) brightness(1.1);
  transition: filter 0.5s ease;
  position: relative;
  z-index: 2;
}

.image-frame img:hover {
  filter: grayscale(0%) brightness(1);
}

/*====================================
   Styling Umum Section (Judul & Deskripsi)
   ====================================*/
.section-title {
  font-size: 3.5rem; /* Larger title for sub-pages */
  font-weight: 800;
  color: var(--primary-purple); /* Primary color for titles */
  text-align: center;
  margin-bottom: 1.5rem;
  margin-top: 4rem; /* Spacing from header */
}

.section-description {
  font-size: 1.2rem;
  color: var(--light-gray-text); /* Menggunakan variabel */
  text-align: center;
  max-width: 800px;
  margin: 0 auto 3rem auto;
  line-height: 1.8;
}

/*====================================
   Styling About Section
   ====================================*/
.about-section {
  padding: 4rem 0;
  min-height: calc(100vh - 150px);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.about-content {
  display: flex;
  align-items: center;
  gap: 4rem;
  max-width: 1000px;
  margin: 0 auto; /* Center content */
}

.about-text {
  flex: 2; /* Take more space */
}

.about-text .section-title {
  text-align: left; /* Align title left in about section */
  margin-top: 0; /* Remove top margin from default .section-title */
}

.about-text .section-description {
  text-align: left; /* Align description left */
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 2rem;
}

.about-text p {
  font-size: 1.05rem;
  color: var(--dark-text); /* Menggunakan variabel */
  margin-bottom: 1rem;
  line-height: 1.7;
}

.about-image {
  flex: 1; /* Take less space */
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-image img {
  width: 350px; /* Fixed width for about image */
  height: 350px;
  object-fit: cover;
  border-radius: 12px; /* Slightly rounded corners */
  box-shadow: var(--shadow-strong); /* Menggunakan variabel */
  filter: brightness(0.95); /* Slightly darker for a more serious tone */
  transition: filter 0.3s ease; /* Transisi untuk gambar */
}

/* Sesuaikan gambar di about section untuk mode gelap */
body.dark-mode .about-image img {
  filter: brightness(0.7); /* Lebih gelap di dark mode */
}

.about-cta {
  margin-top: 2.5rem;
  justify-content: flex-start; /* Align buttons left */
}

/*====================================
   Styling Projects Section
   ====================================*/
.projects-section {
  padding: -5px 0;
  min-height: calc(100vh - 150px);
  background: var(--light-bg);
  transition: background-color 0.3s ease;
}

/*------------------------------------
   Filter Buttons Styling
   ------------------------------------*/
.project-filter {
  text-align: center;
  margin: 30px 0;
  padding: 0 1rem;
}

.filter-btn {
  padding: 10px 20px;
  margin: 0 8px;
  border: none;
  background: var(--filter-btn-bg);
  cursor: pointer;
  font-weight: 600;
  border-radius: 25px;
  color: var(--filter-btn-text);
  transition: all 0.3s ease;
  box-shadow: var(--shadow-subtle);
}

.filter-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-strong);
}

.filter-btn.active {
  background: var(--filter-btn-active-bg);
  color: var(--filter-btn-active-text);
  transform: translateY(-2px);
  box-shadow: var(--shadow-strong);
}

/* Dark Mode Filter Buttons */
body.dark-mode .filter-btn {
  background: var(--dark-mode-btn-secondary-bg);
  color: var(--dark-mode-text);
  box-shadow: var(--dark-mode-shadow-subtle);
}

body.dark-mode .filter-btn:hover {
  background: var(--dark-mode-btn-secondary-hover-bg);
  box-shadow: var(--dark-mode-shadow-strong);
}

body.dark-mode .filter-btn.active {
  background: var(--primary-purple);
  color: #fff;
  box-shadow: var(--dark-mode-shadow-strong);
}

/*------------------------------------
   Projects Grid & Cards
   ------------------------------------*/
.projects-grid {
  display: grid;
  grid-template-columns: 1fr; /* Default for mobile */
  gap: 3rem;
  padding: 2rem;
}

/* Media query for desktop */
@media (min-width: 768px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on desktop */
  }
}

.project-card {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(200, 200, 200, 0.2);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-subtle);
  transition: all 0.4s ease-in-out, background-color 0.3s ease,
    border-color 0.3s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 20px;
}

/* Dark Mode Project Card */
body.dark-mode .project-card {
  background: var(--dark-mode-project-card-bg);
  border: var(--dark-mode-project-card-border);
  box-shadow: var(--dark-mode-shadow-subtle);
}

.project-card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: var(--shadow-strong);
}

/* Dark Mode Project Card Hover */
body.dark-mode .project-card:hover {
  box-shadow: var(--dark-mode-shadow-strong);
}

.project-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-bottom: 1px solid #eee;
  transition: transform 0.3s ease, filter 0.3s ease;
  -webkit-touch-callout: none;
}

.project-card:hover img {
  transform: scale(1.03);
}

/* Dark Mode Image Adjustment */
body.dark-mode .project-card img {
  filter: brightness(0.8);
  border-bottom: 1px solid rgba(74, 85, 104, 0.2);
}

.project-card h3 {
  font-size: 1.8rem;
  color: #2c2c2c;
  margin-bottom: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
  margin-top: 10px;
}

/* Dark Mode Heading */
body.dark-mode .project-card h3 {
  color: var(--dark-mode-text);
}

.project-card p {
  font-size: 1.05rem;
  color: #555;
  margin-bottom: 1.5rem;
  line-height: 1.75;
  flex-grow: 1;
  transition: color 0.3s ease;
}

/* Dark Mode Paragraph */
body.dark-mode .project-card p {
  color: var(--dark-mode-light-gray-text);
}

.tech-stack {
  font-size: 0.9em;
  color: var(--modal-tech-text);
  margin-top: -10px;
  margin-bottom: 1rem;
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tech-stack img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  transition: transform 0.2s ease;
}

.tech-stack img:hover {
  transform: scale(1.2);
}

.project-card .project-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  color: #6a11cb;
  font-weight: 600;
  padding: 1.2rem 2rem;
  border-top: 1px solid #e5e5e5;
  transition: all 0.3s ease;
  text-decoration: none;
}

/* Dark Mode Project Link */
body.dark-mode .project-card .project-link {
  color: var(--secondary-purple);
  border-top: 1px solid rgba(74, 85, 104, 0.2);
}

.project-card .project-link i {
  margin-left: 0.8rem;
  transition: transform 0.3s ease;
  font-size: 1.2rem;
}

.project-card .project-link:hover {
  color: #2575fc;
  padding-left: 2.5rem;
}

.project-card .project-link:hover i {
  transform: translateX(5px);
}

/* Soft shimmer effect on project card hover */
.project-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(128, 0, 128, 0.05) 0%,
    /* Ungu transparan yang lebih samar di awal */ rgba(128, 0, 128, 0.3) 50%,
    /* Ungu transparan yang lebih jelas di tengah */ rgba(128, 0, 128, 0.05)
      100% /* Ungu transparan yang lebih samar di akhir */
  );
  transition: left 0.6s ease-in-out;
  pointer-events: none;
}

.project-card:hover::before {
  left: 100%;
}

/* Dark Mode shimmer effect adjustment */
body.dark-mode .project-card::before {
  background: linear-gradient(
    120deg,
    rgba(128, 0, 128, 0.05) 0%,
    rgba(128, 0, 128, 0.3) 50%,
    rgba(128, 0, 128, 0.05) 100%
  );
}

/* Styling untuk Carousel dan Tombol Navigasi */
.carousel-container {
  position: relative;
  overflow: hidden;
}

.carousel-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: opacity 0.5s ease-in-out;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
  opacity: 0; /* Sembunyikan secara default */
  visibility: hidden; /* Sembunyikan secara default */
  transition: opacity 0.3s ease, visibility 0.3s ease;
  border-radius: 50%;
}

.prev-btn {
  left: 10px;
}

.next-btn {
  right: 10px;
}

.project-card:hover .carousel-btn {
  opacity: 1; /* Tampilkan saat hover */
  visibility: visible;
}

.carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 10;
}

.carousel-dots .dot {
  width: 8px;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.carousel-dots .dot.active {
  background-color: #fff;
}

/* Tambahkan CSS ini ke file one.css Anda */
.image-modal-content {
  position: relative;
  /* Pastikan .image-modal-content memiliki posisi relatif */
}

.zoom-btn {
  position: absolute;
  top: 20px; /* Atur posisi tombol zoom di pojok kanan atas */
  z-index: 100;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.zoom-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

.zoom-in {
  right: 70px;
}

.zoom-out {
  right: 20px;
}

/* Opsional: Tambahkan transisi agar zoom lebih halus */
#fullsizeImage {
  transition: transform 0.2s ease-in-out;
}

/*------------------------------------
   Modal Styling
   ------------------------------------*/
.modal-link {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 20px;
  background-color: #6a11cb;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.modal-link:hover {
  background-color: #2575fc;
}

.modal-link i {
  margin-left: 8px;
}
/*====================================
    Styling Modal
    ====================================*/
.modal-overlay {
  display: none; /* Akan diatur oleh JS */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0; /* Untuk transisi */
  visibility: hidden; /* Untuk transisi */
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
  display: flex; /* Aktifkan display flex saat aktif */
}

.modal-content {
  background: var(--modal-bg);
  padding: 30px; /* Tambah padding */
  border-radius: 15px; /* Lebih bulat */
  box-shadow: var(--shadow-strong);
  text-align: center;
  width: 90%;
  max-width: 550px; /* Lebih lebar */
  position: relative;
  transform: translateY(-20px) scale(0.95); /* Animasi awal */
  transition: all 0.3s ease;
  color: var(--modal-text);
}

.modal-overlay.active .modal-content {
  transform: translateY(0) scale(1); /* Animasi akhir */
}

.modal-content h2 {
  font-size: 2rem; /* Lebih besar */
  margin-bottom: 1rem;
  color: var(--primary-purple);
}

.modal-content p {
  font-size: 1.1rem; /* Lebih besar */
  margin-bottom: 1rem;
  line-height: 1.6;
}

.modal-content p#modalTech {
  color: var(--modal-tech-text); /* Menggunakan variabel */
  font-size: 0.95rem; /* Ukuran khusus untuk tech stack */
  font-style: italic;
  margin-top: -5px; /* Sesuaikan jarak */
  margin-bottom: 1.5rem;
}

.close-modal {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 2.2rem; /* Lebih besar */
  cursor: pointer;
  color: var(--modal-close-btn);
  transition: color 0.3s ease, transform 0.3s ease;
}

.close-modal:hover {
  color: var(--modal-close-btn-hover);
  transform: rotate(90deg);
}

/* Dark Mode untuk Modal */
body.dark-mode .modal-content {
  background: var(--dark-mode-bg);
  box-shadow: var(--dark-mode-shadow-strong);
  color: var(--dark-mode-text);
}

body.dark-mode .modal-content p {
  color: var(--dark-mode-light-gray-text);
}

body.dark-mode .modal-content p#modalTech {
  color: var(--dark-mode-light-gray-text);
}

body.dark-mode .close-modal {
  color: var(--dark-mode-text);
}

body.dark-mode .close-modal:hover {
  color: var(--secondary-purple);
}

/*====================================
   Styling Pop-up Kontak
    ====================================*/
.contact-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Overlay gelap */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Pastikan di atas elemen lain */
  opacity: 0; /* Awalnya tersembunyi */
  visibility: hidden; /* Awalnya tidak terlihat */
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.contact-popup-overlay.active {
  opacity: 1; /* Menampilkan overlay */
  visibility: visible; /* Membuat overlay terlihat */
}

.contact-popup-content {
  background-color: var(--light-bg); /* Menggunakan warna background dinamis */
  color: var(--dark-text); /* Menggunakan warna teks dinamis */
  padding: 30px;
  border-radius: 15px;
  box-shadow: var(--shadow-strong); /* Menggunakan shadow dinamis */
  text-align: center;
  max-width: 450px;
  width: 90%;
  position: relative;
  transform: scale(0.9); /* Animasi awal */
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease,
    transform 0.3s ease;
}

.contact-popup-overlay.active .contact-popup-content {
  transform: scale(1); /* Animasi saat aktif */
}

.contact-popup-content h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--primary-purple); /* Warna judul pop-up */
}

.contact-popup-content p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  color: var(--dark-text);
}

.close-popup-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  font-size: 1.8rem;
  color: var(--dark-text); /* Menggunakan warna teks dinamis */
  cursor: pointer;
  transition: color 0.3s ease;
}

.close-popup-btn:hover {
  color: var(--primary-purple);
}

.contact-options {
  display: flex;
  flex-direction: column; /* Tata letak vertikal untuk mobile */
  gap: 15px;
}

.contact-option-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 25px;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-subtle);
}

.contact-option-btn i {
  margin-right: 10px;
  font-size: 1.4rem;
}

/* WhatsApp Button Styling */
.contact-option-btn.whatsapp {
  background-color: #25d366; /* Warna hijau WhatsApp */
  color: #ffffff;
}

.contact-option-btn.whatsapp:hover {
  background-color: #1da851; /* Warna hijau lebih gelap saat hover */
  transform: translateY(-3px);
  box-shadow: var(--shadow-strong);
}

/* Email Button Styling */
.contact-option-btn.email {
  background-color: var(--btn-secondary-bg); /* Menggunakan variabel sekunder */
  color: var(--dark-text); /* Menggunakan variabel teks */
}

.contact-option-btn.email:hover {
  background-color: var(--btn-secondary-hover-bg);
  transform: translateY(-3px);
  box-shadow: var(--shadow-strong);
}

/* Penyesuaian Pop-up untuk Dark Mode */
body.dark-mode .contact-popup-content {
  background-color: var(--dark-mode-bg);
  color: var(--dark-mode-text);
  box-shadow: var(--dark-mode-shadow-strong);
}

body.dark-mode .contact-popup-content p {
  color: var(--dark-mode-light-gray-text);
}

body.dark-mode .close-popup-btn {
  color: var(--dark-mode-text);
}

body.dark-mode .close-popup-btn:hover {
  color: var(--secondary-purple);
}

body.dark-mode .contact-option-btn.email {
  background-color: var(--dark-mode-btn-secondary-bg);
  color: var(--dark-mode-text);
}

body.dark-mode .contact-option-btn.email:hover {
  background-color: var(--dark-mode-btn-secondary-hover-bg);
}

/* Media Queries untuk Layout Tombol di Desktop */
@media (min-width: 600px) {
  .contact-options {
    flex-direction: row; /* Tata letak horizontal di desktop */
    justify-content: center;
  }
}

/*------------------------------------
  Media Queries for Responsive Design
  ------------------------------------*/

/* Penyesuaian untuk layar dengan lebar maksimum 768px */
@media (max-width: 768px) {
  .contact-popup-content {
    /* Padding lebih kecil untuk layar yang lebih sempit */
    padding: 25px;
  }

  .contact-popup-content h2 {
    /* Ukuran font judul sedikit lebih kecil */
    font-size: 1.5rem;
  }

  .contact-popup-content p {
    /* Ukuran font deskripsi sedikit lebih kecil */
    font-size: 1rem;
    margin-bottom: 1.5rem; /* Jarak bawah juga dikurangi */
  }

  .contact-options {
    /* Pastikan tata letak vertikal untuk tombol di mobile */
    flex-direction: column;
  }

  .contact-option-btn {
    /* Padding tombol disesuaikan untuk mobile */
    padding: 12px 20px;
    font-size: 1rem;
  }

  .contact-option-btn i {
    /* Ukuran ikon disesuaikan */
    font-size: 1.2rem;
  }
}

/*====================================
   Tombol Kategori Project Global
   ====================================*/

/* Filter Buttons Styling */
.project-filter {
  text-align: center;
  margin: 30px 0;
  padding: 0 1rem;
}

.filter-btn {
  /* --- Perubahan Utama di Sini --- */
  padding: 10px 25px; /* Sedikit lebih tinggi padding horizontal */
  margin: 0 8px;
  border: 1px solid var(--btn-secondary-bg); /* Tambahkan border tipis */
  background: var(--light-bg); /* Background kini bisa sama dengan body */
  cursor: pointer;
  font-weight: 600;
  border-radius: 30px; /* Lebih bulat, bentuk 'pill' */
  color: var(--dark-text); /* Warna teks default */
  transition: all 0.3s ease; /* Transisi lebih halus untuk semua properti */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* Shadow lebih lembut dan menyebar */
}

.filter-btn:hover {
  transform: translateY(-3px); /* Sedikit lebih naik saat hover */
  background: var(--btn-secondary-hover-bg); /* Ubah background saat hover */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); /* Shadow lebih menonjol saat hover */
  border-color: var(
    --btn-secondary-hover-bg
  ); /* Ubah warna border saat hover */
}

.filter-btn.active {
  background: linear-gradient(
    135deg,
    var(--primary-purple) 0%,
    var(--secondary-purple) 100%
  ); /* Gradient untuk tombol aktif */
  color: #fff; /* Teks putih untuk tombol aktif */
  border: 1px solid var(--primary-purple); /* Border senada dengan gradient */
  transform: translateY(-2px); /* Naik sedikit saat aktif */
  box-shadow: 0 5px 15px rgba(106, 27, 154, 0.3); /* Shadow ungu untuk aktif */
}

/* Dark Mode untuk Filter Buttons */
body.dark-mode .filter-btn {
  border: 1px solid var(--dark-mode-btn-secondary-bg); /* Border di dark mode */
  background: var(
    --dark-mode-project-card-bg
  ); /* Background gelap transparan */
  color: var(--dark-mode-text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Shadow lebih gelap di dark mode */
}

body.dark-mode .filter-btn:hover {
  background: var(--dark-mode-btn-secondary-hover-bg);
  border-color: var(--dark-mode-btn-secondary-hover-bg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.dark-mode .filter-btn.active {
  background: linear-gradient(
    135deg,
    var(--primary-purple) 0%,
    var(--secondary-purple) 100%
  ); /* Tetap gradient ungu terang */
  color: #fff;
  border: 1px solid var(--primary-purple); /* Border senada dengan gradient */
  box-shadow: 0 5px 15px rgba(156, 39, 176, 0.3); /* Shadow ungu di dark mode */
}

/*====================================
   Responsive Styling (Media Queries)
   ====================================*/

/* Untuk layar tablet dan di bawahnya (max-width: 992px) */
@media (max-width: 992px) {
  /* Perubahan Header */
  .header {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    z-index: 999;
  }

  .header-right-actions {
    gap: 1rem; /* Kurangi jarak di mobile */
    /* Pastikan hamburger dan tombol dark mode berada di sebelah kanan navigasi saat terbuka */
    align-self: flex-end;
  }

  .nav {
    /* Default state for mobile: hidden and off-screen */
    display: flex; /* Tetap flex untuk memastikan layout kolom */
    flex-direction: column;
    position: fixed;
    top: 0;
    right: -100%; /* Sembunyikan ke kanan */
    width: 100%;
    height: 100%;
    background-color: var(--light-bg); /* Menggunakan variabel */
    justify-content: center;
    align-items: center;
    z-index: 90;
    transition: right 0.4s ease-in-out, background-color 0.3s ease; /* Transisi untuk mode gelap */
  }

  /* Status aktif untuk navigasi mobile */
  .nav.active {
    right: 0; /* Geser ke dalam layar */
  }

  .social-icon {
    display: none; /* Sembunyikan ikon sosial di mobile menu */
  }

  .hamburger-menu {
    display: flex; /* Tampilkan hamburger menu di mobile */
  }

  .nav .nav-list {
    flex-direction: column;
    gap: 2.5rem; /* Jarak antar item menu mobile */
    font-size: 1.8rem;
    text-align: center;
    width: 100%;
    color: var(--dark-text); /* Menggunakan variabel */
  }

  .nav .nav-list li a {
    color: var(--dark-text); /* Menggunakan variabel */
    padding: 0.2rem 0;
    display: block;
    /* Hapus efek after (garis bawah) di mobile menu */
    &::after {
      display: none;
    }
  }

  .nav .nav-list li a.active,
  .nav .nav-list li a:hover {
    color: var(--secondary-purple);
    transform: scale(1.05);
  }

  /* Tampilkan LI untuk tombol mode gelap di mobile */
  .dark-mode-toggle-li {
    display: block; /* Tampilkan LI untuk tombol mode gelap di mobile */
    margin-top: 2.5rem; /* Beri jarak dari item menu lainnya */
  }

  .dark-mode-toggle {
    display: block; /* Tampilkan tombol mode gelap di mobile */
    font-size: 2rem; /* Ukuran ikon lebih besar di mobile menu */
    margin: 0 auto; /* Tengahkankan tombol di mobile menu */
  }

  /* Penyesuaian Hero Section */
  .hero-section {
    flex-direction: column;
    text-align: center;
    gap: 3rem;
    padding: 2rem 0;
  }

  .hero-content-left,
  .hero-content-right {
    max-width: 100%;
  }

  .hero-content-left h1 {
    font-size: 3.5rem;
  }
  .hero-content-left h1::before {
    height: 15px;
    filter: blur(15px);
    bottom: -5px;
  }

  .description {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .cta-buttons {
    justify-content: center;
  }

  .image-frame {
    width: 350px;
    height: 350px;
    padding: 8px;
  }

  /* Responsive Projects Section */
  .projects-grid {
    grid-template-columns: 1fr; /* Single column on smaller screens */
    padding: 0 2rem;
  }

  /* Responsive About Section */
  .about-content {
    flex-direction: column; /* Stack content on mobile */
    text-align: center;
    gap: 2.5rem;
  }

  .about-text .section-title,
  .about-text .section-description {
    text-align: center; /* Center align text on mobile */
  }

  .about-cta {
    justify-content: center; /* Center buttons on mobile */
  }

  .about-image img {
    width: 280px;
    height: 280px;
  }

  .project-filter {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    justify-content: flex-start;
    padding-top: 10px; /* Penting untuk menghindari potongan */
    padding-bottom: 10px;
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .project-filter::-webkit-scrollbar {
    display: none;
  }

  .filter-btn {
    flex-shrink: 0;
    margin: 0 8px; /* Jarak antar tombol */
    padding: 8px 18px; /* Sesuaikan padding untuk ukuran mobile */
    font-size: 0.9rem;
    position: relative; /* Penting untuk z-index di mobile */
  }

  .filter-btn:hover,
  .filter-btn.active {
    z-index: 10; /* Pastikan di atas saat aktif/hover */
  }

  .project-filter .filter-btn:first-child {
    margin-left: 0;
  }

  .project-filter .filter-btn:last-child {
    margin-right: 0;
  }
}

/* Untuk layar yang lebih kecil (max-width: 768px) */
@media (max-width: 768px) {
  .hero-content-left h1 {
    font-size: 2.8rem;
  }
  .description {
    font-size: 1rem;
  }
  .btn {
    padding: 0.9rem 2rem;
    font-size: 0.95rem;
  }
  .image-frame {
    width: 300px;
    height: 300px;
    padding: 6px;
  }
  .section-title {
    font-size: 2.8rem;
  }
  .section-description {
    font-size: 1.1rem;
  }
  .project-card h3 {
    font-size: 1.3rem;
  }
  .about-text p {
    font-size: 0.95rem;
  }

  /* Mengatur lebar card menjadi dua kolom pada layar 768px */
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .project-card {
    width: auto;
  }
}

/* Untuk layar mobile kecil (max-width: 480px) */
@media (max-width: 480px) {
  .page-container {
    padding: 1rem;
  }
  .header {
    margin-bottom: 1.5rem;
  }
  .logo {
    font-size: 1.4rem;
  }
  .nav .nav-list {
    font-size: 1.5rem;
    gap: 1.8rem;
  }
  .nav .nav-list a {
    margin-bottom: -30px;
  }
  .hero-content-left h1 {
    font-size: 2.2rem;
  }
  .description {
    font-size: 0.9rem;
  }
  .cta-buttons {
    flex-direction: column;
    gap: 1rem;
  }
  .btn {
    width: 100%;
    max-width: 250px;
    margin: 0 auto;
  }
  .image-frame {
    width: 250px;
    height: 250px;
  }
  .section-title {
    font-size: 2rem;
  }
  .section-description {
    font-size: 1rem;
  }

  /* Responsive Styling untuk Projects Section di mobile */
  .projects-section {
    padding: -20px;
  }

  .projects-grid {
    padding: 1rem;
    gap: 2rem;
    /* Mengatur lebar card menjadi satu kolom pada layar 480px */
    grid-template-columns: 1fr;
  }

  .project-card {
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    width: 100%; /* Memastikan card mengambil seluruh lebar yang tersedia */
  }

  .project-card .project-info {
    padding: 1.2rem;
  }

  .project-card h3 {
    font-size: 1.4rem;
  }

  .project-card p {
    font-size: 0.95rem;
  }

  .project-card .project-link {
    padding: 1rem 1.5rem;
    font-size: 0.95rem;
  }

  .project-card .project-link i {
    font-size: 1rem;
  }

  .about-content {
    margin-top: -20px;
  }

  .warna {
    font-size: 1.4rem;
  }

  .modal-content h2 {
    font-size: 1.4rem;
  }
}