* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html body {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-style: normal;
  background: #0f0f0f;
  color: white;
  line-height: 1.6;
  width: 100%;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  min-height: 100vh;
  overflow-x: hidden;
}

ul {
  list-style: none;
}

li {
  gap: 10px;
}

.logo {
  width: 120px;
}

@media (max-width: 769px) {
  .logo {
    width: 100px;
  }
}

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

header {
  position: absolute;
  width: auto;
  top: 20px;
  left: 20px;
  right: 20px;
  background: rgb(0 0 0 / -10%) !important;
  /* backdrop-filter: blur(50px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); */
  z-index: 100;
  /* border-radius: 15px; */
}

header h2 {
  font-size: 20px;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: auto;
}

.container-white {
  background: white;
  width: 100%;
  margin: auto;
}
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}
nav ul {
  display: flex;
  list-style: none;
  gap: 90px;
}

.wa-nav {
  padding: 10px 20px;
  background: white;
  color: #0f0f0f;
  font-weight: bold;
  border-radius: 20px;
  transition: all 0.3s ease-in-out;
}

.wa-nav:hover {
  background: #1a1a1a;
  color: white;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.3); /* Glow halus, bukan blur */
  transform: translateY(-5px);
}

.nav-a {
  font-size: 15px;
  transition: all 0.3s ease;
  color: white !important;
}

.nav-a:hover {
  background: #1a1a1a;
  padding: 10px 15px;
  border-radius: 10px;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.3); /* Glow halus, bukan blur */
}

/* 1. Definisi Variabel Warna */
:root {
  /* Default: Dark Mode (karena website kamu awalnya gelap) */
  --bg-main: #0f0f0f;
  --text-main: #ffffff;
  --card-bg: #1e1e1e;
  --header-bg: rgba(0, 0, 0, 0.75);
}

/* 2. Definisi saat Light Mode Aktif */
body.light-mode {
  --bg-main: #ffffff;
  --text-main: #1a1a1a;
  --card-bg: #f5f5f5;
  --header-bg: rgba(255, 255, 255, 0.8);
}

/* 3. Terapkan variabel ke elemen utama */
html body {
  background-color: var(--bg-main);
  color: var(--text-main);
  transition:
    background-color 0.3s,
    color 0.3s;
}

header {
  background: var(--header-bg); /* Gunakan variabel agar header ikut berubah */
}

.card-how {
  background: var(--card-bg); /* Gunakan variabel agar card ikut berubah */
  color: var(--text-main);
}

/* Pastikan link navigasi juga berubah warnanya di light mode */
body.light-mode .nav-a,
body.light-mode header h2,
body.light-mode .menu-toggle {
  color: #1a1a1a;
}

/* Container Center (Opsional) */
.theme-switch-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sembunyikan Checkbox Asli */
.theme-switch input {
  display: none;
}

/* Background Slider */
.slider {
  background-color: #1a1a1a;
  bottom: 0;
  cursor: pointer;
  left: 0;
  right: 0;
  top: 0;
  transition: 0.4s;
  width: 70px;
  height: 34px;
  position: relative;
  border-radius: 34px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  justify-content: space-between;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1);
}

/* Ikon di dalam slider */
.slider svg {
  z-index: 1;
  transition: 0.3s;
}

.feather-sun {
  color: var(--icon-sun);
}
.feather-moon {
  color: var(--icon-moon);
}

/* Bola Sakelar */
.ball {
  background-color: #fff;
  bottom: 4px;
  height: 26px;
  left: 4px;
  position: absolute;
  transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  width: 26px;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

/* Kondisi Saat Checked (Dark Mode) */
input:checked + .slider {
  background-color: var(--switch-active);
}

input:checked + .slider .ball {
  transform: translateX(36px);
}

input:checked + .slider .feather-sun {
  opacity: 0.3;
}

input:checked + .slider .feather-moon {
  color: #f1c40f;
  opacity: 1;
}

nav h2 {
  font-size: 20px;
  font-weight: bold;
}

nav a {
  color: white;
  text-decoration: none;
  font-size: 16px;
}

@media (max-width: 1024px) {
  nav ul {
    gap: 30px;
  }

  .btn {
    margin-top: 25px;
  }
}

.btn-wa-sized {
  display: none;
  padding: 12px 24px;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: white;
  font-size: 16px;
  font-weight: 600;
  border-radius: 30px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* efek glow saat hover */
.btn-wa-sized::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transition: all 0.5s;
}

.btn-wa-sized:hover::before {
  left: 100%;
}

.btn-wa-sized:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* efek klik */
.btn-wa-sized:active {
  transform: scale(0.95);
}

.btn-wa {
  display: inline-block;
  padding: 12px 24px;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: white;
  font-size: 16px;
  font-weight: 600;
  border-radius: 30px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* efek glow saat hover */
.btn-wa::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transition: all 0.5s;
}

.btn-wa:hover::before {
  left: 100%;
}

.btn-wa:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* efek klik */
.btn-wa:active {
  transform: scale(0.95);
}

.hero-img {
  width: 40%;
  justify-content: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 60%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 35%,
    rgba(0, 0, 0, 0) 95%
  );
}

@media (max-width: 768px) {
  .hero-img {
    width: 65%;
  }
}

/* Base Style untuk Cahaya Kuning/Emas */
.glow-light {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  /* Menggunakan radial gradient untuk efek pancaran dari tengah */
  background: radial-gradient(
    circle,
    rgba(212, 175, 55, 0.5) 0%,
    rgba(212, 175, 55, 0) 70%
  );
  filter: blur(50px); /* Membuat efek bauran super halus */
  z-index: 1; /* Di bawah konten, di atas background hitam */
  pointer-events: none; /* Agar tidak mengganggu klik user pada tombol/teks */
}

/* Posisi Awal Cahaya Kiri */
.glow-left {
  top: -10%;
  left: -10%;
  animation: moveGlowLeft 5s infinite alternate ease-in-out;
}

/* Posisi Awal Cahaya Kanan */
.glow-right {
  top: 15%;
  right: -5%;
  /* Menggunakan warna emas yang sedikit berbeda atau opasitas lain jika mau */
  background: radial-gradient(
    circle,
    rgba(244, 196, 48, 0.25) 0%,
    rgba(244, 196, 48, 0) 70%
  );
  animation: moveGlowRight 5s infinite alternate ease-in-out;
}

@keyframes moveGlowLeft {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(80px, 40px) scale(1.2);
  }
  100% {
    transform: translate(40px, -60px) scale(0.9);
  }
}

/* Animasi Cahaya Kanan: Bergerak berlawanan arah agar terlihat alami */
@keyframes moveGlowRight {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-60px, 60px) scale(1.1);
  }
  100% {
    transform: translate(20px, -30px) scale(1);
  }
}

.hero-object {
}
/* CSS YANG SUDAH DIPERBAIKI */

.hero {
  /* Hapus atau sesuaikan align-items dan justify-content jika teks ingin ditaruh di kiri seperti di gambar */
  /* align-items: center; justify-content: center; */
  padding: 100px 100px 30px 100px;

  /* --- KUNCI PERBAIKAN DI SINI --- */
  /* Menambahkan overlay hitam transparan (50% kegelapan) */
  background-image: #16171b;
  /* --- ---------------------- --- */

  background-size: cover; /* Ensures image fills the container */
  background-position: center; /* Centers the image */
  color: white; /* Base text color */

  /* Gunakan min-height agar proporsional di berbagai layar */
  min-height: 500px;
  height: auto;
  border-radius: 15px;

  /* Gunakan flex untuk menempatkan konten, misal di kiri tengah */
  display: block;
  align-items: center; /* Vertically center */
  justify-content: center; /* Konten rata kiri, sesuai gambar contoh */
  text-align: left; /* Teks rata kiri */
  box-sizing: border-box; /* Pastikan padding tidak menambah lebar total */
  position: relative;
  z-index: 2;
  overflow: hidden; /* Penting: agar luapan cahaya blur tidak merusak layout */
}

.hero-text {
  text-align: center;
}

.header-color {
  color: #fd8221;
}

.hero h1 {
  font-size: 45px;
  font-weight: bold;
  margin-bottom: 20px;
  line-height: 1.2; /* Mengatur jarak antar baris teks agar rapi */
  text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5); /* Sedikit bayangan agar lebih menonjol */
}

.hero p {
  color: #eee; /* Sedikit lebih cerah dari #ccc agar lebih kontras di atas overlay */
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 35px; /* Jarak lebih ke tombol */
}

.bottom-item {
  text-align: center;
}

.bottom-text {
  margin-bottom: 0px !important;
  width: 150px;
}

.icon-bottom {
  font-size: 50px;
  background: linear-gradient(to bottom, #ffffff78 0%, #fd9343 100%);

  /* Clip the background to the text (icon) shape */
  -webkit-background-clip: text;
  background-clip: text;

  /* Make the original icon color transparent to see the gradient */
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.bottom-hero {
  position: relative;
  top: -60px;
  width: 100%;
  padding: 45px;
  display: flex;
  justify-content: center;
  border-radius: 20px;
  gap: 100px;
}

@media (max-width: 1024px) {
  .bottom-hero {
    gap: 50px;
    padding: 40px;
  }
}

@media (max-width: 768px) {
  .bottom-hero {
    flex-direction: column;
    gap: 30px;
    padding: 30px 20px;
    text-align: center;
    justify-content: center;
  }

  .hero p {
    margin: auto;
  }

  .line {
    background-color: white;
    width: 100px !important;
    height: 1px;
    margin: auto;
    box-shadow: 0 0px 10px rgba(255, 255, 255, 0.9);
  }

  .wa-nav {
    display: none; /* Sembunyikan tombol WA di header untuk mobile */
  }
}

.line {
  background-color: white;
  width: 1px;
  box-shadow: 0 0px 10px rgba(255, 255, 255, 0.9);
}

/* Tambahkan styling tombol minimalis agar terlihat seperti di gambar */
.btn {
  display: inline-block;
  padding: 12px 24px;
  border: white 1px solid;
  background-color: #0f0f0f; /* Warna kuning tua/emas sesuai gambar */
  color: white; /* Teks tombol hitam */
  text-decoration: none;
  font-weight: bold;
  border-radius: 25px;
  transition: all 0.2s ease-in-out 0.1s;
}

.btn:hover {
  background-color: white; /* Warna hover sedikit lebih gelap */
  color: #fd8221;
  font-weight: bolder;
  transform: translateY(-7px);
  box-shadow: 0 10px 40px rgba(215, 212, 212, 0.1);
}

section {
  padding: 80px 80px 80px 80px;
}
.section-title {
  font-size: 36px;
}

/* Container Utama */
#portfolio {
  padding: 80px 20px;
  background-color: #ffffff; /* Warna dasar hitam */
  text-align: center;
}

/* Bento Grid Layout */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Specific Card Sizes */
.card-tall {
  text-align: justify;
  background-image:
    linear-gradient(
      rgba(0, 0, 0, 0.75),
      rgba(24, 24, 24, 0.78),
      rgba(0, 0, 0, 0.75)
    ),
    url("background kayu.jpg");
  /* --- ---------------------- --- */

  background-size: cover; /* Ensures image fills the container */
  background-position: center; /* Centers the image */
  padding: 30px;
  font-weight: 500;
}

.ul-how {
  width: 600px;
}

.circles {
  display: flex;
  gap: 5px;
}

.about-us {
  display: flex;
  gap: 3rem;
}

@media (max-width: 1024px) {
  .about-us {
    flex-direction: column;
    gap: 20px;
  }

  .about-us-text,
  .about-us-img {
    width: 100% !important;
  }
}

.about-us-text {
  width: 50%;
}

.about-us-img {
  width: 50%;
  border-radius: 20px;
}

.about-us-dapur {
  width: 100%;
  border-radius: 20px;
}

.about-us-header {
  display: flex;
  gap: 3rem;
}

.about-us-p {
  color: #0f0f0f;
  text-align: justify;
  margin-bottom: 10px;
}

.about-text {
  margin: auto;
  color: white !important;
}

.about-text {
  margin: auto;
  color: white !important;
  line-height: normal;
}

.card-mid {
  height: 265px;
}

.card-stat {
  height: 160px;
  padding: 30px;
  justify-content: flex-start;
}

.card-stat h2 {
  font-size: 2.8rem;
  font-weight: 700;
}

.card-stat p {
  font-size: 1rem;
  font-weight: 500;
}

/* Colors */
.orange {
  background-image: radial-gradient(
    circle 971px at 10.4% 51.2%,
    rgba(236, 105, 65, 1) 0%,
    rgba(236, 219, 65, 1) 52.1%,
    rgba(245, 233, 226, 1) 99.3%
  );
  color: white;
}

.black {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1)),
    url("background kayu.jpg");
  /* --- ---------------------- --- */

  background-size: cover; /* Ensures image fills the container */
  background-position: center; /* Centers the image */
  color: white;
}

/* Responsiveness (Mobile & Tablet) */
@media (max-width: 900px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 450px) {
  .bento-grid {
    grid-template-columns: 1fr; /* Menjadi satu kolom */
  }
}

/* --- EFEK HOVER --- */

.cards-layanan {
  display: flex;
  width: 100%;
  margin-bottom: 90px;
  gap: 2rem;
  justify-content: center;
}

.card-layanan {
  width: 100%;
  height: fit-content;
  object-fit: cover;
  border-radius: 20px;
  transition: all 0.3s ease-in-out;
}

@media (max-width: 769px) {
  .cards-layanan {
    display: grid;
  }
}

.card-layanan:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(255, 127, 72, 0.3);
  font-size: 1.05rem;
  color: #fd9343;
}

.card-layanan p {
  font-size: 0.9rem;
}

.text-layanan {
  color: white;
  height: fit-content;
  font-weight: 200;
  text-align: start;
  padding: 30px;
  background: linear-gradient(
    to top,
    rgba(241, 241, 241, 0.07) 0%,
    rgba(255, 255, 255, 0.07) 60%,
    transparent 100%
  );
  border-radius: 0 0 20px 20px;
}

.img-layanan {
  width: 100%;
  height: 245px;
  border-radius: 20px;
  object-fit: cover; /* Gambar tetap proporsional */
}

/* Grid System yang Responsif */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  width: 300px;
  height: auto;
  border-radius: 20px;
  margin: 0 auto;
}

/* Gambar */
.img-cards {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover; /* Gambar tetap proporsional */
}

.portfolio-text {
  color: white;
  font-weight: 400;
  text-align: start;
  padding: 20px;
}

/* Overlay Teks (Awalnya Tersembunyi) */
.cards-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.4) 60%,
    transparent 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px;
  text-align: left;
  box-sizing: border-box;
  opacity: 0; /* Sembunyi */
  transform: translateY(20px); /* Geser sedikit ke bawah */
  transition: all 0.4s ease-in-out;
}

.cards-text h3 {
  color: #ffffff;
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.card-desc {
  color: #cccccc;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* --- EFEK HOVER KEREN --- */

/* 1. Card sedikit terangkat */
.portfolio-item:hover {
  transform: scale(1.03);
}

/* 2. Gambar zoom in perlahan */
.portfolio-item:hover .img-cards {
  transform: scale(1.1);
}

/* 3. Teks muncul perlahan (Fade in & Slide up) */
.portfolio-item:hover .cards-text {
  opacity: 1;
  transform: translateY(0);
}

/* Garis dekorasi bawah judul saat hover */
.cards-text h3::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: #00bcd4; /* Warna aksen biru/cyan */
  transition: width 0.4s;
  margin-top: 5px;
}

.portfolio-item:hover h3::after {
  width: 50px;
}

.grid {
  display: flex;
  gap: 2rem;
  justify-content: center;
}

.grid-header {
  margin-bottom: 10px;
}

.grid-text {
  justify-content: center;
  margin: auto;
  flex: 1;
}

.grid-images {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1.5;
}

.img-dapur {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 15px;
}

.double-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.img-double {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 15px;
}

.cta {
  background: linear-gradient(90deg, rgba(212, 160, 23, 0.25), #161616);
  padding: 50px;
  border-radius: 30px;
  position: relative; /* Menjadi patokan posisi pintu */
  display: flex;
  align-items: center;
  justify-content: 间-between;
  max-width: 1100px;
  margin: 0 auto;
  transition: transform 0.4s ease;
  /* overflow: visible; (Default sudah visible, jangan diatur ke hidden agar pintu menembus ke atas) */
}

.cta-content {
  flex: 1;
  z-index: 2; /* Agar teks di atas bayangan pintu */
}

.cta h2 {
  color: white;
  font-size: 2rem;
  margin-bottom: 10px;
}

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

/* --- STYLING PINTU --- */
.cta-door {
  position: absolute;
  right: 50px;
  bottom: 0; /* Terpotong di bawah sesuai card */
  width: 250px; /* Sesuaikan ukuran */
  height: auto;
  z-index: 1;
  transform: translateY(0); /* Posisi awal */
  transition: all 0.5s ease-in-out;
  pointer-events: none; /* Agar tidak mengganggu klik tombol */

  /* Filter untuk membuatnya sedikit 'gelap' agar menyatu dengan tema */
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}

/* --- CODE CSS UTAMA KAMU YANG SUDAH DISESUAIKAN --- */

.why-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  justify-content: center;
  width: 100%; /* Pastikan container grid tidak melebihi parent-nya */
  box-sizing: border-box;
}

.why-item {
  /* Ubah width menjadi 100% agar responsif mengikuti kolom grid */
  width: 100%;
  height: auto;
  background: #ffffff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  color: #0f0f0f;
  padding: 25px; /* Sedikit dikurangi agar lebih aman di layar tanggung */
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: 0.5s;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box; /* WAJIB: Agar padding tidak menambah total lebar card */
}

/* ... Kode .why-circle, .why-icon, dan .content-end tetap sama seperti sebelumnya ... */

/* --- TAMBAHKAN RESPONSIVE MEDIA QUERY DI BAWAH INI --- */

@media (max-width: 768px) {
  /* Mengubah 2 kolom menjadi 1 kolom saja di layar HP/Tablet kecil */
  .why-items {
    grid-template-columns: 1fr;
    gap: 20px; /* Jarak antar card saat menumpuk vertikal */
    padding: 0 10px; /* Jarak aman kanan-kiri agar tidak menempel ke pinggir layar */
  }

  .why-item {
    padding: 20px; /* Padding di dalam card diperkecil sedikit agar teks muat */
    align-items: center !important; /* Opsional: Di mobile biasanya lebih rapi rata tengah */
    text-align: center !important;
  }

  /* Jika di mobile ingin ikonnya kembali ke tengah semua (tidak di kanan lagi) */
  .content-end {
    align-items: center !important;
    text-align: center !important;
  }
}

.why-icon {
  font-size: 1.25rem;
  color: #ffffff;
}

.why-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex; /* Menggunakan flex agar ikon pas di tengah lingkaran */
  justify-content: center;
  align-items: center;
  background: #fd9343;
  margin-bottom: 15px;
}

@media (max-width: 769px) {
  .why-items {
    grid-template-columns: 1fr; /* Menjadi satu kolom di mobile */
  }
}

/* --- SOLUSI UNTUK CARD SEBELAH KIRI --- */
.content-end {
  text-align: end;
  align-items: flex-end; /* Memindahkan elemen lingkaran ikon ke paling kanan */
}

/* Opsional: Memastikan teks paragraf/heading mengisi lebar penuh agar perataan teks 'end' bekerja sempurna */
.content-end h3,
.content-end p {
  width: 100%;
}

/* Menembus bagian atas: Kita gunakan margin-top negatif atau membiarkan posisinya melebihi tinggi card */
@media (min-width: 769px) {
  .cta-door {
    height: 130%; /* Membuat gambar lebih tinggi dari cardnya */
  }
}

/* --- ANIMASI HOVER --- */

/* 1. Card naik sedikit */
.cta:hover {
  transform: translateY(-10px);
}

/* 2. Animasi Pintu Terbuka */
/* Catatan: Untuk efek 'terbuka' yang nyata, gunakan gambar pintu yang memiliki perspektif, 
   atau kita simulasikan dengan rotasi Y */
.cta:hover .cta-door {
  transform: translateY(-20px) rotateY(-30px) scale(1.05);
  filter: drop-shadow(-20px 20px 30px rgba(0, 0, 0, 0.8));
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
  .cta {
    flex-direction: column;
    text-align: center;
    padding: 40px 20px 0 20px; /* Beri ruang bawah 0 karena ada pintu */
    overflow: hidden; /* Di mobile kita sembunyikan tembusannya agar tidak berantakan */
  }

  .cta-door {
    position: relative;
    right: 0;
    width: 200px;
    height: auto;
    margin-top: 20px;
    transform: translateY(0);
  }

  .cta:hover .cta-door {
    transform: translateY(-10px); /* Di mobile cukup gerak ke atas saja */
  }
}

/* --- TIMELINE SECTION BASE --- */
.timeline-section {
  background-color: #0a0a0c; /* Hitam dominan */
  padding: 80px 20px;
  width: 100%;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  box-sizing: border-box;
}

.timeline-container {
  max-width: 1100px;
  margin: 0 auto;
}

/* Header */
.timeline-header {
  text-align: center;
  margin-bottom: 60px;
}

.timeline-header h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 15px;
  letter-spacing: -0.5px;
}

.timeline-header p {
  color: #8a8d93;
  font-size: 1rem;
  max-width: 500px;
  margin: 0 auto;
}

/* Wrapper Utama Timeline */
.timeline-wrapper {
  position: relative;
  width: 100%;
  margin-top: 40px;
}

/* Garis Tengah Vertikal (Desktop) */
.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    to bottom,
    rgba(253, 147, 67, 0) 0%,
    rgba(253, 147, 67, 1) 15%,
    rgba(253, 147, 67, 1) 85%,
    rgba(253, 147, 67, 0) 100%
  );
  transform: translateX(-50%);
  z-index: 1;
}

/* Item Kotak Timeline */
.timeline-item {
  position: relative;
  width: 50%;
  margin-bottom: 40px;
  z-index: 2;
  display: flex;
}

/* Mengatur Posisi Kiri & Kanan */
.timeline-item.left {
  left: 0;
  justify-content: flex-end;
  padding-right: 45px;
  box-sizing: border-box;
}

.timeline-item.right {
  left: 50%;
  justify-content: flex-start;
  padding-left: 45px;
  box-sizing: border-box;
}

/* Titik Indicator (Dot) */
.timeline-dot {
  position: absolute;
  top: 30px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #fd9343; /* Aksen Oren */
  border: 4px solid #0a0a0c;
  box-shadow: 0 0 10px rgba(253, 147, 67, 0.8); /* Efek Glow Oren */
  z-index: 3;
}

.timeline-item.left .timeline-dot {
  right: -8px;
}

.timeline-item.right .timeline-dot {
  left: -8px;
}

/* Konten Card */
.timeline-content {
  background: #121215; /* Card abu-abu sangat gelap */
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 30px;
  border-radius: 16px;
  max-width: 450px;
  width: 100%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition:
    transform 0.3s ease,
    border-color 0.3s ease;
}

/* Efek Hover Profesional */
.timeline-content:hover {
  transform: translateY(-5px);
  border-color: rgba(253, 147, 67, 0.3); /* Border agak mengoren saat dihover */
}

/* Elemen Teks di Dalam Card */
.timeline-date {
  display: inline-block;
  color: #fd9343; /* Warna Oren */
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.timeline-content h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: #ffffff;
}

.timeline-content p {
  color: #a0a5b0;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* --- RESPONSIVE LAYOUT (MOBILE) --- */
@media (max-width: 768px) {
  /* Pindahkan Garis ke Sisi Kiri */
  .timeline-line {
    left: 20px;
    transform: none;
  }

  /* Ubah Item Menjadi Full Width */
  .timeline-item {
    width: 100%;
    margin-bottom: 30px;
  }

  .timeline-item.left,
  .timeline-item.right {
    left: 0;
    justify-content: flex-start;
    padding-left: 50px;
    padding-right: 0;
  }

  /* Pindahkan Semua Titik Indikator ke Kiri Sejajar Garis Baru */
  .timeline-item.left .timeline-dot,
  .timeline-item.right .timeline-dot {
    left: 12px;
    right: auto;
    top: 25px;
  }

  .timeline-content {
    max-width: 100%;
  }

  .timeline-header h2 {
    font-size: 2rem;
  }
}

/* --- CONTAINER UTAMA --- */
.gallery-marquee-section {
  background-color: #ffffff; /* Latar belakang hitam web kamu */
  padding: 60px 0;
  width: 100%;
  overflow: hidden; /* Sembunyikan gambar yang meluber keluar layar */
  box-sizing: border-box;
}

.marquee-container {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Jarak antara baris atas dan bawah */
  width: 100%;
}

/* --- TRACER & ROW SETTING --- */
.marquee-row {
  display: flex;
  width: 100%;
}

.marquee-track {
  display: flex;
  gap: 20px; /* Jarak horizontal antar card */
  width: max-content; /* Membiarkan konten memanjang secara horizontal */
}

/* --- ANIMASI BERGERAK --- */
/* Baris Atas bergerak ke Kiri */
.row-left .marquee-track {
  animation: scrollLeft 25s linear infinite;
}

/* Baris Bawah bergerak ke Kanan */
.row-right .marquee-track {
  animation: scrollRight 25s linear infinite;
}

/* Ketika mouse menyentuh baris, ANIMASI BERHENTI BERJALAN */
.marquee-row:hover .marquee-track {
  animation-play-state: paused;
}

/* Keyframes Pergerakan (Geser tepat -50% karena data diduplikasi) */
@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes scrollRight {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

/* --- STYLE CARD GAMBAR --- */
.gallery-card {
  position: relative;
  width: 320px; /* Lebar ideal gambar di desktop */
  height: 200px; /* Tinggi ideal gambar */
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  flex-shrink: 0; /* Mencegah gambar menyusut/gepeng */
}

.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Gambar terpotong rapi proporsional */
  transition: transform 0.5s ease;
}

/* --- EFEK HOVER (GELAP & TEKS MUNCUL) --- */
.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75); /* Membuat efek gelap di atas gambar */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;

  /* Kondisi Awal: Tersembunyi (Transparan & Turun Kebawah Sedikit) */
  opacity: 0;
  transform: translateY(15px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

/* Trigger saat Card di-hover */
.gallery-card:hover img {
  transform: scale(1.08); /* Efek gambar sedikit zoom-in */
}

.gallery-card:hover .card-overlay {
  opacity: 1; /* Munculkan overlay gelap */
  transform: translateY(0); /* Angkat teks ke posisi asli */
}

/* Desain Teks di dalam Overlay */
.card-overlay h3 {
  color: #fd9343; /* Aksen warna Oren */
  font-family: "Inter", sans-serif;
  font-size: 1.2rem;
  margin: 0 0 8px 0;
  font-weight: 600;
}

.card-overlay p {
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
  margin: 0;
  opacity: 0.8;
}

/* --- RESPONSIVE MOBILE & TABLET --- */
@media (max-width: 768px) {
  .gallery-card {
    width: 240px; /* Ukuran card diperkecil di HP agar seimbang */
    height: 150px;
  }

  .marquee-container {
    gap: 15px;
  }

  /* Percepat sedikit animasinya di HP karena layarnya lebih sempit */
  .row-left .marquee-track,
  .row-right .marquee-track {
    animation-duration: 18s;
  }

  .card-overlay h3 {
    font-size: 1rem;
  }
}

/* --- SERVICES SECTION BASE --- */
.services-section {
  background-color: #0a0a0c; /* Latar belakang body utama (lebih gelap dari card) */
  padding: 80px 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

.services-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 Kolom di Desktop */
  gap: 25px; /* Jarak antar kartu */
  width: 100%;
  max-width: 1200px;
}

/* --- STYLE KARTU (#0f0f0f) --- */
.service-card {
  background-color: #0f0f0f; /* Warna diubah dari putih ke #0f0f0f sesuai request */
  border: 1px solid rgba(255, 255, 255, 0.05); /* Border tipis transparan */
  border-radius: 20px;
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Konten rata kiri sesuai gambar */
  text-align: left;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
}

/* --- ICON WRAPPER --- */
.card-icon-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background-color: rgba(
    253,
    147,
    67,
    0.1
  ); /* Background oren transparan halus */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 25px;
}

.card-icon-wrapper i {
  font-size: 1.5rem;
  color: #fd9343; /* Warna ikon Oren utama */
}

/* --- TEXT STYLE --- */
.card-title {
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 15px 0;
}

.card-description {
  color: #a0a5b0; /* Abu-abu halus agar teks nyaman dibaca */
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 30px 0;
  flex-grow: 1; /* Memaksa tombol selalu sejajar di paling bawah */
}

/* --- TOMBOL (LINK BUTTON) --- */
.card-btn {
  color: #fd9343; /* Teks tombol warna oren */
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s ease;
}

.card-btn i {
  transition: transform 0.3s ease;
}

/* --- HOVER EFFECT (PROFESIONAL) --- */
.service-card:hover {
  transform: translateY(-8px);
  border-color: rgba(253, 147, 67, 0.3); /* Border menyala oren tipis */
  box-shadow: 0 15px 35px rgba(253, 147, 67, 0.05); /* Efek glow oren sangat halus */
}

.service-card:hover .card-btn i {
  transform: translateX(5px); /* Efek panah bergeser ke kanan saat dihover */
}

/* --- VARIANT: KARTU YANG AKTIF/HIGHLIGHTED (Kartu Tengah) --- */
.service-card.active {
  border-color: rgba(253, 147, 67, 0.4);
  box-shadow: 0 15px 35px rgba(253, 147, 67, 0.1);
}

.service-card.active .card-icon-wrapper {
  background-color: #fd9343; /* Background ikon full oren */
}

.service-card.active .card-icon-wrapper i {
  color: #ffffff; /* Ikon menjadi putih */
}

/* --- RESPONSIVE MOBILE & TABLET --- */
@media (max-width: 992px) {
  .services-container {
    grid-template-columns: repeat(2, 1fr); /* 2 Kolom untuk ukuran tablet */
  }
}

@media (max-width: 768px) {
  .services-section {
    padding: 50px 15px;
  }

  .services-container {
    grid-template-columns: 1fr; /* 1 Kolom vertikal untuk layar HP */
    gap: 20px;
  }

  .service-card {
    padding: 35px 25px; /* Sedikit memperkecil padding di HP */
  }

  .card-title {
    font-size: 1.25rem;
  }
}
/* --- Container Pembungkus Footer --- */
.footer-wrapper {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: 60px 40px 20px 40px;
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #ffffff 180px,
    #0f0f0f 180px,
    #0f0f0f 100%
  );
  color: #ffffff;
  /* Trik gradasi di atas agar setengah bagian atas putih mengikuti background luar kartu CTA */
}

/* --- GRID KARTU CTA ATAS --- */
.cta-container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto 80px auto;
  position: relative;
  z-index: 10;
}

.cta-card {
  border-radius: 12px;
  padding: 45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  min-height: 280px;
}

.btn-dark {
  background-color: #1c1b18;
  color: #ffffff;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.85rem;
  align-self: flex-start;
  transition: opacity 0.2s;
}

.btn-dark:hover {
  opacity: 0.9;
}

/* Kartu Kanan (Cokelat + Gambar) */
.card-brown {
  background-color: #fd8221; /* Cokelat gelap hangat */
  color: #ffffff;
  padding: 0; /* Di-nol kan untuk layout split gambar */
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.card-text-content {
  flex: 1.2;
  padding: 45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card-text-content h2 {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 15px;
  line-height: 1.2;
}

.card-text-content p {
  color: #d1c9be;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 25px;
}

.btn-outline {
  border: 1px solid #ffffff;
  color: #ffffff;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.85rem;
  align-self: flex-start;
  transition:
    background 0.2s,
    color 0.2s;
}

.btn-outline:hover {
  background-color: #ffffff;
  color: #534b42;
}

/* Bagian Gambar Kran Dapur */
.card-image-bg {
  flex: 1;
  background-image: url("https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=600&q=80"); /* Gambar placeholder kran dapur modern premium */
  background-size: cover;
  background-position: center;
  position: relative;
}

/* Efek overlay gelap lembut pada gambar kran dapur agar blend dengan kartu */
.card-image-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    #fd8221 0%,
    rgba(185, 103, 9, 0.2) 100%
  );
}

/* --- KONTEN SEKSI FOOTER BAWAH --- */
.footer-main-content {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
  color: #ffffff;
}

/* Bagian Logo Tengah */
.footer-brand-section {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 60px auto;
  color: #ffffff;
}

.brand-logo {
  margin-bottom: 15px;
  color: #ffffff; /* Warna logo oren untuk kontras dengan latar belakang gelap */
}

.footer-brand-section h3 {
  font-size: 1.25rem;
  color: #1c1b18;
  font-weight: 700;
  margin-bottom: 15px;
  letter-spacing: 0.5px;
  color: #ffffff;
}

.brand-desc {
  color: #ffffff;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Grid Menu Links & Newsletter */
.footer-links-grid {
  justify-content: center;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Kolom newsletter dibuat lebih lebar */
  gap: 40px;
  margin-bottom: 80px;
  color: #ffffff;
}

.hero-social {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 1.2rem;
  color: #ffff;
  justify-content: center;
}

.hero-linkedin,
.hero-facebook,
.hero-instagram,
.hero-youtube,
.hero-twitter {
  position: relative; /* Wajib ada */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px; /* Sesuaikan ukuran */
  height: 45px;
  background-color: #0f0f0f;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  overflow: hidden; /* Agar gradasi tidak keluar dari lingkaran */
  z-index: 1;
  transition: border-color 0.3s ease;
}

/* Lapisan Gradasi Instagram */
.hero-instagram::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
  opacity: 0; /* Sembunyi di awal */
  transition: opacity 0.4s ease; /* Nah, opacity bisa di-animasi! */
  z-index: -1; /* Di belakang ikon */
}

/* Saat Hover */
.hero-instagram:hover::before {
  opacity: 1; /* Muncul perlahan */
}

.hero-instagram:hover {
  border-color: transparent;
}

.hero-linkedin {
  background-color: #0f0f0f;
  padding: 0.5rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: background-color 0.3s ease;
}

.hero-linkedin:hover {
  background-color: #1877f2;
  border-color: #1877f2;
}

.hero-facebook {
  background-color: #0f0f0f;
  padding: 0.5rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: background-color 0.3s ease;
}

.hero-facebook:hover {
  background-color: #1877f2;
  border-color: #1877f2;
}

.hero-youtube {
  background-color: #0f0f0f;
  padding: 0.5rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: background-color 0.3s ease;
}

.hero-youtube:hover {
  background-color: #ff0000;
  border-color: #ff0000;
}

.hero-twitter {
  background-color: #0f0f0f;
  padding: 0.5rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: background-color 0.3s ease;
}

.hero-twitter:hover {
  background-color: #1da1f2;
  border-color: #1da1f2;
}

.footer-column h4 {
  color: #1c1b18;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: #ffffff;
}

.footer-column a {
  display: block;
  color: #6e6b64;
  text-decoration: none;
  font-size: 0.88rem;
  margin-bottom: 12px;
  transition: color 0.2s;
  color: #ffffff;
}

.footer-column a:hover {
  color: #1c1b18;
}

.logo-footer {
  width: 120px;
  height: auto;
}

/* Form Input Newsletter */
.newsletter-col h4 {
  margin-bottom: 15px;
}

.newsletter-form {
  display: flex;
  background-color: #ffffff;
  border-radius: 6px;
  padding: 4px;
  margin-bottom: 12px;
  border: 1px solid #dcd7cd;
}

.newsletter-form input {
  flex: 1;
  border: none;
  padding: 12px 16px;
  font-size: 0.88rem;
  outline: none;
  background: transparent;
}

.newsletter-form button {
  background-color: #1c1b18;
  color: #ffffff;
  border: none;
  padding: 0 22px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: opacity 0.2s;
}

.newsletter-form button:hover {
  opacity: 0.9;
}

/* Ceklis Persetujuan Kebijakan */
.checkbox-container {
  display: block;
  position: relative;
  padding-left: 22px;
  cursor: pointer;
  font-size: 0.78rem;
  color: #6e6b64;
  line-height: 1.4;
  user-select: none;
}

.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: 2px;
  left: 0;
  height: 14px;
  width: 14px;
  background-color: transparent;
  border: 1px solid #6e6b64;
  border-radius: 3px;
}

.checkbox-container input:checked ~ .checkmark {
  background-color: #1c1b18;
  border-color: #1c1b18;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

.checkbox-container .checkmark:after {
  left: 4px;
  top: 1px;
  width: 3px;
  height: 7px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox-container a {
  display: inline;
  text-decoration: underline;
  font-size: inherit;
  color: inherit;
}

/* Baris Hak Cipta paling bawah */
.footer-copyright {
  text-align: center;
  font-size: 0.8rem;
  color: #8c887f;
  border-top: 1px solid #dcd7cd;
  padding-top: 25px;
}

/* --- TEKS LATAR BELAKANG RAKSASA "Purely" --- */
.giant-bg-text {
  position: absolute;
  opacity: 0.05;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 19vw; /* Ukuran dinamis mengikuti lebar viewport */
  font-weight: 700;
  color: #dad4c9; /* Warna abu-abu kecokelatan samar menyatu ke background bawah */
  z-index: 1;
  pointer-events: none;
  user-select: none;
  line-height: 0.8;
}

/* ================= RESPONSIVE MOBILE BREAKPOINTS ================= */

@media (max-width: 992px) {
  .cta-container {
    grid-template-columns: 1fr; /* Menumpuk vertikal di tablet/HP */
  }

  .footer-links-grid {
    grid-template-columns: 1fr 1fr; /* Menjadi 2 kolom di tablet */
  }
}

@media (max-width: 600px) {
  .footer-wrapper {
    padding: 40px 20px 10px 20px;
    background: linear-gradient(
      to bottom,
      #ffffff 0%,
      #ffffff 450px,
      #e4ded5 450px,
      #e4ded5 100%
    );
  }

  .cta-card {
    padding: 30px 20px;
  }

  .card-brown {
    flex-direction: column-reverse; /* Gambar pindah ke atas teks di mobile */
  }

  .card-image-bg {
    height: 180px;
    width: 100%;
  }

  .card-text-content {
    padding: 30px 20px;
  }

  .footer-links-grid {
    grid-template-columns: 1fr; /* Satu kolom penuh di HP */
    gap: 30px;
  }

  .giant-bg-text {
    font-size: 24vw;
    bottom: 5px;
  }
}

.how-section {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.card-how {
  position: relative;
  width: 300px;
  height: 400px;
  background: #1e1e1e; /* Abu-abu sangat gelap */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: 0.5s;
  overflow: hidden;
}

/* Garis cahaya saat di-hover */
.card-how::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #ff0057, #e64a19); /* Warna aksen */
  clip-path: circle(150px at 80% 20%);
  transition: 0.5s ease-in-out;
}

.card-how:hover::before {
  clip-path: circle(300px at 50% 50%); /* Menutupi card saat hover */
}

/* Content Styling */
.content-how {
  position: relative;
  padding: 20px;
  text-align: center;
  z-index: 1;
  transition: 0.5s;
}

.content-how h2 {
  font-size: 5em;
  color: rgba(255, 255, 255, 0.05);
  transition: 0.5s;
}

.card-how:hover .content-how h2 {
  color: rgba(255, 255, 255, 1);
  transform: translateY(-20px);
}

.content-how h3 {
  font-size: 1.8em;
  color: #fff;
  margin-bottom: 10px;
}

.content-how p {
  color: #999;
  line-height: 1.6;
  transition: 0.5s;
}

.card-how:hover .content-how p {
  color: #fff;
}

.content-how a {
  display: inline-block;
  margin-top: 15px;
  padding: 8px 20px;
  background: #fff;
  color: #121212;
  text-decoration: none;
  border-radius: 5px;
  font-weight: 600;
  opacity: 0; /* Sembunyi sebelum hover */
  transform: translateY(20px);
  transition: 0.5s;
}

.card-how:hover .content-how a {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive Design */
@media (max-width: 768px) {
  nav ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
  }

  nav {
    flex-direction: row; /* Tetap sejajar antara logo dan toggle */
    justify-content: space-between;
    padding: 10px 10px;
  }

  /* Pastikan list menu muncul di bawah header saat aktif */
  nav ul.active {
    position: absolute;
    margin-top: 10px;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 15px;
    padding: 20px;
  }

  .hero {
    grid-template-columns: 1fr;
    padding: 150px 20px;
    gap: 30px;
    background: #0f0f0f;
  }

  .hero h1 {
    font-size: 34px;
    line-height: 1.2;
  }

  .hero-image {
    height: 260px;
  }

  .section-title {
    font-size: 28px;
    margin-bottom: 25px;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .cta {
    padding: 30px 20px;
  }

  .footer-grid {
    flex-direction: column;
    align-items: start;
  }

  .btn-wa {
    display: none;
  }

  .btn-wa-sized {
    width: 100%;
    text-align: center;
    display: block;
  }

  .grid {
    flex-direction: column; /* Mengubah dari samping ke atas-bawah */
    text-align: center; /* Opsional: agar teks rata tengah di mobile */
  }

  .grid-images {
    width: 100%; /* Pastikan gambar mengambil lebar penuh */
  }

  .hero h1 {
    font-size: 32px; /* Ukuran font lebih proporsional */
  }
}

@media (max-width: 480px) {
  .container {
    width: 92%;
  }

  .hero h1 {
    font-size: 28px;
  }

  .btn {
    width: 100%;
    text-align: center;
  }
  .card,
  .portfolio-item {
    border-radius: 18px;
  }

  .footer-grid {
    flex-direction: column;
    align-items: start;
  }
}
.menu-toggle {
  display: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.menu-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
}

nav ul {
  transition: all 0.35s ease;
}

/* Responsive Design */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  .desc-header {
    font-size: 12px !important;
  }

  nav {
    flex-direction: row;
    flex-wrap: wrap;
  }

  nav ul {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: translateY(-10px);
  }

  nav ul.active {
    max-height: 300px;
    opacity: 1;
    transform: translateY(0);
    padding-top: 15px;
  }

  .hero {
    grid-template-columns: 1fr;
    padding: 250pxpx 20px;
    gap: 30px;
  }

  .hero h1 {
    font-size: 34px;
    line-height: 1.2;
  }

  .section-title {
    font-size: 28px;
    margin-bottom: 25px;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .cta {
    padding: 30px 20px;
  }
}

@media (max-width: 480px) {
  .container {
    width: 92%;
  }

  .desc-header {
    font-size: 12px !important;
  }

  .hero h1 {
    font-size: 28px;
  }

  .btn {
    width: 50%;
    text-align: center;
  }

  .hero-image {
    height: 220px;
    border-radius: 20px;
  }

  .card,
  .portfolio-item {
    border-radius: 18px;
  }
}