/* Homepage → palet P4 terkunci (2026-11-01, izin owner). Dimuat SETELAH home.css; home.css sendiri tidak diubah.
   Void Ink #060119 · Midnight #22155C · Electric Violet #3B2396 (cahaya saja) · Copper #E67F4C · Off-White #FAFAFA · Mist #B2B2B2 */
:root {
  --color-background: #060119;
  --color-foreground: #FAFAFA;
  --color-card: #0d0630;
  --color-primary: #E67F4C;
  --color-primary-hover: #E27036;
  --color-secondary: #3B2396;
  --color-accent: #3B2396;
  --color-muted-foreground: #B2B2B2;
  --color-border: #2F2640;
  --color-newsletter-bg: #22155C;
  --gradient-primary: linear-gradient(160deg, #3B2396 0%, #22155C 58%, rgba(6, 1, 25, 0) 100%);
  --gradient-hero: linear-gradient(135deg, #060119 0%, #22155C 50%, #060119 100%);
  --gradient-text: linear-gradient(135deg, #E67F4C, #E67F4C);
}

/* Latar: tanpa mesh/jaringan/partikel (VIS §10). Void Ink + satu Light Plane dari kanan atas. */
.hero-network, .career-network { display: none !important; }
.hero-pattern, .career-pattern { background: none !important; }
.hero-pattern::after, .career-pattern::after {
  content: ""; position: absolute; top: -10%; right: 8%; width: 28%; height: 130%;
  transform: skewX(-20deg); transform-origin: top right; pointer-events: none;
  background: linear-gradient(160deg, #3B2396 0%, #22155C 58%, rgba(6, 1, 25, 0) 100%);
}
@media (max-width: 767px) { .hero-pattern::after, .career-pattern::after { width: 18%; right: -4%; transform-origin: bottom right; } }
.orient { background: #060119; position: relative; }
/* Kartu hero: foto gelap → teks terang, overlay agar terbaca */
.card-background-image img { filter: saturate(0.9); }
.card-large .card-large-title, .card-large .card-large-description { color: #FAFAFA; }
.card-large .badge-secondary { color: #FAFAFA; }
/* Newsletter: tanpa bola cahaya (Rectangle9) */
.newsletter { background-image: none !important; background-color: #060119 !important; }
.hero-pattern, .career-pattern { overflow: hidden; }
/* Kartu hero berfoto: scrim Void Ink supaya teks terbaca; tombol kartu = outline (Copper hanya tombol utama hero) */
.hero-content-right .card-background-image::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 1, 25, 0.62) 0%, rgba(6, 1, 25, 0.9) 100%);
}
.hero-content-right .card-background-image { position: absolute; }
.hero-content-right .btn { background: transparent !important; border: 1px solid rgba(250, 250, 250, 0.45) !important; color: #FAFAFA !important; box-shadow: none !important; }
.hero-content-right .btn:hover { background: rgba(250, 250, 250, 0.08) !important; }
/* Pill hero → eyebrow polos (sama dengan halaman dalam) */
.hero .badge-welcome { border: 0 !important; padding: 0 !important; background: none !important; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; font-size: .75rem; color: #B2B2B2; }
.hero .badge-welcome::before { display: none !important; }
.hero-content-right .badge::before { background: #B2B2B2 !important; }

/* a11y 2026-11-02: teks di atas Copper = Void Ink (putih di atas #E67F4C hanya 2,8:1). Sama dengan VIS2. */
.btn-primary, .nav-right .btn-primary, .mobile-menu .btn-primary, .btn-default-rounded { color: #060119; }
.btn-primary:hover, .btn-default-rounded:hover, .btn-outline-primary:hover, .btn-ghost:hover { color: #060119; }

/* a11y 2026-11-02: skip link, fokus keyboard, dan reduced motion (setara halaman dalam) */
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 2000; padding: 0.5rem 1rem; border-radius: 8px;
  background: #E67F4C; color: #060119; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 2px solid #E67F4C; outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* 2026-11-04 (deck slide 3): tombol dua kartu kecil di hero sejajar. Isi kartu mengisi tinggi kartu,
   .card-button-wrapper (margin-top:auto di home.css) terdorong ke dasar kartu. */
.hero-content-right .card:not(.card-large) { display: flex; flex-direction: column; }
.hero-content-right .card:not(.card-large) .card-content { flex: 1 1 auto; }