/* ============================================================================
   komp.css — S · SAHNELER  (v3, 19.09.2026)
   Her bölüm tam ekran bir sahne. Kaydırma = sahne değişimi (scroll-snap).
   Her sahnede tek fikir, tek büyük yazı, kendi dokulu rengi; doku kodla üretilir
   (SVG feTurbulence gren + radial-gradient ışık), hiçbir görsel dosya yok.
   Işık lekesi sahneden sahneye taşınır: sayfa üstünde duran tek bir sabit ışık
   katmanı, sahne değiştikçe yeni çapasına 1,5 s'de süzülür.
   Sayfa tek başına çalışır: yalnız bu dosya + Google Fonts.
   ========================================================================== */

/* --- taşınan ışık için kayıtlı değişkenler (geçiş yapabilsinler diye) ------ */
@property --ix        { syntax: "<percentage>"; inherits: true; initial-value: 72%; }
@property --iy        { syntax: "<percentage>"; inherits: true; initial-value: 24%; }
@property --isik-ton  { syntax: "<color>";      inherits: true; initial-value: rgba(255, 226, 190, .55); }
@property --isik-guc  { syntax: "<number>";     inherits: true; initial-value: .34; }
@property --ui-ton    { syntax: "<color>";      inherits: true; initial-value: #F7F1E7; }

/* ---------------------------------------------------------------- 1 · kök -- */
:root {
  --kagit:      #F7F4EE;          /* krem kâğıt */
  --kagit-2:    #EFE9DD;
  --murekkep:   #17150F;
  --murekkep-2: #46423A;
  --murekkep-3: #6B6556;
  --ters:       #FBF7F0;          /* koyu alan üstündeki yazı */
  --ters-2:     rgba(251, 247, 240, .82);
  --ters-3:     rgba(251, 247, 240, .62);

  --yt-govde:  "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --yt-manset: Georgia, "Times New Roman", serif;

  /* manşet karakteri — dal geçersiz kılar */
  --manset-agirlik: 700;
  --manset-aralik: -.02em;
  --manset-satir: 1.02;
  --manset-eksen: normal;

  --egri:  cubic-bezier(.22, .61, .36, 1);
  --sure:  1500ms;                 /* sahne geçişinde ışığın süzülme süresi */

  /* gren: ince kum + yumuşak bulut — ikisi ters yönde çok yavaş kayar */
  --gren-ince: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='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='180' height='180' filter='url(%23g)'/></svg>");
  --gren-bulut: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='620' height='620'><filter id='b' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='.009' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='620' height='620' filter='url(%23b)'/></svg>");

  color-scheme: light;
}

/* ------------------------------------------------------- 2 · dal kimlikleri */
/* Dal yalnız vurgu ailesini ve manşet yazı tipini değiştirir; iskelet aynıdır. */

[data-dal="o1"] {                                   /* Muasır — ultramarin */
  --vurgu:       #1F3A8A;
  --vurgu-acik:  #465FB8;
  --vurgu-derin: #101B46;
  --vurgu-solgun:#D4D9EE;
  --koyu:        #111320;
  --isik-sicak:  rgba(206, 216, 255, .46);
  --isik-kagit:  rgba(31, 58, 138, .13);
  --yt-manset: "Old Standard TT", Georgia, serif;
  --manset-agirlik: 700;
  --manset-aralik: -.012em;
}
[data-dal="o2"] {                                   /* Onuncu Yıl — kobalt */
  --vurgu:       #14489B;
  --vurgu-acik:  #3C6DC4;
  --vurgu-derin: #0C2A5E;
  --vurgu-solgun:#D1DCF1;
  --koyu:        #0C1220;
  --isik-sicak:  rgba(198, 222, 255, .50);
  --isik-kagit:  rgba(20, 72, 155, .13);
  --yt-manset: "Fraunces", Georgia, serif;
  --manset-agirlik: 800;
  --manset-aralik: -.026em;
  --manset-eksen: "opsz" 144, "SOFT" 52, "WONK" 1;
}
[data-dal="o3"] .sahne[data-alan="kagit"] { --s-isik-2: rgba(236, 245, 241, .92); }
[data-dal="o3"] {                                   /* Bir Satır — petrol yeşili */
  --kagit:       #FCFBF8;                            /* beyaz–krem arası */
  --kagit-2:     #F1F0EA;
  --vurgu:       #14594B;
  --vurgu-acik:  #38806F;
  --vurgu-derin: #0A322A;
  --vurgu-solgun:#CFE3DB;
  --koyu:        #0B1513;
  --isik-sicak:  rgba(190, 240, 220, .40);
  --isik-kagit:  rgba(20, 89, 75, .12);
  --yt-manset: "Fraunces", Georgia, serif;
  --manset-agirlik: 700;
  --manset-aralik: -.03em;
  --manset-eksen: "opsz" 144, "SOFT" 18, "WONK" 0;
}
[data-dal="o5"] {                                   /* Sayıyoruz — vermilyon */
  --vurgu:       #C33A22;
  --vurgu-acik:  #DB6446;
  --vurgu-derin: #7C2113;
  --vurgu-solgun:#EECDBE;
  --koyu:        #20100C;
  --isik-sicak:  rgba(255, 206, 160, .52);
  --isik-kagit:  rgba(195, 58, 34, .13);
  --yt-manset: "Fraunces", Georgia, serif;
  --manset-agirlik: 900;
  --manset-aralik: -.03em;
  --manset-eksen: "opsz" 144, "SOFT" 70, "WONK" 1;
}

/* ----------------------------------------------------------- 3 · iskelet -- */
* { box-sizing: border-box; }

html {
  scroll-snap-type: y mandatory;      /* İMZA: kaydırma = sahne değişimi */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--kagit);
  color: var(--murekkep);
  font-family: var(--yt-govde);
  font-size: 18px;
  line-height: 1.55;
  overflow-x: hidden;
  /* sabit arayüzün ve taşınan ışığın anlık değerleri — JS bunları günceller */
  --ix: 72%; --iy: 24%;
  --isik-ton: rgba(255, 226, 190, .5);
  --isik-guc: .34;
  --ui-ton: var(--ters);
  transition: --ix var(--sure) var(--egri), --iy var(--sure) var(--egri),
              --isik-ton var(--sure) var(--egri), --isik-guc var(--sure) var(--egri),
              --ui-ton 900ms var(--egri);
}
::selection { background: var(--vurgu); color: #fff; }

a { color: inherit; }
h1, h2, h3, p, blockquote, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.gizli {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* -------------------------------------------------------------- 4 · sahne - */
.sahne {
  position: relative;
  min-height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  align-content: center;
  padding: clamp(68px, 11vh, 118px) clamp(18px, 7vw, 112px) clamp(64px, 10vh, 104px);
  isolation: isolate;
  overflow: clip;
  color: var(--s-murekkep, var(--murekkep));
}
.ic { width: min(100%, 1240px); margin-inline: auto; position: relative; z-index: 1; }
.ic--dar { width: min(100%, 980px); }

/* sahne numarası: karenin köşesinde duran soluk rakam — kaçıncı kareyiz */
.sahne::after {
  content: attr(data-no);
  position: absolute; z-index: 0; pointer-events: none;
  top: clamp(44px, 7.5vh, 86px); right: clamp(42px, 7vw, 108px);
  font-family: var(--yt-manset); font-variation-settings: var(--manset-eksen);
  font-weight: var(--manset-agirlik); font-size: clamp(2.6rem, 6.4vw, 7rem);
  line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums;
  color: var(--s-murekkep); opacity: .11;
}

/* kareyi nereye yaslıyoruz — sahneden sahneye değişir, ritim düzleşmesin */
.sahne--baslik { align-content: end; padding-bottom: clamp(104px, 17vh, 188px); }
.sahne--kapanis { align-content: end; }
.sahne--merkez .ic { text-align: center; justify-items: center; }

/* --- sahnenin kendi dokulu rengi ------------------------------------------ */
.doku { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--s-zemin); }
.doku::before, .doku::after { content: ""; position: absolute; inset: -30%; pointer-events: none; }
.doku::before {                                   /* ince kum: nefes alan gren */
  background-image: var(--gren-ince);
  background-size: 180px 180px;
  opacity: var(--s-gren, .17);
  mix-blend-mode: var(--s-gren-blend, overlay);
  animation: gren-kay 58s linear infinite, gren-nefes 27s ease-in-out infinite;
}
.doku::after {                                    /* yumuşak bulut: ton dalgası */
  background-image: var(--gren-bulut);
  background-size: 620px 620px;
  opacity: var(--s-bulut, .28);
  mix-blend-mode: var(--s-bulut-blend, soft-light);
  animation: bulut-kay 96s linear infinite, gren-nefes 41s ease-in-out infinite reverse;
}
/* --- sahnenin iki ışık lekesi (ayrı hızlarda gezer) ----------------------- */
.doku i {
  position: absolute;
  width: 92vmax; height: 92vmax;
  margin: -46vmax 0 0 -46vmax;
  border-radius: 50%;
  mix-blend-mode: var(--s-isik-blend, screen);
  pointer-events: none;
  /* will-change yok: Chromium etkin transform animasyonunu zaten katmana alır.
     Sekiz sahne × iki leke elle yükseltilseydi yüzlerce MB katman belleği ederdi. */
}
.doku i:nth-child(1) {
  left: var(--bx1, 76%); top: var(--by1, 22%);
  background: radial-gradient(closest-side, var(--s-isik-1) 0%, rgba(255,255,255,0) 72%);
  animation: gez-a 54s ease-in-out infinite alternate;
}
.doku i:nth-child(2) {
  left: var(--bx2, 20%); top: var(--by2, 82%);
  width: 64vmax; height: 64vmax; margin: -32vmax 0 0 -32vmax;
  background: radial-gradient(closest-side, var(--s-isik-2) 0%, rgba(255,255,255,0) 70%);
  animation: gez-b 72s ease-in-out infinite alternate;
}

/* --- ışık çapaları: sahneden sahneye el değiştiren yer -------------------- */
[data-isik="sol-ust"]  .doku { --bx1: 22%; --by1: 20%; --bx2: 74%; --by2: 78%; }
[data-isik="sag-ust"]  .doku { --bx1: 78%; --by1: 20%; --bx2: 24%; --by2: 76%; }
[data-isik="sol-alt"]  .doku { --bx1: 22%; --by1: 80%; --bx2: 76%; --by2: 22%; }
[data-isik="sag-alt"]  .doku { --bx1: 80%; --by1: 78%; --bx2: 26%; --by2: 20%; }
[data-isik="orta"]     .doku { --bx1: 50%; --by1: 46%; --bx2: 86%; --by2: 86%; }
[data-isik="ust-orta"] .doku { --bx1: 52%; --by1: 12%; --bx2: 14%; --by2: 88%; }
[data-isik="alt-orta"] .doku { --bx1: 48%; --by1: 88%; --bx2: 84%; --by2: 14%; }

/* --- alan türleri: dört ton + krem kâğıt ---------------------------------- */
.sahne[data-alan="kagit"] {
  --s-zemin: linear-gradient(168deg, var(--kagit) 0%, var(--kagit-2) 100%);
  --s-murekkep: var(--murekkep); --s-ikincil: var(--murekkep-2); --s-ucuncul: var(--murekkep-3);
  --s-isik-1: var(--isik-kagit); --s-isik-2: rgba(255, 238, 206, .85);
  --s-isik-blend: multiply; --s-gren: .085; --s-gren-blend: multiply;
  --s-bulut: .20; --s-bulut-blend: soft-light;
  --s-cizgi: rgba(23,21,15,.16); --s-vurgu: var(--vurgu);
  --s-isik-ton: rgba(255, 236, 206, .40); --s-isik-guc: .18; --s-ui: var(--murekkep);
}
.sahne[data-alan="vurgu"] {
  --s-zemin: linear-gradient(158deg, var(--vurgu-acik) 0%, var(--vurgu) 52%, var(--vurgu-derin) 100%);
  --s-murekkep: var(--ters); --s-ikincil: var(--ters-2); --s-ucuncul: var(--ters-3);
  --s-isik-1: var(--isik-sicak); --s-isik-2: rgba(255,255,255,.16);
  --s-gren: .20; --s-gren-blend: overlay; --s-bulut: .34;
  --s-cizgi: rgba(251,247,240,.34); --s-vurgu: var(--ters);
  --s-isik-ton: var(--isik-sicak); --s-isik-guc: .46; --s-ui: var(--ters);
}
.sahne[data-alan="vurgu-derin"] {
  --s-zemin: linear-gradient(200deg, var(--vurgu) 0%, var(--vurgu-derin) 62%, var(--koyu) 100%);
  --s-murekkep: var(--ters); --s-ikincil: var(--ters-2); --s-ucuncul: var(--ters-3);
  --s-isik-1: var(--isik-sicak); --s-isik-2: rgba(255,255,255,.12);
  --s-gren: .22; --s-gren-blend: overlay; --s-bulut: .38;
  --s-cizgi: rgba(251,247,240,.30); --s-vurgu: var(--ters);
  --s-isik-ton: var(--isik-sicak); --s-isik-guc: .52; --s-ui: var(--ters);
}
.sahne[data-alan="vurgu-solgun"] {
  --s-zemin: linear-gradient(168deg, var(--vurgu-solgun) 0%, color-mix(in oklab, var(--vurgu) 34%, var(--kagit)) 100%);
  --s-murekkep: var(--murekkep); --s-ikincil: var(--murekkep-2); --s-ucuncul: var(--murekkep-3);
  --s-isik-1: color-mix(in oklab, var(--vurgu) 22%, transparent); --s-isik-2: rgba(255, 252, 244, .92);
  --s-isik-blend: multiply; --s-gren: .10; --s-gren-blend: multiply;
  --s-bulut: .26; --s-bulut-blend: soft-light;
  --s-cizgi: rgba(23,21,15,.2); --s-vurgu: var(--vurgu);
  --s-isik-ton: rgba(255, 238, 212, .42); --s-isik-guc: .22; --s-ui: var(--murekkep);
}
.sahne[data-alan="koyu"] {
  --s-zemin: linear-gradient(186deg, var(--koyu) 0%, #000 120%);
  --s-murekkep: var(--ters); --s-ikincil: var(--ters-2); --s-ucuncul: var(--ters-3);
  --s-isik-1: var(--isik-sicak); --s-isik-2: rgba(255,255,255,.10);
  --s-gren: .24; --s-gren-blend: overlay; --s-bulut: .30;
  --s-cizgi: rgba(251,247,240,.24); --s-vurgu: var(--vurgu-acik);
  --s-isik-ton: var(--isik-sicak); --s-isik-guc: .50; --s-ui: var(--ters);
}

/* ----------------------------------------- 5 · sahneden sahneye taşınan ışık */
.tasinan-isik {
  position: fixed; inset: 0; z-index: 4; pointer-events: none;
  mix-blend-mode: screen;
  opacity: var(--isik-guc);
  background: radial-gradient(42vmax 38vmax at var(--ix) var(--iy),
              var(--isik-ton) 0%, rgba(255,255,255,0) 72%);
}

/* ------------------------------------------------------- 6 · sabit arayüz -- */
.kunye-ust {
  position: fixed; z-index: 6; top: clamp(16px, 3vh, 30px); left: clamp(16px, 4vw, 44px);
  color: var(--ui-ton);
  font-size: 12px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  text-decoration: none; line-height: 1.5; mix-blend-mode: normal;
}
.kunye-ust b { font-weight: 700; letter-spacing: .1em; }
.kunye-ust span { display: block; font-weight: 400; letter-spacing: .1em; opacity: .62; font-size: 11px; }

/* sahne künyesi (klaket): kaçıncı sahnedeyiz */
.klaket {
  position: fixed; z-index: 6; left: clamp(16px, 4vw, 44px); bottom: clamp(16px, 3vh, 30px);
  color: var(--ui-ton);
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  display: flex; align-items: baseline; gap: 10px;
}
.klaket b { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.klaket span { opacity: .6; font-weight: 500; }
.klaket i { font-style: normal; opacity: .38; }

/* sağda nokta gezinmesi */
.gezinme {
  position: fixed; z-index: 7; right: clamp(10px, 2.4vw, 30px); top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 14px; align-items: flex-end;
}
.gezinme a {
  display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  text-decoration: none; color: var(--ui-ton); padding: 3px 0;
}
.gezinme .ad {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; transform: translateX(6px);
  transition: opacity 260ms var(--egri), transform 260ms var(--egri);
}
.gezinme .nokta {
  width: 7px; height: 7px; border-radius: 99px; background: currentColor; opacity: .34;
  transition: opacity 320ms var(--egri), height 420ms var(--egri), width 320ms var(--egri);
}
.gezinme a:hover .ad, .gezinme a:focus-visible .ad { opacity: .8; transform: none; }
.gezinme a:hover .nokta { opacity: .7; }
.gezinme a[aria-current="true"] .nokta { opacity: 1; height: 26px; width: 3px; border-radius: 2px; }
.gezinme a[aria-current="true"] .ad { opacity: .78; transform: none; }

/* --------------------------------------------------- 7 · sahne tipografisi - */
.etiket {
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--s-ucuncul);
}
.etiket--vurgu { color: var(--s-vurgu); }

.manset {
  font-family: var(--yt-manset);
  font-weight: var(--manset-agirlik);
  font-variation-settings: var(--manset-eksen);
  letter-spacing: var(--manset-aralik);
  line-height: var(--manset-satir);
  text-wrap: balance;
}
.dev   { font-size: clamp(2.55rem, 5.6vw + 1.35rem, 6.9rem); }   /* hero cümlesi */
.buyuk { font-size: clamp(1.95rem, 3.1vw + .95rem, 4.1rem); line-height: 1.08; }
.orta  { font-size: clamp(1.4rem,  1.5vw + .75rem, 2.3rem); line-height: 1.18; }
.egik  { font-style: italic; }

.dek { font-size: clamp(1rem, .45vw + .88rem, 1.18rem); line-height: 1.55; color: var(--s-ikincil); max-width: 46ch; }
.meta { font-size: 12.5px; letter-spacing: .04em; color: var(--s-ucuncul); line-height: 1.5; }
.meta b { font-weight: 700; color: var(--s-ikincil); }
.kaynak {
  font-size: 12.5px; letter-spacing: .05em; color: var(--s-ucuncul);
  display: inline-flex; align-items: center; gap: 9px;
}
.kaynak::before { content: ""; width: 26px; height: 1px; background: var(--s-cizgi); flex: none; }

/* ---------------------------------------------------------- 8 · hero sahne - */
.hero { display: grid; gap: clamp(20px, 3.4vh, 34px); }
.hero .dev { max-width: 16ch; }
.hero .kunye-satiri {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--s-ucuncul);
  display: flex; flex-wrap: wrap; gap: 6px 16px;
}
.asagi {
  position: absolute; left: 50%; bottom: clamp(26px, 5vh, 52px); transform: translateX(-50%);
  display: grid; justify-items: center; gap: 8px; text-decoration: none; color: var(--s-ucuncul);
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
}
.asagi::after {
  content: ""; width: 1px; height: 38px;
  background: linear-gradient(var(--s-cizgi), transparent);
  animation: ini 3.6s ease-in-out infinite;
}

/* --------------------------------------------------------- 9 · rakam sahne - */
.rakam-sahne { display: grid; gap: clamp(16px, 3vh, 30px); }
.rakam {
  font-family: var(--yt-manset);
  font-weight: var(--manset-agirlik);
  font-variation-settings: var(--manset-eksen);
  font-size: clamp(4.6rem, 15.5vw, 15rem);
  line-height: .8; letter-spacing: -.045em; font-variant-numeric: tabular-nums;
  color: var(--s-murekkep);
}
.rakam-sahne .aciklama { font-size: clamp(1.15rem, 1.4vw + .7rem, 2rem); line-height: 1.25; max-width: 24ch; }
.rakam-yan {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(14px, 2vw, 30px); border-top: 1px solid var(--s-cizgi); padding-top: clamp(14px, 2vh, 22px);
}
.rakam-yan b {
  display: block; font-family: var(--yt-manset); font-variation-settings: var(--manset-eksen);
  font-weight: var(--manset-agirlik); font-size: clamp(1.5rem, 2.2vw, 2.4rem);
  line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.rakam-yan span { display: block; margin-top: 7px; font-size: 12.5px; color: var(--s-ucuncul); line-height: 1.4; }

/* ---------------------------------------------------- 10 · liste sahnesi --- */
/* İMZA: içerik listeleri de sahne içinde kalır — kart yığını değil, büyük satır. */
.liste { display: grid; gap: clamp(16px, 4.2vh, 54px); }
.liste li {
  display: grid; grid-template-columns: clamp(2.4rem, 4vw, 4.6rem) minmax(0, 1fr);
  gap: clamp(12px, 2vw, 34px); align-items: baseline;
  border-top: 1px solid var(--s-cizgi); padding-top: clamp(14px, 2.6vh, 30px);
}
.liste .no {
  font-family: var(--yt-manset); font-variation-settings: var(--manset-eksen);
  font-weight: var(--manset-agirlik); font-size: clamp(1.6rem, 2.9vw, 3rem);
  line-height: 1; letter-spacing: -.04em; color: var(--s-vurgu); font-variant-numeric: tabular-nums;
}
.liste .cumle { font-size: clamp(1.15rem, 1.9vw + .45rem, 2.45rem); line-height: 1.16; letter-spacing: -.02em;
  font-family: var(--yt-manset); font-variation-settings: var(--manset-eksen); font-weight: var(--manset-agirlik); }
.liste .kanit { margin-top: 10px; font-size: clamp(.95rem, .42vw + .84rem, 1.12rem); line-height: 1.5; color: var(--s-ikincil); max-width: 72ch; }
.liste .cumle a { text-decoration: none; background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 300ms var(--egri); }
.liste .cumle a:hover { background-size: 100% 1px; }
.liste .meta { margin-top: 6px; }
.liste--sik li { padding-top: clamp(7px, 1.1vh, 13px); }
.liste--sik .cumle { font-size: clamp(.95rem, .72vw + .58rem, 1.24rem); line-height: 1.28; }
.liste--sik { gap: clamp(7px, 1.2vh, 15px); }

/* iki sütunlu liste (sahneye sığsın diye) */
.liste--iki { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 72px); }
@media (max-width: 760px) { .liste--iki { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------- 11 · alıntı ---- */
.alinti { display: grid; gap: clamp(18px, 3vh, 32px); justify-items: start; }
.alinti blockquote {
  font-family: var(--yt-manset); font-weight: var(--manset-agirlik);
  font-variation-settings: var(--manset-eksen); font-style: italic;
  font-size: clamp(2rem, 4.1vw + .7rem, 5.1rem); line-height: 1.06; letter-spacing: var(--manset-aralik);
  max-width: 19ch; text-wrap: balance;
}
.alinti--orta { justify-items: center; text-align: center; }
.alinti--orta blockquote { max-width: 22ch; }
.alinti cite { font-style: normal; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--s-ucuncul); max-width: 52ch; line-height: 1.6; }

/* imza satırı: yazar adı, kalın kuralın altında */
.imza {
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--s-ikincil); border-top: 1px solid var(--s-cizgi); padding-top: 10px;
  display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between; max-width: 46ch;
}
.imza span:last-child { font-weight: 500; opacity: .78; }

/* kutu: alıntı künyesi, uyarı, çağrı — sahnenin içinde küçük bir levha */
.kutu { border: 1px solid var(--s-cizgi); padding: clamp(16px, 2.2vw, 26px); max-width: 62ch; }
.kutu p { font-size: clamp(.95rem, .4vw + .84rem, 1.08rem); line-height: 1.5; }

/* ------------------------------------------------ 12 · şerit / etiket dizisi */
.serit { display: flex; flex-wrap: wrap; gap: clamp(8px, 1vw, 14px); }
.serit li {
  display: inline-flex; align-items: baseline; gap: 8px;
  border: 1px solid var(--s-cizgi); padding: 10px 16px;
  font-size: clamp(1rem, .62vw + .8rem, 1.34rem); font-weight: 600; letter-spacing: -.012em;
}
.serit li span { font-size: 11.5px; font-weight: 500; opacity: .62; letter-spacing: .04em; }
.serit a { text-decoration: none; }

/* büyük harf dizisi (kadro, aile) */
.harfler { display: flex; flex-wrap: wrap; gap: clamp(14px, 2.2vw, 34px) clamp(14px, 1.8vw, 28px); align-items: baseline; }
.harfler li {
  font-family: var(--yt-manset); font-variation-settings: var(--manset-eksen);
  font-weight: var(--manset-agirlik); font-size: clamp(1.45rem, 2.7vw, 3.1rem);
  letter-spacing: -.025em; line-height: 1;
}
.harfler li span { display: block; font-family: var(--yt-govde); font-weight: 500; font-size: 11.5px;
  letter-spacing: .04em; color: var(--s-ucuncul); margin-top: 6px; }

/* --------------------------------------------------- 13 · tarih / takvim --- */
.tarihler { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(20px, 3vw, 56px); }
.tarihler .gun {
  font-family: var(--yt-manset); font-variation-settings: var(--manset-eksen);
  font-weight: var(--manset-agirlik); font-size: clamp(3rem, 5.4vw, 5.4rem);
  line-height: .86; letter-spacing: -.04em; color: var(--s-vurgu); font-variant-numeric: tabular-nums;
}
.tarihler .gun small { display: block; font-family: var(--yt-govde); font-size: 11.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--s-ucuncul); margin-top: 10px; }
.tarihler h3 { font-size: clamp(1.02rem, .7vw + .68rem, 1.3rem); font-weight: 600; line-height: 1.3; margin-top: 14px; letter-spacing: -.01em; }

/* ------------------------------------------------------- 14 · zincir ------- */
.zincir { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(8px, 1vw, 18px); }
.zincir li { position: relative; padding-top: 30px; }
.zincir li:nth-child(even) { margin-top: clamp(26px, 7vh, 72px); }
.zincir li::before {
  content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 1px; background: var(--s-cizgi);
}
.zincir li::after {
  content: ""; position: absolute; top: 2px; left: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--s-cizgi);
}
.zincir li[data-bu]::after { background: var(--s-vurgu); box-shadow: 0 0 0 5px color-mix(in oklab, var(--s-vurgu) 26%, transparent); }
.zincir .gun { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--s-ucuncul); }
.zincir p { margin-top: 12px; font-size: clamp(.95rem, .72vw + .64rem, 1.28rem); line-height: 1.34; letter-spacing: -.012em; }
.zincir li::after { width: 11px; height: 11px; }
.zincir li[data-bu] p { font-weight: 600; }
.zincir li[data-bu] .gun { color: var(--s-vurgu); }
@media (max-width: 960px) { .zincir { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 2vw, 18px); }
  .zincir li:nth-child(even) { margin-top: 0; } }
@media (max-width: 420px) { .zincir { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------- 15 · sayaç ------ */
.sayac { display: grid; gap: 12px; max-width: 520px; }
.sayac .cubuk { height: 10px; background: color-mix(in oklab, currentColor 16%, transparent); }
.sayac .cubuk span { display: block; height: 100%; background: var(--s-vurgu); }

/* --------------------------------------------------- 16 · form ve düğme ---- */
.dugme {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px;
  padding: 12px 22px; border: 1px solid currentColor; text-decoration: none;
  font-size: 14px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  transition: background-color 220ms var(--egri), color 220ms var(--egri);
}
.dugme:hover { background: var(--s-murekkep); color: var(--s-zemin-metin, var(--kagit)); }
.sahne[data-alan="kagit"] .dugme:hover,
.sahne[data-alan="vurgu-solgun"] .dugme:hover { color: var(--kagit); }
.sahne[data-alan="vurgu"] .dugme:hover,
.sahne[data-alan="vurgu-derin"] .dugme:hover,
.sahne[data-alan="koyu"] .dugme:hover { color: var(--vurgu-derin); }

.form-satiri { display: flex; flex-wrap: wrap; gap: 10px; max-width: 520px; }
.form-satiri input {
  flex: 1 1 220px; min-height: 48px; padding: 12px 14px; font: inherit; font-size: 15px;
  color: inherit; background: transparent; border: 1px solid var(--s-cizgi);
}
.form-satiri input::placeholder { color: var(--s-ucuncul); }
.form-satiri button {
  min-height: 48px; padding: 12px 22px; font-family: inherit; font-size: 14px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; cursor: pointer;
  background: var(--s-murekkep); color: var(--s-zemin-tersi, var(--kagit)); border: 1px solid var(--s-murekkep);
}
.sahne[data-alan="vurgu"] .form-satiri button,
.sahne[data-alan="vurgu-derin"] .form-satiri button,
.sahne[data-alan="koyu"] .form-satiri button { color: var(--vurgu-derin); }

/* --------------------------------------------------- 17 · künye sahnesi ---- */
/* Altbilgi klasik blok değil: kapanış sahnesi. */
.kapanis { display: grid; gap: clamp(20px, 3.4vh, 40px); }
.aile { display: flex; flex-wrap: wrap; gap: clamp(12px, 2.4vw, 34px); align-items: baseline; }
.aile a {
  font-family: var(--yt-manset); font-variation-settings: var(--manset-eksen);
  font-weight: var(--manset-agirlik); font-size: clamp(1.25rem, 2.4vw, 2.3rem);
  letter-spacing: -.025em; text-decoration: none; opacity: .42;
  transition: opacity 240ms var(--egri);
}
.aile a:hover { opacity: .85; }
.aile a[aria-current="page"] { opacity: 1; }
.aile a[aria-current="page"]::after { content: " ·"; color: var(--s-vurgu); }

.sutunlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: clamp(16px, 2.6vw, 44px); border-top: 1px solid var(--s-cizgi); padding-top: clamp(14px, 2.2vh, 24px); }
.sutunlar h3 { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--s-ucuncul); margin-bottom: 10px; }
.sutunlar li { margin-bottom: 6px; }
.sutunlar a { font-size: 14px; text-decoration: none; color: var(--s-ikincil); }
.sutunlar a:hover { color: var(--s-murekkep); text-decoration: underline; text-underline-offset: .2em; }
.yasal { font-size: 11.5px; line-height: 1.55; color: var(--s-ucuncul); max-width: 92ch; }

/* --------------------------------------------------------- 18 · hareket ---- */
@keyframes gren-kay   { from { background-position: 0 0; }      to { background-position: 180px 260px; } }
@keyframes bulut-kay  { from { background-position: 0 0; }      to { background-position: -620px 420px; } }
@keyframes gren-nefes { 50% { opacity: calc(var(--s-gren, .17) * 1.55); } }
@keyframes gez-a { from { transform: translate3d(0, 0, 0) scale(1); }  to { transform: translate3d(9vw, -7vh, 0) scale(1.16); } }
@keyframes gez-b { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(-8vw, 6vh, 0) scale(.94); } }
@keyframes ini   { 0%, 100% { transform: translateY(0); opacity: .7; } 50% { transform: translateY(7px); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 1ms !important;
  }
  /* gren ve ışık sabit kalır, görünür */
}

/* --------------------------------------------------------- 19 · telefon ---- */
@media (max-width: 860px) {
  body { font-size: 17px; }
  .sahne { padding: clamp(54px, 7.4vh, 76px) 16px clamp(46px, 6.6vh, 68px); }
  /* başlık karesi: aşağı oku künye satırının üstüne binmesin */
  .sahne--baslik { padding-bottom: clamp(96px, 14vh, 132px); }
  .asagi { bottom: clamp(20px, 3.4vh, 32px); }
  .asagi::after { height: 30px; }
  .gezinme { right: 8px; gap: 11px; }
  .gezinme .ad { display: none; }
  .gezinme .nokta { width: 6px; height: 6px; }
  .gezinme a[aria-current="true"] .nokta { width: 3px; height: 20px; }
  .klaket { font-size: 11px; gap: 8px; }
  .kunye-ust { font-size: 11px; }
  .kunye-ust span { display: none; }
  .rakam-yan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tarihler { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .tarihler .gun { display: flex; align-items: baseline; gap: 12px; font-size: 2.6rem; }
  .tarihler .gun small { margin-top: 0; }
  .tarihler h3 { margin-top: 8px; }
  .sutunlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Telefonda sahne tam ekran kalmalı: yoğun sahneler burada sıkıştırılır. */
@media (max-width: 860px) {
  .liste { gap: 16px; }
  .liste li { padding-top: 13px; }
  .liste .kanit { margin-top: 7px; font-size: .94rem; line-height: 1.45; }
  .liste--sik { gap: 7px; }
  .liste--sik li { padding-top: 7px; }
  .liste--sik .cumle { font-size: .99rem; line-height: 1.22; }
  .liste--sik .meta { font-size: 11px; line-height: 1.34; margin-top: 3px; }
  .zincir { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
  .zincir li { padding-top: 18px; }
  .zincir li::before { top: 5px; }
  .zincir li::after { width: 8px; height: 8px; }
  .zincir .gun { font-size: 10.5px; letter-spacing: .08em; }
  .zincir p { margin-top: 6px; font-size: .88rem; line-height: 1.32; }
  .kapanis { gap: 15px; }
  .kapanis .dek { font-size: .95rem; line-height: 1.5; }
  .kapanis .manset.buyuk { font-size: 1.5rem; line-height: 1.12; }
  .sutunlar { gap: 14px 20px; padding-top: 14px; }
  .sutunlar li { margin-bottom: 4px; }
  .sutunlar a { font-size: 13px; }
  .yasal { font-size: 11px; line-height: 1.5; }
  .aile a { font-size: 1.2rem; }
  .harfler { gap: 10px 14px; }
  .harfler li { font-size: 1.2rem; }
  .harfler li span { font-size: 11px; margin-top: 3px; }
}
@media (max-width: 420px) {
  .liste li { grid-template-columns: 2rem minmax(0, 1fr); gap: 12px; }
  .serit li { padding: 7px 11px; font-size: .95rem; }
  .liste--sik li { grid-template-columns: 1.9rem minmax(0, 1fr); gap: 10px; }
}

/* ============================================================================
   20 · EK SAYFALAR (19.09.2026 eki)
   Aşağıdaki her şey EKtir: yukarıdaki hiçbir seçici yeniden tanımlanmaz, dört
   ana sayfa aynen çalışır. Yeni olan: o4 dalı, akış kipi (snap'siz okuma/form)
   ve arşiv/kayıt/yazı/form sayfalarının bileşenleri.
   ========================================================================== */

/* --- 20.1 · O4 Zabıt: belge mavisi + Source Serif 4 ----------------------- */
[data-dal="o4"] {
  --vurgu:       #1B4F7A;
  --vurgu-acik:  #3E77A6;
  --vurgu-derin: #0E2C47;
  --vurgu-solgun:#D2E0EC;
  --koyu:        #0C1620;
  --isik-sicak:  rgba(196, 224, 255, .44);
  --isik-kagit:  rgba(27, 79, 122, .12);
  --yt-manset: "Source Serif 4", Georgia, serif;
  --manset-agirlik: 700;
  --manset-aralik: -.016em;
  --manset-eksen: "opsz" 60;
}
/* arşivin dili daha sakin: bulut katmanı kısılır (belge, afiş değil) */
[data-dal="o4"] .sahne[data-alan] { --s-bulut: .16; }

/* --- 20.2 · Akış kipi: snap'siz okuma ve form sayfaları ------------------- */
/* <html class="akis"> — kareler kalır, kilit kalkar. Uzun metin ve form
   mandatory snap ile kavga eder; vitrin sayfaları snap'li, bunlar akışlı. */
html.akis { scroll-snap-type: none; }
.akis .sahne { scroll-snap-align: none; scroll-snap-stop: normal; }
.sahne--akis {
  min-height: 0;
  padding-block: clamp(40px, 6.5vh, 84px);
  align-content: start;
}
.sahne--akis::after { content: none; }          /* numara akışta satır içinde durur */

/* akışta sahne dilinde bölüm başı: iri soluk numara + serif başlık */
.bolum-basi { display: grid; gap: 8px; margin: 0 0 clamp(14px, 2.2vh, 24px); }
.bolum-no {
  font-family: var(--yt-manset); font-variation-settings: var(--manset-eksen);
  font-weight: var(--manset-agirlik); font-size: clamp(1.9rem, 3.4vw, 3.2rem);
  line-height: 1; letter-spacing: -.045em; opacity: .2; font-variant-numeric: tabular-nums;
}
.bolum-basi h2 {
  font-family: var(--yt-manset); font-variation-settings: var(--manset-eksen);
  font-weight: var(--manset-agirlik); font-size: clamp(1.45rem, 1.8vw + .7rem, 2.4rem);
  line-height: 1.1; letter-spacing: var(--manset-aralik); text-wrap: balance;
}

/* --- 20.3 · Okuma kolonu -------------------------------------------------- */
.okuma { width: min(100%, 42rem); margin-inline: auto; }
.okuma p { font-size: clamp(1.02rem, .3vw + .95rem, 1.19rem); line-height: 1.68; color: var(--s-ikincil); margin-bottom: 1.05em; }
.okuma p:last-child { margin-bottom: 0; }
.okuma b { color: var(--s-murekkep); font-weight: 700; }
.okuma sup a { font-size: 11px; font-weight: 700; color: var(--s-vurgu); text-decoration: none; padding-inline: 2px; }
.okuma sup a:hover { text-decoration: underline; }
.okuma .bolum-basi { margin-top: clamp(28px, 4.6vh, 56px); }

/* --- 20.4 · Kanıt düzeyi: çip, dağılım çubuğu, dört kutu ------------------ */
.cip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--s-cizgi); padding: 5px 10px; line-height: 1.2; color: var(--s-ikincil);
}
.cip--k { color: var(--s-vurgu); border-color: color-mix(in oklab, var(--s-vurgu) 52%, transparent); }
.cip--dolu { background: var(--s-vurgu); border-color: var(--s-vurgu); color: var(--kagit); }
.cipler { display: flex; flex-wrap: wrap; gap: 8px; }

.kdagilim { display: flex; height: 14px; background: color-mix(in oklab, currentColor 12%, transparent); }
.kdagilim span { display: block; background: var(--s-vurgu); }
.kdagilim span:nth-child(2) { opacity: .68; }
.kdagilim span:nth-child(3) { opacity: .42; }
.kdagilim span:nth-child(4) { opacity: .22; }

.k-kutular { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2.2vw, 34px); }
.k-kutular > div { border-top: 2px solid var(--s-vurgu); padding-top: 12px; }
.k-kutular > div.zayif { border-top-color: var(--s-ucuncul); }
.k-kutular b {
  display: block; font-family: var(--yt-manset); font-variation-settings: var(--manset-eksen);
  font-weight: var(--manset-agirlik); font-size: clamp(1.6rem, 2.6vw, 2.7rem);
  line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-top: 8px;
}
.k-kutular .pay { display: block; font-size: 12.5px; color: var(--s-ucuncul); margin: 5px 0 8px; font-variant-numeric: tabular-nums; }
.k-kutular p { font-size: 12.5px; line-height: 1.45; color: var(--s-ikincil); }
@media (max-width: 760px) { .k-kutular { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
  .k-kutular p { font-size: 11.5px; line-height: 1.4; } }

/* --- 20.5 · Kayıt cetveli (tarih · başlık · çip) -------------------------- */
.cetvel { display: grid; gap: clamp(9px, 1.5vh, 18px); }
.cetvel li {
  display: grid; grid-template-columns: 6.6rem minmax(0, 1fr) auto;
  gap: clamp(10px, 1.6vw, 28px); align-items: baseline;
  border-top: 1px solid var(--s-cizgi); padding-top: clamp(8px, 1.3vh, 15px);
}
.cetvel .tarih { font-size: 12.5px; letter-spacing: .05em; color: var(--s-ucuncul); font-variant-numeric: tabular-nums; }
.cetvel .baslik {
  font-family: var(--yt-manset); font-variation-settings: var(--manset-eksen);
  font-weight: var(--manset-agirlik); font-size: clamp(1rem, .82vw + .62rem, 1.3rem);
  line-height: 1.24; letter-spacing: -.012em;
}
.cetvel .baslik a { text-decoration: none; }
.cetvel .baslik a:hover { text-decoration: underline; text-underline-offset: .18em; }
@media (max-width: 860px) {
  /* telefonda tarih ve çip tek satırı paylaşır, başlık altta tam genişlik */
  .cetvel li { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; padding-top: 9px; }
  .cetvel .tarih { grid-row: 1; grid-column: 1; }
  .cetvel .cipler { grid-row: 1; grid-column: 2; }
  .cetvel .baslik { grid-row: 2; grid-column: 1 / -1; font-size: .98rem; line-height: 1.24; }
  .cetvel { gap: 8px; }
}

/* --- 20.6 · Yıl histogramı (saf CSS, kütüphane yok) ---------------------- */
.histogram {
  display: flex; align-items: flex-end; gap: 3px;
  height: clamp(110px, 19vh, 190px); border-bottom: 1px solid var(--s-cizgi);
}
.histogram li { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.histogram .sutun { height: var(--h); display: flex; flex-direction: column-reverse; }
.histogram .sutun span { display: block; background: var(--s-vurgu); flex-basis: 0; flex-shrink: 1; }
.histogram .s2 { opacity: .66; } .histogram .s3 { opacity: .4; } .histogram .s4 { opacity: .2; }
.histogram-eksen { display: flex; justify-content: space-between; font-size: 11.5px; letter-spacing: .06em;
  color: var(--s-ucuncul); padding-top: 8px; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .histogram { gap: 2px; height: clamp(92px, 12.5vh, 128px); }
  .eksenler { gap: 8px 0; }
  .eksenler li { padding-top: 7px; }
  .eksenler .ad { font-size: .88rem; line-height: 1.25; } }

/* --- 20.7 · Eksen çubukları ---------------------------------------------- */
.eksenler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.7vh, 20px) clamp(26px, 4vw, 66px); }
.eksenler li { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) 3.2em; gap: 6px 10px;
  align-items: baseline; border-top: 1px solid var(--s-cizgi); padding-top: 9px; }
.eksenler .kod { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--s-vurgu); }
.eksenler .ad { font-size: clamp(.9rem, .42vw + .76rem, 1.06rem); line-height: 1.3; }
.eksenler .deger { font-size: 12.5px; text-align: right; color: var(--s-ikincil); font-variant-numeric: tabular-nums; }
.eksenler .cubuk { grid-column: 1 / -1; height: 6px; background: color-mix(in oklab, currentColor 13%, transparent); }
.eksenler .cubuk i { display: block; height: 100%; background: var(--s-vurgu); }
@media (max-width: 680px) { .eksenler { grid-template-columns: minmax(0, 1fr); } }

/* --- 20.8 · Kaynakça, sürümler, düzeltme, paylaş ------------------------- */
.kaynakca { display: grid; gap: clamp(7px, 1.2vh, 12px); counter-reset: kynk; }
.kaynakca li {
  /* DİKKAT: burada grid KULLANILMAZ. Künye metni düz metin + <b>/<time>
     parçalarından oluşur; grid konteynerinde her metin parçası ayrı hücreye
     düşüp künyeyi parçalıyordu. Numara mutlak konumlanır, metin akar. */
  position: relative; padding: 9px 0 0 2.6rem;
  font-size: 13.5px; line-height: 1.5; color: var(--s-ikincil);
  border-top: 1px solid var(--s-cizgi);
}
.kaynakca li::before { counter-increment: kynk; content: "[" counter(kynk) "]";
  position: absolute; left: 0; top: 10px; font-size: 12px; font-weight: 700; color: var(--s-vurgu); }
.kaynakca a { color: var(--s-vurgu); }
.kaynakca .baglar { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-top: 7px; }
.kaynakca .baglar a { border: 1px solid var(--s-cizgi); padding: 5px 9px; font-size: 11.5px; font-weight: 600;
  letter-spacing: .04em; text-decoration: none; color: var(--s-ikincil); }
.kaynakca .baglar a:hover { color: var(--s-murekkep); border-color: currentColor; }

.surumler { display: grid; }
.surumler li { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr); gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--s-cizgi); font-size: 13px; line-height: 1.45; color: var(--s-ikincil); }
.surumler .s { color: var(--s-ucuncul); letter-spacing: .05em; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .surumler li { grid-template-columns: minmax(0, 1fr); gap: 3px; } }

.duzeltme-kutu {
  border-left: 3px solid var(--s-vurgu);
  background: color-mix(in oklab, var(--s-vurgu) 8%, transparent);
  padding: clamp(14px, 2vw, 22px); display: grid; gap: 10px;
}
.duzeltme-kutu p { font-size: 14px; line-height: 1.55; color: var(--s-ikincil); }
.duzeltme-kutu .ornek { font-size: 13.5px; line-height: 1.55; color: var(--s-ikincil); border-top: 1px solid var(--s-cizgi); padding-top: 10px; }

.paylas { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.paylas a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 15px;
  border: 1px solid var(--s-cizgi); font-size: 13px; font-weight: 600; letter-spacing: .03em; text-decoration: none;
}
.paylas a:hover { border-color: currentColor; }
.paylas a.ilk { background: var(--s-vurgu); border-color: var(--s-vurgu); color: var(--kagit); }
.paylas-metni { font-size: 12.5px; line-height: 1.55; color: var(--s-ucuncul); max-width: 78ch; }

/* değerlendirme / kenar notu — olgudan ayrı, imzalı blok */
.yorum { border-top: 2px solid var(--s-vurgu); padding-top: 14px; display: grid; gap: 10px; max-width: 72ch; }
.yorum p { font-size: clamp(.98rem, .32vw + .9rem, 1.12rem); line-height: 1.6; color: var(--s-ikincil); }

/* --- 20.9 · Yazar kutusu ------------------------------------------------- */
.yazar-kutusu { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px;
  border-top: 1px solid var(--s-cizgi); padding-top: 20px; }
.harf-rozet {
  width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--s-vurgu) 14%, transparent); color: var(--s-vurgu);
  font-family: var(--yt-manset); font-variation-settings: var(--manset-eksen);
  font-weight: var(--manset-agirlik); font-size: 22px; letter-spacing: -.02em;
}
@media (max-width: 560px) { .yazar-kutusu { grid-template-columns: minmax(0, 1fr); } }

/* --- 20.10 · Form (katıl sayfası) ---------------------------------------- */
.alanlar { display: grid; gap: clamp(12px, 2vh, 18px); max-width: 38rem; }
.ikili { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 20px); }
@media (max-width: 560px) { .ikili { grid-template-columns: minmax(0, 1fr); } }
.alan { display: grid; gap: 6px; }
.alan label { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--s-ucuncul); }
.alan input, .alan select {
  min-height: 48px; padding: 12px 14px; font: inherit; font-size: 16px; color: inherit;
  background: transparent; border: 1px solid var(--s-cizgi); border-radius: 0;
}
.alan input:focus-visible, .alan select:focus-visible { outline: 2px solid var(--s-vurgu); outline-offset: 2px; }
.onaylar { display: grid; gap: 12px; border-top: 1px solid var(--s-cizgi); padding-top: 16px; }
.onay { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start;
  font-size: 14.5px; line-height: 1.5; color: var(--s-ikincil); padding-block: 6px; min-height: 44px; cursor: pointer; }
.onay input { width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--s-vurgu); }
.onay a { color: var(--s-vurgu); }
.aydinlatma { border-left: 3px solid var(--s-vurgu); padding: 12px 16px; font-size: 13px; line-height: 1.55;
  color: var(--s-ikincil); background: color-mix(in oklab, var(--s-vurgu) 6%, transparent); }
.aydinlatma a { color: var(--s-vurgu); }

.adimlar { display: grid; gap: clamp(10px, 1.6vh, 16px); counter-reset: adim; }
.adimlar li { position: relative; padding: 11px 0 0 2.8rem;
  border-top: 1px solid var(--s-cizgi);
  font-size: clamp(.95rem, .34vw + .86rem, 1.08rem); line-height: 1.5; color: var(--s-ikincil); }
.adimlar li::before {
  counter-increment: adim; content: counter(adim); position: absolute; left: 0; top: 10px;
  font-family: var(--yt-manset); font-variation-settings: var(--manset-eksen);
  font-weight: var(--manset-agirlik); font-size: 1.5rem; line-height: 1; color: var(--s-vurgu);
}

/* künye şeridinde geri dönüş bağlantısı (menüsüz sayfalar) */
.kunye-ust .geri { display: block; margin-top: 4px; font-size: 11px; letter-spacing: .1em; opacity: .7; }