/* ===========================================================================
   komp.css — K · KIRIK IZGARA   (v3, 19.09.2026)
   Tek dosya, tek başına çalışır. Görsel dosyası yok: bütün doku, gren ve ışık
   SVG feTurbulence + radial-gradient + @keyframes ile üretilir.

   İMZA HAREKETİ — "taşkın": her bölümde en az bir öğe ızgara kenarını ya da
   komşu bölümü aşar. Izgara kılavuzu (12 ince dikme) krem kâğıtta görünür
   bırakıldı ki ızgaranın kırıldığı gözle görülsün.
   =========================================================================== */

/* ---------------------------------------------------------------- 0. temel */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --zemin:      #F7F4EE;
  --kagit-2:    #EFEBE1;      /* krem kâğıdın ikinci tonu */
  --murekkep:   #17150F;
  --murekkep-2: #4A463C;
  --murekkep-3: #7A7568;
  --cizgi:      #DCD6C8;
  --kilavuz:    rgba(23,21,15,.085);

  --vurgu:      #1F3A8A;

  /* üç dokulu alanın tonları — hepsi aynı rengin türevi, neon yok */
  --alan-1: color-mix(in oklab, var(--vurgu) 78%, #0B0A08);   /* hero: derin */
  --alan-2: color-mix(in oklab, var(--vurgu) 20%, var(--zemin)); /* orta: solgun */
  --alan-3: color-mix(in oklab, var(--vurgu) 92%, #0B0A08);   /* çağrı: gece */
  --alan-metin: #F4EEE0;      /* dokulu alan üstündeki yazı */
  --isik-1: color-mix(in oklab, var(--vurgu) 44%, #FFF6E2);
  --isik-2: color-mix(in oklab, var(--vurgu) 12%, #FFFBF0);

  --yt-manset: "Old Standard TT", Georgia, serif;
  --yt-govde:  "Archivo", system-ui, -apple-system, sans-serif;

  --kenar-sol: 7vw;   /* ızgara bilerek ortalanmadı */
  --kenar-sag: 3.5vw;
  --sutun-ara: 1.6vw;

  --m-dev:   clamp(44px, 8.4vw, 116px);
  --m-buyuk: clamp(34px, 5.4vw, 74px);
  --m-orta:  clamp(26px, 3.4vw, 46px);
  --gov:     18px;
  --etiket:  11px;

  color-scheme: light;
}

html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--zemin);
  color: var(--murekkep);
  font-family: var(--yt-govde);
  font-size: var(--gov);
  line-height: 1.58;
  font-synthesis: none;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------------------------------------------- 1. gren ve ışık (kodla) --- */
/* Tek karo 240 px. seed değişkenli sekiz karo; canlı gren üç katmanın
   sırayla yanıp sönmesiyle kuruluyor (opaklık animasyonu — her yerde çalışır). */
:root {
  --gren-1: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .62 0'/></filter><rect width='240' height='240' filter='url(%23g)'/></svg>");
  --gren-2: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' seed='17' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .62 0'/></filter><rect width='240' height='240' filter='url(%23g)'/></svg>");
  --gren-3: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' seed='41' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .62 0'/></filter><rect width='240' height='240' filter='url(%23g)'/></svg>");
  --gren-kaba: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='g' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='.021' numOctaves='4' seed='9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .5 0'/></filter><rect width='420' height='420' filter='url(%23g)'/></svg>");
}

.alan {
  position: relative;
  isolation: isolate;
  background-color: var(--alan-1);
  color: #F4EEE0;
  overflow: clip;
}
/* kaba bulut dokusu — yavaş süzülür, nefes alır */
.alan::before {
  content: ""; position: absolute; inset: -14%;
  background-image: var(--gren-kaba);
  background-size: 620px 620px;
  mix-blend-mode: overlay;
  opacity: .62;
  animation: doku-suzul 68s linear infinite, doku-nefes 31s ease-in-out infinite alternate;
  will-change: transform, opacity;
  pointer-events: none; z-index: 1;
}
/* ince gren — sabit katman, hep görünür (hareket dursa da kalır) */
.alan::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--gren-1);
  background-size: 240px 240px;
  mix-blend-mode: overlay;
  opacity: .52;
  pointer-events: none; z-index: 3;
}

/* Dokulu alan bir bant değil, sayfanın üstünde duran bir ŞEKİL:
   kenarlarından biri ya da ikisi sayfayı aşar, biri krem kâğıt bırakır. */
.sekil {
  position: absolute;
  z-index: 0;
  top: var(--st, 0); bottom: var(--sb, 0);
  left: var(--sl, 0); right: var(--sr, 0);
  height: var(--sh, auto);   /* --sb: auto ile birlikte kesin yükseklik */
}
/* BİR ŞEKLİN KENARINI KESEN METİN — karışım değil, tam kesim.
   Gradyanın sert durağı görünüm penceresine sabitlendiği (background-attachment:
   fixed) için kesim tam şeklin dikey kenarına oturur ve renk hiçbir dalda kaymaz.
   NOT: mix-blend-mode: difference denendi ve bırakıldı — krem metin ultramarin/
   kobalt üstünde sıcak kreme dönüyor ama petrol yeşilinde PEMBE, vermilyonda
   CAMGÖBEĞİ üretiyor; tek vurgu rengi kuralını kendiliğinden bozuyordu. */
.kesim { color: var(--murekkep); }              /* destek yoksa: düz mürekkep */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  /* Kesim öğesi ızgaranın tamamını kaplar (--ks:1 --kb:13) ve arka plan kutusu
     negatif kenar boşluklarıyla SAYFA GENİŞLİĞİNE eşitlenir; böylece gradyanın
     sert durağı doğrudan şeklin vw cinsinden kenarıdır. Metnin başladığı ve
     bittiği yer --kp-sol / --kp-sag ile ayarlanır.
     (background-attachment: fixed denendi ve BIRAKILDI: gradyan görünüm
     penceresine göre konumlandığı için sayfanın altındaki öğelerde metin
     tamamen kayboluyordu — tam sayfa çiziminde ölçüldü.) */
  .kesim {
    margin-left: calc(-1 * var(--kenar-sol));
    margin-right: calc(-1 * var(--kenar-sag));
    padding-left: var(--kp-sol, var(--kenar-sol));
    padding-right: var(--kp-sag, var(--kenar-sag));
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(to right,
      var(--murekkep) 0 var(--kx, 34vw), var(--alan-metin) var(--kx, 34vw) 100%);
  }
  /* şekil SOLDA: önce krem, kenardan sonra mürekkep */
  .kesim--ters {
    background-image: linear-gradient(to right,
      var(--alan-metin) 0 var(--kx, 56vw), var(--murekkep) var(--kx, 56vw) 100%);
  }
  .hero__manset.kesim { grid-column: 1 / 13; }
}

/* gezinen ışık sızıntısı: iki katman, ayrı hız ve yön */
.isik { position: absolute; inset: -30%; pointer-events: none; z-index: 2; }
.isik i {
  position: absolute; inset: 0; display: block;
  mix-blend-mode: screen;
  will-change: transform;
}
.isik i:nth-child(1) {
  background:
    radial-gradient(38% 46% at 26% 30%, color-mix(in oklab, var(--isik-1) 70%, transparent) 0%, transparent 68%);
  animation: sizinti-a 47s ease-in-out infinite;
}
.isik i:nth-child(2) {
  background:
    radial-gradient(44% 34% at 74% 66%, color-mix(in oklab, var(--isik-2) 46%, transparent) 0%, transparent 70%);
  animation: sizinti-b 63s ease-in-out infinite;
}
.isik i:nth-child(3) {
  background:
    radial-gradient(26% 52% at 52% 14%, color-mix(in oklab, var(--isik-1) 38%, transparent) 0%, transparent 72%);
  animation: sizinti-c 38s ease-in-out infinite;
}

/* canlı gren — yalnız hero'da: üç seed sırayla yanıp söner (~9 fps) */
.canli { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.canli b {
  position: absolute; inset: 0; display: block;
  background-size: 240px 240px;
  mix-blend-mode: overlay;
  opacity: 0;
  animation: gren-cirp .33s steps(1, end) infinite;
}
.canli b:nth-child(1) { background-image: var(--gren-1); animation-delay: 0s; }
.canli b:nth-child(2) { background-image: var(--gren-2); animation-delay: .11s; }
.canli b:nth-child(3) { background-image: var(--gren-3); animation-delay: .22s; }

@keyframes gren-cirp { 0% { opacity: .2; } 33.33% { opacity: 0; } 100% { opacity: 0; } }
@keyframes doku-suzul {
  0%   { background-position: 0 0; }
  100% { background-position: 620px -420px; }
}
@keyframes doku-nefes { from { opacity: .36; } to { opacity: .62; } }
@keyframes sizinti-a {
  0%   { transform: translate3d(-9%, -5%, 0) scale(1.05); }
  50%  { transform: translate3d(12%, 9%, 0)  scale(1.28); }
  100% { transform: translate3d(-9%, -5%, 0) scale(1.05); }
}
@keyframes sizinti-b {
  0%   { transform: translate3d(8%, 6%, 0)   scale(1.18); }
  50%  { transform: translate3d(-11%, -8%, 0) scale(1.02); }
  100% { transform: translate3d(8%, 6%, 0)   scale(1.18); }
}
@keyframes sizinti-c {
  0%   { transform: translate3d(0, 0, 0)     scale(1.1); }
  50%  { transform: translate3d(-14%, 11%, 0) scale(1.34); }
  100% { transform: translate3d(0, 0, 0)     scale(1.1); }
}

/* krem kâğıdın kendi greni — sabit, sessiz; yapışkan katman yok */
.kagit-gren {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--gren-1);
  background-size: 240px 240px;
  opacity: .085;
  mix-blend-mode: multiply;
}

/* ------------------------------------------------------- 2. kırık ızgara --- */
.bolum {
  position: relative;
  overflow-x: clip;         /* yatay taşkın kırpılır */
  overflow-y: visible;      /* dikey sarkma korunur  */
  z-index: 1;
}
.izgara {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--sutun-ara);
  padding-left: var(--kenar-sol);
  padding-right: var(--kenar-sag);
  position: relative;
}
/* 12 dikmelik kılavuz — ızgaranın kırıldığı görünsün diye */
.kilavuz { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.kilavuz::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: var(--kenar-sol); right: var(--kenar-sag);
  background-image: repeating-linear-gradient(
    to right, var(--kilavuz) 0 1px, transparent 1px calc(100% / 12));
}

/* yerleşim yardımcıları: her öğe kendi sütun aralığını yazar */
.y { grid-column: var(--ks, 1) / var(--kb, 13); position: relative; z-index: 2; }
.ust  { margin-top: var(--ust, 0); }
.kaydir { transform: translateY(var(--kay, 0)); }

/* taşkınlar */
/* sağ taşkın: öğe ızgara kenarını aşıp sayfa kenarına dayanır — metin KESİLMEZ.
   (Kesilerek taşan tek şey bölüm numarası; o da süs.) */
.tasan-sag  { margin-right: calc(-1 * var(--kenar-sag)); }
.tasan-sol  { margin-left:  calc(-1 * var(--kenar-sol) - 6vw); }
.kenara     { margin-left:  calc(-1 * var(--kenar-sol)); }   /* sayfa kenarına yaslanır, kırpılmaz */
.sarkan     { margin-bottom: var(--sark, -120px); z-index: 6; }
.bolum--ustte { z-index: 4; }

/* ------------------------------------------------------ 3. tipografi ------ */
h1, h2, h3 { margin: 0; font-family: var(--yt-manset); font-weight: 700; }
h1 {
  font-size: var(--m-dev);
  line-height: .93;
  letter-spacing: -.028em;
  text-wrap: balance;
}
h2 {
  font-size: var(--m-buyuk);
  line-height: 1.0;
  letter-spacing: -.024em;
}
h3 { font-size: var(--m-orta); line-height: 1.08; letter-spacing: -.018em; }
.egik { font-style: italic; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.etiket {
  font-family: var(--yt-govde);
  font-size: var(--etiket);
  letter-spacing: .2em;
  font-weight: 600;
  color: var(--murekkep-3);
  display: inline-block;
}
.alan .etiket { color: color-mix(in oklab, #F4EEE0 66%, transparent); }
.spot { font-size: clamp(19px, 1.5vw, 23px); line-height: 1.45; color: var(--murekkep-2); }
.alan .spot { color: color-mix(in oklab, #F4EEE0 84%, transparent); }
.kucuk { font-size: 14px; line-height: 1.5; color: var(--murekkep-3); }
.alan .kucuk { color: color-mix(in oklab, #F4EEE0 62%, transparent); }
.mono-no {
  font-family: var(--yt-govde);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* dikey künye — sayfanın sol kenarında döner (taşkın imzasının parçası) */
.dik {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: var(--etiket);
  letter-spacing: .28em;
  font-weight: 600;
  color: var(--murekkep-3);
  white-space: nowrap;
}
.dik--ters { writing-mode: vertical-rl; transform: rotate(180deg); }

/* ------------------------------------------------------------- 4. hero --- */
.hero {
  position: relative;
  z-index: 1;
  background: var(--zemin);
  padding: clamp(40px, 6vw, 90px) 0 clamp(40px, 6vw, 90px);
  min-height: clamp(640px, 94svh, 1020px);
  display: grid;
  align-content: center;
  overflow-x: clip;
}
.hero__izgara {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--sutun-ara);
  row-gap: clamp(18px, 2.6vw, 38px);
  padding-left: var(--kenar-sol);
  padding-right: var(--kenar-sag);
  align-items: center;
}
/* dokulu alan: sayfanın sağ-üst köşesini tutan bir ŞEKİL; üstten ve sağdan
   taşar, solda 34vw'lik krem kâğıt şeridi bırakır */
.hero__alan {
  position: absolute;
  top: 0; bottom: 0;
  left: 34vw;
  right: -8vw;
  z-index: 0;
}
/* aynalanmış hero: şekil SOL kenarı aşar, krem kâğıt sağda kalır */
.hero__alan--sol { left: -8vw; right: 44vw; }
.hero__alan--alt { left: 30vw; right: -8vw; bottom: clamp(70px, 9vw, 150px); }
.hero__alan--dar { left: -8vw; right: 56vw; }
.hero__alan--genis { left: 22vw; right: -8vw; }
.hero__ok--koyu { color: var(--murekkep-3) !important; }

/* manşet: 1. sütundan başlar → şeklin SOL kenarını keser, bir kısmı krem
   kâğıtta kalır. difference karışımıyla tek metin iki zeminde de okunur ve
   altından ışık sızıntısı geçtikçe rengi nefes alır. */
.hero__manset {
  grid-column: 1 / 12;
  grid-row: 1;
  z-index: 5;
  padding-right: 2vw;
}
.hero__kunye {
  grid-column: 1 / 4;
  grid-row: 2;
  z-index: 6;
}
.hero__ok {
  position: absolute;
  right: var(--kenar-sag);
  bottom: clamp(20px, 3vw, 44px);
  z-index: 6;
  font-size: 12px;
  letter-spacing: .18em;
  font-weight: 600;
  color: color-mix(in oklab, #F4EEE0 68%, transparent);
  text-align: right;
}
.hero__ok span { display: block; font-size: 26px; line-height: 1; margin-top: 6px;
  animation: ok-in 3.8s ease-in-out infinite; }
@keyframes ok-in { 0%,100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(7px); opacity: 1; } }

/* hero'nun sol kenarındaki dikey künye şeridi */
.kenar-dik--sag { left: auto !important; right: calc(var(--kenar-sag) * .3); }
.kenar-dik {
  position: absolute;
  left: calc(var(--kenar-sol) * .22);
  top: 0; bottom: 0;
  display: flex; align-items: center;
  z-index: 7;
}

/* --------------------------------------------------- 5. bölüm bileşenleri */
.bolum--kagit { background: var(--zemin); }
.bolum--kagit2 { background: var(--kagit-2); }

/* numaralı bölüm işareti — sol kenardan yarı yarıya taşar ve kırpılır */
.bolum-no {
  position: absolute;
  left: calc(-1 * clamp(18px, 2.6vw, 44px));
  top: var(--no-ust, 0);
  font-family: var(--yt-manset);
  font-size: clamp(96px, 14vw, 230px);
  line-height: .76;
  font-weight: 700;
  color: color-mix(in oklab, var(--vurgu) 24%, transparent);
  z-index: 1;
  pointer-events: none;
  letter-spacing: -.05em;
}

/* kayıt satırı: her satır farklı sütunda başlar */
.kayit {
  display: block;
  text-decoration: none;
  border-top: 1px solid var(--cizgi);
  padding-top: 14px;
  padding-bottom: clamp(20px, 2.6vw, 38px);
  position: relative;
}
.kayit__no {
  position: absolute;
  left: -2.6em; top: 14px;
  font-size: 12px; font-weight: 700;
  color: var(--vurgu);
  font-variant-numeric: tabular-nums;
}
.kayit h3 { margin: 4px 0 8px; transition: color .2s; }
.kayit:hover h3 { color: var(--vurgu); }
.kayit__kaynak {
  font-size: 13.5px; color: var(--murekkep-3);
  border-left: 2px solid var(--vurgu);
  padding-left: 10px; display: inline-block; margin-top: 4px;
}

/* dev rakam / alıntı alanı */
.rakam {
  font-family: var(--yt-manset);
  font-size: clamp(120px, 23vw, 330px);
  line-height: .78;
  letter-spacing: -.055em;
  font-weight: 700;
  display: block;
}

/* küçük dokulu kutular (mozaik değil — boyları ve hizaları bilerek eşitsiz) */
.kutu {
  padding: clamp(20px, 2.2vw, 34px);
  background: var(--zemin);
  border: 1px solid var(--cizgi);
  position: relative;
}
.kutu--dolu {
  border: 0;
  background: var(--alan-2);
  color: var(--murekkep);
}
.kutu--koyu { border: 0; }
.kutu h3 { margin-bottom: 10px; }

/* düğme — sayfada en çok bir iki tane */
.dugme {
  display: inline-block;
  font-family: var(--yt-govde);
  font-size: 14px; font-weight: 600; letter-spacing: .04em;
  padding: 11px 20px;
  border: 1px solid currentColor;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.dugme:hover { background: currentColor; }
.dugme:hover span { color: var(--alan-1); }
.alan .dugme { color: #F4EEE0; }

/* aile şeridi — kompozisyona gömülü, klasik şerit değil */
.aile { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: baseline; }
.aile a { text-decoration: none; font-size: 15px; font-weight: 600; opacity: .62; }
.aile a:hover { opacity: 1; }
.aile a[aria-current] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* dağınık gezinme: bar değil, ızgaraya serpilmiş */
.gezinme { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.gezinme a {
  font-size: 14.5px; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.gezinme a:hover { border-bottom-color: var(--vurgu); }

/* künye / hukuk — son bölümün içine gömülü */
.yasal { font-size: 12.5px; line-height: 1.55; color: var(--murekkep-3); }
.alan .yasal { color: color-mix(in oklab, #F4EEE0 55%, transparent); }

.cizgi-ince { border: 0; border-top: 1px solid var(--cizgi); margin: 0; }

/* ------------------------------------------------------------ 6. telefon -- */
@media (max-width: 860px) {
  :root {
    --kenar-sol: 22px; --kenar-sag: 16px; --sutun-ara: 8px;
    --m-dev: clamp(40px, 12vw, 54px);
    --m-buyuk: clamp(30px, 8.4vw, 42px);
    --m-orta: 23px;
    --gov: 17px;
  }
  .izgara, .hero__izgara { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kilavuz::before { background-image: repeating-linear-gradient(
    to right, var(--kilavuz) 0 1px, transparent 1px calc(100% / 6)); }
  /* tek sütuna iner ama üst üste binme korunur */
  .y { grid-column: var(--mks, 1) / var(--mkb, 7); }
  .hero { min-height: 90svh; padding-top: 34px; }
  .hero__alan { left: 18%; right: -16px; top: 0; bottom: 0; }
  .hero__alan--sol { left: -22px; right: 22%; }
  .hero__alan--alt { left: 20%; right: -16px; bottom: 0; }
  .hero__alan--dar { left: -22px; right: 34%; }
  .hero__alan--genis { left: 14%; right: -16px; }
  /* telefonda tam taşma: krem şerit kalmaz, krem metnin kâğıda düşme riski biter */
  .hero__alan--mtam { left: -22px !important; right: -16px !important; }
  .hero__kunye .iz, .hero__kunye .iz a { color: color-mix(in oklab, #F4EEE0 62%, transparent); }
  .hero__manset { grid-column: 1 / 7; padding-right: 0; }
  .hero__kunye { grid-column: 2 / 7; grid-row: 2; }
  .hero__kunye .kucuk { color: color-mix(in oklab, #F4EEE0 74%, transparent); }
  .hero__ok { right: 16px; bottom: 16px; }
  .sekil {
    top: var(--mst, var(--st, 0)); bottom: var(--msb, var(--sb, 0));
    left: var(--msl, var(--sl, 0)); right: var(--msr, var(--sr, 0));
    height: var(--msh, var(--sh, auto));
  }
  .kenar-dik { left: 3px; }
  .kenar-dik--sag { right: 2px; }
  .tasan-sag { margin-right: -16px; }
  .tasan-sol { margin-left: -22px; }
  .kenara { margin-left: -22px; }
  .sarkan { margin-bottom: var(--sark-m, -56px); }
  .bolum-no { left: -14px; font-size: 76px; opacity: .55; }
  /* kesim noktası telefonda başka yerde: --mkx varsa o kullanılır */
  .kesim { padding-left: var(--kenar-sol); padding-right: var(--kenar-sag);
    background-image: linear-gradient(to right,
      var(--murekkep) 0 var(--mkx, var(--kx, 18%)), var(--alan-metin) var(--mkx, var(--kx, 18%)) 100%); }
  .kesim--ters { background-image: linear-gradient(to right,
      var(--alan-metin) 0 var(--mkx, var(--kx, 78%)), var(--murekkep) var(--mkx, var(--kx, 78%)) 100%); }
  .hero__manset.kesim { grid-column: 1 / 7; }
  /* telefonda üst üste binme korunur ama ÇAKIŞMA olmaz: açık satırlar sıfırlanır */
  .satir-sifirla { grid-row: auto !important; }
  .ust { margin-top: var(--must, var(--ust, 0)); }
  .yalniz-masaustu { display: none !important; }
  .kayit__no { position: static; display: block; margin-bottom: 2px; }
  .rakam { font-size: clamp(92px, 34vw, 150px); line-height: .95; }  /* telefonda glif taşmasın */
}

/* ----------------------------------------------- 7. hareket tercihi ------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
  }
  .alan::before { opacity: .5; }
  .canli b:nth-child(1) { opacity: .2; }   /* gren sabit ama görünür kalır */
}

/* ===========================================================================
   EK SAYFALAR (19.09.2026) — o4 arşiv, o2 yazı, o3 kayıt, o5 katıl.
   Yalnız EKLEME: yukarıdaki hiçbir kural değiştirilmedi, dört ana sayfa
   aynen çalışır. İmza (taşkın + kesim + kılavuz) iç sayfalarda da geçerli.
   =========================================================================== */

/* --- okuma kolonu: ortalanmaz, ızgarada bilerek yana kaçar --------------- */
.kolon { max-width: 66ch; }
.kolon p, .kolon li { font-size: 19px; line-height: 1.68; margin: 0 0 1.1em; }
.kolon > h3 {
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.12;
  margin: clamp(30px, 3.4vw, 54px) 0 14px;
}
.kolon strong, .kolon b { font-weight: 700; }
.kolon em { font-style: italic; }
.kolon a { color: var(--vurgu); text-underline-offset: 3px; }
.dipnot {
  font-size: .62em; vertical-align: super; line-height: 0;
  color: var(--vurgu); text-decoration: none; font-weight: 700;
  font-family: var(--yt-govde);
}
.dinkus { text-align: center; color: var(--murekkep-3); letter-spacing: .6em;
  margin: clamp(26px,3vw,44px) 0; font-size: 14px; }

/* kenar notu — okuma kolonunun dışına taşan kutu */
.kenar-not {
  border-left: 3px solid var(--vurgu);
  padding: 4px 0 4px 18px;
  font-size: 17px; line-height: 1.55; color: var(--murekkep-2);
}

/* --- alıntı posteri: dokulu şekil, okuma kolonunu kırar ------------------ */
.poster { padding: clamp(28px, 3.4vw, 56px) clamp(24px, 3vw, 48px); }
.poster q, .poster p.soz {
  display: block; quotes: none;
  font-family: var(--yt-manset); font-weight: 600; font-style: italic;
  font-size: clamp(24px, 3.1vw, 44px); line-height: 1.16; letter-spacing: -.018em;
  margin: 0;
}
.poster cite { display: block; font-style: normal; font-family: var(--yt-govde);
  font-size: 13.5px; line-height: 1.5; margin-top: 18px;
  color: color-mix(in oklab, #F4EEE0 66%, transparent); }

/* --- kanıt düzeyi çubuğu (o4) ------------------------------------------- */
.dagilim { display: flex; height: 26px; overflow: hidden; }
.dagilim span { display: block; height: 100%; }
.dagilim i { display: block; height: 100%;
  background: color-mix(in oklab, var(--vurgu) var(--yog, 100%), var(--zemin)); }
.k-kutu { border-top: 2px solid var(--vurgu); padding-top: 12px; }
.k-kutu b { display: block; font-family: var(--yt-manset); font-size: clamp(26px,2.8vw,42px);
  line-height: 1; font-weight: 700; }
.k-kutu u { display: block; text-decoration: none; font-size: 11px; letter-spacing: .16em;
  font-weight: 700; color: var(--vurgu); margin: 8px 0 6px; }

/* --- eksen çubukları (o4) ----------------------------------------------- */
.eksen { display: grid; grid-template-columns: 2.6em 1fr auto; gap: 12px;
  align-items: center; padding: 9px 0; border-bottom: 1px solid var(--cizgi); }
.eksen u { text-decoration: none; font-size: 11px; letter-spacing: .1em; font-weight: 700;
  color: var(--vurgu); }
.eksen s { text-decoration: none; display: block; height: 10px;
  background: color-mix(in oklab, var(--vurgu) 78%, var(--zemin)); width: var(--o, 10%); }
.eksen b { font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; }
.eksen em { font-style: normal; font-size: 14px; color: var(--murekkep-2); }

/* --- sicil (o4): portre yok, isim bandı + resmî sıfat -------------------- */
.sicil { border-top: 1px solid var(--cizgi); padding-top: 14px; }
.sicil b { display: block; font-family: var(--yt-manset); font-weight: 700;
  font-size: clamp(19px, 1.9vw, 26px); line-height: 1.12; }
.sicil span { display: block; font-size: 14px; line-height: 1.45; color: var(--murekkep-2); margin-top: 6px; }
.sicil small { display: block; font-size: 12.5px; color: var(--murekkep-3); margin-top: 8px;
  font-variant-numeric: tabular-nums; }

/* --- kaynak listesi (o3, o2) -------------------------------------------- */
.kaynaklar { list-style: none; margin: 0; padding: 0; counter-reset: kk; }
.kaynaklar li { counter-increment: kk; border-top: 1px solid var(--cizgi);
  padding: 14px 0 16px 2.4em; position: relative; font-size: 15.5px; line-height: 1.55; }
.kaynaklar li::before { content: counter(kk); position: absolute; left: 0; top: 14px;
  font-family: var(--yt-govde); font-size: 12px; font-weight: 700; color: var(--vurgu);
  font-variant-numeric: tabular-nums; }
.kaynaklar a.uc { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .04em;
  border: 1px solid var(--cizgi); padding: 5px 10px; margin: 10px 8px 0 0;
  text-decoration: none; color: var(--murekkep-2); }
.kaynaklar a.uc:hover { border-color: var(--vurgu); color: var(--vurgu); }

/* --- zincir (o3 dosyanın geçmişi) --------------------------------------- */
.zincir { list-style: none; margin: 0; padding: 0; }
.zincir li { border-left: 2px solid var(--cizgi); padding: 0 0 22px 20px; position: relative; }
.zincir li::before { content: ""; position: absolute; left: -5px; top: 6px; width: 8px; height: 8px;
  background: var(--cizgi); }
.zincir li[aria-current]::before { background: var(--vurgu); }
.zincir li[aria-current] { border-left-color: var(--vurgu); }
.zincir u { text-decoration: none; display: block; font-family: var(--yt-govde); font-size: 12px;
  letter-spacing: .1em; font-weight: 700; color: var(--vurgu); margin-bottom: 5px; }
.zincir p { margin: 0; font-size: 16px; line-height: 1.5; }
.zincir small { display: block; font-size: 12.5px; color: var(--murekkep-3); margin-top: 5px; }

/* --- sürüm satırları ----------------------------------------------------- */
.surum { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
  border-top: 1px solid var(--cizgi); padding: 11px 0; font-size: 14.5px; }
.surum b { font-family: var(--yt-govde); font-size: 11.5px; letter-spacing: .12em;
  font-weight: 700; color: var(--vurgu); }

/* --- form (o5 katıl): 44 px kontroller ----------------------------------- */
.alan-grubu { display: grid; gap: 18px; }
.alan-grubu label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; }
.girdi, select.girdi {
  display: block; width: 100%; min-height: 44px;
  padding: 11px 13px; font: inherit; font-size: 16px;
  color: var(--murekkep); background: var(--zemin);
  border: 1px solid var(--cizgi); border-radius: 0;
}
.girdi:focus-visible, .onay input:focus-visible, .dugme:focus-visible {
  outline: 2px solid var(--vurgu); outline-offset: 2px;
}
.ipucu { font-size: 13px; color: var(--murekkep-3); margin-top: 6px; }
.onay { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start;
  padding: 11px 0; font-size: 15px; line-height: 1.5; }
.onay input { width: 24px; height: 24px; margin: 0; accent-color: var(--vurgu); }
.adim { display: grid; grid-template-columns: 2.2em 1fr; gap: 14px; align-items: start;
  padding: 14px 0; border-top: 1px solid var(--cizgi); }
.adim b { font-family: var(--yt-manset); font-size: clamp(24px,2.4vw,34px); line-height: .9;
  font-weight: 700; color: var(--vurgu); }
.adim p { margin: 0; font-size: 15.5px; line-height: 1.55; }

/* --- iç sayfa üst şeridi: gezinme değil, iz (breadcrumb) ---------------- */
.iz { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 12.5px;
  letter-spacing: .06em; color: var(--murekkep-3); }
.iz a { text-decoration: none; }
.iz a:hover { color: var(--vurgu); }

@media (max-width: 860px) {
  .kolon p, .kolon li { font-size: 17.5px; }
  .poster q, .poster p.soz { font-size: clamp(21px, 6.2vw, 28px); }
  .eksen { grid-template-columns: 2.4em 1fr auto; }
  .kolon { max-width: none; }
}

/* iç sayfa açılışı: hero'nun kısası (başlık sahnesi) */
.hero--kisa { min-height: clamp(520px, 76svh, 820px); }
@media (max-width: 860px) { .hero--kisa { min-height: clamp(440px, 64svh, 620px); } }