/* DARK MODE PORTFOLIO - PROFESSIONAL THEME */
:root {
  --bg: #0b0f17;
  --bg-alt: #0d1420;
  --panel: #111827;
  --panel-alt: #121b2a;
  --text: #e5e7eb;
  --text-bright: #f3f4f6;
  --muted: #9aa5b1;
  --muted-2: #7b8794;
  --primary: #3b82f6;
  --primary-2: #2563eb;
  --accent: #60a5fa;
  --line: #1f2937;
  --tag-bg: #1f2a3a;
  --tag-text: #c7d2fe;
  --border: #1e2a3d;
  --shadow-1: 0 10px 30px rgba(0,0,0,0.35);
  --shadow-2: 0 20px 50px rgba(0,0,0,0.4);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
}

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

/* Nav */
.navbar {
  position: fixed; top:0; width:100%;
  background: rgba(10,14,22,0.85);
  backdrop-filter: blur(12px);
  z-index:1000; padding:1rem 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  border-bottom: 1px solid rgba(59,130,246,0.1);
}
.nav-container { max-width:1200px; margin:0 auto; padding:0 20px; display:flex; justify-content:space-between; align-items:center; }
.nav-logo a { font-size:1.5rem; font-weight:700; color:var(--accent); text-decoration:none; letter-spacing:.3px; transition:color .3s; }
.nav-logo a:hover { color:var(--primary); }
.nav-menu { display:flex; list-style:none; gap:2rem; }
.nav-link { color:var(--muted); text-decoration:none; font-weight:500; transition:color .25s; position:relative; }
.nav-link:hover { color:var(--text-bright); }
.nav-link::after { content:''; position:absolute; bottom:-5px; left:0; width:0; height:2px; background:var(--primary); transition:width .3s; }
.nav-link:hover::after { width:100%; }

/* Hero */
.hero { min-height:100vh; display:flex; align-items:center; padding:120px 0 80px; background:linear-gradient(135deg,#0b0f17 0%,#0f172a 100%); position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; top:-50%; right:-20%; width:800px; height:800px; background:radial-gradient(circle,rgba(59,130,246,.08) 0%, transparent 70%); pointer-events:none; }
.hero-container { max-width:1200px; margin:0 auto; padding:0 20px; display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; position:relative; z-index:1; }
.hero-title { font-size:3.5rem; font-weight:800; color:var(--text-bright); margin-bottom:1rem; line-height:1.2; letter-spacing:-.5px; }
.hero-subtitle { font-size:1.5rem; color:var(--accent); margin-bottom:1.5rem; font-weight:600; }
.hero-description { font-size:1.1rem; color:var(--muted); margin-bottom:2rem; line-height:1.8; }
.hero-buttons { display:flex; gap:1rem; margin-bottom:2rem; }
.btn { padding:12px 24px; border-radius:10px; text-decoration:none; font-weight:600; transition:all .3s; display:inline-flex; align-items:center; gap:.5rem; border:none; cursor:pointer; font-size:1rem; }
.btn-primary { background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff; box-shadow:0 4px 15px rgba(59,130,246,.3); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(59,130,246,.4); }
.btn-secondary { background:transparent; color:var(--accent); border:2px solid var(--primary); }
.btn-secondary:hover { background:rgba(59,130,246,.1); color:var(--text-bright); border-color:var(--accent); }
.hero-location { display:flex; align-items:center; gap:.5rem; color:var(--muted); font-size:.95rem; }
.hero-location i { color:var(--accent); }

/* Profile */
.profile-card { background:var(--panel); padding:2rem; border-radius:20px; box-shadow:var(--shadow-2); text-align:center; border:1px solid var(--border); position:relative; overflow:hidden; }
.profile-card::before { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:radial-gradient(circle,rgba(59,130,246,.05) 0%, transparent 70%); pointer-events:none; }
.profile-placeholder { width:300px; height:300px; border-radius:16px; background: radial-gradient(1200px 400px at -20% -10%, rgba(59,130,246,.25), transparent 60%), linear-gradient(135deg,#0f1f39,#0e1530); display:flex; align-items:center; justify-content:center; color:#dbeafe; font-size:4rem; font-weight:800; letter-spacing:2px; border:2px solid rgba(59,130,246,.2); box-shadow: inset 0 0 30px rgba(59,130,246,.1); position:relative; z-index:1; }
.profile-image {
  width: 400px;
  height: 400px;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
  display: block;
margin: auto;
}


/* Sections */
.section-title { font-size:2.5rem; font-weight:800; text-align:center; margin-bottom:3rem; color:var(--text-bright); position:relative; display:inline-block; width:100%; }
.section-title::after { content:''; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%); width:80px; height:4px; background:linear-gradient(90deg,var(--primary),var(--accent)); border-radius:2px; }

/* Projects */
.projects { padding:80px 0; background-color:var(--bg-alt); }
.projects-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(350px, 1fr)); gap:2rem; }
.project-card { background:var(--panel); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-1); transition:transform .3s, box-shadow .3s; border:1px solid var(--border); }
.project-card:hover { transform:translateY(-8px); box-shadow:0 20px 60px rgba(0,0,0,.5); border-color:rgba(59,130,246,.3); }
.project-image { height:200px; background:linear-gradient(135deg,#152033,#1e2a3d); display:flex; align-items:center; justify-content:center; color:var(--muted); font-weight:600; font-size:1.1rem; position:relative; overflow:hidden; }
.project-image::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 50%, rgba(59,130,246,.15), transparent 60%); }
.project-content { padding:1.5rem; }
.project-content h3 { font-size:1.3rem; font-weight:700; color:var(--text-bright); margin-bottom:.75rem; }
.project-content p { color:var(--muted); line-height:1.7; margin-bottom:1rem; }
.project-tags { display:flex; flex-wrap:wrap; gap:.5rem; }
.tag { background-color:var(--tag-bg); color:var(--tag-text); padding:.3rem .75rem; border-radius:20px; font-size:.8rem; font-weight:600; border:1px solid rgba(59,130,246,.2); transition:all .2s; }
.tag:hover { background-color:rgba(59,130,246,.2); border-color:var(--primary); }

/* Download link button */
.project-file-link {
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1rem;
  padding:.6rem 1.2rem; background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#fff; text-decoration:none; border-radius:8px; font-size:.9rem; font-weight:600;
  transition:all .3s; box-shadow:0 2px 10px rgba(59,130,246,.2);
}
.project-file-link:hover { transform:translateY(-2px); box-shadow:0 4px 15px rgba(59,130,246,.4); background:linear-gradient(135deg,var(--accent),var(--primary)); }
.project-file-link i { font-size:1rem; }

/* Skills */
.skills { padding:80px 0; background-color:var(--bg); }
.skills-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2rem; margin-bottom:3rem; }
.skill-category { background:var(--panel); padding:2rem; border-radius:16px; box-shadow:var(--shadow-1); border:1px solid var(--border); transition:transform .3s; }
.skill-category:hover { transform:translateY(-5px); border-color:rgba(59,130,246,.3); }
.skill-category h3 { display:flex; align-items:center; gap:.75rem; font-size:1.3rem; color:var(--text-bright); margin-bottom:1.5rem; }
.skill-category i { color:var(--accent); font-size:1.5rem; }
.skill-item { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; color:var(--muted); }
.skill-level { width:120px; height:8px; background-color:var(--line); border-radius:6px; overflow:hidden; border:1px solid rgba(59,130,246,.1); }
.skill-bar { height:100%; background:linear-gradient(90deg,var(--primary),var(--accent)); border-radius:6px; box-shadow:0 0 10px rgba(59,130,246,.3); }

/* Contact */
.contact { padding:80px 0; background-color:var(--bg-alt); }
.contact-content { display:grid; grid-template-columns:1fr 1fr; gap:4rem; }
.contact-info h3 { font-size:1.5rem; color:var(--text-bright); margin-bottom:1rem; }
.contact-info p { color:var(--muted); line-height:1.8; margin-bottom:2rem; }
.contact-item { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; transition:transform .2s; }
.contact-item:hover { transform:translateX(5px); }
.contact-item i { color:var(--accent); width:20px; font-size:1.1rem; }
.contact-item a { color:var(--muted); text-decoration:none; transition:color .2s; }
.contact-item a:hover { color:var(--text-bright); }

/* Footer */
.footer { background-color:#0b1220; color:var(--muted); padding:2rem 0; text-align:center; border-top:1px solid var(--border); }
.footer p { font-size:.9rem; }

/* Responsive */
@media (max-width: 768px) {
  .hero-container { grid-template-columns:1fr; text-align:center; }
  .hero-title { font-size:2.5rem; }
  .hero-subtitle { font-size:1.2rem; }
  .contact-content { grid-template-columns:1fr; }
  .projects-grid { grid-template-columns:1fr; }
  .skills-grid { grid-template-columns:1fr; }
  .nav-menu { gap:1rem; }
  .profile-placeholder { width:250px; height:250px; font-size:3rem; }
}
@media (max-width: 480px) {
  .hero-title { font-size:2rem; }
  .section-title { font-size:2rem; }
  .hero-buttons { flex-direction:column; }
  .btn { width:100%; justify-content:center; }
}

/* Animation & Scrollbar */
@keyframes fadeIn { from { opacity:0; transform:translateY(20px);} to { opacity:1; transform:translateY(0);} }
.project-card,.skill-category { animation: fadeIn .6s ease-out; }
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--primary); border-radius:5px; }
::-webkit-scrollbar-thumb:hover { background:var(--accent); }