:root {
    /* ---------------------------------------------------------------------
       Palet diturunkan dari logo resmi Micho Pudding: lingkaran dusty rose
       dengan tulisan krim dan aksen buah. Cokelat pekat dipakai untuk bagian
       gelap, emas sampanye hanya untuk sentuhan kecil seperti mahkota logo.
       --------------------------------------------------------------------- */

    /* Cokelat - bagian gelap, teks utama */
    --ink: #241826;
    --ink-2: #2B1A14;
    --ink-3: #3E2820;
    --ink-soft: #4E3B52;
    --ink-muted: #7C6681;

    /* Rose - warna brand, tombol utama */
    --rose: #B54872;
    --rose-deep: #8E2F5B;
    --rose-soft: #F0D4DF;
    --rose-mist: #FBF1F5;

    /* Emas sampanye - aksen kecil, bintang, garis tipis */
    --gold: #8E3A6E;

    /* Ungu TIDAK LAGI menjadi warna merek.
       Ia dipakai hanya di dua tempat: cincin fokus papan ketik, dan status
       informasi. Sebagai warna merek ia terlalu mendominasi dan membuat panel
       terasa bukan milik toko puding; sebagai penanda ia justru berguna,
       karena tidak bisa tertukar dengan merah jambu merek. */
    --ungu: #6B54A0;
    --ungu-soft: #E7E2F3;
    --gold-soft: #F2DAE7;

    /* Krim - latar dan permukaan */
    --porcelain: #FDFAF8;
    --cream: #F8F0EE;
    --cream-deep: #EFE0DE;
    --surface: #FFFFFF;

    /* Pendukung */
    --sage: #496F56;
    --sage-tint: #E2EFE7;
    --berry: #A32A5E;
    --berry-tint: #FBE3EE;

    --line: rgba(36, 24, 38, .10);
    --line-strong: rgba(36, 24, 38, .16);
    --line-light: rgba(245, 239, 247, .18);

    /* Nama lama tetap dipertahankan supaya kelas yang sudah ada tidak rusak */
    --caramel: var(--rose);
    --caramel-dark: var(--rose-deep);
    --caramel-tint: var(--rose-soft);
    --glaze: var(--gold);
    --glaze-soft: var(--gold-soft);
    --pistachio: var(--sage);
    --pistachio-tint: var(--sage-tint);

    /* Tipografi */
    --font-display: "Playfair Display", Georgia, serif;
    --font-body: "Instrument Sans", system-ui, -apple-system, sans-serif;
    --font-mono: "DM Mono", ui-monospace, monospace;

    /* Skala huruf dikalibrasi ulang.
       Nilai sebelumnya menghasilkan judul bagian 48px dan judul hero 74px
       pada layar laptop 1440px - ukuran poster, bukan situs. Batas atasnya
       diturunkan sekitar seperlima sehingga halaman terasa pas tanpa
       kehilangan kesan editorial. */
    --fs-3xl: clamp(2.3rem, 4.4vw, 3.6rem);
    --fs-2xl: clamp(1.7rem, 3vw, 2.4rem);
    --fs-xl: clamp(1.4rem, 2.1vw, 1.75rem);
    --fs-lg: clamp(1.02rem, 1.3vw, 1.14rem);
    --fs-md: 1rem;
    --fs-sm: .9375rem;
    --fs-xs: .8125rem;
    --fs-eyebrow: .72rem;

    /* Ruang - lebih lapang, mengikuti gaya editorial */
    --gutter: clamp(20px, 4vw, 52px);
    /* Lebar isi. Dikunci 1240px membuat 35 persen layar 1920px jadi ruang
       kosong, dan halaman terasa mengambang di tengah monitor lebar.
       Nilainya dilebarkan bertahap di media query bagian bawah berkas ini. */
    --shell: 1240px;
    --shell-narrow: 800px;
    /* Jarak antarbagian dulu mencapai 104px atas dan bawah - lebih dari
       200px ruang kosong di antara dua bagian. Diturunkan jadi 78px. */
    --band: clamp(46px, 5.4vw, 78px);

    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(36, 24, 38, .05), 0 2px 10px rgba(36, 24, 38, .04);
    --shadow-md: 0 4px 14px rgba(36, 24, 38, .07), 0 14px 36px rgba(36, 24, 38, .07);
    --shadow-lg: 0 10px 28px rgba(36, 24, 38, .09), 0 32px 70px rgba(36, 24, 38, .12);

    --ease: cubic-bezier(.22, .61, .36, 1);
    --wobble: cubic-bezier(.34, 1.56, .64, 1);

    --nav-h: 78px;
}


/* ==========================================================================
   02. RESET & DASAR
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   PENTING: atribut hidden harus selalu menang.

   Peramban menyembunyikan [hidden] lewat aturan bawaannya sendiri, tetapi
   aturan bawaan itu KALAH dari display apa pun yang ditulis di berkas ini.
   Karena .mp-prod memakai display:flex, produk yang disembunyikan JavaScript
   dengan el.hidden = true tetap terlihat - itulah sebabnya penyaring kategori
   dan harga di halaman menu tampak tidak bekerja.

   Satu baris ini memperbaiki seluruh elemen yang disembunyikan lewat hidden:
   kartu produk, kaki keranjang, peringatan metode bayar, dan pesan kosong.
   -------------------------------------------------------------------------- */

[hidden] {
    display: none !important;
}


html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 16px);
}

/* Footer menempel ke bawah layar pada halaman yang isinya pendek.
   Tanpa ini, halaman seperti Cek Status Pesanan yang isinya sedikit membuat
   footer berakhir di tengah layar, dan latar krim di bawahnya terbaca sebagai
   bidang putih kosong yang terlihat seperti kesalahan. */
body {
    margin: 0;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background: var(--porcelain);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--fs-md);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img,
svg,
iframe {
    max-width: 100%;
    display: block;
}

img {
    height: auto;
}

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

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: none;
}

h1,
h2,
h3,
h4,
p,
figure {
    margin: 0;
}

/* Ikon garis dipakai konsisten di seluruh situs */
.mp-icon {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    flex: none;
}

:focus-visible {
    outline: 2px solid var(--caramel);
    outline-offset: 3px;
    border-radius: 4px;
}

::selection {
    background: var(--glaze-soft);
    color: var(--ink);
}

/* Disembunyikan dengan clip, bukan digeser ke -9999px. Cara lama memperlebar
   bidang gulir di sebagian peramban sehingga muncul batang geser mendatar
   yang tidak jelas asalnya. */
.mp-skip-link {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 999;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    background: var(--ink);
    color: var(--porcelain);
    padding: 12px 20px;
    border-radius: var(--r-pill);
}

.mp-skip-link:focus {
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ==========================================================================
   03. TIPOGRAFI
   Fraunces dipakai dengan sumbu SOFT tinggi supaya ujung hurufnya membulat —
   sifat huruf yang sama dengan sifat produknya.
   ========================================================================== */

.mp-display,
.mp-display-lg,
.mp-display-md {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ink);
    text-wrap: balance;
}

.mp-display {
    font-size: var(--fs-3xl);
}

.mp-display-lg {
    font-size: var(--fs-2xl);
    line-height: 1.12;
}

.mp-display-md {
    font-size: var(--fs-xl);
    line-height: 1.2;
}

.mp-italic {
    font-style: italic;
    
}

.mp-lede {
    font-size: var(--fs-lg);
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 46ch;
}

.mp-muted {
    color: var(--ink-muted);
}


/* Eyebrow + "genangan karamel": tanda tangan visual situs ini.
   Sebuah bentuk kecil yang menetes-mengendap, dipakai hanya di tiga tempat:
   di bawah eyebrow, di bawah item nav aktif, dan saat produk masuk keranjang. */
.mp-eyebrow {
    display: inline-block;
    position: relative;
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--caramel);
    padding-bottom: 10px;
}

/* Garis tipis, bukan gumpalan membulat. Bentuk sebelumnya terbaca sebagai
   elemen nyasar, bukan penekanan. */
.mp-eyebrow::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 28px;
    height: 2px;
    background: var(--gold);
}

.mp-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--caramel);
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: color .2s var(--ease);
}

.mp-link:hover {
    color: var(--caramel-dark);
}


/* ==========================================================================
   04. TATA LETAK
   ========================================================================== */

.mp-shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.mp-shell--narrow {
    max-width: var(--shell-narrow);
}

.mp-band {
    padding-block: var(--band);
}

.mp-band--tight {
    padding-block: clamp(40px, 6vw, 72px);
}

.mp-band--cream {
    background: var(--cream);
}


.mp-head {
    max-width: 640px;
    margin-bottom: clamp(28px, 3.4vw, 44px);
}

/* Kepala bagian bergaya editorial.
   Eyebrow berdiri sendiri di baris pertama. Judul dan tautan berbagi baris
   kedua dan disejajarkan pada garis dasar yang sama. Sebelumnya tautan
   sejajar dengan eyebrow di baris paling atas, jauh dari judulnya, sehingga
   keduanya tampak tidak berhubungan. */
.mp-head--split {
    max-width: none;
}

.mp-head--split .mp-headrow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px 32px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.mp-head--split .mp-headrow .mp-display-lg {
    margin: 0;
}

.mp-head--split .mp-link {
    flex: none;
}

@media (max-width: 760px) {
    .mp-head--split .mp-headrow {
        display: block;
    }

    .mp-head--split .mp-link {
        margin-top: 14px;
    }
}

.mp-head .mp-display-lg {
    margin-top: 12px;
}

.mp-head--center {
    margin-inline: auto;
    text-align: center;
}

.mp-head--center .mp-eyebrow::after {
    left: 50%;
    transform: translateX(-50%);
}

/* Muncul saat digulir */
.mp-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.mp-reveal.is-visible {
    opacity: 1;
    transform: none;
}


/* ==========================================================================
   05. KOMPONEN
   ========================================================================== */

/* --- Tombol --- */
.mp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 28px;
    border-radius: var(--r-pill);
    background: var(--caramel);
    color: var(--porcelain);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: .01em;
    border: 1px solid transparent;
    transition: transform .35s var(--wobble), background-color .2s var(--ease), box-shadow .2s var(--ease);
    box-shadow: 0 2px 0 var(--caramel-dark);
}

.mp-btn:hover {
    background: var(--caramel-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 0 var(--caramel-dark), var(--shadow-md);
}

.mp-btn:active {
    transform: translateY(1px) scaleY(.97);
    box-shadow: 0 0 0 var(--caramel-dark);
}

.mp-btn[disabled],
.mp-btn:disabled {
    background: var(--cream-deep);
    color: var(--ink-muted);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.mp-btn--ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--line-strong);
    box-shadow: none;
}

.mp-btn--ghost:hover {
    background: var(--ink);
    color: var(--porcelain);
    border-color: var(--ink);
    box-shadow: var(--shadow-md);
}



.mp-btn--wa {
    background: #1F8A4C;
    box-shadow: 0 2px 0 #146B39;
}

.mp-btn--wa:hover {
    background: #146B39;
    box-shadow: 0 4px 0 #146B39, var(--shadow-md);
}

.mp-btn--sm {
    padding: 10px 18px;
    font-size: var(--fs-xs);
}

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

/* --- Chip / label --- */
.mp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    background: var(--cream);
    color: var(--ink-soft);
    font-size: var(--fs-xs);
    font-weight: 600;
}

.mp-chip--ok {
    background: var(--pistachio-tint);
    color: var(--pistachio);
}

.mp-chip--warn {
    background: var(--glaze-soft);
    color: var(--caramel-dark);
}

.mp-chip--off {
    background: var(--berry-tint);
    color: var(--berry);
}

/* --- Kartu --- */
.mp-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: clamp(20px, 3vw, 32px);
    box-shadow: var(--shadow-sm);
}

/* --- Pemberitahuan --- */
.mp-note {
    display: flex;
    gap: 12px;
    padding: 16px 18px;
    border-radius: var(--r-md);
    background: var(--cream);
    border-left: 3px solid var(--caramel);
    font-size: var(--fs-sm);
    color: var(--ink-soft);
}


.mp-note--error {
    background: var(--berry-tint);
    border-left-color: var(--berry);
    color: var(--berry);
}

.mp-note strong {
    color: var(--ink);
}

/* --- Formulir --- */
.mp-field {
    margin-bottom: 20px;
}

.mp-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 8px;
}

.mp-input,
.mp-select,
.mp-textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--surface);
    font-size: var(--fs-sm);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

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

.mp-textarea {
    min-height: 96px;
    resize: vertical;
}

.mp-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23806454' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 40px;
}

.mp-hint {
    display: block;
    margin-top: 6px;
    font-size: var(--fs-xs);
    color: var(--ink-muted);
}

/* Pilihan berbentuk kartu — dipakai untuk metode bayar & opsi antar */
.mp-options {
    display: grid;
    gap: 10px;
}

.mp-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.mp-option__box {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--surface);
    cursor: pointer;
    transition: border-color .2s var(--ease), background-color .2s var(--ease);
}

.mp-option__box:hover {
    border-color: var(--caramel);
}

.mp-option input:checked+.mp-option__box {
    border-color: var(--caramel);
    background: var(--caramel-tint);
}

.mp-option input:focus-visible+.mp-option__box {
    outline: 2px solid var(--caramel);
    outline-offset: 2px;
}

.mp-option__icon {
    color: var(--caramel);
}

.mp-option__text {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}

.mp-option__name {
    font-weight: 600;
    font-size: var(--fs-sm);
}

.mp-option__desc {
    font-size: var(--fs-xs);
    color: var(--ink-muted);
}

/* --- Langkah checkout --- */
.mp-steps {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 26px;
}

.mp-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-xs);
    color: var(--ink-muted);
}

.mp-step__num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--cream);
    font-size: 12px;
    font-weight: 700;
}

.mp-step.is-done .mp-step__num {
    background: var(--pistachio);
    color: #fff;
}

.mp-step.is-active .mp-step__num {
    background: var(--caramel);
    color: #fff;
}

.mp-step.is-active {
    color: var(--ink);
    font-weight: 600;
}

.mp-step__line {
    flex: 1;
    height: 1px;
    background: var(--line-strong);
}

@media (max-width: 640px) {
    .mp-step__label {
        display: none;
    }
}

/* --- Panel geser (keranjang & checkout) --- */
.mp-sheet {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
}

.mp-sheet.is-open {
    display: block;
}

.mp-sheet__scrim {
    position: absolute;
    inset: 0;
    background: rgba(36, 22, 18, .5);
    backdrop-filter: blur(3px);
    animation: mpFade .25s var(--ease);
}

.mp-sheet__panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: min(460px, 100%);
    background: var(--porcelain);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    animation: mpSlide .3s var(--ease);
}

.mp-sheet--wide .mp-sheet__panel {
    width: min(560px, 100%);
}

.mp-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px var(--gutter);
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.mp-sheet__title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
}

.mp-sheet__close {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--cream);
    transition: background-color .2s var(--ease);
}

.mp-sheet__close:hover {
    background: var(--cream-deep);
}

.mp-sheet__body {
    flex: 1;
    overflow-y: auto;
    padding: 24px var(--gutter);
}

.mp-sheet__foot {
    padding: 20px var(--gutter);
    border-top: 1px solid var(--line);
    background: var(--surface);
    display: grid;
    gap: 10px;
}

@keyframes mpFade {
    from {
        opacity: 0;
    }
}

@keyframes mpSlide {
    from {
        transform: translateX(100%);
    }
}

@media (max-width: 560px) {
    .mp-sheet__panel {
        top: auto;
        bottom: 0;
        height: 92dvh;
        width: 100%;
        border-radius: var(--r-lg) var(--r-lg) 0 0;
        animation: mpSlideUp .3s var(--ease);
    }

    @keyframes mpSlideUp {
        from {
            transform: translateY(100%);
        }
    }
}

/* --- Keadaan kosong --- */
.mp-empty {
    text-align: center;
    padding: 56px 20px;
    color: var(--ink-muted);
}

.mp-empty__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--cream);
    color: var(--caramel);
}

.mp-empty__title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--ink);
    margin-bottom: 6px;
}

/* --- Pemuat --- */
.mp-loading {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: none;
    place-items: center;
    background: rgba(253, 250, 246, .94);
    text-align: center;
}

.mp-loading.is-open {
    display: grid;
}

.mp-loading__ring {
    width: 52px;
    height: 52px;
    margin: 0 auto 18px;
    border: 3px solid var(--cream-deep);
    border-top-color: var(--caramel);
    border-radius: 50%;
    animation: mpSpin .9s linear infinite;
}

@keyframes mpSpin {
    to {
        transform: rotate(360deg);
    }
}


/* ==========================================================================
   06. NAVIGASI
   ========================================================================== */

.mp-nav {
    position: sticky;
    top: 0;
    z-index: 150;
    background: rgba(253, 250, 246, .82);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .25s var(--ease), background-color .25s var(--ease);
}

.mp-nav.is-scrolled {
    border-bottom-color: var(--line);
    background: rgba(253, 250, 246, .95);
}

.mp-nav__row {
    height: var(--nav-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.mp-nav__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.mp-nav__brand img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.mp-nav__links {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mp-nav__links a {
    position: relative;
    padding: 8px 13px;
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    transition: color .2s var(--ease);
}

.mp-nav__links a:hover {
    color: var(--ink);
}

/* Genangan karamel di bawah tautan aktif — tanda tangan yang sama
   dengan yang ada di bawah eyebrow. */
.mp-nav__links a.is-active {
    color: var(--ink);
    font-weight: 600;
}

.mp-nav__links a.is-active::after {
    content: "";
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 0;
    height: 5px;
    background: var(--glaze);
    border-radius: 0 0 10px 10px / 0 0 7px 7px;
}

.mp-nav__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mp-nav__icon {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--ink-soft);
    transition: background-color .2s var(--ease), color .2s var(--ease);
}

.mp-nav__icon:hover {
    background: var(--cream);
    color: var(--ink);
}

.mp-nav__badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: var(--r-pill);
    background: var(--caramel);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: grid;
    place-items: center;
    border: 2px solid var(--porcelain);
}

/* Goyangan singkat saat item masuk keranjang */
.mp-nav__icon.is-bumped {
    animation: mpWobble .5s var(--wobble);
}

@keyframes mpWobble {

    0%,
    100% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.22) rotate(-7deg);
    }

    60% {
        transform: scale(.94) rotate(4deg);
    }
}

.mp-nav__toggle {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    place-items: center;
}

@media (max-width: 1024px) {
    .mp-nav__links {
        display: none;
    }

    .mp-nav__toggle {
        display: grid;
    }

    .mp-nav__cta {
        display: none;
    }
}

/* Menu seluler */
.mp-menu {
    position: fixed;
    inset: 0;
    z-index: 250;
    background: var(--porcelain);
    display: flex;
    flex-direction: column;
    padding: 20px var(--gutter) 32px;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .32s var(--ease), visibility .32s;
}

.mp-menu.is-open {
    transform: none;
    visibility: visible;
}

.mp-menu__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-h);
}

.mp-menu nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 20px;
    flex: 1;
}

.mp-menu nav a {
    padding: 15px 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
    border-bottom: 1px solid var(--line);
}


/* ==========================================================================
   07. BLOK HALAMAN DEPAN
   ========================================================================== */

/* --- Bilah kepercayaan --- */
.mp-trustbar {
    background: var(--ink);
    color: var(--cream);
}

.mp-trustbar__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 26px;
    padding-block: 14px;
    font-size: var(--fs-xs);
    letter-spacing: .03em;
}

.mp-trustbar__item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mp-trustbar__item .mp-icon {
    color: var(--glaze);
}

/* --- Pernyataan --- */
/* Kalimat pernyataan sebelumnya memakan hampir satu layar penuh sendirian.
   Jaraknya dipangkas separuh dan lebar barisnya dibatasi supaya tetap terasa
   sebagai jeda, bukan halaman kosong. */
.mp-statement {
    padding-block: clamp(40px, 5vw, 68px);
    text-align: center;
}

.mp-statement p {
    max-width: 20ch;
    margin-inline: auto;
}

.mp-statement p {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    line-height: 1.2;
    color: var(--ink);
}

.mp-statement em {
    color: var(--caramel);
}

/* --- Kartu produk (dipakai di beranda, katalog, dan produk serupa) --- */
.mp-grid {
    display: grid;
    gap: clamp(16px, 2.4vw, 28px);
}


.mp-grid--4 {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.mp-prod {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform .35s var(--wobble), box-shadow .3s var(--ease), border-color .3s var(--ease);
}

.mp-prod:hover {
    transform: translateY(-5px);
    border-color: var(--caramel-tint);
    box-shadow: var(--shadow-md);
}

.mp-prod__frame {
    position: relative;
    background: var(--cream);
    overflow: hidden;

    /* Lebar dan tampilan ditegaskan.
    
       Setelah gambar di dalamnya dijadikan melayang, bingkai ini tidak lagi
       punya isi yang menentukan ukurannya - dan tanpa lebar yang pasti,
       `aspect-ratio` tidak punya dasar untuk menghitung tinggi, sehingga
       bingkainya menciut menjadi 0x0.
    
       Dengan lebar 100%, aspect-ratio menghitung tingginya dari lebar itu. */
    display: block;
    width: 100%;
}

/* ==========================================================================
   BINGKAI FOTO PRODUK: UKURANNYA DITENTUKAN BINGKAI, BUKAN FOTONYA
   --------------------------------------------------------------------------
   `.mp-prod__frame` sudah diberi `aspect-ratio`, tetapi aturan itu TIDAK
   PERNAH BERLAKU. Penyebabnya `height: 100%` pada gambar di dalamnya:
   tinggi berbentuk persen diukur terhadap tinggi induknya, sementara tinggi
   induknya sendiri "auto" - jadi yang menentukan justru tinggi asli gambar,
   dan aspect-ratio diabaikan.

   Selama semua foto berbentuk persegi, cacat ini tidak terlihat. Begitu foto
   ponsel yang tegak diunggah, tiap kartu mengikuti tinggi fotonya
   masing-masing: yang tegak menjulang, yang mendatar memendek, dan deretan
   kartunya bergerigi.

   Gambar dijadikan melayang mengisi bingkai (`position: absolute; inset: 0`)
   sehingga tidak lagi ikut menentukan tinggi. Barulah aspect-ratio bingkainya
   berlaku, dan semua kartu sama tinggi berapa pun bentuk fotonya.
   ========================================================================== */

.mp-prod__frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    /* SELURUH FOTO TERLIHAT, TIDAK ADA YANG DIPOTONG.
    
       Semula `cover`, yang memenuhi bingkai dengan cara memotong sisi yang
       berlebih. Pada foto pesanan sungguhan itu berbahaya: tulisan "happy
       birthday papah sayang" dan nama di atas kue justru berada di tepi, dan
       itulah bagian pertama yang terbuang.
    
       Foto tegak 3:4 dalam bingkai persegi kehilangan 25% bagian atas dan
       bawahnya dengan `cover`. Dengan `contain`, seluruhnya terlihat dan sisa
       ruangnya terisi warna krim yang sama dengan latar kartu - sehingga
       tidak terbaca sebagai kotak kosong, melainkan sebagai bingkai foto. */
    object-fit: contain;
    transition: transform .5s var(--ease);
}

.mp-prod:hover .mp-prod__frame img {
    transform: scale(1.05);
}

.mp-prod__tag {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}


.mp-prod__body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.mp-prod__cat {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--caramel);
}

.mp-prod__name {
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.3;
    margin-block: 7px 6px;
}

.mp-prod__desc {
    font-size: var(--fs-xs);
    color: var(--ink-muted);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mp-prod__foot {
    margin-top: auto;
}

.mp-prod__price {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--ink);
}


/* --- Spanduk custom order --- */
.mp-promo {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    background: var(--ink);
    color: var(--cream);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.mp-promo__visual {
    position: relative;
    aspect-ratio: 5 / 4;
}

.mp-promo__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mp-promo__body {
    padding: clamp(28px, 4vw, 52px) clamp(24px, 4vw, 56px) clamp(28px, 4vw, 52px) 0;
}

.mp-promo__body .mp-display-md {
    color: var(--porcelain);
    margin-block: 14px 12px;
}

.mp-promo__body p {
    color: var(--cream-deep);
    font-size: var(--fs-sm);
    max-width: 42ch;
}

.mp-promo .mp-eyebrow {
    color: var(--glaze);
}

@media (max-width: 800px) {
    .mp-promo {
        grid-template-columns: 1fr;
    }

    .mp-promo__body {
        padding: 0 var(--gutter) clamp(28px, 5vw, 40px);
    }
}

/* --- Cerita / tentang --- */
.mp-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
}

.mp-story__visual {
    position: relative;
    padding-bottom: 56px;
    padding-right: 56px;
}

.mp-story__main {
    aspect-ratio: 4 / 5;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--cream);
}

.mp-story__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mp-story__mini {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 52%;
    aspect-ratio: 1;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 8px solid var(--porcelain);
    background: var(--cream);
}

.mp-story__mini img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}






@media (max-width: 860px) {
    .mp-story {
        grid-template-columns: 1fr;
    }
}

/* --- Angka --- */
.mp-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 24px;
    padding: clamp(28px, 4vw, 44px);
    background: var(--cream);
    border-radius: var(--r-lg);
    text-align: center;
}

.mp-stats__num {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.4vw, 2.9rem);
    font-weight: 600;
    color: var(--caramel);
    line-height: 1;
}

.mp-stats__label {
    margin-top: 8px;
    font-size: var(--fs-xs);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

/* --- Langkah pesan (urutan nyata, jadi penomoran memang bermakna) --- */
.mp-flow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: clamp(18px, 3vw, 32px);
    counter-reset: step;
}

.mp-flow__item {
    position: relative;
    padding-top: 28px;
    border-top: 2px solid var(--line);
}

.mp-flow__item::before {
    counter-increment: step;
    content: counter(step, decimal-leading-zero);
    position: absolute;
    top: -14px;
    left: 0;
    padding-right: 12px;
    background: var(--porcelain);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--caramel);
}

.mp-band--cream .mp-flow__item::before {
    background: var(--cream);
}

.mp-flow__title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.mp-flow__text {
    font-size: var(--fs-sm);
    color: var(--ink-muted);
}












/* --- Kontak --- */
.mp-contacts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(16px, 2.4vw, 24px);
    margin-bottom: 32px;
}

.mp-contact__title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.mp-contact__value {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--caramel);
}

.mp-contact__detail {
    font-size: var(--fs-xs);
    color: var(--ink-muted);
    margin-block: 4px 14px;
}

.mp-map {
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--line);
}





/* ==========================================================================
   08. KATALOG & KERANJANG
   ========================================================================== */

.mp-search {
    position: relative;
    max-width: 520px;
    margin-top: 26px;
}

.mp-search input {
    width: 100%;
    padding: 15px 20px 15px 48px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: var(--surface);
    font-size: var(--fs-sm);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.mp-search input:focus {
    outline: none;
    border-color: var(--caramel);
    box-shadow: 0 0 0 3px var(--caramel-tint);
}

.mp-search .mp-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-muted);
}









/* Barang di keranjang */
.mp-line {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.mp-line:last-child {
    border-bottom: none;
}

.mp-line__info {
    flex: 1;
    min-width: 0;
}

.mp-line__name {
    font-weight: 600;
    font-size: var(--fs-sm);
    line-height: 1.35;
}

.mp-line__meta {
    font-size: var(--fs-xs);
    color: var(--ink-muted);
    margin-top: 2px;
}

.mp-line__note {
    font-size: var(--fs-xs);
    color: var(--caramel);
    margin-top: 3px;
}

.mp-stepper {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--cream);
    border-radius: var(--r-pill);
    padding: 3px;
    flex: none;
}

.mp-stepper button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--ink);
    transition: background-color .18s var(--ease);
}

.mp-stepper button:hover {
    background: var(--surface);
}

.mp-stepper span {
    min-width: 26px;
    text-align: center;
    font-size: var(--fs-sm);
    font-weight: 700;
    font-family: var(--font-mono);
}

/* Ringkasan biaya */
.mp-summary {
    display: grid;
    gap: 9px;
    padding: 16px 18px;
    background: var(--cream);
    border-radius: var(--r-md);
}

/* Baris ringkasan biaya.
   Sebelumnya label dan nominal hanya didorong ke dua ujung, sehingga saat
   labelnya pendek ("Total") jaraknya menganga dan mata sulit menghubungkan
   keduanya. Sekarang dihubungkan garis titik-titik seperti pada bon, dan
   nominalnya disejajarkan lebar digit tetap supaya angka bertumpuk rapi. */
.mp-summary__row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-block: 5px;
    font-size: var(--fs-sm);
    color: var(--ink-soft);
}

.mp-summary__row > span:first-child {
    flex: none;
}

/* Garis penghubung antara label dan nominal */
.mp-summary__row::after {
    content: "";
    order: 1;
    flex: 1;
    align-self: center;
    height: 0;
    border-bottom: 1px dotted var(--line-strong);
    min-width: 20px;
}

.mp-summary__row > strong,
.mp-summary__row > span:last-child {
    order: 2;
    flex: none;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ink);
}

/* Total dibedakan tegas: itu satu-satunya angka yang benar-benar perlu
   diperiksa pelanggan sebelum menekan kirim. Garis titik-titik dihilangkan
   supaya tidak menyaingi angkanya. */
.mp-summary__row--total {
    padding-top: 12px;
    margin-top: 6px;
    border-top: 1px solid var(--line-strong);
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--ink);
}

.mp-summary__row strong {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--ink);
}

.mp-summary__row--total strong {
    font-family: var(--font-display);
    font-weight: 600;
}

/* Area unggah bukti */
.mp-upload {
    border: 2px dashed var(--line-strong);
    border-radius: var(--r-md);
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    background: var(--surface);
    transition: border-color .2s var(--ease), background-color .2s var(--ease);
}

.mp-upload:hover {
    border-color: var(--caramel);
    background: var(--caramel-tint);
}

.mp-upload .mp-icon {
    color: var(--caramel);
    margin: 0 auto 10px;
}

.mp-upload__title {
    font-weight: 600;
    font-size: var(--fs-sm);
}

.mp-upload__hint {
    font-size: var(--fs-xs);
    color: var(--ink-muted);
}

.mp-preview {
    position: relative;
    margin-top: 12px;
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--line);
}

.mp-preview img {
    width: 100%;
    max-height: 240px;
    object-fit: contain;
    background: var(--cream);
}

.mp-preview button {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(36, 22, 18, .78);
    color: #fff;
}

/* Rekening / QRIS */
.mp-payinfo {
    display: grid;
    gap: 8px;
    padding: 18px;
    background: var(--cream);
    border-radius: var(--r-md);
}

.mp-payinfo__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: var(--surface);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
}

.mp-payinfo__row span:first-child {
    color: var(--ink-muted);
}

.mp-payinfo__row strong {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
}



/* ==========================================================================
   09. DETAIL PRODUK / LACAK PESANAN / SUKSES
   ========================================================================== */

/* --- Remah roti --- */
.mp-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding-block: 20px;
    font-size: var(--fs-xs);
    color: var(--ink-muted);
}

.mp-crumbs a:hover {
    color: var(--caramel);
}

.mp-crumbs [aria-current] {
    color: var(--ink);
}

/* --- Detail produk --- */
.mp-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 5vw, 64px);
    align-items: start;
    padding-bottom: clamp(48px, 7vw, 80px);
}

.mp-detail__frame {
    position: sticky;
    top: calc(var(--nav-h) + 24px);
    aspect-ratio: 1;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--cream);
    border: 1px solid var(--line);
}

.mp-detail__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mp-detail__name {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 600;
    line-height: 1.15;
    margin-block: 10px 12px;
}

.mp-detail__price {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 600;
    color: var(--caramel);
}

.mp-detail__desc {
    margin-block: 20px 26px;
    color: var(--ink-soft);
    font-size: var(--fs-sm);
    line-height: 1.75;
}

.mp-detail__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 24px;
}

@media (max-width: 900px) {
    .mp-detail {
        grid-template-columns: 1fr;
        padding-bottom: 96px;
    }

    .mp-detail__frame {
        position: static;
    }

    /* Bilah pesan menempel di bawah pada layar sempit */
    .mp-detail__actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 120;
        margin: 0;
        padding: 12px var(--gutter);
        background: var(--porcelain);
        border-top: 1px solid var(--line);
        box-shadow: 0 -4px 20px rgba(36, 22, 18, .07);
    }
}

/* --- Lacak pesanan --- */
.mp-track {
    padding-block: clamp(36px, 6vw, 64px);
}

.mp-track__form {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}

.mp-track__form .mp-input {
    flex: 1;
}

@media (max-width: 560px) {
    .mp-track__form {
        flex-direction: column;
    }
}




/* Garis waktu status — vertikal di ponsel, mendatar di layar lebar */
.mp-timeline {
    display: grid;
    gap: 0;
    margin-bottom: 30px;
}

.mp-tl {
    position: relative;
    display: flex;
    gap: 14px;
    padding-bottom: 26px;
}

.mp-tl:last-child {
    padding-bottom: 0;
}

.mp-tl::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 32px;
    bottom: 0;
    width: 2px;
    background: var(--line-strong);
}

.mp-tl:last-child::before {
    display: none;
}

.mp-tl.is-done::before {
    background: var(--pistachio);
}

.mp-tl__dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex: none;
    display: grid;
    place-items: center;
    background: var(--cream);
    color: var(--ink-muted);
    border: 2px solid var(--porcelain);
    z-index: 1;
}

.mp-tl.is-done .mp-tl__dot {
    background: var(--pistachio);
    color: #fff;
}

.mp-tl.is-cancelled .mp-tl__dot {
    background: var(--berry);
    color: #fff;
}

.mp-tl__label {
    font-weight: 600;
    font-size: var(--fs-sm);
    line-height: 1.9;
}

.mp-tl__desc {
    font-size: var(--fs-xs);
    color: var(--ink-muted);
}


.mp-block__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 12px;
}

.mp-block__title .mp-icon {
    color: var(--caramel);
}

.mp-block__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--line);
    font-size: var(--fs-sm);
}

.mp-block__row:last-child {
    border-bottom: none;
}

.mp-block__row strong {
    font-family: var(--font-mono);
    font-weight: 500;
    white-space: nowrap;
}

.mp-block__text {
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    line-height: 1.6;
}

.mp-block__text strong {
    display: block;
    color: var(--ink);
}

/* --- Halaman sukses --- */
.mp-success {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: clamp(28px, 6vw, 64px) var(--gutter);
    background:
        radial-gradient(70% 50% at 50% 0%, var(--caramel-tint) 0%, transparent 65%),
        var(--porcelain);
}

.mp-success__card {
    width: 100%;
    max-width: 620px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: clamp(28px, 5vw, 52px);
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.mp-success__mark {
    width: 68px;
    height: 68px;
    margin: 0 auto 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--pistachio-tint);
    color: var(--pistachio);
    animation: mpPop .55s var(--wobble);
}

@keyframes mpPop {
    from {
        transform: scale(.4);
        opacity: 0;
    }
}

.mp-success__title {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 600;
    margin-block: 14px 8px;
}

.mp-receipt {
    text-align: left;
    margin-block: 28px;
    padding: 20px 22px;
    background: var(--cream);
    border-radius: var(--r-md);
    display: grid;
    gap: 10px;
}

.mp-receipt__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    font-size: var(--fs-sm);
}

.mp-receipt__row span {
    color: var(--ink-muted);
    display: flex;
    align-items: center;
    gap: 7px;
}

.mp-receipt__row strong {
    font-family: var(--font-mono);
    font-weight: 500;
    text-align: right;
}

.mp-receipt__row--big strong {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--caramel);
}


/* ==========================================================================
   10. FOOTER & UTILITAS
   ========================================================================== */

.mp-footer {
    background: var(--ink);
    color: var(--cream-deep);
    padding-top: clamp(48px, 6vw, 76px);
}

/* Kolom identitas lebih lebar daripada kolom tautan: isinya paragraf dan
   lencana, sementara kolom lain hanya daftar tautan pendek. */
.mp-footer__grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1.4fr;
    gap: clamp(28px, 4vw, 56px);
    padding-bottom: clamp(32px, 4vw, 48px);
}

.mp-footer__brand {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: var(--font-display);
    font-size: 1.32rem;
    font-weight: 600;
    color: var(--porcelain);
    margin-bottom: 14px;
}

.mp-footer__brand img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    border-radius: 50%;
}

.mp-footer__text {
    font-size: var(--fs-xs);
    line-height: 1.7;
    color: rgba(233, 220, 213, .78);
    max-width: 36ch;
}

/* Penanda kepercayaan: garis tipis, bukan kotak berlatar. Di atas cokelat
   pekat, latar terang justru terlalu menarik perhatian. */
.mp-footer__marks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
}

.mp-footer__marks span {
    padding: 4px 11px;
    border: 1px solid rgba(233, 220, 213, .20);
    border-radius: var(--r-pill);
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(233, 220, 213, .72);
}

.mp-footer__title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 15px;
}

.mp-footer__links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: var(--fs-xs);
}

.mp-footer__links a {
    color: rgba(233, 220, 213, .82);
    width: max-content;
    transition: color .2s var(--ease);
}

.mp-footer__links a:hover {
    color: var(--gold);
}

/* Kontak sebagai daftar berikon. Ikon disejajarkan ke baris pertama teks,
   bukan ke tengah, supaya alamat dua baris tetap rapi. */
.mp-footer__contact {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.mp-footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--fs-xs);
    line-height: 1.6;
    color: rgba(233, 220, 213, .82);
}

.mp-footer__contact .mp-icon {
    flex: none;
    margin-top: 3px;
    color: var(--gold);
}

.mp-footer__contact a {
    color: inherit;
    transition: color .2s var(--ease);
}

.mp-footer__contact a:hover {
    color: var(--gold);
}

.mp-social {
    display: flex;
    gap: 8px;
    margin-top: 20px;
}

.mp-social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid rgba(233, 220, 213, .22);
    color: rgba(233, 220, 213, .82);
    transition: background-color .2s var(--ease), border-color .2s var(--ease),
        color .2s var(--ease), transform .2s var(--ease);
}

.mp-social a:hover {
    transform: translateY(-2px);
}

/* Glif media sosial digambar penuh, bukan garis.
   Aturan .mp-icon global memakai fill:none dan stroke, yang membuat glif
   resmi tampil sebagai bayangan berlubang. Kelas ini menimpanya. */
.mp-social__glyph {
    width: 17px;
    height: 17px;
    fill: currentColor;
    stroke: none;
    display: block;
}

.mp-social a:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--ink);
}

/* --- Baris metode pembayaran --- */

.mp-footer__pay {
    display: flex;
    align-items: center;
    gap: 14px 22px;
    flex-wrap: wrap;
    padding-block: 20px;
    border-top: 1px solid rgba(233, 220, 213, .14);
    border-bottom: 1px solid rgba(233, 220, 213, .14);
}

.mp-footer__paylabel {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(233, 220, 213, .55);
}

.mp-paylogos {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Logo bank dan QRIS umumnya berwarna dan dirancang untuk latar terang.
   Diberi alas putih supaya tampil sebagaimana mestinya, dan tingginya
   dikunci agar logo dengan proporsi berbeda tetap sejajar. */
.mp-paylogo {
    display: grid;
    place-items: center;
    height: 34px;
    min-width: 62px;
    padding: 5px 12px;
    background: var(--porcelain);
    border-radius: var(--r-sm);
}

.mp-paylogo img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

/* Cadangan bila logo resmi belum diunggah: nama metodenya saja.
   Tidak memakai lambang yang bukan hak kita. */
.mp-paylogo--text {
    background: transparent;
    border: 1px solid rgba(233, 220, 213, .22);
    color: rgba(233, 220, 213, .82);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
}

.mp-footer__bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 20px;
    padding-block: 20px 24px;
    font-size: 11px;
    color: rgba(233, 220, 213, .55);
}

.mp-footer__bottom a {
    color: inherit;
    border-bottom: 1px solid rgba(233, 220, 213, .28);
    transition: color .2s var(--ease);
}

.mp-footer__bottom a:hover {
    color: var(--gold);
}

@media (max-width: 900px) {
    .mp-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .mp-footer__brandcol {
        grid-column: 1 / -1;
    }
}

@media (max-width: 540px) {
    .mp-footer__grid {
        grid-template-columns: 1fr;
    }

    .mp-footer__bottom {
        flex-direction: column;
        gap: 6px;
    }
}

/* Tombol kembali ke atas */
.mp-top {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 130;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ink);
    color: var(--porcelain);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all .3s var(--ease);
}

.mp-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* WhatsApp mengambang — hanya di halaman katalog & detail */
.mp-wa {
    position: fixed;
    right: 18px;
    bottom: 74px;
    z-index: 130;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #1F8A4C;
    color: #fff;
    box-shadow: var(--shadow-md);
    transition: transform .3s var(--wobble);
}

.mp-wa:hover {
    transform: scale(1.08);
}


.mp-center {
    text-align: center;
}


.mp-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}


/* ==========================================================================
   14. HERO GELAP

   Menggantikan hero terang. Foto dessert dipasang penuh sebagai latar dengan
   selubung gelap di sisi kiri, supaya tulisan tetap terbaca tanpa menutupi
   produknya. Bagian bawah melengkung ke atas — bentuk yang sama dipakai lagi
   sebagai pemisah antarbagian, jadi lengkung itu menjadi tanda tangan situs.
   ========================================================================== */

/* Hero mengisi tinggi layar.
   Sebelumnya tingginya hanya sebesar isinya ditambah padding, sehingga pada
   monitor tinggi masih tersisa ruang kosong di bawah sebelum lengkungan.
   Sekarang tingginya mengikuti layar, dengan batas atas 940px supaya di
   monitor sangat tinggi isinya tidak jadi terpencar terlalu jauh.

   Satuan svh dipakai, bukan vh: di ponsel, vh dihitung dari layar tanpa
   bilah alamat peramban, sehingga bagian bawah hero tertutup bilah itu. */
.mp-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: clamp(600px, 100svh, 940px);
    background: var(--ink);
    color: var(--porcelain);
    padding-block: calc(var(--nav-h) + 32px) clamp(96px, 13vw, 168px);
    overflow: hidden;
}

/* Peramban lama yang belum mengenal svh tetap dapat tinggi yang masuk akal. */
@supports not (height: 100svh) {
    .mp-hero {
        min-height: clamp(600px, 100vh, 940px);
    }
}

.mp-hero > .mp-shell {
    width: 100%;
}

.mp-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.mp-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% center;
}

/* Selubung: pekat di kiri tempat teks berada, bening di kanan tempat
   fotonya perlu terlihat jelas. */
.mp-hero__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(100deg,
            rgba(36, 24, 38, .96) 0%,
            rgba(36, 24, 38, .90) 30%,
            rgba(36, 24, 38, .58) 52%,
            rgba(36, 24, 38, .30) 74%,
            rgba(36, 24, 38, .45) 100%);
}

@media (max-width: 860px) {
    .mp-hero__veil {
        background: linear-gradient(180deg,
                rgba(36, 24, 38, .94) 0%,
                rgba(36, 24, 38, .86) 46%,
                rgba(36, 24, 38, .55) 100%);
    }

    .mp-hero__bg img {
        object-position: 60% 40%;
    }
}

.mp-hero .mp-eyebrow {
    color: var(--rose-soft);
}

.mp-hero .mp-eyebrow::after {
    background: var(--rose);
}

.mp-hero__inner {
    max-width: 620px;
}

.mp-hero__title {
    color: var(--porcelain);
    margin-block: 20px 22px;
}

.mp-hero__title em {
    font-style: italic;
    color: var(--rose-soft);
}

.mp-hero .mp-lede {
    color: rgba(252, 248, 246, .80);
}

/* Lengkung penutup hero. Dibuat dengan border-radius, bukan SVG,
   supaya ikut menyesuaikan lebar layar tanpa gambar tambahan. */
.mp-curve {
    position: absolute;
    left: -6%;
    right: -6%;
    bottom: -6vw;
    height: 12vw;
    min-height: 56px;
    background: var(--porcelain);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    z-index: 0;
}



/* --- Tiga kartu keterangan di bawah hero --- */

.mp-hero__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-top: clamp(32px, 4vw, 46px);
    max-width: 760px;
}

.mp-fcard {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px 20px;
    background: rgba(252, 248, 246, .96);
    backdrop-filter: blur(8px);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    color: var(--ink);
}

.mp-fcard__icon {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: var(--r-sm);
    display: grid;
    place-items: center;
    background: var(--rose-mist);
    color: var(--rose);
}

.mp-fcard__num {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ink);
}

.mp-fcard__text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.mp-fcard__text strong {
    font-size: var(--fs-sm);
    font-weight: 600;
}

.mp-fcard__text span {
    font-size: var(--fs-xs);
    color: var(--ink-muted);
}


/* ==========================================================================
   15. ORNAMEN PEMISAH

   Garis tipis dengan belah ketupat di tengah, meniru pemisah pada undangan
   dan menu restoran. Dipakai di bawah judul bagian utama saja, tidak di
   setiap judul, supaya tetap terasa istimewa.
   ========================================================================== */

.mp-ornament {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.mp-head--center .mp-ornament {
    justify-content: center;
}

.mp-ornament::before,
.mp-ornament::after {
    content: "";
    width: clamp(40px, 8vw, 84px);
    height: 1px;
    background: linear-gradient(to right, transparent, var(--gold), transparent);
}

.mp-ornament span {
    width: 7px;
    height: 7px;
    background: var(--gold);
    transform: rotate(45deg);
    flex: none;
}


/* ==========================================================================
   16. NAVBAR DI ATAS HERO GELAP
   ========================================================================== */

.mp-nav--over {
    position: absolute;
    inset: 0 0 auto 0;
    background: transparent;
    backdrop-filter: none;
    border-bottom: none;
    color: var(--porcelain);
}

.mp-nav--over .mp-nav__brand,
.mp-nav--over .mp-nav__links a,
.mp-nav--over .mp-nav__icon {
    color: rgba(252, 248, 246, .88);
}

.mp-nav--over .mp-nav__links a:hover,
.mp-nav--over .mp-nav__links a.is-active {
    color: var(--porcelain);
}

.mp-nav--over .mp-nav__links a.is-active::after {
    background: var(--rose);
}

.mp-nav--over .mp-nav__icon:hover {
    background: rgba(252, 248, 246, .12);
    color: var(--porcelain);
}

.mp-nav--over .mp-nav__badge {
    border-color: var(--ink);
}

.mp-nav--over .mp-nav__toggle {
    color: var(--porcelain);
}

/* Begitu digulir melewati hero, navbar kembali menempel dan berlatar terang. */
.mp-nav--over.is-stuck {
    position: fixed;
    background: rgba(252, 248, 246, .95);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    animation: mpDrop .3s var(--ease);
}

@keyframes mpDrop {
    from {
        transform: translateY(-100%);
    }
}

.mp-nav--over.is-stuck .mp-nav__brand,
.mp-nav--over.is-stuck .mp-nav__links a,
.mp-nav--over.is-stuck .mp-nav__icon {
    color: var(--ink-soft);
}

.mp-nav--over.is-stuck .mp-nav__links a.is-active,
.mp-nav--over.is-stuck .mp-nav__brand {
    color: var(--ink);
}

.mp-nav--over.is-stuck .mp-nav__icon:hover {
    background: var(--cream);
}

.mp-nav--over.is-stuck .mp-nav__badge {
    border-color: var(--porcelain);
}


/* ==========================================================================
   17. KARTU NILAI (Dibuat Dengan Cinta)
   ========================================================================== */

.mp-values-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: clamp(14px, 2.4vw, 26px);
    margin-top: 30px;
}

.mp-vcard {
    text-align: center;
}

.mp-vcard__icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--rose-mist);
    color: var(--rose);
}

.mp-vcard strong {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.35;
}

.mp-vcard span {
    font-size: var(--fs-xs);
    color: var(--ink-muted);
}


/* ==========================================================================
   18. GARIS WAKTU LACAK PESANAN MENDATAR

   Di layar lebar lima tahap dibaca kiri ke kanan seperti pada mockup.
   Di ponsel kembali menurun, karena mendatar akan terlalu sempit.
   ========================================================================== */

@media (min-width: 800px) {
    .mp-timeline--row {
        display: flex;
        align-items: flex-start;
        gap: 0;
    }

    .mp-timeline--row .mp-tl {
        flex: 1;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding-bottom: 0;
        gap: 10px;
    }

    /* Garis penghubung ditarik mendatar di belakang lingkaran tahap. */
    .mp-timeline--row .mp-tl::before {
        left: 50%;
        right: -50%;
        top: 21px;
        bottom: auto;
        width: auto;
        height: 2px;
    }

    .mp-timeline--row .mp-tl__dot {
        width: 44px;
        height: 44px;
    }

    .mp-timeline--row .mp-tl__label {
        line-height: 1.3;
        font-size: var(--fs-xs);
    }

    .mp-timeline--row .mp-tl__desc {
        font-size: 11.5px;
        max-width: 16ch;
        margin-inline: auto;
    }
}


/* Tombol bergaris untuk dipakai di atas latar gelap. */
.mp-btn--outline {
    background: transparent;
    color: var(--porcelain);
    border-color: rgba(252, 248, 246, .45);
    box-shadow: none;
}

.mp-btn--outline:hover {
    background: var(--porcelain);
    color: var(--ink);
    border-color: var(--porcelain);
    box-shadow: var(--shadow-md);
}


/* ==========================================================================
   19. PENYEMPURNAAN HALAMAN MENU

   Masalah pada versi sebelumnya: kepala halaman memakan hampir satu layar
   penuh sebelum satu produk pun terlihat, dan penyaring ikut tergulir hilang
   begitu daftar produk mulai dijelajahi.
   ========================================================================== */

.mp-catalog-head {
    padding-block: clamp(28px, 4vw, 44px) 0;
    background:
        radial-gradient(60% 90% at 8% 0%, var(--rose-mist) 0%, transparent 58%),
        var(--porcelain);
}

.mp-catalog-head .mp-display-lg {
    margin-top: 10px;
}

.mp-catalog-head .mp-lede {
    margin-top: 8px;
    max-width: 48ch;
}




/* ==========================================================================
   20. KARTU PRODUK YANG DISEMPURNAKAN

   Foto produk mitra kebanyakan tegak. Bingkai persegi memotongnya terlalu
   ketat sehingga kue terlihat terpenggal. Rasio 4:5 memberi ruang yang lebih
   sesuai dengan foto aslinya.
   ========================================================================== */

.mp-prod__frame {
    aspect-ratio: 4 / 5;
}

.mp-grid--3 {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.mp-prod__body {
    padding: 16px 18px 18px;
}

/* Harga dan tombol disejajarkan mendatar supaya kartu tidak terlalu tinggi
   dan harga tetap jadi hal pertama yang terbaca setelah nama. */
.mp-prod__foot {
    padding-top: 14px;
}

.mp-prod__price {
    font-size: 1.15rem;
    margin-bottom: 10px;
}

/* Tombol WhatsApp per produk dipindah jadi ikon di pojok foto: masih
   terjangkau, tetapi tidak lagi menggandakan tinggi setiap kartu. */
.mp-prod__wa {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(252, 248, 246, .94);
    color: #1F8A4C;
    box-shadow: var(--shadow-sm);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s var(--ease), transform .25s var(--ease), background-color .2s;
}

.mp-prod:hover .mp-prod__wa,
.mp-prod__wa:focus-visible {
    opacity: 1;
    transform: none;
}

.mp-prod__wa:hover {
    background: #1F8A4C;
    color: #fff;
}

@media (hover: none) {
    .mp-prod__wa {
        opacity: 1;
        transform: none;
    }
}

/* Penanda stok tipis di atas foto, bukan lencana besar yang menutupi produk */
.mp-prod__tag {
    background: var(--rose);
    color: #fff;
}

.mp-prod__tag--off {
    background: rgba(36, 24, 38, .82);
    color: var(--cream);
}


/* Pembungkus foto produk. Tombol WhatsApp diposisikan terhadap kotak ini,
   bukan terhadap seluruh kartu, supaya menempel pada fotonya. */
.mp-prod__media {
    position: relative;
}


/* ==========================================================================
   21. PENYEMPURNAAN KERANJANG & CHECKOUT
   ========================================================================== */

/* RINGKASAN TIDAK LAGI MENEMPEL DI BAWAH.
   
   Niat awalnya baik: total selalu terlihat sambil mengisi formulir panjang.
   Tetapi position: sticky membuatnya melayang di atas isi yang berada SEBELUM
   ringkasan dalam susunan halaman - dan pada langkah pembayaran, yang berada
   sebelumnya adalah GAMBAR KODE QRIS beserta petunjuk memindainya.
   
   Jadi bilah itu menutupi hal yang justru paling harus terlihat. Pelanggan
   yang ingin memindai kodenya harus menggulir lebih jauh dulu supaya kodenya
   keluar dari balik bilah - dan sebagian tidak akan sadar harus melakukannya.
   
   Sekarang ringkasan berada di alirannya sendiri, tepat di atas tombol
   Lanjut. Totalnya tetap terlihat justru pada saat ia paling dibutuhkan:
   ketika pelanggan hendak menekan tombol berikutnya.
   
   Yang hilang: total tidak lagi terlihat saat menggulir di tengah formulir.
   Itu kehilangan yang kecil - nominalnya tidak berubah selama mengisi data,
   jadi tidak ada yang perlu dipantau. */
.mp-sheet__body .mp-summary {
    margin-top: 20px;
    padding: 16px 18px;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--cream);
}

/* CATATAN: baris total TIDAK diberi aturan tambahan di sini.
   .mp-summary__row--total sudah punya garis pemisah dan jaraknya sendiri
   (baris 1666). Menuliskannya ulang dengan nilai sedikit berbeda hanya akan
   menimpa yang sudah benar, dan menciptakan dua tempat yang harus diubah
   bersamaan bila suatu saat jaraknya disesuaikan. */

/* Angka nominal disejajarkan supaya subtotal, ongkir, dan total mudah
   dibandingkan secara vertikal. */
.mp-summary__row strong,
.mp-line__meta strong,
.mp-prod__price,
.mp-receipt__row strong {
    font-variant-numeric: tabular-nums;
}

/* Tanda muat ulang pada tombol kirim, supaya tidak diklik dua kali */
.mp-btn.is-busy {
    pointer-events: none;
    opacity: .7;
}

/* Barang keranjang diberi pemisah lebih lembut dan jarak sentuh yang cukup
   untuk jari di layar ponsel. */
.mp-stepper button {
    width: 34px;
    height: 34px;
}

@media (max-width: 560px) {
    .mp-line {
        padding-block: 16px;
    }
}

/* Kolom isian yang salah ditandai jelas, bukan hanya lewat pesan melayang */
.mp-input:invalid:not(:placeholder-shown),
.mp-select:invalid,
.mp-textarea:invalid:not(:placeholder-shown) {
    border-color: var(--berry);
}

/* Pilihan metode bayar yang terpilih diberi tanda centang, bukan hanya
   perubahan warna - lebih mudah dilihat pengguna yang sulit membedakan warna. */
.mp-option input:checked + .mp-option__box::after {
    content: "";
    width: 18px;
    height: 18px;
    margin-left: auto;
    flex: none;
    border-radius: 50%;
    background: var(--rose) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}


/* ==========================================================================
   22. KARTU KATEGORI

   CATATAN PENTING
   Elemen pembungkus di sini berupa <span>, dan span bersifat sebaris.
   Pada elemen sebaris, aspect-ratio diabaikan sepenuhnya - itulah sebabnya
   foto tidak pernah menjadi persegi dan tinggi tiap kartu berbeda-beda,
   membuat baris nama dan jumlah menu tidak sejajar. display: block di bawah
   inilah perbaikannya. Jangan dihapus.
   ========================================================================== */

.mp-cats {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: clamp(10px, 1.4vw, 18px);
    align-items: start;
}

.mp-cat {
    display: block;
    text-align: center;
}

.mp-cat__frame {
    display: block;
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--cream);
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.mp-cat:hover .mp-cat__frame {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.mp-cat__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
}

.mp-cat:hover .mp-cat__frame img {
    transform: scale(1.08);
}

/* Selubung tipis menyatukan foto yang pencahayaannya bermacam-macam,
   sehingga deretannya terlihat sebagai satu kesatuan. */
.mp-cat__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(36, 24, 38, .18), transparent 52%);
    pointer-events: none;
}

.mp-cat__blank {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: repeating-linear-gradient(135deg,
            var(--cream) 0 9px,
            var(--cream-deep) 9px 18px);
}

.mp-cat__initial {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 600;
    color: rgba(181, 72, 114, .40);
    line-height: 1;
}

.mp-cat__body {
    display: block;
    padding-top: 11px;
}

/* Tinggi tetap dua baris supaya jumlah menu sejajar di seluruh deretan,
   berapa pun panjang nama kategorinya. */
.mp-cat__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.3em;
    font-family: var(--font-display);
    font-size: .87rem;
    font-weight: 600;
    line-height: 1.22;
    color: var(--ink);
    transition: color .2s var(--ease);
}

.mp-cat:hover .mp-cat__name {
    color: var(--rose-deep);
}

.mp-cat__count {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--ink-muted);
}

@media (max-width: 1180px) {
    .mp-cats {
        grid-template-columns: repeat(4, 1fr);
    }

    .mp-cat__name {
        font-size: .95rem;
    }

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

@media (max-width: 620px) {
    .mp-cats {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ==========================================================================
   23. PERINGKAT MENU FAVORIT

   Nomor besar hanya boleh dipakai bila urutannya memang bermakna. Sejak
   Home::rankBySales() menghitung dari data transaksi nyata, nomor 01 benar
   berarti produk paling banyak terjual - bukan yang namanya paling awal.
   ========================================================================== */

/* Kartu produk memakai overflow:hidden agar sudut fotonya membulat.
   Akibatnya nomor peringkat yang sengaja menonjol keluar tepi ikut terpotong.
   Pemotongan dipindahkan ke bingkai foto, sehingga kartunya bebas dan
   sudut foto tetap membulat. */
.mp-rank {
    position: relative;
    overflow: visible;
}

.mp-rank .mp-prod__frame {
    border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
}

/* Angka peringkat diletakkan menimpa tepi foto, setengah keluar dari kartu.
   Ukurannya besar karena itulah informasi utamanya. */
.mp-rank__num {
    position: absolute;
    top: -14px;
    left: -6px;
    z-index: 3;
    font-family: var(--font-display);
    font-size: clamp(3rem, 5vw, 4.4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    color: var(--porcelain);
    -webkit-text-stroke: 1.5px var(--rose);
    text-shadow: 0 2px 12px rgba(36, 24, 38, .18);
    pointer-events: none;
}

.mp-rank:first-child .mp-rank__num {
    color: var(--gold);
    -webkit-text-stroke: 1.5px var(--ink);
}

/* Jumlah terjual - bukti angka yang membenarkan penomoran di atas */
.mp-sold {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 4px 11px;
    border-radius: var(--r-pill);
    background: var(--rose-mist);
    color: var(--rose-deep);
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.mp-sold--new {
    background: var(--cream);
    color: var(--ink-muted);
}


/* Lencana kurasi. Emas, bukan rose, supaya jelas berbeda dari lencana
   "Paling Laris" yang menandakan data penjualan - bukan pilihan pemilik. */
.mp-prod__tag--pick {
    background: var(--gold);
    color: var(--ink);
}


/* ==========================================================================
   24. TABEL INFORMASI PRODUK

   Berat, ukuran, porsi, ketahanan, penyimpanan, komposisi. Disusun sebagai
   daftar definisi, bukan tabel, karena isinya pasangan istilah dan
   keterangan - itu makna yang tepat secara semantik dan lebih mudah dibaca
   pembaca layar.
   ========================================================================== */

.mp-spec {
    margin-top: 26px;
    padding: 22px 24px;
    background: var(--cream);
    border-radius: var(--r-md);
    border: 1px solid var(--line);
}

.mp-spec__title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-strong);
}

.mp-spec__list {
    margin: 0;
    display: grid;
    gap: 0;
}

.mp-spec__row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--line);
    font-size: var(--fs-sm);
}

.mp-spec__row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.mp-spec__row dt {
    color: var(--ink-muted);
}

.mp-spec__row dd {
    margin: 0;
    color: var(--ink);
    line-height: 1.55;
}

/* Di layar sempit label dan isi ditumpuk, karena kolom 130px menyisakan
   ruang terlalu sedikit untuk keterangan panjang seperti komposisi. */
@media (max-width: 520px) {
    .mp-spec__row {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .mp-spec__row dt {
        font-size: var(--fs-xs);
        letter-spacing: .04em;
        text-transform: uppercase;
    }
}


/* ==========================================================================
   25. IRAMA & RESPONSIF MENYELURUH

   Pemeriksaan terakhir atas jarak antarbagian dan perilaku di layar sempit.
   ========================================================================== */

/* Dua bagian berlatar sama yang bersebelahan tidak perlu jarak ganda.
   Sebelumnya padding bawah bagian pertama bertumpuk dengan padding atas
   bagian berikutnya, menghasilkan celah hampir dua ratus piksel. */
.mp-band + .mp-band {
    padding-top: 0;
}

.mp-band--cream + .mp-band--cream {
    padding-top: 0;
}

/* Bagian berlatar berbeda tetap butuh jarak penuh supaya batasnya terbaca. */
.mp-band--cream + .mp-band:not(.mp-band--cream),
.mp-band:not(.mp-band--cream) + .mp-band--cream {
    padding-top: var(--band);
}

/* Judul besar dibatasi lebarnya. Tanpa batas ini, "Dessert Collection" pada
   layar lebar terentang sampai membuat baris berikutnya sulit ditemukan. */
.mp-display-lg {
    max-width: 18ch;
}

.mp-head--center .mp-display-lg {
    max-width: none;
}

/* Gambar tidak pernah melampaui lebar induknya, apa pun rasionya. */
img {
    max-width: 100%;
    height: auto;
}

/* Tabel dan blok panjang tidak memaksa halaman menggulir mendatar */
.mp-shell {
    overflow-wrap: break-word;
}


/* --- Layar sedang --- */
@media (max-width: 1024px) {
    :root {
        --band: clamp(48px, 6vw, 80px);
    }
}

/* --- Tablet --- */
@media (max-width: 768px) {
    .mp-hero__cards {
        grid-template-columns: 1fr 1fr;
    }

    .mp-story__visual {
        padding-bottom: 40px;
        padding-right: 40px;
    }

    .mp-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Ponsel --- */
@media (max-width: 560px) {
    :root {
        --band: 44px;
        --nav-h: 64px;
    }

    .mp-hero__cards {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .mp-hero__actions {
        display: grid;
        gap: 10px;
    }

    .mp-hero__actions .mp-btn {
        width: 100%;
    }

    .mp-display-lg {
        max-width: none;
    }

    /* Foto kecil yang menimpa foto besar dikembalikan sejajar: pada layar
       sempit tumpukan itu menutupi bagian penting foto utamanya. */
    .mp-story__visual {
        padding: 0;
    }

    .mp-story__mini {
        position: static;
        width: 100%;
        aspect-ratio: 16 / 9;
        border: none;
        margin-top: 10px;
    }

    .mp-stats {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
        padding: 22px 16px;
    }

    .mp-contacts {
        grid-template-columns: 1fr;
    }

    /* Tombol mengambang tidak menutupi tombol pesan di detail produk */
    .mp-wa {
        bottom: 82px;
    }

    .mp-top {
        bottom: 82px;
        right: 14px;
    }
}

/* --- Ponsel kecil --- */
@media (max-width: 380px) {
    /* Kategori tetap dua kolom. Satu kolom membuat kartunya membesar lagi,
       persis masalah yang baru diperbaiki. Dua kolom masih terbaca di 320px. */
    .mp-grid--3 {
        grid-template-columns: 1fr;
    }
}

/* Layar sentuh: target sentuh minimal 44px sesuai pedoman aksesibilitas */
@media (pointer: coarse) {

    .mp-nav__icon,
    .mp-sheet__close,
    .mp-chip2 {
        min-height: 44px;
    }

    .mp-stepper button {
        width: 40px;
        height: 40px;
    }
}


/* ==========================================================================
   26. HIASAN LATAR

   Ornamen yang sangat samar, bukan pola mencolok. Tujuannya memberi tekstur
   pada bidang krim yang luas supaya tidak terbaca sebagai halaman kosong -
   bukan menarik perhatian ke dirinya sendiri. Semuanya CSS murni, tanpa
   berkas gambar tambahan.
   ========================================================================== */

/* Titik-titik halus. Kerapatannya sengaja rendah; pada layar biasa hampir
   tidak terlihat, tetapi bidang kosong jadi terasa bertekstur. */
.mp-band--dotted {
    position: relative;
    isolation: isolate;
}

.mp-band--dotted::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(circle, rgba(181, 72, 114, .14) 1px, transparent 1px);
    background-size: 26px 26px;
    /* Titik memudar ke tepi supaya polanya tidak berhenti mendadak */
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 78%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 78%);
    pointer-events: none;
}

/* Cahaya hangat samar di belakang bagian bertema krim */
.mp-band--glow {
    position: relative;
    isolation: isolate;
}

.mp-band--glow::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* SAPUAN KEDUA DIPERBAIKI.
     *
     * Sebelumnya rgba(201, 164, 91, .10) - itu nilai --gold LAMA, yaitu emas
     * #C9A45B, ditulis langsung sehingga tidak ikut berubah saat token
     * dipetakan ulang ke plum.
     *
     * Akibatnya bagian cerita punya semburat emas kecokelatan di pojok kanan
     * bawah, sementara seluruh halaman lain sudah merah jambu dan ungu. Warna
     * itu satu-satunya sisa palet lama yang masih terlihat pengunjung.
     *
     * Sekarang: merah jambu di kiri atas, ungu lembut di kanan bawah -
     * pasangan yang sama dengan hero, sehingga kedua bagian terasa satu
     * keluarga saat digulir berurutan. */
    background:
        radial-gradient(62% 52% at 12% 8%,
            var(--rose-mist) 0%,
            transparent 62%),
        radial-gradient(54% 48% at 90% 88%,
            rgba(122, 74, 158, .11) 0%,
            transparent 64%);
    pointer-events: none;
}

/* Garis emas tipis sebagai pembatas antarbagian, memudar di kedua ujung.
   Lebih halus daripada garis penuh selebar halaman. */
.mp-rule {
    height: 1px;
    margin-inline: auto;
    max-width: var(--shell);
    /* Warnanya masih emas palet lama (#C9A45B) yang ditulis langsung.
       Garis ini memisahkan bagian Menu dari bagian Cerita, jadi ia terlihat
       tepat di tengah halaman - satu-satunya garis emas di antara elemen
       yang seluruhnya merah jambu. */
    background: linear-gradient(to right,
            transparent,
            var(--rose-soft) 22%,
            var(--rose-soft) 78%,
            transparent);
}


/* ==========================================================================
   27. PEMBENAHAN JARAK

   Pemeriksaan akhir atas irama vertikal setelah kepala bagian dibuat
   rata tengah.
   ========================================================================== */

/* Kepala rata tengah butuh jarak bawah lebih besar daripada kepala rata kiri:
   mata perlu jeda sebelum turun ke deretan kartu. */
.mp-head--center {
    margin-bottom: clamp(32px, 4vw, 48px);
}

.mp-head--center .mp-display-lg {
    margin-inline: auto;
}

/* Ornamen di bawah judul rata tengah tidak perlu jarak sebesar itu */
.mp-head--center .mp-ornament {
    margin-top: 12px;
}

/* Tombol di bawah deretan kartu: jaraknya dikunci, tidak mengikuti clamp
   yang dipakai jarak antarbagian. */
.mp-mt-lg {
    margin-top: clamp(26px, 3vw, 38px);
}


/* ==========================================================================
   28. PENYARING & PENGURUTAN HALAMAN MENU

   Penyaring mendatar di atas daftar produk, bukan di samping. Pilihannya
   membungkus ke baris berikutnya alih-alih digeser ke samping, sehingga
   seluruh kategori terbaca sekaligus tanpa ada yang tersembunyi di luar layar.
   ========================================================================== */

.mp-catalog-head .mp-search {
    margin-top: 20px;
    max-width: 420px;
}

.mp-filters {
    display: grid;
    gap: 14px;
    margin-top: 22px;
    padding-bottom: clamp(20px, 2.6vw, 28px);
}

/* Label sejajar di kiri dengan lebar tetap, jadi deretan "Kategori" dan
   "Harga" rata satu sama lain. */
.mp-filters__group {
    display: flex;
    align-items: baseline;
    gap: 14px;
}

.mp-filters__label {
    flex: none;
    width: 66px;
    padding-top: 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.mp-filters__opts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.mp-chip2 {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-strong);
    background: var(--surface);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ink-soft);
    white-space: nowrap;
    transition: all .2s var(--ease);
}

.mp-chip2:hover {
    border-color: var(--rose);
    color: var(--rose-deep);
}

.mp-chip2.is-active {
    background: var(--rose);
    border-color: var(--rose);
    color: #fff;
}

.mp-chip2__n {
    padding: 1px 7px;
    border-radius: var(--r-pill);
    background: var(--cream);
    color: var(--ink-muted);
    font-size: 10.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.mp-chip2.is-active .mp-chip2__n {
    background: rgba(255, 255, 255, .26);
    color: #fff;
}


/* --- Baris hasil dan pengurutan --- */

.mp-resultbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    flex-wrap: wrap;
    padding-block: 18px 20px;
    border-top: 1px solid var(--line);
}

.mp-resultbar__count {
    font-size: var(--fs-xs);
    color: var(--ink-muted);
}

.mp-resultbar__count strong {
    color: var(--ink);
    font-weight: 600;
}

.mp-resultbar__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.mp-resultbar__clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--r-pill);
    background: var(--rose-mist);
    color: var(--rose-deep);
    font-size: var(--fs-xs);
    font-weight: 600;
    transition: background-color .2s var(--ease);
}

.mp-resultbar__clear:hover {
    background: var(--rose-soft);
}

/* Pilihan pengurutan. Panah digambar sendiri dan ditumpuk di atas select,
   karena panah bawaan peramban tampil berbeda di tiap sistem operasi. */
.mp-sort {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: var(--surface);
    cursor: pointer;
    transition: border-color .2s var(--ease);
}

.mp-sort:hover,
.mp-sort:focus-within {
    border-color: var(--rose);
}

.mp-sort__label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.mp-sort__select {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0 18px 0 0;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
}

.mp-sort__select:focus {
    outline: none;
}

.mp-sort__arrow {
    position: absolute;
    right: 12px;
    color: var(--ink-muted);
    pointer-events: none;
}

@media (max-width: 720px) {
    .mp-catalog-head .mp-search {
        max-width: none;
    }

    /* Label pindah ke atas: lebar tetap 66px memakan ruang yang seharusnya
       untuk pilihannya di layar sempit. */
    .mp-filters__group {
        display: block;
    }

    .mp-filters__label {
        display: block;
        width: auto;
        padding-top: 0;
        margin-bottom: 8px;
    }

    .mp-resultbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .mp-resultbar__right {
        width: 100%;
        justify-content: space-between;
    }
}


/* ==========================================================================
   29. HIASAN TAMBAHAN

   Tiga ornamen, semuanya CSS murni. Dipakai masing-masing di satu tempat
   saja supaya tetap terasa istimewa, bukan jadi wallpaper.
   ========================================================================== */



/* TANDA KUTIP BESAR DIHAPUS.
   
   Alasannya bukan selera, melainkan makna: tanda kutip memberi tahu pembaca
   bahwa kalimat di bawahnya adalah UCAPAN SESEORANG. Padahal itu kalimat
   merek Micho sendiri, bukan kutipan dari siapa pun - tidak ada nama, tidak
   ada sumber. Tanda kutip yang tidak menunjuk pada siapa-siapa membuat
   pembaca sesaat mencari penuturnya, lalu tidak menemukannya.
   
   Ornamen yang membuat orang bertanya-tanya bukan ornamen yang berhasil. */
.mp-statement {
    position: relative;
}

/* Sudut lengkung tipis pada bingkai foto cerita, meniru sudut album foto */
.mp-story__main {
    position: relative;
}

.mp-story__main::after {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(252, 248, 246, .22);
    border-radius: calc(var(--r-lg) - 6px);
    pointer-events: none;
}




/* Daftar periksa pada bagian Custom Order. Dipakai di atas latar cokelat,
   jadi centangnya emas supaya cukup kontras tanpa jadi mencolok. */
.mp-checks {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: grid;
    gap: 9px;
}

.mp-checks li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--fs-sm);
    color: var(--cream-deep);
    line-height: 1.5;
}

.mp-checks .mp-icon {
    flex: none;
    margin-top: 3px;
    color: var(--gold);
    stroke-width: 2.2;
}


/* ==========================================================================
   30. GALERI MICHO

   Susunan tidak seragam: dua foto lebar di ujung, empat persegi di tengah.
   Grid yang seluruhnya sama ukuran terbaca sebagai katalog produk, bukan
   feed. Ukuran yang berbeda membuatnya terasa seperti unggahan sungguhan.

   Fotonya diambil dari katalog yang dikelola admin, bukan daftar tetap di
   dalam berkas view.
   ========================================================================== */

.mp-feed {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.mp-feed__item {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--cream);
}

/* Dua foto ini membentang dua kolom, jadi rasionya mendatar */
.mp-feed__item--wide {
    grid-column: span 2;
    aspect-ratio: 2 / 1;
}

.mp-feed__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
}

.mp-feed__item:hover img {
    transform: scale(1.05);
}

/* Selubung dan lambang Instagram muncul saat disorot, menandakan foto ini
   membawa ke luar situs. */
.mp-feed__veil {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(36, 24, 38, .42);
    color: var(--porcelain);
    opacity: 0;
    transition: opacity .3s var(--ease);
}

.mp-feed__item:hover .mp-feed__veil,
.mp-feed__item:focus-visible .mp-feed__veil {
    opacity: 1;
}

@media (max-width: 860px) {
    .mp-feed {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 520px) {
    .mp-feed {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    /* Di dua kolom, foto lebar akan memenuhi seluruh baris dan merusak
       irama feed, jadi dikembalikan persegi seperti yang lain. */
    .mp-feed__item--wide {
        grid-column: span 1;
        aspect-ratio: 1;
    }
}


/* ==========================================================================
   32. LAYAR LEBAR

   Lebar isi dilebarkan bertahap, bukan dibiarkan mengikuti layar sepenuhnya.
   Baris teks yang terlalu panjang justru sulit dibaca, jadi ada batasnya -
   1440px pada layar 1600px ke atas, 1560px pada 2000px ke atas.
   ========================================================================== */

@media (min-width: 1600px) {
    :root {
        --shell: 1440px;
        --gutter: 60px;
    }

    /* Kolom teks hero ikut melebar sedikit supaya tidak terlihat sempit
       di tengah bidang yang lebih luas. */
    .mp-hero__inner {
        max-width: 700px;
    }

    .mp-hero__cards {
        max-width: 860px;
    }
}

@media (min-width: 2000px) {
    :root {
        --shell: 1560px;
        --gutter: 72px;
    }

    .mp-hero__inner {
        max-width: 760px;
    }
}

/* Paragraf tetap dibatasi lebarnya meski wadahnya melebar. Baris sepanjang
   1500px hampir mustahil dibaca dengan nyaman. */
@media (min-width: 1600px) {

    .mp-lede,
    .mp-statement p {
        max-width: 62ch;
    }
}


/* ==========================================================================
   33. MOTIF LATAR GALERI

   Kotak-kotak samar di belakang deretan foto, meniru kisi unggahan pada
   halaman profil Instagram. Motifnya menjelaskan bagian ini adalah feed,
   bukan katalog produk — dua hal yang tampilannya mudah tertukar karena
   sumber fotonya sama.

   Sengaja nyaris tak terlihat: yang harus menonjol tetap fotonya.
   ========================================================================== */

.mp-band--feed {
    position: relative;
    isolation: isolate;
}

.mp-band--feed::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(to right, rgba(181, 72, 114, .09) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(181, 72, 114, .09) 1px, transparent 1px);
    background-size: 96px 96px;
    /* Kisi memudar ke tepi supaya polanya tidak berhenti mendadak */
    -webkit-mask-image: radial-gradient(ellipse 72% 66% at 50% 50%, #000 34%, transparent 82%);
    mask-image: radial-gradient(ellipse 72% 66% at 50% 50%, #000 34%, transparent 82%);
    pointer-events: none;
}


/* ==========================================================================
   34. GARIS PANDU HERO

   Dua garis tipis vertikal di sisi kiri hero, sejajar dengan tepi kolom
   teks. Fungsinya menegaskan garis awal tulisan pada bidang foto yang ramai,
   sekaligus memberi kesan bidang tercetak.

   Disembunyikan di bawah 1024px: pada layar sempit teks sudah rapat ke tepi,
   dan garis tambahan justru membuat sesak.
   ========================================================================== */

.mp-hero__rule {
    position: absolute;
    top: 50%;
    left: calc(var(--gutter) - 22px);
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    pointer-events: none;
}

.mp-hero__rule span {
    width: 1px;
    height: 56px;
    background: linear-gradient(to bottom, transparent, rgba(233, 220, 213, .34), transparent);
}

/* Belah ketupat emas di antara kedua garis, tanda pengenal yang sama dengan
   ornamen pemisah antarbagian. */
.mp-hero__rule i {
    width: 5px;
    height: 5px;
    background: var(--gold);
    transform: rotate(45deg);
}

@media (max-width: 1024px) {
    .mp-hero__rule {
        display: none;
    }
}


/* ==========================================================================
   35. PENYEMPURNAAN CHECKOUT
   ========================================================================== */

/* Penanda isian wajib. Kata "wajib" dipakai, bukan tanda bintang: tanda
   bintang perlu dijelaskan di tempat lain, sementara kata ini langsung
   dimengerti dan terbaca pembaca layar. */
.mp-req {
    margin-left: 7px;
    padding: 1px 7px;
    border-radius: var(--r-pill);
    background: var(--berry-tint);
    color: var(--berry);
    font-size: 10px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Sorotan sesaat ketika metode bayar belum dipilih. Pesan melayang saja
   mudah terlewat pada formulir sepanjang ini, jadi bagian yang kurang
   ditandai langsung di tempatnya. */
.mp-field.is-missing {
    animation: mpMissing 2.4s var(--ease);
    border-radius: var(--r-md);
}

@keyframes mpMissing {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(142, 47, 63, 0);
    }

    12%,
    72% {
        box-shadow: 0 0 0 3px rgba(142, 47, 63, .22);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mp-field.is-missing {
        animation: none;
        box-shadow: 0 0 0 3px rgba(142, 47, 63, .22);
    }
}

/* --- Kotak QRIS --- */

.mp-qrisbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    text-align: center;
}

/* Kode QRIS diberi alas putih dan batas ukuran. Kode yang terlalu kecil
   sulit dipindai, yang terlalu besar memakan seluruh panel. */
.mp-qris {
    width: min(220px, 100%);
    height: auto;
    background: #fff;
    border-radius: var(--r-sm);
}

.mp-qrisbox .mp-hint {
    margin: 0;
    max-width: 34ch;
}

/* --- Rekening tujuan transfer --- */

/* Nomor rekening memakai huruf lebar tetap dan diberi jarak antarkarakter,
   supaya angka yang panjang lebih mudah dibaca dan disalin tanpa salah. */
.mp-payinfo__row strong {
    font-family: var(--font-mono);
    letter-spacing: .02em;
}

.mp-payinfo__row:first-child strong {
    font-family: var(--font-body);
    letter-spacing: 0;
}


/* Total tidak memakai garis titik-titik. */
.mp-summary__row--total::after {
    display: none;
}

/* Label total dibuat ikut menonjol, dan nominalnya diberi ruang lebih. */
.mp-summary__row--total > span:first-child {
    flex: 1;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
}

.mp-summary__row--total > strong {
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: -.01em;
}


/* ==========================================================================
   36. PANEL LANGKAH CHECKOUT

   Tiga panel dalam satu formulir. Data tetap terkirim sekali di akhir, jadi
   tidak ada pesanan separuh tersimpan bila pelanggan berhenti di tengah.
   ========================================================================== */

.mp-pane {
    animation: mpPaneIn .28s var(--ease);
}

@keyframes mpPaneIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mp-pane {
        animation: none;
    }
}

/* Kalimat pengantar tiap panel: menjelaskan apa yang diminta di langkah ini,
   supaya pelanggan tidak perlu menduga dari isian yang muncul. */
.mp-pane__lead {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-sm);
    color: var(--ink-muted);
}

/* Langkah yang sudah dilewati diberi centang, bukan angka. Menandakan
   selesai, bukan sekadar bukan-sekarang. */
.mp-step.is-done .mp-step__num {
    background: var(--sage);
    border-color: var(--sage);
    color: #fff;
}

.mp-step.is-done .mp-step__num::after {
    content: "✓";
}

.mp-step.is-done .mp-step__num > * {
    display: none;
}

/* --- Ringkasan produk pada langkah pertama --- */

.mp-revrow {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    gap: 10px;
    align-items: baseline;
    padding: 11px 0;
    border-bottom: 1px dashed var(--line);
    font-size: var(--fs-sm);
}

.mp-revrow:last-child {
    border-bottom: none;
}

.mp-revrow__qty {
    font-family: var(--font-mono);
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

.mp-revrow__name {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
}

.mp-revrow__note {
    font-size: var(--fs-xs);
    color: var(--ink-muted);
}

.mp-revrow__sum {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* --- Navigasi antar langkah --- */

.mp-navstep {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

/* Tombol Kembali dibuat lebih kecil daripada Lanjut: keduanya sah, tetapi
   maju adalah arah yang diharapkan. */
.mp-navstep .mp-btn--ghost {
    flex: none;
}


/* Pilihan pembayaran yang tidak berlaku untuk cara pengambilan yang dipilih.
   Diredupkan dan dimatikan, bukan disembunyikan: pelanggan tetap tahu
   pilihan itu ada dan kenapa belum bisa dipakai. */
.mp-option.is-disabled {
    opacity: .48;
    cursor: not-allowed;
}

.mp-option.is-disabled .mp-option__box {
    pointer-events: none;
}


/* ==========================================================================
   37. RIWAYAT PESANAN

   Muncul saat pencarian nomor WhatsApp menemukan lebih dari satu pesanan.
   Pelanggan memilih sendiri yang mana, tidak dipaksa ke yang terbaru -
   yang dicari orang seringkali justru pesanan lama yang belum selesai.
   ========================================================================== */

.mp-history {
    display: grid;
    gap: 10px;
}

.mp-hrow {
    display: grid;
    grid-template-columns: 1fr auto 20px;
    align-items: center;
    gap: 16px;
    padding: 15px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}

.mp-hrow:hover {
    border-color: var(--rose);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.mp-hrow__main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

/* Nomor pesanan memakai huruf lebar tetap: pelanggan sering membandingkannya
   dengan yang tertulis di pesan WhatsApp, jadi harus mudah dicocokkan. */
.mp-hrow__num {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink);
}

.mp-hrow__meta {
    font-size: var(--fs-xs);
    color: var(--ink-muted);
}

.mp-hrow__right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
}

.mp-hrow__total {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.mp-hrow__arrow {
    color: var(--ink-muted);
    transition: transform .2s var(--wobble), color .2s var(--ease);
}

.mp-hrow:hover .mp-hrow__arrow {
    color: var(--rose);
    transform: translateX(3px);
}

/* Di layar sempit, nominal dan status turun ke baris kedua supaya nomor
   pesanan tidak terpotong. */
@media (max-width: 560px) {
    .mp-hrow {
        grid-template-columns: 1fr 20px;
        row-gap: 10px;
    }

    .mp-hrow__right {
        grid-column: 1;
        justify-content: space-between;
        width: 100%;
    }

    .mp-hrow__arrow {
        grid-row: 1;
        grid-column: 2;
    }
}


/* ==========================================================================
   38. HALAMAN CEK STATUS PESANAN

   Versi sebelumnya banyak ruang kosong: garis waktu terlalu renggang, kartu
   rincian terlalu lapang, dan kolom kanan sering kosong sementara kolom kiri
   penuh. Diperbaiki tanpa mengubah warna maupun jenis huruf.
   ========================================================================== */

/* --- Kepala pesanan: nomor, status, total --- */

.mp-track__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    flex-wrap: wrap;
    padding: 18px 22px;
    background: var(--ink);
    color: var(--porcelain);
    border-radius: var(--r-md) var(--r-md) 0 0;
}

/* Nomor pesanan dibuat paling menonjol: itu yang dicocokkan pelanggan
   dengan pesan WhatsApp yang diterimanya. */
.mp-track__num {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mp-track__num small {
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(233, 220, 213, .6);
}

.mp-track__num strong {
    font-family: var(--font-mono);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: .01em;
}

.mp-track__sum {
    display: flex;
    align-items: center;
    gap: 18px;
}

.mp-track__total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.mp-track__total small {
    font-size: 10.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(233, 220, 213, .6);
}

.mp-track__total strong {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* --- Garis waktu dirapatkan --- */

@media (min-width: 800px) {

    /* Jarak antartahap dikurangi dan lingkarannya diperkecil. Enam tahap
       dengan lingkaran 44px terasa terlampau renggang di layar biasa. */
    .mp-timeline--row .mp-tl__dot {
        width: 34px;
        height: 34px;
    }

    .mp-timeline--row .mp-tl::before {
        top: 16px;
    }

    .mp-timeline--row .mp-tl {
        gap: 8px;
    }

    .mp-timeline--row .mp-tl__label {
        font-size: 12px;
    }

    /* Deskripsi satu baris, lebar dibatasi supaya tidak menabrak tahap
       sebelahnya. */
    .mp-timeline--row .mp-tl__desc {
        font-size: 11px;
        max-width: 15ch;
        line-height: 1.35;
    }
}

/* Tahap yang belum berjalan dibuat lebih redup, tahap aktif diberi lingkaran
   luar supaya langsung terlihat di antara enam tahap. */
.mp-tl:not(.is-done) .mp-tl__dot {
    opacity: .5;
}

.mp-tl.is-current .mp-tl__dot {
    box-shadow: 0 0 0 4px var(--rose-mist);
}

.mp-tl.is-current .mp-tl__label {
    color: var(--rose-deep);
    font-weight: 600;
}

/* --- Rincian dua kolom yang seimbang --- */

.mp-track__grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 18px;
    align-items: start;
}



/* Baris keterangan dirapatkan: 14px antarbaris cukup untuk dibaca tanpa
   membuat kartunya memanjang. */
.mp-track__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-block: 6px;
    font-size: var(--fs-sm);
}

.mp-track__row span:first-child {
    color: var(--ink-muted);
    flex: none;
}

.mp-track__row span:last-child,
.mp-track__row strong {
    text-align: right;
}

@media (max-width: 780px) {
    .mp-track__grid {
        grid-template-columns: 1fr;
    }

    .mp-track__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .mp-track__sum {
        width: 100%;
        justify-content: space-between;
    }

    .mp-track__total {
        align-items: flex-start;
    }
}


/* Tombol pucat untuk dipakai di atas bidang cokelat, seperti pada bagian
   Custom Order. Kontrasnya cukup tanpa memakai warna rose yang sudah dipakai
   tombol utama di bidang terang. */
.mp-btn--pale {
    background: var(--cream);
    color: var(--ink);
    border-color: var(--cream);
}

.mp-btn--pale:hover {
    background: var(--porcelain);
    border-color: var(--porcelain);
    box-shadow: var(--shadow-md);
}


/* Isi halaman mengisi ruang sisa, mendorong footer ke bawah. */
body > main {
    flex: 1 0 auto;
}

body > footer {
    flex: none;
}

/* Peramban lama yang belum mengenal svh */
@supports not (height: 100svh) {
    body {
        min-height: 100vh;
    }
}


/* ==========================================================================
   NOTA PELANGGAN
   --------------------------------------------------------------------------
   Halaman nota yang dibuka pelanggan dari tautan WhatsApp.

   Tiga hal yang membedakannya dari halaman lain:

   1. TABEL DI PONSEL. Tabel nota punya empat kolom; di layar 360px kolom
      itu akan saling menghimpit sampai angka rupiah pecah jadi dua baris.
      Di bawah 640px tabelnya berubah bentuk jadi kartu bertumpuk, memakai
      atribut data-th sebagai label kolomnya.

   2. ATURAN CETAK. Nota memang untuk dicetak, jadi navbar, footer, dan
      tombol disembunyikan saat mencetak - yang keluar dari printer hanya
      lembar notanya.

   3. ANGKA SEJAJAR. Semua nominal memakai font mono dan rata kanan supaya
      digit satuan, ribuan, dan jutaan berbaris lurus dan mudah dibandingkan.
   ========================================================================== */

.mp-nota-wrap {
    max-width: 820px;
    margin: 0 auto;
    padding: clamp(20px, 4vw, 40px) var(--gutter) clamp(48px, 7vw, 88px);
}

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

.mp-nota-aksi {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    margin-bottom: 18px;
}

.mp-nota-aksi--bawah {
    justify-content: center;
    margin: 22px 0 0;
}

/* Di ponsel tombolnya melebar penuh dan menumpuk. Tombol setengah lebar
   yang berdampingan terlalu sempit untuk disentuh dengan nyaman. */
@media (max-width: 560px) {
    .mp-nota-aksi {
        justify-content: stretch;
    }

    .mp-nota-aksi .mp-btn {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* ---------- Lembar nota ---------- */

.mp-nota {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    padding: clamp(20px, 4vw, 38px);
}

.mp-nota__kepala {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--ink);
}

.mp-nota__brand h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 3vw, 1.6rem);
    font-weight: 600;
    line-height: 1.15;
}

.mp-nota__brand p {
    margin: 6px 0 0;
    font-size: var(--fs-xs);
    color: var(--ink-muted);
    line-height: 1.5;
}

.mp-nota__id {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.mp-nota__doc {
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.mp-nota__num {
    font-family: var(--font-mono);
    font-size: var(--fs-md);
    font-weight: 500;
}

.mp-nota__stamp {
    display: inline-block;
    margin-top: 2px;
    padding: 3px 12px;
    border-radius: var(--r-pill);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.mp-nota__stamp.is-ok {
    background: var(--sage-tint);
    color: var(--sage);
}

.mp-nota__stamp.is-due {
    background: var(--berry-tint);
    color: var(--berry);
}

/* Di layar sempit, kepala nota menumpuk dan rata kiri semua. Nomor pesanan
   yang rata kanan sementara nama brand rata kiri terlihat patah. */
@media (max-width: 560px) {
    .mp-nota__id {
        text-align: left;
        align-items: flex-start;
    }
}

/* ---------- Tiga kolom data ---------- */

.mp-nota__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
}

@media (max-width: 720px) {
    .mp-nota__cols {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .mp-nota__cols {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

.mp-nota__lbl {
    display: block;
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 7px;
}

.mp-nota__cols strong {
    display: block;
    font-size: var(--fs-sm);
    line-height: 1.4;
}

.mp-nota__cols p {
    margin: 3px 0 0;
    font-size: var(--fs-xs);
    color: var(--ink-muted);
    line-height: 1.5;
}

/* ---------- Tabel produk ---------- */

.mp-nota__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 22px;
}

.mp-nota__tabel {
    width: 100%;
    border-collapse: collapse;
}

.mp-nota__tabel th {
    text-align: left;
    padding: 10px 12px;
    background: var(--cream);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    white-space: nowrap;
}

.mp-nota__tabel td {
    padding: 12px;
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-sm);
    vertical-align: top;
}

.mp-nota__tabel .num {
    text-align: right;
    font-family: var(--font-mono);
    white-space: nowrap;
}

.mp-nota__tabel th.num {
    text-align: right;
}

.mp-nota__tabel td small {
    display: block;
    margin-top: 3px;
    font-size: var(--fs-xs);
    color: var(--ink-muted);
}

/* Tabel menjadi kartu bertumpuk di ponsel.
   Setiap sel memakai data-th sebagai label di sisi kiri, sehingga angka
   tetap punya konteks walau kolomnya sudah tidak ada. */
@media (max-width: 640px) {
    .mp-nota__scroll {
        overflow-x: visible;
    }

    .mp-nota__tabel thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .mp-nota__tabel tr {
        display: block;
        padding: 12px 0;
        border-bottom: 1px solid var(--line);
    }

    .mp-nota__tabel td {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        padding: 3px 0;
        border: 0;
        text-align: right;
    }

    .mp-nota__tabel td::before {
        content: attr(data-th);
        font-size: var(--fs-xs);
        font-weight: 600;
        color: var(--ink-muted);
        text-align: left;
    }

    /* Baris nama produk tampil penuh sebagai judul kartu, tanpa label. */
    .mp-nota__tabel td:first-child {
        display: block;
        text-align: left;
        font-weight: 600;
        margin-bottom: 6px;
    }

    .mp-nota__tabel td:first-child::before {
        display: none;
    }
}

/* ---------- Ringkasan biaya ---------- */

.mp-nota__sum {
    margin: 20px 0 0 auto;
    width: min(300px, 100%);
}

.mp-nota__sum > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 0;
    font-size: var(--fs-sm);
}

.mp-nota__sum > div > span:last-child {
    font-family: var(--font-mono);
}

.mp-nota__grand {
    margin-top: 6px;
    padding-top: 12px !important;
    border-top: 2px solid var(--ink);
    font-family: var(--font-display);
    font-size: var(--fs-lg) !important;
    font-weight: 600;
}

.mp-nota__grand span:last-child {
    font-family: var(--font-display) !important;
}

/* ---------- Blok uang muka ---------- */

.mp-nota__dp {
    margin-top: 24px;
    padding: 18px 20px;
    background: var(--rose-mist);
    border: 1px solid var(--rose-soft);
    border-radius: var(--r-md);
}

.mp-nota__dprow {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 7px 0;
    font-size: var(--fs-sm);
}

.mp-nota__dprow strong {
    font-family: var(--font-mono);
    white-space: nowrap;
}

.mp-nota__dprow em {
    display: block;
    font-size: var(--fs-xs);
    font-style: normal;
    color: var(--ink-muted);
    margin-top: 2px;
}

/* Sisa tagihan diberi warna berbeda dan garis pemisah: inilah angka yang
   harus benar-benar disiapkan pelanggan saat datang mengambil pesanan. */
.mp-nota__dprow--sisa {
    border-top: 1px solid var(--rose-soft);
    margin-top: 4px;
    padding-top: 11px;
}

.mp-nota__dprow--sisa strong {
    color: var(--berry);
    font-size: var(--fs-lg);
}

.mp-nota__dpnote {
    margin: 12px 0 0;
    font-size: var(--fs-xs);
    line-height: 1.6;
    color: var(--ink-soft);
}

.mp-nota__dpnote .mono {
    font-family: var(--font-mono);
}

/* ---------- Catatan ---------- */

.mp-nota__note {
    margin-top: 18px;
    padding: 14px 16px;
    background: var(--cream);
    border-left: 3px solid var(--rose);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.mp-nota__note strong {
    display: block;
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rose-deep);
    margin-bottom: 5px;
}

.mp-nota__note p {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.6;
}

/* ---------- Kaki ---------- */

.mp-nota__kaki {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    margin-top: 26px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: var(--fs-xs);
    color: var(--ink-muted);
}

/* ---------- Aturan cetak ----------
   Yang keluar dari printer hanya lembar notanya. Navbar, footer, dan tombol
   aksi tidak ada gunanya di atas kertas dan hanya menghabiskan satu halaman
   tambahan. */
@media print {
    @page {
        size: A4;
        margin: 14mm;
    }

    body {
        background: #fff;
    }

    .mp-nav,
    .mp-footer,
    .mp-nota-aksi,
    .mp-toast,
    .mp-fab {
        display: none !important;
    }

    .mp-nota-wrap {
        padding: 0;
        max-width: none;
    }

    .mp-nota {
        box-shadow: none;
        border: 0;
        border-radius: 0;
        padding: 0;
    }

    /* Warna latar blok DP harus tetap tercetak. Tanpa baris ini, sebagian
       peramban membuangnya demi menghemat tinta, dan bagian terpenting nota
       justru jadi kotak putih tanpa penanda. */
    .mp-nota__dp,
    .mp-nota__note,
    .mp-nota__tabel th {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Baris produk tidak boleh terpotong di antara dua halaman. */
    .mp-nota__tabel tr {
        break-inside: avoid;
    }
}


/* ==========================================================================
   BLOK UANG MUKA DI CHECKOUT
   --------------------------------------------------------------------------
   Muncul di langkah 3 saat metode "Ambil Sendiri di Store" dipilih.

   Diberi latar dan bingkai tersendiri, bukan sekadar dua baris teks, karena
   ini informasi yang paling sering disalahpahami: pelanggan perlu langsung
   menangkap bahwa yang ditransfer sekarang HANYA sebagian, dan sisanya masih
   harus disiapkan saat datang.
   ========================================================================== */

.mp-dp {
    padding: 16px 18px;
    background: var(--rose-mist);
    border: 1px solid var(--rose-soft);
    border-radius: var(--r-md);
}

.mp-dp__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.mp-dp__badge {
    flex: none;
    padding: 3px 12px;
    border-radius: var(--r-pill);
    background: var(--rose);
    color: #fff;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 500;
}

.mp-dp__lead {
    margin: 0 0 14px;
    font-size: var(--fs-xs);
    line-height: 1.6;
    color: var(--ink-soft);
}

.mp-dp__angka {
    background: var(--surface);
    border-radius: var(--r-sm);
    padding: 12px 14px;
}

.mp-dp__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 5px 0;
    font-size: var(--fs-sm);
}

.mp-dp__row strong {
    font-family: var(--font-mono);
    white-space: nowrap;
}

/* Sisa tagihan dipisah garis dan diberi warna berbeda: inilah angka yang
   harus benar-benar dibawa pelanggan saat mengambil pesanan. */
.mp-dp__row--sisa {
    border-top: 1px dashed var(--line-strong);
    margin-top: 4px;
    padding-top: 10px;
}

.mp-dp__row--sisa strong {
    color: var(--berry);
}

/* Sorotan saat pelanggan menekan kirim tanpa memilih saluran DP.
   Memakai penanda yang sama dengan blok metode pembayaran, supaya bahasa
   visual "ini yang kurang" konsisten di seluruh formulir. */
.mp-dp.is-missing {
    animation: mpMissing 2.4s var(--ease);
    border-color: var(--berry);
}

/* Dua pilihan berdampingan, menumpuk di layar sempit. */
.mp-options--dua {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media (max-width: 480px) {
    .mp-options--dua {
        grid-template-columns: 1fr;
    }
}

/* Dua baris DP di ringkasan biaya. Dipisah garis putus-putus dari total
   supaya terbaca sebagai rincian dari total, bukan biaya tambahan. */
.mp-summary__row--dp {
    font-size: var(--fs-sm);
}

.mp-summary__row--dp:first-of-type {
    border-top: 1px dashed var(--line-strong);
    margin-top: 8px;
    padding-top: 10px;
}

.mp-summary__row--dp strong {
    font-family: var(--font-mono);
}


/* ==========================================================================
   PERAPIAN RINGKASAN BIAYA
   --------------------------------------------------------------------------
   MASALAHNYA ADA TIGA, dan ketiganya baru muncul setelah baris DP ditambahkan:

   1. Baris Total tidak punya garis penghubung (::after disembunyikan) dan
      labelnya memakai flex:1, jadi ada jurang kosong lebar antara kata
      "Total" dan nominalnya - terlihat menggantung. Baris DP tepat di
      bawahnya justru punya garis titik-titik, sehingga tampak tidak sejalan.

   2. Nominalnya tidak berada di satu kolom. Karena tiap baris hanya mendorong
      isinya ke dua ujung, "Rp 130.000" dan "Rp 39.000" berhenti di titik yang
      berbeda dan angkanya tidak bertumpuk rapi.

   3. Ringkasan ini menempel di dasar panel. Dengan lima baris, tingginya
      memakan sepertiga layar dan menutupi kotak unggah bukti.

   Ketiganya diperbaiki di bawah ini.
   ========================================================================== */

/* --- 1. Kolom nominal disejajarkan ---
   Lebar tetap membuat seluruh nominal berhenti di garis yang sama, sehingga
   digit ribuan dan ratusan ribu bertumpuk lurus dan mudah dibandingkan. */
.mp-summary__row > strong,
.mp-summary__row > span:last-child {
    min-width: 104px;
    text-align: right;
}

/* --- 2. Baris Total ikut memakai garis penghubung ---
   Dikembalikan supaya sejalan dengan baris lain. Titiknya dibuat lebih redup
   agar tidak menyaingi angkanya. */
.mp-summary__row--total::after {
    display: block;
    border-bottom-color: var(--line);
}

/* Label Total tidak lagi melebar penuh. flex:1 pada label inilah yang
   menciptakan jurang kosong itu. */
.mp-summary__row--total > span:first-child {
    flex: none;
}

/* --- 3. Baris DP dikelompokkan jadi satu blok ---
   Dua baris DP tidak lagi menggantung lepas di bawah Total, melainkan masuk
   ke dalam satu blok berlatar. Pelanggan membacanya sebagai rincian dari
   total, bukan sebagai biaya tambahan di luar total. */
.mp-summary__row--dp {
    position: relative;
    padding-inline: 12px;
    padding-block: 7px;
    background: var(--rose-mist);
    font-size: var(--fs-xs);
    color: var(--ink-soft);
}

.mp-summary__row--dp:first-of-type {
    margin-top: 10px;
    padding-top: 11px;
    border-top: 0;
    border-radius: var(--r-sm) var(--r-sm) 0 0;
}

.mp-summary__row--dp:last-of-type {
    padding-bottom: 11px;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
}

/* Garis titik-titik di dalam blok DP dibuat lebih redup lagi supaya bloknya
   terbaca tenang, bukan ramai. */
.mp-summary__row--dp::after {
    border-bottom-color: var(--rose-soft);
}

/* "Bayar sekarang" adalah angka yang benar-benar ditransfer pelanggan hari
   ini, jadi itu yang ditonjolkan - bukan sisanya. */
#mpSumDpRow > strong {
    color: var(--rose-deep);
    font-weight: 600;
}

#mpSumSisaRow > strong {
    color: var(--ink-soft);
    font-weight: 500;
}

/* --- 4. Versi ringkas saat menempel di dasar panel ---
   Di dalam panel checkout, ringkasan ini sticky. Dengan lima baris ia
   memakan terlalu banyak layar, jadi jarak antarbarisnya dipadatkan. */
.mp-sheet__body .mp-summary {
    gap: 4px;
    padding-block: 12px;
}

.mp-sheet__body .mp-summary .mp-summary__row {
    padding-block: 3px;
}

.mp-sheet__body .mp-summary .mp-summary__row--total {
    padding-top: 9px;
    margin-top: 4px;
    font-size: 1.08rem;
}

.mp-sheet__body .mp-summary .mp-summary__row--total > strong {
    font-size: 1.12rem;
}

/* Di layar pendek, subtotal dan ongkir disembunyikan dari batang menempel.
   Keduanya sudah terbaca di langkah sebelumnya; yang wajib selalu terlihat
   saat mengisi formulir hanyalah total dan jumlah yang harus dibayar
   sekarang. */
@media (max-height: 720px) {
    .mp-sheet__body .mp-summary > .mp-summary__row:not(.mp-summary__row--total):not(.mp-summary__row--dp) {
        display: none;
    }

    .mp-sheet__body .mp-summary .mp-summary__row--total {
        border-top: 0;
        margin-top: 0;
        padding-top: 0;
    }
}

/* Di ponsel, lebar tetap kolom nominal dikurangi supaya label panjang seperti
   "Sisa saat pengambilan" tidak terpotong. */
@media (max-width: 420px) {
    .mp-summary__row > strong,
    .mp-summary__row > span:last-child {
        min-width: 88px;
    }

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


/* ==========================================================================
   PENANDA NOMINAL DI KOTAK PEMBAYARAN
   --------------------------------------------------------------------------
   Ditaruh tepat di atas nomor rekening dan kode QRIS.

   Alasannya perilaku, bukan estetika: pelanggan menyalin nomor rekening,
   berpindah ke aplikasi bank, lalu mengetik nominal dari ingatan. Yang
   teringat adalah angka besar yang barusan dilihat - totalnya - padahal yang
   harus ditransfer hanya DP. Menaruh nominalnya di titik pandang yang sama
   dengan nomor rekening membuat keduanya terbaca sekaligus.
   ========================================================================== */

.mp-paynom {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
    padding: 11px 14px;
    background: var(--rose-mist);
    border: 1px dashed var(--rose);
    border-radius: var(--r-sm);
}

.mp-paynom > span {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--rose-deep);
}

.mp-paynom > strong {
    font-family: var(--font-mono);
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--rose-deep);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Di ponsel label dan nominal menumpuk, karena berdampingan pada lebar 360px
   menyisakan ruang terlalu sempit dan nominalnya pecah dua baris. */
@media (max-width: 420px) {
    .mp-paynom {
        flex-direction: column;
        gap: 3px;
    }
}


/* Penanda isian yang boleh dikosongkan.
   Ditulis eksplisit karena tanpa penanda, pelanggan menganggap semua isian
   wajib dan mengetik jam asal supaya bisa lanjut - tebakan yang justru
   menyesatkan dapur. */
.mp-opsional {
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: var(--r-pill);
    background: var(--cream);
    border: 1px solid var(--line);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-muted);
    vertical-align: middle;
}


/* Panel sisa tagihan di nota web.
   Hierarkinya disamakan dengan nota PDF A6: sisa adalah angka terbesar,
   bukan total. Total hanya catatan, sedangkan sisa inilah uang yang harus
   benar-benar dibawa pelanggan saat datang mengambil pesanan. */
.mp-nota__sisa {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--rose-soft);
    border-radius: var(--r-sm);
}

.mp-nota__sisa-lbl {
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rose-deep);
}

.mp-nota__sisa-nom {
    font-family: var(--font-mono);
    font-size: clamp(1.35rem, 4vw, 1.7rem);
    font-weight: 600;
    color: var(--berry);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Di ponsel label dan nominal menumpuk, supaya nominal tidak pecah dua baris
   pada lebar 360px. */
@media (max-width: 420px) {
    .mp-nota__sisa {
        flex-direction: column;
        gap: 4px;
    }
}


/* Petunjuk di bawah kolom pencarian Cek Status.
   Menyebutkan bahwa nomor HP juga bisa dipakai menghapus satu jenis
   pertanyaan yang paling sering masuk lewat WhatsApp: pelanggan yang
   kehilangan nomor pesanannya mengira tidak bisa mengecek apa pun. */
.mp-track__hint {
    margin: 12px 0 0;
    font-size: var(--fs-xs);
    line-height: 1.6;
    color: var(--ink-muted);
    text-align: center;
}


/* ==========================================================================
   PALET MERAH JAMBU & UNGU — LAPISAN PENYELARAS
   --------------------------------------------------------------------------
   Warna dasarnya sudah diganti lewat token di bagian atas berkas, sehingga
   seluruh kelas yang ada ikut berubah tanpa disentuh. Blok ini hanya
   menambahkan hal-hal yang membuat dua warna itu terasa SATU RANCANGAN,
   bukan sekadar dua warna yang kebetulan dipakai bersama.

   DARI MANA WARNANYA
   ------------------
   Merah jambu diambil dari logo Micho sendiri: warna dominannya #C0A0B0,
   yaitu hue 330 derajat dengan saturasi rendah. Nilai itu terlalu pucat untuk
   dipakai sebagai warna tombol - teks putih di atasnya hanya mencapai rasio
   kontras 2,1 dan tidak terbaca. Karena itu hue-nya dipertahankan tetapi
   digelapkan menjadi #B54872, yang mencapai rasio 5,08 dan lolos ambang WCAG
   4,5 untuk teks biasa.

   Ungu TIDAK ADA di logo. Ia dipilih pada hue 275 derajat, yaitu jarak yang
   cukup jauh dari merah jambu agar terbaca sebagai warna kedua yang jelas,
   tetapi masih satu rumpun dingin sehingga tidak bertabrakan.

   MENGAPA TIDAK LEBIH RAMAI
   -------------------------
   Merah jambu dan ungu sangat mudah terlihat murahan bila keduanya dipakai
   dengan saturasi penuh dan porsi seimbang. Yang membuatnya terlihat mahal
   adalah PORSI: warna dipakai sedikit, di atas latar netral yang luas.
   Karena itu netralnya pun hanya diberi rona ungu sangat tipis - cukup untuk
   terasa sekeluarga, tidak sampai terlihat berwarna.
   ========================================================================== */

:root {
    /* Gradasi merah jambu ke ungu. Dipakai sebagai aksen tipis, bukan sebagai
       latar blok besar - gradasi selebar layar membuat halaman terasa seperti
       templat gratisan. */
    --gradasi: linear-gradient(135deg, var(--rose) 0%, var(--gold) 100%);
    --gradasi-lembut: linear-gradient(135deg, var(--rose-mist) 0%, var(--gold-soft) 100%);
}

/* Sorotan teks mengikuti merek. Detail kecil, tetapi terlihat setiap kali
   seseorang menyeret memilih teks. */
::selection {
    background: var(--rose-soft);
    color: var(--rose-deep);
}

/* Cincin fokus memakai ungu, bukan merah jambu.
   Merah jambu sudah menjadi warna tombol utama; bila cincin fokusnya juga
   merah jambu, tombol yang sedang difokus jadi sulit dibedakan dari tombol
   biasa. Ungu memberi kontras tanpa keluar dari palet. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--ungu);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* Garis aksen tipis di tepi atas kartu penting. Satu sapuan gradasi setebal
   3 piksel sudah cukup memberi kesan berwarna tanpa membanjiri halaman. */
.mp-accent-top {
    position: relative;
    overflow: hidden;
}

.mp-accent-top::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--gradasi);
}

/* Tombol utama diberi gradasi yang sangat halus - dari merah jambu ke merah
   jambu yang sedikit keunguan. Perbedaannya nyaris tidak disadari, tetapi
   membuat permukaannya terasa punya kedalaman dibanding warna rata. */
.mp-btn:not(.mp-btn--ghost):not(.mp-btn--wa) {
    background-image: linear-gradient(135deg,
            var(--rose) 0%,
            color-mix(in srgb, var(--rose) 82%, var(--gold)) 100%);
}

/* Peramban lama tidak mengenal color-mix; di sana tombol tetap memakai warna
   rata dari --rose, yang sudah benar. Tidak ada yang rusak. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .mp-btn:not(.mp-btn--ghost):not(.mp-btn--wa) {
        background-image: none;
    }
}


/* ==========================================================================
   LATAR BERGRADASI LEMBUT
   --------------------------------------------------------------------------
   MASALAHNYA: seluruh halaman memakai satu warna rata (--porcelain). Warna
   rata membuat halaman terasa kaku dan seperti belum selesai dikerjakan,
   terutama pada bagian panjang tanpa gambar.

   CARANYA: tiga sapuan radial yang sangat pucat, ditumpuk di atas warna
   dasar. Karena radial-gradient memudar ke transparan di tepinya, ketiganya
   membaur tanpa garis batas - mata tidak bisa menunjuk di mana satu warna
   berhenti dan yang lain mulai.

   MENGAPA SANGAT PUCAT
   --------------------
   Sapuan ini TIDAK BOLEH TERLIHAT sebagai warna. Begitu seseorang menyadari
   "oh ini gradasi merah jambu", ia sudah terlalu kuat dan halaman berubah
   dari elegan menjadi ramai. Yang benar adalah halaman terasa hangat dan
   hidup tanpa bisa dijelaskan sebabnya.

   Ketiga sapuan memakai warna merek dengan opasitas 4-7 persen. Sebagai
   pembanding, satu persen saja sudah cukup terlihat pada layar OLED.

   MENGAPA background-attachment: fixed
   ------------------------------------
   Tanpa itu, gradasi ikut menggulung bersama isi halaman dan sapuannya
   berulang terlihat - justru memperjelas bahwa ada pola. Dengan fixed,
   sapuan diam di tempat dan halaman seolah bergerak di atas cahaya yang
   tenang.
   ========================================================================== */

body {
    background-color: var(--porcelain);

    /* Urutan penting: sapuan pertama yang ditulis berada PALING ATAS. */
    background-image:
        /* Kanan atas - merah jambu, paling terasa karena di sinilah mata
           pertama kali jatuh saat halaman dibuka. */
        radial-gradient(1100px 780px at 88% -8%,
            rgba(181, 72, 114, .07) 0%,
            rgba(181, 72, 114, 0) 62%),

        /* Kiri tengah - plum, memberi kedalaman pada bagian tengah halaman
           yang biasanya paling panjang dan paling datar. */
        radial-gradient(900px 900px at -10% 42%,
            rgba(142, 58, 110, .055) 0%,
            rgba(142, 58, 110, 0) 58%),

        /* Bawah kanan - merah jambu sangat pucat, supaya kaki halaman tidak
           terasa memutih mendadak dibanding bagian atasnya. */
        radial-gradient(1000px 700px at 78% 108%,
            rgba(181, 72, 114, .045) 0%,
            rgba(181, 72, 114, 0) 60%);

    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Bagian yang sengaja dibuat menonjol tetap memakai warna rata di atas
   gradasi, supaya batas antarbagian tetap terbaca. */
.mp-shell > section {
    position: relative;
}

/* Kartu tetap putih bersih. Kartu yang ikut transparan akan menyatu dengan
   latar dan kehilangan bentuknya - justru itu yang membuat halaman terasa
   berantakan, bukan elegan. */
.mp-card,
.mp-fcard {
    background: var(--surface);
}

/* Pada layar kecil sapuan dipersempit. Gradasi selebar 1100px pada layar
   390px berarti hampir seluruh layar tertutup satu sapuan, sehingga tidak
   lagi terbaca sebagai gradasi melainkan sebagai warna latar yang keruh. */
@media (max-width: 700px) {
    body {
        background-image:
            radial-gradient(520px 420px at 100% -5%,
                rgba(181, 72, 114, .06) 0%,
                rgba(181, 72, 114, 0) 65%),
            radial-gradient(480px 480px at -15% 55%,
                rgba(142, 58, 110, .05) 0%,
                rgba(142, 58, 110, 0) 62%);

        /* fixed dimatikan di ponsel: sebagian peramban seluler menanganinya
           dengan cara yang membuat gulir tersendat. */
        background-attachment: scroll;
    }
}

/* Menghormati pengguna yang meminta tampilan sederhana atau kontras tinggi. */
@media (prefers-contrast: more) {
    body {
        background-image: none;
    }
}


/* ==========================================================================
   BERANDA — PENGHALUSAN
   --------------------------------------------------------------------------
   Tiga hal yang dikerjakan di sini: hero dicerahkan, ritme antarbagian
   dirapikan, dan kartu produk diberi kedalaman.
   ========================================================================== */

/* ---------- 1. Hero dicerahkan ----------
   Selubung hero sebelumnya nyaris hitam pekat (opasitas .96 di sisi kiri).
   Itu memang membuat teks sangat terbaca, tetapi juga membuat halaman dibuka
   dengan bidang gelap besar - berlawanan dengan kesan lembut dan terang yang
   diinginkan.

   Sekarang selubungnya berwarna plum, bukan hitam, dan sisi kiri diturunkan
   ke .88. Teks putih di atas plum .88 masih jauh melampaui ambang keterbacaan,
   sementara fotonya mulai terlihat menembus - hero terasa lebih hidup tanpa
   mengorbankan teksnya.

   Ditambah satu sapuan merah jambu di pojok kanan atas, sehingga hero
   tersambung dengan gradasi latar di bawahnya alih-alih terputus. */
.mp-hero__veil {
    background:
        /* Sapuan merah jambu dipindah ke KIRI ATAS dan ditipiskan dari .30
           ke .16.
           
           Sebelumnya ia berada di 82% 12% - persis menumpuk di atas fotonya
           puding, sehingga menambah kepekatan justru di tempat yang harus
           paling terang. Di sisi kiri ia justru berguna: menghangatkan area
           teks tanpa menyentuh produk. */
        radial-gradient(680px 480px at 8% 6%,
            rgba(181, 72, 114, .16) 0%,
            rgba(181, 72, 114, 0) 68%),

        /* Selubung utama.
        
           MASALAH SEBELUMNYA BUKAN "TERLALU GELAP RATA-RATA", melainkan
           gelap di tempat yang salah: nilainya turun sampai .26 di 76%, lalu
           NAIK LAGI ke .42 di tepi kanan. Kenaikan itu vignette - dan letak
           vignette itu persis di area puding.
           
           Menurunkan seluruh nilai sebesar 40% seperti rencana semula justru
           merusak sisi kiri: teks terang di atas selubung .53 hanya mencapai
           rasio sekitar 3,3, yang berarti judul masih terbaca tetapi paragraf
           dan tombol di bawahnya tidak.
           
           Jadi yang dikerjakan adalah MEMPERTAJAM KEMIRINGANNYA: sisi kiri
           tetap pekat untuk teks, sisi kanan turun jauh lebih dalam daripada
           sebelumnya, dan vignette-nya dibuang sama sekali. Hasilnya produk
           lebih terang daripada rencana penurunan 40%, sementara teksnya
           justru lebih aman. */
        linear-gradient(95deg,
            rgba(36, 24, 38, .90) 0%,
            rgba(36, 24, 38, .84) 28%,
            rgba(36, 24, 38, .58) 46%,
            rgba(36, 24, 38, .22) 66%,
            rgba(36, 24, 38, .08) 82%,
            rgba(36, 24, 38, .04) 100%);
}

/* Di ponsel teks menumpuk di atas foto, jadi selubungnya perlu lebih pekat -
   di layar sempit tidak ada sisi "kanan" yang bisa dibiarkan bening. */
@media (max-width: 860px) {
    .mp-hero__veil {
        background:
            radial-gradient(420px 320px at 80% 8%,
                rgba(181, 72, 114, .26) 0%,
                rgba(181, 72, 114, 0) 70%),
            linear-gradient(175deg,
                rgba(36, 24, 38, .84) 0%,
                rgba(36, 24, 38, .90) 55%,
                rgba(36, 24, 38, .94) 100%);
    }
}

/* Lengkung pemisah di kaki hero disamakan dengan warna latar halaman.
   Sebelumnya ia memakai warna rata sehingga terlihat sebagai pita putih
   yang menempel di atas gradasi. */
.mp-curve {
    color: var(--porcelain);
}

/* ---------- 2. Ritme antarbagian ----------
   Jarak antarbagian sebelumnya seragam, sehingga halaman terbaca sebagai
   deretan blok yang sama beratnya dan mata tidak tahu mana yang penting.

   Sekarang bagian bertanda --tight tetap rapat, tetapi bagian biasa diberi
   napas lebih lega. Perbedaan itu yang membentuk irama. */
.mp-band {
    padding-block: clamp(64px, 9vw, 118px);
}

.mp-band--tight {
    padding-block: clamp(48px, 6.5vw, 84px);
}

/* Dua bagian berturut-turut dengan latar sama tidak perlu jarak ganda -
   cukup satu, supaya tidak muncul lubang kosong di tengah halaman. */
.mp-band + .mp-band {
    padding-top: 0;
}

/* Kecuali bila latarnya memang berbeda; di situ jaraknya justru dibutuhkan
   agar pergantian latar terbaca sebagai pergantian topik. */
.mp-band--cream + .mp-band,
.mp-band + .mp-band--cream,
.mp-band--glow + .mp-band,
.mp-band + .mp-band--glow {
    padding-top: clamp(64px, 9vw, 118px);
}

/* ---------- 3. Kartu ----------
   KOREKSI SASARAN: kartu produk di beranda memakai kelas .mp-prod, bukan
   .mp-card, dan ia SUDAH punya efek terangkat serta pembesaran gambar.
   Menambahkan efek yang sama ke .mp-card keliru dua kali - berlebihan pada
   kartu produk, dan menyesatkan pada .mp-card yang isinya keterangan statis
   dan tidak bisa diklik. Efek terangkat pada elemen yang tidak bisa ditekan
   membuat orang mencoba menekannya lalu tidak terjadi apa-apa.

   Jadi .mp-card hanya diberi kedalaman tipis supaya tidak terlihat menempel
   di atas latar bergradasi, tanpa gerakan apa pun. */
.mp-card {
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: 0 1px 2px rgba(36, 24, 38, .04);
}

/* Kartu produk: warna tepi saat disentuh disamakan dengan palet baru.
   Sebelumnya memakai --caramel-tint, nama lama yang kini menunjuk ke
   merah jambu - hasilnya benar, tetapi namanya menyesatkan bagi siapa pun
   yang membaca kode ini nanti. */
.mp-prod:hover {
    border-color: var(--rose-soft);
}

/* ---------- 4. Ornamen pemisah ----------
   Elemen .mp-ornament sudah ada di beranda tetapi tampil sebagai titik polos.
   Diberi garis memudar di kedua sisinya, ia menjadi pemisah yang terasa
   disengaja - detail kecil yang membedakan halaman yang dirancang dari
   halaman yang sekadar disusun. */
.mp-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-block: 6px 18px;
}

.mp-ornament::before,
.mp-ornament::after {
    content: "";
    width: clamp(40px, 9vw, 96px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rose-soft));
}

.mp-ornament::after {
    background: linear-gradient(90deg, var(--rose-soft), transparent);
}

.mp-ornament span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--rose);
    flex: none;
}


/* ==========================================================================
   BAGIAN PERNYATAAN — JARAK & UKURAN
   --------------------------------------------------------------------------
   Pada layar lebar, dua baris pendek di tengah bidang selebar 1500px
   meninggalkan ruang kosong yang sangat besar di kiri, kanan, dan bawahnya.
   Kekosongan itu tidak terbaca sebagai "napas" melainkan sebagai halaman
   yang belum selesai dimuat.

   Tiga penyesuaian:
   1. Batas lebar dilonggarkan dari 20ch ke 28ch, sehingga kalimatnya
      mengisi lebih banyak ruang dan tidak terlihat hilang di tengah.
   2. Ukuran huruf dinaikkan agar bobotnya sepadan dengan ruang yang ia
      tempati.
   3. Jarak bawahnya dirapatkan, karena bagian berikutnya sudah punya
      jarak atasnya sendiri - keduanya menumpuk menjadi lebih dari 150px.
   ========================================================================== */

.mp-statement {
    padding-block: clamp(52px, 6vw, 88px) clamp(20px, 2.5vw, 34px);
    text-align: center;
}

.mp-statement p {
    max-width: 28ch;
    margin-inline: auto;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 4vw, 3rem);
    line-height: 1.22;
    letter-spacing: -.015em;
    color: var(--ink);
    text-wrap: balance;
}

/* Baris kedua memakai merah jambu dan huruf miring. Kontras antara baris
   pertama yang tegak gelap dan baris kedua yang miring berwarna itulah yang
   membuat kalimat ini terbaca sebagai satu tarikan napas, bukan dua kalimat
   yang kebetulan berdampingan. */
.mp-statement em {
    color: var(--rose-deep);
    font-style: italic;
}

/* Bagian tepat setelah pernyataan tidak perlu jarak atas penuh: jarak bawah
   pernyataan sudah menyediakannya. Tanpa aturan ini keduanya menumpuk
   menjadi lebih dari 150px kekosongan. */
.mp-statement + .mp-band,
.mp-statement + * > .mp-band:first-child {
    padding-top: clamp(24px, 3vw, 44px);
}


/* ==========================================================================
   LATAR UNTUK SITUS MAKANAN
   --------------------------------------------------------------------------
   SATU HAL TEKNIS YANG MENENTUKAN: SUHU WARNA.

   Latar sebelumnya #FCFAFD condong ke biru (B=253 lebih tinggi dari R=252).
   Untuk situs makanan itu merugikan. Latar kebiruan membuat foto makanan
   tampak pucat dan kurang segar - alasan yang sama mengapa etalase kue dan
   dapur restoran memakai lampu hangat, bukan lampu putih kebiruan.

   Latar sekarang #FDFAF8: sama terangnya, tetapi condong hangat. Puding
   karamel, cokelat, dan krim akan terlihat lebih matang dan menggugah di
   atasnya tanpa fotonya disentuh sama sekali.

   DUA LAPIS DI ATAS WARNA DASAR
   -----------------------------
   1. Sapuan merah jambu yang membaur (sudah ada di blok sebelumnya).
   2. Butiran halus - dijelaskan di bawah.
   ========================================================================== */

/* ---------- Butiran halus ----------
   Bidang warna digital yang benar-benar rata terasa steril; mata kita
   terbiasa pada permukaan yang punya tekstur, seperti kertas atau kain.
   Butiran samar membuat latar terasa seperti kertas kemasan bermutu, bukan
   layar kosong - kesan yang tepat untuk toko kue.

   Dibuat dengan SVG feTurbulence yang ditanam langsung di CSS: tidak ada
   berkas gambar yang perlu diunduh, tidak ada permintaan jaringan tambahan,
   dan ukurannya hanya beberapa ratus byte.

   Opasitasnya .022 - nyaris tidak terlihat bila dicari, tetapi terasa bila
   dimatikan. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .022;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Butiran dimatikan saat mencetak - ia hanya akan memboroskan tinta dan
   membuat hasil cetak terlihat kotor. */
@media print {
    body::before {
        display: none;
    }
}

@media (prefers-contrast: more) {
    body::before {
        display: none;
    }
}

/* ---------- CATATAN: bidang terang katalog DIBATALKAN ----------

   Rencana semula memberi .mp-band--dotted dan .mp-band--feed sebuah lapisan
   putih tipis lewat ::before, supaya deretan foto produk menonjol.

   Ternyata KEDUA kelas itu SUDAH MEMAKAI ::before untuk hal lain:
   .mp-band--dotted untuk motif titik-titik (baris 3457) dan .mp-band--feed
   untuk motif galeri (baris 3956). Sebuah elemen hanya punya satu ::before -
   aturan baru akan menimpa yang lama dan menghapus kedua motif itu tanpa ada
   yang menyadarinya sampai halaman dilihat.

   Karena motif titik sudah menjalankan tugas yang sama - membedakan bagian
   katalog dari sekitarnya - lapisan tambahan itu tidak diperlukan. Yang
   dikerjakan cukup menyesuaikan warna motifnya dengan palet baru. */

.mp-band--dotted::before {
    background-image: radial-gradient(circle, rgba(181, 72, 114, .13) 1px, transparent 1px);
}


/* ==========================================================================
   TRUST BAR EMPAT POIN
   --------------------------------------------------------------------------
   Dengan tiga poin, satu baris sudah cukup pada hampir semua layar. Dengan
   empat poin - dan poin keempat yang paling panjang, "DP 30%, Sisa Saat
   Ambil" - barisnya mulai membungkus dengan cara yang canggung: tiga item di
   atas, satu item sendirian di bawah, terlihat seperti kesalahan.

   Penanganannya bertingkat menurut lebar layar, bukan satu aturan untuk
   semua.
   ========================================================================== */

.mp-trustbar__row {
    /* Jarak antaritem dirapatkan sedikit supaya empat poin tetap muat sebaris
       pada laptop biasa. */
    gap: 10px 22px;
}

/* Poin DP diberi penekanan tipis. Ia satu-satunya yang menjawab keberatan
   soal uang, dan justru itu yang paling menentukan apakah pembeli baru jadi
   melanjutkan ke checkout. Penekanannya sengaja hanya berupa warna, bukan
   ukuran - membesarkannya akan membuat trust bar terlihat berat sebelah. */
.mp-trustbar__item--dp {
    color: #FFF;
    font-weight: 600;
}

.mp-trustbar__item--dp .mp-icon {
    color: var(--rose-soft);
}

/* Tablet: dua baris berisi dua item, bukan tiga tambah satu. Susunan 2x2
   terbaca sebagai daftar yang disengaja; susunan 3+1 terbaca sebagai baris
   yang kehabisan tempat. */
@media (max-width: 900px) and (min-width: 561px) {
    .mp-trustbar__row {
        display: grid;
        grid-template-columns: repeat(2, auto);
        justify-content: center;
        gap: 10px 30px;
    }
}

/* Ponsel: menumpuk satu per baris, rata kiri.
   Empat item rata tengah dalam kolom sempit membuat awal tiap barisnya
   bergeser-geser, sehingga sulit dipindai. Rata kiri membuat keempatnya
   berbaris lurus. */
@media (max-width: 560px) {
    .mp-trustbar__row {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: stretch;
        justify-items: start;
        gap: 7px;
        max-width: 300px;
        margin-inline: auto;
        padding-block: 16px;
    }
}


/* ==========================================================================
   HERO — PENYELARASAN AKHIR
   --------------------------------------------------------------------------
   URUTAN PENGERJAANNYA PENTING, dan tidak seperti dugaan awal.

   Diagnosis semula: "judul terlalu panjang sampai masuk area puding".
   Pengukuran dari tangkapan layar menunjukkan hal lain: judulnya selebar
   519px di dalam wadah 620px - jadi TIDAK meluber sama sekali. Yang
   bertabrakan adalah wadah teks terhadap LETAK SUBJEK FOTO: pudingnya mulai
   di sekitar 550px, sementara judul berakhir di 640px.

   Artinya memperpendek judul saja tidak menyelesaikan apa pun. Selama subjek
   foto duduk di 55% lebar layar, teks sepanjang apa pun yang wajar akan
   menyentuhnya.

   Jadi yang dikerjakan lebih dulu adalah MENGGESER FOTONYA. Setelah subjek
   pindah ke kanan, barulah kolom teks bisa dipersempit dan gradiennya
   dipendekkan dengan aman.
   ========================================================================== */

/* ---------- 1. Subjek foto digeser ke kanan ----------
   object-position mengatur bagian mana dari foto yang terlihat. Menaikkan
   nilainya menggeser jendela tampilan ke kanan, yang berarti subjeknya
   bergerak ke KIRI - kebalikan dari yang dibutuhkan. Karena itu nilainya
   diturunkan dari 72% ke 58%.

   Ditambah pengecilan tipis: subjek yang memenuhi seluruh tinggi bingkai
   terasa sesak dan kehilangan kesan "dipotret", bukan "ditempel". */
.mp-hero__bg img {
    object-position: 58% center;
    transform: scale(.94);
    transform-origin: 72% center;
}

/* ---------- 2. Kolom teks dipersempit ----------
   Dari 620px ke 560px. Bukan karena teksnya meluber, melainkan supaya ada
   jarak bernapas antara ujung baris terpanjang dan tepi puding. */
.mp-hero__inner {
    max-width: 560px;
}

/* ---------- 3. Gradien dipersempit ----------
   Usulan semula berhenti di 70% dengan nilai .55 pada 40%. Setelah diukur,
   nilai .55 hanya menghasilkan rasio 3,68 untuk teks terang - cukup untuk
   judul besar, tetapi GAGAL untuk paragraf dan tombol, yang justru berada di
   bagian bawah kolom teks.

   Karena kolom teks kini dibatasi 560px - sekitar 46% pada layar 1210px -
   gradiennya bisa tetap pekat sampai 46%, lalu jatuh tajam. Hasilnya area
   gelap terasa jauh lebih sempit daripada sebelumnya, tanpa satu pun teks
   kehilangan keterbacaan. */
.mp-hero__veil {
    background:
        radial-gradient(620px 440px at 6% 4%,
            rgba(181, 72, 114, .15) 0%,
            rgba(181, 72, 114, 0) 66%),
        linear-gradient(93deg,
            rgba(36, 24, 38, .90) 0%,
            rgba(36, 24, 38, .86) 32%,
            rgba(36, 24, 38, .74) 46%,
            rgba(36, 24, 38, .34) 58%,
            rgba(36, 24, 38, .10) 70%,
            rgba(36, 24, 38, .02) 84%,
            rgba(36, 24, 38, 0) 100%);
}

/* ---------- 4. Kartu keterangan ----------
   Kartu sebelumnya menempel terlalu dekat ke kaki hero sehingga terbaca
   sebagai elemen tempelan, bukan bagian dari hero. Jaraknya ditambah di atas
   dan diberi ruang di bawah supaya lengkung pemisah tidak memotongnya. */
.mp-hero__cards {
    margin-top: clamp(28px, 3.4vw, 40px);
    margin-bottom: clamp(8px, 2vw, 24px);
    max-width: 720px;
}

/* Di layar sempit foto tidak lagi punya sisi "kanan" yang bisa dibiarkan
   terang, jadi selubungnya kembali menutup penuh dan fotonya tidak digeser. */
@media (max-width: 860px) {
    .mp-hero__bg img {
        object-position: 62% center;
        transform: none;
    }

    .mp-hero__inner {
        max-width: none;
    }

    .mp-hero__veil {
        background:
            radial-gradient(420px 320px at 12% 6%,
                rgba(181, 72, 114, .22) 0%,
                rgba(181, 72, 114, 0) 70%),
            linear-gradient(175deg,
                rgba(36, 24, 38, .84) 0%,
                rgba(36, 24, 38, .90) 55%,
                rgba(36, 24, 38, .94) 100%);
    }
}


/* ==========================================================================
   KARTU DP DI HERO
   --------------------------------------------------------------------------
   Kartu ini menjawab keberatan terbesar pembeli pertama kali: takut
   mentransfer penuh ke toko yang belum dikenalnya. Karena itu ia diberi
   penanda tipis supaya sedikit lebih menarik perhatian daripada dua kartu di
   sebelahnya - tetapi HANYA sedikit.

   Membesarkannya atau memberi warna penuh akan membuatnya terbaca sebagai
   iklan promo, dan promo justru menimbulkan curiga pada pembeli yang sedang
   menimbang toko baru. Yang dibutuhkan di sini adalah kesan tenang dan
   meyakinkan, bukan kesan menjual.
   ========================================================================== */

.mp-fcard--dp {
    border-color: var(--rose-soft);
    background: linear-gradient(180deg, var(--rose-mist) 0%, var(--surface) 62%);
}

.mp-fcard--dp .mp-fcard__icon {
    background: var(--rose-soft);
    color: var(--rose-deep);
}

/* Angka "DP 30%" memakai warna merek, bukan tinta polos. Ia satu-satunya
   angka di deretan kartu yang menyangkut uang, dan warna itulah yang
   membedakannya dari jumlah varian di kartu sebelahnya. */
.mp-fcard--dp .mp-fcard__num {
    color: var(--rose-deep);
    font-size: 1.2rem;
    letter-spacing: -.01em;
}

/* Pada layar sempit tiga kartu menumpuk. Kartu DP dinaikkan ke urutan
   pertama, karena bila pengunjung hanya sempat membaca satu kartu sebelum
   menggulir, kartu inilah yang paling menentukan apakah ia melanjutkan. */
@media (max-width: 640px) {
    .mp-hero__cards {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .mp-fcard--dp {
        order: -1;
    }
}


/* ==========================================================================
   PERBAIKAN KONTRAS LENCANA "PILIHAN MICHO"
   --------------------------------------------------------------------------
   INI KESALAHAN YANG SAYA BUAT SENDIRI SAAT MENGGANTI PALET.

   Aturan .mp-prod__tag--pick berbunyi: latar var(--gold), teks var(--ink).
   Dulu itu benar - --gold adalah emas terang #C9A45B, dan tinta gelap di
   atasnya mencapai rasio 7,25.

   Ketika --gold dipetakan ulang menjadi plum tua #8E3A6E, aturan ini tidak
   ikut ditinjau. Hasilnya tinta gelap di atas latar gelap: rasio turun ke
   2,42, jauh di bawah ambang 4,5. Itulah sebabnya tulisan "PILIHAN MICHO"
   terasa tenggelam di lencananya.

   Pelajarannya: mengganti NILAI token itu murah, tetapi setiap aturan yang
   mengandalkan token itu TERANG atau GELAP harus ikut diperiksa. Token hanya
   menyimpan warna, tidak menyimpan asumsi tentang warna itu.
   ========================================================================== */

.mp-prod__tag--pick {
    background: var(--gold);
    color: #FFF;
}


/* ==========================================================================
   HERO — PERBAIKAN JUDUL TIGA BARIS
   --------------------------------------------------------------------------
   MASALAH YANG SAYA CIPTAKAN SENDIRI di ronde sebelumnya.

   Kolom teks saya persempit ke 560px supaya tidak menyentuh puding. Yang
   luput diperiksa: judulnya masih memakai ukuran --fs-3xl, yang mencapai
   92px pada layar besar. Baris "Untuk Momen Spesialmu" butuh sekitar 966px
   pada ukuran itu - jauh melebihi 560px - sehingga ia pecah menjadi dua
   baris, dan judulnya menjadi TIGA baris setinggi sekitar 309px.

   Tinggi itulah yang mendorong tombol dan kartu ke bawah sampai lengkung
   putih terasa memotong terlalu ke atas. Jadi "hero terasa sempit" dan
   "garis putih terlalu ke atas" sebenarnya satu masalah yang sama, bukan
   dua.

   PENYELESAIANNYA: mengecilkan judul, bukan melebarkan kolom.
   Melebarkan kolom akan mengembalikan tabrakan dengan puding. Judul hero
   diberi ukurannya sendiri - lebih kecil dari --fs-3xl tetapi masih jauh
   lebih besar dari teks lain - sehingga dua baris tetap dua baris.
   ========================================================================== */

.mp-hero__title {
    /* 62px pada layar besar, bukan 92px. Pada ukuran ini baris terpanjang
       memerlukan sekitar 650px; kolomnya dilonggarkan sedikit ke 660px
       supaya muat tanpa menyentuh puding yang kini duduk lebih ke kanan. */
    font-size: clamp(2.1rem, 4.4vw, 3.9rem);
    line-height: 1.08;
    margin-block: 14px 18px;
}

.mp-hero__inner {
    max-width: 660px;
}

/* Jarak antara paragraf dan tombol dirapatkan. Pada hero, ruang kosong
   vertikal tidak dibaca sebagai kelegaan melainkan sebagai jarak yang harus
   dilewati mata sebelum sampai ke tombol. */
.mp-hero__inner .mp-lede {
    margin-bottom: clamp(18px, 2vw, 26px);
    max-width: 46ch;
}

/* ---------- Lengkung putih ----------
   Lengkungnya dinaikkan tingginya supaya lengkungannya lebih landai. Lengkung
   pendek pada bidang selebar layar terlihat seperti garis patah, bukan
   lengkung - dan itu yang membuatnya terasa "memotong". */
.mp-curve {
    height: clamp(48px, 6vw, 96px);
}

/* Hero diberi jarak bawah supaya isinya tidak menempel pada lengkung. */
.mp-hero .mp-shell {
    padding-bottom: clamp(56px, 7vw, 104px);
}


/* ==========================================================================
   HALAMAN TERASA SEMPIT — SUMBER DAN PERBAIKANNYA
   --------------------------------------------------------------------------
   PENGUKURAN LEBIH DULU.

   Pada layar 1920px, isi halaman hanya selebar 1136px. Sisanya 340px kosong
   di kiri dan 340px di kanan. Isi yang terjepit di tengah bidang kosong
   selebar itu terbaca sebagai sempit, walaupun kontennya sendiri tidak
   berkurang.

   Rancangan rujukan justru kebalikannya: lebar isi sekitar 1100px pada
   kanvas 1200px - tepinya hanya sekitar 50px. Rasa lapangnya TIDAK datang
   dari tepi halaman yang lebar, melainkan dari PADDING DI DALAM kartu dan
   jarak antarbaris yang longgar.

   Jadi yang dikerjakan ada dua, dan keduanya harus bersamaan:
     1. Bidang isi dilebarkan, supaya tepi kosongnya berkurang.
     2. Ruang di DALAM kartu dan antarbagian dilonggarkan, supaya lebar
        tambahan itu terasa lapang, bukan sekadar lebih padat.

   Mengerjakan yang pertama saja akan membuat halaman terlihat lebih penuh
   tetapi tetap sesak.
   ========================================================================== */

:root {
    /* 1240px -> 1400px. Angka ini bukan sembarang: pada 1440px yang paling
       banyak dipakai, tepi kosongnya menjadi 20px per sisi - hampir seluruh
       layar terpakai, seperti rujukannya. Pada 1920px tepinya 260px, masih
       lega tetapi tidak lagi terasa terbuang. */
    --shell: 1400px;

    /* Tepi dalam dilonggarkan sedikit supaya isi tidak menempel ke sisi
       layar pada laptop. */
    --gutter: clamp(20px, 4vw, 60px);
}

/* ---------- Ruang di dalam kartu ----------
   Inilah yang paling menentukan rasa lapang pada rujukan. Kartu di sana
   punya padding sekitar 28-32px; kartu produk Micho jauh lebih rapat. */
.mp-prod__body {
    padding: clamp(18px, 2vw, 26px);
}

.mp-fcard {
    padding: clamp(16px, 1.8vw, 22px);
}

.mp-card {
    padding: clamp(20px, 2.2vw, 30px);
}

/* ---------- Jarak antarkartu ----------
   Kartu yang berdempetan membuat deretan terbaca sebagai satu blok padat.
   Jarak yang sedikit lebih longgar membuat tiap kartu terbaca sebagai benda
   tersendiri - persis yang terjadi pada rujukan. */
.mp-grid,
.mp-prods {
    gap: clamp(16px, 2vw, 28px);
}

/* ---------- Kepala tiap bagian ----------
   Jarak antara judul bagian dan isinya dilonggarkan. Judul yang menempel
   pada barisan kartu membuat keduanya terbaca sebagai satu gumpalan. */
.mp-head,
.mp-headrow {
    margin-bottom: clamp(26px, 3.2vw, 44px);
}

/* Pada layar sangat lebar, bidang isi dibiarkan tumbuh sedikit lagi supaya
   tepi kosongnya tidak kembali menganga. */
@media (min-width: 1800px) {
    :root {
        --shell: 1520px;
    }
}


/* ==========================================================================
   KARTU PERCAYA — MENGAMBANG DI KAKI HERO
   --------------------------------------------------------------------------
   Menggantikan pita gelap selebar layar. Kartu putih yang menaik menutupi
   batas antara hero dan isi halaman mengikat keduanya, sehingga halaman
   tidak lagi terbaca sebagai dua potongan yang ditumpuk.
   ========================================================================== */

.mp-trustbar {
    /* Latar gelap dilepas: kartunya sendiri yang jadi isinya sekarang. */
    background: transparent;
    color: inherit;

    /* Nilai negatif inilah yang menaikkan kartu ke atas hero. Besarnya
       menyesuaikan layar - pada ponsel tumpangan yang terlalu dalam akan
       menutupi tombol hero. */
    margin-top: clamp(-96px, -7vw, -48px);
    position: relative;
    z-index: 3;
    padding-bottom: clamp(28px, 4vw, 56px);
}

.mp-trustcard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: 0 12px 40px rgba(36, 24, 38, .10);
    overflow: hidden;
}

.mp-trustcard__item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: clamp(18px, 2vw, 26px);
}

/* Garis pemisah antaritem dibuat dengan border kiri, bukan gap.
   Dengan gap, keempatnya terlihat sebagai empat kartu terpisah; dengan garis
   tipis, keempatnya terbaca sebagai satu kartu berisi empat hal - dan itu
   yang membuatnya terasa sebagai satu pernyataan, bukan empat klaim. */
.mp-trustcard__item + .mp-trustcard__item {
    border-left: 1px solid var(--line);
}

.mp-trustcard__icon {
    flex: none;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--rose-mist);
    color: var(--rose-deep);
}

.mp-trustcard__text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.mp-trustcard__text strong {
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink);
}

.mp-trustcard__text span {
    font-size: var(--fs-xs);
    line-height: 1.45;
    color: var(--ink-muted);
}

/* Tablet: dua kolom. Empat kolom di lebar 900px menyisakan sekitar 200px per
   item, terlalu sempit untuk judul dua kata beserta keterangannya. */
@media (max-width: 1080px) {
    .mp-trustcard {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Garis pemisah disusun ulang: kolom kanan dapat garis kiri, baris bawah
       dapat garis atas. Aturan "+ item" sebelumnya akan menaruh garis di
       tempat yang salah begitu susunannya berubah. */
    .mp-trustcard__item + .mp-trustcard__item {
        border-left: 0;
    }

    .mp-trustcard__item:nth-child(2n) {
        border-left: 1px solid var(--line);
    }

    .mp-trustcard__item:nth-child(n+3) {
        border-top: 1px solid var(--line);
    }
}

/* Ponsel: satu kolom, dan kartu tidak lagi menumpang ke atas hero -
   tumpangan pada layar sempit akan menutupi tombol Pesan Sekarang. */
@media (max-width: 640px) {
    .mp-trustbar {
        margin-top: 0;
        padding-top: clamp(20px, 5vw, 32px);
    }

    .mp-trustcard {
        grid-template-columns: 1fr;
    }

    .mp-trustcard__item:nth-child(2n) {
        border-left: 0;
    }

    .mp-trustcard__item + .mp-trustcard__item {
        border-top: 1px solid var(--line);
    }
}


/* Kartu hero: keterangan diberi ruang dua baris.
   Di rancangan rujukan tiap kartu punya kalimat penjelas, bukan sekadar
   label. Label saja ("Premium", "Untuk acara spesial") menyebut kategori;
   kalimat penjelas menjawab "lalu kenapa itu penting buat saya". */
.mp-fcard__text span:last-child {
    font-size: var(--fs-xs);
    line-height: 1.45;
    color: var(--ink-muted);
    margin-top: 2px;
}

.mp-fcard {
    align-items: flex-start;
}

.mp-fcard__icon {
    margin-top: 2px;
}


/* ==========================================================================
   PERBAIKAN: HERO TIDAK LAGI SELEBAR LAYAR
   --------------------------------------------------------------------------
   KESALAHAN SAYA DI RONDE SEBELUMNYA.

   Untuk menggeser subjek foto, saya memberi transform: scale(.94) pada
   gambarnya. Yang saya lupakan: scale mengecilkan gambar DI DALAM kotaknya,
   sedangkan kotaknya tetap selebar layar. Sisa 6% itu memperlihatkan latar
   gelap .mp-hero di tepi kiri dan kanan - sekitar 36px per sisi pada layar
   1210px, persis celah yang terlihat.

   object-fit: cover sudah menjamin gambar menutupi seluruh kotak. Yang
   dibutuhkan hanya menggeser titik fokusnya lewat object-position, TANPA
   menyentuh skala sama sekali.

   Kalau suatu saat subjeknya perlu terlihat lebih kecil, caranya adalah
   memperbesar skala di atas 1 (misalnya 1.06) supaya gambar tetap menutupi
   penuh - bukan mengecilkannya di bawah 1.
   ========================================================================== */

.mp-hero__bg img {
    object-position: 62% center;
    transform: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- Kartu hero disamakan tingginya ----------
   Keterangan yang panjangnya berbeda membuat tinggi kartu tidak sama, dan
   deretan kartu yang tepi bawahnya bergerigi terlihat seperti kesalahan
   susunan. Grid disetel meregang penuh supaya ketiganya sejajar. */
.mp-hero__cards {
    align-items: stretch;
}

.mp-fcard {
    height: 100%;
}


/* ==========================================================================
   PONSEL — PENYESUAIAN TERUKUR
   --------------------------------------------------------------------------
   Diuji pada lima lebar layar yang paling banyak dipakai di Indonesia:
   320, 360, 375, 390, dan 412px.

   Dua titik yang benar-benar bermasalah, sisanya sudah aman:

   1. Pada 320px, baris judul terpanjang butuh 319px sementara ruang isinya
      hanya 280px - judulnya pecah dan terlihat sesak.
   2. Pada 320px, dua tombol berdampingan butuh 320px di ruang 280px.

   Layar 320px memang tidak umum lagi, tetapi masih dipakai ponsel lama dan
   pada mode layar terbagi. Menanganinya murah, dan tidak menyentuh lebar
   lain sama sekali.
   ========================================================================== */

@media (max-width: 380px) {

    /* Tepi dalam dipersempit supaya ruang isi bertambah 16px per sisi. */
    :root {
        --gutter: 14px;
    }

    /* Judul dikecilkan sedikit khusus di lebar ini. */
    .mp-hero__title {
        font-size: clamp(1.6rem, 8.6vw, 2rem);
    }

    /* Tombol menumpuk dan melebar penuh. Dua tombol yang saling menghimpit
       lebih buruk daripada dua tombol bertumpuk: target sentuhnya menyempit
       dan mudah salah tekan. */
    .mp-hero__actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .mp-hero__actions .mp-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- Target sentuh ----------
   Panduan aksesibilitas menetapkan target sentuh minimal 44x44px. Beberapa
   tombol kecil dan tautan ikon di situs ini berada di bawah itu, yang membuat
   pengguna berjempol besar sering meleset. Aturan ini menaikkan tinggi
   minimumnya tanpa mengubah tampilan, karena padding yang sudah ada pada
   sebagian besar tombol memang sudah mendekati angka tersebut. */
@media (pointer: coarse) {

    .mp-btn,
    .mp-nav__links a,
    .mp-social a,
    .mp-link {
        min-height: 44px;
        align-items: center;
    }

    /* CATATAN PENTING — `display: inline-flex` SENGAJA DIHAPUS DARI SINI.
     *
     * Baris itu dulu ada di aturan ini, dan menjadi penyebab satu cacat yang
     * HANYA MUNCUL DI PONSEL SUNGGUHAN, tidak pernah terlihat saat jendela
     * peramban di komputer diperkecil. Sebabnya `pointer: coarse` hanya aktif
     * di perangkat sentuh.
     *
     * Rantainya:
     *
     *   1. `.mp-nav__cta { display: none }` menyembunyikan tombol "Belanja
     *      Sekarang" dari bilah navigasi pada lebar 1024px ke bawah.
     *   2. Aturan ini muncul LEBIH BELAKANG di berkas dengan kekhususan yang
     *      sama (0,1,0), sehingga `display: inline-flex` menang.
     *   3. Di ponsel, tombol selebar 168px itu muncul kembali di bilah
     *      navigasi bersama logo, nama merek, ikon keranjang, dan tombol menu.
     *   4. Baris navigasi jadi punya lebar minimum 372px yang tidak bisa
     *      mengecil, dan SELURUH HALAMAN bisa digeser ke samping di ponsel
     *      320-380px. Nama merek pun terpangkas jadi "Mi...".
     *
     * Deklarasi itu memang tidak diperlukan: `.mp-btn` sudah inline-flex sejak
     * awal, dan `align-items: center` di atas cukup untuk meratakan isinya.
     * Yang dibutuhkan aturan ini hanyalah min-height 44px. */

    /* Kartu produk diberi jarak sentuh lebih longgar supaya menggulir tidak
       tidak sengaja memicu tautan. */
    .mp-prod {
        touch-action: manipulation;
    }
}

/* ---------- Mencegah gulir mendatar ----------
   Penyebab paling sering halaman bisa digeser ke samping di ponsel adalah
   satu elemen yang lebih lebar dari layar - biasanya gambar atau tabel.
   Aturan ini menjaganya tanpa menyembunyikan apa pun. */
img,
video,
table,
pre {
    max-width: 100%;
}


/* ==========================================================================
   KARTU HERO DIRAMPINGKAN
   --------------------------------------------------------------------------
   SUMBER TINGGINYA: setiap kartu punya TIGA baris - angka, judul, lalu
   keterangan. Angka pada barisnya sendiri menambah sekitar 26px per kartu,
   dan karena keterangan sering membungkus dua baris, kartunya menjadi empat
   baris efektif.

   Pada rancangan rujukan angkanya MENYATU dengan judul: "50+ Varian Dessert"
   adalah satu baris, bukan dua. Itu yang membuat kartunya terlihat ramping
   walau isinya sama banyak.

   Elemen .mp-fcard__num sudah dihapus dari halaman, jadi yang tersisa di sini
   hanya merapikan sisa ruangnya.
   ========================================================================== */

.mp-fcard {
    /* Padding dirapatkan. Ruang dalam yang longgar cocok untuk kartu besar
       berisi banyak hal; untuk kartu dua baris ia justru membuat teksnya
       terlihat mengambang di tengah kotak kosong. */
    padding: 14px 16px;
    gap: 12px;
    align-items: center;
}

/* Ikon dikecilkan dan dibulatkan penuh, mengikuti rujukan. Lingkaran terasa
   lebih ringan daripada kotak membulat pada kartu sekecil ini. */
.mp-fcard__icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    margin-top: 0;
    flex: none;
    display: grid;
    place-items: center;
}

.mp-fcard__text {
    gap: 1px;
}

/* Judul: satu baris, tidak membungkus. Angka dan nama menyatu di sini. */
.mp-fcard__text strong {
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.25;
}

/* Keterangan dibatasi dua baris. Kalimat yang lebih panjang dipotong dengan
   elipsis alih-alih menambah tinggi kartu - tinggi kartu yang berubah-ubah
   mengikuti panjang kalimat membuat deretannya bergerigi. */
.mp-fcard__text span:last-child {
    font-size: var(--fs-xs);
    line-height: 1.4;
    color: var(--ink-muted);
    margin-top: 1px;
}

/* PEMOTONGAN DUA BARIS DIHAPUS.

   Aturannya dulu `-webkit-line-clamp: 2`, dipasang supaya tinggi kartu tidak
   berubah-ubah mengikuti panjang kalimat. Alasan itu sudah tidak berlaku:
   sejak revisi ketiga puluh, kartu diregangkan setinggi kartu tertinggi dalam
   satu baris, jadi tingginya sudah seragam tanpa perlu memotong tulisan.

   Yang tersisa hanyalah kerugiannya. Pada dua kolom di ponsel, keterangan
   Custom Order terbaca "Tulisan nama, ukuran, dan kemasan sesuai..." -
   terpotong tepat sebelum kata yang membawa artinya.

   Ini kerugian yang sama dengan nama kartu hero yang sempat dipotong elipsis
   pada revisi ketiga puluh dua, dan dibatalkan karena alasan yang sama:
   tulisan yang terpotong membuat pembaca kehilangan artinya, sementara
   tulisan yang membungkus hanya menambah satu baris. */

/* Kartu tidak lagi dipaksa setinggi kartu tertinggi - dengan isi yang kini
   seragam dua baris, meregang penuh justru menambah ruang kosong di bawah
   teks. */
.mp-hero__cards {
    align-items: start;
}

.mp-fcard {
    height: auto;
}

/* Di ponsel ikon dan teks tetap berdampingan, tidak menumpuk. Kartu setinggi
   dua baris dengan ikon di atas teks akan menjadi empat baris dan kehilangan
   seluruh keuntungan perampingan ini. */
@media (max-width: 640px) {
    .mp-fcard {
        padding: 12px 14px;
    }

    .mp-fcard__icon {
        width: 38px;
        height: 38px;
    }
}


/* Wadah kartu hero dilebarkan dari 720px ke 800px.
   
   Pengukuran menunjukkan judul terpanjang, "51+ Varian Dessert", memerlukan
   131px sementara ruang teks per kartu hanya 135px - sisa 4px. Selisih
   sekecil itu tidak selamat: perbedaan render huruf antarperamban, atau
   jumlah varian yang naik menjadi tiga digit, langsung membuatnya membungkus
   dua baris dan seluruh perampingan tadi hilang.
   
   Dengan 800px, ruang teks menjadi sekitar 162px - cukup lega untuk judul
   yang lebih panjang tanpa membuat kartunya terlihat melebar. */
.mp-hero__cards {
    max-width: 800px;
}


/* ==========================================================================
   IRAMA VERTIKAL HERO
   --------------------------------------------------------------------------
   Jarak di hero sudah ditulis di beberapa tempat berbeda selama pengerjaan,
   dan sebagian saling menimpa - .mp-hero__cards misalnya punya dua deklarasi
   margin-top yang berbeda, dan yang menang bukan yang dimaksudkan.

   Blok ini menyatukan semuanya. Angkanya disusun MENAIK dari atas ke bawah,
   karena jarak yang seragam membuat semua elemen terasa sama pentingnya:

     eyebrow -> judul     : rapat, keduanya satu kesatuan
     judul   -> paragraf  : sedang
     paragraf-> tombol    : lebih lega, menandai peralihan ke tindakan
     tombol  -> kartu     : paling lega, kartu adalah blok terpisah

   Terakhir, ruang di bawah kartu ditambah supaya kartu tidak menempel pada
   lengkung putih di kaki hero.
   ========================================================================== */

.mp-hero__title {
    margin-block: 16px 22px;
}

.mp-hero__inner .mp-lede {
    margin-bottom: clamp(26px, 3vw, 38px);
    max-width: 46ch;
}

.mp-hero__cards {
    margin-top: clamp(38px, 4.6vw, 62px);
    margin-bottom: 0;
}

/* Ruang di bawah kartu, sebelum lengkung. Sebelumnya kartu hampir menyentuh
   lengkungnya, yang membuat kaki hero terasa penuh sesak. */
.mp-hero .mp-shell {
    padding-bottom: clamp(76px, 9vw, 138px);
}

/* Tumpangan kartu percaya dikurangi. Nilai -96px membuatnya naik terlalu
   dalam sehingga menghimpit kartu hero di atasnya; -56px sudah cukup untuk
   memberi kesan mengikat dua bagian tanpa berdesakan. */
.mp-trustbar {
    margin-top: clamp(-56px, -4vw, -32px);
    padding-bottom: clamp(44px, 5.5vw, 76px);
}

@media (max-width: 640px) {
    .mp-trustbar {
        margin-top: 0;
        padding-top: clamp(24px, 6vw, 36px);
        padding-bottom: clamp(28px, 6vw, 40px);
    }

    .mp-hero .mp-shell {
        padding-bottom: clamp(48px, 9vw, 72px);
    }
}


/* ==========================================================================
   NAVBAR DI ATAS HERO — MENGAPA PERLU LATAR
   --------------------------------------------------------------------------
   Navbar bening di atas foto memang terlihat mahal: fotonya terlihat penuh
   dari tepi atas, tanpa pita yang memotongnya.

   MASALAHNYA KETERBACAAN, DAN ITU TERUKUR.

   Selubung hero sengaja dibuat nyaris bening di sisi kanan supaya pudingnya
   terlihat terang. Tetapi menu navbar juga berada di sisi kanan. Hasil
   pengukuran pada bagian foto yang terang:

       Beranda ...............  11,06  aman
       Cara Pesan ............   5,53  aman
       Cek Status Pesanan ....   2,41  GAGAL
       Kontak ................   1,61  GAGAL
       Keranjang .............   1,23  GAGAL

   Tiga menu paling kanan tidak memenuhi ambang keterbacaan.

   YANG LEBIH BERBAHAYA: foto hero bisa diganti pemilik lewat panel admin.
   Begitu ia mengunggah foto yang lebih terang, seluruh menu kanan lenyap -
   dan tidak ada yang akan menyadarinya sampai ada pelanggan yang mengeluh
   karena tidak menemukan tombol Cek Status.

   PENYELESAIANNYA BUKAN PITA PENUH.
   Pita solid akan menghilangkan kesan mahal itu. Yang dipakai di sini adalah
   selubung gelap yang memudar ke bawah: pekat di tepi atas tempat teks
   berada, hilang sepenuhnya beberapa puluh piksel di bawahnya. Fotonya tetap
   terlihat utuh, tetapi teksnya dijamin terbaca berapa pun terangnya foto
   yang diunggah.
   ========================================================================== */

.mp-nav--over::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 190%;
    background: linear-gradient(180deg,
            rgba(28, 18, 30, .58) 0%,
            rgba(28, 18, 30, .34) 45%,
            rgba(28, 18, 30, 0) 100%);
    pointer-events: none;
    z-index: -1;
}

/* Navbar perlu konteks penumpukan sendiri supaya selubung di atas berada di
   BELAKANG isinya, bukan menutupinya. */
.mp-nav--over {
    isolation: isolate;
}

/* Teks navbar dinaikkan ke putih penuh. Dengan selubung di belakangnya,
   putih penuh tidak lagi terasa menyilaukan - dan setiap satuan kontras
   berguna di sini. */
.mp-nav--over .mp-nav__brand,
.mp-nav--over .mp-nav__links a,
.mp-nav--over .mp-nav__icon {
    color: rgba(255, 255, 255, .94);
}

@media (prefers-contrast: more) {
    .mp-nav--over::before {
        background: rgba(28, 18, 30, .72);
    }
}


/* ==========================================================================
   HERO DUA BIDANG
   --------------------------------------------------------------------------
   Menggantikan susunan foto-penuh-berselubung. Penjelasan lengkap alasannya
   ada di app/Views/frontend/landing.php tepat di atas elemen hero.

   Ringkasnya: teks tidak lagi berdiri di atas foto, sehingga tidak ada lagi
   selubung yang harus menggelapkan foto demi keterbacaan - dan warna merek
   tidak lagi bercampur dengan warna foto.
   ========================================================================== */

.mp-hero--split {
    /* Latar merah jambu lembut, bukan tinta gelap. Inilah "terang dan soft
       pink" yang selama ini dikejar lewat gradien di atas foto cokelat. */
    background:
        radial-gradient(1000px 700px at 88% 8%,
            rgba(181, 72, 114, .12) 0%,
            rgba(181, 72, 114, 0) 64%),
        linear-gradient(160deg,
            var(--rose-mist) 0%,
            var(--porcelain) 46%,
            var(--cream) 100%);
    color: var(--ink);

    /* SECTION TIDAK DIJADIKAN GRID.
     *
     * Percobaan pertama menjadikan section ini grid dua kolom, padahal
     * fotonya berada di dalam .mp-shell sementara aturannya menyasar anak
     * langsung section. Akibatnya grid membuat kolom bayangan dan kolom teks
     * terhimpit sampai selebar satu huruf.
     *
     * Grid dua kolomnya sekarang ada di .mp-shell, tempat kedua bidang
     * benar-benar bersaudara. Section ini cukup menjadi wadah biasa. */
    display: block;
    min-height: auto;
    padding-block: calc(var(--nav-h) + clamp(28px, 4vw, 56px)) 0;
    overflow: visible;
}

/* Bidang foto: berdiri sendiri di sisi kanan, dibingkai dan dibulatkan.
   Foto yang dibingkai terbaca sebagai BENDA yang dipajang; foto yang
   memenuhi layar terbaca sebagai latar. Untuk toko yang menjual barangnya
   lewat rupa, benda yang dipajang lebih tepat. */
.mp-hero--split .mp-hero__bg {
    position: relative;
    inset: auto;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(36, 24, 38, .14);
    aspect-ratio: 4 / 3;
}

.mp-hero--split .mp-hero__bg img {
    object-position: center;
    transform: none;
}

/* Selubung dan garis pandu tidak lagi diperlukan: tidak ada teks di atas
   foto yang perlu dilindungi. */
.mp-hero--split .mp-hero__veil,
.mp-hero--split .mp-hero__rule {
    display: none;
}

/* Teks kembali gelap. Kontras terhadap latar merah jambu terang jauh
   melampaui ambang, tanpa bantuan selubung apa pun. */
.mp-hero--split .mp-hero__title {
    color: var(--ink);
}

.mp-hero--split .mp-hero__title em {
    color: var(--rose-deep);
}

.mp-hero--split .mp-eyebrow {
    color: var(--rose-deep);
}

.mp-hero--split .mp-lede {
    color: var(--ink-soft);
}

/* Tombol kedua kembali bergaya garis gelap, karena latarnya kini terang. */
.mp-hero--split .mp-btn--ghost {
    border-color: var(--line-strong);
    color: var(--ink);
}

.mp-hero--split .mp-btn--ghost:hover {
    border-color: var(--rose);
    color: var(--rose-deep);
    background: var(--rose-mist);
}

/* ---------- Susunan dua kolom ---------- */
@media (min-width: 900px) {
    .mp-hero--split .mp-shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        align-items: center;
        gap: clamp(32px, 4vw, 68px);
        padding-bottom: clamp(40px, 5vw, 72px);
    }

    .mp-hero--split .mp-hero__inner {
        max-width: none;
        grid-column: 1;
        grid-row: 1;
    }

    /* Foto ditempatkan di kolom kanan, membentang dua baris supaya sejajar
       dengan teks dan kartu di sebelahnya. */
    .mp-hero--split .mp-hero__bg {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: stretch;
        aspect-ratio: auto;
        min-height: clamp(420px, 46vw, 620px);
        margin-bottom: 0;
    }

    .mp-hero--split .mp-hero__cards {
        grid-column: 1;
        grid-row: 2;
        max-width: none;
        margin-top: clamp(30px, 3.4vw, 44px);
    }
}

/* Di bawah 900px foto pindah ke atas teks - urutan yang wajar di ponsel:
   lihat barangnya dulu, baru baca keterangannya. */
@media (max-width: 899px) {
    .mp-hero--split .mp-hero__bg {
        margin-bottom: clamp(22px, 4vw, 34px);
        aspect-ratio: 16 / 10;
    }

    .mp-hero--split .mp-shell {
        display: flex;
        flex-direction: column;
        padding-bottom: clamp(36px, 6vw, 56px);
    }

    .mp-hero--split .mp-hero__bg {
        order: -1;
    }
}

/* Lengkung putih dilepas: latar hero kini menyatu dengan latar halaman, jadi
   tidak ada batas yang perlu dilembutkan. */
.mp-hero--split .mp-curve {
    display: none;
}

/* Kartu percaya tidak lagi menumpang ke atas hero, karena tidak ada bidang
   gelap yang perlu diikat ke bidang terang. */
.mp-hero--split + .mp-trustbar {
    margin-top: 0;
    padding-top: clamp(8px, 2vw, 20px);
}


/* Navbar di atas hero dua bidang.
   
   Latarnya kini terang, jadi teks navbar yang putih menjadi tidak terbaca.
   Selubung gelap yang dipasang sebelumnya juga tidak lagi diperlukan - dan
   justru merusak, karena ia menaruh pita gelap di atas bidang merah jambu
   yang terang.
   
   Aturan ini mengembalikan navbar ke warna tintanya, dan hanya berlaku bila
   hero yang di bawahnya memang bertipe dua bidang. */
.mp-hero--split ~ * .mp-nav--over::before,
body:has(.mp-hero--split) .mp-nav--over::before {
    display: none;
}

body:has(.mp-hero--split) .mp-nav--over .mp-nav__brand,
body:has(.mp-hero--split) .mp-nav--over .mp-nav__links a,
body:has(.mp-hero--split) .mp-nav--over .mp-nav__icon {
    color: var(--ink-soft);
}

body:has(.mp-hero--split) .mp-nav--over .mp-nav__links a:hover,
body:has(.mp-hero--split) .mp-nav--over .mp-nav__links a.is-active {
    color: var(--ink);
}

body:has(.mp-hero--split) .mp-nav--over .mp-nav__icon:hover {
    background: rgba(36, 24, 38, .07);
    color: var(--ink);
}


/* ==========================================================================
   HERO DUA BIDANG — SENTUHAN AKHIR
   ========================================================================== */

/* ---------- Eyebrow berbentuk pil ----------
   Di atas bidang berwarna, teks kecil berhuruf besar semua dengan garis di
   bawahnya mudah terbaca sebagai keterangan yang nyasar. Bentuk pil membuat
   batasnya jelas: ini label, bukan kalimat. */
.mp-eyebrow--pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px 7px 13px;
    border-radius: var(--r-pill);
    background: var(--surface);
    border: 1px solid var(--rose-soft);
    box-shadow: 0 2px 10px rgba(36, 24, 38, .05);
    letter-spacing: .13em;
    color: var(--rose-deep);
}

/* Garis bawah bawaan .mp-eyebrow dilepas - pil sudah punya batasnya sendiri,
   dan garis di dalam pil terlihat seperti coretan. */
.mp-eyebrow--pill {
    padding-bottom: 7px;
}

.mp-eyebrow--pill::after {
    display: none;
}

/* Titik penanda. Ukurannya kecil dan warnanya penuh, jadi ia membaca sebagai
   penanda status - bukan hiasan. */
.mp-eyebrow--pill i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rose);
    flex: none;
}

/* ---------- Lencana mengambang di foto ----------
   Memberi bidang foto satu titik baca, sehingga ia tidak sekadar gambar besar
   yang diam. Ditempatkan di sudut ATAS KANAN karena sudut itu paling jarang
   memuat subjek utama pada foto makanan - subjeknya hampir selalu di tengah
   atau agak ke bawah. */
.mp-hero__badge {
    position: absolute;
    top: clamp(14px, 1.6vw, 22px);
    right: clamp(14px, 1.6vw, 22px);
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    border-radius: var(--r-md);

    /* Latar putih pekat, bukan kaca buram. Kaca buram terlihat bagus di atas
       foto yang seragam, tetapi berubah-ubah keterbacaannya mengikuti foto -
       persis masalah yang baru saja kita hindari pada navbar. */
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 6px 20px rgba(36, 24, 38, .16);
    color: var(--ink);
}

.mp-hero__badge .mp-icon {
    color: var(--rose-deep);
    flex: none;
}

.mp-hero__badge > span {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    font-size: var(--fs-xs);
    color: var(--ink-muted);
}

.mp-hero__badge strong {
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rose-deep);
}

/* Di ponsel lencananya dikecilkan; pada foto selebar layar sempit, lencana
   sebesar aslinya menutupi terlalu banyak bagian atas gambar. */
@media (max-width: 640px) {
    .mp-hero__badge {
        padding: 8px 12px;
        gap: 8px;
    }
}

/* ---------- Susunan kartu 2 + 1 ----------
   Mengikuti rujukan: dua kartu di baris atas, satu di bawah. Tiga kartu
   sejajar pada kolom teks yang lebarnya sekitar 600px menyisakan 190px per
   kartu - terlalu sempit untuk judul beserta keterangannya, dan itulah
   sebabnya kartunya terasa berdesakan.

   Dengan 2 + 1, tiap kartu mendapat sekitar 290px. */
@media (min-width: 900px) {
    .mp-hero--split .mp-hero__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ==========================================================================
   HIASAN LATAR
   --------------------------------------------------------------------------
   MASALAHNYA TERUKUR: seluruh beranda hanya memuat tujuh gambar, dan tiga
   bagian pertama setelah hero - kartu percaya lalu kalimat pernyataan -
   seluruhnya teks. Pengunjung menggulir melewati dua blok teks berturut-turut
   sebelum melihat foto produk pertama.

   Hiasan di sini bukan sekadar mempercantik: ia memberi mata sesuatu untuk
   dilihat di rentang itu, sehingga menggulir tidak terasa seperti membaca
   dokumen.

   SEMUANYA CSS DAN SVG YANG DITANAM LANGSUNG.
   Tidak ada berkas gambar baru yang diunduh, tidak ada permintaan jaringan
   tambahan, dan seluruh hiasan mengikuti warna merek lewat token - jadi bila
   paletnya diubah lagi, hiasannya ikut berubah sendiri.
   ========================================================================== */

/* ---------- 1. Gumpalan warna lembut ----------
   Dibuat dengan radial-gradient, BUKAN filter: blur. Keduanya terlihat sama,
   tetapi filter blur memaksa peramban menggambar ulang lapisan besar setiap
   kali halaman digulir - pada ponsel kelas menengah itu terasa sebagai
   gulir yang tersendat. radial-gradient tidak punya biaya itu. */
.mp-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.mp-blob--rose {
    background: radial-gradient(circle,
            rgba(181, 72, 114, .16) 0%,
            rgba(181, 72, 114, .05) 45%,
            rgba(181, 72, 114, 0) 70%);
}

.mp-blob--plum {
    background: radial-gradient(circle,
            rgba(142, 58, 110, .13) 0%,
            rgba(142, 58, 110, .04) 45%,
            rgba(142, 58, 110, 0) 70%);
}

/* ---------- 2. Motif garis puding ----------
   Siluet puding beserta tetesan sausnya, digambar sebagai garis tipis. Ia
   sangat samar - lebih terasa sebagai tekstur daripada gambar - tetapi
   bentuknya mengaitkan halaman dengan apa yang dijual, sesuatu yang tidak
   bisa dilakukan bentuk abstrak.

   Digambar sekali sebagai SVG lalu dipakai ulang lewat kelas, sehingga
   menambahkannya di bagian lain tidak menambah ukuran berkas. */
.mp-motif {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    opacity: .5;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23B54872' stroke-width='1.4' opacity='.5'%3E%3Cpath d='M28 52h64c2 0 3 2 2 4l-7 38a6 6 0 0 1-6 5H39a6 6 0 0 1-6-5l-7-38c-1-2 0-4 2-4z'/%3E%3Cpath d='M30 60c6 4 12 0 18 4s12 0 18 4 12 0 18-4 12 0 12 0'/%3E%3Cellipse cx='60' cy='52' rx='32' ry='7'/%3E%3Cpath d='M60 45V30M52 34l8-6 8 6'/%3E%3C/svg%3E");
}

/* ---------- 3. Penempatan pada bagian yang seluruhnya teks ----------
   Kartu percaya dan kalimat pernyataan - dua bagian yang paling kering. */

.mp-trustbar {
    position: relative;
    overflow: hidden;
}

.mp-trustbar::before {
    content: "";
    position: absolute;
    left: -6%;
    top: -40%;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(181, 72, 114, .12) 0%,
            rgba(181, 72, 114, 0) 68%);
    pointer-events: none;
}

.mp-statement {
    position: relative;
    overflow: hidden;
}

/* Dua motif puding mengapit kalimat pernyataan, kiri dan kanan. Ukurannya
   besar tetapi opasitasnya rendah, sehingga terbaca sebagai bayangan bentuk -
   bukan gambar yang bersaing dengan tulisannya. */
.mp-statement::before,
.mp-statement::after {
    content: "";
    position: absolute;
    width: clamp(150px, 17vw, 260px);
    height: clamp(150px, 17vw, 260px);
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23B54872' stroke-width='1.4'%3E%3Cpath d='M28 52h64c2 0 3 2 2 4l-7 38a6 6 0 0 1-6 5H39a6 6 0 0 1-6-5l-7-38c-1-2 0-4 2-4z'/%3E%3Cpath d='M30 60c6 4 12 0 18 4s12 0 18 4 12 0 18-4 12 0 12 0'/%3E%3Cellipse cx='60' cy='52' rx='32' ry='7'/%3E%3C/svg%3E");
    opacity: .10;
    pointer-events: none;
    z-index: 0;
}

.mp-statement::before {
    left: clamp(-30px, -1vw, 10px);
    top: 8%;
    transform: rotate(-14deg);
}

.mp-statement::after {
    right: clamp(-30px, -1vw, 10px);
    bottom: 6%;
    transform: rotate(11deg);
}

/* Isi tetap di atas hiasan. Tanpa ini, motif yang digambar belakangan bisa
   menutupi teksnya di sebagian peramban. */
.mp-statement .mp-shell,
.mp-trustbar .mp-shell {
    position: relative;
    z-index: 1;
}

/* Di ponsel motifnya dilepas. Pada layar sempit ia menempati proporsi yang
   jauh lebih besar terhadap teksnya, dan berubah dari tekstur menjadi
   gangguan. */
@media (max-width: 700px) {

    .mp-statement::before,
    .mp-statement::after {
        display: none;
    }

    .mp-trustbar::before {
        width: 200px;
        height: 200px;
    }
}

@media (prefers-contrast: more) {

    .mp-statement::before,
    .mp-statement::after,
    .mp-trustbar::before {
        display: none;
    }
}




/* ==========================================================================
   EMPAT KARTU HERO & PERALIHAN
   ========================================================================== */

/* Empat kartu disusun 2 x 2 di dalam kolom teks.
   Susunan ini bukan sekadar menampung kartu keempat: dua baris berisi dua
   kartu membentuk blok persegi yang seimbang dengan bidang foto di sebelah
   kanannya. Empat kartu sebaris akan menyisakan sekitar 140px per kartu -
   terlalu sempit - sedangkan 3+1 meninggalkan satu kartu menggantung
   sendirian, yang selalu terbaca sebagai kehabisan tempat. */
@media (min-width: 900px) {
    .mp-hero--split .mp-hero__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(12px, 1.4vw, 18px);
    }
}

/* Di tablet tetap dua kolom; di ponsel menumpuk satu per baris. */
@media (max-width: 899px) and (min-width: 561px) {
    .mp-hero--split .mp-hero__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- Peralihan setelah hero ----------
   Menggantikan strip kartu percaya yang dihapus.

   Tingginya sengaja kecil. Godaannya adalah mengisi ruang bekas strip itu
   dengan bidang hiasan besar, tetapi bidang kosong yang harus digulir sama
   melelahkannya dengan blok teks yang harus dibaca - bedanya, blok teks
   setidaknya memberi alasan membeli.

   Yang dibutuhkan hanya melembutkan batas antara latar merah jambu hero dan
   latar halaman di bawahnya, supaya perpindahannya tidak terlihat sebagai
   garis. */
.mp-fade {
    height: clamp(40px, 5vw, 76px);
    background: linear-gradient(180deg,
            var(--cream) 0%,
            var(--porcelain) 100%);
    pointer-events: none;
}


/* ==========================================================================
   POSISI BLOK TEKS HERO
   --------------------------------------------------------------------------
   PENGUKURAN DULU. Dari tangkapan layar: teks dan foto sama-sama mulai di
   sekitar 188px dan berakhir di sekitar 730px - tingginya sudah sepadan.

   Yang membuat teksnya terasa menumpuk di atas adalah LUBANG 90 PIKSEL antara
   tombol dan kartu, di tengah kolom itu sendiri.

   Kalau seluruh blok teks sekadar diturunkan, kartunya akan melewati batas
   bawah foto dan susunannya justru miring. Jadi dikerjakan dua hal sekaligus:

     1. Bagian atas diturunkan - judul tidak lagi sejajar tepat dengan tepi
        atas foto, melainkan sedikit di bawahnya. Tepi yang sejajar sempurna
        terlihat kaku; sedikit selisih justru terbaca lebih disengaja.

     2. Lubang di tengah dirapatkan, sehingga tinggi keseluruhannya tetap
        sepadan dengan foto.
   ========================================================================== */

@media (min-width: 900px) {

    /* Turun sekitar 40px pada layar besar. Nilainya cukup untuk terasa,
       tetapi tidak sampai membuat kartu terdorong melewati foto. */
    .mp-hero--split .mp-hero__inner {
        padding-top: clamp(16px, 3vw, 46px);
    }

    /* Lubang antara tombol dan kartu dirapatkan dari sekitar 90px ke 60px.
       Ruang kosong sebesar itu di TENGAH satu kolom terbaca sebagai dua blok
       terpisah, bukan satu kolom yang mengalir. */
    .mp-hero--split .mp-hero__cards {
        margin-top: clamp(24px, 2.8vw, 38px);
    }

    /* Jarak paragraf ke tombol ikut dirapatkan sedikit, supaya pengurangan
       tadi tidak semuanya jatuh di satu tempat. */
    .mp-hero--split .mp-hero__inner .mp-lede {
        margin-bottom: clamp(22px, 2.4vw, 30px);
    }
}


/* ==========================================================================
   KONTAK & PETA BERSEBELAHAN
   --------------------------------------------------------------------------
   Susunan lama: tiga kartu berjajar mendatar, lalu peta membentang penuh di
   bawahnya. Mata harus bergerak dua arah - mendatar membaca kartu, lalu turun
   jauh ke peta - padahal "Toko: Kajen" dan lokasinya di peta adalah satu
   informasi yang sama.

   Sekarang keduanya bersebelahan, dan tingginya disamakan sehingga berhenti
   di garis yang sama. Kolom yang tepi bawahnya rata terbaca sebagai satu
   susunan yang disengaja; yang tidak rata terbaca sebagai kebetulan.
   ========================================================================== */

.mp-contactwrap {
    display: grid;
    gap: clamp(18px, 2.4vw, 34px);
    align-items: stretch;
}

/* Kolom kiri: tiga kartu MENUMPUK, bukan berjajar. Berjajar di dalam kolom
   selebar setengah layar akan menyisakan sekitar 190px per kartu - terlalu
   sempit untuk alamat surel. */
.mp-contacts {
    display: grid;

    /* WAJIB ditulis ulang di sini.
       Aturan .mp-contacts yang lebih awal di berkas ini memakai
       repeat(auto-fit, minmax(240px, 1fr)) - dibuat saat kartu masih berjajar
       melebar penuh. Tanpa menimpanya, kartu akan tetap berjajar DI DALAM
       kolom kiri yang sempit, dan tiga kartu berdampingan di ruang 575px
       hanya mendapat sekitar 180px masing-masing. */
    grid-template-columns: 1fr;

    gap: clamp(12px, 1.4vw, 18px);
    align-content: start;

    /* Jarak bawah lama dilepas: peta tidak lagi berada di bawahnya. */
    margin-bottom: 0;
}

/* Peta mengisi seluruh tinggi kolomnya, mengikuti tinggi tumpukan kartu di
   sebelah kiri. Karena itu iframe-nya memakai height 100%, bukan 400px tetap -
   angka tetap tidak akan pernah pas dengan tinggi kartu yang berubah-ubah
   mengikuti panjang teksnya. */
.mp-map {
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    min-height: 380px;
}

.mp-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 380px;
}

/* Kartu kontak dipadatkan: dengan tiga kartu bertumpuk, padding besar membuat
   kolomnya jauh lebih tinggi daripada peta di sebelahnya. */
.mp-contacts .mp-card {
    padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 26px);
}

.mp-contact__title {
    margin: 0 0 4px;
    font-size: var(--fs-sm);
    font-weight: 600;
}

.mp-contact__value {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--rose-deep);
    word-break: break-word;
}

.mp-contact__detail {
    margin: 3px 0 10px;
    font-size: var(--fs-xs);
    color: var(--ink-muted);
}

/* ---------- Dua kolom ----------
   Peta diberi porsi sedikit lebih besar. Peta yang terlalu sempit kehilangan
   gunanya: nama jalan di sekitarnya tidak lagi terbaca, dan pengunjung tidak
   bisa mengenali lokasinya. */
@media (min-width: 900px) {
    .mp-contactwrap {
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    }
}

/* Di bawah 900px peta pindah ke bawah kartu, dan tingginya kembali tetap
   karena tidak ada lagi kolom sebelah yang perlu disamakan. */
@media (max-width: 899px) {
    .mp-map {
        min-height: 320px;
    }

    .mp-map iframe {
        min-height: 320px;
    }
}

/* Di tablet, tiga kartu kontak kembali berjajar dua kolom supaya kolomnya
   tidak menjadi terlalu tinggi. */
@media (max-width: 899px) and (min-width: 620px) {
    .mp-contacts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mp-contacts .mp-card:last-child {
        grid-column: 1 / -1;
    }
}


/* ==========================================================================
   NAVBAR DIBERI LATAR
   --------------------------------------------------------------------------
   Sejak hero berganti menjadi dua bidang berlatar terang, navbar yang bening
   kehilangan pijakannya: teksnya melayang di atas gradasi merah jambu tanpa
   batas yang jelas, sehingga tidak terbaca sebagai bilah navigasi.

   Latarnya dibuat hampir putih dengan sedikit tembus pandang, bukan putih
   pekat. Bedanya halus tetapi terasa: warna hero di baliknya masih sedikit
   menembus, sehingga bilahnya terbaca menempel pada halaman - bukan
   ditempelkan di atasnya.
   ========================================================================== */

body:has(.mp-hero--split) .mp-nav--over {
    position: sticky;
    background: rgba(253, 250, 248, .88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}

/* Peramban tanpa dukungan backdrop-filter mendapat latar yang lebih pekat,
   supaya teksnya tetap terbaca tanpa efek buram. */
@supports not (backdrop-filter: blur(4px)) {
    body:has(.mp-hero--split) .mp-nav--over {
        background: rgba(253, 250, 248, .97);
    }
}

/* Hero tidak lagi perlu menyediakan ruang untuk navbar yang menumpang,
   karena navbarnya kini berdiri di atasnya. */
.mp-hero--split {
    padding-top: clamp(28px, 4vw, 56px);
}


/* ==========================================================================
   CARA PESAN — KARTU BERNOMOR BERPENGHUBUNG
   --------------------------------------------------------------------------
   Bentuk sebelumnya: empat blok dengan garis di atas dan nomor kecil di
   pojok. Bersih, tetapi tidak menunjukkan bahwa keempatnya BERURUTAN - mata
   membacanya sebagai empat hal setara, bukan empat tahap yang harus dilalui.

   Bentuk sekarang mengikuti rujukan: kartu berlatar dengan lencana nomor
   menonjol di sudut, dihubungkan panah putus-putus. Panah itulah yang
   mengubah "empat kotak" menjadi "satu alur".

   Panah digambar dengan CSS, bukan gambar. Ia otomatis hilang setelah kartu
   terakhir dan saat susunannya berubah menumpuk di ponsel - dua hal yang
   harus dikerjakan manual bila memakai gambar.
   ========================================================================== */

.mp-flow {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: clamp(14px, 2vw, 26px);
    counter-reset: step;
}

.mp-flow__item {
    position: relative;
    padding: 34px clamp(18px, 2vw, 24px) clamp(20px, 2.2vw, 26px);
    border-top: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: 0 2px 10px rgba(36, 24, 38, .05);
    text-align: center;
}

/* Lencana nomor. Ditaruh MENGGANTUNG di sudut kiri atas, setengah keluar dari
   kartu - posisi itu membuatnya terbaca sebagai penanda urutan yang menempel
   pada kartu, bukan sebagai isi kartu. */
.mp-flow__item::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    top: -16px;
    left: 18px;

    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;

    border-radius: 50%;
    background: var(--rose);
    color: #FFF;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    padding-right: 0;
    box-shadow: 0 3px 10px rgba(181, 72, 114, .32);
}

.mp-band--cream .mp-flow__item::before {
    background: var(--rose);
}

/* Panah penghubung antarkartu. Digambar sebagai garis putus-putus dengan
   kepala panah dari dua garis miring, seluruhnya CSS. */
.mp-flow__item::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(clamp(14px, 2vw, 26px) * -1);
    width: clamp(14px, 2vw, 26px);
    height: 2px;
    background: repeating-linear-gradient(90deg,
            var(--rose-soft) 0 6px,
            transparent 6px 11px);
    transform: translateY(-50%);
}

/* Panah dilepas dari kartu terakhir - alurnya berhenti di situ. */
.mp-flow__item:last-child::after {
    display: none;
}

.mp-flow__title {
    margin-bottom: 8px;
    font-size: var(--fs-md);
}

.mp-flow__text {
    font-size: var(--fs-xs);
    line-height: 1.55;
    color: var(--ink-muted);
}

/* Saat kartu menumpuk, panah mendatar menunjuk ke ruang kosong di samping.
   Karena jumlah kolomnya ditentukan auto-fit dan tidak bisa diketahui CSS,
   panah dimatikan di bawah lebar tempat empat kartu tidak lagi muat sebaris. */
@media (max-width: 1000px) {
    .mp-flow__item::after {
        display: none;
    }
}

@media (max-width: 560px) {
    .mp-flow {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .mp-flow__item {
        text-align: left;
        padding-top: 30px;
    }
}


/* Penjaga ukuran lencana metode pembayaran di footer.
   
   Footer sempat merentangkan gambar QRIS sampai menutupi separuh halaman,
   karena kolom `logo` yang dulu berisi logo bank kecil kini berisi poster
   QRIS berukuran penuh. Blok itu sudah diubah menjadi teks saja, tetapi
   batas ini dipertahankan sebagai jaring pengaman: bila suatu saat ada
   gambar yang masuk ke sana lagi, ia tidak akan merusak tata letak. */
.mp-paylogo img {
    max-width: 64px;
    max-height: 28px;
    width: auto;
    height: auto;
    object-fit: contain;
}


/* ==========================================================================
   KOLOM PRODUK DIPATOK KE PEMBAGI DELAPAN
   --------------------------------------------------------------------------
   MASALAHNYA: grid memakai repeat(auto-fill, minmax(250px, 1fr)), yang
   membiarkan peramban menentukan sendiri berapa kolom yang muat. Jumlahnya
   berubah mengikuti lebar layar, dan pada tiga lebar yang umum hasilnya
   timpang:

       1920px -> 5 kolom -> 5 + 3
       1024px -> 3 kolom -> 3 + 3 + 2
        900px -> 3 kolom -> 3 + 3 + 2

   Baris terakhir yang isinya lebih sedikit membuat deretan terlihat seperti
   kehabisan barang, bukan seperti pilihan yang disengaja.

   PENYELESAIANNYA: jumlah kolom dipatok, dan hanya boleh berupa PEMBAGI dari
   jumlah produk yang ditampilkan. Karena pengaturan "jumlah menu unggulan"
   bernilai 8, kolom yang sah adalah 4, 2, dan 1 - ketiganya membagi 8 tanpa
   sisa.

   Angka 3 sengaja DILEWATI walau muat di layar sekitar 1000px. Tiga kolom
   memang terlihat pas, tetapi 8 tidak habis dibagi 3, dan baris terakhir
   akan selalu menyisakan dua kartu.
   ========================================================================== */

/* Empat kolom pada layar 900px ke atas.
   Pada 900px tiap kartu mendapat sekitar 195px - masih cukup untuk foto,
   nama produk dua baris, dan harganya. */
@media (min-width: 900px) {

    .mp-grid--3,
    .mp-grid--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Dua kolom pada tablet dan ponsel besar. Delapan produk menjadi empat baris
   berisi dua - tetap rapi. */
@media (min-width: 480px) and (max-width: 899px) {

    .mp-grid--3,
    .mp-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Satu kolom pada ponsel kecil. Dua kartu berdampingan di lebar 390px
   menyisakan sekitar 160px per kartu, terlalu sempit untuk nama produk
   sepanjang "Burnt Cheesecake 18cm" tanpa membungkus tiga baris. */
@media (max-width: 479px) {

    .mp-grid--3,
    .mp-grid--4 {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   HERO MENYELURUH BERLATAR TERANG
   --------------------------------------------------------------------------
   Foto memenuhi layar, selubungnya terang, teksnya gelap.
   Menggantikan susunan dua bidang (.mp-hero--split), yang aturannya
   dibiarkan di berkas ini karena kelasnya sudah tidak dipakai.
   ========================================================================== */

.mp-hero--terang {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: clamp(620px, 92svh, 900px);
    padding-block: calc(var(--nav-h) + clamp(36px, 5vw, 72px)) clamp(80px, 10vw, 140px);
    overflow: hidden;

    /* Warna dasar bila foto belum diunggah atau gagal dimuat. Merah jambu
       terang, bukan tinta gelap - halaman tetap terang walau fotonya hilang. */
    background: var(--rose-mist);
    color: var(--ink);
}

.mp-hero--terang .mp-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: 0;
    box-shadow: none;
    aspect-ratio: auto;
    min-height: 0;
    margin: 0;
    order: 0;
}

.mp-hero--terang .mp-hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 68% center;
    transform: none;
}

/* ---------- Selubung terang, tiga lapis ----------
     1. Sapuan UNGU di pojok kanan atas. Mitra menyukai ungu, tetapi ungu di
        area teks akan mengeruhkan warnanya - jadi ia ditaruh di sisi foto.
     2. Sapuan MERAH JAMBU di kiri bawah, mengikat kartu ke bidang hero.
     3. Selubung utama mendatar: pekat di kiri tempat teks, memudar hampir
        hilang di kanan tempat puding berada.

   Nilai 0,90 di sisi kiri bukan tebakan: pada foto tergelap sekalipun,
   selubung setinggi itu menghasilkan rasio 13,2 untuk teks plum. */
.mp-hero--terang .mp-hero__veil {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(760px 560px at 88% 6%,
            rgba(122, 74, 158, .20) 0%,
            rgba(122, 74, 158, 0) 68%),
        radial-gradient(680px 520px at 4% 92%,
            rgba(181, 72, 114, .16) 0%,
            rgba(181, 72, 114, 0) 66%),
        linear-gradient(97deg,
            rgba(253, 244, 248, .94) 0%,
            rgba(253, 244, 248, .90) 34%,
            rgba(253, 244, 248, .74) 48%,
            rgba(253, 244, 248, .38) 62%,
            rgba(253, 244, 248, .14) 76%,
            rgba(253, 244, 248, .04) 100%);
}

.mp-hero--terang .mp-hero__title {
    color: var(--ink);
}

.mp-hero--terang .mp-hero__title em {
    color: var(--rose-deep);
}

.mp-hero--terang .mp-lede {
    color: var(--ink-soft);
}

.mp-hero--terang .mp-eyebrow--pill {
    background: rgba(255, 255, 255, .92);
    border-color: var(--rose-soft);
    color: var(--rose-deep);
}

.mp-hero--terang .mp-btn--ghost {
    border-color: var(--line-strong);
    color: var(--ink);
    background: rgba(255, 255, 255, .55);
}

.mp-hero--terang .mp-btn--ghost:hover {
    border-color: var(--rose);
    color: var(--rose-deep);
    background: #FFF;
}

/* Kolom teks dibatasi supaya tidak masuk ke area foto yang terang. */
.mp-hero--terang .mp-hero__inner {
    max-width: 640px;
    padding-top: 0;
}

/* Kartu diberi latar putih pekat - di atas foto, kartu yang terlalu tipis
   akan terlihat menyatu dengan latarnya. */
.mp-hero--terang .mp-fcard {
    background: rgba(255, 255, 255, .95);
    border-color: rgba(255, 255, 255, .9);
    box-shadow: 0 6px 22px rgba(36, 24, 38, .10);
}

.mp-hero--terang .mp-hero__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 640px;
    margin-top: clamp(28px, 3.4vw, 44px);
}

.mp-hero--terang .mp-curve {
    display: block;
    color: var(--porcelain);
}

/* Navbar di atas hero terang: teksnya kembali gelap, dan selubung gelap
   yang dipakai versi lama dilepas. */
body:has(.mp-hero--terang) .mp-nav--over {
    position: sticky;
    background: rgba(253, 250, 248, .88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}

body:has(.mp-hero--terang) .mp-nav--over::before {
    display: none;
}

body:has(.mp-hero--terang) .mp-nav--over .mp-nav__brand,
body:has(.mp-hero--terang) .mp-nav--over .mp-nav__links a,
body:has(.mp-hero--terang) .mp-nav--over .mp-nav__icon,
/* .mp-nav__toggle DITAMBAHKAN. Sebelumnya tidak ada di daftar ini, sehingga
   warnanya tetap --porcelain (putih) yang diwarisi dari .mp-nav--over -
   padahal latar navbar di sini justru diubah menjadi krim terang oleh aturan
   tepat di atas. Putih di atas krim: tombol menu praktis hilang di beranda.
   Tombol ini terlewat karena ia satu-satunya isi navbar yang HANYA muncul di
   layar sempit, jadi tidak pernah terlihat saat tampilan diperiksa di
   monitor. */
body:has(.mp-hero--terang) .mp-nav--over .mp-nav__toggle {
    color: var(--ink-soft);
}

body:has(.mp-hero--terang) .mp-nav--over .mp-nav__links a:hover,
body:has(.mp-hero--terang) .mp-nav--over .mp-nav__links a.is-active {
    color: var(--ink);
}

/* ---------- Ponsel ----------
   Tidak ada sisi kanan yang bisa dibiarkan bening, jadi selubungnya menutup
   penuh dan arahnya berubah menjadi tegak. */
@media (max-width: 899px) {
    .mp-hero--terang .mp-hero__veil {
        background:
            radial-gradient(420px 340px at 88% 4%,
                rgba(122, 74, 158, .18) 0%,
                rgba(122, 74, 158, 0) 70%),
            linear-gradient(178deg,
                rgba(253, 244, 248, .90) 0%,
                rgba(253, 244, 248, .84) 46%,
                rgba(253, 244, 248, .92) 100%);
    }

    .mp-hero--terang .mp-hero__bg img {
        object-position: 62% center;
    }

    .mp-hero--terang .mp-hero__inner,
    .mp-hero--terang .mp-hero__cards {
        max-width: none;
    }
}

@media (max-width: 560px) {
    .mp-hero--terang .mp-hero__cards {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   KETERBACAAN FOOTER
   --------------------------------------------------------------------------
   Enam aturan di footer memakai var(--gold) sebagai warna teks, di atas latar
   var(--ink) yang gelap. Rasio kontrasnya 2,42 - jauh di bawah ambang 4,5.

   Semuanya benar sebelum palet diganti: --gold dulu bernilai #C9A45B, emas
   terang, yang justru dipilih supaya menonjol di atas latar gelap. Setelah
   dipetakan ulang menjadi plum tua #8E3A6E, ia menjadi gelap di atas gelap.

   INI KELIMA KALINYA POLA YANG SAMA MUNCUL, setelah lencana "Pilihan Micho",
   warna penurunan pendapatan, "PANEL ADMIN", dan submenu panel.

   Karena itu di sini dipakai warna terang yang DITULIS LANGSUNG, bukan token.
   Token merek boleh berubah lagi kapan pun; warna teks di atas latar gelap
   tidak boleh ikut berubah tanpa dipikirkan ulang.
   ========================================================================== */

/* Judul kolom: JELAJAHI, BANTUAN, HUBUNGI KAMI. */
.mp-footer__title {
    color: #E8A8C0;

    /* Ukurannya juga dinaikkan dari 11px ke 11.5px dan jarak hurufnya
       sedikit dirapatkan. Pada huruf besar semua berukuran 11px, kontras
       yang pas-pasan berubah menjadi tidak terbaca sama sekali. */
    font-size: 11.5px;
    letter-spacing: .11em;
}

/* Ikon di kolom kontak - pin lokasi, telepon, amplop, jam. */
.mp-footer__contact .mp-icon {
    color: #E8A8C0;
}

/* Keadaan saat disentuh. Warna sentuh yang lebih gelap daripada warna
   diamnya membuat tautan seolah menghilang saat kursor lewat. */
.mp-footer__links a:hover,
.mp-footer__contact a:hover,
.mp-footer__bottom a:hover {
    color: #F0D4DF;
}

/* Tautan biasa sedikit dicerahkan. Rasionya sudah lolos, tetapi di antara
   judul kolom yang kini jauh lebih terang, ia terasa lebih pudar daripada
   angkanya. */
.mp-footer__links a {
    color: #E9DFE6;
}

/* Garis pemisah antarbagian footer diberi rona merah jambu, bukan abu netral -
   abu di atas latar plum terlihat kotor. */
.mp-footer__bottom,
.mp-footer__marks {
    border-color: rgba(232, 168, 192, .18);
}


/* Angka statistik yang berupa KATA, bukan bilangan.
   "Fresh" tidak dianimasikan naik dari nol seperti angka lain - menghitung
   naik sebuah kata tidak masuk akal. Ukurannya disamakan supaya keempatnya
   tetap sebaris rapi. */
.mp-stats__num--teks {
    font-family: var(--font-display);
}

/* Tombol di bagian cerita mengikuti gaya hero, tetapi diratakan kiri
   bersama teksnya - bukan di tengah seperti pada bagian yang terpusat. */
.mp-story .mp-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
}

@media (max-width: 560px) {
    .mp-story .mp-hero__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .mp-story .mp-hero__actions .mp-btn {
        width: 100%;
        justify-content: center;
    }
}


/* ==========================================================================
   IKON WHATSAPP
   --------------------------------------------------------------------------
   Ikon sebelumnya berupa gelembung obrolan polos - bukan logo WhatsApp, jadi
   tidak dikenali sebagai tautan ke WhatsApp. Padahal tombolnya berfungsi:
   ia membuka WhatsApp dengan pesan siap kirim berisi nama produknya.

   Tombol yang berguna tetapi tidak dikenali sama saja dengan tombol yang
   tidak ada.

   MENGAPA BUTUH KELAS SENDIRI.
   Logo WhatsApp adalah bidang PADAT, bukan garis. Sementara .mp-icon
   menetapkan fill: none dan stroke: currentColor untuk seluruh ikon lain.

   Dalam CSS, aturan gaya MENGALAHKAN atribut fill yang ditulis di dalam SVG -
   jadi tanpa kelas ini, logonya tidak akan terlihat sama sekali walau
   path-nya sudah benar. Itu jenis kesalahan yang tidak memunculkan pesan
   apa pun; ikonnya hanya hilang.
   ========================================================================== */

.mp-icon--wa,
.ad-icon--wa {
    fill: currentColor;
    stroke: none;
}


/* ==========================================================================
   PENATAAN EDITORIAL BAGIAN CERITA — DIBATALKAN
   --------------------------------------------------------------------------
   Blok sebelumnya membuat foto menembus tepi kiri jendela, memperbesar
   lingkaran ikon, dan mengubah bilah statistik menjadi satu bidang berpemisah.

   Hasilnya terlalu besar: foto yang menembus tepi mendorong seluruh bagian
   menjadi jauh lebih tinggi daripada bagian lain di halaman, dan bagian
   cerita berubah dari satu babak menjadi bidang yang mendominasi.

   Susunan sebelumnya dikembalikan. Yang DIPERTAHANKAN hanya dua hal kecil
   yang memang perbaikan, bukan penataan ulang:

     - bingkai putih pada foto kecil, supaya terbaca sebagai kolase
     - pemisah tipis pada bilah statistik, supaya keempatnya terbaca sebagai
       satu daftar
   ========================================================================== */

/* Foto kecil yang menumpang diberi bingkai putih seperti foto yang ditempel
   di album - itu yang membuatnya terbaca sebagai kolase, bukan sebagai dua
   gambar yang kebetulan bertumpuk. */
.mp-story__mini {
    border: 5px solid #FFF;
    box-shadow: 0 12px 34px rgba(36, 24, 38, .14);
}

/* Bilah statistik: empat kolom dipisahkan garis rambut, bukan jarak. Kolom
   yang dipisahkan ruang terbaca sebagai empat benda; yang dipisahkan garis
   terbaca sebagai satu daftar. */
@media (min-width: 760px) {
    .mp-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
    }

    .mp-stats > div + div {
        border-left: 1px solid var(--rose-soft);
        padding-left: clamp(16px, 2vw, 28px);
    }

    .mp-stats > div {
        padding-right: clamp(16px, 2vw, 28px);
    }

    .mp-stats > div:last-child {
        padding-right: 0;
    }
}


/* ==========================================================================
   NILAI PANJANG PADA BARIS RINGKASAN
   --------------------------------------------------------------------------
   PENYEBABNYA: .mp-summary__row > strong diberi flex: none, sehingga kolom
   nilainya tidak boleh menyusut sama sekali.

   Itu benar selama isinya nominal - "Rp 90.000" pendek dan sebaiknya memang
   tidak dipotong. Tetapi baris ongkir kadang berisi KALIMAT, bukan angka:
   "Dihitung saat checkout". Dengan flex: none, kalimat itu memaksa barisnya
   melebar melewati batas kotak ringkasan, dan tulisannya keluar dari tepi.

   Dua perbaikan sekaligus, karena masing-masing sendirian belum cukup:

     1. Teksnya dipendekkan menjadi "Saat checkout" di shop.js.
     2. Kolom nilai kini BOLEH menyusut. Nominal tetap tidak akan menyusut
        karena memang sudah pendek; hanya teks panjang yang terpengaruh.

   Perbaikan kedua yang penting: tanpa itu, kalimat lain yang lebih panjang di
   kemudian hari akan mengulang masalah yang sama.
   ========================================================================== */

.mp-summary__row > strong,
.mp-summary__row > span:last-child {
    /* Boleh menyusut bila ruangnya kurang, tetapi tidak boleh melebar
       melampaui isinya. */
    flex: 0 1 auto;
    min-width: 0;
    text-align: right;
}

/* Nilai yang berupa kalimat, bukan nominal. Dibuat sedikit lebih kecil dan
   tidak tebal - ia keterangan, bukan angka yang perlu diperiksa. Angka
   bertumpuk rapi juga tidak berlaku untuk kalimat, jadi tabular-nums
   dilepas. */
.mp-summary__val--teks {
    /* HURUF PROPORSIONAL, BUKAN MONOSPACE.
     *
     * Inilah penyebab utamanya. Aturan .mp-summary__row strong menetapkan
     * font-mono untuk seluruh nilai - benar untuk nominal, karena digit
     * selebar sama membuat angka bertumpuk rapi.
     *
     * Tetapi pada monospace setiap huruf selebar sama pula, termasuk huruf
     * sempit seperti "i" dan "t". Kalimat "Dihitung saat checkout" menjadi
     * sekitar 20 persen lebih lebar daripada bila ditulis dengan huruf
     * biasa - dan selisih itu yang mendorongnya keluar kotak.
     *
     * Angka tetap monospace; hanya kalimat yang dikembalikan ke huruf
     * proporsional. */
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 500;
    font-variant-numeric: normal;
    color: var(--ink-muted);
    line-height: 1.35;
}

/* Garis titik-titik penghubung dibuat boleh menyempit sampai hilang bila
   ruangnya benar-benar habis. Garis yang mempertahankan lebarnya sendiri
   justru mendorong nilai keluar kotak - persis masalah yang sedang
   diperbaiki. */
.mp-summary__row::after {
    min-width: 12px;
    flex: 1 1 12px;
}


/* ==========================================================================
   PANEL CUSTOM ORDER
   --------------------------------------------------------------------------
   Panel ini berlatar --ink yang gelap, sementara .mp-eyebrow memakai
   --caramel yang kini menunjuk ke --rose (#B54872). Di atas latar gelap
   rasionya hanya 3,35 - di bawah ambang 4,5.

   Itu sebabnya tulisan "CUSTOM ORDER" terlihat seperti tersorot, bukan
   terbaca: warnanya terlalu dekat dengan latarnya, sehingga yang tertangkap
   mata justru garis bawah dan bidangnya, bukan hurufnya.

   INI POLA KEENAM yang sama, setelah lencana "Pilihan Micho", warna
   penurunan pendapatan, "PANEL ADMIN", submenu panel, dan judul footer.
   Semuanya berakar pada satu hal: token yang dulu terang berubah menjadi
   gelap, sementara aturan yang mengandalkannya tidak ikut ditinjau.
   ========================================================================== */

/* KEKHUSUSAN HARUS CUKUP.
 *
 * Percobaan pertama menulis .mp-eyebrow--terang saja - kekhususan (0,1,0).
 * Aturan lama .mp-promo .mp-eyebrow punya (0,2,0) karena memuat dua kelas,
 * jadi ia menang dan perbaikannya tidak pernah berlaku.
 *
 * Kesalahan yang sama pernah terjadi pada .ad-table th melawan .ad-right di
 * panel admin: aturan yang terlihat benar, tetapi kalah kekhususan dan tidak
 * pernah berjalan - tanpa pesan apa pun.
 *
 * Ditulis dengan wadahnya supaya kekhususannya seimbang, dan karena letaknya
 * lebih belakang di berkas, ia menang. */
.mp-promo .mp-eyebrow--terang,
.mp-eyebrow--terang {
    color: #E8A8C0;
}

.mp-promo .mp-eyebrow--terang::after,
.mp-eyebrow--terang::after {
    background: #E8A8C0;
}

/* ---------- Foto disesuaikan dengan panelnya ----------
   Foto sebelumnya bersudut siku sementara panelnya membulat, sehingga sudut
   kiri fotonya menonjol keluar dari lengkung panel. Sudut kiri fotonya kini
   mengikuti lengkung panel; sudut kanan dibiarkan siku karena di situ ia
   bertemu teks, bukan tepi panel. */
.mp-promo__visual {
    border-radius: var(--r-lg) 0 0 var(--r-lg);
    overflow: hidden;
    align-self: stretch;
    aspect-ratio: auto;
    min-height: 100%;
}

.mp-promo__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- Daftar periksa ----------
   Tanda centang diberi lingkaran pucat supaya terbaca sebagai penanda
   terpenuhi, bukan sebagai coretan. Pada latar gelap, centang telanjang
   berukuran 15px mudah terbaca sebagai noda. */
.mp-checks li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding-block: 7px;
    line-height: 1.5;
}

.mp-checks .mp-icon {
    flex: none;
    margin-top: 3px;
    width: 20px;
    height: 20px;
    padding: 3px;
    border-radius: 50%;
    background: rgba(232, 168, 192, .16);
    color: #E8A8C0;
}

/* Di ponsel foto pindah ke atas, jadi lengkungnya ikut berpindah ke sudut
   atas - bukan tetap di kiri. */
@media (max-width: 860px) {
    .mp-promo__visual {
        border-radius: var(--r-lg) var(--r-lg) 0 0;
        aspect-ratio: 16 / 10;
        min-height: 0;
    }
}


/* ==========================================================================
   BILAH STATISTIK — TIGA TINGKAT
   --------------------------------------------------------------------------
   Angka, nama, keterangan. Ketiganya diberi ukuran, huruf, dan warna yang
   berbeda supaya mata bisa membacanya berurutan tanpa harus mengurai sendiri
   mana yang mana.

   Sebelumnya nama dan keterangan digabung satu baris berhuruf besar semua,
   sehingga keduanya terbaca sama pentingnya - dan panjangnya membuat sebagian
   kolom membungkus ke baris kedua.
   ========================================================================== */

.mp-stats > div {
    text-align: center;
}

/* Angka: paling besar, huruf serif, warna merah jambu tua.
   Serif dipakai karena angka besar berhuruf serif terbaca sebagai pernyataan;
   berhuruf sans ia terbaca sebagai data mentah. */
.mp-stats__num {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 3.4vw, 2.9rem);
    font-weight: 600;
    line-height: 1;
    color: var(--rose-deep);
    letter-spacing: -.01em;
}

/* "Fresh" bukan angka. Dibuat miring supaya perbedaannya terbaca sebagai
   pilihan yang disengaja, bukan sebagai angka yang gagal dimuat. */
.mp-stats__num--teks {
    font-style: italic;
    font-size: clamp(1.9rem, 3vw, 2.5rem);
}

/* Nama: pendek, tebal, tinta gelap. Inilah yang dibaca setelah angkanya. */
.mp-stats__label {
    margin-top: 10px;
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
    letter-spacing: 0;
    text-transform: none;
}

/* Keterangan: paling kecil dan paling redup. Ia menjelaskan, bukan
   mengumumkan. */
.mp-stats__note {
    margin-top: 3px;
    font-size: var(--fs-xs);
    line-height: 1.4;
    color: var(--ink-muted);
}

/* Garis pemisah dipendekkan supaya tidak menyentuh tepi atas dan bawah bilah.
   Garis setinggi penuh membelah bidangnya menjadi empat kotak; garis yang
   lebih pendek membiarkannya tetap terbaca sebagai satu bidang. */
@media (min-width: 760px) {
    .mp-stats > div + div {
        border-left: 1px solid var(--rose-soft);
    }

    .mp-stats {
        align-items: center;
        padding-block: clamp(30px, 4vw, 46px);
    }
}





/* ==========================================================================
   KARTU PRODUK TANPA LENCANA "MENU BARU"
   --------------------------------------------------------------------------
   Lencana itu dihapus karena keliru: ia muncul saat jumlah terjual nol, bukan
   saat produknya baru. Penjelasan lengkapnya ada di landing.php.

   Akibat penghapusan itu, kartu yang sudah ada penjualannya menjadi lebih
   tinggi daripada yang belum - dan deretan kartu yang tepi bawahnya bergerigi
   terlihat seperti kesalahan susunan, bukan seperti perbedaan data.

   Ruangnya dipesan lebih dulu. Kartu tanpa lencana menyisakan tinggi yang
   sama, sehingga barisnya tetap rata berapa pun jumlah produk yang sudah
   terjual.
   ========================================================================== */

/* Harga didorong ke bawah supaya jaraknya ke tepi kartu tetap sama, baik
   kartu itu punya lencana maupun tidak. */
.mp-prod__price {
    margin-top: auto;
}

/* CATATAN: ruang cadangan setinggi lencana DIHAPUS.
   
   Ia dipesan supaya kartu dengan dan tanpa lencana tetap sama tinggi. Karena
   lencananya sendiri sudah tidak ada, ruang itu hanya menyisakan celah kosong
   di bawah harga pada setiap kartu.
   
   Yang tersisa hanya margin-top: auto pada harga, yang tetap diperlukan agar
   harga menempel di bawah dan jaraknya ke tepi kartu sama di semua kartu
   walau keterangannya berbeda panjang. */


/* Peramban lama yang belum mengenal :has() akan menampilkan ruang cadangan
   pada semua kartu. Hasilnya kartu sedikit lebih tinggi, tetapi tetap RATA -
   dan rata lebih penting daripada rapat. */





/* Panah pada daftar pilihan.
   
   Warnanya masih #806454 - cokelat dari palet lama, ditulis langsung di dalam
   SVG sehingga tidak ikut berubah saat token dipetakan ulang. Ia satu-satunya
   cokelat yang tersisa di formulir yang seluruhnya merah jambu.
   
   Ini sisa jenis yang sama dengan garis pemisah dan latar bagian cerita yang
   sudah lebih dulu diperbaiki. */
.mp-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C6681' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Daftar jam memakai angka bertumpuk rapi supaya "09:30" dan "11:00" sejajar
   digitnya - lebih mudah dipindai daripada lebar huruf yang berbeda-beda. */
#mpTime {
    font-variant-numeric: tabular-nums;
}


/* Keterangan yang muncul saat tanggal digeser otomatis.
   Diberi warna berbeda dari petunjuk biasa: pesan yang memberitahu bahwa
   sesuatu BERUBAH harus terbaca berbeda dari petunjuk yang selalu ada, kalau
   tidak ia akan terlewat. */
.mp-hint--warn {
    color: #8A5A2B;
    font-weight: 500;
}


/* Baris penutup footer kini hanya berisi satu kalimat hak cipta.
   Susunan dua sisi yang lama menyisakan ruang kosong lebar di kanan, jadi
   isinya dipusatkan. */
.mp-footer__bottom {
    justify-content: center;
    text-align: center;
}


/* ==========================================================================
   KATEGORI DI PONSEL — EMPAT KOLOM, BUKAN DUA
   --------------------------------------------------------------------------
   Ada tujuh kategori. Pada dua kolom, susunannya menjadi 2+2+2+1 - kategori
   terakhir berdiri sendirian di baris keempat, dan baris yang isinya satu
   terbaca seperti ada yang gagal dimuat.

   Empat kolom membaginya menjadi 4+3. Baris kedua memang lebih sedikit,
   tetapi tiga benda berdampingan masih terbaca sebagai kelompok; satu benda
   tidak.

   Kartunya menjadi lebih kecil - sekitar 78px pada layar 390px - dan itu
   memang lebih kecil daripada ideal. Tetapi isinya hanya foto persegi dan
   nama pendek, bukan keterangan panjang, jadi ia tetap terbaca. Tujuh
   kategori yang bisa dipindai sekali lihat lebih berguna daripada empat baris
   yang harus digulir.
   ========================================================================== */

@media (max-width: 620px) {

    .mp-cats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    /* Nama kategori dikecilkan mengikuti lebar kartunya, dan dibiarkan
       membungkus dua baris - dipotong titik-titik pada nama sependek
       "Hampers 9 Cup" akan menghilangkan bagian yang membedakannya. */
    .mp-cat__name {
        font-size: 10.5px;
        line-height: 1.25;
    }

    .mp-cat__count {
        font-size: 9.5px;
    }

    .mp-cat__body {
        padding-top: 7px;
    }
}


/* ==========================================================================
   KARTU PRODUK DI PONSEL — DUA KOLOM, BUKAN SATU
   --------------------------------------------------------------------------
   BLOK INI MENGGANTIKAN aturan satu kolom di bawah 480px yang ada sebelumnya
   di berkas ini. Ditaruh paling akhir supaya menang atas aturan itu.

   MASALAHNYA

   Satu kolom pada lebar 390px membuat setiap kartu selebar 350px dengan foto
   348x435 piksel - lebih besar daripada foto aslinya sendiri, yang rata-rata
   hanya 313x313. Fotonya jadi diperbesar melebihi ukuran asli, dan itulah
   yang membuatnya terlihat pecah.

   Akibat lain yang lebih terasa: halaman jadi sangat panjang.

       Bagian "Pilihan Micho"   8 produk    5.062 piksel
       Halaman Menu            51 produk   16.525 piksel

   Halaman Menu berarti sekitar 44 kali tinggi layar ponsel untuk sampai ke
   produk terakhir. Pelanggan menyerah jauh sebelum itu.

   ALASAN ATURAN LAMA, DAN KENAPA TIDAK BERLAKU LAGI

   Komentar aturan lama menyebut dua kolom di 390px hanya menyisakan sekitar
   160px per kartu - terlalu sempit untuk nama sepanjang "Burnt Cheesecake
   18cm" tanpa membungkus tiga baris.

   Itu benar SELAMA isi kartunya tidak diubah. Yang sebenarnya perlu
   dikecilkan adalah ISI KARTUNYA, bukan jumlah kolomnya:

     - Bingkai foto jadi persegi (1:1), bukan 4:5. Persegi lebih pendek, dan
       justru lebih cocok dengan foto asli yang mayoritas memang persegi -
       jadi tidak ada lagi pemotongan.
     - Keterangan produk dilepas. Di kartu selebar 160px ia hanya jadi dua
       baris teks kelabu yang terpotong; rinciannya tetap utuh di halaman
       produk yang terbuka saat kartunya ditekan.
     - Nama produk dibatasi dua baris dan ukurannya diturunkan, jadi nama
       terpanjang pun tidak pernah menggeser harga ke bawah.

   Jumlah kolom tetap PEMBAGI dari jumlah produk unggulan. Pengaturan
   "jumlah menu unggulan" bernilai 8, dan 8 habis dibagi 2 - jadi baris
   terakhir selalu penuh, sesuai alasan asli aturan berkolom tetap.
   ========================================================================== */

@media (max-width: 479px) {

    .mp-grid--3,
    .mp-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 11px;
    }
}


/* --------------------------------------------------------------------------
   TABLET TEGAK (700-899px) — EMPAT KOLOM, BUKAN DUA

   Aturan lama memberi dua kolom untuk seluruh rentang 480-899px. Pada 768px
   itu berarti kartu selebar 343px dengan foto 343 piksel - sementara foto
   aslinya hanya 313 piksel. Fotonya diperbesar 1,10x melebihi ukuran asli,
   persis masalah yang sama dengan satu kolom di ponsel, hanya lebih halus.

   Empat kolom pada 768px memberi sekitar 172px per kartu - di bawah ukuran
   foto asli, jadi tetap tajam. Empat juga PEMBAGI dari 8 produk unggulan,
   jadi baris terakhir tetap penuh.

   Rentang 480-699px sengaja dibiarkan dua kolom: di sana kartunya 225-330px,
   ukuran yang memang pas untuk kartu penuh dengan keterangannya.
   -------------------------------------------------------------------------- */

@media (min-width: 700px) and (max-width: 899px) {

    .mp-grid--3,
    .mp-grid--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }
}


/* --------------------------------------------------------------------------
   ISI KARTU RINGKAS

   Berlaku di dua rentang yang sama-sama menghasilkan kolom sempit
   (sekitar 145-230px): dua kolom di ponsel, dan empat kolom di tablet tegak.
   Rentang 480-699px sengaja dilewati - kartunya di sana cukup lebar untuk
   tampil utuh.
   -------------------------------------------------------------------------- */

@media (max-width: 479px), (min-width: 700px) and (max-width: 899px) {

    /* Foto persegi. Pada dua kolom di layar 360px tiap foto sekitar 158px -
       masih di bawah ukuran asli 313px, jadi tidak ada pembesaran paksa dan
       fotonya tetap tajam. */
    .mp-prod__frame {
        aspect-ratio: 1 / 1;
    }

    .mp-prod__body {
        padding: 10px 11px 12px;
    }

    .mp-prod__cat {
        font-size: 9.5px;
        letter-spacing: .06em;
    }

    .mp-prod__name {
        font-size: .87rem;
        line-height: 1.28;
        margin-block: 5px 0;
        /* Dua baris, lalu elipsis. Tanpa batas ini nama panjang mendorong
           harga turun dan tinggi kartu jadi tidak seragam antar kolom. */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Keterangan dilepas - lihat alasannya di kepala blok ini. */
    .mp-prod__desc {
        display: none;
    }

    .mp-prod__foot {
        padding-top: 9px;
    }

    .mp-prod__price {
        font-size: .95rem;
        margin-bottom: 0;
    }

    /* Lencana dan tombol WhatsApp diperkecil sepadan dengan fotonya. Ukuran
       lama menutupi hampir sepertiga foto pada bingkai 158px. */
    .mp-prod__tag {
        top: 7px;
        left: 7px;
        padding: 3px 7px;
        font-size: 9px;
        letter-spacing: 0;
    }

    .mp-prod__wa {
        right: 7px;
        bottom: 7px;
        width: 31px;
        height: 31px;
    }

    .mp-prod__wa .mp-icon {
        width: 15px;
        height: 15px;
    }
}


/* Ponsel paling kecil yang masih umum (320-360px).
   Tetap dua kolom - satu kolom di sini justru mengulang masalah yang baru
   diperbaiki. Yang dikurangi lagi hanya jarak antar kartu dan ukuran huruf. */
@media (max-width: 360px) {

    .mp-grid--3,
    .mp-grid--4 {
        gap: 9px;
    }

    .mp-prod__body {
        padding: 9px 9px 11px;
    }

    .mp-prod__name {
        font-size: .82rem;
    }

    .mp-prod__price {
        font-size: .9rem;
    }
}


/* ==========================================================================
   BARIS NAVIGASI — TIDAK LAGI MEMAKSA HALAMAN MELEBAR DI PONSEL SEMPIT
   --------------------------------------------------------------------------
   GEJALANYA: di ponsel 320-380px seluruh halaman bisa digeser ke kiri-kanan,
   dan tepi kanan setiap bagian terpotong.

   Terukur: .mp-nav__row punya lebar minimum 372 piksel yang TETAP, tidak
   berubah walau layarnya 320px. Halaman jadi meluber 52px di 320px dan 13px
   di 360px.

   SEBABNYA: nama merek ditulis sebagai teks lepas di dalam .mp-nav__brand
   yang memakai white-space: nowrap. Teks yang tidak boleh membungkus dan
   tidak punya batas lebar menjadi lebar minimum yang tidak bisa ditawar -
   dan lebar itu diteruskan ke seluruh baris navigasi, lalu ke halaman.

   PERBAIKANNYA: namanya dibungkus <span> (lihat app/Views/partials/navbar.php)
   lalu diberi izin mengecil dan dipotong elipsis. Logonya tetap utuh, jadi
   mereknya masih dikenali walau namanya terpangkas di layar paling kecil.
   ========================================================================== */

.mp-nav__row {
    /* Tanpa ini, isi yang tidak bisa mengecil tetap melebarkan barisnya
       walau anaknya sudah diizinkan mengecil. */
    min-width: 0;
}

.mp-nav__brand {
    min-width: 0;
    flex: 0 1 auto;
}

.mp-nav__brand-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Logo tidak pernah ikut mengecil: ia penanda merek yang terakhir boleh
   dikorbankan. */
.mp-nav__brand img {
    flex: none;
}

/* Tombol keranjang dan menu juga tidak boleh gepeng - kalau dipaksa
   mengecil, ikonnya yang rusak. */
.mp-nav__actions {
    flex: none;
    min-width: 0;
}

@media (max-width: 420px) {

    .mp-nav__row {
        gap: 10px;
    }

    .mp-nav__brand {
        font-size: 1.04rem;
        gap: 8px;
    }

    .mp-nav__brand img {
        width: 30px;
        height: 30px;
    }
}


/* Penjagaan tambahan: tombol ini tidak boleh muncul di bilah navigasi pada
   layar sempit, apa pun aturan lain yang ditulis setelahnya. Di sana sudah
   ada tombol menu, dan di dalam menu itu tombol belanja tersedia lengkap. */
@media (max-width: 1024px) {
    .mp-nav__row .mp-nav__cta {
        display: none !important;
    }
}


/* ==========================================================================
   TOMBOL MENU DI BERANDA — WARNANYA IKUT BERUBAH SAAT NAVBAR MENJADI TERANG
   --------------------------------------------------------------------------
   GEJALANYA: di ponsel, tombol menu (tiga garis) di beranda praktis tak
   terlihat setelah halaman digulir sedikit.

   SEBABNYA: di beranda navbar mengapung di atas foto hero, jadi seluruh
   isinya diwarnai putih lewat `.mp-nav--over`. Begitu digulir melewati hero,
   navbar berlatar krim terang dan aturan `.mp-nav--over.is-stuck`
   mengembalikan warna gelap untuk nama merek, tautan menu, dan ikon
   keranjang.

   Tetapi `.mp-nav__toggle` TIDAK ADA dalam daftar itu. Warnanya tetap putih
   (#FDFAF8) di atas latar krim (#FCF8F6) - dua warna yang hampir sama.

   Ini terlewat karena tombol menu adalah satu-satunya isi navbar yang HANYA
   muncul di layar sempit. Di monitor, tempat tampilan biasanya diperiksa, ia
   tidak pernah terlihat sama sekali, jadi tidak ada yang menyadari warnanya
   tidak pernah dipulihkan.
   ========================================================================== */

.mp-nav--over.is-stuck .mp-nav__toggle {
    color: var(--ink);
}

.mp-nav--over.is-stuck .mp-nav__toggle:hover {
    background: var(--cream);
}


/* ==========================================================================
   PENYARING MENU YANG BISA DILIPAT DI PONSEL
   --------------------------------------------------------------------------
   Di ponsel, dua kelompok penyaring di halaman Menu - tujuh kategori dan
   empat rentang harga, masing-masing sebagai tombol selebar setengah layar -
   memakan sekitar 700 piksel SEBELUM produk pertama terlihat. Halaman selalu
   dibuka dengan satu layar penuh tombol.

   Kotak pencarian sengaja TIDAK ikut dilipat: ia yang paling sering dipakai,
   dan menyembunyikannya berarti menukar satu masalah dengan masalah lain.

   Di tablet dan monitor tidak ada perubahan sama sekali - penyaring tetap
   terbuka dan tombolnya disembunyikan, karena di sana ruangnya memang cukup.
   ========================================================================== */

.mp-filtertoggle {
    display: none;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin-top: 14px;
    padding: 12px 15px;
    border: 1px solid var(--line-strong, var(--line));
    border-radius: var(--r-md);
    background: var(--porcelain);
    color: var(--ink);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.mp-filtertoggle__text {
    flex: 1 1 auto;
    min-width: 0;
}

/* Angka penyaring aktif. Inilah yang mencegah penyaring terlipat menjadi
   jebakan: tanpa penanda ini, pengunjung bisa menyaring satu kategori,
   menutup panelnya, lalu heran kenapa menunya tinggal sedikit. */
.mp-filtertoggle__n {
    flex: none;
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--rose, #a63d62);
    color: #fff;
    font-size: .74rem;
    font-weight: 700;
}

.mp-filtertoggle__caret {
    flex: none;
    transition: transform .22s var(--ease);
}

.mp-filtertoggle.is-open .mp-filtertoggle__caret {
    transform: rotate(180deg);
}

.mp-filtertoggle.is-filtered {
    border-color: var(--rose, #a63d62);
}

@media (max-width: 899px) {

    .mp-filtertoggle {
        display: flex;
    }

    /* Terlipat secara bawaan. Dipakai display:none, bukan tinggi nol yang
       dianimasikan, karena tombol yang tersembunyi tetapi masih ada di tata
       letak akan tetap bisa dijangkau papan ketik - dan pengguna papan ketik
       akan berpindah fokus ke tombol yang tidak terlihat di layar. */
    .mp-filters {
        display: none;
    }

    .mp-filters.is-open {
        display: block;
        margin-top: 12px;
        animation: mpFilterTurun .22s var(--ease);
    }

    @keyframes mpFilterTurun {
        from {
            opacity: 0;
            transform: translateY(-6px);
        }
    }
}


/* ==========================================================================
   BAGIAN "TENTANG KAMI" DI PONSEL DAN TABLET
   --------------------------------------------------------------------------
   GEJALANYA: menekan menu "Tentang" di ponsel mendarat di dua foto raksasa
   bertumpuk. Judul "TENTANG KAMI" sendiri berada jauh di bawah lipatan, jadi
   pengunjung tidak punya petunjuk apa pun bahwa ia sudah sampai di tempat
   yang benar.

   TIGA HAL YANG SALAH, terukur pada lebar 390px:

   1. URUTANNYA TERBALIK.
      Susunan aslinya dua kolom - foto di kiri, tulisan di kanan. Begitu
      menjadi satu kolom, HTML menentukan urutannya: foto lebih dulu. Tulisan
      "TENTANG KAMI" baru muncul 678 piksel setelah bagian ini dimulai -
      hampir satu layar penuh berisi foto saja.

   2. FOTONYA TERLALU TINGGI.
      Foto utama memakai rasio 4:5 - rancangan untuk kolom sempit di samping
      tulisan, bukan untuk selebar layar. Pada 390px ia menjadi 350x438
      piksel, ditambah foto kedua 350x197, jadi blok fotonya sendiri 644
      piksel.

   3. DI TABLET, FOTONYA MASIH SALING MENUMPUK.
      Susunan dua kolom berubah menjadi satu kolom pada 860px, tetapi aturan
      yang "meratakan" kolase - melepas foto kecil dari posisi menumpang -
      hanya berlaku di bawah 560px. Jadi pada rentang 561-860px foto kecil
      tetap menimpa foto besar padahal keduanya sudah dalam satu kolom.
      Terukur pada 768px: blok fotonya 873 piksel tinggi dengan foto kecil
      menutupi bagian bawah foto utama.

   PERBAIKANNYA: pada satu kolom, tulisan didahulukan dan kedua foto disusun
   berjajar sebagai sepasang persegi. Ambangnya 860px - sama dengan ambang
   susunan gridnya, bukan 560px - sehingga tablet ikut terbereskan.
   ========================================================================== */

@media (max-width: 860px) {

    /* Tulisan didahulukan. Menekan "Tentang" kini langsung mendarat pada
       judulnya, dan fotonya menjadi pelengkap di bawah - bukan penghalang. */
    .mp-story {
        display: flex;
        flex-direction: column;
        /* WAJIB. Aturan dasar .mp-story memakai `align-items: center` untuk
           menengahkan kolom foto dan kolom tulisan secara vertikal saat
           keduanya berjajar. Pada susunan kolom, sumbu silangnya berubah
           menjadi mendatar - dan `center` di situ berarti setiap isian
           menyusut selebar isinya lalu ditengahkan.
           
           Akibatnya blok foto menyusut menjadi 10 piksel dan kedua fotonya
           hilang sama sekali. Nilai `stretch` mengembalikannya selebar
           penuh. */
        align-items: stretch;
    }

    /* KOLASE TETAP DIPERTAHANKAN, HANYA DIPERKECIL.
       
       Percobaan sebelumnya membongkar kolase menjadi dua foto yang berdiri
       sendiri-sendiri. Itu memang menyelesaikan masalah tumpang tindih, tetapi
       sekaligus membuang gaya editorialnya - foto besar dengan foto kecil
       menempel di sudut seperti tempelan album. Gaya itu yang membuat bagian
       ini terlihat disusun, bukan sekadar ditumpuk.
       
       Yang sebenarnya rusak di layar sempit bukan kolasenya, melainkan
       UKURANNYA: foto menumpang selebar 52% menutupi terlalu banyak, dan
       ruang di bawah-kanan tidak pernah disediakan sehingga ia keluar dari
       bingkainya.
       
       Jadi kolasenya dipakai lagi, dengan tiga penyesuaian:
         - foto menumpang dikecilkan dari 52% ke 46%
         - ruang untuk tumpangannya disediakan lewat padding
         - rasio foto utama mengikuti aslinya, jadi tidak ada yang terpotong */
    .mp-story__visual {
        order: 2;
        margin-top: 26px;
        display: block;
        position: relative;
        padding: 0 34px 44px 0;
    }

    /* RASIO MENGIKUTI FOTO ASLINYA, DAN SELEBAR PENUH.
       
       Percobaan pertama menyusun keduanya berjajar dua dalam bingkai persegi.
       Susunannya rapi, tetapi salah dalam dua hal:
       
         - Kedua foto aslinya 1402x1122 piksel, yaitu 5:4 mendatar. Dipaksa
           persegi, `object-fit: cover` MEMBUANG 20% sisi kiri dan kanan
           setiap foto - termasuk kotak kemasan dan label di tepi bingkai,
           yang justru bagian pentingnya.
         - Berjajar dua di layar 390px, tiap foto tinggal 170 piksel. Foto
           1402 piksel ditampilkan pada 0,12x ukuran aslinya; ini dua foto
           studio milik usaha ini, bukan ikon pelengkap.
       
       Sekarang rasionya persis seperti foto aslinya, jadi tidak ada satu
       piksel pun yang dipotong, dan lebarnya penuh sehingga fotonya benar-
       benar terlihat. Ketinggiannya tidak lagi menjadi masalah karena
       fotonya sudah berada SETELAH tulisan - orang membacanya lebih dulu,
       lalu melihat fotonya. Itu masalah yang berbeda dari sebelumnya, di
       mana 644 piksel foto menghalangi tulisan. */
    /* RASIO MENGIKUTI FOTO ASLINYA — tidak ada yang terpotong.
       Kedua foto aslinya 1402x1122 piksel. Bingkai 4:5 pada susunan monitor
       membuang 36% bagian atas dan bawah foto utama; di sini rasionya
       dibiarkan apa adanya. */
    .mp-story__main {
        position: static;
        width: auto;
        aspect-ratio: 1402 / 1122;
        margin: 0;
    }

    /* Foto menumpang: tetap di sudut kanan bawah seperti di monitor, tetapi
       46% - bukan 52%. Pada 390px itu 161 piksel; dengan 52% ia menutupi
       hampir separuh lebar foto utama dan puddingnya sendiri ikut tertutup. */
    .mp-story__mini {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 46%;
        aspect-ratio: 1402 / 1122;
        margin: 0;
    }

    /* Bingkai putih dan bayangannya DIPERTAHANKAN - justru itu yang membuat
       foto kecil terbaca sebagai tempelan album di atas foto besar, bukan dua
       gambar yang kebetulan bertumpuk. Hanya ketebalannya dikurangi supaya
       sepadan dengan ukurannya yang lebih kecil. */
    .mp-story__mini {
        border: 4px solid #FFF;
        box-shadow: 0 10px 26px rgba(36, 24, 38, .16);
        border-radius: var(--r-md);
    }

    /* Garis tipis di dalam bingkai foto utama juga dilepas: pada foto kecil
       jaraknya 10 piksel dari tepi terasa terlalu rapat dan terbaca sebagai
       cacat cetak, bukan ornamen. */
    .mp-story__main::after {
        display: none;
    }
}


/* Foto utama di layar sempit tidak memakai garis tipis di dalam bingkainya:
   pada ukuran kecil jaraknya 10 piksel dari tepi terbaca sebagai cacat cetak,
   bukan ornamen. Aturannya sudah ada di blok di atas. */


/* ==========================================================================
   GALERI DI PONSEL — TIGA KOLOM, DAN TIDAK TERLIHAT RUSAK SAAT MEMUAT
   --------------------------------------------------------------------------
   DUA HAL YANG DIPERBAIKI.

   1. GALERINYA TERLALU PANJANG.

      Pada 390px, sepuluh foto tersusun dua kolom menjadi lima baris:
      bloknya 887 piksel dan seluruh bagiannya 1196 piksel. Itu lebih dari
      satu setengah layar penuh untuk satu bagian yang sifatnya pelengkap -
      pengunjung harus menggulir lama hanya untuk melewatinya.

      Tiga kolom adalah susunan yang dipakai Instagram sendiri di ponsel, dan
      galeri ini memang meniru feed Instagram. Sembilan foto dalam tiga baris
      juga membuat baris terakhir selalu penuh - dengan sepuluh foto di tiga
      kolom, foto kesepuluh berdiri sendirian di baris keempat.

      Foto kesepuluh disembunyikan HANYA di ponsel, dan hanya secara tampilan;
      semua foto tetap ada di halaman dan tetap tampil utuh di tablet dan
      monitor. Galeri ini pintu menuju Instagram, bukan katalog - tidak ada
      yang hilang bila satu foto tidak ikut ditampilkan di layar sempit.

   2. FOTO YANG BELUM SELESAI DIMUAT TERLIHAT SEPERTI RUSAK.

      Semua foto galeri memakai loading="lazy". Pada sambungan lambat, kotak
      yang fotonya belum turun menampilkan teks alt-nya - nama produk seperti
      "1 loyang" atau "Sultan large" - dengan huruf berukuran penuh di atas
      latar krim, lalu terpotong oleh batas kotaknya.

      Yang terlihat pengunjung: deretan kotak cokelat muda berisi potongan
      tulisan. Itu terbaca sebagai halaman rusak, padahal fotonya hanya belum
      sampai.

      `color: transparent` menyembunyikan teks itu secara tampilan tanpa
      menghapus atribut alt-nya, sehingga pembaca layar tetap membacanya dan
      kotaknya sekadar terlihat kosong sampai fotonya muncul.
   ========================================================================== */

.mp-feed__item img {
    color: transparent;
}

@media (max-width: 520px) {

    .mp-feed {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    /* Aturan penyembunyi foto kesepuluh DIHAPUS.
    
       Aturan itu dibuat ketika galeri berisi 10 foto: pada tiga kolom, foto
       kesepuluh berdiri sendirian di baris keempat, jadi disembunyikan supaya
       baris terakhir penuh.
    
       Jumlahnya kini 12 - habis dibagi 3, 4, maupun 6, sehingga baris
       terakhir penuh di ketiga ukuran layar tanpa perlu menyembunyikan apa
       pun. Menyembunyikan foto yang sebenarnya muat justru mengurangi isi
       tanpa alasan. */
}


/* ==========================================================================
   FOOTER DI PONSEL — DUA KOLOM UNTUK DAFTAR TAUTAN
   --------------------------------------------------------------------------
   Terukur pada 390px: footer setinggi 1145 piksel, sementara di monitor hanya
   482. Selisihnya bukan karena isinya bertambah - isinya sama persis - tetapi
   karena keempat kolomnya ditumpuk menjadi satu lajur panjang.

   Dua di antaranya, "Jelajahi" dan "Bantuan", hanyalah daftar tautan pendek
   dengan tulisan sekitar 15 karakter. Keduanya muat berdampingan bahkan di
   layar 320px, dan menumpuknya membuang separuh lebar layar begitu saja.

   Blok identitas dan blok kontak tetap selebar penuh: yang pertama berisi
   paragraf dan lencana, yang kedua berisi alamat dua baris - keduanya butuh
   lebar.
   ========================================================================== */

@media (max-width: 540px) {

    .mp-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 26px 18px;
    }

    /* Blok identitas dan blok kontak melebar penuh; hanya kedua daftar
       tautan yang berdampingan. */
    .mp-footer__brandcol,
    .mp-footer__grid > div:last-child {
        grid-column: 1 / -1;
    }

    /* Dirapatkan sedikit. Pada daftar sependek ini, jarak 10 piksel antar
       tautan terasa renggang dan menambah tinggi tanpa menambah
       keterbacaan - sementara 44 piksel area sentuh tetap terpenuhi dari
       tinggi barisnya sendiri. */
    .mp-footer__links {
        gap: 9px;
    }

    .mp-footer__title {
        margin-bottom: 11px;
    }

    .mp-footer__text {
        max-width: none;
    }
}


/* ==========================================================================
   IKON MEDIA SOSIAL DI FOOTER
   --------------------------------------------------------------------------
   DUA HAL YANG MEMBUATNYA TERLIHAT TIDAK RAPI.

   1. UKURANNYA TERLIHAT BERBEDA-BEDA PADAHAL KOTAKNYA SAMA.

      Semua glif digambar dalam bidang 24x24 dan diberi kotak 17x17 yang sama.
      Tetapi tiap lambang resmi mengisi bidang itu dengan proporsi yang
      berbeda. Terukur langsung dari bentuknya:

          WhatsApp   mengisi 99% bidang  ->  tampak 16,8 piksel
          Instagram  mengisi 85% bidang  ->  tampak 14,4 piksel
          Facebook   mengisi 83% bidang  ->  tampak 14,2 piksel
          TikTok     mengisi 66% bidang  ->  tampak 11,1 piksel

      Selisih antara yang terbesar dan terkecil 51%. Itulah sebabnya WhatsApp
      terlihat menonjol dan TikTok terlihat mengecil, meski ketiganya diberi
      angka yang sama.

      Perbaikannya bukan menyamakan kotaknya - itu justru penyebabnya -
      melainkan menyamakan UKURAN TAMPAKNYA. Tiap kotak dihitung mundur dari
      target 15 piksel dibagi proporsi isinya.

   2. LINGKARANNYA SEBENARNYA LONJONG DI PONSEL.

      Tombolnya 38x38 dengan border-radius 50%. Tetapi aturan target sentuh
      memberi `min-height: 44px` pada perangkat sentuh, sehingga tingginya
      menjadi 44 sementara lebarnya tetap 38 - lingkarannya menjadi telur
      setinggi 44 piksel. Hanya terlihat di ponsel sungguhan, tidak pernah
      muncul saat jendela peramban di komputer diperkecil.
   ========================================================================== */

/* Lingkaran yang benar-benar bulat di perangkat sentuh: lebar disamakan
   dengan tingginya, bukan dibiarkan tertinggal di 38. */
@media (pointer: coarse) {
    .mp-social a {
        width: 44px;
        height: 44px;
    }
}

.mp-social {
    gap: 10px;
}

/* Ukuran dasar untuk platform tambahan yang memakai lambang tautan umum. */
.mp-social__glyph {
    width: 18px;
    height: 18px;
}

/* 15 / 0,99 */
.mp-social__glyph--whatsapp {
    width: 15.2px;
    height: 15.2px;
}

/* 15 / 0,85 */
.mp-social__glyph--instagram {
    width: 17.6px;
    height: 17.6px;
}

/* 15 / 0,83 */
.mp-social__glyph--facebook {
    width: 18.1px;
    height: 18.1px;
}

/* 15 / 0,66 - kotaknya paling besar justru karena glifnya paling ramping. */
.mp-social__glyph--tiktok {
    width: 22.7px;
    height: 22.7px;
}


/* ==========================================================================
   TOMBOL MENGAMBANG — WHATSAPP DAN KEMBALI KE ATAS SALING MENIMPA
   --------------------------------------------------------------------------
   Aturan dasarnya sudah benar: WhatsApp di 74 piksel dari bawah, tombol
   kembali ke atas di 18 piksel - bertumpuk rapi.

   Tetapi ada satu aturan untuk layar sempit yang memberi `bottom: 82px`
   kepada KEDUANYA. Maksudnya menaikkan tombol WhatsApp supaya tidak menutupi
   bilah pesan di halaman detail produk - dan itu benar. Yang keliru,
   nilai yang sama diberikan juga kepada tombol kembali ke atas, sehingga
   susunan 18/74 yang memisahkan keduanya hilang.

   Terukur pada 390px: keduanya 46x46 piksel, sama-sama di y=716, hanya
   berselisih 4 piksel mendatar. Praktis satu menutupi yang lain, dan yang
   di bawah tidak bisa ditekan sama sekali.

   Sekarang keduanya tetap naik di atas bilah pesan, tetapi tetap bertumpuk:
   WhatsApp di bawah, kembali ke atas di atasnya, berjarak 10 piksel.
   ========================================================================== */

@media (max-width: 560px) {

    /* Di halaman biasa - beranda, Menu, Cek Status - tidak ada apa pun di
       kaki layar, jadi keduanya duduk rendah seperti tombol mengambang
       semestinya.

       Sebelumnya keduanya dinaikkan ke 82 piksel di SEMUA halaman. Padahal
       yang membutuhkan ruang itu hanya halaman detail produk, tempat ada
       bilah "Tambah ke Keranjang" yang menempel di kaki layar. Di halaman
       lain kenaikan itu hanya membuat keduanya melayang di tengah-tengah
       kartu produk tanpa alasan.

       Urutannya mengikuti aturan dasar: tombol kembali ke atas paling bawah,
       tombol WhatsApp di atasnya. Tombol WhatsApp mengambang hanya ada di
       halaman Menu; di halaman lain slot atas itu memang kosong. */
    .mp-top {
        right: 16px;
        bottom: 18px;
    }

    .mp-wa {
        right: 16px;
        /* 18 + tinggi tombol 46 + jarak 10 */
        bottom: 74px;
    }
}


/* --------------------------------------------------------------------------
   HALAMAN DETAIL PRODUK — DINAIKKAN DI ATAS BILAH PESAN

   Bilah "Tambah ke Keranjang / Pesan via WhatsApp" menempel di kaki layar
   pada lebar 900px ke bawah. Tanpa kenaikan ini tombol mengambang menutupi
   bilah itu - dan bilah itulah tombol terpenting di seluruh halaman.

   Dipilih lewat `body:has()` supaya kenaikannya hanya berlaku di halaman yang
   benar-benar punya bilahnya, bukan disamaratakan ke semua halaman seperti
   sebelumnya. Kalau suatu saat bilah itu dihapus, tombolnya turun sendiri.

   Angka kenaikannya bertingkat karena tinggi bilahnya sendiri berubah -
   tulisan kedua tombol membungkus dua baris di layar sempit. Terukur:

       320px      bilah 129px  ->  naik 142px
       360-480px  bilah 105px  ->  naik 118px
       500-900px  bilah  80px  ->  naik  93px
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    body:has(.mp-detail__actions) .mp-top {
        bottom: 93px;
    }

    body:has(.mp-detail__actions) .mp-wa {
        bottom: 149px;
    }
}

@media (max-width: 500px) {
    body:has(.mp-detail__actions) .mp-top {
        bottom: 118px;
    }

    body:has(.mp-detail__actions) .mp-wa {
        bottom: 174px;
    }
}

@media (max-width: 340px) {
    body:has(.mp-detail__actions) .mp-top {
        bottom: 142px;
    }

    body:has(.mp-detail__actions) .mp-wa {
        bottom: 198px;
    }
}


/* ==========================================================================
   TOMBOL "TAMBAH KE KERANJANG" DI KARTU PRODUK PONSEL
   --------------------------------------------------------------------------
   Pada susunan dua kolom, tombolnya hanya selebar 146 piksel sementara
   tulisannya butuh lebih. Tulisan membungkus dua baris dan tombolnya menjadi
   146x65 piksel - hampir seperempat tinggi kartunya sendiri, dan jauh lebih
   menonjol daripada harga produk yang justru lebih penting dibaca.

   Di bawah 480px tulisannya diganti "+ Keranjang" yang muat satu baris.
   Maksudnya tetap sama jelas, tandanya tetap ada, dan tombolnya kembali
   sepadan dengan kartunya.
   ========================================================================== */

.mp-add__pendek {
    display: none;
}

/* Ambangnya 1150px, bukan 480px.
   
   Angkanya diukur, bukan ditebak. "Tambah ke Keranjang" pada ukuran huruf
   kartu membutuhkan tombol selebar sekitar 200 piksel, dan tombol selebar itu
   baru terjadi ketika jendela sekitar 1150 piksel:
   
       390px  dua kolom    kartu 170px  tombol 146px  -> membungkus
       768px  empat kolom  kartu 172px  tombol 142px  -> membungkus
       900px  empat kolom  kartu 194px  tombol 156px  -> membungkus
       1100px empat kolom  kartu 237px  tombol 191px  -> membungkus
       1200px empat kolom  kartu 258px  tombol 208px  -> muat
   
   Dua percobaan sebelumnya memakai 480px lalu 900px, dan pada keduanya tombol
   di tablet maupun monitor kecil tetap setinggi 65 piksel. */
@media (max-width: 1150px) {

    .mp-add__panjang {
        display: none;
    }

    .mp-add__pendek {
        display: inline;
    }

    .mp-prod__foot .mp-btn {
        padding: 9px 12px;
        font-size: 12.5px;
        /* Penjagaan: kalau suatu saat tulisannya diganti lebih panjang,
           tombolnya melebar - bukan diam-diam menjadi dua baris lagi. */
        white-space: nowrap;
    }
}


/* ==========================================================================
   HERO DI PONSEL — DUA CACAT YANG TERUKUR
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. KEEMPAT KARTU FITUR LEBARNYA BERBEDA-BEDA

   Terukur pada 390px, keempatnya rata kiri di x=20 tetapi lebarnya:

       51+ Varian Dessert      350 piksel
       Custom Order            308 piksel
       Halal & Tanpa Pengawet  284 piksel
       Fresh Made              239 piksel

   Tepi kanannya bertangga-tangga, dan itu terbaca sebagai tata letak yang
   rusak - bukan sebagai pilihan rancangan.

   SEBABNYA gabungan dua aturan. Di bawah 640px kartu disusun dengan
   `display: flex; flex-direction: column`. Terpisah dari itu ada
   `align-items: start` yang ditulis belakangan, mengalahkan `align-items:
   stretch` sebelumnya. Pada wadah flex tegak, `start` berarti tiap kartu
   menyusut selebar isinya - sehingga lebarnya ditentukan panjang tulisan
   masing-masing.

   Ini persis cacat yang sama dengan bagian "Tentang Kami", hanya dengan
   nilai berbeda: di sana `align-items: center`, di sini `align-items: start`.
   Keduanya sama-sama sisa dari susunan mendatar yang tidak disesuaikan saat
   berubah menjadi tegak.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .mp-hero__cards {
        align-items: stretch;
    }
}


/* --------------------------------------------------------------------------
   2. TOMBOL KEDUA TERLIHAT PERSIS SAMA DENGAN TOMBOL UTAMA

   "Pesan Sekarang" dan "Lihat Menu" sama-sama tampil sebagai pil merah jambu
   penuh, selebar layar, setinggi 55 piksel. Tidak ada yang menandakan mana
   tindakan utama - padahal keduanya menuju tempat yang berbeda.

   SEBABNYA dua hal yang saling menutupi:

     a. Aturan gradasi ditulis sebagai
        `.mp-btn:not(.mp-btn--ghost):not(.mp-btn--wa)`. Dua ragam dikecualikan,
        tetapi `--outline` dan `--pale` terlewat - jadi tombol bergaris pun
        ikut mendapat gradasi merah jambu dan tampil sebagai tombol penuh.

     b. `.mp-btn--outline` mewarisi tulisan putih dan garis putih, dirancang
        untuk hero berfoto gelap. Hero sekarang bertema terang, dan sudah ada
        penyesuaian khusus untuk `--ghost` di sana - tetapi `--outline`
        terlewat, sama seperti tombol menu di navbar dulu.

   Tanpa (a), tombolnya akan tak terlihat sama sekali: putih di atas krim.
   Jadi selama ini satu cacat menutupi cacat lain, dan hasilnya dua tombol
   kembar. Keduanya diperbaiki bersamaan.
   -------------------------------------------------------------------------- */

/* Kekhususannya harus menyamai aturan gradasinya.
   Aturan itu ditulis `.mp-btn:not(.mp-btn--ghost):not(.mp-btn--wa)` - tiga
   kelas. Ditulis dengan satu kelas saja, aturan di bawah ini kalah dan
   gradasinya tetap menang. Tiga kelas di sini menyamainya, dan karena
   ditulis lebih belakang, aturan inilah yang berlaku. */
.mp-btn.mp-btn--outline:not(.mp-btn--wa),
.mp-btn.mp-btn--pale:not(.mp-btn--wa) {
    background-image: none;
}

/* Di hero terang, tombol bergaris memakai warna tinta - bukan putih. */
.mp-hero--terang .mp-btn--outline {
    background: transparent;
    color: var(--ink);
    border-color: rgba(36, 24, 38, .28);
}

.mp-hero--terang .mp-btn--outline:hover {
    background: var(--ink);
    color: var(--porcelain);
    border-color: var(--ink);
}


/* ==========================================================================
   KATEGORI — BARIS TERAKHIR YANG TIDAK PENUH DITENGAHKAN
   --------------------------------------------------------------------------
   Ada tujuh kategori, disusun empat kolom. Baris pertama terisi empat, baris
   kedua hanya tiga - dan ketiganya menempel ke kiri, menyisakan satu lubang
   kosong di kanan. Susunannya jadi terbaca miring ke kiri, bukan sebagai
   kelompok yang utuh.

   CSS Grid tidak bisa menengahkan baris terakhir yang tidak penuh: tiap sel
   sudah punya tempatnya sendiri, dan sel yang kosong tetap memakan ruang.
   Trik `grid-column` bisa dipakai, tetapi harus dihitung ulang setiap kali
   jumlah kategorinya berubah - padahal kategori dikelola dari panel admin dan
   bisa ditambah atau dihapus kapan saja.

   Karena itu susunannya dipindah ke flex. `justify-content: center` bekerja
   pada BARIS, bukan pada sel, sehingga baris terakhir menengah dengan
   sendirinya - berapa pun jumlah kategorinya. Tidak ada angka yang perlu
   disesuaikan lagi kalau nanti kategorinya jadi lima, enam, atau sepuluh.

   Lebar tiap kartu tetap dihitung dari jumlah kolom, jadi barisan yang penuh
   tetap sejajar persis seperti sebelumnya.
   ========================================================================== */

.mp-cats {
    --kolom: 7;
    --jarak: clamp(10px, 1.4vw, 18px);

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--jarak);
}

.mp-cats > * {
    /* Lebar satu kolom: sisa lebar setelah semua jarak dibagi jumlah kolom. */
    flex: 0 0 calc((100% - (var(--kolom) - 1) * var(--jarak)) / var(--kolom));
    max-width: calc((100% - (var(--kolom) - 1) * var(--jarak)) / var(--kolom));
}

@media (max-width: 1180px) {
    .mp-cats {
        --kolom: 4;
    }
}

@media (max-width: 620px) {
    .mp-cats {
        --kolom: 4;
        --jarak: 8px;
    }
}


/* ==========================================================================
   "TENTANG KAMI" — URUTAN JUDUL, FOTO, LALU TULISAN
   --------------------------------------------------------------------------
   Sebelumnya sudah dicoba dua urutan, dan keduanya punya kelemahan:

     foto dulu     menekan menu "Tentang" mendarat di dua foto besar tanpa
                   satu pun petunjuk sudah sampai di mana. Judulnya baru
                   muncul 678 piksel di bawahnya.

     tulisan dulu  aman - judulnya langsung terlihat - tetapi bagian ini
                   dibuka dengan satu blok teks penuh, dan fotonya tenggelam
                   jauh di bawah setelah empat kartu dan dua tombol.

   Sekarang judulnya dipisahkan dari isi tulisannya, sehingga urutannya:

       Tentang Kami / Dibuat Dengan Cinta...   <- pembaca tahu ada di mana
       kolase foto                              <- yang ingin dilihat
       cerita, empat kartu, dua tombol          <- keterangannya

   Ini susunan majalah, dan menjawab keduanya sekaligus: fotonya naik ke atas
   seperti yang diinginkan, tetapi judulnya tetap yang pertama terbaca.

   Di 861px ke atas tidak ada perubahan: judul dan isi tetap satu kolom di
   sebelah kanan foto, persis seperti sebelumnya.
   ========================================================================== */

@media (max-width: 860px) {

    .mp-story__judul {
        order: 1;
    }

    .mp-story__visual {
        order: 2;
        /* Jarak ke judul di atasnya dirapatkan; jarak ke tulisan di bawahnya
           dilonggarkan, supaya foto terbaca sebagai milik judulnya - bukan
           mengambang di antara keduanya. */
        margin-top: 18px;
        margin-bottom: 6px;
    }

    .mp-story__isi {
        order: 3;
    }
}

/* Di monitor judul dan isi kembali menyatu sebagai satu kolom tulisan.
   Tanpa ini keduanya menjadi dua sel grid terpisah dan kolomnya jadi tiga. */
@media (min-width: 861px) {

    .mp-story {
        grid-template-columns: 1fr 1fr;
        /* Jarak antar baris dinolkan. Aturan dasar .mp-story memakai satu
           nilai `gap` untuk kolom DAN baris; nilai itu benar untuk jarak
           antara foto dan tulisan, tetapi salah untuk jarak antara judul dan
           paragrafnya - keduanya kini dua baris grid terpisah, sehingga
           muncul celah kosong 72 piksel di tengah kolom tulisan.
           Jarak antar keduanya diatur margin judulnya sendiri. */
        column-gap: clamp(28px, 5vw, 72px);
        row-gap: 0;
        /* Tiga baris, bukan dua: judul, isi, lalu satu baris kosong yang
           menyerap sisa tinggi.
           
           Tanpa baris ketiga, foto yang membentang dua baris memaksa kedua
           baris tulisan ikut setinggi separuh foto - dan celah kosong sampai
           145 piksel muncul di antara judul dan paragrafnya. Baris ketiga
           menampung kelebihan itu, sehingga judul dan paragraf tetap
           berdempetan seperti satu blok tulisan. */
        grid-template-rows: auto auto 1fr;
        align-content: center;
    }

    .mp-story__judul,
    .mp-story__isi {
        grid-column: 2;
        align-self: start;
    }

    .mp-story__visual {
        grid-column: 1;
        grid-row: 1 / span 3;
        align-self: center;
    }
}


/* ==========================================================================
   HERO DI LAYAR LEBAR — RUANG YANG TERBUANG
   --------------------------------------------------------------------------
   Kolom isi hero dipatok 640 piksel lewat `.mp-hero--terang .mp-hero__inner`
   dan `.mp-hero--terang .mp-hero__cards`. Angka itu TETAP berapa pun lebar
   layarnya. Terukur:

       1366px   isi 640px  ->  47% layar dipakai isi
       1920px   isi 640px  ->  33%
       2400px   isi 640px  ->  27%
       2560px   isi 640px  ->  25%

   Jadi di laptop lebar, tiga perempat layar hanya foto, sementara tulisan dan
   keempat kartu berdempetan di kolom sempit sebelah kiri. Itu yang terlihat
   sebagai tata letak yang tidak seimbang.

   Ada juga akibat kedua yang lebih mengganggu: karena kartu terkurung 640
   piksel, keempatnya tersusun 2x2 - dua baris - sehingga hero menjadi 1015
   piksel tinggi. Pada laptop 1366x768 yang masih sangat umum, itu 247 piksel
   LEBIH TINGGI daripada layarnya, dan kartu terakhir terpotong 38 piksel di
   bawah lipatan.

   PERBAIKANNYA MEMBEDAKAN DUA HAL.

   Lebar tulisan TIDAK diubah. 640 piksel justru ukuran yang benar untuk satu
   paragraf - sekitar 70 huruf per baris. Melebarkannya menjadi 1000 piksel
   akan membuat mata kehilangan barisnya saat berpindah ke baris berikutnya.

   Yang dilebarkan hanya BARISAN KARTU, karena isinya empat blok pendek yang
   berdiri sendiri - bukan kalimat yang dibaca menerus. Dengan empat kolom,
   kartunya jadi satu baris, ruang kosong terpakai, dan hero ikut memendek
   sehingga muat di layar laptop.
   ========================================================================== */

@media (min-width: 1200px) {

    .mp-hero--terang .mp-hero__cards {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        /* Dibatasi 1040 piksel, bukan dibiarkan sepenuh layar: lebih dari itu
           kartu melebar tanpa isi yang menambah, dan mulai menabrak bagian
           foto yang paling terang di sisi kanan. */
        max-width: min(1040px, 62vw);
        gap: 12px;
    }

    /* Kartu jadi lebih sempit, jadi ikonnya pindah ke atas tulisan alih-alih
       berjajar di sampingnya. Berjajar pada kolom 240 piksel menyisakan
       tulisan hanya sekitar 160 piksel dan namanya membungkus tiga baris. */
    .mp-hero--terang .mp-fcard {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 15px 16px;
    }
}


/* Layar pendek - laptop 1366x768 dan sejenisnya masih sangat umum.
   
   Dengan empat kolom, kartu terakhir hanya tinggal terpotong 12 piksel di
   bawah lipatan (sebelumnya 38). Jarak atas barisan kartu dan bantalan bawah
   hero dirapatkan sedikit supaya keempatnya utuh terlihat tanpa menggulir -
   kesan pertama halaman ini bergantung pada itu.
   
   Dibatasi pada tinggi layar, bukan lebarnya: yang menjadi kendala memang
   tinggi layar, dan di layar tinggi jaraknya tidak perlu dikurangi. */
@media (min-width: 1200px) and (max-height: 820px) {

    .mp-hero--terang .mp-hero__cards {
        margin-top: 22px;
    }

    .mp-hero--terang .mp-hero__inner {
        padding-bottom: 0;
    }

    .mp-hero--terang .mp-fcard {
        padding: 13px 14px;
    }
}


/* --------------------------------------------------------------------------
   HALAMAN "PESANAN DITERIMA" — BARIS BANTUAN DI BAWAH TOMBOL

   Menggantikan dua tombol melebar penuh: "Konfirmasi ke Admin" dan "Belanja
   lagi". Keduanya diturunkan menjadi tautan teks pada satu baris.

   Alasannya bukan sekadar merapikan. Tombol hijau melebar penuh yang berbunyi
   "Konfirmasi ke Admin" terbaca sebagai langkah yang DIWAJIBKAN, sehingga
   hampir semua pelanggan menekannya - padahal bukti bayarnya sudah masuk
   sistem. Yang dihasilkan hanya pesan berulang di WhatsApp admin, yaitu
   pekerjaan yang justru ingin dikurangi sistem ini.

   Tautan teks menyampaikan hal yang sama tanpa memerintah.
   -------------------------------------------------------------------------- */

.mp-success__bantu {
    margin: 18px 0 0;
    font-size: .9rem;
    line-height: 1.7;
    color: var(--ink-muted);
    text-align: center;
}

/* "Belanja lagi" berdiri di barisnya sendiri.

   Semula disatukan dengan kalimat bantuan memakai pemisah titik. Keduanya
   tidak berhubungan - satu untuk melanjutkan belanja, satu untuk meminta
   bantuan - dan menyatukannya membuat barisnya terbaca seperti daftar tanpa
   urutan. Jaraknya juga dibuat lebih longgar supaya kedua tautan tidak mudah
   salah tekan di ponsel. */
.mp-success__lanjut {
    margin: 14px 0 0;
    font-size: .9rem;
    text-align: center;
}

@media (max-width: 479px) {

    .mp-success__bantu,
    .mp-success__lanjut {
        font-size: .86rem;
    }

    .mp-success__lanjut {
        margin-top: 16px;
    }
}


/* ==========================================================================
   HERO: KARTU SAMA TINGGI, DAN HERO MUAT DI LAYAR LAPTOP
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. KEEMPAT KARTU SAMA TINGGI

   Terukur pada 1920px: 139, 121, 139, 121 piksel. Tepi bawahnya
   bertangga-tangga, dan itu terbaca sebagai tata letak yang rusak.

   SEBABNYA `align-items: start` pada wadah kartunya. Dalam grid, nilai itu
   berarti tiap kartu hanya setinggi isinya sendiri - jadi kartu yang
   keterangannya dua baris menjadi lebih tinggi daripada yang satu baris.

   Ini cacat yang KETIGA dari keluarga yang sama, setelah bagian "Tentang
   Kami" (`align-items: center`) dan kartu hero di ponsel (`align-items:
   start`). Ketiganya sisa dari susunan yang berubah tanpa nilai perataannya
   ikut disesuaikan.
   -------------------------------------------------------------------------- */

.mp-hero__cards {
    align-items: stretch;
}

.mp-fcard {
    height: 100%;
}


/* --------------------------------------------------------------------------
   2. HERO MUAT DI LAYAR LAPTOP

   Terukur sebelum perbaikan:

       1366x768   hero 916px  ->  148px LEBIH TINGGI daripada layar
       1440x900   hero 962px  ->   62px lebih tinggi

   Jadi di laptop, bagian bawah hero selalu terpotong dan pengunjung harus
   menggulir hanya untuk melihat kartu terakhir - padahal seluruh isinya
   dirancang sebagai satu tampilan pembuka.

   SEBABNYA BUKAN ISINYA, MELAINKAN BANTALANNYA. Isi hero hanya sekitar 630
   piksel; bantalan atas dan bawah menambah 285 piksel lagi
   (`padding-block: calc(nav-h + clamp(36px,5vw,72px)) clamp(80px,10vw,140px)`).
   Angka itu masuk akal untuk monitor tinggi, tetapi di layar 768 piksel ia
   memakan lebih dari sepertiga tinggi layar hanya untuk ruang kosong.

   Yang dikurangi hanya bantalannya, bukan ukuran tulisan - judul dan paragraf
   tetap sebesar semula supaya kesan pembukanya tidak berubah. Dibatasi pada
   TINGGI layar, bukan lebarnya, karena yang menjadi kendala memang tinggi.
   -------------------------------------------------------------------------- */

@media (min-width: 900px) and (max-height: 900px) {

    .mp-hero--terang {
        /* min-height dilepas: yang menentukan tinggi cukup isinya sendiri
           beserta bantalan di bawah ini. */
        min-height: 0;
        padding-block: calc(var(--nav-h) + 18px) 34px;
    }

    .mp-hero--terang .mp-hero__cards {
        margin-top: 20px;
    }
}

/* Layar sangat pendek (768px dan di bawahnya) dirapatkan sedikit lagi. */
@media (min-width: 900px) and (max-height: 800px) {

    .mp-hero--terang {
        padding-block: calc(var(--nav-h) + 10px) 24px;
    }

    .mp-hero--terang .mp-hero__inner .mp-lede {
        margin-top: 14px;
    }

    .mp-hero--terang .mp-hero__cards {
        margin-top: 16px;
    }
}


/* Laptop paling pendek yang masih umum (720px). Bantalannya dirapatkan sekali
   lagi, dan jarak antar isian di kolom teks ikut dikurangi - pada tinggi
   sebesar itu, setiap belasan piksel menentukan apakah kartu terakhir masih
   terlihat atau harus digulir. */
@media (min-width: 900px) and (max-height: 740px) {

    .mp-hero--terang {
        padding-block: calc(var(--nav-h) + 6px) 18px;
    }

    .mp-hero--terang .mp-hero__title {
        margin-block: 12px 14px;
    }

    .mp-hero--terang .mp-hero__cards {
        margin-top: 14px;
    }

    .mp-hero--terang .mp-fcard {
        padding: 12px 14px;
    }
}


/* --------------------------------------------------------------------------
   KARTU HERO DI PONSEL: DUA KOLOM

   Terukur pada 390x844: hero 925 piksel - 81 piksel LEBIH TINGGI daripada
   layar, jadi kartu terakhir selalu terpotong. Pada 320x720 selisihnya 210
   piksel.

   Sebabnya keempat kartu bertumpuk satu per baris. Padahal isinya pendek:
   nama tiga kata dan keterangan satu kalimat. Dua kolom membuatnya dua baris
   saja, dan bagian pembuka halaman muat utuh di layar.

   Ikonnya pindah ke atas tulisan, karena pada kolom selebar 170 piksel ikon
   yang berjajar di samping menyisakan tulisan terlalu sempit.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {

    .mp-hero__cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .mp-hero--terang .mp-hero__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
    }

    .mp-fcard {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 12px 13px;
    }

    .mp-fcard__icon {
        width: 32px;
        height: 32px;
    }

    .mp-fcard strong {
        font-size: 13px;
        line-height: 1.3;
    }

    .mp-fcard span:last-child {
        font-size: 11.5px;
        line-height: 1.4;
    }
}


/* Bantalan hero di ponsel.

   Setelah kartu dibuat dua kolom, sisa selisihnya tinggal pada bantalan atas
   dan bawah. Sama seperti di laptop, isi hero tidak dikecilkan - hanya ruang
   kosongnya yang dikurangi, supaya judul dan paragraf tetap sebesar semula. */
@media (max-width: 640px) {

    .mp-hero--terang {
        min-height: 0;
        padding-block: calc(var(--nav-h) + 14px) 26px;
    }

    .mp-hero--terang .mp-hero__cards {
        margin-top: 18px;
    }
}

/* Ponsel pendek (780px ke bawah, termasuk 320x720 dan 360x780). */
@media (max-width: 640px) and (max-height: 800px) {

    .mp-hero--terang {
        padding-block: calc(var(--nav-h) + 8px) 18px;
    }

    .mp-hero--terang .mp-hero__title {
        margin-block: 12px 12px;
    }

    .mp-hero--terang .mp-hero__cards {
        margin-top: 14px;
    }

    /* Dua tombol berjajar, bukan bertumpuk. Menghemat satu tinggi tombol
       penuh, dan pada layar sesempit ini keduanya tetap terbaca karena
       tulisannya pendek. */
    .mp-hero--terang .mp-hero__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 9px;
    }

    .mp-hero--terang .mp-hero__actions .mp-btn {
        width: 100%;
        padding-inline: 10px;
        font-size: .92rem;
    }
}


/* ==========================================================================
   12. KARTU HERO DIRAMPINGKAN
   --------------------------------------------------------------------------
   Sebelumnya di layar lebar ikon dipindah ke ATAS tulisan, sehingga tiap
   kartu menjadi blok tegak setinggi 139 piksel. Empat blok setinggi itu
   berjajar terasa berat dan menutupi foto hero di belakangnya.

   Susunan mendatar - ikon di kiri, tulisan di kanan - jauh lebih ringan:
   kartunya menjadi batang pendek setinggi sekitar 70 piksel, dan foto
   puddingnya kembali terlihat.

   Ikon pindah ke atas hanya ketika kolomnya memang terlalu sempit untuk
   menampung keduanya berdampingan - yaitu di ponsel, tempat kartu disusun
   dua kolom selebar sekitar 170 piksel.
   ========================================================================== */

@media (min-width: 641px) {

    .mp-hero--terang .mp-fcard,
    .mp-fcard {
        flex-direction: row;
        align-items: center;
        gap: 11px;
        padding: 12px 14px;
    }

    .mp-fcard__icon {
        width: 34px;
        height: 34px;
    }

    .mp-fcard__icon .mp-icon {
        width: 17px;
        height: 17px;
    }

    /* Tulisan dirapatkan supaya dua barisnya tetap muat tanpa menambah
       tinggi kartu. */
    .mp-fcard__text {
        line-height: 1.32;
        min-width: 0;
    }

    .mp-fcard__text strong {
        font-size: .88rem;
    }

    .mp-fcard__text span {
        font-size: .78rem;
    }
}

/* Layar pendek: dirapatkan sekali lagi, sejalan dengan bantalan hero yang
   juga dikurangi di rentang tinggi yang sama. */
@media (min-width: 641px) and (max-height: 800px) {

    .mp-hero--terang .mp-fcard {
        padding: 10px 13px;
        gap: 10px;
    }

    .mp-fcard__icon {
        width: 32px;
        height: 32px;
    }
}


/* Kartu dilebarkan sedikit supaya NAMA muat satu baris.
   
   Pada lebar 214 piksel, ikon dan bantalan memakan 73 piksel sehingga
   tulisan hanya kebagian 141 - dan nama seperti "51+ Varian Dessert" atau
   "Halal & Tanpa Pengawet" terpaksa membungkus dua baris. Itu yang membuat
   kartunya tetap setinggi 98 piksel meski susunannya sudah mendatar.
   
   Dengan barisan kartu dilebarkan menjadi 68vw, tiap kartu mendapat sekitar
   238 piksel dan namanya muat satu baris. Kartunya turun ke sekitar 70
   piksel - batang pendek, seperti yang dimaksud. */
@media (min-width: 1200px) {

    .mp-hero--terang .mp-hero__cards {
        max-width: min(1120px, 68vw);
    }

    /* Nama TIDAK dipotong elipsis.
    
       Sempat dicoba `white-space: nowrap` dengan elipsis agar namanya pasti
       satu baris. Hasilnya "Halal & Tanpa Pengaw..." pada layar 1280-1440px -
       dan nama yang terpotong lebih buruk daripada nama yang membungkus,
       karena pembaca kehilangan artinya.
    
       Yang dikecilkan ikonnya dan bantalannya, sehingga tulisan mendapat
       ruang lebih banyak dan namanya muat sendiri tanpa dipaksa. */
    .mp-fcard__text strong {
        font-size: .84rem;
    }

    .mp-hero--terang .mp-fcard {
        padding: 11px 12px;
        gap: 10px;
    }

    .mp-fcard__icon {
        width: 30px;
        height: 30px;
    }

    .mp-fcard__icon .mp-icon {
        width: 15px;
        height: 15px;
    }

    .mp-fcard__text span {
        font-size: .74rem;
    }
}


/* ==========================================================================
   13. FOTO "TENTANG KAMI" DI MONITOR — RASIO MENGIKUTI FOTO ASLINYA
   --------------------------------------------------------------------------
   Terukur pada 1440px:

       kolom foto     606 x 744 piksel
       kolom tulisan  606 x 575 piksel

   Fotonya 169 piksel lebih tinggi daripada tulisan di sebelahnya, jadi
   fotolah yang menentukan tinggi seluruh bagian ini - dan di bawah tulisan
   tersisa ruang kosong. Pada 1920px selisihnya 289 piksel.

   SEBABNYA BINGKAINYA DIPAKSA TEGAK. Foto utama diberi rasio 4:5 (tegak),
   padahal foto aslinya 1402x1122 - yaitu 5:4 MENDATAR. Dua akibatnya
   sekaligus:

     1. Bingkainya menjadi jauh lebih tinggi daripada yang diperlukan.
     2. `object-fit: cover` membuang 36% bagian atas dan bawah foto supaya
        muat ke bingkai tegak itu.

   Jadi fotonya terlalu besar DAN terpotong sepertiga - dua keluhan dari satu
   sebab. Foto menumpang pun sama: bingkainya persegi, membuang 20%.

   Dengan rasio mengikuti aslinya, tingginya turun sendiri dan tidak ada satu
   piksel pun yang dibuang. Kolase, bayangan, dan foto menumpang di sudut
   tetap seperti semula - yang berubah hanya bentuk bingkainya.
   ========================================================================== */

@media (min-width: 861px) {

    .mp-story__main {
        aspect-ratio: 1402 / 1122;
    }

    .mp-story__mini {
        aspect-ratio: 1402 / 1122;
    }
}


/* ==========================================================================
   14. SELUBUNG HERO — SISI KANAN DIBIARKAN PEKAT
   --------------------------------------------------------------------------
   Selubung sekarang menipis bertahap dari 94% di kiri ke 4% di kanan. Tetapi
   penipisannya terlalu lambat: pada 62% lebar layar masih tersisa 38%, dan
   pada 76% masih 14%. Akibatnya cokelat puddingnya memucat menjadi pastel
   hampir di seluruh bidang foto.

   Padahal foto makanan yang PEKAT dan jenuh justru yang menandakan premium -
   itulah cara toko kue kelas atas memotret produknya: gelap, kaya, kontras.

   Sisi kiri tetap terang karena di sanalah tulisan berada dan keterbacaan
   tidak boleh dikorbankan. Yang diubah hanya sisi kanan, tempat tidak ada
   satu huruf pun: penipisannya dipercepat sehingga mulai 58% lebar layar
   fotonya sudah hampir tanpa selubung.
   ========================================================================== */

@media (min-width: 861px) {

    .mp-hero--terang .mp-hero__veil {
        background:
            radial-gradient(760px 560px at 88% 6%,
                rgba(122, 74, 158, .14) 0%,
                rgba(122, 74, 158, 0) 68%),
            radial-gradient(680px 520px at 4% 92%,
                rgba(181, 72, 114, .16) 0%,
                rgba(181, 72, 114, 0) 66%),
            linear-gradient(97deg,
                rgba(253, 244, 248, .94) 0%,
                rgba(253, 244, 248, .90) 30%,
                /* Titik balik dimajukan dari 48% ke 42%: tepat setelah kolom
                   tulisan berakhir, bukan di tengah foto. */
                rgba(253, 244, 248, .62) 42%,
                rgba(253, 244, 248, .22) 52%,
                rgba(253, 244, 248, .06) 58%,
                rgba(253, 244, 248, 0) 70%);
    }
}


/* Dua kartu, dua kolom - dan bloknya diperkecil.

   Aturan lama menyusun empat kolom selebar 68% lebar hero. Dengan kartu
   tinggal dua, susunan itu menyisakan separuh bloknya kosong dan kedua
   kartunya tetap membentang selebar sebelumnya.

   Sekarang bloknya selebar sekitar 620 piksel - cukup untuk dua kartu, dan
   berhenti tepat sebelum piring puddingnya. Itu tujuan yang sama dengan
   penghapusan dua kartu tadi: produknya dibiarkan bernapas. */
@media (min-width: 641px) {

    .mp-hero--terang .mp-hero__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: min(620px, 46vw);
    }
}


/* ==========================================================================
   15. FOTO KARTU PRODUK — PERSEGI DI SEMUA UKURAN LAYAR
   --------------------------------------------------------------------------
   Bingkai foto kartu produk dipaksa 4:5 (tegak) di monitor, padahal seluruh
   foto produk Micho berbentuk PERSEGI - 313x313 piksel.

   `object-fit: cover` lalu membuang 20% bagian kiri dan kanan setiap foto
   supaya muat ke bingkai tegak itu. Pada foto puding dan cheesecake yang
   bulat dan berada tepat di tengah bingkai, yang terbuang justru tepi piring
   dan hiasan di sisinya - bagian yang membuat produknya terlihat utuh.

   Ini cacat yang sama dengan foto "Tentang Kami" pada revisi ketiga puluh
   empat: bingkai tegak dipasang pada sumber yang tidak tegak.

   Ada kejanggalan kedua: di tablet dan ponsel bingkainya SUDAH 1:1 sejak
   awal. Jadi foto yang sama tampil utuh di ponsel tetapi terpotong 20% di
   monitor - dan justru monitor yang layarnya paling lega.

   Dengan 1:1 di semua ukuran:
     - tidak ada satu piksel pun yang terbuang
     - kartunya memendek, karena foto 373 piksel menjadi 298
     - tampilannya seragam dari ponsel sampai monitor
   ========================================================================== */

@media (min-width: 900px) {
    .mp-prod__frame {
        aspect-ratio: 1 / 1;
    }
}

@media (min-width: 480px) and (max-width: 699px) {
    .mp-prod__frame {
        aspect-ratio: 1 / 1;
    }
}


/* ==========================================================================
   16. HERO MEMENUHI LAYAR PONSEL
   --------------------------------------------------------------------------
   Terukur sebelum perbaikan:

       320x720   hero 654px  ->   67 piksel layar kosong di bawahnya
       360x780   hero 619px  ->  161 piksel kosong
       390x844   hero 697px  ->  147 piksel kosong
       430x932   hero 697px  ->  235 piksel kosong

   Jadi layar pembuka tidak pernah penuh: selalu ada pita krim menganggur
   sebelum bagian berikutnya mulai, dan pada ponsel layar lebar seperempat
   layarnya terbuang.

   SEBABNYA `min-height: 0` yang dipasang pada revisi ketiga puluh. Waktu itu
   tujuannya benar - hero justru LEBIH TINGGI daripada layar dan kartu
   terakhirnya terpotong. Tetapi melepas min-height membuat tingginya ditentukan
   isi semata, dan isi yang sudah dirampingkan (kartu dari empat menjadi dua,
   susunan dua kolom) kini jauh lebih pendek daripada layar.

   Perbaikan yang menyelesaikan masalah lama menimbulkan kebalikannya.

   `100svh` memakai tinggi layar KECIL - yaitu saat bilah alamat peramban
   sedang terlihat. Dengan begitu hero tetap penuh dan tidak pernah terpotong,
   baik saat bilah alamat muncul maupun menghilang saat digulir.

   Isinya ditengahkan tegak: dengan tinggi yang kini ditentukan layar, menaruh
   isi di atas akan menyisakan ruang kosong besar di bawah judul.
   ========================================================================== */

@media (max-width: 860px) {

    .mp-hero--terang {
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Bantalan dikembalikan seimbang atas-bawah. Nilai sebelumnya berat di
       atas (78px lawan 26px) untuk menghindari bilah navigasi; dengan isi yang
       kini ditengahkan, ketimpangan itu justru menggeser isinya ke bawah. */
    .mp-hero--terang {
        padding-block: calc(var(--nav-h) + 8px) 8px;
    }
}


/* ==========================================================================
   17. DUA KOREKSI TAMPILAN PONSEL
   ========================================================================== */

/* --------------------------------------------------------------------------
   17a. ISI HERO KEMBALI KE ATAS

   Revisi kelima puluh empat menengahkan isi hero secara tegak, supaya hero
   yang kini setinggi layar penuh tidak menyisakan ruang kosong di bawah
   judul.

   Yang terjadi justru sebaliknya: isinya turun ke 26% tinggi layar - 158
   piksel di bawah bilah navigasi. Judul yang seharusnya jadi hal pertama
   yang terbaca malah berada di bawah bidang foto kosong, dan pembaca harus
   mencarinya.

   Isi dikembalikan ke atas. Ruang kosong yang tersisa kini berada di BAWAH
   isi, terisi foto puddingnya - dan di situ ruang kosong memang tidak
   mengganggu, malah memberi foto kesempatan terlihat.
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {

    .mp-hero--terang {
        justify-content: flex-start;
    }
}

/* --------------------------------------------------------------------------
   17b. TOMBOL BELI DI HALAMAN PRODUK TERLALU BESAR

   Terukur pada 390px: tiap tombol 170x80 piksel dengan tulisan MEMBUNGKUS
   TIGA BARIS - "Tambah ke / Keranjang" dan "Pesan via / WhatsApp".

   Dua tombol setinggi 80 piksel ditambah bantalan membuat bilah bawah
   memakan sekitar seperlima tinggi layar. Pada halaman yang justru ingin
   menampilkan foto dan keterangan produk, itu terlalu banyak.

   Sebabnya tulisan terlalu panjang untuk kolom selebar 170 piksel. Diringkas:

       "Tambah ke Keranjang"  ->  "+ Keranjang"
       "Pesan via WhatsApp"   ->  "Chat WhatsApp"

   Keduanya muat satu baris, dan artinya tidak berkurang - lambang keranjang
   dan warna hijau WhatsApp sudah menjelaskan sisanya.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {

    .mp-detail__actions .mp-btn {
        /* Bantalan samping dari 28 piksel menjadi 12.
        
           Pada tombol selebar 170 piksel, bantalan 28 di kiri dan kanan
           memakan 56 piksel - sepertiga lebarnya - sehingga tulisan hanya
           kebagian 114 piksel dan "Chat WhatsApp" (112 piksel) nyaris tidak
           muat. Bantalan selebar itu masuk akal untuk tombol di layar lebar,
           bukan untuk dua tombol berdampingan di ponsel. */
        padding: 12px;
        font-size: .92rem;
        line-height: 1.25;
        min-height: 48px;
    }

    /* Bantalan bilah dirapatkan sedikit, dan ruang aman ponsel berponi
       dihormati lewat safe-area. */
    .mp-detail__actions {
        padding-block: 10px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }

    /* Halaman tidak perlu lagi menyisakan 96 piksel untuk bilah setinggi itu. */
    .mp-detail {
        padding-bottom: 84px;
    }
}


/* Dua tulisan untuk satu tombol: panjang di layar lebar, pendek di ponsel.

   Bukan memotong tulisan dengan elipsis - keduanya kalimat utuh, hanya
   dipilih menurut ruang yang tersedia. Di layar lebar kalimat penuh lebih
   jelas bagi pengunjung baru; di ponsel yang penting muat satu baris. */
.mp-btn__pendek {
    display: none;
}

@media (max-width: 900px) {
    .mp-btn__panjang {
        display: none;
    }

    .mp-btn__pendek {
        display: inline;
    }
}


/* Ponsel paling sempit (340px ke bawah). Tombol di sana hanya selebar 144
   piksel; "Chat WhatsApp" masih membungkus dua baris. Ukuran tulisan
   dikecilkan sedikit supaya muat satu baris - tingginya tetap di atas 44
   piksel, jadi tidak mengurangi kemudahan disentuh. */
@media (max-width: 340px) {

    .mp-detail__actions .mp-btn {
        padding-inline: 8px;
        font-size: .84rem;
    }
}


/* ==========================================================================
   18. KARTU HERO DI PONSEL: DUA BATANG MENDATAR BERTUMPUK
   --------------------------------------------------------------------------
   Sejak revisi ketiga puluh sembilan kartunya disusun dua kolom berdampingan.
   Dengan hanya dua kartu tersisa, susunan itu menghasilkan dua kotak hampir
   persegi - dan keterangan Custom Order terpaksa membungkus TIGA baris di
   kolom selebar 170 piksel.

   Bertumpuk mendatar jauh lebih rapi: tiap kartu memakai lebar penuh, ikon di
   kiri dan tulisan di kanan, keterangannya muat dua baris. Bentuknya menjadi
   batang memanjang - sama seperti di monitor - sehingga tampilannya seragam
   dari ponsel sampai layar lebar.

   Tingginya pun tidak bertambah: dua kotak 131 piksel bersebelahan menjadi
   dua batang sekitar 64 piksel bertumpuk.
   ========================================================================== */

/* Berlaku sampai 900px, bukan 640px.
   
   Pada 768px (tablet) kartunya masih dua kolom, dan lebar bloknya dibatasi
   46vw - jadi tiap kolom hanya sekitar 170 piksel dan keterangannya membungkus
   EMPAT sampai LIMA baris, membuat kartunya setinggi 134 piksel. Rentang itu
   ikut dijadikan satu kolom. */
@media (max-width: 900px) {

    .mp-hero--terang .mp-hero__cards,
    .mp-hero__cards {
        grid-template-columns: 1fr;
        gap: 8px;
        max-width: min(560px, 94vw);
    }

    /* Ikon kembali ke kiri tulisan. Pada lebar penuh, ruangnya cukup untuk
       keduanya berdampingan - yang dulu memaksa ikon ke atas adalah kolom
       sempit 170 piksel, dan kolom itu sudah tidak ada. */
    .mp-fcard {
        flex-direction: row;
        align-items: center;
        gap: 11px;
        padding: 10px 13px;
    }

    .mp-fcard__icon {
        width: 34px;
        height: 34px;
        flex: none;
    }

    .mp-fcard__icon .mp-icon {
        width: 17px;
        height: 17px;
    }

    .mp-fcard__text {
        min-width: 0;
        line-height: 1.32;
    }

    .mp-fcard__text strong {
        font-size: .88rem;
    }

    .mp-fcard__text span:last-child {
        font-size: .78rem;
    }
}


/* ==========================================================================
   19. HERO MEMENUHI LAYAR DI MONITOR JUGA
   --------------------------------------------------------------------------
   Terukur sebelum perbaikan:

       1024x768    hero 630  ->  138 piksel layar kosong
       1280x720    hero 664  ->   56 piksel kosong
       1440x900    hero 745  ->  155 piksel kosong
       1920x1080   hero 937  ->  143 piksel kosong
       2560x1440   hero 937  ->  503 piksel kosong

   Perbaikan revisi kelima puluh empat hanya menyentuh ponsel dan tablet
   (sampai 860px). Di monitor, hero tetap berhenti sebelum layar habis dan
   bagian berikutnya sudah mengintip di bawahnya - jadi layar pembuka tidak
   pernah terbaca sebagai satu bidang utuh.

   Pada 2560x1440 bahkan 503 piksel - sepertiga layar - terbuang, karena
   `min-height` lamanya dibatasi 900 piksel.

   `100svh` menyamakan tinggi hero dengan tinggi layar di semua ukuran.
   Isinya sudah ditengahkan secara tegak oleh susunan aslinya di monitor, jadi
   tidak perlu penyesuaian tambahan.
   ========================================================================== */

@media (min-width: 861px) {

    .mp-hero--terang {
        min-height: 100svh;
    }
}


/* Jendela monitor yang sangat pendek (660px ke bawah).

   Pada 1280x600 - misalnya jendela peramban yang tidak dibesarkan penuh - isi
   hero setinggi 664 piksel tidak muat, dan 9 piksel kartu terbawah terpotong.

   Bantalan dan jarak antar isi dirapatkan pada rentang tinggi itu saja. Ukuran
   tulisan tidak dikurangi: yang menyebabkan luber adalah ruang kosongnya,
   bukan tulisannya. */
@media (min-width: 861px) and (max-height: 660px) {

    /* min-height dilepas pada rentang ini.
    
       Memaksa hero setinggi layar sementara isinya memang lebih tinggi hanya
       memindahkan masalah: heronya "penuh" tetapi isinya tetap luber. Di sini
       isi yang menentukan, dan bantalannya dirapatkan sampai selisihnya
       sekecil mungkin. */
    .mp-hero--terang {
        min-height: 0;
        padding-block: calc(var(--nav-h) + 4px) 10px;
    }

    .mp-hero--terang .mp-lede {
        margin-top: 10px;
    }

    .mp-hero--terang .mp-hero__actions {
        margin-top: 12px;
    }

    .mp-hero--terang .mp-hero__title {
        margin-block: 8px 10px;
    }

    .mp-hero--terang .mp-hero__cards {
        margin-top: 10px;
    }

    .mp-hero--terang .mp-fcard {
        padding: 9px 12px;
    }
}


/* ==========================================================================
   20. SELUBUNG PONSEL: FOTO DIBIARKAN TERLIHAT DI BAWAH
   --------------------------------------------------------------------------
   Selubung di ponsel menutup rata dari atas ke bawah - 90% di puncak, 84% di
   tengah, 92% di dasar. Fotonya memang menutupi seluruh hero (sudah diukur:
   390x844 penuh), tetapi tertutup selubung hampir pekat di mana-mana.

   Ketika hero masih pendek, itu tidak terasa. Setelah hero dijadikan setinggi
   layar penuh pada revisi kelima puluh empat, bidang yang tertutup itu
   menjadi jauh lebih luas - dan bagian bawah terbaca sebagai bidang krim
   kosong, seolah fotonya hanya separuh.

   Selubung sekarang mengikuti letak tulisan:

       0-58%    pekat    - di sinilah judul dan paragraf berada
       58-78%   menipis  - peralihan di sekitar tombol
       78-100%  bening   - hanya kartu putih yang berada di sini, dan kartu
                           itu sudah berlatar putih 95% sehingga tetap
                           terbaca di atas foto

   Hasilnya foto terlihat utuh dari atas ke bawah, sementara keterbacaan
   tulisan tidak berkurang sedikit pun.
   ========================================================================== */

@media (max-width: 899px) {

    .mp-hero--terang .mp-hero__veil {
        background:
            radial-gradient(420px 340px at 88% 4%,
                rgba(122, 74, 158, .16) 0%,
                rgba(122, 74, 158, 0) 70%),
            linear-gradient(178deg,
                rgba(253, 244, 248, .92) 0%,
                rgba(253, 244, 248, .90) 40%,
                rgba(253, 244, 248, .84) 58%,
                rgba(253, 244, 248, .52) 70%,
                rgba(253, 244, 248, .20) 82%,
                rgba(253, 244, 248, .06) 100%);
    }
}


/* Elemen <picture> tidak mewarisi tampilan blok dari .mp-hero__bg img, jadi
   ukurannya perlu ditegaskan - tanpa ini bingkai fotonya menciut ke ukuran
   bawaan sebaris. */
.mp-hero__bg picture {
    display: block;
    width: 100%;
    height: 100%;
}


/* ==========================================================================
   21. PONSEL: FOTO DIPERBESAR KE ARAH SUBJEKNYA
   --------------------------------------------------------------------------
   Dengan satu foto mendatar dipakai di kotak tegak, ponsel hanya melihat
   irisan selebar 23% - dan irisan itu MEMBENTANG SELURUH TINGGI foto. Jadi
   yang tampil bukan hanya kuenya, tetapi juga meja, pita, dan bunga di
   sekelilingnya.

   Selama tinggi foto persis sama dengan tinggi kotak, tidak ada pemotongan
   tegak sama sekali - sehingga `object-position` sumbu Y tidak berpengaruh
   apa pun. Itu sebabnya menggeser titik fokus ke atas atau ke bawah selama
   ini tidak mengubah apa-apa.

   Dengan foto dibuat 165% tinggi kotak, pemotongan tegak baru ada - dan
   barulah titik fokus Y bisa dipakai untuk memilih bagian mana yang tampil.
   Disetel ke arah kue: bagian tengah-atas foto, sehingga meja dan pita di
   dasar foto keluar dari bingkai.

   Kuenya juga tampil lebih besar, karena diperbesar 1,65 kali.

   ---------------------------------------------------------------------
   BILA TITIK FOKUSNYA MELESET pada foto yang berbeda, ubah dua angka pada
   `object-position` di bawah:

       angka pertama  = mendatar (0% kiri, 100% kanan)
       angka kedua    = tegak    (0% atas, 100% bawah)

   Foto dengan kue di kanan biasanya cocok di 66%; bila kuenya di tengah,
   turunkan ke 50%.
   --------------------------------------------------------------------- */

@media (max-width: 860px) {

    /* Pemilihnya ditulis lengkap dengan .mp-hero--terang.
    
       Aturan lama `.mp-hero--terang .mp-hero__bg img { object-position: 62%
       center }` lebih khusus daripada `.mp-hero__bg img`, jadi versi pendek
       kalah dan tidak berlaku sama sekali - terukur: pembesarannya tetap 1. */
    .mp-hero--terang .mp-hero__bg img {
        position: absolute;
        left: 0;
        width: 100%;
        height: 165%;
        top: -32%;
        object-fit: cover;
        object-position: 66% 38%;
    }

    /* Saat foto ponsel tersendiri dipakai, pembesaran ini TIDAK diperlukan -
       fotonya memang sudah tegak dan sudah pas. Pembesaran justru akan
       memotongnya tanpa alasan. */
    .mp-hero--terang .mp-hero__bg picture img {
        height: 100%;
        top: 0;
        object-position: center;
    }
}


/* ==========================================================================
   22. PONSEL: FOTO JADI KARTU, BUKAN LATAR
   --------------------------------------------------------------------------
   Empat revisi dihabiskan mencoba membuat satu foto mendatar bekerja sebagai
   LATAR di kotak tegak:

       ke-58  selubung ditipiskan  -> fotonya terlihat, tetapi yang terlihat
                                      meja dan pita
       ke-59  foto ponsel terpisah -> berhasil, tetapi butuh foto kedua
       ke-60  diperbesar + fokus   -> kue lebih besar, tetap irisan sempit

   Sebabnya bukan titik fokusnya, melainkan PERANNYA. Latar belakang harus
   mengisi bidang apa pun bentuknya, jadi selalu ada yang dipotong - dan pada
   kotak tegak, 77% lebar foto mendatar terbuang.

   Sebagai KARTU, foto punya bidangnya sendiri. Tingginya mengikuti lebar dan
   bentuk aslinya, jadi tampil UTUH berapa pun bentuk fotonya - mendatar,
   tegak, atau persegi. Tidak ada yang dipotong sama sekali.

   Foto juga naik derajat: dari hiasan di belakang tulisan menjadi isi yang
   memang ingin dilihat. Pada usaha makanan, fotonya memang yang menjual.
   ========================================================================== */

.mp-hero__foto {
    display: none;
}

@media (max-width: 860px) {

    .mp-hero__foto {
        display: block;
        margin: 14px 0 0;
        border-radius: 18px;
        overflow: hidden;
        background: var(--cream);
        box-shadow: 0 10px 30px rgba(36, 22, 18, .12);
    }

    .mp-hero__foto img {
        display: block;
        width: 100%;

        /* Tinggi mengikuti bentuk asli foto - tidak ada yang dipotong.
        
           Dibatasi agar tidak mendorong isi lain keluar layar: pada foto
           mendatar 2:1 tingginya sekitar 175 piksel, pada foto tegak 3:4
           batas inilah yang berlaku. */
        height: auto;

        /* Dibatasi 19% tinggi layar.
        
           Terukur pada 30%: isi hero meluber 10-29 piksel di beberapa ukuran,
           dan kartu fitur terpotong tepi bawah layar. Pada 17,5% seluruhnya muat
           - foto mendatar 2:1 menjadi sekitar 160 piksel, masih cukup besar
           untuk terlihat jelas. */
        max-height: 17.5svh;
        object-fit: contain;
    }

    /* Latar foto dimatikan. Dengan foto sudah tampil utuh sebagai kartu,
       latar yang sama di belakangnya hanya mengulang gambar yang sama dalam
       bentuk terpotong - dan membuat tulisan lebih sulit dibaca. */
    .mp-hero--terang .mp-hero__bg {
        display: none;
    }

    /* Selubung menjadi latar tunggal: gradasi krim-merah jambu yang tenang. */
    .mp-hero--terang .mp-hero__veil {
        background:
            radial-gradient(420px 340px at 88% 4%,
                rgba(122, 74, 158, .14) 0%,
                rgba(122, 74, 158, 0) 70%),
            radial-gradient(520px 420px at 6% 96%,
                rgba(181, 72, 114, .12) 0%,
                rgba(181, 72, 114, 0) 68%),
            linear-gradient(176deg,
                #FDF4F8 0%,
                #FBEEF4 55%,
                #FDF6F2 100%);
    }
}


/* Ponsel paling sempit (340px ke bawah).

   Pada layar 320x720, isi hero sudah setinggi sekitar 700 piksel tanpa kartu
   foto sama sekali - badge, judul, paragraf, dua tombol, dan dua kartu fitur.
   Menambahkan foto membuatnya meluber hampir 100 piksel, dan memaksakannya
   berarti mengecilkan tulisan di layar yang justru paling butuh tulisan
   terbaca.

   Di sana kartu foto dilewati, dan latar fotonya dikembalikan - jadi
   pengunjung tetap melihat foto, hanya sebagai latar seperti sebelumnya. */
@media (max-width: 340px) {

    .mp-hero__foto {
        display: none;
    }

    .mp-hero--terang .mp-hero__bg {
        display: block;
    }
}


/* ==========================================================================
   23. LENCANA WAKTU SIAP PRODUK
   --------------------------------------------------------------------------
   Pertanyaan "bisa jadi hari ini nggak?" termasuk yang paling sering masuk
   lewat WhatsApp. Menuliskannya di kartu produk menjawabnya sebelum ditanya.

   Tiga warna dipakai supaya terbaca sekilas tanpa harus dibaca kata demi
   kata - hijau untuk yang bisa hari ini, kuning untuk yang perlu menunggu,
   merah jambu untuk yang harus dipesan sehari sebelumnya. Tulisannya tetap
   ada, jadi tidak bergantung pada warna saja.
   ========================================================================== */

.mp-siap {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

.mp-siap--ready {
    background: rgba(31, 122, 78, .12);
    color: #1B6B45;
}

.mp-siap--3jam {
    background: rgba(176, 122, 26, .14);
    color: #8A5E12;
}

.mp-siap--h1 {
    background: rgba(181, 72, 114, .13);
    color: var(--rose-deep, #8E3357);
}

/* Di ponsel lencana turun ke baris sendiri.
   
   Pada kartu selebar sekitar 165 piksel, nama kategori ditambah lencana di
   sampingnya melebihi lebar kartu dan membungkus di tengah kata. */
@media (max-width: 520px) {

    .mp-siap {
        display: block;
        width: fit-content;
        margin: 5px 0 0;
    }
}


/* Keterangan waktu siap di halaman rincian produk. */
.mp-detail__siap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 14px 0 0;
    font-size: .92rem;
    line-height: 1.5;
    color: var(--ink-muted);
}

.mp-detail__siap .mp-siap {
    margin: 0;
    flex: none;
}