/* ========================================================
   CITRINE • LANDING PAGE PUBLIK: dasar, header, hero, masalah, footer
   Alasan keputusan utama (antislop R-31):
   - Tema gelap graphite: sama dengan tema default dashboard (Citrine Graphite), jadi pindah ke /v2 tidak terasa ganti produk.
   - Warna: netral graphite + emas citrine; gradasi emas ke oranye hanya di tombol utama karena itu gradasi logo.
     Merah hanya dipakai di ilustrasi peta untuk menandai tingkat siaga tinggi (status nyata, bukan hiasan).
   - Huruf: Plus Jakarta Sans untuk judul, typeface buatan studio Indonesia untuk identitas Jakarta dan sudah
     dimuat dashboard; Inter untuk teks karena itu font default dashboard.
   - Motif identitas: sudut terpotong 45° (dari logo) pada tombol utama, panel peta, dan panel akses.
   Bagian tengah ada di landing_sections.css.
   ======================================================== */
:root {
  --bg: #0b0b0c;
  --bg-2: #111113;
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);
  --text: #f2f2f4;
  --text-2: #bdbdc5;
  --muted: #92929a;
  --gold: #e0b04a;
  --gold-rgb: 224, 176, 74;
  --on-gold: #1a1206;
  --paper: #f2efe7;
  --ink: #17171b;
  --ink-2: #4b4b53;
  --gold-ink: #7d5a16;
  --f-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --f-body: "Inter", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --cut: 14px;   /* ukuran potongan sudut motif logo */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.65 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; }
a { color: inherit; }
/* Spasi antarkata Plus Jakarta Sans sempit di ukuran besar, jadi dilebarkan sedikit agar kata tidak menempel */
h1, h2, h3 { font-family: var(--f-display); margin: 0; letter-spacing: -0.02em; word-spacing: 0.06em; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 50; background: var(--gold); color: var(--on-gold); padding: 12px 16px; line-height: 20px; font-weight: 600; }
.skip:focus { top: 12px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.section-title { font-size: clamp(30px, 3.8vw, 50px); line-height: 1.08; font-weight: 600; }

/* ---------- tombol: emas solid dengan sorot tipis di tepi atas, seperti logam; satu-satunya elemen emas pekat ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 10px 0 24px; font: 600 15px/1 var(--f-body); text-decoration: none; border-radius: 10px; }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 14px; border-radius: 8px; }
.btn-primary {
  color: var(--on-gold); background: #f1b53c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 0 rgba(120, 70, 0, 0.25), 0 8px 24px -10px rgba(241, 181, 60, 0.8);
  transition: background-color .2s, transform .2s;
}
.btn-primary:hover { background: #f6c55a; transform: translateY(-1px); }
.btn-primary:active { transform: none; }
/* Panah hanya di tombol utama besar: menandai bahwa tombol ini membawa ke aplikasi */
.btn-ico { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 7px; background: rgba(26, 18, 6, 0.12); }
.btn-ico svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.btn-primary:hover .btn-ico svg { transform: translateX(2px); }
.text-link { color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(var(--gold-rgb), 0.6); text-underline-offset: 6px; text-decoration-thickness: 2px; padding: 12px 4px; }
.text-link:hover { text-decoration-color: var(--gold); }

/* ---------- header: satu-satunya elemen ber-blur, supaya tetap terbaca saat menempel di atas konten ---------- */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 36px; padding: 14px var(--gutter); background: rgba(11, 11, 12, 0.82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.brand { display: block; padding: 8px 0; }
.brand img { height: 28px; width: auto; }
.top-nav { display: flex; gap: 28px; margin-left: auto; }
.top-nav a { text-decoration: none; color: var(--text-2); font-size: 14px; padding: 10px 0; }
.top-nav a:hover { color: var(--text); }

/* ---------- hero: teks kiri, bola dunia kanan; bola dunia satu-satunya elemen bergerak di layar pertama ---------- */
.hero { max-width: 1280px; margin: 0 auto; padding: clamp(48px, 8vh, 96px) var(--gutter) 72px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
h1 { font-size: clamp(38px, 4.8vw, 66px); line-height: 1.04; font-weight: 700; }
.lede { margin: 26px 0 0; max-width: 560px; font-size: clamp(16px, 1.3vw, 18px); color: var(--text-2); }
.hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; margin-top: 38px; }
.hero-globe { margin: 0; justify-self: end; width: 100%; max-width: 560px; }
.globe-wrap { position: relative; }
.hero-globe canvas { position: relative; display: block; width: 100%; aspect-ratio: 1; }

/* ---------- guilloche: motif keamanan seperti uang kertas/paspor, emas tipis di belakang konten ---------- */
.guilloche { display: block; pointer-events: none; }
.guilloche .g-line { fill: none; stroke: rgba(var(--gold-rgb), 0.16); stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.guilloche .g-soft { stroke: rgba(var(--gold-rgb), 0.09); }
/* Roset membingkai bola dunia seperti segel; berputar sangat pelan agar terasa hidup tanpa menyaingi bola dunia */
.g-rosette { position: absolute; inset: -4%; width: 108%; height: 108%; }
.g-spin { transform-origin: 0 0; animation: g-spin 240s linear infinite; }
@keyframes g-spin { to { transform: rotate(360deg); } }
/* Latar guilloche penuh: bergerak pelan saat digulir (paralaks di landing_guilloche.js) sehingga terasa jauh di
   belakang konten. Garisnya sangat tipis agar kontras teks tetap terjaga. */
.g-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 0; will-change: transform; }
.g-bg .g-line { stroke: rgba(var(--gold-rgb), 0.075); }
.g-bg .g-soft { stroke: rgba(var(--gold-rgb), 0.04); }
.top, main, .foot { position: relative; z-index: 1; }
.top { position: sticky; }
.g-band { height: 56px; overflow: hidden; border-top: 1px solid var(--line); background: rgba(17, 17, 19, 0.6); }
.g-band svg { width: 100%; height: 100%; }
.g-band .g-line { stroke: rgba(var(--gold-rgb), 0.18); }
.hero-globe figcaption { margin-top: 6px; text-align: center; font-size: 13px; color: var(--muted); }

/* ---------- masalah: kalimat besar di kiri, penjelasan di kanan (komposisi asimetris) ---------- */
.problem { padding: 110px 0; border-top: 1px solid var(--line); background: rgba(17, 17, 19, 0.55); }
.problem-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.problem h2 { font-size: clamp(32px, 4vw, 54px); line-height: 1.06; font-weight: 700; }
.problem-body p { margin: 0; color: var(--text-2); font-size: 17px; }
.problem-body p + p { margin-top: 20px; }

/* Logo berjalan: logo resmi dengan warna aslinya, masing-masing di keping putih agar logo gelap tetap terlihat
   (keping gelap untuk logo yang memang putih). Dua baris bergerak berlawanan arah; berhenti saat di-hover. */
.sources-run { margin-top: 64px; }
.run-label { margin: 0 auto 14px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.run-label + .marquee { margin-bottom: 30px; }
.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); }
.track { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; width: max-content; animation: run 48s linear infinite; }
.marquee.rev .track { animation-direction: reverse; animation-duration: 42s; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes run { to { transform: translateX(calc(-50% - 8px)); } }
.chip { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 68px; padding: 0 26px; background: #fff; border-radius: 12px; }
.chip.dark { background: #1b1b1f; border: 1px solid var(--line-2); }
.chip img { height: var(--h, 24px); width: auto; }
.chip span { font: 700 21px/1 "Inter", sans-serif; letter-spacing: -0.02em; white-space: nowrap; }
.t-ink { color: #17171b; }
.t-tiktok { color: #000; }
.t-gnews { color: #5f6368; font-weight: 500 !important; }
.t-telegram { color: #229ed9; font-weight: 600 !important; }
.t-gdelt { color: #1d3557; font-weight: 800 !important; letter-spacing: 0.04em !important; }
.chip img + span { margin-left: 2px; }
.t-usni { color: #b3121b; }
.src-note { margin: 4px auto 0; font-size: 12px; color: var(--muted); }

/* ---------- footer: satu baris, karena memang hanya ada tiga hal yang perlu ditautkan ---------- */
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; padding: 32px var(--gutter); border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.foot img { height: 22px; width: auto; }
.foot p { margin: 0; flex: 1; }
.foot a { display: inline-block; color: var(--text-2); padding: 12px 0; }

/* ---------- gerak: judul bagian memudar masuk saat terlihat, membantu mata menemukan awal bagian ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- responsif ---------- */
@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-bottom: 48px; }
  .hero-globe { justify-self: center; max-width: 440px; }
  .problem-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .sources-run { margin-top: 44px; }
}
@media (max-width: 640px) {
  .top { gap: 12px; }
  .top-nav { display: none; }
  .top .btn { margin-left: auto; }
  .hero-act .btn { flex: 1 1 100%; }
  .chip { height: 56px; padding: 0 18px; }
  .chip img { height: calc(var(--h, 24px) * 0.82); }
  .chip span { font-size: 18px; }
  .problem { padding: 80px 0; }
  .foot { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { transform: none; transition: opacity .7s ease; }
  .g-spin { animation-duration: 900s; }
  .track { animation-duration: 140s; }
  .marquee.rev .track { animation-duration: 120s; }
}