/* ==========================================================================
   Avarith Learn — base.css
   Reset, layout global, container, nav, footer, util reveal, helper btn/pill.
   Section-spesifik ada di landing.css / app.css / valley.css.
   ========================================================================== */

/* --- Reset ringan --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font: inherit; cursor: pointer; }

em { font-style: italic; }

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

/* --- Container --- */
.container {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: 24px;
}
.container--read { max-width: var(--container-read); }

/* --- View toggle (hash router) --- */
.view { display: block; }
.view[hidden] { display: none; }

/* --- Section rhythm --- */
.section { padding-block: var(--section-pad); }

/* --- Eyebrow / label --- */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(243, 246, 231, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hair);
}
.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}
.nav__brand:hover { text-decoration: none; }
.nav__mark { width: 28px; height: 28px; flex: none; }
.nav__wordmark {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav__link {
  font-size: 14px;
  color: var(--muted);
}
.nav__link:hover { color: var(--ink); text-decoration: none; }

/* Mobile nav: sembunyiin text-link, sisain logo + pill demo */
@media (max-width: 640px) {
  .nav__link { display: none; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  background: var(--canvas);
  border-top: 1px solid var(--hair);
  padding-block: 40px;
}
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 16px;
}
.footer__mark { width: 24px; height: 24px; flex: none; }
.footer__links {
  display: flex;
  gap: 18px;
  font-size: 13px;
}
.footer__links a { color: var(--muted); }
.footer__links a:hover { color: var(--ink); }
.footer__copy {
  flex-basis: 100%;
  font-size: 13px;
  color: var(--muted);
  padding-top: 8px;
}

/* ==========================================================================
   BUTTONS / PILL
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  padding: 14px 28px;
  border: none;
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--ink);
  transition: transform 160ms var(--ease), background-color 160ms var(--ease),
              border-color 160ms var(--ease), color 160ms var(--ease);
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--fill);
  color: var(--card);
}
.btn--primary:hover { background: #56895b; }

.btn--ghost {
  background: transparent;
  border: 1.5px solid var(--accent);
  color: var(--ink);
  padding: 12.5px 26.5px; /* kompensasi border 1.5 biar tinggi setara primary */
}
.btn--ghost:hover { background: rgba(78, 138, 87, 0.08); }

/* Pill: kecil, outline — dipakai nav "Lihat demo" */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  padding: 9px 18px;
  border: 1.5px solid var(--accent);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--accent);
  text-decoration: none;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.pill:hover { background: var(--accent); color: var(--card); text-decoration: none; }

/* Text-link inline (CTA sekunder di body) */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  color: var(--accent);
}

/* ==========================================================================
   REVEAL — fade + rise 12px on-scroll (IntersectionObserver di main.js)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(var(--rise));
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Scroll-lock util (buat sheet/overlay) */
body.is-locked { overflow: hidden; }

/* ==========================================================================
   MOTION GUARD
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}