*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Segoe UI',sans-serif;
}

body{
background:
linear-gradient(
rgba(5,15,35,.85),
rgba(5,15,35,.95)
),
url("../images/background/background.jpg");

background-size:cover;
background-position:center;
background-attachment:fixed;

color:white;
min-height:100vh;
}

/* HEADER */

header{
text-align:center;
padding:15px 20px 30px;
}

.profile-photo{
margin-bottom:20px;
}

.profile-photo img{
width:160px;
height:160px;
border-radius:50%;
object-fit:cover;

border:4px solid rgba(255,255,255,.2);

box-shadow:
0 0 25px rgba(0,212,255,.4),
0 0 50px rgba(0,212,255,.25),
0 0 80px rgba(0,212,255,.15);

transition:.4s;
}

.profile-photo img:hover{
transform:scale(1.05);

box-shadow:
0 0 35px rgba(0,212,255,.6),
0 0 70px rgba(0,212,255,.35),
0 0 100px rgba(0,212,255,.2);
}

header h1{
font-size:48px;
margin-bottom:10px;
}

.nama-belakang{
white-space:nowrap;
}

.greeting{

font-size:22px;

font-weight:700;

color:#00d4ff;

margin-top:10px;

margin-bottom:12px;

text-shadow:
0 0 12px rgba(0,212,255,.5);

}

.typing-container{

font-size:20px;

font-weight:600;

color:#ffffff;

height:30px;

margin-bottom:20px;

}

#typing-text{

border-right:2px solid #00d4ff;

padding-right:4px;

animation:blink .8s infinite;

}

@keyframes blink{

50%{
border-color:transparent;
}

}
.subtitle{
font-size:20px;
color:#00d4ff;
margin-bottom:15px;
}

.running-text{
max-width:700px;
height:50px;

margin:20px auto;

overflow:hidden;

background:rgba(255,255,255,.08);

border:1px solid rgba(255,255,255,.15);

border-radius:50px;

position:relative;

display:flex;
align-items:center;
}

#running-message{

position:absolute;

white-space:nowrap;

color:#00d4ff;

font-weight:600;

left:100%;
}

.digital-clock{

margin-top:18px;

font-size:24px;

font-weight:700;

color:#00d4ff;

text-shadow:
0 0 10px rgba(0,212,255,.6);

display:flex;

justify-content:center;

gap:12px;

flex-wrap:wrap;
}

.separator{
opacity:.5;
}

.visitor-counter{

margin-top:12px;

font-size:16px;

color:#d1d5db;

font-weight:600;
}

.description{
max-width:700px;
margin:auto;
line-height:1.8;
color:#d1d5db;
}

/* MENU */

.menu-container{
display:flex;
flex-direction:column;
gap:10px;

max-width:500px;
margin:auto;

padding:20px;
}

.menu-card{
display:flex;
align-items:center;
justify-content:center;

gap:8px;

padding:13px 20px;

border-radius:999px;

text-decoration:none;
color:white;

transition:.45s ease;

position:relative;
overflow:hidden;

border:1px solid rgba(255,255,255,.15);

backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);

box-shadow:
0 8px 20px rgba(0,0,0,.25),
inset 0 1px 1px rgba(255,255,255,.15);
}

.menu-card::before{
content:"";

position:absolute;

top:-50%;
left:-150%;

width:80px;
height:220%;

transform:rotate(25deg);

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.85),
transparent
);

transition:.8s;
}

.menu-card::after{
content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:50%;

background:
linear-gradient(
180deg,
rgba(255,255,255,.22),
transparent
);

pointer-events:none;
}

.menu-card:hover::before{
left:180%;
}

.icon{
font-size:20px;
display:flex;
align-items:center;
justify-content:center;
}

.menu-card h3{
font-size:17px;
font-weight:700;
margin:0;
}

.menu-card:hover{

transform:
translateY(-10px)
scale(1.03);

filter:brightness(1.12);

border:1px solid rgba(255,255,255,.45);

box-shadow:

0 0 15px rgba(255,255,255,.25),

0 0 35px rgba(255,255,255,.20),

0 0 60px rgba(0,212,255,.35),

0 0 90px rgba(0,212,255,.20),

0 15px 40px rgba(0,0,0,.35);

}

.menu-card:active{
transform:
translateY(-2px)
scale(.98);
}

/* RESPONSIVE */

@media(max-width:768px){

header h1{
font-size:32px;
}

.profile-photo img{
width:130px;
height:130px;
}

.subtitle{
font-size:18px;
}

.description{
font-size:14px;
}

	.menu-container{
padding:20px 15px 35px;
gap:8px;
}

.menu-card{
padding:11px 18px;
}

.menu-card h3{
font-size:15px;
}

.icon{
font-size:18px;
}
}

/* WARNA MENU */

/* AI Assistant */
.ai{
background:linear-gradient(
135deg,
#06b6d4,
#0891b2
);

animation:
aiPulse 2.5s ease-in-out infinite;

box-shadow:
0 0 15px rgba(6,182,212,.4),
0 0 35px rgba(6,182,212,.3),
0 0 60px rgba(6,182,212,.2);
}

.ai::before{

content:"";

position:absolute;

top:-50%;
left:-150%;

width:90px;
height:220%;

transform:rotate(25deg);

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.95),
transparent
);

animation:
aiShine 3s linear infinite;

}

.ai:hover{

transform:
translateY(-12px)
scale(1.06);

box-shadow:
0 0 25px rgba(255,255,255,.35),
0 0 50px rgba(6,182,212,.6),
0 0 80px rgba(6,182,212,.4),
0 0 120px rgba(6,182,212,.25);

}

/* Profil */
.profil{
background:linear-gradient(135deg,#8b5cf6,#6d28d9);
}

/* Blog */
.blog{
background:linear-gradient(135deg,#f97316,#ea580c);
}

/* Project */
.project{
background:linear-gradient(135deg,#10b981,#059669);
}

/* Prestasi */
.prestasi{
background:linear-gradient(135deg,#facc15,#eab308);
}

/* Data Personal */
.data{
background:linear-gradient(135deg,#64748b,#475569);
}

/* Social Media */
.social{
background:linear-gradient(135deg,#ec4899,#db2777);
}

/* Admin */
.admin{
background:linear-gradient(135deg,#ef4444,#dc2626);
}

@keyframes aiPulse{

0%{
transform:scale(1);
}

50%{
transform:scale(1.03);
}

100%{
transform:scale(1);
}

}

@keyframes aiShine{

0%{
left:-150%;
}

100%{
left:200%;
}

}

#loader{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:#050f23;

display:flex;

justify-content:center;
align-items:center;

z-index:99999;

transition:.5s;
}

.loader-content{
text-align:center;
}

.loader-logo{

font-size:70px;

margin-bottom:15px;

animation:aiPulse 1.8s infinite;
}

.progress-bar{

width:250px;

height:8px;

background:#1e293b;

border-radius:50px;

overflow:hidden;

margin:20px auto;
}

.progress-fill{

width:100%;

height:100%;

background:#00d4ff;

animation:loading 1.5s linear;
}

@keyframes loading{

from{
width:0%;
}

to{
width:100%;
}

}

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

background:

radial-gradient(circle at 5% 10%, rgba(0,212,255,.8) 2px, transparent 3px),
radial-gradient(circle at 15% 30%, rgba(255,255,255,.5) 1px, transparent 2px),
radial-gradient(circle at 25% 80%, rgba(0,212,255,.7) 2px, transparent 3px),
radial-gradient(circle at 35% 15%, rgba(255,255,255,.4) 1px, transparent 2px),
radial-gradient(circle at 45% 60%, rgba(0,212,255,.8) 2px, transparent 3px),
radial-gradient(circle at 55% 25%, rgba(255,255,255,.5) 1px, transparent 2px),
radial-gradient(circle at 65% 75%, rgba(0,212,255,.7) 2px, transparent 3px),
radial-gradient(circle at 75% 35%, rgba(255,255,255,.4) 1px, transparent 2px),
radial-gradient(circle at 85% 55%, rgba(0,212,255,.8) 2px, transparent 3px),
radial-gradient(circle at 95% 20%, rgba(255,255,255,.5) 1px, transparent 2px);

animation:particlesFloat 20s ease-in-out infinite;
}


@keyframes particlesFloat{

0%{
transform:
translateY(0)
translateX(0);
}

25%{
transform:
translateY(-15px)
translateX(10px);
}

50%{
transform:
translateY(-30px)
translateX(-10px);
}

75%{
transform:
translateY(-15px)
translateX(15px);
}

100%{
transform:
translateY(0)
translateX(0);
}

}