/* Tahap 2 — main.css — Sari, Sistem Desain. CSS jadi, tanpa build wajib. */
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-main); background: var(--color-bg); color: var(--color-ink); line-height: 1.6; }
body.klinik-gigi { --color-accent: #0f766e; }
body.konsultan-hukum { --color-accent: #1e3a5f; }
body.coach-konselor { --color-accent: #92400e; }
body.fotografer { --color-accent: #111827; }
body.agen-real-estat { --color-accent: #9a3412; }
body.salon-spa { --color-accent: #be185d; }
@media (prefers-color-scheme: dark) {
  body { background: #000000; color: #ffffff; }
  body.klinik-gigi { --color-accent: #2dd4bf; }
  body.konsultan-hukum { --color-accent: #7aa2d6; }
  body.coach-konselor { --color-accent: #fbbf24; }
  body.fotografer { --color-accent: #d1d5db; }
  body.agen-real-estat { --color-accent: #fdba74; }
  body.salon-spa { --color-accent: #f9a8d4; }
}
[data-theme="light"] body, body { background: var(--color-bg); }
[data-theme="dark"] { --color-bg: #000000; --color-surface: #181818; --color-ink: #ffffff; --color-muted: #9b9b9b; --color-border: #272727; }
[data-theme="dark"] body.klinik-gigi { --color-accent: #2dd4bf; }
[data-theme="dark"] body.konsultan-hukum { --color-accent: #7aa2d6; }
[data-theme="dark"] body.coach-konselor { --color-accent: #fbbf24; }
[data-theme="dark"] body.fotografer { --color-accent: #d1d5db; }
[data-theme="dark"] body.agen-real-estat { --color-accent: #fdba74; }
[data-theme="dark"] body.salon-spa { --color-accent: #f9a8d4; }
a { color: var(--color-accent); }
a:focus, button:focus, input:focus, select:focus, textarea:focus { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.skip { position: absolute; left: 16px; top: 16px; background: var(--color-bg); padding: 8px 12px; border: 1px solid var(--color-border); }
header { border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
nav { max-width: 1100px; margin: 0 auto; padding: 16px 24px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.logo { font-weight: 700; font-size: 20px; color: var(--color-ink); text-decoration: none; }
.nav-links { display: flex; flex-wrap: wrap; gap: 16px; }
.nav-links a { color: var(--color-ink); text-decoration: none; }
.nav-links a[aria-current="page"] { font-weight: 700; text-decoration: underline; }
main { max-width: 1100px; margin: 0 auto; padding: 24px; }
section { margin: 64px 0; }
.hero-title { font-size: 48px; line-height: 1; max-width: 680px; text-wrap: balance; background: linear-gradient(to right, #000000, #666666); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="dark"] .hero-title, body.dark .hero-title { background: linear-gradient(to right, #ffffff, #9b9b9b); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (prefers-color-scheme: dark) {
  .hero-title { background: linear-gradient(to right, #ffffff, #9b9b9b); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.sub { font-size: 18px; max-width: 680px; text-wrap: pretty; }
.eyebrow, .proof { color: var(--color-muted); }
.btn-main, .btn-secondary, .btn-small { display: inline-block; font-size: 16px; font-weight: 600; padding: 8px 12px; border-radius: 8px; text-decoration: none; border: 1px solid var(--color-border); transition: transform 500ms cubic-bezier(0.22,1,0.36,1), opacity 300ms cubic-bezier(0.22,1,0.36,1); }
.btn-main { background: var(--color-accent); color: #ffffff; border-color: var(--color-accent); }
.btn-secondary { color: var(--color-ink); background: var(--color-surface); }
.btn-main:hover, .btn-secondary:hover { transform: translateY(-1px); }
.btn-main:active, .btn-secondary:active { transform: scale(0.98); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card { border: 1px solid var(--color-border); border-radius: 16px; padding: 24px; background: var(--color-surface); }
.price { font-size: 24px; font-weight: 700; }
.hero-visual { border: 1px solid var(--color-border); border-radius: 16px; padding: 48px 24px; background: var(--color-surface); text-align: center; }
.tagline { font-size: 36px; line-height: 1.2; font-weight: 700; max-width: 680px; margin-top: 32px; }
.tagline span { opacity: 0.3; transition: opacity 500ms cubic-bezier(0.22,1,0.36,1); }
.tagline.revealed span { opacity: 1; }
.cta-final { border: 1px solid var(--color-border); border-radius: 16px; padding: 32px; background: var(--color-surface); }
details { border: 1px solid var(--color-border); border-radius: 12px; padding: 16px 24px; margin: 12px 0; }
form { display: grid; gap: 16px; max-width: 680px; }
label { display: grid; gap: 8px; font-weight: 600; }
input, select, textarea { font: inherit; padding: 12px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg); color: var(--color-ink); }
footer { border-top: 1px solid var(--color-border); padding: 32px 24px; color: var(--color-muted); }
@media (max-width: 800px) {
  .grid { grid-template-columns: 1fr; }
  section { margin: 48px 0; }
  .hero-title { font-size: 36px; }
  nav { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}