/* fonkrizi.com.tr — karanlık mod, tek geniş sütun, 3B kartlar

   Referans: DeutschGate giriş ekranının koyu varyantı. Kuruluşu alındı —
   derin zemin, yumuşak ışık lekeleri, vinyet, guilloche dokusu, yükseltilmiş
   kartlar — ama rengi değil: orada teal, burada menekşe-mürekkep ailesi.

   Tek mod. Karanlık tema anahtarı yok.

   Bütün tonlar ölçüldü; parantez içindeki değerler zemin üzerindeki
   kontrast oranlarıdır. En düşüğü kart yüzeyinde 4,52:1. Kriz içindeki
   biri bunu gece, telefonda, yorgun gözle okuyacak. */

:root {
  /* ——— renk kanallari ———
     Saydam tonlar (rgba) bu kanallardan uretilir. Boylece tema degisince
     yalniz duz renkler degil, kenarlar, zarlar ve golgeler de doner.
     Beyaz ve siyah bilerek kanal DEGIL: onlar renk degil, isik ve golge. */
  --menekse-rgb:     184, 177, 244;
  --siena-rgb:       239, 172, 126;
  --siena-derin-rgb: 222, 149,  96;
  --uyari-rgb:       245, 154, 143;
  --uyari-derin-rgb: 232, 119, 106;
  --olumlu-rgb:      123, 218, 186;
  --mor-rgb:         126, 114, 220;
  --mor-orta-rgb:    154, 147, 224;
  --mor-derin-rgb:    97,  88, 172;
  --sis-rgb:         155, 148, 178;
  --dip-rgb:          33,  30,  51;
  --zemin-rgb:        42,  38,  64;
  --kart-ust-rgb:     65,  60,  96;
  --kart-alt-rgb:     53,  48,  77;
  --kenar-rgb:        76,  70, 112;
  --ara-rgb:          61,  56,  90;

  /* zemin katmanları */
  --zemin:        #2A2640;
  --zemin-dip:    #211E33;
  --yuzey:        #35304D;
  --yuzey-ust:    #413C60;

  /* 3B kart yüzeyleri — ışık üstten vurur */
  --kart-ust:     #413C60;
  --kart-orta:    #3B3657;
  --kart-alt:     #35304D;
  --kart-kalinlik:#211E33;
  --kart-kenar:   rgba(var(--menekse-rgb), .20);
  --kart-cizgi:   rgba(var(--menekse-rgb), .13);

  /* metin — parantez: zemin / kart üstü */
  --murekkep:     #F6F4FC;   /* 13.29 / 9.44 */
  --ikincil:      #DAD5E9;   /* 10.12 / 7.19 */
  --yardimci:     #BDB6D1;   /*  7.43 / 5.28 */
  --kunye:        #B5ADCD;   /*  6.78 / 4.82 */

  /* vurgu */
  --menekse:      #B8B1F4;   /*  7.33 / 5.21 */
  --siena:        #EFAC7E;   /*  7.50 / 5.33 */  /* kehribar — açık moddaki siena'nın yeri */
  --uyari:        #F59A8F;   /*  6.83 / 4.85 */
  --olumlu:       #7BDABA;   /*  8.68 / 6.17 */

  --menekse-zar:  rgba(var(--menekse-rgb), .16);
  --siena-zar:    rgba(var(--siena-rgb), .15);
  --uyari-zar:    rgba(var(--uyari-rgb), .14);

  /* çizgi — şablonlardaki satır içi stiller bu adları kullanıyor */
  --cizgi:        rgba(var(--menekse-rgb), .14);
  --cizgi-koyu:   rgba(var(--menekse-rgb), .26);

  /* ortam ışığı */
  --leke-1:       rgba(var(--mor-rgb), .30);
  --leke-2:       rgba(var(--siena-rgb), .12);
  --leke-3:       rgba(var(--uyari-rgb), .08);
  --guilloche:    rgba(var(--menekse-rgb), .055);

  --r:            16px;
  --r-kucuk:      9px;
  --r-hap:        999px;

  /* Kartın fiziksel kalınlığı: sıfır bulanıklıklı üst üste gölgeler.
     Metni döndürmeden derinlik verir — döndürülen metin bulanıklaşır. */
  --kabartma:
    inset 0 1px 0 rgba(255, 255, 255, .075),
    inset 0 -1px 0 rgba(0, 0, 0, .26),
    0 1px 0 var(--kart-kalinlik),
    0 2px 0 rgba(var(--dip-rgb), .92),
    0 3px 0 rgba(var(--dip-rgb), .74),
    0 20px 44px -24px rgba(0, 0, 0, .55);
  --kabartma-yuksek:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset 0 -1px 0 rgba(0, 0, 0, .28),
    0 1px 0 var(--kart-kalinlik),
    0 2px 0 rgba(var(--dip-rgb), .92),
    0 4px 0 rgba(var(--dip-rgb), .80),
    0 6px 0 rgba(var(--dip-rgb), .55),
    0 30px 60px -26px rgba(0, 0, 0, .60);
  --kabartma-sig:
    inset 0 1px 0 rgba(255, 255, 255, .055),
    0 1px 0 var(--kart-kalinlik),
    0 2px 0 rgba(var(--dip-rgb), .8),
    0 14px 30px -20px rgba(0, 0, 0, .52);

  --sol-genislik:  282px;
  --sag-genislik:  326px;
  --bosluk:        20px;
  --ustbar-h:      58px;

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --baslik: Archivo, "Segoe UI", system-ui, sans-serif;
  --govde: Barlow, "Segoe UI", system-ui, sans-serif;

  /* dugme — yukseltilmis mor dugme; kenarlari kartin kalinligi gibi */
  --dugme-ust:     #635BA0;
  --dugme-alt:     #4C4580;
  --dugme-yazi:    #F1EEF8;
  --dugme-kenar-1: #322D52;
  --dugme-kenar-2: #2A2646;
  --dugme-kenar-3: #211E33;

  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--murekkep);
  font-family: var(--govde);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ——————————————————————————————————————— ortam: ışık lekeleri, doku, vinyet

   Sabit katman, içeriğin altında. Sayfa kayarken yerinde durur —
   böylece zemin bir "oda" gibi davranır, kağıt gibi değil. */

.ortam {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.leke {
  position: absolute;
  border-radius: 50%;
  filter: blur(96px);
  opacity: .46;
}
.leke--1 { width: 720px; height: 720px; top: -330px; left: -180px; background: var(--leke-1); }
.leke--2 { width: 560px; height: 560px; top: -190px; right: -160px; background: var(--leke-2); }
.leke--3 { width: 640px; height: 640px; top: 58%;    left: 42%;     background: var(--leke-3); }

/* Guilloche: belge/banknot dokusu. İki eğik çizgi ağı, çok düşük opaklıkta. */
.doku {
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image:
    repeating-linear-gradient(58deg,  var(--guilloche) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(-58deg, var(--guilloche) 0 1px, transparent 1px 13px);
}
.vinyet {
  position: absolute;
  inset: 0;
  background: radial-gradient(118% 82% at 50% 0%, transparent 28%, var(--zemin-dip) 94%);
}

/* ——————————————————————————————————————— tipografi */

a { color: var(--menekse); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

h1, h2, h3 {
  font-family: var(--baslik);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--murekkep);
  margin: 0;
}
h1 { font-size: 27px; line-height: 1.22; }
h2 { font-size: 19px; line-height: 1.3; }
h3 { font-size: 15.5px; line-height: 1.35; }
p  { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

/* ——————————————————————————————————————— üst menü

   Gezinme sol panelden buraya alındı. Sebebi okunabilirlik: sol panelin
   asıl işi 131 fonluk dizin; gezinme oraya karışınca ikisi de zor
   seçiliyordu. Menü üstte, her sayfada aynı yerde, tek bakışta görünür. */

.ustbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(var(--zemin-rgb), .84);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--cizgi);
  padding-top: env(safe-area-inset-top, 0px);
}
.ustbar__ic {
  max-width: 1680px;
  margin: 0 auto;
  min-height: var(--ustbar-h);
  padding: 0 var(--bosluk);
  display: flex;
  align-items: center;
  gap: 24px;
}
.ustbar__marka {
  font-family: var(--baslik);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--murekkep);
  white-space: nowrap;
  flex: 0 0 auto;
}
.ustbar__marka span { color: var(--siena); }
.ustbar__marka:hover { text-decoration: none; }

/* Dar ekranda menü yatay kayar — öğeler alt alta düşüp barı şişirmesin. */
.ustmenu {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ustmenu::-webkit-scrollbar { display: none; }

.ustmenu__oge {
  position: relative;
  padding: 8px 13px;
  border-radius: var(--r-kucuk);
  color: var(--ikincil);
  font-size: 14.5px;
  line-height: 1.3;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ustmenu__oge:hover {
  text-decoration: none;
  color: var(--murekkep);
  background: var(--yuzey);
  border-color: var(--kart-kenar);
}
.ustmenu__oge--aktif {
  color: var(--murekkep);
  font-weight: 600;
  background: linear-gradient(170deg, var(--kart-ust), var(--kart-alt));
  border-color: var(--kart-kenar);
  box-shadow: var(--kabartma-sig);
}
/* Aktif sekmenin altındaki kehribar çizgi — hangi sayfada olduğunuz
   renk körlüğünde de seçilsin diye kalınlık ve konumla da işaretli. */
.ustmenu__oge--aktif::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--siena);
}

.ustbar__sag {
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kunye);
  white-space: nowrap;
}

/* ——————————————————————————————————————— sayfa iskeleti

   Tek sütun, geniş. Üç panel denendi ve bırakıldı: içerik sütunu fazla
   daralıyordu — tablolar taşıyor, başlıklar üç kelimede kırılıyordu.
   Artboardların düzeni de zaten tek sütun. Yan bilgiler artık kendi
   bölümlerinde, içeriğin akışı içinde. */

.kabuk {
  position: relative;
  z-index: 1;
  max-width: 1260px;
  margin: 0 auto;
  padding: clamp(24px, 3.4vw, 46px) clamp(18px, 4.4vw, 64px);
  min-height: 60vh;
}

/* Geniş kolon: ölçülü satır uzunluğu, okunabilirlik için. */
.kolon { max-width: 74ch; }

/* Kahraman bölümü — artboarddaki gibi solda metin, sağda belge kartı. */
.kahraman {
  display: flex;
  gap: clamp(28px, 4.6vw, 72px);
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: clamp(34px, 4vw, 58px);
}
.kahraman__sol { flex: 1 1 420px; min-width: 0; max-width: 620px; }
.kahraman__sag { flex: 0 1 468px; min-width: 0; width: 100%; max-width: 468px; }

/* Yan yana iki bölüm — geniş ekranda içerik + bağlam. */
.ikili {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 32px);
  align-items: start;
}
@media (max-width: 940px) {
  .ikili { grid-template-columns: 1fr; }
}

/* ——————————————————————————————————————— 3B kart

   Kalınlık, sıfır bulanıklıklı üst üste gölgelerle verilir: kartın altında
   gerçek bir kenar varmış gibi. Üstte ince ışık çizgisi, altta iç gölge —
   yüzey öne doğru eğik okunur. Metin döndürülmez, keskin kalır. */

.kart {
  position: relative;
  background: linear-gradient(168deg, var(--kart-ust) 0%, var(--kart-orta) 54%, var(--kart-alt) 100%);
  border: 1px solid var(--kart-kenar);
  border-radius: var(--r);
  box-shadow: var(--kabartma);
  padding: 21px 23px;
  margin-bottom: var(--bosluk);
  transition: transform .18s ease, box-shadow .18s ease;
}
/* Sol üstten gelen ışığın yüzeydeki parlaması. */
.kart::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(130% 78% at 14% -8%, rgba(255, 255, 255, .055), transparent 62%);
  pointer-events: none;
}
.kart > * { position: relative; }
.kart:last-child { margin-bottom: 0; }

.kart--duz { box-shadow: var(--kabartma-sig); }
.kart--sik { padding: 16px 17px; }

/* Tıklanabilir kart gerçekten kalkar. */
a.kart:hover,
.kart--tiklanir:hover {
  transform: translateY(-3px);
  box-shadow: var(--kabartma-yuksek);
  text-decoration: none;
}

.kart__ust {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--kart-cizgi);
}
.etiket {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kunye);
}

.sayfa-basi { margin-bottom: var(--bosluk); }
.sayfa-basi__ust { margin-bottom: 5px; }
.sayfa-basi__alt {
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ikincil);
  max-width: 68ch;
}

/* ——————————————————————————————————————— fon kodu rozeti

   Teyitli ve teyitsiz kod ASLA aynı görünmemeli. Teyitsiz bir kodun
   teyitli gibi durması, hiç kod olmamasından daha tehlikeli: insan
   kendi fonu sanıp başkasınınkini takip eder. */

.kod {
  display: inline-block;
  min-width: 38px;
  text-align: center;
  padding: 2px 6px;
  border-radius: var(--r-kucuk);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  border: 1px solid transparent;
}
.kod--teyitli {
  background: var(--menekse-zar);
  border-color: rgba(var(--mor-orta-rgb), .30);
  color: var(--menekse);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.kod--bekliyor {
  background: var(--siena-zar);
  border-color: rgba(var(--siena-derin-rgb), .46);
  border-style: dashed;
  color: var(--siena);
}
.kod--bekliyor::after { content: "\00b0"; }
.kod--yok {
  border-color: var(--cizgi-koyu);
  border-style: dashed;
  color: var(--kunye);
  font-weight: 400;
}
a.kod:hover { text-decoration: none; filter: brightness(1.15); }

/* ——————————————————————————————————————— form alanları */

.ara {
  width: 100%;
  padding: 9px 12px;
  margin-bottom: 10px;
  border: 1px solid var(--cizgi-koyu);
  border-radius: var(--r-kucuk);
  background: var(--zemin-dip);
  font-family: var(--govde);
  font-size: 14px;
  color: var(--murekkep);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .30);
}
.ara:focus {
  outline: 2px solid var(--menekse);
  outline-offset: 1px;
  border-color: transparent;
}
.ara::placeholder { color: var(--kunye); }
select.ara, button.ara { box-shadow: var(--kabartma-sig); background: var(--yuzey); }
button.ara:hover { background: var(--yuzey-ust); }

/* ——————————————————————————————————————— fon listesi */

.fonlar { display: flex; flex-direction: column; gap: 3px; }

/* Geniş sütunda 42 fonluk bir liste tek kolonda çok uzuyor; ızgaraya
   dönüyor. Sıra yukarıdan aşağı değil soldan sağa okunur — alfabetik
   listede bu doğru davranış. */
.fonlar--izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 2px 18px;
}
.fon {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--r-kucuk);
  border: 1px solid transparent;
  border-left: 3px solid transparent;
  color: var(--ikincil);
  font-size: 13.5px;
  line-height: 1.38;
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.fon:hover {
  text-decoration: none;
  background: var(--yuzey);
  border-color: var(--kart-kenar);
  color: var(--murekkep);
  transform: translateX(2px);
}
.fon--aktif {
  background: linear-gradient(170deg, var(--kart-ust), var(--kart-alt));
  border-color: var(--kart-kenar);
  border-left-color: var(--siena);
  color: var(--murekkep);
  box-shadow: var(--kabartma-sig);
}
.fon__ad { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.grup { margin-top: 14px; }
.grup:first-child { margin-top: 0; }
.grup__basi {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--zemin);
  padding: 6px 2px 5px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--cizgi);
  margin-bottom: 5px;
}
.grup__ad { font-family: var(--baslik); font-size: 13px; font-weight: 600; color: var(--murekkep); }

/* ——————————————————————————————————————— kaynak kartı */

.kaynak {
  display: block;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: linear-gradient(168deg, var(--kart-ust), var(--kart-alt));
  border: 1px solid var(--kart-kenar);
  border-radius: var(--r-kucuk);
  color: var(--ikincil);
  font-size: 13px;
  line-height: 1.45;
  box-shadow: var(--kabartma-sig);
  transition: transform .16s ease, box-shadow .16s ease;
}
.kaynak:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--kabartma); }
.kaynak__ust { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.kaynak__ad { color: var(--murekkep); font-weight: 600; font-size: 13px; }
.kaynak__tarih { font-family: var(--mono); font-size: 10.5px; color: var(--kunye); }

/* Kaynak katmanı — renk tek başına anlam taşımaz; harf her zaman yazılır. */
.katman {
  display: inline-block;
  width: 18px; height: 18px;
  line-height: 17px;
  text-align: center;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  border: 1px solid;
}
.katman--a { background: var(--menekse-zar); color: var(--menekse); border-color: rgba(var(--mor-orta-rgb), .38); }
.katman--b { background: var(--siena-zar);   color: var(--siena);   border-color: rgba(var(--siena-derin-rgb), .38); }
.katman--c { background: rgba(var(--sis-rgb), .12); color: var(--yardimci); border-color: var(--cizgi-koyu); }
.katman--d { background: var(--uyari-zar);   color: var(--uyari);   border-color: rgba(var(--uyari-derin-rgb), .38); }

/* ——————————————————————————————————————— uyarı şeridi */

.serit {
  display: flex;
  gap: 11px;
  padding: 14px 16px;
  border-radius: var(--r-kucuk);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: var(--bosluk);
  border: 1px solid;
  box-shadow: var(--kabartma-sig);
}
.serit--bilgi  { background: var(--menekse-zar); border-color: rgba(var(--mor-orta-rgb), .28); color: var(--ikincil); }
.serit--dikkat { background: var(--siena-zar);   border-color: rgba(var(--siena-derin-rgb), .34);  color: var(--ikincil); }
.serit--uyari  { background: var(--uyari-zar);   border-color: rgba(var(--uyari-derin-rgb), .34); color: var(--ikincil); }
.serit b { color: var(--murekkep); }
.serit__im { flex: 0 0 auto; font-family: var(--mono); font-weight: 600; }
.serit--bilgi .serit__im  { color: var(--menekse); }
.serit--dikkat .serit__im { color: var(--siena); }
.serit--uyari .serit__im  { color: var(--uyari); }

/* ——————————————————————————————————————— veri satırı ve tablo */

.satirlar { display: flex; flex-direction: column; }
.satir {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
  gap: 8px 18px;
  padding: 10px 0;
  border-bottom: 1px solid var(--kart-cizgi);
  font-size: 13.5px;
}
.satir:last-child { border-bottom: 0; }
.satir__ad { color: var(--kunye); }
.satir__deger { color: var(--murekkep); }
.sayi { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

table { border-collapse: collapse; }
thead th { color: var(--kunye); }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: rgba(var(--mor-orta-rgb), .045); }

/* ——————————————————————————————————————— künye */

.kunye {
  margin-top: 26px;
  padding: 16px 4px 8px;
  border-top: 1px solid var(--cizgi);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--kunye);
}

/* ——————————————————————————————————————— üst menüdeki arama

   "Fonumu bul" bu sitenin birincil işi; her sayfadan erişilebilir olmalı.
   Dar ekranda gizlenir — orada menüdeki "Fonlar" sekmesi aynı işi görür. */

.ustara { position: relative; margin-left: auto; flex: 0 1 260px; min-width: 0; }
.ara--kucuk {
  margin: 0;
  padding: 7px 11px;
  font-size: 13.5px;
  border-radius: var(--r-kucuk);
}

/* Kod kutusu. Küçük harf yazan da kodunu büyük harf görür; sorgu sunucuda
   da büyütülüyor, yani bu dönüşüm ekrandakiyle sonucu ayırmıyor. Yazı
   aralığı biraz açık: büyük harf dizisi sıkışık okunur. İpucu metni
   dönüşümün dışında — "FON ARA" diye bağırmasın. */
.ara--kod { text-transform: uppercase; letter-spacing: .02em; }
.ara--kod::placeholder { text-transform: none; letter-spacing: normal; }

/* Öneri penceresi — ustara.js kurarsa var, kurmazsa hiç doğmaz.

   Tarayıcının kendi <datalist> listesi 131 satırı olduğu gibi açıyor,
   ekranın dibine iniyordu; yüksekliği de CSS'e kapalı, çünkü o pencereyi
   tarayıcı çiziyor. Buradaki pencere sayfanın kendi elemanı: yüksekliği
   ~7 satırla sınırlı, gerisi kendi içinde kayar. Kutudan geniş —
   fon adları uzun; sağa değil sola doğru açılıyor ki ekrandan taşmasın. */

.oneri {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: min(440px, 76vw);
  max-height: 268px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* 268px ≈ 7,5 satır. Yarım kalan satır bilerek: Chrome'da kaydırma
     çubuğu içeriğin üstünde yüzüyor ve ancak kaydırırken beliriyor,
     "aşağısı var" bilgisini kesilen satır taşıyor. Kaydırma çubuğu
     biçimi sayfadaki öteki kayan listeyle (.ld-liste) aynı. */
  padding: 4px;
  border: 1px solid var(--cizgi-koyu);
  border-radius: var(--r-kucuk);
  background: var(--yuzey);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 2px 0 var(--kart-kalinlik),
    0 20px 44px -20px rgba(0, 0, 0, .70);
  scrollbar-width: thin;
  scrollbar-color: var(--cizgi-koyu) transparent;
}
.oneri[hidden] { display: none; }
.oneri::-webkit-scrollbar { width: 9px; }
.oneri::-webkit-scrollbar-thumb {
  background: var(--cizgi-koyu);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--r-hap);
}

.oneri__satir {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  padding: 6px 8px;
  border-radius: 7px;
  cursor: pointer;
}
.oneri__satir[hidden] { display: none; }
.oneri__satir .kod { flex: 0 0 auto; }
.oneri__satir:hover,
.oneri__satir--etkin { background: var(--yuzey-ust); }

/* Ad tek satırda kesilir; tamamı satırın title'ında durur. Kesme yalnızca
   pencerede — fon sayfasında ve listede ad birebir yazıyor. */
.oneri__ad {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ikincil);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.oneri__bos {
  order: 9999;
  padding: 9px 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--kunye);
}
.oneri__bos[hidden] { display: none; }
.gorunmez {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ——————————————————————————————————————— kaynak bölümü ve alt bilgi */

.yan-bolum {
  margin-top: clamp(36px, 5vw, 64px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--cizgi);
}
.yan-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 14px;
  align-items: start;
}
.yan-izgara > .kart { margin-bottom: 0; }

.altbilgi {
  position: relative;
  z-index: 1;
  margin-top: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--cizgi);
  background: rgba(var(--dip-rgb), .42);
}
.altbilgi__ic {
  max-width: 1260px;
  margin: 0 auto;
  padding: clamp(26px, 3vw, 38px) clamp(18px, 4.4vw, 64px)
           max(clamp(26px, 3vw, 38px), env(safe-area-inset-bottom, 0px));
  display: flex;
  gap: clamp(24px, 4vw, 60px);
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.altbilgi__metin { flex: 1 1 420px; max-width: 660px; }
.altbilgi__basi {
  font-family: var(--baslik);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--murekkep);
  margin-bottom: 9px;
}
.altbilgi__metin p { font-size: 13px; line-height: 1.7; color: var(--kunye); margin: 0; }
.altbilgi__baglar {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 0 0 auto;
}
.altbilgi__baglar a { font-size: 13.5px; color: var(--ikincil); }
.altbilgi__baglar a:hover { color: var(--murekkep); }

/* ——————————————————————————————————————— liste + detay

   Olay akışı için iki panel: solda olaylar, sağda seçilenin detayı.
   Seçim sunucu tarafında ?sec= ile; JavaScript yok. Liste kendi içinde
   kayar ki uzun akışta detay ekrandan kaçmasın. */

.liste-detay {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 24px);
  align-items: start;
  /* Listedeki bağlantılar `#belgeler` çapasına gidiyor. Seçim sunucuda
     yapıldığı için her tıklama tam sayfa yüklemesi; çapa olmadan
     tarayıcı en üste fırlıyor ve okuyucu her seferinde aşağı kaydırmak
     zorunda kalıyordu. Üst bar sabit olduğu için çapanın altına
     düşmesin diye pay bırakılıyor. */
  scroll-margin-top: calc(var(--ustbar-h) + 16px);
}

/* İki sütunun da başlığı. Sağda da bir tane var — yoksa yalnızca solda
   etiket olurdu ve sol liste, sağdaki karta göre bir etiket boyu
   aşağıda başlardı. Tek sınıf, iki sütun, aynı yükseklik. */
.ld-baslik {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kunye);
  padding: 0 2px 9px;
}
.ld-liste {
  max-height: calc(100vh - var(--ustbar-h) - 90px);
  overflow-y: auto;
  overscroll-behavior: contain;
  position: sticky;
  top: calc(var(--ustbar-h) + 16px);
  scrollbar-width: thin;
  scrollbar-color: var(--cizgi-koyu) transparent;
  padding-right: 4px;
}
.ld-liste::-webkit-scrollbar { width: 7px; }
.ld-liste::-webkit-scrollbar-thumb { background: var(--cizgi-koyu); border-radius: var(--r-hap); }

.ld-oge {
  display: block;
  padding: 13px 14px;
  margin-bottom: 8px;
  border-radius: var(--r-kucuk);
  border: 1px solid var(--kart-kenar);
  border-left: 3px solid transparent;
  background: linear-gradient(168deg, var(--kart-ust), var(--kart-alt));
  box-shadow: var(--kabartma-sig);
  color: var(--ikincil);
  transition: transform .15s ease, box-shadow .15s ease;
}
.ld-oge:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--kabartma); }
.ld-oge--aktif {
  border-left-color: var(--siena);
  box-shadow: var(--kabartma);
}
.ld-oge__ust { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 7px; }
.ld-oge__ad { font-size: 13.5px; font-weight: 600; color: var(--murekkep); line-height: 1.4; }
.ld-oge__tarih { font-family: var(--mono); font-size: 10.5px; color: var(--kunye); margin-top: 5px; }

@media (max-width: 900px) {
  .liste-detay { grid-template-columns: 1fr; }
  .ld-liste { position: static; max-height: 300px; }
}

/* ——————————————————————————————————————— dar ekran */

@media (max-width: 900px) {
  .kabuk { padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); }
  .kahraman { gap: 26px; }
  h1 { font-size: 23px; }
  .kart { padding: 17px 16px; }
  .leke { opacity: .32; }
  .ustbar__ic { gap: 14px; padding: 0 14px; }
  .ustara { display: none; }
  .ustbar__marka { font-size: 17px; }
  .ustmenu__oge { padding: 7px 10px; font-size: 13.5px; }
}

/* Hareketi kapatanlarda kartlar yerinde durur. */
@media (prefers-reduced-motion: reduce) {
  .kart, .fon, .kaynak, .ustmenu__oge, .dugme { transition: none; }
  a.kart:hover, .kart--tiklanir:hover, .kaynak:hover { transform: none; }
  .fon:hover { transform: none; }
}

/* Yazdırma: koyu zemin mürekkep yakar — kağıda açık basılır. */
@media print {
  .ortam, .ustbar { display: none; }
  body { background: #fff; color: #111; }
  .kabuk { max-width: none; padding: 0; }
  .altbilgi { background: none; margin-top: 24px; }
  .kart { box-shadow: none; background: #fff; border-color: #ccc; break-inside: avoid; }
  .kart::before { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   AYDINLIK MOD

   Koyu mod varsayilan kalir: bu sayfayi okuyanlarin cogu haberi gece,
   telefonda ogreniyor. Aydinlik mod bir tercih; ustteki anahtarla
   secilir ve secim cerezde saklanir. JavaScript YOK — secim sunucuda
   yapilir, sayfa oyle basilir.

   Tonlar olculdu. Parantez icindekiler once zemin (#F2EFF8), sonra kart
   yuzeyi (#FFFFFF) uzerindeki kontrast oranlaridir. En dusugu 5.13:1 —
   koyu moddaki 4.52:1 tabanindan yuksek.
   ═══════════════════════════════════════════════════════════════════ */
:root[data-tema="acik"] {
  /* kanallar — saydam tonlar da donsun */
  --menekse-rgb:      85,  74, 174;
  --siena-rgb:       154,  80,  22;
  --siena-derin-rgb: 154,  80,  22;
  --uyari-rgb:       172,  35,  28;
  --uyari-derin-rgb: 172,  35,  28;
  --olumlu-rgb:       15, 115,  85;
  --mor-rgb:         108,  94, 205;
  --mor-orta-rgb:    122, 110, 210;
  --mor-derin-rgb:    85,  74, 174;
  --sis-rgb:         110, 102, 138;
  --dip-rgb:         176, 167, 202;
  --zemin-rgb:       242, 239, 248;
  --kart-ust-rgb:    255, 255, 255;
  --kart-alt-rgb:    246, 243, 251;
  --kenar-rgb:       214, 206, 232;
  --ara-rgb:         236, 232, 245;

  /* zemin katmanlari — koyu modun tersi: isik ustten degil, her yerden */
  --zemin:        #F2EFF8;
  --zemin-dip:    #E7E2F1;
  --yuzey:        #FFFFFF;
  --yuzey-ust:    #FBFAFE;

  /* 3B kart yuzeyleri. Kalinlik rengi siyah degil mor-gri: beyaz kagit
     uzerinde siyah kenar kirli gorunuyor, morumsu gri kagidin kendi
     golgesi gibi duruyor. */
  --kart-ust:     #FFFFFF;
  --kart-orta:    #FCFBFE;
  --kart-alt:     #F7F4FC;
  --kart-kalinlik:#D8D0E8;
  --kart-kenar:   rgba(var(--menekse-rgb), .26);
  --kart-cizgi:   rgba(var(--menekse-rgb), .16);

  /* metin — parantez: zemin / kart ustu */
  --murekkep:     #1E1A2E;   /* 14.87 / 16.90 */
  --ikincil:      #3A3453;   /* 10.29 / 11.69 */
  --yardimci:     #57506F;   /*  6.64 /  7.55 */
  --kunye:        #655D80;   /*  5.39 /  6.12 */

  /* vurgu */
  --menekse:      #554AAE;   /*  6.21 /  7.05 */
  --siena:        #9A5016;   /*  5.23 /  5.94 */
  --uyari:        #AC231C;   /*  6.14 /  6.97 */
  --olumlu:       #0F7355;   /*  5.13 /  5.83 */

  --menekse-zar:  rgba(var(--menekse-rgb), .10);
  --siena-zar:    rgba(var(--siena-rgb), .10);
  --uyari-zar:    rgba(var(--uyari-rgb), .09);

  --cizgi:        rgba(var(--menekse-rgb), .17);
  --cizgi-koyu:   rgba(var(--menekse-rgb), .30);

  /* ortam isigi — koyu modda isik lekesi, burada renk sisi. Ayni
     opaklik beyaz uzerinde cok sert cikiyordu, dusuruldu. */
  --leke-1:       rgba(var(--mor-rgb), .13);
  --leke-2:       rgba(var(--siena-rgb), .07);
  --leke-3:       rgba(var(--uyari-rgb), .05);
  --guilloche:    rgba(var(--menekse-rgb), .055);

  /* Kartin fizikselligi. Koyu modda kalinlik koyu golgelerle veriliyordu;
     burada ust parlama neredeyse gorunmez oldugu icin is alt kenara ve
     yayvan golgeye kaliyor. */
  --kabartma:
    inset 0 1px 0 rgba(255, 255, 255, .90),
    inset 0 -1px 0 rgba(var(--dip-rgb), .13),
    0 1px 0 var(--kart-kalinlik),
    0 2px 0 rgba(216, 208, 232, .80),
    0 3px 0 rgba(216, 208, 232, .55),
    0 18px 34px -22px rgba(var(--dip-rgb), .50);
  --kabartma-yuksek:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(var(--dip-rgb), .15),
    0 1px 0 var(--kart-kalinlik),
    0 2px 0 rgba(216, 208, 232, .85),
    0 4px 0 rgba(216, 208, 232, .62),
    0 6px 0 rgba(216, 208, 232, .40),
    0 26px 48px -24px rgba(var(--dip-rgb), .58);
  --kabartma-sig:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    0 1px 0 var(--kart-kalinlik),
    0 2px 0 rgba(216, 208, 232, .70),
    0 12px 24px -18px rgba(var(--dip-rgb), .46);

  /* Tarayicinin kendi parcalari da donsun: kaydirma cubugu, secim
     rengi, form denetimleri. Aksi halde acik sayfada koyu bir kaydirma
     cubugu kaliyor. */
  /* Dugme aydinlik modda da mor kalir — sayfanin tek "bas buraya"
     ogesi. Yalniz kenarlari aciliyor: beyaz kagit uzerinde neredeyse
     siyah bir kenar, dugmeyi sayfadan kopuk gosteriyordu. */
  --dugme-ust:     #6257A8;
  --dugme-alt:     #4E4688;
  --dugme-yazi:    #FBFAFE;
  --dugme-kenar-1: #453D75;
  --dugme-kenar-2: #3B3465;
  --dugme-kenar-3: #322C55;

  color-scheme: light;
}


/* ——— tema anahtari ———
   Ust bardaki menu ogeleriyle ayni dilde; secili sekme gibi degil, yan
   bir denetim gibi duruyor. Dar ekranda yazi dusuyor, simge kaliyor. */
.tema-anahtar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 6px 11px;
  border-radius: var(--r-hap);
  border: 1px solid var(--kart-kenar);
  background: var(--yuzey);
  color: var(--yardimci);
  font-family: var(--govde);
  font-size: 12.5px;
  line-height: 1;
  text-decoration: none;
  box-shadow: var(--kabartma-sig);
}
.tema-anahtar:hover {
  color: var(--murekkep);
  border-color: var(--cizgi-koyu);
  text-decoration: none;
}
.tema-anahtar:focus-visible {
  outline: 2px solid var(--menekse);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .tema-anahtar__yazi { display: none; }
  .tema-anahtar { padding: 6px 9px; }
}

@media print {
  .tema-anahtar { display: none; }
}

/* ——— tekil ziyaretçi sayacı ———
   Üst barın sağında, tema anahtarının yanında. Bilerek sessiz: bu bir
   rozet değil, bir künye satırı. Sayı okunur ama dikkat çekmez —
   sayfanın işi fonun durumunu anlatmak, kaç kişinin geldiğini değil.

   Tema anahtarıyla aynı yükseklik ve yuvarlaklıkta duruyor ama çerçevesi
   yok: tıklanabilir değil, o yüzden düğme gibi görünmemeli. */
.ziyaret {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  flex: none;
  padding: 6px 2px;
  font-family: var(--govde);
  font-size: 12.5px;
  line-height: 1;
  color: var(--kunye);
  white-space: nowrap;
  cursor: default;
}
.ziyaret__im {
  font-size: 9px;
  color: var(--menekse);
  transform: translateY(-1px);
}
.ziyaret__sayi {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--yardimci);
}

/* Dar ekranda "ziyaretçi" sözcüğü düşer, sayı kalır: üst barda yer
   arama kutusunundur. Tema anahtarı da aynı eşikte yazısını bırakıyor. */
@media (max-width: 860px) {
  .ziyaret__yazi { display: none; }
}
@media (max-width: 560px) {
  .ziyaret { display: none; }
}

@media print {
  .ziyaret { display: none; }
}