/* Subpages built by site/src/build.mjs (produk, industri, tentang, artikel). Loaded on the homepage too, for the
   footer page links and the product links in the hero. Uses the tokens from styles.css. */

/* Footer page links (all pages) */
.footer-nav{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:12.5px;font-weight:600;color:var(--muted);line-height:1.8}
.footer-nav a:hover{color:var(--ink)}
.footer-bottom .back-top{font-size:12px}

/* Homepage hero: product names link to their pages */
.hero-description a{border-bottom:1px solid rgba(223,197,129,.4);transition:border-color .2s,color .2s}
.hero-description a:hover{color:#fff;border-color:#dfc581}

/* Header on subpages: current section */
.subpage .nav-links>a[aria-current=page]:not(.nav-cta):after{width:100%}

/* Breadcrumb */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding-top:30px;font-size:12px;line-height:1.6;color:var(--muted)}
.crumbs a{border-bottom:1px solid transparent}
.crumbs a:hover{color:var(--ink);border-color:var(--gold)}
.crumbs [aria-current]{color:var(--ink);font-weight:600}
.crumb-sep{color:#b9b3a4}

/* Page hero */
.page-hero{padding-block:46px 64px;border-bottom:1px solid var(--line)}
.page-hero .eyebrow{color:var(--gold-dark);margin-bottom:22px}
.page-hero h1{font-size:clamp(46px,6.4vw,92px);letter-spacing:-1.8px;line-height:1.02;font-weight:500;max-width:15ch;text-wrap:balance}
.page-hero h1 em{color:var(--gold-dark)}
.page-hero .lede{margin-top:26px;max-width:560px;font-size:16px;line-height:1.85;color:var(--muted)}

/* Two-column blocks: heading left, content right */
.page-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px 64px;padding-block:72px;border-bottom:1px solid var(--line)}
.split-title{font-size:clamp(34px,3.6vw,50px);line-height:1.04;text-wrap:balance}
.split-title em{color:var(--gold-dark)}
.split-body{display:grid;gap:20px;align-content:start;font-size:15.5px;line-height:1.85;color:#3b4357;max-width:640px;min-width:0}
.split-body .text-link{justify-self:start}
.split-links{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13.5px;font-weight:650}
.split-links a,.split-mail a{border-bottom:1px solid var(--gold);padding-bottom:2px}

/* Option table */
.spec{margin:0;display:grid}
.spec>div{display:grid;grid-template-columns:minmax(120px,170px) minmax(0,1fr);gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.spec>div:last-child{border-bottom:1px solid var(--line)}
.spec dt{font-size:10.5px;font-weight:750;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold-dark);padding-top:4px}
.spec dd{margin:0;font-size:15px;line-height:1.7;color:var(--ink)}

/* Numbered steps (about page) */
.steps{margin:0;padding:0;list-style:none;display:grid;counter-reset:s}
.steps li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;padding:14px 0;border-top:1px solid var(--line);counter-increment:s}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--serif);font-size:21px;line-height:1.3;color:var(--gold-dark)}
.steps b{display:block;font-size:15px;color:var(--ink)}
.steps span{font-size:14px;color:var(--muted)}

/* Product index */
.line-list{display:grid;padding-block:16px 64px}
.line{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,1.15fr) 32px;align-items:baseline;gap:24px;padding:30px 0;border-bottom:1px solid var(--line);transition:padding .25s}
.line:hover{padding-left:10px}
.line-no{font-family:var(--serif);font-size:21px;color:var(--gold-dark)}
.line-name{font-family:var(--serif);font-size:clamp(30px,3.2vw,44px);line-height:1.05;letter-spacing:-.8px}
.line-desc{font-size:14.5px;color:var(--muted);line-height:1.7}
.line-arrow{font-size:22px;justify-self:end;transition:transform .25s}
.line:hover .line-arrow{transform:translateX(4px)}

/* Related links */
.related{padding-block:52px}
.related .eyebrow{color:var(--gold-dark);margin-bottom:16px}
.related ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 32px}
.related a{font-size:14px;font-weight:650;border-bottom:1px solid var(--gold);padding-bottom:4px}

/* Closing band */
.cta-band{background:var(--navy);color:var(--paper)}
.cta-inner{display:flex;justify-content:space-between;align-items:flex-end;gap:32px 64px;flex-wrap:wrap;padding-block:84px}
.cta-band h2{font-size:clamp(36px,4.2vw,58px);line-height:1.04;text-wrap:balance}
.cta-band h2 em{color:#dfc581}
.cta-band p{margin-top:18px;max-width:460px;color:#bec4d1;font-size:15px;line-height:1.8}
.cta-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.cta-actions .text-link{border-color:#5d665d}

/* Article list */
.article-list{display:grid;padding-block:16px 72px}
.article-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 48px;padding:34px 0;border-bottom:1px solid var(--line)}
.article-card .eyebrow{color:var(--gold-dark);margin-bottom:12px}
.article-card h2{font-size:clamp(28px,2.8vw,38px);line-height:1.1;letter-spacing:-.8px;text-wrap:balance;transition:color .2s}
.article-card:hover h2{color:var(--gold-dark)}
.article-card p:not(.eyebrow){color:var(--muted);font-size:14.5px;max-width:640px;margin-top:12px;line-height:1.75}
.article-card .meta{font-size:12px;color:var(--muted);white-space:nowrap;padding-top:2px}

/* Article */
.article-head h1{font-size:clamp(38px,4.8vw,66px);max-width:20ch}
.article-meta{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:24px;font-size:13px;color:var(--muted)}
.article-meta a{border-bottom:1px solid var(--gold);color:var(--ink)}
.article-meta span+span::before{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--gold);vertical-align:middle;margin-right:22px;margin-left:-13px}
.prose{max-width:700px;padding-block:52px 64px;font-size:17px;line-height:1.85;color:#2c3448}
.prose>*+*{margin-top:1.1em}
.prose .lead{font-size:19px;line-height:1.75;color:var(--ink)}
.prose h2{font-size:clamp(30px,3vw,40px);line-height:1.1;letter-spacing:-.8px;margin-top:1.9em;color:var(--ink)}
.prose h3{font-size:19px;margin-top:1.6em}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.4em}
.prose li::marker{color:var(--gold-dark)}
.prose a{border-bottom:1px solid var(--gold);padding-bottom:1px}
.prose a:hover{color:var(--gold-dark)}
.prose .note{font-size:14px;color:var(--muted)}
.table-wrap{overflow-x:auto;border-top:1px solid var(--ink)}
.prose table{width:100%;min-width:520px;border-collapse:collapse;font-size:15px;line-height:1.6}
.prose th,.prose td{text-align:left;padding:11px 14px 11px 0;border-bottom:1px solid var(--line);vertical-align:top}
.prose thead th{font-size:10.5px;font-weight:750;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold-dark)}
.prose tbody th{font-weight:650;color:var(--ink)}
.prose .checklist{list-style:none;padding:0}
.prose .checklist li{position:relative;padding-left:30px}
.prose .checklist li::before{content:'';position:absolute;left:0;top:.42em;width:15px;height:15px;border:1.5px solid var(--gold-dark)}

@media(max-width:900px){
  .page-split{grid-template-columns:1fr;gap:26px;padding-block:56px}
  .line{grid-template-columns:40px minmax(0,1fr) 24px;gap:8px 16px;padding:24px 0}
  .line-desc{grid-column:2/3}
  .line-arrow{grid-row:1;grid-column:3}
}
@media(max-width:720px){
  .crumbs{padding-top:22px}
  .page-hero{padding-block:34px 44px}
  .page-hero h1{letter-spacing:-1.2px}
  .page-hero .lede{font-size:15px}
  .spec>div{grid-template-columns:1fr;gap:4px}
  .cta-inner{padding-block:60px}
  .article-card{grid-template-columns:1fr;gap:10px}
  .prose{font-size:16px;padding-block:40px 52px}
  .prose .lead{font-size:17.5px}
  .footer-nav{gap:4px 18px}
}
@media(prefers-reduced-motion:reduce){.line,.line-arrow{transition:none}}
@media print{.cta-band,.crumbs,.footer-nav{display:none}.page-split{break-inside:avoid}}