:root{color-scheme:light}
:root{--bg:#fffaf0;--card:#fff;--ink:#23301f;--mut:#5f6b58;--g:#37b34a;--o:#f36524;--line:#eadfc8;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-behavior:smooth;scroll-padding-top:calc(72px + env(safe-area-inset-top,0px))}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 Nunito,system-ui,sans-serif}
h1,h2,h3{font-family:Fredoka,Nunito,sans-serif;line-height:1.15;margin:0 0 .5em}h2{font-size:clamp(1.7rem,4vw,2.4rem)}
img{max-width:100%;display:block}a{color:inherit}
header{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
nav{max-width:1100px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:10px 20px}
nav img{height:40px}nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0;overflow-x:auto}
nav ul a{display:block;padding:8px 12px;border-radius:99px;text-decoration:none;font-weight:700;font-size:.95rem;white-space:nowrap}
nav ul a:hover{background:var(--o);color:#fff}
section{max-width:1100px;margin:auto;padding:64px 20px}
.hero{padding-top:24px}.hero .pic{border-radius:24px;overflow:hidden;aspect-ratio:21/9;background:#ddd}.hero .pic img{width:100%;height:100%;object-fit:cover}
.lead{max-width:760px;margin:28px auto 0;text-align:center;font-size:1.12rem}
.btn{display:inline-block;background:var(--o);color:#fff;font-weight:700;text-decoration:none;padding:12px 22px;border-radius:99px;border:0;cursor:pointer;font:700 1rem Nunito,sans-serif}
.btn.g{background:var(--g);color:#fff}.btn.w{background:#fff;color:var(--o)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:40px}
.tile{position:relative;border-radius:22px;overflow:hidden;min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:12px;padding:24px;color:#fff;text-align:center;font-weight:700;font-size:1.15rem}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.tile::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(0,0,0,.65));z-index:-1}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:30px}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px}.card img{border-radius:14px;margin-bottom:12px;aspect-ratio:4/3;object-fit:cover;width:100%}
.card p{margin:0;color:var(--mut)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
@media(max-width:760px){.split{grid-template-columns:1fr}}
.split>img{border-radius:24px;width:100%}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0;padding:0;list-style:none}
.chips li{background:var(--card);border:1px solid var(--line);padding:6px 14px;border-radius:99px;font-weight:600;font-size:.93rem}
.note{color:var(--mut);font-size:.95rem}
.band{background:var(--g);color:#fff;max-width:none}.band>div{max-width:1100px;margin:auto}
.badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:24px}
.badges div{background:rgba(255,255,255,.14);border-radius:18px;padding:18px;font-weight:600}.badges b{display:block;font:600 1.2rem Fredoka,sans-serif}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:28px 0}.gal img{border-radius:18px;aspect-ratio:1;object-fit:cover;width:100%;background:#fff}
.tools{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}
.tools button,.tools input{font:600 .95rem Nunito,sans-serif;padding:9px 16px;border-radius:99px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.tools button.on{background:var(--g);color:#fff;border-color:var(--g)}.tools input{flex:1;min-width:200px}
.stores{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.store h3{font-size:1.15rem;margin-bottom:.3em}.store p{margin:.2em 0;font-size:.93rem;color:var(--mut)}.store .m{display:flex;gap:14px;margin-top:12px;font-weight:700;font-size:.93rem}.store .m a{color:var(--gt);text-decoration:none}
.tag{display:inline-block;font-size:.75rem;font-weight:700;background:#fff0e0;color:#b34700;padding:2px 10px;border-radius:99px}
form{display:grid;gap:14px;max-width:520px}label{font-weight:700;font-size:.93rem;display:grid;gap:5px}
form input,form textarea{font:inherit;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.job{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px;margin-top:20px}.job ul{padding-left:20px;margin:10px 0 18px}
footer{background:var(--o);color:#fff;padding:22px 20px calc(22px + env(safe-area-inset-bottom,0px));text-align:center;font-weight:600}
.wa{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:30;box-shadow:0 6px 18px rgba(0,0,0,.25)}
nav ul a.act{background:var(--g);color:#fff}
/* ===== dynamic / app-like layer ===== */
:root{padding-top:0;padding-bottom:0}
body{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overscroll-behavior-y:none}
a,button{touch-action:manipulation}:focus-visible{outline:3px solid var(--o);outline-offset:2px}
header{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);transition:box-shadow .25s}header.sc{box-shadow:0 4px 18px rgba(0,0,0,.1)}
nav{gap:12px}nav ul{margin-left:auto}nav ul a,.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}nav ul{align-items:center}
.btn,.card,.tile{transition:transform .2s,box-shadow .2s}.btn:active{transform:scale(.96)}
@media(hover:hover){.btn:hover{transform:translateY(-2px)}.card:hover,.tile:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(0,0,0,.12)}.chips li[role=button]:hover{background:var(--g);color:#fff}}
.tools input,form input,form textarea{font-size:16px}.tools button{min-height:44px}
.chips li[role=button]{cursor:pointer;min-height:36px;display:inline-flex;align-items:center}.chips li[hidden]{display:none}
.tag.ok{background:#dff5e1;color:#1e6b2b}.tag.no{background:#fde3e0;color:#a32a1f}
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s}.js .rv.in{opacity:1;transform:none}
.tabbar,.sheet,.lb{display:none}
.tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px;font:700 .68rem Nunito,sans-serif;color:var(--mut);text-decoration:none;background:none;border:0;cursor:pointer}
.tabbar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.tabbar .act{color:var(--gt)}
.sheet.open,.lb.open{display:flex}
.sheet{position:fixed;inset:0;z-index:60;align-items:flex-end;background:rgba(0,0,0,.45)}
.sheet>div{width:100%;max-width:560px;margin:auto auto 0;background:var(--bg);border-radius:24px 24px 0 0;padding:20px 20px calc(24px + env(safe-area-inset-bottom,0px));display:grid;gap:10px;animation:up .25s ease-out}
.sheet a,.sheet button{display:block;text-align:center;padding:14px;border-radius:14px;background:var(--card);border:1px solid var(--line);color:var(--ink);font:700 1rem Nunito,sans-serif;text-decoration:none;cursor:pointer}.sheet p{margin:0;text-align:center}
@keyframes up{from{transform:translateY(40px);opacity:0}}
.lb{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.92);align-items:center;justify-content:center;touch-action:pan-y}
.lb img{max-width:92vw;max-height:84vh;border-radius:14px;object-fit:contain}.lb button{position:absolute;background:rgba(255,255,255,.18);color:#fff;border:0;width:48px;height:48px;border-radius:50%;font-size:1.5rem;cursor:pointer}
.lb .x{top:calc(14px + env(safe-area-inset-top,0px));right:14px}.lb .p{left:10px}.lb .n{right:10px}.gal img{cursor:zoom-in}
@media(max-width:820px){
 nav ul{display:none}nav{padding:8px 16px}nav>a:first-child{margin-right:auto}
 body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
 section{padding:36px 16px}.hero{padding-top:14px}.hero .pic{aspect-ratio:16/10;border-radius:18px}.lead{font-size:1.02rem;text-align:left}
 .tile{min-height:210px}.stores{grid-template-columns:1fr}.gal{grid-template-columns:repeat(2,1fr);gap:10px}
 .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--line);padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
 .wa{right:14px;bottom:calc(76px + env(safe-area-inset-bottom,0px))}footer{padding-bottom:22px}.lb .p,.lb .n{display:none}
}
@media(min-width:821px) and (max-width:1100px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1200px){section,nav,.band>div{max-width:1240px}.tiles{grid-template-columns:repeat(4,1fr)}.hero .pic{aspect-ratio:2.6/1}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.js .rv{opacity:1;transform:none}}
/* link chips + vegetable photo grid */
.chips li{padding:0}.chips li a{display:flex;align-items:center;min-height:40px;padding:6px 14px;border-radius:99px;color:var(--ink);text-decoration:none}
.band .note,.band .tools .note{color:rgba(255,255,255,.9)}
.vwrap{max-width:1100px;margin:36px auto 0}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}.vgrid [hidden]{display:none}
.vcard{display:block;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;text-align:center;transition:transform .2s,box-shadow .2s}
.vcard img{width:100%;aspect-ratio:3/2;object-fit:contain;background:#fff;padding:8px}
.vcard span{display:block;padding:10px 8px 14px;font-weight:700;font-size:.95rem}
@media(hover:hover){.chips li:hover a{background:var(--g);color:#fff}}
@media(max-width:820px){.vgrid{grid-template-columns:repeat(2,1fr);gap:10px}.chips li[role=button]:hover{background:none}}
/* halaman Buah: grid foto sesuai PDF, tanpa link */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 24px;margin:40px 0}
.fgrid figure,.trio figure{margin:0;text-align:center}
.fgrid img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:8px}
.fgrid figcaption{font-weight:700;font-size:.95rem;margin-top:8px}
.sep{border:0;border-top:1px solid var(--line);margin:10px 0 32px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.trio img{width:100%;aspect-ratio:5/3;object-fit:cover;border-radius:8px}.trio img.bd{object-fit:contain;background:#fff}
.trio figcaption{margin-top:12px;font-size:.93rem;color:var(--mut)}
@media(max-width:700px){.fgrid{grid-template-columns:repeat(2,1fr);gap:22px 14px}.trio{grid-template-columns:1fr}}
/* gambar Buah lebih kecil */
.fgrid{max-width:860px;margin:32px auto;gap:22px 18px}
.fgrid img{max-width:220px;margin:0 auto}
#buah .split>img{max-width:440px}
.trio{max-width:860px;margin:0 auto}.trio img{max-width:260px;margin:0 auto}
@media(max-width:700px){.fgrid img{max-width:100%}#buah .split>img{max-width:100%}.trio img{max-width:320px}}
/* perbaiki gambar melar: tinggi mengikuti rasio */
.fgrid img,.vcard img{height:auto}
.fgrid img{aspect-ratio:1/1}
/* Buah: kartu rounded yang lebih cantik */
.fgrid{max-width:900px;gap:24px 22px}
.fgrid figure{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:14px 14px 16px;box-shadow:0 4px 14px rgba(47,143,62,.08)}
.fgrid img{max-width:none;width:100%;border-radius:18px;background:#fff;object-fit:contain}
.fgrid figcaption{margin-top:12px;font:600 1.02rem Fredoka,Nunito,sans-serif;color:var(--ink)}
.trio figure{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:14px 14px 18px;box-shadow:0 4px 14px rgba(47,143,62,.08)}
.trio img{max-width:none;border-radius:18px}.trio figcaption{padding:0 6px}
#buah .split>img{border-radius:28px;box-shadow:0 8px 22px rgba(0,0,0,.1)}
.vcard{border-radius:26px;box-shadow:0 4px 14px rgba(0,0,0,.12)}.vcard img{border-radius:18px;margin:10px 10px 0;width:calc(100% - 20px);padding:6px}
@media(max-width:700px){.fgrid figure,.trio figure{border-radius:20px;padding:10px 10px 14px}.fgrid img,.trio img{border-radius:14px}.fgrid figcaption{font-size:.95rem}}
/* satu warna latar untuk semua halaman */
html{background:var(--bg)}
.band{background:none;color:var(--ink);max-width:1100px}
.band .note,.band .tools .note{color:var(--mut)}
.band .btn.w{background:var(--o);color:#fff}
.band .tools input{background:var(--card);color:var(--ink)}
/* anti-kedip foto di Beranda */
.tile{isolation:isolate;transform:translateZ(0)}
.tile img{backface-visibility:hidden}
.tile.rv,.js .tile.rv{opacity:1!important;transform:translateZ(0)!important;transition:box-shadow .2s!important;transition-delay:0s!important}
@media(hover:hover){.tile:hover{transform:translateZ(0)!important}}
.hero .pic,.hero .pic img{backface-visibility:hidden}
/* video tile */
.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;pointer-events:none;backface-visibility:hidden}
/* video utama (hero) */
.hero .pic{aspect-ratio:16/9;max-height:72vh}
.hero .pic video{width:100%;height:100%;object-fit:cover;display:block;backface-visibility:hidden}
/* ===== v2: tampilan modern ===== */
:root{--bg:#f6faf0;--card:#fff;--ink:#16301f;--mut:#566a5c;--g:#37b34a;--gt:#238a36;--lime:#8bc53f;--g2:#e8f4d6;--o:#f36524;--line:#e2ebd6;--sh:0 1px 2px rgba(22,48,31,.05),0 10px 30px rgba(22,48,31,.08)}
body{font-family:"Plus Jakarta Sans",system-ui,sans-serif;line-height:1.65;background-image:radial-gradient(760px 380px at 88% -60px,rgba(243,101,36,.11),transparent 70%),radial-gradient(820px 440px at -8% -40px,rgba(60,170,80,.15),transparent 70%);background-repeat:no-repeat}
.btn,.tools button,.tools input,.sheet a,.sheet button,.tabbar a,.tabbar button,form input,form textarea{font-family:"Plus Jakarta Sans",system-ui,sans-serif}
h1{font:600 clamp(2.5rem,6.2vw,4.5rem)/1.02 Fredoka,sans-serif;letter-spacing:-.02em;margin:0 0 .35em}h2{letter-spacing:-.01em}
section{max-width:1180px;padding:76px 20px}.hero{padding-top:28px}
/* header kapsul */
header{background:transparent;border:0;padding:calc(10px + env(safe-area-inset-top,0px)) 14px 0}header.sc{box-shadow:none}
header nav{max-width:1180px;padding:7px 8px 7px 18px;background:color-mix(in srgb,var(--card) 78%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);border:1px solid var(--line);border-radius:99px;box-shadow:var(--sh)}
header.sc nav{box-shadow:0 10px 30px rgba(22,48,31,.14)}nav img{height:38px}
nav ul a{font-weight:600;font-size:.93rem;padding:8px 15px}nav ul a:hover{background:var(--g2);color:var(--gt)}nav ul a.act{background:var(--g);color:#fff}
/* tombol */
.btn{padding:13px 26px;font-weight:700;background:linear-gradient(180deg,#f77d45,#f36524);box-shadow:0 8px 20px -6px rgba(243,101,36,.55),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.g{background:linear-gradient(180deg,#4cc25c,#37b34a);box-shadow:0 8px 20px -6px rgba(55,179,74,.55),inset 0 1px 0 rgba(255,255,255,.25)}
.btn.w{background:rgba(255,255,255,.95);color:#c8470f;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid color-mix(in srgb,var(--ink) 30%,transparent);box-shadow:none}
.wa{gap:8px;padding:13px 20px 13px 15px}.wa svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* hero */
.intro{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:center}
.hero .lead{max-width:none;margin:0;text-align:left;font-size:1.04rem;color:var(--mut)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero .pic{aspect-ratio:16/9;max-height:none;border-radius:36px;border:6px solid var(--card);box-shadow:0 24px 60px -20px rgba(22,48,31,.35)}
.trust{list-style:none;margin:44px 0 28px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.trust li{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:14px 16px;box-shadow:var(--sh)}
.trust svg{flex:none;width:42px;height:42px;padding:10px;border-radius:14px;background:var(--g2);stroke:var(--g);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.trust b{display:block;font:600 1rem/1.2 Fredoka,sans-serif}.trust span{display:block;font-size:.82rem;line-height:1.35;color:var(--mut)}
.tiles{grid-template-columns:repeat(2,1fr);gap:18px;margin-top:0}
.tile{min-height:360px;border-radius:32px;padding:30px;align-items:flex-start;text-align:left;font:600 clamp(1.3rem,2.3vw,1.75rem)/1.2 Fredoka,sans-serif;gap:16px;box-shadow:var(--sh)}
.tile::before{background:linear-gradient(transparent 35%,rgba(10,30,15,.72))}
.cta-band{margin-top:48px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;padding:clamp(24px,4vw,44px);border-radius:36px;background:linear-gradient(135deg,#37b34a,#5cbd45 60%,#8bc53f);color:#fff}
.cta-band h2{margin:0 0 .2em;color:#fff}.cta-band p{margin:0;opacity:.95;max-width:48ch}
/* kartu & form */
.card,.job{border-radius:28px;box-shadow:var(--sh)}.fgrid figure,.trio figure{box-shadow:var(--sh)}
form input,form textarea{border-radius:16px;padding:14px 16px}form input:focus,form textarea:focus{outline:2px solid var(--g);border-color:var(--g)}
/* footer */
footer{width:calc(100% - 28px);max-width:1180px;margin:24px auto;background:var(--g2);color:var(--ink);text-align:left;font-weight:500;border-radius:36px;padding:36px clamp(20px,4vw,44px) 22px}
.fi{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}.fi img{height:40px;margin-bottom:10px}
.fi h4{font:600 1rem Fredoka,sans-serif;margin:0 0 8px}.fi p{margin:6px 0 0;color:var(--mut);font-size:.93rem;line-height:1.5}
.fi a{display:block;padding:4px 0;text-decoration:none;color:var(--ink)}.fi a:hover{color:var(--g)}.fl{display:grid;grid-template-columns:1fr 1fr}
.fb{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);font-size:.88rem;color:var(--mut)}
.js .rv{transform:translateY(12px)}
@media(max-width:1000px){.trust{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){
 header{padding-inline:12px}header nav{padding:6px 8px 6px 14px}
 body{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
 section{padding:44px 16px}.hero{padding-top:20px}
 .intro{grid-template-columns:1fr;gap:26px}h1{font-size:clamp(2.3rem,10vw,3rem)}
 .hero .pic{border-radius:28px;border-width:4px}
 .tabbar{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));padding:0 6px;border:1px solid var(--line);border-radius:28px;background:color-mix(in srgb,var(--card) 84%,transparent);box-shadow:0 12px 34px rgba(22,48,31,.22)}
 .tabbar a,.tabbar button{border-radius:20px;margin:6px 2px;min-height:52px}.tabbar .act{background:var(--g2);color:var(--g)}
 .wa{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
 .tiles{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -16px;padding:0 16px 10px;scrollbar-width:none}.tiles::-webkit-scrollbar{display:none}
 .tile{flex:0 0 84%;scroll-snap-align:center;min-height:320px;padding:24px}
 .fi{grid-template-columns:1fr}footer{width:calc(100% - 24px);border-radius:28px;margin-bottom:0}
}
@media(max-width:520px){.trust{grid-template-columns:1fr}}
@media(max-width:820px){.txt{display:contents}.txt h1{order:1;margin:0}.hero .pic{order:2}.hero .lead{order:3}.cta{order:4;margin-top:0}}

/* ===== v3: halaman dalam ===== */
.ph{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;padding:clamp(22px,4vw,46px);border-radius:40px;background:linear-gradient(135deg,var(--g2),color-mix(in srgb,var(--card) 70%,var(--g2)));border:1px solid var(--line);box-shadow:var(--sh);position:relative;overflow:hidden}
.ph::after{content:"";position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(243,101,36,.18),transparent 70%);pointer-events:none}
.ph.sm{grid-template-columns:1fr}.ph.sm .pt{max-width:760px}
.ph h1{font-size:clamp(2rem,4.6vw,3.2rem);margin-bottom:.4em}.ph p{color:var(--mut);margin:0 0 .8em}
.eyebrow{display:inline-block;margin-bottom:14px;padding:5px 14px;border-radius:99px;background:var(--card);border:1px solid var(--line);color:var(--gt);font-weight:700;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.ph .cta{margin-top:20px}.ph .cta:empty{display:none}
.pp img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:30px;border:5px solid var(--card);box-shadow:0 20px 44px -16px rgba(22,48,31,.35);transform:rotate(1.5deg)}
.pills{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0;padding:0}.pills li{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:8px 16px;display:flex;gap:8px;align-items:baseline}.pills b{font:600 1.4rem Fredoka,sans-serif;color:var(--gt)}.pills span{font-size:.88rem;color:var(--mut)}
.sh{margin:56px 0 8px;text-align:center}.sh h2{margin-bottom:.2em}.sh .note{margin:0}
.ic{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:var(--g2);border:3px solid var(--card)}.ic svg{width:24px;height:24px;stroke:var(--gt);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* kartu foto buah */
.fgrid figure{transition:transform .25s,box-shadow .25s}.fgrid figure:hover{transform:translateY(-6px);box-shadow:0 18px 36px -10px rgba(55,179,74,.28)}
.fgrid figcaption{padding-bottom:2px}
/* kartu sejajar (trio) */
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px;align-items:stretch}
.perk{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:32px;box-shadow:var(--sh);overflow:hidden;transition:transform .25s,box-shadow .25s}
.perk:hover{transform:translateY(-6px);box-shadow:0 22px 44px -14px rgba(22,48,31,.28)}
.pm{aspect-ratio:16/10;background:var(--g2);overflow:hidden}.pm img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.perk:hover .pm img{transform:scale(1.05)}
.pm.fit{background:#fff}.pm.fit img{object-fit:contain;padding:12px}
.pb{display:flex;flex-direction:column;flex:1;padding:0 24px 24px}.pb .ic{margin:-23px 0 12px;box-shadow:0 6px 14px rgba(22,48,31,.14)}
.pb h3{font-size:1.25rem;margin-bottom:.35em}.pb p{margin:0 0 18px;color:var(--mut);font-size:.95rem}
.lnk{margin-top:auto;font-weight:700;color:var(--gt);text-decoration:none;display:inline-flex;min-height:44px;align-items:center}.lnk:hover{color:var(--o)}
.after{padding-top:0}.after .perks{margin-top:0}
/* parcel */
.mo{justify-content:center;margin:26px 0 0}.mo li{background:var(--g2);border-color:transparent;color:var(--gt);font-weight:700}
.gal img{transition:transform .3s,box-shadow .3s;box-shadow:var(--sh);border-radius:24px}.gal img:hover{transform:scale(1.03) rotate(-.6deg)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px;counter-reset:s}
.step{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:22px;box-shadow:var(--sh)}.step b{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--o);color:#fff;font:600 1.1rem Fredoka,sans-serif;margin-bottom:12px}.step h3{font-size:1.15rem}.step p{margin:0;color:var(--mut);font-size:.95rem}
/* toko */
.tools{margin:34px 0 18px;padding:14px;background:var(--card);border:1px solid var(--line);border-radius:28px;box-shadow:var(--sh)}
.store{position:relative;border-radius:26px;display:flex;flex-direction:column}.store::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:4px;border-radius:0 4px 4px 0;background:var(--g)}
.store h3{margin-top:10px}.store .m{margin-top:auto;padding-top:14px}.store .m a{padding:8px 16px;border-radius:99px;background:var(--g2);min-height:40px;display:inline-flex;align-items:center}.store .m a:hover{background:var(--g);color:#fff}
/* karir & kontak */
.two{display:grid;grid-template-columns:1.3fr 1fr;gap:22px;margin-top:28px;align-items:start}.two.k{grid-template-columns:1fr 1.1fr}
.job{padding:30px}.job h3{font-size:1.6rem;margin:12px 0 14px}
.ck{list-style:none;padding:0;margin:12px 0 24px}.ck li{position:relative;padding:7px 0 7px 34px}.ck li::before{content:"";position:absolute;left:0;top:9px;width:22px;height:22px;border-radius:50%;background:var(--g2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2337b34a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/14px no-repeat}
.info{display:flex;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:28px;padding:22px;box-shadow:var(--sh)}.info h3{font-size:1.1rem;margin-bottom:.2em}.info p{margin:0}.infos{display:grid;gap:14px}
.info.apply{flex-direction:column;background:linear-gradient(135deg,#37b34a,#5cbd45 60%,#8bc53f);color:#fff;border:0;position:sticky;top:96px}.apply .ic{background:rgba(255,255,255,.2);border-color:transparent}.apply svg{stroke:#fff}.apply a{color:#fff}
.fcard{background:var(--card);border:1px solid var(--line);border-radius:32px;padding:clamp(20px,3vw,32px);box-shadow:var(--sh);max-width:none}
@media(max-width:900px){.ph{grid-template-columns:1fr;gap:24px;border-radius:30px}.pp img{transform:none}.perks,.steps,.two,.two.k{grid-template-columns:1fr}.info.apply{position:static}.perks{gap:18px;margin-top:40px}.sh{margin-top:40px}}

/* pilih admin WhatsApp */
#wam h3{text-align:center;margin:0;font-size:1.35rem}#wam .note{text-align:center;margin:0 0 4px}
#wam a.wc{display:flex;align-items:center;gap:14px;text-align:left;padding:14px 16px;border-radius:20px;border:1.5px solid var(--line);box-shadow:var(--sh)}
#wam a.wc:hover{border-color:var(--g);background:var(--g2)}
#wam .wi{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--g);color:#fff;font:600 1.05rem Fredoka,sans-serif}
#wam .wc b{display:block;font:600 1.02rem Fredoka,sans-serif}#wam .wc small{display:block;color:var(--mut);font-size:.88rem}
#wam .wx{background:transparent;border:0;color:var(--mut)}
@media(min-width:821px){#wam{align-items:center}#wam>div{margin:auto;border-radius:28px}}

/* gambar tidak terpotong: ikuti rasio asli */
.pp img{aspect-ratio:auto;height:auto;object-fit:contain;background:#fff}
.pm{aspect-ratio:5/3}
/* floating WA: logo CS + pesan gratis ongkir */
.wf{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;align-items:flex-end;gap:14px;max-width:calc(100vw - 28px);pointer-events:none}
.wf>*{pointer-events:auto}
.wcs{display:block;flex:none;width:68px;height:68px;border-radius:50%;border:3px solid #fff;background:#fff;overflow:hidden;box-shadow:0 8px 22px rgba(22,48,31,.3);animation:wring 2.6s infinite;transition:transform .2s}
.wcs:hover{transform:scale(1.07)}.wcs img{width:100%;height:100%;display:block;object-fit:cover}
@keyframes wring{0%{box-shadow:0 8px 22px rgba(22,48,31,.3),0 0 0 0 rgba(55,179,74,.5)}70%,100%{box-shadow:0 8px 22px rgba(22,48,31,.3),0 0 0 14px rgba(55,179,74,0)}}
.wb{position:relative;max-width:250px;margin-bottom:12px;padding:12px 32px 12px 14px;background:var(--card);color:var(--ink);border:1.5px solid var(--g);border-radius:20px;box-shadow:0 12px 28px -10px rgba(22,48,31,.4);font-size:.82rem;line-height:1.45;animation:wbin .5s .8s both cubic-bezier(.2,1.3,.4,1)}
.wb::after{content:"";position:absolute;right:-7px;bottom:18px;width:12px;height:12px;background:var(--card);border-top:1.5px solid var(--g);border-right:1.5px solid var(--g);transform:rotate(45deg)}
.wb b{display:block;margin-bottom:2px;font:600 1rem Fredoka,sans-serif;color:var(--o)}.wb small{display:block;margin-top:5px;color:var(--mut);font-size:.72rem}
.wbx{position:absolute;top:2px;right:2px;width:30px;height:30px;border:0;background:none;color:var(--mut);font-size:20px;line-height:1;cursor:pointer;border-radius:50%}.wbx:hover{color:var(--o)}
.wf.nb .wb{display:none}
@keyframes wbin{from{opacity:0;transform:translateY(10px) scale(.92)}to{opacity:1;transform:none}}
@media(max-width:820px){.wf{right:12px;bottom:calc(92px + env(safe-area-inset-bottom,0px));gap:12px}.wcs{width:60px;height:60px}.wb{max-width:min(240px,calc(100vw - 112px))}}
/* status toko: simpel di kanan atas */
.store .tag{align-self:flex-start}
.store .tag.ok,.store .tag.no{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;gap:6px;padding:3px 11px 3px 9px;font-size:.76rem}
.store .tag.ok::before,.store .tag.no::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
/* footer: sosial media & jam */
.fi .soh{margin-top:18px}.soc{display:flex;flex-wrap:wrap;gap:8px}
.fi .soc a{display:inline-flex;align-items:center;gap:8px;padding:4px 14px 4px 4px;border-radius:99px;background:var(--card);border:1px solid var(--line);font-weight:700;font-size:.86rem;transition:transform .2s,box-shadow .2s}
.fi .soc a:hover{transform:translateY(-2px);box-shadow:0 8px 18px -8px rgba(22,48,31,.3);color:var(--ink)}
.fi .soc img{width:40px;height:40px;margin:0;border-radius:50%}
.hrs b{display:block;margin-bottom:2px;font:600 .98rem Fredoka,sans-serif;color:var(--ink)}.hrs span{display:block}

/* hover tombol WA order di kartu toko */
.store .m a[href*="wa.me"]:hover{background:#f36524;color:#fff}

/* info garansi (halaman Buah) */
.gbar{display:flex;align-items:center;gap:18px;margin-top:24px;padding:16px 24px;border-radius:28px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh)}
.gbar img{flex:none;width:84px;height:84px;object-fit:contain;border-radius:50%;background:#fff}
.gbar h3{font-size:1.15rem;margin-bottom:.2em}.gbar p{margin:0;color:var(--mut);font-size:.93rem}.gbar .lnk{margin-top:0;flex:none}
@media(max-width:700px){.gbar{flex-direction:column;align-items:flex-start;text-align:left}}

/* sub-judul hero (Kontak) */
.ph h4{margin:0 0 10px;font:600 1.2rem Fredoka,sans-serif;color:var(--o)}