/* landing-detail.css — token "kertas" untuk landing + polish.

   Dimuat SETELAH docs.css agar urutan cascade tetap sama (lihat komentar di
   app-shell.css). Semua nilai di sini hanya hidup di dalam `.landing`; token
   aplikasi (--bg, --ink, --surface) tidak diubah sehingga /app tidak
   terpengaruh.

   Kontras: setiap pasangan teks/latar di bawah ini >= 4.5:1. Primer jenuh
   (#1E9A57, #E8582A) hanya untuk bentuk; versi teks-nya memakai varian yang
   lebih gelap di tema terang dan lebih terang di tema gelap. */

.landing {
  /* Kertas terang: dasar referensi editorial (krem, bukan putih). */
  --paper: #F4F1E9;
  --paper-2: #EAE5D8;
  --paper-ink: #14140F;
  --paper-body: #3B3931;
  --paper-muted: #55524A;
  --paper-line: #CFC8B4;

  /* Primer jenuh: HANYA pada bentuk besar. */
  --p-orange: #E8582A;
  --p-green: #1E9A57;
  --p-blue: #2B57D6;
  --p-purple: #7C43B8;
  --p-yellow: #F2B33D;

  /* Varian teks dari hue yang sama, lolos 4.5:1 di kertas. */
  --p-blue-text: #1B47B8;
  --p-green-text: #0F6B3C;

  --landing-grain: url("/icons/grain.svg");
  --grain-opacity: 0.045;

  /* Nav & footer landing memakai alias ini, bukan token app. */
  --border: var(--paper-line);
  --border-strong: var(--paper-ink);
  --text-1: var(--paper-ink);
  --text-2: var(--paper-body);
  --text-3: var(--paper-muted);
  --surface-hover: var(--paper-2);
  --brand: var(--p-orange);
  --bg: var(--paper);
}

/* Tema gelap: ground jadi charcoal, tinta jadi terang. Primer tetap sama
   supaya identitas halaman tidak berubah saat tema ditukar. */
html[data-theme="dark"] .landing {
  --paper: #18191B;
  --paper-2: #202123;
  --paper-ink: #E6E7E9;
  --paper-body: #C8CACE;
  --paper-muted: #A4A6AA;
  --paper-line: #303134;
  --grain-opacity: 0.07;

  --p-blue-text: #8FB6FF;
  --p-green-text: #63C08E;

  --border: #303134;
  --border-strong: #3A3B3E;
  --text-1: #E6E7E9;
  --text-2: #C8CACE;
  --text-3: #A4A6AA;
  --surface-hover: #252628;
  --bg: #18191B;
}

/* ---------- Nav & footer ikut kertas ---------- */
.landing nav.site-nav {
  /* Pemisah nav dari isi memakai satu langkah nada, bukan garis: kertas lebih
     gelap sedikit. Garis 1px di sini terbaca sebagai tabel. */
  background: var(--paper-2);
  border-bottom: 0;
  position: sticky;
}
.landing .nav-logo { color: var(--paper-ink); font-size: 17px; }
.landing .nav-logo .mark { color: var(--p-orange); }
.landing .nav-logo .brandtext span { color: var(--paper-muted); font-size: 13px; }
.landing .nav-trigger { color: var(--paper-body); }
.landing .nav-trigger:hover,
.landing .nav-trigger[aria-expanded="true"] {
  background: var(--paper-2);
  color: var(--paper-ink);
}
.landing .nav-link { color: var(--paper-body); }
.landing .nav-link:hover { color: var(--paper-ink); }
.landing .nav-panel-body {
  background: var(--paper);
  border: 1px solid var(--paper-line);
}
.landing .nav-panel-title { color: var(--paper-ink); }
.landing .nav-panel-note { color: var(--paper-muted); font-size: 13px; }
.landing .nav-panel-heading { color: var(--paper-muted); font-size: 13px; }
.landing .nav-panel li a:hover { background: var(--paper-2); }
.landing .nav-panel-foot { border-top: 1px solid var(--paper-line); }
.landing .nav-panel-foot a { color: var(--p-blue-text); }
.landing .theme-btn {
  background: var(--paper-2);
  border: 1px solid var(--paper-line);
  color: var(--paper-ink);
}
.landing .theme-btn:hover { border-color: var(--paper-muted); }
.landing .nav-cta {
  background: var(--paper-ink);
  color: var(--paper);
  border-radius: 6px;
}
.landing .nav-cta:hover { background: var(--p-orange); color: #fff; }
.landing .nav-toggle {
  background: var(--paper-2);
  border: 1px solid var(--paper-line);
  color: var(--paper-ink);
}
.landing .nav-menu { background: var(--paper); border-top: 1px solid var(--paper-line); }
.landing .nav-menu a { color: var(--paper-ink); }
.landing .nav-menu-heading { color: var(--paper-muted); font-size: 13px; }

.landing footer.site-footer {
  background: var(--paper-2);
  border-top: 0;
  color: var(--paper-muted);
}
.landing .footer-logo { color: var(--paper-ink); }
.landing .footer-logo .mark { color: var(--p-orange); }
.landing .footer-tag { color: var(--paper-muted); font-size: 14px; }
.landing .footer-col h3 {
  color: var(--paper-ink);
  font-size: 14px;
  font-weight: 650;
  text-transform: none;
  letter-spacing: 0;
}
.landing .footer-col a { color: var(--paper-body); font-size: 14px; }
.landing .footer-col a:hover { color: var(--paper-ink); }
.landing .footer-bottom {
  margin-top: 40px;
  padding-top: 0;
  border-top: 0;
  font-size: 14px;
}
.landing .footer-bottom a { color: var(--paper-body); }
.landing .footer-bottom a:hover { color: var(--paper-ink); }

/* ---------- Transisi ganti tab ---------- */
.l-reply-text,
.l-cite,
.l-badge,
.l-meta-v,
.l-meta-x,
.l-meta-note,
.l-meta-av {
  transition: opacity 160ms var(--motion-ease);
}
.l-gate-body[data-swapping="1"] .l-reply-text,
.l-gate-body[data-swapping="1"] .l-cite,
.l-gate-body[data-swapping="1"] .l-badge,
.l-gate-body[data-swapping="1"] .l-meta-v,
.l-gate-body[data-swapping="1"] .l-meta-x,
.l-gate-body[data-swapping="1"] .l-meta-note,
.l-gate-body[data-swapping="1"] .l-meta-av { opacity: 0; }

/* ---------- Minim gerak ---------- */
@media (prefers-reduced-motion: reduce) {
  .l-cta,
  .l-tab,
  .l-text-link,
  .l-ws-dummy,
  .l-reply-text,
  .l-cite,
  .l-badge,
  .l-meta-v,
  .l-meta-x,
  .l-meta-note,
  .l-meta-av { transition: none; }
}

/* ---------- Kontras paksa ---------- */
@media (forced-colors: active) {
  .l-flow-dot.blocked { border: 2px solid CanvasText; }
  .l-tab[aria-selected="true"] { outline: 2px solid CanvasText; outline-offset: -2px; }
  .l-gate-panel { border: 2px solid CanvasText; }
  .l-art-ask, .l-art-portrait, .l-art-orbit, .l-art-tri { forced-color-adjust: none; }
}

/* ---------- Cetak ---------- */
@media print {
  .landing::before { display: none; }
  .l-hero-art, .l-gate-tabs { display: none; }
  .l-hero { grid-template-columns: 1fr; }
}