#bg-3d {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

#matrix {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.content {
    position: relative;
    z-index: 10;
}
* { margin:0; padding:0; box-sizing:border-box }

body {
font-family:'Rajdhani', monospace;
background:#000;
color:#00ff41;
overflow-x:hidden;
}


.container {
max-width:1200px;
margin:auto;
padding:0 20px;
}

header {
padding:6rem 0;
text-align:center;
}

.holo-avatar {
width:160px;
height:160px;
margin:0 auto 2rem;
border-radius:50%;
overflow:hidden;
border:3px solid #00ff41;
box-shadow:0 0 40px #00ff41;
animation:spin 12s linear infinite;
}

.holo-avatar img {
width:100%;
height:100%;
object-fit:cover;
}

h1 {
font-family:'Orbitron';
font-size:4rem;
background:linear-gradient(45deg,#00ff41,#00bfff,#ff00ff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.tagline { font-size:1.3rem; margin-top:1rem }
.status { opacity:.7 }

section {
padding:5rem 0;
}

.dark {
background:rgba(0,0,20,.6);
}

h2 {
font-family:'Orbitron';
text-align:center;
font-size:2.5rem;
margin-bottom:3rem;
}

.card {
border:1px solid #00ff41;
border-radius:10px;
padding:2rem;
margin-bottom:1.5rem;
background:rgba(0,20,40,.8);
}

.skills {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:1rem;
text-align:center;
}

.skills div, .contacts div {
border:1px solid #00ff41;
padding:1.2rem;
border-radius:8px;
}

.contacts {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:1.5rem;
text-align:center;
}

a { color:#00bfff; text-decoration:none }

@keyframes spin {
from { transform:rotateY(0) }
to { transform:rotateY(360deg) }
}
.identity-panel {
    position: relative;
    display: inline-block;
    padding: 2.5rem 3rem;
    border-radius: 18px;

    /* Glass effect */
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    /* Cyber frame */
    border: 1px solid rgba(0, 255, 65, 0.6);
    box-shadow:
        0 0 30px rgba(0, 255, 65, 0.35),
        inset 0 0 20px rgba(0, 255, 65, 0.15);

    z-index: 20;
}

/* Optional: glowing corners */
.identity-panel::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 20px;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(0,255,65,0.8),
        transparent 70%
    );
    opacity: 0.25;
    pointer-events: none;
}

/* Pastikan teks super jelas */
.identity-panel h1,
.identity-panel p,
.identity-panel .status {
    text-shadow:
        0 0 8px rgba(0,255,65,0.9),
        0 0 15px rgba(0,255,65,0.6);
}
header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        rgba(0,0,0,0.6) 0%,
        rgba(0,0,0,0.2) 60%,
        transparent 100%
    );
    z-index: 5;
    pointer-events: none;
}