/* =========================================================
   Genesis Glory — style.css
   Mobile first. Breakpoint desktop: 768px

   ANTI-BENTROK:
   - Semua class memakai prefix "ggl-" dan selalu diawali scope
     ".ggl-section" (specificity 0,2,0).
   - Semua deklarasi memakai !important supaya tidak tertimpa
     Bootstrap / custom.css existing.
   - Font & ukuran dipasang langsung di elemen teks (p, h, span, li,
     strong, a), BUKAN di wrapper, karena aturan seperti
     "p { font-family: ... }" di custom.css akan mengalahkan
     nilai yang hanya diwariskan dari parent.
   - Tidak ada url() gambar di file ini; semua gambar lewat
     <?=FE_IMG?> di index.html.
   ========================================================= */

/* ---------- Skala tipografi (dipakai SEMUA section) ---------- */
:root {
  --ggl-fs-title: 30px;       /* judul section (h2) */
  --ggl-fs-title-col: 30px;   /* judul section di kolom sempit (section 2) */
  --ggl-fs-script: 40px;      /* judul script */
  --ggl-fs-script-col: 36px;  /* judul script di kolom setengah lebar */
  --ggl-fs-subtitle: 17px;    /* sub judul */
  --ggl-fs-eyebrow: 13px;     /* label kecil di atas judul, mis. "OUR STORY" */
  --ggl-fs-label: 12px;       /* label sangat kecil, mis. "ABOUT US" */
  --ggl-fs-body: 15px;        /* paragraf */
  --ggl-fs-small: 14px;       /* list / teks kecil */
  --ggl-fs-button: 15px;      /* tombol */

  --ggl-lh-tight: 1.03;
  --ggl-lh-title: 1.3;
  --ggl-lh-subtitle: 1.3;
  --ggl-lh-body: 1.7;
  --ggl-lh-small: 1.5;

  --ggl-font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ggl-font-serif: "Gilda Display", Georgia, "Times New Roman", serif;
  --ggl-font-logo: "Cinzel", "Trajan Pro", Georgia, serif;
  --ggl-font-serif-bold: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ggl-font-script: "Playball", "Brush Script MT", cursive;
  --ggl-font-humanist: "Alegreya Sans", "Segoe UI", sans-serif;

  --ggl-color-cream: #EFE7DB;
  --ggl-color-ink: #2B150B;
  --ggl-color-text: #4E4643;
  --ggl-color-accent: #8C5E44;
  --ggl-color-brown: #935333;
  --ggl-color-gold: #6B4716;
}

@media (min-width: 768px) {
  :root {
    --ggl-fs-title: 4.64vw;
    --ggl-fs-title-col: 3.92vw;
    --ggl-fs-script: 6.65vw;
    --ggl-fs-script-col: 4.6vw;
    --ggl-fs-subtitle: 1.78vw;
    --ggl-fs-eyebrow: 1.85vw;
    --ggl-fs-label: 1.12vw;
    --ggl-fs-body: 1.58vw;
    --ggl-fs-small: 1.7vw;
    --ggl-fs-button: 1.65vw;
    --ggl-lh-body: 1.37;
  }
}

/* ---------- Reset terbatas: HANYA di dalam .ggl-section ---------- */
.ggl-section,
.ggl-section *,
.ggl-section *::before,
.ggl-section *::after {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-shadow: none !important;
  text-align: left !important;
}

.ggl-section {
  display: block !important;
  font-family: var(--ggl-font-sans) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  -webkit-text-size-adjust: 100% !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* <br> hanya aktif di desktop, supaya teks mobile mengalir penuh */
.ggl-section .ggl-br-desktop {
  display: none !important;
}

/* =========================================================
   SECTION 1 — OUR STORY
   ========================================================= */
.ggl-section.ggl-story {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  background-color: var(--ggl-color-cream) !important;
}

/* ----- bagian atas: teks + foto membatik ----- */
.ggl-section .ggl-story__hero {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  background-color: var(--ggl-color-cream) !important;
  background-repeat: no-repeat !important;
  /* mobile: teks di atas warna polos, foto membatik di bawah */
  background-size: 190% auto !important;
  background-position: right bottom !important;
}

/* gradasi penyambung warna polos dengan tepi atas foto (mobile) */
.ggl-section .ggl-story__hero::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(81.1vw - 30vw) !important;
  height: 30vw !important;
  background: linear-gradient(to bottom, #EFE7DB 0%, rgba(239, 231, 219, 0) 100%) !important;
  pointer-events: none !important;
}

.ggl-section .ggl-story__content {
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  padding: 48px 24px 72vw !important;
}

.ggl-section .ggl-story__eyebrow {
  font-family: var(--ggl-font-sans) !important;
  font-weight: 500 !important;
  font-size: var(--ggl-fs-eyebrow) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.37em !important;
  color: var(--ggl-color-accent) !important;
}

.ggl-section .ggl-story__title {
  margin-top: 12px !important;
  font-family: var(--ggl-font-serif) !important;
  font-weight: 400 !important;
  font-size: var(--ggl-fs-title) !important;
  line-height: var(--ggl-lh-title) !important;
  color: var(--ggl-color-ink) !important;
}

.ggl-section .ggl-story__text {
  margin-top: 16px !important;
  font-family: var(--ggl-font-sans) !important;
  font-weight: 400 !important;
  font-size: var(--ggl-fs-body) !important;
  line-height: var(--ggl-lh-body) !important;
  color: var(--ggl-color-text) !important;
}

.ggl-section .ggl-story__btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 24px !important;
  padding: 11px 22px 11px 24px !important;
  border: 0 !important;
  border-radius: 9999px !important;
  background: var(--ggl-color-brown) !important;
  color: #F7EEE8 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease !important;
}

.ggl-section .ggl-story__btn-text {
  font-family: var(--ggl-font-sans) !important;
  font-weight: 500 !important;
  font-size: var(--ggl-fs-button) !important;
  line-height: 1.5 !important;
  color: #F7EEE8 !important;
}

.ggl-section .ggl-story__btn:hover,
.ggl-section .ggl-story__btn:focus {
  color: #F7EEE8 !important;
  text-decoration: none !important;
  background: #7E4428 !important;
}

.ggl-section .ggl-story__btn:focus-visible {
  outline: 2px solid var(--ggl-color-accent) !important;
  outline-offset: 2px !important;
}

.ggl-section .ggl-story__btn-icon {
  display: block !important;
  flex-shrink: 0 !important;
  width: 18px !important;
  height: 18px !important;
}

/* ----- bagian bawah: galeri 6 foto ----- */
.ggl-section .ggl-story__gallery {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px !important;
  width: 100% !important;
  padding: 4px 0 12px !important;
}

/* kolom desain desktop; di mobile foto langsung masuk grid 2 kolom */
.ggl-section .ggl-story__col {
  display: contents !important;
}

.ggl-section .ggl-story__tile {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  border: 0 !important;
}

.ggl-section .ggl-story__img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* =========================================================
   DESKTOP (>= 768px)
   Ukuran memakai vw agar proporsi sama dengan desain (602 x 550)
   ========================================================= */
@media (min-width: 768px) {
  .ggl-section .ggl-br-desktop {
    display: inline !important;
  }

  /* ----- Section 1 ----- */
  .ggl-section .ggl-story__hero {
    aspect-ratio: 602 / 257 !important;
    background-size: cover !important;
    background-position: center top !important;
  }

  .ggl-section .ggl-story__hero::before {
    display: none !important;
  }

  .ggl-section .ggl-story__content {
    position: absolute !important;
    left: 6.3% !important;
    top: 11.6% !important;
    width: 46% !important;
    padding: 0 !important;
  }

  .ggl-section .ggl-story__title {
    margin-top: 0.65vw !important;
  }

  .ggl-section .ggl-story__text {
    margin-top: 1.55vw !important;
  }

  .ggl-section .ggl-story__btn {
    gap: 1.5vw !important;
    margin-top: 2.2vw !important;
    padding: 0.85vw 2.15vw 0.85vw 2.5vw !important;
  }

  .ggl-section .ggl-story__btn-icon {
    width: 2vw !important;
    height: 2vw !important;
  }

  /* galeri: 3 kolom, tinggi foto tiap kolom berbeda sesuai desain */
  .ggl-section .ggl-story__gallery {
    display: flex !important;
    gap: 0.5vw !important;
    height: calc(46.52vw + 0.33vw + 1.83vw) !important;
    padding: 0.33vw 0 1.83vw !important;
  }

  .ggl-section .ggl-story__col {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.33vw !important;
    flex: 199 1 0 !important;
    min-width: 0 !important;
  }

  .ggl-section .ggl-story__col--1 {
    flex-grow: 198 !important;
  }

  .ggl-section .ggl-story__tile {
    aspect-ratio: auto !important;
    min-height: 0 !important;
  }

  .ggl-section .ggl-story__tile--a { flex: 139 1 0 !important; }
  .ggl-section .ggl-story__tile--b { flex: 139 1 0 !important; }
  .ggl-section .ggl-story__tile--c { flex: 157 1 0 !important; }
  .ggl-section .ggl-story__tile--d { flex: 121 1 0 !important; }
  .ggl-section .ggl-story__tile--e { flex: 131 1 0 !important; }
  .ggl-section .ggl-story__tile--f { flex: 147 1 0 !important; }
}

/* =========================================================
   SECTION 2 — ABOUT US (TWO TRADITIONS, ONE PURPOSE)
   ========================================================= */
.ggl-section.ggl-about {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  background-color: var(--ggl-color-cream) !important;
  background-repeat: no-repeat !important;
  /* mobile: teks di atas warna polos, kolase foto di bawah */
  background-size: 100% auto !important;
  background-position: center bottom !important;
}

/* gradasi penyambung warna polos dengan tepi atas kolase (mobile) */
.ggl-section.ggl-about::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(66.6vw - 12vw) !important;
  height: 12vw !important;
  background: linear-gradient(to bottom, #EFE7DB 0%, rgba(239, 231, 219, 0) 100%) !important;
  pointer-events: none !important;
}

.ggl-section .ggl-about__content {
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  padding: 48px 24px calc(66.6vw + 28px) !important;
}

/* ----- logo Genesis Glory Store ----- */
.ggl-section .ggl-about__logo {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 200px !important;
  margin: 0 auto !important;
}

.ggl-section .ggl-about__logo-icon {
  display: block !important;
  width: 30px !important;
  height: 30px !important;
}

.ggl-section .ggl-about__logo-name {
  margin-top: 8px !important;
  font-family: var(--ggl-font-logo) !important;
  font-weight: 500 !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  color: var(--ggl-color-gold) !important;
  text-align: center !important;
}

.ggl-section .ggl-about__logo-store {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 4px !important;
}

.ggl-section .ggl-about__logo-line {
  display: block !important;
  flex: 1 !important;
  height: 2px !important;
  background: var(--ggl-color-gold) !important;
  opacity: 0.85 !important;
}

.ggl-section .ggl-about__logo-dot {
  display: block !important;
  flex-shrink: 0 !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--ggl-color-gold) !important;
}

.ggl-section .ggl-about__logo-store-text {
  padding: 0 0.3em 0 0.95em !important; /* 0.45em kanan dari letter-spacing */
  font-family: var(--ggl-font-logo) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.45em !important;
  color: var(--ggl-color-gold) !important;
}

/* ----- label "ABOUT US" + garis ----- */
.ggl-section .ggl-about__label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; /* mobile: rata tengah seperti logo */
  gap: 12px !important;
  margin-top: 40px !important;
}

.ggl-section .ggl-about__label-text {
  font-family: var(--ggl-font-sans) !important;
  font-weight: 500 !important;
  font-size: var(--ggl-fs-label) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;
  color: #9C8263 !important;
}

.ggl-section .ggl-about__label-line {
  display: block !important;
  width: 40px !important;
  height: 1px !important;
  background: #BCA788 !important;
}

.ggl-section .ggl-about__title {
  margin-top: 14px !important;
  font-family: var(--ggl-font-serif) !important;
  font-weight: 400 !important;
  font-size: var(--ggl-fs-title-col) !important;
  line-height: var(--ggl-lh-tight) !important;
  color: #25140A !important;
  text-align: center !important;
}

.ggl-section .ggl-about__subtitle {
  margin-top: 10px !important;
  font-family: var(--ggl-font-serif) !important;
  font-weight: 400 !important;
  font-size: var(--ggl-fs-subtitle) !important;
  line-height: var(--ggl-lh-subtitle) !important;
  color: #7A5F3C !important;
  text-align: center !important;
}

@media (min-width: 768px) {
  /* ----- Section 2 ----- */
  .ggl-section.ggl-about {
    aspect-ratio: 602 / 401 !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .ggl-section.ggl-about::before {
    display: none !important;
  }

  .ggl-section .ggl-about__content {
    position: absolute !important;
    left: 4.82% !important;
    top: 9.1% !important;
    width: 27% !important;
    padding: 0 !important;
  }

  .ggl-section .ggl-about__logo {
    width: 17.1vw !important;
    margin: 0 0 0 3.1vw !important;
  }

  .ggl-section .ggl-about__logo-icon {
    width: 3vw !important;
    height: 3vw !important;
  }

  .ggl-section .ggl-about__logo-name {
    margin-top: 0.45vw !important;
    font-size: 2.19vw !important;
  }

  .ggl-section .ggl-about__logo-store {
    margin-top: -0.25vw !important;
  }

  .ggl-section .ggl-about__logo-line {
    height: 0.25vw !important;
  }

  .ggl-section .ggl-about__logo-dot {
    width: 0.55vw !important;
    height: 0.55vw !important;
  }

  .ggl-section .ggl-about__logo-store-text {
    font-size: 1.45vw !important;
  }

  .ggl-section .ggl-about__label {
    justify-content: flex-start !important;
    gap: 1.1vw !important;
    margin-top: 4.37vw !important;
  }

  .ggl-section .ggl-about__label-line {
    width: 3.3vw !important;
    height: 0.17vw !important;
  }

  .ggl-section .ggl-about__title {
    margin-top: 1.75vw !important;
    text-align: left !important;
  }

  .ggl-section .ggl-about__subtitle {
    margin-top: 0.22vw !important;
    text-align: left !important;
  }
}

/* =========================================================
   SECTION 3 — BATIK COLLECTION
   ========================================================= */
.ggl-section.ggl-batik {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  background-color: #F5F1EB !important;
}

/* ----- slider: geser (swipe) + scroll-snap, tanpa library ----- */
.ggl-section .ggl-batik__track {
  display: flex !important;
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  overscroll-behavior-x: contain !important;
}

.ggl-section .ggl-batik__track::-webkit-scrollbar {
  display: none !important;
}

.ggl-section .ggl-batik__slide {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  background-color: #F5F1EB !important;
}

.ggl-section .ggl-batik__dots {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 16px !important;
  z-index: 20 !important;
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
}

.ggl-section .ggl-batik__dot {
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  min-width: 0 !important;
  border: 0 !important;
  border-radius: 9999px !important;
  background: rgba(141, 91, 32, 0.3) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: width 0.25s ease, background-color 0.25s ease !important;
}

.ggl-section .ggl-batik__dot.is-active {
  width: 22px !important;
  background: #8D5B20 !important;
}

.ggl-section .ggl-batik__dot:focus-visible {
  outline: 2px solid #8D5B20 !important;
  outline-offset: 2px !important;
}

/* ----- bagian atas: teks + foto produk batik ----- */
.ggl-section .ggl-batik__hero {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  background-color: #F1ECE4 !important;
  background-repeat: no-repeat !important;
  /* mobile: teks di atas warna polos, foto produk di bawah */
  background-size: 200% auto !important;
  background-position: right bottom !important;
}

/* gradasi penyambung warna polos dengan tepi atas foto (mobile) */
.ggl-section .ggl-batik__hero::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(82.2vw - 26vw) !important;
  height: 26vw !important;
  background: linear-gradient(to bottom, #F1ECE4 0%, rgba(241, 236, 228, 0) 100%) !important;
  pointer-events: none !important;
}

.ggl-section .ggl-batik__content {
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  padding: 48px 24px 80vw !important;
}

.ggl-section .ggl-batik__eyebrow {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.ggl-section .ggl-batik__eyebrow-text {
  font-family: var(--ggl-font-sans) !important;
  font-weight: 500 !important;
  font-size: var(--ggl-fs-eyebrow) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.12em !important;
  color: #91673A !important;
}

.ggl-section .ggl-batik__eyebrow-line {
  display: block !important;
  width: 40px !important;
  height: 1px !important;
  background: #C4AC90 !important;
}

.ggl-section .ggl-batik__title {
  margin-top: 12px !important;
  font-family: var(--ggl-font-serif) !important;
  font-weight: 400 !important;
  font-size: var(--ggl-fs-title) !important;
  line-height: var(--ggl-lh-title) !important;
  color: #2A1508 !important;
  text-wrap: balance !important; /* mobile: baris judul seimbang */
}

.ggl-section .ggl-batik__text {
  margin-top: 14px !important;
  font-family: var(--ggl-font-sans) !important;
  font-weight: 400 !important;
  font-size: var(--ggl-fs-body) !important;
  line-height: var(--ggl-lh-body) !important;
  color: #3A332C !important;
}

.ggl-section .ggl-batik__btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 24px !important;
  padding: 13px 24px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: #8D5B20 !important;
  color: #F8F1E6 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease !important;
}

.ggl-section .ggl-batik__btn-text {
  font-family: var(--ggl-font-sans) !important;
  font-weight: 500 !important;
  font-size: var(--ggl-fs-button) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.12em !important;
  color: #F8F1E6 !important;
}

.ggl-section .ggl-batik__btn:hover,
.ggl-section .ggl-batik__btn:focus {
  color: #F8F1E6 !important;
  text-decoration: none !important;
  background: #7A4E1A !important;
}

.ggl-section .ggl-batik__btn:focus-visible {
  outline: 2px solid #C4AC90 !important;
  outline-offset: 2px !important;
}

.ggl-section .ggl-batik__btn-icon {
  display: block !important;
  flex-shrink: 0 !important;
  width: 18px !important;
  height: 18px !important;
}

/* ----- bagian bawah: 4 keunggulan ----- */
.ggl-section .ggl-batik__features {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-content: start !important;
  flex: 1 0 auto !important;
  gap: 24px 16px !important;
  width: 100% !important;
  padding: 32px 24px 52px !important;
  list-style: none !important;
}

.ggl-section .ggl-batik__feature {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
  list-style: none !important;
}

.ggl-section .ggl-batik__feature-icon {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  height: 40px !important;
  border: 0 !important;
}

.ggl-section .ggl-batik__feature-title {
  font-family: var(--ggl-font-serif) !important;
  font-weight: 400 !important;
  font-size: var(--ggl-fs-subtitle) !important;
  line-height: 1.3 !important;
  color: #4B4A48 !important;
}

.ggl-section .ggl-batik__feature-sub {
  margin-top: 2px !important;
  font-family: var(--ggl-font-sans) !important;
  font-weight: 400 !important;
  font-size: var(--ggl-fs-small) !important;
  line-height: var(--ggl-lh-small) !important;
  color: #918D88 !important;
}

/* ----- slide 2: label dengan titik pemisah ----- */
.ggl-section .ggl-batik__eyebrow--dots {
  flex-wrap: wrap !important;
  gap: 6px 10px !important;
}

.ggl-section .ggl-batik__eyebrow-dot {
  display: block !important;
  flex-shrink: 0 !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: #91673A !important;
}

.ggl-section .ggl-batik__slide--2 .ggl-batik__eyebrow-text {
  letter-spacing: 0.19em !important;
}

/* mobile: "INDONESIAN HERITAGE" turun ke baris kedua tanpa titik menggantung */
.ggl-section .ggl-batik__eyebrow-dot--last {
  display: none !important;
}

.ggl-section .ggl-batik__eyebrow-text--last {
  flex-basis: 100% !important;
}

.ggl-section .ggl-batik__slide--2 .ggl-batik__btn {
  border-radius: 3px !important;
  background: #80531F !important;
}

.ggl-section .ggl-batik__slide--2 .ggl-batik__btn:hover,
.ggl-section .ggl-batik__slide--2 .ggl-batik__btn:focus {
  background: #6E461A !important;
}

.ggl-section .ggl-batik__slide--2 .ggl-batik__btn-text {
  letter-spacing: 0.16em !important;
}

.ggl-section .ggl-batik__slide--2 .ggl-batik__feature-title {
  font-family: var(--ggl-font-sans) !important;
  font-weight: 500 !important;
  color: #5E5F63 !important;
}

.ggl-section .ggl-batik__slide--2 .ggl-batik__feature-sub {
  color: #918E8F !important;
}

@media (min-width: 768px) {
  /* ----- Section 3 -----
     Desain ini memakai kanvas 1379px, jadi nilai variabel tipografi
     disesuaikan di dalam section ini saja (nama variabel tetap sama). */
  .ggl-section.ggl-batik {
    --ggl-fs-eyebrow: 1.04vw;
    --ggl-fs-title: 3.36vw;
    --ggl-lh-title: 1.2;
    --ggl-fs-body: 1.18vw;
    --ggl-lh-body: 1.35;
    --ggl-fs-button: 0.94vw;
    --ggl-fs-subtitle: 0.91vw;
    --ggl-fs-small: 0.79vw;
  }

  .ggl-section .ggl-batik__hero {
    aspect-ratio: 1379 / 567 !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .ggl-section .ggl-batik__hero::before {
    display: none !important;
  }

  .ggl-section .ggl-batik__content {
    position: absolute !important;
    left: 5.87% !important;
    top: 11.75% !important;
    width: 46% !important;
    padding: 0 !important;
  }

  .ggl-section .ggl-batik__eyebrow {
    gap: 1vw !important;
  }

  .ggl-section .ggl-batik__eyebrow-line {
    width: 2.83vw !important;
    height: 0.13vw !important;
  }

  .ggl-section .ggl-batik__title {
    margin-top: 1.35vw !important;
  }

  .ggl-section .ggl-batik__text {
    margin-top: 1.05vw !important;
  }

  .ggl-section .ggl-batik__btn {
    gap: 1vw !important;
    height: 2.97vw !important;
    margin-top: 1.91vw !important;
    padding: 0 1.75vw 0 2.25vw !important;
    border-radius: 0.5vw !important;
  }

  .ggl-section .ggl-batik__btn-icon {
    width: 1.3vw !important;
    height: 1.3vw !important;
  }

  .ggl-section .ggl-batik__features {
    grid-template-columns: 362fr 311fr 300fr 406fr !important;
    gap: 0 !important;
    height: 8.63vw !important;
    padding: 0 !important;
  }

  .ggl-section .ggl-batik__feature {
    flex-direction: row !important;
    align-items: center !important;
    gap: 1vw !important;
    height: 100% !important;
  }

  .ggl-section .ggl-batik__feature + .ggl-batik__feature::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 27.7% !important;
    width: 1px !important;
    height: 42.9% !important;
    background: #E6DFD3 !important;
  }

  .ggl-section .ggl-batik__feature--1 { padding-left: 8.99vw !important; }
  .ggl-section .ggl-batik__feature--2 { padding-left: 3.34vw !important; }
  .ggl-section .ggl-batik__feature--3 { padding-left: 4.35vw !important; }
  .ggl-section .ggl-batik__feature--4 { padding-left: 3.34vw !important; }

  .ggl-section .ggl-batik__feature-icon {
    height: 3.65vw !important;
    margin-top: -0.43vw !important;
  }

  .ggl-section .ggl-batik__feature-body {
    padding-top: 0.44vw !important;
  }

  .ggl-section .ggl-batik__feature-sub {
    margin-top: 0.21vw !important;
  }
}

@media (min-width: 768px) {
  /* ----- Section 3 — slider ----- */
  .ggl-section .ggl-batik__features {
    flex: none !important;
    align-content: stretch !important;
  }

  .ggl-section .ggl-batik__dots {
    top: calc(41.12vw - 2.2vw) !important;
    bottom: auto !important;
    gap: 0.6vw !important;
  }

  .ggl-section .ggl-batik__dot {
    width: 0.6vw !important;
    height: 0.6vw !important;
    background: rgba(255, 255, 255, 0.55) !important;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.25) !important;
  }

  .ggl-section .ggl-batik__dot.is-active {
    width: 1.6vw !important;
    background: #FFFFFF !important;
  }

  /* ----- Section 3 — slide 2 (Kain Tenun NTT) ----- */
  .ggl-section .ggl-batik__slide--2 {
    --ggl-fs-eyebrow: 0.91vw;
    --ggl-fs-title: 3.58vw;
    --ggl-lh-title: 1.13;
    --ggl-fs-body: 1.14vw;
    --ggl-lh-body: 1.44;
    --ggl-fs-subtitle: 0.84vw;
    --ggl-fs-small: 0.77vw;
  }

  .ggl-section .ggl-batik__slide--2 .ggl-batik__content {
    left: 6.09% !important;
    top: 12.2% !important;
    width: 55% !important;
  }

  .ggl-section .ggl-batik__eyebrow--dots {
    flex-wrap: nowrap !important;
    gap: 0 1.06vw !important;
  }

  .ggl-section .ggl-batik__eyebrow-dot {
    width: 0.25vw !important;
    height: 0.25vw !important;
  }

  .ggl-section .ggl-batik__eyebrow-dot--last {
    display: block !important;
  }

  .ggl-section .ggl-batik__eyebrow-text--last {
    flex-basis: auto !important;
  }

  .ggl-section .ggl-batik__slide--2 .ggl-batik__title {
    margin-top: 1.5vw !important;
  }

  .ggl-section .ggl-batik__slide--2 .ggl-batik__text {
    margin-top: 0.91vw !important;
  }

  .ggl-section .ggl-batik__slide--2 .ggl-batik__btn {
    height: 3.33vw !important;
    margin-top: 1.6vw !important;
    padding: 0 1.6vw 0 1.8vw !important;
    border-radius: 0.2vw !important;
  }

  .ggl-section .ggl-batik__slide--2 .ggl-batik__features {
    grid-template-columns: 352fr 329fr 302fr 396fr !important;
  }

  .ggl-section .ggl-batik__slide--2 .ggl-batik__feature + .ggl-batik__feature::before {
    top: 30.7% !important;
    height: 38.7% !important;
  }

  .ggl-section .ggl-batik__slide--2 .ggl-batik__feature--1 { padding-left: 9.64vw !important; }
  .ggl-section .ggl-batik__slide--2 .ggl-batik__feature--2 { padding-left: 4.13vw !important; }
  .ggl-section .ggl-batik__slide--2 .ggl-batik__feature--3 { padding-left: 4.13vw !important; }
  .ggl-section .ggl-batik__slide--2 .ggl-batik__feature--4 { padding-left: 3.92vw !important; }

  .ggl-section .ggl-batik__slide--2 .ggl-batik__feature {
    gap: 1.16vw !important;
  }

  .ggl-section .ggl-batik__slide--2 .ggl-batik__feature-icon {
    height: 3.12vw !important;
    margin-top: 0 !important;
  }

  .ggl-section .ggl-batik__slide--2 .ggl-batik__feature-body {
    position: relative !important;
    top: 0.25vw !important;
    padding-top: 0 !important;
  }

  .ggl-section .ggl-batik__slide--2 .ggl-batik__feature-sub {
    margin-top: 0.52vw !important;
  }
}

/* =========================================================
   SECTION 4 — EXPLORE OUR COLLECTIONS
   ========================================================= */
.ggl-section.ggl-koleksi {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  padding: 48px 16px 40px !important;
  background-color: #F7F2EA !important;
  background-repeat: no-repeat !important;
  /* mobile: ornamen sudut tetap terlihat di bagian atas */
  background-size: 100% auto !important;
  background-position: center top !important;
}

.ggl-section .ggl-koleksi__head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}

.ggl-section .ggl-koleksi__eyebrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
}

.ggl-section .ggl-koleksi__eyebrow-line {
  display: block !important;
  flex-shrink: 0 !important;
  width: 32px !important;
  height: 1px !important;
  background: #C9AE86 !important;
}

.ggl-section .ggl-koleksi__eyebrow-text {
  padding-left: 0.21em !important; /* imbangi letter-spacing di huruf terakhir */
  font-family: var(--ggl-font-sans) !important;
  font-weight: 500 !important;
  font-size: var(--ggl-fs-eyebrow) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.21em !important;
  color: #6E4A22 !important;
  text-align: center !important;
}

.ggl-section .ggl-koleksi__title {
  margin-top: 12px !important;
  font-family: var(--ggl-font-serif) !important;
  font-weight: 400 !important;
  font-size: var(--ggl-fs-title) !important;
  line-height: var(--ggl-lh-title) !important;
  color: #22120A !important;
  text-align: center !important;
  text-wrap: balance !important;
}

.ggl-section .ggl-koleksi__desc {
  margin-top: 12px !important;
  font-family: var(--ggl-font-sans) !important;
  font-weight: 400 !important;
  font-size: var(--ggl-fs-body) !important;
  line-height: var(--ggl-lh-body) !important;
  color: #5E5E5D !important;
  text-align: center !important;
  text-wrap: pretty !important;
}

/* ----- kartu koleksi ----- */
.ggl-section .ggl-koleksi__grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 32px !important;
}

.ggl-section .ggl-koleksi__card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  min-width: 0 !important;
  padding: 0 0 16px !important;
  border: 1px solid #EBE2D5 !important;
  border-radius: 0 !important;
  background: #FAF7F2 !important;
  box-shadow: 0 2px 6px rgba(120, 90, 50, 0.08) !important;
}

.ggl-section .ggl-koleksi__photo {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 323 / 298 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
}

.ggl-section .ggl-koleksi__badge {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 44px !important;
  height: 44px !important;
  margin-top: -22px !important;
  border: 1px solid #E3D3BC !important;
  border-radius: 50% !important;
  background: #FAF6F0 !important;
  box-shadow: 0 1px 3px rgba(150, 110, 60, 0.15) !important;
}

.ggl-section .ggl-koleksi__icon {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  height: 22px !important;
  border: 0 !important;
}

.ggl-section .ggl-koleksi__icon--tall {
  height: 28px !important;
}

.ggl-section .ggl-koleksi__card-title {
  margin-top: 10px !important;
  padding: 0 8px !important;
  font-family: var(--ggl-font-serif) !important;
  font-weight: 400 !important;
  font-size: var(--ggl-fs-subtitle) !important;
  line-height: 1.25 !important;
  color: #2A170C !important;
  text-align: center !important;
}

.ggl-section .ggl-koleksi__card-desc {
  flex-grow: 1 !important;
  margin-top: 6px !important;
  padding: 0 10px !important;
  font-family: var(--ggl-font-sans) !important;
  font-weight: 400 !important;
  font-size: var(--ggl-fs-small) !important;
  line-height: var(--ggl-lh-small) !important;
  color: #5C5B5A !important;
  text-align: center !important;
}

.ggl-section .ggl-koleksi__link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 14px !important;
  padding: 0 2px 6px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #CFB48F !important;
  background: transparent !important;
  color: #A07640 !important;
  text-decoration: none !important;
  transition: color 0.15s ease, border-color 0.15s ease !important;
}

.ggl-section .ggl-koleksi__link-text {
  font-family: var(--ggl-font-sans) !important;
  font-weight: 500 !important;
  font-size: var(--ggl-fs-small) !important;
  line-height: 1.2 !important;
  color: #A07640 !important;
  transition: color 0.15s ease !important;
}

.ggl-section .ggl-koleksi__link:hover,
.ggl-section .ggl-koleksi__link:focus {
  color: #7A5528 !important;
  text-decoration: none !important;
  border-bottom-color: #A07640 !important;
}

.ggl-section .ggl-koleksi__link:hover .ggl-koleksi__link-text,
.ggl-section .ggl-koleksi__link:focus .ggl-koleksi__link-text {
  color: #7A5528 !important;
}

.ggl-section .ggl-koleksi__link:focus-visible {
  outline: 2px solid #C9AE86 !important;
  outline-offset: 3px !important;
}

.ggl-section .ggl-koleksi__link-icon {
  display: block !important;
  flex-shrink: 0 !important;
  width: 14px !important;
  height: 14px !important;
}

@media (min-width: 768px) {
  /* ----- Section 4 -----
     Kanvas desain 1379px: nilai variabel disesuaikan di section ini saja. */
  .ggl-section.ggl-koleksi {
    --ggl-fs-eyebrow: 1.16vw;
    --ggl-fs-title: 3.53vw;
    --ggl-lh-title: 1.2;
    --ggl-fs-body: 1.15vw;
    --ggl-lh-body: 1.46;
    --ggl-fs-subtitle: 1.72vw;
    --ggl-fs-small: 0.93vw;
    --ggl-lh-small: 1.48;
    --ggl-fs-button: 0.96vw;

    aspect-ratio: 1379 / 777 !important;
    padding: 3.82vw 1.96vw 0 !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .ggl-section .ggl-koleksi__eyebrow {
    gap: 1.85vw !important;
  }

  .ggl-section .ggl-koleksi__eyebrow-line {
    width: 3.7vw !important;
    height: 0.1vw !important;
  }

  .ggl-section .ggl-koleksi__title {
    margin-top: 0.98vw !important;
  }

  .ggl-section .ggl-koleksi__desc {
    margin-top: 0.32vw !important;
  }

  .ggl-section .ggl-koleksi__grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.87vw !important;
    margin-top: 2.2vw !important;
  }

  .ggl-section .ggl-koleksi__card {
    height: 34.87vw !important;
    padding: 0 0 1.31vw !important;
  }

  .ggl-section .ggl-koleksi__badge {
    width: 3.99vw !important;
    height: 3.99vw !important;
    margin-top: -1.99vw !important;
  }

  .ggl-section .ggl-koleksi__icon {
    height: 2.03vw !important;
  }

  .ggl-section .ggl-koleksi__icon--tall {
    height: 2.61vw !important;
  }

  .ggl-section .ggl-koleksi__card-title {
    margin-top: 0.61vw !important;
    padding: 0 !important;
  }

  .ggl-section .ggl-koleksi__card-desc {
    flex-grow: 0 !important;
    margin-top: 0.53vw !important;
    padding: 0 !important;
  }

  .ggl-section .ggl-koleksi__link {
    gap: 1.1vw !important;
    margin-top: auto !important;
    padding: 0 0.1vw 0.6vw 0 !important;
    border-bottom-width: 0.1vw !important;
  }

  .ggl-section .ggl-koleksi__link-text {
    font-size: var(--ggl-fs-button) !important;
  }

  .ggl-section .ggl-koleksi__link-icon {
    width: 1.05vw !important;
    height: 1.05vw !important;
  }
}

/* =========================================================
   SECTION 5 — SIGNATURE COLLECTION
   ========================================================= */
.ggl-section.ggl-produk {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  padding: 48px 16px 48px !important;
  background-color: #F6F1E9 !important;
  background-repeat: no-repeat !important;
  background-size: 100% auto !important;
  background-position: center top !important;
}

.ggl-section .ggl-produk__head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}

.ggl-section .ggl-produk__eyebrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
}

.ggl-section .ggl-produk__eyebrow-line {
  display: block !important;
  flex-shrink: 0 !important;
  width: 32px !important;
  height: 1px !important;
  background: #B89870 !important;
}

.ggl-section .ggl-produk__eyebrow-text {
  padding-left: 0.24em !important; /* imbangi letter-spacing di huruf terakhir */
  font-family: var(--ggl-font-sans) !important;
  font-weight: 500 !important;
  font-size: var(--ggl-fs-eyebrow) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.24em !important;
  color: #74491A !important;
  text-align: center !important;
}

.ggl-section .ggl-produk__title {
  margin-top: 12px !important;
  font-family: var(--ggl-font-serif) !important;
  font-weight: 400 !important;
  font-size: var(--ggl-fs-title) !important;
  line-height: var(--ggl-lh-title) !important;
  color: #22120A !important;
  text-align: center !important;
  text-wrap: balance !important;
}

.ggl-section .ggl-produk__desc {
  margin-top: 12px !important;
  font-family: var(--ggl-font-sans) !important;
  font-weight: 400 !important;
  font-size: var(--ggl-fs-body) !important;
  line-height: var(--ggl-lh-body) !important;
  color: #5D5E61 !important;
  text-align: center !important;
  text-wrap: pretty !important;
}

/* ----- kartu produk ----- */
.ggl-section .ggl-produk__grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 32px !important;
}

.ggl-section .ggl-produk__card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  min-width: 0 !important;
  padding: 0 0 18px !important;
  border: 1px solid #EBE2D5 !important;
  border-radius: 0 !important;
  background: #FAF7F2 !important;
  box-shadow: 0 2px 6px rgba(120, 90, 50, 0.07) !important;
  color: inherit !important;
  text-decoration: none !important;
}

/* mobile: kartu ke-5 di tengah baris terakhir */
.ggl-section .ggl-produk__card:last-child:nth-child(odd) {
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  width: calc(50% - 6px) !important;
}

.ggl-section .ggl-produk__card:hover,
.ggl-section .ggl-produk__card:focus {
  color: inherit !important;
  text-decoration: none !important;
}

.ggl-section .ggl-produk__card:focus-visible {
  outline: 2px solid #B89870 !important;
  outline-offset: 2px !important;
}

.ggl-section .ggl-produk__photo {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 254 / 290 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
}

.ggl-section .ggl-produk__card-title {
  margin-top: 14px !important;
  padding: 0 8px !important;
  font-family: var(--ggl-font-serif) !important;
  font-weight: 400 !important;
  font-size: var(--ggl-fs-subtitle) !important;
  line-height: 1.25 !important;
  color: #2E1D10 !important;
  text-align: center !important;
}

.ggl-section .ggl-produk__more {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 10px !important;
}

.ggl-section .ggl-produk__more-line {
  display: block !important;
  width: 48px !important;
  height: 2px !important;
  background: #BB9B71 !important;
  transition: width 0.2s ease !important;
}

.ggl-section .ggl-produk__more-icon {
  display: block !important;
  flex-shrink: 0 !important;
  width: 11px !important;
  height: 11px !important;
}

.ggl-section .ggl-produk__card:hover .ggl-produk__more-line,
.ggl-section .ggl-produk__card:focus-visible .ggl-produk__more-line {
  width: 64px !important;
}

/* ----- tombol VIEW ALL PRODUCTS + garis kiri/kanan ----- */
.ggl-section .ggl-produk__cta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  margin-top: 32px !important;
}

.ggl-section .ggl-produk__cta-line {
  display: block !important;
  flex: 1 1 0 !important;
  max-width: 64px !important;
  height: 1px !important;
  background: #C8AC88 !important;
}

.ggl-section .ggl-produk__btn {
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  gap: 12px !important;
  padding: 13px 24px !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: #976424 !important;
  color: #FBF4EA !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease !important;
}

.ggl-section .ggl-produk__btn-text {
  font-family: var(--ggl-font-sans) !important;
  font-weight: 500 !important;
  font-size: var(--ggl-fs-button) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.14em !important;
  color: #FBF4EA !important;
}

.ggl-section .ggl-produk__btn:hover,
.ggl-section .ggl-produk__btn:focus {
  color: #FBF4EA !important;
  text-decoration: none !important;
  background: #82551D !important;
}

.ggl-section .ggl-produk__btn:focus-visible {
  outline: 2px solid #C8AC88 !important;
  outline-offset: 2px !important;
}

.ggl-section .ggl-produk__btn-icon {
  display: block !important;
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
}

@media (min-width: 768px) {
  /* ----- Section 5 -----
     Kanvas desain 1379px: nilai variabel disesuaikan di section ini saja. */
  .ggl-section.ggl-produk {
    --ggl-fs-eyebrow: 1.55vw;
    --ggl-fs-title: 3.44vw;
    --ggl-lh-title: 1.2;
    --ggl-fs-body: 1.21vw;
    --ggl-lh-body: 1.5;
    --ggl-fs-subtitle: 1.52vw;
    --ggl-fs-button: 0.94vw;

    aspect-ratio: 1379 / 777 !important;
    padding: 4.75vw 1.96vw 0 !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .ggl-section .ggl-produk__eyebrow {
    gap: 1.6vw !important;
  }

  .ggl-section .ggl-produk__eyebrow-line {
    width: 4.7vw !important;
    height: 0.2vw !important;
  }

  .ggl-section .ggl-produk__title {
    margin-top: 0.78vw !important;
  }

  .ggl-section .ggl-produk__desc {
    margin-top: 0.39vw !important;
  }

  .ggl-section .ggl-produk__grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 1.02vw !important;
    margin-top: 2.33vw !important;
  }

  .ggl-section .ggl-produk__card {
    height: 27.48vw !important;
    padding: 0 !important;
  }

  .ggl-section .ggl-produk__card:last-child:nth-child(odd) {
    grid-column: auto !important;
    width: auto !important;
  }

  .ggl-section .ggl-produk__card-title {
    margin-top: 1.47vw !important;
    padding: 0 !important;
  }

  .ggl-section .ggl-produk__more {
    gap: 0.45vw !important;
    margin-top: 0.83vw !important;
  }

  .ggl-section .ggl-produk__more-line {
    width: 4.28vw !important;
    height: 0.15vw !important;
  }

  .ggl-section .ggl-produk__card:hover .ggl-produk__more-line,
  .ggl-section .ggl-produk__card:focus-visible .ggl-produk__more-line {
    width: 5.4vw !important;
  }

  .ggl-section .ggl-produk__more-icon {
    width: 0.8vw !important;
    height: 0.8vw !important;
  }

  .ggl-section .ggl-produk__cta {
    gap: 2.2vw !important;
    margin-top: 3.15vw !important;
  }

  .ggl-section .ggl-produk__cta-line {
    flex: none !important;
    width: 8.27vw !important;
    max-width: none !important;
    height: 0.15vw !important;
  }

  .ggl-section .ggl-produk__btn {
    gap: 1.2vw !important;
    height: 3.05vw !important;
    padding: 0 2.16vw 0 2.26vw !important;
    border-radius: 0.3vw !important;
  }

  .ggl-section .ggl-produk__btn-icon {
    width: 1.1vw !important;
    height: 1.1vw !important;
  }
}

/* =========================================================
   SECTION 6 — CORPORATE GIFT
   ========================================================= */
.ggl-section.ggl-corp {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  background-color: #F5F0E9 !important;
  background-repeat: no-repeat !important;
  background-size: 100% auto !important;
  background-position: center bottom !important;
}

/* ----- bagian atas: teks + foto hampers ----- */
.ggl-section .ggl-corp__hero {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  background-color: #F3EEE6 !important;
  background-repeat: no-repeat !important;
  /* mobile: teks di atas warna polos, foto hampers di bawah */
  background-size: 160% auto !important;
  background-position: right bottom !important;
}

.ggl-section .ggl-corp__hero::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(65.9vw - 24vw) !important;
  height: 24vw !important;
  background: linear-gradient(to bottom, #F3EEE6 0%, rgba(243, 238, 230, 0) 100%) !important;
  pointer-events: none !important;
}

.ggl-section .ggl-corp__content {
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  padding: 48px 24px 64vw !important;
}

.ggl-section .ggl-corp__eyebrow {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.ggl-section .ggl-corp__eyebrow-line {
  display: block !important;
  flex-shrink: 0 !important;
  width: 28px !important;
  height: 1px !important;
  background: #B4895C !important;
}

.ggl-section .ggl-corp__eyebrow-text {
  font-family: var(--ggl-font-sans) !important;
  font-weight: 500 !important;
  font-size: var(--ggl-fs-eyebrow) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.29em !important;
  color: #9A6A3D !important;
}

.ggl-section .ggl-corp__title {
  margin-top: 12px !important;
  font-family: var(--ggl-font-serif-bold) !important;
  font-weight: 600 !important;
  font-size: var(--ggl-fs-title) !important;
  line-height: var(--ggl-lh-title) !important;
  color: #23100A !important;
}

.ggl-section .ggl-corp__text {
  margin-top: 14px !important;
  font-family: var(--ggl-font-sans) !important;
  font-weight: 400 !important;
  font-size: var(--ggl-fs-body) !important;
  line-height: var(--ggl-lh-body) !important;
  color: #554C46 !important;
}

/* ----- bagian bawah: 7 kebutuhan + tombol ----- */
.ggl-section .ggl-corp__bottom {
  position: relative !important;
  width: 100% !important;
  padding: 28px 16px 48px !important;
}

.ggl-section .ggl-corp__list {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  row-gap: 20px !important;
  width: 100% !important;
  list-style: none !important;
}

.ggl-section .ggl-corp__item {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 25% !important;
  list-style: none !important;
}

.ggl-section .ggl-corp__circle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: #EEE5D9 !important;
}

.ggl-section .ggl-corp__icon {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  height: 26px !important;
  border: 0 !important;
}

.ggl-section .ggl-corp__label {
  margin-top: 8px !important;
  padding: 0 2px !important;
  font-family: var(--ggl-font-sans) !important;
  font-weight: 400 !important;
  font-size: var(--ggl-fs-small) !important;
  line-height: var(--ggl-lh-small) !important;
  color: #5B4636 !important;
  text-align: center !important;
}

.ggl-section .ggl-corp__btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 28px !important;
  margin-left: 8px !important;
  padding: 13px 22px 13px 24px !important;
  border: 0 !important;
  border-radius: 9999px !important;
  background: #7D4223 !important;
  color: #FBF2EA !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease !important;
}

.ggl-section .ggl-corp__btn-text {
  font-family: var(--ggl-font-sans) !important;
  font-weight: 600 !important;
  font-size: var(--ggl-fs-button) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.12em !important;
  color: #FBF2EA !important;
}

.ggl-section .ggl-corp__btn:hover,
.ggl-section .ggl-corp__btn:focus {
  color: #FBF2EA !important;
  text-decoration: none !important;
  background: #69371C !important;
}

.ggl-section .ggl-corp__btn:focus-visible {
  outline: 2px solid #B4895C !important;
  outline-offset: 2px !important;
}

.ggl-section .ggl-corp__btn-icon {
  display: block !important;
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
}

@media (min-width: 768px) {
  /* ----- Section 6 -----
     Kanvas desain 602px: nilai variabel disesuaikan di section ini saja. */
  .ggl-section.ggl-corp {
    --ggl-fs-eyebrow: 1.58vw;
    --ggl-fs-title: 6.1vw;
    --ggl-lh-title: 0.97;
    --ggl-fs-body: 1.87vw;
    --ggl-lh-body: 1.4;
    --ggl-fs-small: 1.41vw;
    --ggl-lh-small: 1.4;
    --ggl-fs-button: 1.41vw;

    aspect-ratio: 602 / 401 !important;
  }

  .ggl-section .ggl-corp__hero {
    aspect-ratio: 602 / 248 !important;
    background-size: cover !important;
    background-position: center top !important;
  }

  .ggl-section .ggl-corp__hero::before {
    display: none !important;
  }

  .ggl-section .ggl-corp__content {
    position: absolute !important;
    left: 5.98% !important;
    top: 14.4% !important;
    width: 50% !important;
    padding: 0 !important;
  }

  .ggl-section .ggl-corp__eyebrow {
    gap: 1.6vw !important;
  }

  .ggl-section .ggl-corp__eyebrow-line {
    width: 3.1vw !important;
    height: 0.33vw !important;
  }

  .ggl-section .ggl-corp__title {
    margin-top: 1.5vw !important;
  }

  .ggl-section .ggl-corp__text {
    margin-top: 2.38vw !important;
  }

  .ggl-section .ggl-corp__bottom {
    height: 25.42vw !important;
    padding: 0 !important;
  }

  .ggl-section .ggl-corp__list {
    position: absolute !important;
    left: 5.51vw !important;
    top: 2.66vw !important;
    flex-wrap: nowrap !important;
    width: 89.15vw !important;
    row-gap: 0 !important;
  }

  .ggl-section .ggl-corp__item {
    width: auto !important;
    flex: 1 1 0 !important;
  }

  .ggl-section .ggl-corp__item + .ggl-corp__item::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0.83vw !important;
    width: 1px !important;
    height: 8.47vw !important;
    background: #E9DFD2 !important;
  }

  .ggl-section .ggl-corp__circle {
    width: 5.81vw !important;
    height: 5.81vw !important;
  }

  .ggl-section .ggl-corp__icon {
    height: 3.2vw !important;
  }

  .ggl-section .ggl-corp__label {
    margin-top: 0.8vw !important;
    padding: 0 !important;
  }

  .ggl-section .ggl-corp__btn {
    position: absolute !important;
    left: 6.15vw !important;
    top: 15.45vw !important;
    gap: 1.16vw !important;
    height: 4.4vw !important;
    margin: 0 !important;
    padding: 0 2vw 0 2.66vw !important;
  }

  .ggl-section .ggl-corp__btn-icon {
    width: 1.5vw !important;
    height: 1.5vw !important;
  }
}

/* =========================================================
   SECTION 7 — TESTIMONI (KATA MEREKA TENTANG GENESIS GLORY)
   ========================================================= */
.ggl-section.ggl-testi {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  padding: 56px 16px 48px !important;
  background-color: #DDCFBE !important;
  background-repeat: no-repeat !important;
  /* mobile: bagian tengah atas background, kain batik & bunga terlihat di sudut */
  background-size: 160% auto !important;
  background-position: center top !important;
}

/* mobile: tepi bawah gambar background dilebur ke warna polos */
.ggl-section.ggl-testi::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(106.6vw - 36vw) !important;
  height: 36vw !important;
  background: linear-gradient(to bottom, rgba(221, 207, 190, 0) 0%, #DDCFBE 100%) !important;
  pointer-events: none !important;
}

.ggl-section .ggl-testi__head,
.ggl-section .ggl-testi__grid {
  position: relative !important;
  z-index: 1 !important;
}

.ggl-section .ggl-testi__head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}

.ggl-section .ggl-testi__eyebrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
}

.ggl-section .ggl-testi__eyebrow-line {
  display: block !important;
  flex-shrink: 0 !important;
  width: 28px !important;
  height: 1px !important;
  background: #B49A80 !important;
}

.ggl-section .ggl-testi__eyebrow-text {
  padding-left: 0.4em !important; /* imbangi letter-spacing di huruf terakhir */
  font-family: var(--ggl-font-sans) !important;
  font-weight: 500 !important;
  font-size: var(--ggl-fs-eyebrow) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.4em !important;
  color: #7E4A16 !important;
  text-align: center !important;
}

.ggl-section .ggl-testi__title {
  margin-top: 8px !important;
  font-family: var(--ggl-font-serif-bold) !important;
  font-weight: 600 !important;
  font-size: var(--ggl-fs-title) !important;
  line-height: var(--ggl-lh-title) !important;
  color: #2A0D03 !important;
  text-align: center !important;
}

.ggl-section .ggl-testi__divider {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  margin-top: 8px !important;
}

.ggl-section .ggl-testi__divider-line {
  display: block !important;
  width: 72px !important;
  height: 1px !important;
  background: #B8A08A !important;
}

.ggl-section .ggl-testi__orn {
  display: block !important;
  flex-shrink: 0 !important;
  width: 26px !important;
  height: 26px !important;
}

.ggl-section .ggl-testi__tagline {
  margin-top: 12px !important;
  font-family: var(--ggl-font-sans) !important;
  font-weight: 400 !important;
  font-size: var(--ggl-fs-subtitle) !important;
  line-height: 1.4 !important;
  letter-spacing: 0.06em !important;
  color: #3A2516 !important;
  text-align: center !important;
  text-wrap: balance !important;
}

/* ----- kartu testimoni ----- */
.ggl-section .ggl-testi__grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  width: 100% !important;
  margin-top: 32px !important;
}

.ggl-section .ggl-testi__card {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  overflow: hidden !important;
  padding: 24px 24px 28px !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #F3EDE3 0%, #EFE7DB 100%) !important;
  box-shadow: 0 6px 18px rgba(90, 60, 30, 0.14), 0 1px 3px rgba(90, 60, 30, 0.1) !important;
}

.ggl-section .ggl-testi__corner {
  position: absolute !important;
  right: 5px !important;
  bottom: 5px !important;
  z-index: 0 !important;
  display: block !important;
  width: 80px !important;
  max-width: none !important;
  height: auto !important;
  border: 0 !important;
  pointer-events: none !important;
}

.ggl-section .ggl-testi__card-orn {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 34px !important;
  height: 36px !important;
}

.ggl-section .ggl-testi__stars {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 110px !important;
  height: 16px !important;
  margin-top: 16px !important;
}

.ggl-section .ggl-testi__quote {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 20px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* blokir tanda kutip / pseudo-element bawaan template untuk blockquote */
.ggl-section .ggl-testi__quote::before,
.ggl-section .ggl-testi__quote::after {
  content: none !important;
  display: none !important;
}

.ggl-section .ggl-testi__caption {
  display: block !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  color: inherit !important;
  border: 0 !important;
}

.ggl-section .ggl-testi__quote-mark {
  display: block !important;
  flex-shrink: 0 !important;
  width: 24px !important;
  height: 20px !important;
  margin-top: 2px !important;
}

.ggl-section .ggl-testi__text {
  font-family: var(--ggl-font-serif-bold) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-variation-settings: "opsz" 48 !important;
  font-size: var(--ggl-fs-body) !important;
  line-height: var(--ggl-lh-body) !important;
  color: #2A100A !important;
}

.ggl-section .ggl-testi__sep {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: 72% !important;
  margin-top: 24px !important;
}

.ggl-section .ggl-testi__sep-line {
  display: block !important;
  flex: 1 1 0 !important;
  height: 1px !important;
  background: #C6B4A3 !important;
}

.ggl-section .ggl-testi__sep-diamond {
  display: block !important;
  flex-shrink: 0 !important;
  width: 7px !important;
  height: 7px !important;
  border: 1px solid #A88F79 !important;
  transform: rotate(45deg) !important;
}

.ggl-section .ggl-testi__name {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 20px !important;
  padding-left: 0.26em !important; /* imbangi letter-spacing di huruf terakhir */
  font-family: var(--ggl-font-sans) !important;
  font-weight: 600 !important;
  font-size: var(--ggl-fs-small) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.26em !important;
  color: #2E120C !important;
  text-align: center !important;
}

.ggl-section .ggl-testi__city {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 6px !important;
  padding-left: 0.14em !important;
  font-family: var(--ggl-font-sans) !important;
  font-weight: 400 !important;
  font-size: var(--ggl-fs-small) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.14em !important;
  color: #6A5442 !important;
  text-align: center !important;
}

@media (min-width: 768px) {
  /* ----- Section 7 -----
     Kanvas desain 1379px: nilai variabel disesuaikan di section ini saja. */
  .ggl-section.ggl-testi {
    --ggl-fs-eyebrow: 1.27vw;
    --ggl-fs-title: 6.24vw;
    --ggl-lh-title: 1.1;
    --ggl-fs-subtitle: 1.62vw;
    --ggl-fs-body: 1.62vw;
    --ggl-lh-body: 1.37;
    --ggl-fs-small: 1.05vw;

    aspect-ratio: 1379 / 919 !important;
    padding: 6.9vw 6.45vw 0 !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .ggl-section.ggl-testi::before {
    display: none !important;
  }

  .ggl-section .ggl-testi__eyebrow {
    gap: 1.1vw !important;
  }

  .ggl-section .ggl-testi__eyebrow-line {
    width: 3.4vw !important;
    height: 0.12vw !important;
  }

  .ggl-section .ggl-testi__title {
    margin-top: 0.4vw !important;
  }

  .ggl-section .ggl-testi__divider {
    gap: 1.3vw !important;
    margin-top: -0.4vw !important;
  }

  .ggl-section .ggl-testi__divider-line {
    width: 9.9vw !important;
    height: 0.12vw !important;
  }

  .ggl-section .ggl-testi__orn {
    width: 2.75vw !important;
    height: 2.75vw !important;
  }

  .ggl-section .ggl-testi__tagline {
    margin-top: 0.7vw !important;
  }

  .ggl-section .ggl-testi__grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.74vw !important;
    margin-top: 2.6vw !important;
  }

  .ggl-section .ggl-testi__card {
    height: 32.27vw !important;
    padding: 1.38vw 0 0 !important;
    border-radius: 0.6vw !important;
  }

  .ggl-section .ggl-testi__corner {
    right: 0.36vw !important;
    bottom: 0.36vw !important;
    width: 6.6vw !important;
  }

  .ggl-section .ggl-testi__card-orn {
    width: 3.1vw !important;
    height: 3.1vw !important;
  }

  .ggl-section .ggl-testi__stars {
    width: 9.6vw !important;
    height: 1.4vw !important;
    margin-top: 1.45vw !important;
  }

  .ggl-section .ggl-testi__quote {
    gap: 0.5vw !important;
    height: 13.93vw !important;
    margin-top: 2.08vw !important;
    padding: 0 0.5vw 0 2.39vw !important;
  }

  /* blokir tanda kutip / pseudo-element bawaan template untuk blockquote */
.ggl-section .ggl-testi__quote::before,
.ggl-section .ggl-testi__quote::after {
  content: none !important;
  display: none !important;
}

.ggl-section .ggl-testi__caption {
  display: block !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  color: inherit !important;
  border: 0 !important;
}

.ggl-section .ggl-testi__quote-mark {
    width: 1.89vw !important;
    height: 1.52vw !important;
    margin-top: -0.85vw !important;
  }

  .ggl-section .ggl-testi__sep {
    gap: 0.45vw !important;
    width: 17.55vw !important;
    margin-top: 0 !important;
  }

  .ggl-section .ggl-testi__sep-line {
    height: 0.1vw !important;
  }

  .ggl-section .ggl-testi__sep-diamond {
    width: 0.55vw !important;
    height: 0.55vw !important;
  }

  .ggl-section .ggl-testi__name {
    margin-top: 2.05vw !important;
  }

  .ggl-section .ggl-testi__text {
    white-space: nowrap !important; /* baris sudah dipatah dengan <br> sesuai desain */
  }

  .ggl-section .ggl-testi__city {
    margin-top: 0.46vw !important;
  }
}

/* =========================================================
   SECTION 8 — FOLLOW OUR JOURNEY
   ========================================================= */
.ggl-section.ggl-journey {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  padding: 44px 16px 48px !important;
  background-color: #EBE1D3 !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}

.ggl-section .ggl-journey__head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}

.ggl-section .ggl-journey__orn-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
}

.ggl-section .ggl-journey__orn-line {
  display: block !important;
  width: 64px !important;
  height: 1px !important;
  background: linear-gradient(to right, rgba(184, 150, 108, 0) 0%, #B8966C 100%) !important;
}

.ggl-section .ggl-journey__orn-line--right {
  background: linear-gradient(to left, rgba(184, 150, 108, 0) 0%, #B8966C 100%) !important;
}

.ggl-section .ggl-journey__orn {
  display: block !important;
  flex-shrink: 0 !important;
  width: 26px !important;
  height: 26px !important;
}

.ggl-section .ggl-journey__title {
  margin-top: 10px !important;
  padding-left: 0.12em !important; /* imbangi letter-spacing di huruf terakhir */
  font-family: var(--ggl-font-serif-bold) !important;
  font-weight: 600 !important;
  font-size: var(--ggl-fs-title) !important;
  line-height: var(--ggl-lh-title) !important;
  letter-spacing: 0.12em !important;
  color: #22100A !important;
  text-align: center !important;
}

.ggl-section .ggl-journey__desc {
  margin-top: 8px !important;
  font-family: var(--ggl-font-serif) !important;
  font-weight: 400 !important;
  font-size: var(--ggl-fs-body) !important;
  line-height: var(--ggl-lh-body) !important;
  color: #5F574F !important;
  text-align: center !important;
  text-wrap: balance !important;
}

/* ----- galeri 6 foto ----- */
.ggl-section .ggl-journey__grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  width: 100% !important;
  margin-top: 28px !important;
}

.ggl-section .ggl-journey__tile {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 171 / 108.5 !important;
  overflow: hidden !important;
  border: 0 !important;
}

.ggl-section .ggl-journey__img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  transition: transform 0.4s ease !important;
}

.ggl-section .ggl-journey__tile:hover .ggl-journey__img,
.ggl-section .ggl-journey__tile:focus-visible .ggl-journey__img {
  transform: scale(1.04) !important;
}

.ggl-section .ggl-journey__tile:focus-visible {
  outline: 2px solid #B8966C !important;
  outline-offset: 2px !important;
}

/* ----- stay connected ----- */
.ggl-section .ggl-journey__foot {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 14px !important;
}

.ggl-section .ggl-journey__diamond {
  display: block !important;
  width: 7px !important;
  height: 7px !important;
  background: #9D7642 !important;
  transform: rotate(45deg) !important;
}

.ggl-section .ggl-journey__connect {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 8px !important;
}

.ggl-section .ggl-journey__connect-line {
  display: block !important;
  flex: 0 1 56px !important;
  height: 1px !important;
  background: #D7C6AE !important;
}

.ggl-section .ggl-journey__connect-text {
  padding-left: 0.14em !important;
  font-family: var(--ggl-font-logo) !important;
  font-weight: 500 !important;
  font-size: var(--ggl-fs-small) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.14em !important;
  color: #7E6448 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.ggl-section .ggl-journey__social {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 22px !important;
  margin-top: 14px !important;
  list-style: none !important;
}

.ggl-section .ggl-journey__social-item {
  display: block !important;
  list-style: none !important;
}

.ggl-section .ggl-journey__social-link {
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #84561A !important;
  text-decoration: none !important;
  transition: opacity 0.15s ease !important;
}

.ggl-section .ggl-journey__social-link:hover,
.ggl-section .ggl-journey__social-link:focus {
  color: #84561A !important;
  text-decoration: none !important;
  opacity: 0.75 !important;
}

.ggl-section .ggl-journey__social-link:focus-visible {
  outline: 2px solid #B8966C !important;
  outline-offset: 3px !important;
}

.ggl-section .ggl-journey__social-icon {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
}

.ggl-section .ggl-journey__btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 16px !important;
  padding: 12px 24px !important;
  border: 1px solid #CDB89A !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: #8E714F !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.ggl-section .ggl-journey__btn-text {
  font-family: var(--ggl-font-logo) !important;
  font-weight: 500 !important;
  font-size: var(--ggl-fs-button) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;
  color: #8E714F !important;
}

.ggl-section .ggl-journey__btn:hover,
.ggl-section .ggl-journey__btn:focus {
  color: #8E714F !important;
  text-decoration: none !important;
  background: rgba(205, 184, 154, 0.18) !important;
  border-color: #B8966C !important;
}

.ggl-section .ggl-journey__btn:focus-visible {
  outline: 2px solid #B8966C !important;
  outline-offset: 2px !important;
}

.ggl-section .ggl-journey__btn-icon {
  display: block !important;
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
}

@media (min-width: 768px) {
  /* ----- Section 8 -----
     Kanvas desain 602px: nilai variabel disesuaikan di section ini saja. */
  .ggl-section.ggl-journey {
    --ggl-fs-title: 3.99vw;
    --ggl-lh-title: 1.2;
    --ggl-fs-body: 1.61vw;
    --ggl-lh-body: 1.44;
    --ggl-fs-small: 1.05vw;
    --ggl-fs-button: 0.93vw;

    aspect-ratio: 602 / 401 !important;
    padding: 1.5vw 5.98vw 0 !important;
  }

  .ggl-section .ggl-journey__orn-row {
    gap: 3.3vw !important;
  }

  .ggl-section .ggl-journey__orn-line {
    width: 11.13vw !important;
    height: 0.25vw !important;
  }

  .ggl-section .ggl-journey__orn {
    width: 3.3vw !important;
    height: 3.3vw !important;
  }

  .ggl-section .ggl-journey__title {
    margin-top: 0.44vw !important;
  }

  .ggl-section .ggl-journey__desc {
    margin-top: 0.07vw !important;
  }

  .ggl-section .ggl-journey__grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.66vw 1.5vw !important;
    margin-top: 1.07vw !important;
  }

  .ggl-section .ggl-journey__foot {
    margin-top: 1.08vw !important;
  }

  .ggl-section .ggl-journey__diamond {
    width: 0.75vw !important;
    height: 0.75vw !important;
  }

  .ggl-section .ggl-journey__connect {
    gap: 1.1vw !important;
    margin-top: 0.3vw !important;
  }

  .ggl-section .ggl-journey__connect-line {
    flex: none !important;
    width: 7.3vw !important;
    height: 0.2vw !important;
  }

  .ggl-section .ggl-journey__social {
    gap: 2.3vw !important;
    margin-top: 0.9vw !important;
  }

  .ggl-section .ggl-journey__social-icon {
    width: 1.7vw !important;
    height: 1.7vw !important;
  }

  .ggl-section .ggl-journey__btn {
    gap: 1.3vw !important;
    width: 22.6vw !important;
    height: 3.65vw !important;
    justify-content: center !important;
    margin-top: 1.4vw !important;
    padding: 0 !important;
    border-width: 0.17vw !important;
    border-radius: 0.5vw !important;
  }

  .ggl-section .ggl-journey__btn-icon {
    width: 1.7vw !important;
    height: 1.7vw !important;
  }
}

/* =========================================================
   SECTION 9 — KOLEKSI SPESIAL & CUSTOM
   ========================================================= */
.ggl-section.ggl-custom {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  background-color: #E6D6BF !important;
  background-repeat: no-repeat !important;
  /* mobile: teks di atas warna polos, foto hampers di bawah */
  background-size: 140% auto !important;
  background-position: right bottom !important;
}

.ggl-section.ggl-custom::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(93.3vw - 26vw) !important;
  height: 26vw !important;
  background: linear-gradient(to bottom, #E6D6BF 0%, rgba(230, 214, 191, 0) 100%) !important;
  pointer-events: none !important;
}

.ggl-section .ggl-custom__content {
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  padding: 48px 24px 88vw !important;
}

.ggl-section .ggl-custom__title {
  font-family: var(--ggl-font-script) !important;
  font-weight: 400 !important;
  font-size: var(--ggl-fs-script) !important;
  line-height: 1.08 !important;
  color: #1F3B1C !important;
  text-align: center !important;
}

.ggl-section .ggl-custom__title-line {
  display: block !important;
  font-family: var(--ggl-font-script) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  text-align: center !important;
}

.ggl-section .ggl-custom__divider {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 300px !important;
  margin: 12px auto 0 !important;
}

.ggl-section .ggl-custom__divider-line {
  display: block !important;
  flex: 1 1 0 !important;
  height: 2px !important;
  background: linear-gradient(to right, rgba(175, 128, 58, 0) 0%, #AF803A 100%) !important;
}

.ggl-section .ggl-custom__divider-line--right {
  background: linear-gradient(to left, rgba(175, 128, 58, 0) 0%, #AF803A 100%) !important;
}

.ggl-section .ggl-custom__orn {
  display: block !important;
  flex-shrink: 0 !important;
  width: 26px !important;
  height: 20px !important;
}

.ggl-section .ggl-custom__text {
  margin-top: 14px !important;
  font-family: var(--ggl-font-humanist) !important;
  font-weight: 400 !important;
  font-size: var(--ggl-fs-body) !important;
  line-height: 1.45 !important;
  color: #2F3417 !important;
}

.ggl-section .ggl-custom__btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 180px !important;
  margin-top: 22px !important;
  padding: 11px 28px !important;
  border: 1px solid #E3C27F !important;
  border-radius: 7px !important;
  background: linear-gradient(180deg, #CF9F4B 0%, #B5852F 50%, #A87A30 100%) !important;
  color: #FFF8EC !important;
  text-decoration: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, 0.55), 0 2px 5px rgba(90, 60, 20, 0.3) !important;
  transition: filter 0.15s ease !important;
}

.ggl-section .ggl-custom__btn-text {
  font-family: var(--ggl-font-humanist) !important;
  font-weight: 500 !important;
  font-size: var(--ggl-fs-button) !important;
  line-height: 1.2 !important;
  color: #FFF8EC !important;
  text-shadow: 0 1px 1px rgba(80, 50, 10, 0.35) !important;
}

.ggl-section .ggl-custom__btn:hover,
.ggl-section .ggl-custom__btn:focus {
  color: #FFF8EC !important;
  text-decoration: none !important;
  filter: brightness(1.06) !important;
}

.ggl-section .ggl-custom__btn:focus-visible {
  outline: 2px solid #1F3B1C !important;
  outline-offset: 2px !important;
}

@media (min-width: 768px) {
  /* ----- Section 9 -----
     Kanvas desain 602px: nilai variabel disesuaikan di section ini saja. */
  .ggl-section.ggl-custom {
    --ggl-fs-script: 5.81vw;
    --ggl-fs-body: 2.25vw;
    --ggl-fs-button: 2.49vw;

    aspect-ratio: 602 / 401 !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .ggl-section.ggl-custom::before {
    display: none !important;
  }

  .ggl-section .ggl-custom__content {
    position: absolute !important;
    left: 7.3% !important;
    top: 6.9% !important;
    width: 36% !important;
    padding: 0 !important;
  }

  .ggl-section .ggl-custom__title {
    width: 33.9vw !important;
    margin-left: -0.33vw !important;
    line-height: 1.11 !important;
  }

  /* baris kedua sedikit bergeser ke kanan, sesuai desain */
  .ggl-section .ggl-custom__title-line + .ggl-custom__title-line {
    padding-left: 3.66vw !important;
  }

  .ggl-section .ggl-custom__divider {
    gap: 0.66vw !important;
    width: 33.06vw !important;
    max-width: none !important;
    margin: -0.33vw 0 0 -0.66vw !important;
  }

  .ggl-section .ggl-custom__divider-line {
    height: 0.33vw !important;
  }

  .ggl-section .ggl-custom__orn {
    width: 3.32vw !important;
    height: 2.5vw !important;
  }

  .ggl-section .ggl-custom__text {
    margin-top: 1.27vw !important;
    line-height: 1.18 !important;
    white-space: nowrap !important;
  }

  .ggl-section .ggl-custom__btn {
    width: 25.58vw !important;
    min-width: 0 !important;
    height: 4.32vw !important;
    margin-top: 1.5vw !important;
    padding: 0 !important;
    border-width: 0.17vw !important;
    border-radius: 0.9vw !important;
  }
}

/* =========================================================
   SECTION 10 — KOLEKSI SPESIAL ACCESSORIES NATAL
   ========================================================= */
.ggl-section.ggl-natal {
  --ggl-fs-script: 54px; /* mobile: judul script dibuat lebih besar khusus section ini */
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  background-color: #F8EEE2 !important;
  background-repeat: no-repeat !important;
  /* mobile: teks di atas warna polos, foto pohon Natal di bawah */
  background-size: 150% auto !important;
  background-position: right bottom !important;
}

.ggl-section.ggl-natal::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: calc(99.9vw - 28vw) !important;
  height: 28vw !important;
  background: linear-gradient(to bottom, #F8EEE2 0%, rgba(248, 238, 226, 0) 100%) !important;
  pointer-events: none !important;
}

.ggl-section .ggl-natal__content {
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  padding: 44px 24px 92vw !important;
}

.ggl-section .ggl-natal__head {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}

.ggl-section .ggl-natal__eyebrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

.ggl-section .ggl-natal__eyebrow-line {
  display: block !important;
  flex-shrink: 0 !important;
  width: 28px !important;
  height: 1px !important;
  background: #D8B47F !important;
}

.ggl-section .ggl-natal__eyebrow-text {
  padding-left: 0.15em !important;
  font-family: var(--ggl-font-sans) !important;
  font-weight: 500 !important;
  font-size: var(--ggl-fs-eyebrow) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.15em !important;
  color: #58300A !important;
  text-align: center !important;
}

.ggl-section .ggl-natal__title {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin-top: 4px !important;
  font-family: var(--ggl-font-script) !important;
  font-weight: 400 !important;
}

.ggl-section .ggl-natal__word {
  position: relative !important;
  display: block !important;
  font-family: var(--ggl-font-script) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.ggl-section .ggl-natal__word--acc {
  font-size: var(--ggl-fs-script) !important;
  line-height: 1 !important;
  color: #01421F !important;
}

.ggl-section .ggl-natal__word--natal {
  margin-top: -0.29em !important;
  font-size: calc(var(--ggl-fs-script) * 1.53) !important;
  line-height: 1 !important;
  color: #9B0110 !important;
}

.ggl-section .ggl-natal__holly {
  position: absolute !important;
  left: 100% !important;
  top: 0.02em !important;
  display: block !important;
  width: 0.475em !important;
  max-width: none !important;
  height: auto !important;
  margin-left: 0.04em !important;
  border: 0 !important;
}

.ggl-section .ggl-natal__bow {
  position: absolute !important;
  left: 100% !important;
  top: 0.34em !important;
  display: block !important;
  width: 0.5em !important;
  max-width: none !important;
  height: auto !important;
  margin-left: 0 !important;
  border: 0 !important;
}

.ggl-section .ggl-natal__subtitle {
  margin-top: 2px !important;
  font-family: var(--ggl-font-serif-bold) !important;
  font-weight: 600 !important;
  font-size: var(--ggl-fs-subtitle) !important;
  line-height: 1.2 !important;
  color: #3F1300 !important;
  text-align: center !important;
}

.ggl-section .ggl-natal__tagline {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 12px !important;
}

.ggl-section .ggl-natal__tagline-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
}

.ggl-section .ggl-natal__tagline-line {
  display: block !important;
  flex: 1 1 0 !important;
  max-width: 60px !important;
  height: 1px !important;
  background: #D8B47F !important;
}

.ggl-section .ggl-natal__tagline-text {
  font-family: var(--ggl-font-humanist) !important;
  font-weight: 400 !important;
  font-size: var(--ggl-fs-body) !important;
  line-height: 1.17 !important;
  color: #5A3A26 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* ----- daftar produk ----- */
.ggl-section .ggl-natal__list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 20px !important;
  list-style: none !important;
}

.ggl-section .ggl-natal__item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  list-style: none !important;
}

.ggl-section .ggl-natal__circle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 40px !important;
  height: 40px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: 50% !important;
  background: #8B000E !important;
  box-shadow: 0 1px 3px rgba(80, 20, 10, 0.25) !important;
}

.ggl-section .ggl-natal__circle--green {
  background: #145131 !important;
}

.ggl-section .ggl-natal__icon {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  height: 55% !important;
  border: 0 !important;
}

.ggl-section .ggl-natal__label {
  font-family: var(--ggl-font-humanist) !important;
  font-weight: 400 !important;
  font-size: var(--ggl-fs-small) !important;
  line-height: 1.15 !important;
  color: #5B3E2C !important;
}

/* ----- tombol banner ----- */
.ggl-section .ggl-natal__btn {
  position: relative !important;
  display: block !important;
  width: 300px !important;
  max-width: 100% !important;
  margin: 24px auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #F6E6DE !important;
  text-decoration: none !important;
  transition: filter 0.15s ease !important;
}

.ggl-section .ggl-natal__btn-bg {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  border: 0 !important;
}

.ggl-section .ggl-natal__btn-inner {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8.6% !important;
  padding-right: 6% !important;
}

.ggl-section .ggl-natal__btn-icon {
  display: block !important;
  flex-shrink: 0 !important;
  width: 7.4% !important;
  height: auto !important;
}

.ggl-section .ggl-natal__btn-text {
  font-family: var(--ggl-font-humanist) !important;
  font-weight: 500 !important;
  font-size: var(--ggl-fs-button) !important;
  line-height: 1.2 !important;
  color: #F6E6DE !important;
  white-space: nowrap !important;
}

.ggl-section .ggl-natal__btn:hover,
.ggl-section .ggl-natal__btn:focus {
  color: #F6E6DE !important;
  text-decoration: none !important;
  filter: brightness(1.08) !important;
}

.ggl-section .ggl-natal__btn:focus-visible {
  outline: 2px solid #D8B47F !important;
  outline-offset: 2px !important;
}

@media (min-width: 768px) {
  /* ----- Section 10 -----
     Kanvas desain 602px: nilai variabel disesuaikan di section ini saja. */
  .ggl-section.ggl-natal {
    --ggl-fs-eyebrow: 2.24vw;
    --ggl-fs-script: 9.08vw;
    --ggl-fs-subtitle: 3.41vw;
    --ggl-fs-body: 2vw;
    --ggl-fs-small: 1.74vw;
    --ggl-fs-button: 1.79vw;

    aspect-ratio: 602 / 401 !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .ggl-section.ggl-natal::before {
    display: none !important;
  }

  .ggl-section .ggl-natal__content {
    position: absolute !important;
    left: 4.98% !important;
    top: 7.1% !important;
    width: 39.87% !important;
    padding: 0 !important;
  }

  .ggl-section .ggl-natal__eyebrow {
    gap: 1.66vw !important;
  }

  .ggl-section .ggl-natal__eyebrow-line {
    width: 4.65vw !important;
    height: 0.2vw !important;
  }

  /* judul script sedikit bergeser ke kiri, sesuai desain */
  .ggl-section .ggl-natal__title {
    position: relative !important;
    left: -2.16vw !important;
    margin-top: 0 !important;
  }

  .ggl-section .ggl-natal__subtitle {
    position: relative !important;
    left: 1.08vw !important;
    margin-top: -3.8vw !important;
  }

  .ggl-section .ggl-natal__tagline {
    margin-top: 1.5vw !important;
  }

  .ggl-section .ggl-natal__tagline-row {
    gap: 0.8vw !important;
  }

  .ggl-section .ggl-natal__tagline-line {
    max-width: none !important;
    height: 0.2vw !important;
  }

  .ggl-section .ggl-natal__list {
    gap: 0.6vw !important;
    margin-top: 0.9vw !important;
    padding-left: 0 !important;
  }

  .ggl-section .ggl-natal__item {
    gap: 1vw !important;
    height: 4.65vw !important;
  }

  .ggl-section .ggl-natal__circle {
    width: 4.65vw !important;
    height: 4.65vw !important;
    border-width: 0.2vw !important;
  }

  .ggl-section .ggl-natal__btn {
    position: absolute !important;
    left: calc(29.25 / 602 * 100vw - 4.98vw) !important;
    top: calc(341.25 / 401 * 66.61vw - 4.73vw) !important;
    width: 33.47vw !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .ggl-section .ggl-natal__btn-inner {
    gap: 0 !important;
    justify-content: flex-start !important;
    padding: 0 !important;
  }

  .ggl-section .ggl-natal__btn-icon {
    width: 2.5vw !important;
    margin-left: 4.11vw !important;
  }

  .ggl-section .ggl-natal__btn-text {
    margin-left: 2.82vw !important;
  }
}

/* =========================================================
   SECTION 11 — CTA "PERCAYAKAN KEPADA GENESIS GLORY"
   ========================================================= */
.ggl-section.ggl-cta {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  background-color: #FBF0DE !important;
  background-repeat: no-repeat !important;
  background-size: 100% auto !important;
  background-position: center bottom !important;
}

.ggl-section .ggl-cta__photo {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 602 / 250 !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center top !important;
}

.ggl-section .ggl-cta__content {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  padding: 8px 20px 44px !important;
}

.ggl-section .ggl-cta__title {
  font-family: var(--ggl-font-serif-bold) !important;
  font-weight: 600 !important;
  font-size: var(--ggl-fs-title) !important;
  line-height: 1.15 !important;
  color: #4C1A00 !important;
  text-align: center !important;
}

.ggl-section .ggl-cta__wordmark {
  display: block !important;
  width: 86% !important;
  max-width: 420px !important;
  height: auto !important;
  margin-top: 0 !important;
  border: 0 !important;
}

.ggl-section .ggl-cta__text {
  margin-top: 12px !important;
  font-family: var(--ggl-font-serif-bold) !important;
  font-weight: 400 !important;
  font-size: var(--ggl-fs-body) !important;
  line-height: 1.4 !important;
  color: #571F00 !important;
  text-align: center !important;
  text-wrap: balance !important;
}

.ggl-section .ggl-cta__strong {
  font-family: var(--ggl-font-serif-bold) !important;
  font-weight: 600 !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: #3D1400 !important;
}

.ggl-section .ggl-cta__btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 22px !important;
  padding: 10px 30px 10px 22px !important;
  border: 0 !important;
  border-radius: 9999px !important;
  background: linear-gradient(180deg, #D4A85A 0%, #B8873D 45%, #9C6A28 100%) !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 233, 180, 0.6), 0 3px 8px rgba(110, 70, 20, 0.3) !important;
  transition: filter 0.15s ease !important;
}

.ggl-section .ggl-cta__btn:hover,
.ggl-section .ggl-cta__btn:focus {
  color: #FFFFFF !important;
  text-decoration: none !important;
  filter: brightness(1.06) !important;
}

.ggl-section .ggl-cta__btn:focus-visible {
  outline: 2px solid #4C1A00 !important;
  outline-offset: 2px !important;
}

.ggl-section .ggl-cta__wa {
  display: block !important;
  flex-shrink: 0 !important;
  width: 36px !important;
  height: 36px !important;
}

.ggl-section .ggl-cta__btn-label {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.ggl-section .ggl-cta__btn-title {
  font-family: var(--ggl-font-sans) !important;
  font-weight: 500 !important;
  font-size: var(--ggl-fs-small) !important;
  line-height: 1.25 !important;
  letter-spacing: 0.25em !important;
  color: #FFFFFF !important;
}

.ggl-section .ggl-cta__btn-number {
  font-family: var(--ggl-font-sans) !important;
  font-weight: 700 !important;
  font-size: var(--ggl-fs-button) !important;
  line-height: 1.25 !important;
  letter-spacing: 0.1em !important;
  color: #FFFFFF !important;
}

@media (min-width: 768px) {
  /* ----- Section 11 -----
     Kanvas desain 602px: nilai variabel disesuaikan di section ini saja. */
  .ggl-section.ggl-cta {
    --ggl-fs-title: 5.11vw;
    --ggl-fs-body: 2.22vw;
    --ggl-fs-small: 1.74vw;
    --ggl-fs-button: 2.08vw;

    aspect-ratio: 602 / 447 !important;
  }

  .ggl-section .ggl-cta__content {
    position: absolute !important;
    left: 0 !important;
    top: 39.8vw !important;
    padding: 0 !important;
  }

  .ggl-section .ggl-cta__wordmark {
    width: 54.98vw !important;
    max-width: none !important;
    margin: -1.78vw 0 0 1.16vw !important;
  }

  .ggl-section .ggl-cta__text {
    margin-top: 0 !important;
    line-height: 1.23 !important;
  }

  .ggl-section .ggl-cta__btn {
    gap: 2.4vw !important;
    width: 32.39vw !important;
    height: 6.64vw !important;
    margin-top: 1.1vw !important;
    padding: 0 0 0 4.49vw !important;
  }

  .ggl-section .ggl-cta__wa {
    width: 4.32vw !important;
    height: 4.32vw !important;
  }

  .ggl-section .ggl-cta__btn-label {
    gap: 0.6vw !important;
  }

  .ggl-section .ggl-cta__btn-title,
  .ggl-section .ggl-cta__btn-number {
    line-height: 1.1 !important;
  }
}

/* =========================================================
   SECTION 12 — BAWA CERITA NUSANTARA
   ========================================================= */
.ggl-section.ggl-cerita {
  position: relative !important;
  width: 100% !important;
  min-height: 125vw !important;
  overflow: hidden !important;
  background-color: #2B1D14 !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: 18% center !important; /* mobile: fokus sisi gelap + kain */
}

/* mobile: lapisan gelap supaya teks terbaca di atas foto */
.ggl-section.ggl-cerita::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to bottom, rgba(30, 18, 10, 0.72) 0%, rgba(30, 18, 10, 0.45) 55%, rgba(30, 18, 10, 0.1) 100%) !important;
  pointer-events: none !important;
}

.ggl-section .ggl-cerita__content {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  padding: 64px 24px 48px !important;
}

.ggl-section .ggl-cerita__orn-row {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  width: 260px !important;
  max-width: 100% !important;
}

.ggl-section .ggl-cerita__orn-line {
  display: block !important;
  flex: 1 1 0 !important;
  height: 1px !important;
  background: #A6784A !important;
}

.ggl-section .ggl-cerita__orn {
  display: block !important;
  flex-shrink: 0 !important;
  width: 34px !important;
  height: 36px !important;
}

.ggl-section .ggl-cerita__title {
  margin-top: 20px !important;
  font-family: var(--ggl-font-serif) !important;
  font-weight: 400 !important;
  font-size: var(--ggl-fs-title) !important;
  line-height: 1.2 !important;
  color: #F7EFE3 !important;
  -webkit-text-stroke: 0.012em #F7EFE3 !important;
}

.ggl-section .ggl-cerita__btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 28px !important;
  padding: 14px 24px !important;
  border: 1.5px solid #D6C1A9 !important;
  border-radius: 9999px !important;
  background: #844A25 !important;
  color: #F7EFE3 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease !important;
}

.ggl-section .ggl-cerita__btn-text {
  font-family: var(--ggl-font-sans) !important;
  font-weight: 500 !important;
  font-size: var(--ggl-fs-button) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.21em !important;
  color: #F7EFE3 !important;
  white-space: nowrap !important;
}

.ggl-section .ggl-cerita__btn:hover,
.ggl-section .ggl-cerita__btn:focus {
  color: #F7EFE3 !important;
  text-decoration: none !important;
  background: #6E3C1D !important;
}

.ggl-section .ggl-cerita__btn:focus-visible {
  outline: 2px solid #D6C1A9 !important;
  outline-offset: 3px !important;
}

.ggl-section .ggl-cerita__btn-icon {
  display: block !important;
  flex-shrink: 0 !important;
  width: 16px !important;
  height: 16px !important;
}

@media (min-width: 768px) {
  /* ----- Section 12 -----
     Kanvas desain 1379px: nilai variabel disesuaikan di section ini saja. */
  .ggl-section.ggl-cerita {
    --ggl-fs-title: 4.28vw;
    --ggl-fs-button: 1.2vw;

    min-height: 0 !important;
    aspect-ratio: 1379 / 689 !important;
    background-position: center !important;
  }

  .ggl-section.ggl-cerita::before {
    display: none !important;
  }

  .ggl-section .ggl-cerita__content {
    position: absolute !important;
    left: 8.56% !important;
    top: 19.2% !important;
    width: 55% !important;
    padding: 0 !important;
  }

  .ggl-section .ggl-cerita__orn-row {
    gap: 2vw !important;
    width: 29.37vw !important;
    max-width: none !important;
    margin-left: 6.09vw !important;
  }

  .ggl-section .ggl-cerita__orn-line {
    height: 0.1vw !important;
  }

  .ggl-section .ggl-cerita__orn {
    width: 4.33vw !important;
    height: 4.55vw !important;
  }

  .ggl-section .ggl-cerita__title {
    margin-top: 0.9vw !important;
    line-height: 1.17 !important;
  }

  .ggl-section .ggl-cerita__btn {
    gap: 0.9vw !important;
    width: 29.66vw !important;
    height: 4.57vw !important;
    margin-top: 2.4vw !important;
    margin-left: -0.15vw !important;
    padding: 0 0 0 2.68vw !important;
    border-width: 0.12vw !important;
  }

  .ggl-section .ggl-cerita__btn-icon {
    width: 1.3vw !important;
    height: 1.3vw !important;
  }
}

/* Hormati preferensi kurangi animasi */
@media (prefers-reduced-motion: reduce) {
  .ggl-section .ggl-story__btn,
  .ggl-section .ggl-batik__btn,
  .ggl-section .ggl-batik__dot,
  .ggl-section .ggl-koleksi__link,
  .ggl-section .ggl-koleksi__link-text,
  .ggl-section .ggl-produk__more-line,
  .ggl-section .ggl-produk__btn,
  .ggl-section .ggl-corp__btn,
  .ggl-section .ggl-journey__img,
  .ggl-section .ggl-journey__social-link,
  .ggl-section .ggl-journey__btn,
  .ggl-section .ggl-custom__btn,
  .ggl-section .ggl-natal__btn,
  .ggl-section .ggl-cta__btn,
  .ggl-section .ggl-cerita__btn {
    transition: none !important;
  }
}