/* ============================================================================
   CAU Chocolates — halaman brand
   ----------------------------------------------------------------------------
   Mengikuti brand guideline CAU apa adanya:

   Warna   #39452D hijau hutan · #F9F5E4 krem · #FF4810 jingga · #701D00 coklat
   Huruf   Averia Serif Libre (judul) · Quicksand (isi) · Caveat (tagline tulis tangan)
   Suara   Taste of Paradise · A Smile You Can Taste in Every Bite ·
           Pure. Ethical. Delicious.

   Jingga dipakai hemat. Pada guideline pun ia muncul sebagai ilustrasi dan
   aksen, bukan bidang besar — kelangkaannya yang membuatnya bekerja.
   ========================================================================== */

/* ---------- huruf brand, dimuat dari berkas sendiri ----------
   Berkasnya masih TTF/OTF apa adanya dari paket brand guideline (±830 KB
   seluruhnya). Diubah ke WOFF2 dan disubset ke Latin saja, angkanya turun ke
   sekitar 200 KB. Belum dikerjakan di sini karena butuh fonttools, yang belum
   ada di mesin ini — dicatat sebagai pekerjaan sekali jalan saat pipeline build
   sudah berdiri. font-display: swap menahan dampaknya sementara: tulisan sudah
   terbaca dengan huruf cadangan sebelum berkasnya selesai turun. */
@font-face {
    font-family: 'Averia Serif Libre';
    src: url('/fonts/AveriaSerifLibre-Light.ttf') format('truetype');
    font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Averia Serif Libre';
    src: url('/fonts/AveriaSerifLibre-Regular.ttf') format('truetype');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Averia Serif Libre';
    src: url('/fonts/AveriaSerifLibre-Italic.ttf') format('truetype');
    font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
    font-family: 'Averia Serif Libre';
    src: url('/fonts/AveriaSerifLibre-Bold.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Quicksand';
    src: url('/fonts/Quicksand_Light.otf') format('opentype');
    font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Quicksand';
    src: url('/fonts/Quicksand_Book.otf') format('opentype');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Quicksand';
    src: url('/fonts/Quicksand_Bold.otf') format('opentype');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Caveat';
    src: url('/fonts/Caveat-SemiBold.ttf') format('truetype');
    font-weight: 600; font-style: normal; font-display: swap;
}

:root {
    --hijau: #39452D;
    --hijau-tua: #2A3421;
    --krem: #F9F5E4;
    --krem-tua: #EDE7D2;
    --jingga: #FF4810;
    --coklat: #701D00;
    --tinta: #26301C;

    --serif: 'Averia Serif Libre', Georgia, serif;
    --sans: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --tulis: 'Caveat', cursive;

    --tepi: clamp(20px, 5vw, 92px);
    --renggang: clamp(92px, 14vh, 176px);

    /* Satu kurva untuk seluruh halaman. Gerak yang memakai kurva berbeda-beda
       terasa gugup; satu kurva membuat semuanya terbaca sebagai satu tangan. */
    --lembut: cubic-bezier(.22, 1, .36, 1);
}

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    background: var(--krem);
    color: var(--tinta);
    font-family: var(--sans);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* Tombol dan isian tidak mewarisi font halaman secara bawaan peramban —
   tanpa baris ini "Kirim ke tim HORECA" dan pemilih paket booking tampil
   dalam Helvetica tebal di tengah halaman Quicksand, dan terbaca seperti
   bagian yang belum selesai (audit ponsel 23 Sep 2026). */
button, input, select, textarea { font: inherit; }

h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -0.012em;
    line-height: 1.02;
    margin: 0;
    text-wrap: balance;
}

.wadah { width: min(1400px, 100%); margin-inline: auto; padding-inline: var(--tepi); }
.sempit { width: min(720px, 100%); }

/* ---------- navigasi ----------
   Di atas layar pembuka ia melayang tanpa latar, tetapi hurufnya diberi bayangan
   halus supaya tetap terbaca. Begitu digulir melewati pembuka, latar krem masuk
   perlahan — inilah yang sebelumnya hilang dan membuat menu bertabrakan dengan
   isi halaman. */
.nav {
    position: fixed; inset: 0 0 auto; z-index: 100;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 20px var(--tepi);
    color: var(--krem);
    transition: background .6s var(--lembut), color .6s var(--lembut),
                padding .6s var(--lembut), box-shadow .6s var(--lembut);
}
.nav::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(38,48,28,.55), rgba(38,48,28,0));
    opacity: 1; transition: opacity .6s var(--lembut);
}
.nav a { text-shadow: 0 1px 12px rgba(38,48,28,.45); transition: text-shadow .6s var(--lembut); }

.nav--turun {
    background: rgba(249,245,228,.94);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    color: var(--tinta);
    padding-block: 13px;
    box-shadow: 0 1px 0 rgba(38,48,28,.09);
}
.nav--turun::before { opacity: 0; }
.nav--turun a { text-shadow: none; }

.nav__merek { font-family: var(--serif); font-size: 19px; line-height: 1.1; }
.nav__merek span {
    display: block; font-family: var(--sans); font-size: 9px; font-weight: 700;
    letter-spacing: .3em; text-transform: uppercase; opacity: .62; margin-top: 4px;
}
.nav__tautan { display: flex; align-items: center; gap: 32px; font-size: 12px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; }
.nav__tautan a { position: relative; padding-block: 5px; }
.nav__tautan a::after {
    content: ''; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0;
    background: var(--jingga); transition: width .55s var(--lembut);
}
.nav__tautan a:hover::after { width: 100%; }
@media (max-width: 980px) { .nav__tautan { display: none; } }

/* ---------- layar pembuka ---------- */
/* padding-top bukan hiasan: menu melayang di atas layar (position: fixed), jadi
   ia tidak menyisakan ruang untuk dirinya sendiri. Selama isi pembuka lebih
   pendek daripada min-height, align-items: flex-end menahannya di bawah dan
   masalahnya tidak terlihat. Begitu isinya lebih tinggi — judul tiga baris,
   paragraf enam baris, dan dua tombol yang menumpuk di layar ponsel — isinya
   naik sampai ke atas dan baris pertamanya bertabrakan dengan nama merek. */
.pembuka { position: relative; min-height: 100svh; display: flex; align-items: flex-end;
    padding-top: clamp(96px, 15vh, 150px);
    padding-bottom: clamp(52px, 10vh, 116px); overflow: hidden; background: var(--hijau); }
/* Sedikit lebih tinggi dari layarnya supaya gerak parallax tidak pernah
   memperlihatkan tepi kosong di atas atau di bawah gambar. */
.pembuka__latar { position: absolute; inset: -6% 0; z-index: 0; }
/* width DAN height dikunci: dengan aspect-ratio dan tinggi yang pasti, lebar
   figure ikut dihitung dari rasionya dan berhenti sebelum tepi layar — foto
   rasio 3/2 pada pembuka setinggi 660px hanya selebar 990px, menyisakan bidang
   hijau kosong di kanannya. */
.pembuka__latar .foto { height: 100%; width: 100%; border-radius: 0; }
.pembuka__latar .foto img { height: 100%; width: 100%; object-fit: cover; }
/* Selubung gelap di atas foto. Berat sekali di bawah karena di situlah judul
   dan paragraf berdiri: foto kebun siang hari punya daun-daun terang yang
   membuat tulisan krem hilang kalau selubungnya kurang tebal. Nilai-nilai ini
   ditentukan dengan melihat hasilnya, bukan ditebak. */
.pembuka::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(180deg,
            rgba(38,48,28,.62) 0%,
            rgba(38,48,28,.18) 26%,
            rgba(38,48,28,.52) 55%,
            rgba(38,48,28,.86) 78%,
            rgba(38,48,28,.96) 100%),
        linear-gradient(90deg, rgba(38,48,28,.62) 0%, rgba(38,48,28,.16) 52%, transparent 72%);
}
.pembuka__isi { position: relative; z-index: 2; color: var(--krem); }
.pembuka h1 {
    font-size: clamp(46px, 8.6vw, 132px);
    line-height: .96;
    max-width: 13ch;
    margin-bottom: 22px;
}
.pembuka h1 em { font-style: italic; color: var(--krem); }
.pembuka__lead { max-width: 46ch; font-size: clamp(16px, 1.1vw, 18.5px);
    color: rgba(249,245,228,.9); font-weight: 400;
    text-shadow: 0 1px 18px rgba(38,48,28,.6); }

/* Tagline tulis tangan — suara brand yang paling khas, dipakai sekali di sini
   dan sekali di penutup. Kalau muncul di mana-mana, ia berhenti terasa personal. */
.tulis { font-family: var(--tulis); font-weight: 600; color: var(--jingga);
    font-size: clamp(24px, 3.1vw, 42px); line-height: 1.15; }

.mata { display: inline-flex; align-items: center; gap: 13px; margin-bottom: 22px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; opacity: .8; }
.mata::before { content: ''; width: 34px; height: 1px; background: var(--jingga); }

.gulir { position: absolute; right: var(--tepi); bottom: clamp(52px, 10vh, 116px); z-index: 2;
    color: var(--krem); font-size: 10px; font-weight: 700; letter-spacing: .24em;
    text-transform: uppercase; writing-mode: vertical-rl; opacity: .62; }
.gulir::after { content: ''; display: block; width: 1px; height: 52px; margin: 14px auto 0;
    background: linear-gradient(var(--krem), transparent); }
@media (max-width: 980px) { .gulir { display: none; } }

/* Segel Bali Organic. Berputar sangat pelan — satu putaran hampir satu menit,
   cukup untuk terasa hidup tanpa menarik perhatian dari isi. */
.segel { position: absolute; z-index: 3; width: clamp(88px, 9vw, 132px); opacity: .95;
    animation: putar 58s linear infinite; }
.pembuka .segel { right: var(--tepi); top: clamp(96px, 16vh, 168px); }
@keyframes putar { to { transform: rotate(360deg); } }
@media (max-width: 980px) { .segel { display: none; } }

/* ---------- bagian ---------- */
.bagian { padding-block: var(--renggang); position: relative; }
.bagian--hijau { background: var(--hijau); color: var(--krem); }
.bagian--tua { background: var(--hijau-tua); color: var(--krem); }
.bagian--krem { background: var(--krem-tua); }

.nomor { font-size: 10.5px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
    color: var(--jingga); display: block; margin-bottom: 16px; }

.judul-bagian { font-size: clamp(32px, 4.8vw, 68px); max-width: 17ch; }
/* Di bidang gelap, teks tipis dengan opasitas rendah cepat berubah jadi abu-abu
   yang melelahkan dibaca. Di sana bobotnya dinaikkan ke 400 dan opasitasnya ke
   0.86 — masih lebih redup dari judul, tetapi tetap teks yang nyaman dibaca. */
.antar { max-width: 52ch; margin-top: 20px; font-size: 17px; font-weight: 300;
    color: rgba(38,48,28,.8); }
.bagian--hijau .antar, .bagian--tua .antar {
    color: rgba(249,245,228,.86); font-weight: 400;
}

/* ============================================================================
   IKON BRAND
   ----------------------------------------------------------------------------
   Lembar Supergraphics aslinya pola berulang. Dipasang apa adanya sebagai pita,
   puluhan sosok berjejalan dalam satu bidang setinggi 130px dan tidak satu pun
   sempat dilihat — yang tertangkap mata cuma tekstur ramai. Pita itu dihapus;
   ikonnya dipisah satu per satu dan dipakai sendirian, cukup besar untuk
   benar-benar terbaca.

   Dipasang sebagai mask, bukan <img>, supaya warnanya mengikuti bidang tempat
   ia berdiri: jingga di atas krem, krem di atas hijau. Satu berkas untuk semua.
   ========================================================================== */

.ikon {
    display: inline-block; flex: none; vertical-align: middle;
    height: var(--tinggi, 40px);
    aspect-ratio: var(--rasio-ikon, 1);
    background-color: currentColor;
    -webkit-mask-image: var(--ikon); mask-image: var(--ikon);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}

/* Penanda bagian: satu ikon kecil mendahului nomornya. Ukurannya sengaja
   sedikit di atas tinggi huruf supaya terbaca sebagai gambar, bukan bullet. */
.nomor { display: flex; align-items: center; gap: 13px; }
.nomor .ikon { --tinggi: 30px !important; }
.nomor .ikon { color: var(--jingga); }

/* Pemisah antar bagian, pengganti pita. Satu ikon di tengah dengan garis tipis
   di kiri dan kanannya — jeda, bukan hiasan. */
.pemisah { display: flex; align-items: center; gap: clamp(20px, 4vw, 46px);
    padding-block: clamp(46px, 7vw, 92px); }
.pemisah::before, .pemisah::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(38,48,28,.3), transparent);
}
.bagian--hijau .pemisah::before, .bagian--hijau .pemisah::after,
.bagian--tua .pemisah::before, .bagian--tua .pemisah::after {
    background: linear-gradient(90deg, transparent, rgba(249,245,228,.3), transparent);
}
.pemisah .ikon { color: var(--jingga); animation: apung 7s ease-in-out infinite; }

/* Satu-satunya gerak yang berjalan terus di halaman ini. Amplitudonya kecil
   sekali — cukup untuk membuat halaman terasa hidup, tidak cukup untuk menarik
   mata dari tulisan di sebelahnya. */
@keyframes apung {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

/* Ikon besar yang menumpang di atas foto, menggantung di tepinya supaya
   terbaca sebagai stempel — bukan sebagai bagian dari fotonya. */
.tempel { position: relative; }
.tempel > .ikon {
    position: absolute; z-index: 3;
    filter: drop-shadow(0 6px 26px rgba(38,48,28,.4));
}
/* Ditaruh naik sedikit dari dasar foto, bukan menempel di sudutnya: di sudut
   kiri bawah sudah ada lencana "foto sementara", dan dua benda yang menumpuk
   di titik yang sama membuat keduanya sulit dibaca. */
.tempel--kiri > .ikon { left: clamp(-22px, -1.8vw, -10px); bottom: 19%; }
.tempel--kanan > .ikon { right: clamp(-22px, -1.8vw, -10px); top: 14%; }

/* Cap besar di latar satu bagian. Sangat samar: yang dicari kesan bertekstur,
   bukan gambar kedua yang bersaing dengan judulnya.

   Hanya untuk bagian yang tingginya wajar. Pada bagian setinggi lima ribu
   piksel — misalnya deret enam langkah proses — cap yang dipusatkan vertikal
   mendarat di titik acak jauh dari isinya dan tidak pernah terlihat. */
.bercap { position: relative; overflow: hidden; }
.bercap > .ikon--cap {
    position: absolute; z-index: 0; pointer-events: none;
    right: clamp(-40px, -3vw, -10px); top: 50%; transform: translateY(-50%);
    opacity: .07;
}
.bercap > .wadah { position: relative; z-index: 1; }

/* Cap yang ditengahkan, untuk bidang yang isinya juga di tengah. Di situ cap
   yang menempel ke satu sisi justru menarik tata letaknya jadi miring. */
.bercap--tengah > .ikon--cap {
    left: 50%; right: auto; transform: translate(-50%, -50%);
}

/* Dua sosok berjalan beriringan. Pada lembar aslinya keduanya memang satu
   adegan — dipisah dan dipakai sendiri-sendiri, adegannya hilang. */
.cap-pasangan {
    position: absolute; z-index: 0; pointer-events: none;
    right: clamp(8px, 2.5vw, 44px); top: 50%; transform: translateY(-50%);
    display: flex; align-items: flex-end; gap: clamp(4px, 1vw, 18px);
    opacity: .07;
}
.cap-pasangan .ikon { filter: none; }
@media (max-width: 820px) { .cap-pasangan { opacity: .05; right: -14%; } }
@media (max-width: 820px) {
    .bercap > .ikon--cap { opacity: .05; right: -18%; }
    /* ditulis ulang di sini karena aturan di atasnya menyetel `right` lagi;
       tanpa ini keduanya berlaku sekaligus dan posisinya bergantung arah tulisan */
    .bercap--tengah > .ikon--cap { left: 50%; right: auto; }
}

/* ---------- cerita ---------- */
.cerita { display: grid; grid-template-columns: 1.04fr .96fr; gap: clamp(30px, 5.6vw, 92px);
    align-items: center; }
.cerita--balik { grid-template-columns: .96fr 1.04fr; }
.cerita--balik .cerita__gambar { order: 2; }
.cerita__gambar { margin-left: calc(var(--tepi) * -1); }
.cerita--balik .cerita__gambar { margin-left: 0; margin-right: calc(var(--tepi) * -1); }
@media (max-width: 940px) {
    .cerita, .cerita--balik { grid-template-columns: 1fr; gap: 32px; }
    .cerita--balik .cerita__gambar { order: 0; margin-right: calc(var(--tepi) * -1); }
    .cerita__gambar { margin-inline: calc(var(--tepi) * -1); }
}

/* ---------- perjalanan biji ---------- */
.perjalanan { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    gap: clamp(30px, 5.6vw, 88px); }
.perjalanan__kepala { position: sticky; top: clamp(104px, 19vh, 200px); align-self: start; }
.langkah { padding-block: clamp(38px, 6.5vh, 78px); border-top: 1px solid rgba(249,245,228,.15); }
.langkah:first-child { border-top: none; padding-top: 0; }
.langkah__no { font-size: 11px; font-weight: 700; letter-spacing: .24em; color: var(--jingga); }
.langkah h3 { font-size: clamp(25px, 3.1vw, 40px); margin: 11px 0 13px; }
.langkah p { max-width: 46ch; color: rgba(249,245,228,.86); font-weight: 400; margin: 0 0 24px; }
/* Foto langkah dikunci tingginya, bukan lebarnya. Tanpa ini, gambar 4/5 selebar
   kolom tumbuh sampai 600px dan satu langkah menghabiskan satu layar penuh —
   deretnya kehilangan ritme dan kolom judul di kiri jadi kosong panjang sekali.
   Tingginya yang ditetapkan supaya lebar mengikuti rasio: dengan begitu foto
   potret dan lanskap tetap ditampilkan pada bingkai yang benar, tidak dipotong
   paksa jadi bentuk lain. */
.langkah .foto { display: inline-block; height: min(400px, 56vw); width: auto; max-width: 100%; }
@media (max-width: 940px) {
    .perjalanan { grid-template-columns: 1fr; }
    .perjalanan__kepala { position: static; }
}

/* ---------- petani ---------- */
/* Judul di kiri, wajah petani di kanan. Sebelum ada foto di kolom kanan, ruang
   sebelah judul menganga kosong dan bagian terpenting halaman ini justru
   terlihat paling lemah. */
.petani__kepala { display: grid; grid-template-columns: 1.08fr .92fr;
    gap: clamp(30px, 5vw, 84px); align-items: end; }
@media (max-width: 940px) { .petani__kepala { grid-template-columns: 1fr; } }

.petani { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px);
    margin-top: clamp(48px, 7vw, 88px); }
.petani article { border-top: 2px solid var(--jingga); padding-top: 22px; }
.petani b { font-family: var(--serif); font-size: clamp(30px, 3.6vw, 46px); display: block;
    line-height: 1; margin-bottom: 12px; }
.petani p { margin: 0; font-size: 15.5px; font-weight: 400; color: rgba(249,245,228,.86); }
@media (max-width: 820px) { .petani { grid-template-columns: 1fr; } }

/* ---------- angka ---------- */
.angka { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(38,48,28,.13); }
.angka > div { background: var(--krem); padding: clamp(26px, 3.2vw, 42px) clamp(20px, 2.4vw, 32px); }
.angka b { display: block; font-family: var(--serif); font-size: clamp(36px, 5vw, 68px); line-height: 1; }
.angka span { display: block; margin-top: 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: rgba(38,48,28,.6); }
@media (max-width: 820px) { .angka { grid-template-columns: 1fr 1fr; } }

/* ---------- produk ---------- */
.produk { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 38px); }
.produk article > .foto { margin-bottom: 18px; }
.produk h3 { font-size: 22px; margin-bottom: 6px; }
.produk p { color: rgba(38,48,28,.7); font-size: 15px; font-weight: 300; margin: 0; }
.produk .harga { display: block; margin-top: 12px; font-size: 11.5px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--jingga); }
@media (max-width: 820px) { .produk { grid-template-columns: 1fr; } }
@media (min-width: 821px) { .produk article:nth-child(2) { margin-top: 52px; } }

/* ---------- tiga pintu ---------- */
.pintu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(249,245,228,.14); }
.pintu > a { background: var(--hijau); padding: clamp(28px, 3.4vw, 50px); display: flex;
    flex-direction: column; gap: 13px; min-height: clamp(290px, 32vw, 400px);
    transition: background .6s var(--lembut); }
.pintu > a:hover { background: var(--hijau-tua); }
.pintu h3 { font-size: clamp(23px, 2.4vw, 32px); }
.pintu p { color: rgba(249,245,228,.86); font-size: 15px; font-weight: 400; margin: 0; }
.pintu .lanjut { margin-top: auto; font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--jingga); display: inline-flex; align-items: center; gap: 10px; }
.pintu .lanjut::after { content: ''; width: 24px; height: 1.5px; background: currentColor;
    transition: width .55s var(--lembut); }
.pintu > a:hover .lanjut::after { width: 44px; }
@media (max-width: 940px) { .pintu { grid-template-columns: 1fr; } }

/* ---------- kutipan ---------- */
/* Kutipan berdiri di tengah bidang, bukan di kolom kiri.

   Versi sebelumnya memakai kolom sempit 19ch di kiri dengan cap besar di kanan:
   kalimatnya pecah jadi delapan baris, dan separuh lebar layar terpakai hanya
   untuk menampung satu gambar samar. Ditengahkan dan dilebarkan, kalimat yang
   sama muat dalam empat baris dan bidangnya jauh lebih tenang. */
.kutipan { font-family: var(--serif); font-size: clamp(25px, 3.4vw, 46px); line-height: 1.24;
    max-width: 26ch; margin: 0 auto; font-style: italic; text-align: center; text-wrap: balance; }
.sumber { margin-top: 26px; font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; opacity: .58; text-align: center; }

/* ---------- penutup ---------- */
.penutup { text-align: center; }
.penutup .tulis { margin-bottom: 18px; }
.penutup h2 { margin-inline: auto; }

/* ---------- kaki ---------- */
.kaki { background: var(--hijau-tua); color: rgba(249,245,228,.82); padding-block: clamp(58px, 7.5vw, 100px) 36px; }
.kaki__atas { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: clamp(48px, 6.5vw, 84px); }
.kaki h4 { font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .22em;
    text-transform: uppercase; color: var(--krem); margin: 0 0 16px; }
.kaki ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14.5px; font-weight: 400; }
.kaki a { transition: color .4s var(--lembut); }
.kaki a:hover { color: var(--jingga); }
.kaki__wordmark { font-family: var(--serif); font-size: clamp(56px, 14vw, 200px); line-height: .84;
    color: rgba(249,245,228,.07); }
.kaki__bawah { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
    padding-top: 26px; border-top: 1px solid rgba(249,245,228,.14); font-size: 12px;
    color: rgba(249,245,228,.6); }
@media (max-width: 820px) { .kaki__atas { grid-template-columns: 1fr; } }

/* ---------- foto ---------- */
.foto { position: relative; margin: 0; overflow: hidden; aspect-ratio: var(--rasio, 3/2);
    background: var(--krem-tua); }
.foto img { width: 100%; height: 100%; object-fit: cover; }

.foto--kosong {
    background:
        linear-gradient(135deg, rgba(57,69,45,.1) 0%, rgba(57,69,45,.03) 46%, rgba(57,69,45,.12) 100%),
        repeating-linear-gradient(45deg, transparent 0 13px, rgba(57,69,45,.05) 13px 14px),
        var(--krem-tua);
    display: grid; place-items: center; padding: clamp(22px, 3vw, 42px);
    outline: 1px dashed rgba(57,69,45,.24); outline-offset: -9px;
}
.bagian--hijau .foto--kosong, .bagian--tua .foto--kosong, .pembuka .foto--kosong {
    background:
        linear-gradient(135deg, rgba(249,245,228,.1) 0%, rgba(249,245,228,.03) 46%, rgba(249,245,228,.09) 100%),
        repeating-linear-gradient(45deg, transparent 0 13px, rgba(249,245,228,.05) 13px 14px),
        var(--hijau-tua);
    outline-color: rgba(249,245,228,.24);
}
.foto__isi { max-width: 44ch; }
.foto__tanda { font-size: 9.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
    color: var(--jingga); }
.foto__judul { font-family: var(--serif); font-size: clamp(18px, 2vw, 25px); margin: 10px 0 9px; line-height: 1.15; }
.foto__arahan { font-size: 13px; font-weight: 300; line-height: 1.6; opacity: .74; margin: 0 0 12px; }
.foto__berkas { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 10.5px; opacity: .5; }
.bagian--hijau .foto--kosong *, .bagian--tua .foto--kosong *, .pembuka .foto--kosong * { color: var(--krem); }
.bagian--hijau .foto__tanda, .bagian--tua .foto__tanda, .pembuka .foto__tanda { color: var(--jingga); }

.foto__sementara {
    position: absolute; left: 12px; bottom: 12px; z-index: 2;
    font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    padding: 6px 11px; border-radius: 999px;
    background: rgba(38,48,28,.74); color: rgba(249,245,228,.92);
    backdrop-filter: blur(6px);
}
/* Foto pembuka menjorok 6% ke bawah layar, jadi lencananya ikut terdorong ke
   luar pandangan. Ia justru foto yang paling perlu ditandai — orang yang baru
   membuka halaman harus langsung tahu gambar terbesarnya masih sementara. */
.pembuka .foto__sementara { bottom: calc(6% + 14px); left: var(--tepi); }

/* ---------- gerak ----------
   Dibuat lebih pelan dan lebih jauh dari sebelumnya. Gerak cepat terbaca
   sebagai efek; gerak lambat terbaca sebagai kualitas. */
[data-muncul] { opacity: 0; transform: translateY(30px); }
[data-muncul].tampak {
    opacity: 1; transform: none;
    transition: opacity 1.15s var(--lembut), transform 1.25s var(--lembut);
}
[data-muncul].tampak[data-tunda="1"] { transition-delay: .11s; }
[data-muncul].tampak[data-tunda="2"] { transition-delay: .22s; }
[data-muncul].tampak[data-tunda="3"] { transition-delay: .33s; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    [data-muncul] { opacity: 1; transform: none; }
    [data-parallax] { transform: none !important; }
    .segel, .pemisah .ikon { animation: none; }
}

/* ---------- tombol ---------- */
.tombol { display: inline-flex; align-items: center; gap: 11px; padding: 15px 30px;
    border: 1.5px solid currentColor; border-radius: 999px; font-size: 11.5px; font-weight: 700;
    letter-spacing: .13em; text-transform: uppercase;
    transition: background .5s var(--lembut), color .5s var(--lembut), border-color .5s var(--lembut); }
.tombol:hover { background: var(--jingga); border-color: var(--jingga); color: var(--krem); }
.tombol--isi { background: var(--jingga); border-color: var(--jingga); color: var(--krem); }
.tombol--isi:hover { background: var(--coklat); border-color: var(--coklat); }

/* ============================================================================
   NAVIGASI MOBILE
   ----------------------------------------------------------------------------
   Sebelumnya menu di bawah 980px hanya di-`display:none` — jadi di ponsel
   halaman ini tidak punya navigasi sama sekali. Padahal lebih dari separuh
   pengunjung datang dari Instagram dan WhatsApp, artinya dari ponsel.

   Yang dipakai dua lapis, karena keduanya menjawab hal berbeda:

     Atas   identitas dan penjelajahan — merek di kiri, tombol menu di kanan.
            Isi menunya membuka satu bidang penuh, bukan daftar kecil yang
            menggantung: di layar sempit, target sentuh yang lega jauh lebih
            menentukan daripada hemat ruang.

     Bawah  satu ajakan yang selalu ada. Halaman ini panjang, dan di ponsel
            "gulir kembali ke atas untuk menghubungi" adalah tempat corong
            paling banyak bocor. Baris bawah muncul setelah layar pembuka
            lewat, jadi ia tidak pernah menutupi kesan pertama.
   ========================================================================== */

.nav__tombol {
    display: none;
    width: 44px; height: 44px;               /* 44px: batas nyaman sentuh jempol */
    margin-right: -8px;
    background: none; border: 0; padding: 0;
    color: inherit; cursor: pointer;
}
.nav__tombol span, .nav__tombol span::before, .nav__tombol span::after {
    display: block; width: 22px; height: 1.5px; background: currentColor;
    transition: transform .5s var(--lembut), opacity .3s var(--lembut);
}
.nav__tombol span { margin: 0 auto; position: relative; }
.nav__tombol span::before, .nav__tombol span::after { content: ''; position: absolute; left: 0; }
.nav__tombol span::before { top: -7px; }
.nav__tombol span::after { top: 7px; }

body.menu-terbuka .nav__tombol span { background: transparent; }
body.menu-terbuka .nav__tombol span::before { transform: translateY(7px) rotate(45deg); }
body.menu-terbuka .nav__tombol span::after { transform: translateY(-7px) rotate(-45deg); }

.panel {
    position: fixed; inset: 0; z-index: 95;
    background: var(--hijau);
    display: flex; flex-direction: column; justify-content: center;
    padding: 92px var(--tepi) calc(env(safe-area-inset-bottom) + 32px);
    overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-14px);
    transition: opacity .5s var(--lembut), transform .6s var(--lembut), visibility .5s;
}
body.menu-terbuka .panel { opacity: 1; visibility: visible; transform: none; }

.panel a { display: block; color: var(--krem); }
/* Tombol di dalam panel harus tetap flex: `.panel a { display:block }` di atas
   lebih spesifik daripada `.tombol`, sehingga tanpa baris ini tombolnya berubah
   jadi blok dan tulisannya menempel ke kiri, bukan di tengah. */
.panel .tombol { display: flex; justify-content: center; }
.panel__utama { display: grid; gap: 4px; }
.panel__utama a {
    font-family: var(--serif); font-size: clamp(30px, 8.6vw, 44px); line-height: 1.32;
}
.panel__pisah { height: 1px; background: rgba(249,245,228,.16); margin: 30px 0 24px; }
.panel__ajakan { display: grid; gap: 14px; }
.panel__ajakan .tombol { justify-content: center; }
.panel__kontak { margin-top: 30px; font-size: 14px; color: rgba(249,245,228,.72); }
.panel__kontak a { display: inline; text-decoration: underline; text-underline-offset: 3px; }

/* Baris ajakan bawah — hanya ponsel, hanya setelah layar pembuka lewat. */
.bilah {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: none; gap: 10px;
    padding: 10px var(--tepi) calc(env(safe-area-inset-bottom) + 10px);
    background: rgba(249,245,228,.95);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 -1px 0 rgba(38,48,28,.1);
    transform: translateY(110%);
    transition: transform .6s var(--lembut);
}
.bilah > * { flex: 1; justify-content: center; padding: 14px 12px; font-size: 11px; }
body.bilah-tampak .bilah { transform: none; }
body.menu-terbuka .bilah { transform: translateY(110%); }

@media (max-width: 980px) {
    .nav__tombol { display: grid; place-items: center; }
    .bilah { display: flex; }
    /* ruang supaya baris bawah tidak menutupi baris terakhir kaki halaman */
    .kaki { padding-bottom: 104px; }
}
@media (min-width: 981px) {
    .panel { display: none; }
}

/* ============================================================================
   CORONG — formulir prospek
   ----------------------------------------------------------------------------
   Ditaruh di halaman yang sama, bukan di halaman terpisah. Setiap perpindahan
   halaman antara "tertarik" dan "mengisi" adalah tempat orang berhenti; di
   koneksi ponsel Indonesia, satu muat halaman tambahan bisa berarti beberapa
   detik menatap layar putih.
   ========================================================================== */

.hubungi { background: var(--krem); color: var(--tinta); padding: clamp(26px, 4vw, 52px);
    border: 1px solid rgba(38,48,28,.12); }
.bagian--hijau .hubungi, .bagian--tua .hubungi { border-color: transparent; }

.hubungi__pintu { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(24px, 3vw, 36px); }
.hubungi__tab {
    font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; cursor: pointer;
    padding: 11px 16px; border-radius: 999px;
    border: 1px solid rgba(38,48,28,.2); background: transparent; color: rgba(38,48,28,.72);
    transition: background .4s var(--lembut), color .4s var(--lembut), border-color .4s var(--lembut);
}
.hubungi__tab:hover { border-color: var(--jingga); color: var(--jingga); }
.hubungi__tab--aktif { background: var(--hijau); border-color: var(--hijau); color: var(--krem); }

.hubungi__kepala h3 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 8px; }
.hubungi__kepala p { margin: 0 0 26px; color: rgba(38,48,28,.7); font-size: 15px; font-weight: 300; }

.hubungi__baris { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 720px) { .hubungi__baris { grid-template-columns: 1fr; } }

.hubungi label { display: block; }
.hubungi label > span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: rgba(38,48,28,.62); margin-bottom: 7px; }
.hubungi label > span i { color: var(--jingga); font-style: normal; margin-left: 3px; }

.hubungi input, .hubungi textarea {
    width: 100%; font-family: var(--sans); font-size: 16px;  /* 16px: di bawah ini iOS memperbesar layar sendiri */
    color: var(--tinta); background: rgba(255,255,255,.7);
    border: 1px solid rgba(38,48,28,.2); border-radius: 2px;
    padding: 13px 14px;
    transition: border-color .4s var(--lembut), background .4s var(--lembut);
}
.hubungi input:focus, .hubungi textarea:focus {
    outline: none; border-color: var(--jingga); background: #fff;
}
.hubungi textarea { resize: vertical; line-height: 1.6; }
.hubungi__pesan { margin-bottom: 22px; }

.hubungi em { display: block; margin-top: 7px; font-size: 13px; font-style: normal; color: var(--coklat); }

.hubungi__kaki { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.hubungi__wa { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: rgba(38,48,28,.62); text-decoration: underline; text-underline-offset: 4px; }
.hubungi__wa:hover { color: var(--jingga); }
.hubungi__catatan { margin: 18px 0 0; font-size: 13px; color: rgba(38,48,28,.55); font-weight: 300; }

.hubungi__selesai { text-align: left; }
.hubungi__selesai h3 { font-size: clamp(26px, 3.2vw, 38px); margin: 12px 0 14px; }
.hubungi__selesai p { max-width: 52ch; color: rgba(38,48,28,.75); margin: 0 0 26px; }

.galat { border-left: 3px solid var(--jingga); background: rgba(255,72,16,.07);
    padding: 16px 18px; margin-bottom: 24px; }
.galat b { display: block; font-family: var(--serif); font-size: 18px; margin-bottom: 6px; }
.galat p { margin: 0 0 6px; font-size: 14.5px; }
.galat__saran { color: rgba(38,48,28,.72); }
.galat__jejak { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11px;
    color: rgba(38,48,28,.5); }
/* Varian positif — dipakai konfirmasi pembayaran DP berhasil dibuat, bukan
   kesalahan. Kotaknya sama, hanya warnanya yang menjawab pertanyaan berbeda. */
.galat--aman { border-left-color: var(--hijau); background: rgba(57,69,45,.07); }
.galat--aman a { color: var(--hijau); font-weight: 700; }

.sembunyi { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ============================================================================
   PEMESANAN KUNJUNGAN — Desa Coklat & Cocoa Land
   ----------------------------------------------------------------------------
   Hanya empat hal yang benar-benar baru di sini. Isian, kotak kesalahan, dan
   layar selesai memakai .hubungi dan .galat yang sudah dipakai corong prospek —
   dua kosakata desain dalam satu keluarga merek akan menyimpang diam-diam
   setiap kali salah satunya diperbaiki.
   ========================================================================== */

.wadah--sempit { max-width: 760px; }

/* Penanda langkah. Tiga langkah harus terlihat sejak awal: orang yang tidak tahu
   berapa lama lagi akan berhenti di langkah kedua. */
.langkah-bar { display: flex; flex-wrap: wrap; gap: 10px; list-style: none;
    padding: 0; margin: 0 0 clamp(24px, 3vw, 38px); }
.langkah-bar li {
    font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(38,48,28,.45); padding: 9px 15px; border-radius: 999px;
    border: 1px solid rgba(38,48,28,.16);
}
.langkah-bar li.lewat { color: var(--hijau); border-color: rgba(57,69,45,.4); }
.langkah-bar li.aktif { background: var(--hijau); border-color: var(--hijau); color: var(--krem); }

/* Pilihan jam. Yang penuh tetap ditampilkan tetapi mati, bukan disembunyikan:
   tamu yang tidak melihat jam favoritnya akan mengira kami tidak melayaninya,
   bukan mengira jamnya sudah penuh. */
.slot { display: flex; flex-wrap: wrap; gap: 10px; }
.slot__tombol {
    font-family: var(--sans); cursor: pointer; text-align: left;
    background: rgba(255,255,255,.7); color: var(--tinta);
    border: 1px solid rgba(38,48,28,.2); border-radius: 2px;
    padding: 11px 15px; min-width: 104px;
    transition: border-color .4s var(--lembut), background .4s var(--lembut);
}
.slot__tombol small { display: block; margin-top: 3px; font-size: 11px;
    letter-spacing: .06em; text-transform: uppercase; color: rgba(38,48,28,.55); }
.slot__tombol:hover:not(.penuh) { border-color: var(--jingga); }
.slot__tombol.aktif { background: var(--hijau); border-color: var(--hijau); color: var(--krem); }
.slot__tombol.aktif small { color: rgba(249,245,228,.75); }
.slot__tombol.penuh { opacity: .45; cursor: not-allowed; }

/* Pilihan metode pengambilan pre-order Caulicious — pemesan yang memilih
   sendiri, bukan staf (lihat App\Enums\MetodeAmbilPreorder). */
.metode-ambil { display: flex; flex-wrap: wrap; gap: 10px; }
.metode-ambil__pilihan {
    display: flex; align-items: center; gap: 9px; cursor: pointer;
    background: rgba(255,255,255,.7); color: var(--tinta);
    border: 1px solid rgba(38,48,28,.2); border-radius: 2px;
    padding: 11px 15px; flex: 1 1 220px;
    transition: border-color .4s var(--lembut), background .4s var(--lembut);
}
.metode-ambil__pilihan:hover { border-color: var(--jingga); }
.metode-ambil__pilihan.aktif { background: var(--hijau); border-color: var(--hijau); color: var(--krem); }
.metode-ambil__pilihan input { width: auto; accent-color: var(--jingga); }
.metode-ambil__pilihan span { font-size: 14px; }

/* Pengatur jumlah pada katalog pre-order Caulicious.

   Tombol +/− dipakai, bukan kolom angka: pemesan menaikkan satu-satu sambil
   melihat totalnya berubah, dan kolom angka yang bisa diketik mengundang
   "200" masuk tanpa disadari — kuota dapur enam pesanan per hari tidak
   membedakan pesanan enam pcs dari pesanan dua ratus pcs, jadi angka yang
   salah ketik baru ketahuan di dapur. */
.keranjang__baris { align-items: center; }
.keranjang__atur { display: inline-flex; align-items: center; gap: 10px; }
.keranjang__tombol {
    min-width: 42px; text-align: center; font-size: 17px; font-weight: 700;
    line-height: 1; padding: 11px 0;
}
.keranjang__tombol:disabled { opacity: .35; cursor: not-allowed; }
.keranjang__jumlah {
    min-width: 2.2ch; text-align: center;
    font-variant-numeric: tabular-nums; font-size: 17px;
}

/* ---------- belanja + keranjang sticky (pre-order Caulicious) ----------
   Dua kolom di desktop: katalog di kiri bisa di-scroll bebas — seluruh
   produk yang dikurasi terlihat sekaligus, bukan didorong ke satu produk —
   keranjang tetap terlihat di kanan (position: sticky) di langkah mana pun,
   bukan cuma saat memilih produk. Di layar sempit .keranjang-panel yang
   sama berubah jadi bar tetap di bawah layar (position: fixed) yang bisa
   di-expand jadi drawer, meniru pola "View Cart & Checkout" — bukan
   markup terpisah, satu elemen dua wujud lewat media query. */
.belanja { display: grid; grid-template-columns: 1fr 320px; gap: clamp(20px, 2.6vw, 40px);
    align-items: start; }
.belanja__utama .hubungi { padding: clamp(20px, 3vw, 40px); }

/* Grid kartu belanja — bukan lagi daftar baris tipis. Foto besar di atas
   tiap kartu adalah yang paling menjual di sini (keputusan klien 31 Agt
   2026: "aesthetic seperti bakedbygeulis, yang tanpa background") — kartu
   sempit dengan thumbnail 84px membuat foto sebagus apa pun terlihat kecil
   dan tenggelam di antara teks. */
.produk-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: clamp(16px, 2vw, 26px);
}
.produk-belanja {
    display: flex; flex-direction: column; background: #fff;
    border: 1px solid rgba(38,48,28,.1); border-radius: 3px; overflow: hidden;
    transition: box-shadow .18s ease, transform .18s ease;
}
.produk-belanja:hover { box-shadow: 0 10px 26px rgba(38,48,28,.14); transform: translateY(-2px); }

/* Vitrin di halaman depan pakai kartu yang sama sebagai <a>, bukan <article>
   berisi tombol tambah — satu klik langsung mengantar ke /pre-order, tidak
   ada state keranjang di halaman ini (keputusan klien 31 Agt 2026). */
.produk-vitrin .produk-belanja { text-decoration: none; color: inherit; }
.produk-vitrin .produk-belanja__isi { padding-bottom: 16px; }
.produk-vitrin .harga { display: block; margin-top: 4px; }
.produk-belanja .foto, .produk-belanja .foto--kosong { border-radius: 0; margin: 0; }
.produk-belanja__isi { padding: 14px 16px 0; flex: 1; }
.produk-belanja__isi h4 { font-size: 15.5px; margin: 0 0 5px; line-height: 1.25; }
.produk-belanja__isi p { margin: 0 0 8px; font-size: 13px; font-weight: 300; line-height: 1.5;
    color: rgba(38,48,28,.65); }
.produk-belanja__isi .harga { font-size: 12.5px; font-weight: 700; color: var(--coklat); }
.produk-belanja__atur { display: flex; width: 100%; justify-content: space-between; padding: 12px 16px 16px; }

.keranjang-panel {
    background: var(--krem); border: 1px solid rgba(38,48,28,.12);
    padding: 22px; position: sticky; top: calc(var(--tepi) + 88px);
}
.keranjang-panel__ringkas { display: none; } /* bar mobile — lihat media query di bawah */
.keranjang-panel__kepala { display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 14px; }
.keranjang-panel__tutup { display: none; } /* tak ada apa pun untuk ditutup di desktop */
.keranjang-panel__daftar { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.keranjang-panel__daftar li { display: flex; justify-content: space-between; gap: 10px;
    font-size: 13.5px; }
.keranjang-panel__daftar li i { font-style: normal; color: rgba(38,48,28,.55); }
.keranjang-panel__total { display: flex; justify-content: space-between; align-items: baseline;
    padding-top: 14px; border-top: 1px solid rgba(38,48,28,.15); margin-bottom: 16px; }
.keranjang-panel__total span { font-size: 12px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: rgba(38,48,28,.6); }
.keranjang-panel__total b { font-size: 19px; }

@media (max-width: 900px) {
    .belanja { grid-template-columns: 1fr; }

    /* Kartu sticky jadi bar tetap di bawah layar: ringkasnya (jumlah +
       total) selalu terlihat, detailnya (daftar barang + tautan kembali)
       tersembunyi sampai bar-nya disentuh — supaya tidak menutupi separuh
       layar ponsel dengan daftar penuh sepanjang waktu. */
    .keranjang-panel {
        position: fixed; inset: auto 0 0 0; top: auto; z-index: 90;
        padding: 0; border-inline: 0; border-bottom: 0;
        box-shadow: 0 -6px 24px rgba(38,48,28,.18);
        max-height: 78vh; display: flex; flex-direction: column;
    }
    .keranjang-panel__ringkas {
        display: flex; align-items: center; gap: 10px; width: 100%;
        padding: 16px var(--tepi); background: var(--hijau); color: var(--krem);
        font-family: var(--sans); border: 0; cursor: pointer; text-align: left;
    }
    .keranjang-panel__ringkas b { margin-left: auto; font-size: 16px; }
    .keranjang-panel__lihat { font-size: 11px; font-weight: 700; letter-spacing: .08em;
        text-transform: uppercase; opacity: .85; }
    .keranjang-panel--terbuka .keranjang-panel__ringkas { display: none; }

    .keranjang-panel__detail {
        display: none; overflow-y: auto; padding: 20px var(--tepi) 26px;
    }
    .keranjang-panel--terbuka .keranjang-panel__detail { display: block; }
    .keranjang-panel--terbuka .keranjang-panel__tutup {
        display: block; background: none; border: 0; font-size: 26px; line-height: 1;
        color: var(--tinta); cursor: pointer;
    }

    .produk-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
    /* Ruang di bawah supaya konten terakhir tidak tertutup bar keranjang. */
    .belanja__utama { padding-bottom: 84px; }
}

/* Kode e-tiket. Dibuat besar dan berjarak karena ia dibacakan lewat telepon
   ketika QR tamu tidak bisa dipindai — dan satu huruf salah berarti tamu
   ditolak masuk. */
.tiket__kode {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: clamp(19px, 3.4vw, 30px); letter-spacing: .12em; font-weight: 700;
    color: var(--coklat); background: #fff; border: 2px solid var(--jingga);
    padding: 16px 18px; margin: 22px 0; text-align: center; word-break: break-all;
}
.tiket__rincian { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 26px; margin: 0 0 26px; }
@media (max-width: 620px) { .tiket__rincian { grid-template-columns: 1fr; } }
.tiket__rincian dt { font-size: 11px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: rgba(38,48,28,.55); margin-bottom: 3px; }
.tiket__rincian dd { margin: 0; font-size: 15.5px; }

/* ---------- penyesuaian ponsel untuk bagian yang sudah ada ---------- */
@media (max-width: 720px) {
    /* Judul pembuka 8.6vw terlalu besar di layar sempit: "Paradise." pecah
       menjadi dua baris dan tagline tulis tangan terdorong keluar layar. */
    .pembuka h1 { font-size: clamp(40px, 12vw, 60px); }
    .pembuka { padding-bottom: 40px; align-items: flex-end; }
    .segel { display: none; }

    .angka > div { padding: 22px 18px; }
    .langkah .foto { height: auto; width: 100%; }
    .cerita__gambar, .cerita--balik .cerita__gambar { margin-inline: calc(var(--tepi) * -1); }
    .produk article:nth-child(2) { margin-top: 0; }
    .kutipan { max-width: none; }
    .hubungi__tab { flex: 1 1 calc(50% - 4px); }
}

/* Ajakan di layar pembuka. Dua tombol berdampingan; di ponsel keduanya melebar
   penuh supaya jempol tidak perlu membidik. */
.pembuka__ajakan { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }
.pembuka__ajakan .tombol { color: var(--krem); }
.pembuka__ajakan .tombol--isi { color: var(--krem); }
@media (max-width: 560px) {
    .pembuka__ajakan { flex-direction: column; align-items: stretch; }
    .pembuka__ajakan .tombol { justify-content: center; }
}

/* ---------- perbaikan luber mendatar di layar sempit ----------
   .pembuka adalah flex container, dan flex item bawaannya punya
   min-width: auto — artinya ia MELEBAR mengikuti isi terlebar di dalamnya,
   bukan menyusut mengikuti layar. Isi terlebarnya adalah label pembuka yang
   berjarak huruf lebar dan tidak bisa dipatahkan, sehingga di layar 390px
   seluruh kolom ikut melebar sampai sekitar 460px lalu terpotong
   overflow-x: hidden. Yang terlihat: paragraf terpotong di tengah kata dan
   tombol menu terdorong keluar layar.

   min-width: 0 mengembalikan penyusutan itu; label pembukanya sendiri
   diizinkan patah ke baris berikutnya. */
.wadah { min-width: 0; max-width: 100%; }
.mata { flex-wrap: wrap; max-width: 100%; }

@media (max-width: 560px) {
    .mata { font-size: 9.5px; letter-spacing: .16em; gap: 10px; row-gap: 4px; line-height: 1.5; }
    .mata::before { width: 22px; }
}

/* ============================================================================
   HALAMAN KANAL — HORECA · WHITELABEL · EXPORT
   ----------------------------------------------------------------------------
   Tiga halaman ini berbagi kerangka yang sama karena calon pembelinya membaca
   dengan cara yang sama: apa yang dijual, bagaimana kerjasamanya, berapa
   angkanya, lalu formulir. Yang berbeda hanya isi dan bahasanya.
   ========================================================================== */

/* Pembuka halaman dalam — lebih pendek dari halaman utama. Pengunjung di sini
   datang untuk satu urusan tertentu; foto selayar penuh hanya menunda. */
.kepala { position: relative; min-height: clamp(440px, 74svh, 660px);
    display: flex; align-items: flex-end;
    padding-top: clamp(92px, 14vh, 140px);
    padding-bottom: clamp(44px, 7vh, 84px);
    overflow: hidden; background: var(--hijau); }
.kepala__latar { position: absolute; inset: -5% 0; z-index: 0; }
.kepala__latar .foto { height: 100%; width: 100%; }
.kepala__latar .foto img { height: 100%; width: 100%; object-fit: cover; }
.kepala::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(180deg, rgba(38,48,28,.66) 0%, rgba(38,48,28,.3) 34%, rgba(38,48,28,.94) 100%),
        linear-gradient(90deg, rgba(38,48,28,.6) 0%, rgba(38,48,28,.18) 56%, transparent 78%);
}
/* Di layar sempit isi pembuka memenuhi seluruh bidangnya, bukan berkumpul di
   sepertiga bawah seperti di layar lebar. Selubung yang hanya pekat di bawah
   karena itu meleset: pita paling terangnya justru mendarat tepat di judul.
   Di bawah 820px selubungnya dibuat rata pekat dari atas ke bawah. */
@media (max-width: 820px) {
    .kepala::after {
        background: linear-gradient(180deg,
            rgba(38,48,28,.72) 0%,
            rgba(38,48,28,.6) 26%,
            rgba(38,48,28,.74) 58%,
            rgba(38,48,28,.92) 100%);
    }
}

.kepala__isi { position: relative; z-index: 2; color: var(--krem); }
.kepala h1 { font-size: clamp(38px, 5.6vw, 76px); line-height: 1; max-width: 17ch; margin-bottom: 20px; }
.kepala__lead { max-width: 56ch; font-size: clamp(15.5px, 1.05vw, 18px);
    color: rgba(249,245,228,.9); text-shadow: 0 1px 18px rgba(38,48,28,.6); }
.kepala__ajakan { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.kepala__ajakan .tombol { color: var(--krem); }
@media (max-width: 560px) {
    .kepala__ajakan { flex-direction: column; align-items: stretch; }
    .kepala__ajakan .tombol { justify-content: center; }
}

/* Janji singkat di bawah pembuka: empat hal yang paling sering ditanya sebelum
   orang mau membaca lebih jauh. */
.janji { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: rgba(249,245,228,.16); }
.janji > div { background: var(--hijau-tua); color: var(--krem); padding: 22px clamp(16px, 2vw, 28px);
    font-size: 14px; font-weight: 400; display: flex; align-items: flex-start; gap: 10px; }
.janji > div::before { content: ''; flex: none; width: 7px; height: 7px; margin-top: 8px;
    background: var(--jingga); border-radius: 50%; }
@media (max-width: 900px) { .janji { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .janji { grid-template-columns: 1fr; } }

/* ---------- kartu produk dengan spesifikasi ---------- */
.sku { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(18px, 2.4vw, 32px); }
.sku article { background: var(--krem); border: 1px solid rgba(38,48,28,.12); display: flex;
    flex-direction: column; }
.bagian--hijau .sku article, .bagian--tua .sku article { border-color: transparent; }
.sku .foto { border-bottom: 1px solid rgba(38,48,28,.1); }
.sku__isi { padding: clamp(18px, 2.2vw, 26px); display: flex; flex-direction: column; flex: 1; }
.sku__lencana { align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--jingga); margin-bottom: 12px; }
.sku h3 { font-size: 21px; margin-bottom: 8px; }
.sku p { margin: 0 0 18px; font-size: 14.5px; color: rgba(38,48,28,.75); }
.sku dl { margin: auto 0 0; display: grid; gap: 1px; background: rgba(38,48,28,.1);
    border-top: 1px solid rgba(38,48,28,.1); }
.sku dl > div { background: var(--krem); display: flex; justify-content: space-between; gap: 12px;
    padding: 9px 0; font-size: 13px; }
.sku dt { color: rgba(38,48,28,.6); }
.sku dd { margin: 0; font-weight: 700; text-align: right; }

/* ---------- kartu skema / program ---------- */
.skema { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px;
    background: rgba(249,245,228,.16); }
.skema article { background: var(--hijau); color: var(--krem); padding: clamp(26px, 3.2vw, 42px);
    display: flex; flex-direction: column; }
.bagian--krem .skema { background: rgba(38,48,28,.12); }
.bagian--krem .skema article { background: var(--krem); color: var(--tinta); }
.skema__lapis { font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    color: var(--jingga); margin-bottom: 14px; }
.skema h3 { font-size: clamp(23px, 2.4vw, 30px); margin-bottom: 12px; }
.skema > article > p { margin: 0 0 22px; font-size: 15px; color: rgba(249,245,228,.86); }
.bagian--krem .skema > article > p { color: rgba(38,48,28,.78); }
.skema ul { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 11px; font-size: 14px; }
.skema li { display: flex; gap: 11px; align-items: flex-start; color: rgba(249,245,228,.8); }
.bagian--krem .skema li { color: rgba(38,48,28,.76); }
.skema li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 8px;
    background: var(--jingga); border-radius: 50%; }

/* ---------- alur bernomor ---------- */
.alur { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: clamp(20px, 2.6vw, 40px); }
.alur article { border-top: 2px solid var(--jingga); padding-top: 18px; }
.alur b { display: block; font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--jingga);
    margin-bottom: 12px; }
.alur h3 { font-size: 18px; margin-bottom: 8px; }
.alur p { margin: 0; font-size: 14px; color: rgba(38,48,28,.75); }
.bagian--hijau .alur p, .bagian--tua .alur p { color: rgba(249,245,228,.82); }

/* ---------- tabel tingkat harga ----------
   Di ponsel tabel lebar TIDAK diperkecil sampai tak terbaca; ia digulir
   mendatar di dalam wadahnya sendiri. Memaksa lima kolom masuk ke layar 390px
   berarti angkanya jadi 9px dan tidak ada yang membacanya. */
.tabel-bungkus { overflow-x: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(38,48,28,.14); background: var(--krem); }
.bagian--hijau .tabel-bungkus, .bagian--tua .tabel-bungkus {
    border-color: rgba(249,245,228,.2); background: transparent; }
.tabel { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 14px; }
.tabel th, .tabel td { text-align: left; padding: 15px 18px; vertical-align: top;
    border-bottom: 1px solid rgba(38,48,28,.1); }
.bagian--hijau .tabel th, .bagian--hijau .tabel td,
.bagian--tua .tabel th, .bagian--tua .tabel td { border-color: rgba(249,245,228,.14); }
.tabel th { font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(38,48,28,.6); white-space: nowrap; }
.bagian--hijau .tabel th, .bagian--tua .tabel th { color: rgba(249,245,228,.6); }
.tabel td:first-child { font-family: var(--serif); font-size: 17px; white-space: nowrap; }
.tabel tr:last-child td { border-bottom: 0; }
.tabel__catatan { margin: 18px 0 0; font-size: 14px; color: rgba(38,48,28,.65); max-width: 76ch; }
.bagian--hijau .tabel__catatan, .bagian--tua .tabel__catatan { color: rgba(249,245,228,.7); }

/* ---------- bab bercerita (halaman export) ---------- */
.bab { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 72px);
    align-items: center; padding-block: clamp(38px, 5vw, 70px);
    border-top: 1px solid rgba(249,245,228,.14); }
.bab:first-child { border-top: 0; padding-top: 0; }
.bab--balik > .bab__gambar { order: 2; }
.bab__no { font-size: 10.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
    color: var(--jingga); }
.bab h3 { font-size: clamp(26px, 3.2vw, 42px); margin: 12px 0 14px; }
.bab p { margin: 0; max-width: 52ch; color: rgba(249,245,228,.86); }
@media (max-width: 900px) {
    .bab, .bab--balik { grid-template-columns: 1fr; }
    .bab--balik > .bab__gambar { order: 0; }
}

/* ---------- portofolio ---------- */
.portofolio { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(20px, 2.6vw, 36px); }
.portofolio article > .foto { margin-bottom: 18px; }
.portofolio__label { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--jingga); }
.portofolio h3 { font-size: 21px; margin: 10px 0 8px; }
.portofolio p { margin: 0 0 16px; font-size: 14.5px; color: rgba(38,48,28,.75); }
.tanda { display: flex; flex-wrap: wrap; gap: 7px; }
.tanda span { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    padding: 6px 12px; border: 1px solid rgba(38,48,28,.2); border-radius: 999px;
    color: rgba(38,48,28,.7); }

/* ---------- daftar mitra ---------- */
.mitra { display: flex; flex-wrap: wrap; gap: 10px; }
.mitra span { font-family: var(--serif); font-size: clamp(17px, 1.8vw, 23px);
    padding: 12px 22px; border: 1px solid rgba(38,48,28,.18); }
.bagian--hijau .mitra span, .bagian--tua .mitra span { border-color: rgba(249,245,228,.24); }

/* ---------- FAQ ----------
   Memakai <details> asli, bukan tiruan berbasis JavaScript: isinya tetap ada
   di halaman untuk mesin pencari dan pembaca layar, dan tetap bisa dibuka
   ketika JavaScript gagal dimuat. */
.faq { border-top: 1px solid rgba(38,48,28,.14); }
.bagian--hijau .faq, .bagian--tua .faq { border-color: rgba(249,245,228,.16); }
.faq details { border-bottom: 1px solid rgba(38,48,28,.14); }
.bagian--hijau .faq details, .bagian--tua .faq details { border-color: rgba(249,245,228,.16); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
    font-family: var(--serif); font-size: clamp(18px, 1.9vw, 23px); line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: ''; position: absolute; right: 8px; top: 50%; width: 13px; height: 13px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-70%) rotate(45deg); transition: transform .45s var(--lembut);
    opacity: .55;
}
.faq details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.faq details > p { margin: 0 0 24px; max-width: 74ch; font-size: 15px; color: rgba(38,48,28,.75); }
.bagian--hijau .faq details > p, .bagian--tua .faq details > p { color: rgba(249,245,228,.82); }
.faq a { color: var(--jingga); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- ajakan ke katalog Desty ---------- */
.katalog { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 24px; padding: clamp(26px, 3.4vw, 46px);
    background: var(--hijau-tua); color: var(--krem); }
.katalog h3 { font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 10px; max-width: 22ch; }
.katalog p { margin: 0; max-width: 58ch; color: rgba(249,245,228,.8); font-size: 15px; }
.katalog .tombol { color: var(--krem); flex: none; }

/* Tombol toko di menu — dibedakan karena ia satu-satunya tautan yang membawa
   pengunjung keluar dari situs ini. */
.nav__toko { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px;
    border: 1.5px solid currentColor; border-radius: 999px; }
.nav__toko::after { content: '↗'; font-size: 11px; opacity: .7; }