:root{
      --brown:#773E1D;
      --brown-2:#8D4A26;
      --gold:#C09050;          /* isian, garis, teks di atas GELAP */
      --gold-ink:#9A6420;      /* teks di atas TERANG — 4,98:1 di putih */
      --gold-terang:#EFDDC0;   /* teks di atas COKELAT/panel — 5,04:1 */
      --gold-2:#D8B075;
      --cream:#f7f1e7;
      --cream-2:#fffaf2;
      --ink:#2d201a;
      --muted:#6f625b;
      --line:rgba(119,62,29,.14);
      --white:#fff;
      --green:#0E382B;
      --shadow:0 22px 60px rgba(92,48,23,.12);
      --radius:28px;
      --container:min(1180px,calc(100% - 40px));
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:'Arsenal',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
      color:var(--ink);
      background:var(--cream-2);
      line-height:1.6;
      text-rendering:optimizeLegibility;
    }
    img{max-width:100%;display:block}
    a{color:inherit;text-decoration:none}
    button,input,select,textarea{font:inherit}
    .container{width:var(--container);margin-inline:auto}
    .topbar{
      background:var(--brown);
      color:#fff7ea;
      font-size:.82rem;
      letter-spacing:.02em;
    }
    .topbar .container{
      min-height:36px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:18px;
    }
    .topbar span:last-child{opacity:.78}
    header{
      position:sticky;
      top:0;
      z-index:20;
      background:rgba(255,250,242,.92);
      backdrop-filter:blur(14px);
      border-bottom:1px solid var(--line);
    }
    .nav{
      min-height:82px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:28px;
    }
    .brand img{width:240px;height:auto}
    .nav-links{
      display:flex;
      align-items:center;
      gap:26px;
      font-size:.94rem;
      font-weight:650;
    }
    .nav-links a{transition:.2s ease}
    .nav-links a:hover{color:var(--gold-ink)}
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:9px;
      min-height:50px;
      padding:0 22px;
      border-radius:999px;
      border:1px solid transparent;
      font-weight:750;
      cursor:pointer;
      transition:.22s ease;
    }
    .btn-primary{
      color:white;
      background:var(--brown);
      box-shadow:0 10px 25px rgba(119,62,29,.18);
    }
    .btn-primary:hover{transform:translateY(-2px);background:#5E2F16}
    .btn-ghost{
      color:var(--brown);
      border-color:rgba(119,62,29,.22);
      background:rgba(255,255,255,.55);
    }
    .btn-ghost:hover{background:#fff;border-color:var(--gold)}
    .hero{
      position:relative;
      overflow:hidden;
      padding:82px 0 66px;
      background:
        radial-gradient(circle at 85% 20%,rgba(192,144,80,.28),transparent 28%),
        linear-gradient(130deg,#fffaf2 0%,#f6ead8 55%,#eddbc0 100%);
    }
    .hero:before{
      content:"";
      position:absolute;
      width:440px;height:440px;
      border:1px solid rgba(119,62,29,.08);
      border-radius:50%;
      right:-120px;top:-120px;
      box-shadow:0 0 0 55px rgba(255,255,255,.17),0 0 0 110px rgba(255,255,255,.11);
    }
    .hero-grid{
      position:relative;
      display:grid;
      grid-template-columns:1.04fr .96fr;
      align-items:center;
      gap:60px;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:9px;
      padding:8px 13px;
      border-radius:999px;
      background:rgba(192,144,80,.16);
      color:var(--brown);
      font-size:.78rem;
      font-weight:850;
      text-transform:uppercase;
      letter-spacing:.11em;
    }
    .eyebrow:before{
      content:"";
      width:7px;height:7px;border-radius:50%;
      background:var(--gold);
      box-shadow:0 0 0 5px rgba(192,144,80,.16);
    }
    h1,h2,h3,p{margin-top:0}
    h1{
      max-width:760px;
      margin:20px 0 22px;
      font-size:clamp(2.7rem,6vw,5.25rem);
      line-height:.98;
      letter-spacing:-.055em;
      color:var(--brown);
    }
    .hero-copy{
      max-width:650px;
      font-size:1.1rem;
      color:var(--muted);
      margin-bottom:30px;
    }
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px}
    .hero-proof{
      display:flex;
      flex-wrap:wrap;
      gap:16px 24px;
      margin-top:28px;
      color:#554740;
      font-weight:650;
      font-size:.9rem;
    }
    .hero-proof span:before{
      content:"✓";
      display:inline-grid;
      place-items:center;
      width:20px;height:20px;
      margin-right:7px;
      border-radius:50%;
      background:var(--green);
      color:white;
      font-size:.72rem;
    }
    .visual{
      position:relative;
      min-height:530px;
    }
    .factory-card{
      position:absolute;
      inset:10px 0 85px 55px;
      overflow:hidden;
      border-radius:38px;
      background:#fff;
      box-shadow:var(--shadow);
      border:8px solid rgba(255,255,255,.65);
    }
    .factory-card img{
      width:100%;height:100%;
      object-fit:cover;
    }
    .factory-card:after{
      content:"";
      position:absolute;inset:0;
      background:linear-gradient(to top,rgba(92,48,23,.68),transparent 50%);
    }
    .factory-label{
      position:absolute;
      left:86px;bottom:114px;z-index:3;
      color:white;
    }
    .factory-label strong{display:block;font-size:1.08rem}
    .factory-label span{font-size:.84rem;opacity:.82}
    .product-fan{
      position:absolute;
      left:0;right:0;bottom:0;
      display:grid;
      grid-template-columns:repeat(4,1fr);
      align-items:end;
      gap:10px;
      z-index:5;
    }
    .product-fan figure{
      margin:0;
      overflow:hidden;
      border:5px solid white;
      border-radius:20px;
      background:white;
      box-shadow:0 14px 35px rgba(92,48,23,.18);
      transform-origin:bottom center;
    }
    .product-fan figure:nth-child(1){transform:rotate(-7deg) translateY(10px)}
    .product-fan figure:nth-child(2){transform:rotate(-2deg)}
    .product-fan figure:nth-child(3){transform:rotate(3deg)}
    .product-fan figure:nth-child(4){transform:rotate(7deg) translateY(10px)}
    .product-fan img{aspect-ratio:1;object-fit:cover}
    .trust-strip{
      background:white;
      border-block:1px solid var(--line);
    }
    .trust-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
    }
    .trust-item{
      padding:24px 22px;
      border-right:1px solid var(--line);
    }
    .trust-item:last-child{border-right:0}
    .trust-item b{display:block;color:var(--brown);font-size:1rem}
    .trust-item span{color:var(--muted);font-size:.86rem}
    section{padding:90px 0}
    .section-head{
      display:flex;
      justify-content:space-between;
      align-items:end;
      gap:40px;
      margin-bottom:42px;
    }
    .section-head h2{
      max-width:720px;
      margin:14px 0 0;
      color:var(--brown);
      font-size:clamp(2.15rem,4.4vw,3.75rem);
      line-height:1.04;
      letter-spacing:-.045em;
    }
    .section-head p{
      max-width:480px;
      margin-bottom:3px;
      color:var(--muted);
    }
    .products{background:#fff}
    .category-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
    }
    .category-card{
      position:relative;
      min-height:260px;
      padding:28px;
      overflow:hidden;
      border-radius:var(--radius);
      background:var(--cream);
      border:1px solid var(--line);
      transition:.25s ease;
    }
    .category-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
    .category-card h3{
      position:relative;z-index:2;
      max-width:220px;
      margin-bottom:8px;
      font-size:1.35rem;
      color:var(--brown);
    }
    .category-card p{
      position:relative;z-index:2;
      max-width:230px;
      font-size:.91rem;
      color:var(--muted);
    }
    .category-card img{
      position:absolute;
      width:145px;
      right:-10px;
      bottom:-14px;
      border-radius:22px 0 0 0;
      box-shadow:-12px -12px 38px rgba(92,48,23,.08);
    }
    .category-card:nth-child(2n){background:#f2e2c8}
    .category-card:nth-child(3){background:#e8d4b1}
    .services{background:var(--brown);color:white}
    .services .eyebrow{color:#fff8ed;background:rgba(255,255,255,.11)}
    .services .section-head h2{color:white}
    .services .section-head p{color:rgba(255,255,255,.7)}
    .service-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:16px;
    }
    .service-card{
      padding:28px 24px;
      min-height:275px;
      border-radius:26px;
      background:linear-gradient(155deg,rgba(255,255,255,.12),rgba(255,255,255,.045));
      border:1px solid rgba(255,255,255,.13);
    }
    .service-number{
      display:grid;place-items:center;
      width:42px;height:42px;
      border-radius:14px;
      background:var(--gold);
      color:var(--brown);
      font-weight:900;
      margin-bottom:42px;
    }
    .service-card h3{font-size:1.35rem;margin-bottom:10px}
    .service-card p{font-size:.91rem;color:rgba(255,255,255,.67)}
    .process{background:#fffaf2}
    .process-grid{
      display:grid;
      grid-template-columns:repeat(5,1fr);
      gap:14px;
      counter-reset:step;
    }
    .step{
      position:relative;
      padding:26px 20px 25px;
      min-height:245px;
      border-radius:24px;
      background:white;
      border:1px solid var(--line);
      box-shadow:0 14px 35px rgba(92,48,23,.06);
      counter-increment:step;
    }
    .step:before{
      content:"0" counter(step);
      display:block;
      margin-bottom:38px;
      font-size:2.2rem;
      font-weight:900;
      color:var(--gold);
      letter-spacing:-.05em;
    }
    .step h3{font-size:1.08rem;color:var(--brown)}
    .step p{font-size:.86rem;color:var(--muted);margin-bottom:0}
    .partner{
      background:linear-gradient(135deg,#f3e5d1,#fffaf2);
    }
    .partner-grid{
      display:grid;
      grid-template-columns:.95fr 1.05fr;
      align-items:center;
      gap:70px;
    }
    .partner-photo{
      border-radius:36px;
      overflow:hidden;
      box-shadow:var(--shadow);
      position:relative;
    }
    .partner-photo img{width:100%;aspect-ratio:1.1;object-fit:cover}
    .partner-photo:after{
      content:"Konsultasi produk · Pabrik Bogor";
      position:absolute;left:22px;bottom:20px;
      background:rgba(255,255,255,.9);
      color:var(--brown);
      padding:10px 16px;
      border-radius:999px;
      font-size:.82rem;font-weight:800;
    }
    .partner-copy h2{
      margin:16px 0 20px;
      color:var(--brown);
      font-size:clamp(2.2rem,4.2vw,3.8rem);
      line-height:1.03;
      letter-spacing:-.045em;
    }
    .partner-copy > p{color:var(--muted);font-size:1.02rem}
    .check-list{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:13px 18px;
      margin:28px 0;
    }
    .check-list div{
      padding:14px 15px;
      border-radius:17px;
      background:rgba(255,255,255,.6);
      border:1px solid rgba(119,62,29,.1);
      font-weight:720;
      font-size:.89rem;
    }
    .check-list div:before{content:"✓";color:var(--green);margin-right:7px}
    .certs{
      display:flex;
      flex-wrap:wrap;
      gap:9px;
      margin-top:22px;
    }
    .certs span{
      padding:8px 12px;
      border:1px solid rgba(119,62,29,.16);
      background:white;
      border-radius:999px;
      color:var(--brown);
      font-size:.77rem;
      font-weight:850;
    }
    .faq{background:#fff}
    .faq-grid{
      display:grid;
      grid-template-columns:.8fr 1.2fr;
      gap:70px;
      align-items:start;
    }
    .faq h2{
      margin:14px 0 16px;
      color:var(--brown);
      font-size:clamp(2.2rem,4vw,3.6rem);
      line-height:1.04;
      letter-spacing:-.04em;
    }
    .faq-intro{color:var(--muted)}
    details{
      border-bottom:1px solid var(--line);
      padding:19px 0;
    }
    summary{
      cursor:pointer;
      list-style:none;
      font-weight:820;
      color:var(--brown);
      padding-right:40px;
      position:relative;
    }
    summary::-webkit-details-marker{display:none}
    summary:after{
      content:"+";
      position:absolute;right:5px;top:-4px;
      font-size:1.55rem;color:var(--gold-ink);
    }
    details[open] summary:after{content:"−"}
    details p{margin:12px 40px 0 0;color:var(--muted);font-size:.93rem}
    .lead{
      padding:90px 0;
      background:var(--cream);
    }
    .lead-box{
      display:grid;
      grid-template-columns:.85fr 1.15fr;
      gap:55px;
      padding:52px;
      border-radius:38px;
      background:var(--brown);
      color:white;
      box-shadow:var(--shadow);
    }
    .lead h2{
      margin:15px 0 18px;
      font-size:clamp(2.2rem,4.4vw,3.8rem);
      line-height:1.02;
      letter-spacing:-.045em;
    }
    .lead-copy p{color:rgba(255,255,255,.68)}
    .lead .eyebrow{background:rgba(255,255,255,.1);color:white}
    form{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:13px;
    }
    form label{font-size:.76rem;color:rgba(255,255,255,.72);font-weight:750}
    form label.full{grid-column:1/-1}
    input,select,textarea{
      width:100%;
      margin-top:6px;
      padding:14px 15px;
      border:1px solid rgba(255,255,255,.14);
      border-radius:14px;
      background:rgba(255,255,255,.09);
      color:white;
      outline:none;
    }
    select option{color:#222}
    textarea{min-height:100px;resize:vertical}
    input::placeholder,textarea::placeholder{color:rgba(255,255,255,.46)}
    form .btn{
      grid-column:1/-1;
      width:100%;
      margin-top:5px;
      color:var(--brown);
      background:var(--gold);
      border:0;
    }
    footer{
      background:#2e1a13;
      color:rgba(255,255,255,.73);
      padding:45px 0 22px;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.4fr .7fr .9fr;
      gap:55px;
      padding-bottom:35px;
    }
    footer .brand img{
      filter:brightness(0) invert(1);
      opacity:.92;
      margin-bottom:18px;
    }
    footer h3{font-size:.95rem;color:white}
    footer p,footer a{font-size:.86rem}
    footer a{display:block;margin:8px 0}
    .copyright{
      padding-top:20px;
      border-top:1px solid rgba(255,255,255,.1);
      font-size:.8rem;
    }
    .mobile-toggle{display:none}
    @media(max-width:980px){
      .nav-links{display:none}
      .mobile-toggle{
        display:inline-flex;
        border:0;background:transparent;
        font-size:1.5rem;color:var(--brown);
      }
      .hero-grid,.partner-grid,.faq-grid,.lead-box{grid-template-columns:1fr}
      .hero{padding-top:60px}
      .visual{min-height:520px}
      .category-grid{grid-template-columns:repeat(2,1fr)}
      .service-grid{grid-template-columns:repeat(2,1fr)}
      .process-grid{grid-template-columns:repeat(3,1fr)}
      .trust-grid{grid-template-columns:repeat(2,1fr)}
      .trust-item:nth-child(2){border-right:0}
      .trust-item:nth-child(-n+2){border-bottom:1px solid var(--line)}
      .footer-grid{grid-template-columns:1fr 1fr}
    }
    @media(max-width:640px){
      :root{--container:min(100% - 28px,1180px)}
      .topbar .container{justify-content:center;text-align:center}
      .topbar span:last-child{display:none}
      .nav{min-height:72px}
      .brand img{width:205px}
      h1{font-size:3rem}
      section{padding:68px 0}
      .hero-grid{gap:32px}
      .hero-actions .btn{width:100%}
      .visual{min-height:420px}
      .factory-card{inset:0 5px 64px 20px;border-radius:28px}
      .factory-label{left:44px;bottom:88px}
      .product-fan{gap:4px}
      .product-fan figure{border-width:3px;border-radius:12px}
      .section-head{display:block}
      .section-head p{margin-top:17px}
      .category-grid,.service-grid,.process-grid{grid-template-columns:1fr}
      .category-card{min-height:235px}
      .service-card{min-height:auto}
      .service-number{margin-bottom:25px}
      .process-grid{gap:12px}
      .step{min-height:auto}
      .step:before{margin-bottom:18px}
      .check-list{grid-template-columns:1fr}
      .lead-box{padding:30px 22px;border-radius:28px}
      form{grid-template-columns:1fr}
      form label.full,form .btn{grid-column:auto}
      .footer-grid{grid-template-columns:1fr;gap:25px}
    }
  

/* ── ⚠ PERBAIKAN REGANGAN GAMBAR ─────────────────────────────────────────────
   Bug ini SAYA sendiri yang buat. Saat menambahkan atribut width/height ke <img>
   (untuk mencegah layout bergeser saat gambar dimuat), CSS draf ternyata tidak
   punya `height:auto` — hanya `img{max-width:100%;display:block}`. Akibatnya
   atribut `height="300"` melawan `width:145px` dari CSS, dan gambar kartu
   TEREGANG dari 1:1 menjadi 145x300 (distorsi 52%) serta 145x600 (76%).
   Terukur di halaman hidup pada 6 gambar.
   Draf asli TIDAK punya masalah ini justru karena tidak punya atribut dimensi.
   `height:auto` mengembalikan rasio asli sambil tetap menikmati manfaat atribut
   dimensi. Ini juga yang dilakukan CSS inti WordPress. */
img{height:auto}

/* Kipas produk di hero: figure diberi rasio 1:1 supaya tidak ikut ditarik
   setinggi kontainer pada layar sempit (sempat menjadi sliver 62x302). */
.product-fan figure{aspect-ratio:1;height:auto;align-self:end}
.product-fan figure img{aspect-ratio:1;object-fit:cover;width:100%;height:100%}

/* Kartu pabrik: pada layar sempit, sumber 759x422 (mendatar) dipaksa ke kotak
   tinggi sehingga dipotong sangat dalam. Rasio dibatasi agar potongannya wajar. */
@media(max-width:980px){
  .factory-card{position:relative;inset:auto;aspect-ratio:16/9;border-width:6px}
  .visual{min-height:0}
  .product-fan{position:relative;margin-top:14px}
}

/* ── Seksi tambahan: tabel model, kemasan, faktor, legalitas ──────────────── */
.model-tabel{overflow-x:auto;margin-top:26px;border-radius:20px;border:1px solid var(--line);background:#fff}
.model-tabel table{width:100%;border-collapse:collapse;min-width:560px;font-size:.94rem}
.model-tabel caption{
  padding:16px 20px 0;text-align:left;font-weight:750;color:var(--brown);
  font-size:1rem;caption-side:top;
}
.model-tabel th,.model-tabel td{padding:14px 20px;text-align:left;vertical-align:top}
.model-tabel thead th{
  background:var(--cream);color:var(--brown);font-weight:800;
  font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;
}
.model-tabel tbody tr+tr th,.model-tabel tbody tr+tr td{border-top:1px solid var(--line)}
.model-tabel tbody th{color:var(--brown);font-weight:750;white-space:nowrap}
.model-tabel tbody td{color:var(--muted)}
.tabel-catatan{margin:18px 0 0;color:var(--muted);font-size:.95rem;max-width:70ch}

/* Tiga kolom TETAP -> 6 kartu jadi 3-3 (arahan pemilik: "layoutnya bikin jadi
   3-3 ... jangan melebar"). auto-fit sebelumnya memuat 4 kolom di layar lebar
   sehingga barisnya jadi 4+4 dan kartunya menyempit. Tiga kolom membuat setiap
   kartu lebih lega dan gambar kemasannya terlihat lebih jelas. */
.kemasan-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:18px;margin-top:24px;
}
@media(max-width:980px){ .kemasan-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .kemasan-grid{grid-template-columns:1fr} }
.kemasan-item{
  padding:20px 22px;border-radius:18px;background:#fff;
  border:1px solid var(--line);
}
.kemasan-item{padding:0 0 20px;overflow:hidden}
/* Gambar dari KATALOG RESMI (compro hal. 21-22). Disiapkan dalam kotak seragam
   420x240 dengan produk dimuat UTUH (contain) — jadi rasio aslinya terjaga dan
   tidak ada yang teregang. Latar putih gambar menyatu dengan latar kartu. */
.kemasan-item img{
  width:100%;
  height:auto;
  aspect-ratio:420/240;
  object-fit:contain;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.kemasan-item b{display:block;color:var(--brown);margin:16px 22px 6px}
.kemasan-item span{display:block;color:var(--muted);font-size:.89rem;line-height:1.5;margin:0 22px}
/* Sedikit hidup saat disentuh — sejalan dengan permintaan "lebih interaktif". */
.kemasan-item{transition:.22s ease}
.kemasan-item:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.kemasan-item img{transition:.3s ease}
.kemasan-item:hover img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){
  .kemasan-item:hover,.kemasan-item:hover img{transform:none}
}

.faktor-list{
  margin:24px 0 0;padding:0;list-style:none;
  display:grid;gap:14px;max-width:78ch;
}
.faktor-list li{
  position:relative;padding:16px 20px 16px 46px;
  border-radius:16px;background:var(--cream);border:1px solid var(--line);
  color:var(--muted);font-size:.95rem;line-height:1.6;
}
.faktor-list li:before{
  content:"";position:absolute;left:20px;top:23px;
  width:9px;height:9px;border-radius:50%;background:var(--gold);
}
.faktor-list b{color:var(--brown)}

.legal-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));
  gap:18px;margin-top:24px;
}
.legal-item{padding:24px 26px;border-radius:20px;background:#fff;border:1px solid var(--line)}
.legal-item h3{margin-bottom:9px;font-size:1.12rem;color:var(--brown)}
.legal-item p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.62}

/* ── Kekhususan font: menang atas plugin yang menyuntik font global ───────
   Pagelayer memasang <style> inline `body.pagelayer-body h1{font-family:Montserrat}`.
   Kelas pagelayer dicabut oleh mu-plugin, tapi aturan ini tetap dipasang sebagai
   lapisan kedua bila plugin lain melakukan hal serupa. */
body.nrv-landing,
body.nrv-landing button,
body.nrv-landing input,
body.nrv-landing select,
body.nrv-landing textarea{
  font-family:'Arsenal',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
}
body.nrv-landing h1,
body.nrv-landing h2,
body.nrv-landing h3,
body.nrv-landing .eyebrow,
body.nrv-landing .btn{
  font-family:'Arsenal',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
}

/* ── Aksesibilitas (tambahan atas draf) ──────────────────────────────────── */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:12px 18px;border-radius:0 0 12px 0;
  background:var(--brown);color:#fff;font-weight:700;
}
.skip-link:focus{left:0}
:where(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
  border-radius:6px;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .btn-primary:hover,.category-card:hover{transform:none}
}

/* ── Menu mobil sebenarnya (draf hanya menyembunyikan nav) ───────────────── */
.mobile-panel{display:none}
@media(max-width:980px){
  .mobile-panel[data-buka="1"]{
    display:block;
    padding:6px 0 18px;
    border-top:1px solid var(--line);
  }
  .mobile-panel a{
    display:block;
    padding:13px 2px;
    font-weight:650;
    border-bottom:1px solid var(--line);
  }
  .mobile-panel a:last-child{border-bottom:0}
}

/* ── Catatan persetujuan data & honeypot ────────────────────────────────── */
.form-consent{
  margin:14px 0 0;
  font-size:.79rem;
  line-height:1.5;
  color:var(--muted);
}
.form-consent a{text-decoration:underline}
.hp-field{
  position:absolute !important;
  left:-9999px !important;
  width:1px;height:1px;overflow:hidden;
}
.form-notice{
  margin:0 0 16px;
  padding:13px 16px;
  border-radius:14px;
  background:rgba(14,56,43,.08);
  border:1px solid rgba(14,56,43,.2);
  color:#0E382B;
  font-size:.9rem;
  font-weight:650;
}

/* ── Tautan artikel (blog) ──────────────────────────────────────────────── */
.artikel-strip{padding:56px 0;background:var(--cream)}
.artikel-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:18px;
  margin-top:22px;
}
.artikel-item{
  display:block;
  padding:20px 22px;
  border-radius:20px;
  background:#fff;
  border:1px solid var(--line);
  transition:.2s ease;
}
.artikel-item:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.artikel-item b{display:block;color:var(--brown);font-size:1rem;line-height:1.35}
.artikel-item span{display:block;margin-top:7px;font-size:.83rem;color:var(--muted)}


/* Footer 4 kolom sesudah kolom "Halaman" ditambahkan. */
@media(min-width:981px){
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr 1.3fr}
}

/* ── ⚠ KONTRAS: dua teks nyaris tak terbaca (dilaporkan pemilik) ───────────
   1. .form-consent berada DI DALAM .lead yang latarnya cokelat gelap
      (background:var(--brown); color:white), tetapi memakai var(--muted)
      yaitu abu GELAP -> gelap di atas gelap, praktis hilang.
   2. .tabel-catatan memakai var(--muted) di atas krem — terbaca, tapi terlalu
      pudar untuk kalimat yang justru mengajak bertindak.
   Diperbaiki dengan menyesuaikan warna pada LATARNYA MASING-MASING, bukan
   dengan menaikkan ukuran huruf. */
.lead .form-consent{
  color:rgba(255,255,255,.86);
  padding:12px 15px;
  border-radius:12px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);
}
.lead .form-consent a{color:var(--gold-2)}

/* Catatan bantu diwarnai MENURUT LATAR SEKSINYA, bukan satu warna untuk semua.
   Kesalahan versi pertama: .tabel-catatan diberi cokelat gelap karena saya
   mengira latarnya krem. Ternyata seksi .services berlatar cokelat #773E1D —
   rasio kontrasnya jadi 1,05, praktis tak terbaca. Diukur, bukan ditebak. */
.services .tabel-catatan{color:rgba(255,255,255,.88)}
.services .tabel-catatan strong{color:var(--gold-2)}
.process .tabel-catatan,
.partner .tabel-catatan,
.products .tabel-catatan{color:#54423A}
.process .tabel-catatan strong,
.partner .tabel-catatan strong,
.products .tabel-catatan strong{color:var(--brown)}

/* Hal yang sama untuk daftar faktor bila kelak dipakai di seksi cokelat. */
.services .faktor-list li{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.16);
  color:rgba(255,255,255,.86);
}
.services .faktor-list b{color:var(--gold-2)}

/* ── Ikon kartu (SVG sebaris) ────────────────────────────────────────────── */
.step{padding-top:24px}
.step .kartu-ikon{
  position:absolute;
  top:22px;right:20px;
  width:30px;height:30px;
  color:var(--gold);
  opacity:.62;
  transition:.24s ease;
}
.step:hover .kartu-ikon{opacity:1;transform:translateY(-2px) scale(1.06)}
.trust-item .kartu-ikon{
  width:26px;height:26px;
  margin-bottom:10px;
  color:var(--gold);
}
@media (prefers-reduced-motion:reduce){
  .step:hover .kartu-ikon{transform:none}
}

/* ── Pemulihan konten situs lama: tim per tahap, sosial, nama kontak ────── */
.step-tim{
  display:inline-block;
  margin:-2px 0 10px;
  padding:3px 9px;
  border-radius:999px;
  background:rgba(192,144,80,.14);
  color:var(--brown);
  font-size:.71rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.kontak-nama{
  display:block;
  margin:2px 0 14px;
  font-size:.86rem;
  color:rgba(255,255,255,.62);
}
.sosial{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.sosial a{
  display:inline-grid;
  place-items:center;
  width:38px;height:38px;
  border-radius:11px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.8);
  transition:.2s ease;
}
.sosial a:hover{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--brown);
  transform:translateY(-2px);
}
.sosial svg{width:19px;height:19px}
footer .kontak-nama+h3{margin-top:18px}
@media (prefers-reduced-motion:reduce){ .sosial a:hover{transform:none} }

/* Nav bertambah satu butir (Artikel) — rapatkan sedikit di lebar menengah
   supaya tidak melipat. */
@media(min-width:981px) and (max-width:1240px){
  .nav-links{gap:18px;font-size:.89rem}
  .brand img{width:206px}
}