/* bit101.org ortak stili. Basılı bir teknik veri sayfası gibi: kâğıt zemin, mürekkep, tek vurgu rengi (simgenin
   kırmızısı), kalın ve ince çizgiler, numaralı bölümler. Yazı tipleri siteyle gelir (yazitipi/), dış kaynak yok.
   Japonca sayfalarda Latin harfleri aynı yazı tipiyle, Japonca karakterler sistemin Japonca yazı tipiyle çizilir. */
:root {
  --kagit: #f2eee4; --kagit-2: #e8e2d4; --murekkep: #16130e; --murekkep-2: #4b453b; --soluk: #6b6457;
  --cizgi: #d4ccba; --kirmizi: #c8001f; --kirmizi-acik: rgba(200, 0, 31, .07); --sari: #f1bf00;
  --f-baslik: "Spectral", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, serif;
  --f-metin: "IBM Plex Sans", "Hiragino Sans", "Yu Gothic UI", "Meiryo", "Noto Sans JP", system-ui, sans-serif;
  --f-veri: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --genislik: 1120px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kagit: #13110d; --kagit-2: #1d1a15; --murekkep: #ede7da; --murekkep-2: #b9b1a2; --soluk: #8c8576;
    --cizgi: #322d25; --kirmizi: #ff5a6a; --kirmizi-acik: rgba(255, 90, 106, .08); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --kagit: #13110d; --kagit-2: #1d1a15; --murekkep: #ede7da; --murekkep-2: #b9b1a2; --soluk: #8c8576;
  --cizgi: #322d25; --kirmizi: #ff5a6a; --kirmizi-acik: rgba(255, 90, 106, .08); color-scheme: dark;
}

/* Japonca: Latin harfleri yine Spectral / Plex ile; Japonca karakterler için önce Mac (Hiragino), sonra Windows
   (Yu, Meiryo) yazı tipleri. Mincho yoksa başlıklar kalın Gothic'e düşer. "palt" kana aralığını sıkılaştırır. */
:root:lang(ja) {
  --f-baslik: "Spectral", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Hiragino Sans",
    "Yu Gothic", "YuGothic", "Meiryo", serif;
  --f-metin: "IBM Plex Sans", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic UI", "YuGothic", "Meiryo", "Noto Sans JP", sans-serif;
  --f-veri: "IBM Plex Mono", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic UI", "Meiryo", monospace;
}
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(ja) .veri dt, :lang(ja) .menu a { font-feature-settings: "palt"; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--kagit); color: var(--murekkep); font: 17px/1.62 var(--f-metin); }
:lang(ja) body, body:lang(ja) { line-height: 1.85; }
:lang(ja) { word-break: auto-phrase; line-break: strict; }
a { color: inherit; text-decoration-color: var(--kirmizi); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
a:hover { color: var(--kirmizi); }
:focus-visible { outline: 2px solid var(--kirmizi); outline-offset: 3px; }
.kap { max-width: var(--genislik); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.no { font: 500 13px/1 var(--f-veri); color: var(--kirmizi); letter-spacing: .04em; }

/* √2 şeridi: sayfanın en üstünde, √2'nin gerçek haneleri */
.serit { overflow: hidden; white-space: nowrap; font: 11px/1 var(--f-veri); letter-spacing: .18em; color: var(--soluk);
  padding: 7px 20px; border-bottom: 1px solid var(--cizgi); }
.serit span { color: var(--kirmizi); }

/* Künye (üst bölüm) */
.bas { border-bottom: 2px solid var(--murekkep); }
.bas .kap { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; padding-top: 16px; padding-bottom: 16px; }
.marka { display: flex; align-items: center; gap: 14px; text-decoration: none; margin-right: auto; }
.marka img { width: 56px; height: 56px; border-radius: 13px; display: block; }
.marka b { display: block; font: 600 28px/1 var(--f-baslik); letter-spacing: -.01em; }
.marka small { display: block; margin-top: 6px; font: 11px/1 var(--f-veri); letter-spacing: .14em; color: var(--soluk); }
.marka:hover b { color: var(--kirmizi); }
.menu { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.menu a { text-decoration: none; font-weight: 500; font-size: 16px; padding: 4px 0; border-bottom: 2px solid transparent; }
.menu a[aria-current="page"] { border-bottom-color: var(--kirmizi); }
.dil { display: inline-flex; border: 1.5px solid var(--murekkep); }
.dil a { text-decoration: none; font: 500 13px/1 var(--f-veri); padding: 8px 11px; }
.dil a + a { border-left: 1.5px solid var(--murekkep); }
.dil a[aria-current="true"] { background: var(--murekkep); color: var(--kagit); }
.dil a:not([aria-current="true"]):hover { background: var(--kirmizi-acik); color: var(--murekkep); }

main.kap { padding-top: 0; padding-bottom: 80px; }
h1, h2, h3 { font-family: var(--f-baslik); font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(46px, 8vw, 96px); line-height: .98; letter-spacing: -.025em; margin: 0 0 22px; }
:lang(ja) h1 { letter-spacing: 0; line-height: 1.15; }
h2 { font-size: clamp(28px, 3.4vw, 38px); line-height: 1.12; letter-spacing: -.01em; margin: 0; }
h3 { font-size: 22px; line-height: 1.25; margin: 0; }
p { margin: 0 0 16px; }

/* Açılış */
.acilis { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px 64px; align-items: start;
  padding: 56px 0 64px; border-bottom: 1px solid var(--cizgi); }
@media (max-width: 880px) { .acilis { grid-template-columns: minmax(0, 1fr); padding-top: 40px; } }
.damga { display: inline-block; margin: 0 0 28px; padding: 7px 12px 6px; border: 1.5px solid var(--kirmizi); color: var(--kirmizi);
  font: 500 12px/1.3 var(--f-veri); letter-spacing: .14em; text-transform: uppercase; transform: rotate(-1deg); }
:lang(ja) .damga { letter-spacing: .06em; }
.giris { font-size: 21px; line-height: 1.55; color: var(--murekkep-2); max-width: 34em; }
.yonler { display: flex; flex-wrap: wrap; gap: 14px 34px; margin: 32px 0 0; }
.yonler a { font-weight: 600; font-size: 17px; text-decoration-line: underline; text-decoration-thickness: 2px; }
.yonler a::after, .ok::after { content: " →"; color: var(--kirmizi); }
.kok2 { margin: 0; }
.kok2 img { width: 168px; height: 168px; border-radius: 38px; display: block; margin-bottom: 28px; }
.kok2-haneler { border-top: 2px solid var(--murekkep); padding-top: 12px; font: 13px/1.75 var(--f-veri);
  letter-spacing: .05em; color: var(--murekkep-2); word-spacing: .3em; }
.kok2-haneler b { font-weight: 500; color: var(--murekkep); }
.kok2-haneler .ilk { color: var(--kirmizi); }
.kok2 figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--soluk); }

/* Bölümler: solda numara, sağda içerik */
.bolum { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px 40px; padding: 72px 0 0; }
@media (max-width: 880px) { .bolum { grid-template-columns: minmax(0, 1fr); padding-top: 56px; } }
.bolum > .no { padding-top: 10px; border-top: 2px solid var(--murekkep); }
.bolum > div > h2 { margin-bottom: 18px; }
.bolum .aciklama { color: var(--murekkep-2); max-width: 40em; }

/* Teknik veri sayfası */
.veri { margin: 8px 0 0; border-top: 2px solid var(--murekkep); }
.veri .satir { display: grid; grid-template-columns: 210px minmax(0, 1fr) 240px; gap: 8px 32px; padding: 22px 0;
  border-bottom: 1px solid var(--cizgi); }
@media (max-width: 980px) { .veri .satir { grid-template-columns: minmax(0, 1fr); } }
.veri dt { font: 600 21px/1.25 var(--f-baslik); }
.veri dt .no { display: block; margin-bottom: 6px; }
.veri dd { margin: 0; }
.veri dd p { margin: 0; }
.veri .spek { font: 13px/1.6 var(--f-veri); color: var(--soluk); }

/* 3x+1 grafiği */
.collatz { margin: 8px 0 0; border-top: 2px solid var(--murekkep); padding-top: 18px; }
.collatz svg { display: block; width: 100%; height: auto; }
.collatz .eksen { stroke: var(--cizgi); stroke-width: 1; }
.collatz .yol { fill: none; stroke: var(--kirmizi); stroke-width: 1.75; stroke-linejoin: round; }
.collatz .zirve { fill: var(--kagit); stroke: var(--kirmizi); stroke-width: 2; }
.collatz figcaption { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 10px; font: 13px/1.5 var(--f-veri); color: var(--soluk); }

/* Uyarı: ters çevrilmiş blok */
.uyari { background: var(--murekkep); color: var(--kagit); padding: 36px 40px; margin-top: 8px; }
@media (max-width: 600px) { .uyari { padding: 28px 22px; } }
.uyari .no { color: var(--sari); display: block; margin-bottom: 14px; }
.uyari h2 { margin-bottom: 16px; }
.uyari p { max-width: 46em; opacity: .92; }
.uyari ul { list-style: none; margin: 20px 0 0; padding: 0; max-width: 46em; }
.uyari li { padding: 12px 0 12px 28px; border-top: 1px solid rgba(127, 120, 105, .45); position: relative; }
.uyari li::before { content: "—"; position: absolute; left: 0; color: var(--sari); }

/* Yol haritası */
.yol-haritasi { list-style: none; margin: 8px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; }
@media (max-width: 980px) { .yol-haritasi { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 18px; } }
@media (max-width: 520px) { .yol-haritasi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.yol-haritasi li { border-top: 6px solid var(--murekkep); padding-top: 10px; font-size: 14px; line-height: 1.35; }
.yol-haritasi li.plan { border-top-color: var(--cizgi); }
.yol-haritasi li.taslak { border-top-style: double; border-top-color: var(--kirmizi); }
.yol-haritasi .faz { display: block; font: 500 15px/1 var(--f-veri); margin-bottom: 6px; }
.yol-haritasi .durum { display: block; margin-top: 6px; font: 11px/1.3 var(--f-veri); letter-spacing: .06em; color: var(--soluk); text-transform: uppercase; }

/* Laboratuvarlar */
.lablar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; margin-top: 8px; }
@media (max-width: 760px) { .lablar { grid-template-columns: minmax(0, 1fr); } }
a.lab { display: block; text-decoration: none; border-top: 2px solid var(--murekkep); padding-top: 14px; }
a.lab h3 { font-size: 28px; margin: 8px 0 10px; }
a.lab:hover h3 { color: var(--kirmizi); }
a.lab p { color: var(--murekkep-2); margin-bottom: 12px; }
a.lab .ok { font: 500 13px/1 var(--f-veri); letter-spacing: .06em; color: var(--murekkep); }
.lab .boyut { font: 12px/1 var(--f-veri); color: var(--soluk); margin-left: 10px; }
.not-satiri { margin-top: 28px; padding: 12px 16px; border-left: 3px solid var(--kirmizi); background: var(--kirmizi-acik); font-size: 15px; }

/* Sayfa başlığı (iç sayfalar) */
.sayfa-bas { padding: 52px 0 36px; border-bottom: 1px solid var(--cizgi); }
.sayfa-bas h1 { font-size: clamp(40px, 6vw, 68px); margin-bottom: 16px; }
.sayfa-bas .giris { margin: 0; }

/* Tablolar */
.tablo { overflow-x: auto; margin: 0 0 20px; border-top: 2px solid var(--murekkep); }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--cizgi); }
th { font: 500 11px/1.4 var(--f-veri); letter-spacing: .08em; text-transform: uppercase; color: var(--soluk); }
td.ozet { font: 13px/1.5 var(--f-veri); color: var(--soluk); }

/* Kod */
code { font: .86em/1.4 var(--f-veri); background: var(--kagit-2); padding: 1px 5px; overflow-wrap: anywhere; }
pre { background: var(--kagit-2); border-left: 3px solid var(--murekkep); padding: 14px 18px; overflow-x: auto; margin: 0 0 18px; }
pre code { background: none; padding: 0; font-size: 14px; line-height: 1.55; overflow-wrap: normal; }

/* Adımlar (indirme) */
ol.adimlar { list-style: none; counter-reset: adim; margin: 8px 0 24px; padding: 0; border-top: 2px solid var(--murekkep); }
ol.adimlar > li { counter-increment: adim; display: grid; grid-template-columns: 56px minmax(0, 1fr); padding: 20px 0; border-bottom: 1px solid var(--cizgi); }
ol.adimlar > li::before { content: counter(adim, decimal-leading-zero); font: 500 15px/1.6 var(--f-veri); color: var(--kirmizi); }
ol.adimlar pre { margin: 12px 0 8px; }
.duz-liste { padding-left: 0; list-style: none; border-top: 2px solid var(--murekkep); margin: 8px 0 20px; }
.duz-liste li { padding: 14px 0; border-bottom: 1px solid var(--cizgi); }

/* Belgeler */
.belge-dizini { list-style: none; margin: 8px 0 0; padding: 0; border-top: 2px solid var(--murekkep); }
.belge-dizini a { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 4px 24px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--cizgi); text-decoration: none; }
@media (max-width: 640px) { .belge-dizini a { grid-template-columns: 44px minmax(0, 1fr); } .belge-dizini .dosya { grid-column: 2; } }
.belge-dizini h2 { font-size: 26px; }
.belge-dizini a:hover h2 { color: var(--kirmizi); }
.belge-dizini p { grid-column: 2; margin: 4px 0 0; color: var(--murekkep-2); }
.belge-dizini .dosya { font: 12px/1 var(--f-veri); color: var(--soluk); }
.belge-duzen { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 56px; align-items: start; padding-top: 48px; }
@media (max-width: 900px) { .belge-duzen { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.icindekiler { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; font-size: 14px;
  border-top: 2px solid var(--murekkep); padding-top: 12px; }
@media (max-width: 900px) { .icindekiler { position: static; max-height: none; } }
.icindekiler h2 { font: 500 11px/1.2 var(--f-veri); letter-spacing: .12em; text-transform: uppercase; color: var(--soluk); margin-bottom: 12px; }
.icindekiler ol { list-style: none; margin: 0; padding: 0; }
.icindekiler li { margin: 0 0 8px; line-height: 1.35; }
.icindekiler a { text-decoration: none; color: var(--murekkep-2); }
.icindekiler a:hover { color: var(--kirmizi); }
.belge { max-width: 46em; }
.belge > h1:first-child { font-size: clamp(34px, 5vw, 52px); }
.belge h2 { margin: 52px 0 16px; padding-top: 14px; border-top: 2px solid var(--murekkep); font-size: 30px; scroll-margin-top: 20px; }
.belge h3 { margin: 32px 0 10px; font-size: 21px; scroll-margin-top: 20px; }
.belge h4 { margin: 24px 0 8px; font: 600 16px/1.3 var(--f-metin); }
.belge ul, .belge ol { padding-left: 24px; margin: 0 0 16px; }
.belge li { margin-bottom: 5px; }
.belge li > ul, .belge li > ol { margin: 5px 0 0; }
.belge li p { margin-bottom: 6px; }
.belge blockquote { margin: 0 0 18px; padding: 4px 0 4px 18px; border-left: 3px solid var(--kirmizi); color: var(--murekkep-2); }
.belge blockquote p:last-child { margin-bottom: 0; }
.belge hr { border: 0; border-top: 1px solid var(--cizgi); margin: 36px 0; }
.belge hr:has(+ h2) { display: none; }
.belge .tablo { font-size: 14px; }
.belge th, .belge td { padding: 9px 12px 9px 0; }
.etiket { display: inline-block; padding: 1px 6px; border: 1px solid currentColor; font: 500 11px/1.5 var(--f-veri);
  letter-spacing: .08em; color: var(--soluk); vertical-align: middle; text-transform: uppercase; }
.cevrilmedi { margin: 0 0 28px; padding: 14px 18px; border: 1.5px solid var(--kirmizi); font-size: 15px; }
.cevrilmedi b { display: block; font: 500 11px/1.4 var(--f-veri); letter-spacing: .12em; text-transform: uppercase; color: var(--kirmizi); margin-bottom: 4px; }
.kaynak { margin-top: 56px; font: 13px/1.5 var(--f-veri); color: var(--soluk); }

/* Dil seçme sayfası (sitenin kökü) */
.secim { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 28px; padding: 40px 20px; text-align: center; }
.secim img { width: 160px; height: 160px; border-radius: 36px; }
.secim h1 { font-size: clamp(40px, 7vw, 72px); margin: 0; }
.secim nav { display: flex; flex-wrap: wrap; justify-content: center; border: 1.5px solid var(--murekkep); }
.secim nav a { text-decoration: none; padding: 14px 26px; font: 500 18px/1 var(--f-metin); }
.secim nav a + a { border-left: 1.5px solid var(--murekkep); }
.secim nav a:hover { background: var(--murekkep); color: var(--kagit); }

/* Alt bilgi */
.alt { border-top: 2px solid var(--murekkep); color: var(--murekkep-2); font-size: 14px; }
.alt .kap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px 40px; padding-top: 32px; padding-bottom: 40px; }
@media (max-width: 760px) { .alt .kap { grid-template-columns: minmax(0, 1fr); } }
.alt img { width: 40px; height: 40px; border-radius: 9px; display: block; }
.alt p { margin: 0 0 8px; max-width: 60em; }
.alt .kucuk { font: 12px/1.6 var(--f-veri); color: var(--soluk); }
.alt nav { display: flex; flex-direction: column; gap: 6px; font: 13px/1.4 var(--f-veri); }
.alt nav a { text-decoration: none; }
.alt nav a[aria-current="true"] { color: var(--kirmizi); }