/*
  KİŞİSEL CV SİTESİ.

  Bu sayfa bir portfolyo değil, İŞE ALIM SAYFASI. Okuyan kişi çoğunlukla
  bir teknik yönetici ya da işe alım uzmanı ve sayfada ortalama bir
  dakikadan az kalıyor. Bu yüzden yapı şuna göre kuruldu:

    · İlk ekranda kim olduğu, ne yaptığı ve nasıl ulaşılacağı — kaydırmadan.
    · Hemen ardından SAYILAR: "142 migration, 76 model" gibi somut veriler,
      "tecrübeli geliştirici" gibi sıfatlardan çok daha ikna edici.
    · Ayrıntılar kapalı kutularda (<details>). Her şeyi açık göstermek
      teknik derinliği gösterir ama sayfayı okunmaz bir duvara çevirir;
      ilgilenen kişi açar, ilgilenmeyen geçer.

  Kutular JavaScript ile değil, tarayıcının kendi <details> ögesiyle
  çalışıyor: betik çalışmasa da, ekran okuyucuda da, yazdırırken de çalışır.
*/

:root {
  --zemin:    #0B0D10;
  --yuzey:    #12151A;
  --yuzey-2:  #171B21;
  --cizgi:    rgba(255, 255, 255, .08);
  --cizgi-2:  rgba(255, 255, 255, .14);
  --metin:    #E9EAEC;
  --solgun:   #9AA0A8;
  --sonuk:    #636A74;
  --altin:    #D4A24C;
  --altin-ac: #EFC57E;
  --mono:     "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sabit üst çubuk, bağlantıyla gidilen başlığı örtmesin */
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(circle 760px at 78% -12%, rgba(212, 162, 76, .13), transparent 62%),
    radial-gradient(circle 620px at 4% 22%,  rgba(212, 162, 76, .06), transparent 60%);
  background-attachment: fixed;
}

a { color: inherit; }

.sinir { width: 100%; max-width: 980px; margin: 0 auto; padding: 0 22px; }

/* ── Üst çubuk ───────────────────────────────────────────────────────── */

.ust {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(11, 13, 16, .78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--cizgi);
}

.ust .sinir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 62px;
}

.ust-ad {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.02em;
  text-decoration: none;
  white-space: nowrap;
}

.ust-ad span { color: var(--altin); }

.menu { display: flex; gap: 22px; }

.menu a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--solgun);
  text-decoration: none;
  transition: color .15s ease;
}

.menu a:hover { color: var(--altin); }

.menu .dil {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--altin);
  border: 1px solid var(--cizgi-2);
  border-radius: 7px;
  padding: 3px 9px;
}

.menu .dil:hover { border-color: var(--altin); }

/*
  Telefonda menü gizlenir — 62 pikselde beş bağlantı sıkışır ve hiçbiri
  okunmaz. DİL DÜĞMESİ İSTİSNA: İngilizce sürüme geçiş, sayfadaki en kritik
  ikinci eylem ve telefonda da erişilebilir kalmalı.
*/
@media (max-width: 720px) {
  .menu a:not(.dil) { display: none; }
}

/* ── Giriş ───────────────────────────────────────────────────────────── */

.giris { padding: 74px 0 58px; }

.etiket {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--altin);
  text-transform: uppercase;
}

.etiket::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--altin);
}

h1 {
  margin: 16px 0 0;
  font-size: clamp(2.4rem, 8vw, 4.1rem);
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: 1.03;
}

.rol {
  margin: 10px 0 0;
  font-size: clamp(1.05rem, 3.4vw, 1.45rem);
  font-weight: 700;
  color: var(--altin);
  letter-spacing: -.02em;
}

.vurus {
  margin: 20px 0 0;
  max-width: 620px;
  font-size: clamp(1rem, 2.6vw, 1.09rem);
  color: var(--solgun);
}

.vurus b { color: var(--metin); font-weight: 600; }

.pullar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0;
}

.pul {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--solgun);
}

.pul svg { width: 14px; height: 14px; color: var(--altin); flex: none; }

/* Uygunluk rozeti ayrı renkte — sayfadaki en "aksiyon alınabilir" bilgi */
.pul.acik {
  border-color: rgba(74, 222, 128, .32);
  background: rgba(74, 222, 128, .09);
  color: #86EFAC;
}

.pul.acik svg { color: #4ADE80; }

.dugmeler { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 0; }

.dugme {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.dugme svg { width: 17px; height: 17px; }

.dugme.dolu {
  background: linear-gradient(135deg, var(--altin-ac), var(--altin));
  color: #16120A;
  box-shadow: 0 12px 28px rgba(212, 162, 76, .24);
}

.dugme.dolu:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(212, 162, 76, .32); }

.dugme.bos {
  border: 1px solid var(--cizgi-2);
  color: var(--metin);
}

.dugme.bos:hover { border-color: var(--altin); color: var(--altin); }

/* ── Rakamlar ────────────────────────────────────────────────────────── */

.rakamlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  margin: 52px 0 0;
  border: 1px solid var(--cizgi);
  border-radius: 16px;
  background: var(--cizgi);
  overflow: hidden;
}

.rakam { background: var(--yuzey); padding: 20px 18px; }

.rakam b {
  display: block;
  font-family: var(--mono);
  font-size: clamp(1.5rem, 4.6vw, 1.95rem);
  font-weight: 700;
  color: var(--altin);
  letter-spacing: -.03em;
  line-height: 1.1;
}

.rakam span {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--sonuk);
  font-weight: 500;
}

/* ── Bölümler ────────────────────────────────────────────────────────── */

section { padding: 56px 0; }

.bolum-basligi {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 26px;
}

.bolum-basligi h2 {
  margin: 0;
  font-size: clamp(1.35rem, 4vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -.03em;
  white-space: nowrap;
}

.bolum-basligi::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--cizgi);
}

.bolum-basligi .no {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--altin);
  font-weight: 500;
}

/* ── Uzmanlık kartları ───────────────────────────────────────────────── */

.kartlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.kart {
  padding: 22px 20px;
  border: 1px solid var(--cizgi);
  border-radius: 15px;
  background: var(--yuzey);
  transition: border-color .18s ease, transform .18s ease;
}

.kart:hover { border-color: var(--cizgi-2); transform: translateY(-2px); }

.kart-ikon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(212, 162, 76, .12);
  color: var(--altin);
  margin-bottom: 13px;
}

.kart-ikon svg { width: 19px; height: 19px; }

.kart h3 {
  margin: 0 0 6px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.02em;
}

.kart p { margin: 0; font-size: 13.5px; color: var(--sonuk); line-height: 1.55; }

/* ── Deneyim ─────────────────────────────────────────────────────────── */

.is {
  padding: 26px 0 0;
  border-top: 1px solid var(--cizgi);
  margin-top: 26px;
}

.is:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }

.is-ust {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-bottom: 4px;
}

.is-ust h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--altin);
}

.is-tarih {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--sonuk);
  white-space: nowrap;
}

.is-rol { font-size: 14px; color: var(--solgun); font-weight: 600; margin: 0 0 18px; }

/* ── Proje ───────────────────────────────────────────────────────────── */

.proje {
  padding: 18px 19px;
  border: 1px solid var(--cizgi);
  border-radius: 14px;
  background: var(--yuzey);
  margin-bottom: 11px;
}

.proje > h4 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.015em;
}

.yigin {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--altin);
  font-weight: 500;
  letter-spacing: .01em;
}

.ozet { margin: 11px 0 0; font-size: 13.8px; color: var(--solgun); }

/* Canlı proje bağlantısı: "yaptım" demekle "işte, bak" demek arasındaki fark */
.canli {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 9px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--altin);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 162, 76, .3);
  padding-bottom: 1px;
  transition: border-color .15s ease;
}

.canli:hover { border-color: var(--altin); }
.canli svg { width: 12px; height: 12px; }

.olcu {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 13px 0 0;
}

.olcu span {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--solgun);
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--cizgi);
  border-radius: 7px;
  padding: 4px 9px;
}

.olcu b { color: var(--altin); font-weight: 700; }

/* ── Açılır ayrıntılar ───────────────────────────────────────────────── */

details {
  margin-top: 9px;
  border: 1px solid var(--cizgi);
  border-radius: 11px;
  background: var(--yuzey-2);
  overflow: hidden;
}

summary {
  padding: 11px 15px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 9px;
  transition: color .15s ease;
  user-select: none;
}

summary::-webkit-details-marker { display: none; }

summary:hover { color: var(--altin); }

/* Ok işareti: açıkken 90° döner — kutunun durumu tek bakışta anlaşılır */
summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid var(--altin);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .18s ease;
  flex: none;
}

details[open] > summary { color: var(--altin); }
details[open] > summary::before { transform: rotate(90deg); }

details ul {
  margin: 0;
  padding: 2px 17px 15px 33px;
  list-style: none;
}

details li {
  position: relative;
  font-size: 13.4px;
  color: var(--solgun);
  margin-bottom: 8px;
  line-height: 1.6;
}

details li::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--altin);
  opacity: .55;
}

details li b { color: var(--metin); font-weight: 600; }

details li:last-child { margin-bottom: 0; }

/* ── Yetenekler ──────────────────────────────────────────────────────── */

.yetenek-grup { margin-bottom: 20px; }

.yetenek-grup h3 {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--sonuk);
}

.etiketler { display: flex; flex-wrap: wrap; gap: 7px; }

.etiketler span {
  padding: 6px 12px;
  border: 1px solid var(--cizgi);
  border-radius: 8px;
  background: var(--yuzey);
  font-size: 12.8px;
  font-weight: 600;
  color: var(--metin);
}

/* ── İletişim ────────────────────────────────────────────────────────── */

.iletisim {
  padding: 34px 26px;
  border: 1px solid var(--cizgi);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(212, 162, 76, .07), rgba(255, 255, 255, .015));
  text-align: center;
}

.iletisim h2 { margin: 0; font-size: clamp(1.4rem, 4.4vw, 1.85rem); font-weight: 800; letter-spacing: -.03em; }
.iletisim p { margin: 9px auto 0; max-width: 440px; font-size: 14.5px; color: var(--solgun); }

.baglantilar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-top: 24px;
}

.baglanti {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 17px;
  border: 1px solid var(--cizgi-2);
  border-radius: 11px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  color: var(--metin);
  transition: border-color .15s ease, color .15s ease;
}

.baglanti:hover { border-color: var(--altin); color: var(--altin); }
.baglanti svg { width: 16px; height: 16px; color: var(--altin); }

footer {
  padding: 30px 0 40px;
  text-align: center;
  font-size: 12.5px;
  color: #4C525B;
  border-top: 1px solid var(--cizgi);
  margin-top: 40px;
}

a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--altin);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ── Görünürlük animasyonu ───────────────────────────────────────────── */

/*
  Başlangıçta gizleyen kural YALNIZ JavaScript çalışıyorsa devreye girer
  (<html> üzerine `js` sınıfı eklenir). Betik yüklenmezse ya da hata verirse
  içerik gizli kalmaz — sayfa boş görünmektense animasyonsuz görünsün.
*/
.js .beliren { opacity: 0; transform: translateY(14px); }

.js .beliren.gorundu {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, .9, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .beliren { opacity: 1; transform: none; }
  *, *::before, *::after { transition-duration: .001ms !important; }
}

/* ── Yazdırma ────────────────────────────────────────────────────────── */

/*
  Biri sayfayı yazdırmak ya da PDF'e çevirmek isterse (işe alımda sık olur)
  koyu zemin işe yaramaz. Yazdırmada renkler ters çevrilir ve kapalı
  kutuların hepsi açılır.
*/
@media print {
  body { background: #fff; color: #000; }
  .ust, .dugmeler, .baglantilar { display: none; }
  details[open], details { border: 0; background: none; }
  details > summary { color: #000; }
  details ul { display: block !important; }
  .kart, .proje, .rakam { border-color: #ccc; background: none; }
  .solgun, details li, .ozet { color: #333; }
}