/* Azafa Dev — gaya situs, v1.0 "Halaman satu".
   Halaman berbicara dengan bahasa hasil pencarian: kotak cari, peringkat, judul biru, alamat situs.
   Satu keluarga huruf (Schibsted Grotesk). Putih 60%, biru tinta 30%, hijau peringkat 10%.
   Satu momen gerak saja: pencarian di hero. Bagian lain diam. */

:root {
  --paper: #ffffff;
  --surface: #f2f4f8;
  --line: #e1e6ee;
  --line-strong: #cdd4e0;
  --ghost: #e7ebf2;
  --ink: #0e1b33;
  --muted: #586378;
  --blue: #2340b8;
  --green: #0a7a48;
  --green-strong: #08613a;
  --green-tint: #e6f4ec;
  --on-green: #ffffff;
  --accent: var(--green);
  --accent-ink: var(--on-green);

  --font: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;

  --step-small: 0.875rem;
  --step-body: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  --step-lead: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);
  --step-sub: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --step-head: clamp(2.125rem, 1.4rem + 2.8vw, 3.75rem);
  --step-display: clamp(2.5rem, 1rem + 6vw, 6rem);
  --step-rank: clamp(3.5rem, 1.5rem + 8vw, 9.5rem);

  --margin: clamp(1.25rem, 4vw, 3rem);
  --max: 78rem;
  --gap: clamp(1rem, 2vw, 2rem);
  --space: clamp(4.5rem, 9vw, 8rem);
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-hover: 160ms;
  --t-ui: 260ms;
}

/* Bidang gelap: token ditimpa, komponen di dalamnya ikut berganti. */
.dark {
  --paper: #0e1b33;
  --surface: #17274a;
  --line: #24365c;
  --line-strong: #33496f;
  --ink: #eef1f7;
  --muted: #a3aec4;
  --blue: #a9bbff;
  --green-tint: #123a35;
  background: var(--paper);
  color: var(--ink);
}

/* ---------- dasar ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: var(--step-body); line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
strong { font-weight: 650; }
q { quotes: "“" "”"; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }

.wrap { width: min(100% - 2 * var(--margin), var(--max)); margin-inline: auto; }
.section { padding-block: var(--space); }
.section--tint { background: var(--surface); }
/* Di atas latar abu muda, abu-abu teks dibuat lebih gelap supaya tetap ~7:1. */
.section--tint, .duo__side--build { --muted: #454f63; }
.muted { color: var(--muted); }
.small { font-size: var(--step-small); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--margin); top: -4rem; z-index: 30; background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; border-radius: var(--r-sm); }
.skip:focus { top: 0.5rem; }

/* ---------- huruf ---------- */
.display { font-size: var(--step-display); line-height: 0.95; letter-spacing: -0.045em; font-weight: 800; }
.head { font-size: var(--step-head); line-height: 1; letter-spacing: -0.035em; font-weight: 800; }
.sub { font-size: var(--step-sub); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
.lead { font-size: var(--step-lead); line-height: 1.45; max-width: 40ch; }
.hero__say .lead { max-width: 52ch; }

/* ---------- kontrol ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.5rem; border-radius: 999px; background: var(--green); color: var(--on-green); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color var(--t-hover) ease, transform 120ms var(--ease-out); }
.button:hover { background: var(--green-strong); }
.button:active { transform: scale(0.97); }
.link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.22em; text-decoration-thickness: 1px; transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease; }
.link:hover { text-decoration-color: currentColor; }
.link-plain { font-weight: 600; text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1.5px; text-decoration-color: var(--line-strong); transition: text-decoration-color var(--t-hover) ease; }
.link-plain:hover { text-decoration-color: currentColor; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }

/* ---------- navbar ---------- */
.bar { position: sticky; top: 0; z-index: 20; background: rgb(255 255 255 / 0.94); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color var(--t-ui) ease; }
.bar.is-stuck { border-bottom-color: var(--line); }
.bar__inner { display: flex; align-items: center; gap: 0.75rem; min-height: 4rem; }
.bar__mark { font-weight: 800; font-size: 1.1875rem; letter-spacing: -0.03em; text-decoration: none; margin-right: auto; padding-block: 0.5rem; }
.bar__nav { display: none; }
.bar__links { display: flex; gap: 1.75rem; font-weight: 500; }
.bar__links a { padding-block: 0.5rem; }
.bar__action { min-height: 2.5rem; padding: 0 1.1rem; font-size: 0.9375rem; }
.bar__menu summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-right: -0.5rem; border-radius: 999px; }
.bar__menu summary::-webkit-details-marker { display: none; }
.burger { position: relative; width: 1.25rem; height: 0.75rem; }
.burger span { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--t-ui) var(--ease-out), opacity var(--t-hover) ease; }
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: calc(50% - 1px); }
.burger span:nth-child(3) { bottom: 0; }
.bar__menu[open] .burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.bar__menu[open] .burger span:nth-child(2) { opacity: 0; }
.bar__menu[open] .burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.bar__menu:not([open]) .bar__panel { display: none; }
.bar__panel { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); padding: 0.25rem var(--margin) 1.5rem; display: grid; gap: 1rem; max-height: calc(100svh - 4rem); overflow-y: auto; box-shadow: 0 24px 40px -24px rgb(14 27 51 / 0.25); }
.bar__panel ul { list-style: none; padding: 0; margin: 0; }
.bar__panel li + li { border-top: 1px solid var(--line); }
.bar__panel li a { display: block; padding: 0.9rem 0; font-size: var(--step-lead); font-weight: 600; text-decoration: none; }
@media (prefers-reduced-motion: no-preference) {
  .bar__menu[open] .bar__panel { animation: drop 220ms var(--ease-out); }
}
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 22em) { .bar__action { display: none; } }
@media (min-width: 52em) {
  .bar__nav { display: flex; margin-right: 1.25rem; }
  .bar__menu { display: none; }
  .bar__inner { min-height: 4.5rem; }
}
:target, [id] { scroll-margin-top: 5.5rem; }

/* ---------- kepala bagian ---------- */
.sec-head { display: grid; gap: 1rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec-head__say { color: var(--muted); max-width: 44ch; font-size: var(--step-lead); line-height: 1.45; }
@media (min-width: 64em) {
  .sec-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .sec-head .head { grid-column: 1 / span 6; }
  .sec-head__say { grid-column: 8 / -1; }
}

/* ---------- hero: pencarian ---------- */
.hero { padding-block: clamp(1.5rem, 3.5vw, 3rem) clamp(4rem, 8vw, 6.5rem); overflow-x: clip; }
.hero__grid { display: grid; gap: 1.75rem; }
.hero__title { font-size: min(var(--step-display), 9.6vw); }
.hero__title span { display: block; }
.hero__say { display: grid; gap: 1.25rem; }
.hero__say .lead { color: var(--muted); }

.search { min-width: 0; }
.search__box { display: flex; align-items: center; gap: 0.75rem; min-height: 3.75rem; padding: 0 1.4rem; background: #fff; border: 1.5px solid var(--line-strong); border-radius: 999px; font-size: var(--step-lead); box-shadow: 0 1px 2px rgb(14 27 51 / 0.05), 0 10px 30px -12px rgb(14 27 51 / 0.18); }
.search__icon { width: 1.25rem; height: 1.25rem; flex: none; color: var(--muted); }
.search__q { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search__caret { flex: none; width: 2px; height: 1.35em; margin-left: 1px; background: var(--blue); }
@media (prefers-reduced-motion: no-preference) {
  .search__caret { animation: blink 1.05s steps(1) infinite; }
}
@keyframes blink { 50% { opacity: 0; } }

.results { margin-top: 1rem; display: grid; gap: 0.25rem; }
.res { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 0.75rem; padding: 0.55rem 1rem 0.7rem 0.25rem; border-radius: var(--r-md); }
.res__rank { text-align: right; font-weight: 800; font-size: var(--step-lead); line-height: 1.2; color: var(--line-strong); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.res--hit { background: var(--green-tint); padding-block: 0.9rem 1rem; }
.res--hit .res__rank { color: var(--green); font-size: 2rem; line-height: 1; padding-top: 0.15rem; }
.res__site { display: flex; align-items: center; gap: 0.6rem; font-size: 0.875rem; line-height: 1.3; min-width: 0; }
.res__site > span:last-child { min-width: 0; }
.res__icon { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: #fff; border: 1px solid var(--line); color: #0e1b33; font-size: 0.8125rem; font-weight: 700; }
.res__name { display: block; }
.res__path { display: block; color: var(--muted); font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res__title { margin-top: 0.4rem; color: var(--blue); font-size: 1.1875rem; line-height: 1.3; font-weight: 500; }
.res__desc { margin-top: 0.25rem; color: var(--muted); font-size: 0.9375rem; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.res--ghost .res__body { display: grid; gap: 0.5rem; align-content: center; }
.bar-a, .bar-b { display: block; height: 0.625rem; border-radius: 99px; background: var(--ghost); }
.bar-a { width: 34%; }
.bar-b { width: 78%; }
.res--ghost:nth-child(2n) .bar-a { width: 46%; }
.res--ghost:nth-child(2n) .bar-b { width: 64%; }
.res--ghost:nth-child(3n) .bar-b { width: 70%; }

.search__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin-top: 1rem; }
.search__tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.search__tabs button { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.5rem; padding: 0 1rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 0.9375rem; font-weight: 500; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, border-color var(--t-hover) ease; }
.search__tabs button:hover { border-color: var(--ink); }
.search__tabs button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.search__tab-rank { font-weight: 800; color: var(--green); }
.search__tabs button[aria-pressed="true"] .search__tab-rank { color: #7ee0ad; }
.search__note { color: var(--muted); }

.hero__page { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1rem; align-items: end; }
.hero__page figcaption { max-width: 30ch; }
.phone { position: relative; padding: 0.45rem; border-radius: 2rem; background: #0e1b33; }
.phone img { border-radius: 1.6rem; width: 100%; background: #fff; }
.hero__page .phone { width: 100%; box-shadow: 0 40px 60px -30px rgb(14 27 51 / 0.45); }
.hero__page img { transition: opacity 220ms ease; }
.hero__page.is-swapping img { opacity: 0; }

/* Gerak hero dikendalikan site.js. Jaring pengaman: kalau skrip gagal, hasil tetap muncul setelah 1,8 detik. */
.js .search:not(.is-live) .search__q, .js .search:not(.is-live) .results { animation: show 1ms 1.8s both; }
@keyframes show { from { opacity: 0; } to { opacity: 1; } }
.search.is-live .res { opacity: 0; transform: translateY(8px); }
.search.is-live .res.is-in { opacity: 1; transform: none; transition: opacity 260ms ease, transform 420ms var(--ease-out); }

@media (min-width: 40em) and (max-width: 63.99em) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; }
  .hero__title, .hero__say { grid-column: 1 / -1; }
  .hero__page { align-self: start; grid-template-columns: 14rem; }
}
@media (min-width: 64em) {
  .hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 1.75rem; }
  .hero__title { grid-column: 1 / span 9; grid-row: 1; max-width: none; }
  .hero__say { grid-column: 1 / span 6; grid-row: 2; }
  .search { grid-column: 1 / span 8; grid-row: 3; margin-top: 0.5rem; }
  .hero__page { grid-column: 10 / -1; grid-row: 1 / span 3; align-self: start; grid-template-columns: minmax(0, 19rem); padding-top: 0.5rem; }
}

/* ---------- karya: jendela browser, satu tab per proyek ---------- */
.browser { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: #fff; }
.browser__bar { display: flex; align-items: center; justify-content: center; height: 2.25rem; padding-inline: 0.75rem; background: var(--surface); border-bottom: 1px solid var(--line); }
.browser__url { min-width: 45%; max-width: 100%; padding: 0.15rem 1rem; border-radius: 99px; background: #fff; color: var(--muted); font-size: 0.8125rem; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.viewer { border-radius: var(--r-lg); background: var(--surface); padding: 0.5rem; scroll-margin-top: 5.5rem; }
.viewer__tabs { display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; padding: 0.25rem 0.25rem 0; }
.viewer__tabs::-webkit-scrollbar { display: none; }
.viewer__tab { flex: none; display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.75rem; padding: 0 1rem 0 0.75rem; border-radius: var(--r-md) var(--r-md) 0 0; color: var(--muted); font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.viewer__tab:hover { color: var(--ink); background: rgb(255 255 255 / 0.55); }
.viewer__tab[aria-selected="true"], .viewer__tab[aria-current="true"] { background: #fff; color: var(--ink); }
.viewer__fav { display: grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--ink); color: #fff; font-size: 0.8125rem; font-weight: 700; }
.viewer__tabrank { font-weight: 800; color: var(--green); }
.viewer__tabshort { display: none; }
@media (max-width: 47.99em) { .viewer__tabshort { display: inline; } }

.viewer__panel { background: #fff; border-radius: 0 var(--r-md) var(--r-md) var(--r-md); padding: clamp(0.75rem, 2vw, 1.25rem); display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
.viewer__panel + .viewer__panel { margin-top: 0.5rem; border-radius: var(--r-md); }
.viewer__panel[hidden] { display: none; }
.viewer__bar { display: flex; align-items: center; gap: 1rem; }
.viewer__url { flex: 1; min-width: 0; padding: 0.45rem 1rem; border-radius: 99px; background: var(--surface); color: var(--muted); font-size: var(--step-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer__open { flex: none; font-size: var(--step-small); font-weight: 600; color: var(--blue); text-decoration-color: currentColor; }

.viewer__stage { display: grid; gap: 1rem; align-items: start; }
.viewer__desk { display: none; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); }
.viewer__desk img, .viewer__phone img { width: 100%; transition: opacity 180ms ease; }
.viewer__stage .is-swapping img { opacity: 0.2; }
.viewer__phone { justify-self: center; width: min(72%, 18rem); }

.viewer__foot { display: grid; gap: 1.5rem; }
.viewer__about { display: grid; gap: 0.5rem; align-content: start; }
.viewer__desc { color: var(--muted); }
.pages { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.pages--desk { display: none; }
.pages button { min-height: 2.5rem; padding: 0 1rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 0.9375rem; font-weight: 500; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, border-color var(--t-hover) ease; }
.pages button:hover { border-color: var(--ink); }
.pages button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.proof { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem 1.25rem; align-items: start; padding: 1.25rem; border-radius: var(--r-md); background: var(--green-tint); }
.proof__rank { display: grid; justify-items: center; gap: 0.35rem; }
.proof__n { font-size: clamp(3.5rem, 2rem + 4vw, 5.5rem); line-height: 0.8; font-weight: 800; letter-spacing: -0.05em; color: var(--green); font-variant-numeric: tabular-nums; }
.proof__of { font-size: var(--step-small); color: var(--muted); font-weight: 500; white-space: nowrap; }
.proof__text { display: grid; gap: 0.35rem; }
.proof__text q { font-weight: 650; }
.proof__text .muted { font-size: 0.9375rem; }
.proof__shot { grid-column: 1 / -1; display: grid; gap: 0.5rem; font-size: var(--step-small); font-weight: 600; color: var(--blue); text-decoration: none; }
.proof__shot img { border-radius: var(--r-sm); border: 1px solid var(--line); aspect-ratio: 16 / 7; object-fit: cover; object-position: left top; transition: opacity var(--t-hover) ease; }
.proof__shot:hover img { opacity: 0.85; }
.proof__shot:hover span { text-decoration: underline; text-underline-offset: 0.2em; }

@media (max-width: 47.99em) {
  /* HP: tiga tab selalu muat; nama panjang dipotong, peringkat tetap terlihat. */
  .viewer__tab { flex: 1 1 0; justify-content: center; min-width: 0; padding: 0 0.5rem; gap: 0.35rem; }
  .viewer__fav { display: none; }
  .viewer__tabname { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 48em) {
  .viewer__stage { grid-template-columns: minmax(0, 1fr) minmax(0, 0.3fr); }
  .viewer__desk { display: block; }
  .viewer__phone { width: auto; justify-self: stretch; }
  .viewer__phone.phone { padding: 0.3rem; border-radius: 1.4rem; }
  .viewer__phone.phone img { border-radius: 1.15rem; }
  .pages--desk { display: flex; }
  .pages--phone { display: none; }
}
@media (min-width: 64em) {
  .viewer__foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap); align-items: start; }
  .proof { grid-template-columns: auto minmax(0, 1fr) 13rem; }
  .proof__shot { grid-column: 3; grid-row: 1; }
  .proof__shot img { aspect-ratio: 4 / 3; }
}

.others { margin-top: clamp(4rem, 8vw, 6rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.others .sub { margin-bottom: 1.75rem; }
.others__list { display: grid; gap: 1.75rem 3rem; }
.other { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; align-items: start; text-decoration: none; }
.other__shot img { border-radius: var(--r-sm); border: 1px solid var(--line); }
.other__text { display: grid; gap: 0.15rem; min-width: 0; }
.other__site { font-size: 0.8125rem; color: var(--muted); }
.other__name { color: var(--blue); font-size: 1.1875rem; line-height: 1.3; font-weight: 500; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; transition: text-decoration-color var(--t-hover) ease; }
.other:hover .other__name { text-decoration-color: currentColor; }
.other__desc { color: var(--muted); font-size: 0.9375rem; }
@media (min-width: 48em) { .others__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- layanan: dua panel, dua orang ---------- */
.duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.duo__side > * { min-width: 0; }
.duo__side { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; gap: 1.5rem; padding: clamp(1.5rem, 3.5vw, 2.75rem); border-radius: var(--r-lg); background: var(--surface); align-content: start; }
.duo__side--find { background: var(--paper); }
.duo__who { font-size: var(--step-sub); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
.duo__fig { display: grid; gap: 0.75rem; }
.duo__fig figcaption { font-size: var(--step-small); color: var(--muted); max-width: 46ch; }
.duo__browser img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.duo__serp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; align-content: center; min-height: 100%; }
.search__box--mini { min-height: 3rem; font-size: 1rem; color: #0e1b33; box-shadow: none; border-color: transparent; }
.search__box--mini .search__q { white-space: nowrap; }
.duo__side--find .res--hit { background: var(--surface); }
.duo__side--find .res--hit .res__rank { color: #7ee0ad; }
.offer-list { align-self: start; }
.offer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 1.5rem; padding-block: 1.1rem; border-top: 1px solid var(--line-strong); text-decoration: none; }
.offer__name { font-size: var(--step-lead); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; transition: color var(--t-hover) ease; }
.offer__note { grid-column: 1; color: var(--muted); max-width: 46ch; }
.offer__tool { grid-column: 2; grid-row: 1; align-self: center; font-size: var(--step-small); color: var(--muted); }
.offer:hover .offer__name { color: var(--blue); }
.duo__ask { justify-self: start; }
.duo__side--build .duo__ask { background: var(--ink); }
.duo__side--build .duo__ask:hover { background: var(--blue); }
@media (min-width: 56em) {
  .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; row-gap: 0; }
  /* Baris kedua panel disejajarkan: judul, contoh, daftar, tombol berada di garis yang sama. */
  .duo__side { grid-row: span 4; grid-template-rows: subgrid; row-gap: 1.5rem; }
  .duo__fig { grid-template-rows: minmax(0, 1fr) auto; }
  .duo__browser img { aspect-ratio: 16 / 8; }
}

/* ---------- tentang: cerita + panel profil ---------- */
.about__grid { display: grid; gap: 3rem; }
.about__story { display: grid; gap: 1.25rem; align-content: start; max-width: 40rem; }
.about__story .lead { max-width: none; }
.about__h { margin-top: 1.25rem; font-size: var(--step-sub); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
.path { display: grid; gap: 0; }
.path li { position: relative; display: grid; gap: 0.2rem; padding: 0 0 1.5rem 2rem; }
.path li::before { content: ""; position: absolute; left: 0.3rem; top: 0.45rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--paper); border: 2px solid var(--green); }
.path li::after { content: ""; position: absolute; left: calc(0.3rem + 0.35rem - 1px); top: 1.4rem; bottom: 0.2rem; width: 2px; background: var(--line-strong); }
.path li:last-child { padding-bottom: 0; }
.path li:last-child::before { background: var(--green); }
.path li:last-child::after { display: none; }
.path strong { font-weight: 700; }
.path span { color: var(--muted); max-width: 52ch; }

.kp { background: var(--paper); border-radius: var(--r-lg); padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: 1.5rem; align-content: start; order: -1; }
.kp__top { display: flex; align-items: center; gap: 1rem; }
.kp__avatar { flex: none; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--ink); color: #fff; font-size: 1.75rem; font-weight: 800; object-fit: cover; }
.kp__avatar--sm { width: 2.5rem; height: 2.5rem; font-size: 1rem; background: var(--green); }
.kp__name { font-size: var(--step-sub); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
.kp__role { color: var(--muted); }
.kp__facts { display: grid; gap: 0.7rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.kp__facts div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; }
.kp__facts dt { font-weight: 650; }
.kp__facts dd { color: var(--muted); }
.kp__block { display: grid; gap: 0.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.kp__label { font-size: var(--step-body); font-weight: 650; }
.kp__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.kp__chips a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem; border: 1px solid var(--line-strong); border-radius: 999px; text-decoration: none; font-weight: 500; transition: border-color var(--t-hover) ease, color var(--t-hover) ease; }
.kp__chips a:hover { border-color: var(--blue); color: var(--blue); }
.kp__person { display: flex; align-items: center; gap: 0.75rem; }
.kp__person strong { display: block; font-weight: 650; }
.kp__sub { display: block; color: var(--muted); font-size: var(--step-small); }
@media (min-width: 64em) {
  .about__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .about__story { grid-column: 1 / span 6; grid-row: 1; }
  .kp { grid-column: 8 / -1; grid-row: 1; order: 0; }
}

/* ---------- aplikasi (bidang gelap) ---------- */
.flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.flow > * { min-width: 0; }
.flow + .flow { margin-top: clamp(4rem, 7vw, 6rem); }
.flow__about { display: grid; gap: 0.75rem; align-content: start; margin-bottom: 0.5rem; }
.flow__about p { max-width: 42ch; color: var(--muted); }
.flow__about .link-plain { color: var(--ink); }
.flow__name { font-size: var(--step-sub); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
.flow__arrow { width: 2.25rem; height: 2.25rem; justify-self: center; transform: rotate(90deg); color: #7ee0ad; }
@media (min-width: 48em) {
  .flow { grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1.15fr); column-gap: 1rem; align-items: center; }
  .flow__about { grid-column: 1 / -1; }
  .flow__arrow { transform: none; }
}
@media (min-width: 72em) {
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1fr) repeat(3, minmax(0, 1fr)) 3rem repeat(4, minmax(0, 1fr)); }
  .flow__about { grid-column: 1 / span 3; grid-row: 1; padding-right: 1rem; }
  .flow__in { grid-column: 4 / span 4; grid-row: 1; }
  .flow__arrow { grid-column: 8; grid-row: 1; }
  .flow__out { grid-column: 9 / -1; grid-row: 1; }
}

/* Potongan antarmuka (tabel Excel, editor WordPress, hasil BEC): selalu terang, warna aplikasinya sendiri. */
.ui { background: #fff; color: #1b2433; padding: 1rem; border-radius: var(--r-md); font-size: 0.9375rem; line-height: 1.5; }
.ui__label { font-size: 0.8125rem; color: #5b6576; margin-bottom: 0.6rem; }
.ui__scroll { overflow-x: auto; }
.sheet-t { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.sheet-t th, .sheet-t td { border: 1px solid #e3e6ec; padding: 0.45rem 0.6rem; text-align: left; vertical-align: top; }
.sheet-t th { font-weight: 600; background: #f6f7f9; }
.sheet-t td:first-child, .sheet-t th:first-child { width: 2.25rem; text-align: center; color: #7a8394; background: #f6f7f9; }
.sheet-t tr.is-on td:not(:first-child) { background: #eef0fb; }
.cell-sel { display: block; outline: 2px solid #2b3a8f; outline-offset: 4px; }
.draft { border: 1px solid #e3e6ec; border-radius: var(--r-sm); overflow: hidden; }
.draft > p, .draft__meta { padding-inline: 1rem; }
.draft__bar { display: flex; justify-content: space-between; align-items: center; padding-block: 0.6rem; border-bottom: 1px solid #e3e6ec; font-size: 0.8125rem; }
.draft__tag { color: #9a6a00; font-weight: 600; }
.draft__btns { display: flex; gap: 0.4rem; }
.draft__btns span { border: 1px solid #d5d9e0; padding: 0.2rem 0.6rem; border-radius: 3px; }
.draft__btns .is-dark { background: #1b2433; color: #fff; border-color: #1b2433; }
.draft__title { font-size: 1.125rem; font-weight: 700; margin-top: 0.9rem; line-height: 1.3; }
.draft > p + p { margin-top: 0.5rem; }
.draft__h { font-weight: 700; }
.draft__meta { margin-top: 0.9rem; padding-block: 0.75rem; background: #f6f7f9; border-top: 1px solid #e3e6ec; font-size: 0.8125rem; display: grid; gap: 0.35rem; }
.draft__meta div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.75rem; }
.draft__meta dt { color: #5b6576; }
.essay__task { font-size: 0.8125rem; color: #5b6576; margin-bottom: 0.6rem; }
.essay__text { font-size: 1.0625rem; line-height: 1.65; }
.essay__text mark { background: #fde9e6; color: inherit; text-decoration: underline wavy #d03b3b; text-underline-offset: 3px; }
.result__top { display: flex; align-items: baseline; gap: 0.75rem; }
.result__level { background: #1b2433; color: #fff; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 4px; }
.result__score { font-size: 0.9375rem; color: #5b6576; }
.result__score strong { font-size: 1.75rem; color: #1b2433; font-weight: 800; }
.bars { list-style: none; padding: 0; margin-top: 0.9rem; display: grid; gap: 0.45rem; }
.bars li { display: grid; grid-template-columns: 6rem 1fr 2rem; align-items: center; gap: 0.6rem; font-size: 0.875rem; }
.bars__track { height: 0.5rem; background: #edf0f3; border-radius: 99px; overflow: hidden; }
.bars__fill { display: block; height: 100%; width: var(--v); background: #0a7a48; }
.bars__n { text-align: right; font-variant-numeric: tabular-nums; }
.fixes { list-style: none; padding: 0; margin-top: 1rem; display: grid; gap: 0.35rem; font-size: 0.9375rem; }
.fixes s { color: #b0352f; text-decoration-thickness: 1px; }
.fixes span { color: #0a6b3d; font-weight: 600; }
.fixes span::before { content: "→ "; color: #7a8394; font-weight: 400; }
@media (max-width: 47.99em) {
  .sheet-t th:nth-child(3), .sheet-t td:nth-child(3) { display: none; }
  .sheet-t tbody tr:nth-child(2), .sheet-t tbody tr:nth-child(3) { display: none; }
  .draft__h, .draft__h + p { display: none; }
  .draft__meta div:last-child { display: none; }
  .flow + .flow { margin-top: 3.5rem; }
}

/* ---------- pertanyaan ---------- */
.faq__list { display: grid; gap: 2rem; }
.faq__item dt { font-size: 1.1875rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.faq__item dd { margin-top: 0.45rem; color: var(--muted); max-width: 52ch; }
@media (min-width: 52em) { .faq__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 2.5rem; } }

/* ---------- artikel ---------- */
.articles { padding-top: 0; }
.posts { display: grid; border-top: 1px solid var(--line); }
.post-hit { display: grid; gap: 0.2rem; padding-block: 1.25rem; border-bottom: 1px solid var(--line); text-decoration: none; }
.post-hit__date { font-size: var(--step-small); color: var(--muted); }
.post-hit__title { color: var(--blue); font-size: var(--step-lead); line-height: 1.3; font-weight: 500; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; transition: text-decoration-color var(--t-hover) ease; }
.post-hit:hover .post-hit__title { text-decoration-color: currentColor; }
.post-hit__desc { color: var(--muted); font-size: 0.9375rem; max-width: 70ch; }
.articles__all { margin-top: 1.75rem; }
@media (min-width: 64em) {
  .posts:not(.posts--one) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
}

/* ---------- kontak (bidang gelap) ---------- */
.contact__grid { display: grid; gap: 2.5rem; }
.contact__say { display: grid; gap: 1.25rem; align-content: start; }
.contact__say .lead { color: var(--muted); }
.contact__alt .link { color: var(--ink); text-decoration-color: var(--line-strong); }
.serp-tool {
  --paper: #ffffff; --surface: #f2f4f8; --line: #e1e6ee; --line-strong: #cdd4e0; --ink: #0e1b33; --muted: #586378; --blue: #2340b8; --green-tint: #e6f4ec;
  background: var(--paper); color: var(--ink); border-radius: var(--r-lg); padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: 1.5rem; justify-items: start;
}
.serp-tool__fields { display: grid; gap: 1rem; width: 100%; }
.serp-tool label { display: grid; gap: 0.35rem; font-size: var(--step-small); font-weight: 600; }
.field { width: 100%; min-height: 3rem; padding: 0.6rem 0.9rem; border: 1.5px solid var(--line-strong); border-radius: 10px; background: #fff; font-size: 1rem; font-weight: 400; transition: border-color var(--t-hover) ease; }
.field:hover { border-color: var(--muted); }
.field:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.serp-tool__preview { width: 100%; display: grid; gap: 0.5rem; }
.res--solo { padding-right: 1.25rem; }
.res--solo .res__desc { -webkit-line-clamp: 3; }
@media (min-width: 40em) { .serp-tool__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64em) {
  .contact__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .contact__say { grid-column: 1 / span 5; }
  .serp-tool { grid-column: 7 / -1; }
}

/* ---------- footer (menyambung bidang kontak) ---------- */
.foot { padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; border-top: 1px solid var(--line); }
.foot__grid { display: grid; gap: 2.25rem 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.foot__brand, .foot__contact, .foot__legal { grid-column: 1 / -1; }
.foot__brand { display: grid; gap: 0.5rem; align-content: start; }
.foot__brand .muted { max-width: 32ch; }
.foot__mark { font-weight: 800; font-size: var(--step-sub); letter-spacing: -0.03em; }
.foot__h { font-size: var(--step-small); font-weight: 600; color: var(--muted); margin-bottom: 0.75rem; }
.foot__col ul { list-style: none; padding: 0; }
.foot__col li + li { margin-top: 0.35rem; }
.foot__contact { display: grid; gap: 1rem; justify-items: start; align-content: start; }
.foot__contact .foot__h { margin-bottom: 0; }
.foot__legal { padding-top: 1.5rem; border-top: 1px solid var(--line); }
@media (min-width: 64em) {
  .foot__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .foot__brand { grid-column: 1 / span 4; }
  .foot__nav { grid-column: 6 / span 2; }
  .foot__social { grid-column: 8 / span 2; }
  .foot__contact { grid-column: 10 / -1; }
}

/* ---------- halaman lain ---------- */
.page-head { padding-top: clamp(3rem, 7vw, 5.5rem); margin-bottom: clamp(2rem, 5vw, 3.5rem); display: grid; gap: 1rem; }
.page-head .lead { color: var(--muted); }

/* ---------- gerak masuk per bagian (site.js memberi data-reveal) ----------
   Sekali saat masuk layar, bertahap. Hanya opacity dan transform. Tanpa skrip atau dengan
   "kurangi gerak", tidak ada yang disembunyikan. data-reveal="fade" = tanpa geser (elemen yang punya transform sendiri). */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transition: opacity 600ms var(--ease-out); transition-delay: var(--rd, 0ms); }
  .js [data-reveal]:not([data-reveal="fade"]) { transform: translateY(22px); transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: var(--rd, 0ms); }
  .js [data-reveal].is-in { opacity: 1; }
  .js [data-reveal]:not([data-reveal="fade"]).is-in { transform: none; }
  .js [data-reveal].is-instant { transition: none; }

  /* Tentang: garis waktu tergambar turun setelah titiknya muncul. */
  .js .path li[data-reveal]::after { transform-origin: top; transform: scaleY(0); transition: transform 700ms var(--ease-out); transition-delay: calc(var(--rd, 0ms) + 300ms); }
  .js .path li[data-reveal].is-in::after { transform: none; }

  /* Aplikasi: bar skor BEC terisi saat hasilnya muncul. */
  .js .flow__out[data-reveal] .bars__fill { transform-origin: left; transform: scaleX(0); transition: transform 1000ms var(--ease-out); transition-delay: calc(var(--rd, 0ms) + 350ms); }
  .js .flow__out[data-reveal].is-in .bars__fill { transform: none; }

  /* Karya: panel tab yang baru dibuka. */
  .viewer__panel.is-entering { animation: panel-in 320ms var(--ease-out); }
  .viewer__panel.is-entering .proof__n { animation: rank-in 520ms var(--ease-out); }
}
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes rank-in { from { opacity: 0; transform: scale(0.8); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}