.pesona-hero {
background: linear-gradient(135deg, #0a1733, #1e3a8a, #3b82f6);
position: relative;
overflow: hidden;
}
.pesona-hero::before, .pesona-hero::after {
content: '';
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, .08);
}
.pesona-hero::before { width: 380px; height: 380px; top: -160px; right: -100px; }
.pesona-hero::after { width: 260px; height: 260px; bottom: -130px; left: 6%; }
.pesona-badge {
background: rgba(255, 255, 255, .14);
border: 1px solid rgba(255, 255, 255, .35);
letter-spacing: 3px;
border-radius: 50rem;
backdrop-filter: blur(6px);
}
.ttd-box {
width: 100%;
height: 220px;
border: 2px dashed #94a3b8;
border-radius: .75rem;
background: #fff;
touch-action: none;
cursor: crosshair;
}
.camera-box {
position: relative;
width: 100%;
aspect-ratio: 3 / 4;
border-radius: .75rem;
overflow: hidden;
background: linear-gradient(160deg, #0a1733, #1e3a8a);
}
.camera-box video,
.camera-box img,
.camera-box canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.camera-frame {
position: absolute;
inset: 8%;
border: 2px dashed rgba(255, 255, 255, .55);
border-radius: 1rem;
pointer-events: none;
}