/* csahin.com.tr — koyu, sade tema. Solda ince dikey menü, geniş boşluk, büyük ince başlıklar. */

:root {
  color-scheme: dark;
  --zemin: #0b0f17;
  --zemin-2: #111725;
  --zemin-3: #182033;
  --cizgi: #222b3c;
  --cizgi-guclu: #3a4659;
  --yazi: #f4eee2;
  --krem: #f4eee2;  /* ana sayfadaki yazılım kartları ve yazılım sayfalarındaki görüntü çerçeveleri */
  --yazi-2: #bcc3cf;
  --soluk: #8e98a9;
  --vurgu: #e9dbbd;
  --baglanti-cizgi: #6a7790;
  --serit: #e9dbbd;
  --serit-yazi: #4a3f2a;
  --serit-koyu: #0b0f17;
  --serit-vurgu: #8a6a2e;
  --yazi-tipi: "Jost", "Futura", "Century Gothic", "Avenir Next", system-ui, sans-serif;
  --yan: 96px;
}

/* ---------- Temel ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--yazi);
  font-family: var(--yazi-tipi);
  font-weight: 380;
  font-size: 19px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--vurgu); color: var(--zemin); }

a { color: inherit; text-decoration: none; }
p a, dd a, .surumler a, .baglanti-cizgili {
  text-decoration: underline;
  text-decoration-color: var(--baglanti-cizgi);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
p a:hover, dd a:hover, .surumler a:hover, .baglanti-cizgili:hover { color: var(--vurgu); text-decoration-color: var(--vurgu); }
:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 4px; }
:focus:not(:focus-visible) { outline: none; }

p, ul, ol, dl, figure, h1, h2, h3, h4 { margin: 0; }
h1, h2, h3, h4 { font-weight: 300; }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; }

.gorunmez {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.etiket {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vurgu);
}

.ok { width: 18px; height: 12px; flex: none; }
.ok path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.atla {
  position: absolute;
  left: calc(var(--yan) + 16px);
  top: -100px;
  z-index: 20;
  background: var(--zemin-2);
  border: 1px solid var(--cizgi-guclu);
  padding: 10px 16px;
}
.atla:focus { top: 16px; }

/* ---------- Yan menü ---------- */

.yan {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--yan);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 36px 0 32px;
  background: var(--serit);
  color: var(--serit-koyu);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.imza {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
}
.imza span { color: var(--serit-vurgu); }

.dikey-menu { margin-block: auto; }
.dikey-menu ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 34px;
}
.dikey-menu a {
  display: block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--serit-yazi);
  padding: 6px 13px;
}
.dikey-menu a:hover, .dikey-menu a[aria-current="true"] { color: var(--serit-koyu); }
.dikey-menu a[aria-current="true"] { font-weight: 700; }
.yan :focus-visible { outline-color: var(--serit-koyu); }


.ana { margin-left: var(--yan); }

/* ---------- Açılış ---------- */

.acilis {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
}
.acilis-metin {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 96px 7vw 96px 8vw;
}
.acilis h1 {
  font-size: clamp(76px, 10.5vw, 168px);
  line-height: .95;
  letter-spacing: -.035em;
  font-weight: 300;
  margin: 0;
}

.acilis-foto { position: relative; margin: 0; overflow: hidden; background: var(--zemin-2); }
.acilis-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 10% 50%;
  filter: brightness(.94) saturate(.95);
  transform: scale(1.06) translate3d(var(--kay-x, 0px), var(--kay-y, 0px), 0);
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .acilis-foto img { transition: transform 700ms cubic-bezier(.2, .6, .2, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .acilis-foto img { transform: none; }
}
.foto-notu {
  position: absolute;
  right: 20px;
  bottom: 16px;
  z-index: 1;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--yazi);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .85);
}


/* ---------- Bölümler ---------- */

.bolum {
  padding: 128px 8vw;
  border-top: 1px solid var(--cizgi);
  scroll-margin-top: 0;
}
.bolum-bas { margin-bottom: 64px; }
.bolum-bas h2 {
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.05;
  letter-spacing: -.025em;
}
.bolum-bas h2 + p { margin-top: 20px; color: var(--yazi-2); font-size: 21px; max-width: 46ch; }

/* Hakkımda */
/* Başlık ve metin solda alt alta, fotoğraf sağ yarının ortasında. Fotoğraf iki satırı birden kaplar ve dikeyde
   bölümün tam ortasında durur. Alt yazısı akışa girmez ki ortalamayı kaydırmasın. */
.hakkimda-duzen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 72px; row-gap: 40px; }
.hakkimda-duzen .bolum-bas { grid-column: 1; grid-row: 1; margin-bottom: 0; }
.hakkimda-metin { grid-column: 1; grid-row: 2; }
.hakkimda-metin p { font-size: 22px; line-height: 1.6; color: var(--yazi-2); max-width: 42ch; }
.hakkimda-metin p:first-child { color: var(--yazi); font-size: 27px; line-height: 1.45; }
.hakkimda-metin p + p { margin-top: 22px; }
.hakkimda-foto { grid-column: 2; grid-row: 1 / 3; align-self: center; justify-self: center; position: relative; margin: 0; width: 100%; max-width: 560px; }
.hakkimda-foto figcaption { position: absolute; top: 100%; left: 0; }
/* Geniş ekranda fotoğrafın sağ kenarı açılış fotoğrafının sol kenarına dayanır (kullanıcı isteği). Açılış fotoğrafı
   ana alanın sağdaki %44'ünü kaplar, bu yüzden son sütun 44cqw - 8vw (bölümün sağ dolgusu) genişliğindedir. Boş
   1fr satırlar, fotoğraf metinden uzun olduğunda başlıkla metin arasını açmadan bloğu dikeyde ortalar. Daha dar
   ekranda fotoğrafı bu boyda çizgiye sığdıracak yer olmadığından yukarıdaki düzen geçerlidir. */
.ana { container-type: inline-size; }
@container (min-width: 1790px) {
  .hakkimda-duzen { grid-template-columns: minmax(480px, 1fr) minmax(0, 560px) calc(44cqw - 8vw); grid-template-rows: 1fr auto auto 1fr; column-gap: 0; row-gap: 0; }
  .hakkimda-duzen .bolum-bas { grid-row: 2; margin-bottom: 40px; }
  .hakkimda-metin { grid-row: 3; padding-right: 56px; }
  .hakkimda-foto { grid-row: 1 / 5; justify-self: end; }
}
.hakkimda-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: brightness(.9) saturate(.9); }
.hakkimda-foto figcaption { margin-top: 12px; font-size: 15px; color: var(--soluk); }
.hesaplar { list-style: none; padding: 0; margin-top: 44px; display: flex; flex-wrap: wrap; gap: 14px; }
.hesaplar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid transparent;
  background: var(--vurgu);
  color: var(--zemin);
  transition: background-color .2s ease;
}
.hesaplar a:hover { background: #f6efe0; }
.hesaplar svg { width: 22px; height: 22px; }
.hesaplar path { fill: currentColor; }
.hesaplar a.hesap-yazi { width: auto; padding: 0 16px; font-size: 17px; font-weight: 500; }
@media (prefers-reduced-motion: no-preference) {
  .hesaplar a { transition: background-color .2s ease, transform .2s ease; }
  .hesaplar a:hover { transform: translateY(-2px); }
}

/* Yazılımlar: ikişerli kartlar, kartın üstünde yazılımın kendi simgesi */
/* Geniş ekranda kartlar boş kalmasın diye ızgara 1240 px ile sınırlı (kullanıcı seçimi, B) */
.yazilim-kartlari { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1240px; grid-auto-rows: 1fr; }
.yazilim-kartlari li { display: flex; }
.yazilim-karti {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  /* Krem kart, koyu yazı, çerçeve sol şeritle aynı kum rengi (kullanıcı seçimi, 9 numara) */
  border: 1px solid var(--serit);
  background: var(--krem);
  color: #0b0f17;
  transition: border-color .2s ease, background-color .2s ease;
}
/* Kart başı: simge (kendi biçimiyle) solda, ad sağda */
.kart-bas { display: flex; align-items: center; gap: 20px; margin-bottom: 4px; }
.kart-bas .simge { flex: none; width: 64px; height: 64px; }
.yazilim-karti .ad { font-size: clamp(26px, 2.4vw, 34px); font-weight: 350; letter-spacing: -.015em; line-height: 1.15; }
.yazilim-karti .tek { font-size: 18px; line-height: 1.55; color: #3b3f47; }
.yazilim-karti .meta { margin-top: auto; padding-top: 12px; font-size: 14px; font-weight: 500; letter-spacing: .08em; color: #6b4e16; }
.yazilim-karti:hover { background: #fbf8f1; }
@media (prefers-reduced-motion: no-preference) {
  .yazilim-karti { transition: border-color .2s ease, background-color .2s ease, transform .2s ease; }
  .yazilim-karti:hover { transform: translateY(-3px); }
}

/* Lina */
.galeri { columns: 4 200px; column-gap: 14px; }
.galeri a { display: block; margin-bottom: 14px; break-inside: avoid; background: var(--zemin-2); }
.galeri img { width: 100%; filter: saturate(.92); }
@media (prefers-reduced-motion: no-preference) {
  .galeri img { transition: filter 250ms ease, opacity 250ms ease; }
}
.galeri a:hover img { filter: saturate(1.05); opacity: .9; }
.galeri-alt { margin-top: 32px; font-size: 17px; color: var(--soluk); }


/* Fotoğraf ön izlemesi */
a.onizleme { display: block; cursor: zoom-in; }
.onizleme-pencere {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--yazi);
  -webkit-user-select: none;
  user-select: none;
}
.onizleme-pencere::backdrop { background: rgba(5, 7, 11, .94); }
html:has(.onizleme-pencere[open]) { overflow: hidden; }
/* Fotoğraf ve alt yazı, düğmelere bırakılan kenar boşluklarının içinde kalır. Fotoğrafın satırı alt yazıdan
   artan yükseklik kadar büyüyebilir, fotoğraf da o satıra sığacak kadar küçülür. Yine sığmazsa içerik üstten
   başlar ve pencere kaydırılır (ortalanmış içerik üstten kesilmez). */
.onizleme-pencere figure {
  height: 100%;
  margin: 0;
  padding: 32px 96px;
  display: grid;
  grid-template-rows: minmax(0, auto) auto;
  align-content: center;
  align-content: safe center;
  justify-items: center;
  gap: 14px;
}
.onizleme-pencere img { max-width: 100%; max-height: 100%; width: auto; height: auto; min-height: 0; }
.onizleme-pencere figure.yukleniyor img { opacity: .4; }
/* İlk görüntü inene dek boş resim (kırık resim simgesi) görünmez */
.onizleme-pencere img:not([src]) { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) { .onizleme-pencere img { transition: opacity .2s ease; } }
.onizleme-pencere figcaption { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 16px; color: var(--yazi-2); text-align: center; }
.onizleme-pencere figcaption a { color: var(--vurgu); text-decoration: underline; text-underline-offset: .22em; }
.onizleme-dugme {
  position: fixed;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid transparent;
  border-radius: 0;
  background: var(--vurgu);
  color: var(--zemin);
  font: inherit;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.onizleme-dugme:hover { background: #f6efe0; }
.onizleme-dugme.kapat { top: 20px; right: 20px; }
.onizleme-dugme.onceki { left: 20px; top: 50%; transform: translateY(-50%); }
.onizleme-dugme.sonraki { right: 20px; top: 50%; transform: translateY(-50%); }
.onizleme-dugme[hidden] { display: none; }
.onizleme-dugme svg { width: 22px; height: 22px; }
.onizleme-dugme svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes karanliktan { from { opacity: 0; } to { opacity: 1; } }
@keyframes belirme { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .onizleme-pencere[open]::backdrop { animation: karanliktan .5s ease both; }
  .onizleme-pencere[open] figure { animation: belirme .6s .12s cubic-bezier(.2, .6, .2, 1) both; }
  .onizleme-pencere[open] .onizleme-dugme { animation: karanliktan .4s .3s ease both; }
  .onizleme-pencere figure.gecis img, .onizleme-pencere figure.gecis figcaption { animation: belirme .5s cubic-bezier(.2, .6, .2, 1) both; }
}

/* Alt bilgi */
.alt-bilgi {
  border-top: 1px solid var(--cizgi);
  padding: 40px 8vw 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 40px;
  justify-content: space-between;
  font-size: 15px;
  color: var(--soluk);
}
.alt-bilgi p { max-width: 70ch; }

/* ---------- Uygulama sayfası ---------- */

/* Başlık ve içerik aynı sütunda: geniş ekranda en çok 1720 px, ortanın biraz solunda (boşluğun %35'i solda) */
.uygulama-bas, .icerik {
  --sutun: min(100% - 16vw, 1720px);
  width: var(--sutun);
  margin-left: max(8vw, calc((100% - var(--sutun)) * .35));
  margin-right: auto;
}
.uygulama-bas { padding: 96px 0 72px; }
/* Sayfa başındaki "← Yazılımlar": büyük, kolay tıklanır */
.kirinti { display: flex; flex-wrap: wrap; align-items: center; font-size: clamp(20px, 1.7vw, 26px); font-weight: 350; color: var(--yazi-2); margin-bottom: 40px; }
.kirinti a { display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding-right: 8px; }
.kirinti a:hover { color: var(--vurgu); }
.kirinti .ok { width: 36px; height: 24px; transform: rotate(180deg); }
.kirinti .ok path { stroke-width: 1.7; }
.uygulama-bas h1 {
  font-size: clamp(48px, 7vw, 104px);
  line-height: 1;
  letter-spacing: -.035em;
  margin: 20px 0 40px;
}
.adli-baslik { display: flex; align-items: center; gap: .3em; }
.adli-baslik .simge { flex: none; width: .9em; height: .9em; }

/* İndirme ve kaynak kod düğmeleri: başlığın hemen altında, hepsi aynı genişlikte */
.eylemler { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 14px; }
.dugme {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 66px;
  padding: 12px 32px;
  border: 1px solid var(--serit);
  background: var(--krem);
  color: #0b0f17;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.3;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.dugme small { margin-top: 3px; font-size: 13px; font-weight: 500; color: #6b4e16; letter-spacing: .03em; }
/* Bütün düğmeler ana sayfadaki yazılım kartları gibi (indirme, kaynak kod, README'deki bağlantı düğmeleri) */
.dugme:hover { background: #fbf8f1; border-color: var(--serit); color: #0b0f17; transform: translateY(-3px); }
.dugme:active { transform: none; }
@media (prefers-reduced-motion: reduce) { .dugme { transition: none; } .dugme:hover { transform: none; } }

.olgular { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 20px 32px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--cizgi); }
.olgular div { display: grid; gap: 4px; }
.olgular dt { font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--soluk); }
.olgular dd { margin: 0; font-size: 19px; }

/* İçerik solda, içindekiler sağda. İçindekiler sütunu ve aradaki boşluk dar ekranda daralır, yazıyı sıkıştırmaz;
   içindekiler kaydırırken hep ekranın dikey ortasında durur, okunan bölüm vurgulanır (site.js) */
.icerik { padding: 0 0 48px; display: grid; grid-template-columns: minmax(0, 1fr) clamp(210px, 17vw, 340px); column-gap: clamp(36px, 4vw, 96px); align-items: start; }
.icerik-ana { display: grid; gap: 96px; min-width: 0; }
.icindekiler { position: sticky; top: var(--icindekiler-ust, 40px); }
.icindekiler ul { list-style: none; margin: 0; padding: 0 0 0 clamp(18px, 1.5vw, 28px); display: grid; gap: 2px; max-height: calc(100vh - 80px); overflow-y: auto; border-left: 1px solid var(--cizgi); }
.icindekiler a { position: relative; display: block; padding: 7px 0; font-size: clamp(17px, .5vw + 10px, 25px); line-height: 1.35; color: var(--yazi-2); transition: color .2s ease; }
.icindekiler a:hover { color: var(--vurgu); }
/* Alt başlıklar ("###"): daha küçük, içeriden, soluk */
.icindekiler li.alt a { padding: 4px 0 4px clamp(14px, 1.2vw, 22px); font-size: clamp(15px, .38vw + 9px, 20px); color: var(--soluk); }
.icindekiler li.alt a:hover { color: var(--vurgu); }
/* Okunan alt başlık ana başlıklar gibi parlar; bağlı olduğu ana başlık da kum renginde kalır */
.icindekiler li.alt a[aria-current="true"] { color: var(--vurgu); font-weight: 500; }
.icindekiler a.ust-etkin { color: var(--vurgu); }
.icindekiler a[aria-current="true"] { color: var(--vurgu); font-weight: 500; }
.icindekiler a[aria-current="true"]::before { content: ""; position: absolute; left: calc(-1 * clamp(18px, 1.5vw, 28px)); top: 6px; bottom: 6px; width: 3px; background: var(--vurgu); }
.icerik h2 { font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--vurgu); margin-bottom: 28px; }

/* README: metin GitHub'dakiyle aynı, görünüm sitenin. Başlıkların büyüklük sırası README'deki gibi (h2 > h3 > h4). */
/* README yazısı geniş ekranda büyür (1600 px'te ~22, 2840 px'te ~30 px); bütün metin aynı boyda */
.readme { color: var(--yazi-2); font-size: clamp(20px, .65vw + 12px, 31px); min-width: 0; }
.readme > * + * { margin-top: 22px; }
.icerik .readme h2 {
  margin: 88px 0 24px;
  padding-top: 36px;
  border-top: 1px solid var(--cizgi);
  font-size: clamp(34px, 3.2vw, 46px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--yazi);
}
.readme > h2:first-child, .readme > hr:first-child { margin-top: 0; }
.readme h3 { font-size: clamp(25px, 2.1vw, 30px); font-weight: 400; line-height: 1.3; color: var(--yazi); margin-top: 52px; }
.readme h4, .readme h5, .readme h6 { font-size: 21px; font-weight: 500; color: var(--yazi); margin-top: 36px; }
.readme h2 + *, .readme h3 + *, .readme h4 + * { margin-top: 14px; }
.readme strong, .readme b { font-weight: 500; color: var(--yazi); }
.readme a:not(.dugme):not(.onizleme):not(.rozet) {
  text-decoration: underline;
  text-decoration-color: var(--baglanti-cizgi);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
.readme a:not(.dugme):not(.onizleme):not(.rozet):hover { color: var(--vurgu); text-decoration-color: var(--vurgu); }
.readme ul, .readme ol { padding: 0; display: grid; gap: 12px; }
.readme ul { list-style: none; }
.readme ul > li { padding-left: 26px; position: relative; }
.readme ul > li::before { content: ""; position: absolute; left: 0; top: .82em; width: 12px; height: 1px; background: var(--vurgu); }
.readme ol { list-style: decimal; padding-left: 34px; }
.readme ol > li { padding-left: 8px; }
.readme ol > li::marker { color: var(--vurgu); font-weight: 600; }
.readme code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .84em; padding: .1em .4em; background: var(--zemin-3); border: 1px solid var(--cizgi); overflow-wrap: anywhere; }
.readme pre code { padding: 0; background: none; border: 0; font-size: inherit; }
.readme pre { padding: 18px 22px; background: var(--zemin-2); border: 1px solid var(--cizgi); overflow-x: auto; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .84em; line-height: 1.6; color: var(--yazi); }
.readme blockquote { margin-left: 0; margin-right: 0; padding: 2px 0 2px 22px; border-left: 2px solid var(--vurgu); color: var(--soluk); }
.readme blockquote > * + * { margin-top: 12px; }
.readme hr { border: 0; border-top: 1px solid var(--cizgi); margin: 56px 0; }
.icerik .readme hr + h2 { border-top: 0; padding-top: 0; margin-top: 0; }
.tablo { overflow-x: auto; }
.readme table { border-collapse: collapse; width: 100%; line-height: 1.55; }
.readme th:not([align]) { text-align: left; }
.readme th { font-weight: 500; color: var(--yazi); padding: 0 24px 12px 0; border-bottom: 1px solid var(--cizgi-guclu); vertical-align: bottom; }
.readme td { padding: 14px 24px 14px 0; border-top: 1px solid var(--cizgi); vertical-align: top; }
.readme tr:first-child td { border-top: 0; }

/* Görüntüler README'deki yerlerinde, yazının içinde; sütunu aşmaz, ortalı */
.readme-gorsel { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 16px; max-width: none !important; }
/* Görüntü çerçevesi ana sayfadaki yazılım kartlarının kırık beyazı */
.readme-gorsel a.onizleme, .readme-gorsel a.gorsel-baglanti { display: block; max-width: 100%; padding: 10px; background: var(--krem); border: 1px solid var(--krem); transition: background-color .2s ease, border-color .2s ease; }
.readme-gorsel a.onizleme:hover, .readme-gorsel a.gorsel-baglanti:hover { background: var(--vurgu); border-color: var(--vurgu); }
/* Eklentilerin sitede çizilmiş görüntüleri (README'lerinde görüntü yok): girişin altında, yan yana */
.site-gorselleri a { width: min(100%, 320px); }

.readme-dugmeler { display: flex; flex-wrap: wrap; gap: 14px; max-width: none !important; }
.rozetler { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
/* Paragraf içindeki düğme, rozet ve görüntü bağlantısı metin bağlantısı gibi altı çizili olmaz */
.readme-dugmeler a, .rozetler a, .readme-gorsel a { text-decoration: none; }
.rozet { display: inline-flex; border: 1px solid var(--cizgi-guclu); font-size: 15px; line-height: 1; }
.rozet span { padding: 9px 12px; }
.rozet-ad { background: var(--zemin-3); color: var(--yazi); }
.rozet-durum { color: var(--soluk); }
.rozet-durum.gecti { color: var(--vurgu); }
.rozet:hover { border-color: var(--vurgu); }

.bilgi-sutunlari { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; }
.surumler { list-style: none; padding: 0; }
.surumler li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 2px 0; border-top: 1px solid var(--cizgi); font-size: 17px; }
.surumler a { flex: 1; padding: 10px 0; }
.surumler li span { color: var(--soluk); }
.surum-notu, .denetim-notu { font-size: 17px; color: var(--soluk); line-height: 1.6; max-width: 52ch; }
.denetim dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 28px; font-size: 17px; }
.denetim dt { color: var(--soluk); }
.denetim dd { margin: 0; }
.denetim .gecti { color: var(--vurgu); font-weight: 500; }
.denetim-notu { margin-top: 18px; }
details { margin-top: 14px; }
summary { cursor: pointer; font-size: 16px; color: var(--soluk); padding: 10px 0; }
summary:hover { color: var(--vurgu); }

.gezinti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--cizgi); }
/* Önceki/sonraki içerik sütununun sonunda: içindekiler sayfanın sonuna dek ortada kalır */
.gezinti a { display: grid; gap: 6px; align-content: start; padding: 40px 32px 40px 0; }
.gezinti a + a { border-left: 1px solid var(--cizgi); text-align: right; justify-items: end; padding: 40px 0 40px 32px; }
.gezinti .etiket { color: var(--soluk); }
.gezinti .ad { font-size: clamp(24px, 2.4vw, 33px); font-weight: 350; line-height: 1.25; }
.gezinti a:hover .ad { color: var(--vurgu); }

/* 404 */
.yok { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; padding: 96px 8vw; }
.yok h1 { font-size: clamp(56px, 8vw, 120px); line-height: 1; letter-spacing: -.035em; margin: 24px 0 32px; }

@media (max-height: 620px) and (min-width: 761px) {
  .yan { padding: 18px 0; }
  .dikey-menu ul { gap: 10px; }
  }

/* ---------- Ara boy ---------- */

@media (max-width: 1100px) {
  .icerik { grid-template-columns: minmax(0, 1fr); }
  .icindekiler { display: none; }
  .acilis { grid-template-columns: minmax(0, 1fr) minmax(0, 40%); }
  .hakkimda-duzen { grid-template-columns: minmax(0, 1fr); }
  .hakkimda-foto { grid-column: 1; grid-row: 3; justify-self: start; max-width: 640px; margin-top: 16px; }
  .hakkimda-foto figcaption { position: static; }
}

/* ---------- Telefon: yan menü üst şerit olur ---------- */

@media (max-width: 760px) {
  :root { --yan: 0px; }
  body { font-size: 17px; }
  html { scroll-padding-top: 80px; }
  .yan {
    position: sticky;
    inset: 0 auto auto 0;
    width: auto;
    height: auto;
    flex-direction: row;
    padding: 14px 16px;
    background: var(--serit);
    gap: 8px;
    overflow: visible;
  }
  .imza { font-size: 22px; justify-content: flex-start; }
  .dikey-menu ul { flex-direction: row; gap: 0; flex-wrap: nowrap; justify-content: flex-end; }
  .dikey-menu a { writing-mode: horizontal-tb; transform: none; font-size: 11px; letter-spacing: .06em; padding: 0 6px; min-height: 44px; display: flex; align-items: center; }
    .atla { left: 16px; }

  .acilis { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .acilis-foto { order: -1; height: 46vh; min-height: 280px; }
  .acilis-metin { padding: 8px 16px 72px; }
  .acilis h1 { font-size: 76px; margin: 0; }
    
  .bolum { padding: 80px 16px; }
  .bolum-bas { margin-bottom: 40px; }
  .hakkimda-metin p:first-child { font-size: 23px; }
  .hakkimda-metin p { font-size: 19px; }
  .hesaplar { gap: 12px; margin-top: 36px; }
  .hesaplar a { width: 48px; height: 48px; }
  .yazilim-kartlari { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .yazilim-karti { padding: 24px; }
  .kart-bas .simge { width: 56px; height: 56px; }
  .galeri { columns: 2 140px; column-gap: 10px; }
  .onizleme-dugme { width: 44px; height: 44px; }
  .onizleme-dugme.onceki, .onizleme-dugme.sonraki { top: auto; bottom: 20px; transform: none; }
  .onizleme-pencere figure { padding: 72px 16px 84px; }
  .galeri a { margin-bottom: 10px; }
    .alt-bilgi { padding: 32px 16px 48px; }

  .uygulama-bas, .icerik { width: auto; margin-left: 16px; margin-right: 16px; }
  .uygulama-bas { padding: 48px 0 56px; }
  .kirinti { font-size: 20px; margin-bottom: 24px; }
  .kirinti .ok { width: 30px; height: 20px; }
  .icerik { padding: 0 0 72px; }
  .icerik-ana { gap: 72px; }
  .bilgi-sutunlari { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .readme { font-size: 18px; }
  .icerik .readme h2 { margin-top: 64px; }
  .readme-gorsel a.onizleme { padding: 6px; }
  .bilgi-sutunlari { gap: 56px; }
  .eylemler { display: grid; grid-auto-flow: row; width: 100%; }
  .readme-dugmeler .dugme { width: 100%; }
  .gezinti { grid-template-columns: minmax(0, 1fr); }
  .gezinti a, .gezinti a + a { padding: 28px 0; }
  .gezinti a + a { border-left: none; border-top: 1px solid var(--cizgi); }
  .yok { padding: 64px 16px; }
}

/* Yatay tutulan telefon ya da çok büyütülmüş pencere: ön izleme düğmeleri yanlara geçer, fotoğrafa yer kalır */
@media (max-width: 760px) and (max-height: 500px) {
  .onizleme-pencere figure { padding: 16px 68px; }
  .onizleme-dugme.kapat { top: 12px; right: 12px; }
  .onizleme-dugme.onceki, .onizleme-dugme.sonraki { top: 50%; bottom: auto; transform: translateY(-50%); }
  .onizleme-dugme.onceki { left: 12px; }
  .onizleme-dugme.sonraki { right: 12px; }
}

@media (max-width: 359px) {
  .dikey-menu ul { flex-wrap: wrap; }
}

@media (forced-colors: active) {
  .dikey-menu a[aria-current] { outline: 2px solid Highlight; outline-offset: -2px; }
  .rozet, .readme-gorsel a.onizleme { border-color: CanvasText; }
  .dugme { border-color: ButtonText; }
  .hesaplar a { border-color: LinkText; }
}

@media print {
  :root { --zemin: #fff; --zemin-2: #fff; --zemin-3: #fff; --yazi: #000; --yazi-2: #222; --soluk: #444; --cizgi: #bbb; --cizgi-guclu: #888; --vurgu: #6b4e16; }
  .yan, .atla, .acilis-foto, .galeri { display: none; }
  .hesaplar a { background: none; color: var(--yazi); border-color: var(--cizgi-guclu); }
  .ana { margin: 0; }
  .acilis { min-height: 0; grid-template-columns: 1fr; }
  .bolum, .uygulama-bas, .icerik { padding-left: 0; padding-right: 0; }
}