:root{--ink:#17362b;--ink2:#0f241d;--cream:#f7f1e8;--paper:#fffdf9;--gold:#c99a4b;--muted:#6e756f;--line:#e8dfd3;--shadow:0 18px 50px rgba(32,41,36,.10)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--paper);color:var(--ink2);line-height:1.6}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}.wrap{width:min(1160px,92%);margin:auto}.nav{position:sticky;top:0;z-index:40;background:rgba(255,253,249,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.navin{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{font-weight:900;letter-spacing:-.04em;font-size:1.25rem}.brand span{color:var(--gold)}.menu{display:flex;gap:22px;font-size:.94rem;color:#506057}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ink);color:white;border-radius:999px;padding:12px 18px;font-weight:800;border:0;cursor:pointer}.btn:hover{transform:translateY(-1px)}.btn.gold{background:var(--gold);color:#1d261f}.hero{background:linear-gradient(120deg,#f4eadb 0%,#fffaf3 60%,#f5f0e7 100%);padding:86px 0 60px;overflow:hidden}.heroGrid{display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:60px}.eyebrow{font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;font-weight:900;color:#8c682f}.hero h1{font-size:clamp(2.7rem,5.5vw,5.2rem);line-height:.96;letter-spacing:-.065em;margin:14px 0 22px;max-width:760px}.hero p{font-size:1.12rem;color:#5d695f;max-width:650px}.heroCard{min-height:470px;border-radius:38px;background:radial-gradient(circle at 20% 20%,#fff 0 12%,transparent 13%),linear-gradient(145deg,#234e3e,#10271f);box-shadow:var(--shadow);position:relative;padding:28px;color:white;display:flex;flex-direction:column;justify-content:flex-end}.bowl{position:absolute;inset:45px 30px 125px;border-radius:50%;background:radial-gradient(circle at 50% 46%,#d9a45c 0 7%,#684223 7.5% 10%,#ead6b1 10.5% 15%,#d6a05b 15.5% 21%,#78512e 21.5% 25%,#eee0c8 25.5% 30%,#d3a05d 30.5% 36%,#fff8ea 36.5% 50%,#d4b88c 51% 54%,#f5eee4 55% 67%,#d6c6af 68%);box-shadow:inset 0 0 0 8px rgba(255,255,255,.3),0 20px 50px #0005}.heroCard strong{font-size:1.5rem;position:relative}.heroCard small{opacity:.78;position:relative}.trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:38px}.trustItem{display:flex;align-items:flex-start;gap:13px;padding:16px 17px;border:1px solid rgba(201,154,75,.22);border-radius:18px;background:rgba(255,255,255,.72);box-shadow:0 8px 22px rgba(32,41,36,.045);backdrop-filter:blur(6px);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.trustItem:hover{transform:translateY(-2px);border-color:rgba(201,154,75,.5);box-shadow:0 12px 28px rgba(32,41,36,.08)}.trustIcon{flex:0 0 36px;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:#f3e7d1;color:#805d25;font-size:1rem;font-weight:900;line-height:1}.trustItem>div{min-width:0;padding-top:1px}.trust b{display:block;font-size:.92rem;line-height:1.25;letter-spacing:-.01em;margin-bottom:5px}.trust .trustItem span:not(.trustIcon){display:block;font-size:.76rem;line-height:1.45;color:var(--muted)}section{padding:84px 0}.sectionHead{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:32px}.sectionHead h2{font-size:clamp(2rem,4vw,3.3rem);letter-spacing:-.055em;line-height:1;margin:0}.sectionHead p{max-width:540px;color:var(--muted);margin:0}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 8px 24px rgba(30,40,35,.04);transition:.2s}.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.cardImg{aspect-ratio:4/3;background:linear-gradient(135deg,#e8ddcc,#f9f5ef);position:relative;overflow:hidden}.cardImg img{width:100%;height:100%;object-fit:cover}.placeholder{height:100%;display:grid;place-items:center;font-size:4rem}.badge{position:absolute;top:14px;left:14px;background:#fff;border-radius:999px;padding:7px 11px;font-size:.72rem;font-weight:900}.cardBody{padding:20px}.cat{font-size:.74rem;font-weight:900;text-transform:uppercase;letter-spacing:.12em;color:#94713a}.card h3{margin:7px 0;font-size:1.25rem}.card p{color:var(--muted);font-size:.92rem;min-height:48px}.card .btn{width:100%;margin-top:8px}.why{background:var(--ink);color:#fff}.why .sectionHead p{color:#cbd7d0}.featureGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.feature{padding:24px;border:1px solid #ffffff24;border-radius:20px;background:#ffffff08}.feature i{font-style:normal;font-size:1.7rem}.feature h3{margin:12px 0 6px}.feature p{color:#c6d0cb;font-size:.9rem}.story{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.storyBox{background:var(--cream);border-radius:32px;padding:36px}.story h2{font-size:clamp(2rem,4vw,3.3rem);line-height:1.05;letter-spacing:-.05em}.faq{display:grid;gap:12px;max-width:850px}.faq details{border:1px solid var(--line);border-radius:16px;padding:17px 19px;background:#fff}.faq summary{font-weight:800;cursor:pointer}.cta{padding:38px;border-radius:30px;background:linear-gradient(135deg,#d5a651,#f0d59d);display:flex;justify-content:space-between;gap:24px;align-items:center}.cta h2{margin:0;font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.04em}.footer{background:#0f241d;color:#d6e0da;padding:42px 0}.footerGrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:30px}.footer small{color:#9fb0a7}.floatwa{position:fixed;right:20px;bottom:20px;z-index:50;box-shadow:0 10px 30px #0003}.productPage{padding:64px 0}.productGrid{display:grid;grid-template-columns:1fr 1fr;gap:50px}.productImage{border-radius:30px;background:var(--cream);overflow:hidden;aspect-ratio:1}.productImage img{width:100%;height:100%;object-fit:cover}.crumbs{font-size:.85rem;color:var(--muted);margin-bottom:20px}.productInfo h1{font-size:clamp(2.4rem,5vw,4.5rem);letter-spacing:-.06em;line-height:1;margin:10px 0 20px}.note{padding:15px;border-radius:14px;background:#f6f1e7;color:#665b48;font-size:.9rem}.adminLink{opacity:.45;font-size:.75rem}

/* V4: Hero image — rasio asli, bingkai tetap, tanpa gambar memanjang */
.heroCard:has(.heroMainImage){
    min-height:470px;
    height:470px;
    padding:22px;
    overflow:visible;
    background:linear-gradient(145deg,#234e3e,#10271f);
    transform:rotate(1.6deg);
    transform-origin:center;
    transition:transform .28s ease,box-shadow .28s ease;
}
.heroCard:has(.heroMainImage):hover{
    transform:rotate(.7deg) translateY(-3px);
}
.heroCard:has(.heroMainImage)::before{
    content:"";
    position:absolute;
    inset:16px;
    border-radius:26px;
    background:#0d211a;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
    z-index:0;
}
.heroCard:has(.heroMainImage)::after{
    content:"";
    position:absolute;
    left:22px;
    right:22px;
    bottom:22px;
    height:105px;
    border-radius:0 0 22px 22px;
    background:linear-gradient(180deg,transparent,rgba(5,18,13,.78));
    pointer-events:none;
    z-index:2;
}
.heroMainImage{
    position:absolute;
    inset:22px;
    width:calc(100% - 44px);
    height:calc(100% - 44px);
    object-fit:contain;
    object-position:center;
    background:#0d211a;
    border-radius:22px;
    opacity:1;
    z-index:1;
}
.heroCard:has(.heroMainImage) strong,
.heroCard:has(.heroMainImage) small{
    position:relative;
    z-index:3;
    text-shadow:0 2px 12px rgba(0,0,0,.68);
}
@media(max-width:900px){.heroCard:has(.heroMainImage){height:390px;min-height:390px;transform:rotate(.8deg)}.menu{display:none}.heroGrid,.story,.productGrid{grid-template-columns:1fr}.hero{padding-top:58px}.heroCard{min-height:390px}.grid{grid-template-columns:repeat(2,1fr)}.featureGrid{grid-template-columns:repeat(2,1fr)}.footerGrid{grid-template-columns:1fr}.sectionHead{display:block}.sectionHead p{margin-top:14px}}@media(max-width:580px){.heroCard:has(.heroMainImage){height:330px;min-height:330px;transform:rotate(.45deg);padding:14px}.heroCard:has(.heroMainImage)::before{inset:10px;border-radius:24px}.heroMainImage{inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);border-radius:20px}.heroCard:has(.heroMainImage)::after{left:14px;right:14px;bottom:14px;height:82px;border-radius:0 0 20px 20px}.grid{grid-template-columns:1fr}.featureGrid,.trust{grid-template-columns:1fr}.hero h1{font-size:2.7rem}.heroCard{min-height:330px}.bowl{inset:40px 28px 115px}.cta{display:block}.cta .btn{margin-top:18px}.navin{height:64px}}