/* Geleceksizler / The Futureless -- deliberately distinct from GPU Co-op's
   brand (see obsidian-notes/GPU Co-op - Marka Kimliği.md): different
   palette, different type pairing, dark instead of light-first. Mature
   protest-flyer register, not teenage-rebellion (that direction was
   explicitly rejected -- see obsidian-notes/Geleceksizler.md). */

/* Renk her yerde değişkenden gelir. Sabit renk yazmak yasak: açık tema
   yalnızca bu değişkenleri yeniden tanımlayarak kuruluyor, kaçan tek bir
   `#rrggbb` açık temada görünmez metin demek. Sis ve bulut katmanları
   yarı saydam olduğu için renkleri RGB üçlüsü olarak duruyor. */

:root {
  --ink: #0c0c0d;
  --bone: #edebe6;
  --concrete: #8a8a84;
  --signal: #e13b2e;
  --signal-dim: #7a241c;
  --line: #2a2a28;
  --card: #131315;
  --shadow: 0 1px 0 rgba(0, 0, 0, 0);
  --rgb-veil: 237, 235, 230;      /* sis/bulutun aydınlık katmanı */
  --rgb-haze: 138, 138, 132;      /* sisin gri katmanı */
  --rgb-signal: 225, 59, 46;
  --cover-fade: 0.55;             /* kapağın kart zeminine karışma payı */
  --font-display: "Archivo Black", "Arial Black", sans-serif;
  --font-body: "Inter", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", monospace;
}

/* Açık tema. Signal kırmızısı burada bir tık koyultuldu (#e13b2e açık zeminde
   küçük mono metinde okunmuyordu); koyu temada marka rengi olduğu gibi kalır. */
:root[data-theme="light"] {
  --ink: #f7f5f1;
  --bone: #15150f;
  --concrete: #6d6d64;
  --signal: #c1301f;
  --signal-dim: #e8b8b1;
  --line: #dedad2;
  --card: #ffffff;
  --shadow: 0 1px 2px rgba(20, 20, 15, 0.06);
  /* Açık temada sis ve bulut beyaz olamaz: zemin zaten beyaza yakın, katmanlar
     görünmez olur ve açılış hareketi kaybolur. Gri tonlara çekildi. */
  --rgb-veil: 203, 199, 190;
  --rgb-haze: 150, 150, 142;
  --rgb-signal: 193, 48, 31;
  --cover-fade: 0.18;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
}

header.site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.wordmark {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.wordmark span { color: var(--signal); }

nav.primary {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
nav.primary a { text-decoration: none; color: var(--concrete); border-bottom: 1px solid transparent; }
nav.primary a:hover, nav.primary a.active { color: var(--bone); border-color: var(--signal); }

.lang {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 12px;
}
.lang button {
  background: transparent;
  border: 0;
  padding: 6px 12px;
  cursor: pointer;
  color: var(--concrete);
  font: inherit;
}
.lang button.active { background: var(--signal); color: var(--ink); }

/* İngilizce marka adresinde (thefutureless.com/.org) dil düğmesi yok: orası tek
   dilli İngilizce baskı. Düğmeyi gizlemek `base.html`'deki baş betiği kurduğu
   `data-edition` özniteliğine bakar, yani seçim ilk karede belli olur ve düğme
   görünüp kaybolmaz. Türkçe baskı geleceksizler.com'da, iki dilli kalır. */
:root[data-edition="en"] .lang { display: none; }

.kicker {
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--signal);
  margin: 64px 0 16px;
}

h1.hero {
  font-family: var(--font-display);
  font-size: clamp(40px, 7vw, 84px);
  line-height: 1.02;
  margin: 0 0 28px;
  max-width: 16ch;
}
h1.hero mark { background: none; color: var(--signal); }

p.lede {
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.6;
  color: var(--bone);
  max-width: 58ch;
  margin: 0 0 20px;
}

p.diagnosis {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
  color: var(--concrete);
  max-width: 60ch;
  border-left: 2px solid var(--signal);
  padding-left: 18px;
  margin: 40px 0 80px;
}

.supported-by {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--concrete);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.supported-by strong { color: var(--bone); }

footer.site {
  border-top: 1px solid var(--line);
  margin-top: 100px;
  padding: 28px 0 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.posts-empty {
  border: 1px dashed var(--line);
  border-radius: 4px;
  padding: 48px 32px;
  text-align: center;
  color: var(--concrete);
  font-family: var(--font-mono);
  font-size: 14px;
  margin: 48px 0 100px;
}

.post-list { list-style: none; padding: 0; margin: 32px 0 100px; }
.post-list li { border-bottom: 1px solid var(--line); padding: 24px 0; }
.post-list time { font-family: var(--font-mono); font-size: 12px; color: var(--concrete); }
.post-list h2 { font-family: var(--font-display); font-size: 24px; margin: 8px 0; }
.post-list a { text-decoration: none; }
.post-list a:hover h2 { color: var(--signal); }

article.post {
  padding: 60px 0 120px;
  max-width: 68ch;
}
article.post h1 { font-family: var(--font-display); font-size: clamp(32px, 5vw, 52px); line-height: 1.05; }
article.post .meta { font-family: var(--font-mono); font-size: 12px; color: var(--concrete); margin-bottom: 40px; }
article.post p { line-height: 1.75; font-size: 18px; }
article.post blockquote { border-left: 2px solid var(--signal); margin: 0; padding-left: 20px; color: var(--concrete); }
article.post blockquote cite { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 12px; font-style: normal; }

/* ---------------------------------------------------------------- Radar */

/* Ana sayfanın açılış bloğu manifesto sayfasınınkinden küçük tutulur. Sebep
   (10 Eylül): 1366x768 bir dizüstünde slogan bütün ekranı kaplıyordu, okuyucu
   tek bir haber görmeden kaydırmak zorunda kalıyordu. Haber sitesinde ilk
   ekranda haber olmalı; slogan manifesto sayfasında tam boyunda duruyor. */
.radar-head { padding-bottom: 4px; }
.radar-head .kicker { margin: 44px 0 12px; }
h1.radar-hero { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.06; max-width: 22ch; margin-bottom: 20px; }
.radar-head p.lede { font-size: clamp(15px, 1.35vw, 17px); max-width: 62ch; margin-bottom: 0; }

.radar-day { margin: 56px 0 0; }
.radar-day h2.day {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--signal);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 8px;
}
.radar-day h2.day::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.radar-day h2.day .count { color: var(--concrete); }

.radar-card {
  border-bottom: 1px solid var(--line);
  padding: 28px 0 24px;
}
.radar-card h2 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.12;
  margin: 0 0 12px;
  max-width: 30ch;
}
.radar-card h2 a { text-decoration: none; }
.radar-card h2 a:hover { color: var(--signal); }
.radar-body p { line-height: 1.7; font-size: 17px; margin: 0 0 12px; max-width: 66ch; }
.why {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
  color: var(--bone);
  border-left: 2px solid var(--signal);
  padding-left: 14px;
  margin: 14px 0;
  max-width: 66ch;
}
.why strong { color: var(--signal); font-weight: 500; }
.card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 10px 0 0; font-family: var(--font-mono); font-size: 12px; }
.card-foot .source { color: var(--concrete); text-decoration: none; text-transform: uppercase; letter-spacing: 0.06em; }
.card-foot .source:hover { color: var(--bone); }
.tags { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.tag { color: var(--concrete); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.kurek {
  background: var(--signal);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 2px;
  text-transform: uppercase;
}
.radar-card.is-kurek { border-left: 3px solid var(--signal); padding-left: 18px; }
.arsiv-link { font-family: var(--font-mono); font-size: 13px; margin: 48px 0 0; }
.arsiv-link a { color: var(--concrete); }
.arsiv { list-style: none; padding: 0; margin: 12px 0 0; }
.arsiv li { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.arsiv a { text-decoration: none; }
.arsiv a:hover { color: var(--signal); }
.radar-item-page .source { font-family: var(--font-mono); font-size: 13px; color: var(--concrete); }
.radar-item-page .source a { color: var(--bone); }

/* ---------------------------------------------------------------- Fog */
/* Three soft banks over the whole viewport. On .part they slide apart and
   thin out; fog.js removes the element afterwards. body.fog-on hides the
   page content underneath for the first paint so nothing flashes. */

#fog {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  overflow: hidden;
  background: var(--ink);
  transition: background 2.2s ease 0.3s;
}
.fog-layer {
  position: absolute;
  inset: -20% -30%;
  filter: blur(28px);
  opacity: 0.95;
  transition: transform 2.6s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 2.4s ease;
  will-change: transform, opacity;
}
.fog-layer.l1 {
  background:
    radial-gradient(ellipse 55% 45% at 30% 50%, rgba(var(--rgb-veil), 0.55), transparent 70%),
    radial-gradient(ellipse 40% 35% at 70% 30%, rgba(var(--rgb-veil), 0.35), transparent 70%);
}
.fog-layer.l2 {
  background:
    radial-gradient(ellipse 60% 40% at 65% 60%, rgba(var(--rgb-haze), 0.6), transparent 70%),
    radial-gradient(ellipse 35% 30% at 20% 75%, rgba(var(--rgb-haze), 0.4), transparent 70%);
}
.fog-layer.l3 {
  background:
    radial-gradient(ellipse 50% 50% at 50% 45%, rgba(var(--rgb-signal), 0.10), transparent 70%),
    radial-gradient(ellipse 80% 30% at 50% 100%, rgba(var(--rgb-veil), 0.25), transparent 70%);
}
#fog.part { background: transparent; }
#fog.part .l1 { transform: translate3d(-42%, -10%, 0) scale(1.15); opacity: 0; }
#fog.part .l2 { transform: translate3d(46%, 8%, 0) scale(1.15); opacity: 0; }
#fog.part .l3 { transform: translate3d(0, -30%, 0) scale(1.3); opacity: 0; }

/* İçerik sisin ALTINDA, ilk kareden itibaren çizilir. Eskiden `body.fog-on` onu
   `opacity: 0` ile gizliyor, sis dağılınca 0.5 sn gecikmeli 1.4 sn'lik bir solmayla
   geri getiriyordu. Gizlemenin görsel bir karşılığı yoktu: `#fog` zaten `var(--ink)`
   ile tamamen opak, altındaki hiçbir şey sızmıyor. Bedeli ağırdı — 11 Eylül ölçümü
   (yavaş ağ + 4x yavaş işlemci): ilk boyama 1,96 sn, ama metin 8,59 sn'ye kadar
   görünmüyordu, çünkü tarayıcı için saydam metin "çizilmemiş" sayılır. Cloudflare
   Web Analytics ziyaretçilerin %39'unda LCP'yi "kötü" (4 sn üstü) gösteriyordu.
   Şimdi metin hemen çizilir, sis üstünde durur ve dağılarak onu açar; hareket aynı. */

@media (prefers-reduced-motion: reduce) {
  #fog { display: none; }
}

footer.site .machine-note { flex-basis: 100%; font-family: var(--font-mono); font-size: 12px; color: var(--concrete); margin: 0 0 8px; line-height: 1.6; }
footer.site .machine-note a { color: var(--concrete); }

/* Kaydırma bulutları (clouds.js): sayfa açılışta berrak, aşağı indikçe
   arkada bulutlar toplanır. Üç katman, farklı hızlarda; en yoğun hali
   sayfanın dibinde. Tamamen dekoratif, tıklamayı engellemez. Metnin
   okunurluğunu bozmasın diye en parlak katman bile 0.34 alfayı geçmez. */

#clouds {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  --p: 0;
  --y: 0px;
}

#clouds .cloud {
  position: absolute;
  inset: -30% -40%;
  filter: blur(58px);
  will-change: transform, opacity;
}

#clouds .c1 {
  background:
    radial-gradient(ellipse 40% 26% at 24% 42%, rgba(var(--rgb-veil), 0.34), transparent 68%),
    radial-gradient(ellipse 30% 20% at 76% 64%, rgba(var(--rgb-veil), 0.24), transparent 70%);
  /* Taban değer 0 değil: eskiden bulutlar yalnızca sayfanın dibine doğru
     görünüyordu, ilk ekranda hiç yoktu ve "bulut yok" izlenimi veriyordu
     (10 Eylül, kullanıcı). Artık ilk karede de hafif bir yoğunluk var,
     aşağı inildikçe artıyor. Metnin okunurluğu için tavan yine düşük. */
  opacity: calc(0.30 + var(--p) * 0.70);
  transform: translate3d(calc(var(--y) * -0.05), calc(30vh - var(--p) * 34vh), 0);
}

#clouds .c2 {
  background:
    radial-gradient(ellipse 46% 24% at 70% 34%, rgba(var(--rgb-haze), 0.30), transparent 70%),
    radial-gradient(ellipse 34% 22% at 16% 78%, rgba(var(--rgb-haze), 0.22), transparent 72%);
  opacity: calc(0.24 + var(--p) * 0.66);
  transform: translate3d(calc(var(--y) * 0.035), calc(38vh - var(--p) * 46vh), 0)
             scale(calc(1 + var(--p) * 0.14));
}

#clouds .c3 {
  background:
    radial-gradient(ellipse 66% 24% at 50% 88%, rgba(var(--rgb-signal), 0.16), transparent 68%),
    radial-gradient(ellipse 40% 18% at 30% 20%, rgba(var(--rgb-veil), 0.16), transparent 70%);
  opacity: calc(0.15 + var(--p) * var(--p) * 0.85);
  transform: translate3d(calc(var(--y) * -0.02), calc(16vh - var(--p) * 22vh), 0);
}

/* İçerik bulutların üstünde kalır (bulut katmanı z-index 0). Üst bant ötekilerden
   bir kademe yukarıda: arama sonuçları paneli üst bandın içinde duruyor ve
   header kendi yığın bağlamını kurduğu için, eşit seviyede kalsa panelin
   üstüne sayfa gövdesi biniyordu. */
header.site { position: relative; z-index: 2; }
main, footer.site { position: relative; z-index: 1; }

#clouds.still .cloud { opacity: 0.10; transform: none; }

/* -------------------------------------------------------------- Künye */
/* Manifesto sayfasının altındaki "bu site ne yayınlıyor" bölümü. Sade tanım
   listesi: başlık solda, açıklama sağda; dar ekranda alt alta. */

.about { margin: 76px 0 40px; max-width: 72ch; }
.about h2 {
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--signal);
  margin: 0 0 4px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.about dl { margin: 0; }
.about dt {
  font-family: var(--font-display);
  font-size: 15px;
  padding-top: 22px;
}
.about dd {
  margin: 6px 0 22px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--concrete);
  border-bottom: 1px solid var(--line);
  padding-bottom: 22px;
}
.about dd:last-child { border-bottom: 0; }
.about dd a { color: var(--bone); }

@media (min-width: 760px) {
  .about dl { display: grid; grid-template-columns: 12.5rem 1fr; column-gap: 28px; }
  .about dt { grid-column: 1; }
  .about dd { grid-column: 2; margin-left: 0; }
}

/* ------------------------------------------------------- Kapaklı ızgara */
/* Ana sayfa üçlü ızgara (referans düzen: nautil.us). Kart: kapak 8:5,
   altında kaynak · tarih, başlık, tema adı. Etiket kartta görünmez --
   etiketler sinyal defterinin girdisi, okuyucunun işi değil. */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px 28px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 900px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 22px; } }
@media (max-width: 620px) { .card-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

.card { display: flex; flex-direction: column; }

.card-cover {
  display: block;
  position: relative;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--card);
  box-shadow: var(--shadow);
}
/* Kapak <picture> içinde (AVIF + JPEG yedeği). Kutu kendisi yer kaplamasın; img
   eskisi gibi doğrudan .card-cover / sayfa düzenine otursun. */
picture.cover-pic { display: contents; }
.card-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.3s ease;
}
/* Açık temada kapaklar koyu zeminli üretiliyor; kart zeminine biraz karışsınlar
   diye üstlerine sayfa renginden ince bir perde çekilir (--cover-fade). */
.card-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: 0;
  transition: opacity 0.3s ease;
}
:root[data-theme="light"] .card-cover::after { opacity: calc(var(--cover-fade) * 0.35); }
.card:hover .card-cover::after { opacity: 0; }
.card:hover .card-cover img { transform: scale(1.03); }

.card-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--concrete);
  margin: 14px 0 6px;
}
.card-meta .src { color: var(--bone); }
.card-meta .sep { color: var(--line); }

.card h2 {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.2;
  margin: 0 0 10px;
}
.card h2 a { text-decoration: none; }
.card:hover h2 a { color: var(--signal); }

/* Tema adı kırmızı denendi: ızgarada satır başına üç kırmızı satır çıkınca
   kırmızı vurgu olmaktan çıkıp gürültü oluyordu. Ad gri, önündeki nokta kırmızı. */
.card-theme {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: auto 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--concrete);
  text-transform: uppercase;
}
.card-theme::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--signal);
}

/* Haber sayfasının kendi kapağı: aynı dosya, tam genişlik. */
.item-cover {
  display: block;
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 3px;
  margin: 0 0 28px;
}

/* --------------------------------------------------- Gece/gündüz + arama */

/* Üst bandın sağ ucu: arama, gece/gündüz, dil. Bağlantılardan ince bir çizgiyle
   ayrılır -- yan yana dizilince hepsi tek bir menü gibi okunuyordu. */
.tools {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-left: 20px;
  border-left: 1px solid var(--line);
}
@media (max-width: 760px) { .tools { padding-left: 0; border-left: 0; } }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--concrete);
  cursor: pointer;
}
.icon-btn:hover { color: var(--bone); border-color: var(--signal); }
.icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Koyu temada ay, açık temada güneş görünür: düğme "şu an neredesin" değil,
   "neye geçeceksin" demiyor -- geçerli durumu gösterir. */
.icon-btn .i-sun { display: none; }
:root[data-theme="light"] .icon-btn .i-sun { display: block; }
:root[data-theme="light"] .icon-btn .i-moon { display: none; }

.search { position: relative; display: inline-flex; align-items: center; }
.search::before {
  content: "";
  position: absolute;
  left: 12px;
  width: 12px;
  height: 12px;
  pointer-events: none;
  background: var(--concrete);
  /* büyüteç: ayrı bir dosya ya da yazı tipi ikonu getirmemek için maske */
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E");
}
.search input {
  width: 168px;
  padding: 7px 12px 7px 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 12px;
  transition: width 0.25s ease, border-color 0.2s ease;
}
.search input::placeholder { color: var(--concrete); letter-spacing: 0.04em; }
.search input::-webkit-search-cancel-button { filter: grayscale(1) opacity(0.6); }
.search input:focus { outline: none; border-color: var(--signal); width: 230px; }

.search-results {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: min(420px, 78vw);
  max-height: 60vh;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  padding: 6px;
  margin: 0;
  list-style: none;
}
:root[data-theme="light"] .search-results { box-shadow: 0 12px 32px rgba(20, 20, 15, 0.14); }
.search-results[hidden] { display: none; }
/* Panel üst bandın içinde duruyor, yani nav'ın mono/büyük harf biçimini miras
   alıyor. Sonuçlar haber başlığı: gövde yazısıyla, kendi büyük-küçük harfiyle. */
nav.primary .search-results li a {
  display: block;
  padding: 10px 12px;
  text-decoration: none;
  border: 0;
  border-radius: 3px;
  line-height: 1.35;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bone);
}
nav.primary .search-results li a:hover,
nav.primary .search-results li a:focus { background: var(--ink); color: var(--signal); outline: none; }
.search-results .sr-date { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--concrete); margin-top: 3px; }
.search-results .sr-empty { padding: 12px; font-family: var(--font-mono); font-size: 12px; text-transform: none; color: var(--concrete); }

@media (max-width: 620px) {
  nav.primary { gap: 16px; flex-wrap: wrap; }
  .search input { width: 120px; }
  .search input:focus { width: 150px; }
  .search-results { right: auto; left: 0; }

}

/* Parmakla basılan hedefler. 10 Eylül'de gerçek cihaz ölçüsünde (390 px, CDP
   emülasyonu) ölçüldü: gezinme bağları 18 px, tema ve dil düğmeleri 28 px,
   metin içi tek bağlar 16-17 px yüksekti -- hepsi parmak ucunun altında kalıyor
   ve yanlış bağa basılıyordu. Ölçüt ekran genişliği değil **giriş türü**:
   `pointer: coarse` dokunmatik her cihazda tutar (telefon, tablet, dokunmatik
   dizüstü), fare kullanan hiçbir şeyde tutmaz. Genişlik eşiği seçseydik tablet
   dışarıda kalırdı ve eşik her yeni cihaz boyunda yeniden tartışılırdı.
   Büyüyen yalnızca basılabilir alan: yazı boyu, renk ve hizalama değişmiyor. */
@media (pointer: coarse) {
  nav.primary > a { padding: 11px 0; }
  .wordmark { display: inline-block; padding: 6px 0; }
  .icon-btn { width: 40px; height: 40px; }
  .lang button { padding: 11px 14px; }
  .search input { padding-top: 11px; padding-bottom: 11px; }

  /* Kendi satırında duran tek bağlar: arşive git, kaynağa git, radara dön,
     alt bilgideki besleme bağları. */
  p.arsiv-link a, p.source a, p.meta a { display: inline-block; padding: 8px 0; }
  .supported-by a { display: inline-block; padding: 9px 4px; }
  .about dd a { display: inline-block; padding: 8px 0; }
}