/* PT. Sinar Surya Komunikatama, site styles
   Palette (v96): neutral graphite type (#333333 headings and links, #434342 running text, #5E5D5C secondary, #6B6B6A
   small labels), white paper, and the two logo colours: navy (#042C6F) only as the fill of filled buttons and pressed
   controls and in the logo mark, the logo's yellow (#F9C602) for the CTA card, small marks and the gold buttons. Never
   yellow text on white. 27-redesign.css owns the palette (--fg*, --brand and the older aliases); the values here are
   the same, so a rule that reads them before 27 loads sees no other colour. */
:root{
  --paper:#FFFFFF;
  --paper-2:#F5F7FB;
  --paper-3:#EAEEF5;
  --ink:#333333;
  --ink-2:#5E5D5C;
  --accent:#F9C602;
  --accent-2:#E0B000;
  --accent-ink:#0A1022;
  --line:#DCE2EE;
  --line-strong:#B9C4D8;
  --glow:0 18px 40px -24px rgba(17,18,20,.35);
  --text:#434342;
  --text-2:#5E5D5C;
  --text-3:#6B6B6A;
  --ok:#1F6B3A;
  --warn:#B23A1E;
  --font-display:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-body:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-cjk:'Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Source Han Sans SC',sans-serif;
  --max:1480px;
  --radius:6px;
}
*,*::before,*::after{box-sizing:border-box}
html[lang="zh-CN"]{--font-display:'Plus Jakarta Sans',var(--font-cjk);--font-body:'Plus Jakarta Sans',var(--font-cjk);--font-mono:'Plus Jakarta Sans',var(--font-cjk)}
html[lang="zh-CN"] h1,html[lang="zh-CN"] h2,html[lang="zh-CN"] h3{letter-spacing:0}
html[lang="zh-CN"] .eyebrow,html[lang="zh-CN"] .fq .ql,html[lang="zh-CN"] .why .k,html[lang="zh-CN"] .group-title{letter-spacing:.06em}
html{scroll-behavior:smooth;color-scheme:light}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:3px}
.container{max-width:var(--max);margin:0 auto;padding:0 clamp(24px,4.5vw,96px)}
.view[hidden]{display:none}
[hidden]{display:none!important}   /* the hidden attribute always wins, also over .btn and other display rules */

/* ---------- Logo ---------- */
.brand{display:flex;align-items:center;flex-shrink:0;color:var(--ink)}
.logo{height:50px;width:auto;display:block;fill:currentColor}
.logo-img{height:50px;width:auto;display:block}
footer .brand{color:var(--ink)}
footer .logo,footer .logo-img{height:44px}
.logo-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- Navigation ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;gap:24px;height:70px;position:relative}
.nav-links{display:flex;gap:2px;margin-left:auto}
.nav-links a{padding:8px 12px;border-radius:var(--radius);font-size:14.5px;font-weight:500;color:var(--text-2);transition:color .15s,background .15s;white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--ink);background:var(--paper-2);box-shadow:inset 0 -3px 0 var(--accent)}
.nav-tools{display:flex;align-items:center;gap:10px;flex-shrink:0}
.lang{display:flex;border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;font-family:var(--font-mono);font-size:12px;background:var(--paper)}
.lang button{background:transparent;border:0;color:var(--text-2);padding:6px 9px;cursor:pointer;letter-spacing:.06em;font-family:var(--font-mono)}
.lang button[lang]{font-family:var(--font-body);letter-spacing:0;font-size:12.5px}
.lang button[aria-pressed="true"]{background:var(--brand);color:#fff;font-weight:500}
.menu-btn{display:none;background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--ink);width:40px;height:40px;align-items:center;justify-content:center;cursor:pointer}
.nav-tools .ed-toggle{display:none}
body.has-editor .nav-tools .ed-toggle{display:inline-flex}
.search-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--paper);color:var(--text-2);cursor:pointer;font-size:13.5px}
.search-btn:hover{border-color:var(--ink);color:var(--ink)}
.search-btn kbd{font-family:var(--font-mono);font-size:11px;border:1px solid var(--line-strong);border-radius:4px;padding:1px 6px;color:var(--text-3)}
.search-btn svg{width:16px;height:16px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:var(--radius);font-weight:600;font-size:14.5px;border:1px solid transparent;cursor:pointer;font-family:var(--font-body);line-height:1.2;transition:background .15s ease,border-color .15s ease,color .15s ease;white-space:nowrap}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-2)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink);background:var(--paper)}
.btn-ghost:hover{border-color:var(--ink);background:var(--paper-2)}
.btn-sm{padding:8px 14px;font-size:13.5px}
.btn svg{width:16px;height:16px}
.btn[disabled]{opacity:.5;cursor:default}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:76px 0 64px;border-bottom:1px solid var(--line);background:#fff}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.hero-grid > *{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.hero-grid > :nth-child(2){animation-delay:.18s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);display:flex;align-items:center;gap:10px;margin:0}
.eyebrow::before{content:"";width:22px;height:4px;border-radius:2px;background:var(--accent);flex-shrink:0}
h1.display{font-family:var(--font-display);font-stretch:110%;font-weight:700;font-size:clamp(2.4rem,4.6vw,4.6rem);line-height:1.02;letter-spacing:-.022em;margin:18px 0 20px;text-wrap:balance;color:var(--ink)}
h1.display em{font-style:normal;color:var(--ink);background-image:linear-gradient(180deg,transparent 78%,rgba(249,198,2,.55) 78%);background-repeat:no-repeat;background-size:0 100%;animation:sweep 1.1s .35s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes sweep{to{background-size:100% 100%}}
.lead{font-size:1.1rem;color:var(--text-2);max-width:72ch;margin:0 0 30px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-stats{display:flex;gap:40px;margin-top:44px;padding-top:26px;border-top:1px solid var(--line-strong)}
.stat b{display:block;font-family:var(--font-display);font-stretch:112%;font-size:1.9rem;font-weight:700;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.stat span{font-size:13px;color:var(--text-3);display:block;margin-top:6px}

/* Instrument finder */
.finder{background:rgba(255,255,255,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid var(--ink);border-radius:10px;box-shadow:8px 8px 0 var(--paper-3),var(--glow)}
.finder-head{padding:18px 22px 14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.finder-head h2{font-family:var(--font-display);font-stretch:108%;font-weight:700;font-size:1.25rem;margin:8px 0 0;letter-spacing:-.015em;color:var(--ink)}
.finder-head .reset{background:transparent;border:0;color:var(--text-3);font-size:13px;cursor:pointer;padding:6px 0;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.finder-head .reset:hover{color:var(--ink)}
.finder-body{padding:16px 22px 20px}
.fq{margin:0 0 18px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.fq:last-child{border-bottom:0;padding-bottom:4px;margin-bottom:0}
.fq .ql{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);display:block;margin-bottom:8px}
.fq .opts{display:flex;flex-wrap:wrap;gap:6px}
.fopt{border:1px solid var(--line-strong);background:var(--paper);color:var(--text-2);padding:7px 12px;border-radius:999px;font-size:13px;font-weight:500;cursor:pointer;transition:border-color .12s,color .12s,background .12s}
.fopt:hover{border-color:var(--ink);color:var(--ink)}
.fopt[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.fresult{border-top:1px solid var(--line);margin-top:6px;padding-top:14px}
.fresult .rl{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);display:flex;justify-content:space-between;gap:10px;margin-bottom:8px}
.fresult .rl a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-transform:none;letter-spacing:0;font-family:var(--font-body);font-size:12.5px}
.fresult .empty{color:var(--text-3);font-size:14px;padding:6px 0 2px;border:0;text-align:left}
.rec{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.rec:first-of-type{border-top:0}
.rec .n{min-width:0;flex:1 1 auto}
.rec .n b{display:block;font-family:var(--font-display);font-stretch:106%;font-weight:600;font-size:14.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec .n span{display:block;font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec .btn{flex-shrink:0}
.fask{border-top:1px solid var(--line);margin-top:14px;padding-top:14px}
.fask[hidden]{display:none}
.fask .row{display:flex;gap:8px}
.fask input{flex:1;min-width:0}
.fask .note{font-size:12px;color:var(--text-3);margin:8px 0 0}
.fask .answer{margin-top:10px;font-size:14px;color:var(--text-2);border-left:2px solid var(--ink);padding-left:12px}
.fask .answer.err{color:var(--warn);border-color:var(--warn)}

/* ---------- Principals strip ---------- */
.principals{border-bottom:1px solid var(--line);background:var(--paper)}
.principals-inner{display:flex;align-items:center;padding:16px 24px;overflow:hidden}
.marquee{flex:1;min-width:0;overflow:hidden;padding:6px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
.marquee-track{display:flex;align-items:center;list-style:none;margin:0;padding:0;width:max-content;animation:marquee calc(var(--n,16) * 3.2s) linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee-track li{flex-shrink:0;margin-left:64px}
.bi{display:flex;flex-direction:column;align-items:center;gap:5px;text-decoration:none;color:var(--text-3);padding:3px 0}
.bi img{height:34px;width:auto;max-width:180px;object-fit:contain;display:none;opacity:.92;transition:opacity .25s,transform .25s}
.bi.has img{display:block}
.bi.has .wm{display:none}
.bi:hover img{opacity:1;transform:translateY(-1px)}
.bi .wm{font-family:var(--font-display);font-stretch:112%;font-weight:700;letter-spacing:.07em;text-transform:uppercase;font-size:13.5px;white-space:nowrap;transition:color .2s}
.bi:hover .wm{color:var(--ink)}
li.feat .bi img{height:38px;max-width:200px;opacity:1}
li.feat .bi .wm{color:var(--ink);font-size:15px}
li.feat + li{margin-left:76px}

/* ---------- Motion: reveal on scroll ---------- */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 55ms)}
[data-reveal].in{opacity:1;transform:none}
body.no-motion [data-reveal]{opacity:1;transform:none;transition:none}
body.no-motion h1.display em{background-size:100% 100%}

/* ---------- Sections ---------- */
.section{padding:88px 0}
.section.alt{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:40px}
.section-head > div{max-width:96ch;flex:1 1 auto;min-width:0}
h2.title{font-family:var(--font-display);font-stretch:108%;font-weight:700;font-size:clamp(1.7rem,3vw,2.35rem);letter-spacing:-.018em;line-height:1.1;margin:14px 0 0;text-wrap:balance;max-width:34ch;color:var(--ink)}
.section-head p{color:var(--text-2);max-width:none;margin:14px 0 0}
.section-head .btn{flex-shrink:0}

/* Category cards */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cat{display:flex;flex-direction:column;gap:12px;padding:24px 24px 20px;background:var(--paper);border:1px solid var(--line);border-radius:10px;transition:border-color .2s,transform .25s,box-shadow .25s;position:relative;min-height:212px}
.cat:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:var(--glow)}
.cat .icon{width:44px;height:44px;border-radius:8px;background:var(--paper-2);color:var(--ink);display:grid;place-items:center;position:relative;overflow:hidden}
.cat .icon::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.9),transparent);transform:skewX(-18deg);opacity:0}
.cat:hover .icon::after{animation:scan .9s ease forwards}
@keyframes scan{0%{left:-60%;opacity:0}20%{opacity:1}100%{left:120%;opacity:0}}
.cat .cnt{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);padding-top:12px;border-top:1px solid var(--line);margin-top:4px}
.cat:hover .cnt{color:var(--ink)}
.cat .icon svg{width:24px;height:24px}
.cat h3{font-family:var(--font-display);font-stretch:106%;font-weight:600;font-size:1.15rem;margin:0;letter-spacing:-.01em;line-height:1.25;color:var(--ink)}
.cat p{margin:0;color:var(--text-2);font-size:14px;line-height:1.55;flex:1}
.cat .arrow{position:absolute;top:26px;right:24px;color:var(--text-3);transition:color .2s,transform .2s}
.cat:hover .arrow{color:var(--ink);transform:translate(2px,-2px)}

/* Why list */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:0 32px}
.why > div{padding:26px 0 8px;border-top:1px solid var(--ink)}
.why h3{font-family:var(--font-display);font-stretch:106%;font-weight:600;font-size:1.08rem;margin:0 0 10px;letter-spacing:-.01em;color:var(--ink)}
.why p{margin:0;color:var(--text-2);font-size:14.5px}
.why .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:14px;display:block}

/* Client wall */
.wall{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.wall > div{background:var(--paper);border:1px solid transparent;border-radius:10px;padding:22px 22px;min-height:96px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:4px;transition:border-color .2s,box-shadow .25s,transform .25s}
.wall > div:hover{border-color:var(--line);box-shadow:var(--glow);transform:translateY(-2px)}
.wall .nm{font-family:var(--font-display);font-stretch:108%;font-weight:600;font-size:14.5px;color:var(--text-2);letter-spacing:.01em}
.group-title{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin:40px 0 14px;display:flex;align-items:center;gap:10px}
.group-title::after{content:"";flex:1;height:1px;background:var(--line-strong)}
.group-title:first-child{margin-top:0}

/* CTA band (the older layer; v96 makes it the flat gold card with graphite type: 27-redesign.css, 36-foto-bertumpuk.css) */
.cta-band{border-radius:10px;padding:48px;display:flex;justify-content:space-between;align-items:center;gap:32px;background:var(--ink);color:#fff;border:1px solid var(--ink);position:relative;overflow:hidden;box-shadow:8px 8px 0 var(--accent)}
.cta-band::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--accent);pointer-events:none}
.cta-band > *{position:relative}
.cta-band h2{font-family:var(--font-display);font-stretch:108%;font-weight:700;font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.018em;line-height:1.12;margin:0 0 10px;text-wrap:balance;max-width:22ch;color:#fff}
.cta-band p{margin:0;color:rgba(255,255,255,.82);max-width:72ch}
.cta-band .actions{display:flex;gap:12px;flex-shrink:0;flex-wrap:wrap}
.cta-band .btn-primary{background:var(--accent);color:var(--fg);border-color:var(--accent)}
.cta-band .btn-primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.cta-band .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.cta-band .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* ---------- Footer. v96 Model 1: light stone with a warm hairline on top, the logo (the mark navy, the company name
   graphite) and graphite headings in small caps, the SSK mark as faint line art (31-v83-aesthetic.css). The type
   follows the graphite tokens of :root (27-redesign.css); the hairline and paper tokens are set for the footer so every
   footer rule (lists, address, legal links, social pills, badges) follows. ---------- */
footer{background:var(--stone);color:var(--text-2);padding:56px 0 24px;border-top:1px solid var(--rule);
  --line:var(--rule);--line-strong:var(--rule-2);--paper:#FFFFFF;--paper-2:var(--stone);--paper-3:var(--stone-2)}
footer .brand{color:var(--ink)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:32px}
.foot-grid h4{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);margin:0 0 14px;font-weight:500}
.foot-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:9px;font-size:14px}
.foot-grid ul a,.foot-grid address a{color:var(--text-2)}
.foot-grid ul a:hover{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}   /* grey to graphite is a small step: the hover underlines too */
.foot-grid p{margin:14px 0 0;font-size:14px;max-width:34ch}
.foot-grid address{font-style:normal;font-size:14px;line-height:1.6;display:grid;gap:14px}
.foot-grid .fc-row{display:grid;grid-template-columns:18px minmax(0,1fr);gap:0 10px;align-items:start}
.foot-grid .fc-i{color:var(--text-3);display:block;padding-top:3px}
.foot-grid .fc-i svg{width:16px;height:16px;display:block}
.foot-grid .fc-l{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.foot-grid .fc-v{color:var(--text-2)}
.foot-grid .fc-v small{font-size:11.5px;color:var(--text-3);margin-left:4px}
.foot-grid address a:hover{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.copyright{margin-top:36px;padding-top:18px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--text-3);font-family:var(--font-mono)}

/* ---------- Inner page header ---------- */
.page-head{padding:60px 0 40px;border-bottom:1px solid var(--line);background:var(--paper)}
.page-head h1{font-family:var(--font-display);font-stretch:110%;font-weight:700;font-size:clamp(2rem,4vw,3.1rem);letter-spacing:-.022em;line-height:1.05;margin:16px 0 14px;text-wrap:balance;max-width:20ch;color:var(--ink)}
.page-head p{color:var(--text-2);max-width:96ch;margin:0;font-size:1.05rem}
.crumbs{font-size:13px;color:var(--text-3);display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 6px}
.crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.crumbs span{color:var(--line-strong)}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:start}
.prose p{margin:0 0 18px;color:var(--text-2);font-size:1.02rem;max-width:none}
.prose p:last-child{margin-bottom:0}
.facts{border:1px solid var(--line);border-radius:8px;background:var(--paper);padding:6px 22px;margin:0}
.facts div{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:14px 0;border-top:1px solid var(--line);font-size:14.5px}
.facts div:first-child{border-top:0}
.facts dt{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);padding-top:3px}
.facts dd{margin:0;color:var(--text)}
.vm{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.vm > div{padding:30px 0;border-top:1px solid var(--ink)}
.vm .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);display:block;margin-bottom:12px}
.vm p{font-family:var(--font-display);font-stretch:104%;font-weight:500;font-size:1.3rem;line-height:1.35;letter-spacing:-.01em;margin:0;text-wrap:balance;color:var(--ink)}
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.svc > div{padding:26px;background:var(--paper);border:1px solid var(--line);border-radius:10px;transition:transform .25s,box-shadow .25s,border-color .2s}
.svc > div:hover{transform:translateY(-3px);box-shadow:var(--glow);border-color:var(--ink)}
.svc .icon{width:44px;height:44px;border-radius:8px;background:var(--paper-2);color:var(--ink);display:grid;place-items:center;margin-bottom:16px}
.svc .icon svg{width:24px;height:24px}
.svc h3{font-family:var(--font-display);font-stretch:106%;font-weight:600;font-size:1.12rem;margin:0 0 10px;letter-spacing:-.01em;color:var(--ink)}
.svc p{margin:0;color:var(--text-2);font-size:14.5px}
.events{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.events li{padding:22px 24px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}
.events .y{font-family:var(--font-mono);color:var(--text-3);font-size:12px;letter-spacing:.12em;display:block;margin-bottom:8px}
.events b{font-family:var(--font-display);font-stretch:106%;font-weight:600;font-size:1.02rem;color:var(--ink);letter-spacing:-.01em;line-height:1.35}

/* ---------- Products ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.chip{border:1px solid var(--line-strong);background:var(--paper);color:var(--text-2);padding:8px 14px;border-radius:999px;font-size:13.5px;font-weight:500;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--brand);color:#fff;border-color:var(--brand)}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.prod{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:22px;display:flex;flex-direction:column;gap:10px;transition:border-color .2s,transform .25s,box-shadow .25s}
.prod:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:var(--glow)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.chips li{font-family:var(--font-mono);font-size:11.5px;padding:4px 9px;border:1px solid var(--line);border-radius:999px;color:var(--text-2);background:var(--paper-2);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.chips li.more{color:var(--text-3);background:transparent;border-style:dashed}
.prod .brand{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.prod h3{margin:0;font-family:var(--font-display);font-stretch:106%;font-size:1.12rem;font-weight:600;letter-spacing:-.01em;line-height:1.25;color:var(--ink)}
.prod h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.prod p{margin:0;color:var(--text-2);font-size:14px;flex:1}
.prod .foot{display:flex;flex-direction:column;gap:10px;padding-top:12px;border-top:1px solid var(--line);margin-top:4px}
.prod .cat-tag{font-size:12px;color:var(--text-3)}
.prod .lk{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.prod .lk .cat-tag{margin-right:auto}
.prod .lk a{font-size:13px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.prod .lk a:hover{text-decoration-color:var(--ink)}
.prod .links{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.prod .links a{font-size:13.5px;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:6px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.prod .links a:hover{text-decoration-color:var(--ink)}
.prod .links .dl{border:1px solid var(--brand);border-radius:var(--radius);padding:6px 10px;background:var(--brand);color:#fff;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.prod .links .dl svg{width:14px;height:14px}
.prod .links .dl:hover{background:var(--brand-2)}
.prod .links .dl.req{background:var(--paper);color:var(--ink)}
.prod .links .dl.req:hover{background:var(--paper-2)}
.prod .links .add{border:1px solid var(--line-strong);border-radius:var(--radius);padding:6px 10px;background:var(--paper);cursor:pointer;font-size:13px;font-weight:600;color:var(--ink);font-family:var(--font-body)}
.prod .links .add:hover{border-color:var(--ink)}
.prod .links .add[data-in="1"]{background:var(--brand);color:#fff;border-color:var(--brand)}
.empty{padding:40px;text-align:center;color:var(--text-3);border:1px dashed var(--line-strong);border-radius:8px}
.brand-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.brand-cell{background:var(--paper);padding:22px}
.brand-cell b{display:block;font-family:var(--font-display);font-stretch:112%;font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:14px;margin-bottom:8px;color:var(--ink)}
.brand-cell .tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--text-3);display:block;margin-bottom:8px}
.brand-cell p{margin:0;font-size:13.5px;color:var(--text-2)}
.note{margin-top:28px;padding:18px 22px;border:1px solid var(--line);border-radius:8px;background:var(--paper-2);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;color:var(--text-2);font-size:14.5px}

/* Product detail */
.detail{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:start}
.detail .brandline{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin:0 0 10px}
.detail .meta{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.detail .meta a,.detail .meta span{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line-strong);border-radius:999px;padding:5px 11px;color:var(--text-2);background:var(--paper)}
.detail .meta a:hover{border-color:var(--ink);color:var(--ink)}
.btn-dl svg{width:16px;height:16px}
.detail h1{font-family:var(--font-display);font-stretch:110%;font-weight:700;font-size:clamp(1.9rem,3.6vw,2.8rem);letter-spacing:-.022em;line-height:1.05;margin:0 0 18px;text-wrap:balance;color:var(--ink)}
.detail .desc{font-size:1.05rem;color:var(--text-2);max-width:none;margin:0 0 24px}
.specs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;padding:0;list-style:none}
.specs li{font-family:var(--font-mono);font-size:12.5px;padding:7px 11px;border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--text-2);background:var(--paper)}
.detail .actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.detail .aside{border:1px solid var(--line);border-radius:8px;background:var(--paper-2);padding:22px}
.detail .aside h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin:0 0 12px;font-weight:500}
.detail .aside .tagl{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.detail .aside .tagl span{font-size:12.5px;border:1px solid var(--line-strong);border-radius:999px;padding:4px 10px;color:var(--text-2);background:var(--paper)}
.detail .aside .share{display:flex;gap:8px;align-items:center}
.detail .aside .share input{font-family:var(--font-mono);font-size:12px;padding:8px 10px}
.related{margin-top:56px}
.related h3{font-family:var(--font-display);font-stretch:108%;font-weight:700;font-size:1.3rem;margin:0 0 18px;letter-spacing:-.015em;color:var(--ink)}

/* ---------- Search overlay ---------- */
.search-ov{position:fixed;inset:0;z-index:90;background:rgba(17,18,20,.45);display:none;align-items:flex-start;justify-content:center;padding:8vh 16px}
.search-ov.open{display:flex}
.search-box{width:min(680px,100%);background:var(--paper);border:1px solid var(--ink);border-radius:8px;box-shadow:10px 10px 0 rgba(17,18,20,.15);overflow:hidden}
.search-box .in{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.search-box .in svg{width:18px;height:18px;color:var(--text-3);flex-shrink:0}
.search-box input{border:0;background:transparent;font-size:17px;padding:8px 0;box-shadow:none}
.search-box input:focus{box-shadow:none;border:0;outline:none}
.search-box .hint{font-family:var(--font-mono);font-size:11px;color:var(--text-3);white-space:nowrap}
.search-res{max-height:60vh;overflow-y:auto}
.search-res a{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.search-res a:hover,.search-res a[aria-selected="true"]{background:var(--paper-2)}
.search-res b{font-family:var(--font-display);font-stretch:106%;font-weight:600;font-size:15px;color:var(--ink);display:block}
.search-res small{display:block;color:var(--text-3);font-size:12.5px}
.search-res .type{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);border:1px solid var(--line-strong);border-radius:4px;padding:3px 7px}
.cmp-table .none{color:var(--text-3);font-size:13px}
.search-res .none{padding:22px 16px;color:var(--text-3);font-size:14px}

/* ---------- Quote bar & panel. v96 Model 1: the bar is white under a warm hairline with graphite type (no navy band at
   the foot of the pages; its gold button: 27-redesign.css), the panel square with a soft shadow ---------- */
.quotebar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;color:var(--ink);border-top:1px solid var(--rule-2);box-shadow:0 -14px 32px -26px rgba(17,18,20,.4)}
.quotebar[hidden]{display:none}
.quotebar .container{display:flex;align-items:center;gap:14px;height:60px}
.quotebar .count{font-family:var(--font-display);font-stretch:110%;font-weight:700;font-size:1.2rem;font-variant-numeric:tabular-nums}
.quotebar .lbl{color:var(--text-2);font-size:14px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quotebar .btn-ghost{background:transparent;border-color:var(--ink);color:var(--ink)}
.quotebar .btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff}
body.has-quote{padding-bottom:60px}
.qpanel{position:fixed;right:16px;bottom:72px;z-index:61;width:min(420px,calc(100vw - 32px));background:var(--paper);border:1px solid var(--rule-2);border-radius:0;box-shadow:0 24px 48px -20px rgba(17,18,20,.35);display:none;flex-direction:column;max-height:60vh}
.qpanel.open{display:flex}
.qpanel .h{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);font-family:var(--font-display);font-stretch:108%;font-weight:700;color:var(--ink)}
.qpanel .h button{background:transparent;border:0;cursor:pointer;color:var(--text-3);font-size:13px;text-decoration:underline;text-underline-offset:3px}
.qpanel ul{list-style:none;margin:0;padding:6px 16px;overflow-y:auto}
.qpanel li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.qpanel li:last-child{border-bottom:0}
.qpanel li small{display:block;color:var(--text-3);font-size:12px}
.qpanel li button{background:transparent;border:1px solid var(--line-strong);border-radius:0;cursor:pointer;color:var(--text-3);font-size:12px;padding:3px 8px}
.qpanel li button:hover{color:var(--warn);border-color:var(--warn)}
.qpanel .empty{border:0;padding:20px}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:start}
.dl{display:grid;grid-template-columns:auto 1fr;gap:16px 24px;font-size:15px;margin:0}
.dl dt{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);padding-top:4px;white-space:nowrap}
.dl dd{margin:0;color:var(--text);line-height:1.55}
.dl dd a:hover{text-decoration:underline;text-underline-offset:3px}
.dl dd .sub{display:block;color:var(--text-3);font-size:13px}
.map-card{margin-top:28px;border:1px solid var(--line);border-radius:8px;background:var(--paper-2);padding:20px 22px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.map-card b{color:var(--ink)}
.map-card .coords{font-family:var(--font-mono);font-size:12px;color:var(--text-3);letter-spacing:.04em}
.form{background:var(--paper);border:1px solid var(--ink);border-radius:8px;padding:30px;box-shadow:8px 8px 0 var(--paper-3)}
.form h3{font-family:var(--font-display);font-stretch:106%;font-weight:600;font-size:1.2rem;margin:0 0 20px;letter-spacing:-.01em;color:var(--ink)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:grid;gap:6px;margin-bottom:14px}
label{font-size:13px;color:var(--text-2);font-weight:500}
input,select,textarea{width:100%;background:#FFFFFF;border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--text);padding:11px 12px;font-family:var(--font-body);font-size:15px}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A4A50' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
textarea{min-height:120px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--text-3)}
input:focus,select:focus,textarea:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px rgba(17,18,20,.1)}
input[aria-invalid="true"]{border-color:var(--warn)}
.form .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.form .hint{font-size:12.5px;color:var(--text-3);margin:14px 0 0}

/* ---------- Editor drawer ---------- */
.ed{position:fixed;top:0;right:0;bottom:0;width:min(460px,100vw);background:var(--paper);border-left:1px solid var(--ink);z-index:80;display:none;flex-direction:column;font-size:14px}
body.editing .ed{display:flex}
.ed-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.ed-head b{font-family:var(--font-display);font-stretch:108%;font-weight:700;font-size:15px;color:var(--ink)}
.ed-head .mode{font-family:var(--font-mono);font-size:11px;color:var(--text-3);letter-spacing:.06em;text-transform:uppercase;display:block;margin-top:2px}
.ed-close{background:transparent;border:1px solid var(--line-strong);border-radius:var(--radius);width:34px;height:34px;cursor:pointer;color:var(--text-2);display:grid;place-items:center}
.ed-tabs{display:flex;gap:4px;padding:10px 12px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.ed-tabs::-webkit-scrollbar{display:none}
.ed-tabs button{border:1px solid transparent;background:transparent;color:var(--text-2);padding:7px 11px;border-radius:var(--radius);cursor:pointer;white-space:nowrap;font-size:13px;font-weight:500}
.ed-tabs button[aria-selected="true"]{background:var(--brand);color:#fff}
.ed-body{flex:1;overflow-y:auto;padding:16px 18px 24px}
.ed-group{margin-bottom:26px}
.ed-group h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line);font-weight:500}
.ed-field{display:grid;gap:4px;margin-bottom:10px}
.ed-field label{font-size:12px;color:var(--text-2);display:flex;justify-content:space-between;gap:8px}
.ed-check label{justify-content:flex-start;align-items:center;gap:8px}
.ed-check input{margin:0;accent-color:var(--ink)}
.ed-field label code{font-family:var(--font-mono);font-size:10.5px;color:var(--text-3)}
.ed-field input,.ed-field textarea,.ed-field select{font-size:13.5px;padding:8px 10px;border-radius:var(--radius)}
.ed-field textarea{min-height:0;resize:vertical;line-height:1.45}
.ed-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ed-item{border:1px solid var(--line);border-radius:8px;padding:12px;margin-bottom:10px;background:var(--paper-2)}
.ed-item summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:600;color:var(--ink);list-style:none}
.ed-item summary::-webkit-details-marker{display:none}
.ed-item summary .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}
.ed-item .tools{display:flex;gap:4px;flex-shrink:0}
.ed-item .tools button{border:1px solid var(--line-strong);background:var(--paper);border-radius:4px;width:26px;height:26px;cursor:pointer;color:var(--text-2);font-size:12px;display:grid;place-items:center}
.ed-item .tools button:hover{color:var(--ink);border-color:var(--ink)}
.ed-item .tools button.del:hover{color:var(--warn);border-color:var(--warn)}
.ed-item .body{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.ed-add{width:100%;border:1px dashed var(--line-strong);background:transparent;color:var(--ink);padding:10px;border-radius:var(--radius);cursor:pointer;font-weight:600;font-size:13px}
.ed-add:hover{border-color:var(--ink);background:var(--paper-2)}
.ed-foot{border-top:1px solid var(--line);padding:12px 18px 14px;background:var(--paper)}
.ed-foot .actions{display:flex;gap:8px;flex-wrap:wrap}
.ed-foot .status{font-size:12.5px;color:var(--text-3);margin:8px 0 0;min-height:18px}
.ed-foot .status.ok{color:var(--ok)}
.ed-foot .status.err{color:var(--warn)}
.ed-help{font-size:12.5px;color:var(--text-3);margin:0 0 14px;padding:10px 12px;background:var(--paper-2);border-radius:var(--radius);line-height:1.5}
@media (min-width:1000px){
  body.editing{padding-right:460px}
}

/* ---------- Images (products, brands, clients, events) ---------- */
.pimg{position:relative;aspect-ratio:4/3;background:var(--paper-2);border-radius:6px;display:grid;place-items:center;overflow:hidden;margin-bottom:6px}
.pimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:8%;opacity:0;transition:opacity .2s,transform .5s cubic-bezier(.2,.7,.2,1)}
.prod:hover .pimg.has img{transform:scale(1.05)}
.pimg.has img{opacity:1}
.pimg .ph{position:relative;color:var(--line-strong);display:grid;place-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.pimg .ph svg{width:34px;height:34px}
.pimg.has .ph{display:none}
.detail .pimg{aspect-ratio:4/3;margin:0 0 22px;background:var(--paper-2)}
.detail .pimg img{padding:5%}
.rec .th{width:44px;height:44px;border-radius:5px;background:var(--paper-2);flex-shrink:0;display:grid;place-items:center;overflow:hidden}
.rec .th img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:3px;opacity:0}
.rec .th.has img{opacity:1}
.rec{gap:10px}
.brand-cell .bl{height:34px;display:flex;align-items:center;margin-bottom:10px}
.brand-cell .bl img{max-height:34px;max-width:140px;object-fit:contain;opacity:0}
.brand-cell .bl.has img{opacity:1}
.brand-cell .bl.has + b{display:none}
.wall .cl{height:44px;display:flex;align-items:center;justify-content:center;width:100%}
.wall .cl img{max-height:44px;max-width:160px;object-fit:contain;opacity:0;transition:opacity .25s}
.wall .cl.has img{opacity:.92}
.wall > div:hover .cl.has img{opacity:1}
.wall > div:has(.cl img):not(:has(.cl.err)) .nm{display:none}   /* v51: nama hanya tampil bila tidak ada logo atau logonya gagal dimuat */
.wall > div:has(.cl img):not(:has(.cl.err)){padding:22px 18px}
.wall .cl:not(:has(img)),.wall .cl.err{height:0;margin:0;overflow:hidden}
#homeWall{grid-template-columns:repeat(7,1fr);gap:8px}
#homeWall > div{padding:18px 12px;min-height:84px}
#homeWall .cl img{max-width:120px}
@media (max-width:1000px){ #homeWall{grid-template-columns:repeat(4,1fr)} #homeWall > div{padding:20px 16px} #homeWall .cl img{max-width:150px} }
@media (max-width:620px){ #homeWall{grid-template-columns:repeat(2,1fr)} }
.events li .ev{aspect-ratio:16/9;background:var(--paper-2);border-radius:6px;overflow:hidden;margin-bottom:14px}
.events li .ev:not(.has){height:0;aspect-ratio:auto;margin:0}
.events li .ev img{width:100%;height:100%;object-fit:cover;display:block;opacity:0}
.events li .ev.has img{opacity:1}
.search-res .th{width:38px;height:38px;border-radius:4px;background:var(--paper-2);display:grid;place-items:center;overflow:hidden;margin-right:12px}
.search-res .th img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;opacity:0}
.search-res .th.has img{opacity:1}
.search-res a{grid-template-columns:auto 1fr auto}

body.ext-blocked .pimg.ext,body.ext-blocked .rec .th.ext,body.ext-blocked .search-res .th.ext,body.ext-blocked .events .ev.ext,body.ext-blocked .bl.ext,body.ext-blocked .cl.ext{display:none!important}
body.ext-blocked .search-res a{grid-template-columns:1fr auto}

/* ---------- Compare ---------- */
.prod .links .cmp{border:1px solid var(--line-strong);border-radius:var(--radius);padding:6px 10px;background:var(--paper);cursor:pointer;font-size:13px;font-weight:600;color:var(--ink);font-family:var(--font-body)}
.prod .links .cmp:hover{border-color:var(--ink)}
.prod .links .cmp[data-in="1"]{background:var(--paper-3);border-color:var(--brand)}
.cmpbar{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:62;display:none;max-width:calc(100vw - 32px);align-items:center;gap:10px;background:var(--paper);border:1px solid var(--ink);border-radius:999px;padding:6px 6px 6px 14px;box-shadow:6px 6px 0 var(--paper-3);font-size:13.5px}
.cmpbar.on{display:inline-flex}
body.has-quote .cmpbar{bottom:76px}
.cmpbar b{font-family:var(--font-display);font-stretch:110%}
.cmp-ov{position:fixed;inset:0;z-index:95;background:rgba(17,18,20,.5);display:none;align-items:center;justify-content:center;padding:24px}
.cmp-ov.open{display:flex}
.cmp-box{width:min(1040px,100%);max-height:88vh;background:var(--paper);border:1px solid var(--ink);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;box-shadow:10px 10px 0 rgba(17,18,20,.15)}
.cmp-box .h{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.cmp-box .h b{font-family:var(--font-display);font-stretch:108%;font-size:1.1rem;color:var(--ink)}
.cmp-box .h .x{display:flex;gap:8px}
.cmp-wrap{overflow:auto}
.cmp-table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.cmp-table th,.cmp-table td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.cmp-table th:first-child,.cmp-table td:first-child{width:130px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);background:var(--paper-2)}
.cmp-table thead th{background:var(--paper);border-bottom:1px solid var(--ink)}
.cmp-table thead th .pimg{aspect-ratio:4/3;max-width:220px;margin-bottom:10px}
.cmp-table thead th b{font-family:var(--font-display);font-stretch:106%;font-size:15px;color:var(--ink);display:block}
.cmp-table thead th small{color:var(--text-3);font-weight:400;display:block;margin-bottom:8px}
.cmp-table .specs{margin:0}
.cmp-table .specs li{font-size:12px;padding:5px 8px}
.cmp-table .tagl{display:flex;flex-wrap:wrap;gap:5px}
.cmp-table .tagl span{font-size:12px;border:1px solid var(--line-strong);border-radius:999px;padding:3px 9px;color:var(--text-2)}
.cmp-table .acts{display:flex;gap:6px;flex-wrap:wrap}

/* ---------- Brochure library ---------- */
.lib{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.lib > div{border:1px solid var(--line);border-radius:8px;background:var(--paper);padding:18px 20px}
.lib h3{font-family:var(--font-display);font-stretch:112%;font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:13px;margin:0 0 10px;color:var(--ink)}
.lib ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.lib li a{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--text-2);padding:6px 0;border-top:1px solid var(--line)}
.lib li:first-child a{border-top:0}
.lib li a:hover{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.lib li a span{font-family:var(--font-mono);font-size:11px;color:var(--text-3);flex-shrink:0}

/* ---------- Floating WhatsApp + chat assistant ---------- */
.chat{position:fixed;right:76px;bottom:24px;z-index:63;width:min(400px,calc(100vw - 32px));height:min(600px,calc(100vh - 100px));background:var(--paper);border:1px solid var(--ink);border-radius:14px;box-shadow:10px 10px 0 var(--paper-3),0 30px 60px -30px rgba(17,18,20,.45);display:flex;flex-direction:column;overflow:hidden;transform-origin:bottom right;animation:chatin .28s cubic-bezier(.2,.7,.2,1)}
.chat[hidden]{display:none}
body.has-quote .chat{bottom:84px}
@keyframes chatin{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
.chat-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 12px 12px 14px;border-bottom:1px solid var(--line);background:var(--paper)}
.chat-h .chat-who{display:flex;align-items:center;gap:10px;min-width:0}   /* v96: was .who, which the home statement (.who, 36-foto-bertumpuk.css) also styles with its section padding */
.chat-h .av{width:38px;height:38px;border-radius:50%;background:#fff;color:var(--ink);border:1px solid var(--line-strong);display:grid;place-items:center;flex-shrink:0}
.chat-h .av svg{width:24px;height:24px;fill:currentColor}
.chat-h .wa-btn{display:inline-flex;align-items:center;gap:6px;border-color:#cfe6d6;color:#0b3d1c}
.chat-h .wa-btn svg{width:18px;height:18px}
.chat-h b{font-family:var(--font-display);font-stretch:108%;font-weight:700;font-size:15px;color:var(--ink);display:block;line-height:1.1}
.chat-h .st{font-size:11.5px;color:var(--text-3);display:flex;align-items:center;gap:6px;margin-top:3px}
.chat-h .st i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(31,107,58,.15)}
.chat-h .x{display:flex;align-items:center;gap:6px;flex-shrink:0}
.chat-close{background:transparent;border:1px solid var(--line-strong);border-radius:var(--radius);width:32px;height:32px;cursor:pointer;color:var(--text-2);display:grid;place-items:center}
.chat-close:hover{border-color:var(--ink);color:var(--ink)}
.chat-log{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:10px;background:var(--paper-2)}
.msg{max-width:88%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.5;animation:msgin .25s ease;position:relative}
@keyframes msgin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg.u{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:4px}
.msg.a{align-self:flex-start;background:var(--paper);border:1px solid var(--line);color:var(--text);border-bottom-left-radius:4px}
.msg p{margin:0 0 8px}
.msg p:last-child{margin-bottom:0}
.msg .acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.msg .acts a,.msg .acts button{font-size:12.5px;font-weight:600;border:1px solid var(--line-strong);background:var(--paper);color:var(--ink);border-radius:999px;padding:6px 11px;cursor:pointer;font-family:var(--font-body);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.msg .acts a:hover,.msg .acts button:hover{border-color:var(--ink)}
.msg .acts .pri{background:var(--brand);color:#fff;border-color:var(--brand)}
.msg .acts svg{width:13px;height:13px}
.msg .cp{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.msg .cp:first-of-type{border-top:0}
.msg .cp .th{width:40px;height:40px;border-radius:6px;background:var(--paper-2);flex-shrink:0;display:grid;place-items:center;overflow:hidden}
.msg .cp .th img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:2px;opacity:0}
.msg .cp .th.has img{opacity:1}
.msg .cp .n{flex:1;min-width:0}
.msg .cp .n b{display:block;font-family:var(--font-display);font-stretch:106%;font-weight:600;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg .cp .n small{display:block;font-size:11.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg .cp .b{display:flex;gap:4px;flex-shrink:0}
.msg .cp .b a,.msg .cp .b button{width:28px;height:28px;border:1px solid var(--line-strong);border-radius:6px;background:var(--paper);display:grid;place-items:center;color:var(--ink);cursor:pointer;font-family:var(--font-body);font-size:13px;font-weight:600}
.msg .cp .b a:hover,.msg .cp .b button:hover{border-color:var(--ink)}
.msg .cp .b button[data-in="1"]{background:var(--brand);color:#fff;border-color:var(--brand)}
.msg .cp .b svg{width:13px;height:13px}
.msg .dl-list{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:4px}
.msg .dl-list a{font-size:13px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.msg.typing{padding:12px 16px}
.msg.typing span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--text-3);margin-right:4px;animation:bounce 1.1s infinite}
.msg.typing span:nth-child(2){animation-delay:.15s}
.msg.typing span:nth-child(3){animation-delay:.3s;margin-right:0}
@keyframes bounce{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-5px);opacity:1}}
.chat-sug{display:flex;gap:6px;flex-wrap:wrap;padding:8px 14px 0;background:var(--paper-2)}
.chat-sug:empty{display:none}
.chat-sug button{font-size:12.5px;border:1px solid var(--line-strong);background:var(--paper);color:var(--text-2);border-radius:999px;padding:6px 11px;cursor:pointer;font-family:var(--font-body)}
.chat-sug button:hover{border-color:var(--ink);color:var(--ink)}
.chat-in{display:flex;gap:8px;padding:12px 14px 8px;background:var(--paper-2)}
.chat-in input{flex:1;min-width:0;border-radius:999px;padding:10px 14px;font-size:14px}
.chat-in .btn{border-radius:999px}
.chat-note{margin:0;padding:0 14px 10px;font-size:11px;color:var(--text-3);background:var(--paper-2)}
.qpanel{bottom:72px}
body.has-quote .qpanel{bottom:132px}

@media (max-width:1000px){ .lib{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){
  .lib{grid-template-columns:1fr}
  .chat{right:8px;left:8px;width:auto;bottom:8px;height:min(560px,calc(100vh - 84px))}
  .cmpbar{left:12px;right:12px;transform:none;max-width:none;bottom:12px;font-size:12.5px;justify-content:space-between}
}
@media print{
  .nav,footer,.quotebar,.qpanel,.search-ov,.ed,.dock,.dock-show,.chat,.cmpbar,.cmp-ov,.hero-media,.finder,.cta-band,.principals,.map-embed,.trust{display:none!important}
  body{background:#fff;color:#000}
  .section{padding:16px 0}
  .prod,.cat,.detail .aside{break-inside:avoid;box-shadow:none}
  a{text-decoration:none}
}

/* ---------- Trust strip, solutions, process, FAQ, map ---------- */
.trust{background:var(--paper-2);color:var(--ink);border-bottom:1px solid var(--line)}
.trust-inner{display:grid;grid-template-columns:repeat(5,1fr);gap:0;max-width:var(--max);margin:0 auto;padding:0 clamp(24px,4.5vw,96px)}
.trust-inner > div{padding:18px 22px 18px 0;display:flex;flex-direction:column;gap:3px;border-left:1px solid var(--line-strong);padding-left:20px}
.trust-inner > div:first-child{border-left:0;padding-left:0}
.trust-inner b{font-family:var(--font-display);font-stretch:108%;font-weight:700;font-size:17px;letter-spacing:-.01em;line-height:1.15}
.trust-inner span{font-size:12.5px;color:var(--text-2);line-height:1.4}
.sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sol{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:24px;display:flex;flex-direction:column;gap:12px;transition:border-color .2s,transform .25s,box-shadow .25s}
.sol:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:var(--glow)}
.sol .icon{width:40px;height:40px;border-radius:8px;background:var(--paper-2);color:var(--ink);display:grid;place-items:center}
.sol .icon svg{width:22px;height:22px}
.sol h3{font-family:var(--font-display);font-stretch:106%;font-weight:600;font-size:1.08rem;margin:0;letter-spacing:-.01em;color:var(--ink)}
.sol p{margin:0;color:var(--text-2);font-size:14px;line-height:1.55;flex:1}
.sol .picks{display:flex;flex-wrap:wrap;gap:6px}
.sol .picks a{font-size:12px;color:var(--text-2);border:1px solid var(--line-strong);border-radius:999px;padding:3px 9px;text-decoration:none;background:var(--paper)}
.sol .picks a:hover{border-color:var(--ink);color:var(--ink)}
.sol .btn{align-self:flex-start}
.process{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0 28px;counter-reset:step}
.process li{display:flex;flex-direction:column;gap:14px;padding:28px 0 8px;border-top:1px solid var(--ink);position:relative}
.process .num{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--ink);width:34px;height:34px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;background:var(--paper)}
.process h3{font-family:var(--font-display);font-stretch:106%;font-weight:600;font-size:1.08rem;margin:0 0 8px;letter-spacing:-.01em;color:var(--ink)}
.process p{margin:0;color:var(--text-2);font-size:14.5px}
.faq-wrap{display:grid;grid-template-columns:minmax(260px,1fr) 2fr;gap:56px;align-items:start}
.faq-wrap > div:first-child p{color:var(--text-2);margin:14px 0 22px;max-width:none}
.faq{display:flex;flex-direction:column;border-top:1px solid var(--ink)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;font-family:var(--font-display);font-stretch:106%;font-weight:600;font-size:1.02rem;color:var(--ink);letter-spacing:-.01em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .pm{position:relative;width:22px;height:22px;border:1px solid var(--line-strong);border-radius:50%;flex-shrink:0;transition:transform .25s,border-color .2s}
.faq-item .pm::before,.faq-item .pm::after{content:"";position:absolute;background:var(--ink);left:50%;top:50%;transform:translate(-50%,-50%)}
.faq-item .pm::before{width:10px;height:1.5px}
.faq-item .pm::after{width:1.5px;height:10px;transition:opacity .2s}
.faq-item[open] .pm{transform:rotate(180deg);border-color:var(--ink)}
.faq-item[open] .pm::after{opacity:0}
.faq-item .fa{padding:0 0 20px;color:var(--text-2);font-size:14.5px;line-height:1.65;max-width:none}
.map-embed{margin-top:14px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--paper-2);aspect-ratio:16/9}
.map-embed iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(1) contrast(1.05);transition:filter .3s}
.map-embed:hover iframe{filter:none}
.map-embed[hidden],body.ext-blocked .map-embed{display:none}
.hours{margin-top:14px;border:1px solid var(--line);border-radius:8px;padding:16px 20px;display:flex;flex-direction:column;gap:4px;background:var(--paper)}
.hours b{color:var(--ink)}
.hours span{color:var(--text-2);font-size:14.5px}
.hours small{color:var(--text-3);font-size:12.5px}
.prod .links .dl.ext{background:var(--paper);color:var(--ink);border-style:dashed}
.prod .links .dl.ext:hover{background:var(--paper-2)}
.btn-ext svg{width:16px;height:16px}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .trust-inner{grid-template-columns:repeat(3,1fr);padding:6px 16px}
  .trust-inner > div{padding:12px 16px 12px 16px;border-left:0}
  .sol-grid{grid-template-columns:repeat(2,1fr)}
  .process{grid-template-columns:repeat(2,1fr)}
  .faq-wrap{grid-template-columns:1fr;gap:28px}
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .cat-grid,.prod-grid,.svc,.events{grid-template-columns:repeat(2,1fr)}
  .why{grid-template-columns:repeat(2,1fr)}
  .wall{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .brand-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid,.about-grid,.detail{grid-template-columns:minmax(0,1fr);gap:36px}
  .cta-band{flex-direction:column;align-items:flex-start}
  .section-head{flex-direction:column;align-items:flex-start;gap:18px}
}
@media (max-width:980px){
  .menu-btn{display:inline-flex}
  .nav-tools .btn{display:none}
  .search-btn span,.search-btn kbd{display:none}
  .search-btn{width:40px;padding:0;justify-content:center}
  .nav-links{display:none;position:absolute;top:70px;left:0;right:0;flex-direction:column;gap:2px;background:rgba(255,255,255,.98);border-bottom:1px solid var(--line);padding:12px 16px 16px;margin:0}
  .nav.open .nav-links{display:flex}
  .nav-links a{padding:12px 14px;font-size:16px}
}
@media (max-width:860px){
  .nav-tools{gap:6px}
  .lang button{padding:6px 7px}
  .lang button[lang]{font-size:12px}
  .brand .logo{height:40px}
  .nav-inner{gap:12px}
  .trust-inner{grid-template-columns:repeat(2,1fr)}
  .sol-grid,.process{grid-template-columns:1fr}
  .menu-btn{display:inline-flex}
  .nav-tools .btn{display:none}
  .search-btn span,.search-btn kbd{display:none}
  .search-btn{width:40px;padding:0;justify-content:center}
  .nav-links{display:none;position:absolute;top:70px;left:0;right:0;flex-direction:column;gap:2px;background:rgba(255,255,255,.98);border-bottom:1px solid var(--line);padding:12px 16px 16px;margin:0}
  .nav.open .nav-links{display:flex}
  .nav-links a{padding:12px 14px;font-size:16px}
}
@media (max-width:620px){
  .principals-inner{flex-direction:column;align-items:flex-start;gap:10px;padding:12px 16px}
  .marquee{width:100%}
  .cat-grid,.prod-grid,.why,.svc,.vm,.events{grid-template-columns:1fr}
  .wall{grid-template-columns:repeat(2,1fr)}
  .hero{padding:44px 0 48px}
  .hero-stats{gap:24px;flex-wrap:wrap}
  .section{padding:64px 0}
  .cta-band{padding:32px 26px}
  .foot-grid{grid-template-columns:1fr}
  .form{padding:22px;box-shadow:none}
  .form .row{grid-template-columns:1fr}
  .facts div{grid-template-columns:1fr;gap:4px}
  .ed-pair{grid-template-columns:1fr}
  .logo,.logo-img{height:34px}
  .nav-inner{gap:12px}
  .nav-tools{gap:8px}
  .finder{box-shadow:none}
  .quotebar .container{gap:10px}
  .quotebar .lbl{display:none}
}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none}
  h1.display em{background-size:100% 100%}
  .marquee-track{animation:none}
  .marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- Opening animation ---------- */
.intro{position:fixed;inset:0;z-index:200;background:var(--paper);color:var(--ink);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:transform .8s cubic-bezier(.7,0,.2,1),opacity .4s ease .5s}
.intro.out{transform:translateY(-100%);opacity:0;pointer-events:none}
body.intro-on{overflow:hidden}
.intro::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(180deg,rgba(17,18,20,.045) 0 1px,transparent 1px 7px);opacity:0;transition:opacity 1.2s ease .2s}
.intro.play::before{opacity:1}
.intro-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:26px;padding:24px}
.intro-mark{position:relative;width:min(560px,80vw);aspect-ratio:6136/1000}
.intro-mark svg{width:100%;height:100%;color:var(--ink);fill:var(--ink);opacity:0;transform:scale(.86);transition:opacity .5s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.intro.play .intro-mark svg{opacity:1;transform:none}
.intro-mark i{position:absolute;left:-8px;right:-8px;top:-8px;bottom:-8px;background:var(--paper);transform-origin:right;transform:scaleX(1);transition:transform 1.2s cubic-bezier(.65,0,.2,1) .25s}
.intro.play .intro-mark i{transform:scaleX(0)}
.intro-word{display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;transform:translateY(10px);transition:opacity .6s ease 1s,transform .6s cubic-bezier(.2,.7,.2,1) 1s}
.intro.play .intro-word{opacity:1;transform:none}
.intro-word .tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}
.intro-line{width:0;height:1px;background:var(--ink);opacity:.55;transition:width 1.4s cubic-bezier(.2,.7,.2,1) 1.1s}
.intro.play .intro-line{width:220px}
.intro-skip{position:absolute;right:20px;bottom:20px;background:transparent;border:1px solid var(--line-strong);color:var(--text-2);border-radius:999px;padding:8px 14px;font-size:12.5px;cursor:pointer;font-family:var(--font-body)}
.intro-skip:hover{border-color:var(--ink);color:var(--ink)}
@media (max-width:620px){ .intro-mark{width:82vw} }
@media (max-width:400px){ .brand .logo{height:30px} .nav-inner{gap:8px} .lang button{padding:6px 5px;font-size:11px} .lang button[lang]{font-size:11.5px} .search-btn{width:36px;height:36px} .menu-btn{width:36px;height:36px} }

/* ---------- Events: coming soon, news page ---------- */
.events li.soon{display:flex;flex-direction:column;gap:12px;align-items:flex-start;grid-column:1 / -1;padding:30px 28px;border-style:dashed;border-color:var(--line-strong);background:var(--paper)}
.events li.soon b{font-weight:500;color:var(--text-2);font-size:15px;max-width:none;line-height:1.5}
.badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);background:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:5px 11px}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 3px rgba(51,51,51,.18)}
.soon-card{border:1px dashed var(--line-strong);border-radius:12px;padding:44px 40px;background:var(--paper);max-width:760px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.soon-card h2{font-family:var(--font-display);font-stretch:108%;font-weight:700;font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.018em;margin:0;color:var(--ink)}
.soon-card p{margin:0;color:var(--text-2);max-width:none;font-size:1.02rem}
.soon-card .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.soon-card .btn svg{width:16px;height:16px}
.foot-social{margin-top:20px}
.foot-social a{display:inline-flex;align-items:center;gap:8px;color:var(--text-2);font-size:13.5px;border:1px solid var(--line-strong);border-radius:999px;padding:7px 12px 7px 9px;background:var(--paper);transition:border-color .2s,color .2s;margin:0 6px 6px 0}
.foot-social a:hover{color:var(--ink);border-color:var(--ink)}
.foot-social svg{width:16px;height:16px;fill:currentColor}

/* ---------- Comparison (smart matrix) ---------- */
.cmp-tools{display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--paper)}
.cmp-tools .chip{font-size:12.5px;padding:6px 12px}
.cmp-tools .chip[aria-pressed="true"]{background:var(--brand);color:#fff;border-color:var(--brand)}
.cmp-scroll{overflow:auto}
.cmp-table th.corner{vertical-align:bottom}
.cmp-table th.corner .cnt{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--text-3)}
.cmp-table thead th{position:relative;position:sticky;top:0;background:var(--paper);z-index:1}
.cmp-table thead th .rm{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-strong);background:var(--paper);color:var(--text-3);cursor:pointer;font-size:16px;line-height:1;z-index:2}
.cmp-table thead th .rm:hover{border-color:var(--warn);color:var(--warn)}
.cmp-table tbody th{text-align:left;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);font-weight:500;padding:10px 14px;vertical-align:top;width:160px;background:var(--paper-2)}
.cmp-table tr.diff td{background:#FFFDF2}
.cmp-table tr.same td{color:var(--text-2)}
.cmp-table tr.hid td{font-family:var(--font-mono);font-size:11.5px;color:var(--text-3);text-align:center;background:var(--paper-2)}
.cmp-table td .yes{color:var(--ok);font-weight:700}
.cmp-table td .desc{font-size:13px;color:var(--text-2);display:block;max-width:34ch}
.cmp-table.cols-4 th,.cmp-table.cols-4 td{min-width:180px}
@media print{ body.print-cmp > *:not(.cmp-ov){display:none!important} body.print-cmp .cmp-ov{position:static;display:block;background:#fff} body.print-cmp .cmp-box{max-height:none;box-shadow:none;border:0;width:100%} body.print-cmp .cmp-tools,body.print-cmp .cmp-table .rm,body.print-cmp .cmp-table .acts{display:none!important} }

/* ---------- v15: badges, catalogue stamp, print button ---------- */
.prod{position:relative}
.pbadge{position:absolute;top:14px;left:14px;z-index:2;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:#fff;border-radius:999px;padding:5px 9px;line-height:1;pointer-events:none}
.detail .aside{position:relative}
.detail .aside .pbadge{top:12px;left:12px}
.page-head .stamp{margin-top:14px;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--text-3);max-width:none}
.filters-row{display:flex;align-items:flex-start;gap:16px;margin-bottom:28px}
.filters-row .filters{margin-bottom:0;flex:1}
.print-btn{flex-shrink:0;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px}
.print-btn svg{width:15px;height:15px}
.print-head{display:none}
.calc-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);width:100%;font-size:13.5px;font-weight:600;color:var(--ink)}
.calc-link:hover span{text-decoration:underline;text-underline-offset:3px}

/* ---------- Loss budget calculator ---------- */
.calc-section{background:var(--paper-2);border-bottom:1px solid var(--line);padding:18px 0}
.calc-wrap{border:1px solid var(--line-strong);border-radius:10px;background:var(--paper);overflow:hidden}
.calc-wrap[open]{border-color:var(--ink);box-shadow:var(--glow)}
.calc-wrap summary{list-style:none;display:flex;align-items:center;gap:18px;padding:16px 20px;cursor:pointer}
.calc-wrap summary::-webkit-details-marker{display:none}
.calc-wrap summary:hover{background:var(--paper-2)}
.calc-wrap[open] summary{border-bottom:1px solid var(--line)}
.calc-ico{width:44px;height:44px;border-radius:10px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.calc-ico svg{width:22px;height:22px}
.calc-sum{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.calc-sum b{font-family:var(--font-display);font-stretch:108%;font-weight:700;font-size:1.1rem;letter-spacing:-.01em;color:var(--ink)}
.calc-sum small{font-size:13.5px;color:var(--text-2);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.calc-tog{flex-shrink:0;font-size:13.5px;font-weight:600;color:var(--ink);border:1px solid var(--ink);border-radius:999px;padding:8px 14px;white-space:nowrap}
.calc-wrap .close-l{display:none}
.calc-wrap[open] .open-l{display:none}
.calc-wrap[open] .close-l{display:inline}
.calc{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:start;padding:22px}
.more-bar{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:26px;padding:16px;border:1px dashed var(--line-strong);border-radius:10px;font-size:13.5px;color:var(--text-2)}
.more-bar[hidden]{display:none}
.more-bar span{margin-right:8px}
.calc-form{background:var(--paper-2);border:1px solid var(--line);border-radius:8px;padding:22px}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.calc-grid .field{margin-bottom:0}
.calc-form .hint{font-size:12px;color:var(--text-3);margin:16px 0 0;line-height:1.5}
.calc-out{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:24px}
.calc-kpis{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:16px}
.calc-kpis .kpi{border:1px solid var(--line);border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;min-width:0}
.calc-kpis .kpi span{font-size:11.5px;color:var(--text-3);line-height:1.3}
.calc-kpis .kpi b{font-family:var(--font-display);font-stretch:108%;font-weight:700;font-size:1.35rem;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.calc-kpis .kpi.main{background:var(--ink);color:#fff;border-color:var(--ink)}
.calc-kpis .kpi.main span{color:rgba(255,255,255,.7)}
.calc-kpis .kpi.main b{color:#fff}
.calc-break{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:0;font-size:13.5px}
.calc-break li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line);color:var(--text-2)}
.calc-break li b{font-family:var(--font-mono);font-weight:500;color:var(--ink);white-space:nowrap}
.calc-out h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin:0 0 4px;font-weight:500}
.calc-out .empty{color:var(--text-3);font-size:14px;padding:8px 0;border:0;text-align:left;margin:0}
.calc-rack{font-size:13px;color:var(--text-2);margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line)}
.calc-rack a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.calc-out .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

/* ---------- Warranty / service form, marketplace, video ---------- */
.wr-steps{font-size:14.5px;color:var(--text-2);border-left:2px solid var(--ink);padding-left:14px;margin-top:18px}
#serviceSection .eyebrow{margin-bottom:0}
#serviceSection .title{margin:10px 0 12px}
.marketplace{margin-top:22px;border:1px solid var(--line);border-radius:8px;padding:16px 18px;background:var(--paper-2)}
.marketplace[hidden]{display:none}
.marketplace b{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);font-weight:500;margin-bottom:10px}
.mp-links{display:flex;gap:8px;flex-wrap:wrap}
.mp-links a svg,.foot-social .mp svg{width:14px;height:14px}
.video{margin:4px 0 26px}
.video h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin:0 0 10px;font-weight:500}
.video .frame{position:relative;aspect-ratio:16/9;background:var(--paper-3);border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.video .frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video .ext{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-2);margin-top:8px}
.video .ext svg{width:13px;height:13px}
body.ext-blocked .video{display:none}
@media (max-width:900px){ .calc{grid-template-columns:1fr} .calc-kpis{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .filters-row{flex-direction:column} .calc-grid{grid-template-columns:1fr} .calc-kpis{grid-template-columns:1fr} .calc-form{padding:18px} .calc{padding:14px;gap:16px} .calc-wrap summary{padding:14px 14px;gap:12px;flex-wrap:wrap} .calc-sum small{display:none} .calc-sum b{font-size:1rem} .calc-tog{padding:8px 11px;font-size:12.5px;width:100%;text-align:center} .calc-ico{width:38px;height:38px} .more-bar span{width:100%;text-align:center;margin:0} }

/* ---------- Printable catalogue: body.print-cat shows only the product list with a letterhead ---------- */
@media print{
  body.print-cat .page-head,body.print-cat .filters-row,body.print-cat .note,body.print-cat .calc-section,body.print-cat .more-bar,body.print-cat .section.alt,body.print-cat .brand-grid,body.print-cat .intro,body.print-cat [data-view="produk"] .section-head{display:none!important}
  body.print-cat .print-head{display:flex;gap:18px;align-items:center;border-bottom:2px solid #000;padding:0 0 12px;margin:0 0 16px;font-size:11px;line-height:1.5}
  body.print-cat .print-head .logo{height:36px;width:auto}
  body.print-cat .print-head b{font-size:13px}
  body.print-cat .prod-grid{display:block}
  body.print-cat .prod{display:grid;grid-template-columns:78px 1fr;grid-template-areas:"img brand" "img name" "img chips" "img desc" "img foot";column-gap:14px;row-gap:3px;padding:10px 0;border:0;border-bottom:1px solid #bbb;border-radius:0;box-shadow:none;transform:none!important;opacity:1!important;page-break-inside:avoid}
  body.print-cat .prod .pimg{grid-area:img;height:72px;width:78px;margin:0;border:0;background:#fff}
  body.print-cat .prod .pimg img{max-height:72px}
  body.print-cat .prod .brand{grid-area:brand;font-size:9.5px}
  body.print-cat .prod h3{grid-area:name;font-size:12.5px}
  body.print-cat .prod .chips{grid-area:chips;margin:0;gap:4px}
  body.print-cat .prod .chips li{font-size:9.5px;padding:2px 6px}
  body.print-cat .prod p{grid-area:desc;font-size:10.5px;line-height:1.4}
  body.print-cat .prod .foot{grid-area:foot;border:0;padding:0;margin:0;font-size:10px}
  body.print-cat .prod .foot .links .cmp,body.print-cat .prod .foot .links .add,body.print-cat .prod .lk a,body.print-cat .pbadge{display:none!important}
  body.print-cat .prod .links .dl{background:none;color:#000;border:0;padding:0;font-size:10px;font-weight:400}
  body.print-cat .prod .links .dl svg{display:none}
  body.print-cat .prod .links .dl::after{content:" " attr(href);font-family:var(--font-mono);font-size:9px;color:#333;word-break:break-all}
  body.print-cat .prod .links .dl.req::after{content:""}
}

/* Grid tracks must never grow past the viewport because of long chips or wide form controls. */
.prod-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.prod,.calc-form,.calc-out,.calc-grid .field,.field{min-width:0}
.calc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.calc-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
.calc{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
input,select,textarea{min-width:0;max-width:100%}
.lib{grid-template-columns:repeat(3,minmax(0,1fr))}
.lib > div{min-width:0}
.lib li a span svg{width:12px;height:12px;vertical-align:-2px;flex-shrink:0}
.lib ul{grid-template-columns:minmax(0,1fr)}
.lib li,.lib li a{min-width:0}
.lib li a span:first-child{min-width:0}
.lib li a span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:1;min-width:0;max-width:48%;display:inline-flex;align-items:center;gap:4px}
.wall{grid-template-columns:repeat(4,minmax(0,1fr))}
.wall > div{min-width:0}
.wall .cl img{max-width:100%}
@media (min-width:981px) and (max-width:1440px){ .search-btn span,.search-btn kbd{display:none} .search-btn{padding:0;width:40px;justify-content:center} .nav-links a,.dd-btn{padding:8px 9px;font-size:14px} .nav-inner{gap:14px} .nav-links{gap:0} .brand .logo{height:42px} }
@media (min-width:981px) and (max-width:1180px){ .nav-tools > .btn-primary{display:none} }
@media (min-width:981px) and (max-width:1070px){ .nav-links a,.dd-btn{padding:8px 6px;font-size:13.5px} .nav-inner{gap:10px} .nav-tools{gap:8px} .brand .logo{height:38px} }
@media (max-width:1000px){ .lib{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .lib{grid-template-columns:minmax(0,1fr)} }
@media (max-width:1000px){ .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .wall{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:620px){ .wall{grid-template-columns:repeat(2,minmax(0,1fr))} .wall > div{padding:18px 12px} .wall .cl img{max-width:130px} #homeWall{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){ .calc{grid-template-columns:minmax(0,1fr)} .calc-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .prod-grid,.calc-grid,.calc-kpis{grid-template-columns:minmax(0,1fr)} }

/* ---------- v16: hero with background video / poster (monochrome, dark shade) ---------- */
.hero-media{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;overflow:hidden}
.hero-media[hidden]{display:none}
.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease;filter:saturate(.7) contrast(1.03)}
.hero-media.playing video{opacity:1}
/* copy sits on the left over a white veil; the right half stays clear so the video itself is visible */
.hero-media .hero-shade{position:absolute;inset:0;background:radial-gradient(ellipse 62% 78% at 50% 48%,rgba(255,255,255,.9) 0%,rgba(255,255,255,.84) 55%,rgba(255,255,255,.55) 100%),linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.45))}
.hero.has-media{background:#fff}
.hero-grid.hero-solo{grid-template-columns:minmax(0,1fr)}
.hero-solo .hero-copy{max-width:820px;margin:0 auto;text-align:center}
.hero-solo h1.display{font-size:clamp(2.2rem,3.6vw,3.4rem);max-width:none;margin-left:auto;margin-right:auto}

.hero.has-media .hero-solo{min-height:520px;align-items:center}
@media (max-width:860px){ .hero-media .hero-shade{background:linear-gradient(180deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.9) 70%,rgba(255,255,255,.7) 100%)} .hero.has-media .hero-solo{min-height:0} }

/* ---------- Buying guides ---------- */
.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.guide{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:26px 28px;display:flex;flex-direction:column;gap:14px;min-width:0}
.guide .gh{display:flex;align-items:center;gap:14px}
.guide .icon{width:44px;height:44px;border-radius:10px;background:var(--ink);color:#fff;display:grid;place-items:center;flex-shrink:0}
.guide .icon svg{width:22px;height:22px}
.guide h3{margin:0;font-family:var(--font-display);font-stretch:108%;font-weight:700;font-size:1.22rem;letter-spacing:-.015em;color:var(--ink)}
.guide .tips{margin:0;padding:0 0 0 0;list-style:none;counter-reset:tip;display:grid;gap:10px}
.guide .tips li{position:relative;padding-left:34px;font-size:14.5px;color:var(--text-2);line-height:1.55}
.guide .tips li::before{counter-increment:tip;content:counter(tip);position:absolute;left:0;top:1px;width:22px;height:22px;border:1px solid var(--line-strong);border-radius:50%;font-family:var(--font-mono);font-size:11px;display:grid;place-items:center;color:var(--ink)}
.guide .gp{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding-top:12px;border-top:1px solid var(--line);font-size:13px}
.guide .gp span{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-right:4px}
.guide .gp a{border:1px solid var(--line-strong);border-radius:999px;padding:4px 10px;color:var(--ink);background:var(--paper-2)}
.guide .gp a:hover{border-color:var(--ink)}
.guide .ask{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong);align-self:flex-start}
.guide .ask svg{width:15px;height:15px}
.guide .ask:hover{text-decoration-color:var(--ink)}
@media (max-width:860px){ .guide-grid{grid-template-columns:minmax(0,1fr)} .guide{padding:22px} }

/* ---------- Vision & mission band (About page). v96 Model 1: ivory with graphite type, the SSK mark as faint line art
   (31-v83-aesthetic.css); the commitment numbers are graphite figures like every big figure ---------- */
.vm-band{background:var(--ivory);color:var(--text);padding:96px 0 88px;position:relative;overflow:hidden}
.vm-band .container{position:relative}
.vm-lead{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin:34px 0 64px}
.vm-item .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);display:block;margin-bottom:18px}
.vm-item .big{font-family:var(--font-display);font-stretch:108%;font-weight:600;font-size:clamp(1.45rem,2.4vw,2.05rem);line-height:1.22;letter-spacing:-.018em;margin:0;text-wrap:balance;color:var(--ink)}
.vm-commit-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-top:1px solid var(--rule-2);padding-top:26px;margin-bottom:26px}
.vm-commit-head .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.vm-commit-head .since{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--text-3)}
.vm-commit{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.vm-commit li{display:flex;flex-direction:column;gap:12px;color:var(--text-2)}
.vm-commit .num{font-family:var(--font-display);font-stretch:110%;font-weight:700;font-size:2rem;letter-spacing:-.03em;color:var(--fg);line-height:1}
.vm-commit h3{margin:0;font-family:var(--font-display);font-stretch:106%;font-weight:600;font-size:1.05rem;color:var(--ink);letter-spacing:-.01em;line-height:1.3}
.vm-commit p{margin:0;font-size:14px;color:var(--text-2);line-height:1.6}
@media (max-width:900px){ .vm-lead{grid-template-columns:1fr;gap:34px} .vm-commit{grid-template-columns:repeat(2,minmax(0,1fr))} .vm-band{padding:72px 0 64px} }
@media (max-width:560px){ .vm-commit{grid-template-columns:minmax(0,1fr)} }

/* ---------- Brand wall on the products page: logos only, quiet boxes ---------- */
.brand-grid{gap:10px;background:transparent;border:0;border-radius:0;overflow:visible;grid-template-columns:repeat(4,minmax(0,1fr))}
.brand-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:28px 18px 22px;border:1px solid rgba(17,18,20,.07);border-radius:12px;background:var(--paper);min-height:140px;transition:border-color .2s,box-shadow .25s,transform .25s}
.brand-cell:hover{border-color:rgba(17,18,20,.28);box-shadow:var(--glow);transform:translateY(-2px)}
.brand-cell .bl{height:54px;margin:0;justify-content:center}
.brand-cell .bl img{max-height:54px;max-width:180px;opacity:.95;transition:opacity .25s}
.brand-cell:hover .bl img{opacity:1}
.brand-cell b{display:none}
.brand-cell .bl:not(.has) + b{display:block;margin:0 0 4px}
.brand-cell .tag{display:none}
.brand-cell .cnt{font-size:12px;color:var(--text-3)}
@media (max-width:1000px){ .brand-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:620px){ .brand-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .brand-cell{padding:20px 12px;min-height:110px} .brand-cell .bl img{max-width:120px} }

/* ---------- Compare v2 & spec tables ---------- */
.cmp-table td .best{font-weight:600;color:var(--ink)}
.cmp-table .bm,.cmp-legend .bm{font-style:normal;color:var(--ok);font-size:9px;margin-left:6px;vertical-align:middle}
.cmp-legend{margin-left:auto;font-size:12px;color:var(--text-3);display:inline-flex;align-items:center;gap:4px}
.cmp-note{font-size:12.5px;color:var(--text-3);margin:10px 0 0;padding:0 4px}
.cmp-note.warn{color:var(--warn);margin:0 0 8px}
.cmp-similar{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.cmp-similar b{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);font-weight:500;margin-bottom:8px}
.cmp-similar .sim{display:flex;flex-wrap:wrap;gap:6px}
.cmp-similar .chip{font-size:12.5px;padding:6px 11px}
.spec-table{margin:0 0 26px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper)}
.spec-table h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin:0;padding:12px 16px;border-bottom:1px solid var(--line);font-weight:500;background:var(--paper-2)}
.spec-table table{width:100%;border-collapse:collapse;font-size:14px}
.spec-table th{text-align:left;font-weight:500;color:var(--text-3);padding:9px 16px;border-top:1px solid var(--line);width:38%;vertical-align:top;font-size:13px}
.spec-table td{padding:9px 16px;border-top:1px solid var(--line);color:var(--text);vertical-align:top}
.spec-table tr:first-child th,.spec-table tr:first-child td{border-top:0}
.spec-table .src{display:inline-flex;align-items:center;gap:6px;margin:12px 16px 4px;font-size:12.5px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.spec-table .src svg{width:13px;height:13px}
.spec-table .note{margin:6px 16px 14px;font-size:12px;color:var(--text-3)}
.sol-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.conv{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--text-2)}
.conv .conv-t{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);width:100%}
.conv label{display:inline-flex;align-items:center;gap:6px}
.conv input{width:110px;padding:7px 9px;font-size:13.5px}
.conv .eq{color:var(--text-3)}
.form-status{margin:12px 0 0;font-size:13.5px;color:var(--text-2);padding:10px 12px;border-radius:var(--radius);background:var(--paper-2);border:1px solid var(--line)}
.form-status.ok{color:var(--ok);border-color:rgba(31,107,58,.35)}
.form-status.err{color:var(--warn);border-color:rgba(178,58,30,.35)}
.form-status.info{color:var(--text);border-color:var(--ink);background:var(--paper)}
.form-status[hidden]{display:none}

/* typographic tile for "berbagai merek" passive products */
.pimg.ctile{background:var(--paper-2);border:1px solid var(--line);place-items:center}
.pimg.ctile .ct{display:grid;gap:8px;text-align:center;padding:12px}
.pimg.ctile .ct b{font-family:var(--font-display);font-stretch:112%;font-weight:800;font-size:clamp(24px,3.4vw,38px);line-height:1;letter-spacing:.01em;color:var(--ink)}
.pimg.ctile .ct span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.detail .pimg.ctile .ct b{font-size:clamp(30px,4vw,52px)}

/* calibration reminder */
.ics-row{display:grid;gap:8px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.ics-row .btn{justify-self:start;white-space:normal;text-align:left;line-height:1.3}
.ics-row .hint{margin:0}

/* honeypot field for bots: never shown to people */
.form .hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form{position:relative}

/* wide screens: use the width instead of leaving empty margins */
@media (min-width:1360px){
  .prod-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .wall{grid-template-columns:repeat(5,minmax(0,1fr))}
  .hero-grid{gap:72px}
  .section{padding:104px 0}
  .lead{font-size:1.16rem;max-width:76ch}
  .prose p{font-size:1.06rem;max-width:none}
}
@media (min-width:1700px){
  :root{--max:1600px}
  html{font-size:17px}
}

/* ---------- v19: EXFO style information architecture ---------- */
/* navigation: "Perusahaan" dropdown, mobile only "Beranda" */
.nav-dd{position:relative;display:flex;align-items:center}
.dd-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:0;background:transparent;border-radius:var(--radius);font-size:14.5px;font-weight:500;color:var(--text-2);cursor:pointer;font-family:var(--font-body);transition:color .15s,background .15s}
.dd-btn svg{transition:transform .2s}
.dd-btn:hover,.nav-dd.open .dd-btn{color:var(--ink)}
.nav-dd.current .dd-btn{color:var(--ink);background:var(--paper-2)}
.nav-dd.open .dd-btn svg{transform:rotate(180deg)}
.dd-menu{position:absolute;top:calc(100% + 10px);left:0;min-width:200px;background:var(--paper);border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 22px 44px -22px rgba(17,18,20,.4);padding:8px;display:none;flex-direction:column;gap:2px;z-index:60}
.dd-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-dd.open .dd-menu{display:flex}
@media (hover:hover) and (min-width:981px){ .nav-dd:hover .dd-menu,.nav-dd:focus-within .dd-menu{display:flex} .nav-dd:hover .dd-btn svg{transform:rotate(180deg)} }
.nav-links .dd-menu a{padding:10px 12px;font-size:14px;border-radius:6px}
.nav-links .dd-menu a:hover{background:var(--paper-2)}
@media (max-width:980px){
  .nav-dd{flex-direction:column;align-items:stretch}
  .dd-btn{justify-content:space-between;padding:12px 14px;font-size:16px;width:100%}
  .dd-menu{position:static;border:0;box-shadow:none;padding:0 0 4px 14px;min-width:0;display:none}
  .nav-dd.open .dd-menu{display:flex}
  .nav-links .dd-menu a{font-size:15px}
}

/* instrument finder: its own section under the brand strip, questions across, results beneath */
.finder-section{background:var(--paper-2);border-bottom:1px solid var(--line);padding:80px 0}
.finder.finder-wide{background:var(--paper);border:1px solid var(--line-strong);border-radius:12px;box-shadow:none;backdrop-filter:none}
.finder-wide .finder-body{padding:0}
.finder-wide .fqs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 32px;padding:26px 28px 24px;border-bottom:1px solid var(--line)}
.finder-wide .fq{margin:0;padding:0;border:0}
.finder-wide .fq .ql{margin-bottom:10px}
.finder-wide .fout{padding:22px 28px 26px;display:grid;gap:14px}
.finder-wide .fresult{border-top:0;margin:0;padding:0}
.finder-wide .fresult .recs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px}
.finder-wide .fresult .empty{padding:2px 0}
.finder-wide .fask{margin-top:0;padding-top:14px}
.finder-wide .fask .row{max-width:680px}
.finder-wide .calc-link{align-self:flex-start;justify-self:start}
@media (max-width:860px){ .finder-wide .fqs{grid-template-columns:minmax(0,1fr);gap:18px;padding:20px} .finder-wide .fout{padding:18px 20px 22px} .finder-wide .fresult .recs{grid-template-columns:minmax(0,1fr)} .finder-section{padding:56px 0} }

/* solutions: segment cards, page and detail */
.sol h3 a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.sol-page{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sol.big{padding:28px}
.sol.big h3{font-size:1.18rem}
.sol.big p{font-size:14.5px}
.sol-detail .sol-intro{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 26px;align-items:start;padding:32px 34px;border:1px solid var(--line);border-radius:14px;background:var(--paper-2)}
.sol-intro .icon{width:56px;height:56px;border-radius:12px;background:var(--ink);color:#fff;display:grid;place-items:center;grid-row:span 2}
.sol-intro .icon svg{width:28px;height:28px}
.sol-intro p{margin:0;font-size:1.12rem;line-height:1.65;color:var(--text);max-width:none}
.sol-intro .actions{display:flex;flex-wrap:wrap;gap:10px}
.sol-others{margin-top:56px;padding-top:26px;border-top:1px solid var(--line)}
.sol-others h3{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin:0 0 14px;font-weight:500}
.sol-links{display:flex;flex-wrap:wrap;gap:8px}
.sol-links a{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-strong);border-radius:999px;padding:8px 14px 8px 10px;font-size:13.5px;font-weight:500;color:var(--ink);background:var(--paper);transition:border-color .15s}
.sol-links a:hover{border-color:var(--ink)}
.sol-links .icon{width:22px;height:22px;border-radius:50%;background:var(--paper-2);display:grid;place-items:center}
.sol-links .icon svg{width:13px;height:13px}
@media (max-width:1000px){ .sol-page{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .sol-page{grid-template-columns:minmax(0,1fr)} .sol-detail .sol-intro{grid-template-columns:minmax(0,1fr);padding:22px} .sol-intro .icon{grid-row:auto} .sol-intro p{font-size:1rem} .sol-intro .actions .btn{white-space:normal;text-align:left;line-height:1.3} }

/* resources: tool cards, glossary */
.tool-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tool{display:flex;flex-direction:column;gap:12px;padding:26px 24px;border:1px solid var(--line);border-radius:12px;background:var(--paper);transition:border-color .2s,transform .25s,box-shadow .25s;min-width:0}
.tool:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:var(--glow)}
.tool .icon{width:42px;height:42px;border-radius:9px;background:var(--paper-2);color:var(--ink);display:grid;place-items:center}
.tool .icon svg{width:22px;height:22px}
.tool h3{margin:0;font-family:var(--font-display);font-stretch:106%;font-weight:600;font-size:1.08rem;letter-spacing:-.01em;color:var(--ink)}
.tool p{margin:0;font-size:14px;color:var(--text-2);line-height:1.55;flex:1}
.tool .go{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink)}
.tool .go svg{width:14px;height:14px;transition:transform .2s}
.tool:hover .go svg{transform:translateX(3px)}
.gloss-search{flex-shrink:0}
.gloss-search input{width:min(380px,100%);padding:11px 16px;border-radius:999px}
@media (max-width:1000px){ .gloss-search{width:100%} }
.gloss{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;border-top:1px solid var(--ink)}
.gterm{border-bottom:1px solid var(--line);min-width:0}
.gterm summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 12px;align-items:baseline;padding:16px 0}
.gterm summary::-webkit-details-marker{display:none}
.gterm summary b{font-family:var(--font-display);font-stretch:106%;font-weight:600;font-size:1.05rem;color:var(--ink);letter-spacing:-.01em}
.gterm summary span{font-size:13px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gterm .pm{position:relative;width:22px;height:22px;border:1px solid var(--line-strong);border-radius:50%;flex-shrink:0;transition:transform .25s,border-color .2s;align-self:center;display:block}
.gterm .pm::before,.gterm .pm::after{content:"";position:absolute;background:var(--ink);left:50%;top:50%;transform:translate(-50%,-50%)}
.gterm .pm::before{width:10px;height:1.5px}
.gterm .pm::after{width:1.5px;height:10px;transition:opacity .2s}
.gterm[open] .pm{transform:rotate(180deg);border-color:var(--ink)}
.gterm[open] .pm::after{opacity:0}
.gterm .gd{padding:0 0 18px}
.gterm .gd p{margin:0 0 10px;font-size:14.5px;color:var(--text-2);line-height:1.65}
.gterm .gd a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.gterm .gd a svg{width:13px;height:13px}
@media (max-width:1000px){ .tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:860px){ .gloss{grid-template-columns:minmax(0,1fr)} .gterm summary{grid-template-columns:minmax(0,1fr) auto} .gterm summary span{grid-column:1;white-space:normal} .gterm .pm{grid-column:2;grid-row:1} }
@media (max-width:620px){ .tool-grid{grid-template-columns:minmax(0,1fr)} }

/* support page */
.sup-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sup-card{display:flex;flex-direction:column;gap:12px;padding:26px 24px;border:1px solid var(--line);border-radius:12px;background:var(--paper);min-width:0}
.sup-card .icon{width:42px;height:42px;border-radius:9px;background:var(--ink);color:#fff;display:grid;place-items:center}
.sup-card .icon svg{width:22px;height:22px}
.sup-card h3{margin:0;font-family:var(--font-display);font-stretch:106%;font-weight:600;font-size:1.08rem;letter-spacing:-.01em;color:var(--ink)}
.sup-card p{margin:0;font-size:14px;color:var(--text-2);line-height:1.55}
.sup-note{font-size:13.5px;color:var(--text-3);margin:14px 0 0;max-width:none}
@media (max-width:1000px){ .sup-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .sup-grid{grid-template-columns:minmax(0,1fr)} }

/* legal pages */
.legal-grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:64px;align-items:start}
.legal-nav{position:sticky;top:90px;display:grid;gap:4px}
.legal-nav a{padding:9px 12px;border-radius:6px;font-size:14px;color:var(--text-2)}
.legal-nav a:hover{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.legal-nav a[aria-current="page"]{background:var(--paper-2);color:var(--ink);font-weight:600}
.legal-nav .upd{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin:18px 12px 0}
.legal section{padding:26px 0 14px;border-top:1px solid var(--line)}
.legal section:first-child{border-top:0;padding-top:0}
.legal h2{font-family:var(--font-display);font-stretch:106%;font-weight:600;font-size:1.28rem;letter-spacing:-.012em;margin:0 0 12px;display:flex;align-items:baseline;gap:14px;color:var(--ink)}
.legal h2 .num{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--text-3);font-weight:500}
.legal p{margin:0 0 12px;color:var(--text-2);line-height:1.7;max-width:none;font-size:15px}
.legal .legal-contact{margin-top:28px;padding-top:20px;border-top:1px solid var(--line-strong);color:var(--text);font-size:14.5px}
.legal .legal-contact a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){ .legal-grid{grid-template-columns:minmax(0,1fr);gap:28px} .legal-nav{position:static;grid-template-columns:repeat(3,auto);justify-content:start;gap:6px} .legal-nav .upd{grid-column:1/-1;margin:8px 0 0} }

/* footer: legal links, dynamic copyright */
.foot-h2{margin-top:24px!important}
.copyright{align-items:center}
.foot-legal{display:flex;flex-wrap:wrap;gap:6px 20px}
.foot-legal a,.foot-legal button{font:inherit;font-size:13px;color:var(--text-3);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.foot-legal a:hover,.foot-legal button:hover{color:var(--ink);text-decoration-color:var(--ink)}
.foot-legal button[hidden]{display:none}

/* cookie consent bar */
.cookie-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:70;display:flex;justify-content:center;pointer-events:none}
.cookie-bar[hidden]{display:none}
.cookie-in{pointer-events:auto;max-width:820px;width:100%;background:var(--ink);color:#fff;border-radius:14px;padding:18px 22px;display:flex;gap:24px;align-items:center;box-shadow:0 30px 60px -24px rgba(17,18,20,.7);animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.cookie-txt b{font-family:var(--font-display);font-stretch:108%;font-weight:700;font-size:15px;display:block}
.cookie-txt p{margin:4px 0 0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.78)}
.cookie-txt a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.cookie-acts{display:flex;gap:8px;flex-shrink:0}
.cookie-bar .btn-primary{background:#fff;color:var(--ink);border-color:#fff}
.cookie-bar .btn-primary:hover{background:var(--paper-3)}
.cookie-bar .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.cookie-bar .btn-ghost:hover{border-color:#fff}
@media (max-width:620px){ .cookie-in{flex-direction:column;align-items:stretch;padding:16px} .cookie-acts{justify-content:flex-end} }

/* forms: privacy line, reCAPTCHA notice (badge hidden, text shown instead as Google allows) */
.form-legal{margin:12px 0 0;font-size:12px;color:var(--text-3);line-height:1.5}
.form-legal a{text-decoration:underline;text-underline-offset:3px}
.form-legal[hidden]{display:none}
.grecaptcha-badge{visibility:hidden}
@media print{ .cookie-bar,.finder-section,.foot-legal{display:none!important} }
.finder-wide .recs .rec:nth-child(2){border-top:0}
@media (max-width:860px){ .finder-wide .recs .rec:nth-child(2){border-top:1px solid var(--line)} }
@media (max-width:340px){ .brand .logo{height:26px} .nav-tools{gap:5px} .lang button{padding:6px 4px} .search-btn,.menu-btn{width:34px;height:34px} .container{padding:0 16px} }

/* v20: hero copy in three short paragraphs, video shifted so the engineer sits in the clear right half */
.hero .lead p{margin:0 0 14px}
.hero .lead p:last-child{margin-bottom:0}
.hero-solo .lead{max-width:82ch;font-size:1.04rem;line-height:1.62;margin-left:auto;margin-right:auto}
.hero-solo .hero-cta{justify-content:center}
.hero-solo .hero-stats{justify-content:center;gap:56px}
.hero-solo .stat{text-align:center}
.hero-media video{left:0;width:100%;height:100%;object-position:50% 40%}
@media (max-width:1100px){ .hero-media .hero-shade{background:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.86) 70%,rgba(255,255,255,.7) 100%)} }
/* CTA band after a grey section: breathing room instead of sitting on the border */
.section.cta-sec{padding:72px 0 88px}
.chat-note{display:none}

.dl dd .sub-inline{font-size:12px;color:var(--text-3);margin-left:6px}

/* thank you panel after a form is sent (no mail app, no reference box) */
.form.sent > :not(.form-thanks){display:none}
.form-thanks{display:grid;gap:12px;justify-items:start;padding:8px 4px 4px}
.form-thanks .ok-mark{width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center}
.form-thanks .ok-mark svg{width:22px;height:22px}
.form-thanks h3{margin:4px 0 0;font-family:var(--font-display);font-stretch:106%;font-weight:600;font-size:1.25rem;letter-spacing:-.01em;color:var(--ink)}
.form-thanks p{margin:0;color:var(--text-2);font-size:15px;line-height:1.6;max-width:none}
.form-thanks p.note{font-size:12.5px;color:var(--text-3)}
.form-thanks p.ref{font-family:var(--font-mono);font-size:12.5px;color:var(--text-2);letter-spacing:.02em}
.form-thanks p.ref b{color:var(--ink);font-weight:600}
.form-status .detail{display:block;margin-top:4px;font-size:12.5px;color:var(--text-3)}
.form-status .rid{display:block;margin-top:4px;font-family:var(--font-mono);font-size:10.5px;color:var(--text-3)}
#captchaHost{position:fixed;left:-9999px;bottom:0;width:1px;height:1px;overflow:hidden}
.form-thanks .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.form-status a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;font-weight:600}

/* ---------- TKDN: the TKDN page cards (v96: their values are a data sheet, 35-tkdn-bento.css), certificate tables ---------- */
.tkdn-sec{border-top:1px solid var(--line)}
.tkdn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tkdn-card{border:1px solid var(--ink);border-radius:10px;background:var(--paper);padding:26px 28px 24px;display:flex;flex-direction:column;gap:14px;box-shadow:8px 8px 0 var(--paper-3);min-width:0}
.tkdn-card .tk-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.tkdn-card .tk-brand{font-family:var(--font-display);font-stretch:110%;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;background:var(--ink);color:#fff;padding:5px 9px;border-radius:4px;line-height:1}
.tkdn-card .tk-note{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.tkdn-card h3{font-family:var(--font-display);font-stretch:106%;font-weight:600;font-size:1.22rem;letter-spacing:-.012em;margin:0;line-height:1.25}
.tkdn-card h3 a{color:var(--ink)}
.tk-links{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:auto}
.tkdn-prose{max-width:860px}
.tkdn-prose section{padding:26px 0 14px;border-top:1px solid var(--line)}
.tkdn-prose section:first-child{border-top:0;padding-top:0}
.tkdn-prose h2{font-family:var(--font-display);font-stretch:106%;font-weight:600;font-size:1.28rem;letter-spacing:-.012em;margin:0 0 12px;display:flex;align-items:baseline;gap:14px;color:var(--ink)}
.tkdn-prose h2 .num{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--text-3);font-weight:500}
.tkdn-prose p{margin:0 0 12px;color:var(--text-2);line-height:1.7;max-width:none;font-size:15px}
.tkdn-table{margin:0 0 26px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper)}
.tkdn-prose .tkdn-table{margin-top:18px}
.tkdn-table h3,.tkdn-table h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin:0;padding:12px 16px;border-bottom:1px solid var(--line);font-weight:500;background:var(--paper-2)}
.tkdn-table h3{font-family:var(--font-display);font-stretch:106%;text-transform:none;letter-spacing:-.01em;font-size:1rem;font-weight:600;color:var(--ink)}
.tkdn-table .tk-scroll{overflow-x:auto}
.tkdn-table table{width:100%;border-collapse:collapse;font-size:14px;min-width:420px}
.tkdn-table th{text-align:left;font-weight:500;color:var(--text-3);padding:9px 16px;border-bottom:1px solid var(--line);font-size:12.5px;white-space:nowrap}
.tkdn-table td{padding:10px 16px;border-top:1px solid var(--line);color:var(--text);vertical-align:top;font-variant-numeric:tabular-nums}
.tkdn-table td b{font-family:var(--font-display);font-stretch:108%;font-weight:700;font-size:1.05rem;color:var(--ink)}
.tkdn-table tbody tr:first-child td{border-top:0}
.tkdn-table .tk-links{padding:12px 16px 16px;gap:16px}
.tkdn-table .src{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.tkdn-table .src svg{width:13px;height:13px}
.tkdn-table .btn svg{width:14px;height:14px}
@media (max-width:820px){.tkdn-grid{grid-template-columns:1fr}.tkdn-card{padding:22px 20px 20px;box-shadow:6px 6px 0 var(--paper-3)}}

/* ---------- Product photo gallery (v30): arrows, thumbnails, swipe, lightbox ---------- */
.gal{margin:0 0 22px}
.gal .gal-view{position:relative;outline-offset:4px;touch-action:pan-y}
.gal .gal-view .pimg img,.lb img{-webkit-user-drag:none;user-select:none}
.gal .gal-view .pimg{margin:0;background:#fff;border:1px solid var(--line)}
.gal .gal-view .pimg img{cursor:zoom-in;transition:opacity .22s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.gal .gal-view .pimg img.swap{opacity:0}
.gal-btn{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:1px solid var(--line-strong);background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;cursor:pointer;z-index:3;transition:border-color .15s,background .15s,opacity .2s;box-shadow:0 4px 14px -6px rgba(17,18,20,.35)}
.gal-btn svg{width:18px;height:18px}
.gal-btn:hover{border-color:var(--ink);background:#fff}
.gal-btn.prev{left:10px}.gal-btn.next{right:10px}
.gal-count{position:absolute;left:12px;bottom:10px;z-index:3;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:999px;padding:3px 9px;color:var(--text-2);pointer-events:none}
.gal-count b{color:var(--ink);font-weight:600}
.gal-count span{margin:0 2px;color:var(--text-3)}
.gal-zoom{position:absolute;right:12px;bottom:10px;z-index:3;width:32px;height:32px;border-radius:6px;border:1px solid var(--line);background:rgba(255,255,255,.92);color:var(--text-2);display:grid;place-items:center;cursor:pointer}
.gal-zoom svg{width:16px;height:16px}
.gal-zoom:hover{color:var(--ink);border-color:var(--ink)}
.gal-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none;padding:2px}
.gal-thumbs::-webkit-scrollbar{display:none}
.gal-th{flex:0 0 64px;height:52px;padding:0;border:1px solid var(--line);border-radius:6px;background:#fff;cursor:pointer;overflow:hidden;opacity:.7;transition:opacity .15s,border-color .15s}
.gal-th img{width:100%;height:100%;object-fit:contain;padding:4px;mix-blend-mode:multiply;display:block}
.gal-th:hover{opacity:1}
.gal-th.on{opacity:1;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.pcount{position:absolute;top:14px;right:14px;z-index:2;display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:11px;background:rgba(255,255,255,.92);border:1px solid var(--line);color:var(--text-2);border-radius:999px;padding:3px 8px;line-height:1;pointer-events:none}
.pcount svg{width:13px;height:13px}
.lb{position:fixed;inset:0;z-index:260;background:rgba(17,18,20,.86);display:none;align-items:center;justify-content:center;padding:24px}
.lb.open{display:flex}
.lb figure{margin:0;max-width:min(1100px,100%);max-height:100%;display:flex;flex-direction:column;align-items:center;gap:10px;touch-action:pan-y}
.lb img{max-width:100%;max-height:calc(100vh - 90px);object-fit:contain;background:#fff;border-radius:8px;user-select:none;-webkit-user-drag:none}
.lb figcaption{font-family:var(--font-mono);font-size:12px;color:rgba(255,255,255,.75);letter-spacing:.08em}
.lb-x{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(17,18,20,.6);color:#fff;display:grid;place-items:center;cursor:pointer}
.lb-x svg{width:20px;height:20px}
.lb-btn{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(17,18,20,.6);color:#fff;display:grid;place-items:center;cursor:pointer}
.lb-btn svg{width:22px;height:22px}
.lb-btn.prev{left:16px}.lb-btn.next{right:16px}
.lb.single .lb-btn{display:none}
.lb-x:hover,.lb-btn:hover{background:#000;border-color:#fff}
body.lb-open{overflow:hidden}
@media (max-width:640px){
  .gal-btn{width:34px;height:34px}
  .lb{padding:12px}
  .lb-btn{width:40px;height:40px;top:auto;bottom:14px;transform:none}
  .lb-btn.prev{left:14px}.lb-btn.next{right:14px}
  .lb img{max-height:calc(100vh - 120px)}
}

/* ---------- TKDN page (v30): certification steps, side navigation (v96: the photo strip and fact tiles gave way to the bento, 35-tkdn-bento.css) ---------- */
.tkdn-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;counter-reset:tk}
.tkdn-steps li{position:relative;padding:22px 0 0;border-top:1px solid var(--line-strong)}
.tkdn-steps li::before{content:"";position:absolute;left:0;top:-1px;width:44px;height:3px;background:var(--ink)}
.tkdn-steps .n{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--font-mono);font-size:12.5px;font-weight:500;margin-bottom:12px}
.tkdn-steps h3{font-family:var(--font-display);font-stretch:106%;font-weight:600;font-size:1.02rem;letter-spacing:-.01em;margin:0 0 8px;color:var(--ink)}
.tkdn-steps p{margin:0;color:var(--text-2);font-size:14px;line-height:1.55}
.tkdn-prose-grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:56px;align-items:start}
.tkdn-nav{position:sticky;top:90px;display:grid;gap:4px}
.tkdn-nav button{display:flex;align-items:center;gap:10px;text-align:left;border:1px solid transparent;background:transparent;color:var(--text-2);padding:8px 10px;border-radius:var(--radius);cursor:pointer;font-size:13.5px;font-family:var(--font-body);transition:background .15s,color .15s}
.tkdn-nav button:hover{background:var(--paper-2);color:var(--ink)}
.tkdn-nav button span{font-family:var(--font-mono);font-size:11px;color:var(--text-3);width:16px}
.tkdn-nav button i{font-style:normal}
.tkdn-prose{max-width:none}
.tkdn-prose section{scroll-margin-top:90px}
.tkdn-rule{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:6px 0 22px;padding:0}
.tkdn-rule > div{border:1px solid var(--line);border-radius:10px;background:var(--paper-2);padding:18px 20px;display:grid;gap:6px}
.tkdn-rule b{font-family:var(--font-display);font-stretch:110%;font-weight:700;font-size:2.2rem;letter-spacing:-.025em;line-height:1;color:var(--ink)}
.tkdn-rule span{font-size:13.5px;color:var(--text-2);line-height:1.45}
.tkdn-rule .src{grid-column:1/-1;margin:0;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.tkdn-qa{margin:6px 0 10px;border:1px solid var(--line);border-radius:10px;background:var(--paper-2);padding:16px 20px}
.tkdn-qa h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin:0 0 10px;font-weight:500}
.tkdn-qa ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.tkdn-qa li{display:flex;justify-content:space-between;gap:16px;font-size:14px;border-top:1px solid var(--line);padding-top:6px}
.tkdn-qa li:first-child{border-top:0;padding-top:0}
.tkdn-qa li b{font-family:var(--font-mono);font-weight:500;color:var(--ink);white-space:nowrap}
@media (max-width:980px){
  .tkdn-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tkdn-prose-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .tkdn-nav{position:static;display:flex;flex-wrap:wrap;gap:6px}
  .tkdn-nav button{border-color:var(--line-strong);background:var(--paper)}
  .tkdn-nav button span{display:none}
}
@media (max-width:640px){
  .tkdn-steps{grid-template-columns:minmax(0,1fr)}
  .tkdn-rule{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Hero with product showcase (v30) ---------- */
@media (min-width:1100px){
  .hero-grid.hero-two{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center}
  .hero-two .hero-copy{text-align:left;margin:0;max-width:none}
  .hero-two h1.display{margin-left:0;margin-right:0}
  .hero-two .lead{margin-left:0;margin-right:0;max-width:60ch}
  .hero-two .hero-cta{justify-content:flex-start}
  .hero-two .hero-stats{justify-content:flex-start;gap:44px}
  .hero-two .stat{text-align:left}
}
.hero-show{position:relative;z-index:1;animation:rise .8s .12s cubic-bezier(.2,.7,.2,1) both}
.hero-show[hidden]{display:none}
.hs-card{overflow:hidden;min-width:0;background:rgba(255,255,255,.94);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid var(--ink);border-radius:12px;box-shadow:10px 10px 0 var(--paper-3),var(--glow);padding:18px 20px 14px;display:flex;flex-direction:column;gap:10px}
.hs-card .eyebrow{margin:0}
.hs-stage{position:relative;min-height:300px;display:grid;grid-template-columns:minmax(0,1fr);overflow:hidden;min-width:0}
.hs-slide{grid-area:1/1;min-width:0;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:18px;align-items:center;opacity:0;visibility:hidden;transform:translateX(18px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1),visibility 0s .55s}
.hs-slide.on{opacity:1;visibility:visible;transform:none;transition:opacity .55s ease .1s,transform .55s cubic-bezier(.2,.7,.2,1) .1s,visibility 0s}
.hs-slide.out{transform:translateX(-18px)}
.hs-img{display:block}
.hs-img .pimg{aspect-ratio:1/1;margin:0;background:#fff;border-radius:10px}
.hs-img .pimg img{padding:6%}
.hs-slide.on .hs-img .pimg.has img{animation:hsFloat 6s ease-in-out infinite}
@keyframes hsFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.hs-copy{display:grid;gap:10px;align-content:center;min-width:0}
.hs-brand{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.hs-brand i{font-style:normal;color:var(--line-strong);margin:0 2px}
.hs-copy h3{font-family:var(--font-display);font-stretch:108%;font-weight:700;font-size:clamp(1.15rem,1.6vw,1.45rem);letter-spacing:-.015em;line-height:1.15;margin:0;color:var(--ink)}
.hs-copy h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.hs-copy .chips li{font-size:11px}
.hs-copy .btn{justify-self:start;margin-top:2px}
.hs-copy .btn svg{width:14px;height:14px}
.hs-nav{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:12px}
.hs-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line-strong);background:var(--paper);color:var(--ink);display:grid;place-items:center;cursor:pointer;flex-shrink:0;transition:border-color .15s,background .15s}
.hs-btn svg{width:16px;height:16px}
.hs-btn:hover{border-color:var(--ink)}
.hs-dots{display:flex;gap:6px;flex:1;justify-content:center;flex-wrap:wrap}
.hs-dots button{width:22px;height:4px;border-radius:2px;border:0;background:var(--line-strong);cursor:pointer;padding:0;transition:background .2s,width .2s}
.hs-dots button.on{background:var(--ink);width:34px}
.hs-count{font-family:var(--font-mono);font-size:11.5px;color:var(--text-3);flex-shrink:0}
.hs-count b{color:var(--ink);font-weight:600}
.hs-count span{margin:0 2px}
@media (max-width:1099px){
  .hero-show{margin-top:36px;max-width:720px;margin-left:auto;margin-right:auto}
}
@media (max-width:640px){
  .hs-slide{grid-template-columns:minmax(0,1fr);gap:12px}
  .hs-img .pimg{aspect-ratio:4/3}
  .hs-stage{min-height:0}
  .hs-card{padding:16px 16px 12px;box-shadow:6px 6px 0 var(--paper-3)}
  .hs-copy .btn{justify-self:stretch;justify-content:center}
}
body.no-motion .hs-slide.on .hs-img .pimg.has img{animation:none}

/* ---------- Category cards with a product photo, solution cards with thumbnails (v30) ---------- */
.cat.has-photo{padding-top:0;overflow:hidden}
.cat .cimg{display:block;margin:0 -24px 6px;border-bottom:1px solid var(--line);background:#fff}
.cat .cimg .pimg{aspect-ratio:16/9;margin:0;border-radius:0;background:#fff}
.cat .cimg .pimg img{padding:7% 10%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.cat:hover .cimg .pimg.has img{transform:scale(1.06)}
.cat.has-photo .arrow{top:auto;bottom:22px}
.cat.has-photo .icon{margin-top:8px}
.cat.has-photo .cnt{padding-right:40px}
.sol-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sol-thumbs{display:flex;gap:6px}
.sol-thumbs .th{width:48px;height:48px;border:1px solid transparent;border-radius:8px;background:#fff;display:block;overflow:hidden;transition:border-color .2s,transform .2s}
.sol-thumbs .th .pimg{aspect-ratio:1/1;margin:0;border-radius:0;background:#fff}
.sol-thumbs .th .pimg img{padding:4px}
.sol-thumbs .th:has(.pimg.has){border-color:var(--line)}
.sol-thumbs .th:hover{border-color:var(--ink);transform:translateY(-2px)}
.sol.big .sol-thumbs .th{width:56px;height:56px}
@media (max-width:640px){ .cat .cimg{margin:0 -20px 4px} }

/* Long button labels (editable text) must never push the layout wider than the phone screen */
@media (max-width:640px){
  .btn{white-space:normal;text-align:center}
  .fask .row{flex-wrap:wrap}
  .fask .row .btn{flex:1 1 100%;justify-content:center}
  .fask input{flex:1 1 100%}
}

/* ---------- v31: activity photos (home mosaic, galleries, thumbnails). v96 Model 1: the captions sit under the photo,
   never over it, and the big mosaic frame keeps its image in flow (36-foto-bertumpuk.css) ---------- */
.photos-sec{border-top:1px solid var(--line)}
figure.ph{position:relative;margin:0;border-radius:10px;overflow:hidden;background:var(--paper-2);border:1px solid var(--line);cursor:zoom-in;min-width:0}
figure.ph .ph-img{position:relative;aspect-ratio:4/3;background:var(--paper-2);overflow:hidden}
figure.ph .ph-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .35s ease,transform .8s cubic-bezier(.2,.7,.2,1);-webkit-user-drag:none}
figure.ph .ph-img.has img{opacity:1}
figure.ph:hover .ph-img.has img{transform:scale(1.045)}
.ph-mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ph-mosaic .big{grid-column:span 2;grid-row:span 2;min-height:0}
.ph-mosaic.n3,.ph-mosaic.n6{grid-template-columns:repeat(3,minmax(0,1fr))}
.ph-mosaic.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
.ph-mosaic.n4 .big{grid-column:auto;grid-row:auto}
.ph-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.news-ph-head{margin-top:64px}
.events li.ph-ev{padding:0;overflow:hidden;cursor:zoom-in}   /* v96: on hover only the photo zooms; the card keeps its hairline */
.events li.ph-ev .ev{aspect-ratio:4/3;border-radius:0;margin:0 0 14px}
.events li.ph-ev .ev img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.events li.ph-ev:hover .ev.has img{transform:scale(1.04)}
.events li.ph-ev .y{padding:0 20px}
.events li.ph-ev b{display:block;padding:0 20px 20px;font-size:.98rem}
.sup-ph{display:flex;gap:6px;margin-top:2px}
.sup-ph .th{width:58px;height:44px;border-radius:6px;overflow:hidden;border:1px solid var(--line);background:var(--paper-2);flex-shrink:0}
.sup-ph .th img{width:100%;height:100%;object-fit:cover;display:block}
.sup-card .more,.svc .more{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong);margin-top:2px}
.sup-card .more:hover,.svc .more:hover{text-decoration-color:var(--ink)}
.sup-card .more svg,.svc .more svg{width:14px;height:14px}
.svc .sup-ph{margin-top:16px}
.svc .more{margin-top:10px}
@media (max-width:980px){
  .ph-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .ph-mosaic,.ph-mosaic.n3,.ph-mosaic.n6{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ph-mosaic .big{grid-column:1 / -1;grid-row:auto}
  .ph-grid{grid-template-columns:minmax(0,1fr)}
  .news-ph-head{margin-top:44px}
}

/* ---------- v31: training page ---------- */
.tr-hero{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tr-hero.n1{grid-template-columns:minmax(0,1fr)}
.tr-topics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 28px}
.tr-topics > div{padding:24px 0 10px;border-top:1px solid var(--ink);min-width:0}
.tr-topics .icon{width:42px;height:42px;border-radius:8px;background:var(--paper);border:1px solid var(--line);color:var(--ink);display:grid;place-items:center;margin-bottom:16px}
.tr-topics .icon svg{width:22px;height:22px}
.tr-topics h3{font-family:var(--font-display);font-stretch:106%;font-weight:600;font-size:1.05rem;letter-spacing:-.01em;margin:0 0 8px;color:var(--ink);line-height:1.3}
.tr-topics p{margin:0;color:var(--text-2);font-size:14px;line-height:1.55}
.tr-how{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.tr-how > div{border:1px solid var(--line);border-radius:10px;background:var(--paper);padding:24px 24px 22px;min-width:0;transition:border-color .2s,transform .25s,box-shadow .25s}
.tr-how > div:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:var(--glow)}
.tr-how .n{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--font-mono);font-size:12.5px;font-weight:500;margin-bottom:14px}
.tr-how h3{font-family:var(--font-display);font-stretch:106%;font-weight:600;font-size:1.05rem;letter-spacing:-.01em;margin:0 0 8px;color:var(--ink);line-height:1.3}
.tr-how p{margin:0;color:var(--text-2);font-size:14px;line-height:1.55}
@media (max-width:980px){
  .tr-topics{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tr-how{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .tr-hero{grid-template-columns:minmax(0,1fr)}
  .tr-topics{grid-template-columns:minmax(0,1fr);gap:0}
  .tr-topics > div{padding:20px 0 14px}
  .tr-how{grid-template-columns:minmax(0,1fr)}
}

/* ---------- v31: stock / lead time label ---------- */
.stock{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:2px 8px;line-height:1.5;margin-left:8px;vertical-align:middle;white-space:nowrap}
.stock::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.stock.ready{background:var(--ink);color:#fff}
.stock.indent{border:1px solid var(--line-strong);color:var(--text-2);background:var(--paper)}
.prod .brand{display:flex;align-items:center;flex-wrap:wrap;gap:4px 0}
.stockline{margin:-6px 0 18px;font-size:13.5px;color:var(--text-2)}
.stockline .stock{margin-left:0;font-size:11px;padding:4px 11px}

/* ---------- v31/v96: TKDN certification flow. v96 Model 1: every step opens with its icon in a small ivory octagon
   (gold on the last step) with a graphite number; the steps are the ruled columns of one white panel (30-tkdn-visual.css) ---------- */
.tkdn-steps li{padding:0;border-top:0}
.tkdn-steps li::before{display:none}
.tkdn-steps li .n{display:none}
.flow-ico{position:relative;display:grid;place-items:center;width:48px;height:48px;color:var(--ink);margin-bottom:18px;isolation:isolate}
.flow-ico::before{content:"";position:absolute;inset:0;background:var(--ivory);clip-path:var(--oct);z-index:-1}
.tkdn-steps li:last-child .flow-ico::before{background:var(--accent)}
.flow-ico svg{width:22px;height:22px}
.flow-ico i{position:absolute;top:-6px;right:-10px;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;border:2px solid #fff;font-style:normal;font-family:var(--font-mono);font-size:12px;font-weight:700;display:grid;place-items:center}
.tkdn-steps h3{margin-top:2px}

/* ---------- v32: leaner home page (category cards without paragraphs, compact solution cards) ---------- */
.cat .cnt{margin-top:auto}
.cat.has-photo .cnt{padding-right:40px}
.sol.mini{padding:20px 20px 16px;gap:10px;color:inherit;text-decoration:none;min-height:0}
.sol.mini h3{font-size:1.04rem;line-height:1.3}
.sol.mini .cnt{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.sol.mini:hover .cnt{color:var(--ink)}
@media (min-width:981px){ .nav-links > a[data-route="home"]{display:none} }

/* ---------- v33: hero video kept whole (subject no longer cut at the top), soft fade into the page ---------- */

/* ---------- v33: arrows on product cards to browse the other official photos ---------- */
.prod .pimg .pv-btn{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;border:1px solid var(--line-strong);background:rgba(255,255,255,.94);color:var(--ink);display:grid;place-items:center;cursor:pointer;z-index:3;opacity:0;transition:opacity .15s,border-color .15s,background .15s;padding:0}
.prod .pimg .pv-btn svg{width:15px;height:15px}
.prod .pimg .pv-btn.prev{left:8px}.prod .pimg .pv-btn.next{right:8px}
.prod:hover .pimg.has .pv-btn,.prod:focus-within .pimg.has .pv-btn{opacity:1}
.prod .pimg .pv-btn:hover{border-color:var(--ink);background:var(--ink);color:#fff}
@media (hover:none){ .prod .pimg.has .pv-btn{opacity:1} }
.prod .pimg img{transition:opacity .2s,transform .5s cubic-bezier(.2,.7,.2,1)}
.pcount i{font-style:normal;color:var(--ink);font-weight:600}


/* ---------- v36: certification badges in the first footer column, blended into the footer background ---------- */
.cbadges{display:flex;flex-direction:column;gap:14px;align-items:flex-start;margin-top:26px;padding-top:22px;border-top:1px solid var(--line-strong);max-width:340px}
.cbadge{display:inline-flex;align-items:center;gap:12px;background:transparent;border:0;padding:0;color:var(--ink);text-decoration:none;font-family:var(--font-body);letter-spacing:0;text-transform:none;cursor:pointer;text-align:left;border-radius:6px;transition:opacity .15s}
.cbadge:hover{opacity:.8}
span.cbadge{cursor:default}
.cbadge .cm{height:46px;max-width:92px;width:auto;object-fit:contain;display:block;flex-shrink:0}
.cbadge .tk{width:46px;height:46px;border-radius:6px;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:11px;letter-spacing:.06em;flex-shrink:0}
.cbadge .ct{display:grid;gap:1px;min-width:0;line-height:1.2}
.cbadge .ct b{font-size:13px;color:var(--ink);font-weight:700;white-space:nowrap;letter-spacing:-.005em}
.cbadge .ct small{font-size:10px;letter-spacing:.02em;color:var(--text-2);white-space:nowrap;font-weight:500;text-transform:none}
.cbadge .ct small:last-child{color:var(--text-3)}
.cbadge .mk{display:flex;gap:8px;align-items:center;border-left:1px solid var(--line-strong);padding-left:10px;margin-left:2px}
.cbadge .mk img{height:22px;width:auto;max-width:44px;object-fit:contain;display:block}
@media (max-width:640px){ .cbadges{max-width:none} .cbadge .cm,.cbadge .tk{height:42px} .cbadge .tk{width:42px} }

/* ---------- v34: installable app and offline notice ---------- */
.foot-app{margin-top:12px}
.foot-app .btn svg{width:16px;height:16px}
.offline-bar{background:var(--ink);color:#fff;font-size:13px;text-align:center;padding:8px 16px;font-family:var(--font-mono);letter-spacing:.02em}
.offline-bar[hidden]{display:none}

/* ---------- v35: finder note, form validation states ---------- */
.fresult .fnote{margin:0 0 10px;font-size:13px;color:var(--text-2);border-left:2px solid var(--ink);padding-left:10px}
.form input[aria-invalid="true"],.calc-form input[aria-invalid="true"]{border-color:var(--ink);box-shadow:0 0 0 2px var(--paper-3)}

/* ---------- v35: one natural typeface (Plus Jakarta Sans) for headings, text and labels; small labels lose the typewriter look ---------- */
.eyebrow,.fq .ql,.why .k,.group-title,.foot-grid h4,.foot-grid .fc-l,.dl dt,.facts dt,.vm .k,.detail .brandline,.tkdn-card .tk-note,.tkdn-qa h4,.tkdn-table h4,.hs-count,.cert .ct small,.cbadge small,.tr-topics .k{font-weight:600;letter-spacing:.1em}
.chips li,.detail .meta a,.detail .meta span,.stock,.pcount,.dl-link,.calc-break span,.copyright,.lang,.lang button,kbd,.search-btn kbd{letter-spacing:.01em}
.copyright{font-size:13px}
.lang button{font-weight:600}
.stat b,.tkb-stat b,.tk-v,.tkdn-rule b,.hs-count b{font-variant-numeric:tabular-nums}

/* ---------- v35: Google reviews (real reviews pasted by the owner) ---------- */
.rv-sum{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stars{display:inline-flex;gap:1px;font-size:15px;line-height:1;color:var(--line-strong)}
.stars i{font-style:normal}
.stars i.on{color:#F4B400}
.rv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rv{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:22px 22px 18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.rv p{margin:0;font-size:14.5px;line-height:1.6;color:var(--text);flex:1}
.rv footer{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:12px;font-size:13px}
.rv footer b{color:var(--ink);font-weight:600}
.rv footer span{color:var(--text-3);flex:1}
.rv footer img{width:16px;height:16px;flex-shrink:0}
.rv-note{margin:18px 0 0;font-size:13.5px;color:var(--text-2)}
.rv-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:980px){ .rv-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .rv-grid{grid-template-columns:minmax(0,1fr)} }

/* ---------- v36: mobile layering (compare bar above the floating buttons), scrollable mobile menu, swipeable showcase ---------- */
@media (max-width:620px){
  body.has-quote .cmpbar{bottom:84px}
  .cmpbar span{white-space:normal}
}
@media (max-width:980px){
  .nav.open .nav-links{max-height:calc(100vh - 70px);overflow-y:auto;-webkit-overflow-scrolling:touch}
}
.hs-stage{touch-action:pan-y}
.hs-img img{-webkit-user-drag:none}

/* ---------- v38: cinematic hero. The video fills the screen under the navigation; only one short headline and one button sit
   at the bottom left over a white fade, so nothing covers the picture. The featured product card lives in its own section
   right below the hero, on white, together with the lead and the two secondary buttons. ---------- */
.hero.hero-cine{padding:0;border-bottom:0;background:#fff}
.hero-cine .hero-cine-inner{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;min-height:clamp(540px,calc(100vh - 70px),900px);min-height:clamp(540px,calc(100svh - 70px),900px);padding-top:24px;padding-bottom:110px}
.hero-cine .hero-cine-row{display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.hero-cine .hero-copy{max-width:min(100%,840px);margin:0;text-align:left;animation:rise .9s .1s cubic-bezier(.2,.7,.2,1) both}
.hero-cine h1.display{font-size:clamp(2.2rem,4vw,3.9rem);line-height:1.04;margin:0 0 26px;max-width:22ch;text-shadow:0 1px 0 rgba(255,255,255,.85),0 0 2px rgba(255,255,255,.9),0 0 34px rgba(255,255,255,.75)}
.hero-cine .hero-cta{justify-content:flex-start}
.hero-cine h1.display em{background-image:none;animation:none}
.hero-cine .hero-cta .btn{padding:14px 24px;font-size:15px}
.hero-cine .hero-media{background-position:50% 50%}
.hero-cine .hero-media video{object-position:50% 50%;filter:saturate(.8) contrast(1.03)}
.hero-cine .hero-media .hero-shade{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 58%,rgba(255,255,255,.6) 82%,#fff 100%),linear-gradient(90deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.3) 34%,rgba(255,255,255,0) 60%)}
.hero-cine:not(.has-media){border-bottom:1px solid var(--line)}
.hero-cine:not(.has-media) .hero-cine-inner{min-height:0;padding-top:72px;padding-bottom:96px}
.hero-cine:not(.has-media) h1.display,.hero-cine:not(.has-media) .hero-scroll{text-shadow:none}
.hero-scroll{position:absolute;left:0;right:0;bottom:26px;width:max-content;margin:0 auto;display:inline-flex;align-items:center;gap:12px;background:transparent;border:0;padding:0;cursor:pointer;color:var(--ink);font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;flex-shrink:0;text-shadow:0 1px 0 rgba(255,255,255,.85);animation:rise .9s .4s cubic-bezier(.2,.7,.2,1) both}
.hero-scroll i{width:44px;height:44px;border-radius:50%;border:1px solid var(--ink);background:rgba(255,255,255,.8);display:grid;place-items:center;transition:background .15s}
.hero-scroll i::before{content:"";width:9px;height:9px;border-right:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);transform:translateY(-2px) rotate(45deg);animation:scrollHint 1.8s ease-in-out infinite}
.hero-scroll:hover i{background:var(--ink)}
.hero-scroll:hover i::before{border-color:#fff}
.hero-scroll:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:4px}
@keyframes scrollHint{0%,100%{transform:translateY(-3px) rotate(45deg)}50%{transform:translateY(1px) rotate(45deg)}}
body.no-motion .hero-scroll i::before{animation:none}
.featured{padding:72px 0 64px;background:#fff;border-bottom:1px solid var(--line);scroll-margin-top:70px}
.featured-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.featured-intro .lead{margin:16px 0 26px;max-width:54ch}
.featured-intro .hero-cta{justify-content:flex-start}
.featured .hero-show{animation:none;margin:0;max-width:none}
@media (max-width:1099px){
  .featured{padding:56px 0 52px}
  .featured-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .featured .hero-show{max-width:720px}
}
@media (max-width:860px){
  .hero-cine .hero-cine-inner{min-height:clamp(460px,calc(100vh - 190px),700px);min-height:clamp(460px,calc(100svh - 190px),700px);padding-bottom:44px}
  .hero-cine .hero-media .hero-shade{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,.55) 52%,rgba(255,255,255,.92) 78%,#fff 100%)}
  .hero-cine h1.display{max-width:none}
  .hero-cine .hero-media video{object-position:46% 50%}
  .hero-cine .hero-media{background-position:46% 50%}
  .hero-cine .hero-copy{max-width:100%}
  .hero-cine h1.display{font-size:clamp(1.9rem,8.4vw,2.2rem)}
}
@media (max-width:640px){
  .hero-scroll{display:none}
  .hero-cine .hero-cta .btn{width:100%;justify-content:center}
  .featured{padding:48px 0 44px}
}
@media print{ .hero-cine .hero-cine-inner{min-height:0;padding-top:24px;padding-bottom:24px} .hero-scroll{display:none} .featured{padding:16px 0} }

/* ---------- v39: dark tone for the cinematic hero (meta.heroTone = "dark"): white headline and white button over a dark
   video, no white fade. The light tone (black text, white fade) stays available for bright footage. ---------- */
.hero-cine.hero-dark{background:#0e0f11}
.hero-cine.hero-dark .hero-media .hero-shade{background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.08) 30%,rgba(0,0,0,.1) 62%,rgba(0,0,0,.5) 86%,rgba(0,0,0,.6) 100%),linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.34) 32%,rgba(0,0,0,0) 62%)}
.hero-cine.hero-dark .hero-media video{filter:saturate(.9) contrast(1.02)}
.hero-cine.hero-dark h1.display,.hero-cine.hero-dark h1.display em{color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.5),0 12px 44px rgba(0,0,0,.55)}
.hero-cine.hero-dark .hero-cta .btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.hero-cine.hero-dark .hero-cta .btn-primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.hero-cine.hero-dark .hero-scroll{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.hero-cine.hero-dark .hero-scroll i{border-color:rgba(255,255,255,.85);background:rgba(0,0,0,.28)}
.hero-cine.hero-dark .hero-scroll i::before{border-color:#fff}
.hero-cine.hero-dark .hero-scroll:hover i{background:#fff}
.hero-cine.hero-dark .hero-scroll:hover i::before{border-color:var(--ink)}
.hero-cine.hero-dark .hero-scroll:focus-visible{outline-color:#fff}
.hero-cine.hero-dark:not(.has-media){background:#fff}
.hero-cine.hero-dark:not(.has-media) h1.display,.hero-cine.hero-dark:not(.has-media) h1.display em{color:var(--ink);text-shadow:none}
.hero-cine.hero-dark:not(.has-media) .hero-cta .btn-primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.hero-cine.hero-dark:not(.has-media) .hero-scroll{color:var(--ink);text-shadow:none}
.hero-cine.hero-dark:not(.has-media) .hero-scroll i{border-color:var(--ink);background:rgba(255,255,255,.8)}
.hero-cine.hero-dark:not(.has-media) .hero-scroll i::before{border-color:var(--ink)}
@media (max-width:860px){
  .hero-cine.hero-dark .hero-media .hero-shade{background:linear-gradient(180deg,rgba(0,0,0,.32) 0%,rgba(0,0,0,.08) 24%,rgba(0,0,0,.42) 52%,rgba(0,0,0,.8) 100%)}
}

/* ---------- v40: source credit for the hero video (meta.heroVideoCredit), small and muted at the bottom right ---------- */
.hero-credit{position:absolute;left:clamp(24px,4.5vw,96px);bottom:12px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;color:var(--text-3);opacity:.85;text-shadow:0 1px 0 rgba(255,255,255,.7);pointer-events:none}
.hero-cine.hero-dark .hero-credit{color:rgba(255,255,255,.7);text-shadow:0 1px 2px rgba(0,0,0,.6)}
.hero-cine:not(.has-media) .hero-credit{display:none}
@media (max-width:640px){ .hero-credit{left:clamp(16px,4.5vw,96px);bottom:8px;font-size:10px} }

/* ---------- v43: awards page (#/penghargaan) and the teaser strip on Tentang ---------- */
.aw-stats{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:22px}
.aw-stats span{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);border:1px solid var(--line-strong);border-radius:999px;padding:6px 12px;background:var(--paper)}
.aw-stats span b{font-weight:700;color:var(--ink);letter-spacing:0;margin-right:2px}
.aw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
figure.aw{margin:0;min-width:0;border:1px solid var(--line);border-radius:12px;background:var(--paper);overflow:hidden;cursor:zoom-in;display:flex;flex-direction:column;transition:border-color .2s,transform .25s,box-shadow .25s}
figure.aw:hover,figure.aw:focus-visible{border-color:var(--ink);transform:translateY(-2px);box-shadow:var(--glow);outline:none}
figure.aw .aw-img{position:relative;aspect-ratio:4/3;background:var(--paper-2);border-bottom:1px solid var(--line);overflow:hidden}
figure.aw .aw-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:10px;box-sizing:border-box;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
figure.aw:hover .aw-img img{transform:scale(1.03)}
figure.aw .aw-n{position:absolute;right:10px;bottom:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;background:var(--ink);color:#fff;border-radius:999px;padding:3px 8px}
figure.aw figcaption{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;min-width:0}
figure.aw figcaption .y{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
figure.aw figcaption .y i{font-style:normal;color:var(--line-strong);margin:0 3px}
figure.aw figcaption b{font-family:var(--font-display);font-stretch:106%;font-weight:600;font-size:1.02rem;line-height:1.3;color:var(--ink);letter-spacing:-.01em;text-wrap:pretty}
figure.aw figcaption .by{font-size:12.5px;color:var(--text-2);line-height:1.4}
figure.aw figcaption .d{font-size:13px;color:var(--text-2);line-height:1.5;margin-top:4px}
.aw-note{margin:26px 0 0;font-size:13px;color:var(--text-3);max-width:80ch;line-height:1.55}
.aw-teaser .section-head{align-items:flex-end}
.aw-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
figure.aw.mini .aw-img{aspect-ratio:1/1}
figure.aw.mini figcaption{padding:12px 14px 14px}
figure.aw.mini figcaption b{font-size:.95rem}
figure.aw.mini figcaption .by,figure.aw.mini figcaption .d{display:none}
@media (max-width:1000px){ .aw-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .aw-strip{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){
  .aw-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .aw-strip{gap:10px}
  figure.aw figcaption{padding:12px 14px 14px}
  figure.aw.mini figcaption .y{font-size:10px}
}
body.no-motion figure.aw:hover .aw-img img{transform:none}

/* ---------- v43: phone layout fixes (iPhone & Android) ---------- */
/* Trust strip: every item shares the same left edge; the section keeps the page gutter; an odd last item spans the row. */
@media (max-width:1000px){
  .trust-inner{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 20px;padding:4px clamp(24px,4.5vw,96px)}
  .trust-inner > div,.trust-inner > div:first-child{padding:14px 0;border-left:0;min-width:0}
  .principals-inner{padding:14px clamp(24px,4.5vw,96px)}
}
@media (max-width:860px){
  .trust-inner{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust-inner > div:last-child:nth-child(odd){grid-column:1 / -1}
  .trust-inner b{font-size:16px}
}
@media (max-width:620px){
  .principals-inner{padding:12px clamp(24px,4.5vw,96px)}
}
/* TKDN certificate tables stack into rows of labelled values instead of scrolling sideways. */
@media (max-width:640px){
  .tkdn-table table{min-width:0;display:block}
  .tkdn-table thead{display:none}
  .tkdn-table tbody{display:block}
  .tkdn-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px;padding:12px 16px;border-top:1px solid var(--line)}
  .tkdn-table tbody tr:first-child{border-top:0}
  .tkdn-table td{display:block;padding:0;border:0;min-width:0;overflow-wrap:anywhere}
  .tkdn-table td:first-child{grid-column:1 / -1;font-weight:600;color:var(--ink)}
  .tkdn-table td::before{content:attr(data-th);display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:2px}
  .tkdn-table td:first-child::before{display:none}
  .tkdn-table td:nth-child(n+3){grid-column:1 / -1;overflow-wrap:normal;white-space:nowrap}   /* v96: a document number takes a full row and never breaks */
  .tkdn-table td b{font-size:1.1rem}
}
/* Product page on phones: picture right under the description, then specs; the aside box dissolves into the single column. */
@media (max-width:1000px){
  .detail > div,.detail > aside.aside{display:contents}
  .detail > div > *,.detail > aside.aside > *{min-width:0}
  .detail .meta{order:1} .detail h1{order:2} .detail .stockline{order:3} .detail .desc{order:4;margin-bottom:18px}
  .detail .aside > .gal,.detail .aside > .pimg{order:5;margin:0 0 22px}
  .detail .aside .pbadge{order:3;position:static;align-self:flex-start;justify-self:start;margin:0 0 10px}
  .detail .brandline{order:6} .detail .specs{order:7} .detail .tkdn-table{order:8} .detail .spec-table{order:9} .detail .actions{order:10} .detail .video{order:11}
  .detail .aside > h4:first-of-type{order:12;margin-top:6px} .detail .aside .tagl{order:13} .detail .aside > h4:last-of-type{order:14} .detail .aside .share{order:15}
  .detail .aside > h4:only-of-type{order:12}   /* v96: a lone heading ("Cocok untuk") is first and last of its type: it stays above its chips */
}
/* Touch devices: 16 px controls so iOS Safari does not zoom in when a field is focused; comfortable tap targets. */
@media (max-width:860px){
  input,select,textarea,.chat-in input,.conv input,.detail .aside .share input,.ed-field input,.ed-field textarea,.ed-field select{font-size:16px}
  .hs-btn,.lb-btn{min-width:40px;min-height:40px}
}
/* Dynamic viewport units: the chat panel, lightbox and mobile menu fit the visible area while the browser bars show or hide. */
@supports (height:100dvh){
  .chat{height:min(600px,calc(100dvh - 100px))}
  .lb img{max-height:calc(100dvh - 90px)}
  @media (max-width:620px){ .chat{height:min(560px,calc(100dvh - 24px))} .lb img{max-height:calc(100dvh - 120px)} }
  @media (max-width:980px){ .nav.open .nav-links{max-height:calc(100dvh - 70px)} }
}
/* iPhone safe areas (notch and home indicator): floating buttons, bars and panels keep clear of the system edges. */
@supports (padding:env(safe-area-inset-bottom)){
  .cmpbar{bottom:calc(16px + env(safe-area-inset-bottom))}
  .quotebar{padding-bottom:env(safe-area-inset-bottom)}
  .cookie-bar{bottom:calc(16px + env(safe-area-inset-bottom))}
  .chat{bottom:calc(24px + env(safe-area-inset-bottom))}
  footer{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  @media (max-width:620px){
    .cmpbar{bottom:calc(12px + env(safe-area-inset-bottom))}
    .chat{bottom:calc(8px + env(safe-area-inset-bottom))}
  }
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:clip;-webkit-tap-highlight-color:transparent}

/* ---------- v46: quick contact dock on the right edge (WhatsApp, Tanya SSK, email, back to top), the compare bar at the
   bottom centre, and page padding so no bar ever covers the footer links ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.dock{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:62;display:flex;flex-direction:column;align-items:flex-end}
.dock[hidden],.dock-show[hidden]{display:none}
.dock-hide{width:22px;height:22px;border-radius:50%;border:1px solid var(--line-strong);background:var(--paper);color:var(--text-2);display:grid;place-items:center;cursor:pointer;margin:0 15px 6px 0;padding:0;opacity:.85;transition:opacity .15s,color .15s,border-color .15s}
.dock-hide svg{width:12px;height:12px}
.dock-hide:hover{opacity:1;color:var(--ink);border-color:var(--ink)}
.dock-btn{position:relative;display:flex;align-items:center;justify-content:center;width:52px;height:52px;background:var(--paper);border:1px solid var(--line-strong);border-right:0;color:var(--ink);cursor:pointer;text-decoration:none;padding:0;font-family:var(--font-body);box-shadow:-10px 12px 28px -18px rgba(17,18,20,.45);transition:background .15s,border-color .15s}
.dock-btn + .dock-btn{border-top:0}
/* v96: the rounded corners follow the first and the last VISIBLE button (the cookie button hides while the notice is open,
   the back to top button appears after scrolling); :has() is cosmetic, older browsers get square corners */
.dock-wa{border-radius:12px 0 0 0}
.dock-btn:not([hidden]):not(:has(~ .dock-btn:not([hidden]))){border-radius:0 0 0 12px}
.dock-btn:hover,.dock-btn:focus-visible{background:var(--paper-2);border-color:var(--ink);outline:none;z-index:1}
.dock-btn:hover + .dock-btn,.dock-btn:focus-visible + .dock-btn{border-top-color:var(--ink)}
.dock-btn svg{width:22px;height:22px}
.dock-wa .wa-logo{width:30px;height:30px}
.dock-chat .mark{position:relative;width:34px;height:34px;display:grid;place-items:center}   /* logo hitam di atas putih, tanpa piringan: menyatu dengan dock */
.dock-chat .mark svg{width:30px;height:30px;fill:var(--ink)}
.dock-chat .dot{position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border-radius:50%;background:#2bb650;border:2px solid var(--paper);box-shadow:0 0 0 0 rgba(43,182,80,.6);animation:ping 2.2s infinite}
body.chat-open .dock-chat .dot{display:none}
.dock-top{color:var(--text-2)}
.dock-top[hidden]{display:none}
.dock-cookie{color:var(--text-2)}
.dock-cookie[hidden]{display:none}
.dock-cookie svg{width:24px;height:24px}
.dock-lbl{position:absolute;right:calc(100% + 10px);top:50%;transform:translate(6px,-50%);background:var(--ink);color:#fff;font-size:13px;font-weight:600;line-height:1.2;padding:7px 11px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;display:flex;flex-direction:column;gap:2px;text-align:left}
.dock-lbl::after{content:"";position:absolute;left:100%;top:50%;margin-top:-5px;border:5px solid transparent;border-left-color:var(--ink)}
.dock-lbl small{font-size:10.5px;font-weight:500;color:rgba(255,255,255,.75)}
.dock-btn:hover .dock-lbl,.dock-btn:focus-visible .dock-lbl{opacity:1;transform:translate(0,-50%)}
.dock-show{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:62;width:22px;height:56px;border:1px solid var(--line-strong);border-right:0;border-radius:10px 0 0 10px;background:var(--paper);color:var(--text-2);display:grid;place-items:center;cursor:pointer;padding:0;box-shadow:-10px 12px 28px -18px rgba(17,18,20,.45)}
.dock-show svg{width:14px;height:14px}
.dock-show:hover{color:var(--ink);border-color:var(--ink)}
body.lb-open .dock,body.lb-open .dock-show{visibility:hidden}
body:has(#nav.open) :is(.dock,.dock-show){visibility:hidden}   /* v96: the open phone menu (a white sheet) would otherwise carry the dock over its rows */
body.has-cmp{padding-bottom:76px}
body.has-quote.has-cmp{padding-bottom:144px}
body.has-cookie .cmpbar{bottom:112px}
body.has-cookie{padding-bottom:110px}   /* bilah cookie (hanya bila Google Analytics dipasang) tidak menutupi baris hak cipta */
@media (hover:none){ .dock-lbl{display:none} }
@media (max-width:620px){
  .dock-btn{width:46px;height:46px}
  .dock-btn svg{width:20px;height:20px}
  .dock-wa .wa-logo{width:28px;height:28px}
  .dock-chat .mark{width:31px;height:31px}
  .dock-chat .mark svg{width:27px;height:27px}
  .dock-hide{margin-right:12px}
  body.chat-open .dock,body.chat-open .dock-show{display:none}
  .hero-cine .hero-copy{padding-right:44px}
  .hero-cine h1.display{font-size:clamp(1.7rem,7.5vw,2.1rem);text-wrap:pretty}
  .foot-grid .fc-v{padding-right:30px}
  body.has-cmp{padding-bottom:84px}
  body.has-quote.has-cmp{padding-bottom:152px}
  body.has-cookie .cmpbar{bottom:190px}
  body.has-cookie{padding-bottom:180px}
}
@supports (padding:env(safe-area-inset-right)){
  .dock,.dock-show{right:env(safe-area-inset-right)}
}

/* ---------- v49: footer contact column. The LinkedIn pill and the install button line up with the text column
   (18 px icon column + 10 px gap of .fc-row), not with the icons. ---------- */
.foot-social,.foot-app{padding-left:28px}

/* v50: dinding klien beranda 21 logo (3 baris x 7); di ponsel (2 kolom) ubin terakhir yang ganjil melebar supaya tidak yatim */
@media (max-width:620px){ #homeWall > div:last-child:nth-child(odd){grid-column:span 2} }

/* ---------- v59: bright content on the deep blue hero.
   v59: azure is gone (navy and the logo yellow are the only accents on white), the stats band becomes a white card
   lifting out of the hero, the TKDN and CTA bands turn light, and sections get soft ice gradients. Only the hero, the
   inner page heads and the footer stay deep blue.
   v58: "Biru samudra" with its own light.
   v58: the hero footage is replaced by SSK's own fibre-light art (assets/hero), the stats band continues the hero,
   the page heads carry the same art, and every blue surface uses the one gradient. Below: the v57 layer, amended. A design layer loaded last; the older files stay untouched and the wording and page
   structure are unchanged. The idea comes from the reference sites (DCI Indonesia, PWNA, Renzo Tonin, Google, VeEX):
   a transparent header that sits on the hero media, white type over the picture, a saturated blue gradient as the
   brand ground, white and ice-blue content sections with rounded cards and pill buttons, one dark band mid page and
   a dark closing CTA and footer. The logo's navy is the ground of every top band, so the logo never sits on white:
   its ring and wordmark turn white there (currentColor). The logo's yellow is kept for the primary action on blue and
   for small marks (eyebrow dash, active menu line). Azure, a lighter step of the same navy hue, carries the small
   accents on white (eyebrows, icons, stat bars) so white sections do not look grey.
   v96 Model 1 "Foto Bertumpuk": the tokens below are the light palette now (warm stone instead of ice blue); the video
   hero keeps the cool values of v59 in its own scope (.hero below), the header is white with graphite text once solid,
   and the page heads, the CTA and the footer are light (36-foto-bertumpuk.css). v96 graphite type: every text on a
   light ground is graphite, the logo navy only fills the filled buttons and pressed controls (the tokens below). ---------- */

:root{
  /* v96 graphite type (the owner's choice after the previews): every text on a light ground is neutral graphite, and the
     logo navy is only the fill of filled buttons and pressed or selected controls (white text on it) and the logo mark,
     which draws its own colours (#ssk-logo and #ssk-mark carry fill="#042C6F"; only the wordmark follows color) */
  --fg:#333333;          /* headings, big figures, links, eyebrows, nav links, footer headings, the company name, icons, and
                            every rule, focus ring and cut line that was navy */
  --fg-body:#434342;     /* running text */
  --fg-2:#5E5D5C;        /* secondary text */
  --fg-3:#6B6B6A;        /* small labels; never on gold, never on the image wells (--stone-2, 4.4:1) */
  --brand:#042C6F;       /* logo navy: ONLY the fills of .btn-primary, the download button, pressed or selected controls
                            and the chat bubble of the visitor */
  --brand-2:#0B3F97;     /* hover of those fills */
  /* the older names stay as aliases, so the many var(--ink) and var(--text*) rules follow without edits: --ink is now
     the ink of the type (graphite), not the logo navy. The hero, the contact dock and the cookie notice pin the old
     values in their own scope (below). New rules use --fg* for type and --brand for fills; no other navy token is left
     (the deep and mid navy of the old gradients went with the graphite type) */
  --ink:var(--fg);
  --ink-2:var(--fg-2);   /* the start of the TKDN bar gradients and the hover of the carousel dots */
  --azure:var(--fg);     /* v59: kept as an alias so older rules below resolve */
  --accent:#F9C602;      /* logo yellow */
  --accent-2:#E0B000;
  --accent-ink:#0A1022;
  /* v96 Model 1: the grounds are white, warm stone and ivory (a tint of the logo yellow); warm hairlines */
  --stone:#F6F5F1;       /* alternate sections, the finder, the client wall, the footer, hover fills */
  --stone-2:#ECEAE3;     /* image wells: product cut outs, photo placeholders */
  --ivory:#FCF8EA;       /* the statement, the home TKDN band, page heads, the vision band, table heads */
  --cream:#F8EFCF;       /* hover fill of image wells and tabs, the open item of a list */
  --rule:#E3DFD4;        /* 1px hairline */
  --rule-2:#CCC6B7;      /* stronger hairline: figure rules, round arrows, form fields */
  --accent-soft:var(--cream);
  --ice:var(--stone);    /* the v59 names, kept as aliases so older rules resolve to the light palette */
  --ice-2:var(--rule);
  --ice-3:var(--rule-2);
  --paper:#FFFFFF;
  --paper-2:var(--stone);
  --paper-3:var(--stone-2);
  --line:var(--rule);
  --line-strong:var(--rule-2);
  --text:var(--fg-body);
  --text-2:var(--fg-2);
  --text-3:var(--fg-3);
  --glow:0 24px 48px -26px rgba(17,18,20,.35);
  --radius:10px;
  --nav-h:76px;
  --sea:linear-gradient(135deg,#021A44 0%,#042C6F 48%,#0A3C96 100%);
  --sea-deep:#021A44;
  --scrim:linear-gradient(90deg,rgba(16,18,24,.82) 0%,rgba(16,18,24,.72) 40%,rgba(16,18,24,.40) 64%,rgba(16,18,24,.10) 100%);   /* near black, never navy: the veil of the photo banners */
  --oct:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);   /* the full octagon of small marks (eyebrow dot, step icons) */
}
/* the video hero keeps the cool tokens of v59, so the first screen stays exactly as it was; so do the contact dock and the
   cookie notice, the fixed chrome that sits over the hero on that first screen (also on the other pages, one look).
   Inside this scope --ink is still the logo navy and --text the old body ink (#121A2F): the graphite type of the rest of
   the site never reaches it (22-hero-cinematic.css and 25-dock.css read the navy). Never re-point --ink or --text here,
   and never pin --ink on .nav: its dropdown panels open over the hero too and are graphite like every light ground. */
.hero,.dock,.dock-show,.cookie-bar{--ink:#042C6F;--ink-2:#0B3F97;--text:#121A2F;--ice:#EEF4FC;--ice-2:#E2EAF6;--ice-3:#C8D5EA;--line:#E2EAF6;--line-strong:#C8D5EA;--paper-2:#EEF4FC;--paper-3:#E2EAF6;--accent-soft:#FFF5CC;--text-2:#46536F;--text-3:#7A879F}
.hero,.dock{color:var(--text)}   /* the colour these boxes inherited from body before the body type turned graphite (fixtures/hero.json) */
::selection{background:var(--accent-soft);color:var(--ink)}
body{color:var(--text)}
h1,h2,h3,h4,.title{color:var(--ink)}
.section.alt{border-top:0;border-bottom:0}
.section-head p{color:var(--text-2)}
.btn{border-radius:999px;font-weight:600;padding:12px 22px}
.btn-sm{padding:9px 16px}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}   /* the filled button: the one navy fill (white text) */
.btn-primary:hover{background:var(--brand-2);border-color:var(--brand-2)}
/* the outline button, everywhere (the compare overlay, the quote panel, the chat and the editor too, like .view .btn-ghost
   in 36-foto-bertumpuk.css): graphite text and border, filled graphite with white text under the pointer. The white
   outline buttons on dark grounds (.chat-h, .cta-band, .sec-banner .banner, .quotebar) keep their own rules. */
.btn-ghost{border-color:var(--fg);color:var(--fg);background:var(--paper)}
.btn-ghost:hover{border-color:var(--fg);background:var(--fg);color:#fff}
:focus-visible{outline-color:var(--ink)}

/* ----- Header. Transparent with white type while it sits on the home page's video hero; solid once the page scrolls,
   on every page without the hero (html.nav-solid, 22-hero-media-dock.js) and while the phone menu is open. v96 Model 1:
   solid is white with a warm hairline and graphite type: the company name, the links and the controls #333333, the logo
   mark in its own navy, the pressed language a navy fill with white text, the label of the gold buttons graphite. Over
   the hero the bar keeps the colours of v95 (fixtures/hero.json, fixtures/hero-focus.json), including the colour its
   boxes inherit (--nav-fg), the navy focus ring of its controls (--nav-focus) and the near black label of its gold
   button (--nav-gold-fg); its panels are light grounds and take the graphite ring. The colours are custom properties of
   the bar, so one block switches the state; the yellow pill stays the one call to action in the bar. ----- */
.nav{--nav-bg:transparent;--nav-rule:rgba(255,255,255,.12);--nav-brand:#fff;--nav-link:rgba(255,255,255,.82);--nav-link-on:#fff;--nav-hover:rgba(255,255,255,.1);
  --nav-ctl-bg:rgba(255,255,255,.08);--nav-ctl-line:rgba(255,255,255,.32);--nav-ctl-fg:#fff;--nav-ctl-hover-bg:rgba(255,255,255,.16);--nav-ctl-hover-line:#fff;
  --nav-kbd-line:rgba(255,255,255,.4);--nav-kbd-fg:rgba(255,255,255,.8);--nav-lang-fg:rgba(255,255,255,.85);--nav-lang-on-bg:#fff;--nav-lang-on-fg:var(--brand);--nav-ed-line:rgba(255,255,255,.4);--nav-fg:#121A2F;
  --nav-focus:var(--brand);--nav-gold-fg:var(--accent-ink);
  color:var(--nav-fg);position:sticky;top:0;margin-bottom:calc(-1*var(--nav-h) - 1px);background:var(--nav-bg);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--nav-rule);box-shadow:none;transition:background .25s ease,border-color .25s ease}
html.nav-solid .nav,.nav.open{--nav-bg:#fff;--nav-rule:var(--rule);--nav-brand:var(--ink);--nav-link:var(--fg);--nav-link-on:var(--ink);--nav-hover:var(--stone);
  --nav-ctl-bg:#fff;--nav-ctl-line:var(--rule-2);--nav-ctl-fg:var(--ink);--nav-ctl-hover-bg:#fff;--nav-ctl-hover-line:var(--ink);
  --nav-kbd-line:var(--rule-2);--nav-kbd-fg:var(--text-3);--nav-lang-fg:var(--fg);--nav-lang-on-bg:var(--brand);--nav-lang-on-fg:#fff;--nav-ed-line:var(--rule-2);--nav-fg:var(--fg-body);
  --nav-focus:var(--fg);--nav-gold-fg:var(--fg)}
.nav :focus-visible{outline-color:var(--nav-focus)}   /* the skip link keeps its white ring (34-mega-nav.css, loaded later) */
.nav-inner{height:var(--nav-h)}
.nav .brand{color:var(--nav-brand)}
.nav .logo{height:46px}
.logo-full{display:block}
.logo-mark{display:none}
.nav-links a{color:var(--nav-link);font-weight:500;border-radius:999px}
.nav-links a:hover{color:var(--nav-link-on);background:var(--nav-hover)}
.nav-links a[aria-current="page"]{color:var(--nav-link-on);background:transparent;box-shadow:inset 0 -2px 0 var(--accent);border-radius:0}
.dd-btn{color:var(--nav-link);border-radius:999px}
.dd-btn:hover,.nav-dd.open .dd-btn{color:var(--nav-link-on);background:var(--nav-hover)}
.nav-dd.current .dd-btn{color:var(--nav-link-on);background:transparent;box-shadow:inset 0 -2px 0 var(--accent);border-radius:0}
.dd-menu{--nav-focus:var(--fg);color:var(--fg-body);border-color:var(--rule);border-radius:0;box-shadow:0 24px 48px -20px rgba(17,18,20,.35)}   /* v96: square panels, like every card; graphite type and focus ring also when they open over the hero */
.nav-links .dd-menu a{color:var(--text-2);border-radius:0}   /* square links in the square panels */
.nav-links .dd-menu a:hover,.nav-links .dd-menu a[aria-current="page"]{color:var(--ink);background:var(--stone);box-shadow:none}
/* grey to graphite is a small step, so a panel link also underlines under the pointer (in the mega panels only its name) */
.nav-links .dd-menu:not(.mega) a:hover,.nav-links .mega-brands a:hover,.nav-links .mega-tools a:hover,.nav-links .dd-menu a:hover .tx b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.search-btn{background:var(--nav-ctl-bg);border-color:var(--nav-ctl-line);color:var(--nav-ctl-fg);border-radius:999px}
.search-btn:hover{border-color:var(--nav-ctl-hover-line);color:var(--nav-ctl-fg);background:var(--nav-ctl-hover-bg)}
.search-btn kbd{border-color:var(--nav-kbd-line);color:var(--nav-kbd-fg)}
.lang{background:var(--nav-ctl-bg);border-color:var(--nav-ctl-line);border-radius:999px}
.lang button{color:var(--nav-lang-fg)}
.lang button[aria-pressed="true"]{background:var(--nav-lang-on-bg);color:var(--nav-lang-on-fg);font-weight:600}
.menu-btn{background:var(--nav-ctl-bg);border-color:var(--nav-ctl-line);color:var(--nav-ctl-fg);border-radius:999px}
.nav-tools > .btn-primary{background:var(--accent);color:var(--nav-gold-fg);border-color:var(--accent)}   /* graphite on gold once solid; over the hero the near black of v95 */
.nav-tools > .btn-primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.nav-tools .ed-toggle{color:var(--nav-ctl-fg);border-color:var(--nav-ed-line);background:transparent}
/* the phone menu: a white sheet under the bar (it only shows with .nav.open, so the bar above it is white too) */
@media (max-width:980px){
  .nav-links{top:var(--nav-h);background:#fff;border-bottom:1px solid var(--rule);box-shadow:0 24px 40px -28px rgba(17,18,20,.35);padding:10px 16px 18px}
  .nav-links > a,.nav-links > .nav-dd{border-bottom:1px solid var(--rule)}
  .nav-links a,.dd-btn{color:var(--ink);border-radius:10px}
  .nav-links a[aria-current="page"]{background:var(--stone);box-shadow:inset 0 -2px 0 var(--accent);border-radius:10px 10px 0 0}
  .nav-dd.current .dd-btn{border-radius:10px 10px 0 0}
  .dd-menu{background:var(--stone);border-color:var(--rule);box-shadow:none}
  .nav-links .dd-menu a{color:var(--fg)}
  .nav-links .dd-menu a:hover,.nav-links .dd-menu a[aria-current="page"]{color:var(--ink);background:var(--cream)}
}
@media (max-width:620px){
  .nav .logo-full{display:none}
  .nav .logo-mark{display:block;height:40px;width:40px}
}
@media print{ .nav{position:static;margin-bottom:0;background:#fff} .nav .brand{color:var(--ink)} }

/* ----- Hero: the same footage under a deep blue veil, white headline, yellow action. The bar sits on the picture. ----- */
.hero.hero-cine,.hero-cine.hero-dark{background:var(--sea-deep)}
.hero-cine .hero-cine-inner{min-height:max(600px,100vh);min-height:max(600px,100svh);padding-top:calc(var(--nav-h) + 24px);padding-bottom:120px}   /* v67: no upper cap, the hero always fills the first screen */
.hero-cine:not(.has-media) .hero-cine-inner{min-height:0;padding-top:calc(var(--nav-h) + 72px);padding-bottom:96px}
.hero-cine .hero-media video{filter:none}
.hero-cine .hero-media .hero-shade,.hero-cine.hero-dark .hero-media .hero-shade{background:linear-gradient(180deg,rgba(2,26,68,.35) 0%,rgba(2,26,68,0) 24%,rgba(2,26,68,0) 68%,var(--sea-deep) 100%),linear-gradient(90deg,rgba(2,26,68,.78) 0%,rgba(2,26,68,.5) 30%,rgba(2,26,68,0) 60%)}
.hero-cine h1.display,.hero-cine h1.display em,.hero-cine.hero-dark h1.display,.hero-cine.hero-dark h1.display em{color:#fff;text-shadow:0 2px 6px rgba(2,28,73,.4),0 14px 40px rgba(2,28,73,.45)}
.hero-cine h1.display::before{content:"";display:block;width:56px;height:5px;border-radius:3px;background:var(--accent);margin:0 0 24px}
.hero-cine .hero-cta .btn-primary,.hero-cine.hero-dark .hero-cta .btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);box-shadow:0 16px 34px -14px rgba(249,198,2,.6)}
.hero-cine .hero-cta .btn-primary:hover,.hero-cine.hero-dark .hero-cta .btn-primary:hover{background:#FFD83A;border-color:#FFD83A}
.hero-cine .hero-scroll,.hero-cine.hero-dark .hero-scroll{color:#fff;text-shadow:0 1px 3px rgba(2,28,73,.6)}
.hero-cine .hero-scroll i,.hero-cine.hero-dark .hero-scroll i{border-color:rgba(255,255,255,.85);background:rgba(2,28,73,.35)}
.hero-cine .hero-scroll i::before,.hero-cine.hero-dark .hero-scroll i::before{border-color:#fff}
.hero-cine .hero-scroll:hover i,.hero-cine.hero-dark .hero-scroll:hover i{background:#fff}
.hero-cine .hero-scroll:hover i::before,.hero-cine.hero-dark .hero-scroll:hover i::before{border-color:var(--ink)}
.hero-cine .hero-credit{color:rgba(255,255,255,.7);text-shadow:0 1px 2px rgba(2,28,73,.6)}
.hero-cine:not(.has-media),.hero-cine.hero-dark:not(.has-media){background:var(--sea);border-bottom:0}
.hero-cine:not(.has-media) h1.display,.hero-cine.hero-dark:not(.has-media) h1.display,.hero-cine.hero-dark:not(.has-media) h1.display em{color:#fff;text-shadow:none}
.hero-cine.hero-dark:not(.has-media) .hero-cta .btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.hero-cine.hero-dark:not(.has-media) .hero-scroll{color:#fff}
.hero-cine.hero-dark:not(.has-media) .hero-scroll i{border-color:rgba(255,255,255,.85);background:rgba(2,28,73,.35)}
.hero-cine.hero-dark:not(.has-media) .hero-scroll i::before{border-color:#fff}
@media (max-width:860px){
  .hero-cine .hero-cine-inner{min-height:clamp(520px,calc(100vh - 110px),760px);min-height:clamp(520px,calc(100svh - 110px),760px);padding-top:calc(var(--nav-h) + 12px);padding-bottom:56px}
  .hero-cine .hero-media .hero-shade,.hero-cine.hero-dark .hero-media .hero-shade{background:linear-gradient(180deg,rgba(2,26,68,.5) 0%,rgba(2,26,68,.2) 22%,rgba(2,26,68,.55) 50%,var(--sea-deep) 100%)}
  .hero-cine .hero-media video{object-position:62% 50%}
  .hero-cine .hero-media{background-position:62% 50%}
}

/* ----- Featured, principals (v96: the home blocks follow their order in 010-home.html; no flex order any more) ----- */
.featured{background:#fff;border-bottom:0}
.hero-scroll{bottom:96px}
@media (max-width:860px){ .hero-cine .hero-cine-inner{padding-bottom:80px} }
.principals{border-bottom:1px solid var(--ice-2);background:#fff}

/* ----- Eyebrows, cards, lists ----- */
.eyebrow{color:var(--ink);font-weight:600;letter-spacing:.14em}
.eyebrow::before{width:10px;height:10px;border-radius:0;background:var(--accent);clip-path:var(--oct)}   /* v96: a small gold octagon */
.cat,.sol,.svc > div,.prod,.events li,.facts,.tkdn-table{border-radius:0;border-color:var(--rule);box-shadow:none}   /* v96: square cards, hairline, no shadow */
.cat:hover,.sol:hover,.svc > div:hover{border-color:var(--ink);box-shadow:none;transform:none}
.cat .icon,.sol .icon,.svc .icon{background:var(--ice);color:var(--ink);border-radius:12px}   /* v96: the cards of the inner pages and their octagon icons: 36-foto-bertumpuk.css */
.cat .icon::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.95),transparent)}
.cat .arrow{color:var(--ice-3)}
.cat:hover .arrow{color:var(--azure)}
.cat .cnt,.prod .brand{color:var(--text-3)}
.cat:hover .cnt{color:var(--ink)}
.why > div{border-top:3px solid var(--ice-2);padding-top:22px}
.why .k{color:var(--ink)}
.process li{border-top:3px solid var(--ice-2)}
.process .num{background:var(--ice);color:var(--ink);border-color:var(--ice)}
.faq{border-top:3px solid var(--ice-2)}
.faq-item{border-bottom:1px solid var(--ice-2)}
.chip{border-color:var(--ice-3);color:var(--text-2)}
.chip:hover{border-color:var(--ink);color:var(--ink);background:var(--ice)}
.chip[aria-pressed="true"]{background:var(--brand);color:#fff;border-color:var(--brand)}   /* a pressed control: a navy fill */
.chips li{background:var(--ice);border-color:transparent;color:var(--ink);border-radius:999px}
.prod .links .dl{background:var(--brand);border-color:var(--brand);border-radius:999px}
.prod .links .dl:hover{background:var(--brand-2);border-color:var(--brand-2)}
.prod .links .dl.req,.prod .links .dl.ext{background:var(--paper);color:var(--fg);border-color:var(--fg)}   /* the outline pills ("Minta brosur", the dashed "Halaman produk resmi"): graphite text and border, like every outline button */
.prod .links .dl.req:hover,.prod .links .dl.ext:hover{background:var(--stone);border-color:var(--fg)}   /* not the navy hover border of the filled .dl */
.prod .links .add,.prod .links .cmp{border-radius:999px}
.prod .links .add[data-in="1"],.prod .links .cmp[data-in="1"]{background:var(--brand);color:#fff;border-color:var(--brand)}
.badge{background:var(--accent-soft);color:var(--ink);border-color:var(--accent-soft);border-radius:999px}
.badge::before{background:var(--accent);box-shadow:0 0 0 3px rgba(249,198,2,.25)}

/* ----- Forms: square white cards with a hairline (v96; the finder panel: 36-foto-bertumpuk.css) ----- */
.form{border:1px solid var(--rule);border-radius:0;box-shadow:none}
input,select,textarea{border-color:var(--rule-2);border-radius:0}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(51,51,51,.14)}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--warn);box-shadow:0 0 0 3px rgba(178,58,30,.14)}

/* ----- Inner page heads: ivory with a photo frame (v96, 36-foto-bertumpuk.css). The TKDN cards ----- */
.tkdn-card{border:1px solid var(--rule);border-radius:0;box-shadow:none;color:var(--text);background:#fff}
.tkdn-card h3,.tkdn-card h3 a{color:var(--ink)}
.tkdn-card .tk-brand{border-radius:999px}

/* ----- Tables, bars, overlays ----- */
.tkdn-table th{background:var(--ivory);color:var(--ink);font-weight:600;border-bottom:1px solid var(--rule)}
.tkdn-table h3{color:var(--ink)}
.quotebar .btn-primary{background:var(--accent);color:var(--fg);border-color:var(--accent)}   /* on gold only #333333 and #434342 */
.quotebar .btn-primary:hover{background:#FFD83A;border-color:#FFD83A}
.cmpbar{border-radius:999px;border-color:var(--ice-3);box-shadow:0 20px 40px -20px rgba(17,18,20,.4)}
.search-ov{background:rgba(17,18,20,.55)}   /* a near black scrim like the compare overlay and the lightbox (v96 graphite: no navy tint) */
.search-panel{border-radius:18px}

/* ----- Dock and chat ----- */
.dock-btn{border-color:var(--ice-3);color:var(--ink)}
.dock-btn:hover,.dock-btn:focus-visible{background:var(--ice);border-color:var(--ink)}
.dock-hide{border-color:var(--ice-3)}
.chat{border-color:var(--ice-3);box-shadow:0 30px 60px -30px rgba(17,18,20,.6);border-radius:20px}
.chat-h{background:var(--sea);border-bottom:0;border-radius:19px 19px 0 0;color:#fff}
.chat-h b,.chat-h .st{color:#fff}
.chat-h .st::before{background:#3ED47A}
.chat-h .av{background:#fff;border-color:rgba(255,255,255,.5)}
.chat-h .btn-ghost,.chat-h .btn-sm{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4);color:#fff}
.chat-h .chat-x{color:#fff;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.1)}
.msg.u{background:var(--brand);color:#fff}   /* the visitor's bubble: navy like the chat header above it */
.msg.a{background:var(--ice);border-color:var(--ice-2)}

/* ----- Closing CTA band: the flat gold card over a photo strip, and the light footer (v96: 36-foto-bertumpuk.css and
   04-footer-pagehead-about.css) ----- */
.cta-band{background:var(--accent);color:var(--ink);border:0;border-radius:0;box-shadow:none;padding:56px;isolation:isolate}
.cta-band::before,.cta-band::after{display:none}
.cta-band h2{color:var(--ink)}
.cta-band :focus-visible{outline-color:var(--ink)}
.quotebar :focus-visible{outline-color:var(--ink)}

/* ----- Showcase card, photo tiles, calculator: square, hairline, no shadow (v96) ----- */
.hs-card{border:0;border-radius:0;box-shadow:none;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0}
.hs-img .pimg{border-radius:0}
.calc-section{background:#fff;border-bottom:0}
.calc-wrap{border-radius:0;border-color:var(--rule)}
.calc-wrap[open]{border-color:var(--rule-2)}
.calc-ico{background:var(--ivory);color:var(--ink);border-radius:0;clip-path:var(--oct)}
.calc-tog{border-radius:999px}

/* ----- Opening animation on the blue gradient: the lockup fades in white and in colour, no curtain ----- */
.intro{background:var(--sea);color:#fff}
.intro::before{background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px 7px)}
.intro-mark svg{color:#fff;fill:#fff}
.intro-mark i{display:none}
.intro-word .tag{color:rgba(255,255,255,.72)}
.intro-line{background:var(--accent);opacity:.9}
.intro-skip{border-color:rgba(255,255,255,.45);color:rgba(255,255,255,.85)}
.intro-skip:hover{border-color:#fff;color:#fff}

/* ---------- v62: "Grup SSK" block at the top of the About page: the two company logos side by side over a short
   group description, centred like a company profile page. The Komindo logo is the old monochrome lockup
   (#ssk-logo-komindo); the Komunikatama logo is the current lockup (#ssk-logo). ---------- */
.group-sec{padding:64px 0 48px;background:#fff}
.group-inner{text-align:center;max-width:1100px}
.group-label{margin:0 0 26px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--text-3);text-align:center}
/* v68: the logo pair sits inside the same column as the paragraphs (76ch) and is centred as one unit with a fixed gap,
   so it reads as aligned with the text below it; both lockups share metrics, so their baselines match at equal height */
.group-logos{display:flex;align-items:center;justify-content:center;gap:52px;margin:0 auto 40px;padding:6px 0;max-width:76ch}
.group-logo{display:flex;align-items:center;justify-content:center;min-width:0;padding:0}
.group-logo svg{height:56px;width:auto;max-width:100%;display:block;fill:currentColor}
.group-logo:first-child{color:#111214}
.group-logo:last-child{color:#111214}   /* v64: wordmark and ring of the Komunikatama logo in black, like the Komindo logo */
.group-prose{max-width:76ch;margin:0 auto;text-align:center}
.group-prose p{margin:0 0 18px;font-size:1.06rem;line-height:1.7;color:var(--text-2)}
.group-prose p:last-child{margin-bottom:0}
.group-facts{margin:40px auto 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;padding:0;border:1px solid var(--ice-2,#E2EAF6);border-radius:16px;background:#fff;text-align:left;max-width:1000px}
.group-facts div{display:block;padding:18px 20px;border-top:0;border-left:1px solid var(--ice-2,#E2EAF6)}
.group-facts div:first-child{border-left:0}
.group-facts dt{margin-bottom:6px}
.group-facts dd{font-weight:600;color:var(--ink);font-size:14.5px;line-height:1.4}
@media (max-width:900px){
  .group-sec{padding:52px 0 40px}
  .group-logos{flex-direction:column;gap:20px;padding:4px 0}
  .group-logo{width:100%}
  .group-logo svg{height:auto;width:100%}
  .group-logo:first-child svg{max-width:246px}
  .group-logo:last-child svg{max-width:294px}
  .group-prose p{font-size:1rem;text-align:left}
  .group-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .group-facts div{border-left:0;border-top:1px solid var(--ice-2,#E2EAF6);padding:14px 16px}
  .group-facts div:nth-child(-n+2){border-top:0}
  .group-facts div:nth-child(even){border-left:1px solid var(--ice-2,#E2EAF6)}
  .group-facts div:last-child:nth-child(odd){grid-column:1 / -1;border-left:0}
}
@media print{ .group-facts{border:0} }

/* ---------- v68: cookie & privacy notice, footer copyright spacing, home introduction, group logos ---------- */

/* Footer copyright (v69): normal tracking like Renzo Tonin's footer, only a touch more room between the words */
.copyright > span{letter-spacing:.01em;word-spacing:.18em;font-size:12.5px}

/* Cookie & privacy notice: a quiet white card in the bottom left corner, typographic rather than loud. Its height is
   measured by renderConsentUi into --cookie-h so the compare bar and the page bottom make room for exactly that much. */
body.has-cookie{padding-bottom:calc(var(--cookie-h,160px) + 32px)}
body.has-cookie .cmpbar{bottom:calc(var(--cookie-h,160px) + 32px)}
body.has-cookie.has-cmp{padding-bottom:calc(var(--cookie-h,160px) + 110px)}
@media (max-width:620px){
  body.has-cookie{padding-bottom:calc(var(--cookie-h,200px) + 28px)}
  body.has-cookie .cmpbar{bottom:calc(var(--cookie-h,200px) + 28px)}
  body.has-cookie.has-cmp{padding-bottom:calc(var(--cookie-h,200px) + 116px)}
}
.cookie-bar{left:16px;right:auto;bottom:16px;justify-content:flex-start;width:min(540px,calc(100vw - 32px))}
.cookie-bar .cookie-in{position:relative;display:block;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;background:#fff;color:var(--text);border:1px solid var(--ice-3);border-radius:12px;padding:22px 26px 20px;box-shadow:0 24px 60px -28px rgba(4,44,111,.45),0 2px 8px -4px rgba(4,44,111,.15);max-width:none}
.ck-x{position:absolute;top:10px;right:10px;width:32px;height:32px;border:0;background:transparent;color:var(--text-3);border-radius:50%;display:grid;place-items:center;cursor:pointer}
.ck-x svg{width:16px;height:16px}
.ck-x:hover{color:var(--ink);background:var(--ice)}
.ck-title{margin:0 28px 8px 0;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ink)}
.ck-text{margin:0;font-size:13.5px;line-height:1.55;color:var(--text-2)}
.ck-text a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ice-3)}
.ck-text a:hover{text-decoration-color:var(--ink)}
.ck-acts{display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap;margin-top:18px}
.ck-btn{border:0;background:transparent;color:var(--text-2);font-family:var(--font-body);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;padding:11px 4px;cursor:pointer;line-height:1;border-radius:6px}
.ck-btn:hover{color:var(--ink)}
.ck-btn.ck-fill{background:var(--ink);color:#fff;padding:12px 22px;border-radius:6px}
.ck-btn.ck-fill:hover{background:var(--ink-2);color:#fff}
.ck-btn[hidden]{display:none}
.ck-manage{margin-top:16px;border-top:1px solid var(--ice-2);display:grid}
.ck-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 0;border-bottom:1px solid var(--ice-2)}
.ck-row > div{min-width:0}
.ck-row b{display:block;font-size:13px;color:var(--ink);margin-bottom:2px}
.ck-row span{font-size:12.5px;line-height:1.45;color:var(--text-2)}
.ck-always{flex-shrink:0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);font-weight:600;white-space:nowrap}
.ck-switch{position:relative;flex-shrink:0;width:40px;height:22px;cursor:pointer}
.ck-switch input{position:absolute;inset:0;z-index:1;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.ck-switch i{position:absolute;inset:0;border-radius:999px;background:var(--ice-3);transition:background .15s}
.ck-switch i::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.ck-switch input:checked + i{background:var(--ink)}
.ck-switch input:checked + i::after{transform:translateX(18px)}
.ck-switch input:focus-visible + i{outline:2px solid var(--accent);outline-offset:2px}
.ck-switch[hidden]{display:none}
@media (max-width:620px){
  .cookie-bar{left:12px;bottom:12px;width:calc(100vw - 24px)}
  .cookie-bar .cookie-in{padding:18px 18px 16px;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px)}
  .ck-acts{gap:4px 14px}
  .ck-row{flex-wrap:wrap;gap:8px 18px}
  .ck-row > div{flex:1 1 100%}
  .ck-row .ck-always,.ck-row .ck-switch{margin-left:auto}
}

/* Home introduction (v74 to v92): replaced by the Model 1 statement in 36-foto-bertumpuk.css (v96) */

/* Partner logo conveyor belt under the hero (v72): white band, logos in their own colours, no controls; it still pauses
   on hover and keyboard focus */
.brand-band{background:#fff;color:var(--ink);position:relative;z-index:2;border-bottom:1px solid var(--ice-2)}
.brand-band-inner{display:flex;align-items:center;padding:18px clamp(24px,4.5vw,96px);max-width:var(--max);margin:0 auto}
.brand-band .marquee{padding:6px 0}
.brand-band .marquee-track li{margin-left:84px}
.brand-band .marquee-track li.feat + li{margin-left:84px}
.brand-band .bi{padding:0}
.brand-band .bi img,.brand-band li.feat .bi img{height:38px;max-width:190px;opacity:1;transition:transform .25s}
.brand-band .bi:hover img{transform:translateY(-1px)}
@media (max-width:900px){
  .brand-band-inner{padding:12px clamp(20px,4.5vw,96px)}
  .brand-band .marquee{width:auto;flex:1}
  .brand-band .bi img,.brand-band li.feat .bi img{height:30px;max-width:150px}
  .brand-band .marquee-track li,.brand-band .marquee-track li.feat + li{margin-left:56px}
}
@media print{ .brand-band{display:none} .who{background:#fff} }

/* v78: product photos sit on white. The photos are shot on white, so the tile behind them is white too and the picture
   blends into the card instead of floating as a white rectangle on light blue; a hairline in the card's line colour keeps
   the tile's edge where it is needed. Tiles that still wait for a photo (.ph placeholder) keep the light blue so they
   read as "photo to come", and the category text tiles (.ctile) are unchanged. */
.pimg.has,.pimg:has(img){background:#fff;border:1px solid var(--ice-2)}   /* white as soon as a photo is on its way, so nothing flashes from blue to white */
.pimg.err{background:var(--paper-2);border:0}
.pimg img{padding:7%}
.detail .pimg img{padding:4%}
.rec .th,.search-res .th,.msg .cp .th,.sup-ph .th{background:#fff;border:1px solid var(--ice-2)}
.hs-img .pimg,.sol-thumbs .th .pimg{border:0}
@media print{ .pimg{border:0} }

/* v80: policies. Footer: four plain links without underline (hover turns white), like the footers of international
   consultancies. Cookie settings: a small fixed tab in the bottom left corner instead of a footer link; it hides while the
   cookie card is open and climbs above the quotation and comparison bars. Legal pages: a side column with the four
   documents, the contents of the open document and the effective date; sections numbered 1.0, paragraphs 1.1 … */
.foot-legal{gap:6px 26px}
.foot-legal a,.foot-legal button{text-decoration:none;color:var(--text-3);font-size:13px}
.foot-legal a:hover,.foot-legal button:hover{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}   /* v96 graphite: grey to graphite is a small step, so the hover underlines */
/* v96: the cookie settings control moved from the fixed tab in the bottom left corner to the contact dock (25-dock.css) */
@media (max-width:620px){
}
.legal-side{position:sticky;top:90px;display:grid;gap:22px;align-self:start;max-height:calc(100vh - 110px);overflow:auto;scrollbar-width:thin}
.legal-nav{position:static;top:auto}
.legal-nav .upd,.legal-toc .upd{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin:0 12px 6px}
.legal-toc{display:grid;gap:2px;border-top:1px solid var(--line);padding-top:16px}
.legal-toc a{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;align-items:baseline;padding:6px 12px;border-radius:6px;font-size:13px;line-height:1.35;color:var(--text-2)}
.legal-toc a span{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--text-3)}
.legal-toc a:hover{color:var(--ink);background:var(--paper-2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.legal-toc .upd:last-child{margin-top:14px;text-transform:none;letter-spacing:.02em;font-size:12px;line-height:1.5}
.legal h2 .num{min-width:34px}
.legal p.np{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px}
.legal p .pn{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--text-3);padding-top:3px}
.legal p.legal-contact a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}   /* a link in running text: graphite like the text around it, so the underline marks it */
@media (max-width:900px){
  .legal-side{position:static;gap:14px}
  .legal-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .legal-nav .upd{grid-column:1/-1}
  .legal-toc a{padding:6px 8px}
  .legal p.np{grid-template-columns:34px minmax(0,1fr);gap:8px}
}



/* v82: the telecom tile motif that used to sit here moved to 31-v83-aesthetic.css as the aurora and signal ring treatment */
/* v81: the cookie card title in the same face and case as the category headings */
.ck-title{font-size:14px;letter-spacing:0;text-transform:none;font-weight:700;color:var(--ink)}
@media print{ .section.alt,.finder-section{background:#fff} }

/* v82: smoother scrolling and animation. The solid header never blurs what is behind it (a blur over a playing video
   is re-rendered on every frame; v96: it is white, see 27-redesign.css), nor does the quotation bar (v96: white too,
   06-search-quote-contact.css). The brand marquee and the floating featured product run on their own compositor layers,
   and the marquee is paused while its band is off screen (JS toggles .off-view on #brandBand). */
.marquee-track{will-change:transform}
.brand-band .marquee{contain:layout paint}
.hs-slide.on .hs-img .pimg.has img{will-change:transform}
.off-view .marquee-track{animation-play-state:paused}

/* ---------- v68: TKDN page visuals: value bars, process diagram, threshold chart (the ring gauge went with the fact tiles, v96) ---------- */

/* Thin bar under every TKDN value: the track is the full 0 to 100 % scale, the fill is the certified value */
.tk-bar{display:block;position:relative;height:5px;border-radius:999px;background:var(--rule);margin:8px 0 6px;overflow:hidden}
.tk-bar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--v,0) * 1%);border-radius:999px;background:linear-gradient(90deg,var(--ink-2),var(--ink));transition:width .9s cubic-bezier(.2,.7,.2,1)}
.tk-bar.sm{height:4px;margin:6px 0 0;max-width:120px}
.tkdn-card .tk-vals b{margin-bottom:0}

/* Certification path (v96 Model 1): one white panel with a hairline and the cut corner (36-foto-bertumpuk.css), the
   five steps as columns divided by vertical hairlines; two columns on tablets, a list ruled by horizontal hairlines on
   phones. The panel overlaps the photo banner of its section (.sec-banner). */
.tkdn-steps{position:relative;gap:0;padding:40px;background:#fff;border:1px solid var(--rule)}
.tkdn-steps li{padding:0 24px;border-left:1px solid var(--rule)}
.tkdn-steps li:first-child{border-left:0;padding-left:0}
.tkdn-steps li:last-child{padding-right:0}
.tkdn-steps h3{font-size:16.5px;font-weight:700;color:var(--ink)}
.tkdn-steps p{font-size:13.5px;color:var(--text-2)}
@media (max-width:980px) and (min-width:761px){
  .tkdn-steps{row-gap:28px}
  .tkdn-steps li:nth-child(odd){border-left:0;padding-left:0}
  .tkdn-steps li:nth-child(even){padding-right:0}
}
@media (max-width:760px){
  .tkdn-steps{grid-template-columns:minmax(0,1fr);padding:24px}
  .tkdn-steps li{border-left:0;border-top:1px solid var(--rule);padding:20px 0}
  .tkdn-steps li:first-child{border-top:0;padding-top:0}
  .flow-ico{margin-bottom:14px}
}

/* Threshold chart: the certified values as thin bars on one 0 to 100 % scale with the two Perpres thresholds as
   reference lines. Single series, so no series legend; the legend below names the two lines. */
.tkdn-rule{display:block;border:0;border-radius:0;background:var(--stone);padding:22px 24px 18px;margin:10px 0 24px;box-shadow:none}
.tkdn-rule > div.tk-chart{display:block;border:0;border-radius:0;background:transparent;padding:0;gap:0}
.tkc{display:grid;gap:0;font-variant-numeric:tabular-nums}
.tkc-head,.tkc-row,.tkc-axis{display:grid;grid-template-columns:minmax(120px,170px) minmax(0,1fr) 64px;gap:0 14px;align-items:center}
.tkc-group{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--text-3);margin:14px 0 8px}
.tkc-group:first-child{margin-top:0}
.tkc-row{min-height:30px}
.tkc-row + .tkc-row{margin-top:8px}
.tkc-l{font-size:13px;color:var(--text-2);line-height:1.3;min-width:0}
.tkdn-rule b.tkc-v{font-family:var(--font-display);font-weight:700;font-size:14.5px;letter-spacing:-.01em;color:var(--ink);text-align:right;line-height:1.2}
.tkc-track{position:relative;display:block;height:14px;border-radius:999px;background:#fff}
.tkc-bar{position:absolute;left:0;top:0;bottom:0;width:calc(var(--v,0) * 1%);border-radius:999px;background:linear-gradient(90deg,var(--ink-2),var(--ink));transition:width .9s cubic-bezier(.2,.7,.2,1)}
/* reference lines: drawn on every row and extended into the row gaps so they read as one continuous line */
.tkc-row .tkc-track::before,.tkc-row .tkc-track::after{content:"";position:absolute;top:-6px;bottom:-6px;width:0;border-left:2px dashed var(--text-3);opacity:.55;pointer-events:none}
.tkc-row .tkc-track::before{left:calc(var(--t25,25) * 1%);margin-left:-1px}
.tkc-row .tkc-track::after{left:calc(var(--t40,40) * 1%);margin-left:-1px;border-left:2px solid var(--accent);opacity:1}
.tkc-head{margin-bottom:22px}
.tkc-head .tkc-track{height:0;background:transparent;overflow:visible}
.tkc-mark{position:absolute;top:0;transform:translateX(-50%);font-style:normal}
.tkc-mark.t25{left:calc(var(--t25,25) * 1%)}
.tkc-mark.t40{left:calc(var(--t40,40) * 1%)}
.tkc-mark i{display:block;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--text-3);padding:3px 7px;border-radius:999px;background:#fff;white-space:nowrap}
.tkc-mark.t40 i{color:var(--ink);background:var(--accent)}
.tkc-axis{margin-top:10px}
.tkc-axis .tkc-track{height:auto;background:transparent;display:flex;justify-content:space-between;border-top:1px solid var(--rule);padding-top:6px}
.tkc-axis .tkc-track i{font-style:normal;font-size:10.5px;color:var(--text-3);letter-spacing:.04em}
.tk-legend{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px}
.tk-legend li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;font-size:13px;color:var(--text-2);line-height:1.45}
.tkdn-rule .tk-legend li b{font-family:var(--font-display);font-weight:700;font-size:1.25rem;color:var(--ink);line-height:1;padding-left:12px;position:relative;letter-spacing:-.01em}
.tk-legend li b::before{content:"";position:absolute;left:0;top:2px;bottom:-2px;width:0;border-left:2px dashed var(--text-3)}
.tk-legend li.t40 b::before{border-left:2px solid var(--accent)}
.tkdn-rule .src{margin:14px 0 0}
@media (max-width:640px){
  .tkdn-rule{padding:18px 14px 14px}
  .tkc-head,.tkc-axis{grid-template-columns:minmax(0,1fr) 52px;gap:0 10px}
  .tkc-head .tkc-l,.tkc-axis .tkc-l{display:none}
  .tkc-head{margin-bottom:22px}
  .tkc-mark i{font-size:10px;padding:2px 5px}
  .tkc-mark.t25{top:-18px}   /* the two pills would collide on a narrow track, so the 25 % pill sits one row higher */
  .tkc-row{grid-template-columns:minmax(0,1fr) 52px;grid-template-areas:"l l" "t v";gap:4px 10px;min-height:0}
  .tkc-row .tkc-l{grid-area:l;font-size:12.5px}
  .tkc-row .tkc-track{grid-area:t}
  .tkc-row .tkc-v{grid-area:v}
  .tkc-row + .tkc-row{margin-top:12px}
  .tkc-row .tkc-track::before,.tkc-row .tkc-track::after{top:-3px;bottom:-3px}
  .tkdn-rule b.tkc-v{font-size:13px}
  .tk-legend{grid-template-columns:1fr}
}
@media print{ .tk-bar,.tkc-bar{transition:none} }

/* ---------- v69: page layout after the product family pages of leading closure makers ---------- */
.tkdn-head .head-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
/* in page menu under the head, sticky below the site header (v96: a white bar, the open entry underlined in gold) */
.tkdn-jump{position:sticky;top:var(--nav-h);z-index:5;background:#fff;border-bottom:1px solid var(--rule)}
.tkdn-jump .container{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-top:6px;padding-bottom:6px}
.tkdn-jump .container::-webkit-scrollbar{display:none}
.tkdn-jump button{flex-shrink:0;border:0;background:transparent;color:var(--text-2);font-family:var(--font-body);font-size:13.5px;font-weight:600;padding:10px 14px;border-radius:0;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.tkdn-jump button:hover{background:var(--stone);color:var(--ink)}
.tkdn-jump button.on{background:transparent;color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.tkdn-prose section{scroll-margin-top:calc(var(--nav-h) + 64px)}
#tkdnProducts,#tkdnFlow,#tkdnGuide{scroll-margin-top:calc(var(--nav-h) + 48px)}
@media (max-width:900px){
  .tkdn-jump{top:var(--nav-h)}
  .tkdn-jump button{font-size:13px;padding:9px 12px}
}

/* ---------- v74: certificate holder card in the TKDN page head ---------- */
.tkdn-holder{display:flex;align-items:center;gap:22px;background:#fff;border:1px solid var(--rule);border-radius:0;padding:18px 24px;max-width:760px;margin-top:26px;box-shadow:none}
.tkdn-holder-logo{height:46px;width:auto;flex-shrink:0;color:#111214;fill:currentColor}
.tkdn-holder > div{min-width:0}
.tkdn-holder-l{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--text-3);margin-bottom:4px}
.page-head .tkdn-holder p{margin:0;font-size:14.5px;line-height:1.6;color:var(--text-2);max-width:none}
.tkdn-head .head-cta{margin-top:24px}
@media (max-width:640px){
  .tkdn-holder{flex-direction:column;align-items:flex-start;gap:12px;padding:16px 18px}
  .tkdn-holder-logo{height:38px;max-width:100%}
}

/* =========================================================
   v83: the SSK mark as thin line art watermark, large and cropped by the edge (after the outlined monogram on
   Renowned's site), on the vision band of the About page and in the footer. v96 Model 1: both are light (ivory and
   stone), so the mark is drawn in the warm hairline colour at full opacity: faint line art, never a dark ground.
   ========================================================= */
.wm-mark{position:absolute;right:-140px;top:-170px;width:760px;height:760px;color:var(--rule);opacity:1;pointer-events:none;z-index:0}
.vm-band .container{position:relative;z-index:1}
footer{position:relative;overflow:hidden}
footer .container{position:relative;z-index:1}
footer .wm-mark{right:-200px;top:auto;bottom:-260px;width:820px;height:820px}
@media (max-width:760px){ .wm-mark{width:460px;height:460px;right:-120px;top:-110px} footer .wm-mark{width:520px;height:520px;right:-170px;bottom:-200px} }

/* =========================================================
   v96: mega menus (Produk, Solusi), after the product and solution menus of exfo.com. A full width panel under the bar:
   the categories (icon, name, count) in two columns, the principals, and the tools; Solusi lists the customer segments.
   On phones the same lists stack inside the accordion of the menu sheet. The panels are filled by renderNavMenus().
   ========================================================= */
.nav-dd.nav-mega{position:static}
.dd-menu.mega{left:0;right:0;top:calc(100% + 4px);min-width:0;padding:22px 26px 24px;border-radius:0;flex-direction:row;gap:30px;align-items:flex-start}
.dd-menu.mega.mega-two{left:auto;right:auto;min-width:min(720px,100%)}
.nav-dd.open .dd-menu.mega{display:flex}
/* v96: the panel hangs 22 px under the trigger (the bar is taller than the button); the invisible bridge covers the whole
   gap, so the pointer can travel from the trigger into the panel without the panel closing (the regular dropdowns keep
   their 12 px bridge, their gap is 10 px). Hover intent in JS (navHoverIntent in 26-init.js) adds a short grace period
   and keeps one panel open at a time. */
.nav-dd.nav-mega .dd-menu.mega::before{top:-28px;height:28px}
@media (hover:hover) and (min-width:981px){
  .nav-mega:hover .dd-menu.mega,.nav-dd.hov .dd-menu{display:flex}
  .nav-dd.hov .dd-btn{color:var(--nav-link-on);background:var(--nav-hover)}   /* the hover colours of the bar's current state (27-redesign.css) */
  .nav-dd.hov .dd-btn svg{transform:rotate(180deg)}
  .nav.nav-hover-off .nav-dd:not(.open).hov .dd-menu{display:none}
  /* keyboard: a panel opens with Enter or Space on its button (.open) and closes on Escape or when focus leaves it; focus alone
     no longer opens it (the full width panel would cover the page on every Tab stop) */
  .nav-dd:focus-within:not(.open):not(:hover) .dd-menu{display:none}
  /* after a navigation from inside a panel the pointer is still over it: hover is paused until it leaves the bar (19-router.js) */
  .nav.nav-hover-off .nav-dd:not(.open):hover .dd-menu{display:none}
}
.mega-col{flex:1 1 0;min-width:0}
.mega-col.mega-cats{flex:2.3 1 0}
.mega-col.mega-sols{flex:1.6 1 0}
.mega-h{margin:0 0 10px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.mega-col ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mega-cats ul{grid-template-columns:1fr 1fr;gap:2px 14px}
.nav-links .dd-menu.mega a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:0;color:var(--text-2);font-size:14px;line-height:1.3;white-space:normal}
.nav-links .dd-menu.mega a .icon{flex:0 0 auto;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:0;background:var(--ivory);color:var(--ink);clip-path:var(--oct)}
.nav-links .dd-menu.mega a .icon svg{width:18px;height:18px}
.nav-links .dd-menu.mega a .tx{display:block;min-width:0}
.nav-links .dd-menu.mega a b{display:block;font-weight:600;color:var(--ink)}
.nav-links .dd-menu.mega a small{display:block;font-size:12px;color:var(--text-2);margin-top:1px}
.nav-links .dd-menu.mega a[aria-current="page"]{background:var(--cream);box-shadow:none}
.mega-brands ul{grid-template-columns:1fr 1fr}
.mega-tools a{font-weight:500}
/* 404 view (v96) */
.nf-actions{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:980px){
  .dd-menu.mega,.dd-menu.mega.mega-two{flex-direction:column;gap:4px;padding:0 0 8px 14px;min-width:0}
  .mega-cats ul,.mega-brands ul{grid-template-columns:1fr}
  .mega-h{margin:12px 0 4px;color:var(--text-3)}   /* v96: the phone menu is a white sheet (27-redesign.css) */
  .nav-links .dd-menu.mega a{color:var(--fg);padding:9px 12px}
  .nav-links .dd-menu.mega a .icon{display:none}
  .nav-links .dd-menu.mega a b{color:inherit;font-weight:500}
  .nav-links .dd-menu.mega a small{color:var(--text-3)}
  .nav-links .dd-menu.mega a[aria-current="page"]{background:var(--cream);color:var(--ink)}
}

/* skip link (v96): the first Tab stop, visible only while focused */
.skip{position:absolute;left:16px;top:-60px;z-index:200;padding:10px 16px;border-radius:999px;background:var(--accent);color:var(--nav-gold-fg,var(--fg));font-weight:600;transition:top .15s}   /* the label of the bar's gold button: graphite, near black over the hero (27-redesign.css) */
.skip:focus{top:12px;outline:2px solid #fff;outline-offset:2px}
/* the quotation button inside the phone menu (the bar's own button is hidden there) */
.nav-links .nav-cta-m{display:none}
@media (max-width:980px){ .nav-links .nav-cta-m,.nav-links .nav-cta-m:hover{display:inline-flex;justify-content:center;margin:10px 14px 4px;padding:12px 16px;background:var(--accent);border-color:var(--accent);color:var(--fg);border-radius:999px} }   /* only in the open (white) sheet: graphite on gold */

/* =========================================================
   v96: the TKDN bento, on the home page (#tkdnBento, on the ivory band) and at the top of the TKDN page
   (#tkdnBentoPage). After the way slrconsulting.com presents a service line: left, the copy and a vertical tab list
   with a thin rule on its left edge (gold on the open tab, an arrow that slides on hover); right, one grid of square
   tiles with warm hairlines and no shadow (Model 1: white figures and text, the cut out product as a tall image tile
   on stone with the cut corner, gold for the open figure) on one 12 px grid. Every tile answers the pointer: the
   figures fill gold (they are buttons that open their tab), the photo switches product with arrows and dots, the
   product rows of the "products" tab light up and swap the photo, the issuer tile tints. Layout: four columns, three
   rows with the photo two rows tall (also on tablets, where the tabs form a 2 x 2 grid); two columns on phones.
   Markup in 010-home.html / 040-tkdn.html, content from renderTkdnBento (12-guides-tkdn.js). Also here: the TKDN
   cards of the TKDN page as a data sheet (v96).
   ========================================================= */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tkb{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.3fr);gap:40px clamp(32px,5vw,72px);align-items:start}
.tkb-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.tkb-copy .eyebrow{margin-top:0;margin-bottom:14px}   /* the copy and the grid share a top edge */
.tkb-copy .title{margin:0;max-width:22ch}
.tkb-copy > p{color:var(--text-2);margin:14px 0 0;max-width:52ch}
.tkb-copy .btn{margin-top:28px}

/* the vertical tab list */
.tkb-tabs{display:grid;gap:2px;margin-top:30px;width:100%;max-width:460px}
.tkb-tabs [role=tab]{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:15px 16px 15px 18px;border:0;border-left:2px solid var(--rule-2);border-radius:0;background:transparent;color:var(--text-2);font-family:var(--font-body);font-size:14.5px;font-weight:500;line-height:1.3;cursor:pointer;transition:color .18s,border-color .18s,background .18s}
.tkb-tabs [role=tab] span{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--text-3);width:22px;flex-shrink:0}
.tkb-tabs [role=tab] i{font-style:normal;flex:1 1 auto;min-width:0}
.tkb-tabs [role=tab] svg{width:16px;height:16px;flex-shrink:0;opacity:.45;transition:transform .18s,opacity .18s}
.tkb-tabs [role=tab]:hover{color:var(--ink);border-left-color:var(--ink);background:var(--stone)}
.tkb-tabs [role=tab]:hover svg{opacity:1;transform:translateX(3px)}
.tkb-tabs [role=tab].on{color:var(--ink);font-weight:700;border-left-color:var(--accent);background:var(--cream)}
.tkb-tabs [role=tab].on span,.tkb-tabs [role=tab].on svg{color:var(--ink);opacity:1}
.tkb-tabs [role=tab]:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}

/* the tile grid */
.tkb-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-areas:"s1 s2 ph ph" "tx tx ph ph" "s3 s3 is is";gap:12px;min-width:0}
.tkb-grid > *{min-width:0;border:1px solid var(--rule);border-radius:0;background:#fff;box-sizing:border-box;box-shadow:none}

/* the figures: buttons that open their tab; the label at the top, the figure at the bottom sized from the tile (cqi units,
   so "55,96%" at 3.7 em of its font size always fits the content box), gold when open or under the pointer */
.tkb-stat{position:relative;container-type:inline-size;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:18px 20px 20px;min-height:200px;text-align:left;cursor:pointer;font-family:var(--font-body);color:var(--ink);overflow:hidden;transition:background .22s,border-color .22s,transform .22s,color .22s}
.tkb-stat > svg{position:absolute;right:16px;top:16px;width:16px;height:16px;opacity:.45;transition:opacity .22s,transform .22s}   /* the same arrow as the tab list: this tile opens a tab */
.tkb-stat small{display:block;margin-bottom:auto;padding-right:14px;font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.35;color:var(--text-3);transition:color .22s}
.tkb-stat b{display:block;max-width:100%;font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,2.3vw,2.5rem);font-size:clamp(1.6rem,26cqi,40px);letter-spacing:-.03em;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink)}   /* the figure stays graphite (#333333), also on the gold tile */
.tkb-stat span{font-size:13.5px;line-height:1.35;color:var(--text-2);transition:color .22s}
.tkb-stds{display:grid;width:100%;margin:0 0 2px}
.tkb-std{display:flex;flex-direction:column;gap:1px;padding:7px 0;border-top:1px solid var(--rule);transition:border-color .22s}
.tkb-std:first-child{border-top:0;padding-top:0}
.tkb-std code{font-family:var(--font-mono);font-size:13px;font-size:clamp(11px,11cqi,15px);font-weight:700;letter-spacing:0;line-height:1.25;white-space:nowrap;color:var(--ink);font-variant-numeric:tabular-nums;transition:color .22s}
.tkb-std em{font-style:normal;font-size:12px;line-height:1.3;color:var(--text-3);transition:color .22s}
.tkb-stat.a{grid-area:s1}.tkb-stat.b{grid-area:s2}.tkb-stat.c{grid-area:s3}
.tkb-stat.on{background:var(--accent);border-color:var(--accent);color:var(--fg)}
.tkb-stat:hover:not(.on){background:var(--cream);border-color:var(--accent)}   /* the hover is a tint, the open tab the solid fill, as in the tab list */
.tkb-stat.on span,.tkb-stat.on small,.tkb-stat.on .tkb-std em{color:var(--fg-body)}   /* on gold only #333333 and #434342 (7.9 and 6.2:1), solid: the greys and a translucent ink fall under 4.5:1 */
.tkb-stat.on .tkb-std code{color:var(--fg)}
.tkb-stat.on .tkb-std{border-top-color:rgba(51,51,51,.18)}
.tkb-stat:hover > svg,.tkb-stat.on > svg{opacity:1;transform:translateX(3px)}
.tkb-stat:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* the photo tile: a tall image well on stone (no hairline, the cut corner), one cut out product at a time, arrows and dots */
.tkb-grid > .tkb-photo{grid-area:ph;position:relative;display:flex;flex-direction:column;background:var(--stone-2);border:0;padding:16px 18px 14px;overflow:hidden}
.tkb-cap{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
.tkb-phs{position:relative;flex:1 1 auto;min-height:420px;margin-top:6px}
.tkb-ph{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;gap:8px;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.tkb-ph.on{opacity:1;visibility:visible;transition-delay:0s}
.tkb-ph a{position:relative;display:block;flex:1 1 auto;min-height:0}
.tkb-ph img{position:absolute;left:7%;top:50%;width:86%;height:min(92%,420px);object-fit:contain;transform:translateY(-50%);transition:transform .45s cubic-bezier(.2,.7,.2,1)}   /* contained in the tile whatever the photo's ratio, centred */
.tkb-ph a:hover img{transform:translateY(-50%) scale(1.03)}
.tkb-ph figcaption{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0}
.tkb-ph figcaption b{font-weight:600;font-size:13.5px;color:var(--ink);line-height:1.3;min-width:0;text-wrap:balance}
.tkb-ph figcaption span{flex-shrink:0;padding:4px 11px;border-radius:999px;background:var(--ink);color:#fff;font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.tkb-nav{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.tkb-arrow{width:34px;height:34px;border-radius:50%;border:1px solid var(--rule-2);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0;transition:border-color .15s,background .15s,color .15s}
.tkb-arrow svg{width:14px;height:14px}
.tkb-arrow:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.tkb-dots{display:flex;gap:0}
.tkb-dots button{position:relative;width:24px;height:24px;border:0;padding:0;background:none;cursor:pointer}   /* a 24 px target around an 8 px dot */
.tkb-dots button::before{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--rule-2);transition:background .15s,transform .15s}
.tkb-dots button:hover::before{background:var(--ink-2)}
.tkb-dots button.on::before{background:var(--ink);transform:scale(1.3)}
.tkb-dots button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;border-radius:50%}
.tkb-photo.n1 .tkb-nav{display:none}

/* the text tile: the open tab's content on white */
.tkb-text{grid-area:tx;position:relative;display:flex;flex-direction:column;gap:12px;padding:24px 26px;min-height:244px;color:var(--text);transition:opacity .18s}
.tkb-text.swap{opacity:0}
.tkb-text h3{margin:0;font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-.012em;color:var(--ink)}
.tkb-text > p{margin:0;color:var(--text-2);font-size:14.5px;line-height:1.6;max-width:none}
.tkb-list{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:8px}
.tkb-list li{display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline;padding-top:8px;border-top:1px solid var(--rule);font-size:13.5px;line-height:1.4}
.tkb-list b{color:var(--ink);font-weight:600}
.tkb-list span{color:var(--text-2)}
.tkb-prods{display:grid;gap:8px;margin-top:2px}
.tkb-prod{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:center;padding:10px 14px;border:1px solid var(--rule);border-radius:0;color:var(--ink);text-decoration:none;transition:background .18s,border-color .18s}
.tkb-prod:hover,.tkb-prod:focus-visible{background:var(--cream);border-color:var(--accent)}
.tkb-prod b{grid-column:1;font-weight:600;font-size:13.5px;line-height:1.3}
.tkb-prod .tkb-chips{grid-column:1;grid-row:2}
.tkb-prod em{grid-column:2;grid-row:1/3;display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:12.5px;color:var(--ink);white-space:nowrap}
.tkb-prod em svg{width:14px;height:14px;transition:transform .18s}
.tkb-prod:hover em svg{transform:translateX(3px)}
.tkb-chips{display:flex;flex-wrap:wrap;gap:6px}
.tkb-chips i{display:inline-flex;align-items:baseline;gap:5px;font-style:normal;font-family:var(--font-display);font-weight:800;font-size:12px;padding:3px 9px;border-radius:999px;background:var(--accent);color:var(--fg);font-variant-numeric:tabular-nums}
.tkb-chips i small{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--fg-body);white-space:nowrap}   /* the core count, so two equal values read as two specifications (solid #434342 on gold, 6.2:1) */
.tkb-act{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding:8px 0 2px;align-self:flex-start;border:0;border-bottom:1px solid var(--rule-2);background:none;color:var(--ink);font-family:var(--font-body);font-weight:600;font-size:14px;text-decoration:none;cursor:pointer}
.tkb-act:hover{border-bottom-color:var(--ink)}
.tkb-act svg{width:14px;height:14px}
.tkb-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:6px}

/* the issuer tile: the Ministry's logo and the public verification route */
.tkb-issuer{grid-area:is;display:flex;flex-direction:column;gap:5px;padding:18px 18px 16px;text-decoration:none;color:var(--ink);transition:border-color .18s,background .18s}
.tkb-issuer img{display:block;width:auto;height:46px;max-width:100%;object-fit:contain;object-position:left center;margin-bottom:auto}
.tkb-issuer b{font-weight:700;font-size:13.5px;margin-top:14px;line-height:1.3}
.tkb-issuer span{font-size:12px;line-height:1.35;color:var(--text-2)}
.tkb-issuer em{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-style:normal;font-size:12px;line-height:1.35;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(51,51,51,.35)}
.tkb-issuer em svg{width:12px;height:12px;flex-shrink:0}
.tkb-issuer:hover{border-color:var(--ink);background:var(--stone)}

/* the TKDN cards (TKDN page): a data sheet, the way Corning and CommScope present a specification table. The
   specification on the left, the TKDN value on the right in tabular figures sized from the card (the card is a query
   container, so nothing inside reads the viewport), a hairline per row, the document numbers as a small id line that
   copies on click, one gold tag on the highest value, a two column facts list, a hairline footer with the two actions. */
.tkdn-card{container-type:inline-size;border:1px solid var(--rule);border-radius:0;box-shadow:none;padding:0 28px 24px;gap:0}
/* v96: the card opens with an ivory band. The band covers the card's top left corner, so it repeats the card's hairline
   along the cut (36-foto-bertumpuk.css; the card draws it from its border box, the band starts 1px inside: -1px) */
.tkdn-card .tk-head{background:linear-gradient(135deg,transparent 50%,var(--cut-line,var(--rule)) 50%,var(--cut-line,var(--rule)) calc(50% + 1.2px),transparent calc(50% + 1.2px)) -1px -1px/var(--cut,20px) var(--cut,20px) no-repeat,var(--ivory);margin:0 -28px 20px;padding:16px 28px;border-bottom:1px solid var(--rule)}
.tkdn-card h3{margin:0 0 16px}
.tk-sheet{display:grid;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.tk-sheet-h{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:9px 0 8px;border-bottom:1px solid var(--rule);font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.tk-sheet-h span:last-child{text-align:right}
.tk-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"spec val" "ids val";column-gap:16px;row-gap:5px;align-items:start;margin:0 -10px;padding:12px 10px 11px;border-radius:0;transition:background .16s}
.tk-row + .tk-row::before{content:"";position:absolute;left:10px;right:10px;top:0;border-top:1px solid var(--rule)}   /* the hairline stays on the sheet's edges while the hover tint bleeds past them */
.tk-row.best{background:var(--ivory)}
.tk-row:hover{background:var(--stone)}   /* after .best, so the gold tagged row answers the pointer too */
.tk-spec{grid-area:spec;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0;font-size:14.5px;font-weight:600;line-height:1.35;color:var(--ink)}
.tk-tag{display:inline-block;padding:4px 7px 3px;border-radius:999px;background:var(--accent);color:var(--fg);font-family:var(--font-mono);font-style:normal;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1}
.tk-v{grid-area:val;align-self:start;padding-top:1px;font-family:var(--font-display);font-weight:800;font-size:clamp(21.6px,2vw,32px);font-size:clamp(21.6px,11.5cqi,32px);letter-spacing:-.02em;line-height:1.1;color:var(--ink);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tk-row.best .tk-v{font-weight:800}
.tk-ids{grid-area:ids;display:flex;flex-wrap:wrap;gap:2px 10px;min-width:0}
.tk-id{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:2px 7px;max-width:100%;min-height:24px;margin:0 0 0 -4px;padding:1px 4px;border:0;border-radius:0;background:none;cursor:pointer;font-family:var(--font-mono);font-size:12px;line-height:1.5;color:var(--text-2);text-align:left;font-variant-numeric:tabular-nums;transition:background .15s,color .15s}
.tk-id i{font-style:normal;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.tk-id code{font-family:inherit;font-size:inherit;font-weight:500;color:inherit;white-space:nowrap}   /* a number never breaks; the label may wrap before it */
.tk-id svg{width:12px;height:12px;align-self:center;opacity:.45;color:var(--ink);transition:opacity .15s}   /* the copy glyph is visible at rest, like the tab arrows */
.tk-id:hover,.tk-id:focus-visible{background:#fff;color:var(--ink)}
.tk-id:hover svg,.tk-id:focus-visible svg{opacity:.8}
.tk-id:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.tk-id.ok svg{display:none}
.tk-id .tk-done:empty{display:none}
.tk-id .tk-done{align-self:center;font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--ink)}
.tk-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;margin:18px 0 20px}
.tk-facts > div{min-width:0}
.tk-facts dt{margin:0 0 3px;font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.tk-facts dd{margin:0;font-size:13.5px;font-weight:500;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.tk-facts dd .tk-id{margin-left:-4px;font-size:13px;color:var(--ink)}
.tkdn-card .tk-links{margin-top:auto;padding-top:16px;border-top:1px solid var(--rule)}   /* v96: the cards of one row stretch to one height (the grid's default), the actions at the foot of each */
.tk-facts .nb{white-space:nowrap}

/* the certificate tables (TKDN page section 3, product pages): the same language as the cards, no bars */
.tkdn-table{container-type:inline-size;border:1px solid var(--rule);border-radius:0;box-shadow:none;background:#fff}   /* a container too, so the facts list goes single column in a narrow table */
.tkdn-table h3{background:var(--ivory);border-bottom:1px solid var(--rule);padding:18px 20px 14px;font-size:1.12rem;font-weight:600;color:var(--ink)}
.tkdn-table h4{background:var(--ivory);border-bottom:1px solid var(--rule);padding:14px 20px 10px}
.tkdn-table th{background:var(--ivory);padding:10px 20px 8px;border-bottom:1px solid var(--rule);font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);white-space:nowrap}
.tkdn-table td{padding:12px 20px;border-top:1px solid var(--rule);font-size:14px;color:var(--ink)}
.tkdn-table tbody tr:first-child td{border-top:0}
.tkdn-table td b{font-family:var(--font-display);font-weight:700;font-size:1.2rem;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.tkdn-table td:nth-child(n+3){font-family:var(--font-mono);font-size:12.5px;color:var(--text-2);font-variant-numeric:tabular-nums;white-space:nowrap}   /* a number never breaks; .tk-scroll scrolls instead */
.tkdn-table .tk-facts{margin:0;padding:16px 20px 4px;border-top:1px solid var(--rule)}
.tkdn-table .tk-links{padding:14px 20px 18px;gap:16px}
@container (max-width:430px){
  .tk-row{grid-template-areas:"spec val" "ids ids"}
  .tk-facts{grid-template-columns:minmax(0,1fr);gap:10px}
}

/* desktop: the identifiers stay with their heading and the issuer text with its logo; only the footnote and the link sit at the foot */
@media (min-width:1101px){
  .tkb-stat.c small{margin-bottom:14px}
  .tkb-stat.c .tkb-stds{margin-bottom:auto}
  .tkb-std{padding:10px 0}
  .tkb-issuer img{margin-bottom:18px}
  .tkb-issuer b{margin-top:0}
  .tkb-issuer em{margin-top:auto}
}
@media (min-width:1101px) and (max-width:1439px){ .tkb-stat{padding:18px 16px 16px} .tkb-stat > svg{right:14px;top:14px} }   /* laptop widths: tiles of 131 to 160 px */
@media (max-width:1100px){
  .tkb{grid-template-columns:minmax(0,1fr);gap:28px}
  .tkb-tabs{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .tkb-tabs [role=tab]{border:1px solid var(--rule-2);border-left-width:2px}
  .tkb-stat{min-height:150px}
}
@media (max-width:760px){
  .tkb-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"s1 s2" "ph ph" "tx tx" "s3 s3" "is is"}
  .tkb-phs{min-height:300px}
}
@media (max-width:640px){
  .tkb-tabs{grid-template-columns:minmax(0,1fr);gap:4px}
  .tkb-tabs [role=tab]{padding:13px 12px 13px 14px;font-size:14.5px}
  .tkb-stat{min-height:0;padding:18px 18px 16px}
  .tkb-text{padding:20px 18px;min-height:0}
  .tkb-prod{grid-template-columns:minmax(0,1fr)}
  .tkb-prod em{grid-column:1;grid-row:auto}
}
@media (hover:none){ .tk-id svg{opacity:.6} }
html[lang="zh-CN"] :is(.tkb-stat small,.tkb-cap,.tk-sheet-h,.tk-facts dt,.tkdn-card .tk-note,.tk-id i,.tk-tag,.tkb-tabs [role=tab] span,.tkdn-table th){letter-spacing:.04em}   /* no Latin tracking on CJK labels */

/* =========================================================
   v96: Model 1 "Foto Bertumpuk" (stacked photos), the light arrangement chosen by the owner after SLR Consulting.
   Loaded last, so it settles ties with the older layers.

   GROUNDS: white (plain .section), warm stone (.section.alt, the finder, the client wall, the banner sections, the
   footer) and ivory (the statement after the logo belt, the home TKDN band, every page head, the vision band): no navy
   or ice blue ground anywhere below the home video hero. TYPE is neutral graphite (#333333 headings, figures, links and
   eyebrows, #434342 running text, #5E5D5C secondary, #6B6B6A small labels; on the gold card only the first two); the
   logo navy is only the fill of the filled buttons and pressed controls (white text) and the logo mark. The hero and
   the header over it are untouched (27-redesign.css keeps their tokens); once solid the header is white.

   PHOTOS: any element with data-photo-file (a file of photos.json, or stok/<name>, a stock photo of assets/photos/stok)
   gets the picture as --photo (stock photos on hosting also an HD copy as --photo-hd, see the end of this file) and its
   framing as --photo-pos (paintPhotos, 03-photos-awards-training.js); this file decides where it shows: the tall frame
   of the statement, the frame of every page head (on Dukungan the photo fills the whole head instead, .head-full), the
   photo banners under three section heads (.sec-banner) and the strip under every CTA card. The decorative frames
   carry natural HD stock photos chosen by the owner (credits in assets/photos/stok/KREDIT.txt); SSK's own activity
   photos stay where they document real SSK work (the training head and banner, the galleries, the home mosaic, Blog &
   Event).

   STACKED CARDS: light cards overlap the edge of a photo: the featured product card on its image well, the solution
   panel and the TKDN steps on their banner, the gold CTA card on its strip.

   THE CUT CORNER: every contained photo, image well and overlapping card has ONE 45 degree chamfer at the top left
   (--cut, see the end of this file); full bleed banners and strips have none. Square corners elsewhere, no shadows, 1px
   warm hairlines (--rule). The full octagon (--oct) marks small things: the eyebrow dot, step icons, topic icons.

   SECTION HEADS: two columns, eyebrow and title on the left, the optional sub and button (.sh-side) on the right, both
   bottom aligned so the button ends on the title's last line. A head with only a button (.head-act) gives the title the
   free width and puts the button at the far right; a head without .sh-side spans the full width.
   ========================================================= */
:root{
  --sec-pad:112px;                 /* the vertical rhythm of every section (phones 72px) */
  --banner-h:480px;                /* the least height of a photo banner (phones: as tall as its copy) */
  --overlap:110px;                 /* how far the panel under a banner reaches into the photo */
  --gut:calc((100vw - min(100vw, var(--max)))/2 + clamp(24px,4.5vw,96px));   /* from the container's content edge to the window edge */
}

/* ---------- rhythm, titles, buttons ---------- */
.section{padding:var(--sec-pad) 0;border-top:0;border-bottom:0}
.who,.featured{border-top:0;border-bottom:0}
.view h2.title{font-size:40px;font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1.08;max-width:22ch}
/* the ch limits of the headlines below count Latin figures (1ch is about half an em); a Chinese character is a full em,
   so in Chinese they would leave about nine characters a line: there the limits are set in em */
html[lang="zh-CN"] .view h2.title{max-width:16em}
html[lang="zh-CN"] .who-box h2.title{max-width:11em}
html[lang="zh-CN"] .page-head h1{max-width:12em}
html[lang="zh-CN"] .cta-band h2{max-width:18em}
/* the outline button is graphite (text and border, filled graphite under the pointer); the filled button keeps the logo navy */
.view .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);box-shadow:none}
.view .btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.view .btn-primary{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:none}
.view .btn-primary:hover{background:var(--brand-2);border-color:var(--brand-2)}

/* ---------- section heads ---------- */
.section-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0 64px;align-items:end;margin-bottom:56px}
.section-head > div{max-width:none;min-width:0}
.section-head .eyebrow{margin:0}
/* every eyebrow on a light ground is graphite (#333333), like the page heads: in a section head, the TKDN bento copy and the
   FAQ the older paragraph rules (.section-head p, .tkb-copy > p, .faq-wrap p: the secondary grey) would win; the photo
   banners keep their gold eyebrow (.sec-banner .section-head .eyebrow, below) */
.section-head .eyebrow,.tkb-copy > .eyebrow,.faq-wrap > div:first-child .eyebrow{color:var(--fg)}
.section-head .title{margin:16px 0 0}
.sh-side{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.sh-side > p{margin:0;max-width:54ch;font-size:17px;line-height:1.6;color:var(--text-2)}
.sh-side > .gloss-search{align-self:stretch;max-width:380px}   /* the column shrinks to its content: the field keeps its 380px */
.section-head > div:only-child{grid-column:1 / -1}
.section-head.head-act{grid-template-columns:minmax(0,1fr) auto}
.head-act .sh-side{align-items:flex-end}
.sol-kit-head{margin-top:56px}

/* ---------- the statement after the logo belt: an open sentence on ivory, the figures as pillars under a top rule,
   and a tall photo frame that bleeds to the window edge and crosses into the featured product block below ---------- */
#whoSection{background:var(--ivory);padding:var(--sec-pad) 0;position:relative;z-index:2;overflow-x:clip;overflow-y:visible}
.who-box{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto auto auto 1fr;column-gap:64px;align-items:start}
.who-box > *{grid-column:1}
.who-box h2.title{font-size:56px;font-weight:700;color:var(--ink);line-height:1.04;letter-spacing:-.025em;max-width:15ch;margin:0 0 32px;text-align:left}
.who-box > p{font-size:18px;line-height:1.75;color:var(--text-2);max-width:60ch;margin:0}
.who-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;margin:56px 0 0}
.who-stats .stat{border-top:1px solid var(--rule-2);padding:24px 0 0;text-align:left}
.who-stats .stat b{display:block;font-family:var(--font-display);font-stretch:normal;font-size:56px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1}
.who-stats .stat span{display:block;font-size:14.5px;line-height:1.4;color:var(--text-2);margin-top:12px}
.who-box .btn{justify-self:start;align-self:start;margin-top:44px}
.who-box .btn-lg{padding:16px 30px;font-size:15.5px}
/* the frame: column 2, from the top of the box to the start of the featured product stage (the two section paddings
   between them), out to the right edge of the window */
.who-box[data-photo-file]::after{content:"";position:absolute;grid-column:2;grid-row:1 / -1;top:0;bottom:calc(-2 * var(--sec-pad));left:0;right:calc(-1 * var(--gut));background:var(--stone-2) var(--photo,none) var(--photo-pos,50% 50%)/cover no-repeat}

/* ---------- the featured product: the product large in an image well, the copy on a white card pulled 96px up over
   the well's lower right edge (the well keeps 116px free at its foot for the card) ---------- */
#featuredSection{padding:var(--sec-pad) 0}
#featuredSection .featured-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center}
#featuredSection .hero-show{order:-1}
#featuredSection .hs-slide{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;gap:0;align-items:start}
#featuredSection .hs-img{background:var(--stone-2);height:500px}
#featuredSection .hs-img .pimg{aspect-ratio:auto;height:100%;background:transparent;border-radius:0;border:0}
#featuredSection .hs-img .pimg img{padding:28px 40px 116px;object-fit:contain;mix-blend-mode:multiply}
#featuredSection .hs-copy{position:relative;z-index:1;justify-self:end;width:min(440px,72%);margin:-96px 32px 0 0;background-color:#fff;border:1px solid var(--rule);padding:24px 28px;gap:12px}
#featuredSection .hs-copy h3{font-size:22px;font-weight:700;line-height:1.2;color:var(--ink)}
#featuredSection .hs-copy .chips{gap:6px}
#featuredSection .hs-copy .chips li{background:var(--stone);color:var(--ink);border:0;border-radius:999px;font-size:12px}
#featuredSection .hs-nav{border-top:0;margin-top:24px;padding-top:0}
#featuredSection .hs-btn{background:#fff;border-color:var(--rule-2);color:var(--ink)}
#featuredSection .hs-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
#featuredSection .hs-count{color:var(--ink)}
#featuredSection .featured-intro .lead{font-size:17px;line-height:1.65;color:var(--text-2)}

/* ---------- the instrument finder on stone: one white panel, the questions as ruled columns ---------- */
#finderSection .finder{background-color:#fff;border:1px solid var(--rule);border-radius:0;box-shadow:none;overflow:hidden}
#finderSection .finder-wide .fqs{gap:0;padding:36px 0;border-bottom:0}
#finderSection .finder-wide .fq{padding:0 32px;border:0;border-left:1px solid var(--rule)}
#finderSection .finder-wide .fq:first-child{border-left:0}
#finderSection .finder-wide .fout{border-top:1px solid var(--rule);padding:28px 32px 32px}
#finderSection .fopt{background:#fff;border:1px solid var(--rule-2);border-radius:999px;color:var(--text-2)}
#finderSection .fopt:hover{border-color:var(--ink);color:var(--ink)}
#finderSection .fopt[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}   /* a pressed control: a navy fill */
#finderSection .fq .ql{color:var(--ink)}

/* ---------- product lines: image led cards, the first one a 2 x 2 feature; title and a round arrow under the well ---------- */
#homeCats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 28px}
#homeCats .cat{display:grid;grid-template-columns:minmax(0,1fr) 40px;grid-template-rows:auto auto auto;grid-template-areas:"img img" "ttl arr" "cnt cnt";column-gap:14px;row-gap:0;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;min-height:0;overflow:visible}
#homeCats .cat:hover{transform:none;box-shadow:none}
#homeCats .cat .icon{display:none}
/* a line without a product photo shows its icon in the image well instead */
#homeCats .cat:not(.has-photo) .icon{display:grid;place-items:center;grid-area:img;width:auto;height:auto;aspect-ratio:4/3;margin:0 0 18px;background:var(--stone-2);color:var(--ink);border:0;border-radius:0;overflow:visible}
#homeCats .cat:not(.has-photo) .icon svg{width:56px;height:56px}
#homeCats .cat:not(.has-photo):hover .icon{background:var(--cream)}
#homeCats .cat .cimg{grid-area:img;display:block;margin:0 0 18px;border:0;background:transparent}
#homeCats .cat .cimg .pimg{aspect-ratio:4/3;background:var(--stone-2);border-radius:0;border:0;margin:0;transition:background .25s}
/* the product cut outs are JPEGs on a near white ground; a slight lift makes that ground pure white, so multiply leaves no box */
#homeCats .cat .cimg .pimg img{padding:12%;object-fit:contain;mix-blend-mode:multiply;filter:brightness(1.035) contrast(1.02)}
#homeCats .cat h3{grid-area:ttl;align-self:center;font-size:18px;font-weight:700;color:var(--ink);margin:0;line-height:1.25;letter-spacing:-.01em}
#homeCats .cat .cnt{grid-area:cnt;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);border:0;padding:0;margin:4px 0 0}
#homeCats .cat .arrow{grid-area:arr;align-self:center;position:static;inset:auto;width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--rule-2);display:grid;place-items:center;color:var(--ink);transform:none}
#homeCats .cat:hover .cimg .pimg{background:var(--cream)}
#homeCats .cat:hover .cimg .pimg.has img{transform:scale(1.04)}
#homeCats .cat:hover .arrow{background:var(--ink);border-color:var(--ink);color:#fff}
#homeCats .cat:first-child{grid-column:span 2;grid-row:span 2;grid-template-rows:minmax(0,1fr) auto auto}
#homeCats .cat:first-child .cimg{height:100%}
#homeCats .cat:first-child .cimg .pimg{aspect-ratio:auto;height:100%;min-height:520px}
/* the feature image is shown at most at its own size (scale-down), centred, so it is never blown up soft */
#homeCats .cat:first-child .cimg .pimg img{padding:8% 10%;object-fit:scale-down}
#homeCats .cat:first-child h3{font-size:28px;letter-spacing:-.02em}

/* ---------- photo banners (home solutions, TKDN flow, training "how"): the head on a full width photo under a near
   black veil, at least --banner-h tall with the copy at its foot; the panel below reaches --overlap into the photo ---------- */
.section.sec-banner{padding-top:0;background-color:var(--stone)}
.sec-banner > .banner{display:flex;flex-direction:column;justify-content:flex-end;min-height:var(--banner-h);padding:88px 0 calc(56px + var(--overlap));background-color:var(--stone-2);background-image:var(--scrim),var(--photo,none);background-size:cover;background-position:var(--photo-pos,50% 50%);background-repeat:no-repeat}
.sec-banner > .banner > .container{width:100%}
.sec-banner > .banner + .container{position:relative;z-index:1;margin-top:calc(-1 * var(--overlap))}
.sec-banner .section-head{grid-template-columns:minmax(0,700px);margin-bottom:0}
.sec-banner .section-head .eyebrow{color:var(--accent)}
.sec-banner .section-head .title{color:#fff}
.sec-banner .sh-side{gap:24px;margin-top:16px}
.sec-banner .sh-side > p{max-width:62ch;color:rgba(255,255,255,.88)}
.sec-banner .banner .btn-ghost{color:#fff;border-color:rgba(255,255,255,.85);background:transparent}
.sec-banner .banner .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.sec-banner > .banner :focus-visible{outline-color:#fff}
#tkdnFlow{--overlap:120px}
/* the TKDN banner: the owner's 2.83:1 factory photo is framed in the markup at 5% so that, where the banner crops its sides
   (tablets and laptops up to about 1360px), the central worker in the yellow helmet sits right of the copy instead of under
   it. From 860px down the copy reaches almost to the right edge and the contact dock covers that edge, so no framing keeps
   his face clear of both: there he stays in the middle of the frame, under the darker veil of the block below. */
@media (max-width:860px){ #tkdnFlow > .banner[data-photo-file="stok/pekerja-pabrik"]{background-position:55% 50%} }
/* tablets and small laptops (761 to 1260px): the banners crop the sides of their photos, so the light parts of the
   subject move under the ends of the copy lines (on the home banner the white harness of the worker in the bucket, on
   the TKDN banner the white face mask and the faces left of the yellow helmet). There the veil stays dark further to the
   right (.62 at 70% instead of .40 at 64%) and, from 860px down, where the copy runs almost to the right edge, across
   the whole width (.5 at the edge, the helmets under the line ends). Every line of the copy keeps at least 4.5:1 on its
   lightest pixel, in id, en and zh, counted with the body copy's own alpha (.88). From about 1260px the photo is
   cropped less and the subject sits right of the copy (as in the owner's preview at 1280 and 1366px), so the common
   veil (--scrim) applies. */
@media (min-width:761px) and (max-width:1260px){
  .sec-sol > .banner,#tkdnFlow > .banner{--scrim:linear-gradient(90deg,rgba(16,18,24,.84) 0%,rgba(16,18,24,.76) 45%,rgba(16,18,24,.62) 70%,rgba(16,18,24,.15) 100%)}
}
@media (min-width:761px) and (max-width:860px){
  .sec-sol > .banner,#tkdnFlow > .banner{--scrim:linear-gradient(90deg,rgba(16,18,24,.84) 0%,rgba(16,18,24,.76) 45%,rgba(16,18,24,.66) 70%,rgba(16,18,24,.5) 100%)}
}

/* ---------- home solutions: the segments as ruled rows with arrows, two columns inside one white panel ---------- */
.sec-sol .sol-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;background:#fff;border:1px solid var(--rule);padding:8px 40px;position:relative}
.sec-sol .sol.mini{position:relative;display:grid;grid-template-columns:168px minmax(0,1fr) 40px;grid-template-areas:"th ttl arr" "th cnt arr";grid-template-rows:1fr 1fr;column-gap:24px;align-items:center;min-height:0;background:transparent;border:0;border-top:1px solid var(--rule);border-radius:0;box-shadow:none;padding:20px 0}
.sec-sol .sol.mini:nth-child(-n+2){border-top:0}
.sec-sol .sol-thumbs{grid-area:th;width:168px;height:96px;margin:0;background:var(--stone-2);display:flex;align-items:center;justify-content:center;gap:4px;padding:6px 8px;transition:background .2s}
.sec-sol .sol-thumbs .th{width:48px;height:80px;flex:0 0 48px;border:0;background:transparent;border-radius:0;margin:0}
.sec-sol .sol-thumbs .th .pimg{background:transparent;border:0;aspect-ratio:auto;width:100%;height:100%}
.sec-sol .sol-thumbs .th .pimg img{mix-blend-mode:multiply;filter:brightness(1.035) contrast(1.02)}
.sec-sol .sol h3{grid-area:ttl;align-self:end;font-size:20px;font-weight:700;color:var(--ink);line-height:1.25;letter-spacing:-.015em;margin:0}
.sec-sol .sol .cnt{grid-area:cnt;align-self:start;display:block;border:0;padding:0;margin:6px 0 0;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3)}
.sec-sol .sol .arr{grid-area:arr;width:40px;height:40px;border-radius:50%;border:1px solid var(--rule-2);background:#fff;display:grid;place-items:center;color:var(--ink);transition:background .2s,border-color .2s,color .2s}
.sec-sol .sol .arr svg{width:16px;height:16px}
.sec-sol .sol.mini:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.sec-sol .sol.mini:hover .sol-thumbs{background:var(--cream)}
.sec-sol .sol.mini:hover .arr{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- home TKDN on ivory (the bento itself: 35-tkdn-bento.css) ---------- */
#tkdnSection{background:var(--ivory)}

/* ---------- activity photos: one big frame and a staggered column, captions under the photo. Every caption is at
   least two lines tall, so the big frame and column 2 end on the same line. The stagger uses translate, so the scroll
   reveal (transform) still plays. ---------- */
#photosSection{padding-bottom:calc(var(--sec-pad) + 56px)}
#photoMosaic.n5{grid-template-columns:minmax(0,7fr) minmax(0,2.5fr) minmax(0,2.5fr);gap:28px 20px;align-items:start}
#photoMosaic.n5 > figure:nth-child(1){grid-column:1;grid-row:1 / span 2;display:flex;flex-direction:column;align-self:stretch}
#photoMosaic.n5 > figure:nth-child(2){grid-column:2;grid-row:1}
#photoMosaic.n5 > figure:nth-child(3){grid-column:3;grid-row:1;translate:0 56px}
#photoMosaic.n5 > figure:nth-child(4){grid-column:2;grid-row:2}
#photoMosaic.n5 > figure:nth-child(5){grid-column:3;grid-row:2;translate:0 56px}
#photoMosaic.n5 > figure.big .ph-img{flex:1 1 auto;aspect-ratio:auto;min-height:0}   /* the big frame fills the height of column 2 */
figure.ph{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible}
figure.ph .ph-img{background:var(--stone-2);border-radius:0}
figure.ph figcaption{color:var(--text-2);padding:12px 0 0;font-size:13.5px;line-height:1.5;text-wrap:pretty}   /* under the photo, never over it */
#photoMosaic figure.ph figcaption{min-height:calc(12px + 3em)}
figure.ph figcaption .y{display:inline;font-family:var(--font-mono);color:var(--fg-3);font-weight:600;opacity:1;margin-right:8px;font-size:12.5px;letter-spacing:.08em}

/* ---------- client logo wall on stone ---------- */
#homeWall{grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
#homeWall > div{background:#fff;border:1px solid var(--rule);border-radius:0;height:96px;min-height:96px;padding:12px 16px;box-shadow:none}
#homeWall > div:hover{transform:none;box-shadow:none;border-color:var(--rule-2)}
#homeWall .cl{height:40px}
#homeWall .cl img{max-height:40px;max-width:100%;filter:none}
#homeWall .cl.has img{opacity:1}

/* ---------- reviews (hidden while there are none) ---------- */
#reviewsSection .rv{background:#fff;border:1px solid var(--rule);border-radius:0;box-shadow:none}

/* ---------- the closing CTA on every page: a full width photo strip, the flat gold card overlapping it, right aligned ---------- */
.section.cta-sec{padding:0 0 var(--sec-pad);position:relative}
.cta-sec::before{content:"";display:block;height:420px;background:var(--stone-2) var(--photo,none) var(--photo-pos,50% 50%)/cover no-repeat}
.cta-sec > .container{position:relative;z-index:1}
.cta-sec .cta-band{max-width:860px;margin:-150px 0 0 auto;padding:56px;display:grid;grid-template-columns:minmax(0,1fr);gap:28px;text-align:left;align-items:start}
.cta-band h2{font-size:34px;font-weight:700;color:var(--ink);line-height:1.12;letter-spacing:-.02em;max-width:24ch;margin:0 0 12px}
.cta-band p{color:var(--fg-body);font-size:17px;margin:0;max-width:60ch}   /* on gold only #333333 and #434342 (7.9 and 6.2:1); the greys fall under 4.5:1 there */
.cta-band .actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start}

/* ---------- footer details (the light footer itself: 04-footer-pagehead-about.css) ---------- */
footer .foot-grid h4{letter-spacing:.14em}   /* the .14em of 04-footer-pagehead-about.css, which the shared .1em of the small labels (21-home-lean-certs-reviews.css) would otherwise replace */
footer .foot-social a{background:#fff;border-color:var(--rule-2);color:var(--ink)}
footer .copyright a{color:var(--text-2)}
footer .copyright a:hover{color:var(--fg);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* ---------- inner page heads: ivory, the text on the left half and a photo frame on the right that bleeds off the
   window edge and hangs 72px into the next section (on the TKDN page it does not hang, because its in page menu follows).
   The Dukungan head is a full photo (.head-full, below). The cut out TKDN product on stone (data-stage) left the TKDN
   head in v96 together with its rules; the cut out photos of assets/stage stay in the TKDN bento. Heads without a
   picture (product detail, resources, legal, awards, 404) keep the text across the full width. ---------- */
.page-head{background:var(--ivory);color:var(--text);padding:calc(var(--nav-h) + 72px) 0 96px;border:0;position:relative}
.page-head > .container{position:relative;z-index:1}
.page-head h1{font-size:52px;font-weight:700;color:var(--ink);max-width:16ch;line-height:1.06;letter-spacing:-.022em}
.page-head h1 em{color:var(--ink)}
.page-head p{color:var(--text-2);font-size:18px;line-height:1.6}
.page-head .eyebrow{color:var(--ink)}
.page-head .crumbs{font-size:14px;line-height:1.5}
.page-head .crumbs,.page-head .crumbs a,.page-head .crumbs span{color:var(--text-3)}
.page-head .crumbs a:hover{color:var(--ink)}
.page-head .chip,.page-head .chips li{background:#fff;border-color:var(--rule-2);color:var(--ink)}
.page-head[data-photo-file]::after{content:"";position:absolute;top:calc(var(--nav-h) + 48px);right:0;bottom:-72px;width:44vw;background:var(--stone-2) var(--photo,none) var(--photo-pos,50% 50%)/cover no-repeat;z-index:3;pointer-events:none}
.page-head[data-photo-file] > .container > *{max-width:min(50%,640px)}
.page-head.tkdn-head::after{bottom:0}   /* the TKDN page's in page menu follows its head: the frame does not hang into it */
.page-head[data-photo-file] + .section{padding-top:calc(var(--sec-pad) + 72px)}
.page-head[data-photo-file] + .calc-section{padding:calc(72px + 32px) 0 32px}
/* ---------- the Dukungan head (.head-full), the one head with a full photo: the owner asked for a photo of a handshake
   in place of the ivory ground, the words readable and the photo natural. The photo fills the head from under the white
   header to its foot, behind the eyebrow, title and lead, in two layers (.head-bg, each with its own data-photo-file,
   painted by paintPhotos): the wide crop (8:3, the handshake in its right third, a plain white sleeve on the left) from
   761px and on phones held sideways, the portrait crop (4:5, the handshake at its foot) on phones held upright (both
   after the phone block); the layer a screen hides is display:none, so its photo is never downloaded. The hands fill 7%
   to 95% of the wide crop's height, so the layer is at least 8:3 tall (37.5vw under the header): `cover` then trims
   only the sides, never the fingertips or the clasped fingers, however short the text (en, zh) and however wide the
   window (at 1920px the head is 720px under the header). It stops 96px short of the first screen's foot: in a window
   too short for 8:3 the head keeps a sliver of the next section in view and the photo loses a little of its top and
   bottom evenly (at 1536 x 730, 97% of its height shows). The text is centred in the head.
   The type is dark on a soft white veil from the left (on phones held upright from the top), as on every other light
   head: graphite #333333 for the eyebrow and title and, here, the running text graphite #434342 for the lead (with the
   secondary grey the lead kept only about 4.6:1 on phones). A dark veil with white type, as on the photo banners, was
   measured too (with the navy type of before): it turned the bright photo grey and its weakest line fell to about 4.6:1
   from 820 to 1366px, and the white header would sit on a dark band. Under the white veil the weakest line of the
   graphite type keeps 8.5:1 or more from 820 to 1920px, 9.0 on phones held sideways (740 x 360; 7.0 at 667 x 375) and
   6.9 on phones held upright (390 and 360px), in id, en and zh. White, not ivory, so the photo keeps its daylight. Every
   line of the eyebrow, title and lead keeps at least 4.5:1 on its darkest pixel in id, en and zh
   (test_support_head_photo). No cut corner: the photo bleeds to both window edges, like the banners. ---------- */
.page-head.head-full{background:#fff;display:flex;flex-direction:column;justify-content:center;min-height:calc(var(--nav-h) + min(37.5vw, 100vh - var(--nav-h) - 96px))}
.head-full{--veil:linear-gradient(90deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.82) 36%,rgba(255,255,255,0) 58%)}
.head-full > .head-bg{position:absolute;left:0;right:0;top:var(--nav-h);bottom:0;z-index:0;background-color:var(--stone-2);background-image:var(--veil),var(--photo,none);background-size:cover;background-position:var(--photo-pos,50% 50%);background-repeat:no-repeat}
.head-full > .head-bg.tall{display:none}
.head-full > .container{width:100%}   /* a flex item with auto margins would shrink to its text */
.head-full > .container > *{max-width:min(50%,620px)}   /* the text stays left of the handshake */
.head-full h1 + p{color:var(--fg-body)}   /* the lead on the photo takes the running text graphite (#434342): the secondary grey kept only about 4.6:1 on phones */
/* a head that only carries the breadcrumb (product pages): a slim ivory strip */
.page-head.head-slim{padding-bottom:32px}
.page-head.head-slim + .section{padding-top:56px}

/* ---------- inner page cards: square, hairline, no shadow (also the cards of the resources, support, solution and
   product pages: tools, guides, support cards, opening hours, the solution intro, the spec table, the product aside) ---------- */
#svcList > div,figure.aw,li.ph-ev,article.prod,.sol.big,#contactForm,.hours,.map-card,.brand-cell,.calc-wrap,.tool,.guide,.sup-card,.sol-detail .sol-intro,.spec-table,.detail .aside{border-radius:0;box-shadow:none;border:1px solid var(--rule);background-color:#fff}
:is(#svcList > div,figure.aw,li.ph-ev,article.prod,.sol.big,#contactForm,.hours,.map-card,.brand-cell,.calc-wrap,.tool,.guide,.sup-card):hover{transform:none;box-shadow:none}
:is(#svcList > div,.sol.big,#contactForm,.hours,.tool):hover{border-color:var(--ink);--cut-line:var(--ink)}   /* the hairline along the cut turns graphite with the border */
article.prod:hover,figure.aw:hover,li.ph-ev:hover,.brand-cell:hover,.map-card:hover,.calc-wrap:hover{border-color:var(--rule)}
.tool:focus-visible{outline-offset:-5px}   /* drawn inside, so the cut corner (clip path) does not hide the focus ring */
/* an award card under keyboard focus: flat and square like its hover (the older lift and glow of 23-awards.css stay
   off), the border and the hairline along the cut graphite, and a ring drawn inside the card */
figure.aw:focus-visible{transform:none;box-shadow:none;border-color:var(--ink);--cut-line:var(--ink);outline:2px solid var(--ink);outline-offset:-5px}
.soon-card,.more-bar,.calc-form,.calc-out,.calc-kpis .kpi,.map-embed,.sup-ph .th,.sol-thumbs .th,#clientGroups .wall > div,figure.aw .aw-img,li.ph-ev .ev,.spec-table .note,.gal-th{border-radius:0;box-shadow:none}
.soon-card{background:#fff;border-color:var(--rule-2)}
.more-bar{border-color:var(--rule-2);background:#fff}
.spec-table h4{background:var(--ivory);border-bottom-color:var(--rule)}
:is(#svcList,.sol.big,.sup-card,.tool,.guide,.sol-intro) .icon{border-radius:0;background:var(--ivory);clip-path:var(--oct);color:var(--ink);border:0}
article.prod .pimg,.detail .pimg,.gal .gal-view .pimg{border-radius:0;border:0;background:var(--stone-2)}
article.prod .pimg img,.detail .pimg img{mix-blend-mode:multiply;filter:brightness(1.035) contrast(1.02)}
article.prod:hover .pimg{background:var(--cream)}
.calc-kpis .kpi{background:#fff;border:1px solid var(--rule)}
.calc-kpis .kpi.main{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.calc-kpis .kpi.main span,.calc-kpis .kpi.main b{color:var(--ink)}
.view .field :is(input,select,textarea),.view form :is(input,select,textarea){border-radius:0;border-color:var(--rule-2);box-shadow:none}
/* the states of a field keep their cue over the square field above, which is more specific than the plain input rules
   (27-redesign.css): under focus a graphite border and halo (the field has no outline), when invalid the warning red.
   :focus-within, so the date field keeps the cue while its calendar button (inside the field) has the focus */
.view .field :is(input,select,textarea):focus-within,.view form :is(input,select,textarea):focus-within{border-color:var(--fg);box-shadow:0 0 0 3px rgba(51,51,51,.14)}
.view .field :is(input,select,textarea)[aria-invalid="true"],.view form :is(input,select,textarea)[aria-invalid="true"]{border-color:var(--warn);box-shadow:0 0 0 3px rgba(178,58,30,.14)}
figure.aw .aw-img{background:var(--stone-2)}
/* small print on the image well (--stone-2): the label of an empty well and of a category text tile ("Berbagai merek")
   take the secondary grey (5.5:1; the small label grey gives only 4.4:1 there); the "/" between year and brand is a 3:1
   decoration */
.pimg .ph span,.pimg.ctile .ct span{color:var(--fg-2)}
figure.aw figcaption .y i,.hs-brand i{color:#9A937F}

/* ---------- TKDN page (the bento, cards, flow panel, chart and tables: 30-tkdn-visual.css, 35-tkdn-bento.css) ---------- */
.tkdn-nav button{border-radius:0;border:0;border-left:2px solid var(--rule-2);color:var(--text-2);background:transparent}
.tkdn-nav button:hover{border-left-color:var(--ink);background:var(--stone);color:var(--ink)}
.tkdn-nav button span{flex:none}   /* the number keeps its 16px, so every label starts on one line, also a long one */
.tkdn-nav button.on{border-left-color:var(--accent);box-shadow:inset 1px 0 0 var(--accent);background:var(--cream);color:var(--ink);font-weight:700}   /* 2px border + 1px inset: a 3px bar, and the label does not shift */
.tkdn-qa{background:var(--stone);border:0;border-radius:0}

/* ---------- training page: the two lead photos staggered, topic tiles on stone, the format of a session as numbered
   cards on a photo banner, the full gallery with its middle column staggered ---------- */
.section.tr-hero-sec{padding-bottom:calc(var(--sec-pad) + 72px)}
#trHero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 24px;align-items:start}
#trHero > figure:nth-child(1){grid-column:1 / span 8}
#trHero > figure:nth-child(2){grid-column:9 / span 4;translate:0 72px}
#trHero > figure:nth-child(1) .ph-img{aspect-ratio:16/10}
#trHero > figure:nth-child(2) .ph-img{aspect-ratio:1/1}   /* a square, so a tall collage source (the A frame) still shows only its top photo */
#trTopics{gap:20px}
#trTopics > div{background-color:#fff;border:1px solid var(--rule);padding:28px;border-radius:0;box-shadow:none}
#trTopics .icon{width:44px;height:44px;background:var(--ivory);border:0;border-radius:0;clip-path:var(--oct);color:var(--ink)}
#trTopics h3{font-size:18px;font-weight:700;color:var(--ink)}
#trHow{gap:20px}
#trHow > div{background-color:#fff;border:1px solid var(--rule);border-radius:0;box-shadow:none;padding:28px}
#trHow > div:hover{border-color:var(--ink);--cut-line:var(--ink);transform:none;box-shadow:none}
#trHow .n{width:40px;height:40px;border-radius:0;background:var(--accent);color:var(--ink);clip-path:var(--oct);font-weight:700;font-size:15px}
#trHow h3{font-size:18px;font-weight:700;color:var(--ink)}
.section.tr-gallery-sec{padding-bottom:calc(var(--sec-pad) + 48px)}
#trGallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 20px;--cols:3;--ph-gap:20px}
@media (min-width:761px){ #trGallery > figure:first-child:nth-last-child(3n) ~ figure:nth-child(3n+2){translate:0 48px} }   /* the middle column staggered when every row is full */

/* ---------- full rows: a gallery or a card grid never ends on a row with empty cells. In three columns a count one
   over a multiple of three widens the first and the last item to two columns, a count two over widens the first; in two
   columns an odd count widens the first. A widened photo keeps the height of its row (its frame is cropped wider:
   the grid is a size container, cqw), so the rows stay level. ---------- */
.ph-grid{--cols:3;--ph-gap:14px;column-gap:var(--ph-gap);container-type:inline-size}
@supports (height:1cqw){
  .ph-grid > figure.ph .ph-img{aspect-ratio:auto;height:calc((100cqw - (var(--cols) - 1) * var(--ph-gap)) / var(--cols) * .75)}
}
@media (max-width:980px){ .ph-grid{--cols:2} }
@media (max-width:640px){ .ph-grid{--cols:1} }
@media (min-width:981px){
  .ph-grid > figure:first-child:nth-last-child(3n+2),.ph-grid > figure:first-child:nth-last-child(3n+4),.ph-grid > figure:last-child:nth-child(3n+4){grid-column:span 2}
}
@media (max-width:980px) and (min-width:761px){
  .ph-grid:not(#trGallery) > figure:first-child:nth-last-child(odd){grid-column:span 2}
  #trGallery > figure:first-child:nth-last-child(3n+2),#trGallery > figure:first-child:nth-last-child(3n+4),#trGallery > figure:last-child:nth-child(3n+4){grid-column:span 2}
}
@media (max-width:760px) and (min-width:641px){ .ph-grid:not(#trGallery) > figure:first-child:nth-last-child(odd){grid-column:span 2} }
@media (min-width:1001px){
  .sol-page > .sol:first-child:nth-last-child(3n+2),.sol-page > .sol:first-child:nth-last-child(3n+4),.sol-page > .sol:last-child:nth-child(3n+4){grid-column:span 2}
}
@media (max-width:1000px) and (min-width:621px){ .sol-page > .sol:first-child:nth-last-child(odd){grid-column:span 2} }

/* ---------- the cut corner: one chamfer of --cut at the top left; boxes with a hairline get it drawn along the cut ---------- */
.who-box[data-photo-file]::after,#featuredSection .hs-img,.tkb-grid > .tkb-photo,#trHero figure.ph .ph-img,.cta-band,#finderSection .finder,.tkdn-steps,.sec-sol .sol-grid{--cut:28px}
.page-head[data-photo-file]::after,#homeCats .cat:first-child .cimg .pimg{--cut:32px}
#homeCats .cat .cimg .pimg,.tkdn-rule,#featuredSection .hs-copy,.tkdn-holder,.tkdn-card,#trTopics > div,#trHow > div,#reviewsSection .rv,#svcList > div,figure.aw,li.ph-ev,article.prod,.sol.big,#contactForm,.hours,.tool,.guide,.sup-card,.sol-detail .sol-intro,.detail .pimg,.gal .gal-view .pimg{--cut:20px}
figure.ph .ph-img{--cut:24px}
#trHero figure.ph .ph-img{--cut:28px}
.sec-sol .sol-thumbs{--cut:12px}
.who-box[data-photo-file]::after,#featuredSection .hs-img,.tkb-grid > .tkb-photo,figure.ph .ph-img,.cta-band,#finderSection .finder,.tkdn-steps,.sec-sol .sol-grid,
.page-head[data-photo-file]::after,#homeCats .cat .cimg .pimg,.tkdn-rule,#featuredSection .hs-copy,.tkdn-holder,.tkdn-card,#trTopics > div,#trHow > div,
#reviewsSection .rv,#svcList > div,figure.aw,li.ph-ev,article.prod,.sol.big,#contactForm,.hours,.tool,.guide,.sup-card,.sol-detail .sol-intro,.detail .pimg,.gal .gal-view .pimg,.sec-sol .sol-thumbs,
#homeCats .cat:not(.has-photo) .icon{clip-path:polygon(var(--cut) 0,100% 0,100% 100%,0 100%,0 var(--cut))}
/* the hairline along the cut (a 135 degree band in a --cut square at the top left), in --cut-line: the border colour,
   so a card whose border turns graphite on hover sets --cut-line with it */
#finderSection .finder,.tkdn-steps,.sec-sol .sol-grid,#featuredSection .hs-copy,.tkdn-holder,.tkdn-card,#trTopics > div,#trHow > div,#reviewsSection .rv,#svcList > div,figure.aw,li.ph-ev,article.prod,.sol.big,#contactForm,.hours,
.tool,.guide,.sup-card,.sol-detail .sol-intro{
  background-image:linear-gradient(135deg,transparent 50%,var(--cut-line,var(--rule)) 50%,var(--cut-line,var(--rule)) calc(50% + 1.2px),transparent calc(50% + 1.2px));background-size:var(--cut) var(--cut);background-repeat:no-repeat;background-position:0 0;background-origin:border-box}
#homeCats .cat:not(.has-photo) .icon{--cut:20px}
#homeCats .cat:first-child:not(.has-photo) .icon{--cut:32px;aspect-ratio:auto;height:100%;min-height:520px}

/* ---------- tablets ---------- */
@media (max-width:1100px) and (min-width:761px){
  #featuredSection .featured-grid{grid-template-columns:minmax(0,1fr)}
  #homeCats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sec-sol .sol-grid{grid-template-columns:minmax(0,1fr)}
  .sec-sol .sol.mini:nth-child(2){border-top:1px solid var(--rule)}
  #homeWall{grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}   /* seven like desktops: 21 logos fill three rows, no lone tile */
  #homeWall > div{padding:10px}
  .page-head[data-photo-file]::after{width:40vw}
  .page-head h1{font-size:40px}   /* the half width text column: a long title stays within the first screen */
  .who-box h2.title{font-size:44px}
}
@media (max-width:1100px){
  .tkdn-holder{flex-direction:column;align-items:flex-start;gap:12px}   /* the head's text column is narrow from here on */
}
/* five padded topic tiles in a row only fit on desktops: on tablets three over two (six tracks), every row full */
@media (max-width:1100px) and (min-width:761px){
  #trTopics{grid-template-columns:repeat(6,minmax(0,1fr))}
  #trTopics > div{grid-column:span 2}
  #trTopics > div:nth-last-child(2):nth-child(3n+1),#trTopics > div:last-child:nth-child(3n+2){grid-column:span 3}
  #trTopics > div:last-child:nth-child(3n+1){grid-column:1 / -1}
}
/* small tablets: the half width text column gets too narrow, so the page head frame and the statement photo move
   above or below their text as on phones (taller frames), the statement figures stay in three columns */
@media (max-width:980px) and (min-width:761px){
  .page-head[data-photo-file]::after{position:relative;display:block;top:auto;right:auto;bottom:auto;width:auto;height:340px;margin:48px clamp(24px,4.5vw,96px) 0}
  .page-head[data-photo-file] > .container > *{max-width:none}
  .page-head[data-photo-file] + .section{padding-top:var(--sec-pad)}
  .page-head[data-photo-file] + .calc-section{padding:32px 0}
  .who-box{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .who-box[data-photo-file]::after{position:static;grid-column:1;grid-row:1;height:380px;margin:0 0 40px}
  /* the Dukungan head is taller than 8:3 here, so its photo is scaled to the head's height; framed at 72% the handshake
     would reach under the lead, at 58% it starts right of the text */
  .head-full > .head-bg.wide[data-photo-file="stok/jabat-tangan"]{background-position:58% 50%}
}

/* ---------- phones ---------- */
@media (max-width:760px){
  :root{--sec-pad:72px;--banner-h:318px;--overlap:64px}
  #tkdnFlow{--overlap:64px}
  .view h2.title{font-size:30px}
  .section-head,.section-head.head-act{grid-template-columns:minmax(0,1fr);margin-bottom:36px}
  .sh-side{gap:0}
  .sh-side > p{margin-top:14px;font-size:16px}
  .sh-side,.head-act .sh-side{align-items:flex-start}
  .sh-side > .btn,.sh-side > .gloss-search{margin-top:20px}
  .who-box{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .who-box[data-photo-file]::after{position:static;grid-column:1;grid-row:1;height:240px;margin:0 0 32px}
  .who-box h2.title{font-size:34px;margin-bottom:20px}
  .who-box > p{font-size:16.5px;line-height:1.7}
  .who-stats{grid-template-columns:minmax(0,1fr);gap:0;margin-top:32px}
  .who-stats .stat{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;column-gap:16px;padding:16px 0}
  .who-stats .stat b{font-size:40px}
  .who-stats .stat span{margin:0}
  .who-box .btn{margin-top:28px}
  #featuredSection .featured-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  #featuredSection .hero-show{order:0}
  #featuredSection .hs-img{height:280px}
  #featuredSection .hs-img .pimg img{padding:20px 24px 72px}
  #featuredSection .hs-copy{width:auto;margin:-56px 0 0 24px;padding:20px}
  #featuredSection .hs-copy h3{font-size:19px}
  #featuredSection .hs-dots{flex-wrap:nowrap;gap:4px;min-width:0}
  #featuredSection .hs-dots button{width:14px;min-width:14px;flex:0 0 14px;padding-left:0;padding-right:0}
  #featuredSection .hs-dots button.on{width:22px;flex-basis:22px}
  #finderSection .finder-wide .fqs{grid-template-columns:minmax(0,1fr);padding:4px 0}
  #finderSection .finder-wide .fq{border-left:0;border-top:1px solid var(--rule);padding:22px 20px}
  #finderSection .finder-wide .fq:first-child{border-top:0}
  #finderSection .finder-wide .fout{padding:20px}
  #homeCats{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
  #homeCats .cat{grid-template-columns:minmax(0,1fr);grid-template-areas:"img" "cnt" "ttl";grid-template-rows:auto auto auto;align-content:start}   /* rows packed at the top: the arrow on the well, the count and the title of neighbours line up whatever the title length */
  #homeCats .cat:first-child{grid-column:1 / -1;grid-row:auto}
  #homeCats .cat:first-child .cimg .pimg{min-height:0;height:auto;aspect-ratio:4/3}
  #homeCats .cat .cimg,#homeCats .cat:not(.has-photo) .icon{margin-bottom:12px}
  #homeCats .cat h3{font-size:15px;align-self:start}
  #homeCats .cat:first-child h3{font-size:22px}
  #homeCats .cat .cnt{font-size:11px;margin:0 0 4px}
  #homeCats .cat .arrow{grid-area:img;align-self:end;justify-self:end;width:30px;height:30px;margin:0 8px 20px 0;position:relative;z-index:1}
  #homeCats .cat .arrow svg{width:14px;height:14px}
  .sec-banner > .banner{padding:64px 0 calc(40px + var(--overlap));background-image:linear-gradient(180deg,rgba(16,18,24,.66) 0%,rgba(16,18,24,.80) 100%),var(--photo-hd,var(--photo,none))}   /* a phone banner is taller than wide: its height sets the scale, so a stock photo always shows its HD copy */
  .sec-banner .section-head{grid-template-columns:minmax(0,1fr)}
  .sec-banner .sh-side{gap:0;margin-top:0}
  .sec-banner .sh-side > p{margin-top:16px}
  .sec-banner .sh-side > .btn{margin-top:24px}
  .sec-sol .sol-grid{grid-template-columns:minmax(0,1fr);padding:4px 20px}
  .sec-sol .sol.mini{grid-template-columns:96px minmax(0,1fr) 32px;column-gap:14px;padding:16px 0}
  .sec-sol .sol.mini:nth-child(2){border-top:1px solid var(--rule)}
  .sec-sol .sol-thumbs{width:96px;height:64px;padding:4px 6px;gap:2px}
  .sec-sol .sol-thumbs .th{width:28px;height:48px;flex-basis:28px}
  .sec-sol .sol h3{font-size:16px}
  .sec-sol .sol .cnt{font-size:11px}
  .sec-sol .sol .arr{width:32px;height:32px}
  #photosSection,.section.tr-hero-sec,.section.tr-gallery-sec{padding-bottom:var(--sec-pad)}   /* no stagger on phones, so no extra room */
  #photoMosaic.n5{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  #photoMosaic.n5 > figure:nth-child(1){grid-column:1 / -1;grid-row:auto}
  #photoMosaic.n5 > figure:nth-child(n+2){grid-column:auto;grid-row:auto;translate:none}
  #photoMosaic.n5 > figure.big .ph-img{aspect-ratio:4/3;flex:none}
  #photoMosaic figure.ph figcaption{min-height:0}
  figure.ph figcaption{font-size:12.5px}
  #homeWall{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  #homeWall > div{height:72px;min-height:72px;padding:10px}
  #homeWall > div:last-child:nth-child(odd){grid-column:auto}
  #homeWall .cl,#homeWall .cl img{max-height:30px;height:30px}
  .cta-sec::before{height:240px}
  .cta-sec .cta-band{margin-top:-64px;padding:32px 24px;max-width:none}
  .cta-band h2{font-size:26px}
  .cta-band p{font-size:16px}
  .page-head{padding:calc(var(--nav-h) + 40px) 0 56px}
  .page-head[data-photo-file]::after{position:relative;display:block;top:auto;right:auto;bottom:auto;width:auto;height:220px;margin:32px 24px 0}
  .page-head[data-photo-file] > .container > *{max-width:none}
  .page-head h1{font-size:34px}
  /* the contact dock (25-dock.css: 52px wide, 46px up to 620px) floats over the right edge, centred on the screen, which
     on the first screen of an inner page is its head: the head's text keeps clear of it, as the home hero copy does
     (the 24 to 34px gutter alone left the ends of the lead lines under the dock, on Dukungan and Tentang at 390px) */
  .page-head > .container{padding-right:60px}
  .page-head[data-photo-file] + .section{padding-top:var(--sec-pad)}
  .page-head[data-photo-file] + .calc-section{padding:32px 0}
  #trHero{row-gap:24px}
  #trHero > figure:nth-child(n){grid-column:1 / -1;translate:none}
  #trGallery{grid-template-columns:minmax(0,1fr);--cols:1}
  #trTopics,#trHow{grid-template-columns:minmax(0,1fr)}
  .who-box[data-photo-file]::after,#featuredSection .hs-img,.tkb-grid > .tkb-photo,figure.ph .ph-img,#trHero figure.ph .ph-img,.cta-band,#finderSection .finder,.tkdn-steps,.sec-sol .sol-grid,
  .page-head[data-photo-file]::after,#homeCats .cat .cimg .pimg,#homeCats .cat:first-child .cimg .pimg,.tkdn-rule,#featuredSection .hs-copy,.tkdn-holder,.tkdn-card,#trTopics > div,#trHow > div,
  #reviewsSection .rv,#svcList > div,figure.aw,li.ph-ev,article.prod,.sol.big,#contactForm,.hours,.tool,.guide,.sup-card,.sol-detail .sol-intro,.detail .pimg,.gal .gal-view .pimg,
  #homeCats .cat:not(.has-photo) .icon{--cut:16px}
  #homeCats .cat:first-child:not(.has-photo) .icon{min-height:0;height:auto;aspect-ratio:4/3}
}
@media (max-width:620px){ .page-head > .container{padding-right:54px} }   /* the narrower dock of small phones, and 8px */
/* the Dukungan head on phones held upright: the portrait crop at the full width, anchored at its foot, the text above
   it. The hands span the lower 56% of the 4:5 photo (from the black fingernail at 44% of its height), that is 70% of the
   width (--stage): the head keeps that much room under the lead and 20px more, so the handshake shows whole below the
   text with a clear gap (test_support_head_photo); above the photo the layer shows the photo's own top tone (a plain
   blurred office), and the white veil covers the text and fades out across the fingernail. On hosting the phone layer
   always shows the HD copy (1200 x 1500 at 71 kB; the 1152 px light copy, 62 kB, is what the single file and the
   artifact embed). The head is about 810px tall at 390px (id), so on a short phone (320 x 568) the handshake shows only
   after a little scrolling. */
@media (max-width:760px) and (orientation:portrait){
  .head-full > .head-bg.wide{display:none}
  .page-head.head-full{--stage:70vw;padding-bottom:calc(var(--stage) + 20px);min-height:0}
  .head-full{--veil:linear-gradient(0deg,rgba(255,255,255,0) calc(var(--stage) - 36px),rgba(255,255,255,.72) calc(var(--stage) + 36px))}
  .head-full > .head-bg.tall{display:block;background-size:100% 100%,100% auto;background-image:var(--veil),var(--photo-hd,var(--photo,none))}
  .head-full > .head-bg.tall[data-photo-file="stok/jabat-tangan-ponsel"]{background-color:#F3EAE8}
  .head-full > .container > *{max-width:none}
}
/* phones held sideways (up to 760px wide, e.g. 740 x 360 or 667 x 375) keep the wide crop with the text on the left
   half, like tablets and like the phones that are wider than 760px sideways (844 x 390): under the portrait crop the
   text ran the full width and pushed the handshake two screens down. As on small tablets the head is taller than 8:3, so
   the photo is scaled to its height and framed at 58%; that makes it wider than the 1440 px light copy even at 1x, so
   on hosting the layer always takes the HD copy. At that scale the ends of the lead lines fall on the shadowed cuff of
   the sleeve (4.25:1 at 667 x 375 in id under the veil of wider screens), so the white veil holds further right: .82
   to 44%, clear from 60% (5.7:1 or more; the hands start at about 55% of the width). */
@media (max-width:760px) and (orientation:landscape){
  .head-full{--veil:linear-gradient(90deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.82) 44%,rgba(255,255,255,0) 60%)}
  .head-full > .head-bg.wide{background-image:var(--veil),var(--photo-hd,var(--photo,none))}
  .head-full > .head-bg.wide[data-photo-file="stok/jabat-tangan"]{background-position:58% 50%}
}

/* ---------- stock photos (assets/photos/stok, data-photo-file="stok/<name>"): on hosting paintPhotos sets --photo to the
   1440 px copy and --photo-hd to the HD copy (the owner's full size, up to 3200 px). A frame takes the HD copy wherever the
   light copy would show enlarged: on screens from 1500px wide, on tablets and desktops from 1.25 dppx (retina, and Windows
   at 125% scaling), on retina phones (the two rules below) and in a phone banner (taller than wide, see the phone block).
   -webkit-min-device-pixel-ratio is there for Safari before 16, which does not know resolution in dppx. The single file
   and the artifact carry only the 1440 px copy (no --photo-hd), so they fall back to --photo. Before the print block,
   which drops the photos again. ---------- */
@media (min-width:1500px), (min-width:761px) and (min-resolution:1.25dppx), (min-width:761px) and (-webkit-min-device-pixel-ratio:1.25){
  .who-box[data-photo-file]::after,.page-head[data-photo-file]::after,.cta-sec::before{background-image:var(--photo-hd,var(--photo,none))}
  .sec-banner > .banner{background-image:var(--scrim),var(--photo-hd,var(--photo,none))}
  .head-full > .head-bg.wide{background-image:var(--veil),var(--photo-hd,var(--photo,none))}
}
/* phones: a CTA strip is 240 px tall and the light copy of a 3.2:1 strip photo 450 px tall, so its height sets the scale
   and from 2 dppx the light copy would show enlarged (1.07 at 2x, 1.6 at 3x; the HD copy 0.72 at 3x). The page head frame
   (about 342 x 220) and the statement frame (342 x 240) only need it from about 2.5 dppx (a strip photo in the Berita head:
   0.98 at 2x, 1.47 at 3x), so phones at 2x keep the light copy there. */
@media (max-width:760px) and (min-resolution:2dppx), (max-width:760px) and (-webkit-min-device-pixel-ratio:2){
  .cta-sec::before{background-image:var(--photo-hd,var(--photo,none))}
}
@media (max-width:760px) and (min-resolution:2.5dppx), (max-width:760px) and (-webkit-min-device-pixel-ratio:2.5){
  .who-box[data-photo-file]::after,.page-head[data-photo-file]::after{background-image:var(--photo-hd,var(--photo,none))}
}

@media print{
  :root{--sec-pad:16px}
  .who-box[data-photo-file]::after,.cta-sec::before,.page-head::after,.page-head.head-full > .head-bg{display:none}
  .page-head.head-full{padding-bottom:40px;min-height:0}
  .sec-banner > .banner{background:none;min-height:0;padding:0 0 24px}
  .sec-banner > .banner + .container{margin-top:0}
  .who-box,.page-head[data-photo-file] > .container > *,.head-full > .container > *{grid-template-columns:minmax(0,1fr);max-width:none}
  .sec-banner .section-head .title,.sec-banner .sh-side > p{color:var(--ink)}
  .sec-banner .banner .btn-ghost{color:var(--ink);border-color:var(--ink)}
}