/* ==========================================================================
   Ali Taş — alistone
   Palet (huemint/website-3 referans dağılımı):
     #FCFCFE Kırık Beyaz     → tek zemin; sayfanın tamamı, header ve footer dahil
     #D3CDD1 Mat Pembe-Gri   → hayalet tipografi, saç teli ayraçlar, nav ayracı
     #111418 Neredeyse Siyah → logo, nav, başlıklar
     #3D444D Koyu Kayrak Gri → gövde metni
     #CE713A Terracotta      → etiket işaretleri, oklar, CTA dolgusu
     #F1BC57 Sıcak Altın     → marker altı çizgisi, cari sayfa işareti, hover
   Referansta koyu yüzey yok: ritim, hayalet tipografi ve hairline ile kurulur.
   Tipografi: Geist Sans (metin/başlık), Geist Mono (etiket, teknik veri)
   Boşluk: 8px tabanlı ölçek --s1…--s7 (8/16/24/32/48/64/96)
   ========================================================================== */

/* ---------- 1. Token ---------- */
:root {
  /* boşluk ölçeği — bu dosyada keyfi px yok */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 64px;
  --s7: 96px;

  /* --- palet --- */
  --slate: #111418;       /* logo, nav, başlık */
  --ink: #3D444D;         /* gövde metni — zeminde 9.61:1 ✓ */
  --paper: #FCFCFE;       /* tek zemin */
  --line: #D3CDD1;        /* palet rengi: hairline, nav ayracı, hayalet tipografi */
  --ember: #CE713A;       /* vurgu 1 */
  --gold: #F1BC57;        /* vurgu 2 */
  --stone: #8C858A;       /* destek — dekoratif çizgi */

  /* --- paletten türetilenler --- */
  --band: #F4F1F3;        /* bölüm bandı — dolu bant değil, fısıltı (1.10:1) */
  --tint: #EAE6E9;        /* chip / kart alt barı dolgusu */
  --ghost: #EDEAED;       /* hayalet tipografi — --line'in zemine seyreltilmişi, 1.17:1 */
  --line-strong: #918A8F; /* kontrol sınırı — zeminde 3.29:1 ✓ (1.4.11) */

  /* Vurgu renkleri açık zeminde küçük punto METİN için yetmez:
     #CE713A zeminde 3.39:1 (işaret/ok/dolgu ✓, metin ✗),
     #F1BC57 zeminde 1.70:1 (yalnız ARKA plan: marker bandı, altı çizgisi).
     Metin ve link için koyultulmuş kardeş tonlar: */
  --stone-ink: #5C565B;   /* ikincil metin — 6.98:1 ✓ */
  --ember-ink: #87451B;   /* vurgulu metin/link — 7.07:1 ✓ */
  --ember-fill: #B35A23;  /* beyaz yazı taşıyan dolgu — 4.77:1 ✓ */
  --ember-wash: #FAEDE4;  /* açık ember zemini */

  /* gölge markadan türetildi — varsayılan gri yok */
  --shadow-1: 0 1px 2px rgba(17, 20, 24, .06), 0 2px 8px rgba(206, 113, 58, .06);
  --shadow-2: 0 2px 4px rgba(17, 20, 24, .08), 0 12px 28px rgba(206, 113, 58, .12);

  --rd: 3px;
  --rd-lg: 6px;

  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", monospace;

  --ease: cubic-bezier(.2, .6, .3, 1);
  --header-h: 64px;
}

@media (min-width: 900px) {
  :root { --header-h: 76px; }
}

/* ---------- 2. Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s3));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: "cv01", "ss01";
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--sans);
  color: var(--slate);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.6rem, 1.55rem + 4.3vw, 4.85rem);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.038em;
}

h2 {
  font-size: clamp(1.8rem, 1.25rem + 2.2vw, 2.85rem);
  font-weight: 650;
  line-height: 1.06;
  letter-spacing: -.028em;
}

h3 {
  font-size: clamp(1.15rem, 1.05rem + .45vw, 1.4rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.016em;
}

h4 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
}

p { margin: 0; }
p + p { margin-top: var(--s2); }

a { color: inherit; }

::selection { background: var(--gold); color: var(--slate); }

:focus-visible {
  outline: 2px solid var(--ember-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: var(--s2);
  top: calc(-1 * var(--s7));
  z-index: 60;
  background: var(--slate);
  color: var(--paper);
  padding: var(--s1) var(--s2);
  border-radius: var(--rd);
  font-size: .875rem;
  transition: top .18s var(--ease);
}
.skip:focus { top: var(--s2); }

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

/* ---------- 3. Yerleşim ---------- */
.wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--s3);
}

@media (min-width: 900px) {
  .wrap { padding-inline: var(--s5); }
}

/* mobil: tek kolon. 12 kolonluk kırık simetri yalnız ≥760px'te devreye girer. */
.g12 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5);
}

@media (min-width: 760px) {
  .g12 { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s5) var(--s4); }
}

/* kırık simetri: satır ağırlığı 7+5 / 5+7 — delik bırakmadan */
@media (min-width: 760px) {
  .c4  { grid-column: span 4; }
  .c5  { grid-column: span 5; }
  .c6  { grid-column: span 6; }
  .c7  { grid-column: span 7; }
  .c8  { grid-column: span 8; }
  .c12 { grid-column: span 12; }
}

section { padding-block: var(--s6); }
@media (min-width: 900px) { section { padding-block: var(--s7); } }

.band-alt { background: var(--band); }
.rule-top { border-top: 1px solid var(--line); }

/* Vurgu bandı — referansta koyu yüzey yok: bant, üst/alt hairline ve
   arkasından geçen hayalet tipografiyle ayrışır. */
.feature {
  background: var(--paper);
  border-block: 1px solid var(--line);
}

/* Hayalet tipografi — referansın imza öğesi: dev ama neredeyse görünmez bir
   kelime içeriğin arkasından geçer. Referansta da kontrast çok düşüktür:
   --ghost zeminde 1.17:1, yani okunacak değil sezilecek bir katman.
   Punto her sayfada aynı: 11vw, en uzun kelimenin (HAKKIMDA / PROJECTS)
   58vw'lik kutuya tam sığdığı ölçü.
   Dikey konum: kelimenin VERSAL ÜST HİZASI h1'in üst hizasına oturur.
   .095em = kutu üstü ile versal üstü farkı (Geist 700: yarım satır boşluğu +
   çıkan payı). --gy buradaki ölçülmüş yaklaşıklıktır; menu.js sayfa yüklenince
   gerçek h1 konumuyla düzeltir (etiket satırı dile/genişliğe göre sarabiliyor).
   Böylece hayalet başlığın arkasına kayıtlı durur, listelere dağılmaz.
   Dar ekranda da görünür: orada sağda içerik sütunu olmadığı için kutu tam
   genişliktir ve punto 19vw'ye çıkar — en uzun kelime yine tam sığar. */
.hero, .phead, .feature { position: relative; overflow: hidden; }
.hero > .wrap, .phead > .wrap, .feature > .wrap { position: relative; z-index: 1; }
.ghost {
  position: absolute;
  left: 0;
  right: 0;
  --gy: 110px;
  top: calc(var(--gy) - .095em);
  z-index: 0;
  margin: 0;
  font-size: 19vw;
  line-height: .9;
  font-weight: 700;
  letter-spacing: -.045em;
  text-align: left;
  white-space: nowrap;
  color: var(--ghost);
  user-select: none;
  pointer-events: none;
}
/* Hayalet yalnız iki sütunlu düzende görünür: sağdaki içerik sütununun
   (portre, liste, künye) dışında kalır, başlık sütununun arkasından geçer.
   Tek sütunlu dar ekranda kaçacak yer yok — 12px'lik etiket satırlarının
   arkasına düşerdi, o yüzden orada hiç çizilmiyor. */
.hero > .ghost { --gy: 116px; }
/* Geniş ekranda sağdaki içerik sütununun (portre, liste, künye) dışında kalır. */
@media (min-width: 900px) {
  .ghost { right: 42%; font-size: 11vw; --gy: 140px; }
  .hero > .ghost { --gy: 148px; }
}

/* Marker altı çizgisi — referansın ikinci imzası: yazı koyu kalır, altın bant
   tabanın hemen altından arkadan geçer. Koyu yazı altın üstünde 10.62:1 ✓. */
.mark {
  font-style: normal;
  color: var(--slate);
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-size: 100% .24em;
  background-position: 0 calc(100% - .04em);
  padding-inline: .08em;
}

/* ---------- 4. Ortak tipografik parçalar ---------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ember-ink);
  margin: 0 0 var(--s3);
}
.eyebrow::before {
  content: "";
  width: var(--s4);
  height: 2px;
  background: var(--ember);
  flex: none;
}

.lead {
  font-size: clamp(1.1rem, 1.03rem + .38vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink);
  max-width: 62ch;
}

.prose { max-width: 62ch; }
.prose p + p { margin-top: var(--s3); }

.mono {
  font-family: var(--mono);
  font-size: .8125rem;
  letter-spacing: .02em;
}

.dim { color: var(--stone-ink); }

strong { font-weight: 600; color: var(--slate); }

/* ---------- 5. İkon sistemi ----------
   Sprite <symbol viewBox="0 0 24 24"> ile tanımlı; tüketen her <svg> etiketi
   viewBox'ı TEKRAR taşır (aksi halde 1:1 user unit basılır ve kutuda kırpılır). */
.ico {
  width: 20px;
  height: 20px;
  flex: none;
  color: inherit;
}
.ico-sm { width: 16px; height: 16px; }
.ico-lg { width: 24px; height: 24px; }

/* İkonlar zeminsiz durur: çerçeve/dolgu yok, kutu yalnızca ikonu hizalar. */
.ibox {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--slate);
  transition: color .18s var(--ease);
}
.ibox .ico { width: 22px; height: 22px; }

.ibox-sm { width: 18px; height: 18px; }
.ibox-sm .ico { width: 18px; height: 18px; }

/* ---------- 6. Butonlar ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1;
  padding: 14px var(--s3);
  border: 1px solid transparent;
  border-radius: var(--rd);
  text-decoration: none;
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn .ico { width: 17px; height: 17px; transition: transform .18s var(--ease); }

/* Referanstaki gibi dolu terracotta + açık yazı. Saf #CE713A beyazla 3.47:1'de
   kalıyor; dolgu bir ton koyulaşınca 4.77:1 ✓. Hover'da altın: 10.62:1 ✓. */
.btn-1 {
  background: var(--ember-fill);
  color: var(--paper);
  box-shadow: var(--shadow-1);
}
.btn-1:hover {
  background: var(--gold);
  color: var(--slate);
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}
.btn-1:hover .ico { transform: translate(2px, -2px); }
.btn-1:active { transform: translateY(0); }

.btn-2 {
  background: transparent;
  color: var(--slate);
  border-color: var(--line-strong);
}
.btn-2:hover {
  border-color: var(--ember);
  color: var(--ember-ink);
  background: var(--ember-wash);
}

/* metin bağlantısı — alt çizgi tam ember, yazı AA için koyu kardeş ton */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--slate);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1.5px solid var(--ember);
  transition: color .18s var(--ease), border-color .18s var(--ease), gap .18s var(--ease);
}
.tlink .ico { width: 16px; height: 16px; transition: transform .18s var(--ease); }
.tlink:hover { color: var(--ember-ink); gap: 10px; }
.tlink:hover .ico { transform: translate(2px, -2px); }


/* ---------- 7. Header (tek zemin, hairline ayraç) ---------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.hdr-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: none;
}
.brand svg { width: 28px; height: 28px; flex: none; object-fit: contain; }
.brand-txt { display: grid; line-height: 1; }
.brand-name {
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -.025em;
  color: var(--slate);
}
.brand-sub {
  font-family: var(--mono);
  font-size: .5625rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--stone-ink);
  margin-top: 4px;
}

.nav-d { display: none; }

@media (min-width: 900px) {
  .nav-d {
    display: flex;
    align-items: center;
    align-self: stretch;
  }
  /* Referanstaki gibi: maddeler dikey hairline ile ayrılır, cari sayfa
     kelimenin tam altından geçen kalın altın bantla işaretlenir. */
  .nav-d a {
    position: relative;
    display: flex;
    align-items: center;
    align-self: stretch;
    padding-inline: var(--s3);
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--slate);
    transition: color .18s var(--ease);
  }
  .nav-d a + a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: var(--s3);
    background: var(--line);
  }
  .nav-d a::after {
    content: "";
    position: absolute;
    left: var(--s3);
    right: var(--s3);
    bottom: calc(50% - .95rem);
    height: 3px;
    background: transparent;
    transition: background .18s var(--ease);
  }
  .nav-d a:hover { color: var(--ember-ink); }
  .nav-d a:hover::after { background: var(--line); }
  .nav-d a[aria-current="page"] { font-weight: 600; }
  .nav-d a[aria-current="page"]::after,
  .nav-d a[aria-current="page"]:hover::after { background: var(--gold); }
}

.hdr-end { display: flex; align-items: center; gap: var(--s2); }

.lang {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--rd);
  overflow: hidden;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .08em;
}
.lang a, .lang span {
  padding: 6px 9px;
  text-decoration: none;
  color: var(--stone-ink);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.lang a:hover { background: var(--tint); color: var(--slate); }
.lang [aria-current="true"] { background: var(--paper); color: var(--slate); font-weight: 600; }

.hdr-cta { display: none; }
@media (min-width: 900px) {
  .hdr-cta { display: inline-flex; padding: 11px var(--s3); box-shadow: none; }
}

.burger {
  display: grid;
  place-items: center;
  width: var(--s5);
  height: var(--s5);
  margin-right: calc(-1 * var(--s1));
  background: none;
  border: 0;
  color: var(--slate);
  cursor: pointer;
}
.burger .ico { width: 24px; height: 24px; }
.burger .x { display: none; }
.burger[aria-expanded="true"] .m { display: none; }
.burger[aria-expanded="true"] .x { display: block; }
@media (min-width: 900px) { .burger { display: none; } }

/* --- mobil menü paneli (header'ın zeminini sürdürür) ---
   .wrap yatay boşluğu verdiği için burada `padding` KISAYOLU yok, padding-block var. */
.nav-m {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding-block: var(--s2) var(--s3);
}
.nav-m.open { display: block; }
@media (min-width: 900px) { .nav-m, .nav-m.open { display: none; } }

.nav-m a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--s2);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--slate);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.nav-m a .ico { color: var(--stone-ink); opacity: .55; }
.nav-m a[aria-current="page"] {
  font-weight: 600;
  box-shadow: inset var(--s1) 0 0 calc(-1 * var(--s1) + 3px) var(--gold);
  padding-left: var(--s2);
}
.nav-m a[aria-current="page"] .ico { color: var(--ember); opacity: 1; }
.nav-m a:nth-last-of-type(2) { border-bottom: 0; }

.nav-m .btn {
  display: flex;
  justify-content: center; /* .nav-m a'nın space-between'ini ez */
  width: 100%;
  margin-top: var(--s2);
}

/* ---------- 8. Hero ---------- */
.hero { padding-block: var(--s6) var(--s6); }
@media (min-width: 900px) { .hero { padding-block: var(--s7) var(--s7); } }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s2);
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone-ink);
  margin-bottom: var(--s4);
}
.hero-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ember); flex: none; }

.hero h1 { margin-bottom: var(--s3); }

.hero-claim {
  font-size: clamp(1.3rem, 1.05rem + 1.15vw, 1.95rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.028em;
  color: var(--slate);
  max-width: 20ch;
  margin-bottom: var(--s3);
}
.hero-claim em { font-style: normal; }

.hero-sub {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--stone-ink);
  max-width: 44ch;
}

.hero-roles {
  margin: var(--s4) 0 var(--s5);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.hero-roles li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--s2);
  align-items: baseline;
  padding-block: 10px;
  border-bottom: 1px solid var(--line);
  font-size: .9375rem;
}
.hero-roles .n {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  color: var(--ember-ink);
}

.hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }

/* portre — ember kaçık çerçeve (yalnız görselin arkasında, alt yazıya taşmaz) */
.portrait { position: relative; margin: 0; }
.pframe { position: relative; }
/* kaçık çerçeve yalnız masaüstünde: mobilde ekran kenarına yapışırdı */
@media (min-width: 760px) {
  .pframe::after {
    content: "";
    position: absolute;
    inset: var(--s4) calc(-1 * var(--s3)) calc(-1 * var(--s3)) var(--s4);
    border: 1.5px solid var(--ember);
    border-radius: var(--rd-lg);
    z-index: 0;
    pointer-events: none;
  }
}
.portrait img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: var(--rd-lg);
  background: var(--tint);
  filter: saturate(.92) contrast(1.02);
}
.portrait figcaption {
  position: relative;
  z-index: 1;
  margin-top: var(--s4);
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone-ink);
}
@media (min-width: 760px) { .portrait figcaption { padding-left: var(--s4); } }
@media (min-width: 760px) {
  .portrait { margin-top: var(--s1); }

  /* metin sütunuyla aynı yüksekliğe uzayan portre — yanında ölü boşluk kalmasın */
  .portrait-fill { display: grid; grid-template-rows: minmax(360px, 1fr) auto; margin-top: 0; }
  .portrait-fill .pframe { height: 100%; }
  .portrait-fill picture { position: absolute; inset: 0; display: block; }
  .portrait-fill img { width: 100%; height: 100%; aspect-ratio: auto; }
}

/* yığın şeridi */
.stackbar {
  border-block: 1px solid var(--line);
  background: var(--tint);
  padding-block: var(--s3);
}
.stackbar ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--stone-ink);
}
.stackbar li { display: flex; align-items: center; gap: var(--s2); }
.stackbar li::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--ember);
  transform: rotate(45deg);
  flex: none;
}
.stackbar .lbl { color: var(--slate); font-weight: 500; }

/* ---------- 9. Sayfa başlığı (iç sayfalar) ---------- */
.phead { padding-block: var(--s6) var(--s5); border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .phead { padding-block: var(--s7) var(--s6); } }
.phead h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.7rem); margin-bottom: var(--s3); }

/* ---------- 10. Sayı bloğu ---------- */
.facts { display: grid; gap: var(--s3); margin: 0; padding: 0; }
.fact {
  border-top: 2px solid var(--slate);
  padding-top: var(--s2);
}
.fact dt {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--stone-ink);
  margin-bottom: 6px;
}
.fact dd {
  margin: 0;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
  font-weight: 650;
  letter-spacing: -.03em;
  color: var(--slate);
  line-height: 1.1;
}
.fact:nth-child(2) { border-top-color: var(--ember); }
.fact:nth-child(3) { border-top-color: var(--stone); }

/* ---------- 11. Öne çıkan proje ---------- */
.feat-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); margin-bottom: var(--s2); }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ember-ink);
  background: var(--ember-wash);
  border: 1px solid rgba(206, 113, 58, .4);
  border-radius: 100px;
  padding: 4px 10px;
}
.badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ember);
  flex: none;
}

.flist { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: var(--s3); }
@media (min-width: 620px) { .flist { grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s4); } }
.flist li { display: flex; gap: var(--s2); align-items: flex-start; }
.flist .ibox-sm { color: var(--ember-ink); margin-top: 2px; }
.flist strong { display: block; font-weight: 600; font-size: .9375rem; }
.flist span { display: block; font-size: .875rem; color: var(--stone-ink); line-height: 1.5; }

/* teknik künye */
.spec {
  border: 1px solid var(--line);
  border-radius: var(--rd-lg);
  background: var(--paper);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.spec-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  background: var(--slate);
  color: var(--paper);
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.spec-h .ico { color: var(--ember); width: 16px; height: 16px; }
.spec dl { margin: 0; padding: var(--s1) var(--s3) var(--s3); }
.spec dt {
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stone-ink);
  margin-top: var(--s3);
}
.spec dd {
  margin: 4px 0 0;
  font-size: .9375rem;
  color: var(--slate);
  font-weight: 500;
  line-height: 1.45;
}
.spec-foot {
  border-top: 1px solid var(--line);
  background: var(--tint);
  padding: var(--s2) var(--s3);
}
.spec-foot a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  font-family: var(--mono);
  font-size: .8125rem;
  color: var(--slate);
  text-decoration: none;
  transition: color .18s var(--ease);
}
.spec-foot a .ico { color: var(--ember-ink); transition: transform .18s var(--ease); }
.spec-foot a:hover { color: var(--ember-ink); }
.spec-foot a:hover .ico { transform: translate(2px, -2px); }
.spec-foot a + a {
  margin-top: var(--s2);
  padding-top: var(--s2);
  border-top: 1px solid var(--line);
}

/* ---------- 12. Proje listesi (satır düzeni — kart yok, delik yok) ---------- */
.rows { border-top: 1px solid var(--line); }
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s1) var(--s3);
  align-items: baseline;
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background .18s var(--ease), padding-inline .18s var(--ease);
}
.row:hover { background: var(--ember-wash); padding-inline: var(--s2); }
.row-n {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .12em;
  color: var(--ember-ink);
}
.row h3 { grid-column: 1; margin-bottom: 4px; transition: color .18s var(--ease); }
.row:hover h3 { color: var(--ember-ink); }
.row p { grid-column: 1; font-size: .9375rem; color: var(--stone-ink); max-width: 58ch; }
.row .tag {
  grid-column: 2;
  grid-row: 2 / span 2;
  align-self: center;
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--stone-ink);
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  padding: 4px 10px;
  white-space: nowrap;
}
@media (max-width: 619px) {
  .row { grid-template-columns: minmax(0, 1fr); }
  .row .tag { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--s1); }
}

/* ---------- 13. Proje kartları (projeler sayfası) ---------- */
.pcard {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  height: 100%;
  padding: var(--s4);
  overflow: hidden; /* alt bar kart köşelerini taşırmasın */
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--rd-lg);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.pcard:hover {
  border-color: var(--ember);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.pcard:hover .ibox { color: var(--ember-ink); }
.pcard .k {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin-bottom: var(--s1);
}
.pcard .kn {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .12em;
  color: var(--stone-ink);
}
.pcard p { font-size: .9375rem; color: var(--ink); }
.pcard .chips { margin-top: auto; padding-top: var(--s2); }

/* kart alt barı — mağaza bağlantısı (kartın kendi padding'ini taşar) */
.pcard-foot {
  margin-top: var(--s3);
  margin-inline: calc(-1 * var(--s4));
  margin-bottom: calc(-1 * var(--s4));
  padding-block: var(--s2);
  padding-inline: var(--s4);
  border-top: 1px solid var(--line);
  background: var(--tint);
  transition: background .18s var(--ease);
}
.pcard-foot a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--slate);
  text-decoration: none;
  transition: color .18s var(--ease);
}
.pcard-foot a .ico { color: var(--ember-ink); transition: transform .18s var(--ease); }
.pcard-foot a:hover { color: var(--ember-ink); }
.pcard-foot a:hover .ico { transform: translate(2px, -2px); }
.pcard-foot a + a {
  margin-top: var(--s2);
  padding-top: var(--s2);
  border-top: 1px solid var(--line);
}
/* İki mağaza bağlantısı geniş ekranda yan yana durur: alt bar tek satır kalır,
   böylece aynı grid satırındaki kartların ayraç çizgileri aynı hizaya oturur. */
@media (min-width: 760px) {
  .pcard-foot.two { display: flex; gap: var(--s3); }
  .pcard-foot.two a { flex: 1 1 0; min-width: 0; }
  .pcard-foot.two a + a {
    margin-top: 0;
    padding-top: 0;
    padding-left: var(--s3);
    border-top: 0;
    border-left: 1px solid var(--line);
  }
}
.pcard:hover .pcard-foot { background: var(--ember-wash); }

/* yan yana buton satırı */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s1); list-style: none; margin: 0; padding: 0; }
.chips li {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .06em;
  color: var(--slate);
  background: var(--tint);
  border-radius: var(--rd);
  padding: 3px 8px;
}

/* ---------- 14. Yetenek grupları ---------- */
.skills { display: grid; gap: var(--s3); grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; }
@media (min-width: 620px) { .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .skills { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.skill {
  display: flex;
  gap: var(--s3);
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--rd-lg);
  background: var(--paper);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.skill:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.skill:hover .ibox { color: var(--ember-ink); }
.skill h4 { margin-bottom: 6px; }
.skill p { font-family: var(--mono); font-size: .8125rem; line-height: 1.6; color: var(--stone-ink); }

/* ---------- 15. Deneyim / zaman çizelgesi ---------- */
.track { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.track > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s1) var(--s5);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 760px) {
  .track > li { grid-template-columns: 12rem minmax(0, 1fr); }
}
.track .who { display: grid; gap: 4px; align-content: start; }
.track .org { font-weight: 600; color: var(--slate); font-size: 1.0625rem; letter-spacing: -.015em; }
.track .kind {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ember-ink);
}
.track .what { max-width: 62ch; }
.track .what p { font-size: .9375rem; }
.track .what .ttl { font-weight: 600; color: var(--slate); display: block; margin-bottom: 4px; }

/* ---------- 16. Entegrasyon listesi ---------- */
.integr { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 760px) { .integr { grid-template-columns: 1fr 1fr; column-gap: var(--s5); } }
.integr li {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line);
}
.integr .ibox-sm { color: var(--slate); margin-top: 2px; }
.integr b { display: block; font-weight: 600; color: var(--slate); font-size: .9375rem; }
.integr span { display: block; font-size: .875rem; color: var(--stone-ink); line-height: 1.5; }

/* ---------- 17. İş birliği listesi ---------- */
.offers { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.offers li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s1) var(--s5);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 760px) {
  .offers li { grid-template-columns: 2.75rem minmax(0, 1fr); }
}

.offer-h { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s1); }
.offer-h .ibox-sm { color: var(--ember-ink); }
.offers .n { font-family: var(--mono); font-size: .75rem; letter-spacing: .12em; color: var(--ember-ink); }
.offers h3 { letter-spacing: -.02em; }
.offers p { font-size: .9375rem; color: var(--stone-ink); max-width: 68ch; }

/* ---------- 18. İletişim ---------- */
.cbig {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: clamp(1.25rem, .95rem + 1.5vw, 2rem);
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--slate);
  text-decoration: none;
  border-bottom: 2px solid var(--ember);
  padding-bottom: var(--s1);
  transition: color .18s var(--ease);
  word-break: break-word;
}
.cbig .ico { width: 26px; height: 26px; color: var(--ember-ink); flex: none; }
.cbig:hover { color: var(--ember-ink); }

.clist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.clist li { border-bottom: 1px solid var(--line); }
.clist a, .clist .static {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding-block: var(--s3);
  text-decoration: none;
  color: var(--ink);
  transition: color .18s var(--ease), padding-inline .18s var(--ease), background .18s var(--ease);
}
.clist a:hover { color: var(--ember-ink); background: var(--ember-wash); padding-inline: var(--s2); }
.clist .ibox-sm { color: var(--slate); }
.clist a:hover .ibox-sm { color: var(--ember-ink); }
.clist .lb { display: grid; gap: 2px; min-width: 0; }
.clist .lb span {
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stone-ink);
}
.clist .lb b { font-weight: 550; font-size: .9375rem; color: var(--slate); overflow-wrap: anywhere; }
.clist .go { margin-left: auto; color: var(--line-strong); }
.clist a:hover .go { color: var(--ember-ink); }

/* ---------- 19. Footer (tek zemin, hairline ayraç) ---------- */
.ftr {
  background: var(--paper);
  color: var(--stone-ink);
  border-top: 1px solid var(--line);
  padding-block: var(--s6) var(--s5);
}
.ftr a { color: var(--ink); text-decoration: none; transition: color .18s var(--ease); }
.ftr a:hover { color: var(--ember-ink); }

/* mobil (< 800px): tam ortalı, kolonlar alt alta */
.ftr-in {
  display: grid;
  gap: var(--s5);
  text-align: center;
  justify-items: center;
}
.ftr-brand { display: grid; gap: var(--s2); justify-items: center; max-width: 42ch; }
.ftr-brand .bmark { display: flex; align-items: center; gap: 10px; }
.ftr-brand .bmark svg { width: 26px; height: 26px; flex: none; object-fit: contain; }
.ftr-brand .bname { font-size: 1.0625rem; font-weight: 650; letter-spacing: -.025em; color: var(--slate); }
.ftr-brand p { font-size: .9375rem; line-height: 1.6; }

.ftr-cols { display: grid; gap: var(--s5); justify-items: center; }
.ftr-col { display: grid; gap: 10px; justify-items: center; align-content: start; }
.ftr-col h4 {
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--stone-ink);
  font-weight: 500;
  margin-bottom: 2px;
}
.ftr-col a { font-size: .9375rem; }

.ftr-social { display: flex; gap: var(--s2); }
.ftr-social a {
  display: grid;
  place-items: center;
  width: var(--s5);
  height: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--rd);
  color: var(--ink);
  transition: border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);
}
.ftr-social a:hover { border-color: var(--ember); color: var(--ember-ink); background: var(--ember-wash); }
.ftr-social .ico { width: 20px; height: 20px; }

.ftr-base {
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
  display: grid;
  gap: var(--s1);
  justify-items: center;
  text-align: center;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .06em;
  color: var(--stone-ink);
}

/* masaüstü (≥ 800px): satır düzeni, kolonlar sağ kenara dayalı */
@media (min-width: 800px) {
  .ftr { padding-block: var(--s7) var(--s5); }
  .ftr-in {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    text-align: left;
    justify-items: start;
    gap: var(--s6);
  }
  .ftr-brand { justify-items: start; }
  .ftr-cols {
    grid-auto-flow: column;
    grid-auto-columns: max-content; /* minmax(140px,…) DEĞİL — son kolon sağ kenara dayanmalı */
    justify-items: start;
    justify-self: end;
    gap: var(--s6);
  }
  .ftr-col { justify-items: start; }
  .ftr-base {
    grid-auto-flow: column;
    justify-content: space-between;
    justify-items: start;
    text-align: left;
  }
}

/* ---------- 20. Yardımcılar ---------- */
.mt1 { margin-top: var(--s1); }
.mt2 { margin-top: var(--s2); }
.mt3 { margin-top: var(--s3); }
.mt4 { margin-top: var(--s4); }
.mt5 { margin-top: var(--s5); }
.mt6 { margin-top: var(--s6); }
.mb3 { margin-bottom: var(--s3); }
.mb4 { margin-bottom: var(--s4); }
.mb5 { margin-bottom: var(--s5); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.self-end { align-self: end; }
.narrow { max-width: 52ch; }
.tracked { letter-spacing: .12em; }
@media (min-width: 760px) { .right-end { text-align: right; } }