/* fatihkonuk.github.io — tek stil dosyası
   Yön: "Paralel şerit" (laboratuvar planlama takvimi). Tek aile: Archivo (değişken, wdth 62–125). */

/* ---------- Font (self-host) ----------
   Tek değişken woff2: Archivo (wght 100–900, wdth 62–125), Latin-1 + Türkçe + noktalama alt kümesi.
   Üretim adımı README'de. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/assets/fonts/archivo.woff2") format("woff2");
}

/* ---------- Tokenlar ---------- */
:root {
  color-scheme: light;
  /* Palet: mürekkep + sinyal kırmızısı. Kırmızı yalnızca link, şerit barı, odak ve küçük işaretlerde. */
  --bench: #f4f4f2;      /* zemin */
  --surface: #ffffff;    /* yüzey */
  --ink: #16181d;        /* mürekkep; "devam ediyor" noktası ve butonlar da bu renkte */
  --muted: #5a5f69;      /* ikincil metin */
  --accent: #c8102e;     /* sinyal kırmızısı */
  --on-accent: #ffffff;
  --rule: #d9d9d5;       /* ayıraç çizgileri */
  --grid: #e8e8e5;       /* ay ızgarası */
  --field-border: #82878f; /* form alanı kenarı (zemin ve yüzeyde 3:1) */
  --danger: #9a4a00;     /* form hataları: vurgu kırmızısından ayrı bir ton */

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --step--1: 0.8rem;     /* 13.6px */
  --step-0: 1rem;        /* 17px */
  --step-1: 1.25rem;     /* 21.25px */
  --step-2: 1.5625rem;   /* 26.6px */
  --step-3: 1.953rem;    /* 33.2px */

  --rail: 12.5rem;       /* veri sütunu: foto, kulvar adları, tarihler, kategori */
  --gap: 2.5rem;
  --pad: 1rem;           /* mobil kenar boşluğu */
  --measure: 64ch;
  --lane-h: 1.75rem;
  --bar-h: 0.875rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bench: #121316;
    --surface: #1b1d22;
    --ink: #ececea;
    --muted: #a3a7b0;
    --accent: #ff5a5f;
    --on-accent: #121316;
    --rule: #30333a;
    --grid: #24272d;
    --field-border: #6e737d;
    --danger: #f5a35c;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bench: #121316;
  --surface: #1b1d22;
  --ink: #ececea;
  --muted: #a3a7b0;
  --accent: #ff5a5f;
  --on-accent: #121316;
  --rule: #30333a;
  --grid: #24272d;
  --field-border: #6e737d;
  --danger: #f5a35c;
}

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

html {
  font-size: 106.25%; /* 17px */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bench);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.55;
  font-stretch: 100%;
  font-kerning: normal;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

time { font-variant-numeric: tabular-nums; }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--pad);
  top: 0.5rem;
  z-index: 10;
  padding: 0.5rem 0.875rem;
  background: var(--ink);
  color: var(--bench);
  border-radius: 2px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }
.skip:hover { color: var(--bench); }

.wrap {
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ---------- Üst çubuk ---------- */
.topbar {
  border-bottom: 1px solid var(--rule);
}
.topbar .wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.5rem;
}
.brand {
  margin-right: auto;
  font-weight: 700;
  font-stretch: 125%;
  font-size: var(--step--1);
  letter-spacing: 0.01em;
}
.lang {
  display: flex;
  margin-left: auto;
  gap: 1rem;
  font-size: var(--step--1);
}
.lang a { text-decoration: none; color: var(--muted); }
.lang a:hover { color: var(--accent); }
.lang a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
  text-underline-offset: 0.35em;
}

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle svg { width: 1.125rem; height: 1.125rem; }
.theme-toggle[aria-pressed="true"] svg { transform: rotate(180deg); }

/* ---------- Bölümler ---------- */
main > section,
.hero {
  padding-block: 3rem;
}
main > section + section { border-top: 1px solid var(--rule); }

h2 {
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

/* Masaüstünde iki sütun: solda veri sütunu (rail), sağda içerik */
.row {
  display: grid;
  gap: 0.25rem;
}

/* ---------- Hero ---------- */
.hero { padding-top: 2rem; }
.hero .photo img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 2px;
  background: var(--surface);
}
.hero .photo { margin-bottom: 1.25rem; }

h1 > span { display: inline-block; }
h1 {
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  /* Hero animasyonu için satır maskesi; inişli harfler için küçük pay */
  overflow: hidden;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
  font-weight: 800;
  font-stretch: 112%;
  line-height: 0.98;
  letter-spacing: -0.01em;
}
.title {
  margin-top: 0.75rem;
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.3;
}
.about {
  margin-top: 1.25rem;
  max-width: var(--measure);
  color: var(--ink);
}

.contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 1.5rem;
}
.contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  text-decoration: none;
  font-weight: 500;
}
.contact a span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.25em;
}
.contact a:hover span { text-decoration-color: currentColor; }
.contact svg { width: 1.125rem; height: 1.125rem; flex: none; }
/* Yeni sekmede açılan linkler: küçük ↗ (aria-hidden; bilgi .vh metninde) */
.contact svg.ext {
  width: 0.625rem;
  height: 0.625rem;
  margin-left: -0.3rem;
  align-self: flex-start;
  margin-top: 0.85rem;
  color: var(--muted);
}
.contact a:hover svg.ext { color: currentColor; }

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1.25rem;
  min-height: 3rem;
  background: var(--ink);
  color: var(--bench);
  border: 1px solid var(--ink);
  border-radius: 2px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn:disabled:hover { color: var(--bench); background: var(--ink); border-color: var(--ink); }
.cv {
  display: flex;
  margin-top: 1.25rem;
}
.cv svg { width: 1.125rem; height: 1.125rem; flex: none; }
.cv .meta { font-weight: 400; }

/* ---------- Kulvar şeridi (imza öğesi) ---------- */
.lanes {
  --span: 42;           /* 2023-05 = 0; site.js bugünün ayına göre günceller */
  --label: 5.25rem;
  --lane-gap: 0.75rem;
  position: relative;
  padding: 2rem 0.75rem 0.75rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-stretch: 75%;
  font-size: var(--step--1);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

/* Ay ızgarası + yıl çizgileri: tüm kulvarların arkasında tek katman */
.lanes .scale {
  position: absolute;
  top: 0.5rem;
  bottom: 0.75rem;
  left: calc(0.75rem + var(--label) + var(--lane-gap));
  right: 0.75rem;
  background:
    repeating-linear-gradient(to right, var(--grid) 0 1px, transparent 1px calc(100% / var(--span)))
    0 1.5rem / 100% calc(100% - 1.5rem) no-repeat;
}
.lanes .yr {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--m) / var(--span) * 100%);
  border-left: 1px solid var(--rule);
  padding-left: 0.3rem;
  color: var(--muted);
  font-weight: 600;
}
.lanes .yr::before { content: attr(data-ys); }

.lane {
  position: relative;
  display: grid;
  grid-template-columns: var(--label) minmax(0, 1fr);
  column-gap: var(--lane-gap);
  align-items: center;
  height: var(--lane-h);
}
.lane-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.track {
  position: relative;
  height: var(--bar-h);
}

.bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--s) / var(--span) * 100%);
  width: calc((var(--e, var(--span)) - var(--s)) / var(--span) * 100%);
  min-width: 3px;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 1px;
  transform-origin: left center;
}
/* Taramalı = staj. Ayrım desene dayanır, renk körlüğünde de okunur. */
.bar.intern {
  background: repeating-linear-gradient(-45deg, var(--accent) 0 1.5px, transparent 1.5px 5px);
}
.now {
  position: absolute;
  top: 50%;
  left: 100%;
  width: 0.875rem;
  height: 0.875rem;
  margin: -0.4375rem 0 0 -0.4375rem;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--surface);
}

.legend {
  position: relative; /* ızgara katmanının üstünde: çizgiler lejanttan geçmez */
  background: var(--surface);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin-top: 0.75rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--grid);
  color: var(--muted);
}
.legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.legend i {
  display: inline-block;
  width: 1.5rem;
  height: 0.625rem;
  border: 1px solid var(--accent);
  border-radius: 1px;
  background: var(--accent);
}
.legend i.intern {
  background: repeating-linear-gradient(-45deg, var(--accent) 0 1.5px, transparent 1.5px 5px);
}
.legend i.dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  border-color: var(--ink);
  background: var(--ink);
}

@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Deneyim listesi ---------- */
.jobs {
  display: grid;
  gap: 2.5rem;
  margin-top: 2.5rem;
}
.when {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.dates {
  font-stretch: 75%;
  font-weight: 600;
  line-height: 1.3;
}
.dates time { white-space: nowrap; }
.kind {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  color: var(--muted);
  font-size: var(--step--1);
  font-stretch: 75%;
  line-height: 1.35;
}
/* Listede şeritteki deseni tekrarlayan küçük örnek: taramalı = staj, dolu = çalışan */
.kind::before {
  content: "";
  flex: none;
  width: 1.25rem;
  height: 0.5rem;
  border: 1px solid var(--accent);
  border-radius: 1px;
  background: var(--accent);
}
.kind.intern::before {
  background: repeating-linear-gradient(-45deg, var(--accent) 0 1.5px, transparent 1.5px 5px);
}

.job h3 {
  font-size: var(--step-1);
  font-weight: 650;
  line-height: 1.25;
}
.role {
  color: var(--muted);
  font-weight: 500;
}
.job .desc {
  margin-top: 0.625rem;
  max-width: var(--measure);
}
/* Aynı şirketteki roller: rol adı alt başlık, altında kendi tarihi ve türü */
.stint { margin-top: 0.875rem; }
.stint + .stint { margin-top: 1.75rem; }
.stint .role { color: var(--ink); font-weight: 600; }
.stint .kind { margin-top: 0.15rem; }
.desc a { color: var(--accent); }
.desc a:hover { color: var(--ink); }

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.875rem;
}
/* "Numune etiketi": 2px köşe, 1px kenar, dar Archivo */
.tags li {
  padding: 0.125rem 0.45rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-size: var(--step--1);
  font-stretch: 75%;
  font-weight: 500;
  line-height: 1.4;
}

/* ---------- Projeler ---------- */
/* Açık kaynak: deneyim satırlarıyla aynı kayıt ızgarası. Panel rail genişliğinde kalır,
   böylece sayfanın en ağır öğesi iş projesi kartlarıdır. */
.featured {
  display: grid;
  gap: 2.5rem;
}
.feat.row { gap: 0.875rem; align-items: start; }
/* Görsel paneli: deskdeck render'ı ya da iyzipay-axios komut satırı. Aynı en-boy oranı. */
.feat-visual {
  width: 100%;
  max-width: var(--rail);
  aspect-ratio: 1084 / 764;
  overflow: hidden; /* reveal maskesi */
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.feat-media {
  height: 100%;
  display: grid;
  place-items: center;
}
.feat-media img {
  width: 100%;
  height: auto;
}
.cmd {
  place-items: center start;
  align-content: center;
  gap: 0.25rem;
  padding: 0.625rem 0.75rem;
}
.cmd-line code {
  font-family: inherit;
  font-size: var(--step-0);
  font-weight: 600;
  font-stretch: 75%;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.cmd-line code::before {
  content: "$ ";
  color: var(--muted);
  font-weight: 400;
}
.cmd-note {
  color: var(--muted);
  font-size: var(--step--1);
  font-stretch: 75%;
  font-weight: 600;
  line-height: 1.3;
}
.feat h4 {
  font-size: var(--step-0);
  font-weight: 650;
  line-height: 1.3;
}
.proj-meta {
  margin-top: 0.1rem;
  color: var(--muted);
  font-size: var(--step--1);
  font-stretch: 75%;
  font-weight: 600;
}
/* "Açık kaynak" rozeti: numune etiketi dili, ama teknoloji etiketlerinden ayrı (vurgu kenarı, zeminsiz) */
.badge {
  display: inline-block;
  margin-right: 0.4rem;
  padding: 0 0.4rem;
  border: 1px solid var(--accent);
  border-radius: 2px;
  color: var(--accent);
  line-height: 1.45;
}
.feat .desc { margin-top: 0.5rem; max-width: var(--measure); }
.ext-links { margin-top: 0.375rem; gap: 0 1.5rem; }

/* Çalıştığım projeler: kartlar (sayfanın görsel olarak en ağır öğesi). 1 sütun, ≥40em'de 2×2. */
h3.sub {
  margin-bottom: 1.25rem;
  font-size: var(--step-1);
  font-weight: 650;
}
h3.sub + .featured,
.client + h3.sub { margin-top: 0; }
.client + h3.sub { padding-top: 3.5rem; }
.client {
  display: grid;
  gap: 1.5rem;
}
.cp {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
}
.cp-thumb { border-bottom: 1px solid var(--rule); }
.cp-thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 5;
  object-fit: cover;
}
.cp .body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1rem 1.125rem 1.125rem;
}
.cp h4 {
  font-size: var(--step-1);
  font-weight: 650;
  line-height: 1.25;
}
.cp .desc { margin-top: 0.375rem; }
.cp .tags { margin-top: 0.875rem; }
.cp .tags li { background: var(--bench); }
/* Canlı link kartın dibine oturur */
.cp .ext-links { margin-top: auto; padding-top: 0.5rem; }

/* ---------- Teknoloji ikonları ----------
   Varsayılan tek renk (metin tonu); üzerine gelince/dokununca marka rengi.
   --bl / --bd: icons.js'in verdiği, açık/koyu zeminde en az 3:1 olan marka renkleri. */
.tags li { display: inline-flex; align-items: center; gap: 0.3em; }
.ti {
  flex: none;
  width: 0.95em;
  height: 0.95em;
  fill: currentColor;
  transition: color 180ms ease-out;
}
.tags li:hover .ti,
.tags li.tap .ti { color: var(--bl); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tags li:hover .ti,
  :root:not([data-theme="light"]) .tags li.tap .ti { color: var(--bd); }
}
:root[data-theme="dark"] .tags li:hover .ti,
:root[data-theme="dark"] .tags li.tap .ti { color: var(--bd); }
@media (prefers-reduced-motion: reduce) { .ti { transition: none; } }

/* ---------- Yetenekler: raf düzeni ---------- */
.skills {
  display: grid;
  gap: 1.25rem 2rem;
}
.skills > div {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.15rem;
  padding-top: 0.625rem;
}
/* Hücrenin üst çizgisi (reveal'da soldan çizilir) */
.skills > div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rule);
  transform-origin: left center;
}
.skills dt {
  font-weight: 600;
  font-stretch: 75%;
}
.skills dd { max-width: var(--measure); }

/* ---------- Eğitim satırı ---------- */
.edu .years {
  font-stretch: 75%;
  font-weight: 600;
}
.edu p { max-width: var(--measure); }

/* ---------- Alt bilgi ---------- */
.foot {
  border-top: 1px solid var(--rule);
  padding-block: 1.75rem 2.5rem;
  color: var(--muted);
  font-size: var(--step--1);
}
.foot .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

/* ---------- İletişim ---------- */
.contact-grid {
  display: grid;
  gap: 2rem;
}
.contact-text p { max-width: var(--measure); }
.contact-stack {
  flex-direction: column;
  gap: 0;
  margin-top: 1rem;
}

.form {
  display: grid;
  gap: 1.125rem;
  max-width: 34rem;
}
.field {
  display: grid;
  gap: 0.375rem;
}
.field label { font-weight: 600; }
.field input,
.field textarea {
  width: 100%;
  margin: 0;
  padding: 0.625rem 0.75rem;
  font: inherit;
  font-size: max(16px, 1rem); /* iOS'ta odakta yakınlaştırmayı önler */
  line-height: 1.4;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--field-border);
  border-radius: 2px;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
/* Hata: yalnızca renk değil; kalın kenar + ikonlu metin */
.field [aria-invalid="true"] {
  border: 2px solid var(--danger);
  padding: calc(0.625rem - 1px) calc(0.75rem - 1px);
}
.field-error,
.form-status {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.4;
}
.field-error { color: var(--danger); }
.field-error[hidden] { display: none; }
.field-error::before,
.form-status[data-state]::before {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  font-size: 0.85em;
  font-weight: 800;
  font-stretch: 100%;
  line-height: 1;
  transform: translateY(0.15em);
}
.field-error::before,
.form-status[data-state="error"]::before {
  content: "!";
  background: var(--danger);
  color: var(--surface);
}
.form-status[data-state="ok"]::before {
  content: "\2713";
  background: var(--ink);
  color: var(--surface);
}
.form-status[data-state="pending"]::before { content: none; }
.form-status:empty { display: none; }
.form-status[data-state="pending"] { color: var(--muted); font-weight: 500; }
.form-status[data-state="ok"] { color: var(--ink); }
.form-status[data-state="error"] { color: var(--danger); }
.form-status a { color: inherit; }
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}
/* JS'siz gönderimden sonra (redirect → #sent) görünen not */
.sent-note { display: none; }
.sent-note:target {
  display: block;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--ink);
  border-radius: 2px;
  color: var(--ink);
  font-weight: 600;
}

/* ---------- 404 ---------- */
.notfound h1 { font-size: var(--step-3); font-stretch: 112%; }
.notfound h2 { margin-bottom: 0; }
.notfound .back { margin-top: 1rem; font-weight: 600; }
.notfound .back a { color: var(--accent); }
a.brand { text-decoration: none; }

/* ---------- Geniş ekran ---------- */
@media (min-width: 40em) {
  :root { --pad: 1.5rem; }
  .cv { display: inline-flex; }
  .lanes { --label: 7.5rem; }
  .lanes .yr::before { content: attr(data-y); }
  .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 60em) {
  :root { --pad: 2rem; }
  main > section, .hero { padding-block: 4.5rem; }
  .hero { padding-top: 3.5rem; }

  .row {
    grid-template-columns: var(--rail) minmax(0, 1fr);
    column-gap: var(--gap);
  }
  .hero.row {
    grid-template-areas: "photo ident" "photo pitch";
    grid-template-rows: auto 1fr;
    align-items: start;
  }
  .hero .photo { grid-area: photo; }
  .hero .ident { grid-area: ident; }
  .hero .pitch { grid-area: pitch; }
  .hero .photo { margin: 0.5rem 0 0; }
  .hero .photo img { width: 176px; height: 176px; }
  h1 { font-stretch: 125%; }

  /* Şeritteki kulvar adları da rail ile hizalı */
  .lanes {
    --label: calc(var(--rail) - 0.75rem - 1px);
    --lane-gap: var(--gap);
    padding-left: 0.75rem;
  }
  .lane { --lane-h: 2rem; }

  .jobs { gap: 3rem; }
  .job.row {
    grid-template-areas: "when body" "when tags";
    align-items: start;
  }
  .feat.row { column-gap: var(--gap); }
  .job .when { grid-area: when; }
  .job .body { grid-area: body; }
  .job .tags { grid-area: tags; }
  .contact-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
    column-gap: var(--gap);
  }
  .when { padding-top: 0.3rem; }


}

/* ---------- Çok geniş ekran (≥ 1200px): genişlik yalnızca fayda gören öğelere ---------- */
@media (min-width: 75em) {
  :root { --pad: 2.5rem; }
  .wrap { max-width: 75rem; }

  /* Hero: solda kimlik bloğu (isim iki satıra kırılır), sağda metin + linkler + CV */
  .hero.row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
    grid-template-areas: "photo pitch" "ident pitch";
    grid-template-rows: auto auto;
    column-gap: 4rem;
    row-gap: 1.75rem;
  }
  .hero .photo { margin: 0; }
  .hero .pitch { align-self: end; }
  h1 { font-size: 7rem; line-height: 0.92; }

  .lane { --lane-h: 2.25rem; }

  /* Deneyim: tarih · içerik · etiketler */
  .job.row {
    grid-template-columns: var(--rail) minmax(0, 34rem) minmax(0, 1fr);
    grid-template-areas: "when body tags";
  }
  .job .tags { margin-top: 0; padding-top: 0.35rem; align-content: start; }

  .client { gap: var(--gap); }

  .skills { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }

  .contact-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
    column-gap: 4rem;
  }
}

/* ---------- Hareket ----------
   Gizli başlangıç durumları yalnızca html.js altında ve hareket tercihi varsa.
   html.rv-off: site.js yüklenmezse 3 sn sonra her şey görünür olur. */
@media (prefers-reduced-motion: no-preference) {
  /* Hero: yalnızca ilk yüklemede, saf CSS (JS beklemez) */
  .hero h1 > span { animation: rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) 60ms both; }
  .hero .title { animation: appear 400ms ease-out 380ms both; }
  .hero .pitch { animation: appear 500ms ease-out 500ms both; }

  /* Kulvar şeridi: görünür olunca barlar sırayla uzar */
  html.js:not(.rv-off) .lanes .bar { transform: scaleX(0); }
  html.js:not(.rv-off) .lanes .now { opacity: 0; }
  html.js .lanes.in .bar {
    animation: grow 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(var(--i) * 80ms + 80ms);
  }
  html.js .lanes.in .now {
    animation: appear 240ms ease-out both;
    animation-delay: calc(5 * 80ms + 600ms);
  }

  /* Deneyim satırları: zaman ekseni yönünde soldan, sırayla */
  html.js:not(.rv-off) .job {
    opacity: 0;
    transform: translateX(-1rem);
  }
  html.js:not(.rv-off) .job.in {
    opacity: 1;
    transform: none;
    transition: opacity 420ms ease-out, transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: var(--d, 0ms);
  }
  /* Etiketler: yalnızca opacity, satırın ardından */
  html.js:not(.rv-off) .job .tags li { opacity: 0; }
  html.js:not(.rv-off) .job.in .tags li {
    opacity: 1;
    transition: opacity 300ms ease-out;
    transition-delay: calc(var(--d, 0ms) + 220ms + var(--ti, 0) * 25ms);
  }

  /* Öne çıkan projeler: panel içeriği çerçeve maskesinden yükselir (hero ismiyle aynı dil) */
  html.js:not(.rv-off) .feat .feat-media { transform: translateY(100%); }
  html.js:not(.rv-off) .feat .feat-body { opacity: 0; }
  html.js:not(.rv-off) .feat.in .feat-media {
    transform: none;
    transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms);
  }
  html.js:not(.rv-off) .feat.in .feat-body {
    opacity: 1;
    transition: opacity 420ms ease-out calc(var(--d, 0ms) + 280ms);
  }
  /* İş projeleri: kart çerçevesi yerinde durur; görsel hafif yakından yerine oturur, metin belirir */
  html.js:not(.rv-off) .cp .cp-thumb img { opacity: 0; transform: scale(1.06); }
  html.js:not(.rv-off) .cp .body { opacity: 0; }
  html.js:not(.rv-off) .cp.in .cp-thumb img {
    opacity: 1;
    transform: none;
    transition: opacity 420ms ease-out var(--d, 0ms), transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms);
  }
  html.js:not(.rv-off) .cp.in .body {
    opacity: 1;
    transition: opacity 380ms ease-out calc(var(--d, 0ms) + 160ms);
  }

  /* Yetenekler: hücre çizgisi soldan çizilir, metin belirir */
  html.js:not(.rv-off) .skills > div::before { transform: scaleX(0); }
  html.js:not(.rv-off) .skills > div > * { opacity: 0; }
  html.js:not(.rv-off) .skills.in > div::before {
    transform: none;
    transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--si, 0) * 60ms);
  }
  html.js:not(.rv-off) .skills.in > div > * {
    opacity: 1;
    transition: opacity 360ms ease-out calc(var(--si, 0) * 60ms + 150ms);
  }
}
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }

/* ---------- Yazdırma ---------- */
@media print {
  :root {
    --bench: #fff; --surface: #fff; --ink: #000; --muted: #333;
    --accent: #c8102e; --rule: #bbb; --grid: #e5e5e5;
  }
  html { font-size: 75%; }
  .skip, .topbar, .theme-toggle, .cv { display: none !important; }
  main > section, .hero { padding-block: 1.25rem; }
  .bar, .now, .hero * { animation: none !important; }
  .job, .job .tags li, .skills > div > *, .now, .feat-media, .feat-body, .cp .body, .cp img { opacity: 1 !important; transform: none !important; }
  .bar, .skills > div::before { transform: none !important; }
  #contact { display: none; }
  .lanes, .tags li { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .job, .lanes { break-inside: avoid; }
  .contact a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.9em; }
}