/* Arac Kosesi — tasarim sistemi.
   Kardes site (hesaplamakosesi.com) beyaz, notr gri ve ortalanmis bir
   duzen kullaniyor. Burada bilincli olarak farkli bir dil secildi:
   sicak tas rengi zemin, kalici sol menu, serif basliklar, calisma
   tezgahi hissi veren genis birakma alani. Iki site birbirini
   animsatmamali. */

:root {
  --paper: #faf9f7;
  --card: #ffffff;
  --ink: #1c1917;
  --ink-soft: #57534e;
  /* #a8a29e idi: kagit zemin uzerinde 2.40:1 kaliyordu, WCAG AA metin icin
     4.5:1 gerekiyor. Ayni tas paletinin bir tonu, ~4.9:1 veriyor. */
  --ink-faint: #78716c;
  --line: #e7e5e4;
  --line-strong: #d6d3d1;
  --brand: #9a3412;
  --brand-soft: #fff7ed;
  --ok: #15803d;
  --bad: #b91c1c;
  --serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }

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

a { color: inherit; }

.masthead {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.masthead-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 26px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.brand {
  font-size: 16.5px;
  font-weight: 650;
  letter-spacing: -.01em;
  text-decoration: none;
}

.brand em { font-style: normal; color: var(--brand); }

/* Ust barda tek eylem "siteden ayril" olmasin diye once kendi araclarimiz. */
.mast-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 13px;
}

.mast-nav a { color: var(--ink-soft); text-decoration: none; }
.mast-nav a:hover { color: var(--brand); }

/* Dil secici: linkler nokta ayraciyla ayrilir, aktif dil vurgulu.
   CSS'siz halinde adlar bitisik cikiyordu (TurkceEnglishDeutsch). */
.mast-lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mast-lang > * + *::before {
  content: '\00B7';
  color: var(--ink-soft);
  margin-right: 8px;
  opacity: .5;
}
.mast-lang span[aria-current] { color: var(--ink); font-weight: 600; }

.masthead .sister {
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
}

.masthead .sister:hover { border-color: var(--brand); }

/* --- ust bar aramasi (YALNIZ dar ekran) ---

   Genis ekranda sol menu zaten gorunur ve kendi arama kutusu var; iki kutu
   ayni anda durursa kullanici hangisinin neyi suzdugunu bilemez. Dar
   ekranda ise menu tezgahin ALTINA dusuyor (.layout order kurali) ve
   arama sayfanin en sonunda kaliyordu — asil sorun buydu. Kutu masthead
   satirinin ALTINDA ayri bir sirada: mevcut ust bar duzenine hic
   dokunulmuyor. */
.mast-ara { display: none; }

@media (max-width: 900px) {
  .mast-ara {
    display: block;
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 26px 12px;
  }
  .mast-ara input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
  }
  .mast-ara input::placeholder { color: var(--ink-faint); }
  .mast-ara input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 2px var(--brand-soft);
  }
  /* Sonuc listesi sayfanin uzerine biner: yazarken icerik zipzip
     oynamasin. Golge degil ince kontur — bu sitenin dili kagit/tas. */
  .mast-ara-sonuc {
    position: absolute;
    z-index: 30;
    left: 26px;
    right: 26px;
    top: 100%;
    margin-top: -6px;
    max-height: 62vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: 8px;
  }
  .ust-ara-satir {
    display: block;
    padding: 10px 13px;
    text-decoration: none;
    border-bottom: 1px solid var(--line);
  }
  .ust-ara-satir b {
    display: block;
    font-family: var(--serif);
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.35;
  }
  .ust-ara-satir span {
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
  .ust-ara-satir.is-on, .ust-ara-satir:hover { background: var(--brand-soft); }
  .ust-ara-satir.is-on b { color: var(--brand); }
  .ust-ara-alt {
    margin: 0;
    padding: 8px 13px;
    font-size: 12.5px;
    color: var(--ink-faint);
  }
  .mast-ara-sonuc[hidden] { display: none; }
}

/* --- iki sutunlu tezgah --- */

.layout {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 26px 60px;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* Mobilde tek kolona duserken sira DEGISIYOR: menu tezgahin altina gecer.
   Olculen sorun, 390px ekranda 13 baglantilik menunun 553px yer kaplamasi
   ve aracin ancak 800px kaydirdiktan sonra gorunmesiydi. Yalnizca gorsel
   sira degisiyor; DOM sirasi ayni kaldigi icin ic baglanti degeri korunur. */
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .main { order: 1; }
  .sidebar { order: 2; }
}

/* Menu KENDI kaydirma alaninda: arac sayisi ekran yuksekligini asinca
   yalniz "sticky" yetmiyor — eleman ekrandan uzunsa sayfayla birlikte
   kayar ve alt gruba ulasmak icin tum sayfayi kaydirmak gerekir. Kendi
   max-height + overflow'u olunca menu tezgahtan bagimsiz gezilir.
   overscroll-behavior: menunun sonuna gelince kaydirmanin sayfaya
   atlamasini keser (kaydirma zinciri). */
.sidebar {
  padding-top: 34px;
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Kaydirma cubugu icin yer: baglanti metni cubugun altinda kalmasin. */
  padding-right: 10px;
  margin-right: -10px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

/* WebKit: ince ve sessiz cubuk (Firefox yukaridaki iki satiri kullanir). */
.sidebar::-webkit-scrollbar { width: 7px; }
.sidebar::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 4px;
}
.sidebar:hover::-webkit-scrollbar-thumb { background: var(--ink-faint); }

/* Mobilde menu tezgahin ALTINA gecer ve tam boy uzar; orada kendi
   kaydirma kutusu olmasi kutu icinde kutu demek olurdu. */
@media (max-width: 900px) {
  .sidebar {
    position: static;
    padding-top: 22px;
    margin-top: 34px;
    border-top: 1px solid var(--line);
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
    margin-right: 0;
  }
}

/* Menu arama kutusu: 80+ araclik listeyi yazdikca suzer (kit.js).
   JS yoksa kutu zararsiz durur; suzme olmadan liste zaten tam gorunur. */
.side-ara { margin: 0 0 18px; }
.side-ara input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 11px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}
.side-ara input::placeholder { color: var(--ink-faint); }
.side-ara input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-soft);
}
.side-yok { color: var(--ink-faint); font-size: 14px; margin: 0 0 16px; }

/* Rehber dizinindeki kart aramasi ayni kutu stilini kullanir; icerik
   kolonunda tam genislik asiri olur, o yuzden ust sinir var. */
.kart-ara { max-width: 430px; margin: 20px 0 22px; }

.side-group { margin-bottom: 22px; }

.side-group h2 {
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.side-group h2 a { text-decoration: none; }
.side-group h2 a:hover { color: var(--brand); }
.side-group h2 a[aria-current] { color: var(--ink); }

.side-group a {
  display: block;
  padding: 4px 0;
  font-size: 13.5px;
  color: var(--ink-soft);
  text-decoration: none;
}

.side-group a:hover { color: var(--brand); }
.side-group a[aria-current] { color: var(--ink); font-weight: 600; }

/* Suzgec baglantiyi "hidden" ile gizler; yukaridaki display:block tarayici
   varsayilanini EZER ve gizlenen baglanti ekranda kalirdi. Kural bilerek
   dar tutuldu (global [hidden] sifirlamasi degil). */
.side-group a[hidden] { display: none; }

/* Dokunma hedefi 30px idi; Apple 44, Google 48 oneriyor. Kural
   .side-group a'dan SONRA gelmeli, yoksa esit ozgullukte ezilir. */
@media (max-width: 900px) {
  .side-group a { padding: 9px 0; }
}

.main { padding-top: 34px; min-width: 0; }

/* Genis ekran duzeni (1440px ustu) DOSYANIN SONUNDA, tek blokta. Buraya
   yazilamaz: .baseboard-in, .read ve .main-ray asagida tanimli, esit
   ozgullukte sonraki tanim buradaki kurali sessizce ezerdi. */

/* --- sag ray (ilgili araclar + baglam-ici gecis) ---

   Okuma sutunu 66ch'te duruyor; bu bilincli bir olcu, uzun satir okunmaz.
   Sonucu, 1280px ekranda metnin sagindaki ~322px'lik olu alandi. Ray o
   alani kullaniyor — metin sutunu GENISLETILMEDI, yalniz bos yer doldu.

   Esik 1180px, goz karariyla degil hesapla: bu genislikte icerik sutunu
   856px olur, ray + bosluk 304px dusunce metne 552px kalir ve metin zaten
   66ch'te (534px) durdugu icin HIC DARALMAZ. Daha dusuk bir esikte (1100)
   metin 472px'e inip okuma olcusunu bozuyordu.

   Esigin altinda .main tekrar tek kolon olur ve ray, DOM'da metinden
   sonra geldigi icin tam olarak eskisi gibi sayfanin altina duser; ayri
   bir mobil duzeni yok. */
@media (min-width: 1180px) {
  /* .main-ray sinifini make.py YALNIZ rayi olan sayfaya koyar. Duz
     .main'i izgaraya cevirmek grup sayfasindaki kart izgarasini 856px
     yerine 552px'e sikistiriyordu. */
  .main-ray {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 264px;
    column-gap: 40px;
    align-items: start;
  }

  /* Tezgah ve baslik bloklari iki kolonu birden kaplar: ray tezgahin
     ALTINDAN baslar, yanindan degil. */
  .main-ray > .trail,
  .main-ray > h1,
  .main-ray > .sub,
  .main-ray > .bench,
  /* Geri bildirim seridi de iki kolonu kaplar: tek kolona alinsa ray
     bir satir asagi kayip tezgahin hizasindan kopardi. */
  .main-ray > .feedback { grid-column: 1 / -1; }

  .main-ray > .read { grid-column: 1; }

  .rail {
    grid-column: 2;
    margin-top: 46px;
  }

  /* Rayda kartlar tek sutuna diziliyor (.grid auto-fill zaten daralinca
     tek kolona duser); baslik metnin h2'siyle yarismasin diye kucuk. */
  .rail h2 {
    margin: 0 0 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }

  .rail .cell b { font-size: 14px; }
  .rail .callout { margin-top: 14px; }
}

/* Ray YALNIZ ekrana sigdiginda yapisiyor. 6 kartla ray ~830px; 768px
   yuksekligindeki bir ekranda tepeye kilitlenince son kart ve gecis linki
   katlamanin altinda kalip bir daha GORUNMUYORDU (olculdu). Sol menude
   ayni ders vardi: ekrandan uzun bir elemani yapistirmak alt kismini
   ulasilmaz yapar. Kisa ekranda ray sayfayla birlikte kayiyor, boylece
   tamami okunabiliyor. Kart sayisi artarsa bu esik de yukari cekilmeli. */
@media (min-width: 1180px) and (min-height: 900px) {
  .rail { position: sticky; top: 20px; }
}

/* --- basliklar --- */

h1 {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 10px;
  font-weight: 650;
}

.sub {
  margin: 0 0 26px;
  max-width: 60ch;
  color: var(--ink-soft);
  font-size: 16px;
}

.trail {
  font-size: 12.5px;
  color: var(--ink-faint);
  margin-bottom: 12px;
}

.trail a { text-decoration: none; }
.trail a:hover { color: var(--brand); }

/* --- birakma alani --- */

.bench {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 22px;
}

.drop {
  border: 1.5px dashed var(--line-strong);
  border-radius: 3px;
  padding: 38px 20px;
  text-align: center;
  cursor: pointer;
  background: var(--paper);
  transition: border-color .12s, background .12s;
}

.drop:hover, .drop.over {
  border-color: var(--brand);
  background: var(--brand-soft);
}

/* Klavyeyle gezerken alanin secili oldugu gorunmeliydi. */
.drop:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.drop strong { display: block; font-size: 16px; margin-bottom: 4px; }
.drop span { color: var(--ink-soft); font-size: 13.5px; }

/* display:none input'u erisilebilirlik agacindan da siliyordu; gorsel
   olarak gizlenip yardimci teknolojilere birakiliyor. */
.file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  clip-path: inset(50%);
  overflow: hidden;
}

/* --- secenekler --- */

.opts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.opt label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 5px;
}

.opt input[type="text"],
.opt input[type="number"],
.opt select {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
}

.opt input:focus, .opt select:focus {
  outline: 2px solid var(--brand);
  outline-offset: -1px;
}

.opt .range-row { display: flex; align-items: center; gap: 10px; }
.opt input[type="range"] { flex: 1; accent-color: var(--brand); }
.opt .range-val { font-family: var(--mono); font-size: 13px; min-width: 44px; text-align: right; }

/* --- islem satiri --- */

.actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.go {
  height: 38px;
  padding: 0 20px;
  border: 0;
  border-radius: 3px;
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.go:hover { background: var(--brand); }
/* Pasif dugmede #a8a29e/#d6d3d1 = 1.69:1 idi, yazi okunmuyordu. */
.go:disabled { background: var(--line-strong); color: var(--ink-soft); cursor: not-allowed; }

.ghost {
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}

.ghost:hover { border-color: var(--ink); color: var(--ink); }
.ghost:disabled { color: var(--ink-faint); cursor: not-allowed; }
.ghost:disabled:hover { border-color: var(--line-strong); color: var(--ink-faint); }

.status { font-size: 13px; color: var(--ink-soft); }
.status.err { color: var(--bad); }
.status.ok { color: var(--ok); }
.status.uyari { color: var(--brand); }

/* --- dosya listesi ve cikti --- */

.files { margin-top: 18px; }

/* Cikti ayri blokta: donusumden sonra girdi listesi yerinde kaliyor,
   boylece ayar degistirip tekrar denemek mumkun. */
.results { margin-top: 22px; }
.results:empty { display: none; }

.results-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 2px;
}

.file-list { list-style: none; margin: 0; padding: 0; }

.file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
}

.file:first-child { border-top: 0; }
.file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-size { margin-left: auto; color: var(--ink-faint); font-family: var(--mono); font-size: 12px; white-space: nowrap; }
/* Not alani hash gibi kesintisiz uzun degerler tasiyabilir; kirilmazsa
   dar ekranda satiri tasirirdi. anywhere yalniz sigmayinca kirar. */
.file-note { color: var(--ink-soft); font-size: 12px; overflow-wrap: anywhere; }

/* --- canli renk kutulari (metin araclarinda renkler alani) --- */
.swatches { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 12px; }
.swatch-box { display: inline-flex; align-items: center; gap: 7px; }
.swatch {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  display: inline-block;
}
.swatch-l { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }

.file .dl {
  padding: 5px 12px;
  border: 1px solid var(--brand);
  border-radius: 3px;
  color: var(--brand);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.file .dl:hover { background: var(--brand); color: #fff; }

/* Dokunma hedefi ~19x21px idi; en az 40px olacak sekilde buyutuldu. */
.file .rm {
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  min-width: 40px;
  min-height: 40px;
  border-radius: 3px;
  flex: none;
}

.file .rm:hover { color: var(--bad); background: var(--paper); }
.file .rm:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.thumb {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--line);
  flex: none;
}

/* Acilamayan dosyada kirik gorsel ikonu yerine sade bir yer tutucu. */
.thumb-yok { background: var(--paper); }

/* --- metin giris/cikis (veri araclari) --- */

.pane {
  width: 100%;
  min-height: 150px;
  padding: 11px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--card);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
  resize: vertical;
}

.pane:focus { outline: 2px solid var(--brand); outline-offset: -1px; }

.pane-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 4px;
}

/* Iki girdili araclarda cikti paneli girdilerin altina tam genislikte iner. */
.pane-single { margin-top: 14px; }

.pane-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}

/* --- gizlilik notu --- */

.privacy {
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--ink-soft);
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.privacy b { color: var(--ink); font-weight: 600; }

/* --- geri bildirim (puan + ozel not) --- */

/* Tezgahin altinda yatay bir serit: kart degil, ince cizgili bir bant.
   Dikey panel yapmak sag raydaki kart diliyle yarisirdi. */
.feedback {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  min-height: 62px;
}

.fb-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.fb-title {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
}

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

.fb-star {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--line-strong);
  cursor: pointer;
}

.fb-star:hover { color: var(--brand); }
.fb-star.is-on { color: var(--brand); }
.fb-star:disabled { cursor: default; }
.fb-star:disabled:hover { color: var(--line-strong); }
.fb-star:disabled.is-on, .fb-star:disabled.is-on:hover { color: var(--brand); }
.fb-star:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* Gorunur ortalama: aggregateRating JSON-LD ile ayni esikte basilir
   (Google kurali: marklanan puan sayfada gorunur olmali). */
.fb-ozet { font-size: 13px; color: var(--ink-faint); }
.fb-ozet b { color: var(--ink-soft); font-weight: 600; }

.fb-comment { margin-top: 14px; max-width: 52ch; }

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

.fb-comment textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  resize: vertical;
}

.fb-comment textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: -1px; }
.fb-comment .ghost { margin-top: 8px; }

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

.fb-thanks { margin: 10px 0 0; font-size: 13px; color: var(--ink-faint); }

/* --- anlatim --- */

.read { margin-top: 46px; max-width: 66ch; }

.read h2 {
  font-size: 18px;
  font-weight: 650;
  margin: 32px 0 10px;
  letter-spacing: -.01em;
}

.read h3 { font-size: 15px; margin: 20px 0 5px; font-weight: 650; }
.read p { margin: 0 0 13px; }
.read .alias { color: var(--ink-soft); font-size: 13.5px; }
.read .alias em { font-style: normal; font-family: var(--mono); font-size: 12.5px; }
.read .stamp { margin-top: 26px; color: var(--ink-soft); font-size: 12.5px; }
.read ul { margin: 0 0 13px; padding-left: 20px; }
.read li { margin-bottom: 5px; }

.read code {
  font-family: var(--mono);
  font-size: 12.5px;
  background: #f5f5f4;
  padding: 1px 5px;
  border-radius: 3px;
}

.callout {
  margin: 20px 0;
  padding: 13px 15px;
  border-left: 2px solid var(--brand);
  background: var(--brand-soft);
  font-size: 13.5px;
}

/* --- ana sayfa listesi --- */

.hero { padding: 8px 0 30px; }

/* Kenarliklar hucrelerin kendisinde: eski "1px gri bosluk" hilesi, satir
   dolmayinca kalan alani kocaman gri levha olarak birakiyordu. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

.cell {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 15px 16px;
  text-decoration: none;
  display: block;
}

/* Ayni sebep .side-group a[hidden]'da yazili: display:block olmadan
   suzulen kart gizlenmis sayilmaz. */
.cell[hidden] { display: none; }

.cell:hover { background: var(--brand-soft); }
.cell b { display: block; font-size: 14.5px; font-weight: 620; margin-bottom: 3px; }
.cell span { font-size: 12.5px; color: var(--ink-soft); }

.section-title {
  font-size: 17px;
  font-weight: 650;
  margin: 34px 0 12px;
}

.section-title:first-of-type { margin-top: 8px; }
.section-title a { text-decoration: none; }
.section-title a:hover { color: var(--brand); }

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

.baseboard {
  border-top: 1px solid var(--line);
  margin-top: 60px;
}

.baseboard-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 26px 44px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: baseline;
  font-size: 13px;
  color: var(--ink-soft);
}

.baseboard a { text-decoration: none; }
.baseboard a:hover { color: var(--brand); }
.baseboard .rev { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); }

@media (max-width: 620px) {
  h1 { font-size: 27px; }
  .masthead-in, .layout, .baseboard-in { padding-left: 18px; padding-right: 18px; }
  .baseboard .rev { margin-left: 0; width: 100%; }
}

/* --- metin araclarinda gorsel cikti onizlemesi (or. QR kod) --- */
.onizleme { margin-top: 14px; }
.onizleme img {
  display: block;
  width: min(260px, 100%);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #fff;
}

/* Kutu icindeki nasil-yapilir satiri: eylemin kendisi (dokun/tikla)
   basligin hemen altinda, bicim notundan once gelir. */
.drop .drop-how {
  display: block;
  color: var(--ink-soft);
  font-size: 13.5px;
  margin: 4px 0 6px;
}
.drop span:not(.drop-how) { font-size: 12.5px; color: var(--ink-faint); }

/* --- rehber yazilari ---

   Rehber sayfasi arac sayfasinin .read olcusunu paylasir (66ch). Buraya
   yalniz rehbere ozgu parcalar yazilir: sema gorseli ve veri tablosu.
   Tablo kendi kabugunda yatay kayar; sayfa govdesi asla yana tasmasin
   (mobil-once, teknofobik kitle). */

.read figure.sema {
  margin: 22px 0;
}

.read figure.sema img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
}

.read figure.sema figcaption {
  margin-top: 7px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

.read .tablo-kabuk {
  margin: 0 0 13px;
  overflow-x: auto;
}

.read table {
  border-collapse: collapse;
  font-size: 13.5px;
  min-width: 100%;
}

.read th,
.read td {
  border: 1px solid var(--line);
  padding: 7px 10px;
  text-align: left;
  vertical-align: top;
}

.read th {
  background: var(--card);
  font-weight: 650;
  white-space: nowrap;
}

/* --- genis ekran duzeni ---

   Kabuk 1180px'de sabitti; 1900px ekranda sayfa ekranin ancak %62'sini
   kullaniyor, kenarlarda 721px bos kaliyordu — bosluk tezgahin kendisinden
   (856px) genisti ve sayfa ortaya sikismis goruluyordu.

   Bu blok DOSYANIN SONUNDA durmali: .baseboard-in, .read ve .main-ray
   yukarida tanimli ve esit ozgullukte; blok yukari tasinirsa o tanimlar
   buradaki kurallari sessizce ezer (alt bilgi 1180'de kalmisti, boyle
   yakalandi). Tasima.

   Esik 1500: 1440'ta denendi, kenar boslugu 33px'e dusuyordu — 1440 yaygin
   bir dizustu olcusu ve orada sayfa kenara yapisik goruluyor. 1500'de
   bosluk 70px, rahat. */
@media (min-width: 1500px) {
  /* Ust bar, icerik ve alt bilgi AYNI olcuyu kullanmali; biri geride
     kalirsa hizasizlik gorunur. 1900px'te kenar boslugu 360 -> 270,
     tezgah 856 -> 1036. */
  .masthead-in, .layout, .baseboard-in { max-width: 1360px; }

  /* Kabuk genisleyince metinle ray arasindaki bosluk buyuyordu; metin
     sutunu bir tik aciliyor. 70ch hala saglikli olcu, daha fazlasi satiri
     okunmaz yapardi. */
  .read { max-width: 70ch; }

  /* Ray da genisleyen kabukla orantili: kart basliklari iki satira
     dusmesin. */
  .main-ray { grid-template-columns: minmax(0, 1fr) 300px; }
}