/* ==========================================================
   RESET DASAR & FONT
   ========================================================== */
:root {
  --font-sans: "Inter", sans-serif;
  --font-serif: "Playfair+Display", serif;
  --h1: "Bodoni Moda", serif;
  --h2: "Bodoni Moda", serif;
  --p: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --nav: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial,
    sans-serif;
  --cta: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial,
    sans-serif;
  --primary-color: #1a1a1a; /* Hitam elegan */
  --accent-color: #c5a059; /* Emas pudar untuk nuansa mewah */
  --text-color: #555555; /* Abu-abu untuk teks paragraf */
  --bg-light: #f9f9f9; /* Putih gading */
  --font-heading: "Playfair Display", serif; /* Font elegan untuk judul */
  --font-body: "Lato", sans-serif; /* Font bersih untuk isi */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: var(--p); /* <-- DIUBAH (Change 11) */
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #f7f7f7;
  color: #1a1a1a;
  margin: 0;
}

/* ==========================================================
   APLIKASI FONT DARI :ROOT (Change 11)
   ========================================================== */
h1 {
  font-family: var(--h1);
}
h2 {
  font-family: var(--h2);
}
nav {
  font-family: var(--nav);
}
.btn,
.btn-outline,
.btn-appointment-submit,
.newsletter-form button,
.btn-favorite,
.btn-whatsapp,
.btn-appointment {
  font-family: var(--cta);
  letter-spacing: normal; /* Mereset letter-spacing khusus */
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}
/* Custom scrollbar */
body::-webkit-scrollbar {
  width: 8px;
}
body::-webkit-scrollbar-track {
  background: #e0e0e0;
}
body::-webkit-scrollbar-thumb {
  background-color: #c7c7c7;
  border-radius: 4px;
}
.hero-static {
  width: 100%;
  height: 80vh; /* Menggunakan 80% tinggi layar */
  min-height: 500px;
  /* Ganti URL ini dengan gambar Kebaya karya Ferry Sunarto */
  background-image: url("https://images.unsplash.com/photo-1596627676537-13746ba4432b?q=80&w=1920&auto=format&fit=crop");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

/* Overlay gelap tipis agar teks (jika ada) terbaca, atau sekadar estetika */
.hero-static::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
}
/* --- Styling untuk Section Opening 1 --- */
#opening1.opening1 {
  display: flex; /* Membuat layout kiri-kanan */
  width: 100%;
  min-height: 100vh; /* Tinggi minimal setinggi layar */
  background-color: #fff;
}

/* Kolom Kiri (Teks) */
.opening1 .text-container {
  flex: 1; /* Mengambil 50% lebar */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Posisi vertikal di tengah */
  align-items: center; /* Posisi horizontal di tengah */
  padding: 100px;
  background-color: #fff;
}

.opening1 .content-wrapper {
  max-width: 700px; /* Membatasi lebar teks agar tidak terlalu panjang */
  text-align: center; /* Teks rata tengah seperti di gambar */
}

.opening1 h1 {
  font-size: 3.5rem;
  font-weight: 400;
  margin-bottom: 1.5rem;
  color: #000;
  letter-spacing: 1px;
  font-family: var(--h1);
}

.opening1 p {
  font-size: 1.3rem;
  font-family: var(--p);
  color: #555;
  margin-bottom: 2.5rem;
  line-height: 1.5;
  text-align: center;
  text-align-last: center;
}

.opening1 .discover-btn {
  text-decoration: none;
  color: #000;
  font-weight: bold;
  border-bottom: 1px solid #000; /* Garis bawah custom */
  padding-bottom: 2px;
  font-size: 1.1rem;
  transition: opacity 0.3s ease;
}

.opening1 .discover-btn:hover {
  opacity: 0.6;
}

/* Kolom Kanan (Gambar) */
.opening1 .image-container {
  flex: 1; /* Mengambil 50% lebar sisa */
  background-color: #fff; /* Warna abu-abu muda background gambar */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.opening1 .image-container img {
  width: 80%; /* Ukuran gambar relatif terhadap container */
  height: auto;
  max-height: 90vh;
  object-fit: contain; /* Memastikan seluruh gambar terlihat */
  mix-blend-mode: multiply; /* Trik agar background putih pada JPG menyatu dengan abu-abu */
}

/* --- SECTION 2: BIOGRAPHY INTRO --- */
.biography-intro-section {
  padding: 80px 0; /* Memberi ruang napas atas-bawah */
  text-align: center;
  background-color: #ffffff;
}

.biography-intro-section h2 {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-bottom: 1.5rem;
  letter-spacing: 1px;
  position: relative;
  display: inline-block;
}

/* Membuat garis emas kecil di bawah judul */
.biography-intro-section h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--accent-color);
  margin: 15px auto 0; /* Posisi di tengah bawah teks */
}

.biography-intro-section p {
  font-size: 1.1rem;
  max-width: 700px; /* Membatasi lebar teks agar enak dibaca */
  margin: 0 auto; /* Posisi teks di tengah */
  color: var(--text-color);
}

/* --- RESPONSIVE (Mobile) --- */
@media (max-width: 768px) {
  .hero-static {
    height: 50vh;
  }
  #opening1.opening1 {
    flex-direction: column; /* Tumpuk atas-bawah di layar kecil */
  }

  .opening1 .text-container,
  .opening1 .image-container {
    width: 100%;
    padding: 60px 20px;
  }

  .opening1 .image-container {
    order: -1; /* Opsional: Jika ingin gambar di atas teks pada mobile */
    min-height: 400px;
  }

  .biography-intro-section h2 {
    font-size: 2rem;
  }

  .biography-intro-section {
    padding: 50px 0;
  }
}

/* ==========================================================
   artikel page
   ========================================================== */

.news-events-section {
  padding: 80px 0;
  background-color: #fff;
  text-align: center;
}

/* Header Section News */
.news-header {
  margin-bottom: 60px;
}
.news-header h2 {
  font-family: var(--h2); /* Menggunakan font Serif (Bodoni Moda) */
  font-size: 3.5rem;
  font-weight: 400;
  color: #1a1a1a;
  margin-bottom: 1rem;
}
.news-header .subtitle {
  font-family: var(--p);
  color: #666;
  font-size: 0.95rem;
}

.news-events-section .container {
  /* Default container biasanya cuma 1200px, ini kita buat hampir full layar */
  max-width: 95%; /* Ubah jadi 100% jika ingin benar-benar mentok pinggir */
  padding: 0 20px; /* Memberi sedikit jarak aman di kiri kanan */
  margin: 0 auto;
}

/* 2. Memperkecil Jarak Antar Gambar (Gap) */
.news-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Kurangi gap agar gambar punya ruang lebih luas untuk membesar */
  /* Gap baris (50px), Gap kolom (15px - sebelumnya 30px) */
  gap: 50px 15px;
  align-items: start;
}

/* Style Item News */
.news-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

/* Wrapper Gambar */
/* Update bagian ini di style.css */

.news-image-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9; /* Sudah benar landscape lebar */
  overflow: hidden;
  margin-bottom: 25px;
  background-color: #f8f8f8;
}

.news-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Tambahkan ini agar fokus gambar tetap di tengah/atas saat di-crop */
  object-position: top center;
  transition: transform 0.6s ease;
}
/* Efek Zoom Halus saat Hover */
.news-item:hover .news-image-wrapper img {
  transform: scale(1.05);
}

/* Judul Artikel */
.news-title {
  font-family: var(--h2); /* Font Serif agar elegan */
  font-size: 1.5rem;
  font-weight: 400;
  color: #1a1a1a;
  margin-bottom: 15px;
  line-height: 1.3;
  padding: 0 10px;
  /* --- PROPERTI PEMBATAS 2 BARIS --- */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Maksimal 2 baris */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Optional: Tambahkan min-height agar kartu tetap rata jika judul cuma 1 baris */
  min-height: 2.6em;
}

/* Deskripsi Artikel */
.news-desc {
  font-family: var(--p); /* Font Sans-serif */
  font-size: 0.9rem;
  color: #7b8487;
  line-height: 1.5;
  margin-bottom: 20px;
  padding: 0 15px;
  /* Membatasi teks maksimal 3 baris */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Link Discover */
.discover-link {
  font-family: var(--cta);
  font-size: 0.85rem;
  font-weight: 600;
  color: #1a1a1a;
  text-decoration: none;
  border-bottom: 1px solid #1a1a1a; /* Garis bawah solid */
  padding-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: opacity 0.3s;
}

.discover-link:hover {
  opacity: 0.6;
}

/* ==========================================================
   RESPONSIVE (Tablet & Mobile)
   ========================================================== */
@media (max-width: 1024px) {
  .news-grid {
    /* Tablet: Otomatis jadi 2 kolom */
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 20px;
  }
}

@media (max-width: 767px) {
  .news-grid {
    /* HP: Otomatis jadi 1 kolom (turun ke bawah semua) */
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .news-header h2 {
    font-size: 2rem;
  }
}

/* ==========================================================
   detail artikel page
    ========================================================== */
/* ==========================================================
   ARTICLE DETAIL PAGE STYLES
   ========================================================== */

/* Layout Dasar Halaman Artikel */
.article-page {
  padding-top: 130px; /* Memberi jarak dari Navbar yang Fixed */
  padding-bottom: 80px;
  background-color: #fff;
}

/* 1. Header Artikel (Judul & Intro) */
.article-header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 60px; /* Jarak ke gambar bawah */
  padding: 0 20px;
}

.article-header h1 {
  font-family: var(--h2); /* Menggunakan font Serif (Bodoni Moda) */
  font-size: 3.5rem; /* Ukuran judul besar */
  font-weight: 400;
  color: #1a1a1a;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.article-header .article-intro {
  font-family: var(--p); /* Font Sans-serif (Inter) */
  font-size: 1.1rem;
  color: #666;
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;
}

/* 2. Media Utama (Gambar Besar) */
.article-media {
  width: 100%;
  max-width: 1400px; /* Batas lebar agar tidak terlalu full di layar ultra-wide */
  margin: 0 auto 80px; /* Jarak ke teks konten */
}

/* Style Gambar Hero */
.hero-image {
  width: 100%;
  height: auto;
  display: block;
  /* Opsional: Batasi tinggi jika gambar terlalu panjang ke bawah */
  max-height: 85vh;
  object-fit: cover;
  object-position: top center; /* Fokus crop ke bagian atas */
}

/* 3. Konten Teks Artikel */
.article-content {
  max-width: 800px; /* Lebar teks lebih sempit agar nyaman dibaca */
  margin: 0 auto 100px;
  text-align: center; /* Teks rata tengah (Center Aligned) */
  padding: 0 20px;
}

.article-content p {
  font-family: var(--p);
  font-size: 1rem;
  color: #555;
  text-align: justify;
  line-height: 2; /* Spasi antar baris longgar untuk kesan elegan */
  margin-bottom: 2.5rem;
}

.article-content .highlight-text {
  font-style: italic;
  color: #888;
  margin-top: 3rem;
  font-size: 0.95rem;
}

/* 4. Footer CTA (Find the Perfect Present) */
.article-footer-cta {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid transparent;
  margin-bottom: 40px;
}

.article-footer-cta h2 {
  font-family: var(--h2);
  font-size: 2.2rem;
  margin-bottom: 1rem;
  font-weight: 400;
  color: #1a1a1a;
}

.article-footer-cta .cta-link {
  font-family: var(--p);
  color: #666;
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 1px solid #ccc; /* Garis bawah tipis */
  padding-bottom: 3px;
  transition: all 0.3s;
}

.article-footer-cta .cta-link:hover {
  color: #1a1a1a;
  border-bottom-color: #1a1a1a;
}

/* --- RESPONSIVE (Mobile) --- */
@media (max-width: 768px) {
  .article-page {
    padding-top: 100px;
  }
  .article-header h1 {
    font-size: 2.2rem;
  }
  /* Di mobile, teks mungkin lebih rapi jika rata kiri-kanan (justify) atau tetap center */
  .article-content p {
    text-align: justify;
    text-align-last: center; /* Baris terakhir tetap di tengah */
  }
}

/* ==========================================================
   LIST ARTICLE PAGE SPECIFIC STYLES
   ========================================================== */

/* Memberi jarak atas karena navbar fixed */
.list-article-page {
  padding-top: 100px; /* Sesuaikan jika navbar Anda lebih tinggi */
  background-color: #fff;
}

/* Di halaman list, kita mungkin ingin gap baris lebih besar */
.list-article-page .news-grid {
  row-gap: 60px; /* Jarak vertikal antar baris artikel lebih lega */
}

/* Optional: Tombol Load More */
.btn-outline {
  padding: 12px 30px;
  background: transparent;
  font-family: var(--cta);
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-outline:hover {
  background-color: #fff;
  color: black !important;
}
/* ==========================================================
   end artikel page
    ========================================================== */

/* ==========================================================
   PRELOADER (DIUBAH KE GRID)
   ========================================================== */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  z-index: 9999;
  display: grid;
  place-items: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.75s ease, visibility 0.75s ease;
}
#preloader img {
  width: 150px;
  animation: pulse 1.5s infinite ease-in-out;
}
#preloader.hidden {
  opacity: 0;
  visibility: hidden;
}
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

html.session-visited #preloader {
  display: none !important;
}

/* ==========================================================
   NAVBAR (DIUBAH KE GRID)
   ========================================================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  background-color: transparent;
  box-shadow: none;
  transform: translateY(0);
  transition: all 0.3s ease-in-out;
}
.navbar.hidden {
  transform: translateY(-100%);
}
.navbar.scrolled {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.navbar .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 1rem;
  position: relative;
  height: 90px;
  box-sizing: border-box;
}
.nav-left {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-self: start;
}
.menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  color: #fff; /* Default PUTIH */
  margin-right: 1rem;
}
.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
}
.nav-links a {
  text-decoration: none;
  color: #fff; /* Default PUTIH */
  transition: color 0.3s;
}
.nav-links a:hover {
  color: #ccc;
}
/* Saat di-scroll, ikon kembali hitam */
.navbar.scrolled .menu-toggle,
.navbar.scrolled .nav-links a {
  color: #1a1a1a;
}
.nav-logo a {
  text-decoration: none;
  color: #1a1a1a;
  transition: color 0.3s;
}
.nav-logo img {
  height: 55px;
  width: auto;
  vertical-align: middle;
}
.nav-logo a:hover {
  color: #666;
}
.nav-right {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 1.5rem;
  justify-self: end;
}
/* ==========================================================
   MODIFIKASI HORIZONTAL SCROLL (HOME PAGE COLLECTION)
   ========================================================== */

/* Ubah Container menjadi Flexbox Horizontal */
#featured-products-grid {
  display: flex; /* Mengubah dari Grid ke Flex */
  flex-wrap: nowrap; /* Mencegah item turun ke baris baru */
  overflow-x: auto; /* Mengaktifkan scroll horizontal */
  gap: 30px; /* Jarak antar kartu */
  padding-bottom: 25px; /* Memberi ruang untuk scrollbar di bawah */
  scroll-behavior: smooth; /* Efek geser halus */
  -webkit-overflow-scrolling: touch; /* Scroll smooth untuk iOS */
  cursor: grab; /* Mengubah kursor jadi tangan (indikator geser) */
}

/* Mengatur Ukuran Kartu Produk */
#featured-products-grid .product-item {
  /* RUMUS: (100% Lebar Layar - Total Gap) / 4 Item 
     Total Gap = 30px * 3 celah = 90px
  */
  min-width: calc((100% - 90px) / 4);
  width: calc((100% - 90px) / 4);
  flex: 0 0 auto; /* Mencegah item mengecil (shrink) */
}

/* Custom Scrollbar (Warna Emas/Tema) */
#featured-products-grid::-webkit-scrollbar {
  height: 3px; /* Tinggi scrollbar horizontal */
}

#featured-products-grid::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 4px;
}

#featured-products-grid::-webkit-scrollbar-thumb {
  background-color: var(--accent-color); /* Warna Emas (#c5a059) */
  border-radius: 4px;
}

#featured-products-grid::-webkit-scrollbar-thumb:hover {
  background-color: #b3904e;
}

/* --- Responsive Mobile & Tablet --- */
@media (max-width: 1024px) {
  #featured-products-grid .product-item {
    /* Di Tablet/Laptop Kecil: Tampilkan 3 item */
    min-width: calc((100% - 60px) / 3);
  }
}

@media (max-width: 768px) {
  #featured-products-grid .product-item {
    /* Di HP: Tampilkan 1.5 item agar user tahu bisa discroll */
    min-width: 260px;
  }
}
/* ==========================================================
   MENU OVERLAY (DIUBAH KE GRID)
   ========================================================== */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #fff;
  z-index: 100;
  transform: translateX(-100%);
  transition: transform 0.4s ease-in-out;
  overflow-y: auto;
  padding: 1rem;
}
.menu-overlay.open {
  transform: translateX(0);
}
.menu-overlay .menu-header {
  display: grid;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e0e0e0;
  position: relative;
  min-height: 60px;
}
.menu-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  color: #1a1a1a;
  justify-self: start;
}
.menu-logo img {
  height: 25px;
  width: auto;
  max-width: 100%;
  display: block;
}
.menu-overlay .menu-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding-bottom: 1rem;
}
.menu-overlay .main-menu {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}
.menu-overlay .main-menu > li {
  border-bottom: 1px solid #e0e0e0;
}
.menu-overlay .main-menu a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 1rem 0;
  text-decoration: none;
  color: #1a1a1a;
  font-weight: 500;
}

/* ==========================================================
   MENU OVERLAY (Tambahan Gaya Submenu Dinamis)
   ========================================================== */
.menu-overlay .main-menu .footer-submenu.submenu-dynamic {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 0.5rem;
  padding-left: 1rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
  border-top: none;
}
.menu-overlay .main-menu .footer-submenu.submenu-dynamic.open {
  max-height: 500px;
  padding-bottom: 0.5rem;
}
.menu-overlay .main-menu .footer-submenu.submenu-dynamic li {
  border-bottom: none;
}
.menu-overlay .main-menu .footer-submenu.submenu-dynamic li a {
  padding: 0.5rem 0;
  font-weight: 400;
  font-size: 0.95rem;
  color: #555;
  display: block;
  grid-template-columns: 1fr;
}
.menu-overlay .main-menu li.has-submenu a .fa-chevron-right,
.menu-overlay .main-menu li.has-submenu a .fa-chevron-down {
  transition: transform 0.3s ease-in-out;
}
.menu-overlay .main-menu li.has-submenu a.active .fa-chevron-down {
  transform: rotate(180deg);
}
.menu-overlay .main-menu li.has-submenu a.active {
  border-bottom: none;
}
.menu-overlay .main-menu li.has-submenu {
  border-bottom: 1px solid #e0e0e0;
}
.menu-overlay .main-menu li.has-submenu.open {
  border-bottom: none;
}

/* ==========================================================
   HERO & COLLECTION (DIUBAH KE GRID)
   ========================================================== */
.hero-static {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  height: 100vh;
  min-height: 600px;
  color: #fff;
  padding: 1rem;
  overflow: hidden;
}
.hero-static::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 2;
}
.hero-video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}
.hero-video-wrapper video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
}
.hero-static-content {
  position: relative;
  z-index: 3;
}
.hero-static-content h1 {
  /* font-family: var(--font-serif); <-- Dihapus, ditangani global */
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 2rem;
}
.hero-static-content .btn-outline {
  display: inline-block;
  padding: 0.75rem 2rem;
  border: 1px solid #fff;
  text-decoration: none;
  color: #fff;
  /* font-family: var(--font-sans); <-- Dihapus, ditangani global */
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  transition: all 0.3s ease;
}
.hero-static-content .btn-outline:hover {
  background-color: #fff;
  color: #1a1a1a;
}
.collection-section {
  padding: 5rem 0;
}
.collection-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 500;
  margin-bottom: 2.5rem;
  letter-spacing: 0.1em;
  color: #1a1a1a;
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
}
.product-item {
  position: relative;
  text-decoration: none;
  color: #1a1a1a;
}
.product-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
}
.product-item .wishlist-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1.2rem;
  color: #ccc;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  display: none;
}
.product-item .wishlist-icon:hover {
  color: #ff0000;
}
.product-item .product-name {
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  margin-top: 1rem;
  color: #1a1a1a;
}

/* --- Judul Produk --- */
.product-title {
  text-align: left;
  margin-top: 130px;
  margin-bottom: 40px;
}
.product-title h1 {
  font-size: 1.75rem;
  margin: 0;
}
.product-title p {
  font-size: 2rem;
  color: #666;
  margin-top: 10px;
}

/* --- Konten Utama Produk (DIUBAH KE GRID) --- */
.product-main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  margin-bottom: 50px;
}

/* --- Kolom Kiri: Galeri Gambar (DIUBAH KE GRID) --- */
.product-gallery {
  display: grid;
  grid-template-rows: auto 1fr;
}
.main-image-wrapper {
  position: relative;
  background-color: #f9f9f9;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  height: 500px;
  display: grid;
  place-items: center;
  font-style: italic;
  color: #aaa;
  overflow: hidden;
}

/* Placeholder untuk gambar utama */
.main-image-placeholder {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
}

/* === MODAL GALERI GAMBAR (DIUBAH KE GRID) === */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);
}
.modal.active {
  display: grid;
  place-items: center;
}
.modal-content-wrapper {
  position: relative;
  max-width: 500px; /* <-- DIUBAH (Change 10) */
  max-height: 80vh;
  margin: auto;
  display: grid;
  place-items: center;
  background-color: #fefefe;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.modal-image {
  max-width: 100%; /* <-- DIUBAH (Change 10) */
  max-height: 100%; /* <-- DIUBAH (Change 10) */
  object-fit: contain;
  transition: transform 0.3s ease-out;
  cursor: zoom-in;
  user-select: none;
}
.modal-image.zoomed {
  cursor: grab;
  object-fit: cover;
}
.modal-image.zoomed.grabbing {
  cursor: grabbing;
}
.close-button {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
  z-index: 1001;
}
.close-button:hover,
.close-button:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
.modal-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 24px;
  user-select: none;
  transition: background-color 0.3s ease;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
}
.modal-arrow:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
.modal-arrow-left {
  left: 10px;
}
.modal-arrow-right {
  right: 10px;
}
.modal-content-wrapper.is-zoomed .modal-arrow {
  pointer-events: none;
  opacity: 0.3;
}
.modal-thumbnails {
  display: none;
}
.modal-thumbnails .thumbnail-item {
  width: 80px;
  height: 80px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s ease;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.modal-thumbnails .thumbnail-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.modal-thumbnails .thumbnail-item.active {
  border-color: #007bff;
}
@media (max-width: 768px) {
  .modal-content-wrapper {
    max-width: 95vw;
    max-height: 70vh;
  }
  .modal-arrow {
    padding: 8px 12px;
    font-size: 20px;
    width: 35px;
    height: 35px;
  }
  .modal-arrow-left {
    left: 5px;
  }
  .modal-arrow-right {
    right: 5px;
  }
  .close-button {
    font-size: 30px;
    top: 10px;
    right: 15px;
  }
  .modal-thumbnails {
    gap: 5px;
    margin-top: 10px;
  }
  .modal-thumbnails .thumbnail-item {
    width: 60px;
    height: 60px;
  }
}
@media (max-width: 480px) {
  .modal-thumbnails .thumbnail-item {
    width: 50px;
    height: 50px;
  }
}
.nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: transparent;
  border: none;
  width: 60px;
  height: 60px;
  font-size: 36px;
  color: #333;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 0.2s ease;
}
.arrow-left {
  left: 10px;
}
.arrow-right {
  right: 10px;
}
/* --- Wrapper Galeri Thumbnail --- */
.thumbnail-gallery {
  display: flex; /* Ubah dari Grid ke Flex agar horizontal */
  flex-wrap: nowrap; /* Pastikan tidak turun ke baris baru */
  overflow-x: auto; /* Aktifkan scroll horizontal */
  gap: 15px; /* Jarak antar gambar */
  margin-top: 15px;
  padding-bottom: 10px; /* Ruang untuk scrollbar */
  scroll-behavior: smooth; /* Scroll halus */
  -webkit-overflow-scrolling: touch; /* Scroll smooth di iOS */
}

/* --- Item Thumbnail Individual --- */
.thumbnail {
  /* RUMUS: (100% lebar container - (Jarak Gap * 2)) / 3 Item */
  /* Ini memastikan tepat 3 item yang tampil di layar */
  flex: 0 0 calc((100% - 30px) / 3);
  width: calc((100% - 30px) / 3);

  /* Aspek rasio agar gambar tetap proporsional (Portrait) */
  aspect-ratio: 3 / 4;
  height: auto; /* Biarkan tinggi menyesuaikan rasio */

  background-color: #f0f0f0;
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.thumbnail-gallery {
  /* Pastikan cursor berubah agar user tahu bisa digeser */
  cursor: grab;
  user-select: none; /* Mencegah blok teks/gambar saat drag */
}

.thumbnail-gallery.active {
  cursor: grabbing; /* Cursor menggenggam saat sedang digeser */
  cursor: -webkit-grabbing;
}
/* --- Styling Scrollbar (Opsional: Agar terlihat rapi) --- */
.thumbnail-gallery::-webkit-scrollbar {
  height: 3px; /* Tinggi scrollbar horizontal */
}

.thumbnail-gallery::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.thumbnail-gallery::-webkit-scrollbar-thumb {
  background: #c1a265; /* Warna Emas sesuai tema */
  border-radius: 3px;
}

.thumbnail-gallery::-webkit-scrollbar-thumb:hover {
  background: #a38750;
}

/* --- Kolom Kanan: Info Produk (DIUBAH KE GRID) --- */
.product-info {
  padding-left: 20px;
}
.action-buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 25px;
  max-width: 350px;
}
.btn {
  padding: 18px 25px;
  border: none;
  border-radius: 30px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  text-transform: uppercase;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-favorite {
  background-color: #d1b459;
  color: #fff;
  font-size: 0.95rem;
  display: none;
  /* font-family & letter-spacing dihapus (Change 11) */
}
.btn-whatsapp {
  background-color: #d1b459;
  color: #fff;
  font-size: 0.95rem;
  /* font-family & letter-spacing dihapus (Change 11) */
}
.btn-appointment {
  background-color: #3e4a3e;
  color: #fff;
  font-size: 0.95rem;
  /* font-family & letter-spacing dihapus (Change 11) */
}
.product-description p,
.product-sizes p {
  font-family: var(--font-sans);
  color: #555;
  line-height: 1.6;
}
.product-sizes {
  margin-top: 20px;
  font-weight: bold;
}

/* --- Gaya Tab Deskripsi & Spesifikasi (DIUBAH KE GRID) --- */
.product-details-tabs {
  font-family: var(--font-sans);
  margin-top: 40px;
  width: 100%;
}
.tab-header {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  gap: 24px;
  border-bottom: 1px solid #e0e0e0;
}
.tab-link {
  background: none;
  border: none;
  font-size: 1.1rem;
  font-weight: 500;
  font-family: var(--font-sans);
  color: #888;
  padding: 0 0 10px 0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  position: relative;
  top: 1px;
  transition: color 0.2s;
}
.tab-link:hover {
  color: #1a1a1a;
}
.tab-link.active {
  color: #1a1a1a;
  font-weight: 700;
  border-bottom: 2px solid #1a1a1a;
}
.tab-content-container {
  padding-top: 20px;
}
.tab-content {
  display: none;
  line-height: 1.6;
  color: #555;
}
.tab-content.active {
  display: block;
}
.tab-content .product-sizes {
  margin-top: 0;
}

/* --- Appointment Modal (DIUBAH KE GRID) --- */
.appointment-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: grid;
  place-items: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.appointment-modal-overlay.show {
  opacity: 1;
  visibility: visible;
}
.appointment-modal-content {
  background-color: #fff;
  padding: 2.5rem 2rem;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  position: relative;
  width: 90%;
  height: 90%;
  max-width: 500px;
  max-height: 80vh;
  transform: translateY(-20px);
  transition: transform 0.3s ease;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: none;
}
.appointment-modal-overlay.show .appointment-modal-content {
  transform: translateY(0);
}
.appointment-modal-content h2 {
  margin-top: 0;
  margin-bottom: 10px;
  /* font-family: var(--font-serif); <-- Dihapus, ditangani global */
  text-align: center;
}
.appointment-modal-content p {
  margin-bottom: 20px;
  color: #666;
  font-size: 0.9rem;
  text-align: center;
}
.modal-close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 2rem;
  color: #aaa;
  cursor: pointer;
  line-height: 1;
}
.modal-close-btn:hover {
  color: #333;
}
.form-group {
  margin-bottom: 1.2rem;
}
.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  font-size: 0.9rem;
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-family: var(--font-sans);
  font-size: 1rem;
  box-sizing: border-box;
}
.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

/* ==========================================================
   CUSTOM RANGE SLIDER (VOLUME/BUDGET)
   ========================================================== */
.range-container {
  width: 100%;
  margin-bottom: 1.5rem;
}

.range-label-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.range-label-title {
  font-weight: 500;
  font-size: 0.9rem;
  color: #333;
}

.range-value-display {
  font-family: var(--font-sans);
  font-weight: 700;
  color: #c5a059; /* Warna Emas */
  font-size: 1rem;
}

/* Styling Input Range */
input[type="range"].custom-range {
  -webkit-appearance: none; /* Hapus gaya default browser */
  width: 100%;
  height: 6px;
  background: #e0e0e0;
  border-radius: 5px;
  outline: none;
  cursor: pointer;
  margin: 10px 0;
}

/* Styling Thumb (Tombol Geser) - Webkit (Chrome, Safari, Edge) */
input[type="range"].custom-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #3e4a3e; /* Warna Hijau Gelap butik */
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}

input[type="range"].custom-range::-webkit-slider-thumb:hover {
  background: #c5a059; /* Berubah Emas saat hover */
  transform: scale(1.1);
}

/* Styling Thumb - Firefox */
input[type="range"].custom-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #3e4a3e;
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: pointer;
}

/* Label Min/Max di bawah slider */
.range-min-max {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #999;
  margin-top: -5px;
}
.btn-appointment-submit {
  background-color: #3e4a3e;
  color: #fff;
  /* font-family & letter-spacing dihapus (Change 11) */
  font-size: 0.95rem;
  padding: 14px 20px;
  width: 100%;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s;
}
.btn-appointment-submit:hover {
  background-color: #2a332a;
}

/* --- Wishlist Counter (DIUBAH KE GRID) --- */
.wishlist-icon-header {
  position: relative;
}
.wishlist-count {
  position: absolute;
  top: -8px;
  right: -10px;
  background-color: #ff0000;
  color: white;
  font-size: 0.7rem;
  font-weight: bold;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  line-height: 1;
  padding: 1px;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.5);
  transition: all 0.2s ease;
}
.wishlist-count.show {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.btn-favorite.active {
  background-color: #3e4a3e;
  color: #fff;
  border: 1px solid #3e4a3e;
}
/* penutup detail product */

/* ==========================================================
   FOOTER (DIUBAH KE GRID)
   ========================================================== */
.footer-simple {
  text-align: center;
  padding: 2rem 1rem;
  margin-top: 3rem;
  background-color: #fff;
  border-top: 1px solid #e0e0e0;
  font-size: 0.9rem;
  color: #666;
}
.main-footer {
  background-color: #fff;
  color: #1a1a1a;
  padding: 2rem 1rem 1rem;
  border-top: 1px solid #e0e0e0;
  font-size: 0.8rem;
}
.main-footer .container {
  max-width: 1400px;
}
.none-decoration {
  text-decoration: none;
  color: #1a1a1a;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
  margin-bottom: 3rem;
}
.footer-column h3 {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  text-transform: none;
}
.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-column ul li {
  margin-bottom: 0.75rem;
}
.footer-column a {
  text-decoration: none;
  color: #1a1a1a;
  font-size: 1rem;
  transition: color 0.3s;
}
.footer-column a:hover {
  color: #666;
}
.footer-column a i {
  font-size: 1rem;
  margin-left: 0.3rem;
  opacity: 0.7;
}
.footer-bottom {
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
  margin-bottom: 1.5rem;
}

.footer-copyright {
  text-align: center;
  font-family: var(--p);
  font-size: 0.75rem;
  color: #999;
  padding-bottom: 1rem;
  margin-top: 1rem;
}

.footer-copyright a {
  text-decoration: none;
  color: inherit;
  transition: color 0.3s ease;
}

.footer-copyright a:hover {
  color: #1a1a1a;
}

@media (max-width: 767px) {
  .footer-bottom {
    margin-bottom: 1rem;
    border-bottom: none;
  }

  .footer-copyright {
    margin-top: 0;
    padding-top: 0;
  }
}
.newsletter-form .input-wrapper {
  position: relative;
  margin-bottom: 1rem;
}
.newsletter-form input {
  width: 100%;
  border: none;
  border-bottom: 1px solid #1a1a1a;
  padding: 0.5rem 0;
  background-color: transparent;
  color: #1a1a1a;
  outline: none;
}
.newsletter-form input:focus + label,
.newsletter-form input:not(:placeholder-shown) + label {
  top: -1rem;
  font-size: 0.7rem;
  color: #666;
}
.newsletter-form label {
  position: absolute;
  top: 0.5rem;
  left: 0;
  color: #666;
  pointer-events: none;
  transition: 0.2s ease-out;
}
.newsletter-form button {
  padding: 0.7rem 1.5rem;
  background-color: #1a1a1a;
  color: #fff;
  font-weight: bold;
  border-radius: 0;
  transition: background-color 0.3s;
  border: 1px solid #1a1a1a;
  cursor: pointer;
  width: auto;
  margin-top: 0;
  text-transform: uppercase;
  font-size: 0.7rem;
}
.newsletter-form button:hover {
  background-color: #555;
  border-color: #555;
}
.footer-column .has-submenu > a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
}
.footer-toggle .fa-chevron-down {
  transition: transform 0.3s ease-in-out;
  font-size: 0.6rem;
}
.footer-toggle.active .fa-chevron-down {
  transform: rotate(180deg);
}
.footer-submenu {
  list-style: none;
  padding-left: 1rem;
  margin-top: 0.5rem;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease-out;
}
.footer-submenu.open {
  max-height: 200px;
}
.footer-submenu li a {
  color: #666;
  font-size: 0.75rem;
}
.footer-submenu li a:hover {
  color: #1a1a1a;
}

/* Footer Bottom (DIUBAH KE GRID) */
.footer-bottom {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 1rem;
  padding-top: 2rem;
  font-size: 0.8rem;
  color: #1a1a1a;
}
.footer-logo {
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 0.1em;
}
.footer-logo img {
  width: auto;
  height: auto;
  max-height: 80px;
  display: block;
  margin: 0 auto;
}
.footer-region a {
  text-decoration: none;
  color: #1a1a1a;
}
.footer-region a:hover {
  color: #666;
}

/* ==========================================================
   HALAMAN KATALOG (i-catalog.html)
   ========================================================== */
.catalog-section {
  padding-top: 8rem;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 2.5em;
}

/* [BARU] Gaya Breadcrumbs */
.breadcrumbs {
  padding-bottom: 0.5rem;
  font-size: 0.8rem;
  margin-bottom: 1rem;
  color: #666;
  text-align: center;
}
.breadcrumbs a {
  color: #666;
  text-decoration: none;
  transition: color 0.2s;
}
.breadcrumbs a:hover {
  color: #1a1a1a;
}
.breadcrumbs span {
  font-weight: bold;
  color: #1a1a1a;
}

.catalog-title {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
  font-size: 2.5rem;
}
.catalog-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 2rem;
  font-size: 0.9rem;
}
.catalog-header a {
  text-decoration: none;
  color: #1a1a1a;
}

/* Search Overlay (DIUBAH KE GRID) */
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  padding-top: 1rem;
  z-index: 99;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-120%);
  transition: transform 0.4s ease-in-out;
  height: 100px;
}
.search-overlay.show {
  transform: translateY(0);
}
.search-overlay .container {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
}
#catalog-search-input {
  border: none;
  border-bottom: 2px solid #ccc;
  padding: 0.75rem 0.25rem;
  font-size: 1.25rem;
  outline: none;
  transition: border-color 0.3s;
}
#catalog-search-input:focus {
  border-color: #1a1a1a;
}
.search-close-btn {
  background: none;
  border: none;
  font-size: 1.75rem;
  color: #888;
  cursor: pointer;
  padding: 0.5rem;
}
.search-close-btn:hover {
  color: #1a1a1a;
}

/* ===============================
   E-CATALOGUE FILTER UI SOFTEN
   =============================== */

.filters,
.sorting {
  gap: 1rem;
}

.filter-item,
.sort-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-item label,
.sort-item label {
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: #666;
  text-transform: uppercase;
}

/* Select base style */
.filters select,
.sorting select {
  font-family: var(--font-sans);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-transform: capitalize;
  padding: 0.55rem 2rem 0.55rem 0.75rem;
  font-size: 0.7rem;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background-color: #fff;
  color: #111;

  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23666' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 12px;

  transition: border 0.2s ease, box-shadow 0.2s ease;
}

.filters select:hover,
.sorting select:hover {
  border-color: rgba(0, 0, 0, 0.25);
}

/* Focus – luxury feel */
.filters select:focus,
.sorting select:focus {
  outline: none;
  border-color: #000;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

/* Product count – kecil & elegan */
.product-count {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: #888;
  text-transform: uppercase;
}

.filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.sorting {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.filter-item,
.sort-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.product-count {
  color: #666;
  white-space: nowrap;
}
.product-grid-catalog {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.product-item-catalog {
  position: relative;
  text-decoration: none;
  color: #1a1a1a;
}
.product-item-catalog img {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
  margin-bottom: 0.5rem;
}
.product-item-catalog p {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: center;
}
.wishlist-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 1.2rem;
  color: #c0c0c0;
  cursor: pointer;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
  display: none;
}
.wishlist-icon:hover {
  color: #ff0000;
  background-color: rgba(255, 255, 255, 0.9);
}
.wishlist-icon.active .fa-heart {
  color: #ff0000;
  font-weight: 900;
}
.wishlist-icon .fas.fa-heart {
  display: none;
}
.wishlist-icon.active .far.fa-heart {
  display: none;
}
.wishlist-icon.active .fas.fa-heart {
  display: inline-block;
}
/* Pagination (DIUBAH KE GRID) */
.pagination-controls {
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
  padding-bottom: 2rem;
}
.pagination-controls button {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
  border-radius: 4px;
  transition: background-color 0.2s, color 0.2s;
  height: 40px;
}
.pagination-controls button:hover:not(:disabled) {
  background-color: #f0f0f0;
}
.pagination-controls button.active {
  background-color: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}
.pagination-controls button:disabled {
  background-color: #f9f9f9;
  color: #ccc;
  cursor: not-allowed;
}
.pagination-skip-input {
  height: 40px;
  width: 80px;
  margin: 0 0 0 10px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  text-align: center;
  font-size: 0.9rem;
}
.pagination-skip-input::-webkit-outer-spin-button,
.pagination-skip-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pagination-skip-input[type="number"] {
  -moz-appearance: textfield;
}
.pagination-skip-button {
  height: 40px;
  margin: 0 4px;
  padding: 0 15px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  cursor: pointer;
  border-radius: 4px;
}
.pagination-skip-button:hover {
  background-color: #eee;
}
.pagination-controls {
  display: flex; /* Menggunakan flexbox */
  flex-wrap: wrap; /* Memungkinkan Page Jump turun ke baris baru */
  justify-content: center; /* Memusatkan semua konten */
  gap: 0.5rem; /* Jarak antar tombol */
  /* Tambahkan align-items: center jika diperlukan */
}

/* 2. Aturan untuk Page Jump Wrapper (Memaksa ke Bawah di SEMUA UKURAN) */
.pagination-controls .page-jump-wrapper {
  /* Paksa Page Jump Wrapper menempati baris baru: */
  width: 100%;
  order: 2; /* Pastikan selalu tampil di baris kedua */

  /* Atur tampilan internal Page Jump (input dan button) */
  display: flex;
  justify-content: center; /* Pusatkan input dan button */

  /* Beri jarak dari tombol paginasi utama di atasnya */
  margin-top: 15px;
  margin-left: 0; /* Pastikan tidak ada margin kiri warisan */
}

/* 3. Pengaturan Style Input dan Tombol di dalam Page Jump */
.pagination-controls .page-jump-wrapper input[type="number"] {
  /* Menghapus inline style dari JS */
  width: 90px !important;
  padding: 5px !important;
  margin-right: 5px !important;
  text-align: center;
  height: 40px; /* Samakan dengan tombol paginasi */
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  box-sizing: border-box;
  max-width: 100px;
  flex-grow: 0; /* Jangan biarkan input membesar tak terkontrol */
}

.pagination-controls .page-jump-wrapper button {
  /* Menghapus inline style dari JS */
  padding: 0.5rem 0.75rem !important;
  height: 40px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
}

/* [BARU] Gaya untuk Halaman Transisi */
.transition-page-wrapper {
  padding-top: 8rem;
}
.transition-title {
  font-size: 3rem;
  /* font-family: var(--font-serif); <-- Dihapus, ditangani global */
  font-weight: 400;
  margin: 1.5rem 0 2rem;
  text-align: left;
  text-transform: uppercase;
}
.breadcrumbs {
  text-align: left;
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 0.5rem;
}
.transition-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 50px;
}

.transition-tile-wrapper {
  width: 100%;
}
.transition-tile {
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display: block;
  width: 100%;
  height: 350px;
  border-radius: 4px;
}

.transition-tile-wrapper:first-child .transition-tile,
.transition-tile-wrapper:nth-child(2) .transition-tile,
.transition-tile-wrapper:nth-child(3) .transition-tile,
.transition-tile-wrapper:nth-child(n + 4) .transition-tile {
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  height: 350px !important;
  min-height: unset !important;
}

.transition-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.transition-tile-wrapper:first-child .transition-tile {
  height: auto;
  min-height: 620px;
}
.transition-tile:hover img {
  transform: scale(1.05);
}
.transition-tile-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.4) 100%
  );
  color: #fff;
}
.transition-tile-content h2 {
  /* font-family: var(--font-serif); <-- Dihapus, ditangani global */
  font-size: 2.5rem;
  margin: 0;
  font-weight: 400;
  line-height: 1.2;
}
.transition-tile-content p {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  margin-top: 0.5rem;
  text-transform: uppercase;
}

/* ==========================================================
   ==========================================================
   AREA MEDIA QUERY (DIUBAH UNTUK GRID)
   ==========================================================
   ========================================================== */
@media (min-width: 1024px) {
  .footer-grid {
    gap: 3rem;
  }
}

@media (min-width: 768px) {
  /* --- Navbar --- */
  .nav-left {
    justify-content: flex-start;
  }
  .nav-links.nav-right {
    justify-content: flex-end;
  }
  .search-icon-desktop {
    display: blok;
  }
  .nav-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .menu-overlay {
    width: 400px;
    right: auto;
    left: 0;
    transform: translateX(-100%);
  }
  .menu-overlay.open {
    transform: translateX(0);
  }

  /* --- Homepage Collection --- */
  .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  /* --- Detail Product --- */
  .product-info {
    padding-left: 150px;
  }
  .thumbnail {
    height: 150px;
  }

  /* --- Footer --- */
  .footer-grid {
    grid-template-columns: 2fr repeat(4, 1fr);
    gap: 2rem;
  }
  .footer-bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    gap: 0;
  }
  .footer-socials {
    justify-self: start;
  }
  .footer-logo {
    margin: 0;
    position: static;
    transform: none;
    justify-self: center;
  }
  .footer-region {
    justify-self: end;
  }

  /* --- Katalog --- */
  .product-grid-catalog {
    grid-template-columns: repeat(4, 1fr);
  }

  /* --- Transisi Mobile ke Desktop Grid --- */
  .transition-page-wrapper {
    padding-top: 100px;
  }
  .transition-title {
    font-size: 3.5rem;
  }
  .breadcrumbs {
    text-align: left;
  }
  .transition-grid {
    grid-template-columns: 2fr 1fr;
  }
  .transition-tile-wrapper:first-child .transition-tile {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    min-height: 620px;
  }
  .transition-tile-wrapper:nth-child(2) .transition-tile {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    min-height: 300px;
  }
  .transition-tile-wrapper:nth-child(3) .transition-tile {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    min-height: 300px;
  }
  .transition-tile-wrapper:nth-child(n + 4) .transition-tile {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  /* --- Navbar --- */
  .nav-links.nav-right {
    flex-grow: 0;
  }
  .search-icon-desktop {
    display: blok;
  }
  .nav-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .nav-left {
    flex-grow: 0;
  }
  .nav-left a {
    color: #fff;
  }
  .navbar.scrolled .nav-left a {
    color: #1a1a1a;
  }
  .menu-toggle {
    margin-right: 1rem;
  }
  .menu-overlay {
    width: 100%;
    transform: translateX(-100%);
  }
  .menu-overlay.open {
    transform: translateX(0);
  }

  /* --- Umum --- */
  section {
    padding: 1.5em;
  }

  /* --- Transisi Mobile --- */
  .transition-title {
    text-align: center;
    font-size: 2.5rem;
  }
  .breadcrumbs {
    text-align: center;
  }
  .transition-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .transition-tile-wrapper:first-child .transition-tile {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 400px;
  }
  .transition-tile-wrapper:nth-child(2) .transition-tile,
  .transition-tile-wrapper:nth-child(3) .transition-tile,
  .transition-tile-wrapper:nth-child(n + 4) .transition-tile {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 300px;
  }
  .transition-tile-content h2 {
    font-size: 2rem;
  }

  /* --- Katalog --- */
  .catalog-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .filters {
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%; /* <-- Perubahan 1 */
  }

  /* <-- Perubahan 2: Blok Baru untuk Item Filter */
  .filter-item {
    width: 100%;
    justify-content: space-between;
  }
  /* <-- Perubahan 3: Blok Baru untuk Elemen Select */
  .filter-item select {
    width: 60%;
    max-width: 150px;
  }

  .sorting {
    width: 100%;
    justify-content: space-between;
  }

  /* --- Paginasi (Perbaikan untuk Grid) --- */
  .pagination-controls {
    grid-auto-flow: row;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(40px, auto));
  }

  /* artikel */
}

@media (max-width: 480px) {
  /* --- Paginasi Katalog (Perbaikan untuk Grid) --- */
  .pagination-controls {
    grid-template-columns: repeat(auto-fit, minmax(40px, auto));
  }
  .pagination-skip-input {
    width: 100%;
    margin-left: 0;
    grid-column: 1 / -1;
  }
  .pagination-skip-button {
    margin-left: 0;
    grid-column: 1 / -1;
  }
}

/* --- 1. PERBAIKAN URUTAN MOBILE (DETAIL PRODUK) --- */
@media (max-width: 767px) {
  /* Mengurangi jarak vertikal (Change 5 & 7) */
  .product-main {
    gap: 1.5rem;
    margin-bottom: 2rem;
  }
  /* Melebarkan galeri (Change 7) */
  .product-gallery {
    padding: 0;
  }
  /* Mengurangi tinggi gambar utama (Change 7) */
  .main-image-wrapper {
    height: 400px;
  }
  /* Mengecilkan panah galeri (Change 8) */
  .nav-arrow {
    width: 35px;
    height: 35px;
    font-size: 20px;
  }
  .arrow-left {
    left: 5px;
  }
  .arrow-right {
    right: 5px;
  }
  /* Memperbesar thumbnail (Change 9) */
  .thumbnail-gallery {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .thumbnail {
    height: 150px;
  }

  /* Mengatur urutan konten */
  .product-info {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    padding-top: 0; /* Menghapus padding atas (Change 5) */
  }
  .product-info .product-details-tabs {
    order: 1;
  }
  .product-info .action-buttons {
    order: 2;
    margin-top: 2.5rem; /* Jarak dari tab (Change 4) */
    max-width: 100%;
  }
}

/* ==========================================================
   --- 2. STYLE BARU UNTUK APPOINTMENT FORM (Versi Light Theme) ---
   ========================================================== */

.appointment-modal-content {
  max-width: 800px; /* Lebarkan modal untuk 2 kolom (Change 1) */
  overflow-y: auto;
}
.appointment-modal-content h2 {
  text-align: center;
}
.appointment-modal-content p {
  display: block;
}
#appointment-form {
  width: 100%;
}
.appointment-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-top: 1rem;
}
.form-group {
  margin-bottom: 1.2rem;
}
.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  font-size: 0.9rem;
  color: #333;
}
.form-col-left .form-group:first-child label {
  display: block;
}
.form-group select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-family: var(--font-sans);
  font-size: 1rem;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 1.2em;
  padding-right: 2.5em;
  cursor: pointer;
  color: #333;
}
.form-group select option {
  background-color: #fff;
  color: #333;
}
.radio-group {
  border: none;
  padding: 0;
  margin: 0;
  margin-bottom: 1.5rem;
}
.radio-group legend {
  font-weight: 500;
  font-size: 0.85rem;
  margin-bottom: 1rem;
  padding: 0;
  color: #333;
}
.radio-button-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.radio-button-options input[type="radio"] {
  display: none;
}
.radio-button-options label {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.9rem;
  color: #555;
  background-color: #f9f9f9;
  transition: all 0.2s ease;
}
.radio-button-options label:hover {
  background-color: #eee;
  border-color: #aaa;
}
.radio-button-options input[type="radio"]:checked + label {
  background-color: #3e4a3e;
  color: #fff;
  border-color: #3e4a3e;
  font-weight: 500;
}

/* reCAPTCHA Dihapus */

.btn-appointment-submit {
  display: block;
  width: 100%;
  max-width: 340px;
  margin: 0;
  margin-top: 1.5rem;
  padding: 14px 0;
  background-color: #3e4a3e;
  color: #fff;
  /* font-family & letter-spacing dihapus (Change 11) */
  font-weight: bold;
  border-radius: 5px;
  border: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s;
}
.btn-appointment-submit:hover {
  background-color: #2a332a;
}

/* ==========================================================
   --- 3. MEDIA QUERY KHUSUS UNTUK FORM BARU (Light Theme) ---
   ========================================================== */
@media (max-width: 767px) {
  .nav-logo img {
    height: 23px;
  }
  .catalog-title {
    font-size: 1.5rem;
  }
  .product-title p {
    font-size: 1.25rem;
  }
  .appointment-modal-content {
    max-width: 90%;
    padding: 2rem 1.5rem;
    max-height: 85vh; /* Membuat modal bisa scroll (Change 3) */
    overflow-y: auto; /* Membuat modal bisa scroll (Change 3) */
  }
  .appointment-form-grid {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 1.5rem;
  }
  .form-col-right {
    margin-top: 1.2rem;
  }
  .radio-button-options {
    gap: 8px;
  }
  .radio-button-options label {
    padding: 8px 12px;
    font-size: 0.85rem;
  }
  .btn-appointment-submit {
    max-width: 100%;
    /* font-family & letter-spacing dihapus (Change 11) */
  }
}
/* ==========================================================
   UPDATE MOBILE RESPONSIVE (MAX-WIDTH: 767PX)
   Letakkan/Ganti di bagian paling bawah style.css
   ========================================================== */

@media (max-width: 767px) {
  /* 1. Reset Modal untuk HP */
  .appointment-modal-content {
    max-width: 90%;
    width: 90%;
    padding: 1.5rem 1rem;
    max-height: 85vh; /* Agar bisa discroll */
    overflow-y: auto;
  }

  /* 2. KEMBALIKAN KE 1 KOLOM (STACK) */
  .appointment-form-grid {
    display: grid;
    grid-template-columns: 1fr; /* Menumpuk ke bawah */
    gap: 0;
    margin-top: 1rem;
  }

  /* 3. Beri jarak antara Kolom Kiri (Data Diri) dan Kanan (Event) */
  .form-col-right {
    margin-top: 2.5rem; /* Jarak pemisah agar tidak terlalu mepet */
    padding-top: 1.5rem;
    border-top: 1px dashed #ccc; /* Opsional: Garis pemisah tipis */
  }

  /* 4. Kembalikan Ukuran Font Normal (Supaya terbaca jelas di HP) */
  .form-group label {
    font-size: 0.9rem; /* Ukuran normal */
    margin-bottom: 6px;
    white-space: normal;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 1rem; /* Ukuran normal input mobile */
    padding: 10px;
  }

  .radio-button-options label {
    padding: 8px 16px;
    font-size: 0.85rem;
  }

  /* 5. Range Slider & Tombol */
  .range-label-title {
    font-size: 0.9rem;
  }
  .btn-appointment-submit {
    margin-top: 1.5rem;
    padding: 14px 0;
    font-size: 1rem;
  }
}

/* Halaman About*/
.navbar-about.scrolled {
  /* Pastikan navbar tidak pernah transparan, terlepas dari JS/scrolling */
  background-color: #fff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.navbar-about .menu-toggle,
.navbar-about .nav-links a {
  color: #1a1a1a !important;
}
/* Header Halaman About */
.about-page {
  padding-top: 6rem; /* Memberi ruang di bawah fixed navbar */
}
@media (min-width: 768px) {
  .about-page {
    padding-top: 8rem;
  }
}

/* Header Halaman About */
.about-header-section {
  padding: 0 0 40px;
  text-align: center;
}
.about-header-section h1 {
  font-family: var(--h1); /* <-- Mengikuti aturan font: h1 */
  font-size: 3rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}
.about-header-section .subtitle {
  font-family: var(--p); /* <-- Menggunakan font body/p */
  font-size: 1.25rem;
  color: var(--text-color);
}
@media (max-width: 767px) {
  .about-header-section h1 {
    font-size: 2.5rem;
  }
  .about-page {
    padding-top: 5rem;
  }
}

/* --- Detail Biografi (Mengikuti style opening1 / butik Dior) --- */
#biography-detail.biography-detail {
  display: flex;
  width: 100%;
  background-color: var(--bg-light);
}

/* Kolom Kiri (Teks Biografi) */
.biography-detail .text-container-biography {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60px 40px;
}

.biography-detail .content-wrapper-biography {
  max-width: 500px;
  text-align: left; /* Teks rata kiri agar lebih informatif */
}

.biography-detail h2 {
  font-family: var(--h2); /* <-- Mengikuti aturan font: h2 */
  font-size: 2.5rem;
  font-weight: 400;
  margin-bottom: 2rem;
  color: #000;
  letter-spacing: 1px;
}

.biography-detail p {
  font-family: var(--p); /* <-- Mengikuti aturan font: p */
  font-size: 1.5rem;
  color: var(--text-color);
  margin-bottom: 1.5rem;
  line-height: 1.8;
  text-align: justify;
}

/* Informasi Kontak/Layanan */
.biography-detail .contact-info-block {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #e0e0e0;
}

.biography-detail .contact-info-block h3 {
  font-family: var(--p); /* Menggunakan font body/p */
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary-color);
}

.biography-detail .info-list {
  list-style: none;
  padding: 0;
  margin-bottom: 1.5rem;
}

.biography-detail .info-list li {
  font-family: var(--p); /* Menggunakan font body/p */
  font-size: 1.5rem;
  color: var(--text-color);
  margin-bottom: 0.5rem;
}

.biography-detail .info-list i {
  color: var(--accent-color); /* Emas pudar */
  margin-right: 10px;
  width: 15px; /* Lebar tetap untuk ikon */
  text-align: center;
}

.btn-appointment-about {
  font-family: var(--cta); /* <-- Mengikuti aturan font: cta */
  display: inline-block;
  padding: 10px 20px;
  background-color: var(--accent-color);
  color: #fff;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.btn-appointment-about:hover {
  background-color: #b3904e;
}

/* Kolom Kanan (Gambar Biografi) */
/* Pada container pembungkus gambar */
.biography-detail .image-container-biography {
  flex: 1;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

/* Pada gambarnya */
.biography-detail .image-container-biography img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* RESPONSIVE (Mobile) Biografi Detail */

/* ==========================================================
   SECTION BUTIK (ABOUT PAGE)
   ========================================================== */
.section-butik {
  display: flex;
  width: 100%;
  min-height: 90vh;
  background-color: #fff;
  /* Border top tipis untuk memisahkan dari section biografi */
  border-top: 1px solid #f0f0f0;
}

/* Kolom Kiri (Gambar) */
.section-butik .butik-image-container {
  flex: 1;
  background-color: #f4f4f4;
  overflow: hidden;
  position: relative;
  /* Order 1 agar di desktop gambar ada di KIRI */
  order: 1;
}

.section-butik .butik-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s ease;
}

/* Efek zoom halus saat hover gambar */
.section-butik .butik-image-container:hover img {
  transform: scale(1.03);
}

/* Kolom Kanan (Teks) */
.section-butik .butik-text-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* Center content */
  padding: 80px 60px;
  order: 2;
}

.content-wrapper-butik {
  max-width: 550px;
  width: 100%;
  text-align: left;
}

.section-butik h2 {
  font-family: var(--h2);
  font-size: 3rem;
  font-weight: 400;
  margin-bottom: 1.5rem;
  color: var(--primary-color);
  letter-spacing: 1px;
}

.butik-intro {
  font-family: var(--p);
  font-size: 1.1rem;
  color: #666;
  line-height: 1.8;
  margin-bottom: 3rem;
  text-align: justify;
}

/* Grid Lokasi (Jakarta & Bandung) */
.locations-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 3rem;
  border-top: 1px solid #e0e0e0;
  padding-top: 2rem;
}

.location-item h4 {
  font-family: var(--h2);
  font-size: 1.5rem;
  margin-bottom: 0.8rem;
  color: var(--primary-color);
}

.location-item p {
  font-family: var(--p);
  font-size: 0.95rem;
  color: #555;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.map-link {
  font-family: var(--cta);
  font-size: 0.85rem;
  text-decoration: none;
  color: var(--accent-color); /* Warna Emas */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.3s;
}

.map-link:hover {
  color: #b3904e; /* Emas lebih gelap saat hover */
}

.map-link i {
  margin-left: 5px;
  font-size: 0.8rem;
  transition: transform 0.3s;
}

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

.map-link .bandung {
  margin-top: 20px;
}
/* ==========================================================
   CUSTOM SLIDESHOW BUTIK (INSIDE CONTAINER)
   ========================================================== */

/* Pastikan container parent relatif agar slideshow terkurung di dalamnya */
.section-butik .butik-image-container {
  position: relative;
  /* Hapus overflow hidden jika perlu, tapi biasanya aman dibiarkan */
  overflow: hidden;
}

/* Reset list style */
.butik-image-container .slideshow {
  list-style-type: none;
  padding: 0;
  margin: 0;
  /* KUNCI UTAMA: Gunakan absolute agar menimpa area container, bukan fixed */
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

/* Item List */
.butik-image-container .slideshow li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Gambar Background (Span) */
.butik-image-container .slideshow li span {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: transparent;
  background-size: cover;
  background-position: center; /* Center agar gambar fokus di tengah */
  background-repeat: no-repeat;
  opacity: 0;
  z-index: 0;
  /* Animasi dipanggil di sini */
  animation: imageAnimation 18s linear infinite 0s;
}

/* Mengatur Delay Animasi per Slide */
.butik-image-container .slideshow li:nth-child(1) span {
  animation-delay: 0s;
}
.butik-image-container .slideshow li:nth-child(2) span {
  animation-delay: 6s;
}
.butik-image-container .slideshow li:nth-child(3) span {
  animation-delay: 12s;
}
/*.butik-image-container .slideshow li:nth-child(4) span {
  animation-delay: 0s;
}
 .butik-image-container .slideshow li:nth-child(5) span {
  animation-delay: 24s;
}*/

/* Keyframes Animasi (Sesuai request) */
@keyframes imageAnimation {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    animation-timing-function: ease-out;
  }
  17% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* Menghapus efek hover zoom lama agar tidak konflik dengan slideshow */
.section-butik .butik-image-container:hover img {
  transform: none;
}
/* RESPONSIVE (Mobile) */
@media (max-width: 991px) {
  .catalog-title {
    font-size: 2rem;
  }
  .section-butik {
    flex-direction: column;
    height: auto;
    min-height: auto;
  }

  /* Di Mobile, Gambar di ATAS (Order 1), Teks di BAWAH (Order 2) */
  .section-butik .butik-image-container {
    height: 400px;
    order: 1;
  }

  .section-butik .butik-text-container {
    order: 2;
    padding: 60px 20px;
  }

  .section-butik h2 {
    font-size: 2.5rem;
  }
}

/* ==========================================================
   ANIMATED BUTIK SECTION
   ========================================================== */

/* Wrapper Utama agar tidak merusak layout lain */
.section-butik-animation {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #000; /* Fallback color */
}

/* Container Animation (Pengganti .cont) */
.cont-animation {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh; /* Tinggi section disesuaikan */
  min-height: 600px;
  background-image: linear-gradient(to left bottom, #f2e3c6 0%, #a7a1a5 100%);
  overflow: hidden;
}

/* App Container */
.section-butik-animation .app {
  position: relative;
  width: 100%;
  max-width: 1200px; /* Batasi lebar agar rapi di layar besar */
  height: 540px;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

/* --- BACKGROUND IMAGES --- */
.app__bgimg {
  position: absolute;
  top: 0;
  left: -2.5%;
  width: 105%;
  height: 100%;
  transition: transform 3.5s 770ms;
}

.app__bgimg-image {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* GANTI URL GAMBAR DI SINI SESUAI FILE ANDA */
.app__bgimg-image--1 {
  background: url("../asset/butik_webp/butik-1.webp") center center no-repeat; /* Sesuaikan path */
  background-size: cover;
}

.app__bgimg-image--2 {
  background: url("../asset/butik_webp/butik-2.webp") center center no-repeat; /* Sesuaikan path */
  background-size: cover;
  opacity: 0;
  transition: opacity 0ms 1300ms;
  will-change: opacity;
}

.app__bgimg-image--3 {
  background: url("../asset/butik_webp/butik-3.webp") center center no-repeat; /* Sesuaikan path */
  background-size: cover;
  opacity: 0;
  transition: opacity 0ms 1300ms;
  will-change: opacity;
}

/* --- TEXT STYLING --- */
.app__text {
  position: absolute;
  right: 165px;
  top: 150px;
  font-family: "Playfair Display", serif; /* Sesuaikan dengan font website Anda */
  text-transform: uppercase;
  z-index: 1;
  text-align: right;
}

.app__text-line {
  transition: transform 1500ms 400ms, opacity 750ms 500ms;
  will-change: transform, opacity;
  user-select: none;
}

.app__text-line--4 {
  font-size: 50px;
  font-weight: 700;
  color: #0a101d;
}

.app__text-line--3 {
  font-size: 40px;
  font-weight: 300;
  margin-bottom: 10px;
}

.app__text-line--2 {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a; /* Tetap Emas (atau ubah ke #666 jika ingin abu-abu) */
  font-weight: 700; /* Warna aksen biru/emas */
}

.app__text-line--1 img {
  width: 50px;
}

/* --- TEXT POSITIONS & ANIMATIONS --- */
/* Slide 1 Initial State */
.app__text--1 .app__text-line {
  transform: translate3d(0, -125px, 0);
  opacity: 0;
}

/* Slide 2 Positioning */
.app__text--2 {
  right: initial;
  top: 250px;
  left: 80px;
  z-index: -1;
  transition: z-index 1500ms;
  text-align: left;
}
.app__text--2 .app__text-line {
  opacity: 0;
  transition: transform 1500ms 300ms, opacity 400ms 500ms;
}

/* Slide 3 Positioning */
.app__text--3 {
  position: absolute;
  top: 250px;
  left: 80px;
  z-index: -1;
  transition: z-index 1500ms;
  text-align: left;
}
.app__text--3 .app__text-line {
  opacity: 0;
  transition: transform 1500ms 300ms, opacity 400ms 500ms;
}

/* --- FOREGROUND IMAGE (City/Decor) --- */
.app__img {
  position: absolute;
  transform: translate3d(0, -750px, 0);
  width: 850px;
  height: 100%;
  transition: transform 3s cubic-bezier(0.6, 0.13, 0.31, 1.02);
  will-change: transform;
  pointer-events: none; /* Agar tidak mengganggu klik */
}
.app__img img {
  min-width: 100%;
}

/* --- ANIMATION LOGIC CLASSES --- */

/* INITIAL STATE */
.section-butik-animation .initial .app__img {
  transform: translate3d(0, 0, 0);
}
.section-butik-animation .initial .app__text--1 .app__text-line--1 {
  transform: translate3d(0, 0, 0);
  transition: transform 1500ms 1400ms, opacity 400ms 1600ms;
  opacity: 1;
}
.section-butik-animation .initial .app__text--1 .app__text-line--2 {
  transform: translate3d(0, 0, 0);
  transition: transform 1500ms 1475ms, opacity 400ms 1675ms;
  opacity: 1;
}
.section-butik-animation .initial .app__text--1 .app__text-line--3 {
  transform: translate3d(0, 0, 0);
  transition: transform 1500ms 1550ms, opacity 400ms 1750ms;
  opacity: 1;
}
.section-butik-animation .initial .app__text--1 .app__text-line--4 {
  transform: translate3d(0, 0, 0);
  transition: transform 1500ms 1625ms, opacity 400ms 1825ms;
  opacity: 1;
}

/* ACTIVE STATE (Slide 2) */
.section-butik-animation .active .app__bgimg {
  transform: translate3d(10px, 0, 0) scale(1.05);
  transition: transform 5s 850ms ease-in-out;
}
.section-butik-animation .active .app__bgimg .app__bgimg-image--2 {
  opacity: 1;
  transition: opacity 0ms 1500ms;
}
.section-butik-animation .active .app__img {
  transition: transform 3s cubic-bezier(0.6, 0.13, 0.31, 1.02);
  transform: translate3d(0, -1410px, 0);
}

.section-butik-animation .active .app__text--1 {
  z-index: -1;
  transition: z-index 0ms 1500ms;
}
.section-butik-animation .active .app__text--1 .app__text-line {
  transform: translate3d(0, -125px, 0);
  opacity: 0;
  transition: transform 1500ms 300ms, opacity 400ms 500ms;
}

.section-butik-animation .active .app__text--2 {
  z-index: 1;
}
.section-butik-animation .active .app__text--2 .app__text-line--1 {
  transform: translate3d(0, -125px, 0);
  transition: transform 2500ms 1100ms, opacity 1300ms 1300ms;
  opacity: 1;
}
.section-butik-animation .active .app__text--2 .app__text-line--2 {
  transform: translate3d(0, -125px, 0);
  transition: transform 2500ms 1175ms, opacity 1300ms 1575ms;
  opacity: 1;
}
.section-butik-animation .active .app__text--2 .app__text-line--3 {
  transform: translate3d(0, -125px, 0);
  transition: transform 2500ms 1250ms, opacity 1300ms 1850ms;
  opacity: 1;
}
.section-butik-animation .active .app__text--2 .app__text-line--4 {
  transform: translate3d(0, -125px, 0);
  transition: transform 2500ms 1325ms, opacity 1300ms 2125ms;
  opacity: 1;
}

/* ACTIVE-3 STATE (Slide 3) */
.section-butik-animation .active-3 .app__bgimg {
  transform: translate3d(20px, 0, 0) scale(1.1);
  transition: transform 5s 850ms ease-in-out;
}
.section-butik-animation .active-3 .app__bgimg .app__bgimg-image--3 {
  opacity: 1;
  transition: opacity 0ms 1500ms;
}
.section-butik-animation .active-3 .app__img {
  transition: transform 3s cubic-bezier(0.6, 0.13, 0.31, 1.02);
  transform: translate3d(0, -2200px, 0);
}

.section-butik-animation .active-3 .app__text--1,
.section-butik-animation .active-3 .app__text--2 {
  z-index: -1;
  transition: z-index 0ms 1500ms;
}
.section-butik-animation .active-3 .app__text--1 .app__text-line,
.section-butik-animation .active-3 .app__text--2 .app__text-line {
  transform: translate3d(0, -125px, 0);
  opacity: 0;
  transition: transform 1500ms 300ms, opacity 400ms 500ms;
}

.section-butik-animation .active-3 .app__text--3 {
  z-index: 1;
}
.section-butik-animation .active-3 .app__text--3 .app__text-line--1 {
  transform: translate3d(0, -125px, 0);
  transition: transform 2500ms 1100ms, opacity 1300ms 1300ms;
  opacity: 1;
}
.section-butik-animation .active-3 .app__text--3 .app__text-line--2 {
  transform: translate3d(0, -125px, 0);
  transition: transform 2500ms 1175ms, opacity 1300ms 1575ms;
  opacity: 1;
}
.section-butik-animation .active-3 .app__text--3 .app__text-line--3 {
  transform: translate3d(0, -125px, 0);
  transition: transform 2500ms 1250ms, opacity 1300ms 1850ms;
  opacity: 1;
}
.section-butik-animation .active-3 .app__text--3 .app__text-line--4 {
  transform: translate3d(0, -125px, 0);
  transition: transform 2500ms 1325ms, opacity 1300ms 2125ms;
  opacity: 1;
}

/* --- NAVIGATION DOTS --- */
.section-butik-animation .pages {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
  z-index: 10;
}

.section-butik-animation .pages__list {
  list-style-type: none;
}
.section-butik-animation .pages__item {
  position: relative;
  margin-bottom: 10px;
  width: 20px; /* Diperkecil sedikit */
  height: 20px;
  border-radius: 50%;
  border: 2px solid #fff;
  cursor: pointer;
}
.section-butik-animation .pages__item:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0, 0);
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0;
  transition: 500ms;
}
.section-butik-animation .pages__item:hover:after,
.section-butik-animation .page__item-active:after {
  transform: translate(-50%, -50%) scale(1, 1);
  opacity: 1;
}
/* ==========================================================
   MODIFIKASI KHUSUS: SLIDE 1 (JAKARTA) KE KIRI (AREA PUTIH)
   ========================================================== */

/* 1. Memindahkan posisi container teks Slide 1 ke Kiri */
.app__text--1 {
  right: auto !important; /* Matikan posisi kanan default */
  left: 50%; /* Geser ke kiri (masuk area putih) */
  text-align: left; /* Ubah rata teks menjadi kiri */
  top: 50%; /* Turunkan ke tengah vertikal */
  transform: translateY(-50%); /* Koreksi agar pas di tengah-tengah */
  z-index: 20; /* Pastikan teks berada di atas gambar putih */
  width: auto; /* Lebar menyesuaikan konten */
}

/* 2. Ubah Warna Teks Slide 1 menjadi Gelap (Kontras dengan Putih) */
.app__text--1 .app__text-line--4, /* Tulisan "JAKARTA" */
.app__text--1 .app__text-line--3  /* Tulisan "BOUTIQUE" */ {
  color: #1a1a1a; /* Ubah jadi Hitam/Gelap */
}

.app__text--1 .app__text-line--2 {
  /* Tulisan Alamat */
  color: #1a1a1a; /* Tetap Emas (atau ubah ke #666 jika ingin abu-abu) */
  font-weight: 700; /* Sedikit lebih tebal agar jelas */
}

/* 3. Penyesuaian Mobile (Agar tidak terpotong di layar HP) */
/* ==========================================================
   RESPONSIVE MEDIA QUERIES: ABOUT PAGE
   (Tablet, iPad, Android, iPhone)
   ========================================================== */

/* --- 1. GENERAL & HEADER SECTION --- */

/* Tablet & iPad (Portrait) */
@media (max-width: 1024px) {
  .about-page {
    padding-top: 7rem;
  }
  .about-header-section h1 {
    font-size: 3.5rem; /* Perkecil judul sedikit */
  }
}

/* Mobile (Android/iPhone) */
@media (max-width: 767px) {
  .about-page {
    padding-top: 6rem;
  }
  .about-header-section {
    padding: 0 20px 30px;
  }
  .about-header-section h1 {
    font-size: 2.5rem; /* Judul lebih kecil agar tidak pecah */
  }
  .about-header-section .subtitle {
    font-size: 1rem;
  }
}

/* --- 2. BIOGRAPHY DETAIL SECTION --- */

/* Tablet (iPad) & Mobile Landscape */
@media (max-width: 1080px) {
  /* 🎨 Kontainer Utama (biography-detail) */
  #biography-detail.biography-detail {
    flex-direction: column; /* Mengubah layout menjadi tumpukan vertikal */
    height: auto;
    min-height: auto;
  }

  .biography-detail .image-container-biography {
    order: 1;
    width: 100%;
    height: 400px;
    /* Tambahkan: Untuk memastikan gambar mengisi ruang tanpa overflow */
    overflow: hidden;
  }

  /* 📸 Styling untuk Elemen Gambar (misalnya <img> di dalamnya) */
  .biography-detail .image-container-biography img {
    width: 100%; /* Gambar akan mengambil lebar penuh kontainer 400px */
    height: 100%;
  }

  .biography-detail .text-container-biography {
    order: 2;
    padding: 50px 30px;
    width: 100%;
  }

  /* 📌 Styling untuk Judul (h2) */
  .biography-detail h2 {
    font-size: 2.8rem;
    text-align: center;
  }

  /* 📜 Styling untuk Paragraf (p) */
  .biography-detail p {
    font-size: 1.1rem; /* Ukuran font yang nyaman untuk dibaca */
    text-align: justify;
  }
}
@media (max-width: 991px) {
  #biography-detail.biography-detail {
    flex-direction: column; /* Ubah layout jadi atas-bawah */
    height: auto;
    min-height: auto;
  }

  /* Gambar pindah ke atas */
  .biography-detail .image-container-biography {
    order: 1;
    width: 100%;
    height: 400px; /* Tinggi tetap untuk gambar */
  }

  /* Teks pindah ke bawah */
  .biography-detail .text-container-biography {
    order: 2;
    padding: 50px 30px;
    width: 100%;
  }

  .biography-detail h2 {
    font-size: 2.8rem;
    text-align: center;
  }

  .biography-detail p {
    font-size: 1.1rem; /* Perkecil font body agar nyaman dibaca */
    text-align: justify;
  }
}

/* Mobile (Android/iPhone) */
@media (max-width: 767px) {
  .catalog-title {
    font-size: 1.5rem;
  }
  .biography-detail .image-container-biography {
    height: 300px; /* Kurangi tinggi gambar di HP */
  }
  .biography-detail .text-container-biography {
    padding: 40px 20px;
  }
  .biography-detail h2 {
    font-size: 2.2rem;
  }
  /* Merapikan list kontak di HP */
  .biography-detail .info-list li {
    font-size: 1rem;
    display: flex;
    align-items: flex-start;
  }
  .biography-detail .info-list i {
    margin-top: 5px; /* Icon sejajar dengan baris pertama teks */
  }
}

/* --- 3. SECTION BUTIK (STATIC SLIDESHOW) --- */

/* Tablet & Mobile */
@media (max-width: 991px) {
  .section-butik {
    flex-direction: column; /* Susun vertikal */
    height: auto;
    min-height: auto;
  }

  .section-butik .butik-image-container {
    /* PENTING: Matikan flex agar tinggi manual (height) bekerja */
    flex: none;

    /* Atur urutan: Gambar di atas (1), Teks di bawah (2) */
    order: 1;

    /* Paksa ukuran container */
    width: 100%;
    height: 400px; /* Tinggi wajib diisi karena kontennya absolute */
    position: relative; /* Wajib relative agar slideshow terkurung */
  }

  .section-butik .butik-text-container {
    order: 2;
    padding: 50px 20px;
    width: 100%;
  }

  .content-wrapper-butik {
    max-width: 100%;
    text-align: center; /* Center semua konten */
  }

  .section-butik h2 {
    font-size: 2.8rem;
  }

  /* Grid Lokasi di Tablet tetap 2 kolom, tapi lebih rapat */
  .locations-grid {
    gap: 20px;
    text-align: left; /* Kembalikan teks lokasi ke rata kiri agar rapi */
  }
}

/* Mobile (Android/iPhone) */
@media (max-width: 576px) {
  .section-butik .butik-image-container {
    height: 300px;
  }
  .section-butik h2 {
    font-size: 2.2rem;
  }
  /* Lokasi menjadi 1 kolom di HP kecil */
  .locations-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center; /* Center lokasi di HP */
  }
  .location-item h4 {
    font-size: 1.3rem;
  }
}

/* --- 4. SECTION BUTIK ANIMATION (COMPLEX) --- */
/* Bagian ini paling krusial agar animasi tidak pecah di layar kecil */

@media (max-width: 1024px) {
  /* Tablet adjustment */
  .section-butik-animation .app {
    height: 500px; /* Sedikit kurangi tinggi */
    width: 95%; /* Beri margin kiri kanan */
  }
}

@media (max-width: 767px) {
  /* Mobile Layout untuk Animasi */
  .cont-animation {
    height: auto;
    padding: 40px 0; /* Beri jarak atas bawah */
    min-height: auto;
  }

  .section-butik-animation .app {
    height: 450px; /* Tinggi fix untuk mobile */
    width: 90%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  }

  /* Atur ulang posisi teks agar centered di Mobile */
  .app__text {
    width: 80%;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    text-align: center !important;
  }

  /* Posisi vertikal teks slide 1, 2, 3 */
  .app__text--1 {
    top: 180px;
  }
  .app__text--2 {
    top: 180px;
  }
  .app__text--3 {
    top: 180px;
  }

  /* Ukuran Font Animasi Mobile */
  .app__text-line--4 {
    font-size: 32px;
  } /* Judul Besar */
  .app__text-line--3 {
    font-size: 24px;
  } /* Subjudul */
  .app__text-line--2 {
    font-size: 12px;
    margin-top: 5px;
  } /* Alamat */

  /* Sembunyikan gambar dekorasi (Opus attachment) di mobile jika mengganggu */
  .app__text-line--1 img {
    width: 30px;
    margin-top: 10px;
  }

  /* Penyesuaian Gambar Background Shape (Putih) */
  .app__img {
    width: 600px; /* Perkecil shape */
    left: 50%;
    margin-left: -300px; /* Center shape */
  }

  /* Tombol Navigasi (Dots) */
  .section-butik-animation .pages {
    right: 10px; /* Rapatkan ke kanan */
  }
  .section-butik-animation .pages__item {
    width: 15px;
    height: 15px;
  }
}

/* --- 5. FOOTER ADJUSTMENTS --- */

@media (max-width: 991px) {
  /* Tablet: Grid Footer 2 Kolom */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    text-align: center;
  }
  /* Kolom newsletter ambil lebar penuh di tablet */
  .footer-column:nth-child(1) {
    grid-column: 1 / -1;
    text-align: center;
  }
  .newsletter-form {
    max-width: 400px;
    margin: 0 auto;
  }
}

@media (max-width: 576px) {
  /* Mobile: Grid Footer 1 Kolom */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }

  .footer-bottom {
    grid-template-columns: 1fr; /* Stack vertikal */
    gap: 20px;
  }

  .footer-socials {
    justify-self: center; /* Center sosmed */
  }
  .footer-region {
    justify-self: center; /* Center region */
  }
}
/* ==========================================================
   CONTACT PAGE (Full Section Background with Floating Card)
   ========================================================== */

.contact-full-section-bg {
  position: relative;
  min-height: calc(100vh - 90px); /* Minimal tinggi viewport dikurangi navbar */
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 90px; /* Jarak untuk Navbar */
  padding-bottom: 50px; /* Padding di bawah agar Footer tidak terlalu mepet */
  overflow: hidden; /* Penting untuk clipping gambar */

  /* GAMBAR LATAR PENUH UNTUK SELURUH SECTION */
  background-image: url("../asset/butik_webp/butik-2.webp");
  background-size: cover;
  background-position: center;
  background-attachment: scroll; /* Tidak fixed agar footer terlihat */
}

/* Overlay gelap untuk kontras teks di atas gambar */
.contact-full-section-bg .background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* Overlay gelap 40% */
  z-index: 1;
}

/* Konten (Teks Kiri dan Form Kanan) */
.contact-content-grid {
  position: relative;
  z-index: 2; /* Di atas overlay */
  width: 100%;
  max-width: 1200px; /* Lebar maksimum area konten */
  display: grid;
  grid-template-columns: 1fr 1fr; /* Split 50/50 */
  gap: 3rem;
  align-items: center; /* Vertikal center content */
  padding: 2rem 1.5rem; /* Padding di dalam container */
}

/* Kiri: Text "Get in touch" */
.grid-left-text {
  color: #fff;
  padding: 1rem;
}
.grid-left-text h1 {
  font-family: var(--h1);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 0.5rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
}
.grid-left-text p {
  font-family: var(--p);
  font-size: 1.5rem;
  font-weight: 400;
  opacity: 0.9;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* Kanan: Form Card Container */
.grid-right-form {
  display: flex;
  justify-content: flex-end; /* Card di kanan */
  align-items: center;
  padding: 20px 0; /* Padding di sekitar card */
}

/* Contact Card Styling (Tetap Putih Solid) */
.contact-card {
  width: 100%;
  max-width: 500px;
  background-color: #ffffff; /* Card harus putih solid */
  padding: 3rem;
  border-radius: 25px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2); /* Shadow lebih kuat karena floating */
  font-family: var(--p);
}
.contact-card h2 {
  font-family: var(--h2);
  font-size: 2rem;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}
.contact-card .subtitle {
  font-size: 1rem;
  color: var(--text-color);
  margin-bottom: 2rem;
}

/* --- Form Styling (Dipertahankan) --- */
.contact-form .form-group {
  margin-bottom: 1.5rem;
}
.contact-form label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: #333;
  margin-bottom: 0.4rem;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--primary-color);
  transition: border-color 0.3s;
  box-sizing: border-box;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--accent-color);
  outline: none;
  box-shadow: 0 0 0 2px rgba(197, 160, 89, 0.2);
}
.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #a0a0a0;
  opacity: 1;
}

.btn-send-message {
  width: 100%;
  padding: 15px;
  background-color: var(--accent-color);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: var(--cta);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 1rem;
}
.btn-send-message:hover {
  background-color: #b3904e;
}

/* ==========================================================
   MEDIA QUERY (CONTACT PAGE - Full Section)
   ========================================================== */
@media (max-width: 1200px) {
  .contact-content-grid {
    grid-template-columns: 1fr; /* Jadi satu kolom di layar kecil */
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .grid-left-text {
    text-align: center;
  }
  .grid-right-form {
    justify-content: center;
  }
}

@media (max-width: 992px) {
  .contact-full-section-bg {
    min-height: auto; /* Biarkan tinggi menyesuaikan konten */
    padding-top: 0;
  }
  .contact-full-section-bg .background-overlay {
    background-color: rgba(
      0,
      0,
      0,
      0.5
    ); /* Lebih gelap di mobile untuk keterbacaan */
  }

  .contact-content-grid {
    padding-top: 10vh; /* Jarak dari navbar */
    padding-bottom: 5vh;
  }

  .grid-left-text h1 {
    font-size: 3rem;
  }
  .grid-left-text p {
    font-size: 1.25rem;
  }

  .contact-card {
    padding: 2rem;
    max-width: 90%; /* Card bisa lebih lebar di mobile */
    margin-left: auto;
    margin-right: auto;
    border-radius: 15px;
  }
}

/* ==========================================================
   CONTACT PAGE (SECTION 2: INFO TAMBAHAN)
   ========================================================== */

.contact-info-section {
  padding: 4rem 1rem;
  background-color: #ffffff; /* Latar belakang putih */
  text-align: center;
}

.contact-info-content {
  max-width: 1000px;
  margin: 0 auto;
}

.contact-info-block {
  padding: 2rem;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  display: inline-block; /* Agar block hanya selebar isinya */
  text-align: left;
}

.contact-info-block h3 {
  font-family: var(--font-sans);
  font-weight: 700px;
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary-color);
  text-align: center;
}

.contact-info-block .info-list {
  list-style: none;
  padding: 0;
  margin-bottom: 2rem;
}

.contact-info-block .info-list li {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-color);
  margin-bottom: 1rem;
  line-height: 1.4;
}

.contact-info-block .info-list i {
  color: var(--accent-color); /* Emas pudar */
  margin-right: 15px;
  width: 15px;
  text-align: center;
}

.btn-appointment-about {
  /* Style diambil dari CSS yang sudah ada di file Anda */
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 1.5rem;
}

/* Responsif untuk Section Info Tambahan */
@media (max-width: 767px) {
  .hero-static-content h1 {
    font-size: 3rem;
  }
  .contact-info-section {
    padding: 3rem 1rem;
  }
  .contact-info-block {
    padding: 1.5rem;
    width: 100%;
  }
  .contact-info-block h3 {
    font-size: 1.1rem;
  }
  .contact-info-block .info-list li {
    font-size: 0.95rem;
  }
}
/*OPENING 1*/
/* --- RESPONSIVE TABLET & IPAD (Landscape & Portrait) --- */
/* Mengcover ukuran dari 769px sampai 1024px */
@media screen and (max-width: 1024px) {
  /* 1. Perbaiki Layout Container */
  #opening1.opening1 {
    flex-direction: column; /* Ubah jadi atas-bawah */
    min-height: auto; /* Hilangkan paksaan tinggi layar penuh */
    padding-top: 120px; /* PENTING: Memberi jarak agar judul tidak tertutup Header Logo */
    padding-bottom: 60px;
  }

  /* 2. Atur Ulang Area Teks */
  .opening1 .text-container {
    width: 100%; /* Lebar penuh */
    padding: 0 40px 40px 40px; /* Padding kiri-kanan secukupnya */
    order: 2; /* Teks di atas (sesuai screenshot Anda) */
  }

  /* 3. Kecilkan Font agar Elegan di iPad */
  .opening1 h1 {
    font-size: 3rem; /* Turunkan dari 4rem ke 3rem */
    margin-top: 0;
    line-height: 1.2;
    margin-bottom: 1rem;
  }

  .opening1 p {
    font-size: 1.25rem; /* Turunkan dari 2rem ke 1.25rem (ukuran standar baca tablet) */
    line-height: 1.6;
    max-width: 100%; /* Pastikan teks tidak melebar aneh */
    padding: 0 20px;
  }

  /* 4. Atur Gambar */
  .opening1 .image-container {
    width: 100%;
    height: auto;
    min-height: 400px; /* Tinggi minimal gambar */
    padding: 20px;
    order: 1; /* Gambar di atas teks */
    background-color: transparent; /* Sesuaikan jika perlu */
  }

  .opening1 .image-container img {
    width: 100%;
    max-width: 500px; /* Batasi lebar gambar agar tidak raksasa di tablet */
    height: auto;
    object-fit: contain;
  }
}

/* --- RESPONSIVE MOBILE (HP Kecil) --- */
/* Tetap pertahankan yang mobile di bawah 768px, tapi sesuaikan sedikit */
@media screen and (max-width: 767px) {
  #opening1.opening1 {
    padding-top: 100px; /* Jarak header di HP */
  }

  .opening1 h1 {
    font-size: 2.2rem; /* Lebih kecil lagi untuk HP */
  }

  .opening1 p {
    font-size: 1rem;
  }

  .opening1 .text-container {
    padding: 0 20px 30px 20px;
  }
  .opening1 .discover-btn {
    font-size: 1rem;
  }
}
/* ==========================================================
   CLIENT SERVICES SECTION BARU (DIPINDAH)
   ========================================================== */
#client-services-section {
  width: 100%;
  padding: 50px 0; /* Memberi ruang atas dan bawah */
  background-color: var(--bg-light);
}

/* KARTU WRAPPER: Mengatur 2 kartu di tengah */
#client-services-section .contact-info-block-wrapper {
  display: flex;
  justify-content: center;
  gap: 40px; /* KUNCI: Memposisikan kartu di TENGAH WEB /
  align-items: flex-start;
  
  margin: 0 auto; / Margin horizontal auto memastikan pemusatan /
  max-width: 900px; / Lebar total 2 kartu + gap agar tetap rapi /
  padding: 2rem 0;
  / Menghilangkan border-top karena sudah menjadi section baru */
}

/* BLOK CARD INDIVIDUAL (Mendefinisikan tampilan kartu) */
#client-services-section .contact-info-block {
  /* Menghapus properti margin/padding lama yang bertabrakan */
  margin: 0;
  border-top: none;

  /* Properti kartu */
  width: 100%;
  max-width: 500px;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 50px;
  text-align: left;
  background-color: #fff;
}

#client-services-section .contact-info-block h3 {
  text-align: center;
  margin-bottom: 1rem;
  font-size: 1.2rem;
  font-family: var(--p);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary-color);
}

#client-services-section .info-list {
  margin-bottom: 1rem;
  list-style: none;
  padding: 0;
}

#client-services-section .info-list li {
  font-family: var(--p);
  font-size: 1rem;
  color: var(--text-color);
  margin-bottom: 0.8rem;
  line-height: 1.4;
}

#client-services-section .info-list i {
  color: var(--accent-color);
  margin-right: 10px;
  width: 15px;
  text-align: center;
}

#client-services-section .btn-appointment-about {
  font-family: var(--cta);
  display: block;
  width: 100%;
  padding: 10px 20px;
  background-color: var(--accent-color);
  color: #fff;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 4px;
  transition: background-color 0.3s ease;
  text-align: center;
}

/* --- RESPONSIVE MOBILE UNTUK CARD BARU (< 767px) --- */
@media (max-width: 767px) {
  #client-services-section {
    padding: 30px 20px;
  }
  #client-services-section .contact-info-block-wrapper {
    flex-direction: column; /* Tumpuk vertikal di HP */
    align-items: center; /* Rata tengah */
    gap: 20px;
    padding: 0;
  }

  #client-services-section .contact-info-block {
    width: 100%;
    max-width: 300px;
  }
}