/* ==========================================================================
   MAX [MAXIMOS] — COMPONENT LIBRARY (Fase 2)
   HANYA memakai token dari 00-core. TIDAK ada hex/px hardcoded.
   Import urutan: tokens.css → typography.css → effects.css → components.css
   ========================================================================== */

/* ==========================================================================
   1. BUTTON
   Varian: primary (red-deep, dimensi ke dalam) · secondary (glass) · ghost
   State: default / hover / active / disabled
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 120ms ease, box-shadow 160ms ease,
              background-color 160ms ease, border-color 160ms ease, opacity 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:focus-visible {
  outline: 2px solid var(--red-300);
  outline-offset: 2px;
}

/* --- Primary: permukaan merah dengan depth ke dalam (bukan bevel timbul) --- */
.btn--primary {
  background:
    radial-gradient(120% 160% at 50% 15%,
      var(--red-500) 0%, var(--red-700) 70%, var(--red-800) 100%);
  color: var(--text-on-red);
  border-color: color-mix(in srgb, var(--text-primary) 8%, transparent);
  box-shadow:
    inset 0 1px 10px color-mix(in srgb, var(--bg-0) 45%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--text-primary) 5%, transparent),
    var(--shadow-sm);
}
.btn--primary:hover {
  box-shadow:
    inset 0 1px 10px color-mix(in srgb, var(--bg-0) 45%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--text-primary) 5%, transparent),
    var(--glow-red);
}
.btn--primary:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 14px color-mix(in srgb, var(--bg-0) 60%, transparent),
    var(--shadow-sm);
}

/* --- Secondary: glass --- */
.btn--secondary {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  color: var(--text-primary);
  border-color: var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}
.btn--secondary:hover {
  background: color-mix(in srgb, var(--text-primary) 12%, transparent);
  border-color: var(--rule-strong);
}
.btn--secondary:active { transform: translateY(1px); }

/* --- Ghost: outline halus, teks aksen --- */
.btn--ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--rule-strong);
}
.btn--ghost:hover {
  border-color: var(--red-500);
  color: var(--red-100);
}
.btn--ghost:active { transform: translateY(1px); }

/* --- Disabled (semua varian) --- */
.btn:disabled,
.btn[disabled],
.btn.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  pointer-events: none;
}

/* Ukuran */
.btn--sm { padding: var(--space-2) var(--space-4); font-size: 0.6875rem; }
.btn--lg { padding: var(--space-4) var(--space-8); font-size: 0.875rem; }
.btn--block { display: flex; width: 100%; }

/* ==========================================================================
   2. CARD & GLASS PANEL
   ========================================================================== */

/* --- Card solid (surface) --- */
.card {
  background: var(--surface-1);
  border: 1px solid var(--rule-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.card--flush { padding: 0; overflow: hidden; }

/* --- Glass card (butuh bg gradient/foto di belakang) --- */
.glass-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-md);
  padding: var(--space-6);
}

/* --- Glass panel dengan header (varian dengan/tanpa header) --- */
.glass-panel {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 var(--glass-highlight), var(--shadow-md);
  overflow: hidden;
}
.glass-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--glass-border);
}
.glass-panel__body { padding: var(--space-6); }

/* Aksen bar merah kiri (DNA sample: GOAL card) */
.panel-accent-left { border-left: 3px solid var(--red-500); }

/* ==========================================================================
   3. BADGE / TAG
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}
.badge--red {           /* solid — "RECOMMENDED", "NEGOTIABLE" (DNA sample) */
  background: var(--red-500);
  color: var(--text-on-red);
}
.badge--outline {
  border: 1px solid var(--red-700);
  color: var(--red-100);
}
.badge--neutral {
  background: var(--surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--rule-subtle);
}
.badge--dot::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: var(--radius-pill);
  background: var(--red-500);
}

/* Chip (tag netral bordered — dari timeline sample: SONY A7 V dll) */
.chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
}
.chip--red { border-color: var(--red-700); color: var(--red-100); }

/* ==========================================================================
   4. DIVIDER
   ========================================================================== */
.divider {
  border: 0;
  border-top: 1px solid var(--rule-subtle);
  margin: var(--space-6) 0;
}
.divider--strong { border-top-color: var(--rule-strong); }
.divider--red {           /* garis pendek aksen — DNA sample */
  border: 0;
  border-top: 2px solid var(--red-500);
  width: var(--space-10);
  margin: var(--space-4) 0;
}
.divider--vertical {
  border: 0;
  border-left: 1px solid var(--rule-subtle);
  align-self: stretch;
  width: 0;
}

/* ==========================================================================
   5. TABLE (invoice & TnC)
   ========================================================================== */
.table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-secondary);
}
.table thead th {
  text-align: left;
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--rule-strong);
}
.table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--rule-subtle);
  vertical-align: top;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .cell-title { color: var(--text-primary); font-weight: 500; }
/* Baris total — untuk invoice */
.table tfoot td {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--rule-strong);
  font-variant-numeric: tabular-nums;
}
.table tfoot .total-row td {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-primary);
  font-size: 1rem;
}
.table tfoot .total-row .num { color: var(--red-100); }
/* Zebra opsional untuk daftar panjang (TnC) */
.table--zebra tbody tr:nth-child(even) { background: color-mix(in srgb, var(--text-primary) 2%, transparent); }

/* ==========================================================================
   6. FORM INPUT (website)
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label {
  font-family: var(--font-display);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.input, .textarea, .select {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  width: 100%;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--red-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red-500) 18%, transparent);
}
.textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.select { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.input:disabled, .textarea:disabled, .select:disabled {
  opacity: 0.45; cursor: not-allowed;
}
.field--error .input,
.field--error .textarea { border-color: var(--red-400); }
.field__hint { font-size: 0.75rem; color: var(--text-muted); }
.field--error .field__hint { color: var(--red-100); }

/* ==========================================================================
   7. HEADER & FOOTER PATTERN
   Logo + kontak (Canggu, Bali · +62 889-9420-0515 · @maximosbali)
   ========================================================================== */

/* Logo lockup — img mark (dominan) + wordmark "MAXIMOS".
   Wordmark: "MAX" putih + "IMOS" merah. TANPA kurung, TANPA "MAX [MAXIMOS]".
   Mark dibuat lebih besar dari teks supaya jadi anchor visual. */
.logo-lockup { display: inline-flex; align-items: center; gap: var(--space-4); }
.logo-lockup img { height: 52px; width: auto; display: block; }
.logo-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.12em;
  font-size: 1.0625rem;
  color: var(--text-primary);   /* "MAX" — putih */
  line-height: 1;
  text-transform: uppercase;
}
.logo-wordmark .accent { color: var(--red-500); }  /* "IMOS" — merah */
.logo-sub {
  font-family: var(--font-display);
  font-size: 0.5625rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1;
  margin-top: 4px;
}
/* Varian mark-only lebih besar (footer/cover) */
.logo-lockup--lg img { height: 68px; }

/* Site header */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-8);
  border-bottom: 1px solid var(--rule-subtle);
}
.site-header__nav {
  display: flex;
  gap: var(--space-6);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.site-header__nav a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 140ms ease;
}
.site-header__nav a:hover,
.site-header__nav a[aria-current="page"] { color: var(--red-100); }

/* Site footer */
.site-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding: var(--space-10) var(--space-8);
  border-top: 1px solid var(--rule-strong);
}
.footer-contact { display: flex; flex-direction: column; gap: var(--space-1); }
.footer-contact .label { margin-bottom: var(--space-1); }
.footer-contact a { color: var(--text-primary); text-decoration: none; }
.footer-contact a:hover { color: var(--red-100); }

/* ==========================================================================
   8. ICON GUIDELINE
   Style: stroke 1.5px @24 (1.75 utk ≤20), linecap/join round, currentColor.
   Warna: ikuti teks (currentColor). Aksen merah HANYA untuk ikon status/CTA.
   Ukuran: --icon-sm 16 · --icon-md 20 · --icon-lg 24 · --icon-xl 32
   ========================================================================== */
.icon {
  display: inline-block;
  width: 24px; height: 24px;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vertical-align: middle;
  flex-shrink: 0;
}
.icon--sm { width: 16px; height: 16px; stroke-width: 1.75; }
.icon--md { width: 20px; height: 20px; stroke-width: 1.75; }
.icon--lg { width: 24px; height: 24px; }
.icon--xl { width: 32px; height: 32px; stroke-width: 1.5; }
.icon--red { color: var(--red-300); }
.icon-chip {                 /* ikon dalam kotak surface — untuk service cards */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--rule-subtle);
  color: var(--text-primary);
}

/* ==========================================================================
   9. LIST — bullet merah (DNA sample: package feature list)
   ========================================================================== */
.feature-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.feature-list li {
  position: relative;
  padding-left: var(--space-5);
  color: var(--text-secondary);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.feature-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.5em;
  width: 6px; height: 6px;
  border-radius: var(--radius-pill);
  background: var(--red-500);
}