/* =============================================================================
   alaintural.com - tasarim sistemi
   Referans: sequencehq.com "Sequence - Style Reference" (Ali verdi, 2026-09-13).
   Kaynak belgeler: tasarim-referans/sequence/DESIGN.md + variables.css + tokens.json
   Onceki sistem (augen.pro turevi): tasarim-referans/site-css-augen-2026-09-13.css

   Ozet: beyaz tuval, hairline (#e5e7eb) cizgiler, gri metin hiyerarsisi ve TEK
   kromatik vurgu (#a565ff). Derinlik renkli dolgudan degil ince cerceve +
   katmanli golgeden gelir. Editoryal serif YALNIZ en buyuk baslikta.
   ========================================================================== */

/* --- Yazi tipi: Satoshi (Ali'nin marka fontu, Pixedi brand klasorunden) ----
   Kaynak: D:/Pixedi/brand/fonts/woff2 (Indian Type Foundry / Fontshare).
   Kendi sunucumuzda, CSP font-src 'self' korunuyor. Dort agirlik yukleniyor:
   300 (display), 400 (govde), 500 (baslik/etiket/buton), 700 (logo). */
@font-face {
  font-family: 'Satoshi';
  src: url('/assets/fonts/Satoshi-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/assets/fonts/Satoshi-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/assets/fonts/Satoshi-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('/assets/fonts/Satoshi-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Tokenlar: referans belgeden birebir ---------------------------------- */
:root {
  --color-violet-pulse: #a565ff;
  --color-indigo-ink: #5e5cff;
  --color-lavender-wash: #ebebff;
  --color-iris-glow: #e0c9ff;
  --color-ledger-green: #2e7317;
  --color-paper-white: #ffffff;
  --color-bone: #f7f7f7;
  --color-fog: #f1f1f1;
  --color-silver: #efefef;
  --color-marble: #fff6df;
  --color-graphite: #1d1d20;
  --color-slate: #42424a;
  --color-iron: #505050;
  --color-steel: #757575;
  --color-smoke: #92939e;
  --color-ash: #e5e7eb;
  --color-mist: #d1d9e4;
  --color-noir: #000000;

  --font-sans: 'Satoshi', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-caption: 11px;
  --text-body: 14px;
  --text-body-lg: 16px;
  --text-subheading: 18px;
  --text-heading-sm: 24px;
  --text-heading: clamp(28px, 3.2vw, 40px);
  --text-display: clamp(34px, 4.4vw, 46px);

  --leading-caption: 1.45;
  --leading-body: 1.57;
  --leading-body-lg: 1.63;
  --leading-subheading: 1.56;
  --leading-heading-sm: 1.33;
  --leading-tight: 1.05;

  --w-light: 300;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;

  --page-max-width: 1200px;
  --page-gutter: 24px;
  --section-gap: 80px;
  --card-padding: 24px;
  --nav-height: 64px;
  /* Kahraman bant yuksekligi (Ali, 2026-09-14): /about ve /press AYNI degeri
     okur. Sabit piksel, vh degil; vh iki sayfayi farkli ekranlarda ayirir.
     Once 880 idi, Ali 520'ye cekti. Dar ekran override'i (asagida) su an ayni
     degerde duruyor: bu deger buyutulurse telefonda ayrica kontrol et. */
  --hero-band-h: 520px;

  --radius-inputs: 4px;
  --radius-cards: 8px;
  --radius-xl: 12px;
  --radius-large-panels: 16px;
  --radius-full: 9999px;

  --shadow-subtle: rgba(58, 58, 64, 0.1) 0px 0px 0px 1px,
                   rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
                   rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
  --shadow-ring: rgba(29, 29, 32, 0.08) 0px 0px 0px 1px;
  --shadow-card: rgb(239, 239, 239) 0px 0px 0px 2px,
                 rgba(0, 0, 0, 0.01) 0px 22px 9px 0px,
                 rgba(0, 0, 0, 0.04) 0px 12px 7px 0px,
                 rgba(0, 0, 0, 0.06) 0px 5px 5px 0px,
                 rgba(0, 0, 0, 0.07) 0px 1px 3px 0px;
  --shadow-halo: rgba(224, 201, 255, 0.55) 0px 0px 8px 2px;
  --shadow-focus: rgba(165, 101, 255, 0.35) 0px 0px 0px 3px;
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-paper-white);
  color: var(--color-iron);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--w-regular);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

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

/* --- Kap ve sutunlar ------------------------------------------------------ */
.container {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--spacing-24);
  row-gap: var(--spacing-40);
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}
.c1 { grid-column: span 1; }
.c2 { grid-column: span 2; }
.c3 { grid-column: span 3; }
.c4 { grid-column: span 4; }
.c5 { grid-column: span 5; }
.s2 { grid-column-start: 2; }
.s3 { grid-column-start: 3; }
.rowgap { row-gap: var(--spacing-40); }

/* --- Bantlar: hepsi beyaz ya da beyaza yakin ------------------------------ */
.section { position: relative; background: var(--color-paper-white); }
.bg-off-white { background: var(--color-paper-white); }
.bg-grey-lighter { background: var(--color-paper-white); }
.bg-grey-light { background: var(--color-bone); }
.bg-off-black, .bg-black { background: var(--color-bone); }
.bg-blue { background: var(--color-lavender-wash); }
.section + .section { border-top: 1px solid var(--color-ash); }

.p-96, .p-120, .p-130, .p-144, .p-150, .p-220 { padding-block: var(--section-gap); }
.p-hero { padding-block: calc(var(--nav-height) + var(--spacing-64)) var(--section-gap); }
.pb-200 { padding-bottom: var(--spacing-96); }

/* --- Tipografi ------------------------------------------------------------ */
.d140, .d58, .h43 {
  font-family: var(--font-sans);
  font-weight: var(--w-light);
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
  color: var(--color-graphite);
}
.h43, .d58 { font-size: var(--text-display); }
.d140 { font-size: clamp(46px, 7vw, 92px); }

.h38, .h27 {
  font-family: var(--font-sans);
  font-size: var(--text-heading);
  font-weight: var(--w-light);
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
  color: var(--color-graphite);
}
.h22 {
  font-size: var(--text-heading-sm);
  font-weight: var(--w-medium);
  line-height: var(--leading-heading-sm);
  letter-spacing: -0.002em;
  color: var(--color-graphite);
}
.h20, .t18 {
  font-size: var(--text-subheading);
  font-weight: var(--w-medium);
  line-height: var(--leading-subheading);
  color: var(--color-graphite);
}
.t16 { font-size: var(--text-body-lg); line-height: var(--leading-body-lg); }
.t14 { font-size: var(--text-body); line-height: var(--leading-body); }

.label {
  font-size: 12px;
  font-weight: var(--w-medium);
  line-height: 1.4;
  color: var(--color-steel);
  margin: 0;
}
.lede {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  color: var(--color-iron);
  margin-top: var(--spacing-20);
  max-width: 58ch;
}
.body { font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-iron); }
.body a { color: var(--color-indigo-ink); text-decoration: none; }
.body a:hover { text-decoration: underline; }
.muted { color: var(--color-steel); }
.ink { color: var(--color-graphite); }
.measure { max-width: 62ch; }

.prose p {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  color: var(--color-iron);
  max-width: 68ch;
}
/* Paragraf arasi tam bir satir bosluk (Ali, 2026-09-13) */
.prose p + p { margin-top: 1.6em; }
.prose strong { font-weight: var(--w-medium); color: var(--color-graphite); }
.prose a { color: var(--color-indigo-ink); text-decoration: none; }
.prose a:hover { text-decoration: underline; }
.prose h2 {
  font-size: var(--text-heading-sm);
  font-weight: var(--w-medium);
  line-height: var(--leading-heading-sm);
  letter-spacing: -0.002em;
  color: var(--color-graphite);
  margin-top: var(--spacing-48);
  margin-bottom: var(--spacing-12);
}
.prose h2:first-child { margin-top: 0; }
.prose ul { margin-top: var(--spacing-16); display: grid; gap: var(--spacing-8); }
.prose li {
  position: relative;
  padding-left: var(--spacing-20);
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  max-width: 66ch;
}
.prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 6px;
  height: 1px;
  background: var(--color-smoke);
}
.prose--article p { max-width: 66ch; }

/* Kaynakca listesi. Yorum yazilari kaynak tasiyor: iddia dogrulanabilir olmali.
   Global reset ol'u list-style:none yaptigi icin numara elle kuruluyor; madde
   imi yerine sayi, cunku sira anlamli (metin "kaynak 3" diye atif verebilir). */
.prose ol.kaynaklar {
  counter-reset: kaynak;
  margin-top: var(--spacing-16);
  display: grid;
  gap: var(--spacing-8);
}
.prose ol.kaynaklar li {
  counter-increment: kaynak;
  padding-left: var(--spacing-28);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-iron);
}
.prose ol.kaynaklar li::before {
  content: counter(kaynak) ".";
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  background: none;
  color: var(--color-smoke);
  font-variant-numeric: tabular-nums;
}

.section-head { margin-bottom: var(--spacing-32); display: grid; gap: var(--spacing-4); }

/* --- Baglantilar, butonlar, rozetler -------------------------------------- */
a { color: inherit; }

.arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  font-size: var(--text-body);
  font-weight: var(--w-medium);
  color: var(--color-indigo-ink);
  text-decoration: none;
}
.arrow:hover { color: var(--color-violet-pulse); }
.arrow svg { width: 14px; height: 14px; color: currentColor; }

/* Butonlar (Ali, 2026-09-13): ya siyah dolgu ya beyaz + siyah kontur.
   Violet dolgu ve halo kaldirildi; vurgu rengi baglantilarda kaliyor. */
.cta {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: 10px 20px;
  border: 1px solid var(--color-graphite);
  border-radius: var(--radius-full);
  background: var(--color-graphite);
  color: var(--color-paper-white);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--w-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cta:hover { background: var(--color-paper-white); color: var(--color-graphite); }
.cta svg { width: 14px; height: 14px; color: currentColor; }

.cta--ghost {
  background: var(--color-paper-white);
  color: var(--color-graphite);
}
.cta--ghost:hover { background: var(--color-graphite); color: var(--color-paper-white); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-20);
  margin-top: var(--spacing-32);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--color-bone);
  border: 1px solid var(--color-ash);
  color: var(--color-slate);
  font-size: var(--text-caption);
  font-weight: var(--w-medium);
  line-height: var(--leading-caption);
  text-decoration: none;
}
.pill--dark-soft {
  background: var(--color-lavender-wash);
  border-color: var(--color-iris-glow);
  color: var(--color-indigo-ink);
}
a.pill:hover { border-color: var(--color-mist); }

:focus-visible { outline: 2px solid var(--color-violet-pulse); outline-offset: 2px; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: var(--spacing-8) var(--spacing-16);
  background: var(--color-graphite);
  color: var(--color-paper-white);
  border-radius: var(--radius-inputs);
  z-index: 100;
}
.skip:focus { left: var(--spacing-16); top: var(--spacing-16); }

/* --- Ust menu: tek sabit cubuk -------------------------------------------- */
.nav-shell {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--color-ash);
}
.nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-32);
  height: var(--nav-height);
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}
/* Sol slot: tipografik logo (Ali, 2026-09-13) - kalin, sikistirilmis, marka kilidi */
.nav a.nav__home {
  font-size: var(--text-subheading);
  font-weight: var(--w-bold);
  letter-spacing: -0.02em;
  color: var(--color-graphite);
  text-decoration: none;
}
.nav a.nav__home:hover { color: var(--color-graphite); }
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--spacing-24);
  width: 100%;
  justify-content: flex-end;
}
/* Referansta sol slot marka kilidi: ana sayfa baglantisi o gorevi goruyor */
.nav__links .nav__home { margin-right: auto; }
.nav a {
  font-size: var(--text-body);
  font-weight: var(--w-medium);
  color: var(--color-iron);
  text-decoration: none;
}
.nav a:hover { color: var(--color-graphite); }
.nav a[aria-current="page"] { color: var(--color-graphite); }

/* --- Satir listeleri ------------------------------------------------------ */
.rows { border-top: 1px solid var(--color-ash); }
.row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) auto;
  gap: var(--spacing-24);
  align-items: baseline;
  padding-block: var(--spacing-20);
  border-bottom: 1px solid var(--color-ash);
  text-decoration: none;
  color: inherit;
}
a.row:hover { background: var(--color-bone); }
.row__meta {
  font-size: var(--text-caption);
  font-weight: var(--w-medium);
  line-height: var(--leading-caption);
  color: var(--color-smoke);
}
.row__title {
  display: block;
  font-size: var(--text-body-lg);
  font-weight: var(--w-medium);
  line-height: 1.4;
  color: var(--color-graphite);
}
.row__desc {
  display: block;
  margin-top: var(--spacing-4);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-steel);
  max-width: 70ch;
}
.rows__empty { padding-block: var(--spacing-32); color: var(--color-steel); }

/* --- Site haritasi satirlari ---------------------------------------------- */
.sitemap-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) auto;
  gap: var(--spacing-24);
  align-items: baseline;
  padding-block: var(--spacing-20);
  border-bottom: 1px solid var(--color-ash);
  text-decoration: none;
}
.sitemap-row:first-child { border-top: 1px solid var(--color-ash); }
.sitemap-row:hover { background: var(--color-bone); }
.sitemap-row__name {
  font-size: var(--text-body-lg);
  font-weight: var(--w-medium);
  color: var(--color-graphite);
}
.sitemap-row__what { font-size: var(--text-body); color: var(--color-steel); }
.sitemap-row__go {
  font-size: var(--text-caption);
  font-weight: var(--w-medium);
  color: var(--color-indigo-ink);
}

/* --- Kartlar, kutular ----------------------------------------------------- */
.callout {
  margin-top: var(--spacing-24);
  padding: var(--card-padding);
  background: var(--color-lavender-wash);
  border: 1px solid var(--color-iris-glow);
  border-radius: var(--radius-cards);
}
.callout p { font-size: var(--text-body); color: var(--color-slate); max-width: 64ch; }

.copyblock {
  padding: var(--card-padding);
  background: var(--color-paper-white);
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-cards);
}
.copyblock + .copyblock { margin-top: var(--spacing-16); }
.copyblock p { font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-iron); }
.copyblock p + p { margin-top: 1.6em; }
.copyblock-label {
  font-size: var(--text-caption);
  font-weight: var(--w-medium);
  color: var(--color-smoke);
  margin-bottom: var(--spacing-8);
}
/* Biyografi kopyalama (Ali, 2026-09-14): etiket solda, buton sagda ayni satirda.
   Baslik satirinin kendi bosluğu var, etiketin alt bosluğu burada sifirlanir. */
.copyblock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  margin-bottom: var(--spacing-8);
}
.copyblock-head .copyblock-label { margin-bottom: 0; }
.copybtn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  flex: none;
  padding: 6px 14px;
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: var(--w-medium);
  line-height: var(--leading-caption);
  color: var(--color-steel);
  background: var(--color-paper-white);
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.copybtn svg { width: 13px; height: 13px; flex: none; }
.copybtn:hover { color: var(--color-graphite); border-color: var(--color-mist); }
.copybtn[data-durum="ok"] { color: var(--color-ledger-green); border-color: var(--color-ledger-green); }
/* Betik yoksa buton hicbir sey yapmaz; o yuzden betik onu kendisi acar. */
.copybtn[hidden] { display: none; }

.facts { display: grid; gap: 0; border-top: 1px solid var(--color-ash); }
.facts > div {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--spacing-24);
  padding-block: var(--spacing-16);
  border-bottom: 1px solid var(--color-ash);
}
.facts dt { font-size: var(--text-body); color: var(--color-steel); }
.facts dd { margin: 0; font-size: var(--text-body); color: var(--color-graphite); }

.tablewrap { overflow-x: auto; margin-top: var(--spacing-24); }
.datatable { width: 100%; border-collapse: collapse; font-size: var(--text-body); }
.datatable caption {
  text-align: left;
  font-size: var(--text-caption);
  color: var(--color-smoke);
  margin-bottom: var(--spacing-8);
}
.datatable th, .datatable td {
  text-align: left;
  padding: var(--spacing-12) var(--spacing-16);
  border-bottom: 1px solid var(--color-ash);
  vertical-align: top;
}
.datatable th {
  font-size: var(--text-caption);
  font-weight: var(--w-medium);
  color: var(--color-smoke);
  white-space: nowrap;
  background: var(--color-bone);
}
.datatable td { color: var(--color-iron); }

.formula {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-slate);
  background: var(--color-bone);
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-inputs);
  padding: var(--spacing-12) var(--spacing-16);
  margin-top: var(--spacing-16);
  overflow-x: auto;
}

.draft-note {
  padding: var(--spacing-12) var(--spacing-16);
  border: 1px solid var(--color-iris-glow);
  background: var(--color-lavender-wash);
  border-radius: var(--radius-inputs);
  font-size: var(--text-body);
  color: var(--color-slate);
}

/* --- Yazi dizini: kategori listesi ---------------------------------------- */
.catlist { border-top: 1px solid var(--color-ash); }
.catlist__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding-block: var(--spacing-12);
  border-bottom: 1px solid var(--color-ash);
  text-decoration: none;
}
.catlist__item:hover .catlist__name { color: var(--color-violet-pulse); }
.catlist__name { font-size: var(--text-body); font-weight: var(--w-medium); color: var(--color-graphite); }
.catlist__count { font-size: var(--text-caption); color: var(--color-smoke); }
.catlist__feed {
  display: inline-block;
  margin-top: var(--spacing-16);
  font-size: var(--text-body);
  color: var(--color-steel);
  text-decoration: none;
}
.catlist__feed:hover { color: var(--color-indigo-ink); }

/* --- Arama kutusu --------------------------------------------------------- */
.searchbox { margin-bottom: var(--spacing-24); }
.searchbox__label {
  display: block;
  font-size: var(--text-caption);
  font-weight: var(--w-medium);
  color: var(--color-smoke);
  margin-bottom: var(--spacing-8);
}
.searchbox__input {
  width: 100%;
  padding: var(--spacing-8) var(--spacing-12);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--color-graphite);
  background: var(--color-paper-white);
  border: 1px solid var(--color-mist);
  border-radius: var(--radius-inputs);
}
.searchbox__input::placeholder { color: var(--color-smoke); }
.searchbox__input:focus {
  outline: none;
  border-color: var(--color-violet-pulse);
  box-shadow: var(--shadow-focus);
}
.searchbox__status { margin-top: var(--spacing-8); font-size: var(--text-caption); color: var(--color-smoke); }

/* --- Makale basligi ------------------------------------------------------- */
.article__head { display: grid; gap: var(--spacing-16); }
.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-12);
  align-items: center;
  font-size: var(--text-caption);
  color: var(--color-smoke);
}

/* --- Portre karti --------------------------------------------------------- */
.portrait { margin: 0; }
/* Yalniz ana sayfa hero'su: PNG konacak, cerceve ve golge istenmiyor (Ali) */
.portrait.portrait--bare img {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.portrait img {
  width: 100%;
  height: auto;
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-card);
}

/* --- Hakkinda kahramani: komple fotograf + alttan yukari beyaz glow -------
   Ali, 2026-09-13. Glow ayri bir opak oge degil, ::after gradyani: goruntunun
   ustunde (z-index -1), metnin altinda. Ustte orten oge YOK. */
.hero-photo {
  position: relative;
  overflow: clip;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(540px, 78vh, 860px);
  background: var(--color-bone);
  padding-block: calc(var(--nav-height) + var(--spacing-64)) var(--section-gap);
}
/* Genis bant kahraman (/about): dikey portrenin yuksekligi burada asiri
   kirpiyor, yuz kaciyor. Bant daha alcak durur ve gorsel SAGA sabitlenir,
   cunku karede yuz sagda, sol taraf yazi icin bos birakilmis. */
.hero-photo--band {
  height: var(--hero-band-h);
  min-height: var(--hero-band-h);
  padding-block: calc(var(--nav-height) + var(--spacing-40)) var(--spacing-48);
}
.hero-photo--band .hero-photo__media {
  object-position: 88% center;
}
/* Yazi yuze binmesin: bantta metin sutunu bese uc, yuz sag ucta kaliyor. */
.hero-photo--band .container > * {
  grid-column: span 3;
}
@media (max-width: 720px) {
  :root { --hero-band-h: 520px; }
  .hero-photo--band .hero-photo__media { object-position: 68% center; }
}

.hero-photo__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 6%;
  z-index: -2;
}
.hero-photo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80%;
  background: linear-gradient(to top,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.96) 18%,
      rgba(255, 255, 255, 0.82) 42%,
      rgba(255, 255, 255, 0.42) 68%,
      rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: -1;
}
.hero-photo .container { position: relative; width: 100%; }
.hero-photo__quote {
  font-family: var(--font-sans);
  font-size: var(--text-display);
  font-weight: var(--w-light);
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
  color: var(--color-graphite);
  max-width: 26ch;
}
.hero-photo__by {
  font-size: var(--text-body-lg);
  color: var(--color-steel);
  margin-top: var(--spacing-24);
}

/* --- Basin kahramani: arka plan videosu ----------------------------------
   Beyazlatma AYRI KATMANLA yapilmaz: Chrome ortulen videoyu duraklatiyor
   (olculdu 2026-09-13). Yikama videonun kendi opakligi ve maskesiyle. */
.hero-video { position: relative; overflow: clip; isolation: isolate; }
.hero-video__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0.16;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 26%, #000 72%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 26%, #000 72%, transparent);
  z-index: -2;
}
.hero-video__veil { display: none; }
.hero-video .container { position: relative; }
/* Basin kahramani /about bantiyla AYNI yukseklikte durur (Ali, 2026-09-14).
   Icerik alta hizali: iki sayfanin ilk satiri ayni yerden basliyor. */
.hero-video.p-hero {
  display: flex;
  align-items: flex-end;
  height: var(--hero-band-h);
  min-height: var(--hero-band-h);
}
.hero-video.p-hero > .container { width: 100%; }

/* --- Basin galerisi ------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-24);
}
.gallery__item { margin: 0; }
.gallery__item img {
  width: 100%;
  height: auto;
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-cards);
}
.gallery__cap {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-12);
  margin-top: var(--spacing-8);
  font-size: var(--text-caption);
}
.gallery__name { color: var(--color-steel); }
.gallery__dl { color: var(--color-indigo-ink); text-decoration: none; font-weight: var(--w-medium); }

/* --- Alt bilgi ------------------------------------------------------------ */
.footer {
  background: var(--color-paper-white);
  border-top: 1px solid var(--color-ash);
  padding-block: var(--spacing-48);
}
.footer__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-24);
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}
.footer__mark {
  font-size: var(--text-body-lg);
  font-weight: var(--w-bold);
  letter-spacing: -0.02em;
  color: var(--color-graphite);
  text-decoration: none;
}
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-20);
  margin-left: auto;
}
.footer__nav a { font-size: var(--text-body); color: var(--color-steel); text-decoration: none; }
.footer__nav a:hover { color: var(--color-graphite); }
.footer__bar {
  margin-top: var(--spacing-40);
  border-top: 1px solid var(--color-ash);
  padding-top: var(--spacing-24);
}
.footer__bar-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-16);
  justify-content: space-between;
  max-width: calc(var(--page-max-width) - 2 * var(--page-gutter));
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  font-size: var(--text-caption);
  color: var(--color-smoke);
}
.footer__bar-inner a { color: var(--color-smoke); text-decoration: none; }
.footer__bar-inner a:hover { color: var(--color-graphite); }

/* --- Yardimci siniflar ---------------------------------------------------- */
.mt-10 { margin-top: var(--spacing-8); }
.mt-22 { margin-top: var(--spacing-20); }
.mt-30 { margin-top: var(--spacing-24); }
.mb-22 { margin-bottom: var(--spacing-20); }
.stack-8 { display: grid; gap: var(--spacing-8); }
.stack-42 { display: grid; gap: var(--spacing-40); }

/* --- Atmosfer: hero'daki yumusak mavi-mor yikama -------------------------- */
.p-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 70% at 78% 12%, rgba(186, 217, 249, 0.45), transparent 70%),
    radial-gradient(50% 60% at 20% 0%, rgba(234, 234, 255, 0.7), transparent 72%);
  z-index: 0;
}
.p-hero > .container { position: relative; z-index: 1; }
.hero-photo::before { content: none; }



/* --- Cerez bandi (2026-09-14) ---------------------------------------------
   Sayfanin ALTINDA duruyor, icerigi ortmuyor, odak tuzagi yok: band bir
   engel degil bir bildirim. "Decline" ve "Accept" AYNI boyutta ve ayni
   agirlikta - reddetmek kabul etmekten zor olursa onay gecerli sayilmaz.
   Band yalnizca GA4 kimligi tanimliyken cikar (bkz. assets/js/olcum.js). */
.cerez {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--color-paper-white);
  border-top: 1px solid var(--color-ash);
  box-shadow: var(--shadow-card);
}
.cerez__ic {
  max-width: calc(var(--page-max-width) - 2 * var(--page-gutter));
  margin: 0 auto;
  padding: var(--spacing-16) var(--page-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-24);
}
.cerez__metin {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-iron);
  max-width: 68ch;
}
.cerez__metin a { color: var(--color-indigo-ink); }
.cerez__dugmeler { display: flex; gap: var(--spacing-8); flex: none; }
.cerez__dugme {
  padding: 8px 18px;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--w-medium);
  line-height: var(--leading-body);
  color: var(--color-graphite);
  background: var(--color-paper-white);
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-full);
  cursor: pointer;
}
.cerez__dugme:hover { border-color: var(--color-mist); }
.cerez__dugme--evet {
  color: var(--color-paper-white);
  background: var(--color-graphite);
  border-color: var(--color-graphite);
}
@media (max-width: 760px) {
  .cerez__ic { flex-direction: column; align-items: flex-start; gap: var(--spacing-12); }
  .cerez__dugmeler { width: 100%; }
  .cerez__dugme { flex: 1; }
}

/* --- Iletisim formu -------------------------------------------------------- */
.form { display: grid; gap: var(--spacing-16); max-width: 34rem; }
.form__row { display: grid; gap: var(--spacing-8); }
.form__label {
  font-size: var(--text-caption);
  font-weight: var(--w-medium);
  color: var(--color-smoke);
}
.form__input {
  width: 100%;
  padding: var(--spacing-8) var(--spacing-12);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--color-graphite);
  background: var(--color-paper-white);
  border: 1px solid var(--color-mist);
  border-radius: var(--radius-inputs);
}
.form__input::placeholder { color: var(--color-smoke); }
.form__input:focus {
  outline: none;
  border-color: var(--color-graphite);
  box-shadow: var(--shadow-ring);
}
.form__input--area { resize: vertical; min-height: 7rem; }
/* Bal kupu: insan gormez, bot doldurur */
.form__gizli { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .cta { justify-self: start; }

/* --- Sirketler ve projeler agi (reactflow.dev benzeri, kutuphanesiz) ------- */
.ag {
  position: relative;
  margin-top: var(--spacing-32);
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-large-panels);
  background-color: var(--color-bone);
  background-image: radial-gradient(var(--color-mist) 1px, transparent 1px);
  background-size: 16px 16px;
  overflow: hidden;
  touch-action: none;
}
.ag__lines { position: absolute; inset: 0; pointer-events: none; }
.ag__edge {
  fill: none;
  stroke: var(--color-mist);
  stroke-width: 1.5;
}
.ag__edge.is-active { stroke: var(--color-violet-pulse); }
.ag__node {
  position: absolute;
  top: 0;
  left: 0;
  width: 168px;
  display: grid;
  gap: 2px;
  padding: var(--spacing-12) var(--spacing-16);
  background: var(--color-paper-white);
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-subtle);
  text-decoration: none;
  cursor: grab;
  user-select: none;
}
.ag__node.is-dragging { cursor: grabbing; box-shadow: var(--shadow-card); }
.ag__node:hover { border-color: var(--color-violet-pulse); }
.ag__name {
  font-size: var(--text-body);
  font-weight: var(--w-medium);
  color: var(--color-graphite);
}
.ag__sub { font-size: var(--text-caption); color: var(--color-steel); }
/* Sirket logosu (Ali, 2026-09-14). Yukseklikten hizalanir, genislik serbest:
   yatay kilit isaretlerin oranlari birbirini tutmuyor, ortak olcu X-yuksekligi. */
.ag__logo {
  display: block;
  /* Olcu CSS'ten DEGIL width/height niteliklerinden gelir: her kilidin kendi
     optik carpani var. Buraya sabit height yazilirsa nitelikleri ezer ve
     carpan sessizce hicbir sey yapmaz. */
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: left center;
  margin-bottom: var(--spacing-8);
}
.ag__node--kok .ag__logo { filter: invert(1) grayscale(1); }
.ag__node--kok {
  background: var(--color-graphite);
  border-color: var(--color-graphite);
}
.ag__node--kok .ag__name { color: var(--color-paper-white); }
.ag__node--kok .ag__sub { color: var(--color-smoke); }
.ag__node--sirket { border-color: var(--color-iris-glow); background: var(--color-lavender-wash); }
.ag__node--sirket .ag__name { color: var(--color-indigo-ink); }
/* Henuz yayinda olmayan marka: kesikli cerceve + "Coming soon" alt satiri.
   Canli olan ile olmayan ayni kartta gosterilmez (Ali, 2026-09-14). */
.ag__node--yakinda {
  border-style: dashed;
  box-shadow: none;
}
.ag__node--yakinda .ag__sub { color: var(--color-smoke); }

/* Betiksiz (ve dar ekranda) gorunen ic ice liste */
.ag-liste { border-top: 1px solid var(--color-ash); margin-top: var(--spacing-24); }
.ag-liste > li { border-bottom: 1px solid var(--color-ash); padding-block: var(--spacing-12); }
.ag-liste__ad { font-size: var(--text-body); font-weight: var(--w-medium); color: var(--color-graphite); }
.ag-liste__alt { font-size: var(--text-caption); color: var(--color-steel); }
.ag-liste__logo {
  display: inline-block;
  max-width: 100%;
  height: auto;
  vertical-align: -3px;
  margin-right: var(--spacing-8);
}
.ag-liste ul { margin-top: var(--spacing-8); display: grid; gap: var(--spacing-4); padding-left: var(--spacing-16); }
.ag-liste ul li { font-size: var(--text-body); color: var(--color-iron); }

/* --- Duyarli -------------------------------------------------------------- */
@media (max-width: 1000px) {
  .row { grid-template-columns: 110px minmax(0, 1fr) auto; }
  .sitemap-row { grid-template-columns: 150px minmax(0, 1fr) auto; }
  .facts > div { grid-template-columns: 160px minmax(0, 1fr); }
}

@media (max-width: 760px) {
  :root { --section-gap: 56px; --page-gutter: 20px; }
  .container { grid-template-columns: minmax(0, 1fr); row-gap: var(--spacing-32); }
  .c1, .c2, .c3, .c4, .c5 { grid-column: span 1; }
  .s2, .s3 { grid-column-start: 1; }
  .row, .sitemap-row { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-8); }
  .row__meta { order: -1; }
  .facts > div { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-4); }
  .gallery { grid-template-columns: minmax(0, 1fr); }
  /* Bant KENDI sabit yuksekligini korur; bu kural onu ezmesin (2026-09-14). */
  .hero-photo:not(.hero-photo--band) { min-height: 68vh; }
  .hero-photo__quote { max-width: none; }
  .nav { gap: var(--spacing-16); }
  .nav__links { gap: var(--spacing-16); overflow-x: auto; scrollbar-width: none; }
  .nav__links::-webkit-scrollbar { display: none; }
  .footer__nav { margin-left: 0; }
}

/* --- HAREKET -------------------------------------------------------------
   Iki is yapiyor: sayfa acilirken kahraman blogu sirayla yerine oturuyor,
   kaydirirken bolumler goruse girerken beliriyor.

   Sifir JavaScript. Kaydirma animasyonu CSS scroll-driven timeline ile
   (`animation-timeline: view()`); destegi olmayan tarayicida `@supports`
   blogu hic uygulanmaz ve icerik olagan haliyle, tam gorunur durur.

   Yalniz `transform` ve `opacity`: ikisi de duzen ve boyama asamasini atlar.

   DIKKAT - scroll-driven animasyonda `animation-duration` YOK SAYILIR.
   Dosyanin basindaki `prefers-reduced-motion` kurali sureyi 0.01ms'e cekerek
   diger animasyonlari susturuyor ama bunlari susturamaz; kapatilmazlarsa
   hareketi kapatmis kullanici icerigi `opacity: 0` olarak gorur. Bu yuzden
   asagida ayrica ve acikca kapatiliyorlar.
   -------------------------------------------------------------------------- */

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --gir-sure: 820ms;
  --gir-adim: 70ms;
}

@keyframes gir-yukselerek {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes gir-yumusak {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Fotograf disaridan gelmez, hafifce geri cekilir: sinemada kamera yerine
   otururken yaptigi sey. scale(0.9) tipi bir giris burada ucuz durur. */
@keyframes gir-cozunerek {
  from { opacity: 0; transform: scale(1.035); }
  to   { opacity: 1; transform: none; }
}

/* --- Sayfa acilisi -------------------------------------------------------- */
/* Kahraman blogu yukaridan asagi sirayla: etiket, baslik, giris, dugmeler.
   Adim 70ms; daha uzunu "yukleniyor" hissi verir, daha kisasi fark edilmez. */

.nav-shell {
  animation: gir-yumusak 600ms var(--ease-out) both;
}

.p-hero .label,
.p-hero h1,
.p-hero .lede,
.p-hero .actions,
.p-hero .prose,
.hero-photo__quote,
.hero-photo__by {
  animation: gir-yukselerek var(--gir-sure) var(--ease-out) both;
}

.p-hero .label            { animation-delay: 60ms; }
.p-hero h1                { animation-delay: calc(60ms + var(--gir-adim)); }
.p-hero .lede,
.p-hero .prose            { animation-delay: calc(60ms + 2 * var(--gir-adim)); }
.p-hero .actions          { animation-delay: calc(60ms + 3 * var(--gir-adim)); }

/* Fotografli kahraman: once gorsel cozunur, yazi onun uzerine biner. */
.hero-photo__media {
  animation: gir-cozunerek 1400ms var(--ease-out) both;
}
.hero-photo__quote        { animation-delay: 320ms; }
.hero-photo__by           { animation-delay: calc(320ms + var(--gir-adim)); }

/* --- Kaydirma ------------------------------------------------------------- */
/* Her blok kendi goruse girisine bagli; dogal olarak siraya giriyorlar,
   ayrica gecikme vermeye gerek yok. Aralik `entry 0% -> entry 62%`: oge
   ekranin altindan girerken basliyor, yaklasik ucte ikisinde tamamlaniyor,
   yani okuyucu ona ulastiginda hareket bitmis oluyor. */

@supports (animation-timeline: view()) {
  .section:not(.p-hero) > .container > *,
  .row,
  .gallery__item,
  .footer__grid > * {
    animation: gir-yukselerek linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 62%;
  }

  /* Yan yana duran kareler ayni anda girmesin: sonraki sutun biraz gec
     tamamlansin, soldan saga okunuyormus gibi dursun. */
  .gallery__item:nth-child(3n + 2) { animation-range: entry 0% entry 74%; }
  .gallery__item:nth-child(3n)     { animation-range: entry 0% entry 86%; }

  /* Uzun listelerde her satirin ayri ayri kipirdamasi yorucu olur:
     yazi satirlari yalniz cozunur, yer degistirmez. */
  .row { animation-name: gir-yumusak; }
}

/* --- Hareketi kapatan kullanici ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .nav-shell,
  .p-hero .label, .p-hero h1, .p-hero .lede, .p-hero .actions, .p-hero .prose,
  .hero-photo__media, .hero-photo__quote, .hero-photo__by,
  .section:not(.p-hero) > .container > *,
  .row, .gallery__item, .footer__grid > * {
    animation: none !important;
    animation-timeline: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --- Parola kapisi -------------------------------------------------------
   Yalniz dagitimdaki giris sayfasi kullanir (site\ klasorunde o sayfa yok).
   Kapi kalktiginda bu blok da silinir. */
.kapi {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding-inline: var(--page-gutter);
}
.kapi__kutu {
  width: 100%;
  max-width: 380px;
  text-align: left;
}
.kapi__form {
  display: grid;
  gap: var(--spacing-8);
  justify-items: start;
}
.kapi__form .form__input { width: 100%; }
.kapi__hata { display: none; color: var(--color-steel); }
.kapi__hata--acik { display: block; }