/* Kerangka bersama situs publik Eline: /overview dan /gallery (permintaan owner
   14 Sep 2026, satu situs dua halaman). Sejak 19 Sep 2026 tata letak, ritme, dan
   animasinya mengikuti landing muse.ai atas permintaan owner, dengan identitas
   Eline sendiri (warna ungu, maskot, teks, dan ikon berlisensi terbuka). */
:root {
  color-scheme: light;
  --paper: #fcfcfc;
  --canvas: #f3f4f5;
  --canvas-2: #eceef0;
  --line: #e6e7ea;
  --line-strong: #d4d6db;
  --ink: #111112;
  --ink-2: #2a2b2e;
  --muted: #686b71;
  --subtle: #8d9096;
  --accent: #8165a8;
  --accent-hover: #6d518f;
  --accent-deep: #5d427f;
  --accent-soft: #f1ecf7;
  --night: #0f0e13;
  --night-2: #19171f;
  --night-line: #2c2935;
  --night-text: #f4f2f7;
  --night-muted: #aca7b6;
  --shell: 1280px;
  --gutter: clamp(20px, 4vw, 48px);
  --header: 60px;
  --radius-lg: 28px;
  --radius: 18px;
  --radius-sm: 12px;
  --pill: 999px;
  --shadow: 0 1px 2px rgba(13, 12, 17, 0.04), 0 12px 32px rgba(13, 12, 17, 0.08);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  font-family: "Google Sans Flex", "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-width: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
  color: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 16px;
  border-radius: var(--pill);
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-160%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.shell {
  width: 100%;
  max-width: calc(var(--shell) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-deep);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Tombol: satu tinggi per ukuran di seluruh situs. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--pill);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms var(--ease);
}

.button:active {
  transform: translateY(1px);
}

.button svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.button-lg {
  height: 52px;
  padding: 0 26px;
  font-size: 16px;
}

.button-sm {
  height: 38px;
  padding: 0 16px;
  font-size: 14px;
}

.button-block {
  width: 100%;
  max-width: 408px;
  height: 48px;
  font-size: 16px;
  font-weight: 500;
}

.button-soft {
  background: rgba(0, 0, 0, 0.05);
  color: var(--ink);
}

.button-soft:hover {
  background: rgba(0, 0, 0, 0.09);
}

.button-primary {
  background: var(--accent);
  color: #ffffff;
}

.button-primary:hover {
  background: var(--accent-hover);
}

.button-dark {
  background: var(--ink);
  color: var(--paper);
}

.button-dark:hover {
  background: var(--ink-2);
}

.button-ghost {
  border-color: var(--line-strong);
  background: var(--paper);
  color: var(--ink);
}

.button-ghost:hover {
  border-color: var(--ink);
}

.button-light {
  background: var(--paper);
  color: var(--ink);
}

.button-light:hover {
  background: var(--canvas-2);
}

.button-outline-light {
  border-color: var(--night-line);
  background: transparent;
  color: var(--night-text);
}

.button-outline-light:hover {
  border-color: var(--night-text);
}

/* Header bersama: transparan di atas, latar dan maskot tengah muncul setelah
   halaman digulir (seperti muse.ai). Tautan aktif ditandai site.js. */
.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: background-color 500ms ease-in-out, border-color 500ms ease-in-out;
}

.site-header.is-scrolled {
  border-bottom-color: var(--line);
  background: rgba(252, 252, 252, 0.9);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
}

.site-header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  height: var(--header);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.brand img {
  width: 40px;
  height: 27px;
  object-fit: contain;
}

.brand span {
  display: grid;
  line-height: 1.1;
}

.brand small {
  color: var(--subtle);
  font-size: 12px;
  font-weight: 500;
}

.header-mark {
  display: inline-flex;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}

.header-mark img {
  width: 36px;
  height: 24px;
  object-fit: contain;
}

.site-header.is-scrolled .header-mark {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--pill);
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  transition: background-color 160ms ease, color 160ms ease;
}

.site-nav a:hover {
  color: var(--ink);
}

.site-nav a[aria-current="page"] {
  background: rgba(0, 0, 0, 0.05);
  color: var(--ink);
}

.menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--pill);
  background: rgba(0, 0, 0, 0.05);
  cursor: pointer;
}

.menu-button svg {
  width: 20px;
  height: 20px;
}

/* Footer bersama: satu baris seperti muse.ai. */
.site-footer {
  padding-block: 28px 32px;
  background: var(--paper);
  color: var(--muted);
  font-size: 14px;
}

.footer-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px 24px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
}

.footer-from {
  justify-self: end;
}

.footer-from strong {
  color: var(--ink);
  font-weight: 600;
}

.footer-links a:hover,
.footer-from:hover,
.footer-credits a:hover {
  color: var(--ink);
}

.footer-credits {
  margin-top: 16px;
  color: var(--subtle);
  font-size: 12px;
  text-align: center;
}

.footer-credits a {
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

/* Muncul saat terlihat. Tanpa JavaScript semuanya tetap tampil. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 920px) {
  .menu-button {
    display: inline-flex;
  }

  .site-nav {
    position: absolute;
    top: calc(var(--header) - 4px);
    right: var(--gutter);
    left: var(--gutter);
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--shadow);
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav a {
    height: 48px;
    font-size: 16px;
  }

  .footer-row {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .footer-from {
    justify-self: center;
  }
}

@media (max-width: 560px) {
  .brand small {
    display: none;
  }

  .header-actions .button-primary {
    height: 40px;
    padding: 0 14px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}