/* mikhatekhnologi.com — one stylesheet for the whole site (rework 2026-11-07, modelled on epson.co.id).
   Every page: a white header, a hero (text left, photograph to the right edge), then plain sections in one
   centred column: product cards, feature rows (photo + text), size cards, numbered steps, a spec table,
   the "Hubungi kami" cards and a light grey footer with link columns.
   One face: Switzer (self-hosted, ITF Free Font License, see fonts/switzer-LICENSE.txt), bold headings.
   White ground, black text, Epson blue for links and buttons, red for the main action. Square corners. */
@font-face { font-family: Switzer; src: url(/assets/fonts/switzer.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --bg: #ffffff;
  --text: #141414;
  --muted: #545b66;                        /* secondary notes (6.9:1 on white) */
  --ink: #003399;                          /* Epson blue */
  --ink-dark: #00267a;
  --accent: #d71920;                       /* the main action */
  --accent-dark: #b3141a;
  --card: #eef2f8;                         /* tinted cards */
  --grey: #f3f4f6;                         /* help cards, footer */
  --line: #dde2ea;
  --on-ink: #ffffff;

  --s-small: 0.875rem;                                       /* 14 */
  --s-body: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);        /* 16–17 */
  --s-lead: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);     /* 18–22 */
  --s-h3: clamp(1.125rem, 1.03rem + 0.4vw, 1.375rem);        /* 18–22 */
  --s-h2: clamp(1.75rem, 1.3rem + 1.5vw, 2.75rem);           /* 28–44 */
  --s-h1: clamp(2.25rem, 1.45rem + 2.6vw, 4rem);             /* 36–64 */

  --max: clamp(1280px, 66vw, 1680px);     /* content width: 1280 on laptops, grows on wide monitors */
  --m: clamp(16px, 3vw, 40px);
  --gap: clamp(16px, 2vw, 32px);
  --sec: clamp(64px, 8vw, 120px);
  --head: 72px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (max-width: 959px) { :root { --head: 64px; } }
/* Wide monitors: type one step larger (everything set in rem follows) and a taller header. */
@media (min-width: 2000px) {
  html { font-size: 112.5%; }
  :root { --head: 84px; }
  .mk-head__logo img { height: 42px; }
  .mk-ico { width: 36px; height: 36px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--head) + 16px); }
body.mk {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Switzer, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--s-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.mk img, .mk video, .mk svg { display: block; max-width: 100%; }
.mk img, .mk video { height: auto; }
.mk :where(h1, h2, h3, p, dl, dd, ul, ol, figure) { margin: 0; }
.mk :where(ul, ol) { padding: 0; list-style: none; }
.mk h1 { font-size: var(--s-h1); font-weight: 650; letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance; }
.mk h2 { font-size: var(--s-h2); font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; }
.mk h3 { font-size: var(--s-h3); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.mk p { text-wrap: pretty; }
.mk a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.mk a:hover { color: var(--ink-dark); }
.mk ::selection { background: var(--ink); color: var(--on-ink); }
.mk :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.mk-skip { position: absolute; left: var(--m); top: -100px; z-index: 50; background: var(--ink); color: var(--on-ink) !important; padding: 12px 16px; }
.mk-skip:focus { top: 8px; }
.mk-wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--m)); margin-inline: auto; padding-inline: var(--m); }
.mk-muted { color: var(--muted); }
.mk-ico { width: 32px; height: 32px; flex: none; color: var(--ink); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- buttons and links ---------- */
.mk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 50px; padding: 0 24px;
  font: inherit; font-weight: 600; letter-spacing: 0; line-height: 1.2; text-decoration: none; white-space: nowrap;
  border: 2px solid transparent; border-radius: 0; cursor: pointer;
  background: var(--accent); color: var(--on-ink) !important;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.mk-btn:hover { background: var(--accent-dark); }
.mk-btn--ink { background: var(--ink); }
.mk-btn--ink:hover { background: var(--ink-dark); }
.mk-btn--line { background: transparent; border-color: var(--ink); color: var(--ink) !important; }
.mk-btn--line:hover { background: var(--ink); color: var(--on-ink) !important; }
.mk-btn--small { min-height: 42px; padding: 0 18px; font-size: var(--s-small); }
.mk-arrow { width: 18px; height: 18px; flex: none; transition: transform 200ms var(--ease); }
.mk-btn:hover .mk-arrow, .mk-more:hover .mk-arrow { transform: translateX(4px); }
.mk-more { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; }
.mk-more .mk-arrow { width: 16px; height: 16px; }
.mk-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }

/* ---------- header ---------- */
.mk-head { position: sticky; top: 0; z-index: 30; height: var(--head); background: var(--bg); border-bottom: 1px solid var(--line); }
.mk-head__in { height: 100%; display: flex; align-items: center; gap: 40px; }
.mk-head__logo { flex: none; display: block; }
.mk-head__logo img { height: 36px; width: auto; }
.mk-nav { display: flex; align-items: center; align-self: stretch; gap: 40px; margin-left: auto; }
.mk-nav__mega { display: flex; align-items: center; align-self: stretch; }
:is(.mk-nav > a, .mk-nav__mega > a), .mk-menu__panel a:not(.mk-btn) { color: var(--text); font-weight: 500; font-size: 0.9375rem; text-decoration: none; }
:is(.mk-nav > a, .mk-nav__mega > a) { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 8px 0; white-space: nowrap; }
:is(.mk-nav > a, .mk-nav__mega > a)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 220ms var(--ease); }
:is(.mk-nav > a, .mk-nav__mega > a):hover, :is(.mk-nav > a, .mk-nav__mega > a)[aria-current], .mk-nav__mega:hover > a { color: var(--ink); }
:is(.mk-nav > a, .mk-nav__mega > a):hover::after, :is(.mk-nav > a, .mk-nav__mega > a)[aria-current]::after, .mk-nav__mega:hover > a::after { transform: scaleX(1); }
.mk-chev { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--ease); }
.mk-nav__mega:hover .mk-chev, .mk-nav__mega:focus-within .mk-chev { transform: rotate(180deg); }

/* Drop-down panel under the header (Solusi Bisnis, Dukungan Produk), opened by hover or keyboard focus */
.mk-mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px rgba(20, 30, 60, 0.10); visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity 160ms var(--ease), transform 160ms var(--ease), visibility 0s linear 160ms; } /* taste-skill-ignore: a real overlay panel */
.mk-nav__mega:hover .mk-mega, .mk-nav__mega:focus-within .mk-mega { visibility: visible; opacity: 1; transform: none; transition: opacity 160ms var(--ease) 100ms, transform 160ms var(--ease) 100ms, visibility 0s linear 100ms; }
.mk-mega__in { padding-block: 28px 32px; }
.mk-mega__title { display: flex; align-items: baseline; gap: 24px; margin-bottom: 16px; }
.mk-mega__title b { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.02em; }
.mk-mega .mk-tiles { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.mk-mega .mk-tiles a { background: transparent; padding: 16px 8px; }
.mk-mega .mk-tiles a:hover { background: var(--card); color: var(--ink); }
/* Produk panel: the product pictures from the home row, small, with their names */
.mk-prods { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.mk-prods a { display: grid; justify-items: center; gap: 8px; padding: 12px 8px 16px; color: var(--text); font-weight: 500; font-size: 0.9375rem; line-height: 1.3; text-align: center; text-decoration: none; transition: background-color 160ms var(--ease), color 160ms var(--ease); }
.mk-prods a:hover { background: var(--card); color: var(--ink); }
.mk-prods img { width: 100%; max-width: 168px; }

/* Icon tiles: a line icon above a label (sectors, support topics) */
.mk-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.mk-tiles a { height: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px 12px 24px; text-align: center; background: var(--bg); color: var(--text); font-weight: 500; font-size: 0.9688rem; line-height: 1.3; text-decoration: none; transition: background-color 160ms var(--ease), color 160ms var(--ease); }
.mk-sec:not(.mk-sec--tint) .mk-tiles a { background: var(--card); }
.mk-sec .mk-tiles a:hover { background: var(--ink); color: var(--on-ink); }
.mk-sec .mk-tiles a:hover .mk-sico { stroke: var(--on-ink); }
.mk-sico { width: 64px; height: 64px; flex: none; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke 160ms var(--ease); }
.mk-tiles--7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 1279px) { .mk-tiles--7 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 899px) { .mk-tiles, .mk-tiles--7 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 559px) { .mk-tiles, .mk-tiles--7 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mk-sec .mk-tiles a { padding: 24px 12px; } .mk-sico { width: 52px; height: 52px; } }
.mk-menu { display: none; margin-left: auto; position: relative; }
.mk-menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--s-small); padding: 12px 0 12px 12px; color: var(--text); }
.mk-menu summary::-webkit-details-marker { display: none; }
.mk-menu summary svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.mk-menu[open] summary { color: var(--ink); }
.mk-menu__panel { position: absolute; right: calc(-1 * var(--m)); top: calc(100% + 11px); width: min(340px, 100vw); background: var(--bg); padding: 8px var(--m) 24px; display: grid; border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(20, 30, 60, 0.14); } /* taste-skill-ignore: the phone menu is a real overlay */
.mk-menu__panel a:not(.mk-btn) { padding: 14px 0; font-size: var(--s-body); border-bottom: 1px solid var(--line); }
.mk-menu__panel a[aria-current] { color: var(--ink); }
.mk-menu__panel .mk-btn { margin-top: 16px; }
.mk-menu__group { padding: 20px 0 4px; font-size: var(--s-small); font-weight: 600; color: var(--muted); }
.mk-menu__panel a.mk-menu__sub { padding-left: 16px; }
@media (max-width: 1023px) {
  .mk-nav, .mk-head__act { display: none; }
  .mk-menu { display: block; }
}
@media (max-width: 959px) { .mk-head__logo img { height: 30px; } }

/* ---------- hero: text on the left, photograph to the right edge ---------- */
.mk-hero {
  display: grid;
  grid-template-columns: minmax(var(--m), 1fr) minmax(0, calc(var(--max) * 0.44)) minmax(0, calc(var(--max) * 0.56)) minmax(var(--m), 1fr);
  min-height: clamp(460px, 40vw, 620px);
  background: var(--bg);
}
.mk-hero__text { grid-column: 2; align-self: center; padding: 56px clamp(32px, 4vw, 64px) 56px 0; }
.mk-hero__text h1 { max-width: 14ch; }
.mk-hero__sub { margin-top: 24px; font-size: var(--s-lead); line-height: 1.5; max-width: 34ch; }
.mk-hero__text .mk-acts { margin-top: 36px; }
.mk-hero__pic { grid-column: 3 / 5; position: relative; overflow: hidden; background: var(--card); }
.mk-hero__pic img, .mk-hero__pic iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
/* Wide monitors: the photograph stays inside the content width, so the hero lines up with the header and sections. */
@media (min-width: 1800px) {
  .mk-hero { min-height: clamp(560px, 34vw, 720px); padding-top: 40px; }
  .mk-hero__pic { grid-column: 3; }
}
@media (max-width: 899px) {
  .mk-hero { display: block; min-height: 0; }
  .mk-hero__pic { aspect-ratio: 16 / 10; }
  .mk-hero__text { padding: 32px var(--m); }
  .mk-hero__sub { margin-top: 16px; }
  .mk-hero__text .mk-acts { margin-top: 28px; }
}
@media (max-width: 559px) { .mk-hero__text .mk-acts .mk-btn { flex: 1 1 100%; } }

/* Home hero, promo style (after epson.com): a tag, headline and buttons on the left, a studio photo anchored to the
   right edge and a blue band along the bottom. The photo's backdrop is near-white, so its left edge fades into the page. */
.mk-hero--promo { --band: clamp(36px, 4.4vw, 80px); position: relative; overflow: hidden; min-height: clamp(520px, 44vw, 800px); background: #f9f9fb; }
.mk-hero--promo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: var(--band); background: var(--ink); }
.mk-hero--promo .mk-hero__text { position: relative; z-index: 2; padding-bottom: calc(56px + var(--band)); }
.mk-hero--promo .mk-hero__pic { grid-column: auto; position: absolute; top: 0; right: 0; bottom: 0; height: 100%; aspect-ratio: 3 / 2; background: none; }
.mk-hero--promo .mk-hero__pic img { object-position: 100% 100%; -webkit-mask-image: linear-gradient(to right, transparent, #000 22%); mask-image: linear-gradient(to right, transparent, #000 22%); }
.mk-hero--promo h1 { font-size: clamp(2.25rem, 1.2rem + 3.3vw, 5rem); }
.mk-tag { display: inline-block; margin-bottom: 20px; padding: 8px 16px 18px; background: var(--ink); color: var(--on-ink); font-size: 1.125rem; font-weight: 650; letter-spacing: 0.01em; line-height: 1.2; clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%); }
/* Tablet landscape and small laptops: the text column is fixed at 440px and the photo shrinks (still anchored bottom
   right) until the board, which starts 22% into the photo, clears the text. Its top edge then fades as well. */
@media (min-width: 900px) and (max-width: 1199px) {
  .mk-hero--promo { grid-template-columns: var(--m) minmax(0, 440px) 1fr var(--m); }
  .mk-hero--promo .mk-hero__pic { top: auto; height: min(100%, calc((100vw - var(--m) - 431px) / 1.1745)); }
  .mk-hero--promo .mk-hero__pic img {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 22%), linear-gradient(to bottom, transparent, #000 6%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 22%), linear-gradient(to bottom, transparent, #000 6%); mask-composite: intersect;
  }
}
@media (max-width: 899px) {
  .mk-hero--promo { --band: 28px; min-height: 0; }
  .mk-hero--promo .mk-hero__text { padding-bottom: 8px; }
  .mk-hero--promo .mk-hero__pic { position: relative; height: auto; aspect-ratio: 4 / 3; }
  .mk-hero--promo .mk-hero__pic img { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%); mask-image: linear-gradient(to bottom, transparent, #000 16%); }
  .mk-tag { margin-bottom: 16px; font-size: 1rem; }
}

/* ---------- product row under the home hero (after epson.com): product cut-outs on white with a name under each.
   Small tiles, centred when all six fit; narrower screens scroll sideways, with arrow buttons (site.js) on tablets. ---------- */
.mk-range { padding-block: clamp(16px, 2vw, 24px); border-bottom: 1px solid var(--line); }
.mk-range__in { position: relative; }
.mk-range__list { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(104px, 9.5vw, 150px); gap: clamp(16px, 2.4vw, 40px); width: max-content; max-width: 100%; margin-inline: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.mk-range__list::-webkit-scrollbar { display: none; }
.mk-range__list li { scroll-snap-align: start; }
.mk-range__list a { display: grid; justify-items: center; gap: 8px; color: var(--text); text-align: center; text-decoration: none; font-size: 0.9375rem; line-height: 1.3; }
.mk-range__list img { width: 100%; transition: transform 200ms var(--ease); }
.mk-range__list span { text-wrap: balance; }
.mk-range__list a:hover { color: var(--ink); }
.mk-range__list a:hover img { transform: translateY(-4px); }
.mk-range__btn { position: absolute; top: 36%; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; transform: translateY(-50%); border: 0; background: var(--bg); color: var(--text); cursor: pointer; }
.mk-range__btn[hidden] { display: none; }
.mk-range__btn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mk-range__btn:hover { color: var(--ink); }
.mk-range__btn--prev { left: calc(var(--m) - 44px); }
.mk-range__btn--next { right: calc(var(--m) - 44px); }
@media (max-width: 1279px) {
  .mk-range__btn--prev { left: 0; }
  .mk-range__btn--next { right: 0; }
}
@media (max-width: 899px) {
  .mk-range__list { max-width: calc(100% + 2 * var(--m)); margin-inline: calc(-1 * var(--m)); padding-inline: var(--m); scroll-padding-inline: var(--m); }
  .mk-range__btn { display: none; }
}
/* Phones: three products at a time, filling the width; the other three slide in (site.js moves the row every 3 s). */
@media (max-width: 739px) {
  .mk-range__list { grid-auto-columns: calc((100% - 32px) / 3); gap: 16px; width: auto; max-width: none; margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
}

/* ---------- black banner (after epson.com): text on black at the left, a photo fading in from the right. On tablets and
   desktops it is a box inside the content width; on phones it runs edge to edge. ---------- */
.mk-banner { position: relative; display: flex; align-items: center; width: calc(100% - 2 * var(--m)); max-width: var(--max); min-height: clamp(380px, 32vw, 620px); margin: clamp(40px, 5vw, 80px) auto; overflow: hidden; background: #000; color: var(--on-ink); }
.mk-banner__pic { position: absolute; top: 0; right: 0; bottom: 0; width: 64%; }
.mk-banner__pic img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(to right, transparent, #000 42%); mask-image: linear-gradient(to right, transparent, #000 42%); }
.mk-banner__in { position: relative; z-index: 1; padding-inline: clamp(32px, 4vw, 64px); }
.mk-banner__text { max-width: min(500px, 46%); padding-block: 64px; }
.mk-banner h2 { color: var(--on-ink); }
.mk-banner p { margin-top: 16px; font-size: var(--s-lead); line-height: 1.5; }
.mk-banner .mk-acts { margin-top: 32px; }
.mk-banner :focus-visible { outline-color: var(--on-ink); }
@media (max-width: 899px) {
  .mk-banner { display: block; width: auto; max-width: none; min-height: 0; margin: 0; }
  .mk-banner__in { padding-inline: var(--m); }
  .mk-banner__pic { position: relative; width: 100%; aspect-ratio: 3 / 2; }
  .mk-banner__pic img { -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
  .mk-banner__text { max-width: none; padding-block: 0 56px; }
}

/* ---------- facts strip under the hero ---------- */
.mk-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mk-facts > div { display: flex; gap: 16px; align-items: flex-start; padding: 28px 24px 28px 0; }
.mk-facts > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.mk-facts b { display: block; font-size: 1.25rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; }
.mk-facts span { display: block; margin-top: 4px; font-size: var(--s-small); color: var(--muted); line-height: 1.45; }
@media (max-width: 999px) {
  .mk-facts { grid-template-columns: 1fr 1fr; }
  .mk-facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .mk-facts > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 559px) {
  .mk-facts { grid-template-columns: 1fr; }
  .mk-facts > div, .mk-facts > div + div { padding: 20px 0; border-left: 0; }
  .mk-facts > div + div { border-top: 1px solid var(--line); }
}

/* ---------- sections ---------- */
.mk-sec { padding-block: var(--sec); }
.mk-sec + .mk-sec:not(.mk-sec--tint) { padding-top: 0; }
.mk-sec--tint { background: var(--card); }
.mk-sec--tint + .mk-sec:not(.mk-sec--tint) { padding-top: var(--sec); }
.mk-sec__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 48px; margin-bottom: clamp(32px, 4vw, 56px); }
.mk-sec__head > div { max-width: 720px; }
.mk-sec__head p { margin-top: 16px; font-size: var(--s-lead); line-height: 1.5; color: var(--muted); }

/* ---------- cards: photo on top, text, a button ---------- */
.mk-cards { display: grid; gap: var(--gap); }
.mk-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-card { display: flex; flex-direction: column; background: var(--card); }
.mk-sec--tint .mk-card { background: var(--bg); }
.mk-card__pic { aspect-ratio: 16 / 10; overflow: hidden; background: var(--line); }
.mk-card__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.mk-card:hover .mk-card__pic img { transform: scale(1.03); }
.mk-card__body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 2.4vw, 36px); }
.mk-card__body p { color: var(--text); }
.mk-card__body .mk-acts { margin-top: auto; padding-top: 12px; }
@media (max-width: 899px) { .mk-cards--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 699px) { .mk-cards--3 { grid-template-columns: 1fr; } }

/* ---------- feature row: photo beside text ---------- */
.mk-feature { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.mk-feature--flip .mk-feature__pic { order: 2; }
.mk-feature__pic { aspect-ratio: 4 / 3; overflow: hidden; background: var(--card); }
.mk-feature__pic--tall { aspect-ratio: 4 / 5; }
.mk-feature__pic img { width: 100%; height: 100%; object-fit: cover; }
.mk-feature__text > * + * { margin-top: 20px; }
.mk-feature__text h2 + * { margin-top: 24px; }
.mk-lead { font-size: var(--s-lead); line-height: 1.45; letter-spacing: -0.01em; font-weight: 500; }
.mk-feature__text .mk-acts { margin-top: 32px; }
.mk-checks { display: grid; gap: 12px; }
.mk-checks li { position: relative; padding-left: 32px; }
.mk-checks li::before { content: ""; position: absolute; left: 2px; top: 0.3em; width: 18px; height: 18px; background: var(--ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.mk-checks b { font-weight: 600; }
.mk-big { font-size: clamp(4rem, 2.5rem + 6vw, 8rem); font-weight: 650; letter-spacing: -0.05em; line-height: 0.9; color: var(--ink); }
@media (max-width: 899px) {
  .mk-feature { grid-template-columns: 1fr; }
  .mk-feature--flip .mk-feature__pic { order: 0; }
  .mk-feature__pic--tall { aspect-ratio: 4 / 3; }
}

/* ---------- size cards ---------- */
.mk-sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.mk-size { display: flex; flex-direction: column; background: var(--card); padding: 28px clamp(20px, 2vw, 28px) 28px; }
.mk-sec--tint .mk-size { background: var(--bg); }
.mk-size svg { width: 100%; height: auto; margin-bottom: 24px; }
.mk-size svg rect { fill: var(--bg); stroke: var(--ink); stroke-width: 2.5; }
.mk-sec--tint .mk-size svg rect { fill: var(--card); }
.mk-size svg line { stroke: var(--muted); stroke-width: 1.5; }
.mk-size h3 { font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem); font-weight: 650; letter-spacing: -0.03em; }
.mk-size p { margin-top: 4px; font-weight: 600; }
.mk-size small { display: block; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--s-small); color: var(--muted); line-height: 1.45; }
.mk-note { margin-top: 24px; font-size: var(--s-small); color: var(--muted); }
@media (max-width: 999px) { .mk-sizes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 559px) {
  .mk-sizes { grid-template-columns: 1fr; }
  .mk-size { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 20px; align-items: center; padding: 24px; }
  .mk-size svg { grid-row: 1 / 4; margin: 0; }
  .mk-size h3, .mk-size p, .mk-size small { grid-column: 2; }
  .mk-size small { margin-top: 8px; padding-top: 8px; }
}

/* ---------- numbered steps ---------- */
.mk-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); counter-reset: step; }
.mk-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-steps > li { counter-increment: step; border-top: 3px solid var(--ink); padding-top: 20px; }
.mk-steps > li::before { content: counter(step, decimal-leading-zero); display: block; margin-bottom: 12px; font-size: 0.9375rem; font-weight: 650; color: var(--ink); }
.mk-steps h3 { font-size: 1.125rem; }
.mk-steps p { margin-top: 8px; color: var(--muted); font-size: 0.9688rem; line-height: 1.55; }
.mk-steps__pic { aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 20px; background: var(--card); }
.mk-steps--3 > li { border-top: 0; padding-top: 0; }
.mk-steps--3 > li::before { display: none; }
.mk-steps--3 h3::before { content: counter(step, decimal-leading-zero); margin-right: 12px; color: var(--ink); }
.mk-steps__pic img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1099px) { .mk-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; } }
@media (max-width: 699px) { .mk-steps, .mk-steps--3 { grid-template-columns: 1fr; row-gap: 32px; } }

/* ---------- process flow: numbered cards joined by arrows, the last one filled ---------- */
.mk-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); counter-reset: flow; }
.mk-flow > li { counter-increment: flow; position: relative; display: flex; flex-direction: column; background: var(--bg); border-top: 4px solid var(--ink); padding: 28px clamp(18px, 1.6vw, 26px) 32px; }
.mk-flow__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.mk-flow__num::before { content: counter(flow); display: grid; place-items: center; width: 44px; height: 44px; background: var(--ink); color: var(--on-ink); font-size: 1.125rem; font-weight: 650; }
.mk-flow h3 { font-size: 1.1875rem; }
.mk-flow p { margin-top: 10px; font-size: 0.9688rem; line-height: 1.55; color: var(--text); }
.mk-flow > li:not(:last-child)::after { content: ""; position: absolute; z-index: 1; top: 47px; right: calc(var(--gap) / -2 - 6px); width: 12px; height: 12px; border-top: 2.5px solid var(--ink); border-right: 2.5px solid var(--ink); transform: rotate(45deg); }
.mk-flow > li:last-child { background: var(--ink); border-top-color: var(--ink-dark); color: var(--on-ink); }
.mk-flow > li:last-child p { color: var(--on-ink); }
.mk-flow > li:last-child .mk-flow__num::before { background: var(--bg); color: var(--ink); }
.mk-flow > li:last-child .mk-ico { color: var(--on-ink); }
@media (max-width: 1099px) {
  .mk-flow { grid-template-columns: 1fr; }
  .mk-flow > li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; border-top: 0; border-left: 4px solid var(--ink); padding: 24px 24px 24px 20px; }
  .mk-flow__top { grid-row: 1 / 3; flex-direction: column; justify-content: flex-start; gap: 14px; margin: 0; }
  .mk-flow h3, .mk-flow p { grid-column: 2; }
  .mk-flow p { margin-top: 6px; }
  .mk-flow > li:not(:last-child)::after { top: auto; bottom: calc(var(--gap) / -2 - 6px); right: auto; left: 40px; transform: rotate(135deg); }
}

/* ---------- after-sales: four advantages in a 2 x 2 grid ---------- */
.mk-adv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; padding-top: 8px; }
.mk-adv h3 { margin-top: 12px; font-size: 1.0625rem; }
.mk-adv p { margin-top: 6px; color: var(--muted); font-size: 0.9688rem; line-height: 1.55; }
@media (max-width: 559px) { .mk-adv { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- solution and support cards: icon, title, text, product chips ---------- */
.mk-solusi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.mk-solusi--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mk-solusi > article { display: flex; flex-direction: column; gap: 14px; background: var(--bg); padding: clamp(24px, 2.4vw, 36px); }
.mk-sec:not(.mk-sec--tint) .mk-solusi > article { background: var(--card); }
.mk-solusi .mk-sico { width: 56px; height: 56px; margin-bottom: 4px; }
.mk-solusi h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); }
.mk-solusi__label { margin-top: 4px; font-size: var(--s-small); font-weight: 600; color: var(--muted); }
.mk-solusi .mk-kit li { background: var(--card); }
.mk-sec:not(.mk-sec--tint) .mk-solusi .mk-kit li { background: var(--bg); }
.mk-solusi .mk-more { margin-top: auto; padding-top: 8px; }
.mk-solusi .mk-checks { gap: 8px; font-size: 0.9688rem; }
@media (max-width: 1099px) { .mk-solusi--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .mk-solusi, .mk-solusi--4 { grid-template-columns: 1fr; } }

/* Operating guide: the same cards, each with numbered steps */
.mk-howto ol { display: grid; gap: 10px; counter-reset: howto; font-size: 0.9688rem; line-height: 1.5; }
.mk-howto ol li { counter-increment: howto; position: relative; padding-left: 34px; }
.mk-howto ol li::before { content: counter(howto); position: absolute; left: 0; top: 0.1em; display: grid; place-items: center; width: 22px; height: 22px; background: var(--ink); color: var(--on-ink); font-size: 0.75rem; font-weight: 650; }
.mk-howto b { font-weight: 600; }

/* ---------- questions and answers ---------- */
.mk-faq { border-top: 1px solid var(--line); }
.mk-faq details { border-bottom: 1px solid var(--line); }
.mk-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; font-size: 1.0625rem; font-weight: 600; }
.mk-faq summary::-webkit-details-marker { display: none; }
.mk-faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--ink), var(--ink)) center / 100% 2px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2px 100% no-repeat; transition: transform 200ms var(--ease); }
.mk-faq details[open] summary::after { transform: rotate(45deg); }
.mk-faq summary:hover { color: var(--ink); }
.mk-faq details p { padding: 0 48px 24px 0; max-width: 72ch; }
.mk-flow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- spec table and company register ---------- */
.mk-spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--gap); }
.mk-spec__group h3 { font-size: 1.125rem; padding-bottom: 12px; border-bottom: 2px solid var(--text); }
.mk-spec__group dl > div, .mk-reg > div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.mk-spec__group dt, .mk-reg dt { color: var(--muted); }
.mk-spec__group dd, .mk-reg dd { font-weight: 500; }
.mk-reg > div { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); padding: 18px 0; }
.mk-reg > div:first-child { border-top: 1px solid var(--line); }
@media (max-width: 799px) { .mk-spec { grid-template-columns: 1fr; } }
@media (max-width: 499px) { .mk-reg > div { grid-template-columns: 1fr; gap: 4px; } }
.mk-kit { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-kit li { padding: 8px 14px; background: var(--card); font-size: 0.9375rem; font-weight: 500; }

/* ---------- values: four cards with an icon ---------- */
.mk-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.mk-values > div { background: var(--grey); padding: 32px clamp(20px, 2vw, 28px); }
.mk-values h3 { margin-top: 20px; font-size: 1.1875rem; }
.mk-values p { margin-top: 8px; color: var(--muted); font-size: 0.9688rem; }
@media (max-width: 999px) { .mk-values { grid-template-columns: 1fr 1fr; } }
@media (max-width: 559px) { .mk-values { grid-template-columns: 1fr; } }

/* ---------- photo gallery ---------- */
.mk-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.mk-gallery figure { margin: 0; }
.mk-gallery__pic { aspect-ratio: 4 / 3; overflow: hidden; background: var(--card); }
.mk-gallery__pic img { width: 100%; height: 100%; object-fit: cover; }
.mk-gallery figcaption { margin-top: 12px; font-size: var(--s-small); color: var(--muted); }
@media (max-width: 799px) { .mk-gallery { grid-template-columns: 1fr 1fr; } }

/* ---------- video and map ---------- */
.mk-film { aspect-ratio: 16 / 9; background: var(--text); }
.mk-film video { width: 100%; height: 100%; object-fit: cover; }
.mk-map { position: relative; min-height: 420px; height: 100%; background: var(--card); }
.mk-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mk-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: stretch; }
.mk-contact h2 + * { margin-top: 28px; }
@media (max-width: 899px) { .mk-contact { grid-template-columns: 1fr; } .mk-map { min-height: 320px; } }

/* ---------- "Hubungi kami" cards, on every page ---------- */
.mk-help { padding-block: var(--sec); border-top: 1px solid var(--line); }
.mk-help h2 { color: var(--ink); max-width: 18ch; }
.mk-help__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(32px, 4vw, 48px); }
.mk-help__card { display: flex; flex-direction: column; background: var(--grey); padding: clamp(24px, 2vw, 28px); }
.mk-help__card .mk-ico { margin-bottom: 20px; }
.mk-help__card h3 { font-size: 1.1875rem; }
.mk-help__card p { margin-top: 8px; color: var(--muted); font-size: 0.9688rem; line-height: 1.55; }
.mk-help__card .mk-btn { margin-top: auto; align-self: flex-start; }
.mk-help__card p:last-of-type { margin-bottom: 24px; }
@media (max-width: 999px) { .mk-help__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 559px) { .mk-help__grid { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.mk-foot { background: var(--grey); font-size: 0.9375rem; }
.mk-foot__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 32px var(--gap); padding-block: 56px 48px; }
.mk-foot__logo { display: block; width: 210px; }
.mk-foot__co p { margin-top: 20px; color: var(--muted); max-width: 36ch; line-height: 1.55; }
.mk-foot__co a { font-weight: 600; }
.mk-foot__wa { display: inline-flex; margin: 12px 0 0 -6px; padding: 6px; }
.mk-foot__wa .mk-ico { color: var(--text); transition: color 160ms var(--ease); }
.mk-foot__wa:hover .mk-ico { color: var(--ink); }
.mk-foot h2 { font-size: 0.9375rem; font-weight: 650; letter-spacing: 0; margin-bottom: 14px; }
.mk-foot li + li { margin-top: 10px; }
.mk-foot li a { color: var(--text); text-decoration: none; }
.mk-foot li a:hover { color: var(--ink); text-decoration: underline; }
.mk-foot__bar { border-top: 1px solid var(--line); padding-block: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: var(--s-small); color: var(--muted); }
@media (max-width: 999px) { .mk-foot__grid { grid-template-columns: 1fr 1fr; } .mk-foot__co { grid-column: 1 / -1; } }

/* ---------- motion: a short rise as parts come into view ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-card__pic img, .mk-arrow, .mk-chev, .mk-range__list img { transition: none; }
  .mk-card:hover .mk-card__pic img, .mk-btn:hover .mk-arrow, .mk-more:hover .mk-arrow, .mk-range__list a:hover img { transform: none; }
  /* Drop-down panels open and close at once, and are out of the page while closed. */
  .mk-mega { display: none; transform: none; transition: none; }
  .mk-nav__mega:hover .mk-mega, .mk-nav__mega:focus-within .mk-mega { display: block; transition: none; }
}

@media print {
  .mk-head, .mk-help, .mk-film { display: none; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}
@media (max-width: 1099px) { .mk-flow--3 { grid-template-columns: 1fr; } }

/* ---------- home page only (body.mk-home): one spacing rhythm and five text sizes ----------
   Sizes at 1440px: headline 67, section heading 42, card title and intro 20, body 17, small 15.
   Sections sit one even gap apart (about 200px of white between their contents on desktop, 128px on phones);
   a heading sits closer to its own content than to the section before it. */
.mk-home {
  --sec: clamp(64px, 7vw, 104px);
  --s-small: 0.9375rem;                                    /* 15 */
  --s-lead: clamp(1.125rem, 1.02rem + 0.3vw, 1.25rem);     /* 18–20 */
  --s-h3: var(--s-lead);
}
.mk-home .mk-sec + .mk-sec:not(.mk-sec--tint) { padding-top: var(--sec); }
.mk-home .mk-sec__head { margin-bottom: clamp(32px, 3.5vw, 48px); }
.mk-home .mk-range { padding-top: clamp(28px, 3vw, 44px); border-bottom: 0; }
@media (min-width: 900px) { .mk-home .mk-banner { margin-block: calc(var(--sec) - 24px) var(--sec); } }
.mk-home .mk-tag { font-size: var(--s-body); }
.mk-home .mk-lead { font-size: var(--s-lead); line-height: 1.5; }
.mk-home .mk-tiles a { font-size: var(--s-body); }
/* Feature rows (purna jual, tentang, produksi) */
.mk-home .mk-feature__text > * + * { margin-top: 24px; }
.mk-home .mk-feature__text .mk-acts { margin-top: 40px; }
.mk-home .mk-checks { gap: 14px; }
.mk-home .mk-adv { gap: 32px 40px; }
.mk-home .mk-adv h3 { font-size: var(--s-h3); }
.mk-home .mk-adv p { margin-top: 8px; color: var(--text); font-size: var(--s-body); line-height: 1.55; }
/* Size cards */
.mk-home .mk-size h3 { font-size: var(--s-h3); font-weight: 600; letter-spacing: -0.015em; }
.mk-home .mk-size small { padding-top: 0; border-top: 0; }
.mk-home .mk-note { margin-top: 32px; }
/* Steps */
.mk-home .mk-flow > li { padding: 28px clamp(20px, 1.8vw, 28px) 32px; }
.mk-home .mk-flow__top { margin-bottom: 24px; }
.mk-home .mk-flow h3 { font-size: var(--s-h3); }
.mk-home .mk-flow p { font-size: var(--s-body); }
@media (min-width: 1100px) { .mk-home .mk-flow p { font-size: var(--s-small); } }   /* five narrow cards side by side */
/* Contact cards */
.mk-home .mk-help__card { padding: clamp(24px, 2.2vw, 32px); }
.mk-home .mk-help__card h3 { font-size: var(--s-h3); }
.mk-home .mk-help__card p { color: var(--text); font-size: var(--s-body); }

/* Purna jual, set like the black banner but mirrored: the photo on the left fading into black, text on the right.
   (The same block on Produk and Solusi keeps its normal look.) */
.mk-home #purna-jual { position: relative; display: flex; align-items: center; width: calc(100% - 2 * var(--m)); max-width: var(--max); min-height: clamp(380px, 32vw, 620px); margin: 0 auto; padding: 0; overflow: hidden; background: #000; color: var(--on-ink); }
.mk-home #purna-jual .mk-feature { display: block; width: 100%; max-width: none; padding: 0; }
.mk-home #purna-jual .mk-feature__pic { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; aspect-ratio: auto; background: none; }
.mk-home #purna-jual .mk-feature__pic img { -webkit-mask-image: linear-gradient(to left, transparent, #000 42%); mask-image: linear-gradient(to left, transparent, #000 42%); }
.mk-home #purna-jual .mk-feature__text { position: relative; z-index: 1; margin-left: 46%; padding: clamp(48px, 5vw, 72px) clamp(32px, 4vw, 64px) clamp(48px, 5vw, 72px) 0; }
.mk-home #purna-jual :is(h2, .mk-lead, .mk-more, .mk-more:hover) { color: var(--on-ink); }
.mk-home #purna-jual .mk-more:hover { text-decoration: underline; }
.mk-home #purna-jual :focus-visible { outline-color: var(--on-ink); }
@media (min-width: 900px) { .mk-home #purna-jual { margin-block: var(--sec); } }
@media (max-width: 899px) {
  .mk-home #purna-jual { display: block; width: auto; max-width: none; min-height: 0; }
  .mk-home #purna-jual .mk-feature__pic { position: relative; width: 100%; aspect-ratio: 3 / 2; }
  .mk-home #purna-jual .mk-feature__pic img { -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
  .mk-home #purna-jual .mk-feature__text { margin-left: 0; padding: 0 var(--m) 56px; }
}