/* ————————————————————————————————————————————————
   toprak.run
   Sistem serifleri, sıcak kâğıt, sakin gece.
   Süs yok; ritim var. Tek akış değil; kategoriler ve raf.
   ————————————————————————————————————————————————
   1. PALET      5. RAF
   2. TEMEL      6. BAĞLAM
   3. OKUMA      7. ÇEKMECE (dar ekran)
   4. DİZİN      8. TEMA · 404
   ———————————————————————————————————————————————— */

/* ══ 1. PALET ══════════════════════════════════════
   Aşağıdaki iki blok light-dark() olmayan tarayıcılar için yedek;
   üçüncü blok destekleyende üzerine yazar. Desteklemeyen tarayıcı
   onu ayrıştıramaz, sessizce atar ve yedekle kalır.

   Sarılık ölçüsü (kırmızı kanal eksi mavi kanal): zemin +6, mürekkep +5.
   Sıcaklık duruyor, sepia yok. */
:root{
  color-scheme:light dark;
  --kagit:#FAF8F4; --pano:#F1EEE8;
  --murekkep:#23211E; --soluk:#6A655E; --vurgu:#A6371F;
  --cizgi:#DEDAD2; --cizgi-ince:#EBE8E2;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --kagit:#1B1A18; --pano:#24231F;
    --murekkep:#E8E5DE; --soluk:#A29C93; --vurgu:#E39172;
    --cizgi:#34322E; --cizgi-ince:#262421;
  }
}
:root{
  --kagit:     light-dark(#FAF8F4, #1B1A18);  /* kâğıt / gece */
  --pano:      light-dark(#F1EEE8, #24231F);  /* kod zemini */
  --murekkep:  light-dark(#23211E, #E8E5DE);  /* 15.1:1 · 13.8:1 */
  --soluk:     light-dark(#6A655E, #A29C93);  /*  5.4:1 ·  6.4:1 */
  --vurgu:     light-dark(#A6371F, #E39172);  /*  6.2:1 ·  7.1:1 */
  --cizgi:     light-dark(#DEDAD2, #34322E);
  --cizgi-ince:light-dark(#EBE8E2, #262421);
}

/* ══ 2. TEMEL ══════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--kagit);
  color:var(--murekkep);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  font-size:1.0625rem;
  line-height:1.72;
  font-variant-numeric:oldstyle-nums;
  font-kerning:normal;
}
/* Ölçü metnin özelliğidir, kabuğun değil:
   66ch okuma sütununa aittir, dizin ona mahkûm değil. */
.kabuk{max-width:66ch;margin-inline:auto;padding:clamp(2.25rem,6vh,4rem) 1.375rem 3.25rem}
.kabuk--dizin{max-width:74rem}
::selection{background:color-mix(in srgb,var(--vurgu) 24%,transparent)}
a{
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
  text-decoration-color:color-mix(in srgb,var(--vurgu) 50%,transparent);
}
a:hover{color:var(--vurgu);text-decoration-color:currentColor}
a:focus-visible{outline:2px solid var(--vurgu);outline-offset:3px;border-radius:2px}
.atla{position:absolute;left:-999px;top:0;background:var(--kagit);color:var(--murekkep);padding:.5rem .9rem;z-index:30}
.atla:focus{left:.75rem;top:.75rem}
.gizli{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Ana alan + raf. Raf ikinci bir keşif motorudur.
   minmax(0,…) şart: 1fr'nin varsayılan min-width'i auto'dur ve
   uzun bir tablo satırı sütunu ekranın dışına taşırır. */
.alan{display:grid;grid-template-columns:minmax(0,1fr) 14.5rem;gap:2.75rem;align-items:start}
.alan--okuma{grid-template-columns:minmax(0,66ch) 14.5rem;justify-content:start}
.alan>*{min-width:0}

/* Ayraç */
hr{border:0;text-align:center;margin:3.25rem 0 .5rem}
hr::before{content:"*\2002\2002*\2002\2002*";color:var(--soluk)}

/* Bölüm başlığı: küçük, majüskül, sessiz */
.bolum-basi{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.17em;font-weight:400;
  color:var(--soluk);margin:0 0 .6rem;padding-bottom:.34rem;
  border-bottom:1px solid var(--cizgi);
}

/* Kırıntı */
.kirinti{font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;color:var(--soluk);margin:0}
.kirinti a{text-decoration:none}
.kirinti a:hover{color:var(--vurgu);text-decoration:underline}
.kirinti .ayrac{margin:0 .55em;opacity:.6}
.ust{padding-bottom:.9rem;border-bottom:1px solid var(--cizgi);margin-bottom:2.4rem}

/* ══ 3. ANA SAYFA BAŞLIĞI ══════════════════════════ */
.masthead{padding-bottom:1.6rem;border-bottom:1px solid var(--cizgi);margin-bottom:2.4rem}
.kunye-ana{font-family:var(--mono);font-size:.72rem;letter-spacing:.17em;color:var(--soluk);margin:0 0 .8rem}
.manifesto{font-size:clamp(1.35rem,3.4vw,1.72rem);font-weight:600;line-height:1.3;letter-spacing:-.005em;margin:0 0 .65rem;text-wrap:balance;max-width:34ch}
.bio-metin{font-size:.96rem;margin:0 0 .9rem;text-wrap:pretty;max-width:62ch;color:var(--soluk)}
.baglar{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;font-size:.88rem}
.baglar li+li::before{content:"·";margin:0 .6em;color:var(--soluk)}

/* Kategori sayfası başlığı */
.kat-basi{padding-bottom:1.2rem;border-bottom:1px solid var(--cizgi);margin-bottom:1.8rem}
.kat-basi h1{font-size:clamp(1.35rem,3.2vw,1.75rem);font-weight:600;line-height:1.25;margin:.55rem 0 .45rem}
.kat-kunye{font-family:var(--mono);font-size:.74rem;letter-spacing:.07em;color:var(--soluk);margin:0}
.kat-ne{font-size:.95rem;color:var(--soluk);margin:.85rem 0 0;max-width:62ch;text-wrap:pretty}

/* ══ 4. YOĞUN DİZİN ════════════════════════════════
   Çok satır, sıfır vurgu. Kart yok, küçük resim yok,
   "öne çıkan" yok. Yoğunluk karmaşa değildir; karmaşa
   vurgunun her yere dağılmasıdır. */
.dizin{width:100%;border-collapse:collapse;font-size:.95rem;line-height:1.45}
.dizin thead th{
  font-family:var(--mono);font-weight:400;font-size:.66rem;letter-spacing:.14em;
  color:var(--soluk);text-align:left;padding:0 .9rem .35rem 0;
  border-bottom:1px solid var(--cizgi);white-space:nowrap;
}
.dizin thead th.no,.dizin thead th.tarih,.dizin thead th.etiket{text-align:right}
.dizin td{padding:.28rem .9rem .28rem 0;border-bottom:1px solid var(--cizgi-ince);vertical-align:baseline}
.dizin tr:last-child td{border-bottom:0}
.dizin tr:hover td{background:color-mix(in srgb,var(--vurgu) 6%,transparent)}
.dizin a{text-decoration:none;text-wrap:pretty}
.dizin a:hover{color:var(--vurgu);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.dizin .no{font-family:var(--mono);font-size:.78rem;font-variant-numeric:tabular-nums;
           color:var(--soluk);text-align:right;white-space:nowrap;width:3.2rem;padding-right:.9rem}
.dizin .kim{color:var(--soluk);font-size:.88rem;white-space:nowrap;
            max-width:14rem;overflow:hidden;text-overflow:ellipsis}
/* Kılavuz dizininde tek satırlık özet asıl bilgidir; kırpılmaz, sarar. */
.dizin .ozet{color:var(--soluk);font-size:.9rem;text-wrap:pretty}
.dizin .tarih{font-family:var(--mono);font-size:.76rem;color:var(--soluk);
              white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.dizin .etiket{font-family:var(--mono);font-size:.68rem;letter-spacing:.09em;
               color:var(--soluk);white-space:nowrap;text-align:right}
.dizin .etiket a{color:inherit}
.dizin-devam{font-family:var(--mono);font-size:.76rem;color:var(--soluk);margin:.9rem 0 0}
/* Kaynakta olmayan veri gizlenmez, işaretlenir. */
.eksik{font-style:italic;opacity:.6}

/* Yıl kümesi */
.yil-basi{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;font-weight:400;
  color:var(--soluk);margin:1.7rem 0 .35rem;padding-bottom:.28rem;
  border-bottom:1px solid var(--cizgi);scroll-margin-top:1.5rem;
}
.yil-basi:first-of-type{margin-top:0}

/* ══ 5. RAF ════════════════════════════════════════
   Kenar çubuğu çöplük değildir. Kutu yok, gölge yok. */
.raf{font-size:.86rem;line-height:1.5}
.raf>section+section{margin-top:1.9rem}
.raf h2{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;font-weight:400;
  color:var(--soluk);margin:0 0 .5rem;padding-bottom:.3rem;border-bottom:1px solid var(--cizgi-ince);
}
.raf ul{list-style:none;margin:0;padding:0}
.raf li{display:flex;justify-content:space-between;align-items:baseline;gap:.7rem;padding:.16rem 0}
.raf li.tek{display:block}
.raf a{text-decoration:none}
.raf a:hover{color:var(--vurgu);text-decoration:underline;text-underline-offset:.18em}
.raf .n{font-family:var(--mono);font-size:.72rem;color:var(--soluk);
        font-variant-numeric:tabular-nums;white-space:nowrap}
.raf p{margin:.4rem 0 0;color:var(--soluk);font-size:.82rem;text-wrap:pretty}
@media (min-width:58.01rem){.raf--yapisik{position:sticky;top:1.6rem}}

/* ══ 6. YAZI SAYFASI ═══════════════════════════════ */
.yazi-basi{margin-bottom:2.4rem}
.kicker{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--vurgu);margin:0 0 .85rem}
.kicker a{color:inherit;text-decoration-color:color-mix(in srgb,var(--vurgu) 45%,transparent)}
.baslik{font-size:clamp(1.7rem,4.5vw,2.15rem);font-weight:600;line-height:1.22;letter-spacing:-.005em;margin:0 0 .7rem;text-wrap:balance}
/* İki katmanlı zaman: metnin yaşı ile çevirinin yaşı ayrı olgulardır. */
.zaman{font-family:var(--mono);font-size:.78rem;letter-spacing:.03em;color:var(--soluk);margin:0;line-height:1.7}
.zaman .ayrac{margin:0 .55em;opacity:.6}

/* Gövde — kitap dizgisi: paragraf arası boşluk yok, girinti var */
/* Arşiv metinleri uzun bölünemez dizgelerle dolu (seçenek katarları, yollar,
   URL'ler). Bunlar kabı taşırmaz ama metin dışarı taşar ve sayfa yana kayar. */
.yazi{font-size:1.06em;overflow-wrap:break-word}
.dizin .bas,.raf,.baglam{overflow-wrap:break-word}
.yazi p{margin:0;text-wrap:pretty;hyphens:auto;-webkit-hyphens:auto}
.yazi p+p{text-indent:1.6em}
.yazi h2{
  font-size:1.32rem;font-weight:600;line-height:1.3;letter-spacing:.005em;
  margin:2.4em 0 .85em;padding-bottom:.35em;
  border-bottom:1px solid var(--cizgi-ince);scroll-margin-top:1.5rem;
}
.yazi h3{font-size:1.08rem;font-weight:600;font-style:italic;line-height:1.35;margin:2em 0 .7em;scroll-margin-top:1.5rem}
.yazi h4{font-size:1rem;font-weight:600;margin:1.8em 0 .6em}
.yazi h2+p,.yazi h3+p,.yazi h4+p,.yazi pre+p,.yazi figure+p,.yazi ul+p,.yazi ol+p,
.yazi .tablo+p,.yazi blockquote+p,.yazi hr+p,
.yazi p:has(>img)+p{text-indent:0}
/* Tamamı kalın olan paragraf (röportaj sorusu, ara başlık gibi kullanılan
   satır) girintilenmemeli — kendisi de, kendinden sonraki de. */
.yazi p:has(>strong:only-child){text-indent:0;margin-top:1.5em}
.yazi p:has(>strong:only-child)+p{text-indent:0}
.yazi strong{font-weight:600}
.yazi blockquote{margin:1.7em 1.4em;font-style:italic}
.yazi blockquote p{text-indent:0}
.yazi blockquote footer{font-style:normal;font-size:.88rem;color:var(--soluk);margin-top:.6em}
.yazi blockquote cite{font-style:normal}
.yazi ul,.yazi ol{margin:1.5em 0;padding-left:1.6em}
.yazi li{margin:.5em 0;text-wrap:pretty}
.yazi li::marker{color:var(--soluk)}
.yazi img{max-width:100%;height:auto;display:block;margin:2em auto}
.yazi hr{margin:2.6em 0}
code{
  font-family:var(--mono);font-size:.82em;
  background:var(--pano);border-radius:3px;padding:.12em .38em;
}
.yazi pre{
  background:var(--pano);
  border:1px solid var(--cizgi-ince);
  border-radius:6px;
  padding:1rem 1.2rem;
  margin:1.7em 0;
  overflow-x:auto;
  line-height:1.55;
}
.yazi pre code{background:transparent;padding:0;font-size:.85rem}
/* Dil etiketi: metin build sırasında ASCII olarak büyütülür
   (text-transform tr yerelinde i→İ tuzağına düşer, o yüzden CSS'te yok) */
.yazi pre[data-lang]{position:relative;padding-top:2.1rem}
.yazi pre[data-lang]::before{
  content:attr(data-lang);
  position:absolute;top:.6rem;right:.85rem;
  font-family:var(--mono);
  font-size:.66rem;letter-spacing:.14em;color:var(--soluk);
}

/* Tablo */
.tablo{overflow-x:auto;margin:1.7em 0}
.tablo:focus-visible{outline:2px solid var(--vurgu);outline-offset:3px}
.tablo table{border-collapse:collapse;width:100%;font-size:.92rem;line-height:1.5}
.tablo caption{caption-side:top;text-align:left;font-style:italic;font-size:.88rem;color:var(--soluk);padding-bottom:.55em}
.tablo th{text-align:left;font-weight:600;border-bottom:1px solid var(--murekkep);padding:.45em 1.1em .45em 0}
.tablo td{border-bottom:1px solid var(--cizgi-ince);padding:.5em 1.1em .5em 0}
.tablo th:last-child,.tablo td:last-child{padding-right:0}

/* Görsel */
.yazi figure{margin:2em 0}
.yazi figure img{display:block;max-width:100%;height:auto;margin-inline:auto}
.yazi figcaption{text-align:center;font-style:italic;font-size:.88rem;color:var(--soluk);margin-top:.7em}
/* Görseli saran bağlantı metin bağlantısı gibi altı çizili görünmesin;
   tıklanabilir olduğu imleçten ve hafif tepkiden anlaşılsın. */
.yazi a:has(>img){display:block;text-decoration:none;border-radius:2px}
.yazi a:has(>img):hover img{outline:2px solid var(--vurgu);outline-offset:3px}
.yazi a:has(>img):focus-visible{outline:2px solid var(--vurgu);outline-offset:3px}

.imza{margin:3rem 0 0;text-align:center;font-size:.85rem;letter-spacing:.35em;color:var(--soluk);text-indent:.35em}

/* ══ 7. BAĞLAM BLOĞU ═══════════════════════════════
   Yazı yalnız değildir; bir ekosistemin parçasıdır. */
.baglam{margin-top:3.4rem;padding-top:1.5rem;border-top:1px solid var(--cizgi)}
.baglam section+section{margin-top:1.9rem}
.baglam h2{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;font-weight:400;
  color:var(--soluk);margin:0 0 .55rem;
}
.baglam ul{list-style:none;margin:0;padding:0;font-size:.94rem}
.baglam li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
           padding:.24rem 0;border-bottom:1px solid var(--cizgi-ince)}
.baglam li:last-child{border-bottom:0}
.baglam a{text-decoration:none;text-wrap:pretty}
.baglam a:hover{color:var(--vurgu);text-decoration:underline;text-underline-offset:.18em}
.baglam .n{font-family:var(--mono);font-size:.72rem;color:var(--soluk);
           font-variant-numeric:tabular-nums;white-space:nowrap}
.baglam>p{font-size:.82rem;color:var(--soluk);margin:.6rem 0 0}

.komsu{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;font-size:.92rem}
.komsu>div{min-width:0}
.komsu .yon{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--soluk);display:block;margin-bottom:.2rem}
.komsu .sag{text-align:right}
.komsu a{text-decoration:none}
.komsu a:hover{color:var(--vurgu);text-decoration:underline;text-underline-offset:.18em}
@media (max-width:34rem){.komsu{grid-template-columns:1fr}.komsu .sag{text-align:left}}

/* ══ 8. SAYFA ALTI ═════════════════════════════════ */
.alt{margin-top:3.5rem;padding-top:1.4rem;border-top:1px solid var(--cizgi);font-size:.88rem;color:var(--soluk)}
.alt p{margin:.3rem 0}
.alt-harita{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin:0 0 .9rem;padding:0;list-style:none;font-size:.84rem}
.alt-harita a{text-decoration:none}
.alt-harita a:hover{color:var(--vurgu);text-decoration:underline}

/* ══ 9. ÇEKMECE — dar ekranda raf ══════════════════
   Masaüstünde raf sağda durur. Telefonda uzun bir listeyi
   dizinin altına yığmak yerine sağdan çekmeceye alıyoruz.

   JavaScript yok. Mekanizma: gizli bir checkbox + iki <label>
   (düğme ve perde); :checked durumu kardeş birleştiriciyle (~)
   çekmeceye ulaşıyor. <details> responsive açık/kapalı yapamıyor,
   popover+command ise 2025 çıkışlı — bu site için fazla taze.

   Kapalıyken visibility:hidden — çekmece klavye ve ekran okuyucu
   için de yok, sadece görünmez değil. */
.menu-kutu{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.menu-dugme,.menu-perde{display:none}

@media (max-width:58rem){
  .alan,.alan--okuma{grid-template-columns:minmax(0,1fr);gap:2.25rem}
  /* Yalnızca çekmecesi olan sayfalarda düğmeye yer aç (404'te raf yok). */
  .menu-kutu~.kabuk{padding-top:3.9rem}

  .menu-dugme{
    display:block;position:fixed;top:.8rem;right:.8rem;z-index:20;
    width:2.5rem;height:2.5rem;cursor:pointer;
    background:var(--kagit);border:1px solid var(--cizgi);border-radius:2px;
  }
  .cizgiler,.cizgiler::before,.cizgiler::after{
    content:"";position:absolute;height:1px;width:1.15rem;background:var(--murekkep);
    transition:transform .18s ease,background-color .18s ease;
  }
  .cizgiler{top:1.2rem;left:.62rem}
  .cizgiler::before{top:-6px;left:0}
  .cizgiler::after{top:6px;left:0}
  .menu-kutu:focus-visible+.menu-dugme{outline:2px solid var(--vurgu);outline-offset:2px}

  .menu-perde{
    display:block;position:fixed;inset:0;z-index:15;
    background:color-mix(in srgb,var(--murekkep) 40%,transparent);
    opacity:0;pointer-events:none;transition:opacity .18s ease;
  }

  .raf,.raf--yapisik{
    position:fixed;top:0;right:0;bottom:0;z-index:18;
    width:min(19.5rem,84vw);overflow-y:auto;overscroll-behavior:contain;
    margin:0;padding:3.9rem 1.3rem 2.5rem;
    background:var(--kagit);border-left:1px solid var(--cizgi);
    transform:translateX(100%);visibility:hidden;
    transition:transform .2s ease,visibility .2s;
  }

  .menu-kutu:checked~.kabuk .raf{transform:none;visibility:visible}
  .menu-kutu:checked~.menu-perde{opacity:1;pointer-events:auto}
  .menu-kutu:checked~.menu-dugme .cizgiler{background:transparent}
  .menu-kutu:checked~.menu-dugme .cizgiler::before{transform:translateY(6px) rotate(45deg)}
  .menu-kutu:checked~.menu-dugme .cizgiler::after{transform:translateY(-6px) rotate(-45deg)}
  html:has(.menu-kutu:checked){overflow:hidden}

  /* Tablolar yana kaymaz, satır olur. Yatay kaydırma bir tasarım hatasıdır. */
  .dizin thead{display:none}
  .dizin,.dizin tbody{display:block;width:100%}
  .dizin tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .7rem;
            padding:.5rem 0;border-bottom:1px solid var(--cizgi-ince)}
  .dizin tr:last-child{border-bottom:0}
  .dizin td{display:block;border:0;padding:0}
  .dizin td.no{order:1;flex:0 0 2.6rem;width:auto;text-align:left;padding:0}
  .dizin td.bas{order:2;flex:1 1 calc(100% - 3.4rem);min-width:0}
  .dizin tr:not(:has(td.no)) td.bas{flex-basis:100%}
  .dizin td.kim{order:3;max-width:11rem;text-align:left}
  .dizin td.ozet{order:3;flex:1 1 100%;text-align:left}
  .dizin td.etiket,.dizin td.tarih{order:3;text-align:left}
}

@media (prefers-reduced-motion:reduce){
  .raf,.raf--yapisik,.menu-perde,.cizgiler,.cizgiler::before,.cizgiler::after{transition:none}
}

/* ══ 10. TEMA DÜĞMESİ ══════════════════════════════
   light-dark() sayesinde tema değiştirmek tek özellik: color-scheme.
   Bedeli ~260 bayt satır içi JS. Düğmeyi ve iki script'i silersen
   site OS'e uymaya devam eder; CSS'te hiçbir şey değişmez. */
.tema{display:flex;gap:.55rem;align-items:baseline;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em}
.tema span{color:var(--soluk)}
.tema button{
  font:inherit;color:var(--soluk);background:none;border:0;padding:0;cursor:pointer;
  text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--vurgu) 45%,transparent);
  text-underline-offset:.2em;
}
.tema button:hover{color:var(--vurgu)}
.tema button:focus-visible{outline:2px solid var(--vurgu);outline-offset:3px}
.tema button[aria-pressed="true"]{color:var(--murekkep);text-decoration:none}

/* ══ 11. 404 ═══════════════════════════════════════ */
.bulunamadi{margin-top:3rem}
.bulunamadi h1{font-size:1.7rem;font-weight:600;margin:0 0 .6rem}
.bulunamadi p{color:var(--soluk);margin:.4rem 0 1.6rem}