/* TEMA GLOBAL */
[data-theme="light"] {
    --bg-utama: #f6f8fa;
    --bg-kartu: #ffffff;
    --kontras-tinggi: #1a1d20;
    --kontras-rendah: #656d76;
    --aksen-hijau: #1f5e49;
    --bg-hijau-halus: #f0f7f4;
    --bg-krim-halus: #faf5ed;
    --garis-pembatas: rgba(0,0,0,0.07);
}

[data-theme="dark"] {
    --bg-utama: #0d0f11;
    --bg-kartu: #16191d;
    --kontras-tinggi: #f0f3f6;
    --kontras-rendah: #8b949e;
    --aksen-hijau: #3dd69b;
    --bg-hijau-halus: #162621;
    --bg-krim-halus: #24201a;
    --garis-pembatas: rgba(255,255,255,0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body.halaman-utama { background-color: var(--bg-utama); color: var(--kontras-tinggi); font-family: 'Plus Jakarta Sans', sans-serif; padding-bottom: 8rem; overflow-x: hidden; }

/* AMBIENT BACKGROUND */
.efek-abstrak { position: fixed; width: 45vw; height: 45vw; border-radius: 50%; pointer-events: none; z-index: -1; filter: blur(140px); opacity: 0.4; }
.warna-hijau { top: -10%; left: -5%; background-color: var(--bg-hijau-halus); }
.warna-krim { bottom: -10%; right: -5%; background-color: var(--bg-krim-halus); }

/* UTIL BAR */
.bar-utility { width: 100%; padding: 1.5rem 2rem; }
.kontainer-utility { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.status-kerja { font-size: 0.75rem; font-weight: 700; background: var(--bg-kartu); padding: 0.5rem 1.2rem; border-radius: 30px; border: 1px solid var(--garis-pembatas); color: var(--kontras-rendah); }
.titik-hijau { width: 6px; height: 6px; background: #10b981; border-radius: 50%; display: inline-block; margin-right: 6px; }
.pengubah-tema { background: var(--bg-kartu); border: 1px solid var(--garis-pembatas); color: var(--kontras-tinggi); width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* TOMBOL MINI KE WEBSITE UTAMA */
.tombol-mini-tautan { font-size: 0.75rem; font-weight: 700; text-decoration: none; background: var(--bg-hijau-halus); color: var(--aksen-hijau); padding: 0.5rem 1rem; border-radius: 30px; border: 1px solid var(--garis-pembatas); display: inline-flex; align-items: center; gap: 0.5rem; transition: 0.2s ease; }
.tombol-mini-tautan:hover { background: var(--kontras-tinggi); color: var(--bg-utama); }

/* NAVIGASI DOCK MELAYANG */
.navigasi-melayang { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); background: var(--bg-kartu); border: 1px solid var(--garis-pembatas); padding: 0.5rem; border-radius: 24px; display: flex; gap: 0.5rem; z-index: 1000; box-shadow: 0 15px 35px rgba(0,0,0,0.08); align-items: center; }
.item-nav { padding: 0.7rem 1.2rem; border-radius: 16px; color: var(--kontras-rendah); display: flex; align-items: center; gap: 0.6rem; text-decoration: none; font-weight: 600; font-size: 0.85rem; transition: 0.2s ease; }
.item-nav:hover { color: var(--aksen-hijau); background: var(--bg-utama); }
.item-nav.aktif { background: var(--aksen-hijau); color: white !important; }

/* ITEM TAUTAN PORTOFOLIO UTAMA DI DOCK */
.item-nav-utama { padding: 0.7rem 1.2rem; border-radius: 16px; color: white; background: #0284c7; display: flex; align-items: center; gap: 0.6rem; text-decoration: none; font-weight: 700; font-size: 0.85rem; transition: 0.2s ease; border: 1px solid rgba(255,255,255,0.1); }
.item-nav-utama:hover { background: #0369a1; transform: translateY(-2px); }

/* GRID UTAMA */
.grid-workspace { max-width: 1200px; margin: 0 auto; padding: 1rem 2rem; display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; }
.kontainer-sempit { max-width: 700px; }
.kontainer-sedang { max-width: 850px; }
.blok-grid { background: var(--bg-kartu); border: 1px solid var(--garis-pembatas); border-radius: 24px; padding: 2.2rem; }
.grid-12 { grid-column: span 12; }
.grid-8 { grid-column: span 8; }
.grid-7 { grid-column: span 7; }
.grid-5 { grid-column: span 5; }
.grid-4 { grid-column: span 4; }

/* TYPOGRAPHY */
.label-halaman { font-size: 0.65rem; font-weight: 800; letter-spacing: 2px; color: var(--aksen-hijau); display: block; margin-bottom: 1rem; }
.judul-hero { font-family: 'Playfair Display', serif; font-size: 2.6rem; font-weight: 500; line-height: 1.2; margin-bottom: 1.2rem; }
.deskripsi-hero { color: var(--kontras-rendah); font-size: 1.05rem; line-height: 1.6; margin-bottom: 2rem; font-weight: 400; }

/* BUTTONS */
.grup-tombol { display: flex; gap: 1rem; }
.tombol-primer { background: var(--kontras-tinggi); color: var(--bg-utama); padding: 1rem 1.8rem; border-radius: 14px; text-decoration: none; font-weight: 600; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.5rem; }
.tombol-sekunder { background: transparent; border: 1px solid var(--garis-pembatas); color: var(--kontras-tinggi); padding: 1rem 1.8rem; border-radius: 14px; text-decoration: none; font-weight: 600; font-size: 0.85rem; }

/* PROFILE PANEL */
.bingkai-foto { width: 100%; height: 200px; border-radius: 16px; overflow: hidden; margin-bottom: 1rem; }
.foto-avatar { width: 100%; height: 100%; object-fit: cover; }
.info-foto h4 { font-size: 1.1rem; font-weight: 700; }
.panel-metrik-kerja { margin-top: 1rem; border-top: 1px solid var(--garis-pembatas); padding-top: 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.baris-metrik { display: flex; justify-content: space-between; font-size: 0.8rem; }
.label-metrik { color: var(--kontras-rendah); }
.nilai-metrik { font-weight: 700; }

/* MATRIKS KEMAMPUAN */
.grid-matriks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1.5rem; }
.item-matriks h5 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.3rem; }
.meta-matriks { display: flex; justify-content: space-between; align-items: center; }
.meta-matriks span { font-size: 0.8rem; color: var(--aksen-hijau); font-weight: 700; }
.item-matriks p { font-size: 0.8rem; color: var(--kontras-rendah); margin: 0.5rem 0 1rem 0; line-height: 1.5; }
.garis-skala { width: 100%; height: 6px; background: var(--bg-utama); border-radius: 10px; overflow: hidden; }
.isi-skala { height: 100%; background: var(--aksen-hijau); }

/* VISUAL REPOSITORI */
.header-aktivitas { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.header-aktivitas h3 { font-size: 0.9rem; font-weight: 700; }
.header-aktivitas span { font-size: 0.75rem; color: var(--kontras-rendah); }
.mesh-grafik-git { display: flex; gap: 5px; flex-wrap: wrap; }
.node-git { width: 14px; height: 14px; border-radius: 3px; }
.level-0 { background: var(--bg-utama); }
.level-1 { background: rgba(16, 185, 129, 0.15); }
.level-2 { background: rgba(16, 185, 129, 0.4); }
.level-3 { background: rgba(16, 185, 129, 0.65); }
.level-4 { background: var(--aksen-hijau); }

/* TIMELINE RIWAYAT */
.jalur-kronologi-modern { position: relative; border-left: 3px solid var(--garis-pembatas); padding-left: 2rem; margin-left: 1.5rem; display: flex; flex-direction: column; gap: 2.5rem; margin-top: 2rem; }
.kartu-kronologi { display: flex; gap: 1.5rem; position: relative; background: var(--bg-utama); padding: 1.8rem; border-radius: 20px; border: 1px solid var(--garis-pembatas); }
.pembungkus-logo-sekolah { position: absolute; left: -3.4rem; top: 1.8rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: white; box-shadow: 0 4px 10px rgba(0,0,0,0.1); border: 4px solid var(--bg-kartu); }
.warna-unias { background: #1e3a8a; }
.warna-sma { background: #b91c1c; }
.warna-smp { background: #0284c7; }
.warna-sd { background: #ea580c; }
.konten-kronologi { width: 100%; }
.meta-sekolah { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; flex-wrap: wrap; gap: 0.5rem; }
.tahun-belajar { font-size: 0.75rem; font-weight: 800; background: var(--bg-kartu); padding: 0.3rem 0.8rem; border-radius: 20px; border: 1px solid var(--garis-pembatas); color: var(--aksen-hijau); }
.konten-kronologi h4 { font-size: 1.15rem; font-weight: 700; }
.konten-kronologi h5 { font-size: 0.9rem; color: var(--aksen-hijau); font-weight: 600; margin-bottom: 0.6rem; }
.konten-kronologi p { font-size: 0.85rem; color: var(--kontras-rendah); line-height: 1.6; }

/* PROYEK WEB */
.tumpukan-tombol-proyek { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1rem; }
.tombol-pilih-proyek { width: 100%; text-align: left; padding: 1.1rem; border-radius: 14px; background: var(--bg-utama); border: 1px solid var(--garis-pembatas); color: var(--kontras-tinggi); font-family: inherit; font-weight: 600; font-size: 0.85rem; cursor: pointer; display: flex; align-items: center; gap: 0.6rem; transition: 0.2s ease; }
.tombol-pilih-proyek.aktif { background: var(--aksen-hijau); color: white; border-color: transparent; }
.tampilan-output-dinamis { display: flex; flex-direction: column; justify-content: center; min-height: 280px; }
.baris-header-proyek { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--garis-pembatas); padding-bottom: 1rem; margin-bottom: 1rem; }
.lencana-teknis { font-size: 0.7rem; font-weight: 700; background: var(--bg-hijau-halus); color: var(--aksen-hijau); padding: 0.3rem 0.6rem; border-radius: 6px; }
.segmen-isi-proyek { margin-bottom: 1rem; }
.segmen-isi-proyek h4 { font-size: 0.85rem; font-weight: 700; margin-bottom: 0.4rem; display: flex; align-items: center; gap: 0.4rem; }
.segmen-isi-proyek p { font-size: 0.85rem; color: var(--kontras-rendah); line-height: 1.5; }
.teks-merah { color: #ef4444; }
.teks-hijau { color: #10b981; }

/* LOADER SPINNER */
.loader-proyek { display: flex; flex-direction: column; align-items: center; gap: 1rem; font-size: 0.85rem; color: var(--kontras-rendah); text-align: center; width: 100%; }
.animasi-putar { width: 30px; height: 30px; border: 3px solid var(--garis-pembatas); border-top-color: var(--aksen-hijau); border-radius: 50%; animation: putar 0.8s linear infinite; }
@keyframes putar { to { transform: rotate(360deg); } }

/* TESTIMONI */
.mesh-grid-testimoni { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.node-testimoni { background: var(--bg-utama); padding: 1.5rem; border-radius: 16px; border: 1px solid var(--garis-pembatas); }
.node-testimoni p { font-size: 0.85rem; font-style: italic; line-height: 1.5; color: var(--kontras-rendah); margin-bottom: 0.5rem; }
.node-testimoni h5 { font-size: 0.75rem; font-weight: 700; }

/* KONTAK CORE */
.bungkus-teks-tengah { text-align: center; display: flex; flex-direction: column; align-items: center; }
.mesh-tautan-interaktif { display: flex; flex-direction: column; gap: 0.6rem; width: 100%; max-width: 500px; margin-top: 1.5rem; text-align: left; }
.baris-mesh-link { display: flex; justify-content: space-between; align-items: center; padding: 1.2rem 1.5rem; background: var(--bg-kartu); border: 1px solid var(--garis-pembatas); border-radius: 14px; text-decoration: none; color: inherit; font-weight: 700; font-size: 0.9rem; transition: 0.2s; }
.baris-mesh-link:hover { border-color: var(--aksen-hijau); background: var(--bg-hijau-halus); }
.data-mesh-link { font-size: 0.8rem; color: var(--kontras-rendah); font-weight: 400; }

.tersembunyi { display: none !important; }
.teks-nav { display: inline; }

/* MEDIA RESPONSIVE */
@media (max-width: 900px) {
    .grid-workspace { grid-template-columns: 1fr; }
    .grid-12, .grid-8, .grid-7, .grid-5, .grid-4 { grid-column: span 12; }
    .grid-matriks, .mesh-grid-testimoni { grid-template-columns: 1fr; }
    .kartu-kronologi { flex-direction: column; gap: 1rem; padding: 1.2rem; }
    .pembungkus-logo-sekolah { left: -3.2rem; top: 1rem; width: 2.2rem; height: 2.2rem; font-size: 0.9rem; }
    .teks-nav { display: none; }
}