/* ==========================================================================
   MÜHENDİSLİK ARŞİVİ — tasarım sistemi
   --------------------------------------------------------------------------
   Yumuşak nötr zemin · grafit metin · sıcak bakır vurgu.
   Editoryal grid, ölçülü teknik detaylar, numaralandırılmış dosyalar.

   Dış kaynak yoktur: yazı tipleri sistem yığınından gelir, doku CSS ile
   üretilir. Site internet bağlantısı olmadan da tam görünümüyle çalışır.

   İçindekiler
     01  Yazı tipi kancası (yerel dosya eklemek isterseniz)
     02  Değişkenler — aydınlık
     03  Değişkenler — karanlık
     04  Sıfırlama ve temel
     05  Kâğıt dokusu ve blueprint zemin
     06  Tipografi ölçeği
     07  Yerleşim (shell, band, sechead)
     08  Başlık ve gezinme
     09  Açılış (hero)
     10  Ortak bileşenler (btn, tag, dashlist, prose, todo…)
     11  Proje kartları ve süzgeç
     12  Kronoloji
     13  Uzmanlık
     14  Proje dosyası (dossier)
     15  Teknoloji indeksi
     16  Hakkımda
     17  İletişim
     18  Altbilgi
     19  Hareket ve erişilebilirlik
     20  Yazdırma
   ========================================================================== */


/* 01 — YAZI TİPİ KANCASI ================================================== */
/*
   Varsayılan olarak sistem yazı tipleri kullanılır; hiçbir dış istek yapılmaz.
   Instrument Serif / IBM Plex Mono gibi yazı tiplerini yerelleştirmek isterseniz
   dosyaları public/assets/fonts/ altına koyun ve aşağıyı açın:

   @font-face {
     font-family: "Archive Display";
     src: url("../fonts/InstrumentSerif-Regular.woff2") format("woff2");
     font-weight: 400; font-style: normal; font-display: swap;
   }
   @font-face {
     font-family: "Archive Mono";
     src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
     font-weight: 400; font-style: normal; font-display: swap;
   }

   Ardından --font-display / --font-mono değişkenlerinin başına ekleyin.
*/


/* 02 — DEĞİŞKENLER · AYDINLIK ============================================= */
:root {
  /* Kâğıt ve mürekkep */
  --paper:        #F7F6F2;
  --paper-2:      #EFEEE9;
  --paper-3:      #E5E2DA;
  --paper-card:   #FCFBF8;
  --ink:          #17191A;
  --ink-2:        #303335;
  --ink-3:        #555B5E;
  /* --ink-mute en küçük metinlerde (mono etiketler) kullanılır; kâğıt üzerinde
     WCAG AA normal metin eşiğini (4.5:1) geçecek şekilde seçildi. */
  --ink-mute:     #687074;

  /* Oksitlenmiş bakır + koyu bordo */
  --copper:       #984126;
  --copper-deep:  #763019;
  --copper-soft:  rgba(152, 65, 38, 0.09);
  --bordo:        #6B2733;

  /* Teknik çizim */
  --rule:         rgba(23, 25, 26, 0.14);
  --rule-soft:    rgba(23, 25, 26, 0.07);
  --blueprint:    rgba(23, 25, 26, 0.025);
  --grain:        rgba(23, 25, 26, 0.012);

  /* Durum */
  --ok:           #3F5D3A;
  --ok-bg:        rgba(63, 93, 58, 0.10);
  --wip:          #8A6A1F;
  --wip-bg:       rgba(138, 106, 31, 0.12);

  /* Tipografi */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
                  "Times New Roman", Georgia, serif;
  --font-body:    "Segoe UI Variable Text", "Segoe UI", -apple-system,
                  BlinkMacSystemFont, Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Cascadia Mono", Consolas, "SF Mono", "IBM Plex Mono",
                  "Liberation Mono", ui-monospace, monospace;

  /* Ritim */
  --shell:        80rem;
  --shell-pad:    clamp(1.25rem, 5vw, 3.5rem);
  --band-pad:     clamp(3.5rem, 9vw, 7.5rem);
  --gap:          clamp(1.5rem, 3vw, 2.75rem);

  --radius:       8px;
  --tr:           260ms cubic-bezier(0.22, 0.61, 0.36, 1);

  color-scheme: light;
}


/* 03 — DEĞİŞKENLER · KARANLIK ============================================= */
/*
   Karanlık tema arşiv kimliğini korur: kâğıt yerine koyu karton, mürekkep
   yerine soluk kireç, bakır aksan bir ton açılarak kontrastı sağlar.
*/
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #121416;
    --paper-2:    #191C1E;
    --paper-3:    #222629;
    --paper-card: #181B1D;
    --ink:        #F2EFE9;
    --ink-2:      #D5D2CB;
    --ink-3:      #AFB5B7;
    --ink-mute:   #929A9E;

    --copper:      #E18A5B;
    --copper-deep: #F0A579;
    --copper-soft: rgba(225, 138, 91, 0.13);
    --bordo:       #C2707C;

    --rule:      rgba(237, 230, 216, 0.18);
    --rule-soft: rgba(237, 230, 216, 0.09);
    --blueprint: rgba(237, 230, 216, 0.045);
    --grain:     rgba(237, 230, 216, 0.022);

    --ok:    #93BE8A;
    --ok-bg: rgba(147, 190, 138, 0.12);
    --wip:   #D9B75F;
    --wip-bg: rgba(217, 183, 95, 0.12);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper:      #121416;
  --paper-2:    #191C1E;
  --paper-3:    #222629;
  --paper-card: #181B1D;
  --ink:        #F2EFE9;
  --ink-2:      #D5D2CB;
  --ink-3:      #AFB5B7;
  --ink-mute:   #929A9E;

  --copper:      #E18A5B;
  --copper-deep: #F0A579;
  --copper-soft: rgba(225, 138, 91, 0.13);
  --bordo:       #C2707C;

  --rule:      rgba(237, 230, 216, 0.18);
  --rule-soft: rgba(237, 230, 216, 0.09);
  --blueprint: rgba(237, 230, 216, 0.045);
  --grain:     rgba(237, 230, 216, 0.022);

  --ok:     #93BE8A;
  --ok-bg:  rgba(147, 190, 138, 0.12);
  --wip:    #D9B75F;
  --wip-bg: rgba(217, 183, 95, 0.12);

  color-scheme: dark;
}


/* 04 — SIFIRLAMA VE TEMEL ================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.68;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.14; }
p, ul, ol, dl, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; height: auto; display: block; }

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

.mono {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  font-weight: 500;
}

code.mono { text-transform: none; letter-spacing: 0.02em; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--ink);
  color: var(--paper);
  padding: 0.85rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.skip:focus { left: 0; }

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


/* 05 — KÂĞIT DOKUSU VE BLUEPRINT ZEMİN ==================================== */
/*
   İki katman: (1) çok ince bir kâğıt gren dokusu, (2) teknik çizim ızgarası.
   İkisi de CSS gradyanıyla üretilir; hiçbir görsel dosyası indirilmez.
*/
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Kâğıt greni */
body::before {
  background-image:
    repeating-linear-gradient(0deg,   var(--grain) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg,  var(--grain) 0 1px, transparent 1px 4px);
  opacity: 0.2;
}

/* Blueprint ızgarası — 96px ana, 24px ince */
body::after {
  background-image:
    linear-gradient(to right,  var(--blueprint) 1px, transparent 1px),
    linear-gradient(to bottom, var(--blueprint) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 25%, transparent 78%);
  opacity: 0.55;
}

.masthead, .main, .footer { position: relative; z-index: 1; }


/* 06 — TİPOGRAFİ ÖLÇEĞİ =================================================== */
.pagehead__title,
.hero__title,
.sechead__title,
.domain__title,
.dossier__title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.012em;
}

.prose p + p { margin-top: 1.15em; }
.prose { color: var(--ink-2); max-width: 62ch; }
.prose--lead { font-size: 1.08em; color: var(--ink-2); }
.prose strong { color: var(--ink); font-weight: 600; }


/* 07 — YERLEŞİM =========================================================== */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}

.band { padding-block: var(--band-pad); }
.band--tint { background: color-mix(in srgb, var(--paper-2) 72%, var(--paper)); border-block: 1px solid var(--rule-soft); }

.pagehead {
  padding-top: clamp(3rem, 8vw, 6rem);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--rule);
}
.pagehead--center { text-align: center; }

.pagehead__eyebrow { color: var(--copper); margin-bottom: 1.1rem; }
.pagehead__title { font-size: clamp(2.3rem, 6vw, 4.1rem); margin-bottom: 1.1rem; }
.pagehead__lead { max-width: 60ch; color: var(--ink-3); font-size: 1.06em; }
.pagehead--center .pagehead__lead { margin-inline: auto; }

.sechead { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.sechead__eyebrow { color: var(--copper); margin-bottom: 0.85rem; }
.sechead__title { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
.sechead__lead { max-width: 58ch; color: var(--ink-3); margin-top: 0.85rem; }

.sechead--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.sechead__more {
  color: var(--copper);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color var(--tr), transform var(--tr);
  white-space: nowrap;
}
.sechead__more:hover { color: var(--copper-deep); transform: translateX(3px); }


/* 08 — BAŞLIK VE GEZİNME ================================================== */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 93%, transparent);
  backdrop-filter: saturate(130%) blur(14px);
  -webkit-backdrop-filter: saturate(130%) blur(14px);
}
@supports not (backdrop-filter: blur(1px)) {
  .masthead { background: var(--paper); }
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.9rem;
}

.masthead__rule {
  height: 1px;
  background: var(--rule);
}

.brand { display: inline-flex; align-items: center; gap: 0.8rem; }
.brand__mark {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--paper-card);
  background: var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.04em;
}
.brand__text { display: grid; line-height: 1.25; }
.brand__name { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
.brand__role { color: var(--ink-mute); font-size: 0.62rem; }

.nav { display: flex; align-items: center; gap: 1.5rem; }
.nav__list { display: flex; align-items: center; gap: clamp(0.9rem, 1.7vw, 1.6rem); }

.nav__link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding-block: 0.35rem;
  position: relative;
  color: var(--ink-3);
  transition: color var(--tr);
}
.nav__no { display: none; }
.nav__label { font-size: 0.94rem; }
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tr);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--ink); }
.nav__link.is-active .nav__no { color: var(--copper); }

.themetoggle {
  appearance: none;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-3);
  width: 2.3rem; height: 2.3rem;
  border-radius: var(--radius);
  display: grid; place-items: center;
  cursor: pointer;
  transition: color var(--tr), border-color var(--tr);
}
.themetoggle:hover { color: var(--copper); border-color: var(--copper); }
.themetoggle__moon { display: none; }
:root[data-theme="dark"] .themetoggle__sun { display: none; }
:root[data-theme="dark"] .themetoggle__moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .themetoggle__sun { display: none; }
  :root:not([data-theme="light"]) .themetoggle__moon { display: block; }
}

.burger { display: none; }


/* 09 — AÇILIŞ ============================================================= */
.hero {
  position: relative;
  padding-top: clamp(4rem, 9vw, 7.5rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
}

.hero__grid {
  position: absolute;
  inset: 0;
  color: var(--rule);
  pointer-events: none;
}
.hero__lines { width: 100%; height: 100%; }

.draw__l, .draw__c {
  stroke-dasharray: var(--len, 1400);
  stroke-dashoffset: var(--len, 1400);
  animation: draw 2.2s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.draw--fine .draw__c { --len: 180; animation-delay: 0.5s; }
.draw--fine .draw__l { animation-delay: 0.7s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.hero__inner { position: relative; }

.hero__eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem;
  color: var(--ink-mute);
  margin-bottom: 1.6rem;
}
.hero__stamp {
  border: 1px solid var(--copper);
  color: var(--copper);
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  letter-spacing: 0.1em;
  background: var(--copper-soft);
}
/* Damga vurulma etkisi. Ölçek bilerek küçük tutuldu: daha büyük bir değer
   dar ekranlarda kutuyu geçici olarak görüntü alanının dışına taşırıyor. */
@keyframes stamp {
  from { opacity: 0; transform: rotate(-6deg) scale(1.14); }
  to   { opacity: 1; transform: rotate(-1.2deg) scale(1); }
}

.hero__title { display: grid; gap: 0.12em; margin-bottom: 1.55rem; max-width: 18ch; }
.hero__l1 {
  font-size: clamp(3rem, 8vw, 6.7rem);
  letter-spacing: -0.035em;
}
.hero__l2 {
  font-size: clamp(1.75rem, 4vw, 3.25rem);
  color: var(--copper);
  letter-spacing: -0.015em;
}

.hero__tagline {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 600;
  line-height: 1.5;
  max-width: 48ch;
  color: var(--ink-2);
  margin-bottom: 1rem;
}

.hero__intro { max-width: 64ch; color: var(--ink-3); margin-bottom: 2.2rem; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.hero__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: calc(var(--radius) + 2px);
  overflow: hidden;
}
.hero__fact { background: var(--paper); padding: 1.05rem 1.2rem; }
.hero__fact dt { color: var(--ink-mute); font-size: 0.62rem; margin-bottom: 0.4rem; }
.hero__fact dd {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
}

.principles__lead {
  max-width: 62ch;
  color: var(--ink-3);
  font-size: 1.03rem;
  margin-top: -1.25rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.principle {
  position: relative;
  min-height: 15rem;
  padding: clamp(1.35rem, 3vw, 1.8rem);
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: calc(var(--radius) + 2px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.principle__no {
  color: var(--copper);
  margin-bottom: auto;
}

.principle__title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  margin-bottom: 0.75rem;
}

.principle__body {
  color: var(--ink-3);
  font-size: 0.94rem;
  line-height: 1.62;
}


/* 10 — ORTAK BİLEŞENLER =================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.82rem 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  transition: background var(--tr), color var(--tr), border-color var(--tr), transform var(--tr);
}
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--copper); border-color: var(--copper); transform: translateY(-2px); }
.btn--ghost { border-color: var(--rule); color: var(--ink-2); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-2px); }

.taglist { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tag {
  border: 1px solid var(--rule);
  color: var(--ink-3);
  padding: 0.3rem 0.6rem;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  border-radius: var(--radius);
  background: var(--paper-card);
}
.taglist--lg .tag { font-size: 0.68rem; padding: 0.38rem 0.7rem; }

.status {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius);
  white-space: nowrap;
}
.status--done { color: var(--ok); background: var(--ok-bg); }
.status--wip  { color: var(--wip); background: var(--wip-bg); }
.status--neutral { color: var(--ink-3); background: var(--paper-3); }

.dashlist { display: grid; gap: 0.6rem; color: var(--ink-2); }
.dashlist li { position: relative; padding-left: 1.35rem; }
.dashlist li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.78em;
  width: 0.7rem; height: 1px;
  background: var(--copper);
}
.dashlist--strong li { color: var(--ink); }

.linklist { display: grid; gap: 0.5rem; }
.linklist a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  color: var(--ink-2);
  border-bottom: 1px solid transparent;
  transition: color var(--tr), border-color var(--tr);
}
.linklist a:hover { color: var(--copper); border-color: currentColor; }
.linklist__no { color: var(--ink-mute); }

.blocklabel { color: var(--copper); margin-bottom: 0.7rem; font-weight: 500; }

.pullquote {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  line-height: 1.5;
  color: var(--ink);
  border-left: 2px solid var(--copper);
  padding-left: clamp(1rem, 2vw, 1.5rem);
  max-width: 52ch;
}

.placeholder {
  border: 1px dashed var(--rule);
  padding: 1.5rem;
  color: var(--ink-mute);
  font-size: 0.7rem;
  line-height: 1.9;
  letter-spacing: 0.05em;
  text-transform: none;
  border-radius: var(--radius);
}

.confid {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--bordo);
  background: var(--paper-card);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  border-radius: var(--radius);
  color: var(--ink-3);
  font-size: 0.94em;
}
.confid__title { color: var(--bordo); margin-bottom: 0.6rem; }
.confid--wide { margin-top: 3rem; }

.todo {
  display: block;
  margin-top: 1.5rem;
  border: 1px dashed var(--wip);
  background: var(--wip-bg);
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
}
.todo__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--wip);
  margin-right: 0.7rem;
}
.todo__note { color: var(--ink-2); font-size: 0.9rem; }


/* 11 — PROJE KARTLARI VE SÜZGEÇ ========================================== */
.filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.4rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--rule);
}
.filterbar__label { color: var(--ink-mute); }
.filterbar__set { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.filterbar__count { color: var(--ink-mute); margin-top: 1rem; min-height: 1.2em; }

.chip {
  appearance: none;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-3);
  padding: 0.42rem 0.75rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.66rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: color var(--tr), border-color var(--tr), background var(--tr);
}
.chip:hover { color: var(--ink); border-color: var(--ink-3); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip__n { opacity: 0.55; font-size: 0.9em; }

.filegrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
  background: transparent;
  border: 0;
  margin-top: 2rem;
}

.filecard {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: calc(var(--radius) + 2px);
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(23, 25, 26, 0.035);
  transition: border-color var(--tr), transform var(--tr), box-shadow var(--tr);
}
.filecard:hover {
  border-color: color-mix(in srgb, var(--copper) 48%, var(--rule));
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgba(23, 25, 26, 0.075);
}
.filecard[hidden] { display: none; }

.filecard__link {
  display: grid;
  gap: 0.6rem;
  padding: clamp(1.35rem, 3vw, 1.9rem);
  height: 100%;
  align-content: start;
  position: relative;
}

.filecard__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule-soft);
}
.filecard__no {
  font-size: 1.55rem;
  letter-spacing: 0.04em;
  color: var(--copper);
  opacity: 0.4;
  transition: opacity var(--tr);
}
.filecard:hover .filecard__no { opacity: 1; }
.filecard__year { color: var(--ink-mute); }

.filecard__title {
  font-family: var(--font-display);
  font-size: 1.32rem;
  line-height: 1.25;
  margin-top: 0.3rem;
}
.filecard__sub { color: var(--ink-3); font-size: 0.93rem; line-height: 1.55; }
.filecard__org { color: var(--ink-mute); font-size: 0.62rem; }

.filecard__foot {
  display: grid;
  gap: 0.7rem;
  margin-top: 0.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule-soft);
}

.filecard__cta {
  color: var(--copper);
  opacity: 1;
  transform: none;
  transition: opacity var(--tr), transform var(--tr);
  font-size: 0.62rem;
}
.filecard:hover .filecard__cta,
.filecard__link:focus-visible .filecard__cta { opacity: 1; transform: translateX(0); }

.empty { text-align: center; padding: 4rem 1rem; color: var(--ink-mute); }


/* 12 — KRONOLOJİ ========================================================= */
.progressbar {
  position: sticky;
  top: 4.9rem;
  z-index: 40;
  height: 2px;
  background: var(--rule-soft);
}
.progressbar__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--copper);
  transition: width 90ms linear;
}

.timeline { display: grid; gap: clamp(3rem, 7vw, 5.5rem); }

.tl {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  position: relative;
}

.tl__rail { position: relative; text-align: right; padding-top: 0.35rem; }
.tl__rail::before {
  content: "";
  position: absolute;
  right: -1px;
  top: 1.6rem;
  bottom: calc(-1 * clamp(3rem, 7vw, 5.5rem) - 0.5rem);
  width: 1px;
  background: var(--rule);
}
.tl:last-child .tl__rail::before { display: none; }

.tl__dot {
  position: absolute;
  right: -4px;
  top: 0.55rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--ink-3);
}
.tl--current .tl__dot { background: var(--copper); border-color: var(--copper); }

.tl__year {
  font-size: 1.4rem;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
  padding-right: 1.2rem;
}
.tl--current .tl__year { color: var(--copper); }

.tl__body { padding-bottom: 0.5rem; min-width: 0; }

.tl__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  align-items: center;
  color: var(--ink-mute);
  margin-bottom: 0.9rem;
}
.tl__no { color: var(--copper); }
.tl__kind {
  border: 1px solid var(--rule);
  padding: 0.2rem 0.5rem;
  font-size: 0.6rem;
}
.tl__live { color: var(--ok); background: var(--ok-bg); padding: 0.2rem 0.5rem; font-size: 0.6rem; }

.tl__org {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.15rem);
  line-height: 1.18;
}
.tl__role { color: var(--copper); font-size: 0.98rem; margin-top: 0.25rem; }
.tl__lead {
  font-family: var(--font-display);
  font-size: 1.12rem;
  color: var(--ink-2);
  margin-top: 0.9rem;
  max-width: 48ch;
}

.tl__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--gap);
  margin-top: 1.9rem;
}
.tl__ch { color: var(--copper); margin-bottom: 0.7rem; font-weight: 500; }
.tl__tech, .tl__gain, .tl__rel { margin-top: 1.9rem; }
.tl__gain p { color: var(--ink-2); max-width: 62ch; }


/* 13 — UZMANLIK ========================================================== */
.jumpnav { margin-top: 2.4rem; }
.jumpnav ul { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.jumpnav a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  border: 1px solid var(--rule);
  padding: 0.42rem 0.75rem;
  border-radius: var(--radius);
  color: var(--ink-3);
  font-size: 0.63rem;
  transition: color var(--tr), border-color var(--tr);
}
.jumpnav a:hover { color: var(--copper); border-color: var(--copper); }
.jumpnav__no { color: var(--copper); }

.domain { scroll-margin-top: 6rem; }

.domain__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 3vw, 2.2rem);
  align-items: start;
  padding-bottom: 1.8rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}
/* Dosya numarası anlamlı bir içeriktir (dekoratif değil), bu yüzden büyük
   metin için gereken 3:1 kontrastı sağlayacak kadar koyu tutuldu. */
.domain__no {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  color: var(--copper);
  opacity: 0.72;
  line-height: 1;
  letter-spacing: 0.02em;
}
.domain__title { font-size: clamp(1.6rem, 3.6vw, 2.5rem); }
.domain__lead {
  font-family: var(--font-display);
  font-size: 1.14rem;
  color: var(--ink-2);
  margin-top: 0.7rem;
  max-width: 46ch;
}

.domain__body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr));
  gap: clamp(1.8rem, 4vw, 3rem);
  align-items: start;
}
.domain__block p { color: var(--ink-2); max-width: 60ch; }
.domain__block--lesson, .domain__block--project { grid-column: 1 / -1; }

.projlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--copper);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
  transition: border-color var(--tr), gap var(--tr);
}
.projlink:hover { border-color: var(--copper); gap: 0.85rem; }

.domindex { border-top: 1px solid var(--rule); }
.domindex__item { border-bottom: 1px solid var(--rule); }
.domindex__link {
  display: grid;
  grid-template-columns: 3rem minmax(11rem, 18rem) 1fr;
  gap: 1rem 1.6rem;
  align-items: baseline;
  padding: 1.15rem 0.4rem;
  transition: background var(--tr), padding-left var(--tr);
}
.domindex__link:hover { background: var(--paper-card); padding-left: 1rem; }
.domindex__no { color: var(--copper); }
.domindex__title { font-family: var(--font-display); font-size: 1.15rem; }
.domindex__lead { color: var(--ink-mute); font-size: 0.92rem; }


/* 14 — PROJE DOSYASI ===================================================== */
.dossier__head {
  padding-top: clamp(2.5rem, 7vw, 5rem);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--rule);
  position: relative;
}

.crumbs { margin-bottom: 2rem; }
.crumbs a { color: var(--ink-mute); transition: color var(--tr); }
.crumbs a:hover { color: var(--copper); }

.dossier__stamp {
  display: inline-grid;
  justify-items: center;
  gap: 0.15rem;
  border: 1.5px solid var(--copper);
  color: var(--copper);
  padding: 0.55rem 0.9rem;
  transform: rotate(-1.6deg);
  margin-bottom: 1.5rem;
  animation: stamp 620ms cubic-bezier(0.34, 1.4, 0.64, 1) 200ms both;
}
.dossier__stampno { font-size: 1.5rem; letter-spacing: 0.1em; line-height: 1; }
.dossier__stamptxt { font-size: 0.55rem; letter-spacing: 0.24em; }

.dossier__title { font-size: clamp(2rem, 5.2vw, 3.5rem); max-width: 20ch; }
.dossier__sub {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  color: var(--ink-3);
  margin-top: 0.9rem;
  max-width: 46ch;
}

.dossier__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-block: 2.2rem 1.4rem;
}
.dossier__meta > div { background: var(--paper); padding: 0.9rem 1.05rem; }
.dossier__meta dt { color: var(--ink-mute); font-size: 0.6rem; margin-bottom: 0.35rem; }
.dossier__meta dd {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.88rem;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.45;
}

.dossier__body { display: grid; gap: clamp(2.5rem, 5vw, 4rem); max-width: 60rem; }

.dsec__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.35rem;
}
.dsec__no { color: var(--copper); font-size: 0.68rem; }
.dsec p { color: var(--ink-2); max-width: 66ch; }
.dsec__lead { font-size: 1.06em; }

.techdetails {
  border: 1px solid var(--rule);
  border-radius: calc(var(--radius) + 2px);
  background: var(--paper-card);
  overflow: hidden;
}

.techdetails__summary {
  cursor: pointer;
  list-style: none;
  padding: clamp(1.2rem, 3vw, 1.6rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.55rem);
}

.techdetails__summary::-webkit-details-marker { display: none; }
.techdetails__summary::after { content: "+"; color: var(--copper); font-family: var(--font-mono); }
.techdetails[open] .techdetails__summary::after { content: "−"; }
.techdetails__hint { color: var(--ink-mute); margin-left: auto; font-size: 0.58rem; }

.techdetails__body {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  padding: 0 clamp(1.2rem, 3vw, 1.6rem) clamp(1.4rem, 3vw, 2rem);
  border-top: 1px solid var(--rule-soft);
}

.techdetails__body .dsec { padding-top: clamp(1.4rem, 3vw, 2rem); }
.techdetails__body .dsec__title { font-size: 1.2rem; }

.arch { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.arch__row {
  display: grid;
  grid-template-columns: 3rem minmax(8rem, 12rem) 1fr;
  gap: 0.6rem 1.2rem;
  background: var(--paper-card);
  padding: 1rem 1.15rem;
  align-items: baseline;
  position: relative;
}
.arch__idx { color: var(--copper); }
.arch__layer { font-weight: 600; color: var(--ink); font-size: 0.95rem; }
.arch__detail { color: var(--ink-3); font-size: 0.92rem; line-height: 1.6; }

/* Katmanlar arası bağlantı çizgisi */
.arch__row:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  bottom: -1px;
  width: 1px;
  height: 1px;
  background: var(--copper);
  box-shadow: 0 0 0 2px var(--copper-soft);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.card { background: var(--paper-card); padding: clamp(1.2rem, 2.6vw, 1.65rem); }
.card__title {
  font-family: var(--font-display);
  font-size: 1.14rem;
  line-height: 1.3;
  margin-bottom: 0.65rem;
  color: var(--ink);
}
.card__body { color: var(--ink-3); font-size: 0.94rem; line-height: 1.68; }
.card--challenge { border-left: 2px solid var(--bordo); }

.lessons { display: grid; gap: 1rem; }
.lessons li {
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--ink-2);
  border-left: 2px solid var(--copper);
  padding-left: 1.1rem;
  max-width: 58ch;
}

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--gap);
}
.shot img { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-card); }
.shot figcaption { color: var(--ink-mute); margin-top: 0.6rem; font-size: 0.6rem; text-transform: none; letter-spacing: 0.04em; }

.dnav { border-top: 1px solid var(--rule); background: var(--paper-2); }
.dnav__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  padding-inline: 0;
}
.dnav__link {
  display: grid;
  gap: 0.45rem;
  padding: clamp(1.6rem, 4vw, 2.4rem) var(--shell-pad);
  transition: background var(--tr);
}
.dnav__link:hover { background: var(--paper-card); }
.dnav__link--next { text-align: right; border-left: 1px solid var(--rule); }
.dnav__cap { color: var(--copper); }
.dnav__title { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink-2); }


/* 15 — TEKNOLOJİ İNDEKSİ ================================================= */
.techgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: clamp(1.8rem, 4vw, 3rem);
}
.techcat__title {
  font-family: var(--font-display);
  font-size: 1.22rem;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1rem;
}
.techcat__no { color: var(--copper); font-size: 0.66rem; }

.techline { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.techline__step {
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) 1fr;
  gap: 1rem 2rem;
  background: var(--paper);
  padding: clamp(1.3rem, 3vw, 1.9rem);
}
.techline__year { color: var(--copper); font-size: 0.74rem; }
.techline__label { font-family: var(--font-display); font-size: 1.22rem; margin-bottom: 0.8rem; }
.techline__note { color: var(--ink-mute); font-size: 0.9rem; margin-top: 0.85rem; }


/* 16 — HAKKIMDA ========================================================== */
.manifesto {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 2rem);
  line-height: 1.44;
  color: var(--ink);
  border-left: 2px solid var(--copper);
  padding-left: clamp(1rem, 2.5vw, 1.8rem);
  max-width: 44ch;
  margin-top: 1.6rem;
}

.about {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.about__main { display: grid; gap: clamp(2.5rem, 5vw, 3.75rem); }

.asec__title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.8vw, 1.85rem);
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  margin-bottom: 1.1rem;
}
.asec__no { color: var(--copper); font-size: 0.68rem; }

.about__side { display: grid; gap: 1.6rem; position: sticky; top: 6.5rem; }

.sidecard {
  border: 1px solid var(--rule);
  background: var(--paper-card);
  padding: clamp(1.2rem, 3vw, 1.6rem);
  border-radius: calc(var(--radius) + 2px);
}
.sidecard__title { color: var(--copper); margin-bottom: 1rem; }
.sidecard__dl { display: grid; gap: 0.85rem; }
.sidecard__dl dt { color: var(--ink-mute); font-size: 0.6rem; margin-bottom: 0.2rem; }
.sidecard__dl dd { margin: 0; color: var(--ink-2); font-size: 0.92rem; line-height: 1.5; }

.certs { display: grid; gap: 1.2rem; }
.cert__date { color: var(--copper); font-size: 0.6rem; margin-bottom: 0.25rem; }
.cert__title { font-weight: 600; color: var(--ink); font-size: 0.95rem; }
.cert__body { color: var(--ink-mute); font-size: 0.88rem; line-height: 1.6; margin-top: 0.2rem; }


/* 17 — İLETİŞİM ========================================================== */
.channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.5rem);
  background: transparent;
  border: 0;
}
.channel {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: calc(var(--radius) + 2px);
  padding: clamp(1.3rem, 3vw, 1.8rem);
}
.channel--todo { background: var(--wip-bg); }
.channel__label { color: var(--copper); margin-bottom: 0.7rem; }
.channel__value {
  font-family: var(--font-display);
  font-size: 1.14rem;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  display: inline-block;
  word-break: break-word;
  transition: color var(--tr), border-color var(--tr);
}
a.channel__value:hover { color: var(--copper); border-color: var(--copper); }
.channel__value--plain { border-bottom: 0; }
.channel__note { color: var(--ink-mute); font-size: 0.85rem; margin-top: 0.55rem; }

.cvbox { margin-top: 2.5rem; }
.cvbox__pending {
  display: inline-block;
  border: 1px dashed var(--rule);
  padding: 0.8rem 1.2rem;
  color: var(--ink-mute);
  border-radius: var(--radius);
}

.todolist { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.todorow {
  display: grid;
  grid-template-columns: 2.5rem minmax(9rem, 15rem) 1fr;
  gap: 0.5rem 1.4rem;
  background: var(--paper);
  padding: 1rem 1.2rem;
  align-items: baseline;
}
/* Grid çocuklarının varsayılan min-width:auto değeri, uzun kesintisiz
   metinlerde satırın daralmasını engelliyor — dar ekranda taşmanın nedeni bu. */
.todorow > * { min-width: 0; overflow-wrap: anywhere; }
.todorow__no { color: var(--copper); }
.todorow__scope { color: var(--ink-mute); font-size: 0.62rem; }
.todorow__note { color: var(--ink-2); font-size: 0.92rem; line-height: 1.6; }


/* 18 — ALTBİLGİ ========================================================== */
.footer {
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
  padding-block: clamp(2.5rem, 6vw, 4rem) 2rem;
  margin-top: clamp(3rem, 8vw, 6rem);
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--rule);
}
.footer__name { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: 0.02em; }
.footer__role { color: var(--copper); margin-top: 0.3rem; }
.footer__note { color: var(--ink-mute); font-size: 0.86rem; margin-top: 1rem; max-width: 40ch; line-height: 1.65; }

.footer__nav ul { display: grid; gap: 0.5rem; }
.footer__nav a { color: var(--ink-3); font-size: 0.92rem; transition: color var(--tr); }
.footer__nav a:hover { color: var(--copper); }
.footer__no { color: var(--ink-mute); margin-right: 0.6rem; font-size: 0.58rem; }

.footer__meta { display: grid; gap: 0.85rem; }
.footer__meta dt { color: var(--ink-mute); font-size: 0.58rem; margin-bottom: 0.2rem; }
.footer__meta dd {
  margin: 0;
  color: var(--ink-3);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: none;
}

.footer__legal { color: var(--ink-mute); margin-top: 1.6rem; font-size: 0.6rem; }


/* 19 — HAREKET VE ERİŞİLEBİLİRLİK ======================================== */
/* Girişte açılma bilinçli olarak "ilerlemeli iyileştirme" kurgusudur:
   .reveal blokları VARSAYILAN OLARAK GÖRÜNÜRDÜR. Gizleme yalnızca site.js
   <html> üzerine .has-reveal sınıfını eklediğinde devreye girer. Böylece
   betik yüklenmezse, hata verirse veya IntersectionObserver herhangi bir
   nedenle tetiklenmezse içerik görünmez kalmaz — animasyon içeriğin
   görünürlüğüne asla sahip olmaz. */
.reveal { transition: opacity 620ms var(--tr), transform 620ms var(--tr); }

.has-reveal .reveal { opacity: 0; transform: translateY(14px); }
.has-reveal .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .has-reveal .reveal { opacity: 1; transform: none; }
  .draw__l, .draw__c { stroke-dashoffset: 0; }
  .hero__stamp, .dossier__stamp { transform: rotate(-1.2deg); opacity: 1; }
}

@media (prefers-contrast: more) {
  :root { --rule: rgba(26, 23, 19, 0.42); --ink-3: #3D3830; --ink-mute: #4C463C; }
  :root[data-theme="dark"] { --rule: rgba(237, 230, 216, 0.42); --ink-3: #D3CBBB; --ink-mute: #BDB5A6; }
}


/* --- Duyarlı yerleşim ----------------------------------------------------
   Mobil, sonradan sıkıştırılmış bir masaüstü düzeni değil; kronoloji rayı,
   dosya ızgarası ve gezinme mobilde ayrıca ele alınmıştır.                */

@media (max-width: 62rem) {
  .about { grid-template-columns: 1fr; }
  .about__side { position: static; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .domindex__link { grid-template-columns: 2.5rem 1fr; }
  .domindex__lead { grid-column: 2; }
}

/* Gezinme kendi eşiğine sahiptir: yedi numaralı bağlantı + tema düğmesi
   yaklaşık 960px altında yatay taşmaya yol açıyor, bu yüzden katlanır menü
   diğer yerleşim kırılımlarından önce devreye girer. */
@media (max-width: 60rem) {
  .burger {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    appearance: none;
    background: transparent;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    color: var(--ink-2);
    padding: 0.5rem 0.8rem;
    cursor: pointer;
  }
  .burger__bars { display: grid; gap: 4px; }
  .burger__bars i {
    display: block;
    width: 15px; height: 1.5px;
    background: currentColor;
    transition: transform var(--tr);
  }
  .burger[aria-expanded="true"] .burger__bars i:first-child { transform: translateY(2.75px) rotate(45deg); }
  .burger[aria-expanded="true"] .burger__bars i:last-child  { transform: translateY(-2.75px) rotate(-45deg); }
  .burger__label { font-size: 0.6rem; }

  .nav {
    position: fixed;
    inset: 4.9rem 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 0.5rem var(--shell-pad) 1.5rem;
    max-height: calc(100dvh - 4.9rem);
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--tr), transform var(--tr), visibility var(--tr);
  }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { border-bottom: 1px solid var(--rule-soft); }
  .nav__link { padding-block: 0.95rem; gap: 0.75rem; }
  .nav__label { font-size: 1.05rem; }
  .nav__link::after { display: none; }

  .themetoggle { margin-top: 1.2rem; align-self: flex-start; }
}

/* Yerleşim kırılımı — çok sütunlu bloklar tek sütuna iner. */
@media (max-width: 48rem) {
  .principles { grid-template-columns: 1fr; }
  .principle { min-height: auto; }
  .principle__no { margin-bottom: 2.5rem; }

  .tl { grid-template-columns: 1fr; gap: 0.9rem; }
  .tl__rail {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    text-align: left;
    padding-top: 0;
  }
  .tl__rail::before { display: none; }
  .tl__dot { position: static; flex: none; }
  .tl__year { padding-right: 0; font-size: 1.15rem; }

  .arch__row { grid-template-columns: 2.5rem 1fr; }
  .arch__detail { grid-column: 2; }
  .arch__row::after { display: none; }

  .todorow { grid-template-columns: 2rem 1fr; }
  .todorow__note { grid-column: 2; }

  .techline__step { grid-template-columns: 1fr; gap: 0.75rem; }

  .dnav__inner { grid-template-columns: 1fr; }
  .dnav__link--next { text-align: left; border-left: 0; border-top: 1px solid var(--rule); }

  .footer__grid { grid-template-columns: 1fr; }

  .progressbar { top: 4.9rem; }
}

@media (max-width: 34rem) {
  .hero__facts { grid-template-columns: 1fr 1fr; }
  .dossier__meta { grid-template-columns: 1fr; }
  .filecard__no { font-size: 1.3rem; }
  .domain__head { grid-template-columns: 1fr; gap: 0.6rem; }
}


/* 20 — YAZDIRMA ========================================================== */
@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  body::before, body::after { display: none; }
  .masthead, .footer__nav, .dnav, .themetoggle, .burger,
  .filterbar, .progressbar, .jumpnav, .skip { display: none !important; }
  .band { padding-block: 1.2rem; }
  .reveal { opacity: 1; transform: none; }
  a { text-decoration: underline; }
  .filegrid, .cards, .arch, .techline { border-color: #999; background: #999; }
}