/**
* NES LEARNING CENTER — KOMPONEN BERSAMA (satu-satunya sumber)
* =====================================================================
* Pasangan file assets/nes-tokens.css. Konsolidasi dari audit desain
* sistem 24 Sept 2026: sebelumnya .btn ditulis ulang 3x dengan padding
* berbeda-beda per halaman (dan login.html bahkan tidak memakai .btn
* sama sekali), lalu ada banyak nama berbeda untuk komponen yang secara
* visual sama (ic-ring/ic-circle/ic-sq/path-icon untuk wadah ikon,
* badge/tag/cat untuk label kecil). File ini adalah versi TUNGGAL yang
* jadi acuan ke depan.
*
* Load SETELAH nes-tokens.css:
*
*
*
* CATATAN MIGRASI: kelas kartu/ikon LAMA yang sudah ada di tiap halaman
* (why-card, pilar2-card, testi-card, path-card, program2-card, ic-ring,
* dst) BELUM diganti satu-satu ke sini — itu perubahan visual per bagian
* yang perlu ditinjau dulu (lihat catatan deploy). File ini menyediakan
* .card / .icon-badge / .badge sebagai kelas BAKU untuk pekerjaan baru,
* supaya tidak ada nama ke-4/ke-5 lagi yang lahir.
* =====================================================================
*/
/* ==================== BUTTON ====================
Satu definisi dasar + 2 ukuran (-sm, -lg) + 3 varian warna. Ganti
.btn-primary/.btn-gold/.btn-ghost/.btn-sm lokal di tiap halaman
dengan kelas ini — jangan definisikan ulang. */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:12px 24px;border-radius:999px;font-weight:700;font-size:14.5px;
border:none;cursor:pointer;text-decoration:none;
transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.btn:disabled{opacity:0.6;cursor:not-allowed;transform:none;}
.btn-sm{padding:9px 18px;font-size:13px;}
.btn-lg{padding:15px 30px;font-size:16px;}
.btn-block{display:flex;width:100%;}
.btn-primary{background:var(--navy-900);color:var(--white);box-shadow:var(--shadow-tight);}
.btn-primary:hover:not(:disabled){transform:translateY(-2px);background:var(--navy-950);}
.btn-gold{background:var(--gold-500);color:var(--navy-950);}
.btn-gold:hover:not(:disabled){transform:translateY(-2px);background:var(--gold-600);}
.btn-ghost{background:transparent;color:var(--navy-900);border:1.5px solid var(--navy-900);}
.btn-ghost:hover:not(:disabled){background:var(--navy-900);color:var(--white);}
.btn-danger{background:var(--danger-bg);color:var(--danger);}
.btn-danger:hover:not(:disabled){background:var(--danger);color:var(--white);}
/* ==================== EYEBROW / LABEL KECIL ====================
PENTING soal kontras: teks emas polos di atas latar TERANG memakai
--gold-700 (bukan gold-500/600 — itu gagal AA, lihat nes-tokens.css).
Di atas latar GELAP (navy), tetap boleh pakai gold-300. */
.eyebrow{
font-family:'Space Mono',monospace;text-transform:uppercase;letter-spacing:0.14em;
font-size:12px;font-weight:700;color:var(--gold-700);
display:inline-flex;align-items:center;gap:8px;
}
.band-dark .eyebrow,.on-dark.eyebrow{color:var(--gold-300);}
/* ==================== BADGE ====================
Pengganti badge/tag/cat/cta2-tag yang sebelumnya masing-masing punya
nama & styling sendiri. Warna default netral; tambahkan salah satu
modifier untuk status (semua sudah lolos kontras AA di atas warna
-bg pasangannya). */
.badge{
display:inline-flex;align-items:center;gap:5px;
padding:4px 12px;border-radius:999px;
font-size:11.5px;font-weight:700;letter-spacing:.03em;
}
.badge-neutral{background:var(--paper-dim);color:var(--ink-soft);}
.badge-success{background:var(--success-bg);color:var(--success);}
.badge-danger{background:var(--danger-bg);color:var(--danger);}
.badge-warning{background:var(--warning-bg);color:var(--warning);}
.badge-info{background:var(--info-bg);color:var(--info);}
.badge-gold{background:var(--gold-100);color:var(--gold-700);}
/* Label kecil bergaya "eyebrow" (Space Mono, huruf besar, uppercase) —
pengganti .badge-soon / .pnum / .program-card .tag lama. */
.badge-mono{
font-family:'Space Mono',monospace;text-transform:uppercase;letter-spacing:.06em;
font-size:11px;font-weight:700;
}
/* ==================== ICON BADGE ====================
Pengganti ic-ring / ic-circle / ic-sq / path-icon / icon — satu kelas
dasar + modifier bentuk (default: rounded-square) + modifier ukuran. */
.icon-badge{
width:42px;height:42px;border-radius:var(--radius-s);
display:flex;align-items:center;justify-content:center;flex-shrink:0;
background:var(--gold-100);color:var(--gold-700);
}
.icon-badge svg{width:19px;height:19px;}
.icon-badge img{width:22px;height:22px;object-fit:contain;}
.icon-badge-circle{border-radius:50%;}
.icon-badge-ring{background:transparent;border:1.5px solid var(--gold-500);}
.icon-badge-dark{background:var(--navy-950);color:var(--gold-300);}
.icon-badge-sm{width:32px;height:32px;}
.icon-badge-sm svg{width:15px;height:15px;}
.icon-badge-lg{width:56px;height:56px;}
.icon-badge-lg svg{width:24px;height:24px;}
/* ==================== CARD ====================
Pengganti why-card/pilar2-card/testi-card/path-card/program2-card
untuk pekerjaan BARU — semuanya secara visual sudah memakai resep
yang sama persis (putih + border --line + radius-m + padding), jadi
cukup satu kelas dasar + modifier hover. */
.card{
background:var(--white);border:1px solid var(--line);
border-radius:var(--radius-m);padding:24px 20px;
}
.card-hover{transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);}
.card-hover:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft);border-color:transparent;}
/* ==================== SITE HEADER (dipasang via assets/shared-header.js) ====================
Ditambahkan (tindak lanjut audit desain, 24 Sept 2026) setelah user
menemukan menu header BEDA-BEDA di tiap halaman: index.html & try-out.html
punya menu dropdown lengkap + ikon cari, sementara blog/faq/program.html
masing-masing punya daftar link RATA (bukan dropdown) yang berbeda-beda
satu sama lain (faq.html & program.html bahkan tidak punya link ke Blog
sama sekali) — akibat kebiasaan copy-paste manual per halaman, sama
persis seperti kasus footer yang sudah dibenerin sebelumnya lewat
shared-footer.js. CSS di bawah ini SEKARANG SATU-SATUNYA sumber tampilan
header/menu; markup & perilakunya (buka/tutup dropdown, menu mobile)
dipasang oleh assets/shared-header.js, BUKAN ditulis manual di tiap
halaman lagi. Lihat komentar di shared-header.js untuk cara pasang. */
header{
position:sticky;top:0;z-index:100;
background:rgba(250,253,255,0.9);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--line);
}
header .nav{display:flex;align-items:center;justify-content:space-between;padding:16px 32px;max-width:1180px;margin:0 auto;gap:18px;}
header .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;color:var(--navy-900);}
header .brand .mark{width:44px;height:44px;display:flex;align-items:center;justify-content:center;position:relative;}
header .brand .mark svg{width:22px;height:22px;}
header .brand small{display:block;font-family:'Space Mono',monospace;font-weight:400;font-size:9px;letter-spacing:0.16em;color:var(--gold-700);text-transform:uppercase;margin-top:1px;}
header nav.links{display:flex;gap:34px;font-weight:600;font-size:14.5px;color:var(--navy-900);align-items:center;}
header .nav-dropdown{position:relative;}
header .dropdown-trigger{cursor:pointer;display:inline-flex;align-items:center;gap:4px;}
header .dropdown-menu{display:none;flex-direction:column;position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);background:var(--white);border:1px solid var(--line);border-radius:12px;padding:8px;min-width:200px;box-shadow:var(--shadow-soft);z-index:110;}
header .dropdown-menu.open{display:flex;}
header .dropdown-menu a{padding:9px 12px;border-radius:8px;font-size:13.5px;white-space:nowrap;}
header .dropdown-menu a:hover{background:var(--paper-dim);}
header nav.links a{position:relative;padding:6px 0;}
header nav.links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold-500);transform:scaleX(0);transform-origin:left;transition:transform .25s ease;}
header nav.links a:hover::after{transform:scaleX(1);}
header .nav .btn{padding:13px 26px;font-size:15px;}
header .menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;}
header .menu-toggle span{display:block;width:24px;height:2px;background:var(--navy-900);margin:5px 0;transition:.3s;}
@media (max-width:980px){
header nav.links{display:none;}
header .menu-toggle{display:block;}
header .nav .btn{padding:9px 16px;font-size:13px;}
header .nav .btn svg{width:14px;height:14px;}
}
@media (max-width:600px){
header .nav{padding:14px 20px; gap:10px;}
header .nav .btn{padding:8px 12px; font-size:12px;}
}
/* ==================== FORM FIELD ====================
Border input --line di atas putih diaudit terlalu tipis kontrasnya
(1.38:1). Dipertegas dengan --ink-soft di sini untuk input BARU. */
.field-input{
width:100%;padding:12px 14px;border-radius:var(--radius-s);
border:1.5px solid var(--ink-soft);background:var(--paper);color:var(--ink);
font-family:inherit;font-size:14.5px;
}
.field-input:focus{outline:2.5px solid var(--navy-900);outline-offset:1px;border-color:var(--navy-900);}