/* DAFTAR ISI: 1 Tema, 2 Reset, 3 Kontainer/tipografi, 4 Tombol,
   5 Header, 6 Hero, 7 Bahan, 8 FAQ, 9 Kontak/footer, 10 Breakpoint, 11 Gerak. */
/* 1. TEMA: Edit variabel untuk mengganti tampilan secara konsisten. Font lokal tidak membutuhkan koneksi. */
:root{--bg:#faf9f6;--alt:#f0ede4;--olive:#747e4c;--dark:#303820;--text:#60634d;--gold:#b5a474;--line:#e4e3da;--button:#596337;--container-max:1200px;--gutter:clamp(1.25rem,4vw,3rem);--section-gap:clamp(3.5rem,7vw,6rem);--radius:16px;--serif:Georgia,'Times New Roman',serif;--sans:Arial,Helvetica,sans-serif}
/* 2. RESET: border-box mengikutsertakan padding dalam lebar; gambar tidak melewati induk. */
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:1rem/1.75 var(--sans);overflow-wrap:anywhere}img{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:none}button{font:inherit}figure,p{margin:0}h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--dark);line-height:1.12;margin:0}h1{font-size:clamp(2.3rem,4.1vw,3.9rem);letter-spacing:-.045em}h2{font-size:clamp(2rem,3.2vw,3rem);letter-spacing:-.035em}h3{font-size:1.8rem}button,a,summary{-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}
/* 3. KONTEN: Batas lebar mencegah pembesaran terus-menerus. Anchor memperhitungkan header sticky. */
.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter)}section{scroll-margin-top:8rem}.section-space{padding-block:var(--section-gap)}.eyebrow{text-transform:uppercase;letter-spacing:.19em;font-size:.7rem;font-weight:700;color:var(--button);margin-bottom:1.2rem}.fine-print,.section-note{font-size:.8rem;line-height:1.7}.skip-link{position:fixed;top:1rem;left:1rem;z-index:20;background:white;padding:1rem;transform:translateY(-200%)}.skip-link:focus{transform:translateY(0)}:focus-visible{outline:3px solid #93651d;outline-offset:5px}
/* 4. TOMBOL: Kontras teks putih dipertahankan memakai hijau lebih gelap; area sentuh >=44px. */
.button{display:inline-flex;align-items:center;justify-content:center;gap:1.4rem;min-height:48px;padding:.85rem 1.4rem;background:var(--button);color:#fff;border:1px solid transparent;border-radius:5px;font-size:.85rem;font-weight:700;line-height:1.5;transition:background .2s}.button:hover{background:var(--dark)}.button-small{padding:.65rem 1rem}.button span{font-size:1.2rem}
/* 5. HEADER: z-index 10 menjaga panel berada di atas konten. Menu dasar terbuka sebagai fallback tanpa JS. */
.site-header{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line)}.header-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding-block:1rem;min-height:86px}.brand{display:inline-flex;align-items:center;gap:.55rem;color:var(--dark);font:1.35rem/1.2 var(--serif);min-height:44px}.brand em{display:block;font-style:normal}.brand-mark{font-size:2.4rem;color:var(--olive)}.site-nav{display:flex;flex-direction:column;width:100%;gap:.35rem}.site-nav>a:not(.button){display:flex;align-items:center;min-height:44px;font-size:.85rem}.site-nav>a:hover{color:var(--olive)}.site-nav>.button:hover{color:white}.menu-toggle{min-width:44px;min-height:44px;background:none;border:1px solid var(--line);border-radius:5px;color:var(--dark);cursor:pointer;font-size:1.3rem}.social-links{display:flex;gap:.15rem}.social-links a{display:grid;place-items:center;width:44px;height:44px}.social-links svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7}
/* 6. HERO: Mobile satu kolom. Ornamen di lapisan bawah dengan pointer-events none. */
.hero{position:relative;padding-block:clamp(1.75rem,5vw,4rem) clamp(3rem,6vw,5rem)}.hero-grid{display:grid;gap:2rem;align-items:center;position:relative;z-index:1}.hero-grid>*{min-width:0}.hero-visual{max-width:430px;width:100%;margin-inline:auto}.hero-visual img{width:100%}.hero-visual figcaption{text-align:center;font-size:.65rem;color:var(--text);margin-top:.25rem}.hero-copy{max-width:590px}.leaf-mark{display:block;font:3rem/1 var(--serif);color:var(--olive);margin-bottom:1rem}.hero-description{margin-block:1.6rem 1.8rem;max-width:48ch}.hero-copy .fine-print{max-width:49ch;margin-top:1.2rem}.hero-decoration{position:absolute;right:0;bottom:0;max-width:45%;height:240px;overflow:clip;font:20rem/1 var(--serif);color:var(--olive);opacity:.08;pointer-events:none}
/* 7. BAHAN: Kartu sama tinggi karena Grid; gambar memakai latar lokal yang disertakan. */
.ingredients{background:var(--alt)}.section-heading{text-align:center;max-width:680px;margin:0 auto 2.5rem}.section-heading>p:last-child{margin-top:1.2rem}.ingredient-grid{display:grid;gap:1.5rem}.ingredient-card{min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 24px #30382006;overflow:clip}.ingredient-image{position:relative;background:#e9e6da}.ingredient-image img{width:100%;aspect-ratio:8/5;object-fit:contain}.ingredient-image>span{position:absolute;left:1.3rem;top:1rem;font-size:.6rem;letter-spacing:.16em;color:var(--dark)}.card-copy{padding:1.7rem}.card-copy p{margin-top:1rem;font-size:.9rem}.ingredient-note{display:block;border-top:1px solid var(--line);margin-top:1.5rem;padding-top:.8rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--button)}.section-note{max-width:800px;margin:1.7rem auto 0;text-align:center}
/* 8. FAQ: Indicateur +/− murni CSS; details tetap berfungsi ketika script tidak aktif. */
.faq-grid{display:grid;gap:2rem}.faq-grid>div{min-width:0}.faq-grid h2{max-width:440px}.faq-grid>div>p:not(.eyebrow){margin-top:1.2rem}.faq-grid .leaf-mark{margin-top:1.5rem}.faq-list{border-top:1px solid var(--line)}details{border-bottom:1px solid var(--line)}summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:72px;padding:1.2rem 0;list-style:none;cursor:pointer;font-size:.95rem;color:var(--dark)}summary::-webkit-details-marker{display:none}summary::after{content:'+';font-size:1.6rem;flex-shrink:0;color:var(--olive)}details[open] summary::after{content:'−'}details p{padding:0 1.5rem 1.5rem 0;font-size:.9rem}
/* 9. KONTAK/FOOTER: Kontak memakai latar gelap dan teks terang; status kosong bukan tombol palsu. */
.contact-section{padding-top:0}.contact-panel{text-align:center;background:var(--dark);border-radius:var(--radius);padding:clamp(2rem,5vw,4rem) var(--gutter);color:#e1e4d5}.contact-panel .eyebrow{color:#d4daba}.contact-panel h2{color:var(--bg);max-width:650px;margin:auto}.contact-panel>p:not(.eyebrow){max-width:570px;margin:1.3rem auto}.button-light{background:#e9eddb;color:var(--dark);margin-top:.7rem}.button-light:hover{background:white}.contact-status{display:inline-block;border:1px solid #7f886a;border-radius:5px;padding:.65rem 1.1rem;font-size:.85rem}.site-footer{padding-block:2.5rem 1.5rem;border-top:1px solid var(--line)}.footer-top,.footer-bottom{display:flex;flex-direction:column;gap:1rem}.footer-top{padding-bottom:2rem}.footer-top>p{font-size:.85rem}.footer-bottom{padding-top:1.3rem;border-top:1px solid var(--line);font-size:.72rem}
/* 10. TABLET: Dua kartu saat ruang cukup; kartu terakhir tetap mengikuti urutan dokumen. */
@media(min-width:640px){.ingredient-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-visual{max-width:450px}.footer-top,.footer-bottom{flex-direction:row;align-items:center;justify-content:space-between}}
/* DESKTOP: 48:52 dari ruang sisa setelah gap. Header dibungkus jika ukuran teks membesar. */
@media(min-width:960px){.header-inner{flex-wrap:wrap}.site-nav{flex-direction:row;width:auto;align-items:center;gap:clamp(.8rem,2vw,1.8rem);flex-wrap:wrap}.hero-grid{grid-template-columns:minmax(0,48fr) minmax(0,52fr);gap:clamp(2rem,4vw,4rem)}.hero-visual{max-width:100%}.ingredient-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.faq-grid{grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:5rem}}
/* 11. REDUCED MOTION: Mematikan smooth scrolling dan transisi bagi pengguna yang memintanya. */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}