@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;800&display=swap');

:root { 
    --corp-dark: #0f172a; 
    --glass: rgba(255, 255, 255, 0.9);
    --primary-color: #3b82f6;
    --secondary-text: #64748b;
}

body { 
    background: #f8fafc; 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    color: #1e293b; 
}

/* --- ANIMASI KARAKTER --- */
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
@keyframes blink { 0%, 90%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@keyframes talking { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.7); } }
@keyframes nod { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.config-panel {
    border-radius: 20px; 
    position: sticky; 
    top: 20px;
}

.individual-card {
    background: var(--glass);
    border-radius: 20px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 25px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    margin-bottom: 20px;
    position: relative;
    transition: 0.3s ease-out;
}

.svg-avatar-box {
    flex: 0 0 140px;
    height: 180px;
    background: linear-gradient(180deg, #f1f5f9 0%, #cbd5e1 100%);
    border-radius: 15px;
    display: flex; align-items: flex-end; justify-content: center;
    overflow: hidden; border: 2px solid #ffffff;
}

.svg-character { width: 130px; animation: breathe 4s ease-in-out infinite; transform-origin: bottom center; }
.eye-group { transform-origin: center 88px; animation: blink 4s infinite; }
.talking .mouth-group { animation: talking 0.5s ease-in-out infinite alternate; }
.talking .head-group { animation: nod 1s ease-in-out infinite; }

.skill-bar-container { height: 6px; background: #e2e8f0; border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.skill-fill { height: 100%; width: 0; border-radius: 10px; transition: width 1.5s ease-out; }

.btn-job { 
    border-radius: 8px; font-weight: 600; text-align: left; padding: 10px 15px; border: none; 
    color: white; transition: 0.2s; font-size: 0.85rem;
}
.btn-job:hover { filter: brightness(1.1); transform: translateX(5px); }

.action-btns { position: absolute; top: 15px; right: 15px; display: flex; gap: 6px; }

.main-title { font-weight: 800; color: var(--corp-dark); }
.card-header-creator { font-weight: 800; color: var(--primary-color); }
label.small { font-size: 0.75rem; color: var(--secondary-text); margin-bottom: 3px; display: block; }