{"id":8881,"date":"2026-08-04T16:41:42","date_gmt":"2026-08-04T09:41:42","guid":{"rendered":"https:\/\/bingxueindonesia.co.id\/?page_id=8881"},"modified":"2026-08-07T13:54:31","modified_gmt":"2026-08-07T06:54:31","slug":"new-menu","status":"publish","type":"page","link":"https:\/\/bingxueindonesia.co.id\/en\/new-menu\/","title":{"rendered":"New Menu"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nBingxue Indonesia \u2014 Menu<\/title>\r\n<style>\r\n\/* =========================================================\r\n BINGXUE \u2014 PAGE \"MENU\" \/ TENTANG PRODUK (mengikuti style Sejarah-Brand.html)\r\n ---------------------------------------------------------\r\n CARA PAKAI DI WORDPRESS \/ ELEMENTOR:\r\n 1. Buat page baru \"Menu\" di WordPress (di dropdown menu\r\n \"Tentang Produk\").\r\n 2. Tambahkan widget \"HTML\" (Elementor).\r\n 3. Copy SELURUH isi file ini (dari <div id=\"bingxue-home\">\r\n sampai penutup <\/script> di paling bawah) ke widget itu.\r\n 4. Header & footer di file ini SAMA PERSIS kayak di\r\n Sejarah-Brand.html \/ Tentang-Kami.html \/ homepage.\r\n Kalau menu\/logo berubah, terapkan perubahan yang sama\r\n di semua file (masih file terpisah-pisah).\r\n 5. Semua foto (foto perwakilan kategori & foto produk) masih\r\n placeholder \u2014 ditandai \"GANTI DI SINI\" di bagian data\r\n JavaScript paling bawah (cari komentar \"DATA MENU\").\r\n Nama & deskripsi produk juga masih contoh sementara.\r\n ========================================================= *\/\r\n\r\n@import url('https:\/\/api.fontshare.com\/v2\/css?f[]=satoshi@300,400,500,700,900&display=swap');\r\n\r\n\/* scroll-behavior native dilepas \u2014 smooth\/inertia scroll sekarang ditangani Lenis (lihat script di bagian bawah) *\/\r\n\r\n#bingxue-home, #bingxue-home * {\r\n box-sizing: border-box;\r\n}\r\n\r\n#bingxue-home {\r\n --bx-orange: #F0832C;\r\n --bx-orange-dark: #D66F1E;\r\n --bx-ink: #1A1A18;\r\n --bx-ink-soft: #4A4844;\r\n --bx-cream: #F6F3EE;\r\n --bx-white: #FFFFFF;\r\n --bx-line: #E4E0D8;\r\n --bx-maxw: 1240px;\r\n --bx-gutter: 48px;\r\n\r\n font-family: 'Satoshi', sans-serif;\r\n color: var(--bx-ink);\r\n background: var(--bx-white);\r\n line-height: 1.5;\r\n overflow-x: clip;\r\n overflow-y: visible;\r\n position: relative;\r\n}\r\n\r\n#bingxue-home img { max-width: 100%; display: block; }\r\n#bingxue-home a { text-decoration: none; color: inherit; }\r\n#bingxue-home button { font-family: inherit; cursor: pointer; border: none; background: none; }\r\n#bingxue-home ul { list-style: none; margin: 0; padding: 0; }\r\n#bingxue-home h1, #bingxue-home h2, #bingxue-home h3, #bingxue-home p { margin: 0; }\r\n\r\n#bingxue-home .bx-container {\r\n max-width: var(--bx-maxw);\r\n margin: 0 auto;\r\n padding: 0 var(--bx-gutter);\r\n}\r\n#bingxue-home .bx-reveal {\r\n opacity: 0;\r\n transform: translateY(28px);\r\n transition: opacity 0.8s ease, transform 0.8s ease;\r\n}\r\n#bingxue-home .bx-reveal.is-visible { opacity: 1; transform: translateY(0); }\r\n@media (prefers-reduced-motion: reduce) {\r\n #bingxue-home .bx-reveal { transition: none; opacity: 1; transform: none; }\r\n #bingxue-home html { scroll-behavior: auto; }\r\n}\r\n#bingxue-home .bx-h2 {\r\n font-size: clamp(28px, 3.2vw, 56px);\r\n font-weight: 900;\r\n letter-spacing: 0.01em;\r\n line-height: 1.15;\r\n color: var(--bx-ink);\r\n}\r\n#bingxue-home .bx-p {\r\n font-size: 17px;\r\n color: var(--bx-ink-soft);\r\n font-weight: 400;\r\n line-height: 1.7;\r\n}\r\n\r\n\/* ============ HEADER \/ NAV (sama persis kayak homepage & Sejarah-Brand.html) ============ *\/\r\n#bingxue-home .bx-header {\r\n position: absolute;\r\n top: 0; left: 0; right: 0;\r\n z-index: 40;\r\n padding: 26px 0;\r\n transition: background 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;\r\n}\r\n#bingxue-home .bx-header.is-scrolled,\r\n#bingxue-home .bx-header.is-open {\r\n position: fixed;\r\n background: rgba(255,255,255,0.96);\r\n backdrop-filter: blur(6px);\r\n padding: 14px 0;\r\n box-shadow: 0 1px 0 var(--bx-line);\r\n}\r\n#bingxue-home .bx-header-row {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 24px;\r\n}\r\n#bingxue-home .bx-logo { display: inline-flex; align-items: center; }\r\n#bingxue-home .bx-logo-img { height: 30px; width: auto; display: block; }\r\n#bingxue-home .bx-logo-img--dark { display: none; }\r\n#bingxue-home .bx-header.is-scrolled .bx-logo-img--light,\r\n#bingxue-home .bx-header.is-open .bx-logo-img--light { display: none; }\r\n#bingxue-home .bx-header.is-scrolled .bx-logo-img--dark,\r\n#bingxue-home .bx-header.is-open .bx-logo-img--dark { display: block; }\r\n\r\n#bingxue-home .bx-nav { display: flex; align-items: center; gap: 6px; }\r\n#bingxue-home .bx-nav-item { position: relative; }\r\n#bingxue-home .bx-nav-link {\r\n display: flex; align-items: center; gap: 6px;\r\n padding: 10px 14px;\r\n font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;\r\n color: var(--bx-ink);\r\n transition: color 0.3s ease, opacity 0.2s ease;\r\n}\r\n#bingxue-home .bx-nav-link:hover { opacity: 0.65; }\r\n#bingxue-home .bx-caret { width: 8px; height: 8px; transition: transform 0.2s ease; }\r\n#bingxue-home .bx-nav-item:hover .bx-caret { transform: rotate(180deg); }\r\n\r\n#bingxue-home .bx-dropdown {\r\n position: absolute; top: calc(100% + 14px); left: 0;\r\n min-width: 210px; background: var(--bx-white); border-radius: 10px;\r\n box-shadow: 0 18px 40px rgba(0,0,0,0.12); padding: 10px;\r\n opacity: 0; visibility: hidden; transform: translateY(8px);\r\n transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;\r\n}\r\n#bingxue-home .bx-nav-item:hover .bx-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }\r\n#bingxue-home .bx-dropdown a {\r\n display: block; padding: 10px 14px; font-size: 13px; font-weight: 500;\r\n color: var(--bx-ink-soft); border-radius: 6px; white-space: nowrap;\r\n}\r\n#bingxue-home .bx-dropdown a:hover { background: var(--bx-cream); color: var(--bx-ink); }\r\n\r\n#bingxue-home .bx-burger { display: none; width: 32px; height: 32px; position: relative; z-index: 50; }\r\n#bingxue-home .bx-burger span {\r\n position: absolute; left: 4px; right: 4px; height: 2px;\r\n background: var(--bx-ink); transition: all 0.25s ease;\r\n}\r\n#bingxue-home .bx-burger span:nth-child(1) { top: 10px; }\r\n#bingxue-home .bx-burger span:nth-child(2) { top: 16px; }\r\n#bingxue-home .bx-burger span:nth-child(3) { top: 22px; }\r\n#bingxue-home .bx-header.is-open .bx-burger span:nth-child(1) { top: 16px; transform: rotate(45deg); }\r\n#bingxue-home .bx-header.is-open .bx-burger span:nth-child(2) { opacity: 0; }\r\n#bingxue-home .bx-header.is-open .bx-burger span:nth-child(3) { top: 16px; transform: rotate(-45deg); }\r\n\r\n\/* Note: halaman ini header-nya selalu di atas background terang (bukan foto),\r\n jadi teks nav & logo dark dipakai dari awal (beda dgn homepage yg mulai di atas foto). *\/\r\n#bingxue-home .bx-header { background: var(--bx-white); position: relative; box-shadow: 0 1px 0 var(--bx-line); }\r\n#bingxue-home .bx-header.is-scrolled { position: fixed; }\r\n#bingxue-home .bx-logo-img--light { display: none; }\r\n#bingxue-home .bx-logo-img--dark { display: block; }\r\n\r\n\/* ============ FOOTER (sama persis kayak homepage) ============ *\/\r\n#bingxue-home .bx-footer { background: var(--bx-ink); color: rgba(255,255,255,0.7); padding: 84px 0 0; }\r\n#bingxue-home .bx-footer-grid {\r\n display: grid; grid-template-columns: repeat(5, 1fr) auto; gap: 32px;\r\n padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,0.12);\r\n}\r\n#bingxue-home .bx-footer-col h4 {\r\n color: var(--bx-white); font-size: 12px; font-weight: 700;\r\n letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 18px;\r\n}\r\n#bingxue-home .bx-footer-col a {\r\n display: block; font-size: 13.5px; padding: 6px 0;\r\n color: rgba(255,255,255,0.65); transition: color 0.2s ease;\r\n}\r\n#bingxue-home .bx-footer-col a:hover { color: var(--bx-orange); }\r\n#bingxue-home .bx-footer-social { display: flex; gap: 10px; align-items: flex-start; }\r\n#bingxue-home .bx-footer-social a {\r\n width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.08);\r\n display: flex; align-items: center; justify-content: center; transition: background 0.2s ease;\r\n}\r\n#bingxue-home .bx-footer-social a:hover { background: var(--bx-orange); }\r\n#bingxue-home .bx-footer-bottom {\r\n display: flex; align-items: center; justify-content: space-between;\r\n padding: 22px 0; font-size: 12.5px; color: rgba(255,255,255,0.45); flex-wrap: wrap; gap: 10px;\r\n}\r\n#bingxue-home .bx-footer-bottom a { color: rgba(255,255,255,0.45); }\r\n#bingxue-home .bx-footer-bottom a:hover { color: var(--bx-white); }\r\n#bingxue-home .bx-footer-links { display: flex; gap: 18px; }\r\n\r\n\/* ============ 1. HERO MENU (foto + judul di atas foto, kiri-bawah \u2014 konsisten dgn sj-hero) ============ *\/\r\n#bingxue-home .mn-hero {\r\n position: relative;\r\n height: 82vh;\r\n min-height: 540px;\r\n overflow: hidden;\r\n}\r\n#bingxue-home .mn-hero-bg { position: absolute; inset: 0; z-index: 0; }\r\n#bingxue-home .mn-hero-bg-img { width: 100%; height: 100%; object-fit: cover; display: block; }\r\n#bingxue-home .mn-hero-overlay {\r\n position: absolute; inset: 0;\r\n background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 45%, rgba(0,0,0,0.2) 100%);\r\n}\r\n#bingxue-home .mn-hero .bx-container { max-width: none; }\r\n#bingxue-home .mn-hero-body {\r\n position: relative; z-index: 2;\r\n height: 100%;\r\n display: flex;\r\n align-items: flex-end;\r\n padding: 0 0 64px 100px;\r\n}\r\n#bingxue-home .mn-hero-title {\r\n color: #EDD8B0;\r\n font-size: clamp(38px, 6vw, 72px);\r\n font-weight: 900;\r\n letter-spacing: 0.01em;\r\n}\r\n\r\n\/* ============ 2. LAYOUT: sidebar kategori + stage produk ============ *\/\r\n#bingxue-home .mn-layout {\r\n padding: 88px 0 96px;\r\n display: grid; grid-template-columns: 200px 1fr; gap: clamp(28px, 5vw, 72px);\r\n align-items: start;\r\n}\r\n#bingxue-home .mn-cat-nav {\r\n position: sticky; top: 108px;\r\n display: flex; flex-direction: column; gap: 4px;\r\n align-self: start;\r\n}\r\n#bingxue-home .mn-cat-link {\r\n position: relative;\r\n font-size: 16px; font-weight: 700; color: var(--bx-line);\r\n padding: 8px 0; width: fit-content;\r\n transition: color 0.25s ease;\r\n}\r\n#bingxue-home .mn-cat-link::after {\r\n content: \"\";\r\n position: absolute; left: 0; right: 0; bottom: 3px;\r\n height: 2px; background: var(--bx-orange);\r\n transform: scaleX(0); transform-origin: left;\r\n transition: transform 0.4s cubic-bezier(.4,0,.2,1);\r\n}\r\n#bingxue-home .mn-cat-link:hover { color: var(--bx-ink-soft); }\r\n#bingxue-home .mn-cat-link.is-active { color: var(--bx-ink); }\r\n#bingxue-home .mn-cat-link.is-active::after { transform: scaleX(1); }\r\n\r\n#bingxue-home .mn-stage { position: relative; }\r\n#bingxue-home .mn-content {\r\n transition: opacity 0.38s cubic-bezier(.4,0,.2,1), transform 0.38s cubic-bezier(.4,0,.2,1);\r\n}\r\n#bingxue-home .mn-content.mn-anim-fwd-out { opacity: 0; transform: translateX(-26px); }\r\n#bingxue-home .mn-content.mn-anim-fwd-in { opacity: 0; transform: translateX(26px); }\r\n#bingxue-home .mn-content.mn-anim-back-out { opacity: 0; transform: translateX(26px); }\r\n#bingxue-home .mn-content.mn-anim-back-in { opacity: 0; transform: translateX(-26px); }\r\n#bingxue-home .mn-content.mn-anim-fade-out { opacity: 0; transform: translateY(10px); }\r\n#bingxue-home .mn-content.mn-anim-fade-in { opacity: 0; transform: translateY(10px); }\r\n#bingxue-home [hidden] { display: none !important; }\r\n\r\n\/* --- list kategori (state A): kategori ditumpuk vertikal, discroll terus ke kategori berikutnya\r\n (sama seperti .sj-year-section di Sejarah-Brand.html), scroll-spy yang aktifkan sidebar ---- *\/\r\n#bingxue-home .mn-cat-section { padding: 46px 0; border-top: 1px solid var(--bx-line); scroll-margin-top: 108px; }\r\n#bingxue-home .mn-cat-section:first-child { border-top: none; padding-top: 0; }\r\n\r\n\/* --- representative view (state A) --- *\/\r\n#bingxue-home .mn-repr-media-wrap { position: relative; }\r\n#bingxue-home .mn-repr-media {\r\n position: relative;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n background: var(--bx-cream);\r\n min-height: 440px;\r\n}\r\n#bingxue-home .mn-repr-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }\r\n#bingxue-home .mn-repr-overlay {\r\n position: absolute; inset: 0;\r\n background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.05) 55%, rgba(0,0,0,0.05) 100%);\r\n}\r\n#bingxue-home .mn-repr-title-wrap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(24px, 3vw, 44px); }\r\n#bingxue-home .mn-repr-title {\r\n color: #EDD8B0;\r\n font-size: clamp(26px, 3.4vw, 44px);\r\n font-weight: 900;\r\n letter-spacing: 0.01em;\r\n}\r\n\/* tombol LIHAT sengaja jadi sibling dari .mn-repr-media (bukan anak di dalamnya) supaya\r\n tidak ikut terpotong oleh overflow:hidden punya .mn-repr-media \u2014 sebelumnya tombol ini\r\n nempel di dalam kotak foto yang overflow:hidden, jadi separuh badan tombol yang keluar\r\n dari batas bawah kotak foto (translateY 50%) selalu ke-crop \/ kepotong. *\/\r\n#bingxue-home .mn-lihat-btn {\r\n position: absolute; left: 50%; bottom: 0; z-index: 3;\r\n transform: translate(-50%, 50%);\r\n background: var(--bx-orange); color: var(--bx-white);\r\n font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;\r\n padding: 15px 34px; border-radius: 999px;\r\n box-shadow: 0 10px 24px rgba(240,131,44,0.35);\r\n transition: background 0.2s ease, transform 0.2s ease;\r\n}\r\n#bingxue-home .mn-lihat-btn:hover { background: var(--bx-orange-dark); transform: translate(-50%, 50%) scale(1.04); }\r\n#bingxue-home .mn-repr-caption { margin-top: 44px; max-width: 620px; }\r\n\r\n\/* --- detail view (state B) --- *\/\r\n#bingxue-home .mn-detail-head {\r\n position: relative;\r\n display: flex; align-items: center; justify-content: space-between;\r\n margin-bottom: 28px;\r\n}\r\n#bingxue-home .mn-detail-title {\r\n font-size: clamp(22px, 2.4vw, 32px); font-weight: 900; color: var(--bx-ink);\r\n}\r\n#bingxue-home .mn-back-btn {\r\n width: 46px; height: 46px; border-radius: 50%;\r\n background: var(--bx-cream); border: 1px solid var(--bx-line);\r\n display: flex; align-items: center; justify-content: center; flex-shrink: 0;\r\n transition: background 0.2s ease, transform 0.2s ease;\r\n}\r\n#bingxue-home .mn-back-btn:hover { background: var(--bx-orange); border-color: var(--bx-orange); }\r\n#bingxue-home .mn-back-btn:hover svg { stroke: var(--bx-white); }\r\n#bingxue-home .mn-back-btn svg { transition: stroke 0.2s ease; }\r\n\r\n#bingxue-home .mn-product-list { display: flex; flex-direction: column; gap: 20px; }\r\n#bingxue-home .mn-product-card {\r\n display: grid; grid-template-columns: 240px 1fr;\r\n border: 1px solid var(--bx-line); border-radius: 16px; overflow: hidden;\r\n background: var(--bx-white);\r\n}\r\n#bingxue-home .mn-product-photo-wrap { position: relative; background: var(--bx-cream); min-height: 190px; }\r\n#bingxue-home .mn-product-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }\r\n#bingxue-home .mn-product-info { padding: clamp(22px, 3vw, 34px); display: flex; flex-direction: column; justify-content: center; gap: 10px; }\r\n#bingxue-home .mn-product-name {\r\n font-size: 18px; font-weight: 800; color: var(--bx-ink);\r\n letter-spacing: 0.01em; text-transform: uppercase;\r\n}\r\n#bingxue-home .mn-product-desc { font-size: 14.5px; color: var(--bx-ink-soft); line-height: 1.65; }\r\n\r\n\/* back button: default fixed-bottom-right container (mobile), hidden state controlled per breakpoint below *\/\r\n#bingxue-home .mn-back-btn-mobile { display: none; }\r\n\r\n\/* ============ RESPONSIVE ============ *\/\r\n@media (max-width: 960px) {\r\n #bingxue-home .bx-nav { display: none; }\r\n #bingxue-home .bx-burger { display: block; }\r\n #bingxue-home .bx-footer-grid { grid-template-columns: repeat(3, 1fr); }\r\n\r\n #bingxue-home .mn-hero { height: auto; aspect-ratio: 3 \/ 4; min-height: 420px; }\r\n #bingxue-home .mn-hero-body { padding: 0 16px 40px; justify-content: center; }\r\n #bingxue-home .mn-hero-title { font-size: clamp(24px, 7.5vw, 36px); white-space: nowrap; text-align: center; }\r\n\r\n #bingxue-home .mn-layout { grid-template-columns: 1fr; padding-top: 20px; }\r\n #bingxue-home .mn-cat-nav {\r\n position: sticky; top: 0; z-index: 20;\r\n flex-direction: row; overflow-x: auto; gap: 4px;\r\n background: var(--bx-cream); border-bottom: 1px solid var(--bx-line);\r\n padding: 14px var(--bx-gutter); margin: 0 calc(-1 * var(--bx-gutter)) 8px;\r\n -ms-overflow-style: none; \/* Edge lama \/ IE: sembunyikan scrollbar *\/\r\n scrollbar-width: none; \/* Firefox: sembunyikan scrollbar *\/\r\n }\r\n \/* Chrome, Safari, Opera: sembunyikan scrollbar. overflow-x:auto tetap aktif di atas,\r\n jadi geser via jari\/trackpad tetap jalan normal \u2014 cuma bar visualnya yang hilang. *\/\r\n #bingxue-home .mn-cat-nav::-webkit-scrollbar { display: none; height: 0; }\r\n #bingxue-home .mn-cat-link { font-size: 14px; padding: 6px 10px; flex-shrink: 0; white-space: nowrap; }\r\n #bingxue-home .mn-cat-section { scroll-margin-top: 58px; }\r\n\r\n #bingxue-home .mn-repr-media { min-height: 280px; }\r\n #bingxue-home .mn-repr-caption { margin-top: 40px; }\r\n\r\n #bingxue-home .mn-product-card { grid-template-columns: 1fr; }\r\n #bingxue-home .mn-product-photo-wrap { order: -1; min-height: 170px; }\r\n\r\n \/* tombol back dipindah ke pojok kanan bawah layar saat mobile *\/\r\n #bingxue-home .mn-detail-head .mn-back-btn { display: none; }\r\n #bingxue-home .mn-back-btn-mobile {\r\n display: flex; position: fixed; bottom: 20px; right: 20px; z-index: 25;\r\n box-shadow: 0 10px 24px rgba(0,0,0,0.22);\r\n }\r\n\r\n \/* mobile nav panel *\/\r\n #bingxue-home .bx-nav-mobile {\r\n position: fixed; inset: 0; background: var(--bx-white); z-index: 30;\r\n padding: 100px 32px 40px; overflow-y: auto; display: none;\r\n }\r\n #bingxue-home .bx-header.is-open .bx-nav-mobile { display: block; }\r\n #bingxue-home .bx-nav-mobile-item { border-bottom: 1px solid var(--bx-line); padding: 6px 0; }\r\n #bingxue-home .bx-nav-mobile-link {\r\n display: flex; justify-content: space-between; align-items: center;\r\n padding: 16px 0; font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;\r\n }\r\n #bingxue-home .bx-nav-mobile-sub { display: none; padding: 0 0 16px 12px; }\r\n #bingxue-home .bx-nav-mobile-item.is-open .bx-nav-mobile-sub { display: block; }\r\n #bingxue-home .bx-nav-mobile-sub a { display: block; padding: 10px 0; font-size: 13.5px; color: var(--bx-ink-soft); }\r\n\r\n #bingxue-home .bx-header,\r\n #bingxue-home .bx-header.is-scrolled,\r\n #bingxue-home .bx-header.is-open {\r\n position: static; background: var(--bx-white); backdrop-filter: none;\r\n padding: 16px 0; box-shadow: 0 1px 0 var(--bx-line);\r\n }\r\n #bingxue-home .bx-burger span { background: var(--bx-ink); }\r\n}\r\n@media (min-width: 961px) {\r\n #bingxue-home .bx-nav-mobile { display: none !important; }\r\n #bingxue-home .mn-back-btn-mobile { display: none !important; }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"bingxue-home\">\r\n\r\n <!-- ======================= HEADER (sama persis kayak homepage) ======================= -->\r\n <header class=\"bx-header\" id=\"bxHeader\">\r\n <div class=\"bx-container bx-header-row\">\r\n <a href=\"https:\/\/bingxueindonesia.co.id\/en\/new-home\/\" class=\"bx-logo\">\r\n <img decoding=\"async\" src=\"https:\/\/bingxueindonesia.co.id\/wp-content\/uploads\/2026\/07\/3@2x.png\" alt=\"Bingxue\" class=\"bx-logo-img bx-logo-img--light\">\r\n <img decoding=\"async\" src=\"https:\/\/bingxueindonesia.co.id\/wp-content\/uploads\/2026\/07\/1@2x.png\" alt=\"Bingxue\" class=\"bx-logo-img bx-logo-img--dark\">\r\n <\/a>\r\n\r\n <nav class=\"bx-nav\">\r\n <div class=\"bx-nav-item\">\r\n <a href=\"https:\/\/bingxueindonesia.co.id\/en\/new-tentang-kami\/\" class=\"bx-nav-link\">Tentang Kami\r\n <svg class=\"bx-caret\" viewbox=\"0 0 10 6\" fill=\"none\"><path d=\"M1 1L5 5L9 1\" stroke=\"currentColor\" stroke-width=\"1.4\"\/><\/svg>\r\n <\/a>\r\n <div class=\"bx-dropdown\">\r\n <a href=\"https:\/\/bingxueindonesia.co.id\/en\/new-tentang-kami\/\">Profil Perusahaan<\/a>\r\n <a href=\"https:\/\/bingxueindonesia.co.id\/en\/sejarah-brand\/\">Sejarah<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bx-nav-item\">\r\n <a href=\"https:\/\/bingxueindonesia.co.id\/en\/new-menu\/\" class=\"bx-nav-link\">Menu<\/a>\r\n <\/div>\r\n <div class=\"bx-nav-item\">\r\n <a href=\"https:\/\/bingxueindonesia.co.id\/en\/new-kemitraan\/\" class=\"bx-nav-link\">Kemitraan<\/a>\r\n <\/div>\r\n <div class=\"bx-nav-item\">\r\n <a href=\"#\" class=\"bx-nav-link\">Komunitas<\/a>\r\n <\/div>\r\n <div class=\"bx-nav-item\">\r\n <a href=\"#\" class=\"bx-nav-link\">Artikel<\/a>\r\n <\/div>\r\n <div class=\"bx-nav-item\">\r\n <a href=\"#\" class=\"bx-nav-link\">Karir<\/a>\r\n <\/div>\r\n <div class=\"bx-nav-item\">\r\n <a href=\"#\" class=\"bx-nav-link\">Kontak Kami<\/a>\r\n <\/div>\r\n <\/nav>\r\n\r\n <button class=\"bx-burger\" id=\"bxBurger\" aria-label=\"Buka menu\">\r\n <span><\/span><span><\/span><span><\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <!-- mobile nav panel -->\r\n <div class=\"bx-nav-mobile\" id=\"bxNavMobile\">\r\n <div class=\"bx-nav-mobile-item\">\r\n <div class=\"bx-nav-mobile-link\">Tentang Kami <svg width=\"12\" height=\"8\" viewbox=\"0 0 10 6\" fill=\"none\"><path d=\"M1 1L5 5L9 1\" stroke=\"currentColor\" stroke-width=\"1.4\"\/><\/svg><\/div>\r\n <div class=\"bx-nav-mobile-sub\"><a href=\"https:\/\/bingxueindonesia.co.id\/en\/new-tentang-kami\/\">Profil Perusahaan<\/a><a href=\"https:\/\/bingxueindonesia.co.id\/en\/sejarah-brand\/\">Sejarah<\/a><\/div>\r\n <\/div>\r\n <div class=\"bx-nav-mobile-item\">\r\n <a href=\"https:\/\/bingxueindonesia.co.id\/en\/new-menu\/\" class=\"bx-nav-mobile-link\">Menu<\/a>\r\n <\/div>\r\n <div class=\"bx-nav-mobile-item\">\r\n <a href=\"https:\/\/bingxueindonesia.co.id\/en\/new-kemitraan\/\" class=\"bx-nav-mobile-link\">Kemitraan<\/a>\r\n <\/div>\r\n <div class=\"bx-nav-mobile-item\">\r\n <a href=\"#\" class=\"bx-nav-mobile-link\">Komunitas<\/a>\r\n <\/div>\r\n <div class=\"bx-nav-mobile-item\">\r\n <a href=\"#\" class=\"bx-nav-mobile-link\">Artikel<\/a>\r\n <\/div>\r\n <div class=\"bx-nav-mobile-item\">\r\n <a href=\"#\" class=\"bx-nav-mobile-link\">Karir<\/a>\r\n <\/div>\r\n <div class=\"bx-nav-mobile-item\">\r\n <a href=\"#\" class=\"bx-nav-mobile-link\">Kontak Kami<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <!-- ======================= 1. HERO MENU ======================= -->\r\n <section class=\"mn-hero\">\r\n <div class=\"mn-hero-bg\">\r\n <!-- GANTI DI SINI: background hero Menu -->\r\n <img decoding=\"async\" class=\"mn-hero-bg-img\" src=\"https:\/\/bingxueindonesia.co.id\/wp-content\/uploads\/2026\/07\/1728x643_WEBSITE-SILK-MILK_2-jen-justin-kamari.png\" alt=\"Background hero Menu\" loading=\"lazy\">\r\n <\/div>\r\n <div class=\"mn-hero-overlay\"><\/div>\r\n <div class=\"bx-container mn-hero-body\">\r\n <h1 class=\"mn-hero-title\">MENU KAMI<\/h1>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ======================= 2. LAYOUT MENU (sidebar kategori + stage) ======================= -->\r\n <section class=\"bx-container mn-layout\" id=\"mnLayout\">\r\n\r\n <nav class=\"mn-cat-nav\" id=\"mnCatNav\" aria-label=\"Navigasi kategori menu\"><\/nav>\r\n\r\n <div class=\"mn-stage\">\r\n <!-- mode A \u2014 list kategori: semua kategori ditumpuk vertikal (diisi JS dari data CATEGORIES),\r\n bisa discroll terus sampai kategori paling bawah (persis pola .sj-year-section di\r\n Sejarah-Brand.html), dengan scroll-spy yang menyalakan link kategori aktif di sidebar. -->\r\n <div class=\"mn-content mn-cat-list\" id=\"mnCatList\"><\/div>\r\n <!-- mode B \u2014 detail kategori: hanya 1 kategori yang ditampilkan (diisi JS saat tombol\r\n LIHAT diklik). Karena list di atas disembunyikan (hidden), scroll halaman jadi\r\n terbatas cuma di kategori yang lagi dibuka ini saja. -->\r\n <div class=\"mn-content mn-detail-wrap\" id=\"mnDetailWrap\" hidden><\/div>\r\n <\/div>\r\n\r\n <\/section>\r\n\r\n <!-- ======================= FOOTER (sama persis kayak homepage) ======================= -->\r\n <footer class=\"bx-footer\">\r\n <div class=\"bx-container\">\r\n <div class=\"bx-footer-grid\">\r\n <div class=\"bx-footer-col\">\r\n <h4>Tentang Kami<\/h4>\r\n <a href=\"https:\/\/bingxueindonesia.co.id\/en\/new-tentang-kami\/\">Profil Perusahaan<\/a>\r\n <a href=\"https:\/\/bingxueindonesia.co.id\/en\/sejarah-brand\/\">Sejarah<\/a>\r\n <\/div>\r\n <div class=\"bx-footer-col\">\r\n <h4>Menu<\/h4>\r\n <\/div>\r\n <div class=\"bx-footer-col\">\r\n <h4>Kemitraan<\/h4>\r\n <\/div>\r\n <div class=\"bx-footer-col\">\r\n <h4>Komunitas & Artikel<\/h4>\r\n <\/div>\r\n <div class=\"bx-footer-col\">\r\n <h4>Karir<\/h4>\r\n <\/div>\r\n <div class=\"bx-footer-social\">\r\n <a href=\"#\" aria-label=\"Instagram\">\r\n <svg width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"6\" stroke=\"currentColor\" stroke-width=\"1.6\"\/><circle cx=\"12\" cy=\"12\" r=\"4.5\" stroke=\"currentColor\" stroke-width=\"1.6\"\/><circle cx=\"17.2\" cy=\"6.8\" r=\"1.1\" fill=\"currentColor\"\/><\/svg>\r\n <\/a>\r\n <a href=\"#\" aria-label=\"TikTok\">\r\n <svg width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M14 3v10.8a3.4 3.4 0 1 1-3.2-3.4\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/><path d=\"M14 3c.4 2.6 2.1 4.2 4.6 4.4\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"\/><\/svg>\r\n <\/a>\r\n <a href=\"#\" aria-label=\"Facebook\">\r\n <svg width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M14 21v-7h2.5l.5-3H14V9.2c0-.9.3-1.5 1.6-1.5H17V5.1C16.6 5 15.7 5 14.7 5c-2.1 0-3.6 1.3-3.6 3.7V11H9v3h2.1v7h2.9Z\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linejoin=\"round\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bx-footer-bottom\">\r\n <span>\u00a9 Bingxue Indonesia 2026<\/span>\r\n <div class=\"bx-footer-links\">\r\n <a href=\"#\">Hubungi Kami<\/a>\r\n <a href=\"#\">Kebijakan Privasi<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n\r\n<\/div>\r\n\r\n<!-- ======================= LENIS: smooth \/ inertia scroll =======================\r\n CDN dari jsDelivr, versi di-pin (1.3.25) biar stabil \u2014 kalau mau update versi,\r\n ganti angka di URL script src di bawah ini.\r\n Lenis jalan di atas native scroll (bukan bikin wrapper terpisah), jadi\r\n position:sticky, IntersectionObserver (scroll-spy kategori), dan anchor link\r\n yang sudah ada tetap jalan seperti biasa. ================================== -->\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/lenis@1.3.25\/dist\/lenis.min.js\"><\/script>\r\n<script>\r\n(function(){\r\n \/\/ hormati pengguna yang mengaktifkan \"reduce motion\" di OS\/browser-nya \u2014\r\n \/\/ kalau itu aktif, Lenis tidak dijalankan sama sekali (scroll balik ke native).\r\n var prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n if (typeof Lenis === 'undefined' || prefersReducedMotion) return;\r\n\r\n window.mnLenis = new Lenis({\r\n autoRaf: true, \/\/ Lenis urus requestAnimationFrame-nya sendiri\r\n anchors: true, \/\/ klik <a href=\"#...\"> (termasuk link kategori) otomatis animasi smooth lewat Lenis\r\n lerp: 0.1 \/\/ 0.05-0.15 = makin kecil makin \"berat\/inertia\", makin besar makin responsif\r\n });\r\n})();\r\n<\/script>\r\n\r\n<script>\r\n(function(){\r\n var root = document.getElementById('bingxue-home');\r\n\r\n \/* ---- header scroll state ---- *\/\r\n var header = document.getElementById('bxHeader');\r\n function onScroll(){\r\n if (window.scrollY > 40) header.classList.add('is-scrolled');\r\n else header.classList.remove('is-scrolled');\r\n }\r\n window.addEventListener('scroll', onScroll);\r\n onScroll();\r\n\r\n \/* ---- mobile burger ---- *\/\r\n var burger = document.getElementById('bxBurger');\r\n burger.addEventListener('click', function(){\r\n header.classList.toggle('is-open');\r\n });\r\n root.querySelectorAll('.bx-nav-mobile-link').forEach(function(link){\r\n link.addEventListener('click', function(e){\r\n var item = link.closest('.bx-nav-mobile-item');\r\n if (item.querySelector('.bx-nav-mobile-sub')) {\r\n e.preventDefault();\r\n item.classList.toggle('is-open');\r\n }\r\n });\r\n });\r\n\r\n \/* ---- scroll reveal (dipakai ulang buat elemen .bx-reveal lain kalau ditambah nanti) ---- *\/\r\n function refreshReveal(){\r\n var revealEls = root.querySelectorAll('.bx-reveal:not(.is-visible)');\r\n if ('IntersectionObserver' in window) {\r\n var ioReveal = new IntersectionObserver(function(entries){\r\n entries.forEach(function(entry){\r\n if (entry.isIntersecting) entry.target.classList.add('is-visible');\r\n });\r\n }, { threshold: 0.15 });\r\n revealEls.forEach(function(el){ ioReveal.observe(el); });\r\n } else {\r\n revealEls.forEach(function(el){ el.classList.add('is-visible'); });\r\n }\r\n }\r\n refreshReveal();\r\n\r\n \/* =========================================================\r\n DATA MENU \u2014 GANTI DI SINI\r\n Semua foto masih placeholder (2 foto lama dipakai gantian),\r\n dan nama\/deskripsi produk masih contoh sementara.\r\n Tinggal ganti field \"photo\", \"name\", \"desc\", \"caption\" di\r\n bawah ini dengan konten & link foto asli per produk.\r\n ========================================================= *\/\r\n var PHOTO_A = 'https:\/\/bingxueindonesia.co.id\/wp-content\/uploads\/2026\/07\/DSC09652-scaled.jpg';\r\n var PHOTO_B = 'https:\/\/bingxueindonesia.co.id\/wp-content\/uploads\/2026\/07\/DIT00194-scaled.jpg';\r\n\r\n var CATEGORIES = [\r\n {\r\n id: 'menu-baru', label: 'Menu Baru!', photo: PHOTO_A,\r\n caption: 'Deretan menu terbaru dari Bingxue, dari perpaduan rasa klasik sampai kreasi musiman yang baru diluncurkan.',\r\n products: [\r\n { name: 'Taro Cheese Foam Tea', desc: 'Deskripsi singkat produk \u2014 ganti dengan copy asli.', photo: PHOTO_B },\r\n { name: 'Brown Sugar Pearl Fresh Milk', desc: 'Deskripsi singkat produk \u2014 ganti dengan copy asli.', photo: PHOTO_A },\r\n { name: 'Yuzu Honey Fizz', desc: 'Deskripsi singkat produk \u2014 ganti dengan copy asli.', photo: PHOTO_B }\r\n ]\r\n },\r\n {\r\n id: 'egg-waffle', label: 'Egg Waffle', photo: PHOTO_B,\r\n caption: 'Egg waffle hangat dengan tekstur renyah di luar dan lembut di dalam, disajikan dengan beragam topping.',\r\n products: [\r\n { name: 'Egg Waffle Original', desc: 'Deskripsi singkat produk \u2014 ganti dengan copy asli.', photo: PHOTO_A },\r\n { name: 'Egg Waffle Cokelat', desc: 'Deskripsi singkat produk \u2014 ganti dengan copy asli.', photo: PHOTO_B },\r\n { name: 'Egg Waffle Keju', desc: 'Deskripsi singkat produk \u2014 ganti dengan copy asli.', photo: PHOTO_A }\r\n ]\r\n },\r\n {\r\n id: 'fresh-ice-cream', label: 'Fresh Ice Cream', photo: PHOTO_A,\r\n caption: 'Es krim segar dengan tekstur lembut, dibuat setiap hari untuk rasa yang konsisten di setiap cup.',\r\n products: [\r\n { name: 'Ice Cream Vanilla Classic', desc: 'Deskripsi singkat produk \u2014 ganti dengan copy asli.', photo: PHOTO_B },\r\n { name: 'Ice Cream Cokelat Belgia', desc: 'Deskripsi singkat produk \u2014 ganti dengan copy asli.', photo: PHOTO_A },\r\n { name: 'Ice Cream Taro', desc: 'Deskripsi singkat produk \u2014 ganti dengan copy asli.', photo: PHOTO_B }\r\n ]\r\n },\r\n {\r\n id: 'milk-tea', label: 'Milk Tea', photo: PHOTO_B,\r\n caption: 'Rangkaian milk tea andalan Bingxue, dibuat dari daun teh dan susu segar untuk rasa yang lembut dan seimbang.',\r\n products: [\r\n { name: 'Fresh Milk Tea', desc: 'Deskripsi singkat produk \u2014 ganti dengan copy asli.', photo: PHOTO_A },\r\n { name: 'Brown Sugar Milk Tea', desc: 'Deskripsi singkat produk \u2014 ganti dengan copy asli.', photo: PHOTO_B },\r\n { name: 'Taro Milk Tea', desc: 'Deskripsi singkat produk \u2014 ganti dengan copy asli.', photo: PHOTO_A }\r\n ]\r\n },\r\n {\r\n id: 'original-tea', label: 'Original Tea', photo: PHOTO_A,\r\n caption: 'Teh murni tanpa campuran susu, diseduh langsung dari daun teh pilihan untuk rasa yang otentik.',\r\n products: [\r\n { name: 'Jasmine Green Tea', desc: 'Deskripsi singkat produk \u2014 ganti dengan copy asli.', photo: PHOTO_B },\r\n { name: 'Oolong Tea', desc: 'Deskripsi singkat produk \u2014 ganti dengan copy asli.', photo: PHOTO_A },\r\n { name: 'Black Tea', desc: 'Deskripsi singkat produk \u2014 ganti dengan copy asli.', photo: PHOTO_B }\r\n ]\r\n },\r\n {\r\n id: 'fresh-coffee', label: 'Fresh Coffee', photo: PHOTO_B,\r\n caption: 'Kopi segar racikan Bingxue, dari yang klasik sampai yang dipadukan dengan gula aren.',\r\n products: [\r\n { name: 'Kopi Susu Gula Aren', desc: 'Deskripsi singkat produk \u2014 ganti dengan copy asli.', photo: PHOTO_A },\r\n { name: 'Americano', desc: 'Deskripsi singkat produk \u2014 ganti dengan copy asli.', photo: PHOTO_B },\r\n { name: 'Cappuccino Dingin', desc: 'Deskripsi singkat produk \u2014 ganti dengan copy asli.', photo: PHOTO_A }\r\n ]\r\n },\r\n {\r\n id: 'fruit-tea', label: 'Fruit Tea', photo: PHOTO_A,\r\n caption: 'Perpaduan teh dan buah segar, ringan dan menyegarkan untuk diminum kapan saja.',\r\n products: [\r\n { name: 'Lychee Fruit Tea', desc: 'Deskripsi singkat produk \u2014 ganti dengan copy asli.', photo: PHOTO_B },\r\n { name: 'Passion Fruit Tea', desc: 'Deskripsi singkat produk \u2014 ganti dengan copy asli.', photo: PHOTO_A },\r\n { name: 'Mango Fruit Tea', desc: 'Deskripsi singkat produk \u2014 ganti dengan copy asli.', photo: PHOTO_B }\r\n ]\r\n }\r\n ];\r\n\r\n \/* ---- state ---- *\/\r\n var state = { catId: CATEGORIES[0].id, mode: 'list' }; \/\/ mode: 'list' (semua kategori discroll) | 'detail' (1 kategori)\r\n\r\n var catNav = document.getElementById('mnCatNav');\r\n var catList = document.getElementById('mnCatList');\r\n var detailWrap = document.getElementById('mnDetailWrap');\r\n\r\n var backIcon = '<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M14 6l-6 6 6 6\" stroke=\"' + '#1A1A18' + '\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>';\r\n\r\n function getCat(id){\r\n for (var i = 0; i < CATEGORIES.length; i++) { if (CATEGORIES[i].id === id) return CATEGORIES[i]; }\r\n return CATEGORIES[0];\r\n }\r\n\r\n \/* kartu representatif 1 kategori \u2014 dipakai buat ngisi tiap section di list yang discroll.\r\n media & tombol LIHAT dipisah (media-wrap tanpa overflow:hidden) biar tombolnya gak kepotong. *\/\r\n function buildReprCardHTML(cat){\r\n return '' +\r\n '<div class=\"mn-repr\">' +\r\n '<div class=\"mn-repr-media-wrap\">' +\r\n '<div class=\"mn-repr-media\">' +\r\n '<img decoding=\"async\" class=\"mn-repr-photo\" src=\"' + cat.photo + '\" alt=\"Foto kategori ' + cat.label + '\" loading=\"lazy\">' +\r\n '<div class=\"mn-repr-overlay\"><\/div>' +\r\n '<div class=\"mn-repr-title-wrap\"><h2 class=\"mn-repr-title\">' + cat.label + '<\/h2><\/div>' +\r\n '<\/div>' +\r\n '<button type=\"button\" class=\"mn-lihat-btn\" data-action=\"lihat\" data-cat=\"' + cat.id + '\">LIHAT<\/button>' +\r\n '<\/div>' +\r\n '<p class=\"mn-repr-caption bx-p\">' + cat.caption + '<\/p>' +\r\n '<\/div>';\r\n }\r\n\r\n function buildDetailHTML(cat){\r\n var cards = cat.products.map(function(p){\r\n return '' +\r\n '<div class=\"mn-product-card\">' +\r\n '<div class=\"mn-product-photo-wrap\"><img decoding=\"async\" class=\"mn-product-photo\" src=\"' + p.photo + '\" alt=\"Foto ' + p.name + '\" loading=\"lazy\"><\/div>' +\r\n '<div class=\"mn-product-info\">' +\r\n '<div class=\"mn-product-name\">' + p.name + '<\/div>' +\r\n '<div class=\"mn-product-desc\">' + p.desc + '<\/div>' +\r\n '<\/div>' +\r\n '<\/div>';\r\n }).join('');\r\n\r\n return '' +\r\n '<div class=\"mn-detail\">' +\r\n '<div class=\"mn-detail-head\">' +\r\n '<h3 class=\"mn-detail-title\">' + cat.label + '<\/h3>' +\r\n '<button type=\"button\" class=\"mn-back-btn\" data-action=\"back\" aria-label=\"Kembali\">' + backIcon + '<\/button>' +\r\n '<\/div>' +\r\n '<div class=\"mn-product-list\">' + cards + '<\/div>' +\r\n '<button type=\"button\" class=\"mn-back-btn mn-back-btn-mobile\" data-action=\"back\" aria-label=\"Kembali\">' + backIcon + '<\/button>' +\r\n '<\/div>';\r\n }\r\n\r\n \/* ---- render list kategori: semua kategori ditumpuk sekali di awal (id=\"cat-<id>\"),\r\n sama persis pola .sj-year-section di Sejarah-Brand.html, supaya bisa discroll terus\r\n dari kategori paling atas sampai paling bawah tanpa kepotong per-kategori. ---- *\/\r\n catList.innerHTML = CATEGORIES.map(function(cat){\r\n return '<section class=\"mn-cat-section bx-reveal\" id=\"cat-' + cat.id + '\" data-cat=\"' + cat.id + '\">' +\r\n buildReprCardHTML(cat) +\r\n '<\/section>';\r\n }).join('');\r\n\r\n catList.querySelectorAll('.mn-lihat-btn').forEach(function(btn){\r\n btn.addEventListener('click', function(){ enterDetail(btn.getAttribute('data-cat')); });\r\n });\r\n\r\n \/* ---- render sidebar kategori (link asli href=\"#cat-...\" biar bisa discroll native\/Lenis) ---- *\/\r\n catNav.innerHTML = CATEGORIES.map(function(cat){\r\n return '<a href=\"#cat-' + cat.id + '\" class=\"mn-cat-link\" data-cat=\"' + cat.id + '\">' + cat.label + '<\/a>';\r\n }).join('');\r\n var catLinks = Array.prototype.slice.call(catNav.querySelectorAll('.mn-cat-link'));\r\n\r\n catLinks.forEach(function(a){\r\n a.addEventListener('click', function(e){\r\n var id = a.getAttribute('data-cat');\r\n if (state.mode === 'detail') {\r\n \/* lagi buka detail satu kategori -> klik sidebar cuma ganti isi detailnya, bukan scroll *\/\r\n e.preventDefault();\r\n if (id !== state.catId) swapDetail(id);\r\n } else {\r\n \/* lagi di mode list -> biarkan link jalan (anchor asli, dihaluskan Lenis),\r\n highlight sidebar langsung diupdate biar responsif, gak nunggu scroll selesai *\/\r\n state.catId = id;\r\n setActiveCat(id);\r\n }\r\n });\r\n });\r\n\r\n \/* geser bar kategori (scroll horizontal) supaya link yang aktif selalu kelihatan di\r\n dalam bar \u2014 dipakai khusus mobile (lihat .mn-cat-nav di CSS mobile). Di desktop bar-nya\r\n sudah cukup tinggi jadi fungsi ini otomatis gak ngapa-ngapain (scrollWidth <= clientWidth). *\/\r\n function scrollCatNavToActive(activeLink){\r\n if (!catNav || !activeLink) return;\r\n if (catNav.scrollWidth <= catNav.clientWidth) return;\r\n var navRect = catNav.getBoundingClientRect();\r\n var linkRect = activeLink.getBoundingClientRect();\r\n var delta = (linkRect.left + linkRect.width \/ 2) - (navRect.left + navRect.width \/ 2);\r\n var targetLeft = catNav.scrollLeft + delta;\r\n if (typeof catNav.scrollTo === 'function') {\r\n catNav.scrollTo({ left: targetLeft, behavior: 'smooth' });\r\n } else {\r\n catNav.scrollLeft = targetLeft;\r\n }\r\n }\r\n\r\n function setActiveCat(id){\r\n var activeLink = null;\r\n catLinks.forEach(function(a){\r\n var isActive = a.getAttribute('data-cat') === id;\r\n a.classList.toggle('is-active', isActive);\r\n if (isActive) activeLink = a;\r\n });\r\n scrollCatNavToActive(activeLink);\r\n }\r\n\r\n \/* ---- scroll-spy: selama mode \"list\", kategori yang lagi kelihatan di layar otomatis\r\n nyalain link + animasi garis bawah di sidebar \u2014 sama persis pola #sjYearNav di\r\n Sejarah-Brand.html. Begitu mode pindah ke \"detail\", #mnCatList disembunyikan total\r\n (hidden), jadi section-section di dalamnya otomatis gak pernah \"intersecting\" lagi\r\n dan observer ini otomatis diam \u2014 scroll jadi murni cuma di kategori yang lagi dibuka. ---- *\/\r\n var catSections = Array.prototype.slice.call(root.querySelectorAll('.mn-cat-section'));\r\n if ('IntersectionObserver' in window) {\r\n var ioCat = new IntersectionObserver(function(entries){\r\n entries.forEach(function(entry){\r\n if (entry.isIntersecting) {\r\n state.catId = entry.target.getAttribute('data-cat');\r\n setActiveCat(state.catId);\r\n }\r\n });\r\n }, { root: null, rootMargin: '-40% 0px -50% 0px', threshold: 0 });\r\n catSections.forEach(function(s){ ioCat.observe(s); });\r\n }\r\n\r\n \/* ---- smooth-scroll terprogram (dipakai saat buka\/tutup detail), lewat Lenis kalau ada ---- *\/\r\n function smoothScrollTo(target, offset){\r\n var el = typeof target === 'string' ? document.querySelector(target) : target;\r\n if (!el) return;\r\n if (window.mnLenis) {\r\n window.mnLenis.scrollTo(el, { offset: offset || 0 });\r\n } else {\r\n el.scrollIntoView({ behavior: 'auto', block: 'start' }); \/* fallback: reduce-motion \/ Lenis gagal load *\/\r\n }\r\n }\r\n\r\n function bindDetailEvents(){\r\n detailWrap.querySelectorAll('[data-action=\"back\"]').forEach(function(btn){\r\n btn.addEventListener('click', function(){ exitDetail(state.catId); });\r\n });\r\n }\r\n\r\n \/* list -> detail (klik tombol LIHAT) *\/\r\n function enterDetail(id){\r\n var cat = getCat(id);\r\n state.catId = id;\r\n state.mode = 'detail';\r\n setActiveCat(id);\r\n\r\n catList.classList.add('mn-anim-fwd-out');\r\n window.setTimeout(function(){\r\n catList.hidden = true;\r\n catList.classList.remove('mn-anim-fwd-out');\r\n\r\n detailWrap.innerHTML = buildDetailHTML(cat);\r\n bindDetailEvents();\r\n detailWrap.hidden = false;\r\n detailWrap.classList.add('mn-anim-fwd-in');\r\n void detailWrap.offsetWidth; \/* force reflow supaya transisi masuk jalan *\/\r\n detailWrap.classList.remove('mn-anim-fwd-in');\r\n\r\n smoothScrollTo('#mnLayout', -100);\r\n }, 300);\r\n }\r\n\r\n \/* detail -> detail (klik kategori lain di sidebar waktu lagi buka detail) *\/\r\n function swapDetail(id){\r\n var cat = getCat(id);\r\n state.catId = id;\r\n setActiveCat(id);\r\n\r\n detailWrap.classList.add('mn-anim-fade-out');\r\n window.setTimeout(function(){\r\n detailWrap.innerHTML = buildDetailHTML(cat);\r\n bindDetailEvents();\r\n detailWrap.classList.add('mn-anim-fade-in');\r\n detailWrap.classList.remove('mn-anim-fade-out');\r\n void detailWrap.offsetWidth;\r\n detailWrap.classList.remove('mn-anim-fade-in');\r\n }, 300);\r\n }\r\n\r\n \/* detail -> list (tombol kembali), balik scroll ke posisi kategori yang tadi dibuka *\/\r\n function exitDetail(id){\r\n detailWrap.classList.add('mn-anim-back-out');\r\n window.setTimeout(function(){\r\n detailWrap.hidden = true;\r\n detailWrap.classList.remove('mn-anim-back-out');\r\n detailWrap.innerHTML = '';\r\n\r\n state.mode = 'list';\r\n catList.hidden = false;\r\n catList.classList.add('mn-anim-back-in');\r\n void catList.offsetWidth;\r\n catList.classList.remove('mn-anim-back-in');\r\n\r\n setActiveCat(id);\r\n smoothScrollTo('#cat-' + id, -100);\r\n }, 300);\r\n }\r\n\r\n \/* ---- initial state ---- *\/\r\n setActiveCat(state.catId);\r\n refreshReveal();\r\n\r\n})();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Bingxue Indonesia \u2014 Menu Tentang Kami Profil Perusahaan Sejarah Menu Kemitraan Komunitas Artikel Karir Kontak Kami Tentang Kami Profil PerusahaanSejarah Menu Kemitraan Komunitas Artikel Karir Kontak Kami MENU KAMI Tentang Kami Profil Perusahaan Sejarah Menu Kemitraan Komunitas & Artikel Karir \u00a9 Bingxue Indonesia 2026 Hubungi Kami Kebijakan Privasi<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-8881","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>New Menu - Bingxue<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/bingxueindonesia.co.id\/en\/new-menu\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"New Menu - Bingxue\" \/>\n<meta property=\"og:description\" content=\"Bingxue Indonesia \u2014 Menu Tentang Kami Profil Perusahaan Sejarah Menu Kemitraan Komunitas Artikel Karir Kontak Kami Tentang Kami Profil PerusahaanSejarah Menu Kemitraan Komunitas Artikel Karir Kontak Kami MENU KAMI Tentang Kami Profil Perusahaan Sejarah Menu Kemitraan Komunitas & Artikel Karir \u00a9 Bingxue Indonesia 2026 Hubungi Kami Kebijakan Privasi\" \/>\n<meta property=\"og:url\" content=\"https:\/\/bingxueindonesia.co.id\/en\/new-menu\/\" \/>\n<meta property=\"og:site_name\" content=\"Bingxue\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/bingxueindonesia\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-07T06:54:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/bingxueindonesia.co.id\/wp-content\/uploads\/2026\/07\/3@2x.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/bingxueindonesia.co.id\/new-menu\/\",\"url\":\"https:\/\/bingxueindonesia.co.id\/new-menu\/\",\"name\":\"New Menu - Bingxue\",\"isPartOf\":{\"@id\":\"https:\/\/bingxueindonesia.co.id\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/bingxueindonesia.co.id\/new-menu\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/bingxueindonesia.co.id\/new-menu\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/bingxueindonesia.co.id\/wp-content\/uploads\/2026\/07\/3@2x.png\",\"datePublished\":\"2026-08-04T09:41:42+00:00\",\"dateModified\":\"2026-08-07T06:54:31+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/bingxueindonesia.co.id\/new-menu\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/bingxueindonesia.co.id\/new-menu\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/bingxueindonesia.co.id\/new-menu\/#primaryimage\",\"url\":\"https:\/\/bingxueindonesia.co.id\/wp-content\/uploads\/2026\/07\/3@2x.png\",\"contentUrl\":\"https:\/\/bingxueindonesia.co.id\/wp-content\/uploads\/2026\/07\/3@2x.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/bingxueindonesia.co.id\/new-menu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/bingxueindonesia.co.id\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"New Menu\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/bingxueindonesia.co.id\/#website\",\"url\":\"https:\/\/bingxueindonesia.co.id\/\",\"name\":\"Bingxue\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/bingxueindonesia.co.id\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/bingxueindonesia.co.id\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/bingxueindonesia.co.id\/#organization\",\"name\":\"Bingxue\",\"url\":\"https:\/\/bingxueindonesia.co.id\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/bingxueindonesia.co.id\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/bingxueindonesia.co.id\/wp-content\/uploads\/2026\/08\/cropped-1@2x-1.png\",\"contentUrl\":\"https:\/\/bingxueindonesia.co.id\/wp-content\/uploads\/2026\/08\/cropped-1@2x-1.png\",\"width\":1901,\"height\":410,\"caption\":\"Bingxue\"},\"image\":{\"@id\":\"https:\/\/bingxueindonesia.co.id\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/bingxueindonesia\/\",\"https:\/\/www.instagram.com\/bingxue.indonesia\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"New Menu - Bingxue","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/bingxueindonesia.co.id\/en\/new-menu\/","og_locale":"en_US","og_type":"article","og_title":"New Menu - Bingxue","og_description":"Bingxue Indonesia \u2014 Menu Tentang Kami Profil Perusahaan Sejarah Menu Kemitraan Komunitas Artikel Karir Kontak Kami Tentang Kami Profil PerusahaanSejarah Menu Kemitraan Komunitas Artikel Karir Kontak Kami MENU KAMI Tentang Kami Profil Perusahaan Sejarah Menu Kemitraan Komunitas & Artikel Karir \u00a9 Bingxue Indonesia 2026 Hubungi Kami Kebijakan Privasi","og_url":"https:\/\/bingxueindonesia.co.id\/en\/new-menu\/","og_site_name":"Bingxue","article_publisher":"https:\/\/www.facebook.com\/bingxueindonesia\/","article_modified_time":"2026-08-07T06:54:31+00:00","og_image":[{"url":"https:\/\/bingxueindonesia.co.id\/wp-content\/uploads\/2026\/07\/3@2x.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/bingxueindonesia.co.id\/new-menu\/","url":"https:\/\/bingxueindonesia.co.id\/new-menu\/","name":"New Menu - Bingxue","isPartOf":{"@id":"https:\/\/bingxueindonesia.co.id\/#website"},"primaryImageOfPage":{"@id":"https:\/\/bingxueindonesia.co.id\/new-menu\/#primaryimage"},"image":{"@id":"https:\/\/bingxueindonesia.co.id\/new-menu\/#primaryimage"},"thumbnailUrl":"https:\/\/bingxueindonesia.co.id\/wp-content\/uploads\/2026\/07\/3@2x.png","datePublished":"2026-08-04T09:41:42+00:00","dateModified":"2026-08-07T06:54:31+00:00","breadcrumb":{"@id":"https:\/\/bingxueindonesia.co.id\/new-menu\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/bingxueindonesia.co.id\/new-menu\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bingxueindonesia.co.id\/new-menu\/#primaryimage","url":"https:\/\/bingxueindonesia.co.id\/wp-content\/uploads\/2026\/07\/3@2x.png","contentUrl":"https:\/\/bingxueindonesia.co.id\/wp-content\/uploads\/2026\/07\/3@2x.png"},{"@type":"BreadcrumbList","@id":"https:\/\/bingxueindonesia.co.id\/new-menu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/bingxueindonesia.co.id\/"},{"@type":"ListItem","position":2,"name":"New Menu"}]},{"@type":"WebSite","@id":"https:\/\/bingxueindonesia.co.id\/#website","url":"https:\/\/bingxueindonesia.co.id\/","name":"Bingxue","description":"","publisher":{"@id":"https:\/\/bingxueindonesia.co.id\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/bingxueindonesia.co.id\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/bingxueindonesia.co.id\/#organization","name":"Bingxue","url":"https:\/\/bingxueindonesia.co.id\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bingxueindonesia.co.id\/#\/schema\/logo\/image\/","url":"https:\/\/bingxueindonesia.co.id\/wp-content\/uploads\/2026\/08\/cropped-1@2x-1.png","contentUrl":"https:\/\/bingxueindonesia.co.id\/wp-content\/uploads\/2026\/08\/cropped-1@2x-1.png","width":1901,"height":410,"caption":"Bingxue"},"image":{"@id":"https:\/\/bingxueindonesia.co.id\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/bingxueindonesia\/","https:\/\/www.instagram.com\/bingxue.indonesia\/"]}]}},"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/bingxueindonesia.co.id\/en\/wp-json\/wp\/v2\/pages\/8881","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bingxueindonesia.co.id\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bingxueindonesia.co.id\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bingxueindonesia.co.id\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bingxueindonesia.co.id\/en\/wp-json\/wp\/v2\/comments?post=8881"}],"version-history":[{"count":13,"href":"https:\/\/bingxueindonesia.co.id\/en\/wp-json\/wp\/v2\/pages\/8881\/revisions"}],"predecessor-version":[{"id":8981,"href":"https:\/\/bingxueindonesia.co.id\/en\/wp-json\/wp\/v2\/pages\/8881\/revisions\/8981"}],"wp:attachment":[{"href":"https:\/\/bingxueindonesia.co.id\/en\/wp-json\/wp\/v2\/media?parent=8881"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}