/* ============================================================
   BNL Industrial FSE — front-end + editor styles
   Menempel pada markup block. Token warna/font dari theme.json.
   ============================================================ */
:root{
  --ink:#14181B; --ink-2:#1B2227; --steel:#232C32; --line:#33404A;
  --concrete:#A29B90; --paper:#ECE8E1; --paper-2:#DED8CD; --hivis:#F5B915;
  --hivis-lo:#C8940A; --white:#F8F6F2;
  --display:"Archivo",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --stripe:repeating-linear-gradient(-45deg,var(--hivis) 0 14px,var(--ink) 14px 28px);
}

body{ font-family:var(--body); background:var(--ink); color:var(--white); }
body.wp-admin{ background:transparent; }

/* concrete + blueprint grid atmosphere (front end only) */
body:not(.wp-admin)::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(var(--line) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/64px 64px;
  opacity:.05;
  -webkit-mask-image:radial-gradient(120% 80% at 70% 0%,#000 30%,transparent 75%);
          mask-image:radial-gradient(120% 80% at 70% 0%,#000 30%,transparent 75%);
}
.wp-site-blocks{ position:relative; z-index:1; overflow-x:hidden; }

/* ---------- shared type helpers (apply as block className) ---------- */
.eyebrow{ font-family:var(--mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--hivis) !important; display:inline-flex; align-items:center; gap:.7em; margin:0; }
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--hivis); display:inline-block; }
.eyebrow.center{ justify-content:center; }
.partno{ font-family:var(--mono) !important; font-size:.72rem !important; letter-spacing:.14em; color:var(--concrete) !important; text-transform:uppercase; }
.lead{ color:var(--concrete) !important; font-size:clamp(1rem,1.4vw,1.18rem) !important; }
.display-xl{ font-size:clamp(3rem,9vw,7.3rem) !important; line-height:.94 !important; }
.amber{ color:var(--hivis) !important; }

/* ---------- buttons (core/button variants) ---------- */
.wp-block-button__link{
  font-family:var(--mono); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.95em 1.5em; border-radius:0; border:1px solid transparent; font-weight:600;
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.wp-block-button__link:hover{ transform:translateY(-2px); }
.btn-primary .wp-block-button__link{ background:var(--hivis); color:#1a1400; }
.btn-primary .wp-block-button__link:hover{ background:#ffca2b; color:#1a1400; }
.btn-ghost .wp-block-button__link{ background:transparent; border-color:var(--line); color:var(--white); }
.btn-ghost .wp-block-button__link:hover{ border-color:var(--hivis); color:var(--hivis); }
:where(a,.wp-block-button__link,button):focus-visible{ outline:2px solid var(--hivis); outline-offset:3px; }

/* ---------- hazard rule ---------- */
.hazard-rule{ height:10px; background:var(--stripe); background-size:39.6px 39.6px; }
.wp-block-separator.hazard-rule{ border:0; margin:0; opacity:1; max-width:none; }

/* ---------- header / nav ---------- */
.bnl-header{ position:sticky; top:0; z-index:50; background:rgba(20,24,27,.82); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.bnl-header .wp-block-group{ min-height:auto; }
.bnl-nav{ padding-block:14px; }
.brand-plate{ font-family:var(--display); font-weight:800; background:var(--hivis); color:#1a1400 !important; padding:.28em .5em; font-size:1.05rem; letter-spacing:.02em; -webkit-clip-path:polygon(8% 0,100% 0,92% 100%,0 100%); clip-path:polygon(8% 0,100% 0,92% 100%,0 100%); }
.brand-name{ font-family:var(--body) !important; font-weight:600 !important; font-size:.86rem !important; text-transform:none !important; letter-spacing:.02em !important; line-height:1.1 !important; margin:0 !important; }
.brand-sub{ font-family:var(--mono) !important; font-size:.62rem !important; letter-spacing:.2em; color:var(--concrete) !important; margin:0 !important; text-transform:uppercase; }
.bnl-navlinks a{ font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--concrete); }
.bnl-navlinks a:hover{ color:var(--white); }

/* ---------- hero ---------- */
.bnl-hero{ position:relative; padding-block:clamp(48px,7vw,96px) clamp(40px,6vw,72px); overflow:hidden; }
.bnl-hero::after{
  content:"88"; position:absolute; right:-2vw; top:8%; z-index:0; pointer-events:none;
  font-family:var(--display); font-weight:900; font-size:min(46vw,660px); line-height:.8; color:transparent;
  -webkit-text-stroke:1.5px rgba(245,185,21,.10);
}
.bnl-hero > *{ position:relative; z-index:1; }
.bnl-hero .display-xl{ margin-top:1.1rem; }
.hero-lead{ max-width:46ch; }

/* spec plate */
.specplate{ background:linear-gradient(180deg,var(--steel),var(--ink-2)); border:1px solid var(--line); box-shadow:0 30px 60px -30px rgba(0,0,0,.7); padding:0 !important; position:relative; }
.specplate::before,.specplate::after{ content:""; position:absolute; top:10px; width:8px; height:8px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#4a555d,#10141600); border:1px solid #0c0f11; }
.specplate::before{ left:10px; } .specplate::after{ right:10px; }
.sp-cap{ display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--concrete); padding:16px 18px 10px; border-bottom:1px solid var(--line); }
.sp-cap .dot{ color:var(--hivis); }
.sp-row{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:13px 18px; border-bottom:1px solid var(--line); }
.sp-row:last-child{ border-bottom:0; }
.sp-row .k{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--concrete); }
.sp-row .v{ font-family:var(--display); font-weight:800; font-size:1.6rem; line-height:1; }
.sp-row .v small{ font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; color:var(--hivis); margin-left:4px; }

/* ---------- capacity strip ---------- */
.bnl-caps{ border-block:1px solid var(--line); background:var(--ink-2); padding:0 !important; }
.bnl-caps .wp-block-column{ padding:clamp(20px,3vw,34px) clamp(20px,3vw,34px); border-right:1px solid var(--line); }
.bnl-caps .wp-block-column:last-child{ border-right:0; }
.cap-num{ font-family:var(--display) !important; font-weight:800 !important; font-size:clamp(2rem,4vw,3rem) !important; line-height:1 !important; margin:0 !important; }
.cap-lab{ font-family:var(--mono) !important; font-size:.68rem !important; letter-spacing:.14em; text-transform:uppercase; color:var(--concrete) !important; margin:.5rem 0 0 !important; }

/* ---------- section rhythm ---------- */
.bnl-section{ padding-block:clamp(64px,9vw,120px); }
.section-title{ font-size:clamp(1.9rem,4.4vw,3.3rem) !important; line-height:1 !important; margin:.5rem 0 0 !important; }

/* ---------- services ---------- */
.svc-grid{ background:var(--line); border:1px solid var(--line); margin-top:clamp(36px,5vw,60px); }
.svc-grid > .wp-block-group{ background:var(--ink); padding:clamp(26px,3.4vw,44px); position:relative; transition:background .25s ease; }
.svc-grid > .wp-block-group::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--hivis); transform:scaleY(0); transform-origin:top; transition:transform .3s ease; }
.svc-grid > .wp-block-group:hover{ background:var(--ink-2); }
.svc-grid > .wp-block-group:hover::before{ transform:scaleY(1); }
.svc-grid h3{ font-size:clamp(1.35rem,2.4vw,1.9rem) !important; margin:.5rem 0 .6rem !important; }
.svc-grid p{ color:var(--concrete) !important; margin:0 !important; }
@media (max-width:720px){ .svc-grid{ grid-template-columns:1fr !important; } }

/* ---------- fleet (light) ---------- */
.bnl-fleet{ background:var(--paper); color:var(--ink); }
.bnl-fleet .eyebrow{ color:var(--hivis-lo) !important; }
.bnl-fleet .eyebrow::before{ background:var(--hivis-lo); }
.bnl-fleet .section-title{ color:var(--ink) !important; }
.bnl-fleet .lead{ color:#5c574e !important; }
.fleet-list{ margin-top:clamp(36px,5vw,56px); border-top:2px solid var(--ink); }
.unit{ display:grid; grid-template-columns:44px 1.2fr 2fr auto; gap:clamp(12px,2vw,28px); align-items:center; padding:clamp(18px,2.4vw,26px) 0; border-bottom:1px solid rgba(20,24,27,.16); position:relative; }
.unit .idx{ font-family:var(--mono); font-size:.8rem; color:#8a8377; }
.unit .u-name{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(1.15rem,2vw,1.6rem); letter-spacing:-.01em; color:var(--ink); }
.unit .u-name small{ display:block; font-family:var(--mono); font-weight:400; font-size:.66rem; letter-spacing:.12em; color:#8a8377; text-transform:uppercase; margin-top:.25rem; }
.u-specs{ display:flex; flex-wrap:wrap; gap:8px 10px; }
.spec-chip{ font-family:var(--mono); font-size:.72rem; color:var(--ink); background:var(--paper-2); border:1px solid rgba(20,24,27,.14); padding:.42em .7em; }
.spec-chip b{ color:var(--hivis-lo); font-weight:600; }
.unit .u-tag{ font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--ink); padding:.5em .8em; white-space:nowrap; }
.unit::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--hivis); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.unit:hover::after{ transform:scaleX(1); }

/* ---------- clients marquee ---------- */
.bnl-clients{ border-block:1px solid var(--line); background:var(--ink-2); padding-block:34px; overflow:hidden; }
.clients-cap{ font-family:var(--mono) !important; font-size:.68rem !important; letter-spacing:.18em; text-transform:uppercase; color:var(--concrete) !important; text-align:center; margin:0 0 22px !important; }
.marquee{ display:flex; gap:56px; width:max-content; animation:bnl-slide 32s linear infinite; }
.marquee span{ font-family:var(--display); font-weight:800; font-size:clamp(1.1rem,2vw,1.5rem); text-transform:uppercase; color:var(--concrete); opacity:.7; white-space:nowrap; }
.marquee span::after{ content:"／"; margin-left:56px; color:var(--hivis); opacity:.6; }
@keyframes bnl-slide{ to{ transform:translateX(-50%); } }

/* ---------- cta ---------- */
.bnl-cta{ position:relative; text-align:center; padding-block:clamp(64px,9vw,120px); }
.bnl-cta .section-title,.bnl-cta h2{ font-size:clamp(2.2rem,6vw,4.6rem) !important; line-height:.98 !important; }

/* ---------- footer ---------- */
.bnl-footer{ background:#0e1113; border-top:1px solid var(--line); padding-block:clamp(48px,6vw,80px) 32px; }
.bnl-footer h4{ font-family:var(--mono) !important; font-size:.7rem !important; letter-spacing:.16em; text-transform:uppercase; color:var(--hivis) !important; margin:0 0 1rem !important; }
.bnl-footer a,.bnl-footer p{ color:var(--concrete) !important; }
.bnl-footer a:hover{ color:var(--white) !important; }
.foot-note{ font-family:var(--mono) !important; font-size:.7rem !important; letter-spacing:.08em; text-transform:uppercase; color:#6a6459 !important; }

/* ============================================================
   BLOG
   ============================================================ */
.blog-grid{ margin-top:clamp(36px,5vw,56px); }
.blog-card{ background:var(--ink-2); border:1px solid var(--line); padding:clamp(22px,2.4vw,30px); display:flex; flex-direction:column; gap:.6rem; position:relative; transition:border-color .25s ease, transform .25s ease, background .25s ease; height:100%; }
.blog-card::before{ content:""; position:absolute; left:0; top:0; height:3px; width:0; background:var(--hivis); transition:width .3s ease; }
.blog-card:hover{ border-color:var(--hivis); transform:translateY(-4px); background:#20282e; }
.blog-card:hover::before{ width:100%; }
.blog-card .wp-block-post-terms{ font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--hivis); }
.blog-card .wp-block-post-terms a{ color:var(--hivis); text-decoration:none; }
.blog-card .wp-block-post-title{ font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; line-height:1.05; font-size:clamp(1.15rem,1.8vw,1.5rem); margin:0; }
.blog-card .wp-block-post-title a{ color:var(--white); text-decoration:none; }
.blog-card .wp-block-post-title a:hover{ color:var(--hivis); }
.blog-card .wp-block-post-excerpt{ color:var(--concrete); font-size:.95rem; margin:0; }
.blog-card .wp-block-post-excerpt__excerpt{ margin:0; }
.blog-card .wp-block-post-excerpt__more-link{ display:none; }
.blog-card .wp-block-post-date{ font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; color:#6f6a60; margin-top:auto; padding-top:.4rem; }
.blog-pagination{ margin-top:clamp(32px,4vw,48px); }
.blog-pagination .wp-block-query-pagination-numbers,
.blog-pagination a, .blog-pagination .wp-block-query-pagination-previous, .blog-pagination .wp-block-query-pagination-next{ font-family:var(--mono); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--concrete); }
.blog-pagination a:hover{ color:var(--hivis); }
.blog-pagination .current{ color:var(--hivis); }

/* ---------- single article prose ---------- */
.article-head{ border-bottom:1px solid var(--line); padding-bottom:clamp(24px,3vw,36px); margin-bottom:clamp(28px,3.5vw,44px); }
.article-cat{ font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--hivis); }
.article-cat a{ color:var(--hivis); text-decoration:none; }
.article-meta{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; color:#6f6a60; text-transform:uppercase; margin-top:.6rem; }
.article-title{ font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; line-height:1.02; font-size:clamp(1.9rem,4.6vw,3.2rem); margin:.6rem 0 0; }
.prose{ font-size:clamp(1.02rem,1.25vw,1.15rem); line-height:1.75; }
.prose p{ color:#d9d5cd; }
.prose h2{ font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(1.4rem,2.6vw,2rem); margin:2.2rem 0 .8rem; color:var(--white); }
.prose h3{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:1.3rem; margin:1.8rem 0 .6rem; }
.prose a{ color:var(--hivis); text-decoration:underline; text-underline-offset:3px; }
.prose ul,.prose ol{ color:#d9d5cd; padding-left:1.2em; }
.prose li{ margin:.4rem 0; }
.prose li::marker{ color:var(--hivis); }
.prose strong{ color:var(--white); }
.prose em{ color:#cfc9bf; }
.article-foot{ margin-top:clamp(36px,5vw,56px); padding-top:24px; border-top:1px solid var(--line); }

/* ---------- 404 ---------- */
.bnl-404{ min-height:60vh; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.bnl-404 .code{ font-family:var(--display); font-weight:900; font-size:clamp(5rem,18vw,12rem); line-height:.85; color:transparent; -webkit-text-stroke:2px var(--hivis); }

/* ---------- reveal (progressive enhancement: only hides when JS is active) ---------- */
html.bnl-js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
html.bnl-js .reveal.in{ opacity:1; transform:none; }
.editor-styles-wrapper .reveal{ opacity:1; transform:none; } /* always visible while editing */

/* ---------- responsive ---------- */
@media (max-width:960px){
  .bnl-caps .wp-block-column:nth-child(2n){ border-right:0; }
  .unit{ grid-template-columns:32px 1fr; row-gap:10px; }
  .unit .u-specs,.unit .u-tag{ grid-column:2; }
  .unit .u-tag{ justify-self:start; }
}
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .marquee{ animation:none; flex-wrap:wrap; justify-content:center; }
}