/* ===== Theme ===== */
:root{
  --obsidian:#0a0b0d;
  --obsidian-2:#0f1115;
  --panel:rgba(18,20,24,.72);
  --neon:#00e5ff;        /* turkuaz */
  --aqua:#1de9b6;        /* aqua/green-blue */
  --vio:#7c3aed;         /* mor */
  --line:rgba(255,255,255,.16);
  --text:#e6e6e6;
}

*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  font-family:'Plus Jakarta Sans',system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(29,233,182,.18), transparent 60%),
    radial-gradient(900px 520px at 10% -10%, rgba(0,229,255,.16), transparent 60%),
    linear-gradient(180deg, var(--obsidian), var(--obsidian-2) 60%);
}

/* ===== Nav ===== */
.nav {
  padding: 1.5rem 2.7rem; /* %10 daha büyük yapıldı */
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
}

.brand-logo {
  width: 50.4px;
  height: 50.4px;
  border-radius: 4px;
}

.logo-text {
  font-weight: 800;
  letter-spacing: .06em;
  color: #fff;
}

.logo-ai {
  color: var(--neon);
}

.nav-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  list-style: none;
}

.nav-center a {
  color: var(--text);
  text-decoration: none;
  font-size: 1.02rem;
  position: relative;
  transition: color .25s ease;
}

/* Modern underline hover */
.nav-center a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: var(--neon); /* tek renk veya gradient verebilirsin */
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s ease;
}

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

.nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.icon-button {
  padding: .45rem .65rem;
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}

.icon-button:hover {
  transform: scale(1.06);
  background: rgba(255, 255, 255, .06);
}


.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 0.8px;
  width: 0%;
  background: linear-gradient(90deg, var(--neon), #186ddd);
  box-shadow: 0 0 10px rgba(236, 22, 255, 0.884),
              0 0 20px var(--neon);
  transition: width 0.3s cubic-bezier(.25,.8,.25,1);
  z-index: 2000;
}



.hamburger{display:none; position:relative; width:28px; height:18px; border:0; background:transparent; cursor:pointer}
.hamburger span{position:absolute; left:0; right:0; height:2px; background:#fff; border-radius:2px}
.hamburger span:nth-child(1){top:0}
.hamburger span:nth-child(2){top:8px}
.hamburger span:nth-child(3){bottom:0}

/* Lang switch */
.lang-switch{position:relative; display:inline-flex; align-items:center; border:1px solid var(--aqua); border-radius:999px; overflow:hidden; width:64px; height:28px; cursor:pointer}
.lang-switch input{display:none}
.lang-slider{position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 6px}
.lang-icon{width:20px; height:auto; border-radius:2px; opacity:.9}

/* Mobile menu */
.mobilemenu{display:none; border-bottom:1px solid var(--line); background:rgba(0,0,0,.7)}
.mobilemenu.open{display:block; animation:slideDown .25s ease}
.moblink{display:block; padding:.9rem 1.2rem; border-top:1px solid var(--line); text-decoration:none; color:var(--text)}
@keyframes slideDown{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
/* Services item */
.services-item {
  position: relative;
}

/* Services butonu nav'daki linklerle aynı görünsün */
.services-link {
  background: none;
  border: none;
  font: inherit;             /* navbar ile aynı font */
  font-size: 1.02rem;        /* nav-center a ile aynı */
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .35rem;
  transition: color 0.25s ease;
}

.services-link:hover {
  color: var(--neon);        /* hover efekti nav linkleriyle aynı */
}

/* Menü kapalı */
.mega-menu[hidden] {
  display: none;
}

/* Menü */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 650px;
  background: rgba(20, 20, 30, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding: 1.5rem;
  z-index: 1000;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Menü açıkken */
.services-item .mega-menu:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Başlıklar */
.mega-menu h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--neon);
}

/* Linkler */
.mega-menu a {
  display: block;
  font-size: 0.9rem;
  color: var(--text-muted);
  text-decoration: none;
  padding: 0.4rem 0.6rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

.mega-menu a:hover {
  background: rgba(0,229,255,0.08);
  color: var(--neon);
  padding-left: 0.8rem;
}



/* ===== Hero ===== */
.hero-section {
  padding: 6rem 1rem 4rem;
}

.hero-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  align-items: center;
}
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

/* Yeni boydan hero img */
.hero-img {
  width: 100%;
  height: auto;
  object-fit: contain;  /* oranı koru */
  border-radius: 0;     /* çerçeve yok */
  border: none;         /* çizgi yok */
  box-shadow: none;     /* glow yok */
  display: block;
  margin: 0 auto;       /* ortala */
}
.hero-image-side {
  position: sticky;
  top: 0rem;
  align-self: start;
}

@media (max-width: 768px) {
  .hero-image-side {
    position: static;
    top: auto;

  }
}

@media (max-width: 768px) {
  .hero-section {
    padding-top: 0rem; /* daha az boşluk */
  }
}

.profile-img {
  width: 145%;
  max-width: 360px;       /* %15 daha büyük — önceki 220px'di */
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto 0 12px;  /* sola hafif yaslı */
  border: none;
  box-shadow: none;
  border-radius: 1;
}

/* Mobil cihazlarda ortala ve hafif küçült */
@media (max-width: 768px) {
  .profile-img {
    max-width: 220px;     /* mobilde biraz daha küçük */
    margin: 0 auto;       /* ortala */
  }
}


.intro-text {
  opacity: .8;
}

.hero-name {
  font-size: 2.9rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: .25rem 0 .35rem;
  background: linear-gradient(90deg, var(--vio), var(--neon));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-title {
  font-family: 'Fira Code', monospace;
  font-size: 1.15rem;
  margin-bottom: 1.4rem;
  color: var(--aqua);
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.2rem 0 2rem;
  justify-content: flex-start;
}
/* Masaüstü görünümü varsayılan */
.desktop-only { display: flex; }
.mobile-only { display: none; }

/* Mobilde tersine çevir */
@media (max-width: 768px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: flex; flex-direction: column; gap: 0.9rem; }
  
  .btn-row {
padding-bottom: 1rem;
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: wrap;
  }

  .btn-row .social-icon {
padding-bottom: 0.5rem;
    width: 44px;
    height: 44px;
    font-size: 22px;
    margin-left: 0;
  }



  .social-icon {
    margin-left: 0; /* sola yaslanmasın */
    margin-top: 0.5rem;
  }
}

@media (max-width: 900px) {
  .btn-group { justify-content: center }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .75rem 1.3rem;
  border-radius: .9rem;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--line);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  font-weight: 700;
}
.btn.primary {
  background: linear-gradient(90deg, var(--neon), var(--aqua));
  color: #011;
  border-color: transparent;
  box-shadow: 0 10px 28px rgba(0,229,255,.22);
}
.btn.primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 40px rgba(0,229,255,.35);
}
.btn.outline {
  border: 1px solid var(--neon);
  color: var(--neon);
  background: transparent;
}
.btn.outline:hover {
  background: rgba(0,229,255,.08);
  transform: translateY(-1px);
}




/* Accordion Container */
.accordion-item {
  border: 1px solid var(--line);
  border-radius: 1rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.035);
  transition: all 0.3s ease;
  backdrop-filter: blur(6px);
}




/* Header */
.accordion-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.2rem;
  background: transparent;
  border: 0;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.015em;
  color: var(--neon); /* Daha vurucu başlık */
  font-family: 'Plus Jakarta Sans', sans-serif;
  cursor: pointer;
  transition: background 0.25s ease;
}

/* Hover efekti sade */
.accordion-header:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Icon */
.accordion-header i {
  transition: transform 0.25s ease;
  font-size: 1.2rem;
  color: var(--text);
}
.accordion-header[aria-expanded="true"] i {
  transform: rotate(180deg);
}

/* Accordion Body kapalı */
.accordion-body {
  max-height: 0;
  overflow: hidden;              /* auto yerine hidden */
  padding: 0 1.2rem;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.25s ease;
}

/* Accordion Body açık */
.accordion-item.open .accordion-body {
  max-height: 1000px;            /* içerik kadar açılması için yeterli bir değer */
  padding: 0 1.2rem 1rem;        /* alt padding açılışta geliyor */
  opacity: 1;
  overflow: visible;
}

/* Accordion İçerik Yazısı */
.accordion-body p {
  font-size: 1.06rem;
  line-height: 1.75;
  color: rgba(230, 230, 230, 0.95);
  font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  margin-bottom: 1.2rem;
  letter-spacing: 0.01em;
  text-align: justify;
}

/* Responsive */
@media (max-width: 768px) {
  .accordion-body p {
    font-size: 1rem;
    line-height: 1.6;
  }
}


/* Cards hover */
.card-neo{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; border:1px solid var(--line); background:rgba(255,255,255,.04); border-radius:1rem}
.card-neo:hover{transform:translateY(-6px); box-shadow:0 14px 32px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,229,255,.25); border-color:rgba(0,229,255,.35)}

/* ===== Sections / headings ===== */
.section{padding:4.5rem 1rem}
.divider{border-top:1px solid var(--line)}
.section-title{
  max-width:1100px; margin:0 auto 1.2rem; padding-bottom:.4rem;
  font-weight:800; letter-spacing:-.01em; font-size:1.6rem;
  border-bottom:1px solid var(--line);
}

/* ===== Skills ===== */
.skills-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 1.8rem;
  padding: 2.5rem 1rem;
}

@media (min-width: 900px) {
  .skills-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.skill-card {
  background: rgba(18, 20, 24, 0.85); /* daha opak, daha net okunur */
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 2rem 1.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 12px 32px rgba(0, 229, 255, 0.08);
}

.skill-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(0, 229, 255, 0.18);
  border-color: var(--neon);
}

/* Kart Başlıkları */
.skill-card h3 {
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 1.4rem;
  background-image: linear-gradient(90deg, var(--neon), var(--vio));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  letter-spacing: -0.01em;
}

/* Liste yapısı */
.skill-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.skill-card li {
  margin-bottom: 0.65rem;
  padding-left: 1.4rem;
  position: relative;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text);
  font-weight: 500;
  opacity: 0.92;
  font-family: 'Fira Code', monospace;
}

.skill-card li::before {
  content: "✦";
  position: absolute;
  left: 0;
  color: var(--aqua);
  font-size: 0.85rem;
  top: 0.25rem;
  opacity: 0.8;
}






/* ===== Carousel - NORMAL DURUM (Default 350x380 Grid) ===== */
.tri-carousel {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2.5rem;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced arrow design */
.proj-arrow {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: linear-gradient(45deg, rgba(0, 229, 255, 0.1), rgba(138, 43, 226, 0.1));
  color: var(--neon);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 20;
  font-size: 1.1rem;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.proj-arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(45deg, var(--neon), var(--vio));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: xor;
  opacity: 0.6;
  transition: opacity .4s ease;
}

.proj-arrow:hover {
  transform: translateY(-3px) scale(1.1);
  background: linear-gradient(45deg, rgba(0, 229, 255, 0.2), rgba(138, 43, 226, 0.2));
  box-shadow: 
    0 8px 25px rgba(0, 229, 255, 0.3),
    0 0 0 1px rgba(0, 229, 255, 0.2);
}

.proj-arrow:hover::before {
  opacity: 1;
}

/* Enhanced stage layout */
.tri-stage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2.5rem;
  justify-items: center;
  align-items: start;
  position: relative;
  min-height: 450px;
  width: 100%;
  perspective: none;
  overflow: visible;
  padding: 1.5rem;
}

/* ===== Carousel - NORMAL DURUM (Default 350x380 Grid) ===== */
.tri-carousel {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2.5rem;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced arrow design - font-style colors */
.proj-arrow {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(220, 220, 220, 0.2);
  background: rgba(0, 0, 0, 0.4);
  color: rgba(220, 220, 220, 0.85);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 20;
  font-size: 1.1rem;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.proj-arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, 
    rgba(220, 220, 220, 0.3) 0%, 
    rgba(255, 255, 255, 0.1) 50%,
    rgba(220, 220, 220, 0.2) 100%
  );
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: xor;
  opacity: 0.6;
  transition: opacity .4s ease;
}

.proj-arrow:hover {
  transform: translateY(-3px) scale(1.1);
  background: rgba(0, 0, 0, 0.6);
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.95);
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.1);
}

.proj-arrow:hover::before {
  opacity: 1;
}

/* Enhanced stage layout */
.tri-stage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2.5rem;
  justify-items: center;
  align-items: start;
  position: relative;
  min-height: 470px;
  width: 100%;
  perspective: none;
  overflow: visible;
  padding: 1.5rem;
}

/* ===== Enhanced Cards - 350x400 for better proportions ===== */
.proj-card {
  width: 350px;
  height: 400px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
  border-radius: 1.5rem;
  text-align: center;
  position: relative;
  isolation: isolate;
  background: linear-gradient(145deg, 
    rgba(0, 0, 0, 0.6) 0%,
    rgba(8, 10, 15, 0.8) 50%,
    rgba(0, 0, 0, 0.9) 100%
  );
  border: 1px solid rgba(0, 229, 255, 0.1);
  transform: none;
  opacity: 1;
  transition: all .5s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  z-index: 1;
  backdrop-filter: blur(15px);
  overflow: hidden;
}

/* Enhanced glow effects */
.proj-card::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -2;
  border-radius: inherit;
  background: linear-gradient(45deg, 
    var(--neon) 0%, 
    var(--vio) 25%, 
    var(--aqua) 50%, 
    var(--vio) 75%, 
    var(--neon) 100%
  );
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
  filter: blur(15px);
  opacity: 0.4;
  transition: all .5s ease;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.proj-card::after {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  border-radius: calc(1.5rem - 2px);
  background: linear-gradient(145deg, 
    rgba(8, 10, 15, 0.95) 0%,
    rgba(0, 0, 0, 0.9) 50%,
    rgba(8, 10, 15, 0.95) 100%
  );
}

/* Floating particles effect */
.proj-card:nth-child(odd)::before {
  animation-delay: -2s;
}

.proj-card:nth-child(even)::before {
  animation-delay: -4s;
}

.proj-card > * {
  position: relative;
  z-index: 1;
}

/* Enhanced image styling - bigger and taller */
.proj-card img {
  width: 100%;
  height: 180px;
  border-radius: 1rem;
  object-fit: cover;
  transition: all .5s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(0, 229, 255, 0.2);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Enhanced title styling */
.proj-card h3 {
  margin: 1rem 0 0.6rem;
  font-weight: 700;
  font-size: 1.3rem;
  background: linear-gradient(135deg, 
    var(--neon) 0%, 
    var(--aqua) 50%, 
    var(--vio) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  transition: all .4s ease;
  line-height: 1.3;
  text-shadow: 0 0 20px rgba(0, 229, 255, 0.3);
}

/* Enhanced description styling */
.proj-desc {
  line-height: 1.6;
  color: rgba(220, 220, 220, .9);
  transition: all .4s ease;
  font-size: 0.95rem;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Enhanced hover effects */
.proj-card:hover {
  transform: translateY(-12px) scale(1.03);
  border-color: rgba(0, 229, 255, 0.4);
  box-shadow: 
    0 20px 40px rgba(0, 229, 255, 0.2),
    0 0 0 1px rgba(0, 229, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.proj-card:hover::before {
  opacity: 0.8;
  filter: blur(20px);
  animation-duration: 4s;
}

.proj-card:hover img {
  transform: scale(1.08) rotateZ(1deg);
  border-color: rgba(0, 229, 255, 0.5);
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(0, 229, 255, 0.3);
}

.proj-card:hover h3 {
  transform: translateY(-2px);
  text-shadow: 0 0 30px rgba(0, 229, 255, 0.6);
}

.proj-card:hover .proj-desc {
  color: rgba(255, 255, 255, 0.95);
  transform: translateY(-1px);
}

/* Additional micro-interactions */
.proj-card:active {
  transform: translateY(-8px) scale(1.01);
}

/* Hidden sınıfı normal durumda çalışmaz */
.proj-card.hidden {
  opacity: 1;
  transform: none;
  pointer-events: all;
}

/* Pozisyon sınıfları normal durumda etkisiz */
.proj-card.center,
.proj-card.left,
.proj-card.right,
.proj-card.far-left,
.proj-card.far-right {
  /* Normal durumda tüm kartlar aynı stil */
  width: 350px;
  height: 400px;
  position: relative;
  transform: none;
  opacity: 1;
}

/* ===== SECTION TRANSITION EFFECT ===== */
#projects {
  position: relative;
  overflow: hidden;
}

#projects::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(180deg, 
    transparent 0%,
    rgba(0, 229, 255, 0.03) 30%,
    rgba(138, 43, 226, 0.03) 70%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

#projects::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(0deg, 
    transparent 0%,
    rgba(0, 229, 255, 0.03) 30%,
    rgba(138, 43, 226, 0.03) 70%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

.section-title {
  position: relative;
  z-index: 1;
}

.tri-carousel {
  position: relative;
  z-index: 1;
}

/* Responsive improvements */
@media (max-width: 768px) {
  .tri-stage {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 1rem;
    min-height: 420px;
  }
  
  .proj-card {
    width: min(320px, 90vw);
    height: 380px;
    padding: 1.5rem;
  }
  
  .proj-card img {
    height: 160px;
  }
  
  .tri-carousel {
    gap: 1.5rem;
  }
  
  .proj-card.center,
  .proj-card.left,
  .proj-card.right,
  .proj-card.far-left,
  .proj-card.far-right {
    width: min(320px, 90vw);
    height: 380px;
  }
}


.contact-card .muted {
  font-family: 'Orbitron', sans-serif; /* futuristic/neon font */
  text-transform: uppercase;           /* tamamı büyük */
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  color: #0ff; /* neon mavi */
  letter-spacing: 2px;
  
  /* Neon efekt */
  text-shadow: 
    0 0 5px #0ff,
    0 0 10px #0ff,
    0 0 20px #0ff,
    0 0 40px #00f,
    0 0 80px #00f;
    
  margin-top: 0.8rem;
  margin-bottom: 0.5rem;
}

.contact-card .contact-title {
  text-align: center;          /* ortalama */
  font-family: 'Montserrat', sans-serif; /* ciddi, modern font */
  font-weight: 8200;            /* çok kalın */
  font-size: 1.4rem;           /* büyüklük */
  color: #222;                 /* koyu ton */
  margin-bottom: 1rem;
  letter-spacing: 1px;         /* biraz ciddiyet hissi için */
}
/* Kapsayıcı: ortala ve kısıt koyma */
.contact-card .socials {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

/* Link kapsayıcısı: esnemesin, kısıt koymasın */
.contact-card .socials a {
  display: inline-block;
  flex: none;
}

/* Görsel: büyümeyi zorla */
.contact-card .socials .link-img {
  width: 280px !important;   /* büyüklüğü burada artır */
  max-width: none !important;/* global img {max-width:100%} kuralını geçersiz kıl */
  height: auto;
  display: block;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.65);
  transition: transform .25s ease, box-shadow .35s ease;
}

/* Hover büyütme (gözükmüyorsa parent'ın overflow'una bak) */
.contact-card .socials .link-img:hover {
  transform: scale(1.08);
  box-shadow: 0 0 28px rgba(0, 229, 255, 0.9);
}



/* Normal durumda responsive */
@media (max-width: 1024px) {
  .tri-stage {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  
  .proj-card {
    width: 280px;
    height: 280px;
  }
}

@media (max-width: 768px) {
  .tri-carousel {
    gap: 1rem;
  }
  
  .tri-stage {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 0.5rem;
  }
  
  .proj-card {
    width: 100%;
    max-width: 320px;
    height: 280px;
  }
  
  .proj-arrow {
    width: 36px;
    height: 36px;
    font-size: 0.8rem;
  }
}






.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 20px;
  margin-left: 10px;
  background: #fff; /* Beyaz arka plan */
  transition: all 0.3s ease;
}

/* LinkedIn */
.social-icon.linkedin {
  color: #0A66C2; /* LinkedIn mavi */
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.6); /* Neon glow */
}
.social-icon.linkedin:hover {
  transform: scale(1.1);
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.9);
}

/* GitHub */
.social-icon.github {
  color: #000; /* Siyah logo */
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.6); /* Neon glow */
}
.social-icon.github:hover {
  color: #0A66C2; /* Hover’da mavi ton */
  transform: scale(1.1);
  box-shadow: 0 0 16px rgba(0, 229, 255, 0.9);
}



/* ===== Contact ===== */
.contact-grid{max-width:1100px; margin:0 auto; display:grid; gap:1rem}
@media (min-width:900px){.contact-grid{grid-template-columns:repeat(3,1fr)}}
.contact-card{padding:1rem; min-height:220px; display:flex; flex-direction:column; gap:.75rem}
.muted{opacity:.85}
.contact-items{display:grid; gap:.6rem}
.contact-map img{width:100%; height:160px; object-fit:cover; border-radius:.6rem; border:1px solid var(--line)}
.info{opacity:.9; display:flex; align-items:center; gap:.55rem}
.socials{display:flex; gap:.6rem; align-items:center}
.socials img{width:22px; height:22px}


.sweet-img {
  width: 280px;       /* daha makul boyut */
  height: auto;       /* orantılı kalsın */
  object-fit: contain;
  margin: 0 auto 1rem;  /* ortala + altta boşluk */
  display: block;
  border-radius: 16px;   /* hafif köşe yumuşatma */
  background: #fff;      /* arka plan beyaz */
  box-shadow: 0 0 20px rgba(32, 16, 255, 0.65); /* dıştan neo glow */
  transition: transform 0.25s ease, box-shadow 0.35s ease;
}

.sweet-img:hover {
  transform: scale(1.05);
  box-shadow: 0 0 28px rgba(110, 20, 255, 0.85);
}





/* ===== Footer ===== */
.footer{padding:2rem 1rem; border-top:1px solid var(--line); text-align:center}
.footer-links{list-style:none; padding:0; margin:0 0 .6rem; display:flex; gap:1rem; justify-content:center}
.footer-links a{text-decoration:none; color:var(--text); opacity:.9}
.footer-links a:hover{opacity:1}

/* ================================
   MOBILE NAV (≤900px) — FINAL
   ================================ */
@media (max-width: 900px) {
  /* Nav yerleşimi daha sıkı */
  .nav {
    padding: .9rem 1rem;
    gap: .75rem;
  }
  .nav-center { display: none; } /* masaüstü linkleri gizle */
  .nav-right { gap: .6rem; }

  /* Hamburger: görünür + daha iyi dokunmatik hedef */
  .hamburger{
    display:inline-block;
    position:relative;
    width:30px; height:20px;
    border:0; background:transparent; cursor:pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .hamburger span{
    position:absolute; left:0; right:0; height:2px;
    background:#fff; border-radius:2px; transition:.25s ease;
  }
  .hamburger span:nth-child(1){ top:0; }
  .hamburger span:nth-child(2){ top:9px; }
  .hamburger span:nth-child(3){ bottom:0; }

  /* Açıkken “X” animasyonu (JS aria-expanded güncelliyor) */
  #hamburgerBtn[aria-expanded="true"] span:nth-child(1){
    transform: translateY(9px) rotate(45deg);
  }
  #hamburgerBtn[aria-expanded="true"] span:nth-child(2){
    opacity:0;
  }
  #hamburgerBtn[aria-expanded="true"] span:nth-child(3){
    transform: translateY(-9px) rotate(-45deg);
  }

  /* Mobil menü: nav içinde, full-width panel */
  .mobilemenu[hidden] { display: none !important; } /* güvenlik için */
  .mobilemenu{
    display:none; position:absolute; top:100%; left:0; right:0;
    background: rgba(8,10,15,.92);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
    z-index: 1200;
  }
  .mobilemenu.open{
    display:block; animation: menuDrop .22s ease-out;
  }
  @keyframes menuDrop{
    from{ opacity:0; transform: translateY(-8px); }
    to{ opacity:1; transform: none; }
  }

  /* Menü linkleri: büyük dokunma alanı + net ayrım */
  .moblink{
    display:flex; align-items:center; gap:.55rem;
    padding: 1rem 1.25rem;
    text-decoration:none; color: var(--text);
    font-weight: 700; font-size: 1.04rem;
    border-top: 1px solid var(--line);
    transition: background .2s ease;
  }
  .moblink:first-child{ border-top: 0; }
  .moblink:hover{ background: rgba(255,255,255,.06); }

  /* Dark-mode tuşu küçük dokunuş */
  .icon-button{ padding: .4rem .55rem; }

  /* Logo hafif kompakt */
  .brand-logo{ width:26px; height:26px; }
  .logo-text{ font-size: .98rem; }

  /* (Opsiyonel) Mobilde hero üst boşluk kıs: nav’la kayık görünüm olmasın */
  .hero-section{ padding-top: 2.25rem; }
}





















/* =========================================================
   GLOW LIGHT — renk profili (yalnızca <body class="light-theme">)
   - Arkaplan: çok katmanlı, atmosferik; beyaz ~%50
   - Neon kimlik: global değişkenlere dokunmuyoruz
   - Yeni accent üçlüsü: pembe → lavanta → cyan (yalnızca light tema)
   ========================================================= */
/* =========================================================
   LIGHT THEME — CYBERPUNK NEON (body.light-theme)
   - Senin verdiğin neon değişkenleri eklenir (globali bozmaz)
   - Tüm mevcut bileşenlere uygun yüzey/kontrast yamaları
   - Buzlu cam + çok katmanlı neon aura arkaplan
   ========================================================= */

body.light-theme{
  /* === SENİN VERDİĞİN DEĞİŞKENLER === */
  --neon-pink:    #ff6ec7;
  --neon-cyan:    #00ffff;
  --neon-purple:  #8b5cf6;
  --neon-green:   #00ff88;
  --neon-blue:    #0099ff;
  --neon-magenta: #ff00aa;
  --neon-teal:    #00ccaa;
  --electric-lime:#ccff00;

  /* Yüzey tonları (light tarafı) — senin verdiğin karışımlar */
  --obsidian:   rgba(255,110,199,0.08);
  --obsidian-2: rgba(0,255,255,0.12);
  --obsidian-3: rgba(139,92,246,0.06);

  --panel:      rgba(255,110,199,0.15);
  --panel-alt:  rgba(0,255,255,0.12);
  --panel-glow: rgba(139,92,246,0.18);

  --line:       rgba(0,255,255,0.25);
  --line-alt:   rgba(255,110,199,0.22);
  --line-glow:  rgba(0,255,136,0.20);

  --text:       #1a0d26;                       /* koyu mor-siyah */
  --text-muted: rgba(139,92,246,0.65);         /* muted mor */
  --text-glow:  rgba(0,255,255,0.85);          /* parlak cyan metin */

  /* Light’a özel accent üçlüsü (imza geçişleri) */
  --accent-pink:  var(--neon-pink);
  --accent-lav:   var(--neon-purple);
  --accent-cyan:  var(--neon-cyan);
  --accent-green: var(--neon-green);
  --accent-teal:  var(--neon-teal);

  color: var(--text);
  color-scheme: light;

  /* === ÇOK KATMANLI NEON ARKAPLAN (beyaz yok) === */
  background:
    /* Sol üst: neon pembe aura */
    radial-gradient(1200px 800px at -5% -8%,
      rgba(255,110,199,0.28),
      rgba(255,0,170,0.15) 35%,
      transparent 65%),

    /* Sağ üst: cyan-mavi karışımı */
    radial-gradient(1000px 750px at 102% -5%,
      rgba(0,255,255,0.22),
      rgba(0,153,255,0.18) 40%,
      transparent 70%),

    /* Sol orta: matrix yeşil parıltı */
    radial-gradient(800px 600px at -8% 45%,
      rgba(0,255,136,0.16),
      rgba(0,204,170,0.12) 45%,
      transparent 75%),

    /* Sağ orta: mor lavanta */
    radial-gradient(900px 700px at 108% 50%,
      rgba(139,92,246,0.20),
      rgba(123,58,237,0.14) 42%,
      transparent 72%),

    /* Alt merkez: turkuaz parıltı */
    radial-gradient(1100px 650px at 50% 118%,
      rgba(0,204,170,0.24),
      rgba(6,182,212,0.16) 38%,
      transparent 68%),

    /* Alt sol: elektrik yeşil */
    radial-gradient(700px 500px at 15% 115%,
      rgba(204,255,0,0.14),
      rgba(0,255,136,0.08) 50%,
      transparent 80%),

    /* Alt sağ: magenta */
    radial-gradient(750px 550px at 85% 112%,
      rgba(255,0,170,0.18),
      rgba(255,20,147,0.12) 45%,
      transparent 75%),

    /* Baz gradient: neon karışımı (çok düşük opaklık) */
    linear-gradient(135deg,
      rgba(255,110,199,0.12) 0%,
      rgba(0,255,255,0.08) 25%,
      rgba(139,92,246,0.10) 50%,
      rgba(0,255,136,0.06) 75%,
      rgba(0,204,170,0.14) 100%);
}

/* ================== NAVBAR ================== */
/* Not: .nav zaten sticky; ::before için relative gerekir */
body.light-theme .nav{
  position: relative;
  background:
    rgba(255,110,199,0.25),  /* üst pembe-cyan karışımı yüzey */
    rgba(139,92,246,0.18);   /* alt mor-teal destek */
  -webkit-backdrop-filter: blur(15px) saturate(1.8) contrast(1.1);
  backdrop-filter: blur(15px) saturate(1.8) contrast(1.1);
  border-bottom: 1px solid var(--line);
  box-shadow:
    0 1px 0 rgba(0,255,255,0.30),
    0 2px 8px rgba(255,110,199,0.15),
    inset 0 1px 0 rgba(0,255,136,0.20);
}
body.light-theme .nav::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:2px;
  background: linear-gradient(90deg,
    var(--neon-pink) 0%,
    var(--neon-cyan) 25%,
    var(--neon-green) 50%,
    var(--neon-purple) 75%,
    var(--neon-teal) 100%);
  opacity:.6;
  animation:pulse-glow 3s ease-in-out infinite alternate;
}
@keyframes pulse-glow{from{opacity:.4} to{opacity:.8}}

body.light-theme .logo-text{ color: var(--text); }
body.light-theme .nav-center a{ color: var(--text); }
body.light-theme .nav-center a::after{ background: var(--neon-cyan); } /* underline neon ipucu */
body.light-theme .icon-button{
  color: var(--text);
  border-color: var(--line);
  background: rgba(0,0,0,.04);       /* light’ta hover zemini görünür olsun */
}
body.light-theme .icon-button:hover{
  background: rgba(0,0,0,.08);
  transform: translateY(-1px) scale(1.03);
}
body.light-theme .hamburger span{ background: var(--text); }

body.light-theme .mobilemenu{
  background: var(--panel);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  backdrop-filter: blur(10px) saturate(1.05);
  border-bottom: 1px solid var(--line);
}
body.light-theme .moblink{ color: var(--text); }

/* ================== BÖLÜM / AYIRICI ================== */
body.light-theme .divider{ border-top-color: var(--line); }
body.light-theme .section-title{ color: var(--text); }

/* ================== KART / PANEL YÜZEYLERİ ================== */
body.light-theme .card-neo,
body.light-theme .skill-card,
body.light-theme .proj-card,
body.light-theme .accordion-item,
body.light-theme .mega-menu{
  background: var(--panel);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  backdrop-filter: blur(10px) saturate(1.05);
  box-shadow: 0 8px 24px rgba(13,20,31,.06);
  color: var(--text);
}

/* Proje kartları overlay ve açıklama */
body.light-theme .proj-card::after{ background: rgba(255,255,255,.22); }
body.light-theme .proj-desc{ color: #2a2f3e; }

/* Accordion içerikleri */
body.light-theme .accordion-header{ color: var(--text); }
body.light-theme .accordion-header i{ color: #2a2f3e; }
body.light-theme .accordion-body p{ color: #2a2f3e; }

/* Mega menu */
body.light-theme .mega-menu h4{ color: var(--neon-cyan); }
body.light-theme .mega-menu a{ color: var(--text); }
body.light-theme .mega-menu a:hover{
  background: rgba(0,255,255,.10);
  color: var(--neon-cyan);
}

/* ================== İMZA GEÇİŞLER ================== */
/* Hero başlıkta pembe → lavanta → cyan */
body.light-theme .hero-title{
  background: linear-gradient(90deg,
    var(--accent-pink),
    var(--accent-lav),
    var(--accent-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Kart üst çizgisi (hover’da parlayan 4px) */
body.light-theme .card-neo{ position: relative; overflow: hidden; }
body.light-theme .card-neo::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background: linear-gradient(90deg,
    var(--accent-pink), var(--accent-lav), var(--accent-cyan));
  opacity:0; transform: translateY(-4px);
  transition: opacity .25s ease, transform .25s ease;
}
body.light-theme .card-neo:hover::before{ opacity:1; transform: translateY(0); }

/* ================== LİNK / BUTON ================== */
body.light-theme a{ color: var(--text); }
body.light-theme a:hover{ color: var(--neon-pink); }

body.light-theme .btn,
body.light-theme .cta{
  background: rgba(255,255,255,.28);
  border: 1px solid var(--line);
  color: var(--text);
}
body.light-theme .btn:hover,
body.light-theme .cta:hover{
  box-shadow: 0 6px 22px rgba(0,255,255,.18);
  border-color: rgba(0,255,255,.35);
}

/* ================== FORM / HARİTA ================== */
body.light-theme input,
body.light-theme textarea,
body.light-theme select{
  background: rgba(255,255,255,.60);
  border: 1px solid var(--line);
  color: var(--text);
}
body.light-theme .contact-map img{ border-color: var(--line); }

/* ================== SOSYAL İKONLAR (varsa) ================== */
body.light-theme .social-icon{
  background: rgba(255,255,255,.85);
  box-shadow: 0 0 10px rgba(0,255,255,.25);
}
body.light-theme .social-icon.linkedin{ color:#0A66C2; }
body.light-theme .social-icon.github{ color:#000; }

/* ================== FOOTER ================== */
body.light-theme .footer{ border-top:1px solid var(--line); }
body.light-theme .footer-links a{ color: var(--text); }

/* ================== ERİŞİLEBİLİRLİK / HAREKET ================== */
body.light-theme :focus-visible{
  outline: 2px solid rgba(0,255,255,.65);
  outline-offset: 2px;
}
/* Contact grid içindeki Get In Touch ve Click On başlıkları
   Data Scientist ile aynı font + gradient */
.contact-grid h3 {
  background: linear-gradient(90deg, var(--vio), var(--neon));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  font-family: 'Plus Jakarta Sans', system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
}
/* Light tema için özel sweet-img */
body.light-theme .sweet-img {
  background: #fff; /* arka plan beyaz kalsın */
  box-shadow:
    0 0 14px rgba(0, 255, 255, 0.9),   /* parlak cyan glow */
    0 0 28px rgba(255, 110, 199, 0.8), /* neon pembe glow */
    0 0 45px rgba(0, 255, 255, 0.6),   /* ek cyan yayılımı */
    0 0 60px rgba(255, 110, 199, 0.5); /* ek pembe yayılımı */;
  transition: transform 0.25s ease, box-shadow 0.35s ease;
}

/* Hover durumunda daha yoğun glow */
body.light-theme .sweet-img:hover {
  transform: scale(1.05);
  box-shadow:
    0 0 20px rgba(0, 255, 255, 1),
    0 0 40px rgba(255, 110, 199, 0.95),
    0 0 65px rgba(0, 255, 255, 0.75),
    0 0 90px rgba(255, 110, 199, 0.65);
}


/* Light tema: contact-card içindeki alıntı metin (muted)
   "Keep going, never give up." → pembe-cyan neon gradient + glow */
body.light-theme .contact-card .muted{
  /* Renk/gradient */
  background: linear-gradient(90deg, var(--neon-pink), var(--neon-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  /* Neon ışıma (pembe + cyan) */
  text-shadow:
    0 0 12px  rgba(255, 19, 164, 0.671),
    0 0 12px rgba(9, 26, 255, 0.788),
    0 0 22px rgb(204, 0, 255),
    0 0 36px rgba(0, 4, 255, 0.534);

  /* Tipografi (dark’taki stile yakın tutuyoruz) */
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 2px;
  opacity: 1; /* dark’tan kalan .85’i temizle */
}


@media (prefers-reduced-motion: reduce){
  body.light-theme *{ animation: none !important; transition: none !important; }
}