:root {
  --showroom-blue: #1f61e8;
  --showroom-blue-dark: #153f95;
  --showroom-navy: #07162e;
  --showroom-ink: #10192b;
  --showroom-paper: #f3f7fd;
  --showroom-line: #cfdbed;
  --showroom-muted: #52627a;
  --showroom-highlight: #8bb9ff;
  --showroom-focus: #60a5fa;
  --showroom-whatsapp: #25d366;
  --showroom-white: #ffffff;
  --showroom-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --showroom-container: 1280px;
  --showroom-nav: 1240px;
  --showroom-gutter: clamp(16px, 3vw, 32px);
  --showroom-section: clamp(5.5rem, 9vw, 9rem);
}

html {
  scrollbar-color: var(--showroom-blue) var(--showroom-paper);
  scroll-padding-top: 112px;
}

body.showroom-page {
  color: var(--showroom-ink);
  background: var(--showroom-white);
  font-family: "Plus Jakarta Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.showroom-page ::selection {
  color: var(--showroom-white);
  background: var(--showroom-blue);
}

body.showroom-page :focus-visible {
  outline: 3px solid var(--showroom-focus);
  outline-offset: 3px;
}

body.showroom-page a,
body.showroom-page button {
  -webkit-tap-highlight-color: transparent;
}

body.showroom-page a:active,
body.showroom-page button:active {
  transform: scale(0.97);
}

body.showroom-page :where(p, li) {
  text-wrap: pretty;
}

body.showroom-page :where(h1, h2, h3) {
  color: var(--showroom-ink);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

body.showroom-page :where(img, video) {
  max-width: 100%;
}

body.showroom-page [class*="rounded-[2rem]"],
body.showroom-page [class*="rounded-[2.5rem]"],
body.showroom-page [class*="rounded-[3rem]"],
body.showroom-page [class*="rounded-[24px]"],
body.showroom-page [class*="rounded-[32px]"] {
  border-radius: 16px !important;
}

body.showroom-page [class*="bg-gradient-to-r"][class*="text-transparent"],
body.showroom-page [class*="bg-gradient-to-br"][class*="text-transparent"] {
  color: var(--showroom-blue) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Shared floating navigation */
body.showroom-page #navbar {
  top: 18px;
  left: 50%;
  width: min(calc(100% - 32px), var(--showroom-nav));
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 18px;
  background: rgba(7, 22, 46, 0.9) !important;
  box-shadow: 0 18px 48px rgba(2, 11, 28, 0.24) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: visible;
  transition: background-color 220ms var(--showroom-ease), box-shadow 220ms var(--showroom-ease), border-color 220ms var(--showroom-ease) !important;
}

body.showroom-page #navbar > div {
  max-width: none;
}

body.showroom-page #navbar > div > div {
  height: 72px;
}

body.showroom-page #navbar img {
  max-height: 40px;
  filter: brightness(0) invert(1);
}

body.showroom-page #navbar #nav-logo-white {
  display: block !important;
  filter: none;
}

body.showroom-page #navbar #nav-logo-dark {
  display: none !important;
}

body.showroom-page #navbar #nav-logo-dark:only-child {
  display: block !important;
}

body.showroom-page #navbar :where(a, button) {
  color: var(--showroom-white) !important;
  transition: color 160ms ease, background-color 160ms ease, transform 140ms var(--showroom-ease), border-color 160ms ease !important;
}

body.showroom-page #navbar :where(a, button)[class*="text-blue"] {
  color: var(--showroom-highlight) !important;
}

body.showroom-page #navbar #wa-button,
body.showroom-page #navbar a[href*="whatsapp"] {
  color: var(--showroom-white) !important;
  background: var(--showroom-whatsapp) !important;
  border-color: transparent !important;
  opacity: 1 !important;
}

body.showroom-page #navbar #mobile-toggle,
body.showroom-page #navbar .md\:hidden > button {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--showroom-white) !important;
}

body.showroom-page #navbar #btn-kembali-circle {
  color: var(--showroom-white) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
}

body.showroom-page #navbar > div:first-child .absolute {
  background: var(--showroom-white) !important;
}

body.showroom-page #navbar > div:first-child .absolute :where(a, button, span) {
  color: var(--showroom-ink) !important;
}

body.showroom-page #navbar > div:first-child .absolute :where(a, button, span)[class*="text-blue"] {
  color: var(--showroom-blue) !important;
}

body.showroom-page #mobile-menu-container {
  top: 82px;
  border: 1px solid var(--showroom-line);
  border-radius: 16px;
  background: var(--showroom-white);
  box-shadow: 0 24px 48px rgba(7, 22, 46, 0.16);
}

body.showroom-page #mobile-menu-container :where(a, button, span) {
  color: var(--showroom-ink) !important;
}

body.showroom-page #mobile-menu-container :where(a, button, span)[class*="text-blue"] {
  color: var(--showroom-blue) !important;
}

body.showroom-page #mobile-menu-container a[href*="whatsapp"] {
  color: var(--showroom-white) !important;
}

/* Scrolled navigation state: the shell turns light once content takes over. */
body.showroom-page #navbar[data-showroom-scrolled="true"] {
  border-color: rgba(207, 219, 237, 0.9) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 12px 36px rgba(14, 38, 78, 0.1) !important;
}

body.showroom-page #navbar[data-showroom-scrolled="true"] img {
  filter: none;
}

body.showroom-page #navbar[data-showroom-scrolled="true"] #nav-logo-white {
  display: none !important;
}

body.showroom-page #navbar[data-showroom-scrolled="true"] #nav-logo-dark,
body.showroom-page #navbar[data-showroom-scrolled="true"] #nav-logo-dark:only-child {
  display: block !important;
}

body.showroom-page #navbar[data-showroom-scrolled="true"] :where(a, button) {
  color: var(--showroom-ink) !important;
}

body.showroom-page #navbar[data-showroom-scrolled="true"] :where(a, button)[class*="text-blue"] {
  color: var(--showroom-blue) !important;
}

body.showroom-page #navbar[data-showroom-scrolled="true"] #btn-kembali-circle {
  color: var(--showroom-ink) !important;
  background: var(--showroom-paper) !important;
}

body.showroom-page #navbar[data-showroom-scrolled="true"] #mobile-toggle,
body.showroom-page #navbar[data-showroom-scrolled="true"] .md\:hidden > button {
  color: var(--showroom-ink) !important;
}

body.showroom-page #navbar[data-showroom-scrolled="true"] #wa-button,
body.showroom-page #navbar[data-showroom-scrolled="true"] a[href*="whatsapp"] {
  color: var(--showroom-white) !important;
}

/* Shared buttons and media controls */
body.showroom-page :where(a, button)[class*="bg-yellow-400"],
body.showroom-page :where(a, button)[class*="bg-yellow-500"] {
  color: var(--showroom-white) !important;
  background: var(--showroom-blue) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  transition: background-color 160ms ease, color 160ms ease, transform 140ms var(--showroom-ease), box-shadow 160ms ease !important;
}

body.showroom-page :where(a, button)[class*="bg-blue-600"] {
  border-radius: 14px;
  transition: background-color 160ms ease, color 160ms ease, transform 140ms var(--showroom-ease), box-shadow 160ms ease !important;
}

body.showroom-page .color-btn {
  transition: border-color 160ms ease, transform 140ms var(--showroom-ease) !important;
}

body.showroom-page .tab-link {
  min-height: 44px;
  transition: color 160ms ease, border-color 160ms ease !important;
}

/* Catalog and accessory listing */
body.showroom-catalog > section:first-of-type {
  min-height: 470px;
  padding: 160px var(--showroom-gutter) 96px !important;
  align-items: flex-start !important;
  justify-content: flex-end;
  text-align: left !important;
  background: var(--showroom-paper) !important;
}

body.showroom-catalog > section:first-of-type > .absolute {
  display: none;
}

body.showroom-catalog > section:first-of-type > div:last-child {
  width: min(100%, var(--showroom-container));
  max-width: var(--showroom-container) !important;
  margin-inline: auto;
  padding-inline: 0 !important;
  text-align: left !important;
}

body.showroom-catalog > section:first-of-type > div:last-child > div:first-child {
  margin-bottom: 24px !important;
}

body.showroom-catalog > section:first-of-type span[class*="rounded-full"] {
  padding: 0 !important;
  color: var(--showroom-blue) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  letter-spacing: 0.12em !important;
}

body.showroom-catalog > section:first-of-type h1 {
  max-width: 920px;
  margin-bottom: 24px !important;
  font-size: clamp(3.25rem, 7vw, 6rem) !important;
  font-weight: 800 !important;
  line-height: 0.98 !important;
}

body.showroom-catalog > section:first-of-type p {
  max-width: 58ch !important;
  margin: 0 !important;
  color: var(--showroom-muted) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
}

body.showroom-catalog > section:nth-of-type(2) {
  padding: var(--showroom-section) var(--showroom-gutter) !important;
  background: var(--showroom-white) !important;
}

body.showroom-catalog > section:nth-of-type(2) > div {
  max-width: var(--showroom-container) !important;
  padding-inline: 0 !important;
}

body.showroom-catalog > section:nth-of-type(2) a[class*="aspect-[4/3]"],
body.showroom-catalog > section:nth-of-type(2) a[class*="h-full"] {
  border: 1px solid var(--showroom-line);
  border-radius: 14px !important;
  box-shadow: none !important;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms var(--showroom-ease) !important;
}

body.showroom-catalog > section:nth-of-type(2) a img {
  transition: transform 240ms var(--showroom-ease) !important;
}

body.showroom-catalog > section:nth-of-type(2) a h3 {
  color: var(--showroom-white);
  letter-spacing: -0.03em;
}

/* Contact */
body.showroom-contact main {
  padding: 164px var(--showroom-gutter) var(--showroom-section) !important;
  background: var(--showroom-paper);
}

body.showroom-contact main > .absolute {
  display: none;
}

body.showroom-contact main > .text-center.max-w-4xl {
  max-width: var(--showroom-container) !important;
  margin-bottom: 64px !important;
  text-align: left !important;
}

body.showroom-contact main > .text-center.max-w-4xl > span {
  display: none;
}

body.showroom-contact main h1 {
  max-width: 900px;
  margin-bottom: 24px !important;
  font-size: clamp(3.25rem, 7vw, 6rem) !important;
  font-weight: 800 !important;
  line-height: 0.98 !important;
}

body.showroom-contact main h1 span {
  color: var(--showroom-blue) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

body.showroom-contact main > .text-center.max-w-4xl p {
  max-width: 58ch !important;
  margin: 0 !important;
  color: var(--showroom-muted) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
}

body.showroom-contact main > .max-w-7xl {
  max-width: var(--showroom-container) !important;
}

body.showroom-contact main > .max-w-7xl .grid > a {
  padding: 28px !important;
  border: 1px solid var(--showroom-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  background: var(--showroom-white) !important;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms var(--showroom-ease) !important;
}

body.showroom-contact main > .max-w-7xl .grid > a > div:first-child {
  padding: 0 !important;
}

body.showroom-contact main > .max-w-7xl .grid > a > div:last-child {
  margin: 28px 0 0 !important;
  padding: 20px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--showroom-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.showroom-contact #peta-lokasi {
  padding-top: 24px !important;
  margin-bottom: 0 !important;
}

body.showroom-contact #peta-lokasi > .text-center {
  margin-bottom: 32px;
  text-align: left;
}

body.showroom-contact #peta-lokasi iframe,
body.showroom-contact #peta-lokasi .rounded-\[2\.5rem\] {
  border-radius: 14px !important;
  box-shadow: none !important;
}

/* About */
body.showroom-about > section {
  padding-top: var(--showroom-section) !important;
  padding-bottom: var(--showroom-section) !important;
}

body.showroom-about > section:first-of-type {
  min-height: 760px;
  padding-top: 140px !important;
}

body.showroom-about > section:first-of-type > div:last-child > div {
  gap: 32px !important;
  text-align: left !important;
}

body.showroom-about > section:first-of-type :where(h2, p) {
  color: var(--showroom-white) !important;
}

body.showroom-about > section:nth-of-type(2),
body.showroom-about > section:nth-of-type(3),
body.showroom-about > section:nth-of-type(4) {
  background: var(--showroom-paper) !important;
}

body.showroom-about > section:nth-of-type(2) h2,
body.showroom-about > section:nth-of-type(4) h2 {
  font-size: clamp(2.8rem, 5.3vw, 5.4rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.035em !important;
}

body.showroom-about > section:nth-of-type(2) img,
body.showroom-about > section:nth-of-type(4) img {
  border-radius: 14px;
}

body.showroom-about > section:nth-of-type(3) {
  margin-top: 0 !important;
}

body.showroom-about > section:nth-of-type(3) > div:last-child {
  max-width: var(--showroom-container);
  margin-inline: auto;
  border: 1px solid var(--showroom-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

body.showroom-about > section:last-of-type h2 {
  color: var(--showroom-white);
}

/* Product and accessory detail pages */
body.showroom-detail > section {
  padding-top: clamp(5rem, 8vw, 8rem) !important;
  padding-bottom: clamp(5rem, 8vw, 8rem) !important;
}

body.showroom-detail > section:first-of-type {
  padding-top: 132px !important;
  background: var(--showroom-paper) !important;
}

body.showroom-detail > section:nth-of-type(even) {
  background-color: var(--showroom-white) !important;
}

body.showroom-detail > section:nth-of-type(odd):not(:first-of-type) {
  background-color: var(--showroom-paper) !important;
}

body.showroom-detail > section > .max-w-7xl,
body.showroom-detail > section > div > .max-w-7xl {
  max-width: var(--showroom-container) !important;
}

body.showroom-detail > section:first-of-type h1 {
  max-width: 13ch;
  font-size: clamp(2.8rem, 5.3vw, 5.4rem) !important;
  font-weight: 800 !important;
  line-height: 0.96 !important;
}

body.showroom-detail > section:first-of-type p {
  color: var(--showroom-muted) !important;
  font-weight: 400 !important;
}

body.showroom-detail > section:first-of-type [class*="rounded-[2.5rem]"],
body.showroom-detail > section:first-of-type [class*="rounded-[2rem]"] {
  border-radius: 14px !important;
}

@media (max-width: 767px) {
  body.showroom-detail:not(.showroom-detail--cinematic) > section:first-of-type .grid > div:nth-child(2) > div:first-child {
    order: 2 !important;
    margin-top: 12px;
  }

  body.showroom-detail:not(.showroom-detail--cinematic) > section:first-of-type .grid > div:nth-child(2) > div:nth-child(2) {
    order: 1 !important;
  }
}

body.showroom-detail .glass-card,
body.showroom-detail .tab-pane [class*="rounded-2xl"] {
  border: 0 !important;
  border-top: 1px solid var(--showroom-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.showroom-detail .tab-pane [class*="rounded-2xl"] {
  padding: 20px 0 !important;
}

body.showroom-detail #discovery .video-container,
body.showroom-detail #testimoni [class*="rounded-"] {
  border-radius: 14px !important;
}

body.showroom-detail #discovery .video-container {
  border-width: 1px !important;
  border-color: var(--showroom-line) !important;
  box-shadow: none !important;
}

body.showroom-detail section.no-anim {
  min-height: 540px;
  background-attachment: scroll !important;
}

body.showroom-detail section.no-anim h2 {
  font-size: clamp(2.8rem, 5.3vw, 5.4rem) !important;
  line-height: 0.96 !important;
}

/* Cinematic detail hero keeps its source media */
body.showroom-detail--cinematic > section:first-of-type {
  min-height: 90svh;
  padding-top: 154px !important;
  background: var(--showroom-navy) !important;
}

body.showroom-detail--cinematic > section:first-of-type h1,
body.showroom-detail--cinematic > section:first-of-type p {
  color: var(--showroom-white) !important;
}

body.showroom-detail--cinematic > section:first-of-type h1 span {
  color: var(--showroom-highlight) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

/* Sponsorship proof page */
body.showroom-proof > section:first-of-type {
  padding: 156px var(--showroom-gutter) var(--showroom-section) !important;
  background: var(--showroom-paper) !important;
}

body.showroom-proof > section:first-of-type > .absolute {
  display: none;
}

body.showroom-proof > section:first-of-type > .max-w-7xl {
  max-width: var(--showroom-container) !important;
  padding-inline: 0 !important;
}

body.showroom-proof > section:first-of-type > .max-w-7xl > .text-center {
  max-width: 760px;
  margin: 0 0 72px !important;
  text-align: left;
}

body.showroom-proof > section:first-of-type h2 {
  font-size: clamp(2.8rem, 5.3vw, 5.4rem) !important;
  line-height: 0.98 !important;
}

body.showroom-proof #photo-slider > div,
body.showroom-proof #discovery .video-container {
  border-width: 1px !important;
  border-color: var(--showroom-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

/* Shared footer */
body.showroom-page > footer {
  margin-top: 0 !important;
  padding: 88px var(--showroom-gutter) 40px !important;
  color: rgba(255, 255, 255, 0.72) !important;
  background: var(--showroom-navy) !important;
  border-top: 0 !important;
}

body.showroom-page > footer > .absolute {
  display: none;
}

body.showroom-page > footer > div {
  max-width: var(--showroom-container) !important;
  padding-inline: 0 !important;
}

body.showroom-page > footer img {
  filter: brightness(0) invert(1);
}

body.showroom-page > footer :where(h3, p, span, a) {
  color: inherit !important;
}

body.showroom-page > footer h3,
body.showroom-page > footer p[class*="font-bold"],
body.showroom-page > footer a[class*="font-bold"] {
  color: var(--showroom-white) !important;
}

body.showroom-page > footer [class*="bg-blue-50"],
body.showroom-page > footer [class*="bg-slate-50"] {
  color: var(--showroom-white) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

body.showroom-page > footer [class*="border-t"] {
  border-color: rgba(255, 255, 255, 0.14) !important;
}

body.showroom-page > footer svg {
  color: var(--showroom-white) !important;
}

@media (hover: hover) and (pointer: fine) {
  body.showroom-page #navbar :where(a, button):hover {
    color: var(--showroom-highlight) !important;
  }

  body.showroom-page #navbar > div:first-child .absolute :where(a, button):hover,
  body.showroom-page #mobile-menu-container :where(a, button):hover {
    color: var(--showroom-blue) !important;
  }

  body.showroom-page #navbar[data-showroom-scrolled="true"] :where(a, button):hover {
    color: var(--showroom-blue) !important;
  }

  body.showroom-page #navbar[data-showroom-scrolled="true"] #wa-button:hover,
  body.showroom-page #navbar[data-showroom-scrolled="true"] a[href*="whatsapp"]:hover {
    color: var(--showroom-white) !important;
  }

  body.showroom-page :where(a, button)[class*="bg-yellow-400"]:hover,
  body.showroom-page :where(a, button)[class*="bg-blue-600"]:hover {
    background: var(--showroom-blue-dark) !important;
  }

  body.showroom-catalog > section:nth-of-type(2) a:hover {
    border-color: var(--showroom-highlight);
    box-shadow: 0 20px 48px rgba(19, 58, 120, 0.12) !important;
    transform: translateY(-3px);
  }

  body.showroom-catalog > section:nth-of-type(2) a:hover img {
    transform: scale(1.035) !important;
  }

  body.showroom-contact main > .max-w-7xl .grid > a:hover {
    border-color: var(--showroom-highlight) !important;
    box-shadow: 0 20px 48px rgba(19, 58, 120, 0.1) !important;
    transform: translateY(-3px) !important;
  }
}

@media (max-width: 1023px) {
  body.showroom-page #navbar {
    top: 12px;
    width: calc(100% - 24px);
  }

  body.showroom-page #navbar > div > div {
    height: 64px;
  }

  body.showroom-page #navbar img {
    max-height: 34px;
  }

  body.showroom-page #mobile-menu-container {
    top: 72px;
  }

  body.showroom-about > section:first-of-type {
    min-height: 680px;
  }

  body.showroom-about > section:first-of-type > div:last-child > div {
    text-align: left !important;
  }
}

@media (max-width: 767px) {
  html {
    scroll-padding-top: 92px;
  }

  body.showroom-catalog > section:first-of-type,
  body.showroom-contact main,
  body.showroom-proof > section:first-of-type {
    padding-top: 128px !important;
  }

  body.showroom-catalog > section:first-of-type {
    min-height: 420px;
    padding-bottom: 64px !important;
  }

  body.showroom-contact main > .text-center.max-w-4xl {
    margin-bottom: 44px !important;
  }

  body.showroom-contact main > .max-w-7xl .grid > a {
    padding: 22px !important;
  }

  body.showroom-contact #peta-lokasi iframe,
  body.showroom-contact #peta-lokasi .h-\[450px\] {
    height: 360px !important;
  }

  body.showroom-detail > section:first-of-type {
    padding-top: 112px !important;
  }

  body.showroom-detail--cinematic > section:first-of-type {
    min-height: 84svh;
    padding-top: 128px !important;
  }

  body.showroom-about > section:first-of-type {
    min-height: 720px;
    padding-top: 116px !important;
  }

  body.showroom-page > footer {
    padding-top: 64px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  body.showroom-page *,
  body.showroom-page *::before,
  body.showroom-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  body.showroom-page .reveal-item {
    opacity: 1 !important;
    transform: none !important;
  }
}