{"id":1918,"date":"2025-11-29T21:48:34","date_gmt":"2025-11-29T14:48:34","guid":{"rendered":"https:\/\/synbioid.com\/home-3\/"},"modified":"2026-10-29T08:47:28","modified_gmt":"2026-10-29T01:47:28","slug":"home","status":"publish","type":"page","link":"https:\/\/synbioid.com\/en\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1918\" class=\"elementor elementor-1918\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5cd624f e-flex e-con-boxed e-con e-parent\" data-id=\"5cd624f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fc58cae elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"fc58cae\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<h1 style=\"position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;\">Synbio: Bioteknologi untuk Akuakultur Berkelanjutan<\/h1>\n<!-- SYNBIO HERO \u2014 tempel seluruh isi ke satu widget HTML Elementor.\nModel: unggah file udang terlampir sebagai \/wp-content\/uploads\/3D\/udang.glb,\natau ubah atribut src pada model-viewer ke URL Media Library yang sebenarnya.\nTombol kategori membuka \/products\/ dengan filter kategori dari plugin Synbio WooCommerce Shop.\nWarna dan layout kaca mengikuti hero Haiku. Model asli tidak diubah.\n-->\n<!-- Script resmi Google Model Viewer -->\n<!-- Muat mesin 3D setelah konten awal mendapat kesempatan tampil. -->\n<script>\n(() => {\n  function loadEngine() {\n    if (customElements.get('model-viewer') || document.querySelector('script[data-synbio-model-engine]')) return;\n    const script = document.createElement('script');\n    script.type = 'module';\n    script.src = 'https:\/\/ajax.googleapis.com\/ajax\/libs\/model-viewer\/3.5.0\/model-viewer.min.js';\n    script.dataset.synbioModelEngine = 'true';\n    document.head.append(script);\n  }\n  requestAnimationFrame(() => requestAnimationFrame(() => setTimeout(loadEngine, 250)));\n})();\n<\/script>\n\n<style>\n  \/* HOME: header global mengambang di atas hero, tanpa spacer tambahan. *\/\n  body.synbio-home-hero #sg-header-spacer { display:none !important; height:0 !important; }\n  body.synbio-home-hero { background:#f6f8fb; }\n  \/* Tarik hero melewati jarak atas dari pembungkus Elementor.\n     Jarak header mengambang tetap mengikuti kode header global. *\/\n  #synbio-heroViewport { margin-top:calc(-1 * var(--synbio-top-gap, 0px)); }\n\n  #synbio-shrimpModel::part(default-progress-bar) {\n    display: none !important;\n  }\n\n  \/* Full Hero Container *\/\n  .synbio-hero-viewport {\n    position: relative;\n    width: 100%;\n    min-height: 88vh;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    overflow: hidden;\n    background:\n      radial-gradient(ellipse at 95% 18%, #e5effb 0, transparent 35%),\n      radial-gradient(ellipse at 0% 70%, #eaf0f9 0, transparent 35%),\n      #f6f8fb !important;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n    box-sizing: border-box;\n  }\n\n  \/* Panggung Udang 3D Full *\/\n  .synbio-3d-stage {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    min-height: 400px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    perspective: 1200px;\n    z-index: 2;\n  }\n\n  #synbio-shrimp-body-carrier {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    opacity: 0;\n    transform: translate(220px, 0px) scale(0.75);\n    transition: transform 2.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.8s ease-out;\n    pointer-events: none;\n    transform-style: preserve-3d;\n    will-change: transform;\n  }\n\n  #synbio-shrimp-body-carrier.synbio-shrimp-entered {\n    opacity: 1;\n    transform: translate(0px, 0px) scale(1);\n  }\n\n  \/* ========================================================\n     KARTU KACA DENGAN TRANSISI ULTRA-SMOOTH\n     ======================================================== *\/\n  .synbio-glass-card-ambient {\n    position: absolute;\n    background: rgba(255, 255, 255, 0.72);\n    backdrop-filter: blur(24px);\n    -webkit-backdrop-filter: blur(24px);\n    border: 1px solid rgba(255, 255, 255, 0.95);\n    border-radius: 20px;\n    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(255, 255, 255, 0.8) inset;\n    z-index: 4;\n    text-decoration: none;\n    color: #1e293b;\n    box-sizing: border-box;\n    opacity: 0;\n    transform: translateY(24px);\n    transition: opacity 0.8s cubic-bezier(0.2, 0.9, 0.2, 1),\n                transform 0.9s cubic-bezier(0.2, 0.9, 0.2, 1),\n                box-shadow 0.3s ease,\n                background 0.3s ease;\n  }\n\n  .synbio-hero-viewport.synbio-animate-in .synbio-glass-card-ambient {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  \/* 1. Kartu Kaca Atas Kanan (Explore) *\/\n  \/* Ruang untuk header mengambang; sesuaikan jika tinggi header berubah. *\/\n  .synbio-hero-viewport { --synbio-header-clearance: 110px; }\n\n  .synbio-glass-explore-top {\n    top: max(6%, var(--synbio-header-clearance));\n    right: 8%;\n    padding: 14px 22px;\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    max-width: 360px;\n    transition-delay: 0.15s;\n  }\n\n  .synbio-glass-explore-top:hover {\n    background: rgba(255, 255, 255, 0.9);\n    transform: translateY(-3px);\n    box-shadow: 0 22px 46px rgba(15, 23, 42, 0.1);\n  }\n\n  .synbio-glass-explore-top p {\n    margin: 0;\n    font-size: 13.5px;\n    line-height: 1.45;\n    color: #475569;\n  }\n\n  .synbio-glass-explore-top strong {\n    color: #0f172a;\n    font-weight: 700;\n  }\n\n  .synbio-glass-arrow-btn {\n    width: 34px;\n    height: 34px;\n    border-radius: 50%;\n    background: #ffffff;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-shrink: 0;\n    color: #203E73;\n    box-shadow: 0 4px 12px rgba(32, 62, 115, 0.12);\n    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;\n  }\n\n  .synbio-glass-explore-top:hover .synbio-glass-arrow-btn {\n    transform:none;\n    background: #E82D4B;\n    color: #ffffff;\n  }\n\n  \/* 2. Kartu Kaca Bawah (Articles) *\/\n  .synbio-glass-articles-bottom {\n    bottom: 3.5%;\n    left: 7%;\n    width: 90%;\n    max-width: 480px;\n    padding: 14px 20px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    position: absolute;\n    transition-delay: 0.25s;\n  }\n\n  .synbio-glass-articles-bottom:hover {\n    background: rgba(255, 255, 255, 0.9);\n    box-shadow: 0 22px 46px rgba(15, 23, 42, 0.08);\n  }\n\n  .synbio-articles-content {\n    flex: 1;\n    overflow: hidden;\n  }\n\n  .synbio-articles-header {\n    font-size: 11.5px;\n    font-weight: 800;\n    letter-spacing: 0.8px;\n    color: #203E73;\n    margin-bottom: 6px;\n    text-transform: uppercase;\n  }\n\n  .synbio-articles-list {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n\n  .synbio-articles-list li {\n    font-size: 11.5px;\n    color: #334155;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    line-height: 1.4;\n  }\n\n  .synbio-articles-list li a {\n    color: #334155;\n    text-decoration: none;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: inline-block;\n    max-width: 100%;\n    transition: color 0.2s ease;\n  }\n\n  .synbio-articles-list li a:hover {\n    color: #E82D4B;\n  }\n\n  .synbio-articles-bullet {\n    width: 6px;\n    height: 6px;\n    border-radius: 50%;\n    background-color: #203E73;\n    flex-shrink: 0;\n  }\n\n  .synbio-articles-accent-bar {\n    width: 3.5px;\n    height: 44px;\n    background: #E82D4B;\n    border-radius: 99px;\n    margin-left: 14px;\n    align-self: center;\n    flex-shrink: 0;\n    box-shadow: 0 0 8px rgba(232, 45, 75, 0.4);\n  }\n\n  \/* ========================================================\n     3. BAR PETUNJUK: DI ATAS ARTIKEL, TEPAT DI TENGAH, BERJARAK\n     ======================================================== *\/\n  .synbio-hint-instruction {\n    position: absolute;\n    bottom: calc(3.5% + 118px);\n    left: 50%;\n    transform: translateX(-50%) translateY(14px);\n    background: rgba(255, 255, 255, 0.85);\n    backdrop-filter: blur(18px);\n    -webkit-backdrop-filter: blur(18px);\n    border: 1px solid rgba(255, 255, 255, 0.95);\n    padding: 7px 18px;\n    border-radius: 99px;\n    font-size: 11.5px;\n    font-weight: 600;\n    color: #1e3a8a;\n    z-index: 5;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);\n    opacity: 0;\n    white-space: nowrap;\n    transition: opacity 0.8s cubic-bezier(0.2, 0.9, 0.2, 1) 0.35s,\n                transform 0.8s cubic-bezier(0.2, 0.9, 0.2, 1) 0.35s;\n    pointer-events: none;\n  }\n\n  .synbio-hero-viewport.synbio-animate-in .synbio-hint-instruction {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n  }\n\n  .synbio-hint-instruction svg {\n    width: 14px;\n    height: 14px;\n    stroke: #E82D4B;\n    flex-shrink: 0;\n  }\n\n  \/* ========================================================\n     TITIK PIN MINIMALIS (HOTSPOT 3D)\n     ======================================================== *\/\n  .synbio-shrimp-pin {\n    \/* Tetap tampil penuh di depan model, termasuk saat udang berbalik. *\/\n    --min-hotspot-opacity: 1;\n    --max-hotspot-opacity: 1;\n    opacity: 1 !important;\n    position: relative;\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    background-color: #E82D4B;\n    border: 2px solid #ffffff;\n    box-shadow: 0 0 8px rgba(232, 45, 75, 0.9), 0 2px 4px rgba(0, 0, 0, 0.3);\n    cursor: pointer;\n    pointer-events: auto !important;\n    padding: 0;\n    margin: 0;\n    outline: none;\n    z-index: 30;\n    display: block;\n    transition: transform 0.2s ease, background-color 0.2s ease;\n    animation: pinPulse 2s infinite ease-in-out;\n  }\n\n  @keyframes pinPulse {\n    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(232, 45, 75, 0.7); }\n    70% { transform: scale(1.15); box-shadow: 0 0 0 5px rgba(232, 45, 75, 0); }\n    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(232, 45, 75, 0); }\n  }\n\n  .synbio-shrimp-pin:hover {\n    transform: scale(1.4) !important;\n    background-color: #203E73;\n  }\n\n  \/* ========================================================\n     POPUP KACA DIAGNOSIS\n     ======================================================== *\/\n  .synbio-diagnosis-overlay {\n    position: fixed;\n    inset: 0;\n    background: rgba(15, 23, 42, 0.45);\n    backdrop-filter: blur(8px);\n    -webkit-backdrop-filter: blur(8px);\n    z-index: 999999;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0;\n    visibility: hidden;\n    transition: opacity 0.35s ease, visibility 0.35s;\n    padding: 16px;\n    box-sizing: border-box;\n  }\n\n  .synbio-diagnosis-overlay.synbio-is-active {\n    opacity: 1;\n    visibility: visible;\n  }\n\n  .synbio-glass-diagnosis-box {\n    width: 100%;\n    max-width: 440px;\n    max-height: 88vh;\n    overflow-y: auto;\n    background: rgba(255, 255, 255, 0.94);\n    backdrop-filter: blur(28px);\n    -webkit-backdrop-filter: blur(28px);\n    border: 1px solid rgba(255, 255, 255, 0.98);\n    border-radius: 24px;\n    padding: 22px 24px;\n    box-shadow: 0 28px 65px rgba(32, 62, 115, 0.22);\n    transform: translateY(22px) scale(0.95);\n    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);\n    position: relative;\n    box-sizing: border-box;\n  }\n\n  .synbio-diagnosis-overlay.synbio-is-active .synbio-glass-diagnosis-box {\n    transform: translateY(0) scale(1);\n  }\n\n  .synbio-diag-header-row {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: 12px;\n    margin-bottom: 12px;\n  }\n\n  .synbio-diag-badge {\n    display: inline-block;\n    background: #eff6ff;\n    color: #203E73;\n    font-size: 11px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.8px;\n    padding: 5px 12px;\n    border-radius: 99px;\n    border: 1px solid #dbeafe;\n  }\n\n  .synbio-diag-close-btn {\n    width: 36px !important;\n    height: 36px !important;\n    min-width: 36px !important;\n    min-height: 36px !important;\n    border-radius: 50% !important;\n    background: #f1f5f9;\n    border: none;\n    color: #475569;\n    display: flex !important;\n    align-items: center !important;\n    justify-content: center !important;\n    cursor: pointer;\n    flex-shrink: 0 !important;\n    padding: 0 !important;\n    margin: 0 !important;\n    transition: all 0.25s ease;\n  }\n\n  .synbio-diag-close-btn svg {\n    width: 18px !important;\n    height: 18px !important;\n    stroke: currentColor;\n    stroke-width: 2.6;\n    display: block;\n  }\n\n  .synbio-diag-close-btn:hover {\n    background: #E82D4B !important;\n    color: #ffffff !important;\n    transform: rotate(90deg);\n  }\n\n  .synbio-diag-title {\n    margin: 0 0 10px 0;\n    font-size: 18px;\n    font-weight: 800;\n    color: #0f172a;\n    line-height: 1.35;\n  }\n\n  .synbio-diag-section-title {\n    font-size: 11px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.6px;\n    color: #E82D4B;\n    margin: 12px 0 6px 0;\n  }\n\n  .synbio-diag-list {\n    margin: 0 0 14px 0;\n    padding-left: 18px;\n    font-size: 12.5px;\n    color: #475569;\n    line-height: 1.45;\n  }\n\n  .synbio-diag-solution-card {\n    background: rgba(32, 62, 115, 0.05);\n    border: 1px solid rgba(32, 62, 115, 0.15);\n    border-radius: 14px;\n    padding: 12px 16px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n    margin-top: 10px;\n  }\n\n  .synbio-solution-info h5 {\n    margin: 0;\n    font-size: 13px;\n    font-weight: 700;\n    color: #203E73;\n  }\n\n  .synbio-solution-info p {\n    margin: 2px 0 0 0;\n    font-size: 11px;\n    color: #64748b;\n  }\n\n  .synbio-diag-action-btn {\n    background: #203E73;\n    color: #ffffff !important;\n    font-size: 12px;\n    font-weight: 700;\n    padding: 8px 14px;\n    border-radius: 8px;\n    text-decoration: none;\n    white-space: nowrap;\n    flex-shrink: 0;\n  }\n\n  .synbio-diag-action-btn:hover {\n    background: #E82D4B;\n  }\n\n\n  \/* Layout tunggal: ukuran hero mengikuti ruang layar setelah header. *\/\n  .synbio-hero-viewport {\n    height:var(--synbio-screen-height,100svh); min-height:0; max-height:none;\n    display:grid; grid-template-columns:minmax(0,1fr);\n    grid-template-areas:'intro' 'model' 'hint' 'articles';\n    grid-template-rows:auto minmax(0,1fr) auto 130px;\n    gap:10px; padding:calc(var(--synbio-header-overlap,90px) + 10px) max(5%, calc((100% - 1200px) \/ 2)) 14px;\n    align-items:stretch; justify-content:stretch; overflow:hidden;\n  }\n  .synbio-hero-viewport * { box-sizing:border-box; }\n  .synbio-glass-card-ambient { background:rgba(255,255,255,.72); border-radius:20px; }\n  .synbio-glass-explore-top {\n    grid-area:intro; position:relative; inset:auto; justify-self:end;\n    width:340px; max-width:100%; padding:14px 18px; display:flex; gap:16px;\n    align-items:center; text-decoration:none; border-radius:22px;\n  }\n  .synbio-glass-explore-top p { margin:0; font-size:14px; line-height:1.4; font-weight:400; }\n  .synbio-glass-arrow-btn { width:34px; height:34px; flex:0 0 34px; padding:0; background:transparent; border:1px solid rgba(32,62,115,.18); color:#203e73; box-shadow:none; transition:background .45s ease,color .45s ease,border-color .45s ease; }\n  .synbio-3d-stage {\n    grid-area:model; position:relative; inset:auto; width:100%; height:100%;\n    min-height:0; transform:none; align-self:stretch; overflow:visible;\n  }\n  #synbio-shrimp-body-carrier { min-height:0; }\n  #synbio-shrimpModel { pointer-events:auto; }\n  .synbio-products-box {\n    grid-area:model; position:relative; inset:auto; width:140px; max-width:100%; max-height:100%; align-self:center; min-height:0;\n    justify-self:start; padding:9px; z-index:6; overflow:visible;\n  }\n  .synbio-products-grid { display:grid; grid-template-columns:1fr; gap:4px; max-height:inherit; overflow-y:auto; scrollbar-width:thin; }\n  .synbio-category-trigger { font-family:inherit; font-size:13px; font-weight:500; line-height:1.35; min-height:38px; width:100%; padding:7px 5px; margin:0; border:0; border-radius:14px; color:#203E73; background:transparent; cursor:pointer; }\n  .synbio-category-trigger:hover,.synbio-category-trigger[aria-expanded=\"true\"] { background:rgba(32,62,115,.08); }\n  .synbio-category-description { position:absolute; top:0; bottom:auto; left:calc(100% + 10px); width:280px; max-width:calc(90vw - 158px); padding:18px; margin:0; border:1px solid white; border-radius:20px; background:rgba(250,252,255,.96); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:0 12px 32px rgba(32,62,115,.14); max-height:220px; overflow-y:auto; }\n  .synbio-category-description[hidden] { display:none; }\n  .synbio-popover-title { display:block; margin-bottom:8px; color:#203E73; font-size:16px; }\n  .synbio-category-description p { margin:0; font-size:14px; color:#516077; line-height:1.55; }\n  .synbio-popover-button { display:inline-block; margin-top:12px; padding:9px 16px; border-radius:99px; color:white; background:#203E73; font-size:14px; text-decoration:none; }\n  .synbio-hint-instruction { grid-area:hint; position:relative; inset:auto; justify-self:center; width:max-content; max-width:100%; padding:6px 14px; font-size:12px; line-height:1.3; white-space:normal; text-align:center; transform:translateY(14px); }\n  .synbio-hero-viewport.synbio-animate-in .synbio-hint-instruction { transform:translateY(0); }\n  .synbio-glass-articles-bottom { grid-area:articles; position:relative; inset:auto; width:760px; max-width:100%; height:100%; min-height:0; justify-self:center; padding:13px 18px; align-items:stretch; }\n  .synbio-articles-content { display:flex; flex-direction:column; width:100%; min-width:0; min-height:0; overflow:hidden; }\n  .synbio-articles-header { font-size:15px; line-height:21px; margin-bottom:6px; flex-shrink:0; }\n  .synbio-articles-list { display:block; flex:1; min-height:0; height:auto; overflow-y:auto; overflow-x:hidden; padding-right:12px; scrollbar-width:thin; scrollbar-color:#E82D4B rgba(32,62,115,.1); scrollbar-gutter:stable; overscroll-behavior:contain; touch-action:pan-y; }\n  .synbio-articles-list li { min-height:26px; font-size:14px; line-height:21px; padding:2px 0; }\n  .synbio-articles-list li a { min-width:0; }\n  .synbio-articles-list::-webkit-scrollbar { width:5px; }\n  .synbio-articles-list::-webkit-scrollbar-thumb { background:#E82D4B; border-radius:99px; }\n  .synbio-articles-list::-webkit-scrollbar-track { background:rgba(32,62,115,.1); border-radius:99px; }\n  .synbio-articles-retry { font:inherit; font-size:11px; background:#203E73; color:white; border:0; border-radius:99px; padding:5px 10px; cursor:pointer; }\n  .synbio-category-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }\n  .synbio-category-grid a { padding:10px; border:1px solid #dce5f2; border-radius:12px; text-decoration:none; color:#203E73; font-size:11px; }\n  .synbio-brand-signoff { text-align:center; color:#64748b; font-size:10px; }\n  .synbio-category-trigger:focus-visible,.synbio-popover-button:focus-visible,.synbio-articles-list:focus-visible { outline:2px solid #203E73; outline-offset:2px; }\n  @media (max-width:768px) {\n    .synbio-hero-viewport { grid-template-rows:auto minmax(0,1fr) auto 104px; padding:calc(var(--synbio-header-overlap,80px) + 8px) 20px 10px; gap:8px; }\n    .synbio-glass-explore-top { width:340px; max-width:100%; justify-self:end; padding:14px 16px; gap:12px; }\n    .synbio-glass-explore-top p { font-size:12px; }\n    .synbio-glass-arrow-btn { width:34px; height:34px; }\n    .synbio-products-box { width:132px; padding:6px; justify-self:start; border-radius:16px; }\n    .synbio-category-description { width:260px; max-width:calc(100vw - 182px); padding:14px; max-height:220px; }\n    .synbio-category-trigger { font-size:12px; min-height:36px; padding:6px 4px; }\n    .synbio-hint-instruction { font-size:12px; padding:6px 11px; }\n    .synbio-glass-articles-bottom { width:100%; max-width:100%; padding:10px 14px; border-radius:18px; }\n    .synbio-articles-header { font-size:14px; margin-bottom:4px; }\n    .synbio-articles-list li { font-size:13px; min-height:24px; line-height:20px; }\n    .synbio-glass-diagnosis-box { padding:18px; max-height:85svh; }\n  }\n  @media (max-height:560px) {\n    .synbio-hero-viewport { grid-template-rows:auto minmax(0,1fr) auto 78px; gap:5px; padding-bottom:6px; }\n    .synbio-glass-explore-top { padding:7px 12px; }\n    .synbio-glass-explore-top p { font-size:11px; }\n    .synbio-glass-articles-bottom { padding:7px 12px; }\n    .synbio-category-trigger { min-height:28px; }\n  }\n  @media (prefers-reduced-motion:reduce) { .synbio-shrimp-pin { animation:none; } }\n\n  #synbio-mouth-anchor { display:block; width:2px; height:2px; opacity:0; pointer-events:none; }\n  .synbio-glass-explore-top {\n    background:rgba(255,255,255,.84); border:1px solid rgba(32,62,115,.09);\n    box-shadow:0 8px 24px rgba(24,48,85,.09),0 2px 5px rgba(24,48,85,.035);\n  }\n  .synbio-glass-explore-top p { flex:1; min-width:0; }\n  .synbio-glass-explore-top strong { display:block; font-size:20px; line-height:1.2; letter-spacing:.045em; color:#203e73; margin-bottom:5px; }\n  .synbio-tagline { display:block; font-size:13px; line-height:1.45; }\n  .synbio-glass-arrow-btn svg { display:block; width:16px; height:16px; flex:none; }\n  .synbio-glass-explore-top:hover .synbio-glass-arrow-btn,\n  .synbio-glass-explore-top:focus-visible .synbio-glass-arrow-btn { background:#e82d4b; border-color:#e82d4b; color:white; transform:none; }\n  .synbio-popover-button { background:transparent; color:#203e73; border:1px solid rgba(32,62,115,.18); font-size:13px; transition:background .45s ease,color .45s ease,border-color .45s ease; }\n  .synbio-popover-button:hover,.synbio-popover-button:focus-visible { background:#e82d4b; border-color:#e82d4b; color:white; }\n  .synbio-animate-in .synbio-glass-explore-top p,\n  .synbio-animate-in .synbio-products-grid,\n  .synbio-animate-in .synbio-articles-content { animation:synbio-copy-in .95s cubic-bezier(.22,1,.36,1) .22s both; }\n  .synbio-products-box { transition-delay:.12s; }\n  .synbio-glass-articles-bottom { transition-delay:.22s; }\n  @keyframes synbio-copy-in { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:translateY(0); } }\n  @media(max-width:768px) {\n    .synbio-glass-explore-top { padding:14px 17px; }\n    .synbio-glass-explore-top strong { font-size:19px; }\n    .synbio-tagline { font-size:12px; }\n    .synbio-category-description p { font-size:14px; }\n  }\n  @media(max-width:360px) {\n    .synbio-products-box { width:124px; }\n    .synbio-category-trigger { font-size:13px; }\n    .synbio-category-description { max-width:calc(100vw - 174px); padding:12px; }\n  }\n  @media(max-height:650px) {\n    .synbio-products-grid { gap:2px; }\n    .synbio-category-trigger { min-height:36px; padding:6px 3px; }\n    .synbio-glass-explore-top { padding:10px 14px; }\n  }\n  \/* Mobile: kartu kecil dengan ruang lebih luas untuk udang. *\/\n  @media (max-width:768px) {\n    .synbio-glass-explore-top { width:240px; max-width:100%; justify-self:end; padding:10px 12px; gap:10px; border-radius:18px; }\n    .synbio-glass-explore-top strong { font-size:17px; margin-bottom:3px; }\n    .synbio-tagline { font-size:11.5px; line-height:1.4; }\n    .synbio-glass-arrow-btn { width:30px; height:30px; flex-basis:30px; }\n    .synbio-glass-arrow-btn svg { width:14px; height:14px; }\n    .synbio-products-box { width:104px; padding:5px; border-radius:16px; }\n    .synbio-products-grid { gap:2px; }\n    .synbio-category-trigger { font-size:11px; min-height:32px; padding:6px 3px; }\n    .synbio-category-description { max-width:calc(100vw - 154px); padding:12px; }\n  }\n  .synbio-feed { position:absolute; width:18px; height:10px; margin:0; z-index:3; pointer-events:none; transform:translate(-50%,-50%); filter:drop-shadow(1px 2px 1px rgba(60,38,18,.16)); }\n  .synbio-feed svg { display:block; width:100%; height:100%; overflow:visible; }\n  .synbio-feed.is-eaten svg { animation:synbio-feed-eaten .22s ease-in forwards; }\n  @keyframes synbio-feed-eaten { to { transform:scale(0); opacity:0; } }\n  @media(prefers-reduced-motion:reduce) {\n    .synbio-hero-viewport .synbio-glass-card-ambient { opacity:1; transform:none; transition:none; }\n    .synbio-animate-in .synbio-glass-explore-top p,.synbio-animate-in .synbio-products-grid,.synbio-animate-in .synbio-articles-content { animation:none; }\n  }\n\n\n  \/* SEARCH \u2014 ukuran ikon dan inset kanan dibagi dengan kartu SYNBIO. *\/\n  .synbio-intro {\n    --intro-icon-size:34px; --intro-inset:18px; --intro-radius:22px;\n    grid-area:intro; justify-self:end; width:340px; max-width:100%;\n    display:flex; flex-direction:column; align-items:flex-end; gap:10px; z-index:6;\n  }\n  .synbio-intro .synbio-glass-explore-top {\n    width:100%; padding-left:var(--intro-inset); padding-right:var(--intro-inset);\n  }\n  .synbio-intro .synbio-glass-arrow-btn {\n    width:var(--intro-icon-size); height:var(--intro-icon-size); flex-basis:var(--intro-icon-size);\n  }\n  .synbio-hero-search {\n    width:calc(var(--intro-icon-size) + 2 * var(--intro-inset)); max-width:100%; height:54px;\n    position:relative; display:flex; align-items:center; margin:0;\n    border:1px solid transparent; border-radius:var(--intro-radius);\n    background:transparent; box-shadow:none;\n    transition:width .55s cubic-bezier(.22,1,.36,1),background .4s ease,border-color .4s ease,box-shadow .4s ease;\n  }\n  .synbio-hero-search:is(:hover,:focus-within,.is-open) {\n    width:100%; background:rgba(255,255,255,.84); border-color:rgba(32,62,115,.09);\n    box-shadow:0 8px 24px rgba(24,48,85,.09),0 2px 5px rgba(24,48,85,.035);\n    backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);\n  }\n  #synbio-search-query {\n    width:100%; min-width:0; height:100%;\n    padding:0 calc(var(--intro-inset) + var(--intro-icon-size) + 12px) 0 var(--intro-inset);\n    margin:0; border:0; border-radius:var(--intro-radius); background:transparent;\n    color:#203e73; font:inherit; font-size:13px; outline:none; opacity:0; visibility:hidden;\n    transition:opacity .25s ease .1s; box-shadow:none;\n  }\n  #synbio-search-query::placeholder { color:#64748b; opacity:1; }\n  .synbio-hero-search:is(:hover,:focus-within,.is-open) #synbio-search-query { opacity:1; visibility:visible; }\n  .synbio-search-toggle {\n    position:absolute; right:calc(var(--intro-inset) - 1px); top:50%; transform:translateY(-50%);\n    display:grid; place-items:center; width:var(--intro-icon-size); height:var(--intro-icon-size);\n    min-width:0; padding:0; margin:0; border:1px solid rgba(32,62,115,.18); border-radius:50%;\n    background:transparent; color:#203e73; cursor:pointer; box-shadow:none;\n    transition:color .35s ease,background .35s ease,border-color .35s ease;\n  }\n  .synbio-search-toggle svg { width:16px; height:16px; }\n  .synbio-search-toggle:hover { background:#e82d4b; color:white; border-color:#e82d4b; }\n  .synbio-search-toggle:focus-visible { outline:2px solid #203e73; outline-offset:3px; }\n  @media(max-width:768px) {\n    .synbio-intro { --intro-icon-size:30px; --intro-inset:12px; --intro-radius:18px; width:240px; gap:8px; }\n    .synbio-hero-search { height:50px; }\n    .synbio-search-toggle svg { width:14px; height:14px; }\n    #synbio-search-query { font-size:16px; }\n  }\n  @media(hover:none) {\n    .synbio-hero-search:hover:not(.is-open):not(:focus-within) {\n      width:calc(var(--intro-icon-size) + 2 * var(--intro-inset));\n      background:transparent; border-color:transparent; box-shadow:none; backdrop-filter:none;\n    }\n  }\n  @media(prefers-reduced-motion:reduce) { .synbio-hero-search,#synbio-search-query { transition:none; } }\n\n\n\/* Optimasi HP: efek kaca tetap ada, blur lebih ringan. *\/\n@media (max-width:768px) {\n  #synbio-heroViewport .synbio-glass-card-ambient,\n  #synbio-heroViewport .synbio-hint-instruction,\n  #synbio-heroViewport .synbio-category-description {\n    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);\n  }\n}\n@media (prefers-reduced-motion:reduce) {\n  #synbio-heroViewport .synbio-shrimp-pin { animation:none; }\n}\n\n\/* Search sejajar dengan panah dan mengembang selebar kartu atas. *\/\n.synbio-hero-search {\n  width:calc(var(--intro-icon-size) + 2 * var(--intro-inset));\n  height:54px; border-radius:var(--intro-radius);\n  border:1px solid transparent; background:transparent; box-shadow:none;\n}\n.synbio-hero-search:is(:hover,:focus-within,.is-open) {\n  width:100%; border-radius:var(--intro-radius);\n  background:rgba(255,255,255,.84); border-color:rgba(32,62,115,.09);\n  box-shadow:0 8px 24px rgba(24,48,85,.09);\n  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);\n}\n.synbio-search-toggle {\n  right:calc(var(--intro-inset) - 1px);\n  width:var(--intro-icon-size); height:var(--intro-icon-size);\n  border:1px solid rgba(32,62,115,.18); border-radius:50%; background:transparent;\n}\n.synbio-search-toggle svg { width:16px; height:16px; }\n#synbio-search-query {\n  padding:0 calc(var(--intro-inset) + var(--intro-icon-size) + 12px) 0 var(--intro-inset);\n  border-radius:var(--intro-radius);\n}\n@media(max-width:768px) {\n  .synbio-hero-search { height:50px; }\n  .synbio-search-toggle svg { width:14px; height:14px; }\n}\n@media(hover:none) {\n  .synbio-hero-search:hover:not(.is-open):not(:focus-within) {\n    width:calc(var(--intro-icon-size) + 2 * var(--intro-inset));\n    background:transparent; border-color:transparent; box-shadow:none; backdrop-filter:none;\n  }\n}\n\n\/* Search berukuran sendiri; pusat ikon tetap satu garis dengan panah. *\/\n.synbio-hero-search {\n  --search-size:44px;\n  width:calc(var(--intro-icon-size) + 2 * var(--intro-inset));\n  height:54px;\n}\n.synbio-search-toggle {\n  width:var(--search-size); height:var(--search-size);\n  right:calc(var(--intro-inset) - 1px + (var(--intro-icon-size) - var(--search-size)) \/ 2);\n  background:#f8fafc; border:1px solid rgba(32,62,115,.18);\n  box-shadow:0 6px 18px rgba(32,62,115,.08);\n}\n.synbio-search-toggle svg { width:18px; height:18px; }\n.synbio-search-toggle:hover { background:#e82d4b; color:#fff; border-color:#e82d4b; }\n#synbio-search-query {\n  padding-right:calc(var(--intro-inset) + (var(--intro-icon-size) + var(--search-size)) \/ 2 + 12px);\n}\n@media(max-width:768px) {\n  .synbio-hero-search { --search-size:40px; height:50px; }\n  .synbio-search-toggle svg { width:18px; height:18px; }\n}\n\n\/* Mobile: intro lebih ringkas, kategori horizontal di atas petunjuk. *\/\n@media (max-width:768px) {\n  #synbio-heroViewport {\n    grid-template-areas:'intro' 'model' 'categories' 'hint' 'articles';\n    grid-template-rows:auto minmax(0,1fr) auto auto 104px;\n    padding-top:calc(var(--synbio-header-overlap,80px) - 12px);\n  }\n  #synbio-heroViewport .synbio-intro {\n    width:220px; --intro-inset:11px; --intro-icon-size:28px;\n    --intro-radius:16px; gap:6px;\n  }\n  #synbio-heroViewport .synbio-glass-explore-top {\n    padding-top:8px; padding-bottom:8px; gap:8px; border-radius:16px;\n  }\n  #synbio-heroViewport .synbio-glass-explore-top strong {\n    font-size:15px; margin-bottom:3px;\n  }\n  #synbio-heroViewport .synbio-tagline { font-size:10.5px; line-height:1.4; }\n  #synbio-heroViewport .synbio-products-box {\n    grid-area:categories; width:100%; max-width:360px; max-height:none;\n    top:-5px;\n    justify-self:center; align-self:stretch; padding:5px; border-radius:16px;\n    z-index:8;\n  }\n  #synbio-heroViewport .synbio-products-grid {\n    grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px;\n    max-height:none; overflow:visible;\n  }\n  #synbio-heroViewport .synbio-category-trigger {\n    min-height:38px; padding:7px 2px; font-size:clamp(10px,2.8vw,12px);\n    line-height:1.25; border-radius:12px;\n  }\n  #synbio-heroViewport .synbio-category-description {\n    top:auto; bottom:calc(100% + 10px); left:0; right:0;\n    width:100%; max-width:100%; padding:14px; border-radius:16px;\n    max-height:min(220px,38svh);\n    animation:synbio-category-mobile-in .22s ease-out both;\n  }\n  \/* Jembatan hover di sela kartu dan popup. *\/\n  #synbio-heroViewport .synbio-products-box::before {\n    content:''; position:absolute; left:0; right:0; bottom:100%; height:10px;\n  }\n  #synbio-heroViewport .synbio-popover-title { font-size:14px; }\n  #synbio-heroViewport .synbio-category-description p { font-size:12px; }\n  #synbio-heroViewport .synbio-popover-button { font-size:12px; padding:8px 14px; }\n}\n@keyframes synbio-category-mobile-in {\n  from { opacity:0; transform:translateY(6px); }\n  to { opacity:1; transform:translateY(0); }\n}\n@media (max-width:768px) and (max-height:560px) {\n  #synbio-heroViewport { grid-template-rows:auto minmax(0,1fr) auto auto 78px; }\n  #synbio-heroViewport .synbio-category-trigger { min-height:32px; }\n}\n@media (prefers-reduced-motion:reduce) {\n  #synbio-heroViewport .synbio-category-description { animation:none; }\n}\n\n<\/style>\n\n<div class=\"synbio-hero-viewport\" id=\"synbio-heroViewport\">\n\n  <div class=\"synbio-intro\">\n  <!-- Slogan ringkas, seluruh kartu menuju Tentang Kami -->\n  <a class=\"synbio-glass-card-ambient synbio-glass-explore-top\" href=\"https:\/\/synbioid.com\/tentangkami\/\" aria-label=\"Kenali Synbio \u2014 Tentang Kami\">\n    <p><strong>SYNBIO<\/strong><span class=\"synbio-tagline\">Where Science Sustains Balance<\/span><\/p>\n    <span class=\"synbio-glass-arrow-btn\" aria-hidden=\"true\"><svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><path d=\"m9 5 7 7-7 7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><\/span>\n  <\/a>\n\n  <!-- Pencarian seluruh website: produk, artikel, dan halaman lainnya. -->\n  <form class=\"synbio-hero-search\" id=\"synbio-heroSearch\" role=\"search\" action=\"\/\" method=\"get\">\n    <input id=\"synbio-search-query\" type=\"search\" name=\"s\" placeholder=\"find anything...\" aria-label=\"Cari di website Synbio\" autocomplete=\"off\" maxlength=\"200\" required>\n    <button class=\"synbio-search-toggle\" type=\"submit\" aria-label=\"Buka pencarian\" aria-controls=\"synbio-search-query\" aria-expanded=\"false\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.7\" aria-hidden=\"true\"><circle cx=\"10.5\" cy=\"10.5\" r=\"6.5\"\/><path d=\"m15.5 15.5 5 5\" stroke-linecap=\"round\"\/><\/svg>\n    <\/button>\n  <\/form>\n  <\/div>\n\n  <!-- 2. BAR PETUNJUK KLIK IKAN TERPISAH (DI TENGAH, DI ATAS KOTAK ARTIKEL) -->\n  <div class=\"synbio-hint-instruction\">\n    <svg fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2.2\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122\"\/><\/svg>\n    Sentuh titik untuk eksplorasi\n  <\/div>\n\n  <!-- 3. KARTU KACA BAWAH (ARTICLES OTOMATIS) -->\n  <div class=\"synbio-glass-card-ambient synbio-glass-articles-bottom\">\n    <div class=\"synbio-articles-content\">\n      <div class=\"synbio-articles-header\">SynbioPedia<\/div>\n      <ul class=\"synbio-articles-list\" id=\"synbio-auto-articles\" tabindex=\"0\" aria-label=\"Lima artikel terbaru SynbioPedia\" aria-busy=\"true\">\n        <li><span class=\"synbio-articles-bullet\"><\/span> <a href=\"\/?s=budidaya\">Memuat artikel budidaya...<\/a><\/li>\n      <\/ul>\n    <\/div>\n\n  <\/div>\n\n\n  <!-- Hover, fokus keyboard, atau ketuk kategori untuk membaca keterangannya. -->\n  <div class=\"synbio-glass-card-ambient synbio-products-box\">\n    <div class=\"synbio-products-grid\">\n      <button type=\"button\" class=\"synbio-category-trigger\" data-category=\"0\" aria-expanded=\"false\" aria-controls=\"synbio-category-description\">Probiotics<\/button>\n      <button type=\"button\" class=\"synbio-category-trigger\" data-category=\"1\" aria-expanded=\"false\" aria-controls=\"synbio-category-description\">Feed Additive<\/button>\n      <button type=\"button\" class=\"synbio-category-trigger\" data-category=\"2\" aria-expanded=\"false\" aria-controls=\"synbio-category-description\">Enzymes<\/button>\n      <button type=\"button\" class=\"synbio-category-trigger\" data-category=\"3\" aria-expanded=\"false\" aria-controls=\"synbio-category-description\">Minerals<\/button>\n    <\/div>\n    <div id=\"synbio-category-description\" class=\"synbio-category-description\" hidden aria-live=\"polite\">\n      <strong class=\"synbio-popover-title\"><\/strong><p><\/p><a class=\"synbio-popover-button\" href=\"\/products\/?category=probiotics#katalog\">Lihat Produk<\/a>\n    <\/div>\n  <\/div>\n\n  <!-- STAGE MODEL 3D UDANG -->\n  <div class=\"synbio-3d-stage\" id=\"synbio-shrimpStageWrapper\">\n    <div id=\"synbio-shrimp-body-carrier\">\n      \n      <model-viewer \n        id=\"synbio-shrimpModel\"\n        src=\"\/wp-content\/uploads\/3D\/udang.glb\" \n        alt=\"Model Udang 3D Synbio\"\n        interaction-prompt=\"none\"\n        autoplay\n        shadow-intensity=\"1\"\n        camera-orbit=\"-180deg 90deg 105%\"\n        camera-target=\"auto auto auto\"\n        interpolation-decay=\"120\"\n        style=\"width: 100%; height: 100%; background-color: transparent; outline: none;\">\n        \n        <div slot=\"progress-bar\" style=\"display: none;\"><\/div>\n        <span id=\"synbio-mouth-anchor\" slot=\"hotspot-mouth\" data-surface=\"0 0 24 25 26 0.333333 0.333333 0.333334\" aria-hidden=\"true\"><\/span>\n\n        <!-- 1. TITIK KEPALA (Koordinat Kalibrasi Presisi) -->\n        <button class=\"synbio-shrimp-pin\" slot=\"hotspot-head\" \n                data-surface=\"0 0 102 103 104 0.333333 0.333333 0.333334\" \n                type=\"button\" onclick=\"openSynbioDiagnosis('head')\" \n                aria-label=\"Pengamatan Kepala\"><\/button>\n\n        <!-- 2. TITIK TUBUH (Koordinat Kalibrasi Presisi) -->\n        <button class=\"synbio-shrimp-pin\" slot=\"hotspot-body\" \n                data-surface=\"2 0 108 109 110 0.333333 0.333333 0.333334\" \n                type=\"button\" onclick=\"openSynbioDiagnosis('body')\" \n                aria-label=\"Pengamatan Tubuh\"><\/button>\n\n        <!-- 3. TITIK EKOR (Koordinat Kalibrasi Presisi) -->\n        <button class=\"synbio-shrimp-pin\" slot=\"hotspot-tail\" \n                data-surface=\"6 0 102 103 104 0.333333 0.333333 0.333334\" \n                type=\"button\" onclick=\"openSynbioDiagnosis('tail')\" \n                aria-label=\"Pengamatan Ekor\"><\/button>\n\n      <\/model-viewer>\n\n    <\/div>\n  <\/div>\n\n<\/div>\n\n<!-- ================= POPUP MODAL DIAGNOSIS KACA ================= -->\n<div class=\"synbio-diagnosis-overlay\" id=\"synbio-diagOverlay\" onclick=\"closeSynbioDiagnosisOnBackdrop(event)\">\n  <div class=\"synbio-glass-diagnosis-box\" id=\"synbio-diagModalBox\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"synbio-modalTitle\">\n    \n    <div class=\"synbio-diag-header-row\">\n      <div class=\"synbio-diag-badge\" id=\"synbio-modalBadge\">Panduan Pengamatan<\/div>\n      <button class=\"synbio-diag-close-btn\" onclick=\"closeSynbioDiagnosis()\" aria-label=\"Tutup\">\n        <svg fill=\"none\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\"\/><\/svg>\n      <\/button>\n    <\/div>\n\n    <h3 class=\"synbio-diag-title\" id=\"synbio-modalTitle\">Pengamatan Udang<\/h3>\n    \n    <div class=\"synbio-diag-section-title\">Hal yang Perlu Diamati:<\/div>\n    <ul class=\"synbio-diag-list\" id=\"synbio-modalSymptoms\"><\/ul>\n\n    <div class=\"synbio-diag-section-title\">Solusi Bioteknologi Synbio:<\/div>\n    <div class=\"synbio-diag-solution-card\">\n      <div class=\"synbio-solution-info\">\n        <h5 id=\"synbio-modalProductName\">Eksplorasi Produk Synbio<\/h5>\n        <p id=\"synbio-modalProductDesc\">Pelajari informasi produk budidaya.<\/p>\n      <\/div>\n      <a href=\"\/products\/?category=probiotics#katalog\" id=\"synbio-modalProductLink\" class=\"synbio-diag-action-btn\">Lihat Produk<\/a>\n    <\/div>\n    <nav class=\"synbio-category-grid\" aria-label=\"Kategori produk Synbio\">\n      <a href=\"\/products\/?category=probiotics#katalog\">Probiotics<\/a>\n      <a href=\"\/products\/?category=feed-additive#katalog\">Feed Additive<\/a>\n      <a href=\"\/products\/?category=enzymes#katalog\">Enzymes<\/a>\n      <a href=\"\/products\/?category=minerals#katalog\">Minerals<\/a>\n    <\/nav>\n    <p class=\"synbio-brand-signoff\">Synbio \u2014 Where Science Sustains Balance<\/p>\n  <\/div>\n<\/div>\n\n<script>\n(() => {\n\n  const diseaseData = {\"head\": {\"badge\": \"Area: Kepala & Insang\", \"title\": \"Pengamatan Kepala & Insang Udang\", \"symptoms\": [\"Amati warna dan kebersihan insang serta kondisi kepala.\", \"Catat aktivitas udang dan respons terhadap pakan.\", \"Bandingkan hasil pengamatan dengan catatan kualitas air tambak.\"], \"product\": \"Eksplorasi Produk Synbio\", \"desc\": \"Pelajari pilihan produk dan petunjuk penggunaannya.\", \"link\": \"\/products\/?category=probiotics#katalog\"}, \"body\": {\"badge\": \"Area: Tubuh & Pencernaan\", \"title\": \"Pengamatan Tubuh Udang\", \"symptoms\": [\"Amati warna tubuh, keutuhan kulit, dan keterisian usus.\", \"Catat konsumsi pakan dan kondisi udang saat sampling.\", \"Simpan dokumentasi perubahan untuk evaluasi budidaya.\"], \"product\": \"Eksplorasi Produk Synbio\", \"desc\": \"Temukan informasi produk untuk kebutuhan budidaya.\", \"link\": \"\/products\/#katalog\"}, \"tail\": {\"badge\": \"Area: Ekor & Gerakan\", \"title\": \"Pengamatan Ekor Udang\", \"symptoms\": [\"Amati keutuhan ekor dan gerakan kaki renang.\", \"Catat perubahan aktivitas dan respons udang saat sampling.\", \"Evaluasi hasil pengamatan bersama kondisi air dan dasar tambak.\"], \"product\": \"Eksplorasi Produk Synbio\", \"desc\": \"Pelajari produk pengelolaan lingkungan budidaya.\", \"link\": \"\/products\/#katalog\"}};\n\n  let lastFocus = null;\n  const diagOverlay = document.getElementById('synbio-diagOverlay');\n  const modalBadge = document.getElementById('synbio-modalBadge');\n  const modalTitle = document.getElementById('synbio-modalTitle');\n  const modalSymptoms = document.getElementById('synbio-modalSymptoms');\n  const modalProductName = document.getElementById('synbio-modalProductName');\n  const modalProductDesc = document.getElementById('synbio-modalProductDesc');\n  const modalProductLink = document.getElementById('synbio-modalProductLink');\n\n  window.openSynbioDiagnosis = function(part) {\n    const data = diseaseData[part];\n    if (!data) return;\n\n    modalBadge.innerText = data.badge;\n    modalTitle.innerText = data.title;\n    modalProductName.innerText = data.product;\n    modalProductDesc.innerText = data.desc;\n    modalProductLink.href = data.link;\n\n    modalSymptoms.innerHTML = data.symptoms.map(s => `<li>${s}<\/li>`).join('');\n\n    lastFocus = document.activeElement;\n    diagOverlay.classList.add('synbio-is-active');\n    diagOverlay.querySelector('button').focus();\n  };\n\n  window.closeSynbioDiagnosis = function() {\n    diagOverlay.classList.remove('synbio-is-active');\n    if(lastFocus) lastFocus.focus();\n  };\n\n  window.closeSynbioDiagnosisOnBackdrop = function(e) {\n    if (e.target === diagOverlay) {\n      closeSynbioDiagnosis();\n    }\n  };\n\n  diagOverlay.addEventListener('keydown', e => {\n    if(e.key==='Escape') window.closeSynbioDiagnosis();\n    if(e.key==='Tab') { const items=[...diagOverlay.querySelectorAll('button,a[href]')]; const first=items[0],last=items[items.length-1]; if(e.shiftKey&&document.activeElement===first){e.preventDefault();last.focus();} else if(!e.shiftKey&&document.activeElement===last){e.preventDefault();first.focus();} }\n  });\n  async function loadSynbioArticles() {\n    const list = document.getElementById('synbio-auto-articles');\n    const query = 'per_page=5&orderby=date&order=desc&status=publish&_fields=title,link,date';\n    const endpoints = ['\/wp-json\/wp\/v2\/posts?' + query, '\/?rest_route=\/wp\/v2\/posts&' + query];\n    function message(text) {\n      const li = document.createElement('li');\n      li.textContent = text;\n      list.replaceChildren(li);\n    }\n    list.setAttribute('aria-busy', 'true');\n    try {\n      let posts = null;\n      for (const endpoint of endpoints) {\n        const controller = new AbortController();\n        const timeout = setTimeout(() => controller.abort(), 8000);\n        try {\n          const response = await fetch(endpoint, { signal: controller.signal, cache: 'default' });\n          if (!response.ok) throw new Error('Articles unavailable');\n          const data = await response.json();\n          if (!Array.isArray(data)) throw new Error('Invalid article list');\n          posts = data;\n          break;\n        } catch (error) {\n          \/\/ Try the alternate WordPress REST route if pretty permalinks fail.\n        } finally { clearTimeout(timeout); }\n      }\n      if (posts === null) throw new Error('Articles unavailable');\n      if (!posts.length) { message('Belum ada artikel yang diterbitkan.'); return; }\n      list.replaceChildren();\n      for (const post of posts.slice(0, 5)) {\n        if (!post.link || !post.title || typeof post.title.rendered !== 'string') continue;\n        let url;\n        try { url = new URL(post.link, location.origin); } catch { continue; }\n        if (!['https:', 'http:'].includes(url.protocol)) continue;\n        const li = document.createElement('li');\n        const bullet = document.createElement('span');\n        const link = document.createElement('a');\n        bullet.className = 'synbio-articles-bullet';\n        bullet.setAttribute('aria-hidden', 'true');\n        link.href = url.href;\n        link.textContent = new DOMParser().parseFromString(post.title.rendered, 'text\/html').body.textContent;\n        link.title = link.textContent;\n        li.append(bullet, link);\n        list.append(li);\n      }\n      if (!list.children.length) message('Belum ada artikel yang dapat ditampilkan.');\n    } catch (error) {\n      message('Artikel belum dapat dimuat.');\n      const li = document.createElement('li');\n      const retry = document.createElement('button');\n      retry.type = 'button';\n      retry.className = 'synbio-articles-retry';\n      retry.textContent = 'Coba lagi';\n      retry.addEventListener('click', loadSynbioArticles);\n      li.append(retry); list.append(li);\n    } finally { list.setAttribute('aria-busy', 'false'); }\n  }\n\n  \/\/ One shared description keeps the category box light and compact.\n  const categoryData = [[\"Probiotics\", \"probiotics\", \"Strain probiotik aktif untuk menjaga keseimbangan mikrobiom air dan saluran pencernaan organisme budidaya.\"], [\"Feed Additive\", \"feed-additive\", \"Suplemen pakan berkualitas tinggi untuk meningkatkan pertumbuhan dan konversi pakan secara optimal.\"], [\"Enzymes\", \"enzymes\", \"Formulasi enzim spesifik untuk mempercepat penguraian bahan organik dan meningkatkan kualitas air.\"], [\"Minerals\", \"minerals\", \"Mineral esensial untuk mendukung metabolisme, pertumbuhan, dan ketahanan organisme budidaya.\"]];\n  const categoryBox = document.querySelector('.synbio-products-box');\n  const categoryButtons = [...categoryBox.querySelectorAll('.synbio-category-trigger')];\n  const categoryPanel = document.getElementById('synbio-category-description');\n  let categoryCloseTimer;\n  function showCategory(index) {\n    clearTimeout(categoryCloseTimer);\n    const item = categoryData[index];\n    categoryButtons.forEach((button, i) => button.setAttribute('aria-expanded', String(i === index)));\n    categoryPanel.querySelector('.synbio-popover-title').textContent = item[0];\n    categoryPanel.querySelector('p').textContent = item[2];\n    categoryPanel.querySelector('a').href = '\/products\/?category=' + encodeURIComponent(item[1]) + '#katalog';\n    categoryPanel.hidden = false;\n  }\n  function closeCategory() {\n    categoryButtons.forEach(button => button.setAttribute('aria-expanded', 'false'));\n    categoryPanel.hidden = true;\n  }\n  categoryButtons.forEach((button, index) => {\n    button.addEventListener('pointerenter', e => { if (e.pointerType === 'mouse') showCategory(index); });\n    button.addEventListener('focus', () => showCategory(index));\n    button.addEventListener('click', () => showCategory(index));\n  });\n  categoryBox.addEventListener('pointerenter', () => clearTimeout(categoryCloseTimer));\n  categoryBox.addEventListener('pointerleave', () => {\n    categoryCloseTimer = setTimeout(() => {\n      if (!categoryBox.contains(document.activeElement)) closeCategory();\n    }, 250);\n  });\n  categoryBox.addEventListener('focusout', () => {\n    setTimeout(() => { if (!categoryBox.contains(document.activeElement) && !categoryBox.matches(':hover')) closeCategory(); }, 0);\n  });\n  categoryBox.addEventListener('keydown', e => { if (e.key === 'Escape') closeCategory(); });\n  document.addEventListener('pointerdown', e => { if (!categoryBox.contains(e.target)) closeCategory(); });\n\n  \/\/ Kinematika Udang Organik\n  const modelViewer = document.querySelector('#synbio-shrimpModel');\n  const carrier = document.querySelector('#synbio-shrimp-body-carrier');\n  const viewport = document.querySelector('#synbio-heroViewport');\n\n  document.body.classList.add('synbio-home-hero');\n\n  \/\/ SEARCH: hover\/fokus membuka; sentuhan pertama membuka, berikutnya mencari.\n  const searchForm = document.getElementById('synbio-heroSearch');\n  const searchField = document.getElementById('synbio-search-query');\n  const searchToggle = searchForm.querySelector('button');\n  function openHeroSearch() {\n    searchForm.classList.add('is-open');\n    searchToggle.setAttribute('aria-expanded', 'true');\n    searchToggle.setAttribute('aria-label', 'Cari');\n  }\n  function closeHeroSearch() {\n    searchForm.classList.remove('is-open');\n    searchToggle.setAttribute('aria-expanded', 'false');\n    searchToggle.setAttribute('aria-label', 'Buka pencarian');\n  }\n  searchForm.addEventListener('pointerenter', e => { if (e.pointerType === 'mouse') openHeroSearch(); });\n  searchForm.addEventListener('pointerleave', () => { if (!searchForm.contains(document.activeElement)) closeHeroSearch(); });\n  searchForm.addEventListener('focusin', openHeroSearch);\n  searchForm.addEventListener('focusout', () => { setTimeout(() => { if (!searchForm.contains(document.activeElement)) closeHeroSearch(); }, 0); });\n  searchToggle.addEventListener('click', e => {\n    if (!searchField.value.trim()) { e.preventDefault(); openHeroSearch(); searchField.focus(); }\n  });\n  searchForm.addEventListener('submit', e => {\n    searchField.value = searchField.value.trim();\n    if (!searchField.value) { e.preventDefault(); openHeroSearch(); searchField.focus(); }\n  });\n  searchForm.addEventListener('keydown', e => {\n    if (e.key === 'Escape') { e.preventDefault(); document.activeElement.blur(); closeHeroSearch(); }\n  });\n  document.addEventListener('pointerdown', e => {\n    if (!searchForm.contains(e.target)) {\n      if (searchForm.contains(document.activeElement)) document.activeElement.blur();\n      closeHeroSearch();\n    }\n  });\n  \/\/ END SEARCH\n\n\n  \/\/ Fit header + hero within the initial viewport, without locking page scrolling.\n  \/\/ Minimum header zone can be tuned here when a theme uses a custom header.\n  const synbioHeaderSelector = '#sg-header, header, .elementor-location-header, [data-elementor-type=\"header\"], #masthead, #wpadminbar, .hfe-site-header, .elementor-sticky--active, .elementor-widget-nav-menu';\n  let fitFrame = 0;\n  function fitSynbioScreen() {\n    cancelAnimationFrame(fitFrame);\n    fitFrame = requestAnimationFrame(() => {\n      if (!viewport.isConnected) return;\n      const screenHeight = window.innerHeight;\n      const headers = [...document.querySelectorAll(synbioHeaderSelector)];\n      const adminBar = document.getElementById('wpadminbar');\n      const adminHeight = adminBar ? adminBar.getBoundingClientRect().height : 0;\n      \/\/ Ukur posisi asli sebelum kompensasi agar resize tidak menambah offset.\n      \/\/ Toolbar admin WordPress tetap mendapat ruangnya sendiri.\n      const previousGap = parseFloat(viewport.style.getPropertyValue('--synbio-top-gap')) || 0;\n      const originalTop = viewport.getBoundingClientRect().top + window.scrollY + previousGap;\n      const topGap = Math.max(0, originalTop - adminHeight);\n      viewport.style.setProperty('--synbio-top-gap', topGap + 'px');\n      const pageTop = Math.max(adminHeight, originalTop - topGap);\n      const minimumHeaderZone = (window.matchMedia(\"(max-width:768px)\").matches ? 130 : 120) + adminHeight;\n      let headerBottom = Math.max(pageTop, minimumHeaderZone);\n      for (const header of headers) {\n        if (viewport.contains(header) || header.contains(viewport)) continue;\n        \/\/ Dropdown tidak boleh mengecilkan hero ketika dibuka.\n        const bar = header.id === 'sg-header' ? header.querySelector('.sg-bar') : null;\n        const rect = (bar || header).getBoundingClientRect();\n        if (!rect.height || getComputedStyle(header).display === 'none') continue;\n        const bottom = rect.bottom + (getComputedStyle(header).position === 'fixed' ? 0 : window.scrollY);\n        if (rect.top < screenHeight \/ 2 && bottom > pageTop && bottom < screenHeight * .6) headerBottom = Math.max(headerBottom, bottom);\n      }\n      viewport.style.setProperty('--synbio-screen-height', Math.max(1, screenHeight - pageTop) + 'px');\n      viewport.style.setProperty('--synbio-header-overlap', Math.max(0, headerBottom - pageTop) + 'px');\n    });\n  }\n  fitSynbioScreen();\n  window.addEventListener('resize', fitSynbioScreen, { passive:true });\n  window.addEventListener('load', fitSynbioScreen, { once:true });\n  if (window.visualViewport) window.visualViewport.addEventListener('resize', fitSynbioScreen, { passive:true });\n  if ('ResizeObserver' in window) {\n    const headerObserver = new ResizeObserver(fitSynbioScreen);\n    document.querySelectorAll(synbioHeaderSelector).forEach(el => headerObserver.observe(el));\n  }\n  if (document.fonts) document.fonts.ready.then(fitSynbioScreen);\n  \/\/ Elementor may insert or position its header after the initial load.\n  setTimeout(fitSynbioScreen, 350);\n  setTimeout(fitSynbioScreen, 1200);\n\n  let isReady = false;\n  const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;\n  requestAnimationFrame(() => requestAnimationFrame(() => viewport.classList.add('synbio-animate-in')));\n  setTimeout(loadSynbioArticles, 500);\n  modelViewer.addEventListener('error', () => {\n    const hint=viewport.querySelector('.synbio-hint-instruction');\n    hint.textContent='Model udang belum tersedia. Periksa URL file GLB.';\n  });\n\n  \/\/ GLB asli: kepala mengarah ke sumbu -X.\n  \/\/ Kamera -90 derajat melihat kepala dari depan.\n  \/\/ Kiri: 0 derajat; tengah: -90 derajat; kanan: -180 derajat.\n  const defaultTheta = -180; \/\/ Posisi awal dan istirahat: menghadap kanan.\n  const frontTheta = -90; \/\/ Posisi kursor tengah: menghadap depan.\n  const defaultPhi = 90;\n\n  let currentTheta = defaultTheta;\n  let currentPhi = defaultPhi;\n  let targetTheta = defaultTheta;\n  let targetPhi = defaultPhi;\n\n  let targetX = 0, targetY = 0;\n  let headX = 0, headY = 0;\n  let bodyX = 0, bodyY = 0;\n\n  let impulseVX = 0;\n  let impulseVY = 0;\n  let impulseOffsetDistX = 0;\n  let impulseOffsetDistY = 0;\n  let bodySnapAngle = 0;\n\n  let rollAngle = 0;\n  let waveClock = 0;\n\n  let isInputActive = false;\n  let idleTimeout = null;\n  const idleDelay = 2500;\n\n\n  if (modelViewer) {\n    modelViewer.addEventListener('load', () => {\n      const animations = modelViewer.availableAnimations;\n      if (animations && animations.length > 0) {\n        modelViewer.animationName = animations[0];\n        modelViewer.play?.();\n      }\n\n      setTimeout(() => {\n        carrier.classList.add('synbio-shrimp-entered');\n      }, 250);\n\n      setTimeout(() => {\n        requestAnimationFrame(() => requestAnimationFrame(() => viewport.classList.add('synbio-animate-in')));\n\n      }, 450);\n\n      setTimeout(() => {\n        isReady = true;\n        carrier.style.transition = 'none';\n        if (!reducedMotion) runOrganicKinematics();\n        else modelViewer.pause?.();\n      }, 2500);\n    });\n  }\n\n  \/\/ Independent sinking pellets; mouth anchor follows the animated GLB surface.\n  let feeding = null;\n  const pellets = [];\n  let feedPauseUntil = 0;\n  let feedSerial = 0;\n  let lastMotionTime = 0;\n  const mouthAnchor = document.getElementById('synbio-mouth-anchor');\n  function mouthPoint() {\n    const rect = mouthAnchor.getBoundingClientRect();\n    if (!rect.width || !rect.height) return null;\n    return { x:rect.left + rect.width \/ 2, y:rect.top + rect.height \/ 2 };\n  }\n  function clearFeed() {\n    pellets.forEach(p => p.element.remove());\n    pellets.length = 0; feeding = null; feedPauseUntil = 0;\n    isInputActive = false;\n  }\n  function dropFeed(clientX, clientY) {\n    clearTimeout(idleTimeout);\n    const rect = viewport.getBoundingClientRect();\n    const articleTop = document.querySelector('.synbio-glass-articles-bottom').getBoundingClientRect().top - rect.top;\n    const now = performance.now();\n    for (let i = 0; i < 3 && pellets.length < 48; i++) {\n      const x = Math.max(12, Math.min(rect.width - 12, clientX - rect.left + (i-1)*12));\n      const y = Math.max(12, Math.min(rect.height - 12, clientY - rect.top + Math.random()*5));\n      const element = document.createElement('span');\n      element.className = 'synbio-feed'; element.setAttribute('aria-hidden','true');\n      \/\/ Faceted extruded feed cylinder: dry brown sides, cut end, tiny grain flecks.\n      element.innerHTML = '<svg viewBox=\"0 0 36 20\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path fill=\"#765034\" d=\"M5 3 27 2 33 6 33 14 27 18 5 17 1 12 1 7Z\"\/><path fill=\"#b58a55\" d=\"m5 3 22-1 5 4-23 1Z\"\/><path fill=\"#967044\" d=\"m9 7 23-1 1 8-24 1Z\"\/><path fill=\"#62432d\" d=\"m9 15 24-1-6 4-22-1Z\"\/><path fill=\"#b79869\" d=\"m5 3 4 4v8l-4 2-4-5V7Z\"\/><path fill=\"#89613e\" d=\"m4 7 3 1v5l-3-1Z\"\/><path fill=\"#c09a67\" d=\"m13 8 3 1-2 2Zm10 3 2-1 1 2Z\"\/><path fill=\"#775134\" d=\"m19 6 2 1-2 2Zm8 7 2-1 1 2Z\"\/><\/svg>';\n      const scale = .72 + Math.random()*.35;\n      element.style.width = (18*scale)+'px'; element.style.height = (10*scale)+'px';\n      viewport.append(element);\n      const pellet = {element,x,y,vx:(Math.random()-.5)*16,vy:5+Math.random()*8,angle:Math.random()*150-75,spin:(Math.random()-.5)*35,\n        floor:Math.min(rect.height-12,Math.max(y,articleTop-26)),started:now,id:++feedSerial,settled:false};\n      pellets.push(pellet); drawPellet(pellet);\n    }\n    impulseVX = impulseVY = impulseOffsetDistX = impulseOffsetDistY = bodySnapAngle = 0;\n    headX = bodyX; headY = bodyY; isInputActive = true;\n    modelViewer.timeScale = 1.6;\n  }\n  function drawPellet(p) {\n    p.element.style.left=p.x+'px'; p.element.style.top=p.y+'px';\n    p.element.style.transform='translate(-50%,-50%) rotate('+p.angle+'deg)';\n  }\n  function updatePellets(dt, now) {\n    const width=viewport.clientWidth;\n    for (let i=pellets.length-1;i>=0;i--) {\n      const p=pellets[i];\n      if(now-p.started>45000) { p.element.remove(); pellets.splice(i,1); if(feeding===p) feeding=null; continue; }\n      if(!p.settled) {\n        \/\/ Gravity with water resistance: accelerate gently to a slow sinking speed.\n        p.vy=Math.min(42,p.vy+65*dt); p.vx*=Math.exp(-1.4*dt);\n        p.x=Math.max(10,Math.min(width-10,p.x+p.vx*dt)); p.y+=p.vy*dt; p.angle+=p.spin*dt;\n        if(p.y>=p.floor) {p.y=p.floor;p.vy=0;p.settled=true;}\n        drawPellet(p);\n      }\n    }\n    if(!feeding && pellets.length && now>=feedPauseUntil) {\n      const mouth=mouthPoint(), rect=viewport.getBoundingClientRect();\n      const mx=mouth?mouth.x-rect.left:rect.width\/2, my=mouth?mouth.y-rect.top:rect.height\/2;\n      feeding=pellets.reduce((a,b)=>Math.hypot(a.x-mx,a.y-my)<Math.hypot(b.x-mx,b.y-my)?a:b);\n      feeding.theta=feeding.x>=mx?-180:0;\n    }\n  }\n  function eatFeed() {\n    if(!feeding) return;\n    const target=feeding; pellets.splice(pellets.indexOf(target),1); feeding=null;\n    target.element.classList.add('is-eaten'); setTimeout(()=>target.element.remove(),240);\n    feedPauseUntil=performance.now()+320;\n    headX=targetX=bodyX; headY=targetY=bodyY; modelViewer.timeScale=1.8;\n  }\n  window.addEventListener('resize', clearFeed, { passive:true });\n  modelViewer.addEventListener('error', clearFeed);\n\n  function handlePointerMove(clientX, clientY) {\n    if (!isReady || reducedMotion || pellets.length || performance.now() < feedPauseUntil) return;\n\n    isInputActive = true;\n    clearTimeout(idleTimeout);\n    idleTimeout = setTimeout(() => {\n      isInputActive = false;\n    }, idleDelay);\n\n    const rect = viewport.getBoundingClientRect();\n    const normX = Math.max(-1, Math.min(1, ((clientX-rect.left) \/ rect.width) * 2 - 1));\n    const normY = Math.max(-1, Math.min(1, ((clientY-rect.top) \/ rect.height) * 2 - 1));\n\n    const isMobile = window.innerWidth <= 768;\n    const rangeX = isMobile ? 25 : 100;\n    const rangeY = isMobile ? 16 : 55;\n\n    targetX = normX * rangeX;\n    targetY = normY * rangeY;\n\n    targetTheta = frontTheta - normX * 90;\n    targetPhi = defaultPhi - (normY * 18);\n  }\n\n  viewport.addEventListener('mouseleave', () => { isInputActive = false; });\n  viewport.addEventListener('touchend', () => { isInputActive = false; }, { passive: true });\n  viewport.addEventListener('touchcancel', () => { isInputActive = false; }, { passive: true });\n\n  viewport.addEventListener('touchstart', (e) => {\n    if (e.touches.length) handlePointerMove(e.touches[0].clientX, e.touches[0].clientY);\n  }, { passive: true });\n\n  viewport.addEventListener('mousemove', (e) => {\n    handlePointerMove(e.clientX, e.clientY);\n  });\n\n  viewport.addEventListener('touchmove', (e) => {\n    if (e.touches && e.touches.length > 0) {\n      handlePointerMove(e.touches[0].clientX, e.touches[0].clientY);\n    }\n  }, { passive: true });\n\n  viewport.addEventListener('click', (e) => {\n    if (!isReady || reducedMotion || diagOverlay.classList.contains('synbio-is-active') || e.target.closest('a, button, input, select, textarea, form, [role=button]') || e.target.closest('.synbio-glass-diagnosis-box') || e.target.closest('.synbio-shrimp-pin') || e.target.closest('.synbio-glass-card-ambient') || e.target.closest('.synbio-hint-instruction')) return;\n\n    const hit = modelViewer.positionAndNormalFromPoint(e.clientX, e.clientY);\n\n    if (hit) {\n      const xPos = hit.position.x;\n      if (xPos < 0.4) {\n        openSynbioDiagnosis('head');\n      } else if (xPos > 1.5) {\n        openSynbioDiagnosis('tail');\n      } else {\n        openSynbioDiagnosis('body');\n      }\n    } else {\n      dropFeed(e.clientX, e.clientY);\n    }\n  });\n\n  \/\/ Hentikan pekerjaan animasi ketika tab\/hero tidak terlihat.\n  let heroVisible = true;\n  let motionFrame = 0;\n  function resumeMotion() {\n    if (isReady && !reducedMotion && !document.hidden && heroVisible && !motionFrame) {\n      lastMotionTime = 0;\n      motionFrame = requestAnimationFrame(runOrganicKinematics);\n    }\n  }\n  document.addEventListener('visibilitychange', () => {\n    if (document.hidden) { modelViewer.pause?.(); }\n    else if (heroVisible) { if (!reducedMotion) modelViewer.play?.(); resumeMotion(); }\n  });\n  if ('IntersectionObserver' in window) {\n    new IntersectionObserver(entries => {\n      heroVisible = entries[0].isIntersecting;\n      if (!heroVisible) modelViewer.pause?.();\n      else { if (isReady && !reducedMotion && !document.hidden) modelViewer.play?.(); resumeMotion(); }\n    }, {threshold: 0}).observe(viewport);\n  }\n  function runOrganicKinematics() {\n    motionFrame = 0;\n    if (!viewport.isConnected || document.hidden || !heroVisible) return;\n    if (isReady && !document.hidden) {\n      const now=performance.now();\n      const dt=Math.min(.05,Math.max(0,(now-(lastMotionTime || now-16.67))\/1000));\n      lastMotionTime=now;\n      if(!diagOverlay.classList.contains('synbio-is-active')) updatePellets(dt,now);\n      waveClock += dt*2.4;\n\n      const chasing = !!feeding;\n      const eating = performance.now() < feedPauseUntil;\n      const idleWave = (isInputActive || chasing || eating) ? 0 : Math.sin(waveClock * 2.2) * 3.5;\n      const idleFloat = (chasing || eating) ? 0 : Math.cos(waveClock * 1.5) * 5;\n      if (chasing) {\n        targetTheta = feeding.theta;\n        targetPhi = defaultPhi;\n      } else if (!eating && !isInputActive) {\n        targetTheta = defaultTheta;\n        targetPhi = defaultPhi;\n        targetX = 0;\n        targetY = 0;\n      }\n\n      headX += (targetX - headX) * 0.07;\n      headY += (targetY - headY) * 0.07;\n\n      const prevBodyX = bodyX;\n      if (feeding && !diagOverlay.classList.contains('synbio-is-active')) {\n        const mouth = mouthPoint();\n        const rect = viewport.getBoundingClientRect();\n        if (mouth) {\n          const dx = rect.left + feeding.x - mouth.x;\n          const dy = rect.top + feeding.y - mouth.y;\n          const distance = Math.hypot(dx, dy);\n          if (distance < 11 && performance.now() - feeding.started > 350) {\n            eatFeed();\n          } else {\n            const speed = Math.min(240*dt, distance * (1-Math.exp(-2.8*dt)));\n            bodyX += dx \/ Math.max(1, distance) * speed;\n            bodyY += dy \/ Math.max(1, distance) * speed;\n            headX = targetX = bodyX; headY = targetY = bodyY;\n          }\n        }\n\n      } else if (!eating && !feeding) {\n        bodyX += (headX - bodyX) * 0.035;\n        bodyY += ((headY + idleFloat) - bodyY) * 0.035;\n      }\n      const velocityX = bodyX - prevBodyX;\n      const targetRoll = (chasing || eating) ? 0 : velocityX * 2.8;\n      rollAngle += (targetRoll - rollAngle) * 0.1;\n      if (!feeding && !eating && feedPauseUntil) {\n        feedPauseUntil = 0;\n        isInputActive = false;\n      }\n\n      currentTheta += ((targetTheta + idleWave) - currentTheta) * 0.07;\n      currentPhi += (targetPhi - currentPhi) * 0.07;\n\n      modelViewer.cameraOrbit = `${currentTheta}deg ${currentPhi}deg 105%`;\n\n      impulseOffsetDistX += impulseVX;\n      impulseOffsetDistY += impulseVY;\n\n      impulseVX *= 0.88;\n      impulseVY *= 0.88;\n      impulseOffsetDistX *= 0.94;\n      impulseOffsetDistY *= 0.94;\n      bodySnapAngle *= 0.85;\n\n      if (modelViewer.timeScale > 1.0) {\n        modelViewer.timeScale += (1.0 - modelViewer.timeScale) * 0.03;\n      }\n\n      const finalX = bodyX + impulseOffsetDistX;\n      const finalY = bodyY + impulseOffsetDistY;\n\n      carrier.style.transform = `\n        translate3d(${finalX}px, ${finalY}px, 0px) \n        rotateZ(${rollAngle + bodySnapAngle}deg) \n        scale(1)\n      `;\n    }\n\n    motionFrame = requestAnimationFrame(runOrganicKinematics);\n  }\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Synbio: Bioteknologi untuk Akuakultur Berkelanjutan SYNBIOWhere Science Sustains Balance Sentuh titik untuk eksplorasi SynbioPedia Memuat artikel budidaya&#8230; Probiotics Feed Additive Enzymes Minerals Lihat Produk Panduan Pengamatan Pengamatan Udang Hal yang Perlu Diamati: Solusi Bioteknologi Synbio: Eksplorasi Produk Synbio Pelajari informasi produk budidaya. Lihat Produk Probiotics Feed Additive Enzymes Minerals Synbio \u2014 Where Science Sustains Balance<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_yoast_wpseo_focuskw":"Bioteknologi Aquaculture","_yoast_wpseo_title":"Synbio | Bioteknologi untuk Akuakultur Berkelanjutan","_yoast_wpseo_metadesc":"Temukan bagaimana Bioteknologi Aquaculture dapat mengubah metode budidaya menjadi lebih produktif dan berkelanjutan.","site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"unboxed","site-sidebar-style":"unboxed","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":"","rank_math_title":"","rank_math_description":"","rank_math_focus_keyword":"","_aioseop_title":"","_aioseop_description":""},"class_list":["post-1918","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Synbio | Bioteknologi untuk Akuakultur Berkelanjutan<\/title>\n<meta name=\"description\" content=\"Temukan bagaimana Bioteknologi Aquaculture dapat mengubah metode budidaya menjadi lebih produktif dan berkelanjutan.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/synbioid.com\/en\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Synbio | Bioteknologi untuk Akuakultur Berkelanjutan\" \/>\n<meta property=\"og:description\" content=\"Temukan bagaimana Bioteknologi Aquaculture dapat mengubah metode budidaya menjadi lebih produktif dan berkelanjutan.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/synbioid.com\/en\/\" \/>\n<meta property=\"og:site_name\" content=\"Synbio\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-29T01:47:28+00:00\" \/>\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=\"26 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/synbioid.com\\\/\",\"url\":\"https:\\\/\\\/synbioid.com\\\/\",\"name\":\"Synbio | Bioteknologi untuk Akuakultur Berkelanjutan\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/synbioid.com\\\/#website\"},\"datePublished\":\"2025-11-29T14:48:34+00:00\",\"dateModified\":\"2026-10-29T01:47:28+00:00\",\"description\":\"Temukan bagaimana Bioteknologi Aquaculture dapat mengubah metode budidaya menjadi lebih produktif dan berkelanjutan.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/synbioid.com\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/synbioid.com\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/synbioid.com\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Beranda\",\"item\":\"https:\\\/\\\/synbioid.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Home\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/synbioid.com\\\/#website\",\"url\":\"https:\\\/\\\/synbioid.com\\\/\",\"name\":\"Synbio\",\"description\":\"Science Sustains Balance\",\"publisher\":{\"@id\":\"https:\\\/\\\/synbioid.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/synbioid.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/synbioid.com\\\/#organization\",\"name\":\"Synbio\",\"url\":\"https:\\\/\\\/synbioid.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/synbioid.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/synbioid.com\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/cropped-cropped-Synbio-Logo-01-2.png\",\"contentUrl\":\"https:\\\/\\\/synbioid.com\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/cropped-cropped-Synbio-Logo-01-2.png\",\"width\":1877,\"height\":624,\"caption\":\"Synbio\"},\"image\":{\"@id\":\"https:\\\/\\\/synbioid.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Synbio | Bioteknologi untuk Akuakultur Berkelanjutan","description":"Temukan bagaimana Bioteknologi Aquaculture dapat mengubah metode budidaya menjadi lebih produktif dan berkelanjutan.","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:\/\/synbioid.com\/en\/","og_locale":"en_US","og_type":"article","og_title":"Synbio | Bioteknologi untuk Akuakultur Berkelanjutan","og_description":"Temukan bagaimana Bioteknologi Aquaculture dapat mengubah metode budidaya menjadi lebih produktif dan berkelanjutan.","og_url":"https:\/\/synbioid.com\/en\/","og_site_name":"Synbio","article_modified_time":"2026-10-29T01:47:28+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"26 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/synbioid.com\/","url":"https:\/\/synbioid.com\/","name":"Synbio | Bioteknologi untuk Akuakultur Berkelanjutan","isPartOf":{"@id":"https:\/\/synbioid.com\/#website"},"datePublished":"2025-11-29T14:48:34+00:00","dateModified":"2026-10-29T01:47:28+00:00","description":"Temukan bagaimana Bioteknologi Aquaculture dapat mengubah metode budidaya menjadi lebih produktif dan berkelanjutan.","breadcrumb":{"@id":"https:\/\/synbioid.com\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/synbioid.com\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/synbioid.com\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Beranda","item":"https:\/\/synbioid.com\/"},{"@type":"ListItem","position":2,"name":"Home"}]},{"@type":"WebSite","@id":"https:\/\/synbioid.com\/#website","url":"https:\/\/synbioid.com\/","name":"Synbio","description":"Science Sustains Balance","publisher":{"@id":"https:\/\/synbioid.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/synbioid.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/synbioid.com\/#organization","name":"Synbio","url":"https:\/\/synbioid.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/synbioid.com\/#\/schema\/logo\/image\/","url":"https:\/\/synbioid.com\/wp-content\/uploads\/2025\/11\/cropped-cropped-Synbio-Logo-01-2.png","contentUrl":"https:\/\/synbioid.com\/wp-content\/uploads\/2025\/11\/cropped-cropped-Synbio-Logo-01-2.png","width":1877,"height":624,"caption":"Synbio"},"image":{"@id":"https:\/\/synbioid.com\/#\/schema\/logo\/image\/"}}]}},"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/synbioid.com\/en\/wp-json\/wp\/v2\/pages\/1918","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/synbioid.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/synbioid.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/synbioid.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/synbioid.com\/en\/wp-json\/wp\/v2\/comments?post=1918"}],"version-history":[{"count":498,"href":"https:\/\/synbioid.com\/en\/wp-json\/wp\/v2\/pages\/1918\/revisions"}],"predecessor-version":[{"id":3377,"href":"https:\/\/synbioid.com\/en\/wp-json\/wp\/v2\/pages\/1918\/revisions\/3377"}],"wp:attachment":[{"href":"https:\/\/synbioid.com\/en\/wp-json\/wp\/v2\/media?parent=1918"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}