/* =========================================================
   NAVIGATION — BAJU BODO
   ========================================================= */

/* ---------------------------------------------------------
   HEADER BRAND
   --------------------------------------------------------- */

.site-header .brand,
.site-header .brand a {
  color: inherit;
}

.site-header .brand-name {
  color: inherit;
}

/* ---------------------------------------------------------
   NAVIGATION DESKTOP
   --------------------------------------------------------- */

.site-header .main-navigation a,
.site-header .main-navigation a:visited {
  color: inherit;
}

.site-header .main-navigation a:hover,
.site-header .main-navigation a:focus-visible,
.site-header .main-navigation a.active,
.site-header .main-navigation a.is-active {
  color: inherit;
}

/* =========================================================
   HEADER MOBILE
   Sama dengan Header index.html
   ========================================================= */

@media (max-width: 900px) {
  /* -------------------------------------------------------
     HEADER CONTAINER
     ------------------------------------------------------- */

  .site-header .header-container {
    width: min(calc(100% - 32px), 1180px);
    min-height: 72px;
    margin-left: auto;
    margin-right: auto;
    gap: 12px;
    box-sizing: border-box;
  }

  /* -------------------------------------------------------
     BRAND
     ------------------------------------------------------- */

  .site-header .brand {
    min-width: 0;
  }

  .site-header .brand a {
    min-width: 0;
  }

  .site-header .brand img {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
  }

  .site-header .brand-name {
    color: #fff;
  }

  /* -------------------------------------------------------
     MOBILE MENU BUTTON
     ------------------------------------------------------- */

  .site-header .mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 10px;

    background: transparent;

    box-sizing: border-box;
  }

  .site-header .mobile-menu-toggle span {
    display: block;

    width: 20px;
    height: 2px;

    border-radius: 999px;

    background: #fff;
  }

  /* -------------------------------------------------------
     MOBILE NAVIGATION PANEL
     ------------------------------------------------------- */

  .site-header .main-navigation {
    position: absolute;

    top: calc(100% + 10px);
    right: 0;

    width: min(280px, calc(100vw - 32px));

    padding: 14px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;

    background: rgba(35, 34, 25, 0.94);

    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-8px);

    pointer-events: none;

    transition:
      opacity 0.25s ease,
      visibility 0.25s ease,
      transform 0.25s ease;

    box-sizing: border-box;
  }

  /* -------------------------------------------------------
     MENU TERBUKA
     ------------------------------------------------------- */

  .site-header .main-navigation.is-open {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;
  }

  /* -------------------------------------------------------
     LIST MOBILE
     ------------------------------------------------------- */

  .site-header .main-navigation ul {
    display: flex;

    flex-direction: column;

    gap: 4px;

    width: 100%;

    margin: 0;
    padding: 0;

    list-style: none;
  }

  /* -------------------------------------------------------
     LINK MOBILE
     ------------------------------------------------------- */

  .site-header .main-navigation a,
  .site-header .main-navigation a:visited {
    display: flex;

    align-items: center;

    width: 100%;

    min-height: 43px;

    padding: 13px 12px;

    border-radius: 8px;

    color: rgba(255, 255, 255, 0.92);

    font-size: 0.84rem;

    line-height: 1.2;

    text-decoration: none;

    box-sizing: border-box;
  }

  /* -------------------------------------------------------
     LINK HOVER / ACTIVE
     ------------------------------------------------------- */

  .site-header .main-navigation a:hover,
  .site-header .main-navigation a:focus-visible,
  .site-header .main-navigation a.active,
  .site-header .main-navigation a.is-active {
    color: #d8ba7a;
    background: rgba(216, 186, 122, 0.08);
  }

  /* -------------------------------------------------------
     HILANGKAN GARIS NAV DESKTOP
     ------------------------------------------------------- */

  .site-header .main-navigation a::after {
    display: none;
  }

  /* -------------------------------------------------------
     HEADER ACTION
     ------------------------------------------------------- */

  .site-header .header-action {
    display: none;
  }
}

/* =========================================================
   MOBILE — 480px
   ========================================================= */

@media (max-width: 480px) {
  .site-header .header-container {
    width: calc(100% - 24px);
    min-height: 68px;
  }

  .site-header .brand img {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
  }

  .site-header .brand-name {
    font-size: 1.08rem;
  }

  .site-header .mobile-menu-toggle {
    width: 42px;
    height: 42px;
  }

  .site-header .main-navigation {
    width: min(280px, calc(100vw - 24px));
    padding: 12px;
  }

  .site-header .main-navigation a {
    min-height: 43px;
    padding: 12px;
    font-size: 0.84rem;
  }
}

/* =========================================================
   MOBILE — 380px
   ========================================================= */

@media (max-width: 380px) {
  .site-header .header-container {
    width: calc(100% - 20px);
    min-height: 60px;
  }

  .site-header .brand img {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
  }

  .site-header .brand-name {
    font-size: 1rem;
  }

  .site-header .mobile-menu-toggle {
    width: 38px;
    height: 38px;
  }

  .site-header .mobile-menu-toggle span {
    width: 18px;
  }

  .site-header .main-navigation {
    width: min(260px, calc(100vw - 20px));
    padding: 10px;
  }

  .site-header .main-navigation a {
    min-height: 41px;
    padding: 11px;
    font-size: 0.8rem;
  }
}

/* =========================================================
   PAGE BASE
   ========================================================= */

.baju-bodo-page-hero,
.baju-bodo-page-info,
.baju-bodo-page-collection,
.baju-bodo-page-cta {
  position: relative;
}

/* =========================================================
   HERO BAJU BODO — FINAL
   ---------------------------------------------------------
   Desktop  : 2 kolom
   Tablet   : 2 kolom
   Mobile   : 1 kolom
   ========================================================= */

/* =========================================================
   HERO UTAMA
   ========================================================= */

.baju-bodo-page-hero {
  position: relative;

  width: 100%;

  padding: 110px 0 90px;

  background: linear-gradient(
    135deg,
    rgba(255, 250, 242, 0.96),
    rgba(247, 237, 217, 0.92)
  );

  overflow: hidden;

  box-sizing: border-box;
}

/* =========================================================
   ORNAMEN HERO — ATAS KANAN
   ========================================================= */

.baju-bodo-page-hero::before {
  content: "";

  position: absolute;

  top: -180px;
  right: -150px;

  width: 420px;
  height: 420px;

  border-radius: 50%;

  background: rgba(201, 164, 95, 0.12);

  filter: blur(10px);

  pointer-events: none;
}

/* =========================================================
   ORNAMEN HERO — BAWAH KIRI
   ========================================================= */

.baju-bodo-page-hero::after {
  content: "";

  position: absolute;

  bottom: -170px;
  left: -130px;

  width: 300px;
  height: 300px;

  border-radius: 50%;

  background: rgba(183, 139, 63, 0.08);

  filter: blur(12px);

  pointer-events: none;
}

/* =========================================================
   HERO GRID — DESKTOP
   ========================================================= */

.baju-bodo-page-hero-grid {
  position: relative;

  z-index: 1;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 0.9fr);

  align-items: center;

  gap: 60px;

  width: 100%;

  margin: 0 auto;

  box-sizing: border-box;
}

/* =========================================================
   HERO IMAGE WRAPPER
   ========================================================= */

.baju-bodo-page-hero-image {
  position: relative;

  width: min(100%, 580px);

  min-width: 0;

  margin: 0 auto;

  overflow: visible;

  box-sizing: border-box;
}

/* =========================================================
   FRAME / ORNAMEN IMAGE
   ========================================================= */

.baju-bodo-page-hero-image::before {
  content: "";

  position: absolute;

  inset: 18px -18px -18px 18px;

  z-index: 0;

  border-radius: 28px;

  border: 1px solid rgba(174, 137, 67, 0.35);

  background: linear-gradient(
    135deg,
    rgba(202, 164, 95, 0.18),
    rgba(255, 255, 255, 0.08)
  );

  box-sizing: border-box;
}

/* =========================================================
   HERO IMAGE
   ========================================================= */

.baju-bodo-page-hero-image img {
  position: relative;

  z-index: 1;

  display: block;

  width: 100%;

  max-width: 100%;

  height: auto;

  max-height: 570px;

  object-fit: contain;

  object-position: center;

  border-radius: 24px;

  border: 1px solid rgba(174, 137, 67, 0.25);

  background: rgba(255, 255, 255, 0.35);

  box-shadow: 0 25px 65px rgba(70, 52, 28, 0.18);

  box-sizing: border-box;
}

/* =========================================================
   HERO CONTENT
   ========================================================= */

.baju-bodo-page-hero-content {
  width: 100%;

  max-width: 540px;

  min-width: 0;

  margin: 0 auto;

  box-sizing: border-box;
}

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

.baju-bodo-page-hero-content .section-label {
  margin: 0 0 12px;

  color: #a47b35;

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 0.16em;

  line-height: 1.5;

  text-transform: uppercase;
}

/* =========================================================
   HERO TITLE
   ========================================================= */

.baju-bodo-page-hero-content h1 {
  margin: 0 0 18px;

  color: #3e3020;

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(2.45rem, 4.5vw, 4.2rem);

  font-weight: 500;

  line-height: 1.05;

  letter-spacing: -0.035em;

  max-width: 620px;
}

/* =========================================================
   HERO LEAD
   ========================================================= */

.baju-bodo-page-lead {
  margin: 0 0 18px;

  color: #a4772f;

  font-size: 0.82rem;

  font-weight: 800;

  letter-spacing: 0.13em;

  line-height: 1.7;

  text-transform: uppercase;
}

/* =========================================================
   HERO DESCRIPTION
   ========================================================= */

.baju-bodo-page-hero-content > p:not(.section-label):not(.baju-bodo-page-lead) {
  max-width: 520px;

  margin: 0 0 28px;

  color: #756652;

  font-size: 0.95rem;

  line-height: 1.8;
}

/* =========================================================
   HERO ACTIONS
   ========================================================= */

.baju-bodo-page-hero-actions {
  display: flex;

  align-items: center;

  justify-content: flex-start;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 28px;

  width: 100%;

  box-sizing: border-box;
}

/* =========================================================
   HERO BUTTON
   ========================================================= */

.baju-bodo-page-hero-actions .button {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 46px;

  padding: 11px 23px;

  border-radius: 999px;

  text-decoration: none;

  font-size: 0.85rem;

  font-weight: 700;

  line-height: 1.2;

  white-space: nowrap;

  box-sizing: border-box;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease;
}

/* =========================================================
   BUTTON UTAMA
   ========================================================= */

.baju-bodo-page-hero-actions .button:not(.button-whatsapp) {
  color: #fff;

  border: 1px solid #b78b3f;

  background: linear-gradient(135deg, #caa45f, #a87931);

  box-shadow: 0 10px 25px rgba(157, 116, 48, 0.18);
}

/* =========================================================
   BUTTON UTAMA — HOVER
   ========================================================= */

.baju-bodo-page-hero-actions .button:not(.button-whatsapp):hover {
  transform: translateY(-2px);

  filter: brightness(1.05);

  box-shadow: 0 14px 30px rgba(157, 116, 48, 0.25);
}

/* =========================================================
   HERO RESPONSIVE — TABLET
   641px — 1024px
   ========================================================= */

@media (min-width: 641px) and (max-width: 1024px) {
  .baju-bodo-page-hero {
    padding: 90px 0 75px;
  }

  /* -------------------------------------------------------
     GRID
     ------------------------------------------------------- */

  .baju-bodo-page-hero-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 0.9fr);

    gap: 38px;
  }

  /* -------------------------------------------------------
     IMAGE
     ------------------------------------------------------- */

  .baju-bodo-page-hero-image {
    width: min(100%, 480px);
  }

  .baju-bodo-page-hero-image img {
    max-height: 480px;

    border-radius: 21px;
  }

  .baju-bodo-page-hero-image::before {
    inset: 14px -14px -14px 14px;

    border-radius: 23px;
  }

  /* -------------------------------------------------------
     CONTENT
     ------------------------------------------------------- */

  .baju-bodo-page-hero-content {
    max-width: 460px;
  }

  .baju-bodo-page-hero-content .section-label {
    font-size: 0.68rem;
  }

  .baju-bodo-page-hero-content h1 {
    font-size: clamp(2.25rem, 5vw, 3.35rem);

    margin-bottom: 15px;
  }

  .baju-bodo-page-lead {
    font-size: 0.75rem;

    letter-spacing: 0.11em;
  }

  .baju-bodo-page-hero-content
    > p:not(.section-label):not(.baju-bodo-page-lead) {
    font-size: 0.88rem;

    line-height: 1.75;

    margin-bottom: 24px;
  }

  /* -------------------------------------------------------
     BUTTONS
     ------------------------------------------------------- */

  .baju-bodo-page-hero-actions {
    gap: 10px;

    margin-top: 23px;
  }

  .baju-bodo-page-hero-actions .button {
    min-height: 44px;

    padding: 10px 19px;

    font-size: 0.79rem;
  }
}

/* =========================================================
   HERO RESPONSIVE — MOBILE
   max-width: 640px
   ========================================================= */

@media (max-width: 640px) {
  .baju-bodo-page-hero {
    padding: 75px 0 65px;

    overflow: hidden;
  }

  /* -------------------------------------------------------
     GRID → 1 KOLOM
     ------------------------------------------------------- */

  .baju-bodo-page-hero-grid {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 38px;

    width: 100%;
  }

  /* -------------------------------------------------------
     IMAGE
     ------------------------------------------------------- */

  .baju-bodo-page-hero-image {
    order: 1;

    width: calc(100% - 36px);

    max-width: 520px;

    margin: 0 auto;
  }

  .baju-bodo-page-hero-image::before {
    inset: 12px -10px -12px 10px;

    border-radius: 21px;
  }

  .baju-bodo-page-hero-image img {
    width: 100%;

    max-width: 100%;

    max-height: 460px;

    border-radius: 19px;

    box-shadow: 0 18px 42px rgba(70, 52, 28, 0.16);
  }

  /* -------------------------------------------------------
     CONTENT
     ------------------------------------------------------- */

  .baju-bodo-page-hero-content {
    order: 2;

    width: calc(100% - 36px);

    max-width: 520px;

    margin: 0 auto;

    text-align: center;
  }

  /* -------------------------------------------------------
     LABEL
     ------------------------------------------------------- */

  .baju-bodo-page-hero-content .section-label {
    margin-bottom: 10px;

    font-size: 0.65rem;

    letter-spacing: 0.13em;
  }

  /* -------------------------------------------------------
     TITLE
     ------------------------------------------------------- */

  .baju-bodo-page-hero-content h1 {
    max-width: 100%;

    margin: 0 auto 15px;

    font-size: clamp(2rem, 9vw, 3rem);

    line-height: 1.08;

    letter-spacing: -0.025em;
  }

  /* -------------------------------------------------------
     LEAD
     ------------------------------------------------------- */

  .baju-bodo-page-lead {
    max-width: 390px;

    margin: 0 auto 15px;

    font-size: 0.69rem;

    letter-spacing: 0.09em;

    line-height: 1.7;
  }

  /* -------------------------------------------------------
     DESCRIPTION
     ------------------------------------------------------- */

  .baju-bodo-page-hero-content
    > p:not(.section-label):not(.baju-bodo-page-lead) {
    max-width: 390px;

    margin: 0 auto 24px;

    font-size: 0.8rem;

    line-height: 1.75;
  }

  /* -------------------------------------------------------
     ACTIONS
     ------------------------------------------------------- */

  .baju-bodo-page-hero-actions {
    align-items: stretch;

    justify-content: center;

    flex-direction: column;

    gap: 10px;

    width: 100%;

    max-width: 360px;

    margin: 23px auto 0;
  }

  /* -------------------------------------------------------
     BUTTON
     ------------------------------------------------------- */

  .baju-bodo-page-hero-actions .button {
    width: 100%;

    min-height: 45px;

    padding: 11px 18px;

    font-size: 0.78rem;
  }

  /* -------------------------------------------------------
     HILANGKAN HOVER TRANSFORM DI TOUCH
     ------------------------------------------------------- */

  .baju-bodo-page-hero-actions .button:not(.button-whatsapp):hover {
    transform: none;

    filter: none;

    box-shadow: 0 10px 25px rgba(157, 116, 48, 0.18);
  }
}

/* =========================================================
   HERO RESPONSIVE — SMALL ANDROID
   max-width: 380px
   ========================================================= */

@media (max-width: 380px) {
  .baju-bodo-page-hero {
    padding: 65px 0 58px;
  }

  /* -------------------------------------------------------
     GRID
     ------------------------------------------------------- */

  .baju-bodo-page-hero-grid {
    gap: 32px;
  }

  /* -------------------------------------------------------
     IMAGE
     ------------------------------------------------------- */

  .baju-bodo-page-hero-image {
    width: calc(100% - 28px);

    max-width: 350px;
  }

  .baju-bodo-page-hero-image::before {
    inset: 10px -8px -10px 8px;

    border-radius: 18px;
  }

  .baju-bodo-page-hero-image img {
    max-height: 350px;

    border-radius: 17px;
  }

  /* -------------------------------------------------------
     CONTENT
     ------------------------------------------------------- */

  .baju-bodo-page-hero-content {
    width: calc(100% - 28px);

    max-width: 350px;
  }

  .baju-bodo-page-hero-content .section-label {
    font-size: 0.61rem;

    letter-spacing: 0.11em;
  }

  .baju-bodo-page-hero-content h1 {
    font-size: clamp(1.8rem, 9vw, 2.4rem);

    margin-bottom: 13px;
  }

  .baju-bodo-page-lead {
    font-size: 0.64rem;

    letter-spacing: 0.075em;

    line-height: 1.65;
  }

  .baju-bodo-page-hero-content
    > p:not(.section-label):not(.baju-bodo-page-lead) {
    font-size: 0.76rem;

    line-height: 1.7;

    margin-bottom: 21px;
  }

  /* -------------------------------------------------------
     BUTTONS
     ------------------------------------------------------- */

  .baju-bodo-page-hero-actions {
    max-width: 330px;

    gap: 8px;

    margin-top: 20px;
  }

  .baju-bodo-page-hero-actions .button {
    min-height: 43px;

    padding: 10px 15px;

    font-size: 0.74rem;
  }
}

/* =========================================================
   HERO RESPONSIVE — VERY SMALL ANDROID
   max-width: 360px
   ========================================================= */

@media (max-width: 360px) {
  .baju-bodo-page-hero {
    padding: 58px 0 52px;
  }

  .baju-bodo-page-hero-grid {
    gap: 28px;
  }

  .baju-bodo-page-hero-image {
    width: calc(100% - 24px);

    max-width: 330px;
  }

  .baju-bodo-page-hero-image::before {
    inset: 8px -6px -8px 6px;

    border-radius: 16px;
  }

  .baju-bodo-page-hero-image img {
    max-height: 320px;

    border-radius: 15px;
  }

  .baju-bodo-page-hero-content {
    width: calc(100% - 24px);

    max-width: 330px;
  }

  .baju-bodo-page-hero-content .section-label {
    font-size: 0.58rem;

    letter-spacing: 0.09em;
  }

  .baju-bodo-page-hero-content h1 {
    font-size: 1.75rem;

    line-height: 1.1;
  }

  .baju-bodo-page-lead {
    font-size: 0.6rem;

    letter-spacing: 0.065em;
  }

  .baju-bodo-page-hero-content
    > p:not(.section-label):not(.baju-bodo-page-lead) {
    font-size: 0.73rem;

    line-height: 1.65;
  }

  .baju-bodo-page-hero-actions {
    max-width: 310px;

    margin-top: 18px;
  }

  .baju-bodo-page-hero-actions .button {
    min-height: 42px;

    padding: 9px 14px;

    font-size: 0.72rem;
  }
}

/* =========================================================
   INFORMASI
   ========================================================= */

.baju-bodo-page-info {
  padding: 100px 0;

  background: #fffdf9;
}

.baju-bodo-page-info .section-header {
  text-align: center;

  justify-content: center;
}

.baju-bodo-page-info .section-header h2 {
  color: #3e3020;
}

/* =========================================================
   BENEFITS
   ========================================================= */

.baju-bodo-page-benefits {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 20px;

  max-width: 1180px;

  margin: 0 auto;
}

.baju-bodo-page-benefit {
  position: relative;

  padding: 30px 24px;

  border: 1px solid rgba(174, 137, 67, 0.18);

  border-radius: 20px;

  background: linear-gradient(
    145deg,
    rgba(255, 253, 248, 0.96),
    rgba(247, 239, 224, 0.88)
  );

  box-shadow: 0 10px 30px rgba(70, 52, 28, 0.06);

  text-align: center;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.baju-bodo-page-benefit:hover {
  transform: translateY(-6px);

  border-color: rgba(174, 137, 67, 0.35);

  box-shadow: 0 18px 38px rgba(70, 52, 28, 0.11);
}

/* =========================================================
   BENEFIT ICON
   ========================================================= */

.baju-bodo-page-benefit-icon {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  margin-bottom: 17px;

  border-radius: 50%;

  background: linear-gradient(135deg, #d8ba7a, #b78b3f);

  color: #fff;

  font-size: 0.9rem;

  font-weight: 800;

  box-shadow: 0 7px 16px rgba(157, 116, 48, 0.18);
}

.baju-bodo-page-benefit h3 {
  margin: 0 0 9px;

  color: #3e3020;

  font-size: 1.05rem;

  line-height: 1.35;
}

.baju-bodo-page-benefit p {
  margin: 0;

  color: #756652;

  font-size: 0.84rem;

  line-height: 1.7;
}

/* =========================================================
   COLLECTION BAJU BODO
   ========================================================= */

.baju-bodo-page-collection {
  position: relative;

  width: 100%;

  padding: 90px 0 100px;

  background: #fffdf9;

  overflow: hidden;

  box-sizing: border-box;
}

/* =========================================================
   SECTION HEADER
   ========================================================= */

.baju-bodo-page-collection .section-header {
  width: 100%;

  max-width: 820px;

  margin-left: auto;
  margin-right: auto;

  margin-bottom: 30px;

  text-align: center;

  box-sizing: border-box;
}

.baju-bodo-page-collection .section-header h2 {
  margin: 0 0 12px;

  color: #746d64;

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(2rem, 4vw, 3rem);

  font-weight: 500;

  line-height: 1.15;

  text-align: center;
}

.baju-bodo-page-collection .section-header > p {
  max-width: 650px;

  margin: 0 auto;

  color: #82786a;

  font-size: 0.84rem;

  line-height: 1.7;

  text-align: center;
}

.baju-bodo-page-collection .section-header .section-label {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 14px;

  margin-bottom: 12px;

  color: #a98a4f;

  font-size: 0.68rem;

  font-weight: 700;

  letter-spacing: 0.2em;

  text-transform: uppercase;
}

.baju-bodo-page-collection .section-header .section-label::before,
.baju-bodo-page-collection .section-header .section-label::after {
  content: "";

  display: block;

  width: 55px;

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(169, 138, 79, 0.75));
}

.baju-bodo-page-collection .section-header .section-label::after {
  background: linear-gradient(90deg, rgba(169, 138, 79, 0.75), transparent);
}

/* =========================================================
   COLLECTION CONTAINER — DESKTOP
   ========================================================= */

.baju-bodo-page-collection > .container {
  width: min(1180px, calc(100% - 48px));

  max-width: 1180px;

  min-width: 0;

  margin-left: auto;
  margin-right: auto;

  box-sizing: border-box;

  background: #1f1a14;
}

/* =========================================================
   SLIDER VIEWPORT — DESKTOP
   ========================================================= */

.baju-bodo-slider {
  position: relative;

  width: 100%;

  min-width: 0;

  margin: 0;

  padding: 0 26px;

  overflow: hidden;

  box-sizing: border-box;
}

/* =========================================================
   SLIDER TRACK
   ========================================================= */

.baju-bodo-page-grid {
  display: flex;

  flex-direction: row;

  flex-wrap: nowrap;

  align-items: stretch;

  justify-content: flex-start;

  gap: 24px;

  width: max-content;

  max-width: none;

  min-width: 100%;

  margin: 0;

  padding: 4px 0 12px;

  box-sizing: border-box;

  transform: translate3d(0, 0, 0);

  will-change: transform;

  transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =========================================================
   CARD
   ========================================================= */

.baju-bodo-page-card {
  position: relative;

  display: flex;

  flex: 0 0 360px;

  flex-direction: column;

  width: 360px;

  min-width: 360px;

  max-width: 360px;

  height: auto;

  overflow: hidden;

  border: 1px solid #e8dfd2;

  border-radius: 17px;

  background: rgba(255, 255, 255, 0.98);

  box-shadow: 0 8px 28px rgba(73, 58, 38, 0.065);

  box-sizing: border-box;

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.baju-bodo-page-card:hover {
  transform: translateY(-5px);

  border-color: #d9ccb9;

  box-shadow: 0 18px 42px rgba(73, 58, 38, 0.12);
}

/* =========================================================
   CARD IMAGE
   ========================================================= */

.baju-bodo-page-card-image {
  position: relative;

  width: 100%;

  aspect-ratio: 16 / 10;

  margin: 0;

  overflow: hidden;

  background: #eee8df;

  box-sizing: border-box;
}

.baju-bodo-page-card-image img {
  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  transform: scale(1);

  transition:
    transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.4s ease;

  user-select: none;
}

.baju-bodo-page-card:hover .baju-bodo-page-card-image img {
  transform: scale(1.045);
}

/* =========================================================
   CARD CONTENT
   ========================================================= */

.baju-bodo-page-card-content {
  display: flex;

  flex: 1;

  flex-direction: column;

  align-items: flex-start;

  padding: 18px 20px 21px;

  box-sizing: border-box;
}

.baju-bodo-page-category {
  align-self: flex-start;

  display: inline-flex;

  margin-bottom: 10px;

  padding: 5px 10px;

  border-radius: 999px;

  background: rgba(197, 161, 91, 0.12);

  color: #a47b35;

  font-size: 0.67rem;

  font-weight: 800;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}

.baju-bodo-page-card-content h3 {
  margin: 0 0 7px;

  color: #2c2823;

  font-family: Georgia, "Times New Roman", serif;

  font-size: 1.16rem;

  font-weight: 500;

  line-height: 1.3;
}

.baju-bodo-page-card-content > p {
  margin: 0;

  color: #7d7468;

  font-size: 0.77rem;

  line-height: 1.65;
}

/* =========================================================
   CARD META
   ========================================================= */

.baju-bodo-page-meta {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  width: 100%;

  margin-top: auto;

  padding-top: 14px;

  border-top: 1px solid rgba(121, 94, 53, 0.12);
}

.baju-bodo-page-meta span {
  color: #7a6b59;

  font-size: 0.77rem;
}

.baju-bodo-page-meta strong {
  color: #9a783a;

  font-size: 0.82rem;

  font-weight: 700;

  white-space: nowrap;
}

/* =========================================================
   CARD ACTIONS
   ========================================================= */

.baju-bodo-page-card-actions {
  display: grid;

  grid-template-columns:
    82px
    minmax(0, 1fr);

  align-items: center;

  gap: 10px;

  width: 100%;

  margin-top: 14px;
}

.baju-bodo-page-view {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 82px;

  min-width: 82px;

  min-height: 42px;

  padding: 9px 16px;

  border: 1px solid rgba(174, 137, 67, 0.65);

  border-radius: 10px;

  background: linear-gradient(135deg, #fffdf8, #f8f0df);

  color: #765522;

  font-size: 0.82rem;

  font-weight: 700;

  line-height: 1;

  cursor: pointer;

  box-sizing: border-box;

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.baju-bodo-page-view:hover {
  transform: translateY(-2px);

  border-color: #b78b3f;

  background: linear-gradient(135deg, #caa45f, #a87931);

  color: #fff;

  box-shadow: 0 8px 18px rgba(157, 116, 48, 0.18);
}

.baju-bodo-page-consult {
  width: 100%;

  min-height: 44px;

  margin-top: 0;

  padding: 10px 15px;

  border: 1px solid rgba(174, 137, 67, 0.5);

  border-radius: 11px;

  background: transparent;

  color: #966b2c;

  font-size: 0.82rem;

  font-weight: 700;

  cursor: pointer;

  box-sizing: border-box;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.baju-bodo-page-consult:hover {
  border-color: #b78b3f;

  background: linear-gradient(135deg, #caa45f, #a87931);

  color: #fff;

  transform: translateY(-2px);

  box-shadow: 0 8px 18px rgba(157, 116, 48, 0.18);
}

/* =========================================================
   CTA
   ========================================================= */

.baju-bodo-page-cta {
  position: relative;

  padding: 90px 0;

  background: linear-gradient(135deg, #3e3020, #5c4528);

  overflow: hidden;
}

/* =========================================================
   ORNAMEN CTA
   ========================================================= */

.baju-bodo-page-cta::before {
  content: "";

  position: absolute;

  width: 420px;
  height: 420px;

  top: -250px;
  right: -100px;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.1);

  box-shadow:
    0 0 0 40px rgba(255, 255, 255, 0.025),
    0 0 0 80px rgba(255, 255, 255, 0.018);

  pointer-events: none;
}

/* =========================================================
   CTA CONTENT
   ========================================================= */

.baju-bodo-page-cta-content {
  position: relative;

  z-index: 1;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 45px;

  width: 100%;

  max-width: 1180px;

  margin: 0 auto;

  padding: 42px 48px;

  box-sizing: border-box;

  border: 1px solid rgba(255, 255, 255, 0.13);

  border-radius: 25px;

  background: rgba(255, 255, 255, 0.06);

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.16);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);
}

/* =========================================================
   CTA TEXT
   ========================================================= */

.baju-bodo-page-cta-content > div {
  flex: 1;

  min-width: 0;
}

/* =========================================================
   CTA LABEL
   ========================================================= */

.baju-bodo-page-cta .section-label {
  margin: 0 0 9px;

  color: #d8ba7a;

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}

/* =========================================================
   CTA TITLE
   ========================================================= */

.baju-bodo-page-cta h2 {
  margin: 0 0 12px;

  color: #fff;

  font-size: clamp(1.6rem, 3vw, 2.35rem);

  line-height: 1.25;
}

/* =========================================================
   CTA DESCRIPTION
   ========================================================= */

.baju-bodo-page-cta-content > div > p:last-child {
  margin: 0;

  max-width: 650px;

  color: rgba(255, 255, 255, 0.72);

  font-size: 0.9rem;

  line-height: 1.7;
}

/* =========================================================
   CTA WHATSAPP
   ========================================================= */

.baju-bodo-page-cta .button-whatsapp {
  flex: 0 0 auto;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 48px;

  padding: 12px 24px;

  border-radius: 999px;

  color: #fff;

  white-space: nowrap;

  text-decoration: none;

  font-size: 0.85rem;

  font-weight: 700;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.16);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease;
}

/* =========================================================
   CTA WHATSAPP HOVER
   ========================================================= */

.baju-bodo-page-cta .button-whatsapp:hover {
  transform: translateY(-2px);

  filter: brightness(1.05);

  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.22);
}

/* =========================================================
   LIGHTBOX BAJU BODO
   ========================================================= */

/*
 * LIGHTBOX UTAMA
 *
 * Selalu menutupi seluruh viewport.
 */

.baju-bodo-lightbox {
  position: fixed;

  inset: 0;

  width: 100vw;

  height: 100vh;

  z-index: 99999;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 32px;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  background: rgba(8, 7, 5, 0.82);

  backdrop-filter: blur(14px) brightness(0.62);

  -webkit-backdrop-filter: blur(14px) brightness(0.62);

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;

  box-sizing: border-box;
}

/*
 * LIGHTBOX AKTIF
 */

.baju-bodo-lightbox.is-open {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;
}

/*
 * OVERLAY
 *
 * Overlay hanya sebagai latar.
 *
 * PENTING:
 * Overlay TIDAK menutup lightbox ketika diklik.
 */

.baju-bodo-lightbox-overlay {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.04),
    rgba(0, 0, 0, 0.55)
  );

  pointer-events: auto;
}

/*
 * CONTENT LIGHTBOX
 */

.baju-bodo-lightbox-content {
  position: relative;

  z-index: 2;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  width: min(92vw, 820px);

  max-height: calc(100vh - 64px);

  margin: 0;

  padding: 18px;

  border: 1px solid rgba(255, 255, 255, 0.16);

  border-radius: 24px;

  background: linear-gradient(
    145deg,
    rgba(48, 40, 29, 0.96),
    rgba(25, 21, 16, 0.98)
  );

  box-shadow:
    0 35px 90px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04);

  transform: scale(0.96) translateY(10px);

  transition: transform 0.3s ease;

  box-sizing: border-box;
}

/*
 * ANIMASI CONTENT SAAT OPEN
 */

.baju-bodo-lightbox.is-open .baju-bodo-lightbox-content {
  transform: scale(1) translateY(0);
}

/*
 * GAMBAR LIGHTBOX
 */

.baju-bodo-lightbox-image {
  display: block;

  width: auto;

  max-width: 100%;

  max-height: calc(100vh - 170px);

  object-fit: contain;

  border-radius: 16px;

  background: #eee5d6;

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);

  user-select: none;

  -webkit-user-select: none;

  -webkit-user-drag: none;
}

/*
 * CAPTION
 */

.baju-bodo-lightbox-caption {
  width: 100%;

  padding: 16px 8px 4px;

  text-align: center;

  box-sizing: border-box;
}

/*
 * NAMA PRODUK
 */

.baju-bodo-lightbox-title {
  margin: 0 0 5px;

  color: #fff;

  font-size: 1.05rem;

  font-weight: 700;

  line-height: 1.4;
}

/*
 * HARGA
 */

.baju-bodo-lightbox-price {
  margin: 0;

  color: #d8ba7a;

  font-size: 0.88rem;

  font-weight: 700;

  line-height: 1.4;
}

/*
 * TOMBOL CLOSE
 */

.baju-bodo-lightbox-close {
  position: absolute;

  top: -20px;

  right: -20px;

  z-index: 20;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 58px;

  height: 58px;

  padding: 0;

  border: 1px solid rgba(255, 255, 255, 0.35);

  border-radius: 50%;

  background: rgba(35, 30, 23, 0.96);

  color: #fff;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 32px;

  font-weight: 300;

  line-height: 1;

  cursor: pointer;

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

/*
 * HOVER CLOSE
 */

.baju-bodo-lightbox-close:hover {
  transform: scale(1.08);

  background: linear-gradient(135deg, #caa45f, #a87931);

  border-color: #d8ba7a;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42);
}

/*
 * FOCUS CLOSE
 */

.baju-bodo-lightbox-close:focus-visible {
  outline: 2px solid #d8ba7a;

  outline-offset: 4px;
}

/* =========================================================
   LIGHTBOX — NAVIGATION PREV / NEXT
   ========================================================= */

.baju-bodo-lightbox-prev,
.baju-bodo-lightbox-next {
  position: absolute;

  top: 50%;

  z-index: 20;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 52px;
  height: 52px;

  padding: 0;

  border: 1px solid rgba(255, 255, 255, 0.28);

  border-radius: 50%;

  background: rgba(35, 30, 23, 0.92);

  color: #fff;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 27px;

  font-weight: 300;

  line-height: 1;

  cursor: pointer;

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);

  transform: translateY(-50%);

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.baju-bodo-lightbox-prev {
  left: -28px;
}

.baju-bodo-lightbox-next {
  right: -28px;
}

/* =========================================================
   HOVER
   ========================================================= */

.baju-bodo-lightbox-prev:hover,
.baju-bodo-lightbox-next:hover {
  background: linear-gradient(135deg, #caa45f, #a87931);

  border-color: #d8ba7a;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42);

  transform: translateY(-50%) scale(1.06);
}

/* =========================================================
   FOCUS
   ========================================================= */

.baju-bodo-lightbox-prev:focus-visible,
.baju-bodo-lightbox-next:focus-visible {
  outline: 2px solid #d8ba7a;

  outline-offset: 4px;
}

/* =========================================================
   DISABLED
   ========================================================= */

.baju-bodo-lightbox-prev:disabled,
.baju-bodo-lightbox-next:disabled {
  opacity: 0.45;

  cursor: default;

  pointer-events: none;
}

/* =========================================================
   MOBILE LIGHTBOX
   ---------------------------------------------------------
   CATATAN:
   Responsive collection BELUM DIUBAH di bagian ini.
   Bagian ini hanya mempertahankan responsive lightbox
   yang sudah berjalan.
   ========================================================= */

@media (max-width: 640px) {
  .baju-bodo-lightbox {
    padding: 20px;
  }

  .baju-bodo-lightbox-content {
    width: min(94vw, 560px);

    max-height: calc(100vh - 40px);

    padding: 12px;

    border-radius: 20px;
  }

  .baju-bodo-lightbox-image {
    max-width: 100%;

    max-height: calc(100vh - 145px);

    border-radius: 13px;
  }

  .baju-bodo-lightbox-caption {
    padding-top: 13px;
  }

  .baju-bodo-lightbox-title {
    font-size: 0.98rem;
  }

  .baju-bodo-lightbox-price {
    font-size: 0.82rem;
  }

  .baju-bodo-lightbox-prev,
  .baju-bodo-lightbox-next {
    width: 46px;

    height: 46px;

    font-size: 23px;
  }

  .baju-bodo-lightbox-prev {
    left: -18px;
  }

  .baju-bodo-lightbox-next {
    right: -18px;
  }

  /*
   * CLOSE MOBILE
   */

  .baju-bodo-lightbox-close {
    top: -16px;

    right: -12px;

    width: 54px;

    height: 54px;

    font-size: 31px;
  }
}

/* =========================================================
   SMALL MOBILE LIGHTBOX
   ========================================================= */

@media (max-width: 380px) {
  .baju-bodo-lightbox {
    padding: 14px;
  }

  .baju-bodo-lightbox-content {
    padding: 9px;

    border-radius: 17px;
  }

  .baju-bodo-lightbox-image {
    max-height: calc(100vh - 125px);

    border-radius: 11px;
  }

  .baju-bodo-lightbox-close {
    top: -13px;

    right: -9px;

    width: 50px;

    height: 50px;

    font-size: 29px;
  }
}

/* =========================================================
   RESPONSIVE — TABLET
   641px — 1024px
   ========================================================= */

@media (min-width: 641px) and (max-width: 1024px) {
  /* =======================================================
     COLLECTION
     -------------------------------------------------------
     Tetap 3 card dalam satu viewport.
     ======================================================= */

  .baju-bodo-page-collection {
    padding: 80px 0 90px;

    overflow: hidden;
  }

  /* =======================================================
     SECTION HEADER
     ======================================================= */

  .baju-bodo-page-collection .section-header {
    width: 100%;

    max-width: 760px;

    margin-left: auto;

    margin-right: auto;

    margin-bottom: 28px;

    padding-left: 20px;

    padding-right: 20px;

    box-sizing: border-box;
  }

  .baju-bodo-page-collection .section-header h2 {
    font-size: clamp(2rem, 4.5vw, 2.7rem);
  }

  .baju-bodo-page-collection .section-header > p {
    max-width: 620px;

    font-size: 0.8rem;
  }

  /* =======================================================
     COLLECTION CONTAINER
     ======================================================= */

  .baju-bodo-page-collection > .container {
    width: calc(100% - 32px);

    max-width: 1180px;

    min-width: 0;

    margin-left: auto;

    margin-right: auto;

    padding: 0;

    box-sizing: border-box;
  }

  /* =======================================================
     SLIDER VIEWPORT
     ======================================================= */

  .baju-bodo-slider {
    position: relative;

    width: 100%;

    min-width: 0;

    margin: 0;

    padding: 0;

    overflow: hidden;

    box-sizing: border-box;
  }

  /* =======================================================
     TRACK
     ======================================================= */

  .baju-bodo-page-grid {
    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

    align-items: stretch;

    justify-content: flex-start;

    gap: 14px;

    width: max-content;

    min-width: 0;

    max-width: none;

    margin: 0;

    padding: 4px 12px 12px;

    box-sizing: border-box;

    transform: translate3d(0, 0, 0);

    will-change: transform;

    transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  /* =======================================================
     CARD
     -------------------------------------------------------
     3 card selalu memenuhi viewport slider.
     ======================================================= */

  .baju-bodo-page-card {
    position: relative;

    display: flex;

    flex: 0 0 calc((100vw - 32px - 24px - 28px) / 3);

    flex-direction: column;

    width: calc((100vw - 32px - 24px - 28px) / 3);

    min-width: calc((100vw - 32px - 24px - 28px) / 3);

    max-width: calc((100vw - 32px - 24px - 28px) / 3);

    height: auto;

    overflow: hidden;

    border: 1px solid #e8dfd2;

    border-radius: 15px;

    background: rgba(255, 255, 255, 0.98);

    box-shadow: 0 8px 28px rgba(73, 58, 38, 0.065);

    box-sizing: border-box;

    transition:
      transform 0.35s ease,
      box-shadow 0.35s ease,
      border-color 0.35s ease;
  }

  /* =======================================================
     CARD IMAGE
     ======================================================= */

  .baju-bodo-page-card-image {
    width: 100%;

    aspect-ratio: 16 / 10;

    overflow: hidden;
  }

  .baju-bodo-page-card-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;
  }

  /* =======================================================
     CARD CONTENT
     ======================================================= */

  .baju-bodo-page-card-content {
    padding: 15px 15px 17px;
  }

  .baju-bodo-page-card-content h3 {
    margin-bottom: 6px;

    font-size: 1rem;

    line-height: 1.3;
  }

  .baju-bodo-page-card-content > p {
    font-size: 0.72rem;

    line-height: 1.55;
  }

  /* =======================================================
     META
     ======================================================= */

  .baju-bodo-page-meta {
    gap: 7px;

    padding-top: 11px;
  }

  .baju-bodo-page-meta span {
    font-size: 0.68rem;
  }

  .baju-bodo-page-meta strong {
    font-size: 0.76rem;
  }

  /* =======================================================
     CARD ACTIONS
     ======================================================= */

  .baju-bodo-page-card-actions {
    grid-template-columns:
      68px
      minmax(0, 1fr);

    gap: 7px;

    margin-top: 11px;
  }

  .baju-bodo-page-view {
    width: 68px;

    min-width: 68px;

    min-height: 40px;

    padding: 8px 9px;

    font-size: 0.74rem;
  }

  .baju-bodo-page-consult {
    min-height: 40px;

    padding: 8px 8px;

    font-size: 0.7rem;
  }

  /* =======================================================
     CTA
     ======================================================= */

  .baju-bodo-page-cta {
    padding: 75px 0;
  }

  .baju-bodo-page-cta-content {
    width: calc(100% - 40px);

    max-width: 900px;

    margin-left: auto;

    margin-right: auto;

    padding: 36px 38px;

    gap: 30px;

    box-sizing: border-box;
  }

  .baju-bodo-page-cta h2 {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
  }

  .baju-bodo-page-cta-content > div > p:last-child {
    font-size: 0.84rem;
  }

  .baju-bodo-page-cta .button-whatsapp {
    min-height: 46px;

    padding: 11px 20px;

    font-size: 0.8rem;
  }
}

/* =========================================================
   RESPONSIVE — MOBILE / ANDROID
   max-width: 640px
   ========================================================= */

@media (max-width: 640px) {
  /* =======================================================
     COLLECTION
     ======================================================= */

  .baju-bodo-page-collection {
    padding: 75px 0 75px;

    overflow-x: hidden;
  }

  /* =======================================================
     SECTION HEADER
     ======================================================= */

  .baju-bodo-page-collection .section-header {
    width: 100%;

    max-width: 100%;

    margin-bottom: 25px;

    padding: 0 18px;

    box-sizing: border-box;
  }

  .baju-bodo-page-collection .section-header h2 {
    font-size: clamp(1.85rem, 8vw, 2.35rem);

    line-height: 1.15;
  }

  .baju-bodo-page-collection .section-header > p {
    max-width: 340px;

    margin-left: auto;

    margin-right: auto;

    font-size: 0.76rem;

    line-height: 1.65;
  }

  /* =======================================================
     COLLECTION CONTAINER
     ======================================================= */

  .baju-bodo-page-collection > .container {
    width: 100%;

    max-width: 100%;

    min-width: 0;

    margin-left: 0;

    margin-right: 0;

    padding: 0;

    box-sizing: border-box;
  }

  /* =======================================================
     SLIDER
     ======================================================= */

  .baju-bodo-slider {
    position: relative;

    width: 100%;

    max-width: 100%;

    min-width: 0;

    margin: 0;

    padding: 0;

    overflow: hidden;

    isolation: isolate;

    box-sizing: border-box;
  }

  /* =======================================================
     TRACK
     -------------------------------------------------------
     PENTING:
     28px padding kiri
     28px padding kanan
     
     Card:
     100vw - 56px
     
     Gap:
     16px
     
     Dengan kombinasi ini setiap card dapat berhenti
     tepat di tengah viewport.
     ======================================================= */

  .baju-bodo-page-grid {
    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

    align-items: stretch;

    justify-content: flex-start;

    gap: 16px;

    width: max-content;

    min-width: 0;

    max-width: none;

    margin: 0;

    padding: 4px 28px 12px;

    box-sizing: border-box;

    transform: translate3d(0, 0, 0);

    will-change: transform;

    transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  /* =======================================================
     CARD MOBILE
     ======================================================= */

  .baju-bodo-page-card {
    position: relative;

    display: flex;

    flex: 0 0 calc(100vw - 56px);

    flex-direction: column;

    width: calc(100vw - 56px);

    min-width: calc(100vw - 56px);

    max-width: calc(100vw - 56px);

    height: auto;

    overflow: hidden;

    border-radius: 17px;

    /*
     * Card aktif tetap tajam.
     * Tidak menggunakan filter blur pada card.
     */

    filter: none;

    opacity: 1;

    box-sizing: border-box;

    transition:
      transform 0.35s ease,
      box-shadow 0.35s ease,
      border-color 0.35s ease;
  }

  /* =======================================================
     HILANGKAN HOVER PADA TOUCH DEVICE
     ======================================================= */

  .baju-bodo-page-card:hover {
    transform: none;

    border-color: #e8dfd2;

    box-shadow: 0 8px 28px rgba(73, 58, 38, 0.065);
  }

  /* =======================================================
     IMAGE
     ======================================================= */

  .baju-bodo-page-card-image {
    width: 100%;

    aspect-ratio: 16 / 10;

    overflow: hidden;
  }

  .baju-bodo-page-card-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    transform: scale(1);

    transition:
      transform 0.45s ease,
      filter 0.35s ease;
  }

  .baju-bodo-page-card:hover .baju-bodo-page-card-image img {
    transform: scale(1);
  }

  /* =======================================================
     CONTENT
     ======================================================= */

  .baju-bodo-page-card-content {
    padding: 18px 18px 20px;
  }

  .baju-bodo-page-card-content h3 {
    margin-bottom: 7px;

    font-size: 1.08rem;

    line-height: 1.3;
  }

  .baju-bodo-page-card-content > p {
    font-size: 0.76rem;

    line-height: 1.6;
  }

  /* =======================================================
     META
     ======================================================= */

  .baju-bodo-page-meta {
    gap: 8px;

    padding-top: 13px;
  }

  .baju-bodo-page-meta span {
    font-size: 0.72rem;
  }

  .baju-bodo-page-meta strong {
    font-size: 0.78rem;
  }

  /* =======================================================
     BUTTON AREA
     ======================================================= */

  .baju-bodo-page-card-actions {
    grid-template-columns:
      78px
      minmax(0, 1fr);

    gap: 9px;

    margin-top: 13px;
  }

  .baju-bodo-page-view {
    width: 78px;

    min-width: 78px;

    min-height: 42px;

    padding: 8px 11px;

    font-size: 0.77rem;
  }

  .baju-bodo-page-consult {
    min-height: 42px;

    padding: 9px 10px;

    border-radius: 10px;

    font-size: 0.75rem;

    line-height: 1.2;
  }

  /* =======================================================
     SIDE DARK + BLUR
     -------------------------------------------------------
     Area kiri dan kanan viewport menjadi area fokus/transisi.
     ======================================================= */

  .baju-bodo-slider::before,
  .baju-bodo-slider::after {
    content: "";

    position: absolute;

    top: 0;

    bottom: 0;

    z-index: 20;

    width: 28px;

    pointer-events: none;

    background: rgba(8, 7, 5, 0.3);

    backdrop-filter: blur(8px) brightness(0.42);

    -webkit-backdrop-filter: blur(8px) brightness(0.42);

    box-sizing: border-box;
  }

  /* =======================================================
     LEFT SIDE
     ======================================================= */

  .baju-bodo-slider::before {
    left: 0;
  }

  /* =======================================================
     RIGHT SIDE
     ======================================================= */

  .baju-bodo-slider::after {
    right: 0;
  }

  /* =======================================================
     CTA MOBILE
     ======================================================= */

  .baju-bodo-page-cta {
    padding: 65px 0;
  }

  .baju-bodo-page-cta-content {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: calc(100% - 30px);

    max-width: 520px;

    margin-left: auto;

    margin-right: auto;

    padding: 30px 22px;

    gap: 24px;

    text-align: center;

    box-sizing: border-box;

    border-radius: 21px;
  }

  .baju-bodo-page-cta-content > div {
    width: 100%;

    min-width: 0;
  }

  .baju-bodo-page-cta .section-label {
    margin-bottom: 8px;

    font-size: 0.66rem;
  }

  .baju-bodo-page-cta h2 {
    margin-bottom: 10px;

    font-size: clamp(1.45rem, 7vw, 1.9rem);

    line-height: 1.25;
  }

  .baju-bodo-page-cta-content > div > p:last-child {
    max-width: 330px;

    margin-left: auto;

    margin-right: auto;

    font-size: 0.78rem;

    line-height: 1.7;
  }

  .baju-bodo-page-cta .button-whatsapp {
    min-height: 44px;

    padding: 10px 19px;

    font-size: 0.77rem;
  }
}

/* =========================================================
   RESPONSIVE — SMALL ANDROID
   max-width: 380px
   ========================================================= */

@media (max-width: 380px) {
  /* =======================================================
     COLLECTION
     ======================================================= */

  .baju-bodo-page-collection {
    padding: 65px 0 65px;
  }

  /* =======================================================
     HEADER
     ======================================================= */

  .baju-bodo-page-collection .section-header {
    padding: 0 15px;

    margin-bottom: 22px;
  }

  .baju-bodo-page-collection .section-header h2 {
    font-size: clamp(1.7rem, 8vw, 2rem);
  }

  .baju-bodo-page-collection .section-header > p {
    max-width: 300px;

    font-size: 0.72rem;
  }

  /* =======================================================
     TRACK
     ======================================================= */

  .baju-bodo-page-grid {
    gap: 14px;

    padding: 4px 24px 12px;
  }

  /* =======================================================
     CARD
     ======================================================= */

  .baju-bodo-page-card {
    flex-basis: calc(100vw - 48px);

    width: calc(100vw - 48px);

    min-width: calc(100vw - 48px);

    max-width: calc(100vw - 48px);

    border-radius: 16px;
  }

  /* =======================================================
     CONTENT
     ======================================================= */

  .baju-bodo-page-card-content {
    padding: 17px;
  }

  .baju-bodo-page-card-content h3 {
    font-size: 1rem;
  }

  .baju-bodo-page-card-content > p {
    font-size: 0.72rem;

    line-height: 1.58;
  }

  /* =======================================================
     META
     ======================================================= */

  .baju-bodo-page-meta {
    padding-top: 12px;
  }

  .baju-bodo-page-meta span {
    font-size: 0.69rem;
  }

  .baju-bodo-page-meta strong {
    font-size: 0.75rem;
  }

  /* =======================================================
     ACTIONS
     ======================================================= */

  .baju-bodo-page-card-actions {
    grid-template-columns:
      74px
      minmax(0, 1fr);

    gap: 8px;
  }

  .baju-bodo-page-view {
    width: 74px;

    min-width: 74px;

    min-height: 40px;

    padding: 8px 10px;

    font-size: 0.75rem;
  }

  .baju-bodo-page-consult {
    min-height: 40px;

    padding: 8px 9px;

    font-size: 0.71rem;
  }

  /* =======================================================
     SIDE EFFECT
     ======================================================= */

  .baju-bodo-slider::before,
  .baju-bodo-slider::after {
    width: 24px;
  }

  /* =======================================================
     CTA
     ======================================================= */

  .baju-bodo-page-cta {
    padding: 55px 0;
  }

  .baju-bodo-page-cta-content {
    width: calc(100% - 24px);

    padding: 27px 18px;

    gap: 21px;

    border-radius: 19px;
  }

  .baju-bodo-page-cta h2 {
    font-size: 1.5rem;
  }

  .baju-bodo-page-cta-content > div > p:last-child {
    max-width: 290px;

    font-size: 0.74rem;
  }

  .baju-bodo-page-cta .button-whatsapp {
    min-height: 42px;

    padding: 9px 17px;

    font-size: 0.74rem;
  }
}

/* =========================================================
   RESPONSIVE — VERY SMALL ANDROID
   max-width: 360px
   ========================================================= */

@media (max-width: 360px) {
  /* =======================================================
     TRACK
     ======================================================= */

  .baju-bodo-page-grid {
    gap: 12px;

    padding: 4px 20px 12px;
  }

  /* =======================================================
     CARD
     ======================================================= */

  .baju-bodo-page-card {
    flex-basis: calc(100vw - 40px);

    width: calc(100vw - 40px);

    min-width: calc(100vw - 40px);

    max-width: calc(100vw - 40px);
  }

  /* =======================================================
     CONTENT
     ======================================================= */

  .baju-bodo-page-card-content {
    padding: 16px;
  }

  .baju-bodo-page-card-content h3 {
    font-size: 0.96rem;
  }

  .baju-bodo-page-card-content > p {
    font-size: 0.7rem;
  }

  /* =======================================================
     META
     ======================================================= */

  .baju-bodo-page-meta span {
    font-size: 0.67rem;
  }

  .baju-bodo-page-meta strong {
    font-size: 0.73rem;
  }

  /* =======================================================
     ACTIONS
     ======================================================= */

  .baju-bodo-page-card-actions {
    grid-template-columns:
      70px
      minmax(0, 1fr);

    gap: 7px;
  }

  .baju-bodo-page-view {
    width: 70px;

    min-width: 70px;

    min-height: 39px;

    padding: 8px 9px;

    font-size: 0.73rem;
  }

  .baju-bodo-page-consult {
    min-height: 39px;

    padding: 8px;

    font-size: 0.69rem;
  }

  /* =======================================================
     SIDE EFFECT
     ======================================================= */

  .baju-bodo-slider::before,
  .baju-bodo-slider::after {
    width: 20px;
  }

  /* =======================================================
     CTA
     ======================================================= */

  .baju-bodo-page-cta-content {
    width: calc(100% - 20px);

    padding: 25px 15px;
  }

  .baju-bodo-page-cta h2 {
    font-size: 1.4rem;
  }

  .baju-bodo-page-cta-content > div > p:last-child {
    font-size: 0.71rem;
  }
}

/* =========================================================
   BENEFITS — MOBILE LEBAR
   481px — 640px
   ---------------------------------------------------------
   1 BARIS × 2 KOLOM
   ========================================================= */

@media (min-width: 481px) and (max-width: 640px) {
  .baju-bodo-page-benefits {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 14px;

    width: calc(100% - 30px);

    max-width: 520px;

    margin-left: auto;

    margin-right: auto;

    box-sizing: border-box;
  }

  /* =======================================================
     BENEFIT CARD
     ======================================================= */

  .baju-bodo-page-benefit {
    width: 100%;

    min-width: 0;

    padding: 24px 16px;

    border-radius: 17px;

    box-sizing: border-box;
  }

  /* =======================================================
     ICON
     ======================================================= */

  .baju-bodo-page-benefit-icon {
    width: 42px;

    height: 42px;

    margin-bottom: 14px;
  }

  /* =======================================================
     TITLE
     ======================================================= */

  .baju-bodo-page-benefit h3 {
    margin-bottom: 8px;

    font-size: 0.96rem;

    line-height: 1.35;
  }

  /* =======================================================
     DESCRIPTION
     ======================================================= */

  .baju-bodo-page-benefit p {
    font-size: 0.75rem;

    line-height: 1.65;
  }

  /* =======================================================
     NON-TOUCH HOVER
     ======================================================= */

  .baju-bodo-page-benefit:hover {
    transform: translateY(-4px);
  }
}

/* =========================================================
   BENEFITS — MOBILE KECIL
   max-width: 480px
   ---------------------------------------------------------
   1 BARIS × 1 KOLOM
   ========================================================= */

@media (max-width: 480px) {
  .baju-bodo-page-benefits {
    display: grid;

    grid-template-columns: minmax(0, 1fr);

    gap: 14px;

    width: calc(100% - 30px);

    max-width: 360px;

    margin-left: auto;

    margin-right: auto;

    box-sizing: border-box;
  }

  /* =======================================================
     BENEFIT CARD
     ======================================================= */

  .baju-bodo-page-benefit {
    width: 100%;

    min-width: 0;

    padding: 25px 20px;

    border-radius: 18px;

    box-sizing: border-box;
  }

  /* =======================================================
     ICON
     ======================================================= */

  .baju-bodo-page-benefit-icon {
    width: 44px;

    height: 44px;

    margin-bottom: 15px;
  }

  /* =======================================================
     TITLE
     ======================================================= */

  .baju-bodo-page-benefit h3 {
    margin-bottom: 8px;

    font-size: 1rem;

    line-height: 1.35;
  }

  /* =======================================================
     DESCRIPTION
     ======================================================= */

  .baju-bodo-page-benefit p {
    font-size: 0.78rem;

    line-height: 1.7;
  }

  /* =======================================================
     HOVER
     ======================================================= */

  .baju-bodo-page-benefit:hover {
    transform: translateY(-3px);
  }
}

/* =========================================================
   BENEFITS — ANDROID SANGAT KECIL
   max-width: 360px
   ========================================================= */

@media (max-width: 360px) {
  .baju-bodo-page-benefits {
    width: calc(100% - 24px);

    max-width: 330px;

    gap: 12px;
  }

  .baju-bodo-page-benefit {
    padding: 22px 17px;

    border-radius: 17px;
  }

  .baju-bodo-page-benefit-icon {
    width: 42px;

    height: 42px;

    margin-bottom: 13px;
  }

  .baju-bodo-page-benefit h3 {
    font-size: 0.95rem;
  }

  .baju-bodo-page-benefit p {
    font-size: 0.74rem;

    line-height: 1.65;
  }
}