/* ============================================================================
   Modern Portfolio - Design Override Layer
   Applies UI/UX Pro Max design system on top of base styles
   Font: Space Grotesk (display) + DM Sans (body)
   Color: Monochrome slate palette + #2563EB blue accent
   ============================================================================ */

/* ============================================================================
   1. DESIGN TOKEN OVERRIDES
   ============================================================================ */

:root {
  --font-primary: "DM Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "DM Sans", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;

  --primary-color: #2563EB;
  --primary-dark:  #1E40AF;
  --secondary-color: #3B82F6;
  --accent-color:  #06B6D4;

  --gray-50:  #FAFAFA;
  --gray-100: #F5F5F5;
  --gray-200: #E5E5E5;
  --gray-300: #D4D4D8;
  --gray-400: #A1A1A6;
  --gray-500: #71717A;
  --gray-600: #52525B;
  --gray-700: #3F3F46;
  --gray-800: #27272A;
  --gray-900: #18181B;

  --dark-bg:           #0F172A;
  --dark-bg-secondary: #1E293B;
  --dark-bg-tertiary:  #334155;
  --dark-text:         #F1F5F9;
  --dark-text-secondary: #CBD5E1;
  --dark-border:       #475569;

  --light-bg:           #FFFFFF;
  --light-bg-secondary: #FAFAFA;
  --light-bg-tertiary:  #F5F5F5;
  --light-text:         #09090B;
  --light-text-secondary: #52525B;
  --light-border:       #E5E5E5;

  --border-radius:    14px;
  --border-radius-sm: 8px;
  --border-radius-lg: 20px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:    0 2px 6px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,.09), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 24px rgba(0,0,0,.1),  0 4px 8px rgba(0,0,0,.06);
  --shadow-xl: 0 20px 48px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.07);

  --transition-fast:   0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   0.4s  cubic-bezier(0.4, 0, 0.2, 1);

  --primary-rgb: 37, 99, 235;
  --secondary-rgb: 59, 130, 246;
  --border-rgb: 71, 85, 105;
}

/* ============================================================================
   2. THEME TOKENS
   ============================================================================ */

[data-theme="dark"] {
  --bg-color:       var(--dark-bg);
  --bg-secondary:   var(--dark-bg-secondary);
  --bg-tertiary:    var(--dark-bg-tertiary);
  --text-color:     var(--dark-text);
  --text-secondary: var(--dark-text-secondary);
  --border-color:   var(--dark-border);
}

[data-theme="light"] {
  --bg-color:       var(--light-bg);
  --bg-secondary:   var(--light-bg-secondary);
  --bg-tertiary:    var(--light-bg-tertiary);
  --text-color:     var(--light-text);
  --text-secondary: var(--light-text-secondary);
  --border-color:   var(--light-border);
}

/* ============================================================================
   3. BASE TYPOGRAPHY
   ============================================================================ */

body { font-family: var(--font-primary); -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); letter-spacing: -0.02em; }
code, pre { font-family: var(--font-mono); }

/* ============================================================================
   4. NAVIGATION
   ============================================================================ */

.navbar {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: none;
}
[data-theme="dark"] .navbar {
  background: rgba(15,23,42,0.92);
  border-bottom-color: rgba(255,255,255,.06);
}
.navbar.scrolled { background: rgba(255,255,255,0.97); box-shadow: var(--shadow-md); }
[data-theme="dark"] .navbar.scrolled { background: rgba(15,23,42,0.97); }

.nav-logo .logo-text {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.nav-link { font-family: var(--font-primary); font-weight: 500; font-size: 0.9rem; border-radius: 8px; }
.nav-link:hover, .nav-link.active { background: rgba(37,99,235,.08); color: var(--primary-color); }

.theme-toggle {
  border-radius: 10px; width: 38px; height: 38px;
  background: var(--gray-100); border: 1px solid var(--gray-200);
}
[data-theme="dark"] .theme-toggle { background: var(--dark-bg-tertiary); border-color: var(--dark-border); color: var(--dark-text); }
.theme-toggle:hover { background: var(--primary-color); border-color: var(--primary-color); color: #fff; transform: none; }

/* ============================================================================
   5. HERO SECTION
   ============================================================================ */

.hero-name { font-family: var(--font-display); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
.name-part {
  background: linear-gradient(135deg, var(--primary-color) 0%, #06B6D4 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
[data-theme="dark"] .name-part {
  background: linear-gradient(135deg, #60A5FA 0%, #38BDF8 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-subtitle { font-size: 1.35rem; font-weight: 500; }
.typed-text { font-weight: 700; color: var(--primary-color); }
.hero-description { font-size: 1.05rem; line-height: 1.75; }

.btn { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; border-radius: 12px; padding: 0.85rem 1.75rem; }
.btn-primary { background: var(--primary-color); background-image: none; box-shadow: 0 4px 14px rgba(37,99,235,.35); }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37,99,235,.45); }
.btn-secondary { background: transparent; border: 1.5px solid var(--gray-300); color: var(--text-color); }
[data-theme="dark"] .btn-secondary { border-color: var(--dark-border); color: var(--dark-text); }
.btn-secondary:hover { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }

.social-link { width: 44px; height: 44px; border: 1.5px solid var(--gray-200); border-radius: 12px; color: var(--gray-500); }
[data-theme="dark"] .social-link { border-color: var(--dark-border); color: var(--dark-text-secondary); }
.social-link:hover { border-color: var(--primary-color); background: var(--primary-color); color: #fff; transform: translateY(-3px); }

.image-container { width: 380px; height: 380px; }
.image-border { border: 2px solid var(--primary-color); border-radius: 28px; top: -12px; left: -12px; right: -12px; bottom: -12px; animation: none; }
.profile-img { border-radius: 24px; }

/* ============================================================================
   6. SECTION HEADERS
   ============================================================================ */

.section-header { text-align: center; margin-bottom: 3.5rem; }
.section-number {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  background: rgba(37,99,235,.08);
  color: var(--primary-color);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
  border: 1px solid rgba(37,99,235,.15);
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--primary-color), #0EA5E9);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.section-subtitle { font-size: 1.05rem; font-weight: 500; margin-top: 0.5rem; }

/* ============================================================================
   7. ABOUT SECTION
   ============================================================================ */

.about-section { background: var(--bg-secondary, var(--dark-bg-secondary)); }
.about-description p { font-size: 1.05rem; line-height: 1.8; }
.detail-item { padding: 0.85rem 0; border-bottom: 1px solid rgba(37,99,235,.08); }
.detail-label { font-weight: 700; font-size: 0.9rem; }

.detail-value.available {
  color: #10B981; font-weight: 700;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.detail-value.available::before {
  content: ''; width: 8px; height: 8px; background: #10B981;
  border-radius: 50%; display: inline-block;
  animation: availablePulse 2s infinite;
}
@keyframes availablePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,.4); }
  50%      { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
}

.service-card { background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 18px; padding: 1.75rem; }
.service-card::before { background: linear-gradient(90deg, var(--primary-color), #06B6D4); }
.service-card:hover { border-color: var(--primary-color); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.service-icon { background: linear-gradient(135deg, var(--primary-color), #06B6D4); border-radius: 14px; width: 56px; height: 56px; }
.service-card h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }

/* ============================================================================
   8. EXPERIENCE SECTION
   ============================================================================ */

.experience-tabs { gap: 0.75rem; margin-bottom: 3rem; }
.tab-btn {
  font-family: var(--font-display); font-weight: 600; border-radius: 999px;
  padding: 0.75rem 1.5rem; font-size: 0.9rem;
  border: 1.5px solid var(--border-color); background: var(--bg-secondary);
  color: var(--text-secondary); position: relative; overflow: hidden; z-index: 0;
}
.tab-btn::before { background: linear-gradient(135deg, var(--primary-color), #06B6D4); z-index: -1; }
.tab-btn.active, .tab-btn:hover { border-color: var(--primary-color); box-shadow: 0 4px 16px rgba(37,99,235,.25); }

.experience-card { border-radius: 20px; border: 1px solid var(--border-color); background: var(--bg-secondary); }
.experience-card::before { background: linear-gradient(90deg, var(--primary-color), #06B6D4); height: 3px; }
.experience-card.current { border-color: var(--primary-color); box-shadow: 0 0 0 1px rgba(37,99,235,.2), var(--shadow-md); }
.experience-card:hover { border-color: var(--primary-color); box-shadow: var(--shadow-xl); transform: translateY(-6px); }

.company-icon { background: linear-gradient(135deg, var(--primary-color), #06B6D4); border-radius: 14px; width: 56px; height: 56px; }
.period-badge {
  background: rgba(37,99,235,.08); color: var(--primary-color);
  border: 1px solid rgba(37,99,235,.2);
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700;
  border-radius: 999px; padding: 0.35rem 0.85rem;
}
.period-badge.current { background: var(--primary-color); color: #fff; border-color: var(--primary-color); animation: none; }

.card-content h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }
.card-content h4 { font-weight: 600; color: var(--primary-color); }
.tech-tag { background: rgba(37,99,235,.1); color: var(--primary-color); border: none; border-radius: 6px; font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.6rem; }
.achievements li i { color: var(--primary-color); }

.education-card { border-radius: 22px; border: 1px solid var(--border-color); background: var(--bg-secondary); }
.education-card:hover { border-color: var(--primary-color); box-shadow: var(--shadow-xl); transform: translateY(-5px) scale(1.01); }
.education-icon { background: linear-gradient(135deg, var(--primary-color), #06B6D4); border-radius: 14px; }
.education-content h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }
.education-content h4 { color: var(--primary-color); }
.degree-indicator { border-color: var(--primary-color); color: var(--primary-color); font-family: var(--font-mono); font-weight: 700; }
.skill-tag { border-radius: 8px; font-size: 0.75rem; font-weight: 600; border: 1px solid var(--border-color); }
.skill-tag:hover { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }

.certificate-card.modern { border-radius: 20px; border: 1px solid var(--border-color); background: var(--bg-secondary); }
.certificate-card.modern:hover { transform: translateY(-6px); border-color: var(--primary-color); box-shadow: var(--shadow-xl); }
.certificate-overlay { background: var(--primary-color); }
.certificate-info h4 { font-family: var(--font-display); font-weight: 700; }
.certificate-info p { color: var(--primary-color); }
.certificate-meta .status.active { background: rgba(16,185,129,.1); color: #10B981; border: 1px solid rgba(16,185,129,.25); }

/* ============================================================================
   9. SKILLS SECTION
   ============================================================================ */

.skills-section { background: var(--bg-secondary, var(--dark-bg-secondary)); }
.skill-nav-btn {
  font-family: var(--font-display); font-weight: 600; border-radius: 999px;
  border: 1.5px solid var(--border-color); background: var(--bg-color);
  color: var(--text-secondary); font-size: 0.9rem;
}
.skill-nav-btn::before { background: linear-gradient(135deg, var(--primary-color), #06B6D4); }
.skill-nav-btn.active, .skill-nav-btn:hover { border-color: var(--primary-color); box-shadow: 0 4px 16px rgba(37,99,235,.25); }

.skill-card { border-radius: 20px; border: 1px solid var(--border-color); background: var(--bg-color); }
.skill-card::before { background: linear-gradient(90deg, var(--primary-color), #06B6D4); height: 3px; }
.skill-card:hover { border-color: var(--primary-color); box-shadow: var(--shadow-xl); transform: translateY(-6px); }
.skill-card.expert       { border-left: 3px solid #10B981; }
.skill-card.advanced     { border-left: 3px solid #3B82F6; }
.skill-card.intermediate { border-left: 3px solid #F59E0B; }
.skill-card.beginner     { border-left: 3px solid #EF4444; }
.skill-icon { background: linear-gradient(135deg, var(--primary-color), #06B6D4); border-radius: 14px; width: 54px; height: 54px; }
.skill-card:hover .skill-icon { transform: scale(1.1); }
.skill-content h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }
.level-badge.expert      { background: rgba(16,185,129,.1); color: #10B981; border-color: rgba(16,185,129,.3); }
.level-badge.advanced    { background: rgba(59,130,246,.1); color: #3B82F6; border-color: rgba(59,130,246,.3); }
.level-badge.intermediate{ background: rgba(245,158,11,.1); color: #F59E0B; border-color: rgba(245,158,11,.3); }
.level-badge.beginner    { background: rgba(239,68,68,.1);  color: #EF4444; border-color: rgba(239,68,68,.3); }
.skill-percentage { font-family: var(--font-mono); font-weight: 700; color: var(--primary-color); }
.skill-bar-modern { height: 6px; border-radius: 999px; background: var(--gray-200); overflow: hidden; }
[data-theme="dark"] .skill-bar-modern { background: var(--dark-bg-tertiary); }
.skill-fill { background: linear-gradient(90deg, var(--primary-color), #06B6D4); border-radius: 999px; }
.skill-tags span { border-radius: 6px; font-size: 0.72rem; font-weight: 600; border: 1px solid var(--border-color); background: var(--bg-secondary); }
.skill-tags span:hover { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }

.skills-summary { margin-top: 2.5rem; }
.summary-card { border-radius: 16px; border: 1px solid var(--border-color); background: var(--bg-color); }
.summary-card:hover { border-color: var(--primary-color); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.summary-icon { background: linear-gradient(135deg, var(--primary-color), #06B6D4); border-radius: 12px; width: 48px; height: 48px; }
.summary-content h4 { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em; }

/* ============================================================================
   10. PROJECTS SECTION
   ============================================================================ */

.projects-filters { margin-bottom: 2.5rem; }
.filter-btn {
  font-family: var(--font-display); font-weight: 600; border-radius: 10px;
  border: 1.5px solid var(--border-color); padding: 0.6rem 1.25rem; font-size: 0.9rem;
}
.filter-btn.active, .filter-btn:hover { background: var(--primary-color); color: #fff; border-color: var(--primary-color); box-shadow: 0 4px 12px rgba(37,99,235,.3); }

.project-card { border-radius: 18px; border: 1px solid var(--border-color); background: var(--bg-secondary); overflow: hidden; }
.project-card:hover { border-color: var(--primary-color); box-shadow: var(--shadow-xl); transform: translateY(-8px) rotateX(2deg); }
.project-image { height: 220px; border-radius: 0; }
.project-card:hover .project-image img { transform: scale(1.07); }
.project-overlay { background: rgba(37,99,235,.88); backdrop-filter: blur(2px); }
.project-link { width: 46px; height: 46px; border-radius: 12px; background: #fff; color: var(--primary-color); }
.project-link:hover { background: var(--primary-color); color: #fff; transform: scale(1.1); }
.project-content { padding: 1.5rem; }
.project-category {
  background: rgba(37,99,235,.1); color: var(--primary-color);
  border-radius: 6px; font-family: var(--font-mono);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.25rem 0.7rem;
}
.project-content h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; margin-top: 0.75rem; margin-bottom: 0.6rem; }
.project-content p { font-size: 0.9rem; line-height: 1.7; }
.project-tech .tech-tag { background: var(--bg-color); color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: 6px; font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.6rem; }

/* ============================================================================
   11. CONTACT SECTION
   ============================================================================ */

.contact-section { background: var(--bg-secondary, var(--dark-bg-secondary)); }
.contact-item {
  padding: 1.1rem 1.25rem; border-radius: 14px;
  background: var(--bg-color); border: 1px solid var(--border-color);
  margin-bottom: 1rem; transition: all var(--transition-fast);
}
.contact-item:hover { border-color: var(--primary-color); box-shadow: var(--shadow-md); }
.contact-icon { width: 46px; height: 46px; background: linear-gradient(135deg, var(--primary-color), #06B6D4); border-radius: 12px; flex-shrink: 0; }
.contact-icon i { font-size: 1.25rem; }
.contact-details h4 { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; margin-bottom: 0.2rem; }
.contact-details p { font-size: 0.9rem; }
.contact-social h4 { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; margin-bottom: 0.75rem; margin-top: 0.5rem; }
.social-links .social-link { width: 42px; height: 42px; border-radius: 12px; border: 1.5px solid var(--border-color); }

.form-group { position: relative; margin-bottom: 1.5rem; }
.form-input {
  border-radius: 12px; border: 1.5px solid var(--border-color);
  background: var(--bg-color); padding: 1rem 1rem 0.5rem;
  font-family: var(--font-primary); font-size: 0.95rem; color: var(--text-color);
}
.form-input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.form-input:focus + .form-label,
.form-input:not(:placeholder-shown) + .form-label,
.form-input:valid + .form-label { color: var(--primary-color); font-size: 0.78rem; font-weight: 700; }
.form .btn-primary { width: 100%; padding: 1rem; font-size: 1rem; border-radius: 12px; justify-content: center; gap: 0.6rem; }

/* ============================================================================
   12. FOOTER & BACK-TO-TOP
   ============================================================================ */

.footer { background: var(--bg-color); border-top: 1px solid var(--border-color); padding: 2rem 0; }
.footer-content p { font-size: 0.9rem; }
.footer-content i { color: #EF4444; }

.back-to-top { background: var(--primary-color); border-radius: 14px; width: 46px; height: 46px; box-shadow: 0 4px 14px rgba(37,99,235,.4); }
.back-to-top:hover { background: var(--primary-dark); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(37,99,235,.5); }

/* ============================================================================
   13. PRELOADER
   ============================================================================ */

#preloader { background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%); }
.terminal-loader { background: #0D1117; border-color: #30363D; border-radius: 14px; }
.terminal-header { background: #161B22; border-bottom-color: #30363D; border-radius: 14px 14px 0 0; }

/* ============================================================================
   14. HERO SHAPES
   ============================================================================ */

.shape { background: linear-gradient(135deg, rgba(37,99,235,.4), rgba(6,182,212,.3)); filter: blur(60px); }

/* ============================================================================
   15. LIGHT MODE
   ============================================================================ */

[data-theme="light"] .about-section,
[data-theme="light"] .skills-section,
[data-theme="light"] .contact-section { background: var(--gray-50); }
[data-theme="light"] .service-card,
[data-theme="light"] .experience-card,
[data-theme="light"] .education-card,
[data-theme="light"] .skill-card,
[data-theme="light"] .certificate-card.modern,
[data-theme="light"] .summary-card,
[data-theme="light"] .project-card { background: #fff; box-shadow: var(--shadow-sm); }
[data-theme="light"] .contact-item { background: #fff; }
[data-theme="light"] .section-title { background: linear-gradient(135deg, #1D4ED8, #0369A1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ============================================================================
   16. MAIN CONTENT OFFSET
   ============================================================================ */

.main-content { padding-top: 80px; }

/* ============================================================================
   17. MOBILE RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
  .nav-menu { background: var(--bg-color); border-right: 1px solid var(--border-color); }
  [data-theme="dark"] .nav-menu { background: var(--dark-bg); border-right-color: var(--dark-border); }
  .image-container { width: 260px; height: 260px; }
  .hero-content { text-align: center; }
  .hero-social, .hero-buttons { justify-content: center; }
  .profile-img { border-radius: 20px; }
  .image-border { border-radius: 22px; }
}

/* ============================================================================
   18. ACCESSIBILITY
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 3px; border-radius: 4px; }