/* ============================================================================
   Kunciloka — Estilo Material AI
   Design tokens follow design.txt: vibrant Material palette, Roboto type,
   8/16/24 radii, subtle elevation, ease-out motion at 200–420ms.
   ========================================================================== */

:root {
  /* Brand */
  --blue: #4285f4;
  --blue-600: #3b78dd;
  --blue-700: #2f66c4;
  --red: #ea4335;
  --yellow: #fbbc05;
  --green: #34a853;
  --cyan: #00bcd4;

  /* Surfaces (light) */
  --bg: #f8f9fa;
  --surface: #ffffff;
  --surface-2: #f1f3f4;
  --surface-3: #e8eaed;
  --border: #e3e6ea;
  --border-strong: #d2d6db;

  /* Text */
  --text: #202124;
  --text-2: #3c4043;
  --text-3: #5f6368;
  --text-4: #80868b;
  --on-accent: #ffffff;

  /* Ink: surfaces that stay dark in BOTH themes (topbar, footer, toasts).
     Never derive these from --text — that token inverts in dark mode. */
  --ink: #1c1f23;
  --ink-2: #16181c;
  --on-ink: rgba(255, 255, 255, 0.74);
  --on-ink-strong: #ffffff;
  --ink-border: rgba(255, 255, 255, 0.1);
  --ink-hover: rgba(255, 255, 255, 0.07);

  /* Semantic */
  --primary: var(--blue);
  --primary-soft: rgba(66, 133, 244, 0.1);
  --danger: var(--red);
  --danger-soft: rgba(234, 67, 53, 0.1);
  --warning: var(--yellow);
  --warning-soft: rgba(251, 188, 5, 0.14);
  --success: var(--green);
  --success-soft: rgba(52, 168, 83, 0.12);

  /* Shape */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* Elevation */
  --e-1: 0 1px 2px rgba(60, 64, 67, 0.08), 0 1px 3px rgba(60, 64, 67, 0.06);
  --e-2: 0 2px 12px rgba(60, 64, 67, 0.08);
  --e-3: 0 6px 20px rgba(60, 64, 67, 0.12);
  --e-4: 0 14px 38px rgba(60, 64, 67, 0.16);

  /* Rhythm */
  --sp: 0.5rem;
  --container: 1280px;
  --gutter: 1.5rem;
  --section: clamp(4rem, 8vw, 8rem);

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --fast: 200ms;
  --normal: 300ms;
  --slow: 420ms;

  /* Layers */
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 500;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #16181c;
    --surface: #1e2125;
    --surface-2: #24272c;
    --surface-3: #2d3136;
    --border: #32363c;
    --border-strong: #43484f;
    --text: #e8eaed;
    --text-2: #d3d6da;
    --text-3: #a3a8af;
    --text-4: #868b92;
    --primary-soft: rgba(66, 133, 244, 0.18);
    --danger-soft: rgba(234, 67, 53, 0.18);
    --warning-soft: rgba(251, 188, 5, 0.18);
    --success-soft: rgba(52, 168, 83, 0.18);
    --e-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --e-2: 0 2px 12px rgba(0, 0, 0, 0.42);
    --e-3: 0 6px 20px rgba(0, 0, 0, 0.5);
    --e-4: 0 14px 38px rgba(0, 0, 0, 0.58);
    --ink: #101216;
    --ink-2: #0c0e11;
    --ink-border: rgba(255, 255, 255, 0.08);
    color-scheme: dark;
  }
}

[data-theme='dark'] {
  --bg: #16181c;
  --surface: #1e2125;
  --surface-2: #24272c;
  --surface-3: #2d3136;
  --border: #32363c;
  --border-strong: #43484f;
  --text: #e8eaed;
  --text-2: #d3d6da;
  --text-3: #a3a8af;
  --text-4: #868b92;
  --primary-soft: rgba(66, 133, 244, 0.18);
  --danger-soft: rgba(234, 67, 53, 0.18);
  --warning-soft: rgba(251, 188, 5, 0.18);
  --success-soft: rgba(52, 168, 83, 0.18);
  --e-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --e-2: 0 2px 12px rgba(0, 0, 0, 0.42);
  --e-3: 0 6px 20px rgba(0, 0, 0, 0.5);
  --e-4: 0 14px 38px rgba(0, 0, 0, 0.58);
  --ink: #101216;
  --ink-2: #0c0e11;
  --ink-border: rgba(255, 255, 255, 0.08);
  color-scheme: dark;
}

/* --------------------------------- reset -------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: Roboto, 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--fast) var(--ease);
}

a:hover {
  color: var(--blue-700);
}

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

h1,
h2,
h3,
h4,
h5 {
  margin: 0 0 0.5em;
  line-height: 1.22;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: var(--text);
}

h1 {
  font-size: 2.25rem;
}
h2 {
  font-size: 1.5rem;
}
h3 {
  font-size: 1.125rem;
}

p {
  margin: 0 0 1em;
}

small,
.text-sm {
  font-size: 0.875rem;
}

code,
kbd,
.mono {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.875em;
}

::selection {
  background: var(--primary-soft);
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------- layout --------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-narrow {
  max-width: 780px;
}

.section {
  padding-block: clamp(3rem, 6vw, 5.5rem);
}

.section-tight {
  padding-block: clamp(2rem, 4vw, 3rem);
}

.stack > * + * {
  margin-top: var(--flow, 1rem);
}

.row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.grid {
  display: grid;
  gap: 1.5rem;
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.muted {
  color: var(--text-3);
}

.text-center {
  text-align: center;
}

.hide {
  display: none !important;
}

.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;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.section-head h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 0.25rem;
}

.section-head p {
  margin: 0;
  color: var(--text-3);
  max-width: 62ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.75rem;
}

/* ------------------------------- buttons -------------------------------- */

.btn {
  --btn-bg: var(--primary);
  --btn-fg: var(--on-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--fast) var(--ease), box-shadow var(--fast) var(--ease),
    transform var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.btn:hover {
  background: var(--blue-600);
  color: var(--btn-fg);
  box-shadow: var(--e-2);
}

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

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.55;
  pointer-events: none;
}

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--primary);
  border-color: var(--border-strong);
}

.btn-ghost:hover {
  background: var(--primary-soft);
  color: var(--primary);
  box-shadow: none;
  border-color: var(--primary);
}

.btn-subtle {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text-2);
}

.btn-subtle:hover {
  background: var(--surface-3);
  color: var(--text);
}

.btn-danger {
  --btn-bg: var(--danger);
}

.btn-danger:hover {
  background: #d33426;
}

.btn-success {
  --btn-bg: var(--success);
}

.btn-success:hover {
  background: #2d9247;
}

.btn-sm {
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
}

.btn-lg {
  padding: 0.9375rem 1.75rem;
  font-size: 1rem;
}

.btn-block {
  width: 100%;
}

.btn-icon {
  padding: 0.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-sm);
}

.icon {
  /* The generic `svg { display: block }` reset (near the top of this file)
     makes every inline icon a block box, which forces a line break before
     the text that follows it inside a plain <a>/<span> — icon on one line,
     label on the next. Components that already lay out via flex/grid
     (.btn, .dropdown-menu a, .side-nav a, .icon-wrap …) are unaffected
     since a flex/grid item's own `display` doesn't control its layout —
     but any bare "<a><icon/> text</a>" pattern outside those components
     inherits the block reset and breaks. inline-block here fixes that
     pattern everywhere at once, and the negative vertical-align nudges the
     icon back onto the text baseline instead of sitting a few px too high. */
  display: inline-block;
  vertical-align: -0.15em;
  width: 1.125em;
  height: 1.125em;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-lg {
  width: 1.5rem;
  height: 1.5rem;
}

/* -------------------------------- badges -------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.badge-primary {
  background: var(--primary-soft);
  color: var(--primary);
}
.badge-success {
  background: var(--success-soft);
  color: var(--success);
}
.badge-warning {
  background: var(--warning-soft);
  color: #a17c00;
}
.badge-danger {
  background: var(--danger-soft);
  color: var(--danger);
}
.badge-vip {
  background: linear-gradient(120deg, var(--yellow), #f59f00);
  color: #3c2f00;
  font-weight: 700;
}

[data-theme='dark'] .badge-warning {
  color: var(--yellow);
}

/* -------------------------------- cards --------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--e-1);
}

.card-pad {
  padding: 1.5rem;
}

.card-hover {
  transition: transform var(--normal) var(--ease), box-shadow var(--normal) var(--ease),
    border-color var(--normal) var(--ease);
}

.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--e-3);
  border-color: var(--border-strong);
}

/* -------------------------------- forms --------------------------------- */

.field {
  display: block;
  margin-bottom: 1.125rem;
}

.field > label,
.label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: 0.01em;
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 0.6875rem 0.875rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-4);
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary-soft);
}

.textarea {
  min-height: 8rem;
  resize: vertical;
}

.select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.25rem;
}

.field-error {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--danger);
}

.field-hint {
  margin-top: 0.375rem;
  font-size: 0.8125rem;
  color: var(--text-3);
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  cursor: pointer;
  font-size: 0.9375rem;
}

.check input {
  margin: 0.25rem 0 0;
  accent-color: var(--primary);
  width: 1rem;
  height: 1rem;
  flex: none;
}

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.875rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 0.875rem;
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--fast) var(--ease);
}

.chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.chip:has(input:checked) {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 500;
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
}

.switch input {
  appearance: none;
  width: 2.5rem;
  height: 1.375rem;
  border-radius: var(--r-pill);
  background: var(--border-strong);
  position: relative;
  cursor: pointer;
  transition: background var(--fast) var(--ease);
  flex: none;
}

.switch input::after {
  content: '';
  position: absolute;
  inset: 3px auto 3px 3px;
  width: 1rem;
  border-radius: 50%;
  background: #fff;
  transition: transform var(--fast) var(--ease);
}

.switch input:checked {
  background: var(--primary);
}

.switch input:checked::after {
  transform: translateX(1.125rem);
}

/* -------------------------------- alerts -------------------------------- */

.alert {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.875rem 1rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 0.9375rem;
  margin-bottom: 1.25rem;
}

.alert-success {
  background: var(--success-soft);
  border-color: rgba(52, 168, 83, 0.3);
  color: #1e7e37;
}
.alert-error {
  background: var(--danger-soft);
  border-color: rgba(234, 67, 53, 0.3);
  color: #c5271a;
}
.alert-warning {
  background: var(--warning-soft);
  border-color: rgba(251, 188, 5, 0.35);
  color: #8a6a00;
}
.alert-info {
  background: var(--primary-soft);
  border-color: rgba(66, 133, 244, 0.3);
  color: var(--blue-700);
}

[data-theme='dark'] .alert-success {
  color: #7ddb9b;
}
[data-theme='dark'] .alert-error {
  color: #ff9c92;
}
[data-theme='dark'] .alert-warning {
  color: var(--yellow);
}
[data-theme='dark'] .alert-info {
  color: #9fc2ff;
}

/* ------------------------------- topbar --------------------------------- */

.topbar {
  background: var(--ink-2);
  color: var(--on-ink);
  font-size: 0.8125rem;
  border-bottom: 1px solid var(--ink-border);
}

.topbar a {
  color: var(--on-ink);
  transition: color var(--fast) var(--ease);
}

.topbar a:hover {
  color: var(--on-ink-strong);
}

.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.5rem;
  flex-wrap: nowrap;
  /* No overflow rule here: the CSS overflow spec forces overflow-y's
     computed value to `auto` the moment overflow-x is anything but
     `visible`, even if overflow-y itself is never touched. That silently
     turned this element into a clipping/scroll container, which cut off
     the language/currency `.dropdown-menu` popovers below it — they never
     stopped opening, they were just clipped invisible. The horizontal
     scroll safety-net now lives on `.topbar-links` alone (see below),
     which has no absolutely-positioned popup depending on it. */
}

.topbar-links {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  /* Allowed to shrink (and, once shrunk, scroll horizontally) instead of
     forcing the whole topbar to overflow — this is the element with long
     phone/email text that actually needs the safety net between the
     760px breakpoint (where it's hidden outright) and full width. */
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}

.topbar-links::-webkit-scrollbar {
  display: none;
}

/* The language/currency dropdown group must never shrink or sit inside a
   clipping box — that's what breaks the popovers. */
.topbar .row {
  flex: none;
}

.topbar-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* ------------------------------- header --------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--fast) var(--ease);
}

.site-header.is-stuck {
  box-shadow: var(--e-2);
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 700;
  font-size: 1.1875rem;
  color: var(--text);
  letter-spacing: -0.02em;
}

.brand:hover {
  color: var(--text);
}

.brand img {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
}

/* Tombol "Lanjutkan dengan Google" (pedoman merek Google: putih/abu gelap, logo G penuh warna). */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem 1rem;
  border: 1px solid #747775;
  border-radius: 999px;
  background: #FFFFFF;
  color: #1F1F1F;
  font-family: Roboto, system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.btn-google:hover {
  background: #F8F9FA;
  color: #1F1F1F;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3);
}

.btn-google:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

[data-theme="dark"] .btn-google {
  background: #131314;
  border-color: #8E918F;
  color: #E3E3E3;
}

[data-theme="dark"] .btn-google:hover {
  background: #1F1F20;
  color: #E3E3E3;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-google {
    background: #131314;
    border-color: #8E918F;
    color: #E3E3E3;
  }
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.125rem 0;
  color: var(--text-3, #5F6368);
  font-size: 0.8125rem;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Nama merek: Plus Jakarta Sans ExtraBold seperti logo; 'loka' bergradien merah-oranye-kuning. */
.brand-name {
  font-family: 'Plus Jakarta Sans', var(--font-sans, Roboto), system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.brand-accent {
  background: linear-gradient(90deg, #E63B2E 0%, #F47B2A 55%, #FDBB12 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-inline-start: auto;
}

.main-nav a {
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: 0.9375rem;
  font-weight: 500;
  position: relative;
}

.main-nav a:hover {
  background: var(--surface-2);
  color: var(--text);
}

.main-nav a.is-active {
  color: var(--primary);
}

.main-nav a.is-active::after {
  content: '';
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.125rem;
  height: 2px;
  border-radius: 2px;
  background: var(--primary);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  padding: 0.5rem;
  cursor: pointer;
  color: var(--text-2);
}

/* dropdown */

.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 13rem;
  padding: 0.375rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--e-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease),
    visibility var(--fast) var(--ease);
  z-index: var(--z-overlay);
}

.dropdown.is-open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu a,
.dropdown-menu button {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text-2);
  font-size: 0.9375rem;
  text-align: start;
  cursor: pointer;
}

.dropdown-menu a:hover,
.dropdown-menu button:hover {
  background: var(--surface-2);
  color: var(--text);
}

.dropdown-menu .divider {
  height: 1px;
  margin: 0.375rem 0.25rem;
  background: var(--border);
}

.dropdown-menu .menu-label {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-4);
}

.avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--primary-soft);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
  flex: none;
}

.avatar-lg {
  width: 4rem;
  height: 4rem;
  font-size: 1.25rem;
}

.credit-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--warning-soft);
  color: #8a6a00;
  font-size: 0.8125rem;
  font-weight: 600;
}

[data-theme='dark'] .credit-pill {
  color: var(--yellow);
}

/* --------------------------------- hero --------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.hero::before {
  content: '';
  position: absolute;
  inset: -30% -10% auto auto;
  width: 46rem;
  height: 46rem;
  background: radial-gradient(circle at 30% 30%, rgba(66, 133, 244, 0.18), transparent 62%),
    radial-gradient(circle at 70% 60%, rgba(0, 188, 212, 0.14), transparent 60%);
  filter: blur(6px);
  pointer-events: none;
}

.hero .container {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 6rem);
}

.hero h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
}

.hero .lead {
  font-size: 1.0625rem;
  color: var(--text-3);
  max-width: 56ch;
  margin-bottom: 2rem;
}

.hero-stats {
  display: flex;
  gap: 2.5rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}

.hero-stats .value {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.hero-stats .label {
  font-size: 0.8125rem;
  color: var(--text-3);
}

.hero-visual {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--e-4);
  aspect-ratio: 4 / 3.4;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
}

.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-float {
  position: absolute;
  padding: 0.875rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--e-3);
  font-size: 0.8125rem;
  animation: float 6s var(--ease) infinite;
}

.hero-float strong {
  display: block;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.hero-float.pos-1 {
  left: -1rem;
  bottom: 12%;
}

.hero-float.pos-2 {
  right: -0.5rem;
  top: 10%;
  animation-delay: -3s;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* ------------------------------ searchbar ------------------------------- */

.searchbar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--e-2);
  padding: 0.75rem;
}

.searchbar-tabs {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--surface-2);
  border-radius: var(--r-pill);
  margin-bottom: 0.75rem;
}

.searchbar-tabs button {
  padding: 0.4375rem 1rem;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--text-3);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--fast) var(--ease);
}

.searchbar-tabs button.is-active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--e-1);
}

.searchbar-fields {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr auto;
  gap: 0.5rem;
}

.searchbar-fields .input,
.searchbar-fields .select {
  border-color: transparent;
  background: var(--surface-2);
}

.searchbar-fields .input:focus,
.searchbar-fields .select:focus {
  background: var(--surface);
  border-color: var(--primary);
}

/* ---------------------------- property card ----------------------------- */

.pcard {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--e-1);
  transition: transform var(--normal) var(--ease), box-shadow var(--normal) var(--ease);
}

.pcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--e-3);
}

.pcard-media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--surface-2);
}

.pcard-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--slow) var(--ease);
}

.pcard:hover .pcard-media img {
  transform: scale(1.05);
}

.pcard-tags {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
  max-width: calc(100% - 4.5rem);
}

.pcard-tags .badge {
  background: rgba(32, 33, 36, 0.72);
  color: #fff;
  backdrop-filter: blur(6px);
}

.pcard-tags .badge-vip {
  background: linear-gradient(120deg, var(--yellow), #f59f00);
  color: #3c2f00;
}

.pcard-actions {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.icon-btn {
  width: 2.125rem;
  height: 2.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-2);
  cursor: pointer;
  box-shadow: var(--e-1);
  transition: all var(--fast) var(--ease);
}

.icon-btn:hover {
  background: #fff;
  color: var(--primary);
  transform: scale(1.06);
}

.icon-btn.is-active {
  background: var(--danger);
  color: #fff;
}

.icon-btn.is-active .icon {
  fill: currentColor;
}

.pcard-price {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  padding: 0.4375rem 0.75rem;
  border-radius: var(--r-sm);
  background: rgba(32, 33, 36, 0.78);
  backdrop-filter: blur(6px);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.pcard-price span {
  font-weight: 400;
  font-size: 0.8125rem;
  opacity: 0.85;
}

.pcard-body {
  padding: 1rem 1.125rem 1.125rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.pcard-body h3 {
  font-size: 1.0625rem;
  margin-bottom: 0.375rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}

.pcard-body h3 a {
  color: var(--text);
}

.pcard-body h3 a:hover {
  color: var(--primary);
}

.pcard-location {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--text-3);
  font-size: 0.875rem;
  margin-bottom: 0.875rem;
}

.pcard-specs {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 0.875rem;
  margin-top: auto;
  border-top: 1px solid var(--border);
  color: var(--text-3);
  font-size: 0.875rem;
}

.pcard-specs span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.pcard-foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.125rem;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 0.8125rem;
  color: var(--text-3);
}

.pcard-foot .avatar {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.75rem;
}

/* horizontal variant used on list view */

.pcard-h {
  display: grid;
  grid-template-columns: 20rem 1fr;
}

.pcard-h .pcard-media {
  aspect-ratio: auto;
  height: 100%;
  min-height: 14rem;
}

/* ------------------------------ categories ------------------------------ */

.cat-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.375rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  box-shadow: var(--e-1);
  transition: all var(--normal) var(--ease);
}

.cat-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--e-3);
  border-color: var(--primary);
  color: var(--text);
}

.cat-tile .tile-icon {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--primary-soft);
  color: var(--primary);
}

.cat-tile .name {
  font-weight: 600;
}

.cat-tile .count {
  font-size: 0.8125rem;
  color: var(--text-3);
}

.city-tile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-md);
  overflow: hidden;
  color: #fff;
  box-shadow: var(--e-2);
}

.city-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--slow) var(--ease);
}

.city-tile:hover img {
  transform: scale(1.06);
}

.city-tile .overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.25rem 1rem 1rem;
  background: linear-gradient(transparent, rgba(32, 33, 36, 0.82));
}

.city-tile .overlay strong {
  display: block;
  font-size: 1.0625rem;
}

.city-tile .overlay span {
  font-size: 0.8125rem;
  opacity: 0.85;
}

.city-tile:hover {
  color: #fff;
}

/* -------------------------------- filters ------------------------------- */

.layout-sidebar {
  display: grid;
  grid-template-columns: 19rem 1fr;
  gap: 2rem;
  align-items: start;
}

.filter-panel {
  position: sticky;
  top: 5.25rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--e-1);
  max-height: calc(100dvh - 7rem);
  overflow-y: auto;
}

.filter-group {
  padding-bottom: 1.125rem;
  margin-bottom: 1.125rem;
  border-bottom: 1px solid var(--border);
}

.filter-group:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.filter-group > h4 {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-4);
  margin-bottom: 0.75rem;
  font-weight: 500;
}

.range-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.875rem 1.125rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 1.5rem;
}

.view-toggle {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.view-toggle a {
  padding: 0.4375rem 0.625rem;
  color: var(--text-3);
  display: inline-flex;
}

.view-toggle a.is-active {
  background: var(--primary-soft);
  color: var(--primary);
}

/* ------------------------------ pagination ------------------------------ */

.pagination {
  display: flex;
  justify-content: center;
  gap: 0.375rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}

.pagination a,
.pagination span {
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: 0.625rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.9375rem;
  transition: all var(--fast) var(--ease);
}

.pagination a:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.pagination .is-current {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}

.pagination .is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* --------------------------- property detail ---------------------------- */

.gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0.5rem;
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 2rem;
}

.gallery-main {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
}

.gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-side {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  gap: 0.5rem;
}

.gallery-side > * {
  position: relative;
  background: var(--surface-2);
  overflow: hidden;
}

.gallery-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-more {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(32, 33, 36, 0.6);
  color: #fff;
  font-weight: 600;
  font-size: 1.125rem;
}

.detail-layout {
  display: grid;
  grid-template-columns: 1fr 22rem;
  gap: 2rem;
  align-items: start;
}

.detail-block {
  padding: 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 1.5rem;
}

.detail-block > h2 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1rem;
}

.spec-item {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.875rem;
  background: var(--surface-2);
  border-radius: var(--r-sm);
}

.spec-item .icon-wrap {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--primary);
  flex: none;
}

.spec-item .k {
  font-size: 0.75rem;
  color: var(--text-3);
  display: block;
}

.spec-item .v {
  font-weight: 600;
  font-size: 0.9375rem;
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.625rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--text-2);
}

.feature-list .icon {
  color: var(--success);
}

.facility-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px dashed var(--border);
}

.facility-row:last-child {
  border-bottom: 0;
}

.facility-row .distance {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8125rem;
  color: var(--text-3);
}

.sticky-side {
  position: sticky;
  top: 5.25rem;
}

.agent-card {
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--e-2);
}

.price-tag {
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text);
  line-height: 1.15;
}

.price-tag span {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--text-3);
}

.map-canvas {
  height: 24rem;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
  z-index: 0;
}

.map-full {
  height: calc(100dvh - 4.25rem);
  border-radius: 0;
  border: 0;
}

.leaflet-container {
  font: inherit;
  background: var(--surface-2);
}

.pin-price {
  background: var(--primary);
  color: #fff;
  padding: 0.25rem 0.5rem;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--e-2);
  border: 2px solid #fff;
}

.pin-price.is-rent {
  background: var(--green);
}

.map-popup {
  width: 15rem;
}

.map-popup img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--r-sm);
  margin-bottom: 0.5rem;
}

.leaflet-popup-content-wrapper {
  border-radius: var(--r-md);
}

.leaflet-popup-content {
  margin: 0.75rem;
}

/* ------------------------------ calculator ------------------------------ */

.calc-result {
  padding: 1.25rem;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--primary), var(--cyan));
  color: #fff;
  margin-bottom: 1.25rem;
}

.calc-result .amount {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.calc-result .label {
  font-size: 0.8125rem;
  opacity: 0.9;
}

.calc-breakdown {
  display: grid;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.calc-breakdown div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.calc-breakdown .v {
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}

/* -------------------------------- stars --------------------------------- */

.stars {
  display: inline-flex;
  gap: 0.125rem;
  color: var(--yellow);
}

.stars .icon {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  stroke: none;
}

.stars .is-empty {
  color: var(--border-strong);
}

.rating-input {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 0.25rem;
}

.rating-input input {
  position: absolute;
  opacity: 0;
}

.rating-input label {
  cursor: pointer;
  color: var(--border-strong);
  transition: color var(--fast) var(--ease);
}

.rating-input label .icon {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
  stroke: none;
}

.rating-input input:checked ~ label,
.rating-input label:hover,
.rating-input label:hover ~ label {
  color: var(--yellow);
}

/* ------------------------------ dashboard ------------------------------- */

.shell {
  display: grid;
  grid-template-columns: 16.5rem 1fr;
  min-height: calc(100dvh - 4.25rem);
}

.shell-side {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 1.25rem 1rem;
  position: sticky;
  top: 4.25rem;
  height: calc(100dvh - 4.25rem);
  overflow-y: auto;
}

.shell-main {
  padding: 1.75rem var(--gutter) 4rem;
  min-width: 0;
}

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.side-nav .group-label {
  padding: 1rem 0.75rem 0.375rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-4);
  font-weight: 500;
}

.side-nav a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5625rem 0.75rem;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: 0.9375rem;
  font-weight: 500;
}

.side-nav a:hover {
  background: var(--surface-2);
  color: var(--text);
}

.side-nav a.is-active {
  background: var(--primary-soft);
  color: var(--primary);
}

.side-nav .count {
  margin-inline-start: auto;
  font-size: 0.75rem;
  padding: 0.0625rem 0.4375rem;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-3);
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}

.page-head h1 {
  font-size: 1.625rem;
  margin-bottom: 0.125rem;
}

.page-head p {
  margin: 0;
  color: var(--text-3);
  font-size: 0.9375rem;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.stat {
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--e-1);
}

.stat .head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
}

.stat .head span {
  font-size: 0.8125rem;
  color: var(--text-3);
}

.stat .head .icon-wrap {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--primary-soft);
  color: var(--primary);
}

.stat .value {
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.stat .delta {
  font-size: 0.8125rem;
  color: var(--text-3);
  margin-top: 0.25rem;
}

.stat.accent-green .icon-wrap {
  background: var(--success-soft);
  color: var(--success);
}
.stat.accent-yellow .icon-wrap {
  background: var(--warning-soft);
  color: #a17c00;
}
.stat.accent-red .icon-wrap {
  background: var(--danger-soft);
  color: var(--danger);
}
.stat.accent-cyan .icon-wrap {
  background: rgba(0, 188, 212, 0.12);
  color: var(--cyan);
}

/* -------------------------------- tables -------------------------------- */

.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow-x: auto;
}

table.data {
  width: 100%;
  border-collapse: collapse;
  min-width: 44rem;
}

table.data th,
table.data td {
  padding: 0.875rem 1rem;
  text-align: start;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

table.data th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-4);
  font-weight: 500;
  background: var(--surface-2);
  white-space: nowrap;
}

table.data tbody tr:last-child td {
  border-bottom: 0;
}

table.data tbody tr:hover {
  background: var(--surface-2);
}

table.data .cell-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 16rem;
}

table.data .cell-main img {
  width: 3.5rem;
  height: 2.75rem;
  object-fit: cover;
  border-radius: var(--r-sm);
  flex: none;
}

table.data .cell-main strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
}

.actions-cell {
  display: flex;
  gap: 0.25rem;
  justify-content: flex-end;
}

/* ------------------------------ empty state ----------------------------- */

.empty {
  padding: 3.5rem 1.5rem;
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
}

.empty .icon-wrap {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text-4);
}

.empty h3 {
  font-size: 1.125rem;
  margin-bottom: 0.375rem;
}

.empty p {
  color: var(--text-3);
  max-width: 46ch;
  margin: 0 auto 1.25rem;
}

/* ------------------------------- skeleton ------------------------------- */

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
  border-radius: var(--r-sm);
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  animation: shimmer 1.4s infinite;
}

[data-theme='dark'] .skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* ------------------------------- packages ------------------------------- */

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--e-1);
  transition: all var(--normal) var(--ease);
}

.plan:hover {
  transform: translateY(-4px);
  box-shadow: var(--e-3);
}

.plan.is-popular {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), var(--e-3);
}

.plan .ribbon {
  position: absolute;
  top: -0.75rem;
  inset-inline-end: 1.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}

.plan .amount {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0.75rem 0 0.25rem;
}

.plan ul {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0;
  display: grid;
  gap: 0.625rem;
  flex: 1;
}

.plan li {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.9375rem;
  color: var(--text-2);
}

.plan li .icon {
  color: var(--success);
  margin-top: 0.2em;
}

/* -------------------------------- footer -------------------------------- */

.site-footer {
  position: relative;
  margin-top: auto;
  background: var(--ink);
  color: var(--on-ink);
  padding-top: 3.5rem;
  overflow: hidden;
}

/* Hairline of brand colour along the top edge of the footer. */
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--blue) 20%,
    var(--cyan) 50%,
    var(--green) 80%,
    transparent
  );
  opacity: 0.55;
}

.site-footer h4 {
  color: var(--on-ink-strong);
  font-size: 0.9375rem;
  margin-bottom: 1rem;
}

.site-footer a {
  color: var(--on-ink);
  font-size: 0.9375rem;
}

.site-footer a:hover {
  color: var(--on-ink-strong);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}

.footer-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.625rem;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--on-ink-strong);
  font-weight: 700;
  font-size: 1.1875rem;
  margin-bottom: 1rem;
}

.footer-brand img {
  width: 2.25rem;
  height: 2.25rem;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.25rem 0;
  border-top: 1px solid var(--ink-border);
  font-size: 0.875rem;
}

.social-row {
  display: flex;
  gap: 0.5rem;
}

.social-row a {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink-hover);
  border: 1px solid var(--ink-border);
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease),
    border-color var(--fast) var(--ease);
}

.social-row a:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-ink-strong);
  transform: translateY(-2px);
}

/* ------------------------------ compare bar ----------------------------- */

.compare-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-overlay);
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px rgba(60, 64, 67, 0.14);
  transform: translateY(110%);
  transition: transform var(--normal) var(--ease);
}

.compare-bar.is-open {
  transform: translateY(0);
}

.compare-bar .container {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 0.875rem;
  flex-wrap: wrap;
}

.compare-items {
  display: flex;
  gap: 0.5rem;
  flex: 1;
  flex-wrap: wrap;
}

.compare-thumb {
  position: relative;
  width: 4rem;
  height: 3rem;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--border);
}

.compare-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.compare-thumb button {
  position: absolute;
  top: 0.125rem;
  right: 0.125rem;
  width: 1.125rem;
  height: 1.125rem;
  border: 0;
  border-radius: 50%;
  background: rgba(32, 33, 36, 0.8);
  color: #fff;
  font-size: 0.6875rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.compare-table th:first-child {
  position: sticky;
  left: 0;
  background: var(--surface-2);
  z-index: 1;
}

/* -------------------------------- toast --------------------------------- */

.toast-host {
  position: fixed;
  inset: auto 1rem 1rem auto;
  z-index: var(--z-toast);
  display: grid;
  gap: 0.5rem;
  max-width: 22rem;
}

.toast {
  padding: 0.875rem 1rem;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--on-ink-strong);
  border: 1px solid var(--ink-border);
  box-shadow: var(--e-4);
  font-size: 0.9375rem;
  animation: toast-in var(--normal) var(--ease);
}

.toast.is-success {
  background: var(--success);
}
.toast.is-error {
  background: var(--danger);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* ------------------------------- animation ------------------------------ */

.reveal.is-in {
  animation: reveal var(--slow) var(--ease) forwards;
}

@keyframes reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ai-shimmer {
  background: linear-gradient(100deg, var(--primary), var(--cyan), var(--green), var(--primary));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ai-pan 6s linear infinite;
}

@keyframes ai-pan {
  to {
    background-position: 300% 0;
  }
}

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

/* ------------------------------ responsive ------------------------------ */

@media (max-width: 1080px) {
  .layout-sidebar,
  .detail-layout {
    grid-template-columns: 1fr;
  }
  .filter-panel,
  .sticky-side {
    position: static;
    max-height: none;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .shell {
    grid-template-columns: 1fr;
  }
  .shell-side {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .side-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .side-nav .group-label {
    display: none;
  }
}

@media (max-width: 860px) {
  .hero .container {
    grid-template-columns: 1fr;
  }
  .hero-visual {
    order: -1;
    aspect-ratio: 16 / 10;
  }
  .hero-float {
    display: none;
  }
  .searchbar-fields {
    grid-template-columns: 1fr 1fr;
  }
  .searchbar-fields .btn {
    grid-column: 1 / -1;
  }
  .gallery {
    grid-template-columns: 1fr;
  }
  .gallery-side {
    grid-template-rows: none;
    grid-template-columns: 1fr 1fr;
  }
  .pcard-h {
    grid-template-columns: 1fr;
  }
  .pcard-h .pcard-media {
    aspect-ratio: 16 / 10;
    min-height: 0;
  }
}

@media (max-width: 760px) {
  .nav-toggle {
    display: inline-flex;
  }
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.125rem;
    padding: 0.75rem var(--gutter) 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--e-3);
    display: none;
  }
  .main-nav.is-open {
    display: flex;
  }
  .main-nav a.is-active::after {
    display: none;
  }
  .site-header .container {
    position: relative;
    flex-wrap: wrap;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .topbar-links {
    display: none;
  }
  .searchbar-fields {
    grid-template-columns: 1fr;
  }
  .hero-stats {
    gap: 1.5rem;
  }
}

@media print {
  .site-header,
  .site-footer,
  .compare-bar,
  .btn {
    display: none !important;
  }
}

/* ------------------------------ auth screens ----------------------------- */

.auth-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100dvh - 6.75rem);
}

.auth-aside {
  position: relative;
  padding: clamp(2rem, 5vw, 4rem);
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.auth-aside h2 {
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 20ch;
}

.auth-aside ul {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  gap: 0.875rem;
  max-width: 40ch;
}

.auth-aside li {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  font-size: 0.9375rem;
  opacity: 0.94;
}

.auth-main {
  display: grid;
  place-items: center;
  padding: clamp(2rem, 5vw, 4rem) var(--gutter);
}

.auth-card {
  width: 100%;
  max-width: 26rem;
}

.auth-card h1 {
  font-size: 1.625rem;
}

.hide-sm {
  display: inline-flex;
}

@media (max-width: 900px) {
  .auth-wrap {
    grid-template-columns: 1fr;
  }
  .auth-aside {
    display: none;
  }
  .hide-sm {
    display: none;
  }
}

/* ============================================================================
   MOTION LAYER
   Depth, glass, and scroll-driven animation. Everything animates transform and
   opacity only, and the whole layer collapses under prefers-reduced-motion.
   ========================================================================== */

/* --------------------------- scroll progress ---------------------------- */

.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: calc(var(--z-nav) + 5);
  background: linear-gradient(90deg, var(--blue), var(--cyan), var(--green));
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
  pointer-events: none;
}

/* ------------------------------ glass nav -------------------------------- */

.site-header {
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  transition: box-shadow var(--normal) var(--ease), background var(--normal) var(--ease);
}

.site-header.is-stuck {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--e-2);
}

/* Nav underline grows from the centre instead of appearing all at once. */
.main-nav a::after {
  content: '';
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.125rem;
  height: 2px;
  border-radius: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: 50%;
  transition: transform var(--normal) var(--ease);
}

.main-nav a:hover::after,
.main-nav a.is-active::after {
  transform: scaleX(1);
}

/* ------------------------------ hero aurora ------------------------------ */

.hero {
  isolation: isolate;
}

.aurora {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 130%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.aurora span {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  will-change: transform;
}

.aurora span:nth-child(1) {
  width: 34rem;
  height: 34rem;
  top: -6rem;
  right: 4%;
  background: radial-gradient(circle, rgba(66, 133, 244, 0.55), transparent 68%);
  animation: drift-a 22s var(--ease) infinite alternate;
}

.aurora span:nth-child(2) {
  width: 26rem;
  height: 26rem;
  top: 32%;
  right: 28%;
  background: radial-gradient(circle, rgba(0, 188, 212, 0.45), transparent 68%);
  animation: drift-b 26s var(--ease) infinite alternate;
}

.aurora span:nth-child(3) {
  width: 22rem;
  height: 22rem;
  bottom: -4rem;
  left: 8%;
  background: radial-gradient(circle, rgba(52, 168, 83, 0.32), transparent 68%);
  animation: drift-c 30s var(--ease) infinite alternate;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .aurora span {
    opacity: 0.34;
  }
}

[data-theme='dark'] .aurora span {
  opacity: 0.34;
}

@keyframes drift-a {
  to {
    transform: translate3d(-4rem, 3rem, 0) scale(1.12);
  }
}
@keyframes drift-b {
  to {
    transform: translate3d(5rem, -2.5rem, 0) scale(0.9);
  }
}
@keyframes drift-c {
  to {
    transform: translate3d(3rem, -3.5rem, 0) scale(1.15);
  }
}

/* Fine grid that fades out, for a technical substrate under the hero. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
  opacity: 0.5;
}

/* ---------------------------- reveal variants ---------------------------- */

.js .reveal,
.js .reveal-left,
.js .reveal-right,
.js .reveal-scale {
  opacity: 0;
  will-change: transform, opacity;
}

.js .reveal {
  transform: translate3d(0, 18px, 0);
}
.js .reveal-left {
  transform: translate3d(-24px, 0, 0);
}
.js .reveal-right {
  transform: translate3d(24px, 0, 0);
}
.js .reveal-scale {
  transform: scale(0.95);
}

.reveal.is-in,
.reveal-left.is-in,
.reveal-right.is-in,
.reveal-scale.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  animation: none;
}

/* Split-text headline: each word rises on its own beat. */
.js .reveal-words > span {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.7em, 0);
}

.reveal-words.is-in > span {
  opacity: 1;
  transform: none;
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}

/* ------------------------------ button shine ----------------------------- */

.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.28) 50%, transparent 75%);
  transform: translateX(-120%);
  transition: transform 620ms var(--ease);
}

.btn:hover::after {
  transform: translateX(120%);
}

.btn-ghost::after,
.btn-subtle::after {
  background: linear-gradient(110deg, transparent 25%, rgba(66, 133, 244, 0.16) 50%, transparent 75%);
}

/* ---------------------------- card spotlight ----------------------------- */

/* A soft light follows the cursor across cards; coordinates come from JS. */
.pcard,
.plan,
.cat-tile,
.stat {
  position: relative;
}

.pcard::after,
.plan::after,
.cat-tile::after,
.stat::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--normal) var(--ease);
  background: radial-gradient(
    22rem circle at var(--mx, 50%) var(--my, 50%),
    rgba(66, 133, 244, 0.14),
    transparent 60%
  );
}

.pcard:hover::after,
.plan:hover::after,
.cat-tile:hover::after,
.stat:hover::after {
  opacity: 1;
}

.cat-tile,
.stat {
  transition: transform var(--normal) var(--ease), box-shadow var(--normal) var(--ease),
    border-color var(--normal) var(--ease);
}

.stat:hover {
  transform: translateY(-3px);
  box-shadow: var(--e-3);
}

.cat-tile .tile-icon,
.stat .icon-wrap {
  transition: transform var(--normal) var(--ease);
}

.cat-tile:hover .tile-icon {
  transform: translateY(-2px) scale(1.08) rotate(-4deg);
}

/* --------------------------- animated gradient --------------------------- */

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* Conic sheen that rotates around the recommended plan. */
.plan.is-popular {
  isolation: isolate;
}

.plan.is-popular::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--angle, 0deg),
    var(--blue),
    var(--cyan),
    var(--green),
    var(--yellow),
    var(--blue)
  );
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  animation: spin-border 6s linear infinite;
}

@keyframes spin-border {
  to {
    --angle: 360deg;
  }
}

/* ------------------------------ count-up --------------------------------- */

.counter {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------ hero visual ------------------------------ */

.hero-visual {
  transition: transform var(--slow) var(--ease);
}

.hero-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, transparent 55%, rgba(32, 33, 36, 0.28));
  pointer-events: none;
}

.hero-float {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

/* Live pulse dot for the floating stat chips. */
.pulse-dot {
  position: relative;
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--green);
  flex: none;
}

.pulse-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: pulse-ring 2s var(--ease) infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

/* ------------------------------- marquee --------------------------------- */

.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: marquee 38s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* --------------------------- footer atmosphere --------------------------- */

.footer-glow {
  position: absolute;
  width: 40rem;
  height: 40rem;
  top: -24rem;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(66, 133, 244, 0.18), transparent 65%);
  pointer-events: none;
}

.site-footer .container {
  position: relative;
}

/* ------------------------------ page enter ------------------------------- */

@keyframes page-in {
  from {
    opacity: 0;
  }
}

body {
  animation: page-in 240ms var(--ease);
}

/* --------------------------- reduced motion ------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .scroll-progress,
  .aurora,
  .hero::after,
  .plan.is-popular::before,
  .pulse-dot::after,
  .footer-glow {
    display: none;
  }

  .marquee-track {
    animation: none;
  }

  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .reveal-words > span {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------- motion corrections -------------------------- */

/* The aurora layer replaces the original static hero glow. */
.hero::before {
  display: none;
}

/* Icon buttons carry an overflowing notification badge, so they opt out of the
   clipped shine sweep. */
.btn-icon {
  overflow: visible;
}

.btn-icon::after {
  display: none;
}

/* Keep the search bar and cards above the aurora. */
.hero .container,
.hero-visual,
.searchbar {
  position: relative;
  z-index: 1;
}

/* ============================================================================
   PROSE + WYSIWYG EDITOR
   `.prose` styles admin-authored page bodies. The editor surface reuses it so
   what an editor types matches what a visitor sees.
   ========================================================================== */

.prose {
  color: var(--text-2);
  font-size: 1.0625rem;
  line-height: 1.75;
  max-width: 72ch;
}

.prose > * + * {
  margin-top: 1.15em;
}

.prose h2,
.prose h3,
.prose h4 {
  color: var(--text);
  line-height: 1.3;
  scroll-margin-top: 6rem;
}

.prose h2 {
  font-size: 1.5rem;
  margin-top: 2.25em;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.prose h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.prose h3 {
  font-size: 1.1875rem;
  margin-top: 1.9em;
}

.prose h4 {
  font-size: 1.0625rem;
  margin-top: 1.6em;
}

.prose p {
  margin: 0;
}

.prose .lead {
  font-size: 1.1875rem;
  line-height: 1.65;
  color: var(--text-3);
}

.prose a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--primary) 40%, transparent);
  transition: text-decoration-color var(--fast) var(--ease);
}

.prose a:hover {
  text-decoration-color: var(--primary);
}

.prose strong {
  color: var(--text);
  font-weight: 600;
}

.prose ul,
.prose ol {
  padding-inline-start: 1.4em;
  margin-block: 1.15em;
}

.prose li + li {
  margin-top: 0.5em;
}

.prose li::marker {
  color: var(--text-4);
}

.prose ul li::marker {
  color: var(--primary);
}

.prose blockquote {
  margin: 1.5em 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-inline-start: 3px solid var(--primary);
  color: var(--text-3);
  font-style: italic;
}

.prose blockquote.callout {
  padding: 1rem 1.25rem;
  border-inline-start-width: 3px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--primary-soft);
  color: var(--text-2);
  font-style: normal;
}

.prose blockquote p {
  margin: 0;
}

.prose hr {
  margin: 2.5em 0;
  border: 0;
  border-top: 1px solid var(--border);
}

.prose img {
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  margin-block: 1.5em;
}

.prose figure {
  margin-block: 1.75em;
}

.prose figcaption {
  margin-top: 0.6em;
  font-size: 0.875rem;
  color: var(--text-3);
  text-align: center;
}

.prose code {
  padding: 0.15em 0.4em;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 0.875em;
  color: var(--text);
}

.prose pre {
  padding: 1rem 1.25rem;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow-x: auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.875rem;
  line-height: 1.6;
}

.prose pre code {
  padding: 0;
  border: 0;
  background: none;
}

/* Tables scroll inside their own box rather than widening the page. */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin-block: 1.75em;
  font-size: 0.9375rem;
  display: block;
  overflow-x: auto;
}

.prose th,
.prose td {
  padding: 0.75rem 1rem;
  text-align: start;
  border: 1px solid var(--border);
  vertical-align: top;
}

.prose th {
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}

.prose tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--surface-2) 45%, transparent);
}

/* ------------------------------ page layout ------------------------------ */

.page-layout {
  display: grid;
  grid-template-columns: 1fr 16rem;
  gap: 3rem;
  align-items: start;
}

.page-toc {
  position: sticky;
  top: 6rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  max-height: calc(100dvh - 8rem);
  overflow-y: auto;
}

.page-toc h4 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-4);
  margin-bottom: 0.75rem;
}

.page-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.125rem;
}

.page-toc a {
  display: block;
  padding: 0.3125rem 0.625rem;
  border-radius: 6px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-3);
  border-inline-start: 2px solid transparent;
}

.page-toc a:hover {
  background: var(--surface-2);
  color: var(--text);
}

.page-toc a.is-current {
  color: var(--primary);
  border-inline-start-color: var(--primary);
  background: var(--primary-soft);
  font-weight: 500;
}

.page-toc .lvl-3 a {
  padding-inline-start: 1.375rem;
  font-size: 0.8125rem;
}

.page-hero {
  padding-block: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: relative;
  overflow: hidden;
}

.page-hero .eyebrow {
  margin-bottom: 0.5rem;
}

.page-related {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
}

.page-related a {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  transition: all var(--fast) var(--ease);
}

.page-related a:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--e-2);
  color: var(--text);
}

.page-related .icon-wrap {
  width: 2rem;
  height: 2rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--primary-soft);
  color: var(--primary);
}

@media (max-width: 1000px) {
  .page-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .page-toc {
    position: static;
    max-height: none;
    order: -1;
  }
}

/* -------------------------------- editor --------------------------------- */

.ed-shell {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  overflow: hidden;
}

.ed-shell:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary-soft);
}

.ed-toolbar {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  flex-wrap: wrap;
  padding: 0.375rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 2;
}

.ed-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.4375rem;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text-2);
  cursor: pointer;
  font-size: 0.8125rem;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}

.ed-btn:hover {
  background: var(--surface-3);
  color: var(--text);
}

.ed-btn:active {
  transform: translateY(1px);
}

.ed-btn.is-active {
  background: var(--primary-soft);
  color: var(--primary);
}

.ed-sep {
  width: 1px;
  height: 1.25rem;
  margin-inline: 0.25rem;
  background: var(--border-strong);
}

.ed-block {
  width: auto;
  height: 2rem;
  padding: 0 1.75rem 0 0.5rem;
  font-size: 0.8125rem;
  background-position: right 0.4rem center;
  border-color: var(--border-strong);
}

.ed-surface {
  min-height: 26rem;
  max-height: 60vh;
  overflow-y: auto;
  padding: 1.5rem;
  outline: none;
  max-width: none;
}

.ed-surface:empty::before {
  content: 'Mulai menulis…';
  color: var(--text-4);
}

.ed-source {
  width: 100%;
  min-height: 26rem;
  max-height: 60vh;
  padding: 1.25rem;
  border: 0;
  outline: none;
  resize: vertical;
  background: var(--surface-2);
  color: var(--text);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.8125rem;
  line-height: 1.7;
}

.ed-status {
  padding: 0.4375rem 0.875rem;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--text-3);
  text-align: end;
}

/* ---------------------------- editor modal ------------------------------- */

.ed-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(32, 33, 36, 0.55);
  backdrop-filter: blur(3px);
  animation: page-in 160ms var(--ease);
}

.ed-modal-panel {
  width: min(36rem, 100%);
  max-height: 85dvh;
  overflow-y: auto;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--e-4);
}

.ed-library {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  gap: 0.5rem;
  max-height: 16rem;
  overflow-y: auto;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.ed-thumb {
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  aspect-ratio: 4 / 3;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.ed-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ed-thumb:hover {
  border-color: var(--primary);
  transform: scale(1.04);
}

/* --------------------------- admin page list ----------------------------- */

.page-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  transition: border-color var(--fast) var(--ease);
}

.page-row:hover {
  border-color: var(--border-strong);
}

.page-row.is-editing {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.page-row .grip {
  color: var(--text-4);
  flex: none;
}

/* Footer gained a Legal column once the CMS pages were grouped. */
.footer-grid-5 {
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 2rem;
}

@media (max-width: 1080px) {
  .footer-grid-5 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .footer-grid-5 {
    grid-template-columns: 1fr;
  }
}

/* --------------------------- system settings rows ------------------------ */

.setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}

.setting-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.setting-row.has-error {
  background: var(--danger-soft);
  border-radius: var(--r-sm);
  padding-inline: 0.875rem;
  margin-inline: -0.875rem;
}

.setting-label label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.25rem;
}

.setting-label .field-hint {
  display: block;
  margin: 0 0 0.375rem;
}

.setting-key {
  display: inline-block;
  padding: 0.0625rem 0.375rem;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
  color: var(--text-3);
}

.setting-wired {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-inline-start: 0.5rem;
  font-size: 0.6875rem;
  color: var(--success);
}

.setting-wired .icon {
  width: 0.75rem;
  height: 0.75rem;
}

.setting-control {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.setting-reset {
  align-self: flex-start;
  font-size: 0.75rem;
}

.color-swatch {
  width: 3rem;
  height: 2.5rem;
  padding: 0.1875rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  cursor: pointer;
}

@media (max-width: 900px) {
  .setting-row {
    grid-template-columns: 1fr;
    gap: 0.625rem;
  }
}

/* ============================================================================
   SHOWCASE LAYER
   Site-wide depth: an ambient aurora field behind every page, film grain,
   glass surfaces, pointer-reactive cards, and gradient type.

   Layered on top of MOTION LAYER rather than edited into it, so the baseline
   stays readable and this whole block can be lifted out wholesale. Same
   contract as that layer: only `transform`, `opacity` and `filter` animate,
   and everything collapses under prefers-reduced-motion at the end of the file.
   ========================================================================== */

/* ------------------------ ambient page background ------------------------ */

/* The ambient layers below sit at negative z-index, which only renders while
   `body` paints no background of its own — otherwise body's background covers
   them. That happens to be true today via the CSS background-propagation rule
   (body's background moves to the canvas *only* while `html` has none), but
   that rule breaks silently the moment anyone styles `html`. So the base
   colour is pinned to `html` explicitly and `body` is made transparent. */
html {
  background: var(--bg);
}

body {
  background: transparent;
}

/* Fixed behind all content. The hero keeps its own `.aurora`; this is the
   quieter field that carries the rest of the page. */
.app-aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}

.app-aurora span {
  position: absolute;
  display: block;
  width: 46rem;
  height: 46rem;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.28;
  will-change: transform;
}

.app-aurora span:nth-child(1) {
  top: -14rem;
  left: -10rem;
  background: radial-gradient(circle, rgba(66, 133, 244, 0.55), transparent 70%);
  animation: float-a 34s var(--ease) infinite alternate;
}

.app-aurora span:nth-child(2) {
  top: 30%;
  right: -16rem;
  background: radial-gradient(circle, rgba(0, 188, 212, 0.5), transparent 70%);
  animation: float-b 41s var(--ease) infinite alternate;
}

.app-aurora span:nth-child(3) {
  bottom: -18rem;
  left: 24%;
  background: radial-gradient(circle, rgba(52, 168, 83, 0.4), transparent 70%);
  animation: float-c 47s var(--ease) infinite alternate;
}

@keyframes float-a {
  to { transform: translate3d(8rem, 6rem, 0) scale(1.18); }
}
@keyframes float-b {
  to { transform: translate3d(-9rem, -5rem, 0) scale(0.86); }
}
@keyframes float-c {
  to { transform: translate3d(6rem, -7rem, 0) scale(1.1); }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .app-aurora span { opacity: 0.20; }
}
[data-theme='dark'] .app-aurora span { opacity: 0.20; }

/* --------------------------------- grain --------------------------------- */

/* A little luminance noise stops the large gradients from banding on cheap
   panels, and gives the flat surfaces a bit of tooth. Inline SVG so it costs
   no request. */
.app-grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

[data-theme='dark'] .app-grain { opacity: 0.05; }

/* ------------------------------ glass cards ------------------------------ */

.pcard,
.stat,
.plan {
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: saturate(1.35) blur(10px);
  -webkit-backdrop-filter: saturate(1.35) blur(10px);
  border-color: color-mix(in srgb, var(--border) 70%, transparent);
}

/* ---------------------- pointer-reactive card tilt ----------------------- */

/* app.js writes --rx/--ry per card from the pointer position. The defaults
   here mean the rule is inert until it does. */
.tilt {
  --rx: 0deg;
  --ry: 0deg;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform var(--normal) var(--ease), box-shadow var(--normal) var(--ease);
  will-change: transform;
}

.tilt:hover {
  box-shadow: var(--e-4);
}

/* Lift the media a touch out of the card plane while tilting. */
.tilt .pcard-media,
.tilt .tilt-lift {
  transform: translateZ(28px);
  transition: transform var(--normal) var(--ease);
}

/* ----------------------------- magnetic CTA ------------------------------ */

.magnetic {
  --mx: 0px;
  --my: 0px;
  transform: translate3d(var(--mx), var(--my), 0);
  transition: transform var(--fast) var(--ease);
  will-change: transform;
}

/* ---------------------------- gradient typography ------------------------ */

.text-gradient {
  background: linear-gradient(100deg, var(--blue), var(--cyan) 45%, var(--green));
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradient-pan 9s linear infinite;
}

@keyframes gradient-pan {
  to { background-position: 220% center; }
}

/* ------------------------------ shine sweep ------------------------------ */

/* A diagonal highlight that crosses a card once on hover. */
.shine {
  position: relative;
  overflow: hidden;
}

.shine::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 65%
  );
  transform: translateX(-120%);
  pointer-events: none;
  opacity: 0;
}

.shine:hover::after {
  animation: shine-sweep 900ms var(--ease) forwards;
}

@keyframes shine-sweep {
  from { transform: translateX(-120%); opacity: 1; }
  to   { transform: translateX(120%);  opacity: 0; }
}

/* --------------------------- blur-in reveal ------------------------------ */

.js .reveal-blur {
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(0.985);
  filter: blur(10px);
}

.js .reveal-blur.is-in {
  animation: reveal-blur var(--slow) var(--ease) forwards;
}

@keyframes reveal-blur {
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

/* ------------------------------ float idle ------------------------------- */

.floaty {
  animation: floaty 6s ease-in-out infinite;
  will-change: transform;
}

@keyframes floaty {
  50% { transform: translateY(-8px); }
}

/* --------------------------- reduced motion ------------------------------ */

/* Everything above degrades to a static, fully-legible page. The aurora and
   grain stay (they carry no motion) but stop animating. */
@media (prefers-reduced-motion: reduce) {
  .app-aurora span,
  .text-gradient,
  .floaty {
    animation: none !important;
  }

  .tilt,
  .magnetic {
    transform: none !important;
  }

  .tilt .pcard-media,
  .tilt .tilt-lift {
    transform: none !important;
  }

  .shine:hover::after {
    animation: none !important;
  }

  .js .reveal-blur {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ==========================================================================
   SmartVA — Kunciloka Virtual Assistant (widget chat)
   ========================================================================== */

.smartva {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: calc(var(--z-overlay) + 10);
  font-size: 0.9375rem;
}

body:has(.compare-bar.is-open) .smartva {
  bottom: 5.75rem;
}

.smartva-launcher {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0 1.25rem 0 1rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: var(--on-accent);
  font: inherit;
  font-weight: 600;
  box-shadow: var(--e-4);
  cursor: pointer;
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.smartva-launcher:hover {
  transform: translateY(-2px);
}

.smartva-launcher:focus-visible {
  outline: 3px solid var(--primary-soft);
  outline-offset: 3px;
}

.smartva-launcher-icon svg {
  width: 1.375rem;
  height: 1.375rem;
}

.smartva.is-open .smartva-launcher {
  display: none;
}

.smartva-panel {
  display: flex;
  flex-direction: column;
  width: min(24.5rem, calc(100vw - 2rem));
  height: min(38rem, calc(100vh - 2.5rem));
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--e-4);
  overflow: hidden;
  animation: smartva-in var(--normal) var(--ease);
}

.smartva-panel[hidden] {
  display: none;
}

@keyframes smartva-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.smartva-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 0.75rem 0.75rem 1rem;
  background: var(--primary);
  color: var(--on-accent);
}

.smartva-avatar {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.smartva-avatar svg {
  width: 1.25rem;
  height: 1.25rem;
}

.smartva-head-text {
  flex: 1;
  min-width: 0;
}

.smartva-head h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
  color: inherit;
}

.smartva-head p {
  margin: 0;
  font-size: 0.75rem;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.smartva-icon-btn {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.smartva-icon-btn:hover,
.smartva-icon-btn:focus-visible {
  background: rgba(255, 255, 255, 0.16);
}

.smartva-icon-btn svg {
  width: 1.125rem;
  height: 1.125rem;
}

.smartva-log {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 0.875rem;
  background: var(--bg);
  overscroll-behavior: contain;
}

.smartva-msg {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.875rem;
}

.smartva-msg.is-user {
  align-items: flex-end;
}

.smartva-bubble {
  max-width: 88%;
  padding: 0.625rem 0.875rem;
  border-radius: var(--r-md);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.smartva-msg.is-bot .smartva-bubble {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top-left-radius: 4px;
}

.smartva-msg.is-user .smartva-bubble {
  background: var(--primary);
  color: var(--on-accent);
  border-top-right-radius: 4px;
}

.smartva-bubble p {
  margin: 0 0 0.5rem;
}

.smartva-bubble p:last-child,
.smartva-bubble ul:last-child,
.smartva-bubble ol:last-child {
  margin-bottom: 0;
}

.smartva-bubble ul,
.smartva-bubble ol {
  margin: 0 0 0.5rem;
  padding-left: 1.25rem;
}

.smartva-bubble li {
  margin-bottom: 0.25rem;
}

.smartva-bubble a {
  color: var(--primary);
  text-decoration: underline;
}

.smartva-cards {
  display: grid;
  gap: 0.5rem;
  width: 88%;
  margin-top: 0.5rem;
}

.smartva-card {
  display: flex;
  gap: 0.625rem;
  padding: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

.smartva-card:hover,
.smartva-card:focus-visible {
  border-color: var(--primary);
  box-shadow: var(--e-2);
}

.smartva-card img,
.smartva-card-noimg {
  width: 4.5rem;
  height: 4.5rem;
  flex: none;
  border-radius: 6px;
  object-fit: cover;
  background: var(--surface-2);
}

.smartva-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.smartva-card-body strong {
  font-size: 0.875rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.smartva-card-price {
  font-weight: 700;
  color: var(--primary);
  font-size: 0.875rem;
}

.smartva-card-price span {
  font-weight: 400;
  color: var(--text-3);
}

.smartva-card-meta {
  font-size: 0.75rem;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.smartva-feedback {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.smartva-feedback button {
  padding: 0.125rem 0.375rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: transparent;
  font-size: 0.8125rem;
  opacity: 0.55;
  cursor: pointer;
  filter: grayscale(1);
}

.smartva-feedback button:hover,
.smartva-feedback button.is-active {
  opacity: 1;
  filter: none;
  border-color: var(--border);
  background: var(--surface);
}

.smartva-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: -0.25rem 0 0.875rem;
}

.smartva-suggest button {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-2);
  font: inherit;
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
}

.smartva-suggest button:hover,
.smartva-suggest button:focus-visible {
  border-color: var(--primary);
  color: var(--primary);
}

.smartva-notice {
  margin: 0 0 0.875rem;
  font-size: 0.8125rem;
  color: var(--text-3);
}

.smartva-notice.is-error {
  color: var(--danger);
}

.smartva-notice.is-warning {
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-sm);
  background: var(--warning-soft);
  color: var(--text-2);
}

.smartva-notice.is-quiet a {
  color: var(--primary);
}

.smartva-dots {
  display: inline-flex;
  gap: 3px;
  vertical-align: middle;
  margin-right: 0.25rem;
}

.smartva-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  animation: smartva-dot 1s infinite ease-in-out;
}

.smartva-dots i:nth-child(2) { animation-delay: 0.15s; }
.smartva-dots i:nth-child(3) { animation-delay: 0.3s; }

@keyframes smartva-dot {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

.smartva-form {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.smartva-form[hidden] {
  display: none;
}

.smartva-form textarea {
  flex: 1;
  min-height: 2.5rem;
  max-height: 8.75rem;
  padding: 0.5625rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: 1.25rem;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  line-height: 1.4;
  resize: none;
}

.smartva-form textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.smartva-send {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-accent);
  cursor: pointer;
}

.smartva-send svg {
  width: 1.125rem;
  height: 1.125rem;
}

.smartva-form.is-busy .smartva-send {
  opacity: 0.5;
  pointer-events: none;
}

.smartva-foot {
  margin: 0;
  padding: 0 0.875rem 0.625rem;
  background: var(--surface);
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--text-4);
}

@media (max-width: 639px) {
  .smartva {
    right: 1rem;
    bottom: 1rem;
  }

  .smartva-launcher-label {
    display: none;
  }

  .smartva-launcher {
    width: 3.25rem;
    padding: 0;
    justify-content: center;
  }

  .smartva.is-open {
    inset: 0;
  }

  .smartva-panel {
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .smartva-panel,
  .smartva-dots i {
    animation: none;
  }
}

@media print {
  .smartva {
    display: none;
  }
}

/* SmartVA: riwayat lintas topik dan batas pengunjung */

.smartva-divider {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0.25rem 0 0.875rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-4);
}

.smartva-divider::before,
.smartva-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.smartva-older {
  display: block;
  margin: 0 auto 0.875rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--primary);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.smartva-older:disabled {
  opacity: 0.5;
  cursor: progress;
}

.smartva-gate {
  margin: 0 0 0.875rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--primary);
  border-radius: var(--r-md);
  background: var(--primary-soft);
  line-height: 1.5;
}

.smartva-gate p {
  margin: 0 0 0.75rem;
}

.smartva-gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Banner pemberitahuan perubahan kebijakan (/admin/notices) */

.policy-banner {
  position: relative;
  z-index: calc(var(--z-nav) + 1);
  background: var(--primary-soft);
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
  font-size: 0.875rem;
}

.policy-banner[hidden] {
  display: none;
}

.policy-banner-inner {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.policy-banner-icon {
  display: grid;
  flex: none;
  color: var(--primary);
}

.policy-banner-icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

.policy-banner p {
  flex: 1;
  margin: 0;
  line-height: 1.45;
}

.policy-banner a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}

.policy-banner-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}

.policy-banner-close:hover,
.policy-banner-close:focus-visible {
  background: var(--surface-2);
  color: var(--text);
}

.policy-banner-close svg {
  width: 1rem;
  height: 1rem;
}

/* ==========================================================================
   Artikel (/artikel)
   ========================================================================== */

.acat-nav {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scrollbar-width: thin;
}

.acat-nav .chip {
  white-space: nowrap;
  text-decoration: none;
}

.acat-nav .chip.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-accent);
}

.acard .pcard-media {
  aspect-ratio: 16 / 9;
}

.acard .pcard-tags .badge {
  text-decoration: none;
}

.acover {
  margin: 0 0 2rem;
}

.acover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.acover figcaption {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-3);
}

.acover figcaption a {
  color: inherit;
  text-decoration: underline;
}

.prose .ai-note {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin-top: 2rem;
  padding: 0.75rem 1rem;
  border-radius: var(--r-sm);
  background: var(--primary-soft);
  color: var(--text-2);
  font-size: 0.875rem;
  line-height: 1.5;
}

.prose .ai-note svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
  color: var(--primary);
}

.prose .atags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 1rem;
}

/* Laporkan listing (detail properti) */

.report-box {
  margin-top: 1.5rem;
  overflow: hidden;
}

.report-box summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.25rem;
  font-size: 0.875rem;
  color: var(--text-3);
  cursor: pointer;
  list-style: none;
}

.report-box summary::-webkit-details-marker {
  display: none;
}

.report-box summary:hover,
.report-box[open] summary {
  color: var(--danger);
}

.report-box summary svg {
  width: 1rem;
  height: 1rem;
}

.report-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-size: 0.875rem;
  cursor: pointer;
}

.listing-note {
  display: block;
  margin-top: 0.375rem;
  max-width: 28rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  white-space: normal;
}

.listing-note.is-danger {
  color: var(--danger);
}