/* ============================================================================
   landing-refresh.css — lapisan sistem desain
   ============================================================================

   Dimuat PALING AKHIR di show.blade.php, sesudah landing.css / benefit-cards.css /
   process-flow.css. Tujuannya menyeragamkan warna, skala huruf, ritme jarak, dan
   perilaku responsif tanpa membedah 55KB CSS lama yang ditulis satu-baris-per-aturan.

   Aturan main kalau menambah sesuatu di sini:

   1. JANGAN pernah pakai --theme-surface / --theme-accent mentah untuk bidang lebar
      atau warna teks. Kolom theme_* diisi manual lewat Filament dan sudah terbukti
      berisi kombinasi tak terbaca (teks #EDEDED di atas kanvas #FF8200 = 1,59:1,
      surface #F20000 dipakai sebagai latar kartu). Pakai peran turunan dari
      Product::themeColors() — --theme-panel, --theme-text-muted, --theme-accent-on,
      --theme-invert-panel — yang semuanya sudah dijamin lolos WCAG AA di PHP.
   2. Ukuran huruf terkecil di halaman publik adalah --fs-xs (13px). Sebelum ini ada
      teks isi 12,5px (kartu keunggulan) dan 10,9px (kartu proses).
   3. Setiap grid harus punya perilaku waras untuk jumlah item 1..8, bukan cuma untuk
      jumlah yang kebetulan ada saat dibuat.
   ========================================================================== */

:root {
    /* --- Peran warna: petakan token lama ke peran yang sudah aman kontras --- */
    --ink: var(--theme-base);
    --paper: var(--theme-text);
    --muted: var(--theme-text-muted);
    --surface: var(--theme-panel);
    --surface-raised: var(--theme-panel);
    --line: var(--theme-line);
    --brand-primary: var(--theme-accent-on);
    --brand-accent: var(--theme-accent-on);

    /* --- Skala huruf: fluid, rasio ±1,25 --- */
    --fs-xs: .8125rem;   /* 13px — batas bawah, hanya untuk label/eyebrow */
    --fs-sm: .9375rem;   /* 15px */
    --fs-base: 1rem;     /* 16px */
    --fs-md: clamp(1.0625rem, .35vw + 1rem, 1.1875rem);
    --fs-lg: clamp(1.1875rem, .6vw + 1rem, 1.375rem);
    --fs-h3: clamp(1.0625rem, .5vw + .95rem, 1.25rem);
    --fs-h2: clamp(1.75rem, 2.4vw + 1.1rem, 2.6rem);
    --fs-h1: clamp(2.25rem, 4vw + 1.2rem, 3.75rem);

    /* --- Ritme jarak --- */
    --gutter: clamp(20px, 5vw, 40px);
    --section-pad: clamp(56px, 7vw, 96px);
    --heading-gap: clamp(28px, 4vw, 44px);
    --card-gap: clamp(14px, 1.8vw, 24px);

    /* --- Bentuk --- */
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 22px;
    --shadow-card: 0 1px 2px rgba(16, 18, 24, .04), 0 8px 24px rgba(16, 18, 24, .07);
    --shadow-card-hover: 0 2px 4px rgba(16, 18, 24, .05), 0 16px 40px rgba(16, 18, 24, .11);
    --shadow-panel: 0 18px 48px rgba(16, 18, 24, .14);
}

/* ---------------------------------------------------------------- dasar --- */

body {
    background: var(--theme-base);
    color: var(--theme-text);
    font-size: var(--fs-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

h2 {
    font-size: var(--fs-h2);
    font-weight: 780;
    line-height: 1.12;
    letter-spacing: -.022em;
}

h3 {
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.eyebrow {
    color: var(--theme-accent-on);
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 14px;
}

/* ------------------------------------------------------- wadah & ritme --- */

.site-header,
.section-shell,
.site-footer__inner,
.site-footer__bottom {
    width: min(1160px, 100% - (var(--gutter) * 2));
}

.section-block { padding-block: var(--section-pad); }
.statement { padding-block: var(--section-pad); }
.section-heading { margin-bottom: var(--heading-gap); }

.section-heading > p:not(.eyebrow) {
    color: var(--theme-text-muted);
    font-size: var(--fs-md);
    max-width: 62ch;
}

/*
 * Pita berselang-seling. Tanpa ini halaman apex jadi satu bidang oranye pekat sepanjang
 * 6.200px tanpa jeda. Hanya kena section yang TIDAK punya background sendiri, supaya
 * pengaturan Warna/Gambar per-section di dashboard tetap menang.
 */
main > .section-block:not([data-section-background]):nth-of-type(even),
main > .statement:not([data-section-background]):nth-of-type(even) {
    --band: color-mix(in srgb, var(--theme-panel) 42%, var(--theme-base));
    position: relative;
}

/* .benefits-section dan .process-flow-section sudah punya pseudo pita 100vw sendiri
   (dan overflow:clip yang akan memotong pseudo baru), jadi cukup diberi nilainya. */
main > .benefits-section:not([data-section-background]):nth-of-type(even),
main > .process-flow-section:not([data-section-background]):nth-of-type(even) {
    --section-background: var(--band);
}

main > .section-block:not(.benefits-section):not(.process-flow-section):not([data-section-background]):nth-of-type(even)::after,
main > .statement:not([data-section-background]):nth-of-type(even)::after {
    position: absolute;
    z-index: -1;
    inset-block: 0;
    left: 50%;
    width: 100vw;
    background: var(--band);
    content: "";
    transform: translateX(-50%);
}

/* Garis pemisah lama tidak lagi diperlukan begitu ada pita; sisakan hanya kalau bersebelahan
   dengan section berlatar sama. */
.section-block { border-top: 0; }
.statement { border-top: 0; }

/* -------------------------------------------------------------- tombol --- */

.button {
    padding: 13px 22px;
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: -.005em;
    gap: 10px;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.button-primary {
    /* --theme-accent-on dijamin >= 4,5:1 terhadap --theme-base, jadi pasangan ini selalu terbaca. */
    background: var(--theme-accent-on);
    color: var(--theme-base);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--theme-accent-on) 28%, transparent);
}

.button-primary:hover { box-shadow: 0 14px 32px color-mix(in srgb, var(--theme-accent-on) 34%, transparent); }

.button-quiet {
    border: 1px solid var(--theme-line-strong);
    color: var(--theme-text);
}

.button-quiet:hover { background: color-mix(in srgb, var(--theme-text) 6%, transparent); }

.header-cta {
    border-bottom-color: currentColor;
    font-size: var(--fs-xs);
    font-weight: 700;
}

.microcopy { font-size: var(--fs-xs); }

/* ----------------------------------------------------- kartu keunggulan --- */

.benefits-section { padding-block: var(--section-pad); }
.benefits-section .section-heading { margin-bottom: var(--heading-gap); }

.benefit-cards {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    gap: var(--card-gap);
    padding: 6px 0 16px;
}

/* Hindari baris yatim: 5-6 item dibagi 3 kolom (3+3), bukan 4+2 yang menggantung rata kiri. */
.benefit-cards[data-benefit-count="5"],
.benefit-cards[data-benefit-count="6"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 980px;
    margin-inline: auto;
}

.benefit-cards[data-benefit-count="4"],
.benefit-cards[data-benefit-count="8"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.benefit-card {
    background: var(--theme-panel);
    border: 1px solid var(--theme-panel-line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-card);
}

.benefit-card__copy h3 {
    font-size: var(--fs-h3);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
    text-transform: none; /* UPPERCASE + ukuran kecil bikin judul kartu susah dipindai */
}

.benefit-cards .benefit-card__copy p {
    max-width: 30ch;
    margin-top: 10px;
    color: var(--theme-panel-muted);
    font-size: var(--fs-sm);
    line-height: 1.6;
}

.benefits-section .section-heading .eyebrow { color: var(--theme-accent-on); }

/* --------------------------------------------------------- alur proses --- */

.process-flow-section { padding-block: var(--section-pad); }
.process-flow-section .section-heading { margin-bottom: var(--heading-gap); }
.process-flow-section .section-heading .eyebrow { color: var(--theme-accent-on); }

.process-flow__card {
    background: var(--theme-panel);
    border: 1px solid var(--theme-panel-line);
    box-shadow: var(--shadow-card);
}

.process-flow__card h3 {
    margin-top: 14px;
    font-size: var(--fs-sm);
    font-weight: 750;
    letter-spacing: -.008em;
    line-height: 1.32;
}

.process-flow__card p {
    max-width: 26ch;
    margin-top: 8px;
    color: var(--theme-panel-muted);
    font-size: var(--fs-xs);
    line-height: 1.55;
}

.process-flow__badge { font-size: var(--fs-xs); }

/* Kartu proses lama memakai warna tetap #747780 pada teks 10,9px. */
.process-card p {
    color: var(--theme-panel-muted);
    font-size: var(--fs-sm);
}

/* ----------------------------------------------------- katalog produk --- */

.product-catalog-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
    gap: var(--card-gap);
}

/* Satu atau dua kartu di grid auto-fill selebar 1.160px akan menempel di pojok kiri dengan
   empat kolom kosong di sebelahnya — terbaca sebagai grid yang gagal dimuat, bukan pilihan. */
.product-catalog-grid:has(> :nth-child(1):last-child),
.product-catalog-grid:has(> :nth-child(2):last-child),
.product-catalog-grid:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(auto-fill, minmax(200px, 250px));
    justify-content: center;
}

.product-catalog-card {
    border: 1px solid var(--theme-panel-line);
    border-radius: var(--r-md);
    background: var(--theme-panel);
    color: var(--theme-panel-text);
    box-shadow: var(--shadow-card);
}

.product-catalog-card:hover { box-shadow: var(--shadow-card-hover); }

/*
 * Placeholder foto. Sebelumnya kotak ini mewarisi --surface-raised yang turun dari kolom
 * theme_surface_color — di halaman apex nilainya #F20000, jadi produk tanpa foto tampil
 * sebagai blok merah pekat di atas kanvas oranye dan terbaca sebagai "situs rusak".
 */
.product-catalog-card__photo {
    background: color-mix(in srgb, var(--theme-panel-text) 7%, var(--theme-panel));
    aspect-ratio: 4 / 5;
}

.product-catalog-card__photo::after {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: color-mix(in srgb, var(--theme-panel-text) 34%, transparent);
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-opacity='.28' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2.5'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.6'/%3E%3Cpath d='m4 17 4.5-4.6a1.8 1.8 0 0 1 2.5 0L20 20'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.product-catalog-card__photo img {
    position: relative;
    z-index: 1;
}

.product-catalog-card__label {
    padding: 14px 16px;
    color: var(--theme-panel-text);
}

.product-catalog-card__label span:first-child { font-size: var(--fs-sm); font-weight: 700; }
.product-catalog-card__label span:last-child { color: var(--theme-accent-on); }

/* -------------------------------------------------------------- galeri --- */

.gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 12px;
}

.gallery-grid img {
    border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--theme-panel-text) 7%, var(--theme-panel));
}

/* Satu atau dua foto tidak boleh direntang selebar 1.160px — dikunci dan ditengahkan
   supaya tidak terbaca sebagai grid yang gagal dimuat. */
.gallery-grid img:only-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(100%, 440px);
}

.gallery-reveal-fade {
    background: linear-gradient(to bottom, transparent, var(--theme-base) 84%);
}

.gallery-reveal-toggle {
    border-color: var(--theme-line-strong);
    background: var(--theme-panel);
    color: var(--theme-panel-text);
    font-size: var(--fs-sm);
    box-shadow: var(--shadow-card);
}

.gallery-reveal-toggle:hover { background: var(--theme-panel); box-shadow: var(--shadow-card-hover); }

/* --------------------------------------------------------- kartu harga --- */

.pricing-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    justify-content: center;
    gap: var(--card-gap);
}

.price-card {
    min-height: 0;
    border-color: var(--theme-panel-line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-card);
}

/* Dua paket tidak perlu selebar setengah layar. */
.pricing-grid .price-card { max-width: 420px; width: 100%; margin-inline: auto; }

.price-card--featured { transform: none; box-shadow: var(--shadow-panel); }
.price-card__features { font-size: var(--fs-sm); }
.price-card__header h3 { font-size: var(--fs-md); }

/* ----------------------------------------------------------- testimoni --- */

.review-grid .review-card {
    border: 1px solid var(--theme-panel-line);
    border-radius: var(--r-md);
    background: var(--theme-panel);
    color: var(--theme-panel-text);
    box-shadow: var(--shadow-card);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.review-grid .review-card .review-quote {
    color: var(--theme-panel-text);
    font-size: var(--fs-sm);
    line-height: 1.62;
}

.review-author__copy > span { color: var(--theme-panel-muted); font-size: var(--fs-xs); }
.review-author__copy strong { font-size: var(--fs-sm); }
.review-stars { color: #E8A317; }
.review-avatar { border-color: var(--theme-panel-line); }
.review-avatar--fallback { background: color-mix(in srgb, var(--theme-accent-on) 16%, var(--theme-panel)); color: var(--theme-panel-text); }

/* ----------------------------------------------------------------- FAQ --- */

.faq-list { border-top-color: var(--theme-line); }
.faq-list details { border-bottom-color: var(--theme-line); padding: 18px 0; }
.faq-list summary { font-size: var(--fs-md); font-weight: 700; }
.faq-list summary span { color: var(--theme-accent-on); transition: transform .2s ease; }
.faq-list p { color: var(--theme-text-muted); font-size: var(--fs-sm); }

/* -------------------------------------------------------- panel ajakan --- */

/*
 * Satu bahasa untuk semua brand. Sebelum ini tiap produk memakai theme_accent_color mentah
 * sebagai latar pita CTA, hasilnya abu-abu (#B8B8B8 di JB Print), biru muda (Shatex), putih
 * (apex) dan navy (ID Card) — empat rasa tanpa pola, dan yang abu-abu terbaca seperti style
 * yang lupa diisi.
 */
.cta-panel {
    padding: clamp(36px, 6vw, 72px);
    border-radius: var(--r-lg);
    margin-bottom: var(--section-pad);
    background: var(--theme-invert-panel);
    color: var(--theme-invert-panel-text);
    box-shadow: var(--shadow-panel);
}

.cta-panel h2 { color: var(--theme-invert-panel-text); }
.cta-panel .eyebrow { color: color-mix(in srgb, var(--theme-invert-panel-text) 72%, transparent); }
.cta-panel p:not(.eyebrow) { color: var(--theme-invert-panel-muted); font-size: var(--fs-md); }

.cta-panel .button-primary {
    background: var(--theme-invert-panel-text);
    color: var(--theme-invert-panel);
    box-shadow: none;
}

/*
 * Kalau admin sudah memilih warna/gambar latar sendiri untuk section ini, pilihannya dihormati:
 * panel gelap bawaan dilepas dan seluruh teks memakai peran yang dihitung terhadap warna itu
 * (dikirim sebagai --theme-text / --theme-text-muted inline oleh $sectionThemeStyle).
 */
.cta-panel[data-section-background="color"],
.site-footer[data-section-background="color"] {
    background: transparent;
    box-shadow: none;
}

.cta-panel[data-section-background="color"],
.cta-panel[data-section-background="color"] h2 { color: var(--theme-text); }
.cta-panel[data-section-background="color"] p:not(.eyebrow) { color: var(--theme-text-muted); }
.cta-panel[data-section-background="color"] .eyebrow { color: var(--theme-accent-on); }

.cta-panel[data-section-background="color"] .button-primary {
    background: var(--theme-accent-on);
    color: var(--theme-base);
}

.site-footer[data-section-background="color"] { color: var(--theme-text-muted); }

.site-footer[data-section-background="color"] .site-footer__heading,
.site-footer[data-section-background="color"] .footer-brand-mark,
.site-footer[data-section-background="color"] .site-footer__contact-list strong,
.site-footer[data-section-background="color"] .site-footer__socials { color: var(--theme-text); }

.site-footer[data-section-background="color"] .site-footer__brand p,
.site-footer[data-section-background="color"] .site-footer__contact-list span,
.site-footer[data-section-background="color"] .site-footer__links,
.site-footer[data-section-background="color"] .site-footer__bottom { color: var(--theme-text-muted); }

.site-footer[data-section-background="color"] .site-footer__socials,
.site-footer[data-section-background="color"] .site-footer__bottom { border-top-color: var(--theme-line); }

/* -------------------------------------------------------------- footer --- */

.site-footer { border-top: 0; font-size: var(--fs-sm); }

/*
 * Hanya footer yang MENGIKUTI TEMA yang diambil alih. Footer dengan latar Warna/Gambar sendiri
 * sudah punya penanganan sendiri di landing.css (termasuk --paper/--muted lokal di atas overlay
 * gambar) — memaksakan peran tema induk ke sana sempat membuat teks navy gelap duduk di atas
 * footer bertekstur gelap.
 */
.site-footer:not([data-section-background]) {
    background: var(--theme-invert-panel);
    color: var(--theme-invert-panel-muted);
}

.site-footer:not([data-section-background]) .site-footer__heading,
.site-footer:not([data-section-background]) .footer-brand-mark,
.site-footer:not([data-section-background]) .site-footer__contact-list strong,
.site-footer:not([data-section-background]) .site-footer__socials { color: var(--theme-invert-panel-text); }

.site-footer:not([data-section-background]) .site-footer__brand p { color: var(--theme-invert-panel-muted); font-size: var(--fs-sm); }
.site-footer:not([data-section-background]) .site-footer__contact-list span { color: var(--theme-invert-panel-muted); font-size: var(--fs-xs); }
.site-footer:not([data-section-background]) .site-footer__links,
.site-footer:not([data-section-background]) .site-footer__bottom { color: var(--theme-invert-panel-muted); }
.site-footer:not([data-section-background]) .site-footer__socials,
.site-footer:not([data-section-background]) .site-footer__bottom { border-top-color: color-mix(in srgb, var(--theme-invert-panel-text) 18%, transparent); }

.site-footer:not([data-section-background]) .site-footer__links a:hover,
.site-footer:not([data-section-background]) .site-footer__links a:focus-visible,
.site-footer:not([data-section-background]) .site-footer__socials a:hover,
.site-footer:not([data-section-background]) .site-footer__socials a:focus-visible { color: var(--theme-invert-panel-text); }

/* ---------------------------------------------- tombol WhatsApp melayang --- */

.floating-wa {
    position: fixed;
    z-index: 60;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    display: none;
    align-items: center;
    gap: 9px;
    padding: 13px 18px;
    border-radius: 999px;
    background: #128C4A;
    color: #FFFFFF;
    font-size: var(--fs-sm);
    font-weight: 750;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .26);
}

.floating-wa svg { width: 20px; height: 20px; fill: currentColor; flex: 0 0 auto; }
.floating-wa:active { transform: scale(.97); }

/* -------------------------------------------------------- hero & about --- */

.hero-lead { color: var(--theme-text-muted); font-size: var(--fs-lg); }
.hero-body, .statement-text { color: var(--theme-text-muted); }

.statement-text { font-size: var(--fs-md); line-height: 1.68; }
.statement-text p + p { margin-top: 18px; }
.statement { gap: clamp(28px, 5vw, 80px); }

.about-section__photo { border-radius: var(--r-md); }

.feature-card {
    border-color: var(--theme-line);
    background: var(--theme-panel);
    color: var(--theme-panel-text);
    border-radius: var(--r-md);
}

.feature-card p { color: var(--theme-panel-text); font-size: var(--fs-sm); margin-top: 20px; }
.feature-card span { color: var(--theme-accent-on); font-size: var(--fs-xs); }

.feature-grid {
    border: 0;
    gap: var(--card-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}

.feature-grid .feature-card { border: 1px solid var(--theme-panel-line); box-shadow: var(--shadow-card); }

/* ------------------------------------------------- lantai ukuran huruf --- */

/*
 * Semua label mikro ditarik ke --fs-xs (13px). Nilai-nilai lama ditulis dalam rem kecil dan
 * jatuh jauh di bawah batas baca: badge alur proses .56rem (9px), label hero .64rem (10,2px),
 * label kontak footer .72rem (11,5px). Ukuran segitu masih terbaca di monitor desainer, tidak
 * di HP sambil jalan.
 */
.process-flow__badge,
.price-card .price-card__badge,
.benefit-card__number,
.process-number,
.site-nav,
.site-footer__heading,
.site-footer__contact-list span,
.site-footer__socials,
.site-footer__bottom,
.product-hero__product-label,
.product-hero__eyebrow,
.product-showcase__header p,
.product-showcase__header span,
.product-showcase__info > p,
.gallery-carousel figcaption,
.comparison-grid figcaption { font-size: var(--fs-xs); }

/* Badge dengan latar aksen: pakai warna solid + pasangan yang dijamin kontras, bukan
   color-mix ke putih lalu diberi teks putih (pola lama di .price-card__badge). */
.price-card .price-card__badge,
.process-flow__step.is-featured .process-flow__badge,
.benefit-card__number {
    background: var(--theme-accent-solid);
    color: var(--theme-accent-solid-text);
}

.benefit-card__number {
    width: 38px;
    height: 38px;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 24%, transparent);
}

/* ------------------------------------- perbaikan lanjutan (17 Sep 2026) --- */

/*
 * Badge langkah biasa dulu diracik dari --theme-base (`color-mix(theme-base 82%, #172035)`).
 * Di kanvas jenuh itu menghasilkan latar yang nyaris sewarna kanvas: di halaman cetaknota
 * (kanvas #FF0000) badge jadi merah gelap dengan teks gelap = 3,46:1. Panel sudah punya
 * pasangan warna yang dijamin terbaca, jadi pakai itu saja.
 */
.process-flow__badge {
    background: var(--theme-panel);
    color: var(--theme-panel-text);
    border: 1px solid var(--theme-panel-line);
}

.process-flow__step.is-featured .process-flow__badge { border-color: transparent; }

/* Satuan harga ("/pcs") tertinggal di .76rem = 12,2px. */
.price-card__price span { font-size: var(--fs-xs); }

/*
 * Tepi carousel testimoni dulu dilebur sejauh 4% di kiri-kanan. Di halaman dengan kartu yang
 * pas memenuhi lebar, kartu pertama ikut pudar sampai teksnya tidak terbaca (2,8:1 di
 * cetaknota). Lebur tetap ada sebagai petunjuk bisa digeser, tapi dipersempit.
 */
.review-carousel {
    mask-image: linear-gradient(to right, transparent 0, #000 1.5%, #000 98.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 1.5%, #000 98.5%, transparent 100%);
}

/*
 * Mode diam untuk carousel testimoni (lihat review-carousel.js): dipakai saat testimoninya
 * sedikit atau sudah muat semua. Tanpa gerak, tanpa lebur tepi, kartu ditaruh di tengah.
 */
.review-carousel.is-static {
    overflow-x: visible;
    cursor: default;
    mask-image: none;
    -webkit-mask-image: none;
}

.review-carousel.is-static .review-grid {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    padding-inline: 0;
    gap: var(--card-gap);
}

.review-carousel.is-static .review-card:only-child { flex-basis: min(100%, 440px); }

/* Hijau WhatsApp sebelumnya #128C4A: teks putih di atasnya cuma 4,30:1. */
.floating-wa { background: #0F7B41; }

/*
 * Label "FEATURED PRODUCT" di kartu hero berwarna krem, sementara gradien kartunya di bagian
 * ATAS nyaris bening (rgba(253,227,207,.13)) — jadi teksnya sebenarnya duduk di atas orb warna
 * brand, apa pun warnanya. Di halaman cetaknota orb-nya cokelat muda dan rasionya tinggal
 * 2,93:1. Scrim tipis membuat label ini aman untuk warna brand mana pun, bukan cuma yang gelap.
 */
.product-showcase__header {
    background: linear-gradient(to bottom, rgba(12, 8, 6, .55), rgba(12, 8, 6, .16));
}

.product-showcase__header span { color: color-mix(in srgb, var(--brand-cream, #FDE3CF) 72%, transparent); }

/* ----------------------------------------------------------- aksesibilitas --- */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--theme-accent-on);
    outline-offset: 3px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .button:hover,
    .product-catalog-card:hover,
    .floating-wa:active { transform: none; }
}

/* ============================================================ breakpoint ===
   Sebelumnya hanya ada 960px dan 760px, jadi rentang tablet (761–1024) memakai
   layout desktop penuh: grid 4 kolom dan kolom teks dua-lajur di lebar 800px.
   ========================================================================== */

/* --- Laptop kecil / tablet lanskap --- */
@media (max-width: 1024px) {
    .benefit-cards[data-benefit-count="4"],
    .benefit-cards[data-benefit-count="8"],
    .benefit-cards[data-benefit-count="5"],
    .benefit-cards[data-benefit-count="6"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 720px;
    }

    .product-hero__grid { gap: clamp(28px, 4vw, 56px); }
}

/* --- Tablet potret --- */
@media (max-width: 860px) {
    .statement { grid-template-columns: 1fr; gap: 18px; }
    .about-section--split .about-section__photo { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; height: auto; }
    .pricing-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
    .site-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
    .site-footer__brand { grid-column: 1 / -1; }
}

/* --- Ponsel --- */
@media (max-width: 760px) {
    .floating-wa { display: inline-flex; }

    /* Beri ruang supaya tombol melayang tidak menutupi baris terakhir footer. */
    .site-footer__bottom { padding-bottom: 92px; }

    .benefit-cards,
    .benefit-cards[data-benefit-count="4"],
    .benefit-cards[data-benefit-count="5"],
    .benefit-cards[data-benefit-count="6"],
    .benefit-cards[data-benefit-count="8"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
    }

    .benefit-cards .benefit-card__copy p { max-width: none; font-size: var(--fs-xs); }
    .product-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cta-panel { border-radius: var(--r-md); }
    .site-footer__inner { grid-template-columns: 1fr; }
}

/* --- Ponsel sempit --- */
@media (max-width: 420px) {
    :root { --gutter: 16px; }

    .benefit-cards,
    .benefit-cards[data-benefit-count="4"],
    .benefit-cards[data-benefit-count="5"],
    .benefit-cards[data-benefit-count="6"],
    .benefit-cards[data-benefit-count="8"] {
        grid-template-columns: minmax(0, 1fr);
    }

    .floating-wa { padding: 12px 16px; }
}