/* ============================================
   NISA NUR AKBIYIK — TECH PORTFOLIO
   Enhanced Futuristic Light Theme v2
   ============================================ */

:root {
    --bg: transparent;
    --bg-alt: rgba(253, 242, 248, 0.45);
    --bg-card: rgba(255,255,255,0.75);
    --bg-white: #FFFFFF;
    --text: #1E1B4B;
    --text-2: #4C4577;
    --text-3: #7C75A5;
    --text-4: #A8A2CC;
    --purple: #7C3AED;
    --purple-light: #A78BFA;
    --pink: #EC4899;
    --cyan: #06B6D4;
    --blue: #6366F1;
    --green: #10B981;
    --orange: #F59E0B;
    --gradient: linear-gradient(135deg, #7C3AED, #EC4899, #06B6D4);
    --gradient-2: linear-gradient(135deg, #6366F1, #A855F7, #EC4899);
    --gradient-soft: linear-gradient(135deg, rgba(124,58,237,0.08), rgba(236,72,153,0.06), rgba(6,182,212,0.08));
    --border: rgba(124,58,237,0.1);
    --glow: 0 0 40px rgba(124,58,237,0.12);
    --glow-hover: 0 0 60px rgba(124,58,237,0.2), 0 20px 60px rgba(236,72,153,0.1);
    --font: 'Outfit', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --font-head: 'Space Grotesk', sans-serif;
    --radius: 20px;
    --radius-sm: 12px;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --container: 1140px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--purple-light) #F5F3FF; }
html::-webkit-scrollbar { width:6px; }
html::-webkit-scrollbar-track { background: #F5F3FF; }
html::-webkit-scrollbar-thumb { background: var(--gradient); border-radius:3px; }
body {
    font-family: var(--font);
    background: transparent;
    color: var(--text);
    overflow-x: hidden;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
button { cursor:pointer; font-family:var(--font); }
.container { max-width:var(--container); margin:0 auto; padding:0 32px; position: relative; z-index: 2; }

/* === CURSOR === */
.cursor-dot { width:6px; height:6px; background:var(--purple); border-radius:50%; position:fixed; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition: width .25s var(--ease), height .25s var(--ease), background .25s; mix-blend-mode:exclusion; }
.cursor-dot.hover { width:40px; height:40px; background:rgba(124,58,237,0.12); border:1.5px solid var(--purple); mix-blend-mode:normal; }
.cursor-ring { width:32px; height:32px; border:1px solid rgba(124,58,237,0.15); border-radius:50%; position:fixed; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition: width .4s var(--ease), height .4s var(--ease), opacity .3s; }
.cursor-ring.hover { width:52px; height:52px; opacity:0; }

/* === LOADER === */
.loader { position:fixed; inset:0; background:var(--bg-white); z-index:10001; display:flex; align-items:center; justify-content:center; transition: opacity .6s var(--ease), visibility .6s; }
.loader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.loader-inner { position:relative; width:100px; height:100px; display:flex; align-items:center; justify-content:center; }
.loader-ring { position:absolute; border-radius:50%; border:2px solid transparent; animation: loaderSpin 1.5s linear infinite; }
.loader-ring:nth-child(1) { width:100%; height:100%; border-top-color:var(--purple); animation-duration:1.5s; }
.loader-ring:nth-child(2) { width:75%; height:75%; border-right-color:var(--pink); animation-duration:2s; animation-direction:reverse; }
.loader-ring:nth-child(3) { width:50%; height:50%; border-bottom-color:var(--cyan); animation-duration:1s; }
@keyframes loaderSpin { to { transform:rotate(360deg); } }
.loader-text { font-family:var(--font-head); font-size:18px; font-weight:700; letter-spacing:3px; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* === NAVBAR === */
.navbar { position:fixed; top:0; left:0; width:100%; padding:20px 40px; display:flex; align-items:center; justify-content:space-between; z-index:100; transition: all .4s var(--ease); }
.navbar.scrolled { background:rgba(245,243,255,0.85); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%); padding:14px 40px; box-shadow:0 1px 0 var(--border), var(--glow); }
.nav-logo { font-family:var(--font-mono); font-size:18px; font-weight:600; color:var(--text); letter-spacing:-0.5px; }
.logo-bracket { color:var(--purple); font-weight:400; }
.nav-links { display:flex; gap:32px; }
.nav-link { font-size:13px; font-weight:500; color:var(--text-2); letter-spacing:0.3px; position:relative; padding:4px 0; transition:color .3s; }
.nav-link::after { content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--gradient); border-radius:1px; transition:width .4s var(--ease); }
.nav-link:hover { color:var(--purple); }
.nav-link:hover::after { width:100%; }
.nav-burger { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; z-index:200; }
.nav-burger span { width:22px; height:2px; background:var(--text); border-radius:2px; transition:transform .4s var(--ease), opacity .3s; }
.nav-burger.active span:nth-child(1) { transform:rotate(45deg) translate(4px,5px); }
.nav-burger.active span:nth-child(2) { opacity:0; }
.nav-burger.active span:nth-child(3) { transform:rotate(-45deg) translate(4px,-5px); }

.mobile-menu { position:fixed; inset:0; background:rgba(245,243,255,0.97); backdrop-filter:blur(40px); z-index:150; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .4s var(--ease); }
.mobile-menu.active { opacity:1; pointer-events:all; }
.mobile-menu-nav { display:flex; flex-direction:column; align-items:center; gap:16px; }
.mobile-menu-nav a { font-family:var(--font-head); font-size:clamp(24px,5vw,40px); font-weight:600; color:var(--text-3); transition:color .3s; }
.mobile-menu-nav a:hover { background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* === HERO === */
.hero { position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:120px 32px 80px; }
.hero-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:0; }

/* Mesh Gradient Blobs */
.mesh-blob { position:absolute; border-radius:50%; filter:blur(100px); opacity:0.5; animation:meshFloat 15s ease-in-out infinite; z-index:0; }
.mesh-blob-1 { width:600px; height:600px; background:radial-gradient(circle, rgba(124,58,237,0.25), transparent 70%); top:-200px; right:-100px; }
.mesh-blob-2 { width:500px; height:500px; background:radial-gradient(circle, rgba(236,72,153,0.2), transparent 70%); bottom:-150px; left:-100px; animation-delay:-5s; }
.mesh-blob-3 { width:400px; height:400px; background:radial-gradient(circle, rgba(6,182,212,0.15), transparent 70%); top:40%; left:50%; animation-delay:-10s; }
@keyframes meshFloat {
    0%,100% { transform:translate(0,0) scale(1); }
    33% { transform:translate(40px,-30px) scale(1.1); }
    66% { transform:translate(-30px,25px) scale(0.9); }
}

.hero-content { position:relative; z-index:2; text-align:center; max-width:820px; }

/* Badge */
.hero-badge { display:inline-flex; align-items:center; gap:10px; padding:8px 20px 8px 12px; background:var(--bg-card); backdrop-filter:blur(12px); border:1px solid var(--border); border-radius:30px; font-size:13px; font-weight:500; color:var(--text-2); margin-bottom:32px; }
.badge-pulse { width:8px; height:8px; background:var(--green); border-radius:50%; display:inline-block; animation:pulse 2s ease-in-out infinite; box-shadow:0 0 8px rgba(16,185,129,0.5); }
@keyframes pulse { 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.5); opacity:0.5; } }

/* Title */
.hero-title { margin-bottom:24px; }
.hero-line { display:block; font-family:var(--font-head); font-size:clamp(20px,3vw,28px); font-weight:400; color:var(--text-2); letter-spacing:1px; margin-bottom:8px; }
.hero-name { display:inline-flex; font-family:var(--font-head); font-size:clamp(48px,8vw,88px); font-weight:800; line-height:1.1; letter-spacing:-2px; }
.name-char { display:inline-block; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:charWave 2.5s ease-in-out infinite; animation-delay:calc(var(--i) * 0.08s); }
.name-space { width:16px; }
@keyframes charWave { 0%,100%{transform:translateY(0)} 25%{transform:translateY(-6px)} 75%{transform:translateY(3px)} }

.hero-desc { font-size:clamp(16px,2vw,20px); color:var(--text-2); max-width:560px; margin:0 auto 28px; line-height:1.8; }

/* Typed */
.hero-typed { display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:14px; color:var(--purple); background:var(--bg-card); backdrop-filter:blur(12px); border:1px solid var(--border); padding:10px 20px; border-radius:var(--radius-sm); margin-bottom:40px; }
.typed-prefix { color:var(--cyan); font-weight:600; }
.typed-cursor { animation:blink 1s step-end infinite; margin-left:1px; color:var(--purple); }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* CTA */
.hero-cta { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:40px; }
.btn-glow { display:inline-flex; align-items:center; gap:10px; padding:16px 32px; border-radius:50px; font-size:14px; font-weight:600; color:#fff; background:var(--text); border:none; position:relative; overflow:hidden; transition: transform .3s var(--ease), box-shadow .3s; cursor:pointer; }
.btn-glow-bg { position:absolute; inset:0; background:var(--gradient); opacity:0; transition:opacity .4s; }
.btn-glow:hover .btn-glow-bg { opacity:1; }
.btn-glow:hover { transform:translateY(-3px); box-shadow:0 12px 40px rgba(124,58,237,0.3); }
.btn-glow-text { position:relative; z-index:1; }
.btn-glow svg { position:relative; z-index:1; transition:transform .3s; }
.btn-glow:hover svg { transform:translateX(4px); }
.btn-ghost { display:inline-flex; align-items:center; padding:16px 32px; border-radius:50px; font-size:14px; font-weight:600; color:var(--text); border:1.5px solid var(--border); background:var(--bg-card); backdrop-filter:blur(8px); transition:all .3s var(--ease); }
.btn-ghost:hover { border-color:var(--purple); color:var(--purple); transform:translateY(-3px); box-shadow:var(--glow); }

/* Hero Marquee */
.hero-marquee { overflow:hidden; width:100vw; position:relative; left:50%; transform:translateX(-50%); opacity:0.07; }
.marquee-inner { display:flex; animation:marqueeScroll 25s linear infinite; white-space:nowrap; }
.marquee-inner span { font-family:var(--font-head); font-size:clamp(40px,6vw,72px); font-weight:800; letter-spacing:2px; flex-shrink:0; padding-right:20px; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
@keyframes marqueeScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* Floating */
.floating-icons { position:absolute; inset:0; z-index:1; pointer-events:none; }
.float-icon { position:absolute; left:var(--x); top:var(--y); font-family:var(--font-mono); font-size:calc(14px * var(--s)); font-weight:600; color:var(--purple-light); opacity:0.12; animation:floatAround var(--d) ease-in-out infinite; letter-spacing:2px; }
@keyframes floatAround { 0%,100%{transform:translate(0,0) rotate(0deg)} 25%{transform:translate(15px,-20px) rotate(5deg)} 50%{transform:translate(-10px,-35px) rotate(-3deg)} 75%{transform:translate(20px,-15px) rotate(4deg)} }

/* Scroll hint */
.hero-scroll-hint { position:absolute; bottom:40px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; z-index:2; }
.scroll-line { width:1px; height:48px; background:linear-gradient(to bottom, var(--purple), transparent); animation:scrollPulse 2s ease-in-out infinite; }
@keyframes scrollPulse { 0%,100%{transform:scaleY(1);opacity:1} 50%{transform:scaleY(0.5);opacity:0.3} }
.hero-scroll-hint span { font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--text-4); }

/* === SECTIONS === */
.section { padding:120px 0; position:relative; }
.section-alt {
    background:var(--bg-alt);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.section-alt::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:var(--gradient); }
.section-tag { display:inline-flex; align-items:center; gap:12px; font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:2px; text-transform:uppercase; color:var(--text-3); margin-bottom:20px; }
.section-tag span { background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; font-weight:700; }
.section-title { font-family:var(--font-head); font-size:clamp(32px,5vw,52px); font-weight:700; line-height:1.15; letter-spacing:-1px; margin-bottom:16px; }
.gradient-text { background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.section-sub { font-size:17px; color:var(--text-3); margin-bottom:48px; }

/* Anim */
.anim-in { opacity:0; transform:translateY(36px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.anim-in.visible { opacity:1; transform:translateY(0); }

/* === ABOUT === */
.about-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:60px; margin-bottom:56px; align-items:start; }
.about-text { font-size:16px; color:var(--text-2); margin-bottom:16px; line-height:1.85; }
.about-text strong { color:var(--text); font-weight:600; }
.about-right { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.stat-card { padding:28px 24px; background:var(--bg-card); backdrop-filter:blur(16px); border:1px solid var(--border); border-radius:var(--radius); text-align:center; position:relative; overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s; }
.stat-card:hover { transform:translateY(-6px); box-shadow:var(--glow-hover); }
.stat-card-glow { position:absolute; top:-2px; left:-2px; right:-2px; bottom:-2px; background:var(--gradient); border-radius:calc(var(--radius)+2px); opacity:0; z-index:-1; transition:opacity .4s; }
.stat-card:hover .stat-card-glow { opacity:1; }
.stat-card:hover { background:var(--bg-white); }
.stat-value { display:block; font-family:var(--font-head); font-size:42px; font-weight:800; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; }
.stat-suffix { font-family:var(--font-head); font-size:28px; font-weight:700; background:var(--gradient-2); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.stat-label { display:block; font-size:12px; font-weight:500; color:var(--text-3); letter-spacing:0.5px; margin-top:8px; }

/* Info Chips */
.info-chips { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.chip { display:flex; align-items:center; gap:14px; padding:18px 20px; background:var(--bg-card); backdrop-filter:blur(12px); border:1px solid var(--border); border-radius:var(--radius-sm); transition:transform .3s var(--ease), box-shadow .3s; }
.chip:hover { transform:translateY(-4px); box-shadow:var(--glow); }
.chip-icon { font-size:28px; flex-shrink:0; }
.chip strong { font-size:13px; font-weight:600; display:block; }
.chip small { font-size:12px; color:var(--text-3); line-height:1.4; }

/* === SKILLS SHOWCASE === */
.skills-showcase {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}
.skill-item {
    padding:24px;
    background: radial-gradient(circle 180px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(124, 58, 237, 0.08), transparent 100%), var(--bg-card);
    backdrop-filter:blur(16px);
    border:1px solid var(--border);
    border-radius:var(--radius);
    transition:transform .4s var(--ease), box-shadow .4s, border-color .3s, background .3s;
    position:relative;
    overflow:hidden;
}
.skill-item::before {
    content:'';
    position:absolute;
    top:0; left:0; right:0;
    height:3px;
    background:var(--gradient);
    background-size:200% 100%;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .5s var(--ease);
}
.skill-item:hover { 
    transform:translateY(-4px); 
    box-shadow:var(--glow-hover); 
    border-color:rgba(124,58,237,0.2); 
    background: radial-gradient(circle 180px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(124, 58, 237, 0.13), transparent 100%), var(--bg-white);
}
.skill-item:hover::before { transform:scaleX(1); }

.skill-item-header { display:flex; align-items:center; gap:16px; margin-bottom:16px; }
.skill-icon-box {
    width:44px; height:44px;
    background:var(--gradient-soft);
    border:1px solid var(--border);
    border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
    transition:all .3s;
}
.skill-item:hover .skill-icon-box { background:rgba(124,58,237,0.12); border-color:var(--purple-light); }
.skill-icon-box svg { width:22px; height:22px; color:var(--purple); }
.skill-item h3 { font-family:var(--font-head); font-size:16px; font-weight:600; }
.skill-pct { font-family:var(--font-mono); font-size:13px; font-weight:600; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

.skill-bar { width:100%; height:6px; background:rgba(124,58,237,0.06); border-radius:3px; overflow:hidden; margin-bottom:4px; }
.skill-bar-fill { width:0%; height:100%; background:var(--gradient); background-size:200% 100%; border-radius:3px; transition:width 1.5s var(--ease); position:relative; }
.skill-bar-fill::after {
    content:'';
    position:absolute;
    right:0; top:0; bottom:0;
    width:20px;
    background:rgba(255,255,255,0.4);
    filter:blur(4px);
    animation:barShine 2s ease-in-out infinite;
}
@keyframes barShine { 0%,100%{opacity:0} 50%{opacity:1} }

.skill-details {
    font-size: 11.5px;
    color: var(--text-3);
    line-height: 1.6;
    margin-top: 16px;
    border-top: 1px dashed rgba(124, 58, 237, 0.15);
    padding-top: 12px;
    font-weight: 400;
}

/* === PROJECTS === */
.projects-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.project-card-wide { grid-column:1/-1; }
.project-card { position:relative; border-radius:var(--radius); overflow:hidden; transition:transform .5s var(--ease); }
.project-card:hover { transform:translateY(-8px); }

/* Animated border */
.project-card-border { position:absolute; inset:0; border-radius:var(--radius); padding:1.5px; background:var(--gradient); background-size:300% 300%; animation:borderMove 4s ease infinite; -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .4s; }
@keyframes borderMove { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.project-card:hover .project-card-border { opacity:1; }

.project-card-body { display:flex; gap:24px; padding:28px; background:var(--bg-card); backdrop-filter:blur(16px); border:1px solid var(--border); border-radius:var(--radius); height:100%; transition:border-color .3s, box-shadow .4s, background .3s; }
.project-card:hover .project-card-body { border-color:transparent; box-shadow:var(--glow-hover); background:var(--bg-white); }

/* Project preview images */
.project-preview { position:relative; width:200px; min-height:200px; flex-shrink:0; border-radius:14px; overflow:hidden; }
.preview-img { position:absolute; width:120px; border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,0.12); transition:transform .5s var(--ease), box-shadow .3s; border:2px solid rgba(255,255,255,0.8); }
.preview-img:nth-child(1) { top:0; left:0; z-index:3; }
.preview-img:nth-child(2) { top:16px; left:40px; z-index:2; transform:rotate(3deg); }
.preview-img:nth-child(3) { top:32px; left:72px; z-index:1; transform:rotate(6deg); }
.project-card:hover .preview-img:nth-child(1) { transform:rotate(-3deg) scale(1.05); box-shadow:0 12px 40px rgba(124,58,237,0.2); }
.project-card:hover .preview-img:nth-child(2) { transform:rotate(6deg) translateX(8px) scale(1.03); }
.project-card:hover .preview-img:nth-child(3) { transform:rotate(10deg) translateX(12px) scale(1.01); }

.preview-count { position:absolute; bottom:8px; right:8px; font-size:11px; font-weight:600; color:var(--purple); background:rgba(255,255,255,0.9); backdrop-filter:blur(8px); padding:4px 10px; border-radius:20px; z-index:4; border:1px solid var(--border); }

.project-preview-empty { background:var(--gradient-soft); display:flex; align-items:center; justify-content:center; }
.preview-placeholder { text-align:center; }
.preview-placeholder span { font-size:40px; display:block; margin-bottom:4px; }
.preview-placeholder small { font-size:11px; color:var(--text-4); font-weight:500; }

.project-info { flex:1; display:flex; flex-direction:column; }
.project-header { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.project-num { font-family:var(--font-head); font-size:28px; font-weight:800; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; opacity:0.3; }
.project-tags { display:flex; gap:6px; flex-wrap:wrap; }
.project-tags span { font-size:10px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; color:var(--purple); background:rgba(124,58,237,0.06); padding:4px 12px; border-radius:20px; border:1px solid rgba(124,58,237,0.1); }
.project-card h3 { font-family:var(--font-head); font-size:20px; font-weight:700; margin-bottom:10px; }
.project-card p { font-size:14px; color:var(--text-2); line-height:1.7; margin-bottom:16px; flex:1; }
.project-link { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; transition:gap .3s var(--ease); }
.project-link:hover { gap:12px; }
.project-link svg { color:var(--purple); transition:transform .3s; }
.project-link:hover svg { transform:translate(2px,-2px); }
.project-link-soon { opacity:0.5; cursor:default; }
.project-link-soon:hover { gap:6px; }

/* === CERTIFICATES === */
.certs-list { max-width:800px; margin:0 auto; }
.cert-item { position:relative; padding-left:40px; padding-bottom:32px; }
.cert-item:last-child { padding-bottom:0; }
.cert-item-line { position:absolute; left:7px; top:20px; width:2px; height:calc(100% - 20px); background:var(--border); }
.cert-item:last-child .cert-item-line { display:none; }
.cert-item-dot { position:absolute; left:0; top:8px; width:16px; height:16px; border-radius:50%; background:var(--bg); border:3px solid var(--purple-light); transition:background .3s, border-color .3s, box-shadow .3s; }
.cert-item:hover .cert-item-dot { background:var(--purple); border-color:var(--purple); box-shadow:0 0 0 6px rgba(124,58,237,0.12); }
.cert-item-content { display:flex; align-items:flex-start; gap:16px; padding:24px; background:var(--bg-card); backdrop-filter:blur(12px); border:1px solid var(--border); border-radius:var(--radius-sm); transition:transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.cert-item:hover .cert-item-content { transform:translateX(8px); box-shadow:var(--glow); border-color:rgba(124,58,237,0.2); }
.cert-icon { font-size:28px; flex-shrink:0; }
.cert-item h3 { font-family:var(--font-head); font-size:16px; font-weight:600; margin-bottom:4px; }
.cert-item p { font-size:13px; color:var(--text-3); line-height:1.5; }
.cert-status { font-size:11px; font-weight:600; color:var(--green); white-space:nowrap; margin-left:auto; flex-shrink:0; padding:4px 12px; background:rgba(16,185,129,0.08); border-radius:20px; }

/* === TIMELINE === */
.timeline { position:relative; max-width:700px; margin:48px auto 0; }
.timeline-line { position:absolute; left:32px; top:0; width:2px; height:100%; background:var(--border); }
.timeline-line-fill { width:100%; height:0; background:var(--gradient); transition:height .3s linear; }
.timeline-entry { position:relative; padding-left:80px; padding-bottom:48px; }
.timeline-entry:last-child { padding-bottom:0; }
.timeline-marker { position:absolute; left:8px; top:4px; width:50px; height:50px; border-radius:50%; background:var(--bg-card); backdrop-filter:blur(8px); border:2px solid var(--border); display:flex; align-items:center; justify-content:center; transition:all .3s; z-index:2; }
.timeline-marker span { font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--purple); letter-spacing:0.5px; }
.timeline-entry:hover .timeline-marker { border-color:var(--purple); background:var(--bg-white); box-shadow:0 0 0 8px rgba(124,58,237,0.08), var(--glow); }
.timeline-content { padding:28px; background:var(--bg-card); backdrop-filter:blur(12px); border:1px solid var(--border); border-radius:var(--radius-sm); transition:all .3s var(--ease); }
.timeline-entry:hover .timeline-content { border-color:rgba(124,58,237,0.15); box-shadow:var(--glow); transform:translateX(8px); }
.timeline-content h3 { font-family:var(--font-head); font-size:18px; font-weight:600; margin-bottom:6px; }
.timeline-content p { font-size:14px; color:var(--text-2); line-height:1.65; }

/* === CONTACT === */
.contact-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:48px; align-items:start; }
.contact-card { display:flex; align-items:center; gap:16px; padding:20px 24px; background:var(--bg-card); backdrop-filter:blur(12px); border:1px solid var(--border); border-radius:var(--radius-sm); transition:all .3s var(--ease); margin-bottom:24px; }
.contact-card:hover { transform:translateY(-3px); box-shadow:var(--glow); border-color:var(--purple-light); }
.contact-card-icon { width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:rgba(124,58,237,0.06); border-radius:14px; color:var(--purple); flex-shrink:0; }
.contact-card strong { display:block; font-size:13px; margin-bottom:2px; }
.contact-card span { font-size:14px; color:var(--text-3); }
.contact-socials { display:flex; gap:12px; }
.social-link { width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:var(--bg-card); backdrop-filter:blur(8px); border:1px solid var(--border); border-radius:14px; color:var(--text-3); transition:all .3s var(--ease); }
.social-link:hover { border-color:var(--purple); color:var(--purple); transform:translateY(-4px); box-shadow:var(--glow); }
.social-link svg { width:20px; height:20px; }
.contact-form { display:flex; flex-direction:column; gap:20px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-field label { display:block; font-size:12px; font-weight:600; letter-spacing:0.5px; color:var(--text-2); margin-bottom:8px; }
.form-field input, .form-field textarea { width:100%; padding:14px 18px; background:var(--bg-card); backdrop-filter:blur(8px); border:1.5px solid var(--border); border-radius:var(--radius-sm); font-family:var(--font); font-size:14px; color:var(--text); outline:none; transition:border-color .3s, box-shadow .3s; resize:none; }
.form-field input:focus, .form-field textarea:focus { border-color:var(--purple); box-shadow:0 0 0 4px rgba(124,58,237,0.08); }
.form-field input::placeholder, .form-field textarea::placeholder { color:var(--text-4); }

/* === FOOTER === */
.footer { padding:32px 0; position:relative; }
.footer::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:var(--gradient); }
.footer-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.footer-logo { font-size:16px; }
.footer p { font-size:12px; color:var(--text-3); }
.footer-tag { font-size:12px; color:var(--text-4); }

/* === RESPONSIVE === */
@media (max-width:1024px) {
    .about-grid { grid-template-columns:1fr; gap:40px; }
    .info-chips { grid-template-columns:repeat(2,1fr); }
    .contact-grid { grid-template-columns:1fr; }
    .project-card-body { flex-direction:column; }
    .project-preview { width:100%; min-height:160px; }
}
@media (max-width:768px) {
    .section { padding:80px 0; }
    .container { padding:0 20px; }
    .navbar { padding:14px 20px; }
    .navbar.scrolled { padding:12px 20px; }
    .nav-links { display:none; }
    .nav-burger { display:flex; }
    .hero { padding:120px 20px 80px; }
    .projects-grid { grid-template-columns:1fr; }
    .project-card-wide { grid-column:auto; }
    .skills-showcase { grid-template-columns:1fr; }
    .form-row { grid-template-columns:1fr; }
    .cursor-dot,.cursor-ring { display:none !important; }
    .cert-item-content { flex-direction:column; gap:12px; }
    .cert-status { margin-left:0; }
    .info-chips { grid-template-columns:1fr 1fr; }
    .about-right { grid-template-columns:1fr 1fr; }
    .timeline-entry { padding-left:64px; }
    .timeline-marker { left:4px; width:40px; height:40px; }
    .timeline-marker span { font-size:10px; }
    .timeline-line { left:23px; }
    .hero-marquee { display:none; }
}
@media (max-width:480px) {
    .info-chips { grid-template-columns:1fr; }
    .footer-inner { flex-direction:column; text-align:center; }
    .project-preview { min-height:140px; }
    .preview-img { width:100px; }
}

/* === TOPO WAVES BACKGROUND === */
.hero::after,
.project-hero::after,
.section::after,
.section-alt::after,
.features-section::after,
.gallery-section::after,
.cta-section::after,
.footer::after,
.project-footer::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%23000000' stroke-width='1.2' stroke-opacity='0.28'%3E%3Cpath d='M-100,0 C0,50 50,-50 150,100 C200,180 250,120 400,200'/%3E%3Cpath d='M-100,20 C0,70 50,-30 150,120 C200,200 250,140 400,220'/%3E%3Cpath d='M-100,40 C0,90 50,-10 150,140 C200,220 250,160 400,240'/%3E%3Cpath d='M-100,60 C0,110 50,10 150,160 C200,240 250,180 400,260'/%3E%3Cpath d='M-100,80 C0,130 50,30 150,180 C200,260 250,200 400,280'/%3E%3Cpath d='M-100,100 C0,150 50,50 150,200 C200,280 250,220 400,300'/%3E%3Cpath d='M-100,120 C0,170 50,70 150,220 C200,300 250,240 400,320'/%3E%3Cpath d='M-100,140 C0,190 50,90 150,240 C200,320 250,260 400,340'/%3E%3Cpath d='M-100,160 C0,210 50,110 150,260 C200,340 250,280 400,360'/%3E%3Cpath d='M-100,180 C0,230 50,130 150,280 C200,360 250,300 400,380'/%3E%3Cpath d='M-100,200 C0,250 50,150 150,300 C200,380 250,320 400,400'/%3E%3Cpath d='M-100,-20 C0,30 50,-70 150,80 C200,160 250,100 400,180'/%3E%3Cpath d='M-100,-40 C0,10 50,-90 150,60 C200,140 250,80 400,160'/%3E%3Cpath d='M-100,-60 C0,-10 50,-110 150,40 C200,120 250,60 400,140'/%3E%3Cpath d='M-100,-80 C0,-30 50,-130 150,20 C200,100 250,40 400,120'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 300px 300px;
    opacity: 0.35;
    pointer-events: none;
    animation: topoFloat 24s linear infinite;
}

@keyframes topoFloat {
    0% { background-position: 0 0; }
    100% { background-position: 300px 300px; }
}

.topo-wave {
    display: none !important;
}

/* === DYNAMIC GRAINY HOLOGRAM BACKGROUND === */
.hologram-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background: #F8FAFC; /* Clean whitish base */
    pointer-events: none;
}

.holo-grain {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.08; /* Film grain texture */
    mix-blend-mode: overlay;
}

.holo-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.88;
    mix-blend-mode: normal;
    will-change: transform;
}

/* Blob 1: Blue */
.holo-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.8) 0%, rgba(99, 102, 241, 0.15) 60%, transparent 100%);
    top: -15%;
    left: -10%;
    animation: holoMove1 22s ease-in-out infinite alternate;
}

/* Blob 2: Pink */
.holo-2 {
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.85) 0%, rgba(244, 63, 94, 0.2) 60%, transparent 100%);
    bottom: -15%;
    right: -10%;
    animation: holoMove2 26s ease-in-out infinite alternate;
}

/* Blob 3: White Glow */
.holo-3 {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.4) 60%, transparent 100%);
    top: 20%;
    left: 20%;
    animation: holoMove3 30s ease-in-out infinite alternate;
}

/* Blob 4: Cyan/Turquoise */
.holo-4 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.8) 0%, rgba(45, 212, 191, 0.15) 60%, transparent 100%);
    top: 55%;
    left: -8%;
    animation: holoMove4 20s ease-in-out infinite alternate;
}

/* Blob 5: Yellow/Orange for iridescence */
.holo-5 {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(250, 204, 21, 0.6) 0%, rgba(249, 115, 22, 0.1) 60%, transparent 100%);
    top: 5%;
    right: 35%;
    animation: holoMove1 28s ease-in-out infinite alternate-reverse;
}

@keyframes holoMove1 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(160px, 90px) scale(1.15); }
}
@keyframes holoMove2 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-130px, -160px) scale(0.85); }
}
@keyframes holoMove3 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-100px, 120px) scale(1.1); }
}
@keyframes holoMove4 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(130px, -90px) scale(1.2); }
}

::selection { background:rgba(124,58,237,0.15); color:var(--text); }