:root {
  --bg: #f5f1ea;
  --fg: #23201c;
  --dim: #6e6459;
  --faint: #ded5c6;
  --muted: #726a5f;
  --bright: #0d0c0a;
  --glitch-red: #e0203f;
  --glitch-cyan: #0f9fc2;
  --pad: clamp(1.25rem, 4vw, 4rem);
  --font-display: "Space Grotesk", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --glitch-blend: multiply;
  /* Hero fotoğrafına uygulanan düzeltme: fotoğrafın kendi arka planı
     neredeyse beyaz olduğu için iki temada aynı ayar çalışmıyor. */
  --photo-filter: contrast(1.02);
  color-scheme: light;
}

/* ---- Koyu tema ---- */
html[data-theme="dark"] {
  --bg: #121014;
  --fg: #cfc8c2;
  --dim: #6b6663;
  --faint: #2b2725;
  --muted: #8b8379;
  --bright: #e8e2dc;
  --glitch-red: #ff2b4a;
  --glitch-cyan: #2bdcff;
  color-scheme: dark;
  --glitch-blend: screen;
  --photo-filter: brightness(0.82) contrast(1.06);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Tek ve sabit arka plan: ferah, kağıt gibi sıcak bir beyaz + ince gren.
   Arka plan bilerek html üzerinde: boyama sırası "html arka planı →
   negatif z-index → body arka planı" olduğu için body'ye verilseydi
   yaprak canvas'ının üstünü kapatırdı. */
/* scroll-behavior bilerek başlangıçta kapalı ve sınıfla açılıyor.
   Açık bırakılırsa tarayıcının sayfa yenilemesinde yaptığı konum geri
   yüklemesi de animasyonlu oluyor: sayfa 0'dan hedefe süzülürken yolda
   kalan bütün bölümler giriş/çıkış animasyonlarını arka arkaya
   tetikliyor. Sınıf load'dan sonra ekleniyor; menü bağlantıları ve
   "kaydır" göstergesi yine yumuşak kayıyor. */
html {
  /* Varsayılan görünüm, sayfanın Chrome'da %80 yakınlaştırmayla aldığı
     hâle eşitlendi. Kök yazı boyutu %80 olunca rem tabanlı her ölçü
     (yazı, boşluk, menü) %20 küçülüyor; vw tabanlı olanlar ise aynı
     kalıyor - yakınlaştırmada da tam olarak bu oluyor, çünkü görünüm
     alanı 1.25 kat genişleyip çizim 0.8 ile ölçekleniyor ve ikisi
     birbirini götürüyor. px cinsinden yazılmış ölçüler kök yazı
     boyutundan etkilenmediği için tek tek 0.8 ile çarpıldı. */
  font-size: 80%;
  background-color: var(--bg);
  background-image:
    radial-gradient(125% 85% at 50% -15%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 62%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='1' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23g)' opacity='0.05'/></svg>");
  background-attachment: fixed, scroll;
  background-repeat: no-repeat, repeat;
}

@media (prefers-reduced-motion: no-preference) {
  html.smooth-scroll { scroll-behavior: smooth; }
}

html[data-theme="dark"] {
  background-image:
    radial-gradient(125% 85% at 50% -15%, rgba(158, 148, 178, 0.06), rgba(0, 0, 0, 0) 62%),
    linear-gradient(to bottom, rgba(18, 16, 22, 0) 0%, rgba(8, 7, 10, 0.6) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='1' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23g)' opacity='0.035'/></svg>");
  background-attachment: fixed, fixed, scroll;
  background-repeat: no-repeat, no-repeat, repeat;
}

body {
  background: transparent;
  color: var(--fg);
  font-family: var(--font-display);
  /* clamp: 320px'ten 2400px'e tek ve sürekli bir formülle büyüyor.
     Eskiden 1600px'te ayrı bir medya sorgusuyla 17px'ten 19px'e
     SIÇRIYORDU - 1599 ile 1600px genişlik arasında görünür bir zıplama
     vardı. Tek Chrome penceresini birkaç piksel genişletmek/daraltmak
     bile farklı bir "ölçek" izlenimi veriyordu. */
  font-size: clamp(12.8px, 12.4px + 0.15vw, 15.2px);
  line-height: 1.65;
  font-weight: 400;
}

/* ---- Scrollbar ----
   color-scheme (yukarıda) tarayıcıya "bu sayfa koyu/açık" diyor ama
   varsayılan gri scrollbar yine de palete uymuyordu (Chrome'da koyu
   temada solgun/yabancı duruyordu). Burada scrollbar'ı da tema
   token'larıyla boyuyoruz. */
/* Track bilerek opak: saydam bırakılırsa arkadaki sabit yaprak
   canvas'ı scrollbar oluğundan görünüyor ve sağda pembe lekeler
   oluşuyordu. scrollbar-width tanımlıyken Chrome aşağıdaki
   ::-webkit-scrollbar kurallarını yok sayar; oluğun rengini
   belirleyen tek yer burasıdır. */
html {
  scrollbar-color: var(--dim) var(--bg);
  scrollbar-width: thin;
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background-color: var(--dim);
  border-radius: 999px;
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background-color: var(--muted); }

#sakuraCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  /* Kendi derleme katmanına alınıyor. html'deki background-attachment:
     fixed katmanlarıyla aynı katmanda kalırsa kaydırma sırasında kök
     katman yeniden boyanıyor ve kenarlarda bayat piksel şeritleri
     (uçuşan yaprakların pembesi) kalabiliyor. */
  will-change: transform;
}

/* ---- Kromatik tarama-silme ----
   Bölüm geçişinde ekranı tarayan ışık bandı; üst kenarında kırmızı,
   alt kenarında camgöbeği kalıyor - metinlerdeki kanal ayrışmasının
   tam ekran hâli. */
#scanWipe {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  pointer-events: none;
}

.scan-band {
  position: absolute;
  opacity: 0;
  mix-blend-mode: multiply;
  filter: blur(1px);
}

/* Yatay bant — bölümler arası geçişte dikey olarak süpürüyor */
.scan-band--h {
  left: -5%;
  top: 0;
  width: 110%;
  height: 20vh;
  background: linear-gradient(
    to bottom,
    rgba(224, 32, 63, 0) 0%,
    rgba(224, 32, 63, 0.55) 36%,
    rgba(20, 18, 16, 0.6) 50%,
    rgba(15, 159, 194, 0.55) 64%,
    rgba(15, 159, 194, 0) 100%
  );
}

/* Dikey bant — TR/EN geçişinde yatay olarak süpürüyor */
.scan-band--v {
  top: -5%;
  left: 0;
  height: 110%;
  width: 18vw;
  background: linear-gradient(
    to right,
    rgba(224, 32, 63, 0) 0%,
    rgba(224, 32, 63, 0.55) 36%,
    rgba(20, 18, 16, 0.6) 50%,
    rgba(15, 159, 194, 0.55) 64%,
    rgba(15, 159, 194, 0) 100%
  );
}

.scan-band::after {
  content: "";
  position: absolute;
  background: rgba(13, 12, 10, 0.5);
}
.scan-band--h::after { left: 0; right: 0; top: 50%; height: 1px; }
.scan-band--v::after { top: 0; bottom: 0; left: 50%; width: 1px; }

html[data-theme="dark"] .scan-band { mix-blend-mode: screen; }

html[data-theme="dark"] .scan-band--h {
  background: linear-gradient(
    to bottom,
    rgba(255, 43, 74, 0) 0%,
    rgba(255, 43, 74, 0.2) 36%,
    rgba(232, 226, 220, 0.3) 50%,
    rgba(43, 220, 255, 0.22) 64%,
    rgba(43, 220, 255, 0) 100%
  );
}

html[data-theme="dark"] .scan-band--v {
  background: linear-gradient(
    to right,
    rgba(255, 43, 74, 0) 0%,
    rgba(255, 43, 74, 0.2) 36%,
    rgba(232, 226, 220, 0.3) 50%,
    rgba(43, 220, 255, 0.22) 64%,
    rgba(43, 220, 255, 0) 100%
  );
}

html[data-theme="dark"] .scan-band::after {
  background: rgba(232, 226, 220, 0.4);
}

/* ---- Tema geçişi ----
   View Transitions API: yeni tema, verilen köşeden büyüyen bir daire
   içinde açılıyor. Desteklemeyen tarayıcıda tema anında değişiyor. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }

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

a:focus-visible,
button:focus-visible {
  outline: 1px solid var(--bright);
  outline-offset: 4px;
}

/* ---- Üst bar: yatay menü + dil değiştirici ---- */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(1rem, 4vw, 3rem);
  padding: clamp(1.5rem, 4vw, 2.75rem) var(--pad);
  background: linear-gradient(to bottom, rgba(245, 241, 234, 0.92) 40%, rgba(245, 241, 234, 0));
}

html[data-theme="dark"] .topbar {
  background: linear-gradient(to bottom, rgba(10, 9, 10, 0.88) 40%, rgba(10, 9, 10, 0));
}

.topbar-nav {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: baseline;
  /* space-between yerine flex-start + sabit gap: 5 öğe sarıldığında
     space-between her satırı ayrı ayrı kenarlara geriyordu, satırlar
     hizasız/kopuk görünüyordu. flex-start sarılsa da tutarlı kalıyor. */
  justify-content: flex-start;
  column-gap: clamp(1rem, 2.6vw, 2.75rem);
  row-gap: 0.6rem;
  max-width: 74rem;
  font-size: clamp(1.05rem, 2vw, 1.9rem);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.topbar-nav a {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  padding-bottom: 0.4rem;
  color: var(--fg);
  transition: color 0.3s ease;
}

/* Hover: alttan sağa doğru çizilen çizgi + hafif yukarı kalkış */
.topbar-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--bright);
  transition: right 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.topbar-nav a:hover::after { right: 0; }
.topbar-nav a:hover { color: var(--bright); transform: translateY(-2px); }
.topbar-nav a { transition: color 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }

.nav-index {
  font-family: var(--font-mono);
  font-size: 0.5em;
  color: var(--muted);
  transition: color 0.3s ease;
}
.topbar-nav a:hover .nav-index { color: var(--glitch-cyan); }

/* Nav etiketleri glitch-text: mouse değer değince flash-step.js kısa
   bir glitch "patlaması" oynatıyor (--glitch-x/--glitch-o üzerinden,
   JS ile), sonra burada tanımlı çok hafif bir kalıcı titreşimde
   dinleniyor. Okunabilirlik için opaklık ve kayma bilerek düşük -
   önceki sürüm kelimeleri okunmaz hale getiriyordu. */
.topbar-nav a:hover .glitch-text {
  --glitch-x: 2px;
  --glitch-o: 0.3;
}

/* ---- TR/EN ve AÇIK/KOYU anahtarları ----
   Nav'la aynı hover dili: alttan çizilen çizgi + hafif kalkış +
   flash-step.js'in oynattığı kısa glitch patlaması. */
.topbar-switches {
  display: flex;
  align-items: baseline;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  flex: none;
}

.lang-switch,
.theme-switch {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 1.1vw, 1.05rem);
  color: var(--muted);
}

.theme-switch {
  padding-left: clamp(0.75rem, 2vw, 1.5rem);
  border-left: 1px solid var(--faint);
}

.lang-switch button,
.theme-switch button {
  position: relative;
  background: none;
  border: 0;
  padding: 0 0 0.25rem;
  color: var(--muted);
  font: inherit;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: color 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.lang-switch button::after,
.theme-switch button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--bright);
  transition: right 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.lang-switch button:hover::after,
.theme-switch button:hover::after { right: 0; }

.lang-switch button:hover,
.theme-switch button:hover { color: var(--bright); transform: translateY(-2px); }

.lang-switch button:hover .glitch-text,
.theme-switch button:hover .glitch-text {
  --glitch-x: 2px;
  --glitch-o: 0.3;
}

.lang-switch button[aria-pressed="true"],
.theme-switch button[aria-pressed="true"] { color: var(--bright); }

.switch-sep { opacity: 0.5; }

@media (max-width: 700px) {
  .topbar-nav {
    font-size: 1rem;
    max-width: none;
    column-gap: 1.25rem;
  }
  /* Mobilde ikisi alt alta: üstte AÇIK/KOYU, altında TR/EN */
  .topbar-switches {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.55rem;
  }
  .theme-switch { order: 1; padding-left: 0; border-left: 0; }
  .lang-switch { order: 2; }
}

/* ---- RGB kanal-kayması (glitch) efekti ----
   ::before/::after aynı metni data-text'ten kopyalayıp kırmızı/camgöbeği
   renkte üst üste basıyor. --glitch-x ve --glitch-o üst elemandan miras
   alınıyor, böylece bir bütün olarak hareket eden kapsayıcının içindeki
   her metin satırı aynı anda kanal-kayması gösteriyor. */
.glitch-text {
  position: relative;
  --glitch-x: 0px;
  --glitch-o: 0;
}
.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: var(--glitch-blend);
  opacity: var(--glitch-o);
}
.glitch-text::before {
  color: var(--glitch-red);
  transform: translateX(calc(var(--glitch-x) * -1));
}
.glitch-text::after {
  color: var(--glitch-cyan);
  transform: translateX(var(--glitch-x));
}

/* ---- Hero: isim ve fotoğraf tek bir blok gibi, yan yana ---- */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 4vh, 3rem);
  padding: calc(var(--pad) + 5rem) var(--pad) calc(var(--pad) + 4.5rem);
  overflow-x: clip;
}

.hero-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 5vw, 4.5rem);
}

/* Eski "Hakkımda" bölümü buraya taşındı: isim/fotoğrafın altında,
   ortalanmış, kısaltılmış hâli. */
.hero-intro {
  display: grid;
  gap: 0.85rem;
  max-width: 60ch;
  text-align: center;
}

.hero-intro p { color: var(--muted); }

.hero-role {
  font-family: var(--font-mono);
  font-size: clamp(0.66rem, 0.9vw, 0.8rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
}

/* ---- "Kaydır" göstergesi ----
   Harfler tek tek dalga hâlinde düşüyor, ardından altındaki çizgi
   yukarıdan aşağı çiziliyor (flash-step.js'te kuruluyor). */
.scroll-cue {
  position: absolute;
  bottom: clamp(1rem, 3.5vh, 2.25rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  background: none;
  border: 0;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  transition: color 0.3s ease;
}
.scroll-cue:hover { color: var(--bright); }

.scroll-cue-word { display: inline-flex; }
.scroll-cue-word span { display: inline-block; }

.scroll-cue-line {
  width: 1px;
  height: 2.75rem;
  background: currentColor;
  transform-origin: top center;
  opacity: 0.45;
}

.hero-name { display: flex; flex-direction: column; }

.name-line {
  font-size: clamp(1.9rem, 4.6vw, 7rem);
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.06;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}

.hero-photo img {
  display: block;
  width: clamp(184px, 184px + 6.7vw, 304px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 30%;
  filter: var(--photo-filter);
  border: 1px solid var(--faint);
}

@media (max-width: 860px) {
  /* Masaüstündeki %80 ölçek mobilde uygulanmıyor: telefon ekranında
     13px gövde metni okunmuyor. Küçültme masaüstü için bilinçli bir
     tercih; mobilde okunabilirlik önce geliyor. */
  html { font-size: 100%; }
  body { font-size: clamp(16px, 15.5px + 0.15vw, 19px); }
  .hero-photo img { width: min(44vw, 160px); }

  /* Hero'da artık isim + fotoğraf + tanıtım metni + kaydır göstergesi
     birlikte duruyor; küçük ekranda hepsi tek ekrana sığsın diye
     ölçüler ve boşluklar sıkılaştırıldı. */
  .hero {
    gap: 1.15rem;
    /* Üstte sabit nav (mobilde iki satır, ~123px), altta "kaydır"
       göstergesi var. Gösterge position:absolute olduğu için flex
       hizalamasına girmiyor; ikisinin de yerini burada payla ayırmazsak
       ortalanan metin altlarına giriyor. */
    padding-top: calc(var(--pad) + 7.5rem);
    padding-bottom: calc(var(--pad) + 6.75rem);
  }
  .hero-main {
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
  }
  .name-line { white-space: normal; }
  .hero-name { text-align: center; }
  .hero-intro { gap: 0.5rem; font-size: 0.8rem; }
  .hero-role { font-size: 0.6rem; letter-spacing: 0.12em; }
}

/* Dar telefonlarda (360px) Türkçe menü başlıkları üçüncü satıra taşıp
   sabit nav'ı 166px'e çıkarıyor; o yükseklikte hero metni nav'ın altına
   giriyordu. Yazı ve aralığı bir tık kısarak nav iki satırda kalıyor. */
@media (max-width: 400px) {
  .topbar-nav {
    font-size: 0.92rem;
    column-gap: 0.85rem;
  }
}

/* ---- Bölümler: sağa/sola yaslanan bloklar, dışta soluk bölüm numarası ---- */

.reveal-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  gap: clamp(1.5rem, 4vw, 4.5rem);
  padding: 11rem var(--pad) 8rem;
  /* clip, hidden değil: hidden bu bölümü dikeyde de bir kaydırma
     kabı hâline getirip sağda istenmeyen bir iç scrollbar üretebiliyor.
     clip sadece kırpıyor, kaydırma kabı oluşturmuyor. */
  overflow-x: clip;
  scroll-margin-top: 7rem;
}

.reveal-section--left { justify-content: flex-start; }
.reveal-section--right { justify-content: flex-end; }

/* Numara ve başlık artık aynı flex satırının üstünden hizalanıyor
   (align-items: flex-start), böylece ikisi de aynı Y noktasında
   başlıyor. Küçük margin-top farkı iki fontun (mono/display)
   üst boşluk farkını gideriyor. */
.section-index {
  flex: none;
  margin-top: 0.05em;
  font-family: var(--font-mono);
  font-size: clamp(2rem, 4.5vw, 5.25rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--faint);
}

.reveal-section--right .section-index { order: 2; }

.section-inner { flex: 0 1 clamp(416px, 40vw, 624px); min-width: 0; }

/* Projeler iki sütun olduğu için daha geniş bir kolona ihtiyaç duyuyor */
.section-inner--wide { flex: 0 1 clamp(416px, 72vw, 864px); }

.section-title {
  font-size: clamp(2rem, 4.2vw, 4.25rem);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1;
  color: var(--fg);
  margin-bottom: 2rem;
}

/* Hakkımda bölümünün başlığı büyük başlık değil, kalın bir ünvan satırı */
.section-title--label {
  font-size: clamp(1.05rem, 1rem + 0.2vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--bright);
  margin-bottom: 1.75rem;
}

.section-content p { max-width: 38em; }
.section-content p + p { margin-top: 1.25rem; }

.skill-grid {
  list-style: none;
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 2.5rem;
  max-width: clamp(26rem, 24rem + 3vw, 30rem);
}

.exp-list { list-style: none; display: grid; gap: 3.5rem; }

.exp-item {
  display: grid;
  grid-template-columns: clamp(11rem, 9rem + 2.5vw, 13rem) 1fr;
  gap: 0 2.5rem;
  align-items: start;
}

.exp-org {
  display: block;
  font-weight: 500;
  color: var(--muted);
}

.exp-date {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: #5f5954;
}

@media (max-width: 640px) {
  .exp-item { grid-template-columns: 1fr; gap: 0.5rem; }
  .skill-grid { grid-template-columns: 1fr; }
}

/* ---- Projeler ---- */

/* İki sütun: bölüm tek bir devasa dikey blok olmaktan çıkıyor.
   Eskiden 6 kart alt alta olduğu için bölüm ekranın çok dışına
   taşıyordu ve flash-step tetiği geç/yanlış zamanda çalışıyordu. */
.project-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.25rem clamp(1.5rem, 3vw, 3rem);
}

.project-item {
  padding-top: 1.35rem;
  border-top: 1px solid var(--faint);
}

@media (max-width: 860px) {
  .project-list { grid-template-columns: 1fr; }
}

.project-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 0.35rem;
}

.project-name {
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--fg);
}

.project-link {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.25s ease;
}
.project-link:hover { color: var(--bright); }

.project-stack {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: #5f5954;
  margin-bottom: 0.85rem;
}

.contact-list { list-style: none; display: grid; gap: 1.75rem; }
.contact-list a:hover { color: var(--bright); }

/* İkon .glitch-text'in dışında duruyor: içeride olsaydı ::before/::after
   kopyaları metinden kayar, hayalet katman hizasını bozardı. */
.contact-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.contact-icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: var(--dim);
  transition: fill 0.25s ease;
}

.contact-item:hover .contact-icon { fill: var(--bright); }

.site-footer {
  padding: 3rem var(--pad);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: #5f5954;
}

/* ---- Geniş ekranlar ----
   Eskiden burada 1600px'te tavanlara SIÇRAYAN ayrı bir medya sorgusu
   vardı (ör. isim yazısı 74px'ten 112px'e, tek pikselik pencere
   farkında). Artık ilgili her clamp()'in kendi üst sınırı zaten geniş
   ekranları kapsıyor, sürekli/kesintisiz büyüyor - ayrı bir bloğa
   gerek kalmadı. topbar-nav'ın max-width'i ultra geniş ekranlarda
   (2600px+) nav'ın aşırı yayılmaması için burada kalıyor. */
@media (min-width: 2600px) {
  .topbar-nav { max-width: 88rem; }
}

/* ---- Hareketi azalt tercihi açık olan kullanıcılar için ----
   Giriş animasyonları ve piksel geçişi JS tarafında hiç kurulmuyor;
   burada glitch katmanları da gizlenip her şey düz ve görünür kalıyor. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .glitch-text::before,
  .glitch-text::after { display: none; }
}