/* ── kaynak/font.css ── */
/* Kendi sunucudan fontlar: Türkçe altküme, kit 13-font ile üretildi (betik/font-uret.mjs). */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400 800;font-display:swap;src:url("font/montserrat.woff2") format("woff2");unicode-range:U+0020-007E, U+00A0, U+00A7, U+00A9, U+00AB, U+00AD-00AE, U+00B0-00B1, U+00B6-00B7, U+00BB, U+00C0-00C2, U+00C4-00C5, U+00C7-00CF, U+00D1-00DD, U+00E0-00E2, U+00E4-00E5, U+00E7-00EF, U+00F1-00FD, U+011E-011F, U+0130-0131, U+015E-015F, U+2011, U+2013-2014, U+2018-2019, U+201C-201D, U+2020-2022, U+2026, U+2039-203A, U+20AC, U+20BA, U+2122, U+2190-2193, U+2197;}
@font-face{font-family:"Montserrat";font-style:italic;font-weight:400 600;font-display:swap;src:url("font/montserrat-italic.woff2") format("woff2");unicode-range:U+0020-007E, U+00A0, U+00A7, U+00A9, U+00AB, U+00AD-00AE, U+00B0-00B1, U+00B6-00B7, U+00BB, U+00C0-00C2, U+00C4-00C5, U+00C7-00CF, U+00D1-00DD, U+00E0-00E2, U+00E4-00E5, U+00E7-00EF, U+00F1-00FD, U+011E-011F, U+0130-0131, U+015E-015F, U+2011, U+2013-2014, U+2018-2019, U+201C-201D, U+2020-2022, U+2026, U+2039-203A, U+20AC, U+20BA, U+2122, U+2190-2193, U+2197;}
@font-face{font-family:"Raleway";font-style:normal;font-weight:400 700;font-display:swap;src:url("font/raleway.woff2") format("woff2");unicode-range:U+0020-007E, U+00A0, U+00A7, U+00A9, U+00AB, U+00AD-00AE, U+00B0-00B1, U+00B6-00B7, U+00BB, U+00C0-00C2, U+00C4-00C5, U+00C7-00CF, U+00D1-00DD, U+00E0-00E2, U+00E4-00E5, U+00E7-00EF, U+00F1-00FD, U+011E-011F, U+0130-0131, U+015E-015F, U+2011, U+2013-2014, U+2018-2019, U+201C-201D, U+2020-2022, U+2026, U+2039-203A, U+20AC, U+20BA, U+2122, U+2190-2193, U+2197;}
@font-face{font-family:"Raleway";font-style:italic;font-weight:400 700;font-display:swap;src:url("font/raleway-italic.woff2") format("woff2");unicode-range:U+0020-007E, U+00A0, U+00A7, U+00A9, U+00AB, U+00AD-00AE, U+00B0-00B1, U+00B6-00B7, U+00BB, U+00C0-00C2, U+00C4-00C5, U+00C7-00CF, U+00D1-00DD, U+00E0-00E2, U+00E4-00E5, U+00E7-00EF, U+00F1-00FD, U+011E-011F, U+0130-0131, U+015E-015F, U+2011, U+2013-2014, U+2018-2019, U+201C-201D, U+2020-2022, U+2026, U+2039-203A, U+20AC, U+20BA, U+2122, U+2190-2193, U+2197;}
/* Yedek yüz (CLS): Montserrat inene kadar ölçü uyumlu Arial. betik/font-yedek.mjs */
@font-face{font-family:"Montserrat yedek";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Helvetica");size-adjust:107.47%;ascent-override:90.07%;descent-override:23.35%;line-gap-override:0%;}

/* ── kit/tema-sozlesmesi/tema.css ── */
/* TEMA SÖZLEŞMESİ — varsayılan değerler.

   Bu dosya kitin HAM DEĞER taşıyabildiği TEK yer. Kapı başka her CSS
   dosyasında ham renk, köşe ve gölgeyi KIRMIZI yakıyor (kaynak projede
   T-77'nin kuralı: ham rengin role dönüştüğü yer muaf olmasaydı sözleşmenin
   kendisi yazılamazdı).

   Değerler NÖTR ve kasıtlı olarak kişiliksiz: kit bir marka dayatmıyor. Host
   proje kendi paletini kendi dosyasında aynı rollere bağlar ve bu dosyadan
   SONRA yükler:

     :root { --zemin: #FAF7F2; --eylem: #1F5C4A; … }

   `:where(:root)` özgüllüğü sıfır — host'un düz `:root`u her zaman kazanır,
   yükleme sırası şaşsa bile.

   Her renk rolünün kontrast şartı `tokenlar.js` içinde; `temaDenetle()`
   host paletini o şartlara karşı ölçer. Bu dosyanın kendi değerleri de
   testte ölçülüyor. */

:where(:root) {
  --zemin: #FFFFFF;
  --zemin-alt: #F3F3F1;
  --metin: #1F1F1F;
  --metin-soluk: #5E5E5A;        /* beyaz üstünde 6.6:1 */
  --baslik: #1F1F1F;
  --ayrac: #E2E2DE;
  --cizgi-guclu: #85857F;        /* beyaz üstünde 3.7:1 — 1.4.11 */
  --alan-yuzey: #F7F7F5;

  --eylem: #2F4A6B;              /* beyaz üstünde 9.2:1 */
  --eylem-metin: #FFFFFF;
  --eylem-koyu: #223650;
  --vurgu: #8A6D3B;
  --hata: #A63A32;               /* beyaz üstünde 6.3:1 */
  --basari: #2E6B3A;
  --uyari: #8A5A00;              /* beyaz üstünde 5.6:1 */
  --odak: #2F4A6B;
  --ortu: #1F1F1F73;             /* metin rengi, %45 örtücülük */

  --yuvarlak: 12px;
  /* İç içe köşe: dış yarıçap − dolgu. 12px dış, ~6px dolgu → 6px iç. Kaynak
     projede "hepsi 18px" harfiyen uygulanınca 20 piksellik rozetler kapsüle
     dönüyordu; iç öğe ayrı bir rol olmak zorunda. */
  --yuvarlak-kucuk: 6px;
  --golge-alcak: 0 1px 2px #0000001F;
  --golge-orta: 0 2px 6px #0000001A, 0 8px 24px #00000014;

  --e-out: cubic-bezier(.23, 1, .32, 1);
  --s-kucuk: 180ms;
  --s-orta: 250ms;

  /* `ch` bir karakter DEĞİL, `0` rakamının genişliği. Kaynak projede 66
     karakterlik hedef o sitenin gövde yüzünde 55ch'e denk geldi (gerçek Chrome'da
     satır kutuları sayılarak). Başka bir yüzde yeniden kalibre edilmeli. */
  --olcu-metin: 62ch;
  --bosluk: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  :where(:root) { --s-kucuk: 0ms; --s-orta: 0ms; }
}

/* ── kaynak/stil.css ── */
/* Uğur Karataş portfolyo — tema ve düzen.
   Karar: A'nın yazı dili (Newsreader + Manrope) + B'nin rengi ve yerleşimi (koyu zemin, turuncu, mercek).
   Renk rolleri kitin tema sözleşmesine bağlı (kit/tema-sozlesmesi/tema.css sonra bu dosya yüklenir). */

:root {
  /* ham palet */
  --p-gece: #131019; --p-gece-2: #1B1723; --p-gece-3: #241E30;
  --p-kagit: #EDE6D8; --p-kagit-soluk: #B3AABF; --p-sis: #7A7189;
  --p-turuncu: #FF8A1E; --p-turuncu-acik: #FFB457; --p-turuncu-koyu: #C9641A;
  /* semantik roller (kit sözleşmesi) */
  --zemin: var(--p-gece); --zemin-alt: var(--p-gece-2); --metin: var(--p-kagit); --metin-soluk: var(--p-kagit-soluk);
  --baslik: var(--p-kagit); --ayrac: #302842; --cizgi-guclu: var(--p-sis); --alan-yuzey: var(--p-gece-2);
  --eylem: var(--p-turuncu-acik); --eylem-metin: var(--p-gece); --eylem-koyu: var(--p-turuncu); --vurgu: var(--p-turuncu);
  --hata: #FF9A8A; --basari: #A6D69A; --uyari: #FFCF7A; --odak: var(--p-turuncu-acik); --ortu: #13101999;
  --yuvarlak: 4px; --yuvarlak-kucuk: 2px; --golge-alcak: 0 1px 2px #00000040; --golge-orta: 0 8px 30px #00000066;
  --e-out: cubic-bezier(.23, 1, .32, 1); --s-kucuk: 180ms; --s-orta: 250ms;
  --olcu-metin: 64ch; --bosluk: 1rem;
  /* yazı */
  --display: "Montserrat", "Montserrat yedek", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: var(--display);
  --sans: "Raleway", "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --etiket: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --genislik: 1180px; --kenar: clamp(16px, 4vw, 40px);
  color-scheme: dark;
}
/* açık tema: <html data-tema="acik"> (tema düğmesi; ilk açılışta cihaz temasına uyar) */
:root[data-tema="acik"] {
  --zemin: #F3F0EA; --zemin-alt: #FFFFFF; --metin: #1C1720; --metin-soluk: #5E5768; --baslik: #1C1720;
  --ayrac: #DDD8D0; --cizgi-guclu: #8E8798; --alan-yuzey: #FFFFFF;
  --eylem: #A8480D; --eylem-metin: #FFFFFF; --eylem-koyu: #8F3C09; --vurgu: #A8480D;
  --hata: #A63A32; --basari: #2E6B3A; --uyari: #8A5A00; --odak: #B8500F; --ortu: #1C172099;
  --p-gece-3: #EDE8E0; --p-turuncu-acik: #C9641A;
  --golge-orta: 0 8px 30px #1C172022;
  color-scheme: light;
}
body { transition: background-color var(--s-orta) var(--e-out), color var(--s-orta) var(--e-out); }
@media (prefers-reduced-motion: reduce) { :root { --s-kucuk: 0ms; --s-orta: 0ms; } html { scroll-behavior: auto; } .menu-ortu, html.menu-acik .menu-ortu { transition: none; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html { overflow-x: clip; }
body { margin: 0; overflow-x: clip; background: var(--zemin); color: var(--metin); font: 1rem/1.62 var(--sans); font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; padding-inline: var(--kenar); }
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--eylem); text-decoration: none; }
a:hover { color: var(--metin); }
:focus-visible { outline: 2px solid var(--odak); outline-offset: 3px; border-radius: var(--yuvarlak-kucuk); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--baslik); margin: 0; text-wrap: balance; line-height: 1.1; }
h1 { font-size: clamp(38px, 5.4vw, 66px); letter-spacing: -.012em; font-weight: 400; }
h2 { font-size: clamp(28px, 3.4vw, 40px); }
h3 { font-size: 1.375rem; font-weight: 500; line-height: 1.25; }
h1 em, h2 em, .vur { font-style: italic; font-weight: 400; color: var(--p-turuncu-acik); }
p { margin: 0; }
p + p { margin-top: 1em; }
.olcu { max-width: var(--olcu-metin); }
.etiket { font: 600 0.71875rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--vurgu); }
.kunye { font: 400 0.8125rem/1.5 var(--sans); color: var(--metin-soluk); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.soluk { color: var(--metin-soluk); }
.gorsel { background-color: var(--baskin, var(--zemin-alt)); }
hr { border: 0; border-top: 1px solid var(--ayrac); margin: 0; }

/* ── kabuk ── */
.kap { max-width: var(--genislik); margin-inline: auto; }
header.ust { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--zemin) 88%, transparent); backdrop-filter: blur(10px); margin-inline: calc(-1 * var(--kenar)); padding-inline: var(--kenar); }
header.ust .kap { display: flex; align-items: center; gap: 26px; }
header.ust .ad { font: 400 1.125rem/1 var(--serif); color: var(--metin); letter-spacing: .01em; display: flex; align-items: center; gap: 11px; margin-right: auto; white-space: nowrap; }
header.ust .ad .diyafram-logo { width: 30px; height: 30px; flex: none; }
header.ust .arac { display: flex; align-items: center; gap: 6px; }
.tema-dugmesi { width: 40px; height: 40px; padding: 8px; border: 0; background: transparent; cursor: pointer; color: var(--vurgu); display: grid; place-items: center; border-radius: 50%; transition: transform var(--s-orta) var(--e-out); }
.tema-dugmesi:hover { transform: scale(1.15); }
.gunes-ay { width: 22px; height: 22px; display: block; }
.gunes-ay > :is(.ay, .gunes, .isinlar) { transform-origin: center; }
.gunes-ay > :is(.ay, .gunes) { fill: currentColor; }
.gunes-ay > .isinlar { stroke: currentColor; stroke-width: 2px; stroke-linecap: round; }
.gunes-ay > .gunes { transition: transform 0.5s cubic-bezier(0.5, 1.25, 0.75, 1.25); }
.gunes-ay > .isinlar { transition: transform 0.5s cubic-bezier(0.5, 1.5, 0.75, 1.25), opacity 0.5s cubic-bezier(0.25, 0, 0.3, 1); }
.gunes-ay .ay > circle { transition: transform 0.25s cubic-bezier(0, 0, 0, 1); }
:root:not([data-tema="acik"]) .gunes-ay > .gunes { transform: scale(1.75); transition-timing-function: cubic-bezier(0.25, 0, 0.3, 1); transition-duration: 0.25s; }
:root:not([data-tema="acik"]) .gunes-ay > .isinlar { opacity: 0; transform: rotateZ(-25deg); transition-duration: 0.15s; }
:root:not([data-tema="acik"]) .gunes-ay .ay > circle { transform: translateX(-7px); transition-delay: 0.25s; transition-duration: 0.5s; }
.menu-dugmesi { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; color: var(--metin); position: relative; z-index: 30; border-radius: 50%; }
.menu-dugmesi span { position: absolute; left: 12px; right: 12px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .35s var(--e-out), opacity .25s var(--e-out), top .35s var(--e-out); }
.menu-dugmesi span:nth-child(1) { top: 15px; } .menu-dugmesi span:nth-child(2) { top: 21px; } .menu-dugmesi span:nth-child(3) { top: 27px; }
html.menu-acik .menu-dugmesi span:nth-child(1) { top: 21px; transform: rotate(45deg); }
html.menu-acik .menu-dugmesi span:nth-child(2) { opacity: 0; transform: scaleX(0); }
html.menu-acik .menu-dugmesi span:nth-child(3) { top: 21px; transform: rotate(-45deg); }
/* tam ekran menü */
.menu-ortu { position: fixed; inset: 0; z-index: 20; background: color-mix(in srgb, var(--zemin) 94%, transparent); backdrop-filter: blur(18px); display: grid; grid-template-rows: 1fr auto; padding: clamp(64px, 12vh, 100px) var(--kenar) 32px; visibility: hidden; opacity: 0; transition: opacity .4s var(--e-out), visibility 0s .4s; overflow-y: auto; overflow-x: hidden; }
html.menu-acik .menu-ortu { visibility: visible; opacity: 1; transition: opacity .4s var(--e-out); }
.menu-ortu .arka { position: absolute; left: 50%; top: 42%; width: min(78vw, 560px); aspect-ratio: 1; transform: translate(-50%, -50%); color: var(--metin); opacity: .14; pointer-events: none; }
.menu-ortu .arka .diyafram-logo { width: 100%; height: 100%; }
.menu-ortu nav { display: flex; flex-direction: column; gap: 4px; position: relative; align-self: center; }
.menu-ortu nav a { font: 300 clamp(34px, 9vw, 56px)/1.15 var(--serif); color: var(--metin); padding: 6px 0; border-bottom: 1px solid var(--ayrac); display: flex; align-items: baseline; gap: 16px; }
.menu-ortu nav a small { font: 600 0.6875rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--vurgu); min-width: 20px; }
.menu-ortu nav a[aria-current="page"] { color: var(--p-turuncu-acik); }
.menu-ortu .alt-satir { position: relative; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 0.8125rem; color: var(--metin-soluk); }
.menu-ortu .alt-satir a { color: var(--metin); }
html.menu-acik, html.menu-acik body { overflow: hidden; }
html.menu-acik header.ust { z-index: 30; background: transparent; backdrop-filter: none; border-bottom-color: transparent; }
header.ust nav { display: flex; gap: 22px; flex-wrap: wrap; }
header.ust nav a { font: 600 0.71875rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--metin-soluk); padding-block: 6px; border-bottom: 1px solid transparent; }
header.ust nav a:hover, header.ust nav a[aria-current="page"] { color: var(--metin); border-color: var(--vurgu); }
main { display: block; }
section.bolum { padding-block: clamp(56px, 8vw, 104px); border-top: 1px solid var(--ayrac); }
section.bolum:first-child { border-top: 0; }
.bolum-bas { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-bottom: clamp(26px, 4vw, 44px); }
.bolum-bas .etiket { min-width: 120px; }
.bolum-bas h2 { flex: 1 1 auto; }
.bolum-bas .devam { font: 600 0.75rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--eylem); border-bottom: 1px solid var(--ayrac); padding-bottom: 5px; }
.bolum-bas .devam:hover { border-color: var(--vurgu); color: var(--metin); }

footer.alt { border-top: 1px solid var(--ayrac); padding-block: 40px 64px; margin-top: 40px; }
footer.alt .kap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px 40px; font-size: 0.875rem; }
footer.alt h3 { font: 400 1.625rem/1.15 var(--serif); margin-bottom: 10px; }
footer.alt dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; }
footer.alt dt { color: var(--metin-soluk); font-size: 0.75rem; letter-spacing: .08em; text-transform: uppercase; padding-top: 3px; }
footer.alt dd { margin: 0; }
footer.alt .imza { grid-column: 1 / -1; color: var(--metin-soluk); font-size: 0.78125rem; border-top: 1px solid var(--ayrac); padding-top: 16px; display: flex; gap: 18px; flex-wrap: wrap; }

/* ── açılış ── */
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(40px, 7vw, 96px) clamp(40px, 6vw, 80px); }
.hero .ucl { display: flex; gap: 14px; align-items: center; margin-bottom: 26px; }
.hero .ucl span { font: 600 0.75rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--vurgu); }
.hero .ucl i { width: 4px; height: 4px; border-radius: 50%; background: var(--metin-soluk); }
.hero .ad-buyuk { font: 800 clamp(26px, 3.2vw, 40px)/1 var(--display); letter-spacing: -.035em; color: var(--metin); margin-bottom: 14px; }
.hero h1 { margin-bottom: 22px; }
.hero h1 span { display: block; }
.hero .tanim { font-size: clamp(17px, 1.5vw, 19px); color: var(--metin); max-width: 52ch; font-family: var(--serif); line-height: 1.45; }
.hero .tanim2 { margin-top: 12px; color: var(--metin-soluk); max-width: 48ch; }
.hero .eylemler { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.dugme { display: inline-flex; align-items: center; gap: 12px; font: 600 0.9375rem/1 var(--sans); letter-spacing: -.005em; padding: 6px 6px 6px 22px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--metin) 18%, transparent); background: color-mix(in srgb, var(--zemin-alt) 60%, transparent); backdrop-filter: blur(8px); color: var(--metin); transition: border-color var(--s-orta) var(--e-out), color var(--s-orta) var(--e-out), background var(--s-orta) var(--e-out), transform var(--s-orta) var(--e-out); }
/* buton ucu: mercek halkası — içinde turuncu nokta, hover'da nokta halkayı doldurur (diyafram açılır) */
.dugme::after { content: ""; width: 36px; height: 36px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--metin) 22%, transparent); background: radial-gradient(circle, var(--vurgu) var(--nokta, 5px), transparent calc(var(--nokta, 5px) + .5px)); transition: --nokta .45s var(--e-out), border-color var(--s-orta) var(--e-out); }
@property --nokta { syntax: "<length>"; inherits: false; initial-value: 5px; }
.dugme:hover { border-color: color-mix(in srgb, var(--metin) 40%, transparent); color: var(--metin); transform: translateY(-1px); }
.dugme:hover::after { --nokta: 18px; border-color: var(--vurgu); }
.dugme.dolu { background: var(--eylem); color: var(--eylem-metin); border-color: var(--eylem); backdrop-filter: none; }
.dugme.dolu::after { border-color: color-mix(in srgb, var(--eylem-metin) 45%, transparent); background: radial-gradient(circle, var(--eylem-metin) var(--nokta, 5px), transparent calc(var(--nokta, 5px) + .5px)); }
.dugme.dolu:hover { background: var(--eylem-koyu); border-color: var(--eylem-koyu); color: var(--eylem-metin); }
.dugme.dolu:hover::after { border-color: var(--eylem-metin); }
.disa-baglanti.dugme { text-transform: none; letter-spacing: 0; font-size: 0.875rem; }
.disa-baglanti.dugme::after { content: ""; }
.mercek-kap { justify-self: end; width: min(100%, 440px); position: relative; }
.mercek { width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; position: relative; box-shadow: 0 0 0 1px var(--ayrac), 0 0 0 16px var(--zemin), 0 0 0 17px var(--ayrac), 0 30px 90px #00000080, 0 0 120px #ff8a1e26; }
.mercek picture { width: 100%; height: 100%; display: block; animation: nefes 9s cubic-bezier(.37, 0, .63, 1) infinite; transform-origin: center; }
@keyframes nefes { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@media (prefers-reduced-motion: reduce) { .mercek picture { animation: none; } }
.mercek img { width: 100%; height: 100%; object-fit: cover; }
.mercek-kap figcaption { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); white-space: nowrap; font: italic 0.875rem/1 var(--serif); color: var(--metin-soluk); }
.mercek-kap::before { content: ""; position: absolute; inset: -60px; border-radius: 50%; border: 1px solid var(--ayrac); opacity: .6; pointer-events: none; }
.mercek-kap::after { content: ""; position: absolute; inset: -110px; border-radius: 50%; border: 1px solid var(--ayrac); opacity: .3; pointer-events: none; }

/* ── üç kanal ── */
.kanallar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ayrac); border: 1px solid var(--ayrac); }
.kanal { background: var(--zemin-alt); padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 10px; position: relative; transition: background var(--s-orta) var(--e-out); }
.kanal:hover { background: var(--p-gece-3); }
.kanal .etiket { color: var(--metin-soluk); }
.kanal h3 { font-size: 1.5rem; }
.kanal p { color: var(--metin-soluk); font-size: 0.90625rem; flex: 1; }
.kanal .devam { font: 600 0.75rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--eylem); margin-top: 8px; }
.kanal::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-bottom: 2px solid var(--vurgu); transform: scaleX(0); transform-origin: left; transition: transform 350ms var(--e-out); }
.kanal:hover::after, .kanal:focus-within::after { transform: scaleX(1); }
.kanal a.ort { position: absolute; inset: 0; }

/* ── iş kartları ── */
.isler { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 22px; }
.is-kart { position: relative; display: flex; flex-direction: column; gap: 12px; }
.is-kart .cerceve { overflow: hidden; aspect-ratio: 4 / 5; background: var(--zemin-alt); }
.is-kart .cerceve img { width: 100%; height: 100%; object-fit: cover; }
.is-kart h3 { font-size: 1.25rem; }
.is-kart .kunye { transition: color var(--s-orta) var(--e-out); }
.is-kart a.ort { position: absolute; inset: 0; }
.is-kart.buyuk { grid-column: span 2; }
.is-kart.buyuk .cerceve { aspect-ratio: 16 / 10; }
.is-kart.buyuk h3 { font-size: 1.625rem; }

/* ── liste satırları (LABS'ın vizör listesi) ── */
.satirlar { border-top: 1px solid var(--ayrac); }
.satir { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--ayrac); position: relative; }
.satir img { width: 56px; height: 56px; object-fit: cover; border-radius: 50%; }
.satir h3 { font-size: 1.1875rem; }
.satir .kunye { white-space: nowrap; }
.satir.gorselsiz { grid-template-columns: minmax(0, 1fr); }
.satir a.ort { position: absolute; inset: 0; }
.satir:hover h3 { color: var(--p-turuncu-acik); }

/* ── zaman çizgisi ── */
.zaman { display: grid; grid-template-columns: 96px 1fr; gap: 0 28px; }
.zaman > div { display: contents; }
.zaman .yil { font: 500 0.9375rem/1.6 var(--serif); color: var(--vurgu); padding: 16px 0; border-top: 1px solid var(--ayrac); font-variant-numeric: tabular-nums; }
.zaman .ne { padding: 16px 0; border-top: 1px solid var(--ayrac); }
.zaman .ne :is(h2, h3) { font-size: 1.25rem; margin-bottom: 4px; font-weight: 600; line-height: 1.25; letter-spacing: normal; }   /* Üretimler sayfasında h2 (başlık sırası), ana sayfada h3 */
.zaman .ne .rol { color: var(--metin-soluk); font-size: 0.875rem; margin-bottom: 8px; }
.zaman .ne p { max-width: 62ch; font-size: 0.9375rem; }
.zaman .ne a.disa { font-size: 0.8125rem; }

/* ── sütunlar ── */
.sutun3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.sutun2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.sutun3 h3, .sutun2 h3 { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--ayrac); }
.sutun3 ul, .sutun2 ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; font-size: 0.9375rem; color: var(--metin-soluk); }


/* ── metin sayfaları ── */
.sayfa-bas { padding-block: clamp(40px, 6vw, 80px) clamp(28px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: end; }
.sayfa-bas .etiket { display: block; margin-bottom: 18px; }
.sayfa-bas .spot { font: 400 clamp(19px, 2vw, 24px)/1.45 var(--serif); color: var(--metin); max-width: 46ch; }
.metin { max-width: var(--olcu-metin); font-size: 1.0625rem; line-height: 1.7; }
.metin p + p { margin-top: 1.1em; }
.metin h2 { font-size: 1.875rem; margin: 2.2em 0 .6em; }
.metin ul { padding-left: 1.2em; }
.kunye-tablo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--ayrac); border-bottom: 1px solid var(--ayrac); margin: 0; }
.kunye-tablo div { padding: 14px 18px 14px 0; border-right: 1px solid var(--ayrac); }
.kunye-tablo div:last-child { border-right: 0; }
.kunye-tablo dt { font: 600 0.6875rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--metin-soluk); margin-bottom: 6px; }
.kunye-tablo dd { margin: 0; font: 400 1rem/1.3 var(--serif); }

/* ── iş sayfası ── */
.is-sayfa .kapak { margin: 0 0 clamp(28px, 4vw, 48px); }
.is-sayfa .kapak img { width: 100%; max-height: 82vh; object-fit: contain; object-position: left; background: transparent; }
.is-sayfa .govde { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 72px); margin-top: clamp(28px, 4vw, 48px); }
.surec { display: grid; gap: 22px; }
.surec figure { margin: 0; }
.surec figcaption { font: italic 0.875rem/1.4 var(--serif); color: var(--metin-soluk); margin-top: 8px; }
.surec.yanyana { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.video { aspect-ratio: 16 / 9; background: var(--zemin-alt); display: grid; place-items: center; color: var(--metin-soluk); font-size: 0.875rem; border: 1px solid var(--ayrac); }
.video.dikey { aspect-ratio: 9 / 16; max-width: 360px; }
.video iframe { width: 100%; height: 100%; border: 0; }
.onceki-sonraki { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--ayrac); padding-top: 22px; margin-top: clamp(40px, 6vw, 72px); font-family: var(--serif); font-size: 1.125rem; }
.onceki-sonraki span { display: block; font: 600 0.6875rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--metin-soluk); margin-bottom: 6px; }
.onceki-sonraki a:last-child { text-align: right; }

/* ── ızgara (seçilmiş üretimler) ── */
.izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.izgara figure { margin: 0; }
.izgara .cerceve { aspect-ratio: 1; overflow: hidden; background: var(--zemin-alt); }
.izgara img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--e-out); }
.izgara figure:hover img { transform: scale(1.03); }
.izgara figcaption { margin-top: 10px; font-size: 0.875rem; }
.izgara figcaption b { display: block; font: 400 1.0625rem/1.25 var(--serif); }
.izgara figcaption span { color: var(--metin-soluk); font-size: 0.8125rem; }

/* ── kanal sayfaları ── */
.maddeler { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--ayrac); border: 1px solid var(--ayrac); margin-top: 32px; }
.maddeler div { background: var(--zemin-alt); padding: 20px 22px; }
.maddeler h3 { font-size: 1.1875rem; margin-bottom: 6px; }
.maddeler p { font-size: 0.90625rem; color: var(--metin-soluk); }
.takvim { margin-top: 40px; border-top: 1px solid var(--ayrac); }
.takvim div { display: grid; grid-template-columns: 140px 1fr; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--ayrac); font-size: 0.9375rem; }
.takvim b { color: var(--vurgu); font-weight: 600; font-variant-numeric: tabular-nums; }
.disa-baglanti { display: inline-flex; gap: 8px; align-items: center; margin-top: 28px; font: 600 0.78125rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }

/* ── özgeçmiş ── */
.cv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 56px; }
.cv h3 { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--ayrac); }
.cv dl { margin: 0; display: grid; grid-template-columns: 72px 1fr; gap: 8px 16px; font-size: 0.9375rem; }
.cv dt { color: var(--vurgu); font-variant-numeric: tabular-nums; }
.cv dd { margin: 0; }
.cv ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; font-size: 0.9375rem; }


/* ── duyarlı ── */
@media (max-width: 960px) {
  .isler { grid-template-columns: repeat(2, 1fr); }
  .is-kart.buyuk { grid-column: span 2; }
  .sutun3 { grid-template-columns: 1fr 1fr; }
  .izgara { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  header.ust nav.masaustu { display: none; }
  .menu-dugmesi { display: block; }
}
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  .mercek-kap { justify-self: center; width: min(100%, 320px); margin-top: 24px; }
  .mercek-kap::after { display: none; }
  .kanallar { grid-template-columns: 1fr; }
  .sutun3, .sutun2, .cv, .sayfa-bas, .is-sayfa .govde { grid-template-columns: 1fr; }
  .zaman { grid-template-columns: 1fr; }
  .zaman .yil { padding-bottom: 0; }
  .zaman .ne { border-top: 0; padding-top: 6px; }
  .satir { grid-template-columns: 56px 1fr; gap: 6px 14px; }
  .satir .kunye, .satir .yil { grid-column: 2; }
  footer.alt .kap { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .isler, .izgara { grid-template-columns: 1fr; }
  .is-kart.buyuk { grid-column: auto; }
}

/* ══════════ Tur 2 (defter kararları): fontlar, erişim, işler ızgarası, masonry + lightbox, iş galerisi, kanal, üretimler, hakkında, iletişim şeridi, alt bilgi ══════════ */
html { scroll-padding-top: 84px; }
/* yalnız ekran okuyucuya metin (dış bağlantı, gizli başlık) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.kaydirmali-ekran:focus-visible { outline: 2px solid var(--odak); outline-offset: 2px; }
/* dokunmatikte küçük bağlantıların dokunma hedefi 44 px: görünüm değişmeden, sözde öğe alanı büyütür */
@media (pointer: coarse) {
  .alt-nav a, .alt-satir a, .ig-satir a, .geri a, .bolum-bas .devam, a.disa { position: relative; }
  .alt-nav a::before, .alt-satir a::before, .ig-satir a::before, .geri a::before, .bolum-bas .devam::before, a.disa::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
}
.atla { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--eylem); color: var(--eylem-metin); padding: 10px 14px; border-radius: 999px; font: 600 0.8125rem var(--sans); }
.atla:focus { top: 12px; }

/* yazı: Montserrat başlık, Helvetica gövde, Raleway etiket */
.hero h1 span:first-child, h1, h2, h3 { font-family: var(--display); }
h1 { font-weight: 600; letter-spacing: -.02em; }
h2 { font-weight: 600; letter-spacing: -.015em; }
h3 { font-weight: 600; }
h1 em, h2 em, .vur { font-family: var(--display); font-style: italic; font-weight: 500; }
.etiket, .kunye, .hero .ucl span, header.ust nav a, .bolum-bas .devam, .kanal .devam, .menu-ortu nav a small, .kunye-tablo dt, .kunye-liste dt, .zaman .yil, .takvim b, .cv dt { font-family: var(--etiket); }
.hero .tanim { font-family: var(--sans); font-size: clamp(16px, 1.35vw, 18px); line-height: 1.6; }
.mercek-kap figcaption, .surec figcaption, .slayt .alty, .izgara figcaption, .mo figcaption span { font-family: var(--sans); font-style: normal; }
header.ust .ad, footer.alt h3, .menu-ortu nav a, .kunye-tablo dd, .kunye-liste dd, .satir h3, .onceki-sonraki, .spot { font-family: var(--display); }
.menu-ortu nav a { font-weight: 500; font-size: clamp(28px, 7vw, 44px); }
.spot { font-weight: 400; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.5; }
.ad-buyuk { font-family: var(--display) !important; font-weight: 800 !important; letter-spacing: -.03em !important; }

/* liste işaretleri: uzun tire yerine turuncu kare */
.sutun3 li, .sutun2 li, .cv li { position: relative; padding-left: 18px; }
.sutun3 li::before, .sutun2 li::before, .cv li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; background: var(--vurgu); border-radius: 1px; }

/* telefonda mercek halkası butonlara değmesin */
@media (max-width: 760px) {
  .mercek-kap { margin-top: 44px; width: min(100%, 300px); }
  .mercek-kap::before { inset: -22px; opacity: .45; }
}

/* işler sayfası: iki sütun, kendi oranında; sanatçı metni */
.sanatci-metni { display: grid; grid-template-columns: minmax(220px, .6fr) minmax(0, 1.4fr); gap: 40px; padding: 8px 0 44px; border-bottom: 1px solid var(--ayrac); }
.sanatci-metni blockquote { margin: 0; padding-left: 18px; border-left: 2px solid var(--vurgu); align-self: start; }
.sanatci-metni blockquote p { font: italic 500 clamp(20px, 2vw, 26px)/1.35 var(--display); color: var(--metin); }
.sanatci-metni cite { display: block; margin-top: 10px; font: 400 0.8125rem var(--etiket); color: var(--metin-soluk); font-style: normal; }
.metin.sutunlu { max-width: none; columns: 2; column-gap: 40px; font-size: 0.96875rem; line-height: 1.65; }
.metin.sutunlu p { break-inside: avoid; }
/* seçili işler: dikey işler kendi oranında, iki sütun; telefonda tek sütun tam genişlik */
.secili-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 40px); }
.is-kart.buyuk { grid-column: auto; gap: 0; }
.is-kart.buyuk .cerceve.dogal { aspect-ratio: auto; background: none; }
.is-kart.buyuk .cerceve.dogal img { width: 100%; height: auto; object-fit: contain; display: block; transition: transform .7s var(--e-out); }
.is-kart.buyuk .cerceve.dogal a.lb { display: block; overflow: hidden; cursor: zoom-in; }
.is-kart.buyuk .cerceve.dogal a.lb:hover img { transform: scale(1.015); }
.is-kart .kart-metin { display: block; padding: 16px 0 6px; border-top: 1px solid var(--ayrac); margin-top: 16px; color: var(--metin); transition: border-color var(--s-orta) var(--e-out); }
.is-kart .kart-metin h3 { font-size: clamp(20px, 2vw, 26px); }
.is-kart .kart-metin .kunye { margin-top: 6px; }
.is-kart .kart-metin .git { color: var(--eylem); white-space: nowrap; }
.is-kart .kart-metin:hover, .is-kart .kart-metin:focus-visible { border-top-color: var(--vurgu); }
.is-kart .kart-metin:hover .git { text-decoration: underline; text-underline-offset: 3px; }
/* iş sayfasında dosyadan video (kendi sunucu) */
.slayt.video.dosya { aspect-ratio: auto; background: none; }
.slayt.video.dosya video { display: block; margin: 0 auto; width: auto; max-width: 100%; max-height: 78vh; height: auto; background: #000; }
.slayt.video.dosya.dikey { aspect-ratio: auto; max-height: none; width: auto; max-width: none; }
.slayt.video.dosya.dikey video { aspect-ratio: 9 / 16; width: min(100%, calc(78vh * 9 / 16)); height: auto; max-height: none; }
.galeri, .slaytlar { min-width: 0; }
.tumu[hidden] { display: none; }
html { overflow-anchor: none; }
.menu-ortu nav a small { font-variant-numeric: tabular-nums; }
/* satır içi video (projeler): bağlantıya basınca açılır */
.satir video { display: block; width: 100%; max-width: 480px; margin-top: 12px; background: #000; }
/* lightbox: telefonda alt bant küçük, görselin üstüne binmesin */
.glightbox-mobile .glightbox-container .gslide-description { max-height: 26vh !important; padding: 10px 14px 16px !important; font-size: 0.78125rem; background: linear-gradient(to bottom, rgba(19,16,25,0) 0, rgba(19,16,25,.88) 30%) !important; }
.glightbox-mobile .glightbox-container .gslide-title { font-size: 0.875rem !important; margin-bottom: 4px !important; }
.glightbox-mobile .glightbox-container .gslide-desc { font-size: 0.78125rem !important; line-height: 1.4 !important; }

/* masonry + lightbox */
.masonry { columns: 3; column-gap: 22px; }
.mo { break-inside: avoid; margin: 0 0 22px; }
.mo a.lb { display: block; overflow: hidden; background: var(--zemin-alt); cursor: zoom-in; }
.mo img { width: 100%; height: auto; transition: transform .6s var(--e-out); }
.mo a.lb:hover img { transform: scale(1.02); }
.mo figcaption { margin-top: 10px; font-size: 0.84375rem; }
.mo figcaption b { display: block; font: 600 0.9375rem/1.3 var(--display); }
.mo figcaption b a { color: var(--metin); }
.mo figcaption span { color: var(--metin-soluk); font-size: 0.8125rem; }
.tumu { margin-top: 18px; }
a.lb { cursor: zoom-in; }
.goverlay { background: rgba(19, 16, 25, .94) !important; }
.glightbox-clean .gslide-description { background: var(--zemin-alt) !important; color: var(--metin) !important; }
.glightbox-clean .gslide-title { font-family: var(--display) !important; color: var(--metin) !important; font-weight: 600; }
.glightbox-clean .gnext, .glightbox-clean .gprev, .glightbox-clean .gclose { background: var(--vurgu) !important; border-radius: 50% !important; }
.glightbox-clean .gnext:hover, .glightbox-clean .gprev:hover, .glightbox-clean .gclose:hover { background: var(--p-turuncu-acik) !important; }
.glightbox-clean .gclose svg, .glightbox-clean .gnext svg, .glightbox-clean .gprev svg { fill: #131019 !important; }

/* iş sayfası: solda kaydırmalı galeri, sağda künye */
.is-sayfa .geri { font: 600 0.78125rem/1 var(--etiket); letter-spacing: .08em; text-transform: uppercase; margin: 18px 0 22px; }
.is-ust { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.galeri { position: relative; }
.slaytlar { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.slaytlar::-webkit-scrollbar { display: none; }
.slayt { flex: 0 0 100%; scroll-snap-align: start; position: relative; }
.slayt a.lb { display: block; }
.slayt img { width: auto; max-width: 100%; height: auto; max-height: 78vh; background: none; }
.slayt.video { aspect-ratio: 16 / 9; background: var(--zemin-alt); }
.slayt.video.dikey { aspect-ratio: 9 / 16; max-height: 78vh; width: auto; }
.slayt.video iframe { width: 100%; height: 100%; border: 0; }
.slayt .alty { display: block; margin-top: 8px; font-size: 0.8125rem; color: var(--metin-soluk); }
.galeri-kontrol { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.noktalar { display: flex; gap: 8px; }
/* masaüstü okları: yalnız fare olan ortamda; 40 px hedef */
.gok { display: none; width: 40px; height: 40px; border: 1px solid var(--ayrac); border-radius: 50%; background: none; color: var(--metin-soluk); cursor: pointer; padding: 0; place-items: center; font: 400 1.125rem/1 var(--display); transition: color var(--s-orta) var(--e-out), border-color var(--s-orta) var(--e-out); }
.gok:hover { color: var(--metin); border-color: var(--vurgu); }
@media (hover: hover) { .gok { display: grid; } }
.noktalar button { width: 24px; height: 24px; border-radius: 50%; border: 0; background: none; cursor: pointer; padding: 0; display: grid; place-items: center; }
.noktalar button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--metin) 32%, transparent); transition: background var(--s-orta) var(--e-out), transform var(--s-orta) var(--e-out); }
.noktalar button[aria-current="true"]::before { background: var(--vurgu); transform: scale(1.25); }
.is-bilgi .etiket { display: block; margin-bottom: 14px; }
.is-bilgi h1 { font-size: clamp(30px, 3.4vw, 46px); margin-bottom: 16px; }
.is-bilgi .spot { color: var(--metin); }
.kunye-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; border-top: 1px solid var(--ayrac); padding-top: 18px; margin: 24px 0 0; }
.kunye-liste dt { font-size: 0.6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--metin-soluk); margin-bottom: 5px; font-weight: 600; }
.kunye-liste dd { margin: 0; font-size: 0.96875rem; line-height: 1.35; font-weight: 500; }
.ig-satir { margin-top: 22px; font-size: 0.875rem; }
.ig-satir .ig { font-weight: 600; }
.is-metin { margin-top: clamp(36px, 5vw, 64px); }
.is-metin p:first-child::first-letter { font-family: var(--display); font-weight: 600; font-size: 1.15em; }

/* kanal sayfaları */
.kanal-govde { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .85fr); gap: 40px; align-items: start; }
.kaydirmali-ekran { position: relative; margin: 0; max-height: 540px; overflow-y: auto; border: 1px solid var(--ayrac); background: var(--zemin-alt); scrollbar-width: thin; }
.kaydirmali-ekran img { width: 100%; height: auto; }
.ekran-dugme { position: sticky; bottom: 14px; float: right; margin: 14px; box-shadow: var(--golge-orta); }
.kanal-logo { color: var(--metin); display: grid; place-items: center; padding: 20px 0; }
.kanal-logo .diyafram-logo { width: min(100%, 420px); height: auto; }
.maddeler { grid-template-columns: repeat(3, 1fr); }
.baglantilar { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.rozet { width: 56px; height: 56px; border-radius: 50%; background: var(--zemin-alt); border: 1px solid var(--ayrac); display: grid; place-items: center; font: 600 1.25rem var(--display); color: var(--vurgu); }
.satir { grid-template-columns: 56px minmax(0, 1fr) auto; }
.satir .kunye { white-space: normal; }
.satir .aciklama { font-size: 0.84375rem; color: var(--metin-soluk); margin-top: 4px; }
.satir a.lb img { width: 56px; height: 56px; object-fit: cover; border-radius: 50%; }

/* üretimler: küçük resim sağda, tıklayınca büyük */
.ne-ic { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: start; }
figure.kucuk { margin: 0; }
figure.kucuk img { width: auto; height: auto; max-height: 240px; max-width: 220px; border: 1px solid var(--ayrac); }
figure.kucuk a.lb { display: block; transition: transform .35s var(--e-out); }
figure.kucuk a.lb:hover { transform: translateY(-2px); }

/* hakkında + özgeçmiş */
h2.ara { font: 600 0.75rem/1 var(--etiket); letter-spacing: .16em; text-transform: uppercase; color: var(--vurgu); margin: 2.2em 0 .9em; }
h2.ara:first-child { margin-top: .4em; }
.cv-serit { display: flex; flex-wrap: wrap; gap: 1px; background: var(--ayrac); border: 1px solid var(--ayrac); }
.cv-serit > * { flex: 1 1 190px; }
.cv-serit div { background: var(--zemin-alt); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; font-size: 0.875rem; }
.cv-serit b { font-family: var(--etiket); color: var(--vurgu); font-weight: 600; font-variant-numeric: tabular-nums; }
.cv-detay { margin-top: 22px; }
.cv-detay summary { list-style: none; display: inline-flex; cursor: pointer; }
.cv-detay summary::-webkit-details-marker { display: none; }
.cv-detay .cv { margin-top: 36px; }
.cv-kronoloji { margin-top: 44px; }
.cv-kronoloji > h3 { margin-bottom: 14px; }

/* iletişim şeridi */
.iletisim-serit { border-top: 1px solid var(--ayrac); background: var(--zemin-alt); margin-inline: calc(-1 * var(--kenar)); padding: clamp(40px, 6vw, 72px) var(--kenar); margin-top: 40px; }
.iletisim-serit .kap { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.serit-metin { font: 500 clamp(24px, 3vw, 38px)/1.2 var(--display); letter-spacing: -.02em; }
.serit-metin em { font-style: italic; color: var(--p-turuncu-acik); }
.serit-eylem { display: flex; gap: 12px; flex-wrap: wrap; }
.dugme small { font-weight: 400; opacity: .7; margin-left: 2px; }

/* alt bilgi (yeniden) */
footer.alt { border-top: 1px solid var(--ayrac); margin-top: 0; padding-block: 44px 36px; }
footer.alt .kap { display: block; }
.alt-ust { display: grid; grid-template-columns: 1.1fr 2fr; gap: 32px 48px; align-items: start; }
.alt-ad { display: flex; gap: 16px; align-items: center; color: var(--metin); }
.alt-ad .diyafram-logo { flex: none; }
.alt-ad b { display: block; font: 700 1.5rem/1.1 var(--display); letter-spacing: -.02em; }
.alt-ad span { display: block; margin-top: 6px; font: 600 0.71875rem/1 var(--etiket); letter-spacing: .14em; text-transform: uppercase; color: var(--vurgu); }
.alt-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.alt-nav div { display: flex; flex-direction: column; gap: 8px; }
.alt-nav small { font: 600 0.6875rem/1 var(--etiket); letter-spacing: .14em; text-transform: uppercase; color: var(--metin-soluk); margin-bottom: 4px; }
.alt-nav a { color: var(--metin); font-size: 0.90625rem; }
.alt-nav a:hover { color: var(--vurgu); }
footer.alt .imza { margin-top: 32px; }

@media (max-width: 960px) {
  .masonry { columns: 2; }
  .sanatci-metni { grid-template-columns: 1fr; }
  .metin.sutunlu { columns: 1; max-width: 64ch; }
  .is-ust { grid-template-columns: minmax(0, 1fr); }
  .kanal-govde { grid-template-columns: 1fr; }
  .maddeler { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .sanatci-metni, .is-ust, .alt-ust { grid-template-columns: minmax(0, 1fr); }
  .metin.sutunlu { columns: 1; }
  .secili-izgara { grid-template-columns: 1fr; gap: 40px; }
  .is-kart .kart-metin h3 { font-size: 1.25rem; line-height: 1.2; overflow-wrap: anywhere; }
  .slayt.video.dosya.dikey video { width: min(100%, calc(70vh * 9 / 16)); }
  .masonry { columns: 2; column-gap: 12px; }
  .mo { margin-bottom: 12px; }
  .mo figcaption { font-size: 0.75rem; }
  .masonry.kisalt:not(.acik) .mo:nth-child(n+5) { display: none; }
  .maddeler { grid-template-columns: 1fr; }
  .alt-nav { grid-template-columns: 1fr 1fr; }
  .kunye-liste { gap: 12px 16px; }
  .ne-ic { grid-template-columns: 1fr; }
  figure.kucuk img { max-height: 160px; max-width: 100%; }
  .slayt img { max-height: 70vh; }
}
@media (max-width: 480px) { .alt-nav { grid-template-columns: 1fr; } }

@media (max-height: 520px) { .menu-ortu nav a { font-size: 1.375rem; padding-block: 4px; } }

/* ══════════ Tur 5: tanım listesi, kırpılmış seçili kartlar, Hakkında portre sütunu ══════════ */
dl.tanimlar { margin: 32px 0 0; border-top: 1px solid var(--ayrac); }
.tanimlar > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 6px 20px; padding: 12px 0; border-bottom: 1px solid var(--ayrac); }
.tanimlar dt { font: 600 0.9375rem/1.4 var(--display); color: var(--metin); }
.tanimlar dd { margin: 0; font-size: 0.9375rem; color: var(--metin-soluk); }
.is-kart.buyuk.kirp .cerceve.dogal { aspect-ratio: 4 / 5; }
.is-kart.buyuk.kirp .cerceve.dogal a.lb { height: 100%; }
.is-kart.buyuk.kirp .cerceve.dogal img { height: 100%; object-fit: cover; }
.hakkinda-govde { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }
.portre-sutun { position: sticky; top: 96px; }
.portre { margin: 0; }
.portre-halka { width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 1px solid var(--ayrac); box-shadow: 0 0 0 10px color-mix(in srgb, var(--vurgu) 12%, transparent); }
.portre-halka img, .portre-halka picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.simdi-kart { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--ayrac); }
.simdi-kart p { margin-top: 8px; font-size: 0.9375rem; line-height: 1.6; color: var(--metin-soluk); }
@media (max-width: 960px) {
  .hakkinda-govde { grid-template-columns: 1fr; }
  .portre-sutun { position: static; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: center; }
  .simdi-kart { margin-top: 0; padding-top: 0; border-top: 0; }
  .tanimlar > div { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 520px) { .portre-sutun { grid-template-columns: 1fr; } .portre { max-width: 220px; } }

/* Tur 6: tek yetenek listesi */
.tek-liste { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 40px; max-width: 880px; font-size: .9375rem; color: var(--metin-soluk); }
.tek-liste li { position: relative; padding: 5px 0 5px 18px; break-inside: avoid; }
.tek-liste li::before { content: ""; position: absolute; left: 0; top: .95em; width: 7px; height: 7px; background: var(--vurgu); border-radius: 1px; }
@media (max-width: 760px) { .tek-liste { columns: 1; } }

/* ── kaynak/hareket.css ── */
/* HAREKET — yalnız hareket kuralları. Renk, köşe, gölge YOK (tema dosyasında).
   Tüm eğriler --e-out. JS yoksa (html.js yok) ve reduced-motion'da her şey görünür başlar.
   1 Açılış (ana sayfa .hero) · 2 Mercek izleme (JS) · 3 Kaydırınca belirme ·
   4 İş kartı hover · 5 Sayfa geçişi (view transition) · 6 Üst çubuk küçülme */

:where(:root) { --e-out: cubic-bezier(.23, 1, .32, 1); }

/* ---- 1. Açılış: diyafram + sıralı belirme (yalnız html.js + hareket tercihi açık) ---- */
@media (prefers-reduced-motion: no-preference) {
  html.js .hero .mercek {
    animation: diyafram 900ms var(--e-out) both;
  }
  html.js .hero .belir {
    animation: belir 600ms var(--e-out) both;
    animation-delay: calc(var(--i, 0) * 120ms);
  }
  /* Aynı oturumda ikinci ziyaret (JS html'e acilis-gordu verir): açılış atlanır, her şey yerinde başlar */
  html.js.acilis-gordu .hero .mercek,
  html.js.acilis-gordu .hero .belir { animation: none; }
  @keyframes diyafram {
    from { clip-path: circle(0%); }
    to   { clip-path: circle(50%); }
  }
  @keyframes belir {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---- 2. Mercek: JS transform yazar; img taşmasın diye %8 büyük durur ---- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html.js .mercek { will-change: transform; }
  html.js .mercek img { transform: scale(1.08); }
}

/* ---- 3. Kaydırınca belirme ---- */
html.js [data-belir] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s var(--e-out), transform .6s var(--e-out);
  transition-delay: calc(var(--i, 0) * 80ms);   /* kardeşler kademeli (JS --i verir) */
}
html.js [data-belir].gorunur { opacity: 1; transform: none; }
html:not(.js) [data-belir] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-belir] { opacity: 1; transform: none; transition: none; }
}

/* ---- 4. İş kartı hover / focus-within ---- */
.is-kart { position: relative; }
.is-kart :is(figure, picture) { overflow: hidden; }
.is-kart img { transition: transform .6s var(--e-out); }
.is-kart .kunye { transition: color var(--s-orta, 250ms) var(--e-out); }
.is-kart::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--e-out);
}
.is-kart:hover img,
.is-kart:focus-within img { transform: scale(1.03); }
.is-kart:hover .kunye,
.is-kart:focus-within .kunye { color: var(--vurgu); }
.is-kart:hover::after,
.is-kart:focus-within::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .is-kart img, .is-kart .kunye, .is-kart::after { transition: none; }
}

/* ---- 5. Sayfa geçişi: 250 ms çapraz karartma, üst çubuk sabit ---- */
@view-transition { navigation: auto; }
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: 250ms;
  animation-timing-function: var(--e-out);
}
header.ust { view-transition-name: ust; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation-duration: 0ms; }
}

/* ---- 6. Üst çubuk: 40 px sonra küçülür (dolgu azalır, alt çizgi belirir) ---- */
header.ust {
  --ust-dolgu: 1.25rem;                  /* tema isterse üzerine yazar */
  padding-block: var(--ust-dolgu);
  border-bottom: 1px solid transparent;
  transition: padding-block var(--s-orta, 250ms) var(--e-out),
              border-color var(--s-orta, 250ms) var(--e-out);
}
header.ust.kucuk {
  --ust-dolgu: .6rem;
  border-bottom-color: var(--ayrac);
}

/* ---- 7. Tam ekran menü: logo yukarıdan perspektifle kayarak gelir, bağlantılar kademeli ---- */
.menu-ortu .arka .diyafram-logo { transform: perspective(900px) rotateX(55deg) translateY(-40%) scale(.8); opacity: 0; transition: transform .9s var(--e-out), opacity .6s var(--e-out); }
html.menu-acik .menu-ortu .arka .diyafram-logo { transform: perspective(900px) rotateX(0) translateY(0) scale(1); opacity: 1; transition-delay: .05s; }
.menu-ortu nav a { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--e-out), transform .5s var(--e-out); }
html.menu-acik .menu-ortu nav a { opacity: 1; transform: none; transition-delay: calc(.12s + var(--i, 0) * 60ms); }
@media (prefers-reduced-motion: reduce) {
  .menu-ortu .arka .diyafram-logo, .menu-ortu nav a { transition: none; transform: none; }
  html.menu-acik .menu-ortu .arka .diyafram-logo { opacity: 1; }
}

/* ── kaynak/diyafram-logo.css ── */
/* Diyafram logosu — "Nefes" jesti + hafif odak (labs.artcycle.co header'ı ile birebir).
   Kullanım: SVG'ye data-hareket="acik" ver. Renk: sarmalayan öğenin "color" değeri
   (turuncu nokta sabit #ff8c00). Blur boyuta bağlı: --diyafram-blur-tepe = genişlik × 0.011 px
   (52 px'te 0.572px; SVG'nin style'ında hazır). */
:root {
  --ease-sinus: cubic-bezier(0.37, 0, 0.63, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --sure-hover: 300ms;
}

.diyafram-logo {
  display: block;
  overflow: visible;
  transform-origin: center;
}

.diyafram-kanatlar path,
.diyafram-dis,
.diyafram-ic {
  transform-box: view-box;
  transform-origin: 400px 400px;
}

.diyafram-nokta {
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes diyafram-kanat {
  0% {
    transform: rotate(0deg);
    stroke-width: 18;
  }
  14% {
    transform: rotate(14deg);
    stroke-width: 20;
  }
  25.5% {
    transform: rotate(-2.5deg);
    stroke-width: 19;
  }
  34.5%,
  100% {
    transform: rotate(0deg);
    stroke-width: 18;
  }
}

@keyframes diyafram-ic {
  0%,
  34.5%,
  100% {
    stroke-width: 23;
  }
  14% {
    stroke-width: 30;
  }
}

@keyframes diyafram-dis {
  0%,
  34.5%,
  100% {
    stroke-width: 26;
  }
  14% {
    stroke-width: 29;
  }
}

@keyframes diyafram-govde {
  0% {
    transform: rotate(0deg) scale(1);
  }
  10.3% {
    transform: rotate(-1.1deg) scale(1.022);
  }
  22.4% {
    transform: rotate(0.5deg) scale(0.992);
  }
  34.5%,
  100% {
    transform: rotate(0deg) scale(1);
  }
}

@keyframes diyafram-nokta {
  0% {
    transform: translate(0, 0) scale(1);
  }
  9.7% {
    transform: translate(-7px, 5px) scale(1.06);
  }
  20.7% {
    transform: translate(3px, -2px) scale(0.97);
  }
  34.5%,
  100% {
    transform: translate(0, 0) scale(1);
  }
}

/*
 * Döngü 8,4 s; jest ilk 2,9 s'de bitiyor (%34,5) ve kalan 5,5 s logo tamamen
 * duruyor. Sürekli kıpırdayan bir logo dikkati sürekli çalar.
 */
.diyafram-logo[data-hareket='acik'] .diyafram-kanatlar path {
  animation: diyafram-kanat 8.4s var(--ease-sinus) infinite;
}
.diyafram-logo[data-hareket='acik'] .diyafram-ic {
  animation: diyafram-ic 8.4s var(--ease-sinus) infinite;
}
.diyafram-logo[data-hareket='acik'] .diyafram-dis {
  animation: diyafram-dis 8.4s var(--ease-sinus) infinite;
}
/*
 * Odak — Uğur "hafif"i seçti (13.09.2026). Anahtar kareler kanat eğrisiyle
 * AYNI anlarda (%14 tepe, %25,5 aşma): kanatlar ne kadar dönmüşse odak o kadar
 * kaçmış. İlk denemede blur hareketten önce zirve yapıyordu ve ayrı bir olay
 * gibi dikkat çekiyordu. Tepe = boyutun %1,1'i × 0,45 (bileşen boyuttan
 * türetiyor), yani 52 px'lik header'da ~0,26 px — görülmekten çok hissediliyor.
 */
/* 2026-09-16 (T1.3): filter: blur() her karede yeniden boyanıyordu (560 px menü kopyasında pahalı);
   aynı anlarda aynı "hafif" duyguyu opacity ile veriyor. --diyafram-blur-tepe artık kullanılmıyor. */
@keyframes diyafram-odak {
  0%,
  34.5%,
  100% {
    opacity: 1;
  }
  14% {
    opacity: 0.93;
  }
  25.5% {
    opacity: 0.98;
  }
}

.diyafram-logo[data-hareket='acik'] {
  animation:
    diyafram-govde 8.4s var(--ease-sinus) infinite,
    diyafram-odak 8.4s var(--ease-sinus) infinite;
}
.diyafram-logo[data-hareket='acik'] .diyafram-nokta {
  animation: diyafram-nokta 8.4s var(--ease-sinus) infinite;
}

.diyafram-logo[data-hareket='acik'] .diyafram-kanatlar path:nth-child(1) {
  animation-delay: 0ms;
}
.diyafram-logo[data-hareket='acik'] .diyafram-kanatlar path:nth-child(2) {
  animation-delay: 34ms;
}
.diyafram-logo[data-hareket='acik'] .diyafram-kanatlar path:nth-child(3) {
  animation-delay: 68ms;
}
.diyafram-logo[data-hareket='acik'] .diyafram-kanatlar path:nth-child(4) {
  animation-delay: 102ms;
}
.diyafram-logo[data-hareket='acik'] .diyafram-kanatlar path:nth-child(5) {
  animation-delay: 0ms;
}
.diyafram-logo[data-hareket='acik'] .diyafram-kanatlar path:nth-child(6) {
  animation-delay: 34ms;
}
.diyafram-logo[data-hareket='acik'] .diyafram-kanatlar path:nth-child(7) {
  animation-delay: 68ms;
}
.diyafram-logo[data-hareket='acik'] .diyafram-kanatlar path:nth-child(8) {
  animation-delay: 102ms;
}

/* Hover: nefes yok, tek ve kararlı bir kapanma. */
.diyafram-logo .diyafram-kanatlar path {
  transition: transform var(--sure-hover) var(--ease-out-expo);
}
a:hover .diyafram-logo .diyafram-kanatlar path,
.diyafram-logo:hover .diyafram-kanatlar path {
  animation: none;
  transform: rotate(20deg);
}

/* Elle sürülen açıklık (0 = açık, 1 = kapalı) — geçiş senkronu için. */
.diyafram-logo[data-aciklik] .diyafram-kanatlar path {
  animation: none;
  transform: rotate(calc(var(--aciklik) * 24deg));
}

/* Menü örtüsü kapalıyken içindeki büyük kopya görünmüyor; animasyon boşa çalışmasın. */
html:not(.menu-acik) .menu-ortu .diyafram-logo,
html:not(.menu-acik) .menu-ortu .diyafram-logo * {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .diyafram-logo,
  .diyafram-logo * {
    animation: none !important;
    transition: none !important;
  }
}