:root {
    --theme-base: #09090A;
    --theme-surface: #111214;
    --theme-accent: #F97316;
    --theme-text: #F4F1EB;
    --ink: var(--theme-base);
    --surface: var(--theme-surface);
    --surface-raised: color-mix(in srgb, var(--theme-surface) 88%, var(--theme-text));
    --line: color-mix(in srgb, var(--theme-text) 14%, transparent);
    --muted: color-mix(in srgb, var(--theme-text) 64%, var(--theme-base));
    --paper: var(--theme-text);
    --brand-primary: var(--theme-accent);
    --brand-accent: var(--theme-accent);
    color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
.site-header, .section-shell { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
/* Header dulu transparan, jadi background hero (yang sengaja bleed -84px ke atas, lihat
   .product-hero::before) numpuk keliatan nyatu sama header (28 Agu 2026 -> ditemukan 1 Sep 2026).
   Kasih header background OPAQUE sendiri, full-bleed (trik sama kayak [data-section-background]),
   z-index eksplisit biar menang dari stacking .product-hero (isolation:isolate, tapi z-index:auto)
   di zona overlap -84px itu — baru kelihatan sebagai 2 blok terpisah, bukan 1 background nyambung. */
.site-header { position: relative; z-index: 5; min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--theme-accent-contrast); }
/* Background header disamakan ke Theme accent color (1 Sep 2026, permintaan eksplisit) — BUKAN
   var(--theme-base) lagi. Accent color kadang TERANG (mis. Shatex #FDBA74, Beranda JB Print
   #b8b8b8), jadi teks header (brand-mark/nav/CTA) WAJIB ikut kontras dinamis ke --theme-accent-
   contrast (dihitung PHP di Product::themeColors(), sama caranya kayak --theme-text ke
   --theme-base) — bukan hardcode cream lagi kayak sebelumnya, biar tetap kebaca lintas brand
   apapun terang/gelapnya accent color-nya. */
.site-header::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--theme-accent); border-bottom: 1px solid var(--line); }
.brand-mark { font-size: .88rem; letter-spacing: .08em; font-weight: 800; text-transform: uppercase; }
.brand-mark img { max-height: 42px; width: auto; max-width: 180px; object-fit: contain; }
.header-cta { font-size: .86rem; border-bottom: 1px solid var(--brand-primary); padding-bottom: 3px; }
.hero { padding: 70px 0 120px; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(300px,.92fr); align-items: center; gap: clamp(40px, 7vw, 100px); min-height: calc(100vh - 84px); }
.hero.is-centered { grid-template-columns: 1fr; text-align: center; max-width: 800px; }
.hero.is-centered .hero-visual { display: none; }
.eyebrow { color: var(--brand-accent); text-transform: uppercase; letter-spacing: .14em; font-size: .69rem; font-weight: 800; margin: 0 0 15px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.045em; line-height: 1.02; }
h1 { font-size: clamp(3.1rem, 7vw, 6.9rem); max-width: 780px; margin-bottom: 24px; }
h2 { font-size: clamp(2.1rem, 4.1vw, 4rem); max-width: 760px; margin-bottom: 18px; }
h3 { font-size: 1.35rem; }
.hero-lead { color: color-mix(in srgb, var(--theme-text) 82%, var(--theme-base)); font-size: clamp(1.05rem, 1.6vw, 1.35rem); max-width: 610px; margin-bottom: 14px; }
.hero-body, .statement-text, .section-heading > p { color: var(--muted); max-width: 640px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 32px; }
.button { border-radius: 999px; padding: 14px 20px; display: inline-flex; align-items: center; gap: 20px; font-weight: 750; font-size: .9rem; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--theme-base); background: var(--brand-primary); box-shadow: 0 12px 35px color-mix(in srgb, var(--brand-primary) 25%, transparent); }
.button-quiet { border: 1px solid var(--line); color: var(--paper); }
.microcopy { font-size: .76rem; color: var(--muted); margin-top: 16px; }
.hero-visual { aspect-ratio: .92; min-height: 430px; overflow: hidden; display: grid; place-items: center; background: var(--theme-surface); box-shadow: 0 32px 72px rgba(0,0,0,.38), 0 12px 30px color-mix(in srgb, var(--brand-primary) 22%, transparent); }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; }
.hero-monogram { z-index: 2; font-size: clamp(10rem, 24vw, 17rem); color: rgba(255,255,255,.92); font-weight: 900; letter-spacing: -.12em; transform: translateX(-.08em); }
.statement { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(35px, 10vw, 170px); padding: 120px 0; border-top: 1px solid var(--line); }
.statement-text { padding-top: 10px; font-size: 1.08rem; }.statement-text p + p { margin-top: 22px; }
.about-section__highlights { grid-column: 1 / -1; }
.about-section__photo { grid-column: 1 / -1; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 20px; display: block; }
.about-section--split { align-items: center; }
.about-section--split .about-section__photo { grid-column: 1; grid-row: 1 / span 2; aspect-ratio: 4 / 5; height: 100%; align-self: stretch; }
.section-shell { background: var(--section-background, transparent); }
[data-section-background] { position: relative; isolation: isolate; background: transparent; }
[data-section-background]::before,
[data-section-background]::after { content: ""; position: absolute; inset-block: 0; left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none; }
[data-section-background]::before { z-index: 0; }
[data-section-background]::after { z-index: 1; }
[data-section-background] > * { position: relative; z-index: 2; }
[data-section-background="color"]::before { background-color: var(--section-background-color); }
[data-section-background="image"] { min-height: clamp(28rem, 55vw, 44rem); color: var(--theme-text); --muted: color-mix(in srgb, var(--theme-text) 84%, transparent); }
[data-section-background="image"]::before { background-image: var(--section-background-image); background-repeat: no-repeat; background-position: var(--section-background-position, center center); background-size: cover; }
[data-section-background="image"]::after { background-color: var(--section-overlay-color, #000000); opacity: var(--section-overlay-opacity, .55); }
/* Readability gradient khusus product-hero (28 Agu 2026) — di atas overlay rata di atas, tambahin
   penggelapan EKSTRA tepat di zona teks (kiri di desktop, atas di mobile), independen dari isi
   gambar background-nya, biar kontras judul/CTA gak tergantung foto yang dipakai. */
.product-hero[data-section-background="image"]::after {
    background: linear-gradient(to right, var(--section-overlay-color, #000000) 0%, transparent 62%), var(--section-overlay-color, #000000);
}
[data-section-background="image"] h1,
[data-section-background="image"] h2,
[data-section-background="image"] h3,
[data-section-background="image"] > p,
[data-section-background="image"] .section-heading > p,
[data-section-background="image"] .hero-copy > p,
[data-section-background="image"] .statement-text { text-shadow: 0 2px 18px rgba(0,0,0,.72); }
.hero[data-section-background="image"] { min-height: clamp(36rem, calc(100svh - 84px), 64rem); }
.section-block { padding: 106px 0; border-top: 1px solid var(--line); }.section-heading { margin-bottom: 42px; }.section-heading > p { margin-bottom: 0; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.feature-card { min-height: 180px; padding: 25px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(145deg, rgba(255,255,255,.03), transparent); }
.feature-card span { color: var(--brand-accent); font-size: .72rem; letter-spacing: .08em; font-weight: 800; }.feature-card p { font-size: 1.05rem; margin: 40px 0 0; max-width: 260px; }
.benefit-grid { gap: clamp(14px, 2vw, 22px); border: 0; }
.benefit-grid .feature-card { border: 1px solid var(--line); border-radius: 20px; background: var(--theme-base); box-shadow: 0 16px 36px rgba(0,0,0,.24), 0 0 0 1px color-mix(in srgb, var(--brand-primary) 10%, transparent); }
.benefit-card-heading { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: 14px; }
.benefit-card-heading .benefit-number { display: block; padding-top: .38em; font-size: .72rem; font-weight: 850; letter-spacing: .08em; }
.benefit-card-heading h3 { margin: 0; font-size: clamp(1.15rem, 1.55vw, 1.4rem); font-weight: 760; line-height: 1.24; letter-spacing: -.025em; }
.benefit-grid .benefit-description { max-width: none; margin: 14px 0 0 46px; color: var(--muted); font-size: .92rem; line-height: 1.65; }
.process-grid { --process-column-gap: clamp(20px, 3vw, 42px); --process-row-gap: 78px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--process-column-gap); row-gap: var(--process-row-gap); margin: 0; padding: 0; list-style: none; }
.process-card { --process-card-color: var(--brand-accent); position: relative; z-index: 1; grid-row: var(--process-row); grid-column: var(--process-column); min-height: 224px; padding: 24px; border: 0; border-radius: 20px; background: color-mix(in srgb, var(--surface) 40%, transparent); box-shadow: 0 22px 48px rgba(0,0,0,.30), 0 8px 20px color-mix(in srgb, var(--brand-primary) 18%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--paper) 10%, transparent); }
.process-card::after { position: absolute; z-index: -1; display: block; box-sizing: border-box; color: var(--process-card-color); content: ""; pointer-events: none; }.process-card[data-process-next="right"]::after { top: 50%; left: 100%; width: var(--process-column-gap); border-top: 2px solid currentColor; transform: translateY(-50%); }.process-card[data-process-next="right"]::before { position: absolute; top: 50%; right: calc(var(--process-column-gap) * -1); color: var(--process-card-color); content: "→"; transform: translate(50%, -50%); }.process-card[data-process-next="left"]::after { top: 50%; right: 100%; width: var(--process-column-gap); border-top: 2px solid currentColor; transform: translateY(-50%); }.process-card[data-process-next="left"]::before { position: absolute; top: 50%; left: calc(var(--process-column-gap) * -1); color: var(--process-card-color); content: "←"; transform: translate(-50%, -50%); }.process-card[data-process-next="down"]::after { right: 20%; bottom: calc(var(--process-row-gap) * -1); height: var(--process-row-gap); border-right: 2px solid currentColor; }.process-card[data-process-next="down"]::before { position: absolute; right: 20%; bottom: calc(var(--process-row-gap) * -1); color: var(--process-card-color); content: "↓"; transform: translate(50%, 50%); }.process-number { display: block; color: var(--process-card-color); font-size: .7rem; font-weight: 800; letter-spacing: .11em; }.process-icon { display: grid; width: 48px; height: 48px; margin: 19px 0 22px; place-items: center; border-radius: 14px; color: var(--process-card-color); background: color-mix(in srgb, var(--process-card-color) 18%, transparent); font-size: 1.35rem; font-weight: 800; }.process-card h3 { margin: 0; font-size: 1.08rem; }.process-card p { margin: 8px 0 0; color: var(--muted); font-size: .88rem; }.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.gallery-grid img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--surface-raised); }.gallery-reveal { position: relative; display: flex; flex-direction: column; align-items: stretch; }.gallery-reveal .gallery-grid[data-gallery-grid] { overflow: hidden; max-height: 580px; transition: max-height .6s ease; }.gallery-reveal.is-expanded .gallery-grid[data-gallery-grid] { max-height: 4200px; }.gallery-reveal-fade { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; height: 260px; border-radius: 0 0 20px 20px; background: linear-gradient(to bottom, transparent, var(--ink) 82%); pointer-events: none; opacity: 1; transition: opacity .45s ease; }.gallery-reveal.is-expanded .gallery-reveal-fade { opacity: 0; }.gallery-reveal-toggle { position: absolute; z-index: 3; left: 50%; bottom: 30px; align-self: center; display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; border: 1px solid color-mix(in srgb, var(--brand-accent) 45%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--brand-accent) 16%, transparent); backdrop-filter: blur(6px); color: var(--paper); font: inherit; font-size: .86rem; font-weight: 800; letter-spacing: .01em; cursor: pointer; transform: translateX(-50%); transition: background-color .2s ease, transform .2s ease; }.gallery-reveal.is-expanded .gallery-reveal-toggle { position: relative; z-index: auto; left: auto; bottom: auto; margin: 24px auto 0; transform: none; }.gallery-reveal-toggle:hover { background: color-mix(in srgb, var(--brand-accent) 26%, transparent); }.gallery-reveal.is-expanded .gallery-reveal-toggle:hover { transform: translateY(-2px); }.gallery-reveal-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }.gallery-reveal-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }.product-catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }.product-catalog-card { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: inherit; transition: transform .2s ease, box-shadow .2s ease; }.product-catalog-card:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(0,0,0,.18); }.product-catalog-card__photo { position: relative; width: 100%; aspect-ratio: 4 / 5; background: var(--surface-raised); overflow: hidden; }.product-catalog-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }.product-catalog-card__label { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px; }.product-catalog-card__label span:first-child { font-size: .92rem; font-weight: 750; }.product-catalog-card__label span:last-child { flex: 0 0 auto; color: var(--brand-accent); font-size: 1.05rem; }
@media (max-width: 760px) { .product-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.product-catalog-card__label { padding: 12px 14px; }.product-catalog-card__label span:first-child { font-size: .84rem; } }
.process-icon-svg { display: block; width: 25px; height: 25px; }
.video-block { background: linear-gradient(100deg, color-mix(in srgb, var(--brand-primary) 12%, transparent), transparent); padding-inline: clamp(24px, 5vw, 65px); }.video-link, .price-card a { color: var(--brand-accent); font-weight: 700; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.pricing-grid, .review-grid, .comparison-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.price-card, blockquote, .comparison-grid figure { margin: 0; border: 1px solid var(--line); background: var(--surface); }.price-card { min-height: 270px; padding: 28px; display: flex; flex-direction: column; align-items: flex-start; }.price-card strong { font-size: 1.7rem; letter-spacing: -.04em; }.price-card p { color: var(--muted); flex: 1; margin-top: 12px; }
.comparison-grid { grid-template-columns: repeat(2, 1fr); }.comparison-grid img { width: 100%; aspect-ratio: 1.35; object-fit: cover; display: block; }.comparison-grid figcaption { padding: 12px 15px; color: var(--muted); font-size: .85rem; }
.reviews-section { overflow: visible; }
.reviews-section .section-heading { margin-bottom: 34px; }
.review-carousel { position: relative; overflow-x: auto; overflow-y: hidden; padding: 6px 0 10px; cursor: grab; scrollbar-width: none; touch-action: pan-y; mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); }
.review-carousel::-webkit-scrollbar { display: none; }
.review-carousel.is-dragging { cursor: grabbing; user-select: none; }
.review-carousel:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 5px; }
.review-grid { display: flex; width: max-content; align-items: stretch; gap: 6px; padding-inline: 4%; }
.review-grid .review-card { flex: 0 0 clamp(270px, 24vw, 300px); min-height: 0; margin: 0 1px; padding: 22px; display: flex; flex-direction: column; gap: 0; border: 1px solid color-mix(in srgb, var(--paper) 16%, transparent); border-radius: 24px; background: color-mix(in srgb, var(--surface) 46%, transparent); color: var(--paper); box-shadow: 0 0 8px rgba(0,0,0,.03), 0 2px 6px rgba(0,0,0,.08), inset 3px 3px .5px -3.5px rgba(255,255,255,.09), inset -3px -3px .5px -3.5px rgba(255,255,255,.75), inset 1px 1px 1px -.5px rgba(255,255,255,.35), inset -1px -1px 1px -.5px rgba(255,255,255,.35), inset 0 0 6px 6px rgba(255,255,255,.08), inset 0 0 2px 2px rgba(255,255,255,.05), 0 0 12px rgba(0,0,0,.15); -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%); }
@supports (backdrop-filter: url("#review-container-glass")) { .review-grid .review-card { backdrop-filter: url("#review-container-glass"); } }
.review-author { display: flex; align-items: center; gap: 12px; color: inherit; font-size: inherit; }
.review-avatar { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--paper) 18%, transparent); border-radius: 50%; object-fit: cover; }
.review-avatar--fallback { background: color-mix(in srgb, var(--brand-primary) 24%, var(--surface)); color: var(--paper); font-size: .82rem; font-weight: 800; }
.review-author__copy { min-width: 0; display: grid; gap: 2px; line-height: 1.3; }
.review-author__copy strong { overflow: hidden; font-size: .91rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.review-author__copy > span { overflow: hidden; color: color-mix(in srgb, var(--paper) 60%, transparent); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.review-grid .review-card .review-quote { flex: 1; margin: 17px 0 15px; color: color-mix(in srgb, var(--paper) 90%, transparent); font-size: .93rem; line-height: 1.58; }
.review-stars { min-height: 16px; display: flex; gap: 3px; color: #fff200; }
.review-stars svg { width: 15px; height: 15px; display: block; fill: currentColor; }
.review-glass-filter { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.faq-list { border-top: 1px solid var(--line); }.faq-list details { border-bottom: 1px solid var(--line); padding: 21px 0; }.faq-list summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 20px; }.faq-list summary::-webkit-details-marker { display:none; }.faq-list summary span { color: var(--brand-accent); font-size: 1.3rem; }.faq-list details[open] summary span { transform: rotate(45deg); }.faq-list p { color: var(--muted); max-width: 760px; padding-top: 17px; margin-bottom: 0; }
.cta-panel { padding: clamp(45px, 8vw, 100px); margin-bottom: 110px; background: var(--section-background, var(--theme-accent)); color: var(--theme-base); }.cta-panel .eyebrow { color: color-mix(in srgb, var(--theme-base) 68%, transparent); }.cta-panel h2 { max-width: 820px; }.cta-panel p:not(.eyebrow) { max-width: 650px; margin-bottom: 30px; }.cta-panel .button-primary { background: var(--theme-base); color: var(--theme-text); box-shadow: none; }
.cta-panel[data-section-background="image"] { color: var(--theme-text); }
.cta-panel[data-section-background="image"] .eyebrow { color: var(--theme-text); }

@media (max-width: 960px) { .review-grid blockquote { flex-basis: clamp(245px, 38vw, 300px); } }
@media (max-width: 760px) { .site-header,.section-shell { width: min(100% - 28px, 1160px); }.site-header { min-height: 70px; }.header-cta { font-size: .75rem; }.hero { padding: 50px 0 75px; min-height: auto; grid-template-columns: 1fr; gap: 40px; }.hero[data-section-background="image"] { min-height: clamp(38rem, 155vw, 48rem); }.hero-visual { min-height: 340px; aspect-ratio: 1.08; box-shadow: 0 20px 46px rgba(0,0,0,.32), 0 8px 20px color-mix(in srgb, var(--brand-primary) 18%, transparent); }.statement { grid-template-columns: 1fr; padding: 76px 0; gap: 15px; }.about-section--split .about-section__photo { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; height: auto; object-position: center top; }.section-block { padding: 76px 0; }.feature-grid,.pricing-grid { grid-template-columns: 1fr; }.feature-card { min-height: 130px; }.feature-card p { margin-top: 25px; }.process-grid { --process-column-gap: clamp(20px, 3vw, 42px); --process-row-gap: 78px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--process-column-gap); row-gap: var(--process-row-gap); margin: 0; padding: 0; list-style: none; }
.process-card { --process-card-color: var(--brand-accent); position: relative; z-index: 1; grid-row: var(--process-row); grid-column: var(--process-column); min-height: 224px; padding: 24px; border: 0; border-radius: 20px; background: color-mix(in srgb, var(--surface) 40%, transparent); box-shadow: 0 22px 48px rgba(0,0,0,.30), 0 8px 20px color-mix(in srgb, var(--brand-primary) 18%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--paper) 10%, transparent); }
.process-card::after { position: absolute; z-index: -1; display: block; box-sizing: border-box; color: var(--process-card-color); content: ""; pointer-events: none; }.process-card[data-process-next="right"]::after { top: 50%; left: 100%; width: var(--process-column-gap); border-top: 2px solid currentColor; transform: translateY(-50%); }.process-card[data-process-next="right"]::before { position: absolute; top: 50%; right: calc(var(--process-column-gap) * -1); color: var(--process-card-color); content: "→"; transform: translate(50%, -50%); }.process-card[data-process-next="left"]::after { top: 50%; right: 100%; width: var(--process-column-gap); border-top: 2px solid currentColor; transform: translateY(-50%); }.process-card[data-process-next="left"]::before { position: absolute; top: 50%; left: calc(var(--process-column-gap) * -1); color: var(--process-card-color); content: "←"; transform: translate(-50%, -50%); }.process-card[data-process-next="down"]::after { right: 20%; bottom: calc(var(--process-row-gap) * -1); height: var(--process-row-gap); border-right: 2px solid currentColor; }.process-card[data-process-next="down"]::before { position: absolute; right: 20%; bottom: calc(var(--process-row-gap) * -1); color: var(--process-card-color); content: "↓"; transform: translate(50%, 50%); }.process-number { display: block; color: var(--process-card-color); font-size: .7rem; font-weight: 800; letter-spacing: .11em; }.process-icon { display: grid; width: 48px; height: 48px; margin: 19px 0 22px; place-items: center; border-radius: 14px; color: var(--process-card-color); background: color-mix(in srgb, var(--process-card-color) 18%, transparent); font-size: 1.35rem; font-weight: 800; }.process-card h3 { margin: 0; font-size: 1.08rem; }.process-card p { margin: 8px 0 0; color: var(--muted); font-size: .88rem; }.gallery-grid { grid-template-columns: repeat(2, 1fr); }.comparison-grid { grid-template-columns: 1fr; }.review-grid { padding-inline: 5%; }.review-grid blockquote { flex-basis: min(66vw, 250px); min-height: 210px; }.cta-panel { margin-bottom: 76px; }.footer-note { flex-direction: column; gap: 8px; } }
@media (max-width: 760px) { .review-grid { padding-inline: 4%; }.review-grid .review-card { flex-basis: min(78vw, 274px); min-height: 0; padding: 20px; border-radius: 22px; }.reviews-section .section-heading { margin-bottom: 28px; } }
@media (prefers-reduced-motion: reduce) { .review-carousel { scroll-behavior: auto; } }

.site-footer { width: 100%; padding: 0; display: block; border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: .86rem; }
.site-footer[data-section-background="image"] { min-height: 0; --paper: #F4F1EB; --muted: color-mix(in srgb, #F4F1EB 76%, transparent); --line: color-mix(in srgb, #F4F1EB 16%, transparent); color: var(--muted); }
.site-footer__inner, .site-footer__bottom { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
.site-footer__inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(140px, .55fr) minmax(260px, 1fr); gap: clamp(40px, 7vw, 100px); padding: clamp(58px, 7vw, 92px) 0; }
.site-footer__brand p { max-width: 430px; margin: 24px 0 0; color: var(--muted); font-size: .98rem; }
.footer-brand-mark { display: inline-flex; align-items: center; color: var(--paper); font-size: .9rem; letter-spacing: .08em; font-weight: 800; text-transform: uppercase; }
.footer-brand-mark img { display: block; max-height: 48px; width: auto; max-width: 190px; object-fit: contain; }
.site-footer__heading { margin: 0 0 22px; color: var(--paper); font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.site-footer__links { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.site-footer__links a, .site-footer__socials a { transition: color .2s; }
.site-footer__links a:hover, .site-footer__links a:focus-visible, .site-footer__socials a:hover, .site-footer__socials a:focus-visible { color: var(--brand-accent); }
.site-footer__contact-list { display: grid; gap: 18px; margin: 0; font-style: normal; }
.site-footer__contact-list a { display: grid; gap: 3px; }
.site-footer__contact-list span { color: var(--muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.site-footer__contact-list strong { color: var(--paper); font-size: .92rem; font-weight: 650; overflow-wrap: anywhere; }
.site-footer__contact-list a:hover strong, .site-footer__contact-list a:focus-visible strong { color: var(--brand-accent); }
.site-footer__socials { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--paper); font-size: .8rem; font-weight: 700; }
.site-footer__bottom { display: flex; justify-content: space-between; gap: 20px; padding: 24px 0 34px; border-top: 1px solid var(--line); font-size: .76rem; }

@media (max-width: 760px) {
    .site-footer__inner, .site-footer__bottom { width: min(100% - 28px, 1160px); }
    .site-footer__inner { grid-template-columns: 1fr; gap: 44px; padding: 58px 0; }
    .site-footer__brand p { max-width: 36rem; }
    .site-footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
    .site-footer__bottom { flex-direction: column; gap: 6px; padding-bottom: 28px; }
}

@media (max-width: 760px) { .process-grid { --process-row-gap: 42px; grid-template-columns: 1fr; row-gap: var(--process-row-gap); }.process-card { grid-row: auto; grid-column: auto; min-height: 0; padding: 20px 22px; }.process-card[data-process-next]::after { top: 100%; right: auto; bottom: auto; left: 50%; width: 2px; height: var(--process-row-gap); border: 0; border-left: 2px solid currentColor; transform: none; }.process-card[data-process-next]::before { top: auto; right: auto; bottom: calc(var(--process-row-gap) * -1); left: 50%; content: "↓"; transform: translate(-50%, 50%); }.process-icon { width: 42px; height: 42px; margin: 14px 0 17px; } }

/* Pricing cards */
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: clamp(18px, 2.2vw, 26px); padding-top: 12px; }
.price-card { position: relative; min-width: 0; min-height: 430px; padding: 30px 26px 26px; display: flex; flex-direction: column; align-items: stretch; overflow: visible; border: 1px solid #e2e4e9; border-radius: 16px; background: #fff; color: #282a34; box-shadow: 0 20px 45px rgba(0,0,0,.16); }
.price-card--featured { border-color: color-mix(in srgb, var(--brand-primary) 76%, #fff); background: var(--brand-primary); color: #fff; box-shadow: 0 24px 56px color-mix(in srgb, var(--brand-primary) 30%, rgba(0,0,0,.28)); transform: translateY(-8px); }
.price-card .price-card__badge { position: absolute; z-index: 3; top: -15px; left: 18px; margin: 0; padding: 6px 13px; border-radius: 999px; background: color-mix(in srgb, var(--brand-primary) 72%, #fff); color: #fff; font-size: .72rem; font-weight: 750; line-height: 1.35; box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.price-card__flyer { position: relative; z-index: 1; margin: -30px -26px 22px; overflow: hidden; border-radius: 16px 16px 0 0; }
.price-card__flyer img { display: block; width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; }
.price-card__header { text-align: center; }
.price-card__header h3 { margin: 0; color: inherit; font-size: 1rem; font-weight: 750; letter-spacing: -.015em; line-height: 1.35; }
.price-card .price-card__price { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; margin: 5px 0 0; color: inherit; line-height: 1; }
.price-card__price strong { color: inherit; font-size: clamp(1.85rem, 3vw, 2.35rem); font-weight: 780; letter-spacing: -.045em; }
.price-card__price span { margin-left: 3px; color: #6b7280; font-size: .76rem; font-weight: 500; }
.price-card--featured .price-card__price span { color: rgba(255,255,255,.78); }
.price-card__features { display: grid; gap: 10px; margin: 29px 0 26px; padding: 0; list-style: none; color: #6b7280; font-size: .84rem; line-height: 1.45; }
.price-card--featured .price-card__features { color: rgba(255,255,255,.92); }
.price-card__features li { display: grid; grid-template-columns: 19px minmax(0, 1fr); align-items: start; gap: 9px; }
.price-card__features svg { width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--brand-primary); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.price-card--featured .price-card__features svg { stroke: currentColor; }
.price-card .price-card__button { width: 100%; min-height: 42px; margin-top: auto; padding: 10px 15px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 0; border-radius: 8px; background: var(--brand-primary); color: #fff; font-size: .84rem; font-weight: 750; line-height: 1.3; transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease; }
.price-card .price-card__button:hover, .price-card .price-card__button:focus-visible { color: #fff; border-bottom: 0; transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--brand-primary) 28%, transparent); }
.price-card--featured .price-card__button { background: #fff; color: var(--brand-primary); }
.price-card--featured .price-card__button:hover, .price-card--featured .price-card__button:focus-visible { color: var(--brand-primary); background: #f1f2f5; box-shadow: 0 10px 24px rgba(0,0,0,.16); }

@media (max-width: 900px) { .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.price-card:last-child:nth-child(odd) { grid-column: 1 / -1; width: min(100%, calc(50% - 9px)); justify-self: center; } }
@media (max-width: 620px) { .pricing-grid { grid-template-columns: 1fr; gap: 22px; padding-top: 6px; }.price-card, .price-card:last-child:nth-child(odd) { width: 100%; min-height: 0; grid-column: auto; }.price-card--featured { transform: none; }.price-card__features { margin-block: 25px; } }
@media (prefers-reduced-motion: reduce) { .price-card .price-card__button { transition: none; } }
@media (max-width: 760px) { .gallery-reveal .gallery-grid[data-gallery-grid] { max-height: 420px; }.gallery-reveal-fade { height: 190px; }.gallery-reveal-toggle { bottom: 20px; padding: 13px 22px; font-size: .8rem; } }


/* Reusable product hero */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.site-header { position: relative; z-index: 20; color: var(--theme-accent-contrast); }
.site-nav { display: flex; align-items: center; gap: clamp(22px, 3.2vw, 44px); color: color-mix(in srgb, var(--theme-accent-contrast) 72%, transparent); font-size: .78rem; font-weight: 700; letter-spacing: .04em; }
.site-nav a, .header-cta { min-height: 44px; display: inline-flex; align-items: center; transition: color .2s ease; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--theme-accent-contrast); opacity: .7; }
.header-cta { border: 1px solid color-mix(in srgb, var(--theme-accent-contrast) 24%, transparent); border-radius: 999px; padding: 0 17px; color: var(--theme-accent-contrast); }
.header-cta:hover, .header-cta:focus-visible { border-color: var(--theme-accent-contrast); }

.product-hero {
    --hero-accent: var(--brand-orange, #EC6426);
    --hero-accent-light: var(--brand-orange-light, #FF8A45);
    --hero-text-color: #F4F1EB;
    --hero-text-contrast: #17100B;
    --hero-accent-contrast: #17100B;
    --hero-bottom-radius: clamp(34px, 5vw, 64px);
    position: relative;
    isolation: isolate;
    padding: clamp(58px, 7vw, 104px) 0 0;
    margin-bottom: clamp(22px, 3.5vw, 42px);
    color: var(--hero-text-color);
}
.product-hero::before, .product-hero::after { top: -84px; border-radius: 0 0 var(--hero-bottom-radius) var(--hero-bottom-radius); }
.product-hero::before {
    box-shadow: 0 30px 64px rgba(0,0,0,.28), 0 10px 24px color-mix(in srgb, var(--hero-accent) 12%, transparent);
}
.product-hero:not([data-section-background])::before {
    position: absolute;
    z-index: -2;
    inset: -84px auto 0 50%;
    width: 100vw;
    transform: translateX(-50%);
    content: "";
    background:
        linear-gradient(rgba(253, 227, 207, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(253, 227, 207, .035) 1px, transparent 1px),
        radial-gradient(circle at 72% 38%, color-mix(in srgb, var(--hero-accent) 22%, transparent) 0, transparent 31%),
        radial-gradient(circle at 14% 8%, rgba(236, 100, 38, .11), transparent 28%),
        linear-gradient(145deg, #2C1710 0%, #1E100C 56%, #351A11 100%);
    background-size: 54px 54px, 54px 54px, auto, auto, auto;
}
.product-hero:not([data-section-background])::after {
    position: absolute;
    z-index: -1;
    inset: -84px auto 0 50%;
    width: 100vw;
    transform: translateX(-50%);
    pointer-events: none;
    content: "";
    opacity: .055;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
/* Varian "boxed" (flyer/carousel, 1 Sep 2026 — background kartu dekoratif dicopot total 1 Sep
   2026 sore). Awalnya cuma "kunci ke lebar section-shell + bulatkan semua sisi" dari pattern
   dekoratif default di atas — TERNYATA itu bikin kartu coklat BESAR nongol di belakang flyer
   (padding dari pattern itu didesain buat nampung teks headline si varian default, bukan buat
   flyer yang gambarnya sendiri sudah jadi "kartu"). Sekarang: TIDAK ADA background/pattern
   dekoratif sama sekali di boxed hero — `content: none` matiin render pseudo-element itu total
   (menang dari base rule di atas lewat urutan, spesifisitas sama). Yang kelihatan sebagai "kotak"
   sekarang MURNI gambar flyer/carousel itu sendiri (radius+shadow ada di .product-hero__flyer-
   image / .product-hero__carousel-track), duduk langsung di atas background halaman — padding
   section juga dipangkas (lihat bawah) biar gambar gak "kecil kejauhan" dari tepi kotaknya. */
/* section-shell standar dikunci 1160px (pas buat kolom teks) — boxed hero gak punya kolom teks,
   cuma gambar, jadi boleh jauh lebih lebar sebelum kelihatan aneh. 1440px + margin 40px kiri-
   kanan (formula sama kayak .section-shell biasa) — masih ada gutter halaman di layar sangat
   lebar, TAPI jauh lebih proporsional daripada dikunci 1160px kayak section berisi teks. */
.product-hero--boxed { width: min(1440px, calc(100% - 40px)); padding-top: clamp(12px, 1.4vw, 20px); margin-bottom: clamp(24px, 3vw, 40px); }
.product-hero--boxed::before, .product-hero--boxed::after,
.product-hero--boxed:not([data-section-background])::before,
.product-hero--boxed:not([data-section-background])::after { content: none; }
.product-hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr); align-items: center; gap: clamp(44px, 7vw, 104px); min-height: min(730px, calc(100svh - 84px)); padding-bottom: clamp(72px, 9vw, 128px); }
.product-hero__copy { position: relative; z-index: 3; animation: product-hero-copy-in 760ms cubic-bezier(.2,.7,.2,1) both; }
.product-hero__eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; color: color-mix(in srgb, var(--hero-text-color) 74%, transparent); font-size: .7rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.product-hero__eyebrow span { width: 34px; height: 2px; background: var(--hero-accent); }
.product-hero__title { max-width: 790px; margin: 0; color: var(--hero-text-color); font-size: clamp(3.9rem, 6.6vw, 6.5rem); font-weight: 820; line-height: .88; letter-spacing: -.06em; text-wrap: balance; }
.product-hero__title.has-parts > span { display: block; }
.product-hero__title-outline { color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--hero-text-color) 90%, transparent); }
.product-hero__title-highlight { color: var(--hero-accent-light); }
.product-hero__description { max-width: 650px; margin: 32px 0 0; color: color-mix(in srgb, var(--hero-text-color) 84%, transparent); font-size: clamp(1rem, 1.35vw, 1.18rem); line-height: 1.72; }
.product-hero__body { max-width: 610px; margin: 12px 0 0; color: color-mix(in srgb, var(--hero-text-color) 56%, transparent); font-size: .9rem; }
.product-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.product-hero__button { min-height: 50px; padding: 13px 19px; display: inline-flex; align-items: center; justify-content: center; gap: 22px; border: 1px solid transparent; border-radius: 999px; font-size: .84rem; font-weight: 800; transition: transform .2s ease, background-color .2s ease, border-color .2s ease; }
.product-hero__button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.product-hero__button--primary { background: var(--hero-accent); color: var(--hero-accent-contrast); box-shadow: 0 14px 34px color-mix(in srgb, var(--hero-accent) 23%, transparent); }
.product-hero__button--secondary { border-color: color-mix(in srgb, var(--hero-text-color) 25%, transparent); color: var(--hero-text-color); }
.product-hero__button:hover { transform: translateY(-2px); }
.product-hero__button:focus-visible, .site-nav a:focus-visible, .header-cta:focus-visible { outline: 2px solid var(--hero-accent-light); outline-offset: 4px; }
.product-hero__support { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 670px; margin-top: 40px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--hero-text-color) 13%, transparent); }
.product-hero__support p { margin: 0; color: color-mix(in srgb, var(--hero-text-color) 66%, transparent); font-size: .78rem; line-height: 1.55; }
.product-hero__support span { display: block; margin-bottom: 5px; color: var(--hero-accent-light); font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.product-showcase { position: relative; z-index: 2; width: min(100%, 520px); justify-self: end; animation: product-hero-showcase-in 820ms 80ms cubic-bezier(.2,.7,.2,1) both; }
.product-showcase__orb { position: absolute; z-index: -2; width: 105%; aspect-ratio: 1; top: 48%; left: 50%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--hero-accent-light), var(--hero-accent) 58%, color-mix(in srgb, var(--hero-accent) 22%, transparent) 59%); opacity: .78; transform: translate(-50%, -50%); filter: saturate(.88); }
.product-showcase__card { position: relative; min-height: 625px; overflow: hidden; border: 1px solid rgba(253,227,207,.2); border-radius: 38px; background: linear-gradient(160deg, rgba(253,227,207,.13), rgba(44,23,16,.63) 42%, rgba(20,9,7,.82)); box-shadow: 0 34px 72px rgba(8,3,2,.42); transform: rotate(2deg); transition: transform .35s ease; }
.product-showcase:hover .product-showcase__card { transform: rotate(1deg) translateY(-4px); }
.product-showcase__header { position: relative; z-index: 3; min-height: 75px; padding: 24px 28px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgba(253,227,207,.12); }
.product-showcase__header p, .product-showcase__header span { margin: 0; font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.product-showcase__header p { color: var(--brand-cream, #FDE3CF); }
.product-showcase__header span { color: color-mix(in srgb, var(--brand-cream, #FDE3CF) 58%, transparent); }
.product-showcase__stage { position: relative; min-height: 435px; display: grid; place-items: center; padding: 30px 38px 10px; }
.product-showcase__image { position: relative; z-index: 2; display: block; width: 100%; height: 415px; object-fit: contain; filter: drop-shadow(0 28px 22px rgba(0,0,0,.32)); }
.product-showcase__badge { position: absolute; z-index: 4; top: 22px; right: 22px; padding: 8px 12px; border-radius: 999px; background: var(--hero-accent); color: #2C1710; font-size: .63rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.product-showcase__detail { position: absolute; z-index: 4; right: 24px; bottom: 15px; width: 102px; height: 124px; margin: 0; overflow: hidden; border: 4px solid rgba(253,227,207,.86); border-radius: 18px; background: #2C1710; transform: rotate(-5deg); box-shadow: 0 18px 28px rgba(0,0,0,.3); }
.product-showcase__detail img { width: 100%; height: 100%; object-fit: cover; }
.product-showcase__footer { position: relative; z-index: 3; min-height: 115px; padding: 22px 28px 26px; display: flex; align-items: end; justify-content: space-between; gap: 24px; border-top: 1px solid rgba(253,227,207,.12); }
.product-showcase__footer h2 { max-width: 300px; margin: 0; color: var(--brand-cream, #FDE3CF); font-size: clamp(1.35rem, 2.1vw, 2rem); line-height: 1.04; letter-spacing: -.04em; }
.product-showcase__footer p { flex: 0 0 auto; margin: 0; text-align: right; }
.product-showcase__footer p span, .product-showcase__footer p strong { display: block; }
.product-showcase__footer p span { color: color-mix(in srgb, var(--brand-cream, #FDE3CF) 58%, transparent); font-size: .61rem; letter-spacing: .1em; text-transform: uppercase; }
.product-showcase__footer p strong { margin-top: 4px; color: var(--hero-accent-light); font-size: 1.02rem; }
.product-showcase__info { position: absolute; z-index: 6; left: -58px; bottom: 74px; width: min(230px, 48%); padding: 20px; border-radius: 22px; background: var(--brand-cream, #FDE3CF); color: var(--brand-brown, #2C1710); box-shadow: 0 22px 42px rgba(8,3,2,.3); transform: rotate(-2deg); }
.product-showcase__info > p { margin: 0 0 12px; font-size: .64rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.product-showcase__info ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.product-showcase__info li { position: relative; padding-left: 16px; font-size: .76rem; font-weight: 700; }
.product-showcase__info li::before { position: absolute; left: 0; color: var(--hero-accent); content: "•"; }
.product-showcase__colors { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; padding-top: 13px; border-top: 1px solid rgba(44,23,16,.14); }
.product-showcase__colors > span { width: 20px; height: 20px; border: 2px solid rgba(255,255,255,.72); border-radius: 50%; background: var(--option-color); box-shadow: 0 0 0 1px rgba(44,23,16,.2); }

.product-hero__photo { position: relative; z-index: 2; width: min(100%, 520px); aspect-ratio: 4 / 5; justify-self: end; display: grid; align-items: end; justify-items: center; animation: product-hero-showcase-in 820ms 80ms cubic-bezier(.2,.7,.2,1) both; }
.product-hero__photo::before { content: ""; position: absolute; z-index: -1; width: 92%; aspect-ratio: 1; top: 42%; left: 50%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--hero-accent-light), var(--hero-accent) 58%, color-mix(in srgb, var(--hero-accent) 22%, transparent) 60%); opacity: .5; transform: translate(-50%, -50%); filter: blur(1px) saturate(.88); }
.product-hero__photo img { display: block; width: auto; max-width: 100%; height: 94%; object-fit: contain; filter: drop-shadow(0 26px 34px rgba(8,3,2,.35)); }

/* Varian "flyer" (30 Agu 2026, rasio dikunci 16:9 desktop 1 Sep 2026) — gambar sudah didesain jadi
   (teks/CTA dibakar ke dalam gambar), section-nya sendiri boxed (lihat .product-hero--boxed di
   bawah), bukan full-bleed kayak product-hero__grid biasa. Headline HTML disembunyikan visual
   (.sr-only) tapi tetap ada di DOM buat SEO/aria-labelledby.
   Rasio gambar: DESKTOP dikunci 16:9 (`aspect-ratio` + `object-fit:cover`, biar box hero seragam
   tingginya lintas produk apapun rasio asli file yang diupload) — MOBILE (≤860px) balik ke ukuran
   asli gambar (`aspect-ratio:auto`, ngikutin atribut width/height asli di <img>), karena flyer
   mobile biasanya beda komposisi/rasio dari versi desktop (lihat `secondary_image_id`). */
.product-hero__flyer { position: relative; z-index: 2; display: grid; justify-items: center; gap: 22px; padding-bottom: clamp(40px, 6vw, 72px); animation: product-hero-copy-in 760ms cubic-bezier(.2,.7,.2,1) both; }
.product-hero__flyer-image { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: 20px; box-shadow: 0 30px 64px rgba(0,0,0,.28), 0 10px 24px color-mix(in srgb, var(--hero-accent) 12%, transparent); }
.product-hero__flyer-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (max-width: 860px) { .product-hero__flyer-image { aspect-ratio: auto; } }

/* Varian "carousel" (1 Sep 2026, rasio dikunci 16:9 desktop sama kayak flyer) — banyak slide,
   geser via scroll-snap horizontal (drag/swipe native, dot buat lompat manual), autoplay
   dijalankan JS (public/js/hero-carousel.js), berhenti otomatis saat hover/fokus/drag/
   prefers-reduced-motion. Desktop: SEMUA slide dikunci 16:9 (`object-fit:cover`) — otomatis
   nyelesein masalah "tinggi carousel lompat-lompat kalau rasio antar slide beda" tanpa admin
   perlu manual samakan rasio file. Mobile (≤860px): balik ke ukuran asli tiap gambar (bisa beda
   tinggi antar slide saat digeser — trade-off yang disengaja, ikutin instruksi "ukuran sendiri"
   di mobile). */
.product-hero__carousel { width: 100%; }
.product-hero__carousel-track { display: flex; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 20px; box-shadow: 0 30px 64px rgba(0,0,0,.28), 0 10px 24px color-mix(in srgb, var(--hero-accent) 12%, transparent); scrollbar-width: none; }
.product-hero__carousel-track::-webkit-scrollbar { display: none; }
.product-hero__carousel-slide { flex: 0 0 100%; scroll-snap-align: start; }
.product-hero__carousel-slide img { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; }
.product-hero__carousel-dots { display: flex; justify-content: center; gap: 9px; margin-top: 18px; }
.product-hero__carousel-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--hero-text-color) 32%, transparent); cursor: pointer; transition: background-color .2s ease, width .2s ease; }
.product-hero__carousel-dots button[aria-current="true"] { width: 24px; background: var(--hero-accent); }
@media (max-width: 860px) { .product-hero__carousel-slide img { aspect-ratio: auto; } }
@media (prefers-reduced-motion: reduce) { .product-hero__carousel-track { scroll-behavior: auto; } }

.product-hero__marquee { position: relative; left: 50%; width: 100vw; overflow: hidden; border-block: 1px solid rgba(253,227,207,.12); border-radius: 0 0 var(--hero-bottom-radius) var(--hero-bottom-radius); transform: translateX(-50%); background: rgba(20,9,7,.34); }
.product-hero__marquee-track { display: flex; width: max-content; animation: product-hero-marquee 28s linear infinite; }
.product-hero__marquee-group { display: flex; align-items: center; flex-shrink: 0; }
.product-hero__marquee-group > span { display: inline-flex; align-items: center; gap: 32px; padding: 16px 16px 16px 32px; color: color-mix(in srgb, var(--hero-text-color) 74%, transparent); font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; }
.product-hero__marquee-group i { width: 7px; height: 7px; border-radius: 50%; background: var(--hero-accent); }

@keyframes product-hero-copy-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes product-hero-showcase-in { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: translateX(0); } }
@keyframes product-hero-marquee { to { transform: translateX(-50%); } }

@media (max-width: 1040px) {
    .product-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(340px, .78fr); gap: 48px; }
    .product-hero__title { font-size: clamp(3.6rem, 6.7vw, 5.5rem); }
    .product-showcase__card { min-height: 560px; }
    .product-showcase__stage { min-height: 380px; }
    .product-showcase__image { height: 360px; }
    .product-showcase__info { left: -25px; }
}
@media (max-width: 860px) {
    .site-nav { display: none; }
    .product-hero { padding-top: 48px; }
    .product-hero__grid { grid-template-columns: 1fr; gap: 70px; min-height: auto; }
    .product-hero__copy { max-width: 720px; }
    .product-hero__title { font-size: clamp(3.8rem, 11vw, 6.1rem); }
    .product-showcase { width: min(88%, 540px); justify-self: center; }
    .product-hero__photo { width: min(88%, 540px); aspect-ratio: 1 / 1; justify-self: center; }
    /* Teks numpuk full-width di atas gambar (bukan kolom kiri lagi) — gradient ikut geser jadi
       atas→bawah, biar zona judul/deskripsi/CTA di ATAS tetap gelap terjamin, apapun isi gambarnya. */
    .product-hero[data-section-background="image"]::after {
        background: linear-gradient(to bottom, var(--section-overlay-color, #000000) 0%, transparent 58%), var(--section-overlay-color, #000000);
    }
    /* `.product-hero { padding-top: 48px; }` di atas didesain buat varian teks (headline yang
       numpuk ke 1 kolom di mobile perlu jarak dari header) — TIDAK relevan buat boxed hero
       (flyer/carousel, gak ada headline kelihatan). Sama specificity + section ini muncul BELAKANGAN
       dari rule `.product-hero--boxed` yang gak ke-media-query di atas, jadi menang di mobile kalau
       gak di-override lagi di sini — makanya perlu baris ini (1 Sep 2026, laporan jarak "masih jauh
       banget" di mobile setelah desktop-nya udah pas). */
    .product-hero--boxed { padding-top: clamp(10px, 2.5vw, 16px); }
}
@media (max-width: 620px) {
    .site-header { min-height: 72px; }
    .brand-mark img { max-width: 142px; max-height: 36px; }
    .product-hero { --hero-bottom-radius: 28px; margin-bottom: 22px; }
    .header-cta { min-height: 42px; padding-inline: 14px; font-size: .72rem; }
    .product-hero { width: min(100% - 28px, 1160px); padding-top: 42px; }
    .product-hero::before, .product-hero::after { top: -72px; }
    .product-hero__grid { gap: 54px; padding-bottom: 66px; }
    .product-hero__title { font-size: clamp(3rem, 15vw, 4.5rem); line-height: .92; }
    .product-hero__title-outline { -webkit-text-stroke-width: 1px; }
    .product-hero__description { margin-top: 24px; font-size: .98rem; line-height: 1.65; }
    .product-hero__actions { display: grid; grid-template-columns: 1fr; margin-top: 28px; }
    .product-hero__button { width: 100%; min-height: 50px; }
    .product-hero__support { grid-template-columns: 1fr; gap: 14px; margin-top: 30px; }
    .product-showcase { width: 100%; }
    .product-hero__photo { width: 84%; aspect-ratio: 4 / 3; margin: 0 auto; }
    .product-showcase__orb { width: 108%; }
    .product-showcase__card { min-height: 505px; border-radius: 30px; transform: none; }
    .product-showcase:hover .product-showcase__card { transform: none; }
    .product-showcase__header { min-height: 66px; padding: 21px; }
    .product-showcase__stage { min-height: 336px; padding: 24px 20px 6px; }
    .product-showcase__image { height: 320px; }
    .product-showcase__detail { right: 17px; width: 82px; height: 98px; }
    .product-showcase__footer { min-height: 102px; padding: 20px 21px 22px; }
    .product-showcase__footer h2 { font-size: 1.4rem; }
    .product-showcase__info { position: relative; left: auto; bottom: auto; width: calc(100% - 28px); margin: -22px auto 0; transform: none; }
    .product-hero__marquee-group > span { gap: 22px; padding: 14px 12px 14px 22px; }
    .product-hero--boxed { padding-top: clamp(10px, 2.5vw, 16px); }
}
@media (prefers-reduced-motion: reduce) {
    .product-hero__copy, .product-showcase, .product-hero__photo { animation: none; }
    .product-showcase__card, .product-hero__button { transition: none; }
    .product-hero__marquee-track { width: auto; animation: none; }
    .product-hero__marquee-group[aria-hidden="true"] { display: none; }
    .product-hero__marquee-group { flex-wrap: wrap; justify-content: center; }
    .gallery-carousel-track { width: auto; animation: none; flex-wrap: wrap; }
    .gallery-carousel-group[aria-hidden="true"] { display: none; }
}

/* Gallery — layout_variant "carousel": strip banner berputar otomatis, tanpa JS (pola sama dengan product-hero__marquee) */
.gallery-carousel { position: relative; overflow: hidden; }
.gallery-carousel-track { display: flex; width: max-content; animation: gallery-carousel-scroll 32s linear infinite; }
.gallery-carousel-group { display: flex; align-items: center; flex-shrink: 0; gap: 16px; padding-right: 16px; }
.gallery-carousel-group img { height: 260px; width: auto; border-radius: 16px; object-fit: cover; background: var(--surface-raised); }
@keyframes gallery-carousel-scroll { to { transform: translateX(-50%); } }
@media (max-width: 760px) {
    .gallery-carousel-group img { height: 160px; border-radius: 12px; }
    .gallery-carousel-group { gap: 10px; padding-right: 10px; }
}