/* =========================================================
   ISTANA PERCETAKAN — Design System
   Bahasa visual: artefak cetak offset (color bar, registration
   mark, crop mark, halftone CMYK).
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Tinta & kertas */
  --ink:            #0B0B0C;   /* rich black */
  --ink-soft:       #1C1C1F;
  --ink-muted:      #5A5A61;
  --paper:          #FFFFFF;
  --paper-warm:     #F6F5F3;   /* uncoated */
  --rule:           #E3E1DD;

  /* Merah — Pantone 186C family */
  --red:            #C8102E;
  --red-lift:       #F0263C;
  --red-deep:       #8E0A20;
  --red-wash:       #FDF2F3;

  /* Emas — hot stamping foil */
  --gold:           #C9A227;
  --gold-lift:      #F2D877;
  --gold-deep:      #8C6D12;

  /* Tinta proses (dipakai apa adanya, jangan diubah) */
  --c: #00AEEF;
  --m: #EC008C;
  --y: #FFD200;
  --k: #0B0B0C;

  /* Gradasi tombol */
  --grad-red:  linear-gradient(160deg, var(--red-lift) 0%, var(--red) 52%, var(--red-deep) 100%);
  --grad-gold: linear-gradient(160deg, var(--gold-lift) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  --grad-ink:  linear-gradient(160deg, #2B2B30 0%, var(--ink) 60%, #000 100%);

  --shadow-red:  0 1px 0 rgba(255,255,255,.28) inset, 0 10px 24px -8px rgba(200,16,46,.55), 0 2px 6px rgba(11,11,12,.18);
  --shadow-gold: 0 1px 0 rgba(255,255,255,.45) inset, 0 10px 24px -8px rgba(201,162,39,.5), 0 2px 6px rgba(11,11,12,.18);
  --shadow-card: 0 1px 2px rgba(11,11,12,.05), 0 12px 32px -18px rgba(11,11,12,.32);
  --shadow-lift: 0 2px 6px rgba(11,11,12,.07), 0 24px 48px -22px rgba(11,11,12,.42);

  /* Tipografi */
  --font-display: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Skala tipe */
  --t-hero:   clamp(2.1rem, 4.4vw, 3.5rem);
  --t-h2:     clamp(1.7rem, 3.6vw, 2.75rem);
  --t-h3:     clamp(1.15rem, 1.8vw, 1.45rem);
  --t-body:   1.0rem;
  --t-small:  .875rem;
  --t-micro:  .72rem;

  /* Ritme */
  --gutter:   clamp(1.15rem, 4vw, 2.5rem);
  --wrap:     1200px;
  --wrap-narrow: 860px;
  --sect-y:   clamp(3.75rem, 8vw, 7rem);
  --radius:   14px;
  --radius-sm: 9px;

  --ease: cubic-bezier(.22,.68,.32,1);
}

/* ---------- 2. RESET & DASAR ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:var(--t-body);
  line-height:1.68; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:var(--red); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:400; line-height:1.08; letter-spacing:-.018em; margin:0 0 .55em; }
h1{ font-size:var(--t-hero); }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); letter-spacing:-.01em; }
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }
strong{ font-weight:800; }
:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-narrow{ max-width:var(--wrap-narrow); }
.section{ padding-block:var(--sect-y); position:relative; }
/* Dua .section bertumpuk menghasilkan jarak ganda (bisa 220px di layar besar).
   Modifier ini memangkas sisi yang bersentuhan. */
.section--rapat-bawah{ padding-bottom:clamp(.8rem,1.6vw,1.4rem); }
.section--rapat-atas{ padding-top:clamp(1.4rem,2.6vw,2.2rem); }
.skip-link{ position:absolute; left:-9999px; }
.skip-link:focus{ left:1rem; top:1rem; z-index:999; background:var(--ink); color:#fff; padding:.6rem 1rem; border-radius:6px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- 3. ARTEFAK CETAK (signature) ---------- */

/* Color bar — strip kontrol warna di tepi lembar cetak */
.colorbar{ display:flex; height:7px; width:100%; }
.colorbar span{ flex:1; }
.colorbar .s-c{ background:var(--c); }
.colorbar .s-m{ background:var(--m); }
.colorbar .s-y{ background:var(--y); }
.colorbar .s-k{ background:var(--k); }
.colorbar .s-r{ background:var(--red); }
.colorbar .s-g{ background:var(--gold); }
.colorbar--thin{ height:4px; }

/* Registration mark ⊕ */
.regmark{ width:26px; height:26px; flex:none; opacity:.42; }
.regmark circle,.regmark line{ stroke:currentColor; stroke-width:1.1; fill:none; }

/* Titik halftone CMYK — dipakai sebagai penanda & aksen */
.cmyk-dots{ display:inline-flex; gap:5px; align-items:center; }
.cmyk-dots i{ width:9px; height:9px; border-radius:50%; display:block; }
.cmyk-dots i:nth-child(1){ background:var(--c); }
.cmyk-dots i:nth-child(2){ background:var(--m); }
.cmyk-dots i:nth-child(3){ background:var(--y); }
.cmyk-dots i:nth-child(4){ background:var(--k); }

/* Crop mark di sudut blok */
.cropbox{ position:relative; }
.cropbox::before,.cropbox::after{
  content:""; position:absolute; width:14px; height:14px; pointer-events:none;
  border-color:var(--gold); border-style:solid; opacity:.65;
}
.cropbox::before{ top:-1px; left:-1px; border-width:2px 0 0 2px; }
.cropbox::after{ bottom:-1px; right:-1px; border-width:0 2px 2px 0; }

/* Eyebrow / label teknis gaya job ticket */
.eyebrow{
  font-family:var(--font-mono); font-size:var(--t-micro); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-muted);
  display:inline-flex; align-items:center; gap:.6rem; margin:0 0 1rem;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--red); flex:none; }
.eyebrow--light{ color:rgba(255,255,255,.62); }

/* Latar halftone tipis */
.halftone{
  background-image:radial-gradient(var(--rule) 1px, transparent 1.1px);
  background-size:14px 14px;
}

/* ---------- 4. TOMBOL ---------- */
.btn{
  --btn-bg:var(--grad-red); --btn-sh:var(--shadow-red); --btn-fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.92rem 1.6rem; border:0; border-radius:var(--radius-sm); cursor:pointer;
  background:var(--btn-bg); color:var(--btn-fg); box-shadow:var(--btn-sh);
  font-family:var(--font-body); font-size:.95rem; font-weight:800; letter-spacing:-.005em;
  line-height:1.2; text-decoration:none; text-align:center;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), filter .22s var(--ease);
}
.btn:hover{ transform:translateY(-2px); filter:saturate(1.06) brightness(1.03); text-decoration:none; }
.btn:active{ transform:translateY(0); }
.btn--gold{ --btn-bg:var(--grad-gold); --btn-sh:var(--shadow-gold); --btn-fg:var(--ink); }
.btn--ink{ --btn-bg:var(--grad-ink); --btn-sh:0 10px 24px -10px rgba(0,0,0,.6); }
.btn--ghost{
  background:transparent; color:var(--ink); box-shadow:none;
  border:1.5px solid var(--rule);
}
.btn--ghost:hover{ border-color:var(--ink); background:var(--paper-warm); }
.btn--ghost-light{ background:transparent; color:#fff; box-shadow:none; border:1.5px solid rgba(255,255,255,.34); }
.btn--ghost-light:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn--lg{ padding:1.08rem 2rem; font-size:1.02rem; }
.btn--block{ width:100%; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* ---------- 5. HEADER ---------- */
.site-header{ position:sticky; top:0; z-index:60; background:var(--paper); border-bottom:1px solid var(--rule); }
.site-header__bar{ display:flex; align-items:center; gap:1.5rem; min-height:74px; }
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--ink); flex:none; }
.brand:hover{ text-decoration:none; }
.brand__mark{ width:40px; height:40px; flex:none; }
.brand__name{ font-family:var(--font-display); font-size:1.02rem; line-height:1; letter-spacing:-.02em; }
.brand__tag{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-muted); }
.nav{ margin-left:auto; display:flex; align-items:center; gap:1.6rem; }
/* wp_nav_menu tetap membungkus tiap item dengan <li>; netralkan agar <a>
   langsung menjadi flex item dan penanda daftar tidak muncul. */
.nav ul,.nav li{ display:contents; list-style:none; margin:0; padding:0; }
.nav a{ color:var(--ink); font-size:.93rem; font-weight:600; text-decoration:none; position:relative; padding-block:.4rem; }
.nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--red); transition:right .28s var(--ease); }
.nav a:hover::after,.nav a[aria-current="page"]::after{ right:0; }
.header-cta{ display:flex; align-items:center; gap:.6rem; }
.nav-toggle{ display:none; margin-left:auto; background:none; border:1.5px solid var(--rule); border-radius:8px; padding:.55rem .7rem; cursor:pointer; }
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--ink); margin:4px 0; transition:.25s var(--ease); }

@media (max-width:1000px){
  .nav-toggle{ display:block; }
  .nav{
    position:fixed; inset:74px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--rule); padding:.5rem var(--gutter) 1.5rem;
    transform:translateY(-140%); transition:transform .35s var(--ease); box-shadow:var(--shadow-lift);
    max-height:calc(100dvh - 74px); overflow-y:auto;
  }
  .nav.is-open{ transform:translateY(0); }
  .nav a{ padding:.85rem 0; border-bottom:1px solid var(--rule); font-size:1rem; }
  .nav a::after{ display:none; }
  .header-cta{ margin-top:1rem; flex-direction:column; align-items:stretch; }
  .header-cta .btn{ width:100%; }
}

/* ---------- 6. HERO ---------- */
.hero{ position:relative; background:var(--ink); color:#fff; overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(90% 70% at 78% 8%, rgba(200,16,46,.42) 0%, transparent 62%),
    radial-gradient(60% 60% at 4% 100%, rgba(201,162,39,.18) 0%, transparent 60%);
  pointer-events:none;
}
.hero::after{
  content:""; position:absolute; inset:0; opacity:.16; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.5) 1px, transparent 1.2px);
  background-size:16px 16px; mask-image:linear-gradient(180deg,transparent,#000 55%,transparent);
}
.hero__inner{ position:relative; z-index:2; padding-block:clamp(2.6rem,5vw,4.2rem); display:grid; gap:clamp(2rem,5vw,4rem); grid-template-columns:1.15fr .85fr; align-items:center; }
.hero h1{ margin-bottom:.9rem; }
.hero h1 em{ font-style:normal; color:var(--gold); }
.hero__lede{ font-size:clamp(1rem,1.5vw,1.14rem); color:rgba(255,255,255,.76); max-width:52ch; margin-bottom:1.6rem; }
.hero__proof{ display:flex; flex-wrap:wrap; gap:2rem; margin-top:2rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.14); }
.hero__proof b{ display:block; font-family:var(--font-display); font-size:1.6rem; color:#fff; line-height:1; }
.hero__proof span{ font-family:var(--font-mono); font-size:var(--t-micro); letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); }

/* Panel registrasi — signature animation */
.regpanel{ position:relative; aspect-ratio:1/1; max-width:340px; margin-inline:auto; width:100%; }
.regpanel__sheet{
  position:absolute; inset:8%; background:var(--paper); border-radius:6px;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.75);
  display:grid; place-items:center; overflow:hidden;
}
.regpanel__sheet .colorbar{ position:absolute; bottom:0; left:0; right:0; }
.regpanel__label{
  position:absolute; top:10px; left:12px; font-family:var(--font-mono);
  font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted);
}
.reg{ position:relative; width:56%; aspect-ratio:1/1; }
.reg__plate{ position:absolute; inset:0; border-radius:50%; mix-blend-mode:multiply; opacity:.88;
  animation:reg-lock 2.4s var(--ease) .35s both; }
.reg__plate--c{ background:var(--c); --tx:-16%; --ty:-13%; }
.reg__plate--m{ background:var(--m); --tx:15%;  --ty:-11%; }
.reg__plate--y{ background:var(--y); --tx:-11%; --ty:16%;  }
.reg__plate--k{ background:var(--k); --tx:13%;  --ty:14%; opacity:.75; }
@keyframes reg-lock{
  0%   { transform:translate(var(--tx),var(--ty)) scale(.92); }
  70%  { transform:translate(calc(var(--tx)*.06),calc(var(--ty)*.06)) scale(1.005); }
  100% { transform:translate(0,0) scale(1); }
}
.reg__cross{ position:absolute; inset:0; z-index:3; color:#fff; mix-blend-mode:difference; }

@media (max-width:900px){
  .hero__inner{ grid-template-columns:1fr; }
  .regpanel{ max-width:280px; order:-1; }
}

/* ---------- 7. MARQUEE KLIEN ---------- */
.clients{ background:var(--paper-warm); border-block:1px solid var(--rule); padding-block:2.6rem; }
.clients__head{ display:flex; align-items:center; justify-content:center; gap:.8rem; margin-bottom:1.6rem; }
.marquee{
  position:relative; overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquee__track{ display:flex; width:max-content; gap:3.2rem; animation:marquee 42s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.marquee__item{
  flex:none; height:52px; display:grid; place-items:center; padding-inline:.5rem;
  filter:grayscale(1); opacity:.52; transition:filter .3s var(--ease), opacity .3s var(--ease);
}
.marquee__item:hover{ filter:grayscale(0); opacity:1; }
.marquee__item img{ max-height:52px; width:auto; object-fit:contain; }
.marquee__item span{ font-family:var(--font-display); font-size:1.1rem; color:var(--ink-muted); white-space:nowrap; }

/* ---------- 8. GRID PRODUK ---------- */
.sect-head{ max-width:66ch; margin-bottom:clamp(2rem,4vw,3.2rem); }
.sect-head--center{ margin-inline:auto; text-align:center; }
.sect-head--center .eyebrow{ justify-content:center; }
.sect-head p{ color:var(--ink-muted); font-size:1.04rem; }

.grid{ display:grid; gap:1.1rem; }
.grid--3{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid--4{ grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.grid--2{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }

.prod{
  position:relative; background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius);
  overflow:hidden; text-decoration:none; color:var(--ink); display:flex; flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.prod:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lift); border-color:transparent; text-decoration:none; }
.prod__media{ aspect-ratio:4/3; background:var(--paper-warm); position:relative; overflow:hidden; }
.prod__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.prod:hover .prod__media img{ transform:scale(1.045); }
.prod__body{ padding:1.05rem 1.15rem 1.25rem; display:flex; flex-direction:column; gap:.35rem; flex:1; }
.prod__body h3{ margin:0; font-size:1.05rem; }
.prod__body p{ font-size:var(--t-small); color:var(--ink-muted); margin:0; }
.prod__spec{ margin-top:auto; padding-top:.7rem; font-family:var(--font-mono); font-size:var(--t-micro); letter-spacing:.08em; text-transform:uppercase; color:var(--red); }
.prod__flag{
  position:absolute; top:.7rem; left:.7rem; z-index:2;
  background:var(--grad-gold); color:var(--ink); box-shadow:var(--shadow-gold);
  font-family:var(--font-mono); font-size:.62rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:.28rem .6rem; border-radius:5px;
}

/* ---------- 9. BLOK MERAH (dominan) ---------- */
.block-red{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(150deg, var(--red-lift) 0%, var(--red) 45%, var(--red-deep) 100%);
}
.block-red::before{
  content:""; position:absolute; inset:0; opacity:.2; pointer-events:none;
  background-image:radial-gradient(#fff 1px, transparent 1.15px); background-size:13px 13px;
}
.block-red::after{
  content:""; position:absolute; right:-12%; top:-30%; width:60%; aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.14) 0%, transparent 65%); pointer-events:none;
}
.block-red .eyebrow{ color:rgba(255,255,255,.7); }
.block-red .eyebrow::before{ background:var(--gold-lift); }
.block-red h2{ color:#fff; }
.block-red p{ color:rgba(255,255,255,.82); }
.block-red .wrap{ position:relative; z-index:2; }

.feat{ display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.feat__item{ padding:1.4rem 1.3rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:var(--radius); backdrop-filter:blur(2px); }
.feat__item h3{ font-size:1.06rem; margin-bottom:.4rem; }
.feat__item p{ font-size:var(--t-small); margin:0; }
.feat__num{ font-family:var(--font-mono); font-size:var(--t-micro); letter-spacing:.14em; color:var(--gold-lift); display:block; margin-bottom:.7rem; }

/* ---------- 10. PROSES (urutan nyata, jadi bernomor) ---------- */
.steps{ counter-reset:step; display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.step{ counter-increment:step; background:var(--paper); padding:1.6rem 1.35rem; }
.step::before{
  content:counter(step,decimal-leading-zero); display:block; font-family:var(--font-mono); font-weight:500;
  font-size:.8rem; letter-spacing:.1em; color:var(--red); margin-bottom:.9rem;
}
.step h3{ font-size:1.02rem; margin-bottom:.35rem; }
.step p{ font-size:var(--t-small); color:var(--ink-muted); margin:0; }

/* ---------- 11. PORTOFOLIO ---------- */
.pf-filter{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.6rem; }
.pf-filter button{
  font-family:var(--font-mono); font-size:var(--t-micro); letter-spacing:.1em; text-transform:uppercase;
  padding:.5rem .95rem; border:1.5px solid var(--rule); border-radius:100px; background:var(--paper);
  color:var(--ink-muted); cursor:pointer; transition:.25s var(--ease);
}
.pf-filter button:hover{ border-color:var(--ink); color:var(--ink); }
.pf-filter button.is-active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.pf-grid{ display:grid; gap:.9rem; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
.pf-item{ position:relative; border-radius:var(--radius); overflow:hidden; background:var(--paper-warm); aspect-ratio:1/1; }
.pf-item img{ width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease); }
.pf-item:hover img{ transform:scale(1.06); }
.pf-item figcaption{
  position:absolute; inset:auto 0 0 0; padding:1.6rem .95rem .85rem; color:#fff;
  background:linear-gradient(transparent, rgba(11,11,12,.88));
  font-size:var(--t-small); font-weight:700;
}
.pf-item figcaption small{ display:block; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-lift); font-weight:500; }
.pf-item.is-hidden{ display:none; }

/* ---------- 12. FAQ ---------- */
.faq{ border-top:1px solid var(--rule); }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{
  cursor:pointer; list-style:none; padding:1.25rem 2.5rem 1.25rem 0; position:relative;
  font-weight:700; font-size:1.02rem; transition:color .2s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--red); }
.faq summary::after{
  content:""; position:absolute; right:.4rem; top:50%; width:12px; height:12px; margin-top:-9px;
  border-right:2px solid var(--red); border-bottom:2px solid var(--red);
  transform:rotate(45deg); transition:transform .28s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-3px; }
.faq details p{ padding:0 2.5rem 1.35rem 0; color:var(--ink-muted); margin:0; }

/* ---------- 13. PETA & KONTAK ---------- */
.map-split{ display:grid; gap:0; grid-template-columns:1fr 1fr; border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; }
.map-split__info{ padding:clamp(1.75rem,4vw,2.75rem); background:var(--paper); }
.map-split__map{ min-height:340px; background:var(--paper-warm); }
.map-split__map iframe{ width:100%; height:100%; min-height:340px; border:0; display:block; filter:grayscale(.35) contrast(1.05); }
.nap{ list-style:none; padding:0; margin:1.4rem 0 0; display:grid; gap:1rem; }
.nap li{ display:flex; gap:.85rem; align-items:flex-start; }
.nap dt{ font-family:var(--font-mono); font-size:var(--t-micro); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:.15rem; }
.nap dd{ margin:0; font-weight:600; }
@media (max-width:820px){ .map-split{ grid-template-columns:1fr; } }

/* ---------- 14. FORM PENAWARAN (job ticket / SPK) ---------- */
.ticket{
  background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius);
  box-shadow:var(--shadow-card); overflow:hidden;
}
.ticket__head{ background:var(--ink); color:#fff; padding:1.35rem clamp(1.1rem,3vw,2rem); display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.ticket__head h2{ font-size:1.18rem; margin:0; color:#fff; }
.ticket__no{ margin-left:auto; font-family:var(--font-mono); font-size:var(--t-micro); letter-spacing:.13em; color:var(--gold-lift); }
.ticket__body{ padding:clamp(1.25rem,3.5vw,2.25rem); }

.progress{ display:flex; gap:.4rem; margin-bottom:1.9rem; }
.progress__seg{ flex:1; }
.progress__bar{ height:5px; border-radius:3px; background:var(--rule); overflow:hidden; }
.progress__bar i{ display:block; height:100%; width:0; background:var(--grad-red); transition:width .45s var(--ease); }
.progress__seg.is-done .progress__bar i,.progress__seg.is-active .progress__bar i{ width:100%; }
.progress__seg.is-active .progress__bar i{ background:var(--grad-red); }
.progress__lbl{ font-family:var(--font-mono); font-size:.63rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted); margin-top:.45rem; display:block; }
.progress__seg.is-active .progress__lbl{ color:var(--red); }

.fstep{ display:none; animation:fade-up .38s var(--ease) both; }
.fstep.is-active{ display:block; }
@keyframes fade-up{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } }

.fgrid{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.fgrid--full{ grid-template-columns:1fr; }
.field{ display:flex; flex-direction:column; gap:.42rem; }
.field--span{ grid-column:1/-1; }
.field label,.legend{
  font-family:var(--font-mono); font-size:var(--t-micro); font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-muted);
}
.field label .req{ color:var(--red); }
.field input,.field select,.field textarea{
  font-family:var(--font-body); font-size:.97rem; color:var(--ink); background:var(--paper);
  border:1.5px solid var(--rule); border-radius:var(--radius-sm); padding:.78rem .9rem; width:100%;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea{ min-height:110px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--red); box-shadow:0 0 0 4px var(--red-wash);
}
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A5A61' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center; background-size:12px; padding-right:2.3rem;
}
.field .hint{ font-size:.78rem; color:var(--ink-muted); font-family:var(--font-body); letter-spacing:0; text-transform:none; }
.field.is-hidden{ display:none; }

.fieldset{ border:0; padding:0; margin:0; grid-column:1/-1; }
.fieldset .legend{ display:block; margin-bottom:.7rem; }
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{ position:relative; }
.chip input{ position:absolute; opacity:0; width:0; height:0; }
.chip span{
  display:inline-block; padding:.55rem 1rem; border:1.5px solid var(--rule); border-radius:100px;
  font-size:.87rem; font-weight:600; cursor:pointer; user-select:none; background:var(--paper);
  transition:.2s var(--ease);
}
.chip span:hover{ border-color:var(--ink-muted); }
.chip input:checked + span{ background:var(--red-wash); border-color:var(--red); color:var(--red-deep); }
.chip input:focus-visible + span{ outline:3px solid var(--gold); outline-offset:2px; }

.fnav{ display:flex; gap:.75rem; margin-top:1.9rem; padding-top:1.5rem; border-top:1px dashed var(--rule); }
.fnav .btn{ flex:1; }
@media (min-width:600px){ .fnav .btn{ flex:0 1 auto; } .fnav .btn[data-next],.fnav .btn[type=submit]{ margin-left:auto; } }

.summary-box{ background:var(--paper-warm); border:1px dashed var(--rule); border-radius:var(--radius-sm); padding:1.1rem 1.2rem; margin-bottom:1.4rem; }
.summary-box h3{ font-size:.95rem; margin-bottom:.7rem; }
.summary-box dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.4rem 1rem; font-size:var(--t-small); }
.summary-box dt{ font-family:var(--font-mono); font-size:var(--t-micro); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted); padding-top:.15rem; }
.summary-box dd{ margin:0; font-weight:600; }

/* ---------- 15. TOMBOL WA MELAYANG ---------- */
.wa-float{
  position:fixed; right:clamp(.9rem,3vw,1.5rem); bottom:clamp(.9rem,3vw,1.5rem); z-index:80;
  display:inline-flex; align-items:center; gap:.6rem; padding:.85rem 1.15rem;
  background:linear-gradient(160deg,#3ee07a 0%,#25D366 45%,#128C4A 100%); color:#fff;
  border-radius:100px; font-weight:800; font-size:.92rem; text-decoration:none;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 12px 28px -8px rgba(18,140,74,.6), 0 2px 8px rgba(0,0,0,.2);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.wa-float:hover{ transform:translateY(-3px) scale(1.02); text-decoration:none; color:#fff; }
.wa-float svg{ width:22px; height:22px; flex:none; fill:currentColor; }
.wa-float::before{
  content:""; position:absolute; inset:0; border-radius:100px; border:2px solid rgba(37,211,102,.55);
  animation:wa-ping 2.6s var(--ease) infinite;
}
@keyframes wa-ping{ 0%{ transform:scale(1); opacity:.75; } 70%,100%{ transform:scale(1.28); opacity:0; } }
@media (max-width:520px){ .wa-float__txt{ display:none; } .wa-float{ padding:.95rem; } }

/* ---------- 16. FOOTER ---------- */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.66); position:relative; }
.site-footer::before{
  content:""; position:absolute; inset:0; opacity:.05; pointer-events:none;
  background-image:radial-gradient(#fff 1px, transparent 1.1px); background-size:18px 18px;
}
.site-footer .wrap{ position:relative; z-index:2; }
.footer-grid{ display:grid; gap:2.4rem; grid-template-columns:1.5fr 1fr 1fr 1.2fr; padding-block:clamp(2.75rem,6vw,4.25rem); }
.site-footer h4{ font-family:var(--font-mono); font-size:var(--t-micro); font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); margin-bottom:1.1rem; }
.site-footer a{ color:rgba(255,255,255,.72); }
.site-footer a:hover{ color:#fff; }
.site-footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem; font-size:var(--t-small); }
.footer-brand__name{ font-family:var(--font-display); color:#fff; font-size:1.25rem; margin-bottom:.6rem; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-block:1.35rem; display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; font-size:.8rem; }
.footer-bottom .cmyk-dots i{ width:7px; height:7px; }
.footer-bottom .cmyk-dots i:nth-child(4){ background:#fff; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:540px){
  /* Merek melebar penuh; Produk dan Perusahaan berdampingan supaya footer
     tidak memanjang ke bawah di layar kecil. */
  .footer-grid{ grid-template-columns:repeat(2,1fr); gap:1.8rem 1.4rem; }
  .footer-grid > :first-child,
  .footer-grid > :last-child{ grid-column:1 / -1; }
  .footer-grid ul{ font-size:.9rem; }
}

/* ---------- 17. LANDING PAGE IKLAN ---------- */
.lp-hero{ background:var(--ink); color:#fff; position:relative; overflow:hidden; }
.lp-hero::before{ content:""; position:absolute; inset:0; background:radial-gradient(80% 80% at 70% 0%, rgba(200,16,46,.5), transparent 60%); }
.lp-hero__inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,3.5rem); align-items:center; padding-block:clamp(2.75rem,6vw,4.5rem); }
.lp-usp{ list-style:none; padding:0; margin:1.6rem 0 2rem; display:grid; gap:.7rem; }
.lp-usp li{ display:flex; gap:.7rem; align-items:flex-start; font-size:1rem; color:rgba(255,255,255,.85); }
.lp-usp li::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--gold); flex:none; margin-top:.55rem; }
.lp-form{ background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow-lift); padding:clamp(1.35rem,3vw,2rem); color:var(--ink); }
.lp-form h2{ font-size:1.28rem; margin-bottom:.3rem; }
.lp-form > p{ font-size:var(--t-small); color:var(--ink-muted); margin-bottom:1.3rem; }
.lp-trust{ display:flex; flex-wrap:wrap; gap:1.4rem; padding-block:1.15rem; border-block:1px solid var(--rule); font-family:var(--font-mono); font-size:var(--t-micro); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted); justify-content:center; }
@media (max-width:900px){ .lp-hero__inner{ grid-template-columns:1fr; } }

/* ---------- 18. ANIMASI SCROLL (minim) ---------- */
[data-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1; transform:none; }
}

/* ---------- 19. KONTEN UMUM ---------- */
.entry{ max-width:74ch; }
.entry h2{ margin-top:2.2rem; }
.entry ul,.entry ol{ padding-left:1.25rem; margin:0 0 1.05em; }
.entry li{ margin-bottom:.4rem; }
.entry blockquote{ margin:1.6rem 0; padding:1rem 1.3rem; border-left:4px solid var(--red); background:var(--paper-warm); border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.page-hero{
  position:relative; overflow:hidden;
  background:var(--paper-warm);
  padding-block:clamp(1.9rem,3.4vw,2.9rem) clamp(2.1rem,3.8vw,3.2rem);
}
/* Judul dan pengantar berdampingan supaya sisi kanan tidak menganga. */
.page-hero .wrap > h1{ margin-bottom:.75rem; }
@media (min-width:900px){
  .page-hero__split{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:end; }
}
/* Raster halftone tipis + registration mark: penanda khas percetakan
   yang muncul di setiap halaman tanpa perlu mengubah markup. */
.page-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%230B0B0C' stroke-opacity='.09' stroke-width='2'%3E%3Ccircle cx='50' cy='50' r='30'/%3E%3Ccircle cx='50' cy='50' r='14'/%3E%3Cpath d='M50 4v92M4 50h92'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(rgba(11,11,12,.055) 1px, transparent 1px);
  background-repeat:no-repeat, repeat;
  background-position:right -40px top 50%, 0 0;
  background-size:clamp(200px,26vw,340px), 13px 13px;
}
.page-hero > .wrap{ position:relative; z-index:2; }
/* Garis merah pendek di bawah judul, seperti aksen di beranda. */
.page-hero h1{ position:relative; padding-bottom:.7rem; margin-bottom:.75rem; font-size:clamp(1.8rem,3.4vw,2.7rem); }
.page-hero h1::after{
  content:""; position:absolute; left:0; bottom:0;
  width:54px; height:3px; background:var(--red); border-radius:2px;
}
/* Color bar CMYK menutup tepi bawah tiap halaman. */
.page-hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:linear-gradient(90deg,
    var(--c) 0 16.66%, var(--m) 16.66% 33.33%, var(--y) 33.33% 50%,
    var(--k) 50% 66.66%, var(--red) 66.66% 83.33%, var(--gold) 83.33% 100%);
}
.breadcrumb{ font-family:var(--font-mono); font-size:var(--t-micro); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:.9rem; }
.breadcrumb a{ color:var(--ink-muted); }

/* ---------- 14. HALAMAN PRODUK ---------- */
.prodhero{ position:relative; background:var(--ink); color:#fff; overflow:hidden; }
.prodhero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 82% 12%, rgba(200,16,46,.42), transparent 62%);
}
.prodhero > .wrap{ position:relative; z-index:2; padding-block:clamp(2.2rem,4.5vw,3.4rem); }
.prodhero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.6rem,4vw,3rem); align-items:center; }
.prodhero h1{ font-size:clamp(1.9rem,3.8vw,3rem); margin-bottom:.8rem; }
.prodhero__lede{ color:rgba(255,255,255,.78); max-width:46ch; margin-bottom:1.5rem; }
.prodhero__media{ border-radius:var(--radius); overflow:hidden; }
.prodhero__media img{ display:block; width:100%; height:auto; }
.prodhero__bar{ position:absolute; bottom:0; left:0; right:0; z-index:3; }
.breadcrumb--light{ color:rgba(255,255,255,.6); }
.breadcrumb--light a{ color:rgba(255,255,255,.75); }
.breadcrumb--light span{ margin-inline:.4rem; opacity:.5; }

/* Strip spesifikasi: fakta yang bisa dipindai sebelum teks panjang. */
.spekstrip{ background:var(--paper-warm); border-bottom:1px solid var(--rule); }
.spekstrip dl{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:0; background:var(--rule); }
.spekstrip dl > div{ background:var(--paper-warm); padding:1.15rem clamp(.9rem,2vw,1.5rem); }
.spekstrip dt{
  font-family:var(--font-mono); font-size:var(--t-micro); letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-muted); margin-bottom:.35rem;
}
.spekstrip dd{ margin:0; font-weight:600; font-size:.95rem; line-height:1.35; }

/* Tombol tempel di bawah layar — hanya mobile. */
.stickycta{ display:none; }
.btn--sm{ padding:.7rem 1rem; font-size:.85rem; }
.btn--wa{ --btn-bg:linear-gradient(135deg,#2ecc71,#20A75A); --btn-sh:0 6px 18px rgba(32,167,90,.35); }

@media (max-width:860px){
  .prodhero__grid{ grid-template-columns:1fr; }
  .prodhero__media{ order:-1; }
  .spekstrip dl{ grid-template-columns:repeat(2,1fr); }
  .stickycta{
    display:flex; gap:.6rem; position:fixed; left:0; right:0; bottom:0; z-index:60;
    padding:.7rem clamp(.8rem,4vw,1.2rem); background:rgba(255,255,255,.96);
    backdrop-filter:blur(8px); border-top:1px solid var(--rule);
    /* Tersembunyi sampai tombol hero lewat dari layar. */
    transform:translateY(110%); transition:transform .32s var(--ease);
  }
  .stickycta.is-on{ transform:translateY(0); }
  .stickycta .btn{ flex:1; justify-content:center; }
  /* Tombol melayang disembunyikan di halaman yang punya bar tempel —
     dua tombol WhatsApp bertumpuk di sudut yang sama hanya jadi kebisingan. */
  body:has(.stickycta) .wa-float{ display:none; }
}

/* Patokan lokasi: baris kecil di bawah alamat, membantu orang menemukan tempat. */
.nap__patokan{
  display:block; margin-top:.3rem;
  font-family:var(--font-mono); font-size:var(--t-micro);
  letter-spacing:.04em; color:var(--ink-muted); font-weight:400;
}
/* Angka statistik dianimasikan lewat JS; sediakan ruang agar tidak melompat. */
.hero__proof b{ display:inline-block; font-variant-numeric:tabular-nums; }

/* ---------- Gambar di dalam badan tulisan ---------- */
.entry figure,
.entry .wp-block-image{ margin:2rem 0; }
.entry img{ border-radius:var(--radius); }
.entry figcaption,
.entry .wp-element-caption{
  margin-top:.6rem; text-align:left;
  font-family:var(--font-mono); font-size:var(--t-micro);
  letter-spacing:.04em; color:var(--ink-muted);
}
/* "Lebar lebar" di editor: gambar melebar melewati kolom teks. */
.entry .alignwide{
  width:min(var(--wrap-narrow), 92vw);
  margin-inline:calc(50% - min(var(--wrap-narrow), 92vw) / 2);
  max-width:none;
}
@media (max-width:700px){
  .entry .alignwide{ width:100%; margin-inline:0; }
}

.footer-bottom__link{
  margin-left:.9rem; padding-left:.9rem;
  border-left:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.62);
}
.footer-bottom__link:hover{ color:#fff; }
@media (max-width:600px){
  .footer-bottom__link{ display:inline-block; margin:.5rem 0 0; padding:0; border:0; }
}