/* Hesaplama Kosesi — tasarim sistemi.
   Notr gri olcek, 1px kenarlik, golge yok, kucuk yaricap.
   Renk vurgusu bilincli olarak minimum: sayfadaki tek "olay" sonuc sayisi. */

:root {
  --bg: #ffffff;
  --fg: #09090b;
  --muted: #fafafa;
  --muted-2: #f4f4f5;
  --muted-fg: #71717a;
  --border: #e4e4e7;
  --border-strong: #d4d4d8;
  /* Girdi kenarligi ayri degisken: dekoratif kenarliklar esige tabi degil,
     ama form alaninin siniri WCAG 1.4.11'e gore beyaz uzerinde en az 3:1
     olmali. #8a8a93 = 3.42:1. Kart/panel kenarliklari acik kaliyor. */
  --border-input: #8a8a93;
  /* Odak halkasi da 1.4.11 kapsaminda: eski #a1a1aa 2.56:1 ile esigin
     altindaydi. #71717a paletteki --muted-fg ile ayni, 4.83:1. */
  --ring: #71717a;
  --accent: #1d4ed8;
  --accent-soft: #eff6ff;
  --danger: #b91c1c;
  --radius: 8px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* Atlama baglantisi: klavye/ekran okuyucu kullanicisi her sayfada ust bari
   gecmek zorunda kalmasin. Odaklanmadan gorunmez, odaklaninca belirir. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
}

.skip:focus {
  left: 8px;
  top: 8px;
  padding: 9px 14px;
  background: var(--bg);
  border: 1px solid var(--fg);
  border-radius: var(--radius);
  font-size: 13.5px;
  text-decoration: none;
}

.shell {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Politika/bilgi sayfasi tek sutun okur: raf yok (K11), satir uzunlugu
   okunabilir bandda kalir. */
.shell.narrow { max-width: 760px; }

/* --- ust bar --- */

.topbar {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar-in {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 56px;
}

.wordmark {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
}

.wordmark span { color: var(--muted-fg); font-weight: 450; }

.topnav {
  display: flex;
  gap: 20px;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}

.topnav::-webkit-scrollbar { display: none; }

.topnav a {
  color: var(--muted-fg);
  text-decoration: none;
  font-size: 13.5px;
  white-space: nowrap;
  padding: 4px 0;
}

.topnav a:hover { color: var(--fg); }
.topnav a:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 3px; }

.topnav .nav-all { color: var(--fg); font-weight: 520; }

/* Dar ekranda kategori linkleri yatay tasiyordu ve kaydirma cubugu gizli
   oldugu icin tastigi belli olmuyordu: kullanici 5 kategoriden 2'sini
   goruyordu. Mobilde kategoriler kalkiyor, yerine her sayfada calisan
   "Tum araclar" girisi kaliyor. */
@media (max-width: 800px) {
  .topnav .nav-cat { display: none; }
}

/* --- sol sutun (arama + acik kategori) ---
   3 Eyl 2026'ya kadar burada 155 aracin tamami duruyordu; AdSense denetimi
   sayfanin kendi anlatimini azinlikta biraktigi icin raf kirpildi (K11):
   arama kutusu + acik kategorinin en cok 12 araci + iki cikis. Bu haliyle
   raf mobilde de GIZLENMEZ, sayfanin EN ALTINA duser (asagidaki 1099px
   bloguna bak): kisa oldugu icin araci asagi itmiyor. */

.shell.has-rail { max-width: 1320px; }

.rail-grid {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.rail {
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 26px 20px 28px 0;
  border-right: 1px solid var(--border);
}

.rail-title {
  margin: 0 0 18px;
  font-size: 13.5px;
  font-weight: 600;
}

.rail-title a { text-decoration: none; color: var(--fg); }
.rail-title a:hover { text-decoration: underline; }

.rail-cat { margin-bottom: 18px; }

.rail-head {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted-fg);
}

.rail-cat a {
  display: block;
  padding: 4px 0 4px 10px;
  border-left: 2px solid transparent;
  font-size: 13.5px;
  color: var(--muted-fg);
  text-decoration: none;
}

.rail-cat a:hover { color: var(--fg); }

.rail-cat a[aria-current] {
  border-left-color: var(--fg);
  color: var(--fg);
  font-weight: 600;
}

/* Kategori basligi da link (hub sayfasi). Bu kural .rail-cat a'dan SONRA
   gelmeli: ayni ozgulluk, sonraki kazanir — baslik arac linklerinin blok
   bicimini almasin, gorunum aynen kalsin. */
.rail-head a {
  display: inline;
  padding: 0;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-decoration: none;
}

.rail-head a:hover { color: var(--fg); text-decoration: underline; }

/* Raf ici arama: kutu ayni tasarim dilinde, altinda tek satir kullanim
   ipucu. Yazdikca bu kategorinin araclari suzulur, Enter tum araclarda
   arar (assets/app.js -> initRailFinder). */
.finder-rail { padding: 0 0 8px; margin: 0; }

.rail-hint {
  margin: 0 0 18px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted-fg);
}

.rail-empty { margin: 0 0 12px; font-size: 12.5px; }

.rail-more { margin: 0 0 14px; font-size: 13px; }
.rail-more a { color: var(--muted-fg); }
.rail-more a:hover { color: var(--fg); }

/* Rafin dibindeki tam liste cikisi: ust bardaki "Tüm araçlar" ile ayni
   hedef, kaydirmadan ikinci bir kapi. */
.rail .rail-title { margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--border); }

/* Mobil (patron karari, 3 Eyl 2026): raf artik gizlenmiyor, sayfanin EN
   ALTINA gidiyor. Sira: form -> sonuc -> anlatim -> geri bildirim -> raf.
   Onceden display:none idi (155 baglantilik sutun telefonda araci ekrandan
   itiyordu); kirpilmis raf 12 satir + arama kutusu, sayfa sonunda dogal bir
   "baska ne var" bloguna donusuyor. */
@media (max-width: 1099px) {
  .rail-grid { display: flex; flex-direction: column; }
  .rail-main { order: 1; }
  .rail {
    order: 2;
    position: static;
    max-height: none;
    overflow: visible;
    padding: 22px 0 8px;
    border-right: 0;
    border-top: 1px solid var(--border);
  }
  /* K16 — parmakla dokunulan liste: 44 px'lik satir yuksekligi. */
  .rail-cat a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 0 4px 10px;
  }
}

/* --- basliklar --- */

.page-head {
  padding: 44px 0 28px;
  border-bottom: 1px solid var(--border);
}

h1 {
  margin: 0 0 8px;
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -.025em;
  font-weight: 640;
}

.lede {
  margin: 0;
  max-width: 62ch;
  color: var(--muted-fg);
}

.crumbs {
  display: flex;
  gap: 7px;
  align-items: center;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--muted-fg);
}

.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--fg); text-decoration: underline; }

/* Rehber kunyesi: h1 altinda tek satir, kutu/kenarlik yok.
   Basligin altindaki ilk goz duragini calmasin diye lede'den bir tik kucuk. */
.byline {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted-fg);
}

.byline span { color: var(--fg); }

/* --- arama --- */

.finder { padding: 24px 0 0; }

/* K16 — dokunma hedefi en az 44px. Parmakla kullanilan her kutu, dugme ve
   baglanti bu boyu tutar; hedef kitle teknofobik ve cogunlukla telefonda,
   1-2 mm kaciran her dokunus "bu site calismiyor" demek. Tasarim dili
   degismedi: kenarlik, notr gri ve keskin kose ayni, yalniz yukseklik ve
   dolgu buyudu (EKRAN-ILKELERI.md, 44 px maddesi). */
.finder input {
  width: 100%;
  height: 44px;
  padding: 0 13px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
}

.finder input::placeholder { color: var(--muted-fg); }

.finder input:focus {
  outline: 2px solid var(--ring);
  outline-offset: -1px;
}

/* --- arac listesi --- */

.cat { padding: 34px 0 0; }

.cat-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 10px;
}

.cat-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.cat-head .cat-desc {
  font-size: 13px;
  color: var(--muted-fg);
}

.rows {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 16px;
  text-decoration: none;
  border-top: 1px solid var(--border);
}

/* Arama eslesmeyen satiri gizler, ama .row'un display:flex'i tarayicinin
   [hidden] kuralini eziyordu: kutu "gizlendigi" halde ekranda duruyordu ve
   arama calismiyor gorunuyordu. Kural kapsamli tutulur (global [hidden]
   sifirlamasi YOK) — sayfanin baska yerlerinde [hidden] zaten calisiyor. */
.row[hidden] { display: none; }

/* Butun satirlari gizlenen bolum basligiyla birlikte kaybolur; ikisi de
   display atamadigi icin bu kurallar bugun gereksiz ama bir gun .cat ya da
   .related flex/grid olursa arama sessizce bozulmasin. */
.cat[hidden] { display: none; }
.related[hidden] { display: none; }

.rows .row:first-child { border-top: 0; }

/* Suzme sonrasi kutunun ILK GORUNEN satiri: :first-child gizlenmis satiri de
   saydigi icin ust cizgi cift gorunuyordu; isareti app.js koyar. */
.rows .row-ilk { border-top: 0; }
.row:hover { background: var(--muted); }

/* Fareye verilen geri bildirim klavyeye de verilmeli (WCAG 2.4.7). */
.row:focus-visible {
  background: var(--muted);
  outline: 2px solid var(--ring);
  outline-offset: -2px;
}

/* Tam listede bulundugun arac isaretli. */
.row[aria-current="page"] { background: var(--muted-2); }
.row[aria-current="page"] .row-name { font-weight: 620; }
.row[aria-current="page"] .row-go { visibility: hidden; }

.row-name { font-weight: 530; white-space: nowrap; }

.row-desc {
  color: var(--muted-fg);
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-go {
  margin-left: auto;
  color: var(--muted-fg);
  font-size: 15px;
  line-height: 1;
}

.empty {
  padding: 30px 16px;
  text-align: center;
  color: var(--muted-fg);
  font-size: 14px;
}

/* --- arac sayfasi duzeni --- */

.tool-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28px;
  align-items: start;
  padding: 28px 0 0;
}

/* Anlatim metni de sol sutunun icinde: boylece sag sutun boyunca yapiskan
   kalabilecek bir yukseklik olusuyor ve kullanici "nasil hesaplanir"i
   okurken sonuc ekranda kaliyor. */
.tool-side { position: sticky; top: 76px; }

@media (max-width: 860px) {
  .tool-grid { grid-template-columns: minmax(0, 1fr); }
  /* Mobil sira (patron karari, 9 Agu 2026): once GIRDILER, hemen altinda
     SONUC, sonra anlatim, en altta geri bildirim. Kullanici sayfayi
     yaptigi is icin aciyor: once dolduracagi kutulari gormeli, sonucu da
     doldurdugu formun hemen altinda bulmali; "nasil hesaplanir/SSS"
     metni okumak isteyeni bekler, isini yapani onunden cekilir.
     HTML sirasi degismiyor: display:contents ile iki sutun kutusu da
     cozulur, cocuklari dogrudan grid ogesi olur ve tek tek siralanir. */
  .tool-main, .tool-side { display: contents; }
  .tool-main > form { order: 1; }
  .tool-side > .result, .tool-side > .guide-hint, .tool-side > .trust { order: 2; }
  /* Ust bosluk artik grid gap'ten geliyor; padding kalirsa iki kat olur. */
  .tool-main > .prose { order: 3; padding-top: 0; }
  .tool-side > .hk-feedback { order: 4; }
}

.panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

.panel + .panel { margin-top: 16px; }

.panel-title {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted-fg);
}

/* --- arac gorseli (ornegin direnc cizimi) --- */

.tool-fig {
  margin-bottom: 18px;
  padding: 14px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--muted);
  text-align: center;
}

.tool-fig svg {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

/* --- form alanlari --- */

.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }

.field > label {
  display: block;
  margin-bottom: 6px;
  font-size: 13.5px;
  font-weight: 520;
}

.hint {
  margin: 5px 0 0;
  font-size: 12.5px;
  color: var(--muted-fg);
}

.control {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border-input);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
}

.control:focus-within {
  outline: 2px solid var(--ring);
  outline-offset: -1px;
}

.control input,
.control select {
  flex: 1;
  min-width: 0;
  height: 44px;            /* K16: dokunma hedefi (38px idi) */
  min-height: 44px;
  padding: 0 11px;
  border: 0;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.control textarea {
  flex: 1;
  min-width: 0;
  min-height: 44px;        /* K16 */
  padding: 9px 11px;
  border: 0;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-variant-numeric: tabular-nums;
  resize: vertical;
}

.control input:focus,
.control select:focus,
.control textarea:focus { outline: 0; }

.control select {
  appearance: none;
  cursor: pointer;
  padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted-fg) 50%),
                    linear-gradient(135deg, var(--muted-fg) 50%, transparent 50%);
  /* Ok konumu kutu yuksekligine bagli: 44px kutuda dikey merkez 20px. */
  background-position: calc(100% - 16px) 20px, calc(100% - 11px) 20px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.affix[hidden] {
  display: none;
}

/* Tarih ucLusu: Gun / Ay / Yil — herkesin bildigi desen */
.date-trio {
  display: flex;
  gap: 8px;
}

.date-trio select {
  flex: 1 1 0;
  min-width: 0;
}

.date-trio select[data-part="ay"] {
  flex: 1.5 1 0;
}

/* Sonucun altindaki duz Turkce "yani" cumlesi */
.result-plain {
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--fg);
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg);
}

.result-plain[hidden] {
  display: none;
}

.affix {
  display: flex;
  align-items: center;
  padding: 0 11px;
  background: var(--muted-2);
  border-left: 1px solid var(--border);
  color: var(--muted-fg);
  font-size: 13.5px;
  white-space: nowrap;
}

/* --- segment (radio) --- */

.segment {
  display: flex;
  /* Uzun secenek etiketleri dar ekranda tasmasin: sigmayan alt satira iner */
  flex-wrap: wrap;
  padding: 3px;
  gap: 3px;
  background: var(--muted-2);
  border-radius: var(--radius);
}

.segment label {
  flex: 1;
  position: relative;
  /* K16: secenek de bir dugmedir — 3px'lik kap dolgusuyla birlikte 44px. */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  text-align: center;
  padding: 7px 8px;
  border-radius: 6px;
  font-size: 13.5px;
  cursor: pointer;
  color: var(--muted-fg);
  /* nowrap idi: 375px ekranda uzun etiket sayfayi 488px yana kaydiriyordu
     (kolay kullanim denetimi, bulgu #2). Etiket gerekirse satir kirar. */
  min-width: 0;
  overflow-wrap: anywhere;
}

.segment input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segment label:has(input:checked) {
  background: var(--bg);
  color: var(--fg);
  font-weight: 520;
  box-shadow: 0 0 0 1px var(--border);
}

.segment label:has(input:focus-visible) {
  outline: 2px solid var(--ring);
  outline-offset: 1px;
}

/* --- sonuc --- */

.result-primary {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.result-label {
  font-size: 13px;
  color: var(--muted-fg);
  margin-bottom: 4px;
}

.result-value {
  font-size: 30px;
  font-weight: 620;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.result-value.is-empty { color: var(--muted-fg); font-weight: 500; }

.breakdown { margin-top: 14px; }

.breakdown dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px 12px;
  font-size: 13.5px;
}

.breakdown dt { color: var(--muted-fg); }

.breakdown dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.breakdown dt.strong,
.breakdown dd.strong { font-weight: 600; color: var(--fg); }

.tool-error {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left: 2px solid var(--danger);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--muted);
  color: var(--danger);
  font-size: 13px;
}

.result-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

/* "Sonucu kopyala" / "Baglantiyi kopyala" dahil butun dugmeler (K16: 34px idi,
   parmakla en cok iskalanan hedef buydu). */
.btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}

.btn:hover { background: var(--muted-2); }
.btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.btn[data-done] { color: var(--accent); border-color: var(--accent); }

.micro {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted-fg);
}

/* Guven seridi: kaynak + dogrulama tarihi sonucun hemen altinda.
   Sayfanin dibindeki "Kaynaklar" bolumune cipa verir. */
.trust {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted-fg);
}

.trust a { text-decoration: none; border-bottom: 1px solid var(--border-strong); }
.trust a:hover { color: var(--fg); }

/* --- puan + ozel yorum widget'i (sag kolonda guven seridinin altinda) --- */

/* min-height yalniz acilista gorunen durumu (baslik + yildizlar, olculen
   111.6px) rezerve eder — olu bosluk yasagi geregi fazlasi tutulmaz.
   "Daha once puanlanmis" durumunun tesekkur satiri ve yorum formunun
   acilmasi defer'li JS ile ilk boyamadan once / kullanici tikiyla olur,
   gorunur kayma yaratmaz (form_min_height ile ayni mantik, ilke 9b). */
.hk-feedback { margin-top: 16px; min-height: 116px; }   /* K16: yildiz 40 -> 44px */

.fb-title {
  margin: 0 0 8px;
  font-size: 13.5px;
  font-weight: 600;
}

/* Gorunur ortalama: aggregateRating JSON-LD ile ayni esikte build basar
   (Google kurali: marklanan puan sayfada gorunur olmali). */
.fb-ozet {
  margin: -4px 0 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted-fg);
}

.fb-stars { display: flex; gap: 2px; }

.fb-star {
  width: 44px;             /* K16: dokunma hedefi (40px idi) */
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--border-strong);
  cursor: pointer;
}

.fb-star:hover { color: var(--muted-fg); }
.fb-star.is-on { color: var(--fg); }
.fb-star:disabled { cursor: default; }
.fb-star:disabled:hover { color: var(--border-strong); }
.fb-star:disabled.is-on, .fb-star:disabled.is-on:hover { color: var(--fg); }
.fb-star:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; border-radius: 4px; }

.fb-comment { margin-top: 10px; }

.fb-comment label {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted-fg);
}

.fb-comment textarea {
  flex: 1;
  min-width: 0;
  padding: 9px 11px;
  border: 0;
  background: none;
  font: inherit;
  resize: vertical;
}

.fb-comment textarea:focus { outline: 0; }

.fb-comment .btn { width: 100%; margin-top: 8px; }

/* Honeypot: gercek kullanici gormez, bot doldurur. */
.fb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.fb-thanks {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted-fg);
}

/* --- aciklama bolumleri --- */

.prose { padding: 36px 0 0; max-width: 68ch; }

.prose h2 {
  margin: 30px 0 10px;
  font-size: 17px;
  font-weight: 620;
  letter-spacing: -.01em;
}

.prose h3 {
  margin: 22px 0 6px;
  font-size: 14.5px;
  font-weight: 600;
}

.prose p { margin: 0 0 12px; }
.prose ul { margin: 0 0 12px; padding-left: 20px; }
.prose li { margin-bottom: 5px; }

.prose code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--muted-2);
  padding: 1px 5px;
  border-radius: 4px;
}

/* Tablo: dar ekranda yatay tasma SAYFAYI degil bu sarmalayiciyi kaydirir. */
.table-wrap {
  margin: 0 0 12px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.table-wrap th,
.table-wrap td {
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  white-space: normal;
}

.table-wrap th {
  font-weight: 600;
  border-bottom: 1px solid var(--border-strong);
}

.table-wrap tbody tr:last-child th,
.table-wrap tbody tr:last-child td { border-bottom: 0; }

.table-note,
.prose .table-note {
  margin: -6px 0 12px;
  font-size: 13px;
  color: var(--muted-fg);
}

.formula {
  margin: 0 0 12px;
  padding: 12px 14px;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 13px;
  overflow-x: auto;
}

.note {
  margin-top: 22px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 2px solid var(--border-strong);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--muted);
  color: var(--muted-fg);
  font-size: 13px;
}

/* --- ilgili araclar --- */

.related { padding: 36px 0 0; }

.related h2 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--muted-fg);
}

/* Arac sayfasindaki tam liste ana sayfayla ayni bileseni kullaniyor;
   burada blok araliklari biraz daha sik. */
.related .finder { padding: 0; }
.related .cat { padding-top: 24px; }

/* --- rehber listesi --- */

/* Rehber satiri arac satiriyla ayni kutuyu kullanir; tek fark aciklamanin
   kirpilmayip alt satira sarmasi (rehber aciklamasi bir cumledir, arac
   ozeti gibi iki kelime degil). */
.row-guide {
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
}

/* --- rehber okuma sayfasi ---
   Rehber, form/sol sutun olmadan bastan sona okunan tek bir metindir; arac
   sayfasinin 1080px kabugu burada ise yaramiyordu: 68ch'lik sutun kabugun
   soluna yapisip sagda genis bir bosluk birakiyor, metin de 15px/1.6 ile
   yogun gorunuyordu. Okuma sayfasinda kabuk metin genisligine iner (sutun
   gercekten ortalanir), punto ve satir araligi okuma icin buyur, basliklar
   govdeden acikca ayrilir. Kural YALNIZ .shell-read altinda gecerli:
   arac ve hub sayfalarindaki .prose'a dokunmaz. */

.shell-read { max-width: 768px; }

.shell-read .page-head { padding: 48px 0 26px; }
.shell-read h1 { font-size: 33px; }

.shell-read .prose {
  padding-top: 30px;
  max-width: none;
  font-size: 16.5px;
  line-height: 1.75;
}

.shell-read .prose p { margin: 0 0 18px; }
.shell-read .prose ul { margin: 0 0 18px; }
.shell-read .prose li { margin-bottom: 8px; }

.shell-read .prose h2 {
  margin: 42px 0 14px;
  font-size: 21px;
  line-height: 1.35;
}

.shell-read .prose h3 {
  margin: 28px 0 8px;
  font-size: 16.5px;
}

/* Tablo/formul/dipnot okuma puntosuyla birlikte buyumez: metin akisinin
   yaninda ikincil kalmalari bilincli. */
.shell-read .prose .table-note,
.shell-read .prose .note { font-size: 14px; line-height: 1.6; }

@media (max-width: 620px) {
  .shell-read .prose { font-size: 16px; line-height: 1.7; }
  .shell-read h1 { font-size: 27px; }
  .shell-read .prose h2 { margin: 34px 0 12px; font-size: 19px; }
}

/* Rehber bolum semasi: kendi cizimimiz SVG, kenarlikli kutuda durur. */
.guide-fig {
  margin: 14px 0;
  padding: 14px;
  border: 1px solid var(--border);
  background: #fff;
}

.guide-fig img { display: block; width: 100%; height: auto; }

.guide-fig figcaption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted-fg);
}

/* Sonuc panelinin altindaki tek satirlik rehber yonlendirmesi. */
.guide-hint {
  margin: 10px 2px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted-fg);
}

.row-guide .row-name { white-space: normal; }

.row-guide .row-desc {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* --- alt bilgi --- */

.foot {
  margin-top: 56px;
  border-top: 1px solid var(--border);
  padding: 22px 0 40px;
  color: var(--muted-fg);
  font-size: 13px;
}

.foot-in {
  display: flex;
  flex-wrap: wrap;
  /* Satir arasi bosluk 8 -> 0: dokunma yuksekligi artik baglantinin
     kendisinde (44px), ustune bir de bosluk koymak alt bilgiyi sisiriyordu. */
  gap: 0 16px;
  align-items: center;
}

/* K16: alt bilgi baglantilari da parmakla vurulacak kadar buyuk. Gorunum
   degismedi (alti cizgisiz, ayni renk/boy) — yalnizca satirin tikanabilir
   alani 44px'e cikti. */
.foot a,
.foot-in > span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; }

@media (max-width: 620px) {
  .shell { padding: 0 18px; }
  h1 { font-size: 25px; }
}