@font-face{font-family:"DM Sans";font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/dm-sans-latin.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-sans-latin-italic.woff2) format("woff2")}
/* Baskoro Agri Trade, website preview. Arah referensi Paulvante: foto besar, panel hijau tua, aksen emas karamel. Satu tema terang. */
:root{
  --paper:#FFFFFF; --tile:#F3F3EF; --ink:#101511; --muted:#50574F; --line:#E2E4DD;
  --forest:#0F2616; --forest-2:#17331F; --forest-3:#1F3F28; --forest-ink:#F4F6F2; --forest-muted:#BAC5BC; --forest-line:rgba(244,246,242,.16);
  --gold:#EDBF4F; --gold-hi:#F4CF72; --gold-ink:#1A1508; --gold-muted:#45370F;
  --night:#0B120D; --night-ink:#EEF1EC; --night-muted:#A9B2AA; --night-line:rgba(238,241,236,.14);
  --wrap:1240px; --gut:clamp(16px,3.2vw,40px);
  --r:28px; --r-md:20px; --r-sm:16px;
  --ease:cubic-bezier(.16,1,.3,1);
  --hd-h:84px;
  --focus:var(--ink);
  /* Ukuran huruf (26 Okt 2026, tahap 2): pakai salah satu token ini, jangan menulis ukuran sendiri.
     Ikon dan logo memakai ukurannya sendiri. Jarak (padding, margin, gap) selalu kelipatan 4 px. */
  --fs-display:clamp(44px,6.7vw,92px); /* judul hero beranda */
  --fs-h1:clamp(40px,5.6vw,78px);      /* judul halaman */
  --fs-h2:clamp(36px,4.6vw,62px);      /* judul seksi, menu HP */
  --fs-num:clamp(40px,4.4vw,64px);     /* angka besar di kartu angka */
  --fs-h3:clamp(26px,2.8vw,36px);      /* subjudul besar, nama produk di kartu, kutipan */
  --fs-h4:clamp(21px,2.1vw,28px);      /* paragraf pembuka besar, pertanyaan FAQ, judul artikel di daftar */
  --fs-h5:clamp(19px,1.6vw,21px);      /* judul kartu, nama langkah, pengantar hero halaman */
  --fs-body-l:18px;                    /* pengantar seksi, isi artikel, isi tabel fakta */
  --fs-body:16px;                      /* teks isi, tombol, isi kartu, menu, footer */
  --fs-small:14px;                     /* keterangan, label kolom tabel, catatan */
  --fs-caption:13px;                   /* lencana, label kecil */
  --fs-micro:11px;                     /* "AGRI TRADE" di logo */
  --font:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; /* bahasa lain mengganti ini, lihat bagian Bahasa */
  /* Peran warna yang berganti di mode gelap (tahap 6). Nilai di sini = mode terang, tidak berubah dari sebelumnya. */
  --sb:#9EA79F; --sb-thumb:#B5BCB5; --sb-hover:#8E978F;
  --line-ctl:#C9CEC6; --line-btn:#C3C9C0; --img-bg:#E6E7E1; --pk-bg:var(--tile);
  --field:#fff; --field-line:#7F877D; --field-line-hi:#50574F; --ph:#656C64; --err:#9E2418;
  --pill-on:var(--forest); --pill-on-ink:var(--forest-ink);
  --bad-bg:#FBE7E3; --bad-ink:#741A11; --good-bg:#E2EEE3; --good-ink:#173A1F;
  --hd-solid:rgba(255,255,255,.88); --mk-l-solid:0; --mk-d-solid:1; --toast-ink:#F4F6F2; --dlg:var(--paper); --panel-edge:transparent;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px;scrollbar-color:var(--sb) var(--paper);background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--fs-body)/1.55 var(--font);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
::selection{background:var(--gold);color:var(--gold-ink)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:12px;border:3px solid var(--paper)}
::-webkit-scrollbar-thumb:hover{background:var(--sb-hover)}
img{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
.hero,.panel,.cta,.mnav,.nav,.hd:not(.is-solid){--focus:var(--gold)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-80px;z-index:90;background:var(--gold);color:var(--gold-ink);padding:12px 20px;border-radius:999px;font-weight:500;text-decoration:none;transition:top .2s}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}

.wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--gut));margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(72px,9vw,128px)}
.sec-top0{padding-top:clamp(24px,4vw,56px)}
.h2{font-size:var(--fs-h2);font-weight:400;line-height:1.05;letter-spacing:-.026em;text-wrap:balance}
.lead{font-size:var(--fs-h4);line-height:1.36;letter-spacing:-.012em;text-wrap:pretty}
.muted{color:var(--muted)}

/* ---------- Tombol ---------- */
.btn{display:inline-flex;align-items:center;gap:16px;min-height:52px;padding:8px 8px 8px 24px;border-radius:999px;font-size:var(--fs-body);font-weight:500;letter-spacing:-.005em;text-decoration:none;white-space:nowrap;transition:background-color .25s var(--ease),color .25s var(--ease),box-shadow .25s var(--ease)}
.btn .arw{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;font-size:18px;transition:transform .35s var(--ease)}
.btn .arw svg,.circ svg,.card-go svg{transition:transform .35s var(--ease)}
/* Panah bergerak ke arah artinya: → pindah halaman, ↗ keluar website, ↓ unduh (tahap 3) */
.btn:hover .arw svg,.g-list a:hover .circ svg,a.card:hover .card-go svg{transform:translateX(3px)}
.btn:hover .arw:has(use[href="#i-ne"]) svg{transform:translate(2px,-2px)}
.btn:hover .arw:has(use[href="#i-dl"]) svg{transform:translateY(3px)}
.btn-gold{background:var(--gold);color:var(--gold-ink)}
.btn-gold .arw{background:var(--gold-ink);color:var(--gold)}
.btn-gold:hover{background:var(--gold-hi);box-shadow:0 10px 24px -12px rgba(120,86,8,.55)}
.btn-line{color:var(--forest-ink);box-shadow:inset 0 0 0 1px var(--forest-line)}
.btn-line .arw{background:var(--forest-ink);color:var(--forest)}
.btn-line:hover{box-shadow:inset 0 0 0 1px rgba(244,246,242,.5)}
.circ{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-size:19px;flex:none;transition:transform .35s var(--ease),background-color .25s,color .25s,box-shadow .25s}
.circ-gold{background:var(--gold);color:var(--gold-ink)}
.circ-line{box-shadow:inset 0 0 0 1px var(--line-ctl);color:var(--ink)}

/* ---------- Header ---------- */
.hd{position:fixed;inset:0 0 auto;z-index:40;padding-top:env(safe-area-inset-top,0px);transition:background-color .35s var(--ease),box-shadow .35s var(--ease)}
.hd-in{display:flex;align-items:center;gap:16px;max-width:calc(var(--wrap) + 2*var(--gut));margin-inline:auto;padding:16px var(--gut)}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:#fff;min-height:44px;margin-right:auto}
.brand-mk{position:relative;width:34px;height:44px;flex:none}
.brand-mk img{position:absolute;inset:0;width:34px;height:44px;transition:opacity .3s}
.brand-tx{display:flex;flex-direction:column;line-height:1}
.brand-tx b{font-size:21px;font-weight:600;letter-spacing:-.02em}
.brand-tx small{font-size:var(--fs-micro);font-weight:500;letter-spacing:.2em;text-transform:uppercase;margin-top:4px;opacity:.86}
.mk-d{opacity:0}
.nav{margin-left:auto}
@media (min-width:1240px){.hd-in>.brand{margin-right:0}}
.nav-ul{display:flex;gap:2px;padding:4px;border-radius:999px;background:rgba(15,38,22,.9);box-shadow:0 8px 30px -14px rgba(0,0,0,.6)}
.nav-ul>li>a,.nav-t{display:flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;color:var(--forest-ink);font-size:var(--fs-body);text-decoration:none;transition:background-color .2s,color .2s}
.nav-ul>li>a:hover,.nav-t:hover,.nav-t[aria-expanded="true"]{background:rgba(244,246,242,.1)}
.nav-ul>li>a[aria-current="page"],.nav-t.is-cur{background:var(--gold);color:var(--gold-ink);font-weight:500}
.hd-cta{min-height:50px}
.hd-cta .arw{width:38px;height:38px}
.menu-btn{display:none;align-items:center;gap:12px;min-height:46px;padding:0 20px;border-radius:999px;background:var(--forest);color:var(--forest-ink);font-weight:500;font-size:var(--fs-body)}
.menu-btn svg{font-size:20px}
.hd.is-solid{background:var(--hd-solid);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--line)}
.hd.is-solid .brand{color:var(--ink)}
.hd.is-solid .mk-l{opacity:var(--mk-l-solid)}
.hd.is-solid .mk-d{opacity:var(--mk-d-solid)}
.hd.is-solid .nav-ul{background:var(--forest);box-shadow:none}

/* ---------- Menu HP ---------- */
.mnav{position:fixed;inset:0;z-index:60;background:var(--forest);color:var(--forest-ink);display:flex;flex-direction:column;padding:calc(16px + env(safe-area-inset-top,0px)) var(--gut) calc(24px + env(safe-area-inset-bottom,0px));overflow-y:auto;opacity:0;transform:translateY(-12px);transition:opacity .3s var(--ease),transform .4s var(--ease)}
.mnav.open{opacity:1;transform:none}
.mnav-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand-static{margin-right:0;color:var(--forest-ink)}
.mnav-x{display:inline-flex;align-items:center;gap:12px;min-height:46px;padding:0 20px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--forest-line);font-weight:500;font-size:var(--fs-body)}
.mnav-x svg{font-size:20px}
.mnav-list{margin-top:clamp(24px,6vh,56px);display:flex;flex-direction:column}
.mnav-list>li>a{display:flex;align-items:center;min-height:56px;font-size:var(--fs-h2);letter-spacing:-.03em;text-decoration:none;border-bottom:1px solid var(--forest-line)}
.mnav-list a[aria-current="page"]{color:var(--gold)}
.mnav-foot{margin-top:auto;padding-top:32px;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.mnav-foot p{color:var(--forest-muted);font-size:var(--fs-body);line-height:1.7}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;min-height:max(620px,min(100svh,880px));display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:var(--forest)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:38% 50%;z-index:-2;transform-origin:50% 60%}
.hero-shade{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(5,13,7,.62) 0%,rgba(5,13,7,.08) 26%,rgba(5,13,7,0) 40%,rgba(5,13,7,.42) 62%,rgba(5,13,7,.86) 100%),
  linear-gradient(90deg,rgba(5,13,7,.35) 0%,rgba(5,13,7,0) 60%)}
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);align-items:end;gap:40px;padding-top:140px;padding-bottom:clamp(36px,5.4vw,72px)}
.hero-h{font-size:var(--fs-display);font-weight:400;line-height:1.01;letter-spacing:-.03em;max-width:11.5ch}
.hero-h .ln{display:inline-block}
.hero-side{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.hero-side p{font-size:var(--fs-body-l);line-height:1.55;color:#EEF2EC;text-wrap:pretty}

/* ---------- Pembuka + petak ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(24px,5vw,72px);align-items:start}
.split-r{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
p.split-r{display:block;font-size:var(--fs-body-l);line-height:1.6;padding-top:12px;max-width:52ch}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:clamp(48px,6vw,80px)}
.tile{border-radius:var(--r-md);overflow:hidden;min-height:clamp(240px,23vw,300px);position:relative}
.tile-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile-stat{background:var(--tile);padding:24px;display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.stat{display:flex;align-items:flex-start;gap:8px;line-height:.92;font-variant-numeric:tabular-nums lining-nums}
.stat .num{font-size:var(--fs-num);font-weight:300;letter-spacing:-.035em}
.stat .unit{font-size:var(--fs-h5);font-weight:500;margin-top:.25em;letter-spacing:-.01em}
.tile-stat h3,.tile-stat .tile-h{font-size:var(--fs-h5);font-weight:500;letter-spacing:-.015em;line-height:1.2}
.tile-stat p{margin-top:8px;font-size:var(--fs-body);line-height:1.5;color:var(--muted)}
.tile-gold{background:var(--gold);color:var(--gold-ink)}
.tile-gold p{color:var(--gold-muted)}

/* ---------- Panel hijau tua ---------- */
.panel{position:relative;isolation:isolate;overflow:hidden;background:var(--forest);color:var(--forest-ink);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--panel-edge);padding:clamp(28px,4.6vw,64px)}
.panel-deco{position:absolute;z-index:-1;width:min(720px,80%);aspect-ratio:1;left:-14%;top:-46%;background:var(--forest-2);border-radius:72px;transform:rotate(45deg)}
.split-dark p.split-r{color:var(--forest-muted)}
.feat{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:20px;margin-top:clamp(36px,5vw,64px)}
.feat-img{border-radius:var(--r-md);overflow:hidden;position:relative;min-height:320px}
.feat-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:24px;border-radius:var(--r-md);background:var(--forest-2);color:var(--forest-ink);text-decoration:none;transition:background-color .25s var(--ease),transform .35s var(--ease)}
.card .ic{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--gold);color:var(--gold-ink);font-size:21px;margin-bottom:16px}
.card h3{font-size:var(--fs-h5);font-weight:500;letter-spacing:-.018em;line-height:1.2}
.card p{font-size:var(--fs-body);line-height:1.5;color:var(--forest-muted)}
.card-go{position:absolute;top:24px;right:24px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--forest-line);font-size:var(--fs-body);transition:transform .35s var(--ease)}
a.card:hover{background:var(--forest-3)}

.card-gold{background:var(--gold);color:var(--gold-ink)}
.card-gold .ic{background:var(--forest);color:var(--gold)}
.card-gold p{color:var(--gold-muted)}
.card-gold .card-go{box-shadow:inset 0 0 0 1px rgba(26,21,8,.3)}
a.card-gold:hover{background:var(--gold-hi)}

/* ---------- Kemasan ---------- */
.center-head{max-width:720px;margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}
.center-head p{font-size:var(--fs-body-l);color:var(--muted);max-width:56ch;text-wrap:pretty}
.packs{margin-top:clamp(40px,5vw,64px)}
.packs{overflow-x:clip}
/* Cincin kemasan: JS menaruh tiap kemasan di lingkaran (depan, samping depan, samping belakang) lewat transform */
.pk-ring{--pk-w:clamp(190px,24vw,300px);position:relative;height:calc(var(--pk-w) * 1.25 + 96px);max-width:1120px;margin-inline:auto;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.pk-ring.is-drag{cursor:grabbing}
.pk{position:absolute;left:50%;bottom:0;width:var(--pk-w);margin-left:calc(var(--pk-w) / -2);display:flex;flex-direction:column;gap:16px;text-align:left;border-radius:var(--r-md);transform-origin:50% 100%;-webkit-tap-highlight-color:transparent}
.pk-tile{position:relative;display:block;width:100%;aspect-ratio:4/5;border-radius:var(--r-md);overflow:hidden;background:var(--pk-bg);transition:box-shadow .4s var(--ease)}
.pk-tile::before{content:"";position:absolute;inset:0;z-index:1;background:var(--paper);opacity:var(--fade,0);pointer-events:none}
.pk-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;transition:transform .6s var(--ease),filter .4s}
.pk-cut img{object-fit:contain;padding:14%}
.pk[aria-pressed="false"] .pk-tile img{filter:saturate(.75)}
.pk[aria-pressed="true"] .pk-tile{box-shadow:0 22px 40px -24px rgba(16,21,17,.55)}
.pk:hover .pk-tile img{transform:scale(1.035)}
.pk-cap{display:flex;flex-direction:column;gap:2px;padding-inline:4px;opacity:var(--cap,1)}
.pk-cap b{font-weight:500;font-size:var(--fs-body);letter-spacing:-.01em}
.pk-cap small{font-size:var(--fs-small);color:var(--muted)}
.pk[aria-pressed="true"] .pk-cap b{font-size:var(--fs-body-l)}
.pk-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;max-width:980px;margin:clamp(32px,4vw,48px) auto 0;padding-top:28px;border-top:1px solid var(--line)}
.pk-info{max-width:60ch}
.pk-info h3{font-size:var(--fs-h4);font-weight:400;letter-spacing:-.025em;line-height:1.15}
.pk-size{margin-top:4px;font-weight:500;font-variant-numeric:tabular-nums}
.pk-info p:last-child{margin-top:12px;color:var(--muted)}

/* ---------- Langkah ---------- */
.st-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(28px,5vw,72px);margin-top:clamp(40px,5vw,64px);align-items:start}
.mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,clamp(150px,15vw,200px));gap:16px}
.mosaic img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-sm)}
.mo-a{grid-row:span 2}
.acc{border-top:1px solid var(--line)}
.acc-i{border-bottom:1px solid var(--line)}
.acc-b{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;min-height:84px;padding:20px 0;text-align:left;font-size:var(--fs-h4);font-weight:400;letter-spacing:-.025em;line-height:1.2}
.acc-b .circ{transition:transform .4s var(--ease),background-color .2s}
.acc-b[aria-expanded="true"] .circ{transform:rotate(-45deg)}
.acc-b:hover .circ{background:var(--gold-hi)}
.acc-p{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .45s var(--ease),visibility .45s}
.acc-p>div{overflow:hidden;min-height:0}
.acc-p p{padding:0 64px 24px 0;color:var(--muted);max-width:56ch}
.acc-p.is-open{grid-template-rows:1fr;visibility:visible}

/* ---------- Cerita ---------- */
.q-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,72px);align-items:end;margin-top:clamp(40px,5vw,64px)}
.q-fig{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.q-fig blockquote p{font-size:var(--fs-h4);line-height:1.32;letter-spacing:-.02em;text-wrap:pretty;max-width:30ch}
.q-fig figcaption{display:flex;align-items:center;gap:16px}
.q-fig figcaption img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.q-fig figcaption span{display:flex;flex-direction:column}
.q-fig figcaption b{font-weight:500;font-size:var(--fs-body-l)}
.q-fig figcaption small{font-size:var(--fs-small);color:var(--forest-muted)}
.q-photo{border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/4.4;max-height:460px;justify-self:end;width:100%}
.q-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}

/* ---------- Panduan ---------- */
.g-list{margin-top:clamp(36px,4.5vw,56px);border-top:1px solid var(--line)}
.g-list li{border-bottom:1px solid var(--line)}
.g-list a{display:grid;grid-template-columns:minmax(0,1fr) auto 44px;align-items:center;gap:24px;min-height:96px;padding:20px 0;text-decoration:none}
.g-t{font-size:var(--fs-h5);letter-spacing:-.018em;line-height:1.25;text-wrap:balance}
.g-m{font-size:var(--fs-small);color:var(--muted);white-space:nowrap}
.g-list a:hover .g-t{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px}
.g-list a:hover .circ{background:var(--gold);box-shadow:none}

/* ---------- Ajakan ---------- */
.cta{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:var(--forest)}
.cta-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:82% 40%;z-index:-2}
.cta-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(5,13,7,.86) 0%,rgba(5,13,7,.66) 55%,rgba(5,13,7,.62) 100%)}
.cta-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);align-items:end;gap:40px;padding-block:clamp(120px,15vw,200px) clamp(56px,7vw,96px)}
.cta .h2{max-width:12ch}
.cta-side{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.cta-side p{font-size:var(--fs-body-l);color:#EEF2EC}

/* ---------- Footer ---------- */

/* ---------- Pesan ---------- */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:80;width:max-content;max-width:calc(100% - 32px);background:var(--ink);color:var(--toast-ink);padding:16px 20px;border-radius:16px;font-size:var(--fs-body);line-height:1.45;box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}

/* ---------- Satu momen gerak: judul hero naik, foto melambat ---------- */
@media (prefers-reduced-motion:no-preference){
  .hero-img{animation:heroImg 1.8s var(--ease) both}
  .hero-h .ln{animation:rise 1.1s var(--ease) both}
  .hero-h .ln:nth-child(2){animation-delay:.08s}
  .hero-h .ln:nth-child(3){animation-delay:.16s}
  .hero-side{animation:fade 1s var(--ease) .35s both}
  @keyframes heroImg{from{transform:scale(1.08)}to{transform:none}}
  @keyframes rise{from{transform:translateY(.42em);opacity:.001;filter:blur(6px)}to{transform:none;opacity:1;filter:none}}
  @keyframes fade{from{opacity:.001;transform:translateY(10px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* tanpa transisi sama sekali: durasi .01ms tetap membuat transisi "all" yang menahan posisi lama satu frame */
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ---------- Ukuran layar ---------- */
@media (max-width:1239px){
  .nav{display:none}
  .menu-btn{display:inline-flex}
}
@media (max-width:1000px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feat{grid-template-columns:minmax(0,1fr)}
  .feat-img{min-height:0;aspect-ratio:16/9}
  .st-grid,.q-grid{grid-template-columns:minmax(0,1fr)}
  .q-photo{justify-self:stretch;aspect-ratio:16/11;max-height:none}
}
@media (max-width:760px){
  .hd-cta{display:none}
  .hero-in,.cta-in{grid-template-columns:minmax(0,1fr);gap:24px}
  .hero-in{padding-top:120px}
  .split{grid-template-columns:minmax(0,1fr);gap:20px}
  p.split-r{padding-top:0}
  .cards{grid-template-columns:minmax(0,1fr)}
  .card-go{top:20px;right:20px}
  .pk-foot{flex-direction:column;align-items:stretch;margin-top:8px}
  .g-list a{grid-template-columns:minmax(0,1fr) 44px;gap:8px 16px}
  .g-m{grid-row:2;grid-column:1}
  .g-list .circ{grid-row:1/span 2;grid-column:2}
}
@media (max-width:420px){
  .hero-h{font-size:var(--fs-display)}
  .tile{min-height:236px}
  .tile-stat{padding:20px}
  .stat .num{font-size:var(--fs-h2)}
  .tile-stat h3,.tile-stat .tile-h{font-size:var(--fs-body-l)}
  .tile-stat p{font-size:var(--fs-small)}
  .mosaic{grid-template-rows:repeat(2,128px);gap:12px}
}

/* =====================================================================
   Halaman dalam (Products, Arenga, Coconut, About, FAQ, Contact, Blog, artikel)
   ===================================================================== */
.page-top{padding-top:calc(84px + env(safe-area-inset-top,0px) + clamp(4px,1vw,12px))}
.h1{font-size:var(--fs-h1);font-weight:400;line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.h3x{font-size:var(--fs-h3);font-weight:400;line-height:1.12;letter-spacing:-.022em;text-wrap:balance}
.sub{color:var(--muted);font-size:var(--fs-body-l);max-width:56ch;text-wrap:pretty}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn-out{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-btn)}
.btn-out .arw{background:var(--ink);color:var(--paper)}
.btn-out:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.btn-photo{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.btn-photo .arw{background:#fff;color:var(--forest)}
.btn-photo:hover{box-shadow:inset 0 0 0 1px #fff}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;font-size:var(--fs-small)}
.crumb a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb span[aria-hidden]{opacity:.6}
.tag{display:inline-flex;align-items:center;min-height:30px;padding:0 16px;border-radius:999px;font-size:var(--fs-caption);font-weight:500;letter-spacing:.01em;white-space:nowrap}
.tag-gold{background:var(--gold);color:var(--gold-ink)}
.tag-line{box-shadow:inset 0 0 0 1px currentColor}
.note{margin-top:20px;font-size:var(--fs-small);color:var(--muted);max-width:70ch}
.panel .note{color:var(--forest-muted)}

/* Kepala halaman dengan foto */
.phead{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r);background:var(--forest);color:#fff;min-height:clamp(480px,46vw,600px);display:flex;flex-direction:column;padding:clamp(20px,3.6vw,44px)}
.phead>picture{display:contents}
.phead>img,.phead>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.phead-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,13,7,.62) 0%,rgba(5,13,7,.16) 26%,rgba(5,13,7,.48) 52%,rgba(5,13,7,.9) 100%),linear-gradient(90deg,rgba(5,13,7,.45) 0%,rgba(5,13,7,0) 65%)}
.phead .crumb{color:#fff}
.phead-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:32px;align-items:end;margin-top:auto;padding-top:48px}
.phead .h1{max-width:13ch}
.phead-side{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.phead-side p{font-size:var(--fs-body-l);line-height:1.55;color:#EEF2EC;text-wrap:pretty}

/* Kepala halaman hijau dengan petak (Coconut) */
.fhead{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r);background:var(--forest);color:var(--forest-ink);padding:clamp(20px,3.6vw,44px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,56px);align-items:end}
.fhead .crumb{color:var(--forest-ink)}
.fhead-l{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.fhead-l .crumb{margin-bottom:auto}
.fhead-l>p{font-size:var(--fs-body-l);color:var(--forest-muted);max-width:46ch}
.fhead-r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.fhead-r figure{border-radius:var(--r-md);overflow:hidden;position:relative;min-height:280px}
.fhead-r figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Kepala halaman putih */
.thead{padding-top:calc(84px + env(safe-area-inset-top,0px) + clamp(36px,5.5vw,80px));padding-bottom:0}
.thead .crumb{color:var(--muted);margin-bottom:8px}
.thead-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,72px);align-items:end}
.thead-row>div{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.thead-row p.lead{font-size:var(--fs-h5)}
.when{display:flex;align-items:center;gap:8px;font-size:var(--fs-body);color:var(--muted);font-variant-numeric:tabular-nums}
.when svg{font-size:18px}

/* Daftar fakta */
.facts{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);margin:0;border-top:1px solid var(--line)}
.facts dt,.facts dd{margin:0;padding:16px 0;border-bottom:1px solid var(--line)}
.facts dt{color:var(--muted);font-size:var(--fs-body);padding-right:16px}
.facts dd{font-size:var(--fs-body-l);font-variant-numeric:tabular-nums lining-nums;text-wrap:pretty}
.facts a{text-decoration-color:var(--gold);text-decoration-thickness:2px}
.on-forest .facts{border-color:var(--forest-line)}
.on-forest .facts dt,.on-forest .facts dd{border-color:var(--forest-line)}
.on-forest .facts dt{color:var(--forest-muted)}

/* Dua kolom judul + isi */
.sec-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:start}
.sec-split>.sec-h{display:flex;flex-direction:column;align-items:flex-start;gap:20px;position:sticky;top:112px}
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,5vw,72px);align-items:start}
.cols2>div>.h3x{margin-bottom:24px}

/* Tabel */
.tbl-wrap{overflow-x:auto;border-top:1px solid var(--line)}
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-body);font-variant-numeric:tabular-nums lining-nums}
.tbl th,.tbl td{padding:16px 20px 16px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl thead th{font-size:var(--fs-small);font-weight:500;color:var(--muted);padding-block:16px}
.tbl tbody th{font-weight:500}
.tbl td:last-child,.tbl th:last-child{padding-right:0}
.tbl .r{text-align:right;white-space:nowrap}
.tbl-cmp thead th{font-size:var(--fs-h5);color:var(--ink);font-weight:500;letter-spacing:-.01em}
.tbl-cmp tbody th{color:var(--muted);font-weight:400;width:22%}

/* Langkah bernomor */
.nsteps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.nsteps li{border-top:1px solid var(--line);padding-top:24px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.nsteps .n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--gold);color:var(--gold-ink);font-weight:500;font-variant-numeric:tabular-nums}
.nsteps b{font-size:var(--fs-h5);font-weight:400;letter-spacing:-.015em;line-height:1.2}
.nsteps p{color:var(--muted);font-size:var(--fs-body)}
.on-forest .nsteps li{border-color:var(--forest-line)}
.on-forest .nsteps p{color:var(--forest-muted)}

/* Dokumen */
.docs li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.docs{border-top:1px solid var(--line)}
.dc{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;font-size:var(--fs-caption);font-weight:600;letter-spacing:.03em;box-shadow:inset 0 0 0 1px #B9C0B6}
.docs .is-every .dc{background:var(--gold);color:var(--gold-ink);box-shadow:none}
.docs b{display:block;font-weight:500;font-size:var(--fs-body)}
.docs small{font-size:var(--fs-small);color:var(--muted)}
.legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:16px;font-size:var(--fs-small);color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend i{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px #8E978C}
.legend i.m{background:var(--gold);box-shadow:none}

/* Baris ber-ikon */
.rows{border-top:1px solid var(--line)}
.rows li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:20px;align-items:start;padding:24px 0;border-bottom:1px solid var(--line)}
.rows .ic{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--gold);color:var(--gold-ink);font-size:21px}
.rows h3{font-size:var(--fs-h5);font-weight:500;letter-spacing:-.015em;line-height:1.25}
.rows p{margin-top:8px;color:var(--muted)}

/* Kartu produk (Products) */
.pcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.pcard{border-radius:var(--r);padding:clamp(20px,3vw,36px);display:flex;flex-direction:column;gap:24px;background:var(--tile)}
.pcard.on-forest{background:var(--forest);color:var(--forest-ink)}
.pcard figure{border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/10;background:var(--img-bg)}
.pcard figure img{width:100%;height:100%;object-fit:cover}
.pcard-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.pcard h2{font-size:var(--fs-h3);font-weight:400;letter-spacing:-.025em;line-height:1.08}
.pcard>p{color:var(--muted);max-width:52ch}
.pcard.on-forest>p{color:var(--forest-muted)}
.pcard .btns{margin-top:auto}

/* Kartu kecil 3 kolom (About) */
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cards2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}

/* Surat */
.letter{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,5vw,80px);align-items:start}
.letter-photo{position:sticky;top:112px;margin:0}
.letter-photo img{width:100%;aspect-ratio:4/4.6;object-fit:cover;border-radius:var(--r-md)}
.letter-photo figcaption,.fig figcaption{margin-top:12px;font-size:var(--fs-small);color:var(--muted)}
.prose p{font-size:var(--fs-body-l);line-height:1.66;max-width:62ch;text-wrap:pretty}
.prose p+p{margin-top:1em}
.prose a{text-decoration-color:var(--gold);text-decoration-thickness:2px}
.letter .h2{margin-bottom:28px}
.pull{font-size:var(--fs-h3)!important;letter-spacing:-.02em;line-height:1.25!important;margin-top:1.1em!important}
.sign{display:flex;align-items:center;gap:16px;margin-top:28px}
.sign img{width:56px;height:56px;border-radius:50%}
.sign span{display:flex;flex-direction:column}
.sign b{font-weight:500}
.sign small{font-size:var(--fs-small);color:var(--muted)}

/* Jalur foto (About) */
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:clamp(36px,4.5vw,56px)}
.strip figure{margin:0}
.strip img{width:100%;aspect-ratio:4/4.6;object-fit:cover;border-radius:var(--r-md)}
.strip figcaption{margin-top:16px}
.strip b{display:block;font-size:var(--fs-h5);font-weight:500;letter-spacing:-.01em}
.strip small{display:block;margin-top:4px;color:var(--muted);font-size:var(--fs-body)}

/* Tim */
/* Tim: kartu terang dengan foto bulat besar berbingkai emas, nama dan jabatan di bawah (tahap 9, pilihan B) */
.team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:clamp(32px,4vw,48px)}
.team li{display:flex;flex-direction:column;align-items:center;gap:24px;padding:32px 24px 28px;border-radius:var(--r-md);background:var(--tile);text-align:center;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.team span{display:flex;flex-direction:column;align-items:center;gap:6px}
.team b{font-size:var(--fs-h5);font-weight:500;letter-spacing:-.018em;line-height:1.2;text-wrap:balance}
.team small{color:var(--muted);font-size:var(--fs-body);line-height:1.4}
.team img{width:152px;height:152px;border-radius:50%;object-fit:cover;background:var(--img-bg);box-shadow:0 0 0 6px var(--paper),0 0 0 8px var(--gold),0 20px 40px -20px rgba(16,21,17,.5);transition:transform .6s var(--ease)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.team li:hover,.anim .team.rv-s.in>li:hover{transform:translateY(-6px);box-shadow:0 24px 40px -28px rgba(16,21,17,.45)}.team li:hover img{transform:scale(1.04)}}

/* Petak cepat (FAQ) */
.qtiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(36px,4.5vw,56px)}
.qtiles .tile{min-height:clamp(180px,16vw,220px)}

/* Kontak */
.clist li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:16px 0;border-bottom:1px solid var(--forest-line)}
.clist li:first-child{border-top:1px solid var(--forest-line)}
.clist small{display:block;font-size:var(--fs-small);color:var(--forest-muted)}
.clist .cv{font-size:var(--fs-body-l);overflow-wrap:anywhere}
.clist a.cv{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.clist a.cv:hover{text-decoration:underline}
.clist address{font-style:normal;font-size:var(--fs-body);line-height:1.55}
.copy-b{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--forest-line);font-size:var(--fs-small);font-weight:500;color:var(--forest-ink)}
.copy-b svg{font-size:17px}
.copy-b:hover{box-shadow:inset 0 0 0 1px rgba(244,246,242,.5)}
.c-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:20px;align-items:start;margin-top:clamp(32px,4vw,48px)}
.c-side{display:flex;flex-direction:column;gap:20px}
.panel-sm{padding:clamp(24px,3vw,36px)}
.panel-sm .h3x{margin-bottom:20px}
.mini-steps li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.mini-steps li:first-child{border-top:1px solid var(--line)}
.mini-steps .n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--gold);color:var(--gold-ink);font-weight:500;font-size:var(--fs-body)}
.mini-steps b{display:block;font-weight:500}
.mini-steps p{font-size:var(--fs-body);color:var(--muted)}

/* Formulir */
.form-card{background:var(--tile);border-radius:var(--r);padding:clamp(20px,3.4vw,40px)}
.form-card .h3x{margin-bottom:8px}
.form-card>p{color:var(--muted);font-size:var(--fs-body);margin-bottom:24px}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
.f{display:flex;flex-direction:column;gap:8px;min-width:0;margin:0;padding:0;border:0}
.f.full{grid-column:1/-1}
.f>span:first-child,.f>label:first-child,.f legend{font-size:var(--fs-body);font-weight:500;padding:0;margin-bottom:8px}
.f legend{float:left;width:100%}
.f legend+*{clear:both}
.f small{font-weight:400;color:var(--muted);margin-left:4px}
.f input,.f textarea{font:inherit;font-size:var(--fs-body);color:var(--ink);background:var(--field);border:1px solid var(--field-line);border-radius:14px;min-height:52px;padding:12px 16px;width:100%;transition:border-color .2s}
.f textarea{min-height:128px;resize:vertical;line-height:1.5}
.f input::placeholder,.f textarea::placeholder{color:var(--ph);opacity:1}
.f input:hover,.f textarea:hover{border-color:var(--field-line-hi)}
.f input:focus-visible,.f textarea:focus-visible{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}
.f [aria-invalid="true"]{border-color:var(--err)}
.ferr{color:var(--err);font-size:var(--fs-small)}
.pills{display:flex;flex-wrap:wrap;gap:12px}
.pill{min-height:46px;padding:0 20px;border-radius:999px;background:var(--field);box-shadow:inset 0 0 0 1px var(--field-line);font-size:var(--fs-body);transition:background-color .2s,color .2s}
.pill:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.pill[aria-pressed="true"],.pill.on{background:var(--pill-on);color:var(--pill-on-ink);box-shadow:none}
label.pill{position:relative;display:inline-flex;align-items:center;cursor:pointer}
label.pill input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
label.pill:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.pills:has([aria-invalid="true"]) .pill{box-shadow:inset 0 0 0 1px var(--err)}
.nw{white-space:nowrap}
.formfoot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px;margin-top:28px}
.formfoot .btn{border:0;cursor:pointer}
.hint{font-size:var(--fs-small);color:var(--muted)}
.flash{margin-top:20px;padding:16px 20px;border-radius:16px;font-size:var(--fs-body);line-height:1.5}
.flash b{display:block;margin-bottom:2px;font-weight:500}
.flash.bad{background:var(--bad-bg);color:var(--bad-ink)}
.flash.ok{background:var(--good-bg);color:var(--good-ink)}
.flash:focus{outline:2px solid var(--ink);outline-offset:2px}

/* Blog */
.bcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(36px,4.5vw,56px)}
.bcard a{display:flex;flex-direction:column;gap:16px;text-decoration:none;height:100%}
.bcard figure{margin:0;aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden}
.bcard figure img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.bcard a:hover figure img{transform:scale(1.035)}
.bcard .meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:var(--fs-small);color:var(--muted)}
.bcard h2{font-size:var(--fs-h4);font-weight:400;letter-spacing:-.018em;line-height:1.22;text-wrap:balance}
.bcard a:hover h2{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px}
.bcard p{color:var(--muted);font-size:var(--fs-body)}
.bcard .go{margin-top:auto;display:inline-flex;align-items:center;gap:12px;font-weight:500;font-size:var(--fs-body)}
.bcard .go .circ{width:40px;height:40px}

/* Artikel */
.art-photo{margin:clamp(32px,4vw,48px) 0 0}
.art-photo img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--r)}
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(32px,5vw,80px);align-items:start;margin-top:clamp(36px,4.5vw,56px)}
.art{min-width:0}
.art>*{max-width:68ch}
.art .tbl-wrap,.art .facts,.art .glance{max-width:none}
.art p{font-size:var(--fs-body-l);line-height:1.7;text-wrap:pretty}
.art p+p{margin-top:1em}
.art h2{font-size:var(--fs-h3);font-weight:400;letter-spacing:-.022em;line-height:1.15;margin:1.9em 0 .6em;text-wrap:balance}
.art a{text-decoration-color:var(--gold);text-decoration-thickness:2px}
.glance{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:8px}
.glance li{background:var(--tile);border-radius:var(--r-sm);padding:20px}
.glance b{display:block;font-size:var(--fs-h5);font-weight:500;letter-spacing:-.01em}
.glance small{display:block;margin-top:4px;font-size:var(--fs-small);color:var(--muted)}
.osteps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.osteps{border-top:1px solid var(--line)}
.osteps .n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--gold);color:var(--gold-ink);font-weight:500}
.osteps b{display:block;font-size:var(--fs-h5);font-weight:500;letter-spacing:-.01em}
.osteps p{margin-top:4px;font-size:var(--fs-body)!important;color:var(--muted)}
.art .fig{margin:32px 0}
.art .fig img{border-radius:var(--r-md);width:100%;aspect-ratio:16/9;object-fit:cover}
.art .acc{margin-top:8px}
.art .acc-b{font-size:var(--fs-h5);min-height:72px}
.aside{position:sticky;top:112px;display:flex;flex-direction:column;gap:20px}
.aside .panel{padding:28px}
.aside .h3x{font-size:var(--fs-h3);margin-bottom:12px}
.aside p{color:var(--forest-muted);font-size:var(--fs-body);margin-bottom:24px}
.aside .btn{width:100%;justify-content:space-between}
.a-more h2{font-size:var(--fs-body-l);font-weight:500;margin-bottom:8px}
.a-more a{display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:12px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none;font-size:var(--fs-body);line-height:1.35}
.a-more a:first-of-type{border-top:1px solid var(--line)}
.a-more .circ{width:40px;height:40px}
.a-more a:hover span:first-child{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px}

/* Panel hijau di halaman dalam */
.on-forest .h2,.on-forest .h3x{color:var(--forest-ink)}
.panel .sub{color:var(--forest-muted)}

@media (max-width:1000px){
  .phead-in,.thead-row,.sec-split,.cols2,.letter,.c-grid,.art-grid{grid-template-columns:minmax(0,1fr)}
  .sec-split>.sec-h,.letter-photo,.aside{position:static}
  .letter-photo img{aspect-ratio:16/10}
  .fhead{grid-template-columns:minmax(0,1fr)}
  .cards3{grid-template-columns:minmax(0,1fr)}
  .nsteps,.strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .team{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bcards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qtiles{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .phead{min-height:540px}
  .fhead-r figure{min-height:220px}
  .fields,.cards2,.glance{grid-template-columns:minmax(0,1fr)}
  .nsteps{grid-template-columns:minmax(0,1fr)}
  .bcards{grid-template-columns:minmax(0,1fr)}
  .qtiles{grid-template-columns:minmax(0,1fr)}
  .qtiles .tile{min-height:0}
  .facts{grid-template-columns:minmax(0,1fr)}
  .facts dt{border-bottom:0;padding-bottom:0}
  .facts dd{padding-top:4px}
  .tbl-cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl-cmp,.tbl-cmp tbody,.tbl-cmp tr,.tbl-cmp th,.tbl-cmp td{display:block;width:100%}
  .tbl-cmp tr{padding:16px 0;border-bottom:1px solid var(--line)}
  .tbl-cmp tbody th,.tbl-cmp td{border:0;padding:2px 0}
  .tbl-cmp tbody th{width:100%;font-size:var(--fs-small);margin-bottom:8px}
  .tbl-cmp td{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px}
  .tbl-cmp td::before{content:attr(data-label);font-size:var(--fs-small);font-weight:500;color:var(--ink)}
  .clist li{grid-template-columns:minmax(0,1fr)}
  .clist .copy-b{justify-self:start}
  .art-photo img{aspect-ratio:4/3}
}
@media (max-width:420px){
  .strip{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
  .strip b{font-size:var(--fs-body-l)}
  .strip small{font-size:var(--fs-small)}
}

/* Surat pendiri tanpa foto */
.letter-text{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto 1fr;grid-template-areas:"h p" "s p";row-gap:28px}
.letter-text>.h2{grid-area:h;margin:0}
.letter-text>.prose{grid-area:p}
.letter-text>.sign{grid-area:s;margin-top:0;align-self:start}
/* Tabel lab: metode pindah ke bawah parameter di HP */
.tbl-lab .m-ph{display:none}
.tbl-cmp td>span{display:block}
.stat{flex-wrap:wrap;row-gap:4px}
.stat .num{white-space:nowrap}
@media (max-width:1000px){
  .letter-text{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"h" "p" "s"}
}
@media (max-width:760px){
  .tbl-lab .m{display:none}
  .tbl-lab .m-ph{display:block;margin-top:4px;font-size:var(--fs-caption);font-weight:400;color:var(--muted)}
  .stat .num.num-sm{font-size:var(--fs-h3)}
}
.crumb a{padding-inline:12px;margin-inline:-12px}
.thead .crumb span[aria-hidden]{opacity:1}
@media (max-width:1000px){
  .phead-shade{background:linear-gradient(180deg,rgba(5,13,7,.58) 0%,rgba(5,13,7,.7) 30%,rgba(5,13,7,.8) 60%,rgba(5,13,7,.92) 100%)}
  .cta-shade{background:linear-gradient(180deg,rgba(5,13,7,.52) 0%,rgba(5,13,7,.74) 40%,rgba(5,13,7,.88) 100%)}
}

/* ---------- Kemasan: kemasan di depan miring mengikuti kursor ---------- */
.pk-tile{transform:perspective(1100px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));transform-style:preserve-3d;transition:transform .8s var(--ease),box-shadow .4s var(--ease)}
.pk.is-track .pk-tile{transition:transform .18s linear,box-shadow .4s var(--ease)}
.pk-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.34),rgba(255,255,255,0) 58%);opacity:0;transition:opacity .4s var(--ease);pointer-events:none}
.pk.is-track .pk-tile::after{opacity:1}
.pk[aria-pressed="true"].is-track .pk-tile{box-shadow:0 30px 50px -26px rgba(16,21,17,.6)}
.pk-foot{justify-content:center;text-align:center}
.pk-info{margin-inline:auto}
@media (max-width:760px){
  .pk-foot{text-align:left}
}

/* ---------- Gerak saat digulir (hanya bila JS memasang .anim; mati bila gerak dikurangi) ---------- */
.anim .hero-img,.anim .phead>img,.anim .phead>picture>img,.anim .cta-img{scale:1.12;will-change:translate}
.anim .rv-t{opacity:.001;transform:translateY(.45em);filter:blur(6px)}
.anim .rv-t.in{opacity:1;transform:none;filter:none;transition:opacity 1s var(--ease),transform 1.1s var(--ease),filter 1s var(--ease)}
.anim .rv-p{clip-path:inset(16% 0 0 0 round var(--r-md))}
.anim .rv-p img{transform:scale(1.16)}
.anim .rv-p.in{clip-path:inset(0 0 0 0 round var(--r-md));transition:clip-path 1.25s var(--ease)}
.anim .rv-p.in img{transform:none;transition:transform 1.4s var(--ease)}
.anim .rv-c{clip-path:inset(5% 4% 5% 4% round var(--r))}
.anim .rv-c.in{clip-path:inset(0 0 0 0 round var(--r));transition:clip-path 1.2s var(--ease)}
.anim .rv-s>*{opacity:.001;transform:translateY(26px)}
.anim .rv-s.in>*{opacity:1;transform:none;transition:opacity .9s var(--ease) calc(var(--i,0) * 75ms),transform 1s var(--ease) calc(var(--i,0) * 75ms)}
.anim .facts.rv-s>*,.anim .acc.rv-s>*,.anim .docs.rv-s>*,.anim .rows.rv-s>*,.anim .clist.rv-s>*,.anim .mini-steps.rv-s>*{transform:translateY(12px)}
.anim .facts.rv-s.in>*,.anim .acc.rv-s.in>*,.anim .docs.rv-s.in>*,.anim .rows.rv-s.in>*,.anim .clist.rv-s.in>*,.anim .mini-steps.rv-s.in>*{transform:none}

/* Kepala halaman dalam: judul naik dan foto melambat saat halaman dibuka */
@media (prefers-reduced-motion:no-preference){
  .phead>img,.phead>picture>img{animation:heroImg 1.8s var(--ease) both}
  .page-top .h1{animation:rise 1.1s var(--ease) both}
  .phead-side,.thead-row>div,.fhead-l>p,.fhead-l .btns,.fhead-r,.page-top .crumb{animation:fade 1s var(--ease) .3s both}
  .art-photo img{animation:heroImg 1.8s var(--ease) both}
}

/* ---------- Isi artikel dari Tools: daftar, kutipan, tabel, jarak antarbagian ---------- */
.art>*+*{margin-top:20px}
.art>.glance:first-child{margin-top:0}
.art-ul{display:grid;gap:12px}
.art-ul li{position:relative;padding-left:28px;font-size:var(--fs-body-l);line-height:1.6;text-wrap:pretty}
.art-ul li::before{content:"";position:absolute;left:5px;top:.7em;width:7px;height:7px;border-radius:50%;background:var(--forest-3)}
.art-q{margin-block:36px;padding-top:24px;border-top:1px solid var(--line)}
.art-q p{font-size:var(--fs-h4)!important;line-height:1.3!important;letter-spacing:-.018em;text-wrap:balance}
.art-q footer{margin-top:12px;font-size:var(--fs-body);color:var(--muted)}
.art .facts dd p,.art .tbl p{font-size:inherit}
.tbl-art tbody th{font-weight:500;padding-right:20px}
.tbl-art td>span{display:block}
.tbl-art td,.tbl-art th{text-wrap:pretty}
@media (max-width:760px){
  .tbl-art thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl-art,.tbl-art tbody,.tbl-art tr,.tbl-art th,.tbl-art td{display:block;width:100%}
  .tbl-art tr{padding:16px 0;border-bottom:1px solid var(--line)}
  .tbl-art tbody th,.tbl-art td{border:0;padding:2px 0}
  .tbl-art tbody th{margin-bottom:8px}
  .tbl-art td[data-label]{display:grid;grid-template-columns:minmax(84px,34%) minmax(0,1fr);gap:12px}
  .tbl-art td[data-label]::before{content:attr(data-label);font-size:var(--fs-small);color:var(--muted)}
  .art-ul li{font-size:var(--fs-body-l)}
}

/* ---------- Formulir: jebakan robot, tombol saat mengirim ---------- */
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.btn:disabled,.btn[aria-disabled="true"]{cursor:progress;opacity:.72}
.nowrap{white-space:nowrap}

/* ---------- Dialog company profile ---------- */
.dlg{border:0;padding:0;margin:auto;width:min(580px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto;border-radius:var(--r);background:var(--dlg);color:var(--ink);box-shadow:0 40px 90px -30px rgba(5,13,7,.6)}
.dlg::backdrop{background:rgba(5,13,7,.64)}
.dlg-in{padding:clamp(24px,4vw,40px)}
.dlg-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}
.dlg-top .h3x{margin:0}
.dlg-x{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;flex:none;font-size:18px;box-shadow:inset 0 0 0 1px var(--line-btn);transition:box-shadow .2s}
.dlg-x:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.dlg-sub{color:var(--muted);font-size:var(--fs-body);line-height:1.5;margin-bottom:24px;max-width:48ch}
.dlg-sub:focus{outline:none}
.dlg .fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.dlg .formfoot{margin-top:24px}
#dlDone .btn{margin-top:4px}
@media (prefers-reduced-motion:no-preference){
  .dlg[open]{animation:dlgIn .5s var(--ease)}
  .dlg[open]::backdrop{animation:dlgBg .4s var(--ease)}
}
@keyframes dlgIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes dlgBg{from{opacity:0}to{opacity:1}}
@media (max-width:560px){
  .dlg .fields{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Kebijakan privasi ---------- */
.legal{max-width:70ch}
.legal h2{font-size:var(--fs-h4);font-weight:400;letter-spacing:-.018em;line-height:1.2;margin:1.9em 0 .55em}
.legal h2:first-child{margin-top:0}
.legal ul{display:grid;gap:8px;margin:.8em 0 1em}
.legal li{position:relative;padding-left:24px;font-size:var(--fs-body-l);line-height:1.6}
.legal li::before{content:"";position:absolute;left:5px;top:.7em;width:7px;height:7px;border-radius:50%;background:var(--forest-3)}

/* ---------- Dua kartu produk tetap berdampingan di tablet, satu kolom di HP ---------- */
@media (max-width:700px){.pcards{grid-template-columns:minmax(0,1fr)}}

/* ---------- Panah hanya untuk pindah halaman ----------
   Buka-tutup (tanya-jawab, langkah pemesanan) memakai tanda + yang menjadi - saat terbuka.
   Tombol kedua tanpa lingkaran panah, supaya tombol emas tetap paling menonjol. */
.acc-b .circ{position:relative}
.acc-b .circ svg{display:none}
.acc-b .circ::before,.acc-b .circ::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -8px;border-radius:1px;background:currentColor;transition:transform .35s var(--ease)}
.acc-b .circ::after{transform:rotate(90deg)}
.acc-b[aria-expanded="true"] .circ{transform:none}
.acc-b[aria-expanded="true"] .circ::after{transform:rotate(0deg)}
.btn:not(:has(.arw)){padding:8px 24px}

/* ---------- Tombol kiri/kanan dan posisi kemasan ---------- */
.pk-nav{display:flex;align-items:center;gap:12px;flex:none}
.pk-arr{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1px #9AA197;color:var(--ink);cursor:pointer;transition:background-color .2s,box-shadow .2s}
.pk-arr:hover{background:var(--tile);box-shadow:inset 0 0 0 1px var(--ink)}
.pk-arr svg{width:20px;height:20px}
.pk-count{min-width:44px;text-align:center;font-size:var(--fs-body);color:var(--muted);font-variant-numeric:tabular-nums}
.pk[aria-pressed="true"] .pk-cap{opacity:0}
@media (max-width:760px){.pk-nav{justify-content:center;order:-1}}

/* Link di dalam teks: area sentuh 44 px tanpa mengubah tata letak */
.facts dd a,.hint a{position:relative}
.facts dd a::after,.hint a::after{content:"";position:absolute;inset:-13px -4px}
/* Tombol emas "liquid" (tahap 4): teks di kapsul emas, panah di bulatan emas di sebelahnya, disambung leher cair oleh
   filter #goo di sprite ikon. Saat kursor masuk (di HP saat ditekan) bulatan menjauh: lehernya menipis, putus, dan
   bulatan berdiri sendiri; saat kursor keluar keduanya menyatu lagi. Teks dan panah tetap tajam karena digambar ulang di
   atas bentuk cair. Lebar tombol tidak berubah saat disentuh (kapsulnya yang memendek). Hanya tombol emas yang punya panah. */
@property --gap{syntax:"<length>";inherits:true;initial-value:0px}
.btn-gold:has(.arw){--gap:0px;position:relative;isolation:isolate;background:none;padding:0 0 0 24px;gap:28px;filter:url(#goo);
  transition:--gap .55s cubic-bezier(.3,.7,.2,1),color .25s var(--ease)}
.btn-gold:has(.arw)::before{content:"";position:absolute;z-index:-1;inset:0 calc(52px + var(--gap)) 0 0;border-radius:999px;background:var(--gold);transition:background-color .25s var(--ease)}
.btn-gold .arw{width:52px;height:52px;background:var(--gold);color:var(--gold-ink);transition:background-color .25s var(--ease)}
.btn-gold:has(.arw):hover,.btn-gold:has(.arw):active{--gap:14px;background:none;box-shadow:none}
.btn-gold:has(.arw):hover::before,.btn-gold:hover .arw{background:var(--gold-hi)}
/* Panah → di tombol liquid "berguling": keluar ke kanan lalu masuk lagi dari kiri, sekali setiap kursor masuk */
.btn-gold .arw{overflow:hidden}
@keyframes arw-roll{0%{transform:translateX(0);animation-timing-function:cubic-bezier(.55,0,1,.45)}40%{transform:translateX(34px)}40.1%{transform:translateX(-34px);animation-timing-function:cubic-bezier(0,.55,.45,1)}100%{transform:translateX(0)}}
.btn-gold:hover .arw:has(use[href="#i-e"]) svg,.btn-gold:active .arw:has(use[href="#i-e"]) svg{transform:none;animation:arw-roll .5s linear}
/* Garis fokus keyboard tidak boleh ikut dicairkan */
.btn-gold:has(.arw):focus-visible{filter:none}
@media (prefers-reduced-motion:reduce){.btn-gold:has(.arw){transition:none}.btn-gold .arw svg{animation:none!important}}

/* ---------- Mode gelap (tahap 6) ----------
   Ikut pengaturan perangkat pengunjung; tombol bulan/matahari di header menyimpan pilihan sendiri (localStorage "bt-theme").
   Hanya peran warna yang berganti: kanvas hijau-hitam, panel hijau sedikit lebih terang dengan garis tipis, emas tetap.
   Kotak foto kemasan (latar putih) tetap terang. Kedua blok di bawah harus sama isinya. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0E1411; --tile:#161E19; --ink:#ECEFEA; --muted:#9BA59C; --line:#28322B;
  --forest:#143120; --forest-2:#1B3D28; --forest-3:#234931;
  --night:#090D0A;
  --sb:#3A453D; --sb-thumb:#3A453D; --sb-hover:#56625A;
  --line-ctl:#5D6A60; --line-btn:#5D6A60; --img-bg:#1C251F; --pk-bg:#E4E6DF;
  --field:#121A15; --field-line:#6E796F; --field-line-hi:#9AA59B; --ph:#8E988F; --err:#FF9A8B;
  --pill-on:var(--gold); --pill-on-ink:var(--gold-ink);
  --bad-bg:#3B1A15; --bad-ink:#FFC2B8; --good-bg:#17301F; --good-ink:#BFE5C7;
  --hd-solid:rgba(14,20,17,.86); --mk-l-solid:1; --mk-d-solid:0; --toast-ink:#0E1411;
  --dlg:#161E19; --panel-edge:rgba(244,246,242,.07);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --paper:#0E1411; --tile:#161E19; --ink:#ECEFEA; --muted:#9BA59C; --line:#28322B;
  --forest:#143120; --forest-2:#1B3D28; --forest-3:#234931;
  --night:#090D0A;
  --sb:#3A453D; --sb-thumb:#3A453D; --sb-hover:#56625A;
  --line-ctl:#5D6A60; --line-btn:#5D6A60; --img-bg:#1C251F; --pk-bg:#E4E6DF;
  --field:#121A15; --field-line:#6E796F; --field-line-hi:#9AA59B; --ph:#8E988F; --err:#FF9A8B;
  --pill-on:var(--gold); --pill-on-ink:var(--gold-ink);
  --bad-bg:#3B1A15; --bad-ink:#FFC2B8; --good-bg:#17301F; --good-ink:#BFE5C7;
  --hd-solid:rgba(14,20,17,.86); --mk-l-solid:1; --mk-d-solid:0; --toast-ink:#0E1411;
  --dlg:#161E19; --panel-edge:rgba(244,246,242,.07);
  color-scheme:dark;
}
.theme-btn{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;flex:none;font-size:20px;background:rgba(15,38,22,.9);color:var(--forest-ink);box-shadow:0 8px 30px -14px rgba(0,0,0,.6);transition:background-color .25s var(--ease)}
.theme-btn:hover{background:var(--forest-3)}
.hd.is-solid .theme-btn{background:var(--forest);box-shadow:none}
.hd.is-solid .theme-btn:hover{background:var(--forest-3)}
.theme-btn .i-sun,.theme-btn[aria-pressed="true"] .i-moon{display:none}
.theme-btn[aria-pressed="true"] .i-sun{display:block}
@media (max-width:1239px){.theme-btn{width:46px;height:46px}}

/* ---------- Bahasa (tahap 7) ----------
   Halaman /de/, /ar/, /zh/, /ja/ dibuat dari halaman Inggris oleh alat terjemahan (Library: web-tools/i18n).
   Tombol bahasa di header (laptop dan tablet) dan daftar bahasa di menu HP. */
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:300 600;font-display:swap;src:url(/assets/fonts/readex-pro-arabic.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF}
html[lang="ar"]{--font:"DM Sans","Readex Pro",ui-sans-serif,system-ui,"Segoe UI",Tahoma,sans-serif}
html[lang^="zh"]{--font:"DM Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC",sans-serif}
html[lang="ja"]{--font:"DM Sans","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Meiryo","Noto Sans JP","Noto Sans CJK JP",sans-serif}
/* Huruf Arab tersambung dan huruf Han/Kana rapat: jarak huruf negatif dari desain Inggris dilepas, baris judul diberi ruang */
html:is([lang="ar"],[lang^="zh"],[lang="ja"]) *:not(.brand-tx *){letter-spacing:0!important}
html:is([lang^="zh"],[lang="ja"]) :is(.h1,.h2,.h3x,.hero-h,.pk-info h3,.pcard h2,.art h2){line-height:1.22}
html[lang="ar"] body{line-height:1.75}
/* Jepang: judul besar dipatahkan per frasa, bukan di tengah kata */
html[lang="ja"] :is(h1,h2,h3,.h1,.h2,.h3x,.hero-h,.lead){word-break:auto-phrase}
html[lang="ar"] :is(.h1,.h2,.h3x,.hero-h,.pk-info h3,.pcard h2,.art h2){line-height:1.35}
html[lang="ar"] :is(.lead,.q-fig blockquote p){line-height:1.6}
html[lang="de"] :is(h1,h2,h3,.h1,.h2,.h3x,.hero-h,.lead,p,li,dd,td,th,b){hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:12 5 5}
/* Menu header tetap satu baris di semua bahasa (huruf Han/Kana dan Arab bisa terputus per huruf) */
.hd-in :is(.nav-ul>li>a,.nav-t){white-space:nowrap}
.hd-in>.brand{flex-shrink:0}
.hd-in .brand-tx small{white-space:nowrap}
/* Tombol emas Jerman paling panjang: di tablet sempit tombolnya tetap ada di menu dan di halaman */
@media (max-width:780px){html[lang="de"] .hd-cta{display:none}}

.lang{position:relative;flex:none}
.lang-btn{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 16px;border-radius:999px;background:rgba(15,38,22,.9);color:var(--forest-ink);font-size:var(--fs-body);font-weight:500;box-shadow:0 8px 30px -14px rgba(0,0,0,.6);transition:background-color .25s var(--ease)}
.lang-btn svg{font-size:19px}
.lang-btn:hover,.lang-btn[aria-expanded="true"]{background:var(--forest-3)}
.hd.is-solid .lang-btn{background:var(--forest);box-shadow:none}
.hd.is-solid .lang-btn:hover,.hd.is-solid .lang-btn[aria-expanded="true"]{background:var(--forest-3)}
.lang-list{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:5;min-width:200px;padding:8px;border-radius:var(--r-sm);background:var(--forest);box-shadow:0 24px 48px -20px rgba(5,13,7,.6),inset 0 0 0 1px var(--forest-line)}
.lang-list a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:0 16px;border-radius:12px;color:var(--forest-ink);text-decoration:none}
.lang-list a:hover{background:rgba(244,246,242,.1)}
.lang-list a[aria-current="true"]{color:var(--gold)}
.lang-list a[aria-current="true"]::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold)}
.mnav-lang{display:flex;flex-wrap:wrap;gap:8px}
.mnav-lang a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--forest-line);color:var(--forest-ink);text-decoration:none}
.mnav-lang a[aria-current="true"]{background:var(--gold);color:var(--gold-ink);box-shadow:none}
@media (max-width:1239px){.lang-btn{height:46px}}
@media (max-width:760px){.lang{display:none}}

/* Arab: tata letak dibalik kanan ke kiri; panah ikut menghadap ke kiri */
[dir="rtl"] .skip{left:auto;right:16px}
[dir="rtl"] .brand{margin-right:0;margin-left:auto}
[dir="rtl"] .nav{margin-left:0;margin-right:auto}
@media (min-width:1240px){[dir="rtl"] .hd-in>.brand{margin-left:0}}
[dir="rtl"] .brand-static{margin-left:0}
[dir="rtl"] .hero-shade{background:linear-gradient(180deg,rgba(5,13,7,.62) 0%,rgba(5,13,7,.08) 26%,rgba(5,13,7,0) 40%,rgba(5,13,7,.42) 62%,rgba(5,13,7,.86) 100%),linear-gradient(270deg,rgba(5,13,7,.35) 0%,rgba(5,13,7,0) 60%)}
[dir="rtl"] .phead-shade{background:linear-gradient(180deg,rgba(5,13,7,.62) 0%,rgba(5,13,7,.16) 26%,rgba(5,13,7,.48) 52%,rgba(5,13,7,.9) 100%),linear-gradient(270deg,rgba(5,13,7,.45) 0%,rgba(5,13,7,0) 65%)}
[dir="rtl"] .cta-shade{background:linear-gradient(270deg,rgba(5,13,7,.86) 0%,rgba(5,13,7,.66) 55%,rgba(5,13,7,.62) 100%)}
[dir="rtl"] .panel-deco{left:auto;right:-14%}
[dir="rtl"] .card-go{right:auto;left:24px}
@media (max-width:760px){[dir="rtl"] .card-go{left:20px}}
[dir="rtl"] :is(.acc-b,.pk-foot){text-align:right}
[dir="rtl"] .facts dt{padding-right:0;padding-left:16px}
[dir="rtl"] .tbl th,[dir="rtl"] .tbl td{padding:16px 0 16px 20px;text-align:right}
[dir="rtl"] .tbl td:last-child,[dir="rtl"] .tbl th:last-child{padding-left:0}
[dir="rtl"] .tbl .r{text-align:left}
[dir="rtl"] .f legend{float:right}
[dir="rtl"] .f small{margin-left:0;margin-right:4px}
[dir="rtl"] .tbl-art tbody th{padding-right:0;padding-left:20px}
[dir="rtl"] :is(.art-ul,.legal) li{padding-left:0;padding-right:28px}
[dir="rtl"] :is(.art-ul,.legal) li::before{left:auto;right:5px}
[dir="rtl"] .hp{left:auto;right:-10000px}
/* Nama Latin (Arenga pinnata, dll.) dipisah dari arah teks Arab supaya tanda kurung tidak tertukar */
[dir="rtl"] :is(i,.nowrap,code){unicode-bidi:isolate}
[dir="rtl"] i{white-space:nowrap}
/* Kemasan berputar tetap kiri ke kanan supaya tombol sebelumnya/berikutnya cocok dengan gerakannya */
[dir="rtl"] .pk-ring{direction:ltr}
[dir="rtl"] .pk-ring .pk-cap{direction:rtl}
/* Panah → menjadi ←, ↗ menjadi ↖ */
[dir="rtl"] :is(.arw,.circ,.card-go,.pk-arr) svg{transform:scaleX(-1)}
[dir="rtl"] .btn:hover .arw svg,[dir="rtl"] .g-list a:hover .circ svg,[dir="rtl"] a.card:hover .card-go svg{transform:scaleX(-1) translateX(3px)}
[dir="rtl"] .btn:hover .arw:has(use[href="#i-ne"]) svg{transform:scaleX(-1) translate(2px,-2px)}
[dir="rtl"] .btn:hover .arw:has(use[href="#i-dl"]) svg{transform:translateY(3px)}
[dir="rtl"] .arw:has(use[href="#i-dl"]) svg{transform:none}
[dir="rtl"] .btn-gold:has(.arw){padding:0 24px 0 0}
[dir="rtl"] .btn-gold:has(.arw)::before{inset:0 0 0 calc(52px + var(--gap))}
@keyframes arw-roll-rtl{0%{transform:scaleX(-1) translateX(0);animation-timing-function:cubic-bezier(.55,0,1,.45)}40%{transform:scaleX(-1) translateX(34px)}40.1%{transform:scaleX(-1) translateX(-34px);animation-timing-function:cubic-bezier(0,.55,.45,1)}100%{transform:scaleX(-1) translateX(0)}}
[dir="rtl"] .btn-gold:hover .arw:has(use[href="#i-e"]) svg,[dir="rtl"] .btn-gold:active .arw:has(use[href="#i-e"]) svg{transform:scaleX(-1);animation-name:arw-roll-rtl}
[dir="rtl"] .btn{padding:8px 24px 8px 8px}
[dir="rtl"] .acc-p p{padding:0 0 24px 64px}

/* ---------- Menu dropdown (tahap 8) ----------
   Products dan Applications membuka panel hijau tua di bawah menu. Satu latar (.dd-bg) berpindah dan berubah ukuran
   mengikuti panel yang aktif; isi panel bergeser masuk dari arah menu sebelumnya. Posisi dan ukuran diatur site.js. */
.nav{position:relative}
.nav-t{gap:6px}
/* Label Arab paling lebar: jarak dalam tombol menu sedikit dikurangi supaya menu lengkap tetap muat mulai layar 1240px */
html[lang="ar"] :is(.nav-ul>li>a,.nav-t){padding:0 16px}
.nav-t .chev{font-size:15px;margin-inline-end:-4px;transition:transform .3s var(--ease)}
.nav-t[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav-t.is-cur[aria-expanded="true"]{background:var(--gold-hi)}
.dd-bg{position:absolute;top:calc(100% + 10px);left:0;width:0;height:0;border-radius:var(--r-sm);background:var(--forest);box-shadow:0 28px 56px -24px rgba(5,13,7,.65),inset 0 0 0 1px var(--forest-line);opacity:0;translate:0 -6px;pointer-events:none;transition:opacity .2s var(--ease),translate .3s var(--ease),transform .38s var(--ease),width .38s var(--ease),height .38s var(--ease)}
.nav.dd-open .dd-bg{opacity:1;translate:0 0}
.dd-p{position:absolute;top:calc(100% + 10px);left:0;z-index:1;padding:8px;color:var(--forest-ink);opacity:0;transform:translateX(var(--dx,0px));transition:opacity .22s var(--ease),transform .38s var(--ease)}
.dd-p.on{opacity:1;transform:none}
.dd-p::before{content:"";position:absolute;inset:-12px 0 auto;height:12px}
.dd-prod{display:grid;grid-template-columns:292px 232px;gap:8px}
.dd-list{display:flex;flex-direction:column;gap:2px}
.dd-list a,.dd-card{display:flex;flex-direction:column;gap:2px;border-radius:12px;color:var(--forest-ink);text-decoration:none;transition:background-color .2s}
.dd-list a{padding:11px 14px}
.dd-list b,.dd-card b{font-weight:500;font-size:var(--fs-body);letter-spacing:-.005em}
.dd-list span,.dd-card span{font-size:var(--fs-small);line-height:1.4;color:var(--forest-muted)}
.dd-list a:hover,.dd-list a.act,.dd-card:hover{background:rgba(244,246,242,.08)}
.dd-p a[aria-current="page"] b{color:var(--gold)}
.dd-fig{position:relative;border-radius:12px;overflow:hidden;background:var(--forest-2)}
.dd-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .35s var(--ease),transform .6s var(--ease)}
.dd-fig img.on{opacity:1;transform:none}
.dd-cards{display:grid;grid-template-columns:repeat(2,232px);gap:8px}
.dd-card{padding:6px 6px 12px}
.dd-card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;margin-bottom:10px;background:var(--forest-2);transition:transform .5s var(--ease)}
.dd-card :is(b,span){padding-inline:8px}
.dd-card:hover img{transform:scale(1.02)}

/* Menu HP: produk dan pemakaian sebagai tautan kecil di bawah Products */
.mnav-sub{display:flex;flex-wrap:wrap;gap:8px;padding:14px 0 6px}
.mnav-sub a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--forest-line);color:var(--forest-ink);font-size:var(--fs-body);text-decoration:none}
.mnav-sub a[aria-current="page"]{background:var(--gold);color:var(--gold-ink);box-shadow:none}
.mnav-cap{padding-top:10px;font-size:var(--fs-small);color:var(--forest-muted)}
.mnav-list>li:first-child{border-bottom:1px solid var(--forest-line);padding-bottom:12px}
.mnav-list>li:first-child>a{border-bottom:0}

/* Tim di HP: kartu mendatar, foto di samping nama (aturan ini harus di akhir supaya menimpa grid 2 kolom di bagian Ukuran layar) */
@media (max-width:600px){.team{grid-template-columns:minmax(0,1fr);gap:12px}.team li{flex-direction:row;gap:16px;padding:20px;text-align:start}.team span{align-items:flex-start}.team img{width:76px;height:76px;flex:none;box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--gold)}}

/* Tim: munculnya tetap bertahap, tapi angkat saat hover cepat (.45s) dan tidak ikut jeda bertahap */
.anim .team.rv-s.in>li{transition:opacity .9s var(--ease) calc(var(--i,0) * 75ms),transform .45s var(--ease),box-shadow .45s var(--ease)}

/* 30 Okt 2026: footer baru. Blok emas (hijau hutan di tema gelap) ditutup lukisan kebun aren dari Pak Sigit.
   Bagian atas lukisan memudar ke warna blok, jadi blok dan lukisan menyatu tanpa garis sambungan. */
.ft{background:var(--paper);padding:clamp(12px,1.6vw,20px)}
.ft-card{--ft-ink:var(--gold-ink);--ft-mut:var(--gold-muted);--ft-line:rgba(26,21,8,.22);--focus:var(--gold-ink);
  position:relative;background:var(--gold);color:var(--gold-ink);border-radius:var(--r);overflow:hidden}
.ft a{color:inherit}
.ft a:focus-visible,.ft button:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
.ft-in{position:relative;z-index:1;max-width:var(--wrap);margin-inline:auto;padding:clamp(40px,5.5vw,72px) clamp(20px,4vw,56px) 0}
.ft-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.85fr);gap:48px}
.ft .brand-tx b{color:var(--ft-ink)}
.ft .brand-tx small{color:var(--ft-mut)}
.ft .m-ondark{opacity:0}.ft .m-onlight{opacity:1}
.ft-brand p{margin-top:20px;max-width:34ch;font-size:var(--fs-body-l);line-height:1.5;color:var(--ft-ink)}
.ft-social{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ft-social a{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--ft-line);border-radius:50%;color:var(--ft-ink);transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.ft-social a:hover{border-color:var(--ft-ink);background:rgba(26,21,8,.08)}
.ft-social svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ft-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr) minmax(0,1.3fr);gap:32px}
.ft-cols h2{margin-bottom:10px;font-size:var(--fs-body-l);font-weight:500;letter-spacing:-.01em;color:var(--ft-ink)}
.ft-links{display:flex;flex-direction:column}
.ft-links a{display:flex;align-items:center;column-gap:.3em;width:max-content;max-width:100%;min-width:44px;min-height:44px;color:var(--ft-ink);text-decoration:none;font-size:var(--fs-body)}
.ft-links a:hover{text-decoration:underline;text-underline-offset:4px}
.ft-mailrow{display:flex;align-items:center}
.ft-copy{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--ft-mut);cursor:pointer}
.ft-copy:hover{color:var(--ft-ink)}
.ft-copy svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ft-addr{padding-block:10px;line-height:1.55;color:var(--ft-mut);max-width:28ch}
.ft-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px;margin-top:clamp(40px,5vw,64px);padding-block:8px 20px;border-top:1px solid var(--ft-line);font-size:var(--fs-small);color:var(--ft-mut)}
.ft-bottom a{display:inline-flex;align-items:center;min-height:44px;color:var(--ft-mut);text-decoration:none}
.ft-bottom a:hover{color:var(--ft-ink);text-decoration:underline;text-underline-offset:4px}
.ft-paint{margin:-24px 0 0;position:relative;pointer-events:none}
.ft-paint img{display:block;width:100%;height:auto;aspect-ratio:2800/788;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.35) 14%,#000 34%);mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.35) 14%,#000 34%)}
@media (max-width:1000px){.ft-top{grid-template-columns:minmax(0,1fr);gap:40px}}
@media (max-width:760px){
  .ft{padding:8px}
  .ft-card{border-radius:var(--r-md)}
  .ft-in{padding:36px 20px 0}
  .ft-brand p{font-size:var(--fs-body)}
  .ft-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 16px}
  .ft-cols>:last-child{grid-column:1/-1}
  .ft-bottom{flex-direction:column;align-items:flex-start;gap:0;margin-top:32px}
  .ft-paint{margin-top:-8px}
  .ft-paint img{aspect-ratio:1300/892}
}
/* Tema gelap: kartu emas terlalu terang di halaman gelap, jadi kartu hijau hutan dengan judul emas; lukisan diredupkan dan pudarnya lebih panjang */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ft-card{--ft-ink:var(--forest-ink);--ft-mut:var(--forest-muted);--ft-line:var(--forest-line);--focus:var(--gold);background:var(--forest-2);color:var(--forest-ink)}
  :root:not([data-theme="light"]) .ft-cols h2{color:var(--gold)}
  :root:not([data-theme="light"]) .ft-social a:hover{background:rgba(244,246,242,.06)}
  :root:not([data-theme="light"]) .ft .m-ondark{opacity:1}
  :root:not([data-theme="light"]) .ft .m-onlight{opacity:0}
  :root:not([data-theme="light"]) .ft-paint img{-webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.2) 18%,rgba(0,0,0,.6) 34%,#000 52%);mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.2) 18%,rgba(0,0,0,.6) 34%,#000 52%);filter:brightness(.78) saturate(.9)}
}
:root[data-theme="dark"] .ft-card{--ft-ink:var(--forest-ink);--ft-mut:var(--forest-muted);--ft-line:var(--forest-line);--focus:var(--gold);background:var(--forest-2);color:var(--forest-ink)}
:root[data-theme="dark"] .ft-cols h2{color:var(--gold)}
:root[data-theme="dark"] .ft-social a:hover{background:rgba(244,246,242,.06)}
:root[data-theme="dark"] .ft .m-ondark{opacity:1}
:root[data-theme="dark"] .ft .m-onlight{opacity:0}
:root[data-theme="dark"] .ft-paint img{-webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.2) 18%,rgba(0,0,0,.6) 34%,#000 52%);mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.2) 18%,rgba(0,0,0,.6) 34%,#000 52%);filter:brightness(.78) saturate(.9)}

/* 31 Okt 2026: pita "Taste it" digabung ke bagian formulir sampel, supaya ajakan minta sampel tidak dobel. */
.sample-img{margin:4px 0 0;width:100%;aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;background:var(--tile)}
.sample-img img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:1000px){.sample-img{display:none}}