/* ============================================================================
   LA FISH REHBERİ — yalnız wiki bileşenleri.
   assets/style.css'e DOKUNULMAZ; buradaki her renk oradaki değişkenlerden gelir.
   Sitede karanlık tema YOK → [data-theme] / prefers-color-scheme kuralı YAZILMAZ.
   Kullanılabilir değişkenler: --color-primary/secondary/accent/accent-dark/bg/
   surface/border/text/text-muted/danger/warning-bg/warning-border,
   --radius-sm/md/lg, --shadow-sm/md/lg, --font-base, --max-w, --header-h.
   (--muted / --card / --border DİYE DEĞİŞKEN YOK — karşılıkları text-muted /
   surface / border.)
   ========================================================================== */

/* --- Yerleşim: solda yapışkan gezinme + içerik ---------------------------- */
.wiki-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
  padding: 40px 0 64px;
}
@media (min-width: 1000px) {
  .wiki-layout { grid-template-columns: 260px minmax(0, 1fr); gap: 44px; }
}
.wiki-main { min-width: 0; }          /* grid çocuğu taşmasın (uzun kod/tablo) */

/* --- Sol gezinme ---------------------------------------------------------- */
.wiki-nav { font-size: .93rem; }
@media (min-width: 1000px) {
  .wiki-nav {
    position: sticky;
    top: calc(var(--header-h) + 24px);
    max-height: calc(100vh - var(--header-h) - 48px);
    overflow: auto;
    padding-right: 8px;
  }
}
.wiki-nav-grup { margin-bottom: 18px; }
.wiki-nav-baslik {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-secondary); margin: 0 0 8px;
}
.wiki-nav ul { list-style: none; margin: 0; padding: 0; }
.wiki-nav li { margin: 0; }
.wiki-nav a {
  display: block; padding: 6px 10px; border-radius: var(--radius-sm);
  color: var(--color-text); text-decoration: none; border-left: 3px solid transparent;
}
.wiki-nav a:hover { background: var(--color-bg); }
.wiki-nav a.active {
  background: var(--color-bg); border-left-color: var(--color-accent);
  font-weight: 600; color: var(--color-primary);
}
/* <1000px: ayrı mobil menü kodu yazılmaz, <details> yeter (main.js hamburger'ına dokunulmaz) */
.wiki-nav-mobil { margin: 0 0 24px; }
.wiki-nav-mobil > summary {
  cursor: pointer; padding: 12px 14px; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font-weight: 600; color: var(--color-primary);
}
.wiki-nav-mobil[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.wiki-nav-mobil > div {
  border: 1px solid var(--color-border); border-top: 0; padding: 12px 10px;
  border-radius: 0 0 var(--radius-md) var(--radius-md); background: var(--color-surface);
}
@media (min-width: 1000px) { .wiki-nav-mobil { display: none; } }
@media (max-width: 999px)  { .wiki-nav-masaustu { display: none; } }

/* --- Sayfa içi içindekiler ------------------------------------------------ */
.wiki-toc {
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 14px 18px; margin: 0 0 28px;
}
.wiki-toc-baslik { font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 8px; }
.wiki-toc ul { list-style: none; margin: 0; padding: 0; }
.wiki-toc li { margin: 4px 0; }
.wiki-toc li.alt { padding-left: 16px; font-size: .92em; }
.wiki-toc a { color: var(--color-text); text-decoration: none; }
.wiki-toc a:hover { color: var(--color-accent-dark); text-decoration: underline; }
.wiki-toc a.okunuyor { color: var(--color-accent-dark); font-weight: 600; }

/* Başlık yanındaki çapa bağlantısı */
.wiki-capa {
  margin-left: 8px; color: var(--color-border); text-decoration: none;
  font-weight: 400; opacity: 0; transition: opacity .12s;
}
h2:hover .wiki-capa, h3:hover .wiki-capa, .wiki-capa:focus { opacity: 1; color: var(--color-accent); }

/* --- Arama ---------------------------------------------------------------- */
.wiki-arama { position: relative; margin: 0 0 18px; }
.wiki-arama input {
  width: 100%; padding: 10px 14px; font: inherit; color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.wiki-arama input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.wiki-arama-sonuc {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  max-height: 340px; overflow: auto; padding: 6px;
}
.wiki-arama-sonuc a {
  display: block; padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--color-text); text-decoration: none; font-size: .92rem;
}
.wiki-arama-sonuc a:hover, .wiki-arama-sonuc a.secili { background: var(--color-bg); }
.wiki-arama-sonuc .yol { color: var(--color-text-muted); font-size: .85em; }
.wiki-arama-bos { padding: 10px; color: var(--color-text-muted); font-size: .9rem; }

/* --- NE / NİYE / TAKILIRSAN kutuları -------------------------------------- */
.wiki-tldr {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent); border-radius: var(--radius-md);
  padding: 16px 20px; margin: 0 0 20px; box-shadow: var(--shadow-sm);
}
.wiki-tldr p { margin: 0 0 10px; }
.wiki-tldr p:last-child { margin-bottom: 0; }

.wiki-why {
  background: var(--color-bg); border-left: 4px solid var(--color-secondary);
  border-radius: var(--radius-sm); padding: 14px 18px; margin: 0 0 20px;
}
.wiki-why p:last-child { margin-bottom: 0; }

.wiki-pitfall {
  background: var(--color-surface); border: 1px dashed var(--color-border);
  border-radius: var(--radius-md); padding: 14px 18px; margin: 22px 0;
}
.wiki-pitfall strong { color: var(--color-primary); }
.wiki-pitfall p:last-child { margin-bottom: 0; }

/* Mali müşavir uyarısı — rehber.html'deki satır-içi sarı kutunun TEK sınıfı.
   (Beş sayfada beş kopya satır-içi stil oluşmasın.) */
.wiki-uyari {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-left: 4px solid var(--color-warning-border);
  border-radius: var(--radius-md); padding: 14px 18px; margin: 22px 0;
}
.wiki-uyari p { margin: 0; font-size: .95rem; color: var(--color-text); }

/* --- Rozetler: hangi üründe / hangi planda -------------------------------- */
.wiki-rozetler { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.wiki-rozet {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600;
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-muted); text-decoration: none;
}
.wiki-rozet.masaustu { border-color: var(--color-secondary); color: var(--color-secondary); }
.wiki-rozet.web      { border-color: var(--color-primary);   color: var(--color-primary); }
.wiki-rozet.mobil    { border-color: var(--color-accent-dark); color: var(--color-accent-dark); }
.wiki-rozet.plan     { background: var(--color-bg); }
.wiki-rozet.sure     { border-style: dashed; }

/* --- Görsel --------------------------------------------------------------- */
figure.shot { margin: 18px 0 26px; }
figure.shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); background: var(--color-surface);
}
figure.shot figcaption {
  margin-top: 8px; font-size: .85rem; color: var(--color-text-muted); text-align: center;
}
/* Geniş masaüstü kareleri/şemaları dar ekranda yatay kaydır (gövde asla kaymaz) */
.wiki-genis { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wiki-genis > * { min-width: 640px; }

/* --- Tablolar ------------------------------------------------------------- */
.wiki-tablo-sar { overflow-x: auto; margin: 18px 0; }
table.wiki-tablo { border-collapse: collapse; width: 100%; font-size: .93rem; min-width: 520px; }
table.wiki-tablo th, table.wiki-tablo td {
  border: 1px solid var(--color-border); padding: 9px 12px; text-align: left; vertical-align: top;
}
table.wiki-tablo th { background: var(--color-bg); color: var(--color-primary); font-weight: 700; }

/* --- Önceki / sonraki + son güncelleme ------------------------------------ */
.wiki-prevnext {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin: 36px 0 12px; padding-top: 20px; border-top: 1px solid var(--color-border);
}
.wiki-prevnext a {
  color: var(--color-primary); text-decoration: none; font-weight: 600; font-size: .95rem;
}
.wiki-prevnext a:hover { color: var(--color-accent-dark); }
.wiki-guncelleme { color: var(--color-text-muted); font-size: .85rem; margin: 0 0 8px; }

/* --- Hub (rehber.html) dizini --------------------------------------------- */
.wiki-hub-grup { margin: 34px 0 0; }
.wiki-hub-grup > h2 { margin-bottom: 12px; }
.wiki-hub-kartlar { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .wiki-hub-kartlar { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .wiki-hub-kartlar { grid-template-columns: 1fr 1fr 1fr; } }
.wiki-hub-kart {
  display: block; padding: 16px 18px; text-decoration: none;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.wiki-hub-kart:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); }
.wiki-hub-kart h3 { margin: 0 0 6px; font-size: 1.02rem; color: var(--color-primary); }
.wiki-hub-kart p  { margin: 0; font-size: .9rem; color: var(--color-text-muted); }

/* --- Adım listesi (steps-grid'in dikey, numaralı hâli) -------------------- */
.wiki-adimlar { counter-reset: wikiadim; margin: 14px 0 8px; padding: 0; list-style: none; }
.wiki-adimlar > li {
  counter-increment: wikiadim; position: relative;
  padding: 0 0 18px 44px; margin: 0;
}
.wiki-adimlar > li::before {
  content: counter(wikiadim);
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary); color: #fff; font-weight: 700; font-size: .9rem;
}
.wiki-adimlar > li > strong { display: block; margin-bottom: 4px; color: var(--color-primary); }
.wiki-adimlar kbd {
  font: inherit; font-weight: 600; background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 1px 6px;
}

/* --- Şemalar (inline SVG) --------------------------------------------------
   GÖRSEL AMA EKRAN GÖRÜNTÜSÜ DEĞİL: şemalar metnin anlattığı akışı tek bakışta
   verir ve ekran görüntülerinin iki sorunundan kaçınır — gerçek fiş verisi
   sızdırmaz ve arayüz değişince bayatlamaz. SVG satır içi gömülür: ek istek yok,
   tema değişkenlerini (var(--color-*)) doğrudan kullanır, koyu/açık temada
   kendiliğinden doğru renklenir ve büyütünce bozulmaz.
   Dar ekranda taşmasın diye şema kendi kutusunda yatay kayar. */
.wiki-sema {
  margin: 20px 0 24px;
  padding: 0;
}
.wiki-sema .wiki-sema-kutu {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px;
}
.wiki-sema svg { display: block; width: 100%; min-width: 540px; height: auto; }
.wiki-sema figcaption {
  margin: 8px 2px 0; font-size: .87rem; color: var(--color-text-muted); line-height: 1.5;
}
/* Şema içi ortak metin biçimi — SVG'de font-family yazmayız, sayfadan miras alır. */
.wiki-sema text { font-family: inherit; }
.wiki-sema .s-baslik { font-size: 13px; font-weight: 700; }
.wiki-sema .s-metin  { font-size: 12px; }
.wiki-sema .s-kucuk  { font-size: 10.5px; }