/* ============================================================
   STYLESHEET - RIS HANDMADE CROCHET (VERSI RAPI & RESPONSIVE)
   ------------------------------------------------------------
   Perubahan utama dari versi sebelumnya:
   1. Semua selector yang dulu diduplikasi berkali-kali
      (.logo-frame, .footer-new, .cart-btn, dst - yang tadinya
      ditimpa ulang lewat blok "PERBAIKAN"/"FIX FINAL") sudah
      digabung jadi SATU definisi per selector.
   2. Navbar ditulis ulang total mengikuti struktur Bootstrap 5
      (.navbar, .navbar-toggler, .navbar-collapse) + animasi
      slide/fade saat hamburger dibuka di HP.
   3. Font besar (hero title, section title) memakai clamp()
      supaya otomatis menyesuaikan lebar layar tanpa terpotong.
   4. Padding section dikecilkan otomatis di mobile via clamp()
      dan media query, tidak perlu duplikasi rule per breakpoint.
   5. Semua grid custom (CSS Grid) yang tadinya berisiko overflow
      di HP kecil (about-voca-wrap, footer-grid, contact-clean-grid,
      dst) dibuat responsive dengan minmax()/media query.
   Tampilan visual (warna, bentuk, efek hover) TIDAK diubah -
   hanya struktur & responsivitasnya yang dirapikan.
============================================================ */

/* ======================================================
   ROOT VARIABLES (tetap sama seperti punya Anda)
====================================================== */
:root {
  --primary: #8a1f62;
  --primary-dark: #5f1243;
  --primary-medium: #b34483;
  --primary-soft: #fff2f8;
  --mauve: #c77aa5;
  --cream: #fff8fd;
  --peach: #ffe0ef;
  --pink-soft: #ffeaf4;
  --text-dark: #251923;
  --text-muted: #75606c;
  --border: #efd7e5;
  --white: #ffffff;
  --shadow: 0 16px 40px rgba(138, 31, 98, 0.12);
  --shadow-hover: 0 22px 55px rgba(138, 31, 98, 0.20);
  --footer-dark: #4a1034;
  --footer-mid: #7b1b57;
  --footer-light: #a63676;
  --gold: #ffd36a;

  /* Spacing fluid untuk section (dipakai clamp() di banyak tempat) */
  --section-padding-y: clamp(2.5rem, 2rem + 2.2vw, 5.5rem);
}

/* ======================================================
   BASE / RESET DASAR
====================================================== */
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins", sans-serif;
  background: radial-gradient(circle at 0% 0%, rgba(255, 234, 244, 0.85), transparent 32%),
        radial-gradient(circle at 100% 18%, rgba(255, 224, 239, 0.75), transparent 30%),
        #ffffff;
  color: var(--text-dark);
  margin: 0;
  /* Mencegah horizontal scroll akibat elemen dekoratif (::before/::after) yang keluar viewport */
  overflow-x: hidden;
  width: 100%;
}

a {
  text-decoration: none;
}

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

/* Container tetap fluid, tidak ada elemen lebar fixed dalam px yang memaksa overflow */
.container {
  width: 100%;
  padding-left: clamp(16px, 4vw, 24px);
  padding-right: clamp(16px, 4vw, 24px);
}

/* ======================================================
   NAVBAR (Bootstrap 5: .navbar / .navbar-toggler / .navbar-collapse)
====================================================== */

.header-modern-final {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(239, 215, 229, 0.85);
  box-shadow: 0 10px 35px rgba(138, 31, 98, 0.08);
  padding: 0;
  z-index: 999;
}

.header-modern-final .header-inner {
  padding: 12px clamp(16px, 4vw, 24px);
  display: flex;
  align-items: center;
  gap: 16px;
}

/* --- Logo --- */
.logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-dark);
  width: fit-content;
  margin: 0;
}

.logo-wrap:hover {
  color: var(--text-dark);
}

.logo-frame {
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  filter: drop-shadow(0 10px 22px rgba(138, 31, 98, 0.22));
}

.logo-text {
  display: block;
  line-height: 1.1;
}

.logo-text h4 {
  margin: 0;
  font-size: clamp(16px, 1.4vw + 10px, 22px);
  font-weight: 900;
  color: var(--primary-dark);
  letter-spacing: 0.3px;
  line-height: 1.1;
}

.logo-text span {
  display: block;
  font-size: 11px;
  color: var(--primary);
  margin-top: 3px;
  font-weight: 700;
}

/* --- Tombol hamburger: ikon 3 garis bawaan Bootstrap, warna disamakan tema --- */
.header-modern-final .navbar-toggler {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 7px 10px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(138, 31, 98, 0.10);
}

.header-modern-final .navbar-toggler:focus {
  box-shadow: 0 0 0 3px rgba(138, 31, 98, 0.18);
}

.header-modern-final .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2838, 21, 33, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  width: 1.4em;
  height: 1.4em;
}

/* --- Menu link (di dalam .navbar-nav) --- */
.nav-menu-final {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu-final .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #5d4b56;
  font-size: 13px;
  font-weight: 800;
  padding: 9px 15px;
  border-radius: 999px;
  transition: 0.25s ease;
  white-space: nowrap;
}

.nav-menu-final .nav-link i {
  font-size: 14px;
  color: var(--primary);
  transition: 0.25s ease;
}

.nav-menu-final .nav-link:hover,
.nav-menu-final .nav-link.active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--primary-medium));
  transform: translateY(-1px);
}

.nav-menu-final .nav-link:hover i {
  color: #ffffff;
}

/* --- Tombol admin & keranjang --- */
.account-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  background: linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, var(--primary), var(--mauve)) border-box;
  border: 2px solid transparent;
  color: var(--primary);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.3px;
  box-shadow: 0 10px 25px rgba(138, 31, 98, 0.10);
  transition: 0.25s;
  white-space: nowrap;
}

.login-btn:hover {
  background: linear-gradient(135deg, var(--primary), var(--primary-medium));
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(138, 31, 98, 0.22);
}

.cart-btn {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff3fa, #ffe1ef);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  transition: 0.25s;
  border: 1px solid #f0d9e8;
  box-shadow: 0 10px 25px rgba(138, 31, 98, 0.10);
}

.cart-btn:hover {
  background: linear-gradient(135deg, var(--primary), var(--primary-medium));
  color: white;
  transform: translateY(-2px) rotate(-4deg);
  box-shadow: 0 14px 30px rgba(138, 31, 98, 0.22);
}

/* --- Animasi dropdown collapse di mobile (fade + slide, tidak kaku) --- */
.header-modern-final .navbar-collapse {
  transition: max-height 0.35s ease, opacity 0.3s ease;
}

@media (max-width: 991.98px) {
  .header-modern-final .navbar-collapse {
    width: 100%;
    order: 4;
  }

  .header-modern-final .navbar-collapse.collapsing {
    opacity: 0;
    transition: height 0.3s ease, opacity 0.3s ease;
  }

  .header-modern-final .navbar-collapse.show {
    opacity: 1;
    animation: navDropIn 0.32s ease;
  }

  .nav-menu-final {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 14px 4px 6px;
    border-top: 1px solid var(--border);
    margin-top: 10px;
  }

  .nav-menu-final .nav-link {
    width: 100%;
    padding: 12px 14px;
  }

  .account-links {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 4px 4px;
  }

  .account-links .login-btn {
    width: 100%;
    justify-content: center;
  }

  .account-links .cart-btn {
    display: none; /* versi mobile sudah tampil di baris atas, lihat markup */
  }
}

@keyframes navDropIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Di layar >=992px, collapse selalu terbuka sejajar (perilaku default navbar-expand-lg) */
@media (min-width: 992px) {
  .header-modern-final .header-inner {
    flex-wrap: nowrap;
  }
  .nav-menu-final {
    gap: 2px;
  }
}

/* ======================================================
   HERO SECTION
====================================================== */

.hero-home {
  min-height: 420px;
  background: radial-gradient(circle at 88% 12%, rgba(255, 211, 235, 0.85), transparent 25%),
        radial-gradient(circle at 65% 88%, rgba(255, 224, 239, 0.65), transparent 28%),
        linear-gradient(90deg, rgba(255, 247, 251, 0.98) 0%, rgba(255, 247, 251, 0.88) 45%, rgba(255, 255, 255, 0.30) 100%),
        url("../img/banner-crochet.jpg");
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hero-home::before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  border: 1px solid rgba(138, 31, 98, 0.12);
  border-radius: 50%;
  right: -90px;
  top: 70px;
  animation: floatSoft 5s ease-in-out infinite;
}

.hero-home::after {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  border-radius: 60px;
  background: rgba(138, 31, 98, 0.07);
  left: -80px;
  bottom: -60px;
  transform: rotate(18deg);
  animation: floatSoft 6s ease-in-out infinite reverse;
}

@keyframes floatSoft {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(4deg); }
}

.hero-content {
  max-width: 700px;
  padding: clamp(48px, 6vw, 90px) 0;
  position: relative;
  z-index: 2;
}

.hero-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--primary);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 16px;
  box-shadow: 0 10px 25px rgba(138, 31, 98, 0.12);
  border: 1px solid var(--border);
}

.hero-small {
  font-family: "Playfair Display", serif;
  color: var(--primary);
  font-size: clamp(20px, 1.6vw + 14px, 32px);
  margin-bottom: 5px;
  font-weight: 800;
}

/* clamp() supaya heading besar tidak pernah terpotong di layar 360px sekalipun */
.hero-content h1 {
  font-family: "Playfair Display", serif;
  font-size: clamp(30px, 5vw + 12px, 66px);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: 0.3px;
  margin-bottom: 16px;
  color: #1f121b;
  word-break: break-word;
}

.hero-content h1 span {
  display: block;
  color: var(--primary);
  text-shadow: 0 8px 20px rgba(138, 31, 98, 0.12);
}

.hero-content p {
  font-size: clamp(14px, 0.4vw + 13px, 17px);
  line-height: 1.8;
  color: #503f49;
  margin-bottom: 26px;
  max-width: 610px;
  font-weight: 500;
}

.hero-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.btn-hero-primary, .btn-hero-outline, .btn-selengkapnya, .best-btn, .category-modern-body a {
  position: relative;
  overflow: hidden;
}

.btn-hero-primary::after, .btn-hero-outline::after, .btn-selengkapnya::after, .best-btn::after, .category-modern-body a::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: 0.5s;
}

.btn-hero-primary:hover::after, .btn-hero-outline:hover::after, .btn-selengkapnya:hover::after, .best-btn:hover::after, .category-modern-body a:hover::after {
  left: 130%;
}

.btn-hero-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-medium));
  color: #fff;
  padding: 13px 28px;
  border-radius: 999px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  box-shadow: 0 12px 28px rgba(138, 31, 98, 0.28);
  transition: 0.25s;
}

.btn-hero-primary:hover {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  color: #fff;
  transform: translateY(-3px);
}

.btn-hero-outline {
  border: 1px solid var(--primary);
  color: var(--primary);
  padding: 12px 26px;
  border-radius: 999px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.75);
  transition: 0.25s;
}

.btn-hero-outline:hover {
  background: var(--primary);
  color: #fff;
  transform: translateY(-3px);
}

/* ======================================================
   BENEFIT / KEUNGGULAN BOX
   Grid otomatis menyesuaikan lebar kolom minimum (auto-fit)
   sehingga tidak butuh banyak override per breakpoint.
====================================================== */

.benefit-section {
  margin-top: -32px;
  position: relative;
  z-index: 5;
}

.benefit-box {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 26px;
  box-shadow: var(--shadow);
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 12px;
  border-right: 1px solid #eee0ea;
  padding: 8px 10px 8px 0;
  transition: 0.25s;
}

.benefit-item:hover {
  transform: translateY(-4px);
}

.benefit-item:last-child {
  border-right: none;
}

.benefit-icon {
  min-width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--primary-soft), #ffe0ef);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  position: relative;
  box-shadow: 0 8px 18px rgba(138, 31, 98, 0.10);
  transition: 0.25s;
}

.benefit-icon i {
  font-size: 25px;
}

.handmade-custom-icon i:first-child {
  font-size: 28px;
}

.handmade-custom-icon i:last-child {
  font-size: 15px;
  position: absolute;
  right: 8px;
  bottom: 8px;
  color: var(--primary-medium);
}

.benefit-item:hover .benefit-icon {
  transform: scale(1.08) rotate(-4deg);
  background: linear-gradient(135deg, #ffe6f1, #fff8ed);
}

.benefit-item h6 {
  margin: 0;
  font-size: 14px;
  font-weight: 900;
  color: var(--text-dark);
}

.benefit-item p {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.35;
  font-weight: 500;
}

/* ======================================================
   SECTION WRAPPER UMUM
   Padding otomatis menyusut di layar kecil via clamp().
====================================================== */

.section-home {
  padding: var(--section-padding-y) 0;
  background: #ffffff;
}

.section-soft {
  background: radial-gradient(circle at 10% 10%, rgba(255, 224, 239, 0.50), transparent 28%),
        linear-gradient(180deg, #fff2f8 0%, #ffffff 100%);
}

.section-title-home {
  text-align: center;
  margin-bottom: clamp(26px, 3vw, 42px);
  padding: 0 8px;
}

.section-title-home .mini-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--primary);
  background: var(--primary-soft);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 12px;
  border: 1px solid var(--border);
}

.section-title-home h2 {
  font-family: "Playfair Display", serif;
  color: var(--primary);
  font-size: clamp(24px, 2.2vw + 16px, 44px);
  font-weight: 900;
  margin: 0;
}

.section-title-home p {
  color: var(--text-muted);
  margin-top: 10px;
  font-size: 15px;
  font-weight: 500;
}

/* ======================================================
   KATEGORI PRODUK (CARD)
   Grid kolom kini ditangani Bootstrap (col-12/col-sm-6/
   col-md-4/col-lg-3) di HTML, CSS hanya mengurus tampilan card.
====================================================== */

.category-modern {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #eadce5;
  border-radius: 26px;
  overflow: hidden;
  height: 100%;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.07);
  transition: 0.3s ease;
  position: relative;
}

.category-modern:hover {
  transform: translateY(-9px);
  box-shadow: var(--shadow-hover);
}

.category-modern-img {
  height: 178px;
  background: var(--primary-soft);
  position: relative;
  overflow: hidden;
}

.category-modern-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.45s ease;
}

.category-modern:hover .category-modern-img img {
  transform: scale(1.09);
}

.category-modern-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.01), rgba(138, 31, 98, 0.34));
}

.category-modern-img i {
  width: 100%;
  height: 100%;
  font-size: 48px;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-soft);
}

.category-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  background: #ffffff;
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  padding: 8px 13px;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
}

.category-modern-body {
  padding: 22px 18px 24px;
  text-align: center;
}

.category-modern-body h5 {
  font-size: 19px;
  font-weight: 900;
  color: #241722;
  margin-bottom: 7px;
}

.category-modern-body p {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 17px;
  line-height: 1.6;
}

.category-modern-body a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: linear-gradient(135deg, var(--primary), var(--primary-medium));
  color: #ffffff;
  font-weight: 900;
  font-size: 13px;
  padding: 11px 19px;
  border-radius: 999px;
  transition: 0.25s;
  box-shadow: 0 10px 20px rgba(138, 31, 98, 0.20);
}

.category-modern-body a:hover {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  color: #ffffff;
  transform: translateY(-2px);
}

/* ======================================================
   PRODUK TERLARIS (CARD)
====================================================== */

.best-product-card {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #eadce5;
  border-radius: 26px;
  overflow: hidden;
  height: 100%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
  transition: 0.25s;
  position: relative;
}

.best-product-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
}

.best-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  background: linear-gradient(135deg, var(--primary), var(--primary-medium));
  color: #fff;
  padding: 8px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(138, 31, 98, 0.24);
}

.best-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f8f8f8;
  overflow: hidden;
  position: relative;
}

.best-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.38s;
}

.best-product-card:hover .best-img img {
  transform: scale(1.06);
}

.best-img-placeholder {
  width: 100%;
  height: 100%;
  background: var(--primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 48px;
}

.best-body {
  padding: 21px;
}

.best-body h5 {
  font-size: 18px;
  font-weight: 900;
  color: #241722;
  min-height: 45px;
  margin-bottom: 11px;
}

.best-price {
  color: var(--primary);
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 10px;
}

.best-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #6f5a66;
  margin-bottom: 17px;
  gap: 8px;
  flex-wrap: wrap;
  font-weight: 700;
}

.best-meta span {
  background: #faf4f8;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid #f1dce8;
}

.best-btn {
  display: block;
  width: 100%;
  background: linear-gradient(135deg, var(--primary), var(--primary-medium));
  color: #fff;
  text-align: center;
  padding: 13px;
  border-radius: 15px;
  font-weight: 900;
  transition: 0.22s;
}

.best-btn:hover {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  color: #fff;
  transform: translateY(-2px);
}

.best-btn-disabled {
  display: block;
  width: 100%;
  background: #999;
  color: #fff;
  text-align: center;
  padding: 13px;
  border-radius: 15px;
  font-weight: 900;
  border: none;
}

.btn-selengkapnya {
  background: linear-gradient(135deg, var(--primary), var(--primary-medium));
  color: #fff;
  border: none;
  padding: 15px clamp(28px, 4vw, 48px);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(138, 31, 98, 0.26);
  transition: 0.25s;
  display: inline-block;
}

.btn-selengkapnya:hover {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  color: #fff;
  transform: translateY(-3px);
}

/* ======================================================
   STATISTIK / ANGKA PENCAPAIAN
====================================================== */

.stats-section {
  padding: var(--section-padding-y) 0;
  background: radial-gradient(circle at 20% 20%, rgba(255, 211, 106, 0.20), transparent 24%),
        linear-gradient(135deg, #4a1034, #7b1b57 45%, #a63676);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.stats-section::before {
  content: "";
  position: absolute;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  right: -90px;
  top: -100px;
}

.stats-title-wrap {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(28px, 3vw, 42px);
  position: relative;
  z-index: 2;
  padding: 0 8px;
}

.stats-mini-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.14);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 12px;
}

.stats-title-wrap h2 {
  font-family: "Playfair Display", serif;
  font-size: clamp(24px, 2.2vw + 16px, 40px);
  font-weight: 900;
  margin: 0 0 10px;
}

.stats-title-wrap p {
  font-size: 14px;
  color: #ffeaf5;
  margin: 0;
}

.stat-card {
  text-align: center;
  padding: 28px 20px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  height: 100%;
  backdrop-filter: blur(12px);
  transition: 0.28s;
  position: relative;
  overflow: hidden;
}

.stat-card::after {
  content: "";
  position: absolute;
  inset: auto -50px -80px auto;
  width: 150px;
  height: 150px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}

.stat-card:hover {
  transform: translateY(-7px);
  background: rgba(255, 255, 255, 0.17);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.stat-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 32px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
}

.stat-card h3 {
  font-size: clamp(26px, 1.6vw + 20px, 36px);
  font-weight: 900;
  margin: 0;
  color: #fff;
}

.stat-card p {
  margin: 6px 0 0;
  color: #ffeaf5;
  font-weight: 800;
}

/* ======================================================
   TENTANG KAMI
====================================================== */

.about-voca-section {
  padding: var(--section-padding-y) 0;
  background: #fff2f8;
  position: relative;
  overflow: hidden;
}

.about-voca-section::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  left: -160px;
  top: -190px;
  pointer-events: none;
}

.about-voca-wrap {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: clamp(32px, 5vw, 92px);
  align-items: center;
}

.about-voca-image-box {
  background: #fff2f8;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 3vw, 42px);
  box-shadow: 0 20px 45px rgba(138, 31, 98, 0.08);
}

.about-voca-image-frame {
  width: 100%;
  height: clamp(220px, 30vw, 500px);
  border: 1px solid #efd7e5;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 250, 246, 0.72);
}

.about-voca-image-frame::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid #efd7e5;
  pointer-events: none;
}

.about-voca-image-frame img {
  width: clamp(130px, 16vw, 260px);
  height: clamp(130px, 16vw, 260px);
  object-fit: contain;
  filter: drop-shadow(0 14px 30px rgba(138, 31, 98, 0.20));
}

.about-voca-content {
  max-width: 620px;
}

.about-voca-mini {
  display: inline-block;
  color: #8a1f62;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: clamp(18px, 2vw, 35px);
  position: relative;
}

.about-voca-mini::after {
  content: "";
  display: block;
  width: 85px;
  height: 1px;
  background: #c77aa5;
  margin-top: 13px;
}

.about-voca-content h2 {
  font-family: "Playfair Display", serif;
  color: #251923;
  font-size: clamp(26px, 2.6vw + 16px, 55px);
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -0.5px;
  margin: 0 0 24px;
}

.about-voca-content p {
  color: #75606c;
  font-size: 15px;
  line-height: 1.9;
  font-weight: 500;
  margin-bottom: 22px;
  max-width: 560px;
  text-align: left;
}

/* ======================================================
   TESTIMONI
====================================================== */

.testimoni-voca-section {
  padding: var(--section-padding-y) 0;
  background: #fff2f8;
  position: relative;
  overflow: hidden;
}

.testimoni-voca-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.42), transparent 30%),
        radial-gradient(circle at 90% 85%, rgba(255, 255, 255, 0.36), transparent 30%);
  pointer-events: none;
}

.testimoni-voca-inner {
  position: relative;
  z-index: 2;
}

.testimoni-voca-heading {
  text-align: center;
  max-width: 650px;
  margin: 0 auto clamp(32px, 4vw, 88px);
  padding: 0 8px;
}

.testimoni-voca-heading .mini {
  display: block;
  color: #8a1f62;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.testimoni-voca-heading h2 {
  font-family: "Playfair Display", serif;
  color: #251923;
  font-size: clamp(26px, 2.4vw + 16px, 56px);
  line-height: 1.12;
  font-weight: 900;
  margin: 0 0 18px;
  letter-spacing: -0.5px;
}

.testimoni-voca-heading p {
  color: #7f7773;
  font-size: 15px;
  line-height: 1.8;
  margin: 0 auto;
  max-width: 540px;
  font-weight: 500;
}

.testimoni-voca-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 3vw, 56px);
  align-items: stretch;
}

.testimoni-voca-card {
  background: rgba(255, 255, 255, 0.82);
  min-height: 220px;
  padding: clamp(26px, 3vw, 44px) clamp(22px, 3vw, 45px) clamp(22px, 3vw, 38px);
  box-shadow: 0 20px 38px rgba(138, 31, 98, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.82);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: 0.25s ease;
}

.testimoni-voca-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(138, 31, 98, 0.14);
}

.testimoni-voca-stars {
  color: #f7b500;
  font-size: 13px;
  letter-spacing: 8px;
  margin-bottom: 24px;
  line-height: 1;
  font-weight: 900;
}

.testimoni-voca-quote {
  color: #5f4a58;
  font-size: 14px;
  font-style: italic;
  line-height: 1.75;
  margin: 0 0 30px;
  font-weight: 600;
}

.testimoni-voca-name {
  color: #251923;
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.testimoni-voca-role {
  color: #b34483;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

/* ======================================================
   HUBUNGI KAMI / KONTAK
====================================================== */

.contact-clean-section {
  padding: var(--section-padding-y) 0;
  background: #fff8fd;
  border-top: 1px solid rgba(234, 215, 210, 0.55);
}

.contact-clean-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(32px, 6vw, 120px);
  align-items: start;
}

.contact-clean-info h2 {
  font-family: "Playfair Display", serif;
  color: var(--primary-dark);
  font-size: clamp(26px, 2vw + 16px, 42px);
  font-weight: 900;
  margin-bottom: 26px;
  letter-spacing: -0.4px;
}

.contact-clean-info p {
  color: #7b6468;
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 8px;
  font-weight: 500;
  word-break: break-word;
}

.contact-clean-info a {
  color: #7b6468;
  transition: 0.25s ease;
}

.contact-clean-info a:hover {
  color: var(--primary);
}

.contact-open-time {
  margin-top: 26px;
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.contact-clean-form {
  padding-top: 5px;
}

.contact-form-row {
  margin-bottom: 26px;
}

.contact-clean-form label {
  display: block;
  color: #8a1f62;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.contact-clean-form input, .contact-clean-form textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid #eadbd6;
  background: transparent;
  outline: none;
  padding: 11px 0 13px;
  color: var(--text-dark);
  font-size: 15px;
  font-family: "Poppins", sans-serif;
  transition: 0.25s ease;
}

.contact-clean-form textarea {
  min-height: 100px;
  resize: vertical;
}

.contact-clean-form input:focus, .contact-clean-form textarea:focus {
  border-bottom-color: var(--primary);
}

.contact-clean-btn {
  margin-top: 16px;
  background: var(--primary-dark);
  color: #fff;
  border: none;
  padding: 15px clamp(28px, 4vw, 48px);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  max-width: 260px;
}

.contact-clean-btn:hover {
  background: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(138, 31, 98, 0.18);
}

/* ======================================================
   FOOTER
====================================================== */

.footer-new {
  background: linear-gradient(135deg, #4a1034 0%, #7b1b57 45%, #9b2d72 100%);
  color: #fff4fa;
  padding: clamp(36px, 5vw, 58px) 0 0;
  position: relative;
  overflow: hidden;
  border-top: none;
}

.footer-new::before {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  right: -90px;
  top: -100px;
}

.footer-new::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 211, 106, 0.10);
  left: -60px;
  bottom: 40px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(24px, 3vw, 38px);
  align-items: start;
  position: relative;
  z-index: 2;
}

.footer-logo-box img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  margin-bottom: 18px;
  background: rgba(255, 255, 255, 0.96);
  padding: 12px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.25));
}

.footer-logo-box p, .footer-contact-text, .newsletter-text {
  color: #ffeaf5;
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 12px;
  word-break: break-word;
}

.footer-new h5 {
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 18px;
  position: relative;
  padding-bottom: 12px;
}

.footer-new h5::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 3px;
  background: #ffd36a;
  border-radius: 10px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 11px;
}

.footer-links a, .footer-contact-text a {
  color: #ffeaf5;
  font-size: 14px;
  font-weight: 600;
  transition: 0.25s;
}

.footer-links a:hover, .footer-contact-text a:hover {
  color: #ffffff;
  padding-left: 5px;
}

.newsletter-form {
  display: flex;
  gap: 8px;
  max-width: 280px;
}

.newsletter-form input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 13px;
  outline: none;
}

.newsletter-form input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.newsletter-form button {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: #ffd36a;
  color: #4a1034;
  font-size: 16px;
}

.footer-bottom-new {
  margin-top: clamp(28px, 4vw, 42px);
  padding: 20px 0;
  background: rgba(44, 8, 30, 0.45);
  color: #fff4fa;
  font-size: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
  z-index: 2;
  text-align: center;
}

.footer-bottom-menu {
  text-align: center;
  margin-top: 10px;
}

.footer-bottom-menu a {
  color: #ffeaf5;
  margin: 0 12px;
  font-size: 13px;
  font-weight: 700;
  transition: 0.25s;
  display: inline-block;
}

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

@media (min-width: 768px) {
  .footer-bottom-new .row > div:first-child {
    text-align: left;
  }
  .footer-bottom-menu {
    text-align: right;
    margin-top: 0;
  }
}

/* ======================================================
   TOMBOL BACK TO TOP
====================================================== */

.footer-to-top {
  position: fixed;
  right: clamp(14px, 3vw, 28px);
  bottom: clamp(14px, 3vw, 28px);
  width: 48px;
  height: 48px;
  border: 1px solid #efd7e5;
  color: #8a1f62;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  z-index: 99;
  transition: 0.25s;
  border-radius: 50%;
  box-shadow: 0 16px 40px rgba(138, 31, 98, 0.12);
}

.footer-to-top:hover {
  background: #8a1f62;
  color: #ffffff;
  border-color: #8a1f62;
}

/* ======================================================
   BREAKPOINT UTAMA
   - 992px = ambang collapse navbar Bootstrap (lg), sekaligus
     titik pindah layout 2 kolom -> 1 kolom untuk grid custom
     (about-voca-wrap, contact-clean-grid, dst) karena di bawah
     ukuran ini ruang sudah terlalu sempit untuk 2 kolom sejajar.
   - 768px  = ambang tablet (md) untuk penyesuaian detail kecil.
   - 576px  = ambang HP besar/kecil (sm) untuk padding & ukuran
     komponen yang lebih ringkas.
   - 400px  = pengaman ekstra untuk HP sangat kecil (~360px).
====================================================== */

@media (max-width: 991.98px) {
  .about-voca-wrap {
    grid-template-columns: 1fr;
  }
  .about-voca-image-box {
    min-height: 260px;
  }
  .contact-clean-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .header-modern-final .header-inner {
    row-gap: 10px;
  }
}

@media (max-width: 767.98px) {
  .logo-frame {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
  }
  .logo-text h4 {
    font-size: 15px;
  }
  .logo-text span {
    font-size: 10px;
  }
  .best-body h5 {
    min-height: auto;
  }
}

@media (max-width: 575.98px) {
  .hero-home {
    min-height: 360px;
  }
  .hero-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-buttons a {
    justify-content: center;
  }
  .contact-clean-btn {
    max-width: 100%;
  }
  .newsletter-form {
    max-width: 100%;
  }
  .footer-logo-box img {
    width: 68px;
    height: 68px;
  }
}

@media (max-width: 400px) {
  .header-modern-final .header-inner {
    padding-left: 14px;
    padding-right: 14px;
  }
  .logo-text span {
    display: none; /* hemat ruang di HP sangat kecil (~360px) */
  }
  .hero-label {
    font-size: 11px;
    padding: 8px 12px;
  }
}