/* :root {
/* --bg-main: #070a12;
/* --bg-surface: #0e1322;
/* --bg-card: rgba(15, 22, 38, 0.75);
/* --bg-card-hover: rgba(23, 33, 56, 0.9);
/* --border-line: rgba(255, 255, 255, 0.08);
/* --border-cyan: rgba(0, 242, 254, 0.35);
/* --border-purple: rgba(139, 92, 246, 0.35);

--cyan-primary: #00d2ff;
--cyan-glow: #00f2fe;
--purple-primary: #8b5cf6;
--purple-glow: #a855f7;

--text-main: #f8fafc;
--text-muted: #94a3b8;
--text-dim: #64748b;

--grad-primary: linear-gradient(135deg, #00f2fe 0%, #8b5cf6 100%);
--grad-purple-cyan: linear-gradient(135deg, #8b5cf6 0%, #00f2fe 100%);
--grad-glass: linear-gradient(135deg, rgba(0, 242, 254, 0.05), rgba(139, 92, 246, 0.05));
--grad-card: linear-gradient(180deg, rgba(18, 26, 43, 0.8) 0%, rgba(10, 14, 26, 0.9) 100%);

--font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-serif: "Playfair Display", Georgia, serif;

--container-width: 1200px;
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-pill: 9999px;

--ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
}

{
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
scroll-padding-top: 90px;
background-color: var(--bg-main);
color-scheme: dark;
}

body {
font-family: var(--font-sans);
background-color: var(--bg-main);
color: var(--text-main);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
min-height: 100vh;
display: flex;
flex-direction: column;
}

img {
max-width: 100%;
height: auto;
display: block;
}

a {
color: inherit;
text-decoration: none;
}
/* STREAMING_CHUNK:Styling custom scrollbar... /
/ ==========================================================================3. CUSTOM SCROLLBARKustomisasi tampilan bilah gulir (scrollbar) pada browser berbasis Webkit (Chrome, Edge, Safari).========================================================================== 
/*  ::-webkit-scrollbar {width: 8px;}::-webkit-scrollbar-track {background: var(--bg-main);}::-webkit-scrollbar-thumb {background: #1e293b;border-radius: 4px;}::-webkit-scrollbar-thumb:hover {background: var(--purple-primary);}

/* STREAMING_CHUNK:Configuring layout container and progress bar... /
/ ==========================================================================4. LAYOUT UTAMA & SPA PROGRESS BARPembungkus konten tengah dan indikator pemuatan halaman SPA.========================================================================== /
/ Kontainer pembungkus tengah 
/* .container {width: 100%;max-width: var(--container-width);margin: 0 auto;padding: 0 20px;}/* Progress bar indikator pemuatan halaman SPA di bagian paling atas */
/* #spa-progress {position: fixed;top: 0;left: 0;width: 0%;height: 3px;background: var(--grad-primary);z-index: 10000;transition: width 0.3s ease, opacity 0.3s ease;box-shadow: 0 0 12px var(--cyan-glow), 0 0 16px var(--purple-glow);}/* STREAMING_CHUNK:Styling typography and text accents... /
/ ==========================================================================5. TIPOGRAFI & EFEK TEKSUtility class untuk penegasan warna teks, gradasi, dan ukuran judul.========================================================================== /
/ Teks bercahaya warna Cyan */
/* .cyan {color: var(--cyan-glow);text-shadow: 0 0 12px rgba(0, 242, 254, 0.4);}/* Teks bercahaya warna Ungu */
/* .purple {color: var(--purple-glow);text-shadow: 0 0 12px rgba(168, 85, 247, 0.4);}/* Teks dengan warna gradasi */
/* .grad-text {background: var(--grad-primary);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}/* Judul Utama (H1) */
/* .h1 {font-size: clamp(2.2rem, 5vw, 3.8rem);font-weight: 800;line-height: 1.15;letter-spacing: -0.02em;}/* Judul Sekunder (H2) */
/* .h2 {font-size: clamp(1.75rem, 3.8vw, 2.75rem);font-weight: 800;line-height: 1.2;letter-spacing: -0.01em;}/* Teks Sub-judul / Deskripsi Pembuka */
/* .lede {color: var(--text-muted);font-size: clamp(0.98rem, 1.8vw, 1.15rem);max-width: 680px;}/* STREAMING_CHUNK:Styling badges and pills... /
/ ==========================================================================6. BADGES & PILLSKomponen label kecil / pill pemberitahuan di atas judul.========================================================================== */
/* .badge,.eyebrow {display: inline-flex;align-items: center;gap: 8px;font-size: 0.78rem;font-weight: 700;letter-spacing: 0.06em;text-transform: uppercase;padding: 0.4rem 1rem;border-radius: var(--radius-pill);background: rgba(0, 242, 254, 0.08);border: 1px solid var(--border-cyan);color: var(--cyan-glow);box-shadow: 0 0 15px rgba(0, 242, 254, 0.15);margin-bottom: 1.2rem;}/* Variasi Badge warna ungu */
/* .badge--purple {background: rgba(139, 92, 246, 0.08);border-color: var(--border-purple);color: var(--purple-glow);box-shadow: 0 0 15px rgba(139, 92, 246, 0.15);}/* STREAMING_CHUNK:Styling button components... /
/ ==========================================================================7. TOMBOL (BUTTONS)Gaya dasar tombol beserta variasi warnanya (Cyan, Purple, Outline, Small).========================================================================== /
/ Base Class Tombol */
/* .btn {display: inline-flex;align-items: center;justify-content: center;gap: 0.6rem;padding: 0.85rem 1.75rem;font-size: 0.95rem;font-weight: 700;border-radius: var(--radius-md);border: 1px solid transparent;cursor: pointer;transition: all 0.3s var(--ease-spring);white-space: nowrap;touch-action: manipulation;}/* Tombol Variasi Cyan */
/* .btn--cyan {background: var(--grad-primary);color: #030712;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);box-shadow: 0 4px 20px rgba(0, 242, 254, 0.35);}.btn--cyan:hover {transform: translateY(-2px);box-shadow: 0 8px 30px rgba(0, 242, 254, 0.55);}/* Tombol Variasi Purple */
/* .btn--purple {background: var(--grad-purple-cyan);color: #ffffff;box-shadow: 0 4px 20px rgba(139, 92, 246, 0.35);}.btn--purple:hover {transform: translateY(-2px);box-shadow: 0 8px 30px rgba(139, 92, 246, 0.55);}/* Tombol Transparan / Outline */
/* .btn--outline {background: rgba(255, 255, 255, 0.03);color: var(--text-main);border-color: var(--border-line);backdrop-filter: blur(10px);}.btn--outline:hover {border-color: var(--cyan-glow);color: var(--cyan-glow);background: rgba(0, 242, 254, 0.08);transform: translateY(-2px);}/* Ukuran Tombol Kecil */
/* .btn--sm {padding: 0.55rem 1.1rem;font-size: 0.85rem;border-radius: var(--radius-pill);}/* STREAMING_CHUNK:Styling topbar notification... /
/ ==========================================================================8. TOPBAR NOTIFIKASIBilah pengumuman kecil di paling atas halaman.========================================================================== */
/* .topbar {background: linear-gradient(90deg, #090e1c 0%, #11182c 50%, #090e1c 100%);border-bottom: 1px solid var(--border-line);font-size: 0.82rem;font-weight: 600;color: var(--text-muted);text-align: center;padding: 0.5rem 0;}.topbar span {display: inline-flex;align-items: center;gap: 6px;}/* STREAMING_CHUNK:Styling header and navigation bar... /
/ ==========================================================================9. NAVBAR / HEADER UTAMAMenu navigasi melayang (sticky) dengan efek glassmorphism.========================================================================== */
/* .nav {position: sticky;top: 0;z-index: 100;background: rgba(7, 10, 18, 0.82);backdrop-filter: blur(16px) saturate(180%);-webkit-backdrop-filter: blur(16px) saturate(180%);border-bottom: 1px solid var(--border-line);transition: all 0.3s ease;}.nav__inner {display: flex;align-items: center;justify-content: space-between;height: 72px;}/* Logo Brand */
/* .brand {font-size: 1.25rem;font-weight: 800;color: #fff;display: flex;align-items: center;gap: 10px;letter-spacing: -0.02em;}/* Ikon Logo */
/* .brand-icon {width: 32px;height: 32px;border-radius: var(--radius-sm);background: var(--grad-primary);display: flex;align-items: center;justify-content: center;font-size: 1rem;box-shadow: 0 0 15px rgba(0, 242, 254, 0.4);}/* Container Link Navigasi Desktop */
/* .nav__links {display: flex;align-items: center;gap: 1.6rem;}/* Item Link Navigasi Biasa */
/* .nav__links > a:not(.btn) {font-size: 0.92rem;font-weight: 600;color: var(--text-muted);transition: color 0.2s;padding: 0.4rem 0;}.nav__links > a:not(.btn):hover,.nav__links > a.active {color: var(--cyan-glow);}/* STREAMING_CHUNK:Styling dropdown menu... /
/ ==========================================================================10. MENU DROPDOWN NAVIGASISub-menu melayang pada item navigasi yang memiliki anak menu.========================================================================== */
/* .nav__group {position: relative;}/* Tombol Pembuka Dropdown */
/* .nav__group-btn {background: none;border: 0;font-family: inherit;font-size: 0.92rem;font-weight: 600;color: var(--text-muted);display: inline-flex;align-items: center;gap: 0.35rem;cursor: pointer;padding: 0.4rem 0;transition: color 0.2s;}/* Panah Indikator (Caret) */
/* .nav__group-btn .caret {font-size: 0.7em;transition: transform 0.25s var(--ease-spring);}.nav__group:hover .nav__group-btn,.nav__group-btn.is-active {color: var(--purple-glow);}.nav__group:hover .caret {transform: rotate(180deg);}/* Submenu Melayang (Dropdown Container) */
/* .nav__submenu {position: absolute;top: 100%;left: 50%;transform: translateX(-50%) translateY(10px);min-width: 260px;background: rgba(14, 19, 34, 0.95);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);border: 1px solid var(--border-purple);border-radius: var(--radius-md);padding: 0.6rem;display: flex;flex-direction: column;gap: 0.25rem;opacity: 0;visibility: hidden;pointer-events: none;transition: all 0.25s var(--ease-spring);box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(139, 92, 246, 0.2);z-index: 120;}.nav__group:hover .nav__submenu {opacity: 1;visibility: visible;pointer-events: auto;transform: translateX(-50%) translateY(4px);}/* Item Link di Dalam Submenu */
/* .nav__submenu a {padding: 0.6rem 0.85rem;border-radius: var(--radius-sm);font-size: 0.88rem;color: var(--text-muted);transition: all 0.2s;}.nav__submenu a:hover,.nav__submenu a.active {background: rgba(139, 92, 246, 0.15);color: #ffffff;padding-left: 1.1rem;}/* STREAMING_CHUNK:Styling mobile navigation toggle and drawer... /
/ ==========================================================================11. NAVIGASI MOBILE (HAMBURGER & DRAWER OVERLAY)Tombol toggle dan drawer menu yang muncul pada layar HP/Tablet (<= 920px).========================================================================== /
/ Tombol Hamburger */
/* .nav__toggle {display: none;flex-direction: column;justify-content: center;gap: 5px;background: rgba(255, 255, 255, 0.05);border: 1px solid var(--border-line);border-radius: var(--radius-sm);padding: 10px;cursor: pointer;z-index: 110;}.nav__toggle span {width: 22px;height: 2px;background: var(--text-main);border-radius: 2px;transition: all 0.3s ease;}/* Animasi Transformasi Hamburger Menjadi Silang (X) saat Terbuka */
/* .nav__toggle.is-open span:nth-child(1) {transform: translateY(7px) rotate(45deg);}.nav__toggle.is-open span:nth-child(2) {opacity: 0;}.nav__toggle.is-open span:nth-child(3) {transform: translateY(-7px) rotate(-45deg);}/* Responsive Rules untuk Layar <= 920px (Mobile Nav Drawer) */
/* @media (max-width: 920px) {.nav__toggle {display: flex;}.nav__links {position: fixed;top: 0;right: -100%;width: 82%;max-width: 360px;height: 100vh;background: rgba(11, 15, 26, 0.98);backdrop-filter: blur(25px);-webkit-backdrop-filter: blur(25px);border-left: 1px solid var(--border-line);padding: 85px 24px 30px;flex-direction: column;align-items: stretch;justify-content: flex-start;gap: 0.8rem;transition: right 0.35s var(--ease-spring);box-shadow: -10px 0 30px rgba(0, 0, 0, 0.8);overflow-y: auto;z-index: 95;}.nav__links.is-open {right: 0;}.nav__links > a:not(.btn) {padding: 0.85rem 0;border-bottom: 1px solid var(--border-line);}.nav__group {width: 100%;}.nav__group-btn {width: 100%;justify-content: space-between;padding: 0.85rem 0;border-bottom: 1px solid var(--border-line);}.nav__submenu {position: static;opacity: 1;visibility: visible;pointer-events: auto;transform: none !important;background: rgba(255, 255, 255, 0.02);border: none;box-shadow: none;padding: 0.4rem 0 0.4rem 0.8rem;margin-top: 0.4rem;display: none;}.nav__group.is-expanded .nav__submenu {display: flex;}.nav__group.is-expanded .caret {transform: rotate(180deg);}}/* STREAMING_CHUNK:Styling hero sections... /
/ ==========================================================================12. HERO SECTIONSBagian utama (Hero) di bagian atas halaman depan dan halaman pendukung.========================================================================== /
/ Hero Utama */
/* .hero {position: relative;padding: 90px 0 80px;overflow: hidden;background: radial-gradient(circle at 50% -20%, rgba(0, 242, 254, 0.15) 0%, rgba(139, 92, 246, 0.1) 40%, transparent 75%);}/* Efek Glow Bulat di Belakang Hero */
/* .hero::before {content: "";position: absolute;top: 15%;left: 50%;transform: translateX(-50%);width: 600px;height: 300px;background: var(--grad-primary);filter: blur(140px);opacity: 0.15;pointer-events: none;border-radius: 50%;}.hero__inner {position: relative;z-index: 2;text-align: center;max-width: 860px;margin: 0 auto;}/* Area Tombol Aksi (CTA) pada Hero */
/* .hero__cta {display: flex;align-items: center;justify-content: center;gap: 1.2rem;flex-wrap: wrap;margin-top: 2.2rem;}/* Sub-Hero untuk Halaman Sekunder */
/* .page-hero {padding: 60px 0 40px;border-bottom: 1px solid var(--border-line);background: radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.12) 0%, transparent 70%);}/* STREAMING_CHUNK:Styling grid layouts and card components... /
/ ==========================================================================13. GRID & CARDS DESIGNLayout kolom grid dan tampilan komponen kartu interaktif.========================================================================== /
/ Grid 2 Kolom Responsif */
/* .grid-2 {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 1.8rem;}/* Grid 3 Kolom Responsif */
/* .grid-3 {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 1.8rem;}/* Komponen Kartu (Card Base) */
/* .card {background: var(--grad-card);border: 1px solid var(--border-line);border-radius: var(--radius-lg);padding: 2rem;transition: all 0.35s var(--ease-spring);position: relative;display: flex;flex-direction: column;backdrop-filter: blur(10px);}.card:hover {border-color: var(--border-cyan);transform: translateY(-6px);box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 25px rgba(0, 242, 254, 0.18);}/* Kartu dengan Aksyen Hover Warna Ungu */
/* .card--purple:hover {border-color: var(--border-purple);box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 25px rgba(139, 92, 246, 0.2);}/* Pembungkus Ikon Kartu */
/* .card__icon {width: 52px;height: 52px;border-radius: var(--radius-md);background: rgba(0, 242, 254, 0.08);border: 1px solid var(--border-cyan);display: flex;align-items: center;justify-content: center;font-size: 1.6rem;margin-bottom: 1.4rem;box-shadow: 0 0 15px rgba(0, 242, 254, 0.15);}/* Pembungkus Ikon Kartu Warna Ungu */
/* .card__icon--purple {background: rgba(139, 92, 246, 0.08);border-color: var(--border-purple);box-shadow: 0 0 15px rgba(139, 92, 246, 0.15);}/* STREAMING_CHUNK:Styling SPA animated container and footer... /
/ ==========================================================================14. SPA ANIMATED CONTAINER & FOOTERTransisi pemindahan konten SPA serta struktur bagian footer paling bawah.========================================================================== /
/ Container Konten Utama SPA */
/* #app-content {flex: 1;transition: opacity 0.22s ease-out, transform 0.22s ease-out;opacity: 1;transform: translateY(0);}/* Kelas Animasi Transisi Halaman SPA */
/* #app-content.spa-animating {opacity: 0;transform: translateY(8px);}/* Footer Utama */
/* .footer {background: #04060c;border-top: 1px solid var(--border-line);padding: 60px 0 30px;margin-top: 80px;}/* Grid Layout Footer */
/* .footer__grid {display: grid;grid-template-columns: 2fr repeat(3, 1fr);gap: 2.5rem;margin-bottom: 40px;}/* Media Query Responsif Footer */
/* @media (max-width: 820px) {.footer__grid {grid-template-columns: 1fr 1fr;}}@media (max-width: 520px) {.footer__grid {grid-template-columns: 1fr;}}/* Elemen Branding di Footer */
/* .footer__brand {display: flex;flex-direction: 
/* column;gap: 1rem;}/* Judul Kolom Footer */
/* .footer__title {font-size: 1rem;font-weight: 700;color: #fff;margin-bottom: 1rem;}/* Daftar Link Footer */
/* .footer__links {list-style: none;display: flex;flex-direction: column;gap: 0.65rem;}.footer__links a {color: var(--text-muted);font-size: 0.9rem;transition: color 0.2s;}.footer__links a:hover {color: var(--cyan-glow);}/* Bagian Bawah Footer (Hak Cipta / Copyright) */
/* .footer__bottom {border-top: 1px solid rgba(255, 255, 255, 0.05);padding-top: 25px;display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;gap: 1rem;color: var(--text-dim);font-size: 0.85rem;}