.hlx-page{
  /* warna */
  --ink: #0f1f24;
  --ink-soft: #1b3239;
  --ink-800: #23414a;
  --gold: #c5a059;
  --gold-dark: #997b36;
  --gold-deep: #7a6128;
  --gold-light: #f9f5eb;
  --gold-tint: #fbf8f1;
  --cream: #faf8f5;
  --cream-2: #f4f0e8;
  --white: #fff;
  /* Netral diturunkan dari rona ink (#0f1f24), bukan abu netral. Rasio
     terverifikasi: --text 9.15:1 di atas #fff (8.63:1 di atas #faf8f5),
     --muted 5.43:1 (5.12:1), --text-strong 13.60:1 (12.83:1). */
  --text: #3f4a4c;
  --text-strong: #233034;
  --muted: #5f6c71;
  --line: rgba(15, 31, 36, 0.1);
  --line-soft: rgba(15, 31, 36, 0.06);
  --line-gold: rgba(197, 160, 89, 0.3);
  --ok: #1b6b4f;
  --ok-soft: #eaf5f0;
  --wa: #12826a;
  --wa-dark: #0d6455;
  --danger: #a4341f;
  --focus: #0b6ea8;

  /* tipografi */
  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Lato", "Segoe UI", system-ui, sans-serif;
  --fs-display: clamp(2.35rem, 1.45rem + 4.1vw, 4.5rem);
  --fs-h1: clamp(2.05rem, 1.4rem + 2.9vw, 3.35rem);
  --fs-h2: clamp(1.7rem, 1.25rem + 1.9vw, 2.55rem);
  --fs-h3: clamp(1.22rem, 1.08rem + 0.6vw, 1.55rem);
  --fs-h4: 1.0625rem;
  --fs-lead: clamp(1.03rem, 0.98rem + 0.35vw, 1.22rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  /* 0.6875rem = 11px pada root 16px: batas bawah label mikro yang terbaca. */
  --fs-micro: 0.6875rem;

  /* ruang */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --section-y: clamp(3.5rem, 2.4rem + 4.4vw, 7rem);
  --container: 1200px;
  --container-narrow: 780px;
  --container-wide: 1360px;

  /* bentuk — tiga tingkat, bukan satu radius untuk semua:
     --r-info (6px)      data, tabel, kartu informasi
     --r-editorial (2px) gambar & figure, dipisahkan garis rambut
     --r-pill            hanya untuk aksi (.btn) */
  --r-info: 6px;
  --r-editorial: 2px;
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* bayangan */
  --shadow-xs: 0 1px 2px rgba(15, 31, 36, 0.05);
  --shadow-sm: 0 2px 6px rgba(15, 31, 36, 0.05), 0 1px 2px rgba(15, 31, 36, 0.04);
  --shadow-md: 0 14px 36px rgba(15, 31, 36, 0.07), 0 2px 6px rgba(15, 31, 36, 0.04);
  --shadow-lg: 0 30px 70px rgba(15, 31, 36, 0.12), 0 6px 16px rgba(15, 31, 36, 0.05);
  --shadow-gold: 0 12px 30px rgba(197, 160, 89, 0.22);

  /* gerak */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 160ms;
  --t: 280ms;
  --t-slow: 520ms;

  --header-h: 72px;
}.hlx-page *, .hlx-page *::before, .hlx-page *::after{
  box-sizing: border-box;
}.hlx-page{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}.hlx-page{
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}.hlx-page.is-locked{
  overflow: hidden;
}.hlx-page img, .hlx-page svg, .hlx-page video{
  max-width: 100%;
  height: auto;
  display: block;
}.hlx-page img{
  background-color: var(--cream-2);
}.hlx-page a{
  color: var(--ink);
  text-decoration-color: var(--line-gold);
  text-underline-offset: 3px;
}.hlx-page a:hover{
  /* gold-dark hanya 4.01:1 di atas putih; aksen emas pindah ke garis bawah
     supaya rasio teks tetap 16.91:1. */
  color: var(--ink);
  text-decoration-color: var(--gold);
}.hlx-page .prose a, .hlx-page .faq__a-inner a, .hlx-page .note a, .hlx-page .claim-disclaimer a, .hlx-page .summary-box a, .hlx-page .toc a, .hlx-page .ing-list a, .hlx-page .field__hint a, .hlx-page .footer-contact a, .hlx-page .footer-col a, .hlx-page .footer-social a, .hlx-page .testi__meta a, .hlx-page p a:not(.btn):not(.link-arrow), .hlx-page li a:not(.btn):not(.link-arrow), .hlx-page dd a:not(.btn), .hlx-page blockquote a{
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
}.hlx-page .primary-nav a, .hlx-page .submenu a, .hlx-page .crumbs a, .hlx-page .link-arrow, .hlx-page .prod-card__title a, .hlx-page .prod-card__media, .hlx-page .pdp__thumbs a, .hlx-page .gallery a, .hlx-page .header-link{
  text-decoration: none;
}.hlx-page .prose a:hover, .hlx-page .faq__a-inner a:hover, .hlx-page .footer-contact a:hover{
  text-decoration-thickness: 2px;
}.hlx-page button{
  font: inherit;
  color: inherit;
}.hlx-page h1, .hlx-page h2, .hlx-page h3, .hlx-page h4, .hlx-page h5, .hlx-page h6{
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.015em;
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}.hlx-page h1{
  font-size: var(--fs-h1);
}.hlx-page h2{
  font-size: var(--fs-h2);
}.hlx-page h3{
  font-size: var(--fs-h3);
  line-height: 1.25;
}.hlx-page h4{
  font-size: var(--fs-h4);
  line-height: 1.35;
  letter-spacing: -0.005em;
}.hlx-page p{
  margin: 0 0 var(--sp-4);
}.hlx-page p:last-child{
  margin-bottom: 0;
}.hlx-page ul, .hlx-page ol{
  margin: 0 0 var(--sp-4);
  padding-left: 1.15em;
}.hlx-page li + li{
  margin-top: var(--sp-2);
}.hlx-page strong{
  color: var(--text-strong);
  font-weight: 700;
}.hlx-page .announce strong, .hlx-page .hero--dark strong, .hlx-page .section--ink strong, .hlx-page .card--ink strong, .hlx-page .guarantee strong, .hlx-page .cta-band strong, .hlx-page .site-footer strong, .hlx-page .note--ink strong, .hlx-page .page-hero--dark strong{
  color: var(--white);
}.hlx-page em{
  font-style: italic;
}.hlx-page small{
  font-size: var(--fs-xs);
}.hlx-page hr{
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--sp-7) 0;
}.hlx-page blockquote{
  margin: 0;
}.hlx-page :focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}.hlx-page ::selection{
  background: var(--ink);
  color: var(--white);
}.hlx-page .eyebrow{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 var(--sp-4);
}.hlx-page .eyebrow::before{
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gold);
  opacity: 0.4;
}.hlx-page .eyebrow--plain::before{
  display: none;
}.hlx-page .eyebrow--light{
  color: var(--gold);
}.hlx-page .section--ink .eyebrow, .hlx-page .hero--dark .eyebrow, .hlx-page .site-footer .eyebrow, .hlx-page .guarantee .eyebrow, .hlx-page .cta-band .eyebrow, .hlx-page .stats-band .eyebrow, .hlx-page .prod-card--feature .eyebrow{
  color: var(--gold);
}.hlx-page .lead{
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--text);
  max-width: 62ch;
}.hlx-page .lead--wide{
  max-width: none;
}.hlx-page .muted{
  color: var(--muted);
}.hlx-page .mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  letter-spacing: 0.01em;
}.hlx-page .nowrap{
  white-space: nowrap;
}.hlx-page .text-center{
  text-align: center;
}.hlx-page .text-balance{
  text-wrap: balance;
}.hlx-page .section-head{
  max-width: 68ch;
  margin-bottom: var(--sp-8);
}.hlx-page .section-head--center{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}.hlx-page .section-head__sub{
  margin-top: var(--sp-3);
  color: var(--muted);
  font-size: var(--fs-lead);
}.hlx-page .container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2rem);
}.hlx-page .container--narrow{
  max-width: var(--container-narrow);
}.hlx-page .container--wide{
  max-width: var(--container-wide);
}.hlx-page .section{
  padding-block: var(--section-y);
  position: relative;
}.hlx-page .section--tight{
  padding-block: clamp(2.25rem, 1.6rem + 2.4vw, 3.75rem);
}.hlx-page .section--cream{
  background: var(--cream);
}.hlx-page .section--cream-2{
  background: var(--cream-2);
}.hlx-page .section--gold-tint{
  background: linear-gradient(180deg, var(--white) 0%, var(--gold-tint) 55%, var(--white) 100%);
}.hlx-page .section--ink{
  background: var(--ink);
  color: rgba(255, 255, 255, 0.78);
}.hlx-page .section--ink h1, .hlx-page .section--ink h2, .hlx-page .section--ink h3, .hlx-page .section--ink h4{
  color: var(--white);
}.hlx-page .section--ink .lead, .hlx-page .section--ink .section-head__sub{
  color: rgba(255, 255, 255, 0.72);
}.hlx-page .section--ink a:not(.btn){
  color: var(--gold);
}.hlx-page .section--edge-top{
  border-top: 1px solid var(--line-soft);
}.hlx-page .grid{
  display: grid;
  gap: clamp(1.25rem, 2.4vw, 2rem);
}.hlx-page .grid--2{
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}.hlx-page .grid--3{
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}.hlx-page .grid--4{
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}.hlx-page .grid--sidebar{
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
  align-items: start;
}.hlx-page .split{
  display: grid;
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}.hlx-page .split--media-first > .split__media{
  order: -1;
}.hlx-page .stack > * + *{
  margin-top: var(--sp-5);
}.hlx-page .stack--sm > * + *{
  margin-top: var(--sp-3);
}.hlx-page .stack--lg > * + *{
  margin-top: var(--sp-7);
}.hlx-page .divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-gold), transparent);
  border: 0;
  margin-block: var(--sp-8);
}.hlx-page .pill-row{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  padding: 0;
  margin: 0;
  list-style: none;
}.hlx-page .pill-row li{
  margin: 0;
}.hlx-page .btn{
  --btn-bg: var(--ink);
  --btn-fg: var(--white);
  --btn-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 52px;
  padding: 0.85rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease),
    background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}.hlx-page .btn:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: var(--btn-fg);
}.hlx-page .btn:active{
  transform: translateY(0);
}.hlx-page .btn--primary{
  --btn-bg: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  --btn-fg: #23180a;
  box-shadow: var(--shadow-gold);
}.hlx-page .btn--primary:hover{
  --btn-bg: linear-gradient(135deg, #cfab63 0%, #a5853c 100%);
}.hlx-page .btn--dark{
  --btn-bg: var(--ink);
  --btn-fg: var(--white);
}.hlx-page .btn--dark:hover{
  --btn-bg: var(--ink-800);
}.hlx-page .btn--outline{
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-border: var(--line-gold);
}.hlx-page .btn--outline:hover{
  --btn-bg: var(--white);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
}.hlx-page .btn--outline-light{
  --btn-bg: transparent;
  --btn-fg: var(--white);
  --btn-border: rgba(255, 255, 255, 0.28);
}.hlx-page .btn--outline-light:hover{
  --btn-bg: rgba(255, 255, 255, 0.08);
  color: var(--white);
}.hlx-page .btn--wa{
  --btn-bg: var(--wa);
  --btn-fg: var(--white);
}.hlx-page .btn--wa:hover{
  --btn-bg: var(--wa-dark);
}.hlx-page .btn--ghost{
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-border: transparent;
  min-height: 44px;
  padding-inline: 0.9rem;
}.hlx-page .btn--ghost:hover{
  --btn-bg: var(--gold-tint);
}.hlx-page .btn--sm{
  min-height: 42px;
  padding: 0.55rem 1.1rem;
  font-size: var(--fs-sm);
}.hlx-page .btn--lg{
  min-height: 60px;
  padding-inline: 2rem;
  font-size: 1.0625rem;
}.hlx-page .btn--block{
  width: 100%;
}.hlx-page .btn .ico{
  width: 20px;
  height: 20px;
  fill: currentColor;
  flex: none;
}.hlx-page .btn-row{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}.hlx-page .link-arrow{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink);
  text-decoration: none;
}.hlx-page .link-arrow::after{
  content: "→";
  transition: transform var(--t) var(--ease);
}.hlx-page .link-arrow:hover::after{
  transform: translateX(4px);
}.hlx-page .chip{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.75rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--white);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
}.hlx-page .chip--gold{
  background: var(--gold-light);
  border-color: var(--line-gold);
  color: var(--gold-deep);
}.hlx-page .chip--ink{
  background: var(--ink);
  border-color: transparent;
  color: var(--white);
}.hlx-page .chip--ok{
  background: var(--ok-soft);
  border-color: transparent;
  color: var(--ok);
}.hlx-page .chip--muted{
  background: var(--cream-2);
  border-color: transparent;
  color: var(--muted);
}.hlx-page .badge-chip{
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink);
  background: var(--white);
}.hlx-page .card{
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: clamp(1.35rem, 2.4vw, 2rem);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
    border-color var(--t) var(--ease);
}.hlx-page .card--flat{
  box-shadow: none;
  border-radius: var(--r-info);
}.hlx-page .card--gold{
  border-color: var(--line-gold);
  background: linear-gradient(180deg, var(--white) 0%, var(--gold-tint) 100%);
}.hlx-page .card--ink{
  background: var(--ink);
  border-color: transparent;
  color: rgba(255, 255, 255, 0.78);
}.hlx-page .card--ink h3, .hlx-page .card--ink h4{
  color: var(--white);
}.hlx-page .card--hover:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-gold);
}.hlx-page .card__icon{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--gold-light);
  color: var(--gold-deep);
  margin-bottom: var(--sp-4);
}.hlx-page .card__icon svg{
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}.hlx-page .note{
  border-left: 3px solid var(--line);
  background: var(--gold-tint);
  padding: var(--sp-4) var(--sp-5);
  border-radius: 0 var(--r-info) var(--r-info) 0;
  font-size: var(--fs-sm);
  color: var(--text);
}.hlx-page .section--ink .note, .hlx-page .hero--dark .note, .hlx-page .stats-band .note, .hlx-page .guarantee .note, .hlx-page .cta-band .note, .hlx-page .prod-card--feature .note{
  border-left-color: var(--gold);
}.hlx-page .note--ink{
  background: rgba(255, 255, 255, 0.06);
  border-left-color: var(--gold);
  color: rgba(255, 255, 255, 0.8);
}.hlx-page .note__title{
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.35rem;
}.hlx-page .note--ink .note__title{
  color: var(--white);
}.hlx-page .claim-disclaimer{
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--muted);
  margin-top: var(--sp-4);
  max-width: 78ch;
}.hlx-page .claim-disclaimer::before{
  content: "*";
  color: var(--muted);
  font-weight: 700;
  margin-right: 0.25rem;
}.hlx-page .section--ink .claim-disclaimer::before, .hlx-page .hero--dark .claim-disclaimer::before, .hlx-page .stats-band .claim-disclaimer::before, .hlx-page .guarantee .claim-disclaimer::before, .hlx-page .cta-band .claim-disclaimer::before, .hlx-page .prod-card--feature .claim-disclaimer::before{
  color: var(--gold);
}.hlx-page .site-header{
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow var(--t) var(--ease), background-color var(--t) var(--ease);
}.hlx-page .site-header.is-stuck{
  box-shadow: var(--shadow-sm);
  background: rgba(255, 255, 255, 0.97);
}.hlx-page .announce{
  background: var(--ink);
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--fs-xs);
}.hlx-page .announce__inner{
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 40px;
  padding-block: 0.35rem;
}.hlx-page .announce__text{
  margin: 0;
  flex: 1 1 auto;
}.hlx-page .announce__price{
  color: var(--gold);
  font-weight: 700;
}.hlx-page .announce__link{
  color: var(--gold);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}.hlx-page .announce__close{
  background: none;
  border: 0;
  padding: 6px;
  margin-right: -6px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background-color var(--t-fast) var(--ease);
}.hlx-page .announce__close:hover{
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
}.hlx-page .announce__close svg{
  width: 16px;
  height: 16px;
}.hlx-page .header-bar{
  min-height: var(--header-h);
}.hlx-page .header-inner{
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--header-h);
}.hlx-page .brand{
  display: inline-flex;
  align-items: center;
  flex: none;
}.hlx-page .brand__logo{
  height: 38px;
  width: auto;
  background: none;
}.hlx-page .primary-nav{
  flex: 1 1 auto;
}.hlx-page .primary-nav__list{
  display: flex;
  align-items: center;
  gap: clamp(0.35rem, 1.4vw, 1.1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}.hlx-page .primary-nav__list > li{
  margin: 0;
  position: relative;
}.hlx-page .primary-nav__list a{
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.6rem 0.55rem;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}.hlx-page .primary-nav__list a:hover{
  background: var(--gold-tint);
  color: var(--gold-deep);
}.hlx-page .primary-nav__list a[aria-current="page"]{
  color: var(--gold-deep);
  font-weight: 600;
}.hlx-page .chev{
  width: 10px;
  height: 7px;
  transition: transform var(--t) var(--ease);
}.hlx-page .has-sub:hover .chev, .hlx-page .has-sub:focus-within .chev{
  transform: rotate(180deg);
}.hlx-page .submenu{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 300px;
  list-style: none;
  margin: 0;
  padding: var(--sp-2);
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease),
    visibility var(--t) var(--ease);
}.hlx-page .has-sub:hover .submenu, .hlx-page .has-sub:focus-within .submenu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}.hlx-page .submenu li{
  margin: 0;
}.hlx-page .submenu a{
  display: block;
  padding: 0.6rem 0.75rem;
  font-size: var(--fs-sm);
  border-radius: var(--r-sm);
}.hlx-page .primary-nav__foot{
  display: none;
}.hlx-page .header-actions{
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: none;
}.hlx-page .header-link{
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
}.hlx-page .cart-btn{
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}.hlx-page .cart-btn:hover{
  border-color: var(--line-gold);
  background: var(--gold-tint);
}.hlx-page .cart-btn svg{
  width: 21px;
  height: 21px;
  color: var(--ink);
}.hlx-page .cart-btn__count{
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: #23180a;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
}.hlx-page .nav-toggle{
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
  place-items: center;
}.hlx-page .nav-toggle__bars{
  display: grid;
  gap: 4px;
  width: 18px;
}.hlx-page .nav-toggle__bars i{
  display: block;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--t) var(--ease), opacity var(--t-fast) var(--ease);
}.hlx-page .nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1){
  transform: translateY(5.5px) rotate(45deg);
}.hlx-page .nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2){
  opacity: 0;
}.hlx-page .nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3){
  transform: translateY(-5.5px) rotate(-45deg);
}.hlx-page .nav-scrim{
  position: fixed;
  inset: 0;
  background: rgba(15, 31, 36, 0.5);
  backdrop-filter: blur(2px);
  z-index: 55;
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}.hlx-page .nav-scrim.is-open{
  opacity: 1;
}.hlx-page .wa-strip{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3) var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--gold-tint);
  border: 1px solid var(--line-gold);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}.hlx-page .wa-strip strong{
  font-family: var(--font-display);
}.hlx-page .site-footer{
  background: var(--ink);
  color: rgba(255, 255, 255, 0.7);
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) var(--sp-6);
  font-size: var(--fs-sm);
}.hlx-page .site-footer h2, .hlx-page .site-footer h3{
  color: var(--white);
}.hlx-page .footer-top{
  display: grid;
  gap: clamp(1.75rem, 3vw, 3rem);
  grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(150px, 1fr)) minmax(220px, 1.2fr);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}.hlx-page .footer-brand__logo{
  height: 36px;
  width: auto;
  background: none;
  margin-bottom: var(--sp-4);
  filter: brightness(0) invert(1);
  opacity: 0.95;
}.hlx-page .footer-brand__tagline{
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-3);
}.hlx-page .footer-brand__text{
  max-width: 34ch;
  margin-bottom: var(--sp-5);
}.hlx-page .footer-badges{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  padding: 0;
  margin: 0;
}.hlx-page .footer-badges .badge-chip{
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.82);
}.hlx-page .footer-col__title{
  font-size: var(--fs-xs);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
  color: var(--gold);
  font-weight: 600;
}.hlx-page .footer-col ul{
  list-style: none;
  padding: 0;
  margin: 0;
}.hlx-page .footer-col li + li{
  margin-top: var(--sp-3);
}.hlx-page .footer-col a{
  color: rgba(255, 255, 255, 0.76);
  text-decoration: none;
}.hlx-page .footer-col a:hover{
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: var(--gold);
}.hlx-page .footer-contact__label{
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* 0.45 -> 0.60: 4.42:1 menjadi 6.78:1 di atas ink. */
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.15rem;
}.hlx-page .footer-social{
  display: flex;
  gap: var(--sp-4);
  list-style: none;
  padding: 0;
  margin: var(--sp-5) 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
}.hlx-page .footer-legal{
  padding-top: var(--sp-6);
  display: grid;
  gap: var(--sp-4);
}.hlx-page .footer-legal__disclaimer{
  font-size: var(--fs-xs);
  line-height: 1.7;
  /* 0.55 -> 0.62: 5.91:1 menjadi 7.19:1 di atas ink. */
  color: rgba(255, 255, 255, 0.62);
  max-width: 100ch;
}.hlx-page .footer-legal__disclaimer strong{
  color: rgba(255, 255, 255, 0.8);
}.hlx-page .footer-legal__meta{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  /* 0.55 -> 0.60: 5.91:1 menjadi 6.78:1 di atas ink. */
  color: rgba(255, 255, 255, 0.6);
}.hlx-page .footer-copy{
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}.hlx-page .drawer{
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}.hlx-page .drawer[hidden]{
  display: none;
}.hlx-page .drawer__scrim{
  position: absolute;
  inset: 0;
  background: rgba(15, 31, 36, 0.5);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}.hlx-page .drawer__panel{
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 92vw);
  background: var(--white);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--t-slow) var(--ease-out);
  box-shadow: var(--shadow-lg);
}.hlx-page .drawer.is-open{
  pointer-events: auto;
}.hlx-page .drawer.is-open .drawer__scrim{
  opacity: 1;
}.hlx-page .drawer.is-open .drawer__panel{
  transform: translateX(0);
}.hlx-page .drawer__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-bottom: 1px solid var(--line-soft);
}.hlx-page .drawer__title{
  font-size: var(--fs-h4);
  margin: 0;
}.hlx-page .drawer__close{
  border: 1px solid var(--line);
  background: var(--white);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
}.hlx-page .drawer__close svg{
  width: 16px;
  height: 16px;
}.hlx-page .drawer__body{
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--sp-5);
}.hlx-page .drawer__foot{
  border-top: 1px solid var(--line-soft);
  padding: var(--sp-5);
  background: var(--cream);
  display: grid;
  gap: var(--sp-3);
}.hlx-page .drawer__empty{
  text-align: center;
  color: var(--muted);
  padding-block: var(--sp-8);
}.hlx-page .cart-line{
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
  align-items: start;
}.hlx-page .cart-line:last-child{
  border-bottom: 0;
}.hlx-page .cart-line__img{
  width: 72px;
  height: 72px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--cream-2);
}.hlx-page .cart-line__name{
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.2rem;
  line-height: 1.35;
}.hlx-page .cart-line__meta{
  font-size: var(--fs-xs);
  color: var(--muted);
  margin: 0 0 var(--sp-3);
}.hlx-page .qty{
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  overflow: hidden;
}.hlx-page .qty button{
  width: 34px;
  height: 34px;
  border: 0;
  background: var(--white);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--ink);
}.hlx-page .qty button:hover{
  background: var(--gold-tint);
}.hlx-page .qty span{
  min-width: 30px;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 600;
}.hlx-page .cart-line__price{
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  font-size: var(--fs-sm);
  text-align: right;
  white-space: nowrap;
}.hlx-page .cart-line__remove{
  background: none;
  border: 0;
  padding: 0;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  display: block;
}.hlx-page .cart-line__remove:hover{
  color: var(--danger);
}.hlx-page .cart-total{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-display);
}.hlx-page .cart-total__label{
  font-size: var(--fs-sm);
  color: var(--muted);
}.hlx-page .cart-total__value{
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ink);
}.hlx-page .consent{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  background: var(--white);
  border-top: 1px solid var(--line-gold);
  box-shadow: 0 -10px 34px rgba(15, 31, 36, 0.1);
  padding-block: var(--sp-4);
  padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
}.hlx-page .consent[hidden]{
  display: none;
}.hlx-page .consent__inner{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  justify-content: space-between;
}.hlx-page .consent__text{
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text);
  max-width: 68ch;
}.hlx-page .consent__text strong{
  color: var(--ink);
}.hlx-page .consent__actions{
  display: flex;
  gap: var(--sp-2);
  flex: none;
}.hlx-page.has-consent .cta-bar{
  bottom: 0;
}

@media (max-width: 720px) {.hlx-page .consent__inner{
    display: grid;
  }.hlx-page .consent__actions{
    width: 100%;
  }.hlx-page .consent__actions .btn{
    flex: 1 1 0;
  }.hlx-page.has-consent{
    padding-bottom: 170px;
  }
}.hlx-page .cta-bar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: none;
  gap: var(--sp-3);
  padding: 0.7rem clamp(0.9rem, 4vw, 1.25rem)
    calc(0.7rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line-soft);
  box-shadow: 0 -6px 24px rgba(15, 31, 36, 0.08);
}.hlx-page .cta-bar .btn{
  flex: 1 1 0;
  min-height: 48px;
  padding-inline: 0.75rem;
  font-size: var(--fs-sm);
}.hlx-page .reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  will-change: opacity, transform;
}.hlx-page .reveal.is-visible{
  opacity: 1;
  transform: none;
}.hlx-page .reveal[data-delay="1"]{
  transition-delay: 90ms;
}.hlx-page .reveal[data-delay="2"]{
  transition-delay: 180ms;
}.hlx-page .reveal[data-delay="3"]{
  transition-delay: 270ms;
}.hlx-page .reveal[data-delay="4"]{
  transition-delay: 360ms;
}.hlx-page .marquee{
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}.hlx-page .marquee__track{
  display: flex;
  gap: var(--sp-8);
  width: max-content;
  animation: marquee 38s linear infinite;
}.hlx-page .marquee:hover .marquee__track{
  animation-play-state: paused;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}.hlx-page .visually-hidden{
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}.hlx-page .skip-link{
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--ink);
  color: var(--white);
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: transform var(--t) var(--ease);
}.hlx-page .skip-link:focus{
  transform: translate(-50%, 0);
  color: var(--white);
}

/* --------------------------------------------------- 13. RESPONSIF DASAR */
@media (max-width: 1080px) {.hlx-page .footer-top{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }.hlx-page .footer-brand{
    grid-column: 1 / -1;
  }
}

@media (max-width: 1000px) {.hlx-page .nav-toggle{
    display: grid;
  }.hlx-page .primary-nav{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(360px, 88vw);
    background: var(--white);
    z-index: 60;
    padding: var(--sp-6) var(--sp-5);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform var(--t-slow) var(--ease-out);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
  }.hlx-page .primary-nav.is-open{
    transform: translateX(0);
  }.hlx-page .primary-nav__list{
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }.hlx-page .primary-nav__list a{
    padding: 0.85rem 0.5rem;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
    justify-content: space-between;
  }.hlx-page .submenu{
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0 0 var(--sp-3) var(--sp-4);
    min-width: 0;
    display: none;
  }.hlx-page .has-sub.is-open .submenu{
    display: block;
  }.hlx-page .has-sub.is-open .chev{
    transform: rotate(180deg);
  }.hlx-page .primary-nav__foot{
    display: grid;
    gap: var(--sp-3);
    margin-top: auto;
  }.hlx-page .primary-nav__note{
    font-size: var(--fs-xs);
    color: var(--muted);
    text-align: center;
    margin: 0;
  }.hlx-page .header-link{
    display: none;
  }.hlx-page .grid--sidebar{
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {.hlx-page{
    font-size: 1rem;
  }.hlx-page .header-inner{
    gap: var(--sp-3);
  }.hlx-page .brand__logo{
    height: 30px;
  }.hlx-page .header-actions .btn--wa{
    display: none;
  }.hlx-page .cta-bar{
    display: flex;
  }.hlx-page{
    padding-bottom: 74px;
  }.hlx-page .footer-top{
    grid-template-columns: minmax(0, 1fr);
  }.hlx-page .announce__link{
    display: none;
  }
}

/* --------------------------------------------------------- 14. CETAK */
@media print {.hlx-page .site-header, .hlx-page .site-footer, .hlx-page .cta-bar, .hlx-page .drawer{
    display: none !important;
  }.hlx-page{
    color: #000;
  }
}

/* --------------------------------------------- 15. HORMATI PREFERENSI */
@media (prefers-reduced-motion: reduce) {.hlx-page{
    scroll-behavior: auto;
  }.hlx-page *, .hlx-page *::before, .hlx-page *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }.hlx-page .reveal{
    opacity: 1;
    transform: none;
  }
}