/* ============================================================
   AEVRA v2 — Design System "Observatory / Scientific Instrument"
   Sumber: handoff Claude Design (design_handoff_aevra_*)
   Dipakai bersama oleh: Beranda, Produk, Panduan, Tentang, FAQ
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
    --rd-nav-h: 70px; /* tinggi nav sticky terukur (CTA kapsul penentu) — dipakai .gd-toc panduan utk offset sticky kedua */
    --rd-bg: #030b1a;
    --rd-fg: #E8E8EF;
    --rd-fg-68: rgba(232, 232, 239, 0.68);
    --rd-fg-65: rgba(232, 232, 239, 0.65);
    --rd-fg-62: rgba(232, 232, 239, 0.62);
    --rd-fg-60: rgba(232, 232, 239, 0.6);
    --rd-fg-55: rgba(232, 232, 239, 0.55);
    --rd-fg-45: rgba(232, 232, 239, 0.45);
    --rd-fg-40: rgba(232, 232, 239, 0.4);
    --rd-fg-35: rgba(232, 232, 239, 0.35);
    --rd-gold: #D8B879;
    --rd-gold-hover: #EBD3A4;
    --rd-border-soft: rgba(232, 232, 239, 0.08);
    --rd-border-card: rgba(232, 232, 239, 0.12);
    --rd-border-row: rgba(232, 232, 239, 0.1);
    --rd-panel: #090E20;
    --rd-panel-hover: #0B1730;
    --rd-panel-gold: #091528;
    --rd-panel-trans: rgba(7, 16, 34, 0.55);
    /* Peredam bintang di section tengah — serona latar, alpha setara panel-trans */
    --rd-veil: rgba(3, 11, 26, 0.55);
    --rd-serif: 'Instrument Serif', Georgia, serif;
    --rd-sans: 'Instrument Sans', system-ui, sans-serif;
    --rd-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background-color: var(--rd-bg);
    background-image:
        radial-gradient(ellipse 70% 50% at 15% 25%, rgba(12,35,90,0.75) 0%, rgba(8,22,60,0.4) 40%, transparent 70%),
        radial-gradient(ellipse 45% 35% at 82% 18%, rgba(18,45,110,0.6) 0%, rgba(10,28,75,0.3) 40%, transparent 65%),
        radial-gradient(ellipse 90% 20% at 50% 52%, rgba(8,25,68,0.5) 0%, rgba(5,15,45,0.25) 50%, transparent 80%),
        radial-gradient(ellipse 50% 40% at 18% 78%, rgba(15,38,95,0.55) 0%, rgba(8,22,60,0.25) 50%, transparent 75%),
        radial-gradient(ellipse 55% 45% at 88% 72%, rgba(10,30,80,0.5) 0%, rgba(6,18,50,0.2) 50%, transparent 70%),
        radial-gradient(ellipse 35% 30% at 65% 38%, rgba(20,12,60,0.35) 0%, transparent 60%);
    background-attachment: fixed;
    color: var(--rd-fg);
    font-family: var(--rd-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--rd-gold); text-decoration: none; }
a:hover { color: var(--rd-gold-hover); }
::selection { background: rgba(216, 184, 121, 0.35); }

img { max-width: 100%; }

/* ---------- Keyframes ---------- */
@keyframes aevraSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes aevraSpinRev { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes aevraDash { to { stroke-dashoffset: 0; } }
@keyframes aevraIn { to { opacity: 1; } }
@keyframes aevraTwinkle {
    0%, 100% { opacity: 0; transform: scale(0.8); }
    50% { opacity: 0.85; transform: scale(1.2); }
}
@keyframes aevraTwinkleLg {
    0%, 100% { opacity: 0.1; transform: scale(0.85); }
    25% { opacity: 0.95; transform: scale(1.18); }
    55% { opacity: 0.45; transform: scale(0.92); }
    80% { opacity: 0.85; transform: scale(1.12); }
}
@keyframes aevraShoot {
    0% { opacity: 0; transform: rotate(-28deg) translateX(0); }
    1.5% { opacity: 0.9; }
    6% { opacity: 0; transform: rotate(-28deg) translateX(var(--travel, 400px)); }
    100% { opacity: 0; transform: rotate(-28deg) translateX(var(--travel, 400px)); }
}

/* Anchor tidak tertutup nav sticky saat smooth scroll */
[id] { scroll-margin-top: 84px; }

/* ---------- Layout ---------- */
.rd-container {
    max-width: 1280px;
    margin: 0 auto;
    padding-left: 36px;
    padding-right: 36px;
}

/* Selubung area baca: starfield itu satu lapis fixed, jadi kerapatannya tak
   bisa dibedakan per-section — yang diredam adalah tampaknya, bukan jumlahnya.
   Bintang tinggal 45% di section tengah, penuh di hero & coda.
   .rd-section-tinted menimpa baris ini dengan rona lebih terang (alpha sama),
   jadi ritme selang-seling terang/gelap tetap utuh.
   Setel --rd-veil untuk menambah/mengurangi peredaman. */
.rd-section {
    border-bottom: 1px solid var(--rd-border-soft);
    background: var(--rd-veil);
}

.rd-section > .rd-container {
    padding-top: 110px;
    padding-bottom: 110px;
}

.rd-section-tinted { background: var(--rd-panel-trans); }

/* ---------- Nav ---------- */
.rd-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    background: rgba(3, 11, 26, 0.72);
    border-bottom: 1px solid var(--rd-border-soft);
}

.rd-nav-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 36px;
}

.rd-nav-logo { display: inline-flex; align-items: center; }
.rd-nav-logo img { display: block; height: 24px; width: auto; }

.rd-nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
    font-family: var(--rd-mono);
    font-size: 11.5px;
    letter-spacing: 0.14em;
}

.rd-nav-links a { color: var(--rd-fg-65); transition: color 0.2s ease; }
.rd-nav-links a:hover { color: var(--rd-fg); }
.rd-nav-links a.rd-nav-active {
    color: var(--rd-gold);
    border-bottom: 1px solid rgba(216, 184, 121, 0.6);
    padding-bottom: 2px;
}

/* ---------- Tombol ---------- */
.rd-btn-gold {
    display: inline-block;
    font-family: var(--rd-mono);
    font-size: 12.5px;
    letter-spacing: 0.1em;
    color: #1a1408;
    background: linear-gradient(180deg, #fad96a 0%, #f5c842 60%, #e7b836 100%);
    border: 1px solid rgba(245, 200, 66, 0.5);
    padding: 15px 26px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 1px 0 rgba(255, 235, 180, 0.6) inset, 0 18px 40px -16px rgba(245, 200, 66, 0.55);
    transition: all 0.25s ease;
    cursor: pointer;
}

.rd-btn-gold:hover {
    color: #1a1408;
    transform: translateY(-2px);
    box-shadow: 0 1px 0 rgba(255, 235, 180, 0.75) inset, 0 22px 48px -16px rgba(245, 200, 66, 0.7);
}

.rd-btn-gold--sm {
    font-size: 11.5px;
    letter-spacing: 0.12em;
    padding: 10px 18px;
    box-shadow: 0 1px 0 rgba(255, 235, 180, 0.6) inset, 0 12px 28px -12px rgba(245, 200, 66, 0.55);
}

.rd-btn-gold--sm:hover {
    box-shadow: 0 1px 0 rgba(255, 235, 180, 0.75) inset, 0 16px 34px -12px rgba(245, 200, 66, 0.7);
}

.rd-btn-gold--lg { padding: 16px 30px; }

.rd-btn-outline {
    display: inline-block;
    font-family: var(--rd-mono);
    font-size: 12.5px;
    letter-spacing: 0.1em;
    color: var(--rd-fg);
    background: transparent;
    border: 1.5px solid rgba(245, 200, 66, 0.35);
    padding: 14px 26px;
    border-radius: 999px;
    white-space: nowrap;
    transition: all 0.25s ease;
    cursor: pointer;
}

.rd-btn-outline:hover {
    border-color: rgba(245, 200, 66, 0.6);
    background: rgba(245, 200, 66, 0.05);
    color: var(--rd-fg);
}

/* ---------- Eyebrow ---------- */
.rd-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--rd-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--rd-gold);
}

.rd-eyebrow-line {
    display: inline-block;
    width: 28px;
    height: 1px;
    background: var(--rd-gold);
    flex-shrink: 0;
}

.rd-eyebrow-line--soft { background: rgba(216, 184, 121, 0.5); }
.rd-eyebrow .rd-eyebrow-dim { color: var(--rd-fg-40); }

/* ---------- Heading ---------- */
.rd-h1 {
    margin: 0;
    font-family: var(--rd-serif);
    font-weight: 400;
    font-size: clamp(48px, 5.4vw, 74px);
    line-height: 1.04;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.rd-h1 em, .rd-h2 em, .rd-coda-text em { font-style: italic; color: var(--rd-gold); }

.rd-h2 {
    margin: 0;
    font-family: var(--rd-serif);
    font-weight: 400;
    font-size: clamp(36px, 3.6vw, 52px);
    line-height: 1.1;
    text-wrap: balance;
}

/* ---------- Starfield ----------
   Satu lapis global di <body> (bukan per-section): bintang menempel di
   viewport, konten lewat di depannya saat scroll — perilaku v1.
   z-index negatif dipilih alih-alih pola v1 (starfield z=0 + konten z=1):
   mengangkat konten bikin stacking context yang menjebak overlay di bawah
   nav sticky — lihat catatan .form-page di reskin-v2.css. */
.rd-stars {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.rd-stars span { position: absolute; opacity: 0; }

/* Bintang tak ikut tercetak */
@media print {
    .rd-stars { display: none; }
}

/* Gerak diredam: bintang tetap ada tapi diam (tanpa animasi opacity-nya 0 =
   tak terlihat, jadi dipatok manual); bintang jatuh disembunyikan karena
   tanpa gerak ia hanya garis diam. */
@media (prefers-reduced-motion: reduce) {
    .rd-stars .rd-star { animation: none; opacity: 0.6; }
    .rd-stars .rd-shoot { display: none; }
}

/* ---------- Lightbox ---------- */
.rd-lightbox {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(3, 11, 26, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    cursor: zoom-out;
}

.rd-lightbox img {
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.7);
}

.rd-lightbox-close {
    position: absolute;
    top: 20px;
    right: 28px;
    font-family: var(--rd-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    color: rgba(232, 232, 239, 0.7);
}

.rd-zoomable { cursor: zoom-in; }

/* ---------- Coda (penutup CTA) ---------- */
.rd-coda {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--rd-border-soft);
}

.rd-coda-inner {
    position: relative;
    max-width: 920px;
    margin: 0 auto;
    padding: 130px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 34px;
    text-align: center;
}

.rd-coda-text {
    margin: 0;
    font-family: var(--rd-serif);
    font-size: clamp(30px, 3.2vw, 44px);
    line-height: 1.3;
    text-wrap: balance;
}

.rd-coda-caption {
    font-family: var(--rd-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: var(--rd-fg-40);
}

/* ---------- Footer ---------- */
/* Bebas bintang, semateri dengan nav (blur + latar pekat) — tempat mata
   beristirahat di ujung halaman. Turunkan alpha kalau ingin bintang mengintip. */
.rd-footer {
    background: rgba(2, 8, 19, 0.94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.rd-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    padding: 48px 36px 32px;
}

.rd-footer-brand { display: flex; flex-direction: column; gap: 12px; }
.rd-footer-brand img { display: block; height: 72px; width: auto; }

.rd-footer-tagline {
    font-family: var(--rd-serif);
    font-style: italic;
    font-size: 13.5px;
    color: rgba(232, 232, 239, 0.5);
}

.rd-footer-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 56px;
}

.rd-footer-col { display: flex; flex-direction: column; gap: 10px; }

.rd-footer-head {
    font-family: var(--rd-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: var(--rd-fg-40);
    margin-bottom: 2px;
}

.rd-footer-col a {
    font-size: 14px;
    color: var(--rd-fg-68);
    transition: color 0.2s ease;
}

.rd-footer-col a:hover { color: var(--rd-gold); }

.rd-footer-base {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px 24px;
    padding: 22px 36px 40px;
    border-top: 1px solid var(--rd-border-soft);
}

.rd-footer-org {
    font-family: var(--rd-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    color: var(--rd-fg-55);
}

.rd-footer-legal {
    font-family: var(--rd-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    color: var(--rd-fg-35);
}

/* ---------- Responsif dasar ---------- */
@media (max-width: 900px) {
    :root { --rd-nav-h: 53px; }
    .rd-container { padding-left: 24px; padding-right: 24px; }
    .rd-section > .rd-container { padding-top: 72px; padding-bottom: 72px; }
    .rd-nav-inner { padding: 14px 24px; flex-wrap: wrap; }
    .rd-nav-links { gap: 18px; flex-wrap: wrap; }
    .rd-nav-cta { display: none; }
    .rd-footer-inner { flex-direction: column; align-items: flex-start; gap: 32px; }
    .rd-footer-cols { gap: 40px; }
    .rd-footer-base { flex-direction: column; align-items: flex-start; }
}

/* HP: logo + 5 link tak muat sebaris — susun terpusat dua tingkat, link tetap sebaris */
@media (max-width: 640px) {
    :root { --rd-nav-h: 73px; }
    .rd-nav-inner { flex-direction: column; align-items: center; gap: 11px; padding: 13px 16px 12px; }
    .rd-nav-logo img { height: 20px; }
    .rd-nav-links { gap: 18px; font-size: 10px; letter-spacing: 0.12em; flex-wrap: nowrap; }
    [id] { scroll-margin-top: calc(var(--rd-nav-h) + 16px); }
}