/* =========================================================================
   Sigatra — Komponen
   ========================================================================= */

/* -------------------------------------------------------------------------
   Tombol
   ------------------------------------------------------------------------- */

.btn {
    --btn-bg: transparent;
    --btn-fg: var(--text);
    --btn-border: transparent;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 0.78rem 1.35rem;
    min-height: 2.875rem;
    border: 1px solid var(--btn-border);
    border-radius: var(--r-full);
    background-color: var(--btn-bg);
    color: var(--btn-fg);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-snug);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transform: translate3d(var(--tx, 0), var(--ty, 0), 0);
    transition: background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-out);
}

/* Tombol tak boleh lebih lebar daripada wadahnya. Label "Konsultasi Gratis via
   WhatsApp" tidak boleh patah (nowrap) dan lebarnya 326px, sedangkan ruang yang
   tersisa di dalam pita ajakan pada layar 360-375px hanya sekitar 270px. Hasilnya
   tombol utama terpotong overflow: hidden milik pita itu (23px di 375px, 38px di
   360px). Pada layar sempit, label tombol besar boleh patah baris. */
.btn {
    max-width: 100%;
}

@media (max-width: 30rem) {
    .btn--lg {
        white-space: normal;
        text-align: center;
        line-height: 1.25;
    }
}

.btn .icon {
    width: 1.15em;
    height: 1.15em;
    transition: transform var(--dur) var(--ease-out);
}

/* `color` ditegaskan lagi di sini karena a:hover (base.css) lebih spesifik
   daripada .btn dan, tanpa baris ini, menimpa warna teks setiap tombol berupa
   tautan saat disorot. Akibat nyatanya: teks tombol WhatsApp berubah jadi biru
   pucat di atas hijau pada tema gelap (kontras sekitar 1.3:1), dan teks tombol
   utama berwarna sama dengan latarnya. */
.btn:hover {
    text-decoration: none;
    color: var(--btn-fg);
}

.btn:active {
    transform: translate3d(var(--tx, 0), var(--ty, 0), 0) scale(0.975);
    transition-duration: var(--dur-instant);
}

/* Panah pada tombol ajakan bergerak maju saat disorot — isyarat halus
   bahwa tombol ini membawa pengunjung ke langkah berikutnya. */
.btn:hover .icon--shift {
    transform: translateX(0.2rem);
}

/* --- Varian --- */

.btn--primary {
    --btn-bg: var(--accent);
    --btn-fg: var(--accent-on);
    box-shadow: 0 1px 2px rgba(13, 26, 48, 0.16),
                0 8px 20px -10px color-mix(in oklab, var(--accent) 62%, transparent);
}

.btn--primary:hover {
    --btn-bg: var(--accent-hover);
    box-shadow: 0 2px 4px rgba(13, 26, 48, 0.16),
                0 14px 30px -12px color-mix(in oklab, var(--accent) 72%, transparent);
}

.btn--secondary {
    --btn-bg: var(--surface);
    --btn-fg: var(--text);
    --btn-border: var(--border);
    box-shadow: var(--shadow-sm);
}

.btn--secondary:hover {
    --btn-bg: var(--surface-2);
    --btn-border: var(--border-strong);
}

.btn--ghost {
    --btn-fg: var(--text-2);
    padding-inline: 0.9rem;
}

.btn--ghost:hover {
    --btn-bg: var(--surface-2);
    --btn-fg: var(--text);
}

.btn--outline {
    --btn-fg: var(--accent);
    --btn-border: var(--accent-border);
}

.btn--outline:hover {
    --btn-bg: var(--accent-soft);
    --btn-border: var(--accent);
}

/*
   Tombol WhatsApp — satu-satunya tempat hijau merek WhatsApp dipakai.
   Karena warna ini tidak muncul di mana pun lagi, ia berfungsi sebagai
   penanda "di sinilah kamu menghubungi kami" yang bisa dikenali tanpa
   perlu membaca.
*/
.btn--wa {
    --btn-bg: var(--wa);
    --btn-fg: var(--wa-ink);
    font-weight: var(--fw-bold);
    box-shadow: 0 1px 2px rgba(5, 57, 26, 0.2),
                0 10px 24px -12px rgba(37, 211, 102, 0.8);
}

/* Teks tetap tinta gelap saat disorot. Putih di atas --wa-strong hanya 2.6:1
   (gagal WCAG AA 4.5:1); tinta --wa-ink di atas warna yang sama 5.0:1. */
.btn--wa:hover {
    --btn-bg: var(--wa-strong);
    --btn-fg: var(--wa-ink);
    box-shadow: 0 2px 4px rgba(5, 57, 26, 0.22),
                0 16px 34px -14px rgba(37, 211, 102, 0.95);
}

.btn--wa .icon {
    width: 1.3em;
    height: 1.3em;
}

/* --- Ukuran --- */

.btn--sm {
    padding: 0.55rem 1rem;
    min-height: 2.25rem;
    font-size: var(--fs-xs);
}

.btn--lg {
    padding: 1.02rem 1.9rem;
    min-height: 3.375rem;
    font-size: var(--fs-base);
}

.btn--block {
    width: 100%;
}

.btn--icon {
    padding: 0;
    width: 2.625rem;
    height: 2.625rem;
    min-height: 0;
    border-radius: var(--r-full);
}

.btn[aria-disabled="true"],
.btn:disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Riak saat diklik — diletakkan oleh JS, dihapus sendiri setelah selesai. */
.btn__ripple {
    position: absolute;
    border-radius: 50%;
    background-color: currentColor;
    opacity: 0.28;
    transform: scale(0);
    pointer-events: none;
    z-index: -1;
    animation: ripple 620ms var(--ease-out) forwards;
}

/* Penanda perhatian pada tombol WhatsApp utama (.btn--pulse): kilau menyapu
   dua kali saat pertama terlihat. Gayanya ada di animations.css, bagian
   "Interaksi: sorot dan klik".

   Dulu berupa cincin yang membesar di luar tombol, tapi cincin itu
   TERPOTONG oleh overflow: hidden pada .btn (tepi luarnya persis di luar kotak
   isi) dan berwarna sama dengan latar tombol. Hasilnya tak pernah terlihat. */


/* -------------------------------------------------------------------------
   Lencana & label
   ------------------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.32em 0.75em;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    background-color: var(--surface-2);
    color: var(--text-2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    line-height: 1.4;
    white-space: nowrap;
}

.badge .icon {
    width: 0.95em;
    height: 0.95em;
}

.badge--accent {
    background-color: var(--accent-soft);
    border-color: var(--accent-border);
    color: var(--accent-ink);
}

.badge--warm {
    background-color: var(--highlight-soft);
    border-color: color-mix(in oklab, var(--highlight) 32%, transparent);
    color: var(--highlight-ink);
}

.badge--success {
    background-color: var(--success-soft);
    border-color: color-mix(in oklab, var(--success) 32%, transparent);
    color: var(--success);
}

.badge--mono {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}


/* -------------------------------------------------------------------------
   Kartu
   ------------------------------------------------------------------------- */

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--sp-6);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out);
}

.card--flat {
    box-shadow: none;
    background-color: var(--surface-2);
}

.card--pad-lg { padding: var(--sp-8); }

/*
   Kartu interaktif: sorotan cahaya mengikuti kursor.

   Posisinya datang dari --mx/--my yang diperbarui JS saat mouse bergerak.
   Efeknya membuat kisi layanan terasa hidup dan responsif tanpa memindahkan
   apa pun — jadi tidak ada pergeseran tata letak yang mengganggu pembacaan.
*/
.card--interactive::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(
        22rem 22rem at var(--mx, 50%) var(--my, 0%),
        color-mix(in oklab, var(--accent) 13%, transparent),
        transparent 62%
    );
    opacity: 0;
    transition: opacity var(--dur-slow) var(--ease-out);
    pointer-events: none;
}

.card--interactive:hover,
.card--interactive:focus-within {
    transform: translateY(-4px);
    border-color: var(--accent-border);
    box-shadow: var(--shadow-lg);
}

.card--interactive:hover::before,
.card--interactive:focus-within::before {
    opacity: 1;
}

/* Seluruh kartu bisa diklik, tapi hanya judulnya yang jadi tautan sungguhan.
   Cara ini menjaga HTML tetap masuk akal untuk pembaca layar (satu tautan
   dengan teks yang jelas) sekaligus memberi area klik selebar kartu. */
.card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.card__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: var(--sp-5);
    border-radius: var(--r-md);
    background-color: var(--accent-soft);
    border: 1px solid var(--accent-border);
    color: var(--accent);
    transition: transform var(--dur) var(--ease-spring),
                background-color var(--dur) var(--ease-out);
}

.card__icon .icon {
    width: 1.5rem;
    height: 1.5rem;
}

.card--interactive:hover .card__icon {
    transform: scale(1.08) rotate(-4deg);
}

.card__title {
    font-size: var(--fs-lg);
    margin-bottom: var(--sp-2);
    text-wrap: balance;
}

.card__title a {
    color: inherit;
    text-decoration: none;
}

.card__text {
    color: var(--text-2);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    flex-grow: 1;
}

.card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border-soft);
}

.card__price {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text);
}

.card__price small {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    color: var(--text-3);
}

/* Kartu unggulan — dibedakan lewat tepi bergradasi, bukan warna latar,
   supaya tetap menyatu dengan kartu lain dalam satu kisi. */
.card--featured {
    border-color: transparent;
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        var(--grad-brand) border-box;
    border: 1px solid transparent;
}


/* -------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background-color: color-mix(in oklab, var(--bg) 82%, transparent);
    border-bottom: 1px solid transparent;
    transition: background-color var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}

@supports (backdrop-filter: blur(1px)) {
    .site-header {
        backdrop-filter: saturate(150%) blur(14px);
        -webkit-backdrop-filter: saturate(150%) blur(14px);
    }
}

/* Header memadat begitu halaman digulir — memberi lebih banyak ruang baca
   dan menandakan pengunjung sudah bergerak dari puncak halaman. */
.site-header[data-scrolled="true"] {
    background-color: color-mix(in oklab, var(--bg) 92%, transparent);
    border-bottom-color: var(--border);
    box-shadow: var(--shadow-sm);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    height: 4.5rem;
    transition: height var(--dur) var(--ease-out);
}

.site-header[data-scrolled="true"] .site-header__inner {
    height: 3.875rem;
}

/* --- Logo --- */

.brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
    /* line-height 0 mencegah ruang sisa di bawah gambar sebaris, yang
       kalau dibiarkan membuat logo terlihat tidak sejajar dengan menu. */
    line-height: 0;
}

.brand__logo {
    display: block;
    height: 1.875rem;
    width: auto;
    /* Latar transparan — jangan pakai warna dasar gambar dari base.css,
       nanti muncul kotak abu di belakang logo. */
    background: none;
    transition: transform var(--dur) var(--ease-spring);
}

/*
   Pemilihan varian logo berdasarkan tema.

   Kedua berkas ada di DOM karena tema bisa diganti tanpa memuat ulang
   halaman — pendekatan <picture media="prefers-color-scheme"> akan salah
   begitu pengunjung menimpa setelan sistem lewat tombol tema.
*/
.brand__logo--on-dark { display: none; }

:root[data-theme="dark"] .brand__logo--on-light { display: none; }
:root[data-theme="dark"] .brand__logo--on-dark  { display: block; }

.brand:hover .brand__logo {
    transform: scale(1.035);
}

/* Ikut mengecil saat header memadat. */
.site-header[data-scrolled="true"] .brand__logo {
    height: 1.6875rem;
}

.brand--footer .brand__logo {
    height: 2.25rem;
}

.footer__byline {
    margin-top: var(--sp-3);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-3);
}

/* --- Navigasi utama --- */

.nav {
    display: none;
    align-items: center;
    gap: var(--sp-1);
}

@media (min-width: 60rem) {
    .nav { display: flex; }
}

.nav__link {
    position: relative;
    padding: 0.55rem 0.85rem;
    border-radius: var(--r-sm);
    color: var(--text-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
}

.nav__link:hover {
    color: var(--text);
    background-color: var(--surface-2);
}

.nav__link[aria-current="page"] {
    color: var(--text);
    font-weight: var(--fw-semibold);
}

/* Garis penanda halaman aktif. Elemennya tunggal dan digeser JS antar
   tautan, jadi perpindahannya terlihat mengalir alih-alih berkedip. */
.nav__indicator {
    position: absolute;
    bottom: 0.1rem;
    left: 0;
    height: 2px;
    width: 0;
    border-radius: 2px;
    background: var(--grad-brand);
    opacity: 0;
    transform-origin: left center;
    transition: transform var(--dur) var(--ease-out),
                width var(--dur) var(--ease-out),
                opacity var(--dur-fast) var(--ease-out);
    pointer-events: none;
}

.nav__indicator.is-visible { opacity: 1; }

.header__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.header__cta {
    display: none;
}

@media (min-width: 48rem) {
    .header__cta { display: inline-flex; }
}


/* -------------------------------------------------------------------------
   Tombol tema & bahasa
   ------------------------------------------------------------------------- */

.icon-btn {
    display: grid;
    place-items: center;
    width: 2.375rem;
    height: 2.375rem;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    background-color: var(--surface);
    color: var(--text-2);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                transform var(--dur) var(--ease-spring);
}

.icon-btn:hover {
    background-color: var(--surface-2);
    color: var(--text);
    border-color: var(--border-strong);
    transform: translateY(-1px);
}

.icon-btn .icon {
    width: 1.15rem;
    height: 1.15rem;
}

/* Matahari & bulan ditumpuk di posisi yang sama lalu ditukar dengan putaran.
   Ikon tidak sekadar berganti — ia berputar keluar dan masuk, memberi
   umpan balik bahwa tindakan pengunjung diterima. */
.theme-toggle {
    position: relative;
    overflow: hidden;
}

.theme-toggle .icon {
    position: absolute;
    transition: transform var(--dur-slow) var(--ease-spring),
                opacity var(--dur) var(--ease-out);
}

.theme-toggle .icon--sun {
    transform: rotate(0) scale(1);
    opacity: 1;
}

.theme-toggle .icon--moon {
    transform: rotate(-90deg) scale(0.4);
    opacity: 0;
}

:root[data-theme="dark"] .theme-toggle .icon--sun {
    transform: rotate(90deg) scale(0.4);
    opacity: 0;
}

:root[data-theme="dark"] .theme-toggle .icon--moon {
    transform: rotate(0) scale(1);
    opacity: 1;
}

/* Pemilih bahasa */
.lang-switch {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    background-color: var(--surface);
}

.lang-switch__item {
    padding: 0.32rem 0.65rem;
    border-radius: var(--r-full);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-3);
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.lang-switch__item:hover {
    color: var(--text);
}

.lang-switch__item[aria-current="true"] {
    background-color: var(--accent-soft);
    color: var(--accent-ink);
}


/* -------------------------------------------------------------------------
   Menu ponsel
   ------------------------------------------------------------------------- */

.nav-toggle {
    display: grid;
}

@media (min-width: 60rem) {
    .nav-toggle { display: none; }
}

.drawer {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: grid;
    grid-template-rows: auto 1fr;
    background-color: var(--bg);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--dur) var(--ease-out),
                visibility 0s linear var(--dur);
}

.drawer[data-open="true"] {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--dur) var(--ease-out);
}

.drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4.5rem;
    border-bottom: 1px solid var(--border);
}

.drawer__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    padding-block: var(--sp-8) var(--sp-10);
    overflow-y: auto;
}

.drawer__nav {
    display: flex;
    flex-direction: column;
}

/* Setiap butir masuk sedikit lebih lambat dari butir sebelumnya.
   Jeda dihitung dari --i yang dipasang di HTML. */
.drawer__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    opacity: 0;
    transform: translateY(0.75rem);
}

.drawer[data-open="true"] .drawer__link {
    animation: drawer-in var(--dur-slow) var(--ease-out) forwards;
    animation-delay: calc(60ms + var(--i, 0) * 45ms);
}

.drawer__link .icon {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--text-3);
    transition: transform var(--dur) var(--ease-out);
}

.drawer__link:hover .icon {
    transform: translateX(0.25rem);
    color: var(--accent);
}

.drawer__link[aria-current="page"] {
    color: var(--accent);
}

.drawer__footer {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    margin-top: auto;
    padding-top: var(--sp-6);
}


/* -------------------------------------------------------------------------
   Remah roti
   ------------------------------------------------------------------------- */

.breadcrumb {
    padding-block: var(--sp-5);
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-xs);
    color: var(--text-3);
}

.breadcrumb li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.breadcrumb a {
    color: var(--text-3);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--accent);
}

.breadcrumb .icon {
    width: 0.85rem;
    height: 0.85rem;
    opacity: 0.55;
}

.breadcrumb [aria-current="page"] {
    color: var(--text-2);
    font-weight: var(--fw-medium);
}


/* -------------------------------------------------------------------------
   Formulir
   ------------------------------------------------------------------------- */

.field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.field__label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text);
}

.field__label .req {
    color: var(--danger);
    margin-inline-start: 0.15em;
}

.field__hint {
    font-size: var(--fs-xs);
    color: var(--text-3);
}

.input,
.textarea,
.select {
    width: 100%;
    padding: 0.8rem 1rem;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text);
    font-size: var(--fs-sm);
    line-height: 1.5;
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
}

.input::placeholder,
.textarea::placeholder {
    color: var(--text-3);
}

.input:hover,
.textarea:hover,
.select:hover {
    border-color: var(--border-strong);
}

.input:focus,
.textarea:focus,
.select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.textarea {
    min-height: 9rem;
    resize: vertical;
}

.select {
    appearance: none;
    padding-inline-end: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371808f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 1.05rem;
    cursor: pointer;
}

:root[data-theme="dark"] .select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d7d93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
}

/* Keadaan galat */
.field[data-invalid="true"] .input,
.field[data-invalid="true"] .textarea,
.field[data-invalid="true"] .select {
    border-color: var(--danger);
    background-color: var(--danger-soft);
}

.field__error {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--danger);
}

.field__error .icon {
    width: 0.95rem;
    height: 0.95rem;
}

/* Getaran singkat saat isian ditolak — umpan balik yang langsung dipahami
   tanpa perlu dibaca. Hanya sekali, tidak berulang. */
.field[data-invalid="true"] {
    animation: shake 420ms var(--ease-out);
}

/* Kotak pencarian dengan ikon di dalam */
.search-box {
    position: relative;
    flex-grow: 1;
    min-width: min(100%, 15rem);
}

.search-box .icon {
    position: absolute;
    inset-inline-start: 1rem;
    top: 50%;
    translate: 0 -50%;
    width: 1.1rem;
    height: 1.1rem;
    color: var(--text-3);
    pointer-events: none;
}

.search-box .input {
    padding-inline-start: 2.85rem;
    border-radius: var(--r-full);
}

.search-box__clear {
    position: absolute;
    inset-inline-end: 0.45rem;
    top: 50%;
    translate: 0 -50%;
    display: grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: var(--r-full);
    color: var(--text-3);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
}

.search-box[data-filled="true"] .search-box__clear {
    opacity: 1;
    pointer-events: auto;
}

.search-box__clear:hover {
    background-color: var(--surface-3);
    color: var(--text);
}

/* --- Penilaian bintang --- */

.rating-input {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 0.2rem;
}

.rating-input input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.rating-input label {
    cursor: pointer;
    color: var(--border-strong);
    transition: color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-spring);
}

.rating-input label .icon {
    width: 1.85rem;
    height: 1.85rem;
}

/* Karena urutan visualnya dibalik (row-reverse), saudara SETELAH bintang
   yang disorot adalah bintang di KIRI-nya — jadi menyorot bintang ke-4
   ikut menyalakan bintang 1 sampai 3. */
.rating-input label:hover,
.rating-input label:hover ~ label,
.rating-input input:checked ~ label {
    color: var(--star);
    transform: scale(1.06);
}

.rating-input input:focus-visible + label {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

/* --- Kotak centang --- */

.checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--text-2);
    cursor: pointer;
}

.checkbox input {
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    accent-color: var(--accent);
    cursor: pointer;
}


/* -------------------------------------------------------------------------
   Pesan sistem
   ------------------------------------------------------------------------- */

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background-color: var(--surface-2);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
}

.alert .icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.1rem;
}

.alert--success {
    background-color: var(--success-soft);
    border-color: color-mix(in oklab, var(--success) 30%, transparent);
    color: var(--text);
}

.alert--success .icon { color: var(--success); }

.alert--error {
    background-color: var(--danger-soft);
    border-color: color-mix(in oklab, var(--danger) 30%, transparent);
    color: var(--text);
}

.alert--error .icon { color: var(--danger); }

.alert--info {
    background-color: var(--accent-soft);
    border-color: var(--accent-border);
}

.alert--info .icon { color: var(--accent); }

.alert__title {
    font-weight: var(--fw-semibold);
    color: var(--text);
    margin-bottom: 0.15rem;
}


/* -------------------------------------------------------------------------
   Akordeon (FAQ)
   ------------------------------------------------------------------------- */

.accordion {
    border-top: 1px solid var(--border);
}

.accordion__item {
    border-bottom: 1px solid var(--border);
}

.accordion__trigger {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    width: 100%;
    padding: var(--sp-5) 0;
    text-align: start;
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--text);
    transition: color var(--dur-fast) var(--ease-out);
}

.accordion__trigger:hover { color: var(--accent); }

.accordion__trigger .icon {
    flex-shrink: 0;
    width: 1.3rem;
    height: 1.3rem;
    margin-top: 0.1rem;
    color: var(--text-3);
    transition: transform var(--dur) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.accordion__trigger[aria-expanded="true"] .icon {
    transform: rotate(180deg);
    color: var(--accent);
}

/*
   Membuka-tutup dengan grid-template-rows 0fr -> 1fr.
   Ini satu-satunya cara membuat transisi tinggi yang mulus tanpa perlu
   mengukur tinggi konten lewat JavaScript.
*/
.accordion__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-slow) var(--ease-out);
}

.accordion__item[data-open="true"] .accordion__panel {
    grid-template-rows: 1fr;
}

.accordion__panel > div {
    overflow: hidden;
}

.accordion__content {
    padding-bottom: var(--sp-5);
    padding-inline-end: var(--sp-8);
    color: var(--text-2);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
}


/* -------------------------------------------------------------------------
   Testimoni
   ------------------------------------------------------------------------- */

.stars {
    display: inline-flex;
    gap: 0.1rem;
    color: var(--star);
}

.stars .icon {
    width: 1rem;
    height: 1rem;
}

.stars--empty { color: var(--border-strong); }

.testimonial {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-6);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    height: 100%;
}

.testimonial__quote {
    color: var(--text);
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
    flex-grow: 1;
}

.testimonial__author {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border-soft);
}

.avatar {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    border-radius: var(--r-full);
    background: var(--grad-brand);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: 0.02em;
}

.testimonial__name {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    color: var(--text);
}

.testimonial__role {
    font-size: var(--fs-xs);
    color: var(--text-3);
}

/*
   Korsel dengan scroll-snap asli browser.
   Tanpa JavaScript untuk menggeser: gestur usap di ponsel dan roda mouse
   di desktop sudah ditangani browser, jadi terasa alami di setiap perangkat
   dan tetap jalan meski JavaScript gagal dimuat.
*/
.carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(85%, 24rem);
    gap: var(--sp-5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-block-end: var(--sp-4);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
}

.carousel::-webkit-scrollbar { display: none; }

.carousel > * {
    scroll-snap-align: start;
}

@media (min-width: 48rem) {
    .carousel { grid-auto-columns: min(45%, 26rem); }
}

@media (min-width: 75rem) {
    .carousel { grid-auto-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; }
}

.carousel-controls {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

@media (min-width: 75rem) {
    .carousel-controls { display: none; }
}

/* Indikator kemajuan gulir — lebarnya digerakkan langsung oleh posisi
   scroll lewat animasi berbasis gulir, tanpa satu pun event listener. */
.carousel-progress {
    position: relative;
    flex-grow: 1;
    height: 3px;
    border-radius: 3px;
    background-color: var(--border);
    overflow: hidden;
}

.carousel-progress__bar {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 100%;
    border-radius: inherit;
    background: var(--grad-brand);
    transform-origin: left center;
    transform: scaleX(0.2);
}


/* -------------------------------------------------------------------------
   Statistik
   ------------------------------------------------------------------------- */

.stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.stat__value {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-extra);
    letter-spacing: var(--tracking-tight);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.stat__value .unit {
    color: var(--accent);
}

.stat__label {
    font-size: var(--fs-sm);
    color: var(--text-2);
}


/* -------------------------------------------------------------------------
   Langkah proses
   ------------------------------------------------------------------------- */

.steps {
    display: grid;
    gap: var(--sp-6);
    counter-reset: step;
}

@media (min-width: 48rem) {
    .steps--row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
}

.step {
    position: relative;
    padding-top: var(--sp-6);
    counter-increment: step;
}

.step::before {
    content: counter(step, decimal-leading-zero);
    display: block;
    margin-bottom: var(--sp-3);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-wide);
    color: var(--accent);
}

/* Garis penghubung antar langkah — hanya di layar lebar, dan tidak muncul
   setelah langkah terakhir. */
.step::after {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-border), transparent);
}

.step__title {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    margin-bottom: var(--sp-2);
}

.step__text {
    font-size: var(--fs-sm);
    color: var(--text-2);
    line-height: var(--lh-relaxed);
}


/* -------------------------------------------------------------------------
   Daftar centang manfaat
   ------------------------------------------------------------------------- */

.checklist {
    display: grid;
    gap: var(--sp-3);
    list-style: none;
    padding: 0;
    margin: 0;
}

.checklist li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    color: var(--text-2);
}

.checklist .icon {
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.22rem;
    padding: 0.15rem;
    border-radius: var(--r-full);
    background-color: var(--success-soft);
    color: var(--success);
}

.checklist--problems .icon {
    background-color: var(--danger-soft);
    color: var(--danger);
}


/* -------------------------------------------------------------------------
   Marquee — deretan berjalan tanpa putus
   ------------------------------------------------------------------------- */

.marquee {
    display: flex;
    overflow: hidden;
    gap: var(--sp-10);
    /* Memudar di kedua tepi supaya deretan terlihat berlanjut ke luar layar
       alih-alih terpotong mendadak. */
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
    display: flex;
    align-items: center;
    gap: var(--sp-10);
    flex-shrink: 0;
    min-width: 100%;
    animation: marquee 38s linear infinite;
}

.marquee:hover .marquee__track {
    animation-play-state: paused;
}

.marquee__item {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tracking-snug);
    color: var(--text-3);
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease-out);
}

.marquee__item .icon {
    width: 1.05rem;
    height: 1.05rem;
    color: var(--accent);
    opacity: 0.75;
}

.marquee:hover .marquee__item {
    color: var(--text-2);
}


/* -------------------------------------------------------------------------
   Tindakan mengambang
   ------------------------------------------------------------------------- */

.float-actions {
    position: fixed;
    inset-inline-end: var(--gutter);
    inset-block-end: var(--gutter);
    z-index: var(--z-float);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sp-3);
    pointer-events: none;
}

.float-actions > * {
    pointer-events: auto;
}

.float-btn {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--r-full);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: scale(0.4) translateY(0.75rem);
    transition: opacity var(--dur) var(--ease-out),
                transform var(--dur-slow) var(--ease-spring),
                background-color var(--dur-fast) var(--ease-out);
}

.float-btn[data-visible="true"] {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.float-btn .icon {
    width: 1.5rem;
    height: 1.5rem;
}

.float-btn--wa {
    background-color: var(--wa);
    color: var(--wa-ink);
}

.float-btn--wa:hover {
    background-color: var(--wa-strong);
    color: var(--wa-ink);
}

.float-btn--top {
    width: 2.75rem;
    height: 2.75rem;
    background-color: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-2);
}

.float-btn--top:hover {
    background-color: var(--surface-2);
    color: var(--text);
}

.float-btn--top .icon {
    width: 1.2rem;
    height: 1.2rem;
}


/* -------------------------------------------------------------------------
   Bar kemajuan navigasi
   ------------------------------------------------------------------------- */

.nav-progress {
    position: fixed;
    inset-inline: 0;
    top: 0;
    height: 2px;
    z-index: var(--z-toast);
    background: var(--grad-brand);
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 0;
    pointer-events: none;
    transition: transform var(--dur-slower) var(--ease-out),
                opacity var(--dur-fast) var(--ease-out);
}

.nav-progress[data-active="true"] {
    opacity: 1;
    transform: scaleX(0.75);
}


/* -------------------------------------------------------------------------
   Penyaring katalog
   ------------------------------------------------------------------------- */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.chip {
    padding: 0.48rem 0.95rem;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    background-color: var(--surface);
    color: var(--text-2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}

.chip:hover {
    border-color: var(--border-strong);
    color: var(--text);
}

.chip[aria-pressed="true"] {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--accent-on);
}

.filter-count {
    font-size: var(--fs-sm);
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
}


/* -------------------------------------------------------------------------
   Keadaan kosong
   ------------------------------------------------------------------------- */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-16) var(--sp-6);
    text-align: center;
}

.empty-state__icon {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: var(--r-full);
    background-color: var(--surface-2);
    color: var(--text-3);
}

.empty-state__icon .icon {
    width: 1.75rem;
    height: 1.75rem;
}


/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */

.site-footer {
    position: relative;
    margin-top: var(--section-y);
    padding-block: var(--section-y) var(--sp-8);
    background-color: var(--bg-subtle);
    border-top: 1px solid var(--border);
}

.footer__grid {
    display: grid;
    gap: var(--sp-10);
    grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
    .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (min-width: 64rem) {
    .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
}

.footer__about {
    max-width: 30rem;
}

.footer__tagline {
    margin-top: var(--sp-4);
    color: var(--text-2);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
}

.footer__heading {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: var(--sp-4);
}

.footer__list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer__list a {
    color: var(--text-2);
    font-size: var(--fs-sm);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out),
                padding-inline-start var(--dur-fast) var(--ease-out);
}

.footer__list a:hover {
    color: var(--accent);
    padding-inline-start: 0.2rem;
}

.footer__contact {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.footer__contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--text-2);
    text-decoration: none;
}

.footer__contact-item .icon {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15rem;
    color: var(--accent);
}

.footer__contact-item:hover {
    color: var(--text);
}

.socials {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
}

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-top: var(--sp-12);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--border);
    font-size: var(--fs-xs);
    color: var(--text-3);
}

.footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
}

.footer__legal a {
    color: var(--text-3);
    text-decoration: none;
}

.footer__legal a:hover {
    color: var(--text);
}