/* ═══════════════════════════════════════════════════════════
   theme.css — Sajjad Baghaee Portfolio
   Tüm sayfalarda ortak tema, header, footer, bileşen stilleri
   ═══════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties ────────────────────────────── */
[data-theme="dark"] {
  color-scheme: dark;
  --sb-bg-color:       #1b304c;
  --sb-bg:            radial-gradient(160deg, #203a5c 0%, #1b304c 55%, #162942 100%);
  --sb-header-bg:     rgba(5,10,22,0.97);
  --sb-header-border: rgba(91,143,212,0.25);
  --sb-nav-color:     #cfd8e8;
  --sb-footer-bg:     rgba(5,10,22,0.97);
  --sb-footer-border: rgba(91,143,212,0.2);
  --sb-text-sec:      #8fa3bc;
  --sb-text-main:     #dce6f0;
  --sb-toggle-bg:     rgba(15,28,52,0.98);
  --sb-toggle-border: rgba(91,143,212,0.5);
  --sb-footer-link:   #8fa3bc;
  --sb-active-color:  #47b2ff;
  --sb-card-bg:       rgba(10,20,40,0.75);
  --sb-card-border:   rgba(91,143,212,0.18);
}
[data-theme="light"] {
  color-scheme: light;
  --sb-bg-color:       #f3f6fb;
  --sb-bg:            linear-gradient(160deg, #eef1f7 0%, #f3f6fb 55%, #f9fafc 100%);
  --sb-header-bg:     rgba(255,255,255,0.97);
  --sb-header-border: #dde3ed;
  --sb-nav-color:     #1a2744;
  --sb-footer-bg:     #1a2744;
  --sb-footer-border: #1a2744;
  --sb-text-sec:      #4a5e7a;
  --sb-text-main:     #1a2744;
  --sb-toggle-bg:     #eef1f7;
  --sb-toggle-border: #c9d4e3;
  --sb-footer-link:   #a8bcd4;
  --sb-active-color:  #47b2ff;
  --sb-card-bg:       rgba(255,255,255,0.92);
  --sb-card-border:   rgba(26,39,68,0.12);
}

/* ── Reset & Base ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  background-color: var(--sb-bg-color) !important;
  scrollbar-gutter: stable;
}

html,
body,
#root {
  min-height: 100%;
}

body {
  background-color: var(--sb-bg-color) !important;
  background-image: var(--sb-bg) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  color: var(--sb-text-main) !important;
  padding-top: 72px !important;
}

#root,
main.page,
body > main {
  background: transparent !important;
}

html.sb-theme-animating,
html.sb-theme-animating body,
html.sb-theme-animating #root,
html.sb-theme-animating #sb-header,
html.sb-theme-animating #sb-footer,
html.sb-theme-animating .card,
html.sb-theme-animating .degree-card,
html.sb-theme-animating .list-card,
html.sb-theme-animating .project-card,
html.sb-theme-animating .profile-card,
html.sb-theme-animating .note-card,
html.sb-theme-animating .contact-icon,
html.sb-theme-animating .badge,
html.sb-theme-animating .tag,
html.sb-theme-animating .entry-date,
html.sb-theme-animating .skill-icon,
html.sb-theme-animating a,
html.sb-theme-animating p,
html.sb-theme-animating h1,
html.sb-theme-animating h2,
html.sb-theme-animating h3,
html.sb-theme-animating span,
html.sb-theme-animating div {
  transition:
    background-color 0.38s ease,
    background-image 0.38s ease,
    color 0.38s ease,
    border-color 0.38s ease,
    box-shadow 0.38s ease,
    opacity 0.38s ease !important;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.38s;
  animation-timing-function: ease;
}

/* ── İçerik genişliği ─────────────────────────────────── */
main.page, body > main {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 24px !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  padding-bottom: 48px !important;
  box-sizing: border-box !important;
}
@media (max-width: 600px) {
  main.page, body > main {
    padding-top: 20px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ── Card renkleri ────────────────────────────────────── */
.card { background: var(--sb-card-bg) !important; border-color: var(--sb-card-border) !important; }

/* ── Animated page heading surface ────────────────────── */
main.page > .card:first-child,
.page-heading-card {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.84), rgba(255,255,255,0.7)) !important;
  border-color: rgba(31,125,255,0.16) !important;
  backdrop-filter: blur(14px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
}

main.page > .card:first-child::before,
.page-heading-card::before {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -100px;
  width: 240px;
  height: 240px;
  z-index: -2;
  background: rgba(31,125,255,0.12);
  border-radius: 50%;
  opacity: 1;
  animation: sb-heading-glow 18s ease-in-out infinite alternate;
}

main.page > .card:first-child::after,
.page-heading-card::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -100px;
  width: 240px;
  height: 240px;
  z-index: -1;
  background:
    repeating-linear-gradient(135deg, rgba(31,125,255,0.12) 0 1px, transparent 1px 16px);
  border-radius: 50%;
  opacity: 0.55;
  animation: sb-heading-sheen 14s ease-in-out infinite;
}

main.page > .card:first-child > *,
.page-heading-card > * {
  position: relative;
  z-index: 1;
}

[data-theme="dark"] main.page > .card:first-child,
[data-theme="dark"] .page-heading-card {
  background:
    linear-gradient(135deg, rgba(20,42,72,0.72), rgba(12,26,48,0.58)) !important;
  border-color: rgba(91,143,212,0.2) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.24) !important;
}

[data-theme="dark"] main.page > .card:first-child::before,
[data-theme="dark"] .page-heading-card::before {
  background: rgba(91,143,212,0.16);
  opacity: 0.58;
}

[data-theme="dark"] main.page > .card:first-child::after,
[data-theme="dark"] .page-heading-card::after {
  background:
    repeating-linear-gradient(135deg, rgba(145,195,255,0.14) 0 1px, transparent 1px 16px);
  opacity: 0.42;
}

@keyframes sb-heading-glow {
  0%   { transform: translate3d(-1%, -1%, 0) scale(1); }
  100% { transform: translate3d(1%, 1%, 0) scale(1.02); }
}

@keyframes sb-heading-sheen {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.42; }
}

@media (prefers-reduced-motion: reduce) {
  main.page > .card:first-child::before,
  main.page > .card:first-child::after,
  .page-heading-card::before,
  .page-heading-card::after {
    animation: none;
  }
}

[data-theme="dark"] .card,
[data-theme="dark"] .degree-card,
[data-theme="dark"] .list-card,
[data-theme="dark"] .project-card {
  background: rgba(10,20,42,0.88) !important;
  border-color: rgba(91,143,212,0.2) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.4) !important;
}
[data-theme="light"] .card,
[data-theme="light"] .degree-card {
  background: rgba(255,255,255,0.92) !important;
  border-color: rgba(30,58,110,0.13) !important;
}
[data-theme="light"] .list-card {
  background: rgba(248,251,255,0.85) !important;
  border-color: rgba(30,58,110,0.11) !important;
}

/* ── Metin renkleri — dark ────────────────────────────── */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] .degree-title,
[data-theme="dark"] .entry-org,
[data-theme="dark"] .project-title,
[data-theme="dark"] .page-title { color: #dce6f0 !important; }

[data-theme="dark"] .meta-value,
[data-theme="dark"] p.meta,
[data-theme="dark"] .entry-summary,
[data-theme="dark"] .page-subtitle,
[data-theme="dark"] .hero-text .subtitle,
[data-theme="dark"] .skill-list li,
[data-theme="dark"] .entry ul,
[data-theme="dark"] .list-card ul { color: #8fa3bc !important; }

[data-theme="dark"] .section-heading,
[data-theme="dark"] .section-title {
  color: #5b8fd4 !important;
  border-bottom-color: rgba(91,143,212,0.2) !important;
}
[data-theme="dark"] .meta-label { color: #5b8fd4 !important; }
[data-theme="dark"] .entry-role  { color: #5b8fd4 !important; }
[data-theme="dark"] .list-card h3 { color: #5b8fd4 !important; }
[data-theme="dark"] .project-title { color: #dce6f0 !important; }
[data-theme="dark"] .page { color: #dce6f0; }

/* ── Badges & Tags ────────────────────────────────────── */
[data-theme="dark"] .tag,
[data-theme="dark"] .badge-blue {
  background: rgba(91,143,212,0.15) !important;
  color: #5b8fd4 !important;
  border-color: rgba(91,143,212,0.28) !important;
}
[data-theme="dark"] .badge-teal  { background: rgba(16,185,129,0.15) !important; color: #34d399 !important; }
[data-theme="dark"] .badge-amber { background: rgba(201,162,39,0.15)  !important; color: #c9a227 !important; }

/* ── Diğer bileşenler ─────────────────────────────────── */
[data-theme="dark"] .degree-card { background: rgba(10,20,40,0.8)   !important; border-color: rgba(91,143,212,0.18) !important; }
[data-theme="dark"] .degree-date { background: #1e3a6e !important; color: #dce6f0 !important; }
[data-theme="dark"] .degree-level.level-phd  { background: rgba(124,58,237,0.18) !important; }
[data-theme="dark"] .degree-level.level-msc  { background: rgba(91,143,212,0.18) !important; color: #5b8fd4 !important; border-color: rgba(91,143,212,0.3) !important; }
[data-theme="dark"] .degree-level.level-bsc  { background: rgba(5,150,105,0.18)  !important; }
[data-theme="dark"] .list-card   { background: rgba(10,20,40,0.6)   !important; border-color: rgba(91,143,212,0.15) !important; }
[data-theme="dark"] .project-card{ background: rgba(10,20,40,0.6)   !important; border-color: rgba(91,143,212,0.15) !important; }
[data-theme="dark"] .entry-date  { background: rgba(91,143,212,0.12) !important; color: #8fa3bc !important; }
[data-theme="dark"] .skills      { background: rgba(91,143,212,0.12) !important; color: #8fa3bc !important; }
[data-theme="dark"] .divider     { background: rgba(255,255,255,0.07) !important; }
[data-theme="dark"] .back-btn    { color: #5b8fd4 !important; border-color: rgba(91,143,212,0.35) !important; }
[data-theme="dark"] .back-btn:hover { background: rgba(91,143,212,0.12) !important; }
[data-theme="dark"] .skill-icon  { background: rgba(91,143,212,0.15) !important; color: #5b8fd4 !important; }
[data-theme="dark"] .skill-label { color: #dce6f0 !important; }

/* ── Dark mode page-level fixes ───────────────────────── */
[data-theme="dark"] body,
[data-theme="dark"] main,
[data-theme="dark"] .page {
  color: #dce6f0 !important;
}

[data-theme="dark"] .topbar,
[data-theme="dark"] .hero-card {
  background: rgba(10,20,42,0.72) !important;
  border-color: rgba(91,143,212,0.18) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.28) !important;
}

[data-theme="dark"] .brand,
[data-theme="dark"] .home-link,
[data-theme="dark"] .back-btn,
[data-theme="dark"] a.home-link {
  color: #5b8fd4 !important;
}

[data-theme="dark"] .bio p,
[data-theme="dark"] .degree-uni,
[data-theme="dark"] .contact-label,
[data-theme="dark"] .profile-info .handle,
[data-theme="dark"] .note-card p {
  color: #8fa3bc !important;
}

[data-theme="dark"] strong,
[data-theme="dark"] .contact-value,
[data-theme="dark"] .profile-info .name,
[data-theme="dark"] .meta-value,
[data-theme="dark"] .project-title,
[data-theme="dark"] .entry-org,
[data-theme="dark"] .skill-label {
  color: #dce6f0 !important;
}

[data-theme="dark"] .contact-value a,
[data-theme="dark"] .section-heading .material-symbols-outlined,
[data-theme="dark"] .page-title .material-symbols-outlined,
[data-theme="dark"] h1 .material-symbols-outlined,
[data-theme="dark"] [style*="color:#1e3a6e"],
[data-theme="dark"] [style*="color: #1e3a6e"] {
  color: #5b8fd4 !important;
}

[data-theme="dark"] [style*="color:#475569"],
[data-theme="dark"] [style*="color: #475569"],
[data-theme="dark"] [style*="color:#334155"],
[data-theme="dark"] [style*="color: #334155"],
[data-theme="dark"] [style*="color:#64748b"],
[data-theme="dark"] [style*="color: #64748b"] {
  color: #8fa3bc !important;
}

[data-theme="dark"] .contact-row,
[data-theme="dark"] .skill-list li {
  border-bottom-color: rgba(91,143,212,0.12) !important;
}

[data-theme="dark"] .entry {
  border-left-color: rgba(91,143,212,0.45) !important;
}

[data-theme="dark"] .meta-row {
  background: rgba(15,30,60,0.48) !important;
  border-color: rgba(91,143,212,0.14) !important;
}

[data-theme="dark"] .summary-pill,
[data-theme="dark"] .degree-icon {
  background: rgba(91,143,212,0.14) !important;
  border-color: rgba(91,143,212,0.24) !important;
  color: #7fb4ff !important;
}

[data-theme="dark"] .profile-card,
[data-theme="dark"] .note-card,
[data-theme="dark"] .contact-icon {
  background: rgba(15,30,60,0.65) !important;
  border-color: rgba(91,143,212,0.2) !important;
}

[data-theme="dark"] .profile-card:hover {
  background: rgba(18,38,74,0.9) !important;
  border-color: rgba(91,143,212,0.42) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.35) !important;
}

[data-theme="dark"] .badge,
[data-theme="dark"] .badge-role {
  background: rgba(91,143,212,0.15) !important;
  color: #7fb4ff !important;
  border-color: rgba(91,143,212,0.32) !important;
}

[data-theme="dark"] .badge-org,
[data-theme="dark"] .badge-teal,
[data-theme="dark"] .level-bsc {
  background: rgba(16,185,129,0.15) !important;
  color: #34d399 !important;
  border-color: rgba(16,185,129,0.32) !important;
}

[data-theme="dark"] .badge-fund,
[data-theme="dark"] .badge-amber {
  background: rgba(201,162,39,0.16) !important;
  color: #f3d36b !important;
  border-color: rgba(201,162,39,0.34) !important;
}

[data-theme="dark"] .level-phd {
  background: rgba(124,58,237,0.18) !important;
  color: #c4b5fd !important;
  border-color: rgba(124,58,237,0.34) !important;
}

[data-theme="dark"] .avatar {
  border-color: rgba(91,143,212,0.55) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important;
}

/* ── HEADER ───────────────────────────────────────────── */
#sb-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1100;
  background: var(--sb-header-bg);
  border-bottom: 1px solid var(--sb-header-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  height: 72px;
  overflow: hidden;
}
#sb-header .sb-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  height: 72px;
  gap: 12px;
}
#sb-header .sb-brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
#sb-header .sb-brand img { height: 42px; width: auto; border-radius: 6px; }
#sb-header .sb-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 0;
}
#sb-header .sb-nav::-webkit-scrollbar { display: none; }
#sb-header .sb-nav a {
  display: inline-block;
  text-decoration: none;
  color: var(--sb-nav-color);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 5px 10px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s;
  font-family: Inter, system-ui, sans-serif;
}
#sb-header .sb-nav a:hover    { color: var(--sb-active-color); }
#sb-header .sb-nav a.sb-active { color: var(--sb-active-color); border-bottom-color: var(--sb-active-color); }

#sb-toggle {
  width: 50px; height: 28px;
  border-radius: 99px;
  padding: 3px;
  cursor: pointer;
  flex-shrink: 0;
  background: var(--sb-toggle-bg);
  border: 1px solid var(--sb-toggle-border);
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
  user-select: none;
}
#sb-toggle .sb-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  transition: margin 0.2s ease;
}

/* ── FOOTER ───────────────────────────────────────────── */
#sb-footer {
  background: var(--sb-footer-bg) !important;
  border-top: 2px solid #47b2ff !important;
  backdrop-filter: blur(10px);
  margin-top: 40px;
}
#sb-footer .sb-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 32px;
  align-items: start;
}
#sb-footer .sb-footer-brand        { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
#sb-footer .sb-footer-brand img    { height: 34px; width: auto; border-radius: 5px; }
#sb-footer .sb-footer-brand span   { font-weight: 700; font-size: 1rem; color: var(--sb-text-main); font-family: Inter, system-ui, sans-serif; }
#sb-footer .sb-footer-desc         { font-size: 0.87rem; color: var(--sb-text-sec); line-height: 1.65; margin: 0 0 10px; font-family: Inter, system-ui, sans-serif; }
#sb-footer .sb-copyright           { font-size: 0.78rem; color: var(--sb-text-sec); font-family: Inter, system-ui, sans-serif; }
#sb-footer h4                      { margin: 0 0 12px; font-size: 0.9rem; font-weight: 700; color: var(--sb-text-main); font-family: Inter, system-ui, sans-serif; }
#sb-footer .sb-footer-links        { display: flex; flex-direction: column; gap: 6px; }
#sb-footer .sb-footer-links a      { font-size: 0.88rem; color: var(--sb-footer-link); text-decoration: none; font-family: Inter, system-ui, sans-serif; transition: color 0.15s; }
#sb-footer .sb-footer-links a:hover{ color: #47b2ff; }
#sb-footer .sb-contact-info        { display: flex; flex-direction: column; gap: 6px; }
#sb-footer .sb-contact-info p      { font-size: 0.88rem; color: var(--sb-text-sec); margin: 0; font-family: Inter, system-ui, sans-serif; }

[data-theme="light"] #sb-footer h4,
[data-theme="light"] #sb-footer .sb-footer-brand span { color: #e8eef7 !important; }
[data-theme="light"] #sb-footer .sb-footer-desc,
[data-theme="light"] #sb-footer .sb-copyright,
[data-theme="light"] #sb-footer .sb-contact-info p    { color: #8fa3bc !important; }
[data-theme="light"] #sb-footer .sb-footer-links a    { color: #a8bcd4 !important; }
[data-theme="light"] #sb-footer .sb-footer-links a:hover { color: #47b2ff !important; }

@media (max-width: 900px) { #sb-footer .sb-footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  #sb-footer .sb-footer-inner { grid-template-columns: 1fr; padding: 24px 20px; }
  #sb-header .sb-inner { padding: 0 16px; gap: 8px; }
  #sb-header .sb-brand img { height: 36px; }
  main.page, body > main { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ── Scroll to Top ────────────────────────────────────── */
#sb-scroll-top {
  position: fixed;
  bottom: 32px; right: 32px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #1e3a6e;
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(31,125,255,0.35);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 999;
  font-size: 22px;
  line-height: 1;
}
#sb-scroll-top.visible  { opacity: 1; transform: translateY(0); }
#sb-scroll-top:hover    { background: #47b2ff; }
@media (max-width: 600px) { #sb-scroll-top { bottom: 20px; right: 20px; width: 40px; height: 40px; font-size: 18px; } }