/* SanaterServis arayüzü — belgeler, /hesap, /yonetim ortak stil. Sürüm: Cekirdek::SURUM ile önbellek kırılır. */
:root {
  --zemin: #f3f5f7; --panel: #ffffff; --panel-2: #f8fafb; --murekkep: #16212b; --sonuk: #5f6c7b; --cizgi: #dfe5eb; --cizgi-2: #eef2f5;
  --marka: #0e7c7b; --marka-koyu: #0a5f5e; --marka-acik: #e3f3f2; --marka-metin: #ffffff;
  --ok: #1f7a4d; --ok-zemin: #e6f4ec; --kotu: #b3261e; --kotu-zemin: #fbe9e7; --dikkat: #9a6700; --dikkat-zemin: #fff4d6; --bilgi: #1d4ed8; --bilgi-zemin: #e8eefc;
  --kod-zemin: #101820; --kod-metin: #e6edf3; --golge: 0 1px 2px rgba(20,33,43,.06), 0 1px 1px rgba(20,33,43,.04);
  --radius: 10px; --mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Consolas, "Liberation Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --zemin: #0e1418; --panel: #151c22; --panel-2: #1a2229; --murekkep: #e4eaf0; --sonuk: #97a4b1; --cizgi: #26313a; --cizgi-2: #1f292f;
    --marka: #3cc1bd; --marka-koyu: #5fd3cf; --marka-acik: #123a39; --marka-metin: #06201f;
    --ok: #5fd08f; --ok-zemin: #12301f; --kotu: #ff8a80; --kotu-zemin: #3a1b18; --dikkat: #f4c25c; --dikkat-zemin: #3a2d0f; --bilgi: #8fb0ff; --bilgi-zemin: #182644;
    --kod-zemin: #0b1014; --kod-metin: #dbe4ec; --golge: none;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--zemin); color: var(--murekkep); font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
a { color: var(--marka); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre, .mono, .kopya-metin { font-family: var(--mono); }
code { background: var(--panel-2); border: 1px solid var(--cizgi-2); padding: .05rem .35rem; border-radius: 5px; font-size: .88em; }
pre { margin: 0; background: var(--kod-zemin); color: var(--kod-metin); padding: .9rem 1rem; border-radius: 0 0 var(--radius) var(--radius); overflow: auto; font-size: .82rem; line-height: 1.5; }
.kod pre { white-space: pre-wrap; overflow-wrap: anywhere; }
pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
h1, h2, h3 { line-height: 1.25; text-wrap: balance; margin: 0; }
h2 { font-size: 1.12rem; margin: 1.8rem 0 .7rem; }
h3 { font-size: .98rem; margin: 1.1rem 0 .5rem; }
p { margin: .4rem 0 .8rem; }
.k { color: var(--sonuk); font-size: .86rem; }
.tabular { font-variant-numeric: tabular-nums; }
.atla { position: absolute; left: -999px; top: 0; background: var(--panel); padding: .4rem .8rem; }
.atla:focus { left: .5rem; z-index: 10; }

/* ---- üst çubuk */
.ust { background: var(--panel); border-bottom: 1px solid var(--cizgi); position: sticky; top: 0; z-index: 5; }
.ust-ic, .icerik, .alt-ic { max-width: 1080px; margin: 0 auto; padding-inline: 1rem; }
.ust-ic.genis, .icerik.genis, .alt-ic.genis { max-width: 1280px; }
.ust-ic { display: flex; align-items: center; gap: 1.2rem; min-height: 56px; flex-wrap: wrap; }
.marka { display: inline-flex; align-items: center; gap: .55rem; color: var(--murekkep); font-weight: 700; letter-spacing: -.01em; }
.marka:hover { text-decoration: none; }
.marka-isaret { width: 28px; height: 28px; border-radius: 7px; background: var(--marka); color: var(--marka-metin); display: inline-grid; place-items: center; font-size: .72rem; font-weight: 800; letter-spacing: .02em; }
.marka-alan { color: var(--sonuk); font-weight: 500; font-size: .84rem; padding-left: .55rem; border-left: 1px solid var(--cizgi); }
.gez { display: flex; gap: .1rem; align-self: stretch; overflow-x: auto; scrollbar-width: none; }
.gez a { display: inline-flex; align-items: center; padding: 0 .7rem; color: var(--sonuk); font-size: .9rem; font-weight: 500; border-bottom: 2px solid transparent; white-space: nowrap; }
.gez a:hover { color: var(--murekkep); text-decoration: none; }
.gez a.aktif { color: var(--marka); border-bottom-color: var(--marka); }
.ust-sag { margin-left: auto; display: flex; align-items: center; gap: .6rem; font-size: .88rem; color: var(--sonuk); }
.icerik { padding-block: 1.5rem 3rem; }
.sayfa-baslik { font-size: 1.45rem; margin-bottom: 1rem; }
.alt { border-top: 1px solid var(--cizgi); }
.alt-ic { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 1rem; font-size: .84rem; color: var(--sonuk); }

/* ---- kartlar, özet */
.kart { background: var(--panel); border: 1px solid var(--cizgi); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--golge); margin-bottom: 1rem; }
.kart-bas { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.kart-bas h2, .kart-bas h3 { margin: 0; }
.kart.dar { max-width: 460px; }
.kart.vurgu { border-color: var(--marka); background: var(--marka-acik); }
.izgara { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ozet { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 1.2rem; }
.ozet-kutu { background: var(--panel); border: 1px solid var(--cizgi); border-radius: var(--radius); padding: .8rem 1rem; display: flex; flex-direction: column; gap: .1rem; box-shadow: var(--golge); }
.ozet-etiket { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sonuk); }
.ozet-deger { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.ozet-not { font-size: .8rem; color: var(--sonuk); }

/* ---- uyarılar, rozetler, çipler */
.uyari { padding: .65rem .9rem; border-radius: 8px; border: 1px solid transparent; margin: 0 0 1rem; font-size: .92rem; }
.uyari-bilgi { background: var(--bilgi-zemin); color: var(--bilgi); border-color: color-mix(in srgb, var(--bilgi) 25%, transparent); }
.uyari-basari { background: var(--ok-zemin); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.uyari-uyari { background: var(--dikkat-zemin); color: var(--dikkat); border-color: color-mix(in srgb, var(--dikkat) 30%, transparent); }
.uyari-hata { background: var(--kotu-zemin); color: var(--kotu); border-color: color-mix(in srgb, var(--kotu) 25%, transparent); }
.rozet { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .76rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.rozet-ok { background: var(--ok-zemin); color: var(--ok); }
.rozet-kotu { background: var(--kotu-zemin); color: var(--kotu); }
.rozet-dikkat { background: var(--dikkat-zemin); color: var(--dikkat); }
.rozet-notr { background: var(--panel-2); color: var(--sonuk); border: 1px solid var(--cizgi); }
.cip { display: inline-block; padding: .05rem .5rem; margin: .1rem .15rem .1rem 0; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--cizgi); font-size: .78rem; }
.cip-hepsi { background: var(--marka-acik); border-color: transparent; color: var(--marka-koyu); }
.yontem { display: inline-block; font-family: var(--mono); font-size: .72rem; font-weight: 700; padding: .05rem .4rem; border-radius: 4px; background: var(--marka-acik); color: var(--marka-koyu); margin-right: .4rem; }

/* ---- tablolar */
.tablo-sar { overflow-x: auto; background: var(--panel); border: 1px solid var(--cizgi); border-radius: var(--radius); box-shadow: var(--golge); margin-bottom: 1rem; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { padding: .55rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--cizgi-2); }
th { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sonuk); background: var(--panel-2); position: sticky; top: 0; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--panel-2) 60%, transparent); }
td.sayi, th.sayi { text-align: right; font-variant-numeric: tabular-nums; }
tr.alt-satir td { background: var(--panel-2); padding-top: .4rem; padding-bottom: .6rem; }
.bos { padding: 1.4rem; text-align: center; color: var(--sonuk); }

/* ---- formlar, düğmeler */
label { display: block; font-size: .88rem; font-weight: 500; margin: .55rem 0; }
label.satir { display: inline-flex; align-items: center; gap: .35rem; margin: .2rem .9rem .2rem 0; font-weight: 400; }
input:not([type=checkbox], [type=radio]), select, textarea { width: 100%; font: inherit; color: var(--murekkep); background: var(--panel); border: 1px solid var(--cizgi); border-radius: 7px; padding: .48rem .6rem; margin-top: .2rem; }
label.satir input, .satir-form input, .satir-form select, td .satir-form input { width: auto; margin-top: 0; padding: .32rem .5rem; font-size: .86rem; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--marka); outline-offset: 1px; }
input[size] { width: auto; }
.alan-grup { display: grid; gap: .3rem 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.satir-form { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
form.satir { display: inline; }
.dugme, button { font: inherit; font-weight: 600; font-size: .9rem; background: var(--marka); color: var(--marka-metin); border: 1px solid transparent; padding: .5rem .95rem; border-radius: 7px; cursor: pointer; line-height: 1.2; }
.dugme:hover, button:hover { background: var(--marka-koyu); text-decoration: none; }
.dugme-ikincil, button.ikincil { background: var(--panel); color: var(--murekkep); border-color: var(--cizgi); }
.dugme-ikincil:hover, button.ikincil:hover { background: var(--panel-2); }
.dugme-tehlike, button.tehlike { background: var(--panel); color: var(--kotu); border-color: color-mix(in srgb, var(--kotu) 40%, transparent); }
.dugme-tehlike:hover, button.tehlike:hover { background: var(--kotu-zemin); }
.dugme-kucuk, button.kucuk { padding: .28rem .6rem; font-size: .8rem; }
.dugme.tamam, button.tamam { background: var(--ok); color: #fff; border-color: transparent; }
.eylemler { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .8rem; }
.sekmeler { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .8rem; }
.sekmeler a { padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--cizgi); background: var(--panel); color: var(--sonuk); font-size: .85rem; }
.sekmeler a.aktif { background: var(--marka-acik); color: var(--marka-koyu); border-color: transparent; font-weight: 600; }
.sekmeler a:hover { text-decoration: none; color: var(--murekkep); }

/* ---- kopyala, kod, ilerleme, grafik */
.kopya { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; min-width: 0; }
.kopya-metin { font-size: .95rem; padding: .35rem .6rem; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.kod { border: 1px solid var(--cizgi); border-radius: var(--radius); overflow: hidden; margin-bottom: .8rem; background: var(--panel); }
.kod-bas { display: flex; justify-content: space-between; align-items: center; padding: .35rem .6rem .35rem .9rem; font-size: .8rem; font-weight: 600; color: var(--sonuk); background: var(--panel-2); border-bottom: 1px solid var(--cizgi); }
.ilerleme { height: 6px; background: var(--cizgi-2); border-radius: 999px; overflow: hidden; min-width: 90px; margin: .3rem 0 .15rem; }
.ilerleme-ic { height: 100%; border-radius: 999px; }
.ilerleme-ok { background: var(--ok); } .ilerleme-dikkat { background: var(--dikkat); } .ilerleme-kotu { background: var(--kotu); }
.cubuklar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 4px; height: 120px; padding: .5rem .2rem 0; min-width: 0; overflow: hidden; }
.cubuk { position: relative; background: var(--marka); border-radius: 3px 3px 0 0; min-height: 2px; opacity: .85; }
.cubuk:hover { opacity: 1; }
.cubuk span { position: absolute; left: 50%; transform: translateX(-50%); bottom: 100%; margin-bottom: 3px; font-size: .68rem; color: var(--sonuk); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cubuk-etiketler { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; font-size: .66rem; color: var(--sonuk); text-align: center; padding: .25rem .2rem 0; min-width: 0; overflow: hidden; }
.cubuk-etiketler div { min-width: 0; white-space: nowrap; }
.izgara-kayit { display: grid; gap: 1rem; grid-template-columns: minmax(0, 440px) minmax(240px, 1fr); align-items: start; }
.icerik > *, .kart, .ozet-kutu { min-width: 0; }
.adimlar { counter-reset: adim; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 1rem 0; }
.adim { counter-increment: adim; background: var(--panel); border: 1px solid var(--cizgi); border-radius: var(--radius); padding: .9rem 1rem .9rem 3rem; position: relative; }
.adim::before { content: counter(adim); position: absolute; left: .9rem; top: .85rem; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--marka); color: var(--marka-metin); display: grid; place-items: center; font-size: .8rem; font-weight: 700; }
.adim strong { display: block; margin-bottom: .2rem; }
.uc { display: grid; gap: .6rem; margin-bottom: 1rem; }
.uc-satir { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: .6rem 1rem; background: var(--panel); border: 1px solid var(--cizgi); border-radius: var(--radius); padding: .7rem .9rem; align-items: start; }
.uc-satir .yol { font-family: var(--mono); font-size: .86rem; word-break: break-all; }
.uc-satir .aciklama { font-size: .9rem; }
.giris-kart { max-width: 420px; margin: 2rem auto; }
.giris-kart .sayfa-baslik { display: none; }
@media (max-width: 720px) {
  .ust-ic { gap: .6rem; }
  .izgara-kayit { grid-template-columns: 1fr; }
  .cubuk-etiketler div:nth-child(odd) { visibility: hidden; }
  .cubuk span { display: none; }
  .marka-alan { display: none; }
  .ust-sag { width: 100%; margin-left: 0; order: 3; }
  .uc-satir { grid-template-columns: 1fr; }
  .icerik { padding-block: 1rem 2rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .ilerleme-ic { transition: width .3s ease; }
}

/* ---- belge bölüm kartları ve not listesi (v3.3) */
.bolum-kart { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 0; text-decoration: none; color: inherit; }
.bolum-kart:hover { border-color: var(--marka); }
.bolum-kart strong { font-size: 1.02rem; }
.bolum-git { margin-top: auto; padding-top: .5rem; font-size: .84rem; font-weight: 600; color: var(--marka); }
.uc-belge { display: block; margin-top: .35rem; font-size: .84rem; font-weight: 600; white-space: nowrap; }
.notlar { margin: 0 0 1rem; padding-left: 1.1rem; }
.notlar li { margin-bottom: .45rem; max-width: 80ch; }
.bolum-ozet { font-size: 1.05rem; max-width: 74ch; margin: -.2rem 0 1.1rem; }