/*==================================
  K • ORMAN Portfolio
  Main Stylesheet
  Version: 1.0.0
===================================*/

/*==============================
  GOOGLE FONT
==============================*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*==============================
  CSS VARIABLES
==============================*/

:root{

    --primary:#00d4ff;
    --secondary:#7c3aed;

    --bg:#050816;
    --surface:#111827;
    --surface-light:#1f2937;

    --text:#ffffff;
    --text-light:#9ca3af;

    --success:#22c55e;
    --warning:#f59e0b;
    --danger:#ef4444;

    --radius:18px;

    --shadow:0 15px 40px rgba(0,0,0,.35);

    --transition:.35s ease;

}

html{

scroll-behavior:smooth;

scroll-padding-top:90px;

}

.container{

width:min(92%,1200px);

margin:auto;

}


#fireworks-container{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

pointer-events:none;

overflow:hidden;

z-index:99999;

}

.firework{

position:absolute;

width:8px;

height:8px;

border-radius:50%;

animation:explode 1.8s linear forwards;

}

@keyframes explode{

0%{

transform:translate(0,0) scale(0);

opacity:1;

}

100%{

transform:

translate(

var(--x),

var(--y)

)

scale(2.5);

opacity:0;

}

}

.star{

position:absolute;

font-size:22px;

animation:fall 3s linear forwards;

}

@keyframes fall{

0%{

transform:translateY(-100px) rotate(0deg);

opacity:1;

}

100%{

transform:translateY(110vh) rotate(720deg);

opacity:0;

}

}
/*==================================
TOUCH OPTIMIZATION
==================================*/

button,
a{

min-height:48px;

display:inline-flex;

align-items:center;

justify-content:center;

}

.project-buttons{

display:flex;

gap:12px;

margin-top:20px;

flex-wrap:wrap;

}

.demo-btn,
.code-btn{

flex:1;

text-align:center;

padding:12px;

border-radius:12px;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.demo-btn{

background:var(--primary);

color:white;

}

.code-btn{

border:2px solid var(--primary);

color:var(--text);

}

.demo-btn:hover,
.code-btn:hover{

transform:translateY(-4px);

}

.featured-badge{

position:absolute;

top:15px;

right:15px;

background:gold;

color:black;

padding:6px 12px;

border-radius:30px;

font-size:12px;

font-weight:bold;

}

.project-image{

position:relative;

}

.stats{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

gap:20px;

margin:80px auto;

}

.stat-card{

padding:30px;

text-align:center;

background:var(--surface);

border-radius:20px;

transition:.3s;

}

.stat-card:hover{

transform:translateY(-8px);

}

.stat-card h2{

font-size:2.5rem;

color:var(--primary);

}

.hero-banner{

position:relative;

width:100%;

max-width:1000px;

margin:auto;

margin-bottom:90px;

}

.hero-cover{

width:100%;

height:clamp(180px,35vw,350px);

object-fit:cover;

border-radius:25px;

display:block;

}

.profile-wrapper{

position:absolute;

left:50%;

bottom:0;

transform:translate(-50%,50%);

width:clamp(110px,22vw,170px);

height:clamp(110px,22vw,170px);

padding:5px;

border-radius:50%;

background:linear-gradient(
45deg,
var(--primary),
var(--secondary)
);

box-shadow:0 0 30px rgba(0,0,0,.35);

}

.profile-image{

width:100%;

height:100%;

border-radius:50%;

object-fit:cover;

border:5px solid var(--surface);

}

/*==================================
SETTINGS PANEL
==================================*/

.settings-btn{

position:fixed;

bottom:25px;

right:25px;

width:58px;

height:58px;

border:none;

border-radius:50%;

background:var(--primary);

color:white;

font-size:22px;

cursor:pointer;

z-index:999;

box-shadow:0 0 25px var(--primary);

transition:.35s;

}

.settings-btn:hover{

transform:rotate(90deg) scale(1.08);

}

.theme-panel{

position:fixed;

bottom:95px;

right:25px;

width:220px;

background:var(--surface);

border-radius:18px;

padding:18px;

display:flex;

flex-direction:column;

gap:10px;

box-shadow:0 0 20px rgba(0,0,0,.3);

transform:translateY(20px);

opacity:0;

pointer-events:none;

transition:.35s;

z-index:999;

}

.theme-panel.open{

transform:translateY(0);

opacity:1;

pointer-events:auto;

}

.theme-panel h3{

margin-bottom:10px;

color:var(--text);

}

.theme-panel button{

padding:12px;

border:none;

border-radius:12px;

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

color:var(--text);

cursor:pointer;

transition:.3s;

}

.theme-panel button:hover{

background:var(--primary);

color:#fff;

}

/*==============================
 PREMIUM NAVBAR
==============================*/

.navbar{

position:fixed;

top:20px;

left:50%;

transform:translateX(-50%);

width:min(92%,1200px);

padding:14px 25px;

display:flex;

justify-content:space-between;

align-items:center;

border-radius:18px;

background:rgba(10,15,25,.45);

backdrop-filter:blur(16px);

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

z-index:3000;

transition:.35s;

}

.navbar.scrolled{

background:rgba(10,15,25,.82);

box-shadow:0 12px 35px rgba(0,0,0,.35);

}

.logo{

font-size:1.3rem;

font-weight:bold;

color:var(--primary);

text-decoration:none;

}

#navLinks{

display:flex;

gap:22px;

}

#navLinks a{

text-decoration:none;

color:var(--text);

transition:.3s;

position:relative;

}

#navLinks a:hover{

color:var(--primary);

}

#navLinks a.active{

color:var(--primary);

}

#navLinks a.active::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:100%;

height:2px;

background:var(--primary);

}

.menu-btn{

display:none;

background:none;

border:none;

font-size:26px;

color:var(--text);

cursor:pointer;

}

.system-card{

background:var(--surface);

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

border-radius:20px;

padding:20px;

display:flex;

flex-direction:column;

gap:15px;

max-width:320px;

backdrop-filter:blur(12px);

box-shadow:0 0 25px rgba(0,212,255,.12);

}

.system-item{

display:flex;

justify-content:space-between;

align-items:center;

font-size:.95rem;

color:var(--text);

padding:8px 0;

border-bottom:1px solid rgba(255,255,255,.08);

}

.system-item:last-child{

border-bottom:none;

}

/*==============================
 TECH BACKGROUND ANIMATION
==============================*/


#tech-background{

position:fixed;

inset:0;

overflow:hidden;

pointer-events:none;

z-index:-1;

opacity:.35;

}



#tech-background span{

position:absolute;

font-family:
"Courier New",
monospace;

font-size:22px;

color:var(--primary);

animation:
floatCode 12s linear infinite;

}



/* Different positions */

#tech-background span:nth-child(1){

left:10%;

animation-delay:0s;

}



#tech-background span:nth-child(2){

left:30%;

animation-delay:2s;

}



#tech-background span:nth-child(3){

left:50%;

animation-delay:4s;

}



#tech-background span:nth-child(4){

left:70%;

animation-delay:1s;

}



#tech-background span:nth-child(5){

left:85%;

animation-delay:3s;

}



#tech-background span:nth-child(6){

left:20%;

animation-delay:5s;

}



#tech-background span:nth-child(7){

left:60%;

animation-delay:6s;

}



#tech-background span:nth-child(8){

left:90%;

animation-delay:7s;

}




@keyframes floatCode{


0%{

transform:
translateY(110vh)
rotate(0deg);

opacity:0;

}


20%{

opacity:1;

}


80%{

opacity:1;

}


100%{

transform:
translateY(-20vh)
rotate(360deg);

opacity:0;

}


}

/*==============================
 FOOTER
==============================*/


footer{

margin-top:80px;

background:var(--surface);

padding:50px 30px 20px;

border-top:1px solid rgba(255,255,255,.08);

}



.footer-container{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:40px;

max-width:1200px;

margin:auto;

}



.footer-brand h2{

color:var(--primary);

}



.footer-container h3{

margin-bottom:20px;

}



.footer-links,
.footer-contact{

display:flex;

flex-direction:column;

gap:12px;

}



.footer-container a{

color:var(--text);

text-decoration:none;

opacity:.8;

transition:.3s;

}



.footer-container a:hover{

color:var(--primary);

transform:translateX(5px);

}



.footer-bottom{

text-align:center;

margin-top:40px;

padding-top:20px;

border-top:1px solid rgba(255,255,255,.08);

opacity:.7;

}

/*==============================
 PROJECT SECTION
==============================*/


.projects-container{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}



.project-card{

background:var(--surface);

border-radius:25px;

overflow:hidden;

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

transition:.4s;

}



.project-card:hover{

transform:translateY(-12px);

box-shadow:
0 20px 40px rgba(0,0,0,.3);

}




.project-image{

height:180px;

overflow:hidden;

}



.project-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}



.project-card:hover img{

transform:scale(1.1);

}




.project-content{

padding:25px;

}



.project-content p{

opacity:.8;

line-height:1.6;

}




.tech-tags{

display:flex;

flex-wrap:wrap;

gap:10px;

margin:20px 0;

}



.tech-tags span{

padding:6px 12px;

border-radius:50px;

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

font-size:13px;

color:var(--primary);

}



.project-content a{

display:inline-block;

padding:12px 20px;

border-radius:30px;

background:var(--primary);

color:white;

transition:.3s;

}



.project-content a:hover{

transform:scale(1.05);

}

/*==============================
 SKILLS SECTION
==============================*/


.skills-container{

max-width:800px;

margin:auto;

display:flex;

flex-direction:column;

gap:25px;

}



.skill-card{

background:var(--surface);

padding:25px;

border-radius:20px;

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

transition:.35s;

}



.skill-card:hover{

transform:translateY(-5px);

box-shadow:var(--shadow);

}



.skill-info{

display:flex;

justify-content:space-between;

margin-bottom:15px;

}



.skill-info span{

color:var(--primary);

font-weight:700;

}



.skill-bar{

height:14px;

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

border-radius:100px;

overflow:hidden;

}



.skill-progress{

height:100%;

width:0;

border-radius:100px;

background:

linear-gradient(
90deg,
var(--primary),
var(--secondary)
);

transition:width 1.8s ease;

}

/*==============================
 RESET
==============================*/

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:"Poppins",sans-serif;

background:var(--bg);

color:var(--text);

overflow-x:hidden;

min-height:100vh;

transition:.4s;

}

/*==============================
 SOCIAL MEDIA SECTION
==============================*/


.section-title{

text-align:center;

margin-bottom:50px;

}


.section-title h2{

font-size:2.5rem;

color:var(--primary);

}


.section-title p{

color:var(--text-light);

}



.social-container{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(240px,1fr));

gap:25px;

}



.social-card{

display:flex;

align-items:center;

gap:20px;

padding:25px;

border-radius:20px;

background:var(--surface);

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

transition:.35s;

}



.social-card i{

font-size:40px;

}



.social-card h3{

margin-bottom:5px;

}


.social-card p{

color:var(--text-light);

font-size:14px;

}

/*=====================================
BOOT SCREEN
=====================================*/

#loader{

position:fixed;

inset:0;

background:#030712;

display:flex;

justify-content:center;

align-items:center;

z-index:999999;

font-family:"Courier New",monospace;

}

.boot-screen{

width:min(92%,700px);

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

border:1px solid rgba(0,212,255,.25);

border-radius:18px;

padding:35px;

box-shadow:0 0 40px rgba(0,212,255,.15);

}

.boot-logo{

color:#00d4ff;

font-size:2rem;

margin-bottom:30px;

}

.boot-logo span{

font-size:1rem;

opacity:.7;

margin-left:10px;

}

.boot-console{

height:240px;

overflow:hidden;

}

.boot-console p{

opacity:0;

color:#7CFC98;

margin:10px 0;

transform:translateX(-20px);

}

.progress{

margin-top:25px;

height:10px;

background:#111827;

border-radius:100px;

overflow:hidden;

}

#progressBar{

width:0;

height:100%;

background:linear-gradient(90deg,#00d4ff,#7c3aed);

}

.boot-percent{

margin-top:15px;

text-align:right;

color:#00d4ff;

font-weight:bold;

}

/* Hover effect */

.social-card:hover{

transform:
translateY(-10px);

box-shadow:
0 15px 35px rgba(0,0,0,.3);

border-color:var(--primary);

}



/* Platform colors */

.tiktok i{

color:#00f2ea;

}


.instagram i{

color:#e1306c;

}


.telegram i{

color:#229ed9;

}


.whatsapp i{

color:#25d366;

}


.email i{

color:#f59e0b;

}

/*==============================
 MUSIC CONTROL BUTTON
==============================*/


.music-toggle{

position:fixed;

right:20px;

bottom:20px;

width:42px;

height:42px;

border-radius:50%;

border:none;

background:var(--primary);

color:white;

font-size:18px;

cursor:pointer;

z-index:2000;

box-shadow:0 0 20px var(--primary);

transition:.3s;

}


.music-toggle:hover{

transform:scale(1.15);

}


/*==============================
 CONTROL PANEL
==============================*/


.control-panel{

position:fixed;

right:20px;

bottom:75px;

width:260px;

max-height:80vh;

overflow-y:auto;

padding:20px;

border-radius:20px;

background:rgba(17,24,39,.85);

backdrop-filter:blur(15px);

box-shadow:var(--shadow);

display:flex;

flex-direction:column;

gap:10px;

opacity:0;

transform:translateY(30px);

pointer-events:none;

transition:.4s;

z-index:1999;

}


.control-panel.open{

opacity:1;

transform:translateY(0);

pointer-events:auto;

}



.control-panel button{

padding:10px;

border:none;

border-radius:12px;

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

color:var(--text);

cursor:pointer;

transition:.3s;

}


.control-panel button:hover{

background:var(--primary);

color:black;

}


.music-info{

padding:10px;

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

border-radius:12px;

}


#volumeControl{

width:100%;

cursor:pointer;

}

/*==============================
SCROLLBAR
==============================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:100px;

}

::-webkit-scrollbar-track{

background:#08101f;

}

/*==============================
LINKS
==============================*/

a{

text-decoration:none;

color:inherit;

}

/*==============================
IMAGES
==============================*/

img{

display:block;

max-width:100%;

}

/*==============================
LIST
==============================*/

ul{

list-style:none;

}

/*==============================
CONTAINER
==============================*/

.container{

width:min(1200px,92%);

margin:auto;

}

/*==============================
NAVBAR
==============================*/

.navbar{

position:fixed;

top:0;

left:0;

width:100%;

padding:18px 6%;

display:flex;

justify-content:space-between;

align-items:center;

backdrop-filter:blur(18px);

background:rgba(5,8,22,.45);

border-bottom:1px solid rgba(255,255,255,.05);

z-index:1000;

transition:var(--transition);

}

.logo{

font-size:1.7rem;

font-weight:700;

color:var(--primary);

letter-spacing:2px;

}

.nav-links{

display:flex;

gap:28px;

}

.nav-links a{

font-size:15px;

font-weight:500;

transition:var(--transition);

}

.nav-links a:hover{

color:var(--primary);

}

#themeToggle{

width:48px;

height:48px;

border:none;

border-radius:50%;

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

color:white;

cursor:pointer;

transition:var(--transition);

}

#themeToggle:hover{

background:var(--primary);

color:black;

transform:rotate(20deg);

}

/*==============================
 HERO
==============================*/

.hero{

display:flex;

justify-content:center;

align-items:center;

min-height:100vh;

padding:120px 6% 60px;

}

.hero-content{

display:flex;

align-items:center;

justify-content:space-between;

gap:70px;

flex-wrap:wrap;

}

.hero-image{

flex:1;

display:flex;

justify-content:center;

}

.hero-image img{

width:320px;

height:320px;

border-radius:50%;

object-fit:cover;

border:4px solid var(--primary);

box-shadow:

0 0 30px rgba(0,212,255,.5),

0 0 80px rgba(0,212,255,.25);

transition:.5s;

}

.hero-image img:hover{

transform:scale(1.05);

}

.hero-text{

flex:1;

}

.hero-text h1{

font-size:4rem;

line-height:1.1;

margin-bottom:12px;

}

.hero-text span{

color:var(--primary);

}

.hero-text h2{

height:42px;

font-size:1.8rem;

margin-bottom:25px;

color:var(--secondary);

}

.hero-text p{

font-size:17px;

line-height:1.9;

color:var(--text-light);

max-width:580px;

margin-bottom:35px;

}

/*==============================
BUTTONS
==============================*/

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.primary-btn,

.secondary-btn{

padding:15px 32px;

border-radius:100px;

font-weight:600;

transition:.35s;

}

.primary-btn{

background:var(--primary);

color:#000;

}

.primary-btn:hover{

transform:translateY(-5px);

box-shadow:0 0 25px rgba(0,212,255,.6);

}

.secondary-btn{

border:2px solid var(--primary);

color:var(--primary);

}

.secondary-btn:hover{

background:var(--primary);

color:#000;

}

/*==============================
SECTIONS
==============================*/

section{

padding:110px 6%;

}

/*==============================
 HERO SECTION
==============================*/


.hero{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

padding:40px 20px;

}



.hero-content{

max-width:800px;

}



.profile-wrapper{

width:170px;

height:170px;

margin:auto;

padding:6px;

border-radius:50%;

background:
linear-gradient(
45deg,
var(--primary),
var(--secondary)
);

animation:
float 4s ease-in-out infinite;

}



.profile-image{

width:100%;

height:100%;

object-fit:cover;

border-radius:50%;

}



.hero h1{

font-size:clamp(2.5rem,5vw,4rem);

margin-top:30px;

}



.hero h1 span{

color:var(--primary);

}



.hero h2{

margin:20px 0;

font-size:1.8rem;

}



.hero p{

max-width:600px;

margin:20px auto;

line-height:1.7;

opacity:.85;

}



.hero-buttons{

display:flex;

justify-content:center;

gap:20px;

margin-top:35px;

flex-wrap:wrap;

}



.primary-btn,
.secondary-btn{

padding:14px 30px;

border-radius:50px;

text-decoration:none;

transition:.3s;

}



.primary-btn{

background:var(--primary);

color:white;

}



.secondary-btn{

border:2px solid var(--primary);

color:var(--text);

}



.primary-btn:hover,
.secondary-btn:hover{

transform:translateY(-5px);

}



@keyframes float{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-15px);

}


}

/*==============================
FOOTER
==============================*/

footer{

padding:35px;

text-align:center;

color:var(--text-light);

background:#02050d;

border-top:1px solid rgba(255,255,255,.06);

}

/*==============================
 ABOUT SECTION
==============================*/


.about-container{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(300px,1fr));

gap:40px;

}



.about-card,
.journey{

background:var(--surface);

padding:30px;

border-radius:25px;

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

}



.about-card p{

line-height:1.8;

opacity:.85;

}




.timeline-item{

display:flex;

gap:20px;

margin-top:25px;

}



.timeline-item span{

min-width:45px;

height:45px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:var(--primary);

color:white;

font-weight:bold;

}



.timeline-item h4{

margin-bottom:8px;

}



.timeline-item p{

opacity:.8;

line-height:1.5;

}

/*=====================================
BOOT SCREEN
=====================================*/

#loader{

position:fixed;

inset:0;

background:#030712;

display:flex;

justify-content:center;

align-items:center;

z-index:999999;

font-family:"Courier New",monospace;

}

.boot-screen{

width:min(92%,700px);

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

border:1px solid rgba(0,212,255,.25);

border-radius:18px;

padding:35px;

box-shadow:0 0 40px rgba(0,212,255,.15);

}

.boot-console p:last-child{

color:#00d4ff;

font-weight:bold;

animation:blink 1s infinite;

}

@keyframes blink{

50%{

opacity:.6;

}

}

.boot-logo{

color:#00d4ff;

font-size:2rem;

margin-bottom:30px;

}

.boot-logo span{

font-size:1rem;

opacity:.7;

margin-left:10px;

}

.boot-console{

height:240px;

overflow:hidden;

}

.boot-console p{

opacity:0;

color:#7CFC98;

margin:10px 0;

transform:translateX(-20px);

}

.progress{

margin-top:25px;

height:10px;

background:#111827;

border-radius:100px;

overflow:hidden;

}

#progressBar{

width:0;

height:100%;

background:linear-gradient(90deg,#00d4ff,#7c3aed);

}

.boot-percent{

margin-top:15px;

text-align:right;

color:#00d4ff;

font-weight:bold;

}
/*==============================
LOADER
==============================*/

#loader{

position:fixed;

inset:0;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

background:#050816;

z-index:99999;

}

#loader h1{

font-size:50px;

color:var(--primary);

margin-bottom:15px;

}

#loader p{

color:var(--text-light);

}

@media(max-width:600px){

.hero h1{

font-size:2.2rem;

}


.profile-wrapper{

width:140px;

height:140px;

}


.hero h2{

font-size:1.3rem;

}

}