/* Kullanisli Siteler -- tek stil kaynagi.
   build.py bu dosyayi index.html'e gomuyor (ek istek yok, CSP ayni); k/
   altindaki statik sayfalar ayni dosyayi baglantiyla yukluyor. Renkler
   yalnizca :root belirteclerinden geliyor; test_build bunu denetliyor. */

/* Basliklar ve kayit adlari icin Source Serif 4 (SIL OFL), kullanilan
   karakterlere indirgenmis iki dosya. Govde metni sistem yazi tipinde. */
@font-face{
  font-family:"Serif Fallback";
  src:local("Georgia"),local("Times New Roman"),local("Iowan Old Style");
  size-adjust:98.7%;ascent-override:105%;descent-override:34%;line-gap-override:0%;
}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/serif-400.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/serif-600.woff2") format("woff2")}

/* ---------------------------------------------------------------- tokens */
/* Murekkep, kagit ve tek bir kirmizi. Kirmizi bir isaret, sus degil: sira
   numarasi, roma rakami, bulundugun yer, baslangic noktasi, aktif suzgec,
   odak halkasi. Baska hicbir sey kirmizi degil. */
:root{
  --bg:#f6f1e7; --panel:#efe8da; --field:#fbf8f1;
  --fg:#1c1a16; --dim:#5b564c; --faint:#686256;
  --rule:#ddd5c4; --rule2:#e9e2d3;
  --red:#a8321f; --red-soft:#f1e0d6; --on-red:#fbf8f1; --mark:#f1dccd;
  --shadow:0 16px 44px rgba(28,26,22,.14); --scrim:rgba(28,26,22,.42);
  --serif:"Source Serif 4","Serif Fallback",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --step:cubic-bezier(.2,.6,.3,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#15140f; --panel:#1e1c17; --field:#1a1914;
    --fg:#ebe5d8; --dim:#b3ad9f; --faint:#9a9486;
    --rule:#302d26; --rule2:#24221c;
    --red:#e8735b; --red-soft:#2e1a14; --on-red:#15140f; --mark:#3d241b;
    --shadow:0 16px 44px rgba(0,0,0,.5); --scrim:rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#15140f; --panel:#1e1c17; --field:#1a1914;
  --fg:#ebe5d8; --dim:#b3ad9f; --faint:#9a9486;
  --rule:#302d26; --rule2:#24221c;
  --red:#e8735b; --red-soft:#2e1a14; --on-red:#15140f; --mark:#3d241b;
  --shadow:0 16px 44px rgba(0,0,0,.5); --scrim:rgba(0,0,0,.6);
  color-scheme:dark;
}

/* ---------------------------------------------------------------- temel */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.6 var(--sans);font-feature-settings:"kern" 1;
  -webkit-font-smoothing:antialiased;padding:0 28px 88px;
}
::selection{background:var(--red-soft);color:var(--fg)}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:2px}
.wrap{max-width:1120px;margin:0 auto}
body.static .wrap{max-width:820px}
kbd{font:11.5px/1.5 var(--mono);color:var(--faint);background:var(--field);
  border:1px solid var(--rule);border-radius:3px;padding:0 5px}
code{font:.88em var(--mono);background:var(--panel);border-radius:3px;padding:0 4px}
mark{background:var(--mark);color:inherit;padding:0 2px;border-radius:2px}
.rn{font-family:var(--serif);font-weight:600;color:var(--red);letter-spacing:.02em}
.n{font:400 12.5px/1 var(--sans);color:var(--faint);font-variant-numeric:tabular-nums}
.k{margin:0;display:flex;align-items:center;gap:12px;
  font:600 12px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.k::after{content:"";flex:1;height:1px;background:var(--rule)}
.k span{font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--faint)}
.ld{flex:1 1 auto;min-width:18px;border-bottom:1.5px dotted var(--rule);transform:translateY(-5px)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:60;padding:12px 18px;
  font:14px/1 var(--sans);color:var(--on-red);background:var(--red);
  text-decoration:none;border-radius:0 0 4px 0}
.skip:focus{left:0}
@keyframes fadeup{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.home,.fieldpage,.catpage,.one,.recentpage,.cmppage{animation:fadeup .16s var(--step) both}

/* ---------------------------------------------------------------- dugmeler */
.lnk{display:inline-flex;align-items:center;gap:6px;background:none;border:0;border-radius:5px;
  padding:8px 10px;cursor:pointer;font:13.5px/1 var(--sans);color:var(--dim);text-decoration:none;
  transition:color .12s var(--step),background .12s var(--step)}
.lnk:hover{color:var(--fg);background:var(--panel)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;
  font:13.5px/1 var(--sans);color:var(--dim);background:var(--field);
  border:1px solid var(--rule);border-radius:6px;padding:9px 14px;
  transition:color .12s var(--step),border-color .12s var(--step),background .12s var(--step)}
.btn:hover{color:var(--fg);border-color:var(--faint)}
.btn.primary{color:var(--bg);background:var(--fg);border-color:var(--fg)}
.btn.primary:hover{color:var(--on-red);background:var(--red);border-color:var(--red)}
.btn:disabled{opacity:.4;cursor:default}
.btn:disabled:hover{color:var(--dim);border-color:var(--rule);background:var(--field)}
.chip{display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap;
  font:13px/1.2 var(--sans);color:var(--dim);background:var(--field);
  border:1px solid var(--rule);border-radius:999px;padding:6px 13px;
  transition:color .12s var(--step),border-color .12s var(--step),background .12s var(--step)}
.chip:hover{color:var(--fg);border-color:var(--faint)}
.chip.on,.chip[aria-pressed="true"]{color:var(--red);border-color:var(--red);background:var(--red-soft)}
.chip .c{color:var(--faint);font-variant-numeric:tabular-nums}
.chip.on .c,.chip[aria-pressed="true"] .c{color:inherit}
.chip .x{font-size:11px;opacity:.75}
.chip .dot{color:var(--red);font-size:.8em}
.chip.more{border-style:dashed}

/* ---------------------------------------------------------------- ust cubuk */
/* Tek bir baslik ogesi, iki duzen: giriste logo+araclar, iri giris cumlesi
   ve iri arama alt alta; diger her yerde logo, arama ve araclar tek satir.
   Arama kutusu tek; yalnizca yeri ve boyu degisiyor. */
header.top{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"logo search acts";align-items:center;gap:14px 24px;
  padding:16px 0;border-bottom:1px solid var(--rule)}
.logo{grid-area:logo;display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font:600 17px/1 var(--serif);letter-spacing:-.01em;white-space:nowrap;color:var(--fg)}
.enso{width:26px;height:26px;flex:none}
.enso path,.wm path{fill:none;stroke:var(--red);stroke-linecap:round}
.enso path{stroke-width:5}
.hero,.wm{display:none}
.search{grid-area:search;position:relative;width:100%;max-width:540px}
#q{width:100%;font:15px/1.4 var(--sans);color:var(--fg);background:var(--field);
  border:1px solid var(--rule);border-radius:6px;padding:9px 40px 9px 13px;
  transition:border-color .12s var(--step),box-shadow .12s var(--step)}
#q::placeholder{color:var(--faint)}
#q:focus{outline:2px solid var(--red);outline-offset:2px;border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.search kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none}
#q:focus + kbd{display:none}
.menu-b{grid-area:menu;display:none;font-size:22px;line-height:1;padding:4px 10px}
.ml{display:none}
/* .acts bir popover: masaustunde hep gorunur ve akista durur, dar ekranda
   "..." dugmesiyle acilan menu olur. [popover] icin UA kurallari sifirlaniyor. */
.acts{grid-area:acts;display:flex;align-items:center;gap:2px;position:static;inset:auto;
  width:auto;height:auto;margin:0;padding:0;border:0;overflow:visible;background:none;color:inherit}
body.at-home header.top{grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"logo acts" "hero hero" "search search";row-gap:0;padding:16px 0 24px}
body.at-home .hero{grid-area:hero;display:block;position:relative;z-index:1;
  margin:30px 0 20px;max-width:30ch;font:400 36px/1.14 var(--serif);letter-spacing:-.022em;
  text-wrap:balance}
body.at-home .hero em{font-style:normal;color:var(--red)}
body.at-home .wm{display:block;position:absolute;right:-24px;top:34px;width:330px;height:330px;
  opacity:.09;pointer-events:none}
body.at-home .wm path{stroke-width:1.6}
body.at-home .search{max-width:660px;z-index:1}
body.at-home #q{font:19px/1.4 var(--serif);padding:12px 40px 12px 0;background:transparent;
  border:0;border-bottom:1.5px solid var(--fg);border-radius:0}
body.at-home #q:focus{box-shadow:none;border-bottom-color:var(--red)}
body.at-home .search kbd{right:0}
body.static header.top{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"logo acts"}

/* ---------------------------------------------------------------- duzen */
.cols{display:grid;grid-template-columns:200px minmax(0,1fr);gap:56px;margin-top:34px;align-items:start}
.cols > *{min-width:0}
body.calm .cols{grid-template-columns:minmax(0,1fr)}
body.calm .side{display:none}
#nav:empty,#list:empty{min-height:60vh}
.side{position:sticky;top:22px;max-height:calc(100vh - 44px);overflow:auto;padding-bottom:12px}
.side-k{margin:0 0 10px;font:600 12px/1.35 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--red)}
.side ol{list-style:none;margin:0;padding:0}
.side a{display:flex;align-items:baseline;gap:8px;padding:7px 0;border-bottom:1px solid var(--rule2);
  font-size:14px;line-height:1.35;color:var(--dim);text-decoration:none;transition:color .12s var(--step)}
.side a .t{flex:1}
.side a:hover{color:var(--fg)}
.side a.on{color:var(--fg);font-weight:600}
.side a.on::before{content:"▸";color:var(--red)}
.side a.empty{opacity:.55}
.side a.all{border:0;margin-top:10px;font-size:13px;color:var(--faint)}
.side a.all:hover{color:var(--red)}

/* ---------------------------------------------------------------- sayfa basi */
.crumb{margin:0 0 8px;font-size:13px;color:var(--faint)}
.crumb a{color:var(--dim);text-decoration:none}
.crumb a:hover{color:var(--red)}
.crumb b{margin:0 7px;font-weight:400;color:var(--red)}
.ph{margin:0 0 12px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;
  font:600 34px/1.12 var(--serif);letter-spacing:-.017em}
.ph .rn{font-size:.6em}
.ph a{text-decoration:none}
.ph a:hover{color:var(--red)}
.ch1{display:flex;align-items:baseline;gap:6px}
.sib-b{display:none}
.lede{margin:0 0 20px;max-width:66ch;font:400 17px/1.62 var(--serif);color:var(--dim)}
.more-b{display:none}
.count{margin:0 0 14px;font-size:13px;color:var(--faint)}
.none{padding:36px 0;color:var(--dim)}
.none a{color:var(--red)}
.qhelp{margin:0 0 14px;font-size:14px;color:var(--dim)}
.qhelp:empty{display:none}
.qhelp a{color:var(--red);text-decoration:none}
.qhelp a:hover{text-decoration:underline}
.sh{margin:40px 0 2px;padding-bottom:10px;border-bottom:1px solid var(--rule);
  display:flex;align-items:baseline;gap:10px;font:600 20px/1.25 var(--serif);letter-spacing:-.01em}
section{scroll-margin-top:20px}
section[tabindex="-1"]:focus{outline:none}

/* ---------------------------------------------------------------- arac cubugu */
.tb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 0;margin:0 0 4px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.tb .sp{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:13px;color:var(--faint)}
.tb .count{margin:0}
.sortl{display:inline-flex;align-items:center;gap:6px}
#sort{font:13px/1.2 var(--sans);color:var(--dim);background:var(--field);
  border:1px solid var(--rule);border-radius:6px;padding:5px 8px;cursor:pointer}
#sort:hover{border-color:var(--faint);color:var(--fg)}

/* ---------------------------------------------------------------- kayit */
.recs{margin:0}
#list .rec:not(.big){content-visibility:auto;contain-intrinsic-size:auto 150px}
.rec{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:8px;
  padding:18px 0;border-bottom:1px solid var(--rule2)}
.rec .no{font:600 13.5px/28px var(--serif);color:var(--red);text-align:right;
  font-variant-numeric:tabular-nums}
.rb{min-width:0}
.path{margin:0 0 2px;font-size:12.5px}
.path a{color:var(--red);text-decoration:none}
.path a:hover{text-decoration:underline}
.nm{display:flex;align-items:baseline;gap:4px 10px;flex-wrap:wrap}
.rec a.name{font:600 19.5px/1.3 var(--serif);letter-spacing:-.006em;text-decoration:none;color:var(--fg)}
.rec a.name:hover{color:var(--red);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
.host{font-size:13px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.pk{font:12px/1.5 var(--sans);color:var(--red);border:1px solid var(--red);border-radius:3px;
  padding:0 6px;white-space:nowrap}
.desc{margin:6px 0 0;max-width:70ch;font-size:15.5px;line-height:1.64;color:var(--dim)}
.mt{margin-top:9px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;
  font-size:13px;color:var(--faint)}
.itags span{cursor:pointer;color:var(--dim);transition:color .12s var(--step)}
.itags span:hover{color:var(--red)}
.itags i{font-style:normal;color:var(--rule);margin:0 5px}
.rel a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--rule);cursor:pointer}
.rel a:hover{color:var(--red);border-bottom-color:var(--red)}
.meta{margin-left:auto;display:flex;gap:12px;align-items:baseline}
.arch{color:var(--faint);text-decoration:none;border-bottom:1px dotted var(--rule)}
.arch:hover{color:var(--red);border-bottom-color:var(--red)}
.badge{font-size:12px;color:var(--faint);white-space:nowrap}
.badge.ext{color:var(--dim)}
.vs{list-style:none;margin:6px 0 24px;padding:0}
.vs li{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;padding:9px 0;border-bottom:1px solid var(--rule2)}
.vs a{font:600 17px/1.3 var(--serif);color:var(--fg);text-decoration:none;cursor:pointer}
.vs a:hover{color:var(--red)}
.vs .ax{font-size:13.5px;color:var(--dim)}
.badge.chk{border:1px dashed currentColor;border-radius:3px;padding:0 6px;color:var(--dim)}
.badge.dead{color:var(--on-red);background:var(--red);border-radius:3px;padding:1px 6px}
.badge.repo{border:1px solid currentColor;border-radius:3px;padding:0 6px}
.badge.repo.warn{color:var(--dim)}
.badge.repo.stop{color:var(--red)}
.age{font-size:12.5px;color:var(--faint);white-space:nowrap}
/* Ikincil kunye (kaynak, arsiv, kalici baglanti) fareyle ustune gelince ya da
   klavyeyle kayda girince beliriyor; dokunmatikte hep gorunur. visibility,
   display degil: yer tutuyor, belirince satir kaymiyor. */
@media (hover:hover){
  .rec .meta .arch,.rec .meta .badge.src{visibility:hidden}
  .rec:hover .meta .arch,.rec:hover .meta .badge.src,
  .rec:focus-within .meta .arch,.rec:focus-within .meta .badge.src{visibility:visible}
}
.rec.big{grid-template-columns:minmax(0,1fr);border-bottom:0;padding-top:4px}
.rec.big .no{display:none}
.rec.big .ph{margin:0}
.rec.big a.name{font-size:32px;line-height:1.15;letter-spacing:-.016em}
.rec.big .desc{font:400 17.5px/1.66 var(--serif);max-width:66ch}
.onemore{margin:26px 0 0;font-size:14px}
.onemore a{color:var(--dim);text-decoration:none}
.onemore a:hover{color:var(--red)}

/* ---------------------------------------------------------------- sayfalama */
.pager{display:flex;gap:4px;align-items:center;flex-wrap:wrap;padding:22px 0 0}
.pg{min-width:36px;padding:7px 10px;background:none;border:1px solid transparent;border-radius:6px;
  cursor:pointer;font:15px/1 var(--serif);color:var(--dim);font-variant-numeric:tabular-nums}
.pg:hover:not(:disabled){border-color:var(--rule);color:var(--fg)}
.pg[aria-current="true"]{color:var(--red);border-color:var(--red);font-weight:600}
.pg:disabled{opacity:.35;cursor:default}
.pgpos{font-size:13px;color:var(--faint);margin-left:10px}

/* ---------------------------------------------------------------- giris */
.home{padding:22px 0 0}
.hsec{margin:0 0 46px}
.hpicks{list-style:none;margin:16px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 34px}
.hpicks li{padding:13px 0;border-bottom:1px solid var(--rule2)}
.hpicks a{font:600 17px/1.3 var(--serif);text-decoration:none}
.hpicks a::before{content:"◆";color:var(--red);font-size:.6em;margin-right:8px;position:relative;top:-.15em}
.hpicks a:hover{color:var(--red)}
.hpicks p{margin:5px 0 0;font-size:14px;line-height:1.55;color:var(--dim)}
.fx{list-style:none;margin:18px 0 0;padding:0;columns:2;column-gap:56px}
.fe{break-inside:avoid;padding:12px 0 14px;border-bottom:1px solid var(--rule2)}
.ft{display:flex;align-items:baseline;gap:10px;text-decoration:none}
.ft .rn{width:34px;flex:none;font-size:15px}
.fn{font:600 21px/1.25 var(--serif);letter-spacing:-.012em;transition:color .12s var(--step)}
.ft:hover .fn{color:var(--red)}
.fc{margin:5px 0 0 44px;font-size:14.5px;line-height:1.6;color:var(--faint)}
.fc a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--rule2)}
.fc a:hover{color:var(--red);border-bottom-color:var(--red)}
.hlinks{display:flex;gap:26px;flex-wrap:wrap;margin:34px 0 0;font-size:14px}
.hlinks a{color:var(--dim);text-decoration:none}
.hlinks a:hover{color:var(--red)}

/* ---------------------------------------------------------------- alan sayfasi */
.fieldpage{padding-top:6px}
.toc{list-style:none;margin:8px 0 0;padding:0;max-width:760px}
.toc li{padding:16px 0;border-bottom:1px solid var(--rule2)}
.tt{display:flex;align-items:baseline;gap:10px;text-decoration:none}
.tn{font:600 20px/1.3 var(--serif);letter-spacing:-.01em;transition:color .12s var(--step)}
.tt:hover .tn{color:var(--red)}
.td{margin:5px 0 0;max-width:68ch;font-size:15px;line-height:1.6;color:var(--dim)}
.ts{margin:5px 0 0;font-size:13px;color:var(--faint)}
.ts a{color:var(--faint);border-bottom:1px dotted var(--rule);text-decoration:none}
.ts a:hover{color:var(--red)}

/* ---------------------------------------------------------------- kardes basliklar (telefon) */
.sib{margin:0;padding:8px;border:1px solid var(--rule);border-radius:14px;background:var(--bg);
  color:var(--fg);box-shadow:var(--shadow);width:min(420px,calc(100vw - 24px));max-height:70vh;overflow:auto}
.sib:popover-open{position:fixed;inset:auto 12px 12px 12px;margin:0 auto}
.sib .side-k{padding:8px 12px 4px}
.sib a{display:flex;align-items:baseline;gap:8px;min-height:44px;padding:10px 12px;
  border-bottom:1px solid var(--rule2);text-decoration:none;color:var(--dim);font-size:15px}
.sib a .t{flex:1}
.sib a.on{color:var(--fg);font-weight:600}
.sib a.on::before{content:"▸";color:var(--red)}

/* ---------------------------------------------------------------- suzgec paneli */
dialog#filt{margin:0;padding:0;border:1px solid var(--rule);border-radius:12px;background:var(--bg);
  color:var(--fg);box-shadow:var(--shadow);width:min(560px,calc(100vw - 32px))}
dialog#filt:not(:modal){position:absolute;z-index:40;inset:auto}
dialog#filt::backdrop,dialog#sub::backdrop{background:var(--scrim)}
.fl-h{display:flex;align-items:center;gap:4px;padding:12px 12px 10px 18px;border-bottom:1px solid var(--rule2)}
.fl-h h2{margin:0 auto 0 0;font:600 19px/1.2 var(--serif)}
.fl-b{padding:4px 18px 14px;max-height:min(62vh,560px);overflow:auto}
.fg{padding:12px 0 2px}
.fk{margin:0 0 8px;font:600 11.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.fg .cs{display:flex;flex-wrap:wrap;gap:6px}
.fl-f{display:none;gap:8px;padding:12px 16px 16px;border-top:1px solid var(--rule2)}
.fl-f .btn{flex:1;min-height:46px}

/* ---------------------------------------------------------------- gonderim */
dialog#sub{border:1px solid var(--rule);border-radius:12px;padding:0;background:var(--bg);color:var(--fg);
  width:min(660px,calc(100vw - 32px));max-height:calc(100vh - 48px);box-shadow:var(--shadow)}
.sub-h{display:flex;align-items:baseline;gap:12px;padding:20px 22px 0}
.sub-h h2{margin:0;font:600 21px/1.2 var(--serif)}
.sub-h .btn{margin-left:auto}
.sub-tabs{display:flex;padding:14px 22px 0;border-bottom:1px solid var(--rule)}
.sub-tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:10px 13px;
  cursor:pointer;font:13.5px/1 var(--sans);color:var(--dim);
  transition:color .12s var(--step),border-color .12s var(--step)}
.sub-tabs button:hover{color:var(--fg)}
.sub-tabs button[aria-selected="true"]{color:var(--red);border-bottom-color:var(--red)}
.sub-body{padding:18px 22px 4px;overflow-y:auto;max-height:calc(100vh - 250px)}
.fld{margin:0 0 14px}
.fld label{display:block;margin-bottom:6px;font:600 11.5px/1 var(--sans);letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint)}
.fld input,.fld textarea,.fld select{width:100%;font:15px/1.55 var(--sans);color:var(--fg);
  background:var(--field);border:1px solid var(--rule);border-radius:6px;padding:9px 11px}
.fld textarea{resize:vertical;min-height:62px}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--red);
  box-shadow:0 0 0 3px var(--red-soft)}
.sub-note{margin:0 0 16px;font-size:14px;line-height:1.66;color:var(--dim)}
.sub-note b{color:var(--fg);font-weight:600}
.sub-warn{margin:8px 0 0;min-height:1px;font-size:13.5px;line-height:1.6;color:var(--red)}
.drop{border:1px dashed var(--rule);border-radius:8px;padding:30px 18px;text-align:center;cursor:pointer;
  font-size:14.5px;line-height:1.6;color:var(--dim);
  transition:border-color .12s var(--step),background .12s var(--step),color .12s var(--step)}
.drop:hover,.drop.over{border-color:var(--red);background:var(--red-soft);color:var(--fg)}
.drop code{color:var(--faint)}
.stat{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--rule);font-size:13px;line-height:1.7;color:var(--dim)}
.stat b{color:var(--red);font-weight:600;font-variant-numeric:tabular-nums}
.plist{margin:10px 0 0;max-height:210px;overflow-y:auto}
.plist div{padding:8px 0;border-bottom:1px solid var(--rule);font-size:14.5px;line-height:1.45}
.plist div:last-child{border-bottom:0}
.plist span{display:block;margin-top:2px;font-size:12px;color:var(--faint);word-break:break-all}
.sub-f{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:16px 22px 20px}
.sub-f .msg{margin-left:auto;text-align:right;font-size:12.5px;line-height:1.5;color:var(--faint)}

/* ---------------------------------------------------------------- alt bilgi */
footer{margin-top:72px;padding-top:22px;border-top:1px solid var(--rule);max-width:78ch;
  font-size:14px;line-height:1.8;color:var(--faint)}
footer p{margin:0 0 8px}
footer a{color:var(--dim)}
footer a:hover{color:var(--red)}
footer .lnk{padding:4px 6px;font-size:14px}
#top{position:fixed;right:24px;bottom:24px;z-index:30;opacity:0;pointer-events:none;
  transform:translateY(6px);transition:opacity .18s var(--step),transform .18s var(--step)}
#top.show{opacity:1;pointer-events:auto;transform:none}

/* ---------------------------------------------------------------- statik sayfalar */
.other{margin:56px 0 0}
.other p{margin:10px 0 0;font-size:15px;line-height:2}
.other a{color:var(--dim);text-decoration:none;margin-right:16px}
.other a:hover{color:var(--red)}
/* Hakkinda, degisiklikler ve alternatif sayfalari: duz metin. */
.prose > p:not([class]),.prose > ul{max-width:70ch;font-size:15.5px;line-height:1.64;color:var(--dim)}
.prose > ul{padding-left:20px}
.prose li{margin:5px 0;overflow-wrap:anywhere}
.prose h3{margin:28px 0 4px;font:600 17px/1.3 var(--serif)}
.prose blockquote{margin:14px 0;padding-left:16px;border-left:2px solid var(--rule);
  font:400 16px/1.6 var(--serif);color:var(--dim)}
.ilinks a{margin-right:12px}
.sf{font-size:13px}

/* ---------------------------------------------------------------- giris: kanit, ornek sorgular */
.proof{margin:0 0 12px;font-size:13.5px;line-height:1.6;color:var(--dim)}
.tryq{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 34px}
.tryq span{margin-right:4px;font-size:13px;color:var(--faint)}
.tryq .chip{text-decoration:none}

/* ---------------------------------------------------------------- yerel raf, karsilastirma */
.save{flex:none;margin-left:auto;padding:2px 4px;background:none;border:0;border-radius:4px;cursor:pointer;
  font-size:17px;line-height:1;color:var(--faint);transition:color .12s var(--step)}
.save:hover,.save[aria-pressed="true"]{color:var(--red)}
.cmpb{padding:0;background:none;border:0;border-bottom:1px dotted var(--rule);cursor:pointer;
  font:inherit;color:var(--faint)}
.cmpb:hover,.cmpb[aria-pressed="true"]{color:var(--red);border-bottom-color:var(--red)}
@media (hover:hover){
  .rec .meta .cmpb:not([aria-pressed="true"]){visibility:hidden}
  .rec:hover .meta .cmpb,.rec:focus-within .meta .cmpb{visibility:visible}
}
.rec.seen a.name{color:var(--dim)}
#savedb .c{color:var(--red);font-variant-numeric:tabular-nums}
#savedb[aria-pressed="true"]{color:var(--fg)}
.shelfx{margin:0 0 16px}
.visit{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px}
.visit .btn{text-decoration:none}
.none-x{display:flex;flex-wrap:wrap;gap:4px 10px;margin:-20px 0 0}
.none-x a{display:inline-flex;align-items:center;padding:8px 10px;font-size:13.5px;color:var(--red);text-decoration:none}
.none-x a:hover{text-decoration:underline}
.tchips{display:contents}
.count .cn{display:none}
.tray{position:fixed;left:50%;bottom:20px;z-index:35;transform:translateX(-50%);display:flex;gap:8px;padding:8px;
  background:var(--bg);border:1px solid var(--rule);border-radius:12px;box-shadow:var(--shadow)}
.tray[hidden]{display:none}
.tray .btn{text-decoration:none}
.cmpwrap{overflow-x:auto;scroll-snap-type:x mandatory;margin:8px 0 0;border-top:1px solid var(--rule)}
.cmp{border-collapse:separate;border-spacing:0;min-width:100%}
.cmp th,.cmp td{padding:12px 14px;border-bottom:1px solid var(--rule2);vertical-align:top;text-align:left;
  font-size:14.5px;line-height:1.55;color:var(--dim)}
.cmp thead th{min-width:220px;scroll-snap-align:start;font:600 18px/1.3 var(--serif);color:var(--fg)}
.cmp thead th a{color:var(--fg);text-decoration:none}
.cmp thead th a:hover{color:var(--red)}
.cmp thead .host{display:block;margin:2px 0 0;font:400 12.5px/1.4 var(--sans)}
.cmp thead .lnk{margin:4px 0 0 -10px;font-size:12.5px}
.cmp tbody th{width:140px;font:600 11.5px/1.5 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.cmp tbody td{min-width:220px}
.cmp tr > :first-child{position:sticky;left:0;z-index:1;background:var(--bg)}

/* ---------------------------------------------------------------- komut paleti, klavye yardimi */
dialog#pal,dialog#kbh{margin:12vh auto auto;padding:0;border:1px solid var(--rule);border-radius:12px;
  background:var(--bg);color:var(--fg);box-shadow:var(--shadow);width:min(600px,calc(100vw - 32px))}
dialog#pal::backdrop,dialog#kbh::backdrop{background:var(--scrim)}
#pal-q{width:100%;padding:14px 18px;font:17px/1.4 var(--sans);color:var(--fg);background:var(--field);
  border:0;border-bottom:1px solid var(--rule);border-radius:12px 12px 0 0}
#pal-q:focus{outline:none;box-shadow:inset 0 -2px 0 var(--red)}
#pal-q::placeholder{color:var(--faint)}
#pal-list{list-style:none;margin:0;padding:6px;max-height:min(56vh,460px);overflow:auto}
.pal-g{padding:10px 12px 4px;font:600 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
#pal-list [role="option"]{display:flex;align-items:baseline;gap:12px;min-height:40px;padding:9px 12px;
  border-radius:6px;cursor:pointer}
#pal-list [aria-selected="true"]{background:var(--panel);box-shadow:inset 3px 0 0 var(--red)}
.pl{min-width:0}
.pl mark{padding:0}
.ps{margin-left:auto;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;color:var(--faint)}
.pal-none{padding:14px 12px;color:var(--dim)}
#kbh-list{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 18px;margin:0;padding:16px 18px 22px}
#kbh-list dt{white-space:nowrap}
#kbh-list dd{margin:0;color:var(--dim)}

/* ---------------------------------------------------------------- yukleniyor iskeleti
   Giris disi bir adres acilirken veri gelene kadar (boot.js html.pending koyuyor). */
html.pending #list > [data-pre]{display:none}
html.pending #list::before{content:"";display:block;height:max(520px,100vh);border-radius:4px;
  background:repeating-linear-gradient(to bottom,var(--panel) 0 20px,transparent 20px 36px,
    var(--rule2) 36px 52px,transparent 52px 104px);animation:pulse 1.1s ease-in-out infinite alternate}
@keyframes pulse{from{opacity:.5}to{opacity:1}}
/* Iskelet sirasinda baslik da son halinde: derin baglanti (?e=, ?cat=, ?q=) giris
   duzeniyle (iri giris cumlesi, iri arama) boyanip app.js cizince toplanmasin
   (telefonda CLS 0.135 buradan geliyordu). Asagidaki dar ekran kurallari da ayni. */
html.pending body.at-home header.top{grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"logo search acts";row-gap:14px;padding:16px 0}
html.pending body.at-home .hero,html.pending body.at-home .wm{display:none}
/* Alt bilgi iskeletin altinda, ekran disinda: liste gelince kaymasin. */
html.pending #foot{visibility:hidden}
html.pending body.at-home .search{max-width:540px}
html.pending body.at-home #q{font:15px/1.4 var(--sans);padding:9px 40px 9px 13px;background:var(--field);
  border:1px solid var(--rule);border-radius:6px}
html.pending body.at-home .search kbd{right:10px}

/* Betik yokken (ya da henuz calismadiysa) yalnizca betikle calisan araclar gizli;
   boot.js html'e "js" koyuyor. Statik sayfalarin araclari (k/) kimlik tasimiyor. */
html:not(.js) .top .search,html:not(.js) #menub,html:not(.js) #acts,
html:not(.js) #foot-x,html:not(.js) #foot-kb,html:not(.js) #top{display:none}
.nojs{margin:20px 0 0;padding:12px 14px;border:1px solid var(--rule);border-radius:6px;
  background:var(--field);font-size:15px;line-height:1.6;color:var(--dim)}
.nojs a{color:var(--red)}
/* 404.html: betiksiz arama formu dogrudan ?q= adresine gidiyor. */
.nf-search{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 18px;max-width:560px}
.nf-search label{flex:1 1 100%;font-size:13px;color:var(--faint)}
.nf-search input{flex:1 1 220px;min-height:44px;font:16px/1.4 var(--sans);color:var(--fg);background:var(--field);
  border:1px solid var(--rule);border-radius:6px;padding:9px 13px}
.nf-search .btn{min-height:44px}
.nf-links{font-size:15px;line-height:2.2}
.nf-links a{color:var(--red)}
/* Adresin anlasilmayan kismi atildi (?e=yok, ?cat=zzz ...). */
.urlnote{margin:14px 0 0;padding:10px 14px;border-left:3px solid var(--red);background:var(--panel);
  font-size:14px;line-height:1.5;color:var(--dim)}

/* ---------------------------------------------------------------- dar ekran */
@media (max-width:1000px){
  .hpicks{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .cols{grid-template-columns:minmax(0,1fr);gap:0;margin-top:20px}
  .side{display:none}
  .fx{columns:1}
}
@media (max-width:720px){
  body{padding:0 16px 72px}
  header.top{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"logo menu" "search search";
    row-gap:10px;padding:12px 0 14px}
  body.at-home header.top{grid-template-areas:"logo menu" "hero hero" "search search";padding:14px 0 22px}
  html.pending body.at-home header.top{grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"logo menu" "search search";row-gap:10px;padding:12px 0 14px}
  html.pending body.at-home #q{font-size:16px}
  body.static header.top{grid-template-columns:minmax(0,1fr);grid-template-areas:"logo" "acts";row-gap:4px}
  body.static .acts{flex-wrap:wrap;margin-left:-10px}
  body.at-home .hero{font-size:29px;margin:26px 0 16px}
  body.at-home .wm{display:none}
  body.at-home #q{font-size:17px}
  .menu-b{display:inline-flex}
  .acts[popover]:not(:popover-open){display:none}
  .acts:popover-open{position:fixed;inset:60px 12px auto auto;margin:0;z-index:50;
    flex-direction:column;align-items:stretch;min-width:220px;padding:6px;
    background:var(--bg);border:1px solid var(--rule);border-radius:12px;box-shadow:var(--shadow)}
  .acts:popover-open .lnk{min-height:44px;padding:0 14px;font-size:15px;justify-content:flex-start}
  .acts:popover-open .ml{display:inline;margin-left:4px;color:var(--dim)}
  html.nopop .acts{display:flex;flex-wrap:wrap}
  html.nopop .menu-b{display:none}
  html.nopop header.top{grid-template-areas:"logo logo" "acts acts" "search search"}
  html.nopop body.at-home header.top{grid-template-areas:"logo logo" "acts acts" "hero hero" "search search"}
  .search kbd{display:none}
  #q{min-height:46px;font-size:16px}
  .ph{font-size:26px}
  .sib-b{display:inline-flex;min-height:44px;min-width:44px;justify-content:center;font-size:16px;color:var(--red)}
  html.nopop .sib-b{display:none}
  .lede{font-size:15.5px;margin-bottom:4px}
  .lede.clamp:not(.open){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .more-b{display:inline-flex;align-items:center;min-height:44px;padding:0;background:none;border:0;
    cursor:pointer;font-size:13.5px;color:var(--red)}
  .lede.open + .more-b{display:none}
  .tb{gap:6px}
  .tb .sp{gap:10px}
  .pickbtn .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sortl > span{display:none}
  .chip,.lnk,.pg,.btn,#sort{min-height:44px}
  .rec{grid-template-columns:22px minmax(0,1fr);column-gap:6px;padding:15px 0}
  .rec a.name{font-size:17.5px}
  .rec.big a.name{font-size:25px}
  .desc{font-size:15px}
  .meta{margin-left:0}
  .hpicks{grid-template-columns:1fr}
  .fn{font-size:19px}
  .fc{margin-left:44px;font-size:14px}
  .tn{font-size:18px}
  dialog#filt:modal{position:fixed;inset:auto 0 0 0;margin:0;width:100vw;max-width:100vw;max-height:86vh;
    border-radius:16px 16px 0 0;border-width:1px 0 0}
  dialog#filt:modal .fl-b{max-height:calc(86vh - 150px)}
  dialog#filt:modal .fl-f{display:flex}
  dialog#sub{width:100vw;max-width:100vw;max-height:100vh;border-radius:0;border-width:1px 0 0}
  .sub-h,.sub-tabs,.sub-body,.sub-f{padding-left:16px;padding-right:16px}
  .sub-body{max-height:calc(100vh - 268px)}
  .sub-tabs button{min-height:44px;flex:1}
  .sub-f .btn{flex:1 1 auto}
  .sub-f .msg{flex:1 1 100%;margin-left:0;text-align:left}
  #top{right:14px;bottom:14px}
  footer{font-size:13.5px}
}
@media (max-width:380px){
  body{padding:0 12px 64px}
  body.at-home .hero{font-size:26px}
}

/* Dokunmatik ekran: kucuk baglantilarin dokunma alani 44 px'e cikiyor, ama
   yerlesim oynamiyor (dolgu buyuyup kenar boslugu geri cekiliyor, ya da gorunmez
   bir katman tasiyor). Olculen: kayit adi 23, arsiv baglantisi 22, giris
   listesi 25, ana sayfa alt baglantilari 22 px yuksekligindeydi. */
@media (pointer:coarse),(max-width:720px){
  .logo{padding:9px 0;margin:-9px 0}
  .rec a.name,.arch{position:relative}
  .rec a.name::after{content:"";position:absolute;inset:-3px 0}
  .arch::after{content:"";position:absolute;inset:-3px -8px}
  .ft{padding:10px 0;margin:-10px 0}
  .hlinks a{display:inline-block;padding:3px 0;margin:-3px 0}
}
/* Dokunmatikte satir ici kucuk baglantilar en az 24 px yuksek kutu (WCAG 2.5.8):
   dolgu buyuyor, eksi kenar boslugu geri cekiyor, satir yuksekligi degismiyor.
   Dolgu kucuk tutuldu: alt alta duran baglantilarda 12 px dolgu komsunun orta
   noktasini ortuyor, yani bir kategoriye dokunmak alttakini aciyordu (CI'da
   yakalandi; yerelde yazi tipi yuzunden gorunmemisti). */
@media (pointer:coarse){
  .fc a,.arch,.path a,.rel a,.crumb a,.onemore a,.qhelp a,footer a,.cmpb,
  .hpicks a,.itags span{display:inline-block;padding-top:3px;padding-bottom:3px;
    margin-top:-3px;margin-bottom:-3px}
  .tryq .chip{min-height:44px}
  .save{min-width:44px;min-height:44px}
}

/* Telefonda suzme: arac cubugu kaydirirken ustte yapisik kaliyor; secili
   suzgecler tek satirda yana kayiyor ki cubuk ekranin yarisini yemesin. */
@media (max-width:720px){
  .home{display:flex;flex-direction:column}
  .home .hp{order:1}
  .home .hlinks{order:2}
  .tryq{margin-bottom:26px}
  .tb{position:sticky;top:0;z-index:20;background:var(--bg)}
  .tchips{display:flex;flex:1 1 100%;order:5;gap:6px;overflow-x:auto;scrollbar-width:none}
  .tchips:empty{display:none}
  .count .cw{display:none}
  .count .cn{display:inline}
  .save{min-width:44px;min-height:44px;margin:-10px -10px -10px auto;font-size:19px}
  .cmpb{min-height:44px}
  .tray{left:12px;right:12px;bottom:12px;transform:none}
  .tray .btn{flex:1}
  .cmpwrap{scroll-padding-left:104px}
  .cmp tbody th{width:104px;min-width:104px;letter-spacing:.04em}
  .cmp thead th,.cmp tbody td{min-width:72vw}
  dialog#pal,dialog#kbh{margin-top:8px}
}

/* Windows Yuksek Karsitlik gibi zorunlu renkler: secili durumlar yalnizca renkle
   gosteriliyordu, sistem renkleriyle hepsi ayni gorunuyordu. */
@media (forced-colors:active){
  .chip.on,.chip[aria-pressed="true"],.pg[aria-current="true"],.save[aria-pressed="true"],
  .cmpb[aria-pressed="true"],#pal-list [aria-selected="true"]{
    forced-color-adjust:none;color:HighlightText;background:Highlight;border-color:Highlight}
  .k::after{background:CanvasText}
  .ld{border-bottom-color:CanvasText}
  .enso path,.wm path{stroke:CanvasText}
  :focus-visible{outline-color:Highlight}
  html.pending #list::before{background:none;border:1px solid CanvasText}
}

/* Daha fazla karsitlik isteyenlere: soluk metin ve cizgiler koyulasiyor. */
@media (prefers-contrast:more){
  :root{--dim:#3d3932; --faint:#46423a; --rule:#8f877a; --rule2:#b3aa98; --mark:#f6e6d9}
  :root[data-theme="dark"]{--dim:#d6d0c2; --faint:#c7c1b2; --rule:#6b6555; --rule2:#4d483d; --mark:#2c1a14}
  .rec a.name,.fc a,.rel a{text-decoration:underline;text-underline-offset:3px}
}

/* Baski: kagitta isleyen bir sey yok (arama, araclar, kaydet, siteyi ac,
   kisayollar); baglantilarin adresi adin arkasinda yaziliyor; siyah beyaz. */
@media print{
  :root,:root[data-theme="dark"]{--bg:white;--panel:white;--field:white;--fg:black;--dim:black;--faint:black;
    --rule:gray;--rule2:silver;--red:black;color-scheme:light}
  body{background:white;color:black;padding:0}
  .top .search,#menub,#acts,.wm,.skip,.side,.save,.cmpb,.visit,.tb,.pager,.tray,#top,
  #foot-x,#foot-kb,.more-b,.sib-b,.tryq,.urlnote,.nojs,dialog{display:none!important}
  .rec .meta .arch,.rec .meta .badge.src{visibility:visible}
  .rec a.name::after,.hpicks a::after{content:" (" attr(href) ")";position:static;
    font:400 11px/1.4 var(--mono);color:black;word-break:break-all}
  .rec{break-inside:avoid}
  #list .rec:not(.big){content-visibility:visible}
  .home,.fieldpage,.catpage,.one,.recentpage,.cmppage{animation:none}
}