/* === THEME TOKENS === */
/* Default = DARK */
:root {
  --bg:#000000;
  --card:#131316;
  --text:#e7e7ea;
  --muted:#a1a1aa;
  --acc:#6f1dfc;
  --acc-rgb:111 29 252;
  --line:#1d1d22;
  --shadow:0 10px 24px rgba(0,0,0,.35);

  --glow-weak:  0 6px 14px  rgb(var(--acc-rgb) / .25);
  --glow:       0 12px 24px rgb(var(--acc-rgb) / .35);
  --glow-strong:0 20px 50px rgb(var(--acc-rgb) / .45);
}

/* Light mode (body gets .light) */
body.light {
  --bg:#ffffff;
  --card:#ffffff;
  --text:#111114;
  --muted:#5b5b66;
  --acc:#6f1dfc;
  --acc-rgb:111 29 252;
  --line:#e7e7ee;
  --shadow:0 12px 24px rgba(0,0,0,.08);

  --glow-weak:  0 6px 14px  rgb(var(--acc-rgb) / .20);
  --glow:       0 12px 24px rgb(var(--acc-rgb) / .30);
  --glow-strong:0 20px 50px rgb(var(--acc-rgb) / .40);
}

/* Accent color variants (optional) */
body.theme-purple{ --acc:#6f1ffa; --acc-rgb:111 31 250; }
body.theme-blue  { --acc:#2311ea; --acc-rgb: 37  99 235; }
body.theme-aqua  { --acc:#06b6d4; --acc-rgb:  6 182 212; }
body.theme-orange{ --acc:#f97316; --acc-rgb:249 115  22; }
body.theme-emerald{--acc:#10b981; --acc-rgb: 16 185 129; }

/* Base */
* { box-sizing:border-box; }
html,body {
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  scroll-behavior:smooth;
}

a { color:inherit; text-decoration:none; }

.container { width:min(1100px,92%); margin-inline:auto; }

/* Scroll progress bar */
#progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background: linear-gradient(90deg, var(--acc), color-mix(in srgb, var(--acc) 60%, #fff 0%));
  z-index:9999; transition: width .1s linear;
}

/* Theme toggle button */
.mode-toggle{
  background:transparent;
  border:1px solid var(--line);
  color:var(--text);
  width:40px; height:40px;
  border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:.2s;
}
.mode-toggle:hover{
  transform:scale(1.05);
  border-color: color-mix(in srgb, var(--acc) 40%, var(--line));
  box-shadow: var(--glow-weak);
}

/* NAVBAR */
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.logo{font-weight:800;letter-spacing:.5px}

/* Centered nav links (desktop) */
.nav.nav-center{ position:relative; align-items:center; }
.nav-left{ display:flex; align-items:center; }
.nav-right{ display:flex; align-items:center; gap:10px; }

.nav-center-links{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  display:flex; gap:28px;
}
.nav-center-links a{
  color:var(--muted); transition:color .2s ease;
}
.nav-center-links a:hover{ color:var(--text); }

/* Nav gradient underline */
header .nav{ position:relative; z-index:1000; }

.nav .links a,
.nav .nav-center-links a{
  position: relative;
  display: inline-block;
  padding: 4px 0 8px;
  color: var(--muted);
  transition: color .2s ease;
}

.nav .links a::after,
.nav .nav-center-links a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background: linear-gradient(90deg, var(--acc), color-mix(in srgb, var(--acc) 60%, #fff 0%));
  border-radius:2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
}

.nav .links a:hover,
.nav .nav-center-links a:hover{ color: var(--text); }

.nav .links a:hover::after,
.nav .nav-center-links a:hover::after{ transform: scaleX(1); }

/* HERO LAYOUT */
.hero{padding:40px 0 24px;text-align:center}
.hero h1{font-size:clamp(28px,6vw,48px);margin:0 0 20px}
.hero p{color:var(--muted);margin:8px 0 20px}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Two-column hero */
.hero-2col{
  display:grid;
  grid-template-columns: 1fr 0.9fr;
  align-items:center;
  gap: clamp(24px, 4vw, 60px);
  padding: clamp(40px, 6vw, 80px) 0;
}
.hero-copy{ 
  max-width: 800px; 
  margin-left: -4%; 
}
.hero-title{
  font-size: clamp(42px, 6.8vw, 76px);
  line-height:1.05; margin: 0 0 22px; font-weight: 800;
}
.hero-sub{
  color: var(--muted);
  font-size: clamp(16px, 1.8vw, 19px);
  margin: 0 0 10px;
}
.hero-stack{
  color: var(--muted);
  font-size: clamp(14px, 1.6vw, 17px);
  margin: 0 0 28px;
}

/* Hero typewriter effect */
@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}
@keyframes blinkCursor {
  50% { border-color: transparent; }
}

/* Hero sub line */
.hero-sub {
  overflow: hidden;
  border-right: 2px solid var(--acc);
  white-space: nowrap;
  width: 0;
  animation: typewriter 3s steps(60, end) forwards,
             blinkCursor 0.7s step-end infinite;
  animation-delay: 0.5s;
}

/* Hero stack line */
.hero-stack {
  overflow: hidden;
  border-right: 2px solid var(--acc);
  white-space: nowrap;
  width: 0;
  animation: typewriter 3s steps(40, end) forwards,
             blinkCursor 0.7s step-end infinite;
  animation-delay: 4s;
}

/* CTA bounce animation */
@keyframes fadeBounce {
  0%   { opacity:0; transform: translateY(20px) scale(0.95); }
  60%  { opacity:1; transform: translateY(-8px) scale(1.05); }
  100% { opacity:1; transform: translateY(0) scale(1); }
}
.cta-row{ display:flex; gap:16px; flex-wrap:wrap; }
.cta-row .btn{
  opacity:0;
  animation: fadeBounce .8s ease forwards;
}
.cta-row .btn:nth-child(1){ animation-delay: 7.0s; }
.cta-row .btn:nth-child(2){ animation-delay: 7.2s; }
.cta-row .btn:nth-child(3){ animation-delay: 7.4s; }

.no-caret{
  border-right: none !important;
  animation: none !important;
}

/* Hero photo */
.hero-photo{
  position: relative;
  width: clamp(260px, 36vw, 460px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  justify-self: end;
  transform: translateX(4%);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.hero-photo img{
  width:100%; 
  height:100%; 
  object-fit: cover; 
  display:block;
  transition: transform 0.35s ease;
}
.hero-photo:hover img {
  transform: scale(1.04);
}

/* Avatar variants (for other layouts – not used on circular hero right now) */
.avatar-wrap{
  position:relative; display:inline-block; isolation:isolate;
  border-radius:50%;
}
.avatar{
  width:280px; height:280px; border-radius:inherit; object-fit:cover;
  margin:20px 0; border:none; box-shadow:none;
  transition: transform .35s ease, filter .35s ease;
  position:relative; z-index:2;
}
.avatar-wrap:hover .avatar{ transform: scale(1.028); }

/* Aurora glow around avatar */
.avatar-wrap.glow-aurora::after{
  content:""; position:absolute; inset:-24px; border-radius:inherit; z-index:1;
  background:
    radial-gradient(120px 120px at 30% 30%, color-mix(in srgb, var(--acc) 70%, transparent), transparent 65%),
    radial-gradient(180px 180px at 70% 70%, color-mix(in srgb, var(--acc) 45%, transparent), transparent 70%),
    radial-gradient(160px 160px at 60% 30%, color-mix(in srgb, var(--acc) 35%, transparent), transparent 70%);
  filter: blur(18px); opacity:.9;
  animation: aurora-drift 12s ease-in-out infinite alternate;
}
@keyframes aurora-drift{
  0%   { transform: translate3d(-6px,-4px,0) scale(1.00); filter: blur(18px); }
  100% { transform: translate3d(6px,4px,0)  scale(1.03); filter: blur(16px); }
}
body.light .avatar-wrap.glow-aurora::after{ filter: blur(20px); opacity:.85; }

/* Pulse ring */
.avatar-wrap.pulse::before{
  content:""; position:absolute; inset:-14px; border-radius:inherit; z-index:0;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--acc) 70%, transparent), transparent 62%);
  opacity:.85; transform: scale(.98);
  animation: pulse-ring 2.8s ease-in-out infinite; filter: blur(10px);
}
@keyframes pulse-ring{
  0%,100% { transform: scale(.98); opacity:.75; }
  50%     { transform: scale(1.03); opacity:1; }
}

/* Buttons */
.btn{
  background:var(--acc); color:white; padding:10px 16px; border-radius:12px;
  font-weight:600; border:1px solid transparent; transition:.2s;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow: var(--glow-weak);
}
.btn:hover{opacity:.95; transform:translateY(-1px)}
.btn.outline{ background:transparent; border-color:#2b2b31; color:var(--text); box-shadow:none; }

/* Button icons */
.btn i { margin-right:10px; font-size:25px; color:inherit; }

/* Primary vs outline hero CTAs */
.btn{ border-radius:14px; padding:12px 20px; font-weight:700; }
.btn i{ font-size:18px; margin-right:10px; }
.btn-primary{
  background: var(--acc);
  box-shadow: 0 14px 30px rgb(var(--acc-rgb) / .35);
}
.btn-outline{
  background: transparent;
  border: 1px solid #2b2b31;
  color: var(--text);
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
}
.btn-outline:hover{
  border-color: color-mix(in srgb, var(--acc) 45%, #2b2b31);
  transform: translateY(-1px);
}

/* Sections */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
  margin:28px 0;
}
.card h3{ margin-top:0; }

/* Project cards (tilt + glow) */
.project-card {
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
  box-shadow: var(--glow-weak);
  transform: translateY(0);
}
.project-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--glow-strong);
}

/* Skills grid */
.skills-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:20px; margin-top:20px;
}
.skill{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:18px; text-align:center; transition:.25s;
  box-shadow: var(--glow-weak);
}
.skill i{ font-size:32px; color:var(--acc); margin-bottom:8px; display:block; }
.skill span{ display:block; font-weight:600; color:var(--text); }
.skill:hover{
  transform:translateY(-5px);
  box-shadow: var(--glow);
}

/* Coursework chips */
.coursework {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin: 20px 0 0; padding: 0; list-style: none;
}
.coursework li {
  background: var(--card); border: 1px solid var(--line);
  padding: 8px 14px; border-radius: 20px;
  font-size: 14px; font-weight: 500; color: var(--text);
  transition: 0.25s ease;
}
.coursework li:hover {
  background: var(--acc); color: #fff;
  box-shadow: var(--glow);
  transform: scale(1.05);
}

/* Coursework groups */
.cw-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 20px; }
.cw-group  { 
  background: var(--card); 
  border: 1px solid var(--line); 
  border-radius: 12px; 
  padding: 16px; 
  box-shadow: var(--glow-weak);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cw-group:hover {
  transform: translateY(-4px);
  box-shadow: var(--glow);
}
.cw-group h3 { margin: 0 0 8px; font-size: 16px; color: var(--muted); font-weight: 700; }

/* Reveal on scroll */
.reveal-on-scroll{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease}
.reveal-on-scroll.visible{opacity:1; transform:translateY(0)}

/* Timeline (Experience) – clean cards, no vertical line */
.timeline{
  margin:0; padding-left:0; color:var(--muted); list-style:none;
}
.timeline li{
  display:flex; align-items:flex-start; gap:32px;
  margin-bottom:36px; line-height:1.5; flex-wrap:wrap;
  opacity:0; transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal-on-scroll.visible .timeline li{ opacity:1; transform:none; }
.reveal-on-scroll.visible .timeline li:nth-child(1){ transition-delay:.05s; }
.reveal-on-scroll.visible .timeline li:nth-child(2){ transition-delay:.18s; }
.reveal-on-scroll.visible .timeline li:nth-child(3){ transition-delay:.31s; }
.reveal-on-scroll.visible .timeline li:nth-child(4){ transition-delay:.44s; }
.reveal-on-scroll.visible .timeline li:nth-child(5){ transition-delay:.57s; }

.exp-logo{
  width:330px; height:230px; object-fit:contain; border-radius:18px; background:#fff; padding:14px;
  box-shadow:0 0 0 1px #e5e7eb0f;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.exp-logo:hover{
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 14px 36px rgb(var(--acc-rgb) / .78);
  filter: saturate(1.1) contrast(1.02);
}
.exp-copy{color:var(--text); flex:1; min-width:260px}
.exp-copy p{margin:6px 0 0; color:var(--muted)}
.exp-copy:hover{ text-shadow: 0 0 10px rgb(var(--acc-rgb) / .12); }

/* Thumb wrapper if needed */
.exp-thumb{
  width:330px; height:230px;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 0 0 1px #e5e7eb0f;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.exp-thumb img{
  width:90%; height:100%;
  object-fit:cover;
  display:block;
}
.exp-thumb:hover{
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 14px 36px rgb(var(--acc-rgb) / .78);
  filter: saturate(1.05) contrast(1.02);
}

/* Transturk social icons */
.social-links{margin-top:12px; display:flex; gap:16px}
.social-links a{font-size:28px; color:var(--muted); transition: color .2s ease, transform .2s ease}
.social-links a:hover{color:var(--acc); transform:scale(1.1)}

/* Contact */
.contact-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.copy-btn{
  background:transparent; border:1px solid var(--line); color:var(--text);
  border-radius:10px; padding:6px 10px; display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  transition:.2s
}
.copy-btn:hover{transform:scale(1.04)}
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
  background:#111114; color:#fff; padding:10px 14px; border-radius:12px; border:1px solid #2b2b31;
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; z-index:50
}
body.light .toast{background:#111114; color:#fff}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* Back to top button */
.back-to-top{
  position:fixed; right:22px; bottom:22px; width:48px; height:48px; border-radius:50%;
  border:1px solid var(--line); background:var(--card); color:var(--text);
  display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; pointer-events:none;
  box-shadow:var(--shadow); transition:opacity .2s ease, transform .2s ease, background .2s ease;
  z-index:60;
}
.back-to-top.show{opacity:1; pointer-events:auto}
.back-to-top:hover{transform:translateY(-2px)}

/* Lightbox for project previews (images only) */
.lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.7);
  display:flex; align-items:center; justify-content:center; z-index:100; backdrop-filter:saturate(120%) blur(2px);
}
.lightbox[hidden]{display:none}
.lb-stage{
  position:relative; max-width:90vw; max-height:85vh; background:var(--card);
  padding:14px; border-radius:16px; border:1px solid var(--line); box-shadow:var(--shadow);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.lb-img{max-width:86vw; max-height:68vh; object-fit:contain; border-radius:12px}
.lb-cap{margin:0; color:var(--muted); text-align:center}
.lb-close,.lb-prev,.lb-next{
  position:absolute; border:none; background:rgba(0,0,0,.35); color:#fff;
  width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:transform .15s ease, background .15s ease
}
.lb-close{top:10px; right:10px}
.lb-prev{left:10px; top:50%; transform:translateY(-50%)}
.lb-next{right:10px; top:50%; transform:translateY(-50%)}
.lb-prev:hover,.lb-next:hover,.lb-close:hover{transform:scale(1.06)}
.lb-prev:disabled,.lb-next:disabled{opacity:.35; cursor:not-allowed}

/* Footer & titles */
.footer{padding:28px 0 60px; color:var(--muted); text-align:center}
.section-title{margin:6px 0 14px}

/* Devicon icons match theme accent */
.devicon-cplusplus-plain,
.devicon-cplusplus-plain.colored,
.devicon-python-plain,
.devicon-r-plain,
.devicon-java-plain,
devicon-html5-plain,
.devicon-css3-plain,
.devicon-javascript-plain,
.devicon-linux-plain {
  color: var(--acc) !important;
}

/* Testimonials grid (single column) */
.t-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:18px;
  margin-top:18px;
}

/* Testimonial card */
.t-card{
  position:relative;
  border:1px solid var(--line);
  background:var(--card);
  border-radius:12px;
  padding:18px;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Glow overlay */
.t-card::before{
  content:"";
  position:absolute;
  inset:-28% -18% auto -18%;
  height:72%;
  background: radial-gradient(
    160px 110px at 22% 12%,
    color-mix(in srgb, var(--acc) 92%, transparent) 0%,
    transparent 66%
  );
  filter: blur(14px);
  opacity:.85;
  pointer-events:none;
  z-index:0;
}
.t-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--acc) 40%, transparent);
  border-color: color-mix(in srgb, var(--acc) 45%, var(--line));
}
.t-card:hover::before{ opacity:.95; filter: blur(16px); }

/* Quote text with clamp */
.t-quote{
  position:relative;
  color:var(--text);
  line-height:1.6;
  padding-left:34px;
  margin:0;
  z-index:1;

  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:6;
  line-clamp:6;
  overflow:hidden;
}

/* Left quote mark */
.t-quote::before{
  content:"“";
  position:absolute; left:0; top:-6px;
  font-size:42px; line-height:1;
  color: color-mix(in srgb, var(--acc) 92%, #ffffff 0%);
  text-shadow: 0 0 16px color-mix(in srgb, var(--acc) 45%, transparent);
  opacity:.98;
}

/* Read more button */
.t-more{
  align-self:flex-start;
  background:transparent;
  border:1px solid var(--line);
  color:var(--text);
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer;
  font-size:13px;
  transition:.2s;
  z-index:1;
}
.t-more:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--acc) 40%, var(--line)); }

/* Expanded state: show full text */
.t-card.expanded .t-quote{
  display:block;
  -webkit-line-clamp:unset;
  line-clamp:unset;
  overflow:visible;
}

/* Testimonial meta */
.t-meta{
  margin-top:4px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  border-top:1px solid var(--line);
  padding-top:12px;
  z-index:1;
}
.t-person{
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.t-person strong{
  font-size:19px; font-weight:700; color:var(--text); margin-bottom:4px;
}
.t-person span{
  font-size:16px; font-weight:500; color:var(--muted);
}

/* Testimonials small screens */
@media (max-width:480px){
  .t-quote{ padding-left:28px; }
  .t-quote::before{ font-size:36px; top:-4px; }
}

/* Achievements list */
.ach-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:12px;
  padding:0;
  list-style:none;
}
.ach-list li{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;
  box-shadow: var(--glow-weak);
  display:flex;
  align-items:center;
  gap:10px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ach-list li:hover{
  transform: translateY(-2px);
  box-shadow: var(--glow-strong);
  border-color: color-mix(in srgb, var(--acc) 35%, var(--line));
}
.ach-list i{
  color:var(--acc);
  font-size:20px;
}
.ach-list .ach-value,
.ach-list .ach-meta{
  margin-left:auto;
  font-weight:600;
  color:var(--text);
}
.ach-list .ach-meta{ color:var(--muted); }

/* View certificate / score button */
.view-btn{
  margin-left:12px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:8px;
  padding:4px 10px;
  font-size:13px;
  cursor:pointer;
  color:var(--text);
  transition:.2s;
}
.view-btn:hover{
  border-color:var(--acc);
  color:var(--acc);
}

/* SAT / achievements dialog (modal) */
.score-dialog {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  max-width: 92vw;
  max-height: 86vh;
  box-shadow: var(--shadow);
}
.score-dialog::backdrop {
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(2px) saturate(115%);
}
#scoreDialogImg {
  display:block;
  max-width: 90vw;
  max-height: 78vh;
  border-radius: 10px;
  margin: 10px;
}
.sd-close {
  position:absolute;
  top:8px; right:8px;
  width:36px; height:36px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#000; color:#fff;
  font-size:20px; line-height:1;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.sd-close:hover {
  transform: scale(1.06);
  background:#111;
  border-color: color-mix(in srgb, var(--acc) 45%, var(--line));
}

/* Journey / mini-timeline in About section */
.journey{
  list-style:none; margin:18px 0 0; padding:0;
  display:flex; flex-direction:column; gap:12px;
}
.journey li{
  display:flex; align-items:flex-start; gap:14px;
  padding:12px; border:1px solid var(--line); border-radius:12px;
  background:var(--card);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position:relative; overflow:hidden;
}
.journey li::before{
  content:""; position:absolute; inset:-25% -15% auto -15%; height:70%;
  background: radial-gradient(140px 90px at 18% 15%, color-mix(in srgb, var(--acc) 85%, transparent), transparent 65%);
  filter:blur(12px); opacity:.75; pointer-events:none;
}
.journey li:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgb(var(--acc-rgb) / .35);
  border-color: color-mix(in srgb, var(--acc) 35%, var(--line));
}
.year{
  flex:0 0 auto;
  padding:6px 14px; border-radius:999px;
  background: color-mix(in srgb, var(--acc) 18%, var(--card));
  color: var(--text); font-weight:800; letter-spacing:.3px;
  border:1px solid color-mix(in srgb, var(--acc) 40%, var(--line));
  box-shadow:0 6px 14px rgb(var(--acc-rgb) / .25);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.journey li:hover .year{
  transform:translateX(2px);
  background: color-mix(in srgb, var(--acc) 28%, var(--card));
  box-shadow:0 12px 24px rgb(var(--acc-rgb) / .45);
}
.desc{ color:var(--muted); }
.desc strong{ color:var(--text); display:block; margin-bottom:2px; }

@media (max-width:520px){
  .year{ padding:6px 10px; }
  .journey li{ padding:10px; }
}

/* Experience / leadership action buttons container */
.exp-copy,
.exp-content{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.exp-actions{
  order: 99;
  margin-top:12px;
  display:flex;
  gap:35px;
  flex-wrap:wrap;
  align-self:flex-start;
  width:100%;
}

/* Experience buttons: subtle glow + hover */
.exp-actions .btn{
  position:relative;
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

/* Outline buttons default */
.exp-actions .btn.outline{
  background:transparent;
  border-color:#2b2b31;
}

/* Outline hover with light purple background and glow */
.exp-actions .btn.outline:hover{
  background: color-mix(in srgb, var(--acc) 18%, transparent);
  border-color: color-mix(in srgb, var(--acc) 55%, #2b2b31);
  box-shadow: 0 10px 22px rgb(var(--acc-rgb) / .35);
  transform: translateY(-2px);
}

/* Light sweep effect */
.exp-actions .btn::after{
  content:"";
  position:absolute; inset:-40% -10%;
  background: radial-gradient(120px 80px at 20% 10%, color-mix(in srgb, var(--acc) 80%, transparent), transparent 60%);
  opacity:0;
  filter: blur(14px);
  transition: opacity .2s ease, filter .2s ease;
  pointer-events:none;
}
.exp-actions .btn:hover::after{
  opacity:.5;
  filter: blur(18px);
}

/* Small screens: tighter gap */
@media (max-width:560px){
  .exp-actions{ gap:10px; }
}

/* Universal viewer (PDF + image + video) */
.viewer{
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.82);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(2px) saturate(115%);
}
.viewer[hidden]{ display:none; }

.viewer-stage{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px;
  max-width:92vw; max-height:86vh;
  box-shadow: var(--shadow);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.viewer-slot{
  width:min(90vw, 1100px);
  height:min(78vh, 760px);
  display:flex; align-items:center; justify-content:center;
  background:#000; border-radius:10px; overflow:hidden;
}
.viewer-slot img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
.viewer-slot iframe{ width:100%; height:100%; border:0; display:block; background:#111; }
.viewer-cap{
  margin:0; color:var(--muted); text-align:center; font-size:.95rem;
}
.viewer-close, .viewer-prev, .viewer-next{
  position:absolute; border:none; background:rgba(0,0,0,.35); color:#fff;
  width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:transform .15s ease, background .15s ease;
}
.viewer-close{ top:10px; right:10px; font-size:20px; }
.viewer-prev { left:10px; top:50%; transform:translateY(-50%); font-size:20px; }
.viewer-next { right:10px; top:50%; transform:translateY(-50%); font-size:20px; }
.viewer-prev:hover,.viewer-next:hover,.viewer-close:hover{
  transform:scale(1.06); background:rgba(0,0,0,.5);
}
.viewer-prev:disabled,.viewer-next:disabled{ opacity:.35; cursor:not-allowed; }
body.no-scroll{ overflow:hidden; }

/* Activities & volunteering list */
.acts-list{
  list-style:none; margin:12px 0 0; padding:0;
  display:flex; flex-direction:column; gap:14px;
}
.acts-list li{
  display:flex; gap:12px; align-items:flex-start;
  background: var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;
  box-shadow: var(--glow-weak);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.acts-list li:hover{
  transform: translateY(-2px);
  box-shadow: var(--glow-strong);
  border-color: color-mix(in srgb, var(--acc) 35%, var(--line));
}
.acts-list i{
  flex:0 0 auto;
  font-size:20px; color: var(--acc);
  margin-top:2px;
}
.acts-copy{ color:var(--text); }
.acts-copy strong{ display:block; font-weight:700; }
.acts-meta{ display:block; color:var(--muted); font-size:.95rem; margin-top:2px; }
.acts-copy p{ margin:6px 0 0; color:var(--muted); }

/* Activity website button (inline) */
.acts-copy p{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.act-link-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid #2b2b31;
  box-shadow: none;
}
.act-link-btn i{
  font-size: 16px;
  margin-right: 6px;
}
.act-link-btn:hover{
  border-color: color-mix(in srgb, var(--acc) 45%, #2b2b31);
  transform: translateY(-1px);
}

/* Constellation full-bleed section */
#constellation{
  padding:0; 
  margin: 40px 0 24px;
}
.constellation-wrap{
  position: relative;
  height: 420px;
  background: var(--bg);
  overflow: hidden;
  border-radius: 0;
  border: none;
  box-shadow: none;
}
.constellation-wrap.full-bleed{
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
}
#constellation-canvas{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.constellation-wrap::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(60% 80% at 80% 30%, color-mix(in srgb, var(--acc) 18%, transparent), transparent 60%),
    radial-gradient(50% 70% at 20% 75%, color-mix(in srgb, var(--acc) 12%, transparent), transparent 65%);
  mix-blend-mode: screen;
  opacity: .8;
}
.constellation-wrap.full-bleed::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.35), transparent 18%),
    linear-gradient(to top,    rgba(0,0,0,0.35), transparent 18%);
  mix-blend-mode: multiply;
  opacity:.6;
}
body.light .constellation-wrap.full-bleed::before{
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.6), transparent 18%),
    linear-gradient(to top,    rgba(255,255,255,0.6), transparent 18%);
}
@media (max-width: 640px){
  .constellation-wrap{ height: 300px; }
}

/* Section cards styling */
:root{
  --section-gap: 96px;
  --section-radius: 28px;
}
section.card{
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 35px;
  box-shadow: var(--shadow);
  padding: 22px clamp(18px, 2.2vw, 28px);
  margin: 48px 0;
}

/* Only top-level sections inside main container */
main.container > section.card{
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--section-radius) !important;
  padding: 28px clamp(20px, 2.2vw, 32px) !important;
  margin: var(--section-gap) 0 !important;
  box-shadow: var(--shadow) !important;
}
main.container{ background:none !important; box-shadow:none !important; border:none !important; }
main.container > section.card::before,
main.container > section.card::after{ content: none !important; }

/* Skills section top spacing controlled by section gap */
#skills{ margin-top: var(--section-gap) !important; }

@media (max-width: 640px){
  :root{ --section-gap: 72px; --section-radius: 22px; }
}

/* Responsive tweaks */
@media (max-width:900px){
  .exp-logo{width:220px; height:160px; padding:12px}
  .timeline li{gap:24px; margin-bottom:32px}
}
@media (max-width:640px){
  .timeline li{flex-direction:column; align-items:center; text-align:left}
  .exp-logo{width:200px; height:140px; padding:10px}
  .exp-copy{min-width:auto; width:100%}
}
@media (max-width:480px){
  .exp-logo{width:180px; height:125px; padding:8px}
  .timeline li{gap:18px; margin-bottom:28px}
}

/* Hero responsive */
@media (max-width: 900px){
  .hero-2col{
    grid-template-columns: 1fr;
    text-align: left;
  }
  .hero-photo{ justify-self: center; transform:none; width:min(72vw, 420px); }
  .nav-center-links{ position:static; transform:none; gap:18px; }
  .nav.nav-center{ justify-content:space-between; }
}

/* === Project cards: strong glow but transparent enough to keep background glow visible === */
.project-card {
  position: relative;
  border-radius: 20px;
  padding: 22px;

  /* Slight transparency to let section glow shine through */
  background: color-mix(in srgb, var(--card) 90%, transparent);

  /* softer border so glow blends */
  border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);

  /* stronger default glow */
  box-shadow: 0 0 32px rgb(var(--acc-rgb) / .25);

  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  z-index: 2;
}

.project-card:hover {
  transform: translateY(-5px);

  /* MUCH stronger glow on hover (like old one) */
  box-shadow:
    0 0 50px rgb(var(--acc-rgb) / .55),
    0 0 80px rgb(var(--acc-rgb) / .35);

  /* Make the card a bit more opaque on hover */
  background: color-mix(in srgb, var(--card) 96%, transparent);
}





/* ===== Mobile hero tweaks ===== */
@media (max-width: 540px) {

  /* Hero layout */
  .hero-2col{
    grid-template-columns: 1fr;
    padding: 28px 0 40px;
    text-align: center;
  }

  .hero-copy{
    margin-left: 0;
    max-width: 100%;
  }

  .hero-title{
    font-size: 28px;
    line-height: 1.15;
  }

  /* Typewriter off on mobile – normal text, satıra sarsın */
  .hero-sub,
  .hero-stack{
    white-space: normal;
    border-right: none;
    width: auto;
    animation: none;
  }

  /* Buttons center */
  .cta-row{
    justify-content: center;
  }

  /* Photo a bit smaller with spacing */
  .hero-photo{
    width: min(70vw, 320px);
    margin-top: 20px;
    justify-self: center;
    transform: none;
  }
}