/* ==========================================================================
   iSort — Design System v2
   Arah rasa: keluasan & tipografi Apple  ×  kehangatan kartu Zoom
   Palet inti: Gold · Silver · White. Tone produk diinjeksi lewat --brand*.
   ========================================================================== */

/* -------------------------------------------------- 1. Token */
:root {
  /* Diisi ulang per halaman / per kartu lewat inline style. */
  --brand: #B08D2F;
  --brand-glow: #E3C77A;
  --brand-soft: #FBF7EC;
  --brand-ink: #1B2430;
  --brand-silver: #C3C9D2;

  --ink: #06080C;
  --ink-2: #2B3340;
  --muted: #5C6675;
  --muted-2: #8C95A3;
  --line: #E8EAEF;
  --line-2: #F2F4F7;
  --bg: #FFFFFF;
  --bg-alt: #F6F7F9;
  --bg-deep: #0A0C10;

  --silver-1: #F4F5F7;
  --silver-2: #DFE3E9;

  --r-xs: 8px;
  --r-sm: 12px;
  --r: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-2xl: 40px;
  --r-pill: 999px;

  --sh-xs: 0 1px 2px rgba(10, 14, 22, .05);
  --sh-sm: 0 2px 10px -4px rgba(10, 14, 22, .10);
  --sh: 0 18px 40px -26px rgba(10, 14, 22, .30);
  --sh-lg: 0 40px 90px -50px rgba(10, 14, 22, .45);
  --sh-brand: 0 30px 70px -40px color-mix(in srgb, var(--brand) 62%, transparent);

  /* Poppins geometris dan tidak punya varian "Tight", jadi teks & judul
     memakai keluarga yang sama — dibedakan lewat berat dan tracking saja. */
  --font: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font);

  --shell: 1200px;
  --gutter: 24px;
  --head-h: 68px;

  --ease: cubic-bezier(.22, .61, .18, 1);
  --ease-out: cubic-bezier(.16, .84, .28, 1);
  --spring: cubic-bezier(.34, 1.4, .46, 1);

  color-scheme: light;
}

/* -------------------------------------------------- 2. Reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 24px);
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font);
  font-weight: var(--fw-body, 400);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.nav-open { overflow: hidden; }

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0 0 .5em;
  font-weight: var(--fw-heading, 600);
  line-height: 1.12;
  letter-spacing: -.018em;
}
h1 { font-size: clamp(2.6rem, 6.2vw, 4.6rem); letter-spacing: -.024em; }
h2 { font-size: clamp(1.95rem, 3.9vw, 3.15rem); letter-spacing: -.022em; }
h3 { font-size: 1.12rem; letter-spacing: -.025em; }

::selection { background: color-mix(in srgb, var(--brand) 26%, #fff); color: var(--ink); }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 300;
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: var(--r-pill);
  font-size: .88rem; font-weight: 600; transition: top .2s var(--ease);
}
.skip-link:focus { top: 14px; }

/* -------------------------------------------------- 3. Layout */
.shell { width: min(var(--shell), 100% - var(--gutter) * 2); margin-inline: auto; }

.section { padding: clamp(74px, 9vw, 144px) 0; position: relative; }
.section-alt { background: var(--bg-alt); }
.section-tint {
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--brand) 12%, #fff) 0%, transparent 62%),
    var(--brand-soft);
}

.sec-head { max-width: 660px; margin-bottom: clamp(44px, 5vw, 72px); }
.sec-head.center { margin-inline: auto; text-align: center; max-width: 780px; }
.sec-head h2 { margin-bottom: .34em; }
.sec-head p.lead { max-width: 56ch; }
.sec-head.center p.lead { margin-inline: auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font); font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand);
  padding: 7px 14px 7px 11px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--brand) 9%, #fff);
  border: 1px solid color-mix(in srgb, var(--brand) 20%, #fff);
  margin-bottom: 20px;
}
.eyebrow .ico { width: 14px; height: 14px; }
.sec-head.center .eyebrow { margin-inline: auto; }

.lead { font-size: clamp(1.02rem, 1.25vw, 1.16rem); color: var(--muted); line-height: 1.55; }

.grad-text {
  background: linear-gradient(104deg, var(--brand) 6%, var(--brand-glow) 52%, var(--brand) 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.ico { width: 20px; height: 20px; flex: none; }
.ico-sm { width: 16px; height: 16px; }
.ico-lg { width: 26px; height: 26px; }

/* Aurora — lapisan gradient lembut yang dipakai ulang */
.aurora { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.aurora::before, .aurora::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: .5;
}
.aurora::before {
  width: 58vw; height: 58vw; max-width: 760px; max-height: 760px;
  top: -24%; left: -12%;
  background: radial-gradient(circle, var(--brand-glow) 0%, transparent 68%);
  animation: drift 22s var(--ease) infinite alternate;
}
.aurora::after {
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  top: 6%; right: -14%;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-silver) 90%, #fff) 0%, transparent 68%);
  animation: drift 26s var(--ease) 1.6s infinite alternate-reverse;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(5%, 7%, 0) scale(1.14); }
}

/* -------------------------------------------------- 4. Tombol */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 24px; border-radius: var(--r-pill);
  font-size: .93rem; font-weight: var(--fw-button, 600); letter-spacing: -.012em;
  border: 1px solid transparent; white-space: nowrap;
  transition: transform .34s var(--spring), box-shadow .3s var(--ease),
              background-color .24s var(--ease), border-color .24s var(--ease), color .24s var(--ease);
}
.btn .ico { width: 15px; height: 15px; transition: transform .3s var(--spring); }
.btn:hover { transform: translateY(-2px); }
.btn:hover .ico { transform: translateX(3px); }
.btn:active { transform: translateY(0) scale(.985); }

/* Kilau melintas saat hover — sangat tipis, sekadar memberi kesan material */
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.34) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform .72s var(--ease);
}
.btn:hover::after { transform: translateX(130%); }

/* Warna tombol utama: --btn-main dari admin (Tampilan → Warna tombol utama),
   selain itu --brand (mis. di detail produk, mengikuti warna produknya). */
.btn-brand {
  --btn-c: var(--btn-main, var(--brand));
  background: linear-gradient(140deg, color-mix(in srgb, var(--btn-c) 80%, #fff) 0%, var(--btn-c) 58%, color-mix(in srgb, var(--btn-c) 78%, #000) 100%);
  color: #fff;
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--btn-c) 85%, #000);
}
.btn-brand:hover { box-shadow: 0 16px 32px -14px color-mix(in srgb, var(--btn-c) 70%, transparent), 0 10px 24px -12px color-mix(in srgb, var(--btn-c) 85%, #000); }

.btn-ghost {
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: var(--ink); border-color: var(--line); box-shadow: var(--sh-xs);
}
.btn-ghost:hover { border-color: var(--silver-2); background: #fff; box-shadow: var(--sh-sm); }

.btn-soft {
  background: color-mix(in srgb, var(--brand) 10%, #fff);
  color: color-mix(in srgb, var(--brand) 78%, #000);
  border-color: color-mix(in srgb, var(--brand) 22%, #fff);
}
.btn-soft:hover { background: color-mix(in srgb, var(--brand) 16%, #fff); }

.btn-lg { padding: 15px 30px; font-size: 1rem; }
.btn-sm { padding: 9px 18px; font-size: .85rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--brand); font-weight: var(--fw-button, 600); font-size: .92rem; letter-spacing: -.012em;
}
.link-arrow .ico { width: 15px; height: 15px; transition: transform .3s var(--spring); }
.link-arrow:hover .ico { transform: translateX(4px); }

/* -------------------------------------------------- 5. Progress + header */
.page-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 120; pointer-events: none; }
.page-progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--brand), var(--brand-glow));
  transition: width .1s linear;
}

/* Header melayang di atas hero: bening saat di puncak halaman,
   baru memakai latar kaca putih setelah digulir. */
.site-head {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 110; height: var(--head-h);
  display: flex; align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: height .32s var(--ease), border-color .32s var(--ease),
              transform .42s var(--ease), box-shadow .32s var(--ease);
}
/* Kaca header ada di lapisan ::before, bukan di .site-head sendiri:
   backdrop-filter pada induk menjadikannya "wadah" bagi elemen fixed di
   dalamnya, sehingga laci menu HP (.nav) terpotong setinggi header —
   terutama di Safari iPhone. */
.site-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  opacity: 0; transition: opacity .32s var(--ease);
  pointer-events: none;
}
.site-head.is-stuck {
  height: 60px;
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -26px rgba(10, 14, 22, .5);
}
.site-head.is-stuck::before { opacity: 1; }
.site-head.is-hidden { transform: translateY(-102%); }
/* Transform juga membuat wadah elemen fixed; saat laci terbuka header harus polos. */
body.nav-open .site-head { transform: none; }

/* Logo khusus header putih (Admin → Logo & Ikon → "Logo saat header berlatar putih"). */
.brand-img { display: block; }
.brand-img-stuck { display: none; }
.site-head.is-stuck .brand-img-top { display: none; }
.site-head.is-stuck .brand-img-stuck { display: block; }

/* -------------------------------------------------- 5b. Header bening di atas hero
   Hero beranda, detail produk & blog kini terang, jadi isi header tetap
   gelap. Hanya bila halaman dibuka dengan section gelap (aurora), isi
   header dibalik jadi terang selama belum digulir. */
body:has(#main > .section-deep:first-child) .site-head:not(.is-stuck) .brand-text { color: #fff; }
body:has(#main > .section-deep:first-child) .site-head:not(.is-stuck) .brand-i { color: var(--brand-glow); }
body:has(#main > .section-deep:first-child) .site-head:not(.is-stuck) .brand-mark svg rect { fill: #fff; }
body:has(#main > .section-deep:first-child) .site-head:not(.is-stuck) .brand-mark svg path { stroke: var(--brand); }

body:has(#main > .section-deep:first-child) .site-head:not(.is-stuck) .burger {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .34);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
body:has(#main > .section-deep:first-child) .site-head:not(.is-stuck) .burger span { background: #fff; }

@media (min-width: 961px) {
  body:has(#main > .section-deep:first-child) .site-head:not(.is-stuck) .nav-link { color: rgba(255, 255, 255, .84); }
  body:has(#main > .section-deep:first-child) .site-head:not(.is-stuck) .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .16); }
  body:has(#main > .section-deep:first-child) .site-head:not(.is-stuck) .nav-link.is-active { color: #fff; background: rgba(255, 255, 255, .2); }
  body:has(#main > .section-deep:first-child) .site-head:not(.is-stuck) .nav-cta {
    background: rgba(255, 255, 255, .92); color: var(--brand-ink);
    border-color: transparent; box-shadow: 0 10px 26px -16px rgba(0, 0, 0, .6);
  }
  body:has(#main > .section-deep:first-child) .site-head:not(.is-stuck) .nav-cta:hover { background: #fff; }
  /* Tiga kolom: logo kiri, kapsul menu tepat di tengah layar, CTA kanan.
     .nav "dilebur" supaya daftar menu & CTA jadi anak grid langsung; dua
     kolom tepi sama lebar, jadi kapsul benar-benar di tengah. */
  /* Diawali .site-head agar mengalahkan aturan dasar .head-inner/.nav
     yang ditulis sesudah blok ini. */
  .site-head .head-inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .site-head .head-inner > .brand { justify-self: start; }
  .site-head .nav { display: contents; }
  .site-head .nav-cta { justify-self: end; }
  .nav-list {
    padding: 4px; border-radius: var(--r-pill);
    transition: background-color .32s var(--ease), box-shadow .32s var(--ease);
  }
  /* Di atas hero terang: menu duduk di kapsul kaca putih, supaya teksnya
     tetap tegas walau kartu cincin hero melintas di belakangnya. */
  body:not(:has(#main > .section-deep:first-child)) .site-head:not(.is-stuck) .nav-list {
    background: rgba(255, 255, 255, .62);
    -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75), 0 10px 28px -18px rgba(6, 8, 12, .5);
  }
  body:not(:has(#main > .section-deep:first-child)) .site-head:not(.is-stuck) .nav-link { color: var(--ink); }
  body:not(:has(#main > .section-deep:first-child)) .site-head:not(.is-stuck) .nav-link:hover { background: rgba(255, 255, 255, .7); }
  body:not(:has(#main > .section-deep:first-child)) .site-head:not(.is-stuck) .nav-link.is-active {
    background: #fff;
    box-shadow: 0 4px 12px -6px rgba(6, 8, 12, .35);
  }
}

.head-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark { width: 31px; height: 31px; display: block; transition: transform .5s var(--spring); }
.brand:hover .brand-mark { transform: rotate(-6deg) scale(1.06); }
.brand-text {
  font-family: var(--font-display); font-weight: var(--fw-brand, 300);
  font-size: 1.24rem; letter-spacing: -.005em; color: var(--ink);
}
.brand-i { color: var(--brand); }

.nav { display: flex; align-items: center; gap: 18px; }
.nav-list { display: flex; align-items: center; gap: 2px; }
.nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 15px; border-radius: var(--r-pill);
  font-size: .91rem; font-weight: var(--fw-nav, 500); color: var(--ink-2); letter-spacing: -.012em;
  transition: color .2s var(--ease), background-color .24s var(--ease);
}
.nav-link:hover { color: var(--ink); background: rgba(10, 14, 22, .045); }
.nav-link.is-active { color: var(--ink); background: rgba(10, 14, 22, .06); }
.nav-link .caret { width: 13px; height: 13px; opacity: .55; transition: transform .28s var(--ease); }
.has-mega.open .caret { transform: rotate(180deg); }

/* Mega menu */
.has-mega { position: relative; }
.mega {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translate(-50%, -8px);
  width: min(640px, 92vw); padding: 12px;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  opacity: 0; visibility: hidden;
  transition: opacity .28s var(--ease), transform .34s var(--spring), visibility .28s;
}
.has-mega.open .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mega-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mega-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: var(--r-sm);
  transition: background-color .2s var(--ease), transform .3s var(--spring);
}
.mega-item:hover { background: color-mix(in srgb, var(--brand) 8%, #fff); transform: translateX(3px); }
.mega-ico {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center;
  border-radius: 11px; color: #fff;
  background: linear-gradient(140deg, var(--brand-glow), var(--brand));
  box-shadow: 0 6px 14px -8px var(--brand);
}
.mega-ico .ico { width: 18px; height: 18px; }
.mega-body strong { display: block; font-size: .91rem; color: var(--ink); letter-spacing: -.02em; font-weight: 600; }
.mega-body small { color: var(--muted-2); font-size: .78rem; }
.mega-all {
  grid-column: 1 / -1; margin-top: 4px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; border-radius: var(--r-sm);
  background: var(--bg-alt); color: var(--ink);
  font-size: .87rem; font-weight: 600;
  transition: background-color .2s var(--ease);
}
.mega-all:hover { background: var(--silver-1); }
.mega-all .ico { width: 15px; height: 15px; }

.burger {
  display: none; width: 42px; height: 42px; border-radius: var(--r-pill);
  position: relative; border: 1px solid var(--line); background: #fff;
  /* Safari iOS memberi padding & gaya bawaan pada <button>; dinolkan agar garis tepat di tengah. */
  padding: 0; margin: 0; -webkit-appearance: none; appearance: none; box-sizing: border-box;
}
/* Garis diposisikan dari titik tengah bulatan, bukan angka piksel tetap. */
.burger span {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 2px;
  margin-left: -9px; margin-top: -1px; border-radius: 2px;
  background: var(--ink); transition: transform .34s var(--spring), opacity .2s var(--ease);
}
.burger span:nth-child(1) { margin-top: -6px; }
.burger span:nth-child(3) { margin-top: 4px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* -------------------------------------------------- 6. Hero */
.hero {
  position: relative; isolation: isolate;
  /* Header melayang, jadi hero yang menyediakan ruangnya. */
  padding: calc(clamp(56px, 8vw, 108px) + var(--head-h)) 0 0;
  /* Warna atas → bawah bisa diatur dari admin (bagian Hero); bawaannya
     silver #A6A6A6 → putih. Seluruh titik gradasi diturunkan dari dua warna
     itu dengan color-mix, jadi kurvanya tetap halus apa pun warnanya.
     Peralihannya melengkung seperti setengah bulan: elips berpusat di tengah
     tepi bawah menyimpan warna bawah, jadi batasnya naik di tengah dan turun
     di kedua sisi, lalu menyambung mulus ke bagian berikutnya. Titik-titiknya
     berjarak makin rapat (kurva ease), jadi tidak ada garis "menggantung". */
  --hero-top: #A6A6A6;
  --hero-bottom: #FFFFFF;
  background:
    radial-gradient(
      ellipse 85% 50% at 50% 100%,
      var(--hero-bottom) 0%,
      var(--hero-bottom) 40%,
      color-mix(in srgb, var(--hero-bottom) 97%, transparent) 48%,
      color-mix(in srgb, var(--hero-bottom) 90%, transparent) 56%,
      color-mix(in srgb, var(--hero-bottom) 78%, transparent) 64%,
      color-mix(in srgb, var(--hero-bottom) 60%, transparent) 72%,
      color-mix(in srgb, var(--hero-bottom) 40%, transparent) 80%,
      color-mix(in srgb, var(--hero-bottom) 20%, transparent) 88%,
      color-mix(in srgb, var(--hero-bottom) 6%, transparent) 95%,
      transparent 100%
    ),
    /* Kilau lembut di kanan atas, memberi kesan logam. */
    radial-gradient(ellipse 55% 45% at 80% 18%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 70%),
    linear-gradient(
      180deg,
      var(--hero-top) 0%,
      color-mix(in srgb, var(--hero-top) 98.9%, var(--hero-bottom)) 10%,
      color-mix(in srgb, var(--hero-top) 94.4%, var(--hero-bottom)) 20%,
      color-mix(in srgb, var(--hero-top) 87.6%, var(--hero-bottom)) 30%,
      color-mix(in srgb, var(--hero-top) 78.7%, var(--hero-bottom)) 40%,
      color-mix(in srgb, var(--hero-top) 67.4%, var(--hero-bottom)) 50%,
      color-mix(in srgb, var(--hero-top) 55.1%, var(--hero-bottom)) 60%,
      color-mix(in srgb, var(--hero-top) 41.6%, var(--hero-bottom)) 70%,
      color-mix(in srgb, var(--hero-top) 28.1%, var(--hero-bottom)) 80%,
      color-mix(in srgb, var(--hero-top) 13.5%, var(--hero-bottom)) 90%,
      var(--hero-bottom) 100%
    );
  overflow: hidden;
}
/* Butiran halus di atas gradasi: meredam banding (garis bertingkat) yang
   muncul pada gradasi panjang di layar 8-bit. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero > .shell { position: relative; z-index: 1; }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); }

.hero-copy { text-align: center; max-width: 900px; margin-inline: auto; }
.hero h1 { margin-bottom: 22px; color: var(--hero-title, var(--ink)); }
.hero h1 .line { display: block; }
/* Aksen gold: satu-satunya warna hangat di blok teks, mengikat hero yang
   netral kembali ke palet merek. Dibuat lebih pekat supaya tetap terbaca
   di atas silver terang. */
/* Warna gradien judul hero. Titik warnanya didaftarkan lewat @property
   supaya bisa beralih halus: saat kartu produk di cincin disorot, main.js
   memasang .is-product + --gt-main/--gt-glow produk itu; dilepas, kembali
   ke warna aksen hero bawaan. */
@property --gt-mid { syntax: '<color>'; inherits: false; initial-value: #B08D2F; }
@property --gt-edge { syntax: '<color>'; inherits: false; initial-value: #6A551C; }
.hero .grad-text {
  --hero-accent-c: var(--hero-accent, var(--brand));
  --gt-mid: var(--hero-accent-c);
  --gt-edge: color-mix(in srgb, var(--hero-accent-c) 60%, #000);
  background: linear-gradient(104deg, var(--gt-edge) 6%, var(--gt-mid) 50%, var(--gt-edge) 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  transition: --gt-mid .6s var(--ease), --gt-edge .6s var(--ease);
}
.hero .grad-text.is-product {
  --gt-mid: color-mix(in srgb, var(--gt-main) 70%, var(--gt-glow));
  --gt-edge: color-mix(in srgb, var(--gt-main) 72%, #000);
}
.hero-sub {
  font-size: clamp(1.06rem, 1.5vw, 1.28rem); color: var(--hero-text, #23272D);
  max-width: 46ch; margin-inline: auto; line-height: 1.5; letter-spacing: -.012em;
}
.hero .eyebrow {
  color: var(--ink);
  background: rgba(255, 255, 255, .42);
  border-color: rgba(255, 255, 255, .8);
  box-shadow: 0 6px 18px -12px rgba(6, 8, 12, .4);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; justify-content: center; }
/* Di atas silver terang: tinta gelap pekat untuk aksi utama, kaca putih
   untuk aksi kedua. */
.hero .btn-brand {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 18px 38px -18px rgba(6, 8, 12, .7);
}
.hero .btn-brand:hover {
  background: #15181D;
  box-shadow: 0 22px 44px -18px rgba(6, 8, 12, .75);
}
.hero .btn-ghost {
  background: rgba(255, 255, 255, .5); color: var(--ink);
  border-color: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 8px 22px -16px rgba(6, 8, 12, .45);
}
.hero .btn-ghost:hover { background: rgba(255, 255, 255, .8); border-color: #fff; }

.hero-trust {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(22px, 5vw, 64px); margin-top: 30px;
}
.hero-trust li { text-align: center; }
.hero-trust li strong {
  display: block; font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem); color: var(--trust-value, var(--ink));
  font-weight: var(--fw-heading, 600); letter-spacing: -.02em; line-height: 1;
}
/* Warna angka & keterangan bisa diatur dari admin (bagian Hero). */
.hero-trust li > span { font-size: .84rem; color: var(--trust-label, #3A3F46); letter-spacing: .01em; }

/* -------------------------------------------------- 7. Roda kartu modul
   Dua wujud dari markup yang sama, dijalankan main.js sesuai --mode:

   · flat (HP & tablet) — kartu disusun melingkar pada satu roda besar yang
     pusatnya jauh di bawah hero, jadi yang terlihat hanya busur atasnya,
     menggema lengkung setengah bulan di latar.
   · 3d (desktop) — kartu ditempel di sisi luar cincin 3D berporos mendatar
     yang dimiringkan & diputar ke samping: busur depan besar mengalir
     diagonal, busur belakang samar di kanan bergerak berlawanan arah.

   Jari-jari dihitung dari jumlah slot × (ukuran kartu + jarak), jadi jarak
   antarkartu selalu sama berapa pun jumlah produknya. Roda datar butuh lebih
   banyak slot (--n) daripada cincin 3D (--n3); slot sisanya disembunyikan. */
.mod-orbit {
  --mode: flat;
  --W: clamp(132px, 13vw, 176px);
  --H: calc(var(--W) * 1.4);
  --gap: 18px;
  --top: 26px;
  --R: calc(var(--n) * (var(--W) + var(--gap)) / 6.2832);
  position: relative; z-index: 1;
  height: calc(var(--top) + var(--H) + clamp(80px, 9vw, 140px));
  margin-top: clamp(40px, 5vw, 68px);
  /* Di dalam .shell, tapi roda tetap selebar layar. */
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  /* Pudar di kiri-kanan sekaligus di tepi bawah, supaya kartu tidak
     terpotong garis lurus saat menyelam ke bawah. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(180deg, #000 72%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent),
    linear-gradient(180deg, #000 72%, transparent);
  mask-composite: intersect;
}

.mod-stage {
  position: absolute; left: 50%;
  top: calc(var(--top) + var(--H) / 2 + var(--R));
  width: 0; height: 0;
}

.mod-ring {
  /* --dir dibaca main.js: 1 searah jarum jam, -1 sebaliknya. */
  --dir: 1;
  position: absolute; left: 0; top: 0;
  width: 0; height: 0;
  /* Satu sumber kecepatan (per kartu yang lewat) — dipakai ulang di blok
     reduced-motion. */
  --spin-speed: calc(var(--n) * 3.5s);
  animation: mod-spin var(--spin-speed) linear infinite;
}
.mod-ring:has(.mod-card:hover),
.mod-ring:has(.mod-card:focus-visible) { animation-play-state: paused; }
/* Dengan JS, putaran diambil alih main.js supaya bisa melambat halus. */
.mod-ring.is-js { animation: none !important; will-change: transform; }
@keyframes mod-spin { to { transform: rotate(360deg); } }
@keyframes mod-spin-3d { to { transform: rotateX(-360deg); } }

.mod-slot {
  position: absolute;
  width: var(--W);
  left: calc(var(--W) / -2); top: calc(var(--H) / -2);
  transform: rotate(calc(var(--i) * 360deg / var(--n))) translateY(calc(-1 * var(--R)));
}

/* Geser langsung (main.js). Gulir tegak halaman tetap jalan di layar sentuh. */
.mod-orbit { touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.mod-orbit.is-dragging { cursor: grabbing; }
.mod-orbit .mod-card, .mod-orbit img { -webkit-user-drag: none; }

/* Desktop — teks rata kiri, cincin 3D mengisi separuh kanan hero dari tepi
   atas (menyelinap di balik header) sampai kaki hero. */
@media (min-width: 1121px) {
  .hero {
    /* Satu layar penuh: seluruh kolom teks — sampai angka kepercayaan —
       terlihat tanpa menggulir. --gy jadi satu ritme jarak vertikal. */
    --gy: clamp(14px, 2.6vh, 28px);
    min-height: 100vh; min-height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    padding-top: calc(var(--head-h) + clamp(20px, 4vh, 48px));
    padding-bottom: clamp(40px, 7vh, 80px);
    /* Setengah bulan putih dipipihkan ke kaki hero, supaya kolom teks tetap
       duduk di atas silver dan kartu di cincin tetap menonjol. */
    /* Bukan lagi pita tipis bertepi tajam: kaki hero diterangi cahaya elips
       yang tinggi & lembut, lalu dipastikan putih penuh di tepi paling bawah
       supaya menyambung mulus ke section berikutnya. */
    background:
      linear-gradient(
        180deg,
        transparent 80%,
        color-mix(in srgb, var(--hero-bottom) 6%, transparent) 85%,
        color-mix(in srgb, var(--hero-bottom) 20%, transparent) 90%,
        color-mix(in srgb, var(--hero-bottom) 48%, transparent) 94%,
        color-mix(in srgb, var(--hero-bottom) 80%, transparent) 97.5%,
        var(--hero-bottom) 100%
      ),
      radial-gradient(
        ellipse 110% 62% at 50% 116%,
        color-mix(in srgb, var(--hero-bottom) 95%, transparent) 0%,
        color-mix(in srgb, var(--hero-bottom) 86%, transparent) 16%,
        color-mix(in srgb, var(--hero-bottom) 70%, transparent) 30%,
        color-mix(in srgb, var(--hero-bottom) 50%, transparent) 44%,
        color-mix(in srgb, var(--hero-bottom) 30%, transparent) 58%,
        color-mix(in srgb, var(--hero-bottom) 14%, transparent) 72%,
        color-mix(in srgb, var(--hero-bottom) 4%, transparent) 86%,
        transparent 100%
      ),
      radial-gradient(ellipse 50% 55% at 76% 34%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 70%),
      linear-gradient(
        180deg,
        var(--hero-top) 0%,
        color-mix(in srgb, var(--hero-top) 98.9%, var(--hero-bottom)) 10%,
        color-mix(in srgb, var(--hero-top) 95.5%, var(--hero-bottom)) 20%,
        color-mix(in srgb, var(--hero-top) 89.9%, var(--hero-bottom)) 30%,
        color-mix(in srgb, var(--hero-top) 83.1%, var(--hero-bottom)) 40%,
        color-mix(in srgb, var(--hero-top) 74.2%, var(--hero-bottom)) 50%,
        color-mix(in srgb, var(--hero-top) 64%, var(--hero-bottom)) 60%,
        color-mix(in srgb, var(--hero-top) 51.7%, var(--hero-bottom)) 70%,
        color-mix(in srgb, var(--hero-top) 38.2%, var(--hero-bottom)) 80%,
        color-mix(in srgb, var(--hero-top) 23.6%, var(--hero-bottom)) 90%,
        color-mix(in srgb, var(--hero-top) 10.1%, var(--hero-bottom)) 100%
      );
  }
  /* .shell tidak lagi jadi acuan posisi, supaya cincin bisa menempel ke
     .hero dan memenuhi seluruh tingginya. */
  .hero > .hero-grid { position: static; }
  .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
  }
  .hero-copy { position: relative; z-index: 2; text-align: left; margin: 0; }
  .hero .eyebrow { margin: 0 0 var(--gy); }
  /* Ukuran judul ikut lebar sekaligus tinggi layar, supaya laptop pendek
     tetap memuat semuanya. */
  .hero h1 {
    font-size: clamp(2.3rem, min(3.9vw, 6.6vh), 3.7rem);
    line-height: 1.06; margin-bottom: var(--gy);
  }
  .hero-sub {
    margin: 0; max-width: 44ch;
    font-size: clamp(1rem, min(1.25vw, 2.1vh), 1.18rem);
  }
  .hero-actions { margin-top: calc(var(--gy) * 1.3); }
  .hero-trust { margin-top: calc(var(--gy) * 1.3); gap: clamp(28px, 3.4vw, 52px); }
  .hero-trust li strong { font-size: clamp(1.5rem, min(2.2vw, 3.8vh), 2rem); }
  .hero-actions,
  .hero-trust { justify-content: flex-start; }
  .hero-trust li { text-align: left; }

  .mod-orbit {
    --mode: 3d;
    --W: clamp(170px, 13vw, 210px);
    --gap: 16px;
    --R: calc(var(--n3) * (var(--H) + var(--gap)) / 6.2832);
    /* Letak pusat cincin di dalam bidang; titik pandang ikut ke sana. */
    --cx: 73%; --cy: 46%;
    /* --tilt memiringkan jalurnya jadi diagonal, --turn memutarnya ke
       samping supaya busur belakang muncul di kanan. */
    --tilt: -22deg; --turn: -22deg;
    position: absolute; z-index: 1;
    top: 0; bottom: 0; right: 0; left: 36%;
    height: auto; margin: 0;
    perspective: 1800px;
    perspective-origin: var(--cx) var(--cy);
    /* Tepi atas nyaris tanpa pudar supaya kartu menerus sampai ke header;
       kaki hero dipudarkan ke pita putih. */
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 5%, #000 82%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 5%, #000 82%, transparent);
  }
  .mod-stage {
    left: var(--cx); top: var(--cy);
    transform-style: preserve-3d;
    transform: rotateZ(var(--tilt)) rotateY(var(--turn));
  }
  .mod-ring {
    --dir: -1;
    --spin-speed: calc(var(--n3) * 3.5s);
    transform-style: preserve-3d;
    animation-name: mod-spin-3d;
  }
  .mod-slot {
    transform: rotateX(calc(var(--i) * 360deg / var(--n3))) translateZ(var(--R));
    /* Kartu sorotan diputar balik di ruang 3D (main.js) supaya tegak
       menghadap layar — butuh slot yang meneruskan 3D ke anaknya. */
    transform-style: preserve-3d;
  }
  .mod-slot.only-flat { display: none; }
  /* Dilihat dari belakang, kartu tampil terbalik; dibalik lagi di bidangnya. */
  .mod-slot.is-back .mod-card { transform: scaleY(-1); transition: none; }
}

.mod-card {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 5 / 7;
  display: flex; flex-direction: column;
  border-radius: var(--r);
  color: #fff;
  /* Gradasi dari "Warna utama" ke "Warna gradien" produk (admin → Produk →
     Tema): utama menguasai bagian atas tempat teks, gradien menyala di kaki
     kartu. Panel pratinjau (.mod-peek) memakai gradasi yang sama. */
  background:
    radial-gradient(110% 55% at 100% 0%, color-mix(in srgb, var(--brand-glow) 30%, transparent), transparent 62%),
    linear-gradient(160deg,
      color-mix(in srgb, var(--brand) 82%, #000) 0%,
      var(--brand) 36%,
      color-mix(in srgb, var(--brand) 45%, var(--brand-glow)) 70%,
      var(--brand-glow) 100%);
  box-shadow: 0 14px 30px -20px rgba(0, 0, 0, .75);
  transition: transform .5s var(--spring), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.mod-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 32px 54px -28px rgba(0, 0, 0, .8);
}

.mod-head { display: flex; flex-direction: column; gap: 9px; padding: 14px 14px 12px; }
.mod-ico {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(255, 255, 255, .3);
  transition: transform .5s var(--spring);
}
.mod-ico .ico { width: 15px; height: 15px; }
.mod-card:hover .mod-ico { transform: rotate(-8deg) scale(1.1); }
.mod-label b {
  display: block; font-family: var(--font-display);
  font-size: .92rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.12;
}
.mod-label small {
  display: block; margin-top: 2px;
  font-size: .68rem; color: rgba(255, 255, 255, .74); line-height: 1.3;
}

.mod-go {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: color-mix(in srgb, var(--brand) 84%, #000);
  opacity: 0; transform: scale(.5);
  transition: opacity .35s var(--ease), transform .45s var(--spring);
}
.mod-go .ico { width: 13px; height: 13px; transform: rotate(-45deg); }
.mod-card:hover .mod-go { opacity: 1; transform: none; }

/* Cuplikan antarmuka modul, mengambang seperti tangkapan layar di atas kartu. */
.mod-art {
  position: relative; flex: 1; overflow: hidden;
  margin: 0 10px; border-radius: 9px 9px 0 0;
  background: #fff;
  box-shadow: 0 -10px 26px -18px rgba(0, 0, 0, .7);
}
.mod-art .pv {
  width: 205%; max-width: none; height: auto; display: block;
  transform-origin: top left;
  transition: transform .8s var(--ease);
}
.mod-card:hover .mod-art .pv { transform: translate(-5%, -6%) scale(1.08); }

/* Pratinjau produk di samping kartu yang disorot (cincin 3D, desktop).
   main.js menegakkan kartunya, lalu memosisikan panel ini di sebelahnya. */
.mod-peeks { display: none; }
@media (min-width: 1121px) and (hover: hover) {
  .mod-peeks { display: block; }
  /* Kartu cincin 3D digerakkan main.js (tegak saat disorot), jadi efek
     hover CSS bawaan dimatikan agar tidak saling tarik. */
  .mod-ring.is-js .mod-card { transition: box-shadow .4s var(--ease); }
  .mod-ring.is-js .mod-card:hover { transform: none; }
  .mod-slot.is-lifted .mod-card { box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .85); }
}
.mod-peek {
  position: fixed; left: 0; top: 0; z-index: 40; overflow: hidden; isolation: isolate;
  width: 272px;
  padding: 10px 10px 12px;
  border-radius: 20px;
  /* Gradasi sama dengan kartu cincin (.mod-card): warna utama → warna
     gradien produk. Kaki panel tertutup tombol putih, jadi teks tetap
     berada di bagian yang gelap. */
  background:
    radial-gradient(110% 55% at 100% 0%, color-mix(in srgb, var(--brand-glow) 30%, transparent), transparent 62%),
    linear-gradient(160deg,
      color-mix(in srgb, var(--brand) 82%, #000) 0%,
      var(--brand) 36%,
      color-mix(in srgb, var(--brand) 45%, var(--brand-glow)) 70%,
      var(--brand-glow) 100%);
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: 0 34px 64px -30px color-mix(in srgb, var(--brand) 55%, #000), 0 1px 0 rgba(255, 255, 255, .25) inset;
  color: rgba(255, 255, 255, .84);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(18px) scale(.97);
  transform-origin: right center;
  transition: opacity .3s var(--ease), transform .45s var(--spring), visibility 0s linear .3s;
}
/* Terpaksa di kiri kartu: animasi masuk dari arah sebaliknya. */
.mod-peek.is-left { transform: translateX(-18px) scale(.97); transform-origin: left center; }
.mod-peek.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: none;
  transition: opacity .3s var(--ease), transform .5s var(--spring), visibility 0s;
}
/* Cuplikan antarmuka produk di atas, seperti pratinjau gambar. */
.mod-peek-art {
  position: relative; overflow: hidden;
  height: 132px; border-radius: 13px;
  background: #fff;
  box-shadow: 0 10px 22px -16px rgba(0, 0, 0, .7);
}
.mod-peek-art img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.mod-peek-art .pv { width: 150%; max-width: none; height: auto; display: block; }
.mod-peek-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 12px 4px 0;
}
.mod-peek-name {
  margin: 0; font-family: var(--font-display);
  font-size: 1.02rem; font-weight: var(--fw-heading, 600); letter-spacing: -.02em; line-height: 1.2;
  color: #fff;
}
.mod-peek-ico {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border-radius: 8px; color: #fff;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .28);
}
.mod-peek-ico .ico { width: 14px; height: 14px; }
.mod-peek-cat {
  margin: 2px 4px 0; font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: rgba(255, 255, 255, .66);
}
.mod-peek-text {
  margin: 8px 4px 0; font-size: .78rem; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* Fitur utama sebagai chip kecil. */
.mod-peek-tags { list-style: none; margin: 10px 4px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.mod-peek-tags li {
  padding: 3px 9px; border-radius: 999px;
  font-size: .66rem; font-weight: 500; line-height: 1.5; color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .24);
}
/* Tombol putih berteks warna produk — kontras di atas gradasi. */
.mod-peek-go {
  width: 100%; margin-top: 12px; padding: 10px 18px; font-size: .84rem;
  background: #fff;
  color: color-mix(in srgb, var(--brand) 84%, #000);
  box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .6);
}
.mod-peek-go:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgba(0, 0, 0, .65); }
.mod-peek-go .ico { transition: transform .3s var(--spring); }
.mod-peek-go:hover .ico { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .mod-peek, .mod-peek.is-left, .mod-peek.is-open { transition: opacity .2s linear, visibility 0s; }
}
/* -------------------------------------------------- 8. Marquee klien */
.marquee-wrap {
  /* Hero sudah tuntas jadi putih di kakinya, jadi pita ini tinggal
     menyambung dengan sapuan silver tipis, senada dengan hero. */
  background: linear-gradient(180deg, #fff 0%, #F8F9FA 42%, #F2F4F6 72%, #fff 100%);
  /* Atas dibuat lebih lega agar pita tak menempel pada cincin modul hero. */
  padding: clamp(96px, 10vw, 140px) 0 clamp(58px, 6.5vw, 92px); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee {
  /* Jarak lewat margin (bukan gap) agar dua salinan persis 50% : 50%,
     sehingga sambungan loop tidak meloncat. */
  display: flex; width: max-content;
  /* Satu sumber kecepatan — dipakai ulang di blok reduced-motion. */
  --marquee-speed: 48s;
  animation: slide var(--marquee-speed) linear infinite;
}
/* Jeda hanya saat kursor benar-benar menyentuh salah satu nama. Sebelumnya
   seluruh pita yang memicu jeda, sehingga kursor yang sekadar diam di area
   kosong membuat gulirannya terlihat mati. */
.marquee:has(span:hover) { animation-play-state: paused; }
.marquee span {
  font-family: var(--font-display); font-size: clamp(1rem, 1.5vw, 1.22rem);
  font-weight: 600; letter-spacing: -.012em; color: rgba(38, 27, 4, .56);
  white-space: nowrap; transition: color .3s var(--ease);
}
.marquee span:hover { color: var(--brand); }
/* Logo klien: tinggi seragam, lebar mengikuti bentuk logo. */
.marquee { align-items: center; }
.marquee > * { flex: none; margin-right: clamp(40px, 6vw, 76px); }
.marquee-logo { display: flex; align-items: center; }
/* Tinggi dari admin (--logo-h); di layar sempit menyusut hingga 60%. */
.marquee-logo img { height: clamp(calc(var(--logo-h, 72px) * .6), 9vw, var(--logo-h, 72px)); width: auto; max-width: calc(var(--logo-h, 72px) * 4); object-fit: contain; display: block; border-radius: var(--logo-r, 0); }
/* Bergulir ke kanan: mulai dari salinan kedua (-50%) lalu berhenti tepat
   saat salinan pertama menempati posisi awal, jadi sambungannya tak terlihat. */
@keyframes slide {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* -------------------------------------------------- 9. Kartu produk */
.prod-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.prod-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 28px 26px 24px;
  border-radius: var(--r-xl);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-xs);
  transition: transform .5s var(--spring), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
/* Wash gradient khas produk — menguat saat hover */
.prod-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(130% 84% at 12% 0%, color-mix(in srgb, var(--brand) 20%, #fff) 0%, transparent 58%),
    radial-gradient(100% 70% at 100% 100%, color-mix(in srgb, var(--brand-glow) 34%, #fff) 0%, transparent 62%);
  opacity: .42; transition: opacity .5s var(--ease);
}
/* Sorotan mengikuti kursor */
.prod-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%),
              color-mix(in srgb, var(--brand) 18%, transparent), transparent 62%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.prod-card:hover {
  transform: translateY(-7px);
  border-color: color-mix(in srgb, var(--brand) 30%, #fff);
  box-shadow: 0 32px 60px -40px color-mix(in srgb, var(--brand) 85%, #000), var(--sh);
}
.prod-card:hover::before { opacity: 1; }
.prod-card:hover::after { opacity: 1; }

.prod-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.prod-ico {
  width: 50px; height: 50px; flex: none; display: grid; place-items: center;
  border-radius: 15px; color: #fff;
  background: linear-gradient(145deg, var(--brand-glow) 0%, var(--brand) 72%);
  box-shadow: 0 12px 24px -14px var(--brand), inset 0 1px 0 rgba(255,255,255,.45);
  transition: transform .5s var(--spring);
}
.prod-card:hover .prod-ico { transform: translateY(-2px) rotate(-5deg) scale(1.05); }
.prod-ico .ico { width: 23px; height: 23px; stroke-width: 1.7; }

/* Logo produk yang diunggah menggantikan kotak ikon: gradien & bayangan
   kotak dilepas, logo mengisi penuh dengan sudut yang sama. */
:is(.prod-ico, .mega-ico, .mod-ico, .story-ico):has(> .prod-logo) {
  background: none; box-shadow: none; border: 0; padding: 0; overflow: hidden;
}
.prod-logo { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; display: block; }
.prod-tag {
  font-size: .64rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--brand) 72%, #000);
  padding: 6px 11px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .72);
  border: 1px solid color-mix(in srgb, var(--brand) 18%, #fff);
}
.prod-card :is(h2, h3) { margin-bottom: 4px; font-size: 1.3rem; font-weight: var(--fw-heading, 600); }
.prod-card :is(h2, h3) .sfx { color: var(--brand); }

/* Kunci merek nama produk: "iSort" ringan, sufiks modul tetap tebal —
   sama seperti logo di header. */
.pfx { font-weight: var(--fw-prod-prefix, 300); letter-spacing: -.005em; }
.sfx { font-weight: var(--fw-prod-suffix, 600); }
.prod-role { font-size: .77rem; font-weight: 600; color: var(--muted-2); margin-bottom: 12px; letter-spacing: .02em; }
.prod-card p { color: var(--muted); font-size: .93rem; line-height: 1.55; }
.prod-meta {
  margin-top: auto; padding-top: 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.prod-demo { padding: 8px 16px; font-size: .82rem; }
.prod-card:hover .prod-demo { border-color: color-mix(in srgb, var(--brand) 40%, #fff); }
/* Tetap di kanan walau tombol demo disembunyikan. */
.prod-meta .link-arrow { margin-left: auto; }

/* -------------------------------------------------- 10. Grid & kartu umum */
.grid-3 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grid-2 { display: grid; gap: clamp(34px, 5vw, 74px); grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); align-items: center; }

.feat-card {
  padding: 30px 28px; border-radius: var(--r-xl);
  background: #fff; border: 1px solid var(--line);
  transition: transform .5s var(--spring), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.feat-card:hover { transform: translateY(-5px); border-color: var(--silver-2); box-shadow: var(--sh); }
.feat-ico {
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 14px; margin-bottom: 20px; color: var(--brand);
  background: linear-gradient(150deg, color-mix(in srgb, var(--brand) 16%, #fff), color-mix(in srgb, var(--brand) 5%, #fff));
  border: 1px solid color-mix(in srgb, var(--brand) 16%, #fff);
  transition: transform .5s var(--spring);
}
.feat-card:hover .feat-ico { transform: rotate(-6deg) scale(1.07); }
.feat-ico .ico { width: 21px; height: 21px; stroke-width: 1.7; }
.feat-card h3 { font-size: 1.08rem; margin-bottom: 8px; font-weight: var(--fw-heading, 600); }
.feat-card p { color: var(--muted); font-size: .93rem; margin: 0; line-height: 1.6; }

.num-card {
  position: relative; padding: 30px 28px; border-radius: var(--r-xl);
  background: #fff; border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--line));
  transition: transform .5s var(--spring), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.num-card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -24px color-mix(in srgb, var(--brand) 38%, transparent), 0 6px 16px -10px rgba(10, 14, 22, .14); border-color: color-mix(in srgb, var(--brand) 42%, transparent); }
.num-card .step {
  display: block; font-family: var(--font-display);
  font-size: 2.4rem; font-weight: 600; letter-spacing: -.055em; line-height: 1;
  margin-bottom: 18px;
  background: linear-gradient(150deg, var(--brand) 12%, color-mix(in srgb, var(--brand-glow) 88%, #fff) 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.num-card h3 { font-size: 1.06rem; margin-bottom: 8px; font-weight: var(--fw-heading, 600); }
.num-card p { color: var(--muted); font-size: .92rem; margin: 0; line-height: 1.6; }

.check-list { display: grid; gap: 13px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; font-size: .97rem; color: var(--ink-2); }
.check-list .ico {
  width: 21px; height: 21px; flex: none; margin-top: 2px; padding: 4px;
  border-radius: 50%; color: #fff; stroke-width: 2.6;
  background: linear-gradient(145deg, var(--brand-glow), var(--brand));
}

/* -------------------------------------------------- 11. Statistik */
.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stat-band div {
  padding: 34px 26px; border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
  transition: transform .5s var(--spring), background-color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.stat-band div:hover { transform: translateY(-5px); background: rgba(255, 255, 255, .92); box-shadow: 0 22px 44px -24px color-mix(in srgb, var(--brand) 38%, transparent), 0 6px 16px -10px rgba(10, 14, 22, .14); border-color: color-mix(in srgb, var(--brand) 42%, transparent); }
.stat-band b {
  display: block; font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 3.2rem); font-weight: 600;
  letter-spacing: -.055em; line-height: 1; color: var(--ink); margin-bottom: 10px;
}
.stat-band div > span { font-size: .88rem; color: var(--muted); }

/* -------------------------------------------------- 12. Testimoni */
.quote-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 18px;
  padding: 32px 30px; border-radius: var(--r-xl);
  background: #fff; border: 1px solid var(--line);
  transition: transform .5s var(--spring), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.quote-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--brand), var(--brand-glow));
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease);
}
.quote-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--brand) 26%, #fff); box-shadow: var(--sh); }
.quote-card:hover::before { transform: scaleX(1); }
.quote-card .ico-q { color: color-mix(in srgb, var(--brand) 36%, #fff); }
.quote-card .ico-q .ico { width: 30px; height: 30px; }
.quote-card blockquote { margin: 0; font-size: 1.01rem; color: var(--ink-2); line-height: 1.62; letter-spacing: -.012em; }
.quote-who { display: flex; align-items: center; gap: 13px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line-2); }
.avatar {
  width: 46px; height: 46px; flex: none; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--brand-glow), var(--brand));
  color: #fff; font-weight: 600; font-family: var(--font-display); font-size: 1.02rem;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px color-mix(in srgb, var(--brand) 26%, #fff);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.quote-who b { display: block; font-size: .93rem; color: var(--ink); font-weight: 600; letter-spacing: -.018em; }
.quote-who small { color: var(--muted-2); font-size: .8rem; }

/* Slider testimoni (coverflow): kartu aktif di tengah, penuh & menonjol;
   tetangga kiri-kanan mengecil, meredup, sedikit kabur. Semua kartu
   ditumpuk di satu sel grid (tinggi = kartu tertinggi) lalu digeser
   main.js lewat --off: 0 tengah, ±1 samping, ±2 tersembunyi. Berputar
   tanpa ujung. */
.t-slider { position: relative; }
.t-track {
  --t-w: min(640px, 56%);
  --t-shift: 88%;
  display: grid; justify-items: center;
  padding: 14px 0 26px;
  touch-action: pan-y; cursor: grab;
  -webkit-user-select: none; user-select: none;
  /* Tepi kiri-kanan memudar, jadi kartu samping seolah menghilang. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
.t-track.is-dragging { cursor: grabbing; }
.t-track:focus-visible { outline: none; }
.t-track:focus-visible .t-slide.is-active { outline: 2px solid var(--btn-main, var(--brand)); outline-offset: 4px; }
.t-slide {
  --off: 0;
  --abs: 0;
  grid-area: 1 / 1;
  width: var(--t-w);
  padding: clamp(28px, 3vw, 42px);
  transform:
    translateX(calc(var(--off) * var(--t-shift)))
    scale(calc(1 - var(--abs) * .14));
  opacity: calc(1 - var(--abs) * .52);
  filter: blur(calc(var(--abs) * 1.2px)) saturate(calc(1 - var(--abs) * .35));
  z-index: calc(10 - var(--abs));
  transition:
    transform .8s cubic-bezier(.22, .8, .24, 1),
    opacity .6s var(--ease), filter .6s var(--ease),
    box-shadow .6s var(--ease), border-color .6s var(--ease);
}
.t-slide.is-far { opacity: 0; pointer-events: none; }
.t-slide:not(.is-active) { cursor: pointer; }
.t-slide:not(.is-active) * { pointer-events: none; }
/* Kartu tengah: garis aksen warna produk menyala & bayangan dalam. */
.t-slide.is-active {
  border-color: color-mix(in srgb, var(--brand) 28%, #fff);
  box-shadow: 0 40px 70px -40px color-mix(in srgb, var(--brand) 55%, rgba(10, 14, 22, .6)), 0 10px 24px -18px rgba(10, 14, 22, .25);
}
.t-slide.is-active::before { transform: scaleX(1); transition-delay: .25s; }
/* Efek hover lama kartu testimoni tidak dipakai di slider. */
.t-slide:hover { transform: translateX(calc(var(--off) * var(--t-shift))) scale(calc(1 - var(--abs) * .14)); }
.t-slide.is-active:hover { border-color: color-mix(in srgb, var(--brand) 28%, #fff); }
.t-slide:not(.is-active):hover { opacity: calc(1 - var(--abs) * .35); }
.t-slide blockquote {
  font-size: clamp(1.04rem, 1.35vw, 1.2rem); line-height: 1.6; color: var(--ink);
}
@media (max-width: 860px) {
  .t-track { --t-w: 84%; --t-shift: 94%; }
}
@media (prefers-reduced-motion: reduce) {
  .t-slide { transition: opacity .3s linear; filter: none; }
}
.t-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.t-prod {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 8px; border-radius: var(--r-pill);
  font-size: .78rem; font-weight: 600; color: var(--brand-ink, var(--ink));
  background: var(--brand-soft, #F4F5F7);
  border: 1px solid color-mix(in srgb, var(--brand) 18%, #fff);
}
.t-prod .ico, .t-prod .prod-logo { width: 16px; height: 16px; color: var(--brand); }
.t-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 30px; }
.t-arrow {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  box-shadow: var(--sh-xs);
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .35s var(--spring);
}
.t-arrow:hover { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateY(-2px); }
.t-arrow .ico { width: 17px; height: 17px; }
.t-prev .ico { transform: rotate(180deg); }
.t-dots { display: flex; align-items: center; gap: 8px; }
.t-dots button {
  width: 8px; height: 8px; padding: 0; border-radius: var(--r-pill);
  background: var(--line); border: 0;
  transition: width .4s var(--spring), background-color .3s var(--ease);
}
.t-dots button[aria-current="true"] { width: 28px; background: var(--btn-main, var(--brand)); }

/* -------------------------------------------------- 13. FAQ */
.faq { display: grid; gap: 10px; max-width: 840px; margin-inline: auto; }
.faq-item {
  border-radius: var(--r-lg); background: #fff;
  border: 1px solid var(--line);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.faq-item:hover { border-color: var(--silver-2); }
.faq-item.open { border-color: color-mix(in srgb, var(--brand) 28%, #fff); box-shadow: var(--sh-sm); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 22px;
  padding: 22px 26px; text-align: left;
  font-family: var(--font-display); font-size: 1.04rem; font-weight: 600;
  color: var(--ink); letter-spacing: -.024em;
  transition: color .2s var(--ease);
}
.faq-q:hover { color: var(--brand); }
.faq-q .plus {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line); color: var(--muted);
  transition: transform .4s var(--spring), border-color .3s var(--ease), color .3s var(--ease), background-color .3s var(--ease);
}
.faq-q .plus .ico { width: 15px; height: 15px; }
.faq-item.open .plus {
  transform: rotate(135deg); color: #fff;
  border-color: transparent; background: linear-gradient(145deg, var(--brand-glow), var(--brand));
}
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s var(--ease); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
/* Rata kiri, sejajar dengan teks pertanyaan di atasnya. */
.faq-a p { padding: 0 66px 24px 26px; color: var(--muted); font-size: .96rem; margin: 0; line-height: 1.68; text-align: left; }

/* -------------------------------------------------- 14. Media & foto */
.split-media {
  position: relative;
  border-radius: var(--r-2xl);
  padding: clamp(10px, 1.1vw, 14px);
  background: linear-gradient(150deg, rgba(255,255,255,.96), rgba(255,255,255,.72));
  border: 1px solid var(--line);
  box-shadow: var(--sh-lg);
}
.split-media::before {
  content: ""; position: absolute; inset: 6% -4% -18%; z-index: -1;
  border-radius: 50%; filter: blur(66px); opacity: .34;
  background: radial-gradient(circle at 34% 40%, var(--brand-glow), transparent 64%);
}
.split-media .pv { width: 100%; height: auto; border-radius: var(--r-xl); }
.pv { width: 100%; height: auto; }

.badge-float {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; margin-top: 12px; border-radius: var(--r-pill);
  font-size: .78rem; font-weight: 600; color: var(--ink);
  background: rgba(255, 255, 255, .8); border: 1px solid var(--line);
  box-shadow: var(--sh-xs);
}
.badge-float .ico { width: 14px; height: 14px; color: var(--brand); }
.split-media .badge-float { margin: 12px 4px 4px; }

/* Hero produk: bila ada tampilan tablet/ponsel, gambar utama tampil sebagai laptop,
   tablet di kiri bawah dan ponsel di kanan bawah. Semua mockup terang (silver-putih),
   tepi aluminium, bayangan bernuansa warna produk.
   Posisi memakai left/right/bottom karena .reveal mengatur transform; animasi melayang
   dipasang di .device-body. .laptop & .device adalah container, jadi ukuran (cqw) ikut lebarnya. */
.device-stage { position: relative; padding: 0 2%; margin-bottom: clamp(48px, 6vw, 80px); }
/* Label produk jadi tag di pojok kiri atas laptop. */
.device-badge { position: absolute; z-index: 3; top: -18px; left: 5%; margin: 0; box-shadow: var(--sh-md, 0 10px 24px -12px rgba(15, 23, 42, .3)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* ---- Laptop */
.laptop { position: relative; container-type: inline-size; }
.laptop-lid {
  position: relative; margin: 0 7.5%; padding: 1.9cqw 1.6cqw 2.2cqw;
  border: .45cqw solid transparent; border-bottom-width: .25cqw;
  border-radius: 2.6cqw 2.6cqw .7cqw .7cqw;
  background:
    linear-gradient(170deg, #FFFFFF, #F1F3F6) padding-box,
    linear-gradient(135deg, #F8F9FB 0%, #B7BEC8 24%, #EEF1F4 50%, #C3C9D2 74%, #DCE0E6 100%) border-box;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .9), 0 30px 60px -34px rgba(15, 23, 42, .4);
}
/* Kamera di bezel atas */
.laptop-lid::before {
  content: ""; position: absolute; top: .65cqw; left: 50%; width: .65cqw; height: .65cqw; margin-left: -.325cqw;
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #9AA3B0, #6B7482 70%);
  box-shadow: 0 0 0 .2cqw #E6E9EE;
}
.laptop-screen {
  position: relative; overflow: hidden; aspect-ratio: var(--ar, 1.6); border-radius: .9cqw; background: #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .08);
}
.laptop-screen > img, .laptop-screen > svg { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.laptop-screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .06) 26%, rgba(255, 255, 255, 0) 42%);
}
/* Alas keyboard: lebih lebar dari layar, sudut bawah membulat, ada cekungan pembuka di tengah. */
.laptop-base {
  position: relative; height: 2.8cqw;
  border-radius: .5cqw .5cqw 3cqw 3cqw / .5cqw .5cqw 2.4cqw 2.4cqw;
  background: linear-gradient(180deg, #FBFCFD 0%, #E9ECF0 34%, #D3D8DF 72%, #B5BCC6 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    0 0 0 1px rgba(15, 23, 42, .06),
    0 34px 46px -26px rgba(15, 23, 42, .5),
    0 26px 60px -30px color-mix(in srgb, var(--brand) 40%, transparent);
}
.laptop-base::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 15cqw; height: 1.05cqw; margin-left: -7.5cqw;
  border-radius: 0 0 1.2cqw 1.2cqw;
  background: linear-gradient(180deg, #C9CFD7, #E4E7EC);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .18);
}

.device { position: absolute; z-index: 2; margin: 0; container-type: inline-size; }
.device-body {
  position: relative;
  /* Bezel putih + rangka logam bergradasi silver ke warna produk (trik padding-box/border-box). */
  border: 1cqw solid transparent;
  background:
    linear-gradient(160deg, #FFFFFF, #F2F4F7) padding-box,
    linear-gradient(135deg, #F8F9FB 0%, #B7BEC8 22%, #EEF1F4 48%, #C3C9D2 70%, #DCE0E6 100%) border-box;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .9),
    0 2px 4px rgba(15, 23, 42, .06),
    0 44px 80px -32px rgba(15, 23, 42, .48),
    0 28px 64px -30px color-mix(in srgb, var(--brand) 40%, transparent);
  animation: device-float 7s ease-in-out infinite;
}
.device-phone .device-body { animation-delay: -3.5s; }
@keyframes device-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}
@media (prefers-reduced-motion: reduce) { .device-body { animation: none; } }

.device-screen {
  position: relative; overflow: hidden; aspect-ratio: var(--ar, .75); background: #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .08);
}
.device-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* Pantulan kaca */
.device-screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, .08) 24%, rgba(255, 255, 255, 0) 40%);
}

/* ---- Tablet: proporsi iPad, ukuran seimbang terhadap laptop */
.device-tablet { left: -2%; bottom: -12%; width: 23%; }
.device-tablet.is-landscape { width: 37%; }
.device-tablet .device-body { padding: 3.2cqw; border-radius: 6cqw; }
.device-tablet.is-landscape .device-body { padding: 2.4cqw; border-radius: 4.2cqw; }
.device-tablet .device-screen { border-radius: 2.8cqw; }
.device-tablet.is-landscape .device-screen { border-radius: 2cqw; }
.device-tablet .device-screen img { object-position: top left; }
/* Kamera depan di bezel */
.device-tablet .device-body::before {
  content: ""; position: absolute; z-index: 1; top: 1.1cqw; left: 50%; width: 1cqw; height: 1cqw; margin-left: -.5cqw;
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #9AA3B0, #6B7482 70%);
}
.device-tablet.is-landscape .device-body::before { top: .7cqw; width: .8cqw; height: .8cqw; margin-left: -.4cqw; }

/* ---- Ponsel */
.device-phone { right: -1%; bottom: -14%; width: 17%; }
.device-phone .device-body { padding: 3.2cqw; border-radius: 15cqw; }
.device-phone .device-screen { aspect-ratio: 9 / 19.5; border-radius: 12cqw; background: var(--screen-bg, #fff); }
.device-phone .device-screen img { height: auto; }
/* Tombol samping: daya (kanan), volume (kiri) — silver, menempel di rangka */
.device-phone .device-body::before,
.device-phone .device-body::after {
  content: ""; position: absolute; z-index: -1; width: 2.2cqw; border-radius: 2cqw;
  background: linear-gradient(90deg, #C9CFD7, #F4F6F9 50%, #C9CFD7);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .06);
}
.device-phone .device-body::before { right: -2.4cqw; top: 24%; height: 13%; }
.device-phone .device-body::after { left: -2.4cqw; top: 20%; height: 8%; }

/* Hanya ponsel: diberi ukuran sedikit lebih besar agar seimbang. */
.device-stage.has-phone:not(.has-tablet) .device-phone { width: 19%; }

/* Satu kolom: hero selebar layar, jadi mockup tidak boleh keluar dari tepi. */
@media (max-width: 1120px) {
  .device-tablet { left: 0; }
  .device-phone { right: 0; }
}
@media (max-width: 720px) {
  .device-stage { padding: 0 2%; }
  .device-badge { display: none; }
  .device-tablet { width: 27%; }
  .device-tablet.is-landscape { width: 42%; }
  .device-phone { width: 19%; }
}

/* Bingkai foto */
.photo-frame {
  position: relative; overflow: hidden;
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-lg);
  background: var(--silver-1);
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-frame.ratio-4x3 { aspect-ratio: 4 / 3; }
.photo-frame.ratio-3x4 { aspect-ratio: 3 / 4; }
.photo-frame.ratio-16x9 { aspect-ratio: 16 / 9; }
.photo-frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, transparent 44%, color-mix(in srgb, var(--brand) 24%, transparent) 100%);
  mix-blend-mode: multiply; opacity: .55; pointer-events: none;
}
.photo-frame .ph-tag {
  position: absolute; left: 18px; bottom: 18px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font-size: .78rem; font-weight: 600; color: var(--ink);
}
.photo-frame .ph-tag .ico { width: 14px; height: 14px; color: var(--brand); }

/* Panel gelap */
.section-deep {
  background: var(--bg-deep); color: rgba(255, 255, 255, .72);
  position: relative; isolation: isolate; overflow: hidden;
}
.section-deep h2, .section-deep h3, .section-deep .stat-band b { color: #fff; }
.section-deep .lead, .section-deep p { color: rgba(255, 255, 255, .62); }
.section-deep .eyebrow {
  color: var(--brand-glow);
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
}
.section-deep .stat-band div { background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .09); }
.section-deep .stat-band div:hover { background: rgba(255, 255, 255, .085); }
.section-deep .stat-band div > span { color: rgba(255, 255, 255, .58); }
.section-deep .aurora::before { opacity: .28; }
.section-deep .aurora::after { opacity: .14; }

/* Bento */
.bento { display: grid; gap: 16px; grid-template-columns: repeat(12, 1fr); }
.bento > * { grid-column: span 12; }

.showcase {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(300px, 34vw, 430px);
  padding: clamp(26px, 3vw, 40px);
  border-radius: var(--r-2xl);
  color: #fff; isolation: isolate;
}
.showcase img.bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04); transition: transform 1.2s var(--ease);
}
.showcase::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(190deg, rgba(6,8,12,.06) 12%, rgba(6,8,12,.76) 80%),
              linear-gradient(120deg, color-mix(in srgb, var(--brand) 40%, transparent), transparent 64%);
}
.showcase:hover img.bg { transform: scale(1.1); }
.showcase h3 { color: #fff; font-size: clamp(1.25rem, 2vw, 1.8rem); margin-bottom: 8px; }
.showcase p { color: rgba(255, 255, 255, .8); font-size: .95rem; max-width: 42ch; margin: 0; }
.showcase .eyebrow {
  align-self: flex-start; margin-bottom: 14px;
  color: #fff; background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

/* -------------------------------------------------- 14b. Cerita: akordeon panel
   Satu panel terbuka lebar, sisanya menyempit jadi bilah bertuliskan vertikal.
   Bilah diklik (atau disorot di desktop) untuk bertukar tempat. */
.stories {
  display: flex; gap: 12px;
  height: clamp(430px, 50vw, 570px);
}

.story {
  position: relative; isolation: isolate; overflow: hidden;
  /* Cukup sempit agar 8 panel (satu per produk) tetap muat di satu baris. */
  flex: 1 1 0; min-width: 58px;
  border-radius: var(--r-2xl);
  transition: flex-grow .85s var(--ease);
}
.story-bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease), filter .7s var(--ease);
}
.story::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(200deg, rgba(6, 8, 12, .1) 8%, rgba(6, 8, 12, .82) 84%),
    linear-gradient(118deg, color-mix(in srgb, var(--brand) 46%, transparent), transparent 68%);
}
/* Bilah yang tertutup dibuat lebih redup supaya panel aktif menonjol. */
.story:not(.is-active) .story-bg { filter: saturate(.62) brightness(.74); transform: scale(1.16); }
.story.is-active { flex-grow: 9; }

/* Bilah sempit */
.story-tab {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center;
  gap: 18px; padding: 24px 8px;
  color: #fff; text-align: center;
  transition: opacity .4s var(--ease);
}
.story-ico {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center;
  border-radius: 13px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .5s var(--spring);
}
.story-ico .ico { width: 20px; height: 20px; }
.story-tab:hover .story-ico { transform: translateY(-2px) scale(1.06); }
.story-name {
  flex: 1; display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.05rem; letter-spacing: -.02em; white-space: nowrap;
}
.story-plus {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .34);
  transition: background-color .3s var(--ease);
}
.story-plus .ico { width: 14px; height: 14px; }
.story-tab:hover .story-plus { background: rgba(255, 255, 255, .2); }
.story.is-active .story-tab { opacity: 0; pointer-events: none; }

/* Isi panel yang terbuka */
.story-panel {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(26px, 3vw, 44px);
  opacity: 0; pointer-events: none;
  transition: opacity .5s var(--ease) .16s;
}
.story.is-active .story-panel { opacity: 1; pointer-events: auto; }
/* Lebar tetap supaya teks tidak berlipat-lipat selagi panel melebar. */
.story-copy { width: min(52ch, 100%); min-width: 330px; }

.story-brand {
  display: inline-flex; align-items: center; gap: 11px;
  margin-bottom: auto; color: #fff;
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.025em;
}
.story-brand .story-ico { width: 38px; height: 38px; border-radius: 12px; }
.story-brand .story-ico .ico { width: 18px; height: 18px; }

.story-panel h3 { color: #fff; font-size: clamp(1.3rem, 2.1vw, 1.95rem); margin-bottom: 14px; }
.story-panel h3 a {
  color: inherit;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size .45s var(--ease);
}
.story-panel h3 a:hover { background-size: 100% 2px; }
a.story-brand:hover .story-ico { transform: translateY(-2px) scale(1.06); }
.story-quote { color: rgba(255, 255, 255, .82); font-size: .96rem; line-height: 1.6; margin-bottom: 14px; }
.story-who { color: rgba(255, 255, 255, .66); font-size: .86rem; margin: 0; }
.story-who b { color: #fff; font-weight: 600; }

.story-go {
  position: absolute; right: clamp(24px, 2.8vw, 40px); bottom: clamp(24px, 2.8vw, 40px);
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand); color: #fff;
  box-shadow: 0 16px 34px -16px rgba(0, 0, 0, .8);
  transition: transform .4s var(--spring), background-color .3s var(--ease), opacity .4s var(--ease);
}
.story:not(.is-active) .story-go { opacity: 0; pointer-events: none; transform: scale(.6); }
.story-go .ico { width: 20px; height: 20px; transform: rotate(-45deg); }
.story-go:hover { transform: translateY(-3px) scale(1.07); background: color-mix(in srgb, var(--brand) 82%, #fff); }

/* -------------------------------------------------- 15. Halaman produk */
.prod-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(clamp(40px, 5vw, 72px) + var(--head-h)) 0 clamp(52px, 6vw, 92px);
  /* Ramp milik tiap produk: seluruhnya diturunkan dari --brand/--brand-glow
     yang disuntikkan per halaman, jadi HARIS biru, TARA ungu, GUESTLINK pink,
     dan seterusnya. Jangan diganti nilai tetap — itu mematikan tema produk. */
  /* Tanpa pita gelap di puncak: tint warna produk yang lembut, memudar ke
     putih lewat banyak titik berkurva ease — tidak ada tepi yang terlihat.
     Header di atasnya berisi gelap (lihat 5b). */
  background:
    /* Cahaya warna kedua produk di kanan atas, di belakang mockup. */
    radial-gradient(
      ellipse 62% 70% at 86% 0%,
      color-mix(in srgb, var(--brand-glow) 34%, transparent) 0%,
      color-mix(in srgb, var(--brand-glow) 24%, transparent) 22%,
      color-mix(in srgb, var(--brand-glow) 13%, transparent) 42%,
      color-mix(in srgb, var(--brand-glow) 5%, transparent) 62%,
      transparent 82%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--brand) 30%, #fff) 0%,
      color-mix(in srgb, var(--brand) 28%, #fff) 7%,
      color-mix(in srgb, var(--brand) 24%, #fff) 15%,
      color-mix(in srgb, var(--brand) 19%, #fff) 25%,
      color-mix(in srgb, var(--brand) 14%, #fff) 36%,
      color-mix(in srgb, var(--brand) 9%, #fff) 48%,
      color-mix(in srgb, var(--brand) 5%, #fff) 61%,
      color-mix(in srgb, var(--brand) 2%, #fff) 75%,
      color-mix(in srgb, var(--brand) .5%, #fff) 88%,
      #fff 100%
    );
}
/* Butiran halus yang sama dengan hero beranda, meredam banding. */
.prod-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.prod-hero > .shell { position: relative; z-index: 1; }

/* -------------------------------------------------- 15b. iSortCORE
   CORE adalah modul fondasi, jadi hero-nya memakai ramp netral yang sama
   dengan beranda — bukan ramp gold seperti modul lain. Warnanya persis,
   hanya bagian pekatnya ditahan lebih lama karena di prod-hero teks masih
   berjalan sampai dekat kaki section (di beranda bagian itu diisi kartu). */
.tone-isortcore .prod-hero {
  background: linear-gradient(
    180deg,
    #1F2226 0%,
    #2A2D32 14%,
    #363A40 28%,
    #474C53 42%,
    #5C6168 55%,
    #747981 70%,
    #8D9299 84%,
    #AEB3B9 93%,
    #DADDE1 97%,
    #FFFFFF 100%
  );
}

/* Ikut aturan tone hero beranda: isi serba terang di atas ramp pekat. */
.tone-isortcore .prod-hero .crumb { color: rgba(255, 255, 255, .74); }
.tone-isortcore .prod-hero .crumb a:hover,
.tone-isortcore .prod-hero .crumb [aria-current] { color: #fff; }

.tone-isortcore .prod-hero .eyebrow {
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .34);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

.tone-isortcore .prod-hero h1 { color: #fff; }
.tone-isortcore .prod-hero .prod-title h1 .sfx { color: var(--brand-glow); }
.tone-isortcore .prod-hero .tagline { color: #fff; }
.tone-isortcore .prod-hero .lead { color: rgba(255, 255, 255, .84); }
.tone-isortcore .prod-hero .tone-strip { color: rgba(255, 255, 255, .88); }

.tone-isortcore .prod-hero .btn-brand {
  background: #fff; color: #171310;
  box-shadow: 0 18px 38px -18px rgba(10, 8, 6, .8);
}
.tone-isortcore .prod-hero .btn-brand:hover {
  background: #fff; box-shadow: 0 22px 44px -18px rgba(10, 8, 6, .85);
}
.tone-isortcore .prod-hero .btn-ghost {
  background: rgba(255, 255, 255, .1); color: #fff;
  border-color: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.tone-isortcore .prod-hero .btn-ghost:hover {
  background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .72);
}

.crumb {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: .82rem; color: var(--muted-2); margin-bottom: 28px;
}
/* Remah roti di atas tint hero produk, jadi dibuat sedikit lebih gelap. */
.prod-hero .crumb { color: #454E5E; }
.crumb a:hover { color: var(--brand); }
.crumb i { opacity: .45; font-style: normal; }
.crumb [aria-current] { color: var(--ink); font-weight: 600; }

.prod-hero-grid {
  position: relative; display: grid; gap: clamp(34px, 4vw, 58px);
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center;
}
.prod-title { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.prod-title .prod-ico { width: 58px; height: 58px; border-radius: 18px; }
.prod-title .prod-ico .ico { width: 27px; height: 27px; }
.prod-title h1 { margin: 0; font-size: clamp(2rem, 4.2vw, 3.2rem); }
.prod-title h1 .sfx { color: var(--brand); }
.prod-hero .tagline {
  font-family: var(--font-display); font-size: clamp(1.1rem, 1.7vw, 1.4rem);
  color: var(--ink); font-weight: 600; margin-bottom: 16px; letter-spacing: -.015em; line-height: 1.24;
}

.prod-hero .hero-actions { justify-content: flex-start; margin-top: 28px; }

.tone-strip {
  display: flex; align-items: center; gap: 9px; margin-top: 28px;
  font-size: .71rem; color: var(--muted-2); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.tone-strip i { width: 30px; height: 7px; border-radius: var(--r-pill); display: block; }

.other-prod { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(226px, 1fr)); }
.other-item {
  display: flex; align-items: center; gap: 13px;
  padding: 16px 18px; border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--line);
  transition: transform .45s var(--spring), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.other-item:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--brand) 30%, #fff); box-shadow: var(--sh-sm); }
.other-item b { font-size: .93rem; color: var(--ink); display: block; letter-spacing: -.024em; font-weight: 600; }
.other-item small { color: var(--muted-2); font-size: .78rem; }

.for-list { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.for-list li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--r-pill); font-size: .85rem; font-weight: 500;
  background: #fff; border: 1px solid var(--line); color: var(--ink-2);
  transition: border-color .3s var(--ease), transform .4s var(--spring);
}
.for-list li:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 32%, #fff); }
.for-list .ico { color: var(--brand); }

/* -------------------------------------------------- 16. Formulir */
.form-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-2xl); padding: clamp(28px, 3.4vw, 44px);
  box-shadow: var(--sh);
}
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .84rem; font-weight: 600; color: var(--ink); margin-bottom: 7px; letter-spacing: -.012em; }
.field .req { color: var(--brand); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 16px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--bg-alt);
  font: inherit; font-size: .94rem; color: var(--ink);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), background-color .22s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: #fff; border-color: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 13%, transparent);
}
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #DC2626; background: #FEF6F6; }
.err { display: block; color: #DC2626; font-size: .8rem; margin-top: 6px; font-weight: 500; }
.field-row { display: grid; gap: 0 18px; grid-template-columns: 1fr 1fr; }

.alert {
  display: flex; gap: 12px; padding: 16px 18px; border-radius: var(--r-sm);
  margin-bottom: 24px; font-size: .92rem; align-items: flex-start;
}
.alert .ico { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.alert-ok { background: #F0FDF4; color: #14532D; border: 1px solid #BBF7D0; }
.alert-bad { background: #FEF2F2; color: #7F1D1D; border: 1px solid #FECACA; }

.contact-side { display: grid; gap: 12px; align-content: start; }
.contact-tile {
  display: flex; gap: 15px; padding: 20px 22px; border-radius: var(--r-lg);
  background: #fff; border: 1px solid var(--line);
  transition: transform .45s var(--spring), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.contact-tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand) 28%, #fff); box-shadow: var(--sh-sm); }
.contact-tile .feat-ico { margin: 0; width: 42px; height: 42px; border-radius: 13px; }
.contact-tile .feat-ico .ico { width: 19px; height: 19px; }
.contact-tile b { display: block; color: var(--ink); font-size: .94rem; margin-bottom: 3px; font-weight: 600; }
.contact-tile span, .contact-tile a { color: var(--muted); font-size: .89rem; }
.contact-tile a:hover { color: var(--brand); }

.map-wrap { border-radius: var(--r-2xl); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sh); }
.map-wrap iframe { display: block; width: 100%; height: 360px; border: 0; filter: grayscale(.3) contrast(1.04); }

/* -------------------------------------------------- 17. Tentang */
.value-card {
  padding: 30px 28px; border-radius: var(--r-xl); background: #fff;
  border: 1px solid var(--line);
  transition: transform .5s var(--spring), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.value-card:hover { transform: translateY(-5px); border-color: var(--silver-2); box-shadow: var(--sh); }

/* Linimasa: tonggak mendatar di desktop — satu garis menyambung titik-titik,
   tahun besar di atas kartu. Di layar sempit berubah jadi garis tegak. */
.timeline {
  --tl-dot: 18px;
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.timeline::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(var(--tl-dot) / 2 - 1px); height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand) 55%, #fff) 8%, color-mix(in srgb, var(--brand) 55%, #fff) 92%, transparent);
}
.timeline li { position: relative; display: flex; flex-direction: column; padding-top: calc(var(--tl-dot) + 22px); }
.timeline li::before {
  content: ""; position: absolute; left: 26px; top: 0;
  width: var(--tl-dot); height: var(--tl-dot); border-radius: 50%;
  background: #fff; border: 4px solid var(--brand);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 14%, transparent);
}
.tl-year {
  display: block; margin: 0 0 12px 18px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 2.6vw, 2.4rem); letter-spacing: -.04em; line-height: 1;
  color: var(--brand);
}
.tl-body {
  flex: 1;
  padding: 22px 22px 24px; border-radius: var(--r-xl);
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 18px 40px -34px rgba(10, 14, 22, .45);
  transition: transform .5s var(--spring), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.timeline li:hover .tl-body { transform: translateY(-4px); border-color: color-mix(in srgb, var(--brand) 26%, #fff); box-shadow: var(--sh); }
.tl-body h3 { font-size: 1.08rem; margin: 0 0 8px; font-weight: var(--fw-heading, 600); letter-spacing: -.02em; }
.tl-body p { color: var(--muted); font-size: .92rem; margin: 0; line-height: 1.6; }
@media (max-width: 860px) {
  .timeline { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-left: 34px; }
  .timeline::before {
    left: calc(var(--tl-dot) / 2 - 1px); right: auto; top: 6px; bottom: 6px; width: 2px; height: auto;
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 55%, #fff), color-mix(in srgb, var(--brand) 12%, #fff));
  }
  .timeline li { padding-top: 0; }
  .timeline li::before { left: -34px; top: 4px; }
  .tl-year { margin: 0 0 10px; font-size: 1.6rem; }

}

/* Hero halaman builder (Layanan, Tentang, Kontak): senada hero blog. */
.page-hero { padding-bottom: clamp(44px, 5vw, 76px); }
.page-hero-copy { max-width: 780px; }
.page-hero h1 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); line-height: 1.08; letter-spacing: -.035em; margin: 0 0 18px; }
.page-hero .lead { max-width: 62ch; margin: 0; }

/* -------------------------------------------------- 18. CTA & Footer */
.site-foot { position: relative; background: var(--bg-alt); overflow: hidden; --foot-line: #C3C9D2; }
.foot-glow {
  display: block; position: absolute; top: -10%; left: 50%; transform: translateX(-50%);
  width: 92vw; height: 420px; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--brand-glow) 50%, transparent) 0%, transparent 66%);
  filter: blur(60px); opacity: .5;
}
.site-foot > .shell { position: relative; z-index: 1; }

.foot-cta {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: clamp(-84px, -7vw, -60px);
  display: grid; gap: 30px; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: center;
  padding: clamp(34px, 4.4vw, 58px);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-2xl); box-shadow: var(--sh-lg);
}
.foot-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(90% 130% at 4% 0%, color-mix(in srgb, var(--brand) 14%, #fff) 0%, transparent 56%),
    radial-gradient(70% 100% at 100% 100%, color-mix(in srgb, var(--brand-silver) 44%, #fff) 0%, transparent 60%);
}
.foot-cta h2 { font-size: clamp(1.6rem, 2.8vw, 2.5rem); }
.foot-cta .lead { font-size: 1rem; }
.foot-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }

/* Baris tautan: Produk (dua kolom) | garis pemisah vertikal | Perusahaan, Jam Layanan, Kontak. */
/* Isi footer dibuat ringkas di tengah, tidak melebar ke tepi layar lebar. */
.foot-main, .foot-rule, .foot-bottom { max-width: 1100px; margin-inline: auto; }
/* Satu jarak untuk semua kolom footer (antar-blok, kolom produk, kolom grup)
   supaya kelima kolom berjarak sama di desktop. */
.site-foot { --foot-gap: clamp(24px, 3vw, 40px); }
.foot-main {
  display: grid; align-items: stretch;
  /* 2 : 3 mengikuti jumlah kolom isinya (produk 2, grup 3), jadi lebar kolom setara. */
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 0 var(--foot-gap);
  padding: clamp(52px, 5.5vw, 72px) 0 clamp(36px, 4vw, 48px);
}
/* Garis vertikal ditiadakan di desktop; di layar sempit tampil sebagai garis mendatar. */
.foot-divider { display: none; background: var(--foot-line); }
.foot-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px var(--foot-gap); }
/* Produk mengalir ke bawah dulu, lalu pindah ke kolom kedua (--rows dari jumlah tautan). */
.foot-products ul { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 4), auto); grid-auto-flow: column; column-gap: var(--foot-gap); }
.foot-certimg { margin-top: 30px; }
/* Lebar maksimal diatur dari admin (footer_cert_width → --cert-w). */
.foot-certimg img { display: block; width: 100%; max-width: var(--cert-w, 560px); height: auto; object-fit: contain; }

/* Garis pemisah penuh antara tautan dan bagian bawah footer. */
.foot-rule { height: 1px; background: var(--foot-line); }

/* Judul kolom & tautan: kecil dan rapat seperti footer contoh. */
.foot-col h3 { font-family: var(--font); font-size: .92rem; letter-spacing: -.005em; color: var(--ink); margin-bottom: 18px; font-weight: 600; }
.foot-col ul { display: grid; gap: 13px; }
.foot-col ul a, .foot-col ul li { font-size: .84rem; line-height: 1.45; color: var(--muted); }
.foot-col ul a { display: inline-block; transition: color .2s var(--ease); }
.foot-col ul a:hover { color: var(--brand); }

.foot-contact li { display: flex; gap: 9px; align-items: flex-start; }
.foot-contact .ico { width: 14px; height: 14px; flex: none; color: var(--brand); margin-top: 3px; }

/* Jam layanan: label kecil di atas, jam di bawah (tanpa garis tabel). */
.foot-hours li { display: grid; gap: 1px; }
.foot-hours span { font-size: .78rem; color: var(--muted-2); }
.foot-hours b { font-size: .84rem; color: var(--ink-2); font-weight: 600; }
.foot-cta-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 18px;
  font-size: .84rem; font-weight: 600; color: var(--btn-main, var(--brand));
}
.foot-cta-link .ico { width: 14px; height: 14px; transition: transform .3s var(--spring); }
.foot-cta-link:hover .ico { transform: translateX(3px); }

/* -------------------------------------------------- Sertifikat
   Kartu seragam: gambar (scan sertifikat / logo lembaga) selalu utuh di
   bingkai berasio tetap, jadi grid tetap rapi berapa pun rasio aslinya. */
.foot-certs { padding: 30px 0 34px; border-top: 1px solid var(--line); }
.foot-certs h3 {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font); font-size: .73rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink); margin-bottom: 18px; font-weight: 700;
}
.foot-certs h3 .ico { color: var(--btn-main, var(--brand)); }

.cert-grid { display: grid; gap: 14px; }
.cert-compact { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.cert-card { grid-template-columns: repeat(var(--cert-cols, 4), minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }

.cert {
  width: 100%; height: 100%; text-align: left;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 10px; cursor: zoom-in;
  transition: transform .45s var(--spring), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.cert:hover { transform: translateY(-4px); box-shadow: var(--sh-sm); border-color: var(--silver-2); }
.cert-media {
  display: grid; place-items: center; aspect-ratio: 4 / 3;
  border-radius: calc(var(--r-lg) - 6px); overflow: hidden;
  background: linear-gradient(160deg, #F7F8FA, #EEF0F3);
  color: var(--btn-main, var(--brand));
}
.cert-media img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.cert-media .ico { width: 34px; height: 34px; stroke-width: 1.3; }
.cert-body { display: block; padding: 10px 4px 2px; }
.cert-body b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: .84rem; line-height: 1.3; color: var(--ink); font-weight: 600; letter-spacing: -.01em;
}
.cert-body small {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 3px; font-size: .74rem; line-height: 1.4; color: var(--muted-2);
}
/* Footer: deretan logo sertifikat & penghargaan langsung di latar, tanpa
   bingkai — semua setinggi sama supaya sejajar rapi, lebar menyesuaikan
   rasio logonya. Unggah logo PNG berlatar transparan di Admin → Sertifikat. */
.cert-logos {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(22px, 3vw, 40px) clamp(30px, 4.5vw, 64px);
}
.cert-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 0; background: none; border: 0; cursor: zoom-in;
  transition: transform .45s var(--spring), opacity .3s var(--ease);
}
.cert-logo img {
  height: clamp(64px, 6.5vw, 96px); width: auto; max-width: 240px;
  object-fit: contain; display: block;
}
.cert-logo:hover { transform: translateY(-3px); }
.cert-logos:hover .cert-logo:not(:hover) { opacity: .6; }
.cert-logo:focus-visible { outline: 2px solid var(--btn-main, var(--brand)); outline-offset: 6px; border-radius: 8px; }
/* Pengganti bila belum ada logo: lencana teks. */
.cert-logo.is-text {
  text-align: left; padding: 12px 18px 12px 14px;
  border: 1px solid var(--line); border-radius: 14px; background: #fff;
}
.cert-logo.is-text .ico { width: 30px; height: 30px; stroke-width: 1.3; flex: none; color: var(--btn-main, var(--brand)); }
.cert-logo.is-text b { display: block; font-size: .9rem; color: var(--ink); font-weight: 700; letter-spacing: -.01em; }
.cert-logo.is-text small { display: block; margin-top: 1px; font-size: .74rem; color: var(--muted-2); }

.cert-card .cert { padding: 14px; }
.cert-card .cert-body { padding: 14px 4px 4px; }
.cert-card .cert-body b { font-size: .98rem; }
.cert-card .cert-body small { font-size: .82rem; }

.cert-dialog {
  width: min(880px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  padding: 0; border: 0; border-radius: var(--r-lg); background: #fff;
  box-shadow: 0 40px 90px -30px rgba(6, 8, 12, .55);
}
.cert-dialog::backdrop { background: rgba(10, 12, 16, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cert-dialog figure { margin: 0; display: flex; flex-direction: column; max-height: calc(100vh - 32px); }
.cert-dialog img { flex: 1 1 auto; min-height: 0; width: 100%; object-fit: contain; background: #F4F5F7; max-height: 72vh; }
.cert-dialog figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 18px 22px; }
.cert-dialog figcaption b { font-size: 1.05rem; color: var(--ink); flex: 1 1 60%; }
.cert-dialog figcaption small { color: var(--muted); font-size: .86rem; flex-basis: 100%; order: 2; }
.cert-dialog figcaption .btn { order: 1; }
.cert-close {
  position: absolute; top: 12px; right: 12px; z-index: 1;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .9); border: 1px solid var(--line); color: var(--ink);
}
.cert-close:hover { background: #fff; }

@media (max-width: 1120px) { .cert-card { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .cert-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cert-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Logo di tengah, hak cipta, lalu kredit & pilihan bahasa. */
.foot-bottom {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; padding: clamp(26px, 3vw, 34px) 0 32px;
  font-size: .78rem; color: var(--muted-2);
}
.foot-bottom p { margin: 0; }
.foot-bottom .brand-foot { margin-bottom: 2px; }
/* Lebar logo footer diatur dari admin (logo_footer_width) lewat atribut style. */
.foot-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; }
.foot-meta:empty { display: none; }
.foot-meta .lang-pick { padding: 3px 10px; font-size: .78rem; }

/* Pilihan bahasa di footer */
.lang-pick {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: #fff; color: var(--ink-2); cursor: pointer;
  transition: border-color .24s var(--ease);
}
.lang-pick:hover, .lang-pick:focus-within { border-color: var(--silver-2); }
.lang-pick select {
  appearance: none; -webkit-appearance: none;
  border: 0; background: none; font: inherit; color: inherit; cursor: pointer;
  padding-right: 4px;
}
.lang-pick select:focus-visible { outline: none; }
.lang-pick:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Terjemahan otomatis: sembunyikan bilah, tooltip & sorotan bawaan Google
   supaya tampilan situs tetap utuh. */
body { top: 0 !important; }
iframe.skiptranslate, .skiptranslate > iframe, .goog-te-banner-frame,
#goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip,
.VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf, .VIpgJd-yAWNEb-L7lbkb,
#gtElement { display: none !important; }
.goog-text-highlight, .VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q {
  background: none !important; box-shadow: none !important;
}
/* Selama halaman menunggu terjemahan, konten disamarkan lalu dimunculkan
   halus — teks sumber tidak sempat terlihat berganti. */
body { transition: opacity .45s var(--ease, ease); }
html.i18n-pending body { opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) { body { transition: none; } }

/* Aksi mengambang */
.wa-float {
  position: fixed; right: 20px; bottom: 76px; z-index: 91;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 20px; border-radius: var(--r-pill);
  background: #16A34A; color: #fff;
  font-weight: 700; font-size: .92rem;
  border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: 0 10px 28px rgba(22, 163, 74, .38), var(--sh);
  transition: transform .45s var(--spring), box-shadow .3s var(--ease), background .3s var(--ease);
}
.wa-float:hover { transform: translateY(-3px); background: #15803D; box-shadow: 0 14px 34px rgba(22, 163, 74, .45), var(--sh-lg); }
.wa-float .ico { width: 20px; height: 20px; color: #fff; }

/* Ikon media sosial bertumpuk di atas tombol WhatsApp, sejajar dengan tombol ke-atas. */
.social-float {
  position: fixed; right: 20px; bottom: 134px; z-index: 91;
  display: flex; flex-direction: column; gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
.social-float a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  color: var(--ink-2);
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--line); box-shadow: var(--sh);
  transition: color .24s var(--ease), transform .34s var(--spring), box-shadow .3s var(--ease);
}
.social-float a:hover { color: var(--btn-main, var(--brand)); transform: translateY(-3px); box-shadow: var(--sh-lg); }
.social-float .ico { width: 20px; height: 20px; stroke-width: 2; }

.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink);
  background: rgba(255, 255, 255, .84);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--line); box-shadow: var(--sh);
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.9);
  transition: opacity .3s var(--ease), transform .45s var(--spring), visibility .3s;
}
.to-top svg { width: 18px; height: 18px; }
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top.show:hover { transform: translateY(-3px); }

/* -------------------------------------------------- 19. Reveal */
.reveal {
  opacity: 0; transform: translateY(26px) scale(.985);
  filter: blur(6px);
  transition: opacity .82s var(--ease-out), transform .82s var(--ease-out), filter .82s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.reveal.in { opacity: 1; transform: none; filter: none; }
.reveal-left { transform: translate(-30px, 14px) scale(.985); }
.reveal-right { transform: translate(30px, 14px) scale(.985); }
.reveal-zoom { transform: scale(.94); }

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

  /* Pengecualian atas permintaan pemilik situs: pita klien tetap bergulir
     penuh walau sistem minta gerak diredam. Aturan `*` di atas memangkas
     durasi jadi .001ms dan iterasinya jadi 1, keduanya dikembalikan di sini.
     Jedanya saat kursor menyentuh nama tetap berlaku. */
  .marquee {
    animation-duration: var(--marquee-speed) !important;
    animation-iteration-count: infinite !important;
  }
  /* Roda kartu modul hero mendapat pengecualian yang sama, termasuk
     transisi hover kartunya — tanpa ini kartu melompat saat disentuh. */
  .mod-ring:not(.is-js) {
    animation-duration: var(--spin-speed) !important;
    animation-iteration-count: infinite !important;
  }
  .mod-card { transition-duration: .5s, .4s !important; }
  .mod-ico { transition-duration: .5s !important; }
  .mod-go { transition-duration: .35s, .45s !important; }
  .mod-art .pv { transition-duration: .8s !important; }
}

/* -------------------------------------------------- 20. Responsif */
@media (min-width: 861px) {
  .bento-6 { grid-column: span 6; }
  .bento-4 { grid-column: span 4; }
  .bento-8 { grid-column: span 8; }
}

@media (max-width: 1120px) {
  /* Garis pemisah vertikal menjadi garis mendatar di bawah kolom produk. */
  .foot-main { grid-template-columns: 1fr; grid-template-rows: auto 1px auto; gap: 34px 0; }
  .foot-divider { display: block; }
  .foot-cta { grid-template-columns: 1fr; }
  .foot-cta-actions { justify-content: flex-start; }
  .stat-band { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  :root { --gutter: 20px; }
  /* Harus di atas laci (z-index 105) agar tombol tutup tetap terlihat. */
  .burger { display: grid; place-items: center; position: relative; z-index: 106; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw);
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: calc(var(--head-h) + 20px) 20px 32px;
    border-left: 1px solid var(--line);
    box-shadow: -30px 0 70px -40px rgba(10, 14, 22, .55);
    transform: translateX(105%); transition: transform .48s var(--ease);
    overflow-y: auto; z-index: 105;
  }
  body.nav-open .nav { transform: none; }
  /* Laci putih menutupi latar gelap, jadi burger ikut dibalik lagi. */
  body.nav-open .site-head .burger { background: #fff; border-color: var(--line); }
  body.nav-open .site-head .burger span { background: var(--ink); }
  .nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-link { padding: 14px 16px; border-radius: var(--r-sm); font-size: 1rem; justify-content: space-between; width: 100%; }
  .nav-cta { margin-top: 20px; width: 100%; }
  .mega {
    position: static; transform: none; width: auto; opacity: 1; visibility: visible;
    box-shadow: none; border: 0; border-radius: 0; padding: 0 0 0 8px; background: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease);
  }
  .has-mega.open .mega { grid-template-rows: 1fr; transform: none; }
  .mega > .mega-inner { overflow: hidden; grid-template-columns: 1fr; gap: 0; }
  .mega-item { padding: 10px; }
  .mega-all { margin: 8px 0; }

  .prod-hero-grid { grid-template-columns: 1fr; }
  .prod-hero-grid .split-media,
  .prod-hero-grid .prod-media { order: 2; }

}

@media (max-width: 860px) {
  .bento > * { grid-column: span 12 !important; }

  /* Akordeon berubah jadi tumpukan: yang aktif memanjang ke bawah. */
  .stories { flex-direction: column; height: auto; gap: 10px; }
  .story {
    flex: none; min-width: 0; height: 88px;
    border-radius: var(--r-xl);
    transition: height .75s var(--ease);
  }
  .story.is-active { height: clamp(390px, 96vw, 470px); }
  .story-tab { flex-direction: row; align-items: center; gap: 15px; padding: 0 20px; }
  .story-name {
    flex: 1; writing-mode: horizontal-tb; transform: none;
    justify-content: flex-start; text-align: left;
  }
  .story-copy { min-width: 0; }
  .story-go { width: 46px; height: 46px; }
}

@media (max-width: 720px) {
  .section { padding: 64px 0; }
  .hero { padding-top: calc(40px + var(--head-h)); }
  .hero-trust { gap: 20px; }
  .hero-trust li { min-width: 88px; }
  .field-row { grid-template-columns: 1fr; }
  .foot-group { grid-template-columns: 1fr 1fr; }
  .foot-group > :last-child { grid-column: 1 / -1; }
  .foot-cta { margin-top: -50px; }
  /* Di ponsel WhatsApp hanya ikon, sebesar tombol ke-atas (44px); semua tombol satu kolom. */
  .wa-float { right: 16px; bottom: 72px; width: 44px; height: 44px; padding: 0; justify-content: center; }
  .wa-float span { display: none; }
  .to-top { right: 16px; }
  .social-float { right: 16px; bottom: 124px; gap: 8px; }
  .faq-q { padding: 18px 20px; font-size: .99rem; }
  .faq-a p { padding: 0 24px 20px 20px; }
}

@media (max-width: 460px) {
  .stat-band { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
  h1 { font-size: 2.35rem; }
}

/* -------------------------------------------------- 21. Utilitas */
.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;
}
.center { text-align: center; }

/* -------------------------------------------------- Navigasi halaman blog */
.pagination-wrap { margin-top: clamp(36px, 5vw, 56px); }
.pager { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.pager a, .pager span {
  min-width: 42px; padding: 10px 15px; border-radius: var(--r-pill); text-align: center;
  font-size: .9rem; font-weight: 600; line-height: 1.2; color: var(--ink);
  background: #fff; border: 1px solid var(--line); text-decoration: none;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.pager a:hover { border-color: var(--brand); color: var(--brand); }
.pager .is-current { background: var(--brand); border-color: var(--brand); color: #fff; }
.pager .is-disabled { opacity: .45; }
.pager .pager-gap { border-color: transparent; background: none; }
.pager .pager-info { flex-basis: 100%; border: 0; background: none; padding: 4px 0 0; font-weight: 500; color: var(--muted); }