/* İskelet stil sayfası.
   Bootstrap bilinçli olarak kaldırıldı: kamuya açık sayfalarda JavaScript yok ve yönetim
   ekranları bir ağaç, bir editör ve birkaç listeden ibaret — 8 MB'lık bir bileşen kütüphanesi
   karşılığını vermiyor (bkz. docs/02-faz1-teknik-tasarim.md §18-B).
   Tema paketleri ADR-0085; aşağıdaki jeton katmanı onların ayarladığı yüzeydir. */

/* Bir tema paketinin ayarladığı yüzey (ADR-0085). Buradaki jetonlar, **her** temanın karar vermek
   zorunda olduğu şeylerdir; ulaşabildiği her şey değil — paket tam bir stil sayfası, `padding`'e ve
   geri kalan her kurala zaten adıyla ulaşıyor. Bilerek bir boşluk ölçeği yok: 1076 satırı `calc()`
   çarpanlarına çevirmek okunurluğu düşürür ve karşılığı olmaz. */
/* Palet bir kaskad katmanında, ve bu tema paketlerinin çalışabilmesinin tek sebebi (ADR-0085).
   Katmansız bir kural, **özgüllüğü ne olursa olsun**, katmanlı olanı yener. Katman olmadan bir temanın
   yazacağı düz `:root { --bg: … }` (0,1,0) koyu paletin `:root:not([data-theme="light"])` seçicisine
   (0,2,0) yeniliyordu — yani tema açık modda çalışıp koyu modda sessizce yok sayılıyordu. Alternatifi,
   tema yazarına üç bloğun üçünü birden doğru seçicilerle yazdırmaktı; kaskad bulmacasını paket
   yazarının sırtına yüklemek, temayı yazılabilir olmaktan çıkarır.

   Sonucu şu: bir tema yalnız `:root`'a yazar ve her üç durumda da kazanır. İki paletli bir tema kendi
   `@media (prefers-color-scheme: dark)` ve `[data-theme="dark"]` bloklarını ekler — onlar da katmansız
   olduğu için yine kazanır. Tek palet tanımlayan bir temada açık/koyu anahtarı hiçbir şey yapmaz, ve
   bu doğrudur: tema "benim zeminim parşömen" demiştir. */
@layer base {
    :root {
        color-scheme: light dark;

        /* ── Renk ─────────────────────────────────────────────────────────────────────────────────
           `--bg` sayfanın zemini, `--surface` içeriğin oturduğu zemin. Bugün ikisi aynı ve hiçbir şey
           değişmiyor; ayrılmalarının sebebi somut bir istek: dokulu bir arka plan (ahşap, kâğıt) sayfaya
           gelirse metin o dokunun üstünde kalır ve okunmaz. İkisi ayrıysa tema tuvali boyar, metin kendi
           zemininde durur. */
        --bg: #ffffff;
        --surface: #ffffff;
        --fg: #1a1a1a;
        --muted: #6b6b6b;
        --link: #1c5d99;
        --rule: #e2e2e2;
        --good: #2f6b3d;
        --bad: #a02222;
        --warn: #8a6d3f;

        /* ── Tipografi ────────────────────────────────────────────────────────────────────────────
           `--font-heading` varsayılan olarak gövdeyi izler: başlık için ayrı bir yazı tipi istemeyen bir
           tema tek satır bile yazmaz. */
        --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        --font-heading: var(--font-body);
        --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

        /* ── Ritim ────────────────────────────────────────────────────────────────────────────────
           `--measure` metnin satır genişliği — bir okuma sitesinde temanın en çok işe yarayan tek
           düğmesi. `--leading` satır aralığı. */
        --measure: 46rem;
        --leading: 1.6;
        --radius: 4px;
        --radius-sm: 3px;

        /* Gölge de bir tema kararı: koyu bir zeminde siyah gölge görünmez, açık bir zeminde ağır durur. */
        --shadow: 0 2px 10px rgb(0 0 0 / 0.18);

        /* Editörün kendi sözdizimini EasyMDE boyuyor; bu ikisi bizim direktiflerimiz için, çünkü
           onları paket bilmiyor. Ayrı jetonlar, ki bir tema paketi metnin rengini değiştirmeden
           vurgulamayı ayarlayabilsin. Bozuk direktif zaten anlamı olan jetonu kullanır — kırmızı burada
           da "yanlış" demek. */
        --syn-directive: #2a6b6b;
        --syn-broken: var(--bad);
    }

    /* Üç durum, iki kural. Çerez yoksa işletim sistemi karar verir; çerez varsa o kazanır — ve
       `[data-theme="light"]` istisnası olmadan, koyu bir işletim sisteminde "açık" seçen kişi seçtiğini
       alamazdı. */
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) {
            --bg: #14171a;
            --surface: #14171a;
            --fg: #e8e6e3;
            --muted: #9aa0a6;
            --link: #7db3e8;
            --rule: #2c3136;
            --good: #6fbf7f;
            --bad: #e08585;
            --warn: #c9a86a;
            --syn-directive: #78c8c8;
        }
    }

    :root[data-theme="dark"] {
        color-scheme: dark;
        --bg: #14171a;
        --surface: #14171a;
        --fg: #e8e6e3;
        --muted: #9aa0a6;
        --link: #7db3e8;
        --rule: #2c3136;
        --good: #6fbf7f;
        --bad: #e08585;
        --warn: #c9a86a;
        --syn-directive: #78c8c8;
    }

    :root[data-theme="light"] { color-scheme: light; }
}

html, body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    line-height: var(--leading);
}

/* `hidden`, tarayıcının kendi stil sayfasında `display: none`'dur — ve yazarın koyduğu **herhangi**
   bir `display` kuralı onu yener. Bu dosyada 56 tane var. Somut bedeli: site.js dil seçicisinin
   Uygula düğmesine `hidden` koyuyordu, `button { display: inline-block }` onu eziyordu, ve düğme
   `hidden` özniteliğini taşıyarak ekranda duruyordu (G-0142). `!important` burada yerinde: `hidden`'ın
   anlamı zaten "yerleşim kuralları ne derse desin, bu görünmeyecek". */
[hidden] { display: none !important; }

a { color: var(--link); }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }

.site-nav {
    border-bottom: 1px solid var(--rule);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    flex-wrap: wrap;
}

/* The list is a list for a screen reader and a row for everyone else. It was rendering with default
   bullets down the left of the header — the markup was right and nothing had styled it yet. */
.site-links {
    list-style: none;
    display: flex;
    gap: 1rem;
    margin: 0;
    padding: 0;
}

.site-brand {
    font-weight: 600;
    text-decoration: none;
}

/* `--surface` burada boyanıyor: bugün `--bg` ile aynı, dolayısıyla görünürde hiçbir değişiklik
   yok — ama dokulu bir zemin isteyen bir temanın metni okunabilir tutabileceği tek yer burası. */
main {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 1.5rem 1rem;
    background: var(--surface);
}

/* ── Yönetim ─────────────────────────────────────────────────────────────────
   Hâlâ kasten az: bir ağaç, bir editör, birkaç liste. Bootstrap yerine yüz satır
   CSS — gerekçesi docs/02-faz1-teknik-tasarim.md §18-B'de. */

main.admin { max-width: 64rem; }

.admin-nav {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--rule);
    font-size: 0.9rem;
}

.admin-brand { font-weight: 600; text-decoration: none; }
.admin-nav-gap { flex: 1; }

.admin-head {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
}

.admin-head h1 { margin-bottom: 0.5rem; }

.admin-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.admin-sub { color: var(--muted); font-size: 0.85rem; }
.admin-hint { color: var(--muted); font-size: 0.85rem; margin: 0.25rem 0 0.75rem; }
.admin-note { color: var(--muted); }

.admin-error, .admin-ok, .admin-warn {
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius);
    border: 1px solid var(--rule);
}

.admin-error { border-color: var(--bad); color: var(--bad); }
.admin-ok { border-color: var(--good); color: var(--good); }
/* Bir uyarı dipnota benzememeli. Bu kutu gri, kenarlıksız ve girintiliydi; yazar kaydettikten
   sonra "def kimliği okunamadı" satırını görmeden sayfaya gidiyordu — gerçekte oldu. */
.admin-warn {
    color: var(--warn);
    border: 1px solid var(--warn);
    border-radius: var(--radius);
    margin: 0.75rem 0;
    padding: 0.5rem 0.75rem 0.5rem 1.5rem;
    list-style: disc;
}

.admin-warn li { margin-left: 0.5rem; }

/* Giriş ekranı: dar, ortalanmış, tek iş. */
.signin, form.stack {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-width: 26rem;
    margin: 1.5rem 0;
}

.signin { margin: 3rem auto; }
.signin h1 { margin-bottom: 1rem; }

.signin label, form.stack label { font-size: 0.85rem; color: var(--muted); }

.signin input, form.stack input, form.stack select {
    padding: 0.5rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--fg);
    font-size: 1rem;
}

button, .button {
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--fg);
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
}

button:hover, .button:hover { border-color: var(--fg); }
button:disabled { opacity: 0.5; cursor: default; }

button.primary { border-color: var(--link); color: var(--link); font-weight: 600; }
button.danger { border-color: var(--bad); color: var(--bad); }
button.secondary { color: var(--muted); }

.signin button, form.stack button { align-self: flex-start; margin-top: 0.5rem; }

.signin-error { border: 1px solid var(--bad); color: var(--bad); padding: 0.5rem; border-radius: var(--radius); }

/* Ağaç */
.admin-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.admin-table th { text-align: left; font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.admin-table th, .admin-table td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.admin-table td.numeric, .admin-table th.numeric { text-align: right; color: var(--muted); }
.admin-row-actions { white-space: nowrap; text-align: right; }
.admin-row-actions button, .admin-row-actions .button { padding: 0.15rem 0.5rem; }

.pill {
    display: inline-block;
    font-size: 0.7rem;
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--rule);
    border-radius: 999px;
    color: var(--muted);
    margin-left: 0.35rem;
    vertical-align: middle;
}

.pill.published { border-color: var(--good); color: var(--good); }
.pill.archived, .pill.idle { border-color: var(--bad); color: var(--bad); }
.pill.dirty { border-color: var(--link); color: var(--link); }

/* Editör */
.editor { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }

.editor-fields {
    display: grid;
    grid-template-columns: 6rem 1fr;
    gap: 0.4rem 0.75rem;
    align-items: center;
}

.editor-fields label, .editor > label { font-size: 0.85rem; color: var(--muted); }

.editor-fields input, .editor-fields select {
    padding: 0.4rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--fg);
    font-size: 1rem;
}

/* Editör kutusu — EasyMDE (ADR-0079).
   Paket kendi stilini getiriyor ama açık temaya göre yazılmış; buradaki her kural onu jeton
   katmanına bağlamak için. Hiçbir renk elle yazılmıyor, çünkü temalar bir gün yüklenebilir olacak
   (90-repo.md) ve editör de o zaman temayla birlikte değişmeli. */
.editor-body { width: 100%; min-height: 26rem; }

.EasyMDEContainer { display: block; }

/* Bounded, and draggable — the two halves of one complaint. Left to itself CodeMirror grows with
   the text, and a 70 000-character article made this box 39 500 pixels tall, which puts Kaydet and
   everything beside it past the end of the page. Bounding it alone would be worse than what it
   replaced, because the plain textarea underneath could always be dragged; `resize` gives that back,
   and it needs an `overflow` other than `visible` to apply at all (KI-0024).

   Fullscreen is excluded: that one is positioned by EasyMDE and has no height of its own. */
.EasyMDEContainer .CodeMirror:not(.CodeMirror-fullscreen) {
    height: 26rem;
    min-height: 10rem;
    overflow: hidden;
    resize: vertical;
}

.EasyMDEContainer .CodeMirror {
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--rule);
    border-radius: 0 0 var(--radius) var(--radius);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.55;
}

.EasyMDEContainer .CodeMirror-cursor { border-left-color: var(--fg); }
.EasyMDEContainer .CodeMirror-selected { background: color-mix(in srgb, var(--link) 30%, transparent); }
.EasyMDEContainer .CodeMirror-focused .CodeMirror-selected { background: color-mix(in srgb, var(--link) 35%, transparent); }
.EasyMDEContainer .CodeMirror-line::selection,
.EasyMDEContainer .CodeMirror-line > span::selection,
.EasyMDEContainer .CodeMirror-line > span > span::selection { background: color-mix(in srgb, var(--link) 35%, transparent); }

.EasyMDEContainer .CodeMirror-gutters {
    background: var(--bg);
    border-right: 1px solid var(--rule);
}

.EasyMDEContainer .CodeMirror-linenumber { color: var(--muted); }

.editor-toolbar {
    border: 1px solid var(--rule);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--bg);
    opacity: 1;
}

/* Simge yazı tipi yok: düğmeler kendi metinlerini taşıyor (autoDownloadFontAwesome kapalı, yoksa
   paket kendiliğinden dışarıdan bir stil dosyası çekiyor). */
.editor-toolbar button {
    color: var(--muted);
    border: 1px solid transparent;
    min-width: 2rem;
    font-family: var(--font-mono);
}

.editor-toolbar button:hover,
.editor-toolbar button.active {
    background: var(--bg);
    border-color: var(--rule);
    color: var(--fg);
}

.editor-toolbar button.bold { font-weight: 700; }
.editor-toolbar button.italic { font-style: italic; }

.editor-toolbar i.separator { border-left-color: var(--rule); border-right-color: transparent; }

/* Kendi direktiflerimiz, Markdown modunun üstüne bindirilen katmandan. `broken` — kapanmamış bir
   `::embed{` — KI-0001'in asıl istediği şeydi ve pakette karşılığı yok; overlay'i biz yazıyoruz. */
.cm-ilimevi-directive { color: var(--syn-directive); }
.cm-ilimevi-broken { color: var(--syn-broken); text-decoration: underline wavy; }

/* Tam ekran, kendi tema renklerimizle. */
.EasyMDEContainer .CodeMirror-fullscreen,
.editor-toolbar.fullscreen { background: var(--bg); }

/* İçerik ağacında sürükleyerek taşıma.
   Çizgiler her zaman DOM'da ve sıfır yüksekliktedir; sürükleme başlayınca `tbody.dragging` onları
   açar. Sürükleme sırasında satır eklemek/çıkarmak bazı tarayıcılarda sürüklemeyi iptal ettiriyor —
   var olan bir şeyin görünürlüğünü değiştirmek etmiyor. */
.tree tbody tr[draggable="true"] { cursor: grab; }
.tree tbody tr.dragged { opacity: 0.4; }
.tree .tree-name { position: relative; }

/* The indent, computed here rather than written into the markup. What arrives is `--depth: 2`, an
   integer, which says the same thing in every culture; `0.5 + depth * 1.25` formatted under Turkish
   said `0,5rem` and CSS threw the whole declaration away. Every child then looked like a root, so a
   drag that had worked looked exactly like one that had not (KI-0026). */
.tree .tree-name { padding-left: calc(0.5rem + var(--depth, 0) * 1.25rem); }
.tree .tree-end td { padding: 0; border: none; }

.drop-line {
    position: absolute;
    left: 0;
    right: 0;
    top: -0.35rem;
    height: 0;
    pointer-events: none;
}

.tree tbody.dragging .drop-line {
    height: 0.7rem;
    pointer-events: auto;
}

/* Nereye düşeceğini gösteren iki geri bildirim: satır arasına ince bir çizgi, satırın kendisine
   bırakıldığında ise "bunun altına giriyor" diyen bir çerçeve. */
.tree tbody.dragging .drop-line.over::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0.25rem;
    border-top: 2px solid var(--link);
}

.tree tbody.dragging tr.over > td { background: color-mix(in srgb, var(--link) 12%, transparent); }

.tree .tree-end .drop-line { position: relative; top: 0; }

/* Blok seçici */
.picker { border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.75rem; margin-top: 0.5rem; }
.picker-head { display: flex; gap: 0.5rem; }
.picker-head input, .search {
    flex: 1;
    padding: 0.4rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--fg);
}
.search { width: 100%; margin: 0.75rem 0; }
.picker-list li { padding: 0.3rem 0; border-bottom: 1px solid var(--rule); }
.picker-list button { border: none; padding: 0; color: var(--link); background: none; }

/* Ekran yardımı */
.page-help {
    border: 1px solid var(--rule);
    border-left: 3px solid var(--link);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    margin: 0.75rem 0 1.25rem;
    font-size: 0.9rem;
}

.page-help > summary { cursor: pointer; color: var(--muted); }
.page-help[open] > summary { margin-bottom: 0.5rem; }
.page-help-body p { margin: 0.4rem 0; }
.page-help-body dt { font-weight: 600; margin-top: 0.4rem; }
.page-help-body dd { margin: 0 0 0 1rem; color: var(--muted); }

/* Medya */
.upload { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 1rem 0; }
.upload .admin-hint { margin: 0; flex-basis: 100%; }

.media-grid {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 1rem;
}

.media-card {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.media-card img {
    width: 100%;
    height: 8rem;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--rule);
}

.media-pdf {
    height: 8rem;
    display: grid;
    place-items: center;
    border: 1px dashed var(--rule);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-weight: 600;
}

.media-name { font-size: 0.85rem; word-break: break-all; }
.media-card .editor-actions button { padding: 0.15rem 0.45rem; font-size: 0.8rem; }
.media-card .stack { max-width: none; margin: 0; }

.admin-table tr.failed td { color: var(--bad); }
.audit-diff {
    font-size: 0.75rem;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 12rem;
    overflow: auto;
    margin: 0.3rem 0 0;
    color: var(--muted);
}
label.inline { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; }

/* Pano */
.counters { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1rem 0; }
.counter {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 0.6rem 1rem;
    text-decoration: none;
    color: var(--fg);
    font-size: 0.85rem;
}
.counter-n { display: block; font-size: 1.6rem; font-weight: 600; }
.notices li { padding: 0.2rem 0; }

/* Kamuya açık taraf */
.embed { margin: 1rem 0; padding-left: 1rem; border-left: 2px solid var(--rule); }
.embed-title { font-weight: 600; margin: 0 0 0.3rem; }
details.embed-expand { margin: 1rem 0; }
details.embed-expand > summary { cursor: pointer; font-weight: 600; }
.breadcrumb { font-size: 0.85rem; color: var(--muted); margin-bottom: 1rem; }
.breadcrumb-sep { margin: 0 0.35rem; }
.toc { margin: 1.5rem 0; padding: 0.75rem 1rem; border: 1px solid var(--rule); border-radius: var(--radius); }
.toc-title { font-weight: 600; margin: 0 0 0.4rem; }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc-l2 { padding-left: 1rem; }
.toc-l3 { padding-left: 2rem; }
.toc-l4, .toc-l5, .toc-l6 { padding-left: 3rem; }
.empty { color: var(--muted); }

/* Okuma sütununu taşmayan görseller. srcset üç boyutu sunuyor; genişliği CSS belirler. */
.prose img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.prose figure { margin: 1.5rem 0; }
.prose figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 0.35rem; }
.glossary-letter { font-weight: 700; margin-top: 1rem; }

/* Bir kez gösterilen parola: seçilebilir, okunaklı, ve kalabalığın içinde kaybolmayacak kadar
   farklı. Kopyalanamayan bir parola, gösterilmemiş parolayla aynı şeydir. */
.password-once {
    display: inline-block;
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    user-select: all;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

.site-tagline { color: var(--muted); margin-top: -0.5rem; }

/* A header logo is bounded by its line, not by its own pixels: an oversized upload must not push
   the navigation off the screen. */
/* 2.2rem, 1.6 değil: yüklenen logo bir lockup (işaret + ad) olabiliyor ve o boyda ad okunmuyordu.
   Canlıda ölçüldü — bu değerde yazı, gezinme bağlantılarıyla aynı büyüklüğe geliyor. */
.site-logo { height: 2.2rem; width: auto; display: block; }

/* Tema düğmesi. JavaScript yok: sunucu iki düğmeyi de basar, hangisinin görüneceğine CSS karar
   verir — çünkü `prefers-color-scheme`'i yalnız tarayıcı bilir. Üç durum, üç kural:
   çerez yoksa işletim sistemi, `light` seçildiyse ay, `dark` seçildiyse güneş. */
.theme-toggle { margin-left: auto; display: flex; align-items: center; }
.theme-toggle button {
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: none;
    color: var(--muted);
    padding: 0.2rem 0.35rem;
    cursor: pointer;
    display: inline-flex;
}
.theme-toggle button:hover { border-color: var(--rule); color: var(--fg); }

/* Varsayılan: açık zemin → aya geçme düğmesi. */
.theme-toggle .to-light { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .to-dark { display: none; }
    :root:not([data-theme="light"]) .theme-toggle .to-light { display: inline-flex; }
}

:root[data-theme="dark"] .theme-toggle .to-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .to-light { display: inline-flex; }

:root[data-theme="light"] .theme-toggle .to-dark { display: inline-flex; }
:root[data-theme="light"] .theme-toggle .to-light { display: none; }

.admin-foot {
    max-width: 64rem;
    margin: 2rem auto 1rem;
    padding: 0.75rem 1rem 0;
    border-top: 1px solid var(--rule);
    color: var(--muted);
    font-size: 0.8rem;
    display: flex;
    gap: 0.5rem;
}

/* Arama */
.search-form { display: flex; gap: 0.5rem; margin: 1rem 0 1.5rem; }
.search-form input { flex: 1; padding: 0.45rem 0.6rem; border: 1px solid var(--rule); border-radius: var(--radius);
    background: var(--bg); color: var(--fg); font-size: 1rem; }
.results { list-style: none; padding: 0; }
.results li { padding: 0.6rem 0; border-bottom: 1px solid var(--rule); }
.result-snippet { color: var(--muted); margin: 0.25rem 0 0; font-size: 0.9rem; }
.result-snippet mark { background: none; color: var(--fg); font-weight: 600; }

/* Kaynakça ve atıflar. Tema paketinin ulaşabilmesi için her parça adlandırılmış:
   .cite (işaret), .cite-inline (kısa biçim), .cite-page (sayfa numarası),
   .bibliography (sayfa sonundaki bölüm), .bibliography-list (genel kaynakça sayfası). */
.cite { font-size: 0.75em; }
.cite a { text-decoration: none; }
.cite-inline { font-size: 0.9em; color: var(--muted); }
.cite-inline a { color: inherit; }
.cite-page { color: var(--muted); }

.bibliography { margin-top: 2.5rem; border-top: 1px solid var(--rule); padding-top: 0.5rem; }
.bibliography ol { padding-left: 1.5rem; }
.bibliography li { margin: 0.35rem 0; }
.bibliography li p { margin: 0; }

.bibliography-list { list-style: none; padding: 0; }
.bibliography-list > li { padding: 0.6rem 0; border-bottom: 1px solid var(--rule); }
.bibliography-list .prose p { margin: 0; }
.cited-by { margin: 0.2rem 0 0; }

/* Etiketler. .tag-cloud genel liste, .tagged bir etiketin sayfaları. */
.tag-cloud { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; }
.tag-cloud li { display: flex; align-items: baseline; gap: 0.3rem; }
/* Sözlükteki eş anlamlılar: terimin yanında, ondan bir tık geride. */
.term-aliases { color: var(--muted); font-size: 0.85rem; margin-left: 0.5rem; }

.tag-count { color: var(--muted); font-size: 0.8rem; }

.tagged { list-style: none; padding: 0; }
.tagged li { padding: 0.4rem 0; border-bottom: 1px solid var(--rule); }

/* Dil seçici. Tema düğmesiyle aynı satırda; ikisi de betiksiz form. */
.lang-picker { margin-left: auto; display: flex; align-items: center; gap: 0.35rem; }
.theme-picker { display: flex; align-items: center; gap: 0.35rem; margin-left: 0.5rem; }
.lang-picker + .theme-toggle, .theme-picker + .theme-toggle { margin-left: 0.5rem; }
.lang-picker select, .lang-picker button,
.theme-picker select, .theme-picker button {
    font: inherit;
    font-size: 0.85rem;
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--fg);
}

/* Etiketi ekrandan kaldırır, erişilebilirlik ağacında bırakır. `display:none` ikisini de götürür. */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

/* Kitabın tek sayfa hâli. Bölümler arasında görünür bir sınır olsun ki okuyucu nerede olduğunu bilsin. */
.page-book-all .book-part { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.page-book-all .book-part:first-of-type { border-top: none; }

/* Kaydedilmemiş metin çubuğu. Uyarı rengini taşır ama uyarı değil, bir teklif — o yüzden
   .admin-warn'un listesi değil, kendi satırı. */
.draft-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    border: 1px solid var(--warn);
    border-left-width: 3px;
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    margin: 0.75rem 0;
    color: var(--warn);
}

.draft-bar button {
    font: inherit;
    font-size: 0.85rem;
    padding: 0.15rem 0.6rem;
    border: 1px solid var(--warn);
    border-radius: var(--radius);
    background: none;
    color: var(--warn);
}

.draft-bar button:hover { background: var(--warn); color: var(--bg); }

/* İlişki panelleri: iki yön, kenar tipine göre gruplanmış. */
.relations h3 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    margin: 0.8rem 0 0.2rem;
}

.relations ul { list-style: none; padding: 0; margin: 0; }
.relations li { padding: 0.2rem 0; }

/* Video ve PDF gömme. Tema paketinin ulaşabilmesi için ikisi de adlandırılmış. */
.video-embed {
    margin: 1.5rem 0;
    aspect-ratio: 16 / 9;
    background: var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
}

.video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

.pdf-embed { margin: 1.5rem 0; }

.pdf-embed iframe {
    width: 100%;
    /* Bir sayfanın okunabildiği en kısa boy. Aspect-ratio değil, çünkü PDF'in oranı bilinmiyor. */
    height: 32rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    display: block;
}

.pdf-embed figcaption { font-size: 0.85rem; margin-top: 0.35rem; }
.pdf-size { color: var(--muted); }

/* Yönetim menüsü: içerik solda ve daima görünür, yönetim sağda ve katlanmış (KI-0013).
   <details>, betik değil — yönetim tarafında JavaScript var ama bir menü onu yazmak için sebep
   değil, ve bu kamuya açık taraftaki `expand` ile aynı element. */
.admin-more { position: relative; }

.admin-more > summary {
    cursor: pointer;
    list-style: none;
    color: var(--link);
    user-select: none;
}

.admin-more > summary::-webkit-details-marker { display: none; }

.admin-more-panel {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 12rem;
    padding: 0.6rem 0.8rem;
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

/* Soru-cevap. Cevap, sorunun sayfasında kendi bölgesinde durur. */
.questions { list-style: none; padding: 0; }
.questions li { padding: 0.5rem 0; border-bottom: 1px solid var(--rule); }

.page-question .answer {
    margin-top: 1.5rem;
    padding-left: 1rem;
    border-left: 3px solid var(--rule);
}

/* Kayıt bağlantısı; yalnız kayıt açıkken basılır. */
.site-register { margin-left: auto; font-size: 0.85rem; }
/* Hesap bağlantıları: kayıt, giriş, hesap adı ve çıkış. Çıkış bir form, çünkü durum değiştiriyor —
   ama şeritte bir bağlantı gibi durması gerekiyor, o yüzden düğme sadeleştiriliyor. */
.site-signin, .site-account { text-decoration: none; font-size: 0.9rem; }
.site-signin:hover, .site-account:hover { text-decoration: underline; }
.site-account { font-weight: 600; }

.site-signout { display: inline; }
.site-bookmarks { text-decoration: none; font-size: 0.9rem; }
.site-bookmarks:hover { text-decoration: underline; }

/* Yer imi düğmesi: başlığın altında, sessiz. İşaretliyken dolu yıldız ve vurgu rengi — durum
   yıldızın kendisinde okunuyor, ayrı bir etiket gerekmiyor. */
.bookmark { margin: -0.5rem 0 1.25rem; }

.bookmark button {
    background: none;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 0.2rem 0.6rem;
    font: inherit;
    font-size: 0.85rem;
    color: var(--muted);
    cursor: pointer;
}

.bookmark button.kept { color: var(--link); border-color: var(--link); }

.bookmark-list li { padding-bottom: 1rem; }
.bookmark-note { margin-top: 0.5rem; max-width: 32rem; }
.bookmark-note textarea { width: 100%; font: inherit; font-size: 0.9rem; }
.bookmark-actions { display: flex; gap: 0.5rem; }
.bookmark-remove { margin-top: 0.35rem; }

/* Kaldığınız yer. Yazının başında tek satır: içindekilerden önce, çünkü uzun bir yazıya geri
   dönen kişinin aradığı ilk şey bu. Rengi jetondan gelir — tema paketleri bu satırı da
   boyayabilsin diye (90-repo: hiçbir bileşen renk gömmez). */
.resume {
    margin: -0.5rem 0 1.25rem;
    font-size: 0.9rem;
    color: var(--muted);
}

.resume-label { margin-right: 0.35rem; }
.resume-gone { color: var(--fg); }

/* "Okuduğunuzdan beri güncellendi". Yazının başında ve iki listede aynı satır. Vurgulu ama
   uyarı değil: bir şey bozulmadı, bir şey düzeldi. */
.changed-since {
    margin: -0.5rem 0 1.25rem;
    font-size: 0.9rem;
    color: var(--warn);
}

.bookmark-list .changed-since, .reading-list .changed-since { margin: 0.15rem 0 0; }

.reading-own { margin-top: 2rem; }
.reading-list li { padding-bottom: 0.6rem; }

.site-signout button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 0.9rem;
    color: var(--muted);
    cursor: pointer;
    text-decoration: underline;
}

.site-nav .site-register, .site-nav .site-signin, .site-nav .site-account, .site-nav .site-signout {
    margin-left: 0.75rem;
}

.site-register + .lang-picker, .site-register + .theme-picker,
.site-register + .theme-toggle { margin-left: 0.75rem; }

/* Ayar sekmeleri. Ekran dokuz bölüme ulaştı ve daha da gelecek (yorumlar, 2FA); tek sütunda
   aranan kutuya inmek kaydırma işi oluyordu. Sekmeler tek bir formu bölüyor, sayfayı değil —
   Kaydet hepsini birden yazar. Düğme, bağlantı değil: adres değişseydi tarayıcı geri düğmesi
   kaydedilmemiş bir formu sessizce boşaltırdı. */
.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 1rem 0 1.25rem;
    border-bottom: 1px solid var(--rule);
}

.admin-tabs .tab {
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    margin-bottom: -1px;
    padding: 0.35rem 0.7rem;
    color: var(--muted);
    background: none;
}

.admin-tabs .tab:hover { color: var(--fg); border-color: var(--rule); }

.admin-tabs .tab.active {
    color: var(--fg);
    font-weight: 600;
    border-color: var(--rule);
    background: var(--bg);
}

/* Kaydet düğmesinin altındaki "hepsini kaydeder" satırı formun sonunda kalsın. */
form.stack .admin-hint:last-child { margin-bottom: 0; }

/* Okurdan gelen sorular. Gövde, okurun yazdığı düz metindir — Razor kaçırır, derleyiciye
   girmez; satır sonlarını koruyup uzun bir metnin listeyi taşırmasını engelliyoruz. */
.submissions li { padding: 0.6rem 0; border-bottom: 1px solid var(--rule); }

.submission-body {
    white-space: pre-wrap;
    margin: 0.3rem 0;
    max-height: 12rem;
    overflow-y: auto;
}

/* ── Yorumlar ────────────────────────────────────────────────────────────────
   Derlenmiş gövdenin altında, <article>'ın dışında: yorum sayfaya verilen bir
   cevaptır, sayfanın parçası değil. Gövde düz metindir — Markdown çalışmaz —
   dolayısıyla satır sonlarını koruyan tek şey buradaki `pre-wrap`. */
.comments {
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
}

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

.comment {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--rule);
}

.comment-who { margin: 0 0 0.25rem; font-weight: 600; font-size: 0.9rem; }
.comment-when { color: var(--muted); font-weight: 400; margin-left: 0.5rem; font-size: 0.85rem; }

.comment-body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin: 0;
}

.comment-form { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1.5rem; max-width: 40rem; }

.comment-form textarea {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--fg);
    font: inherit;
    resize: vertical;
}

.comment-form button { align-self: flex-start; }
.comment-form .admin-hint { margin: 0; }

/* Panelde kuyruk: gövde uzun olabilir, listeyi taşırmasın. */
.comment-queue li { padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
.comment-queue .comment-body { max-height: 14rem; overflow-y: auto; }

/* ── İki adımlı doğrulama ────────────────────────────────────────────────────
   QR satır içi SVG olarak basılıyor: konteynerde çizim kütüphanesi yok, ve
   böylece yetkilendirilecek bir görsel endpoint'i ya da politikaya izin
   verilecek bir data: URI'si de yok. Renk currentColor — karanlık temada beyaz
   bir kare durmasın diye. */
.two-factor .qr {
    max-width: 15rem;
    margin: 1rem 0;
    color: var(--fg);
}

.two-factor .qr svg { width: 100%; height: auto; display: block; }

.two-factor .secret { font-size: 1.05rem; letter-spacing: 0.05em; }

/* Kurtarma kodları: bir kez görünür, yazdırılır. Sabit genişlikli ve seçilebilir. */
.recovery-codes {
    list-style: none;
    padding: 0.75rem 1rem;
    margin: 0.75rem 0;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.35rem 1rem;
    user-select: all;
}

.recovery-codes code { font-size: 1rem; letter-spacing: 0.05em; }

/* ── Gösterim modları (vizyon §7) ────────────────────────────────────────────
   Beşinin beşi de betiksiz. `expand` <details>, `sidebar` bir kutu, `page` ve
   `tab` birer bağlantı, `popup` ise saf CSS. Kamuya açık tarafta hâlâ sıfır
   JavaScript var ve bu maddelerin Faz 4'e kadar beklemesinin sebebi de buydu. */

/* Kenar kutusu: geniş ekranda metnin yanında, dar ekranda akışın içinde. Sıra
   önemli — mobilde kayan bir kutu, metni ikiye bölen bir kutudur. */
.embed-side {
    border-left: 3px solid var(--rule);
    padding: 0.5rem 0 0.5rem 1rem;
    margin: 1rem 0;
}

@media (min-width: 60rem) {
    .embed-side {
        float: right;
        clear: right;
        width: 16rem;
        margin: 0.3rem 0 1rem 1.75rem;
        border-left: none;
        border-top: 2px solid var(--rule);
        padding: 0.6rem 0 0;
        font-size: 0.92rem;
    }
}

.embed-side .embed-title { font-size: 0.85rem; color: var(--muted); text-transform: uppercase;
                           letter-spacing: 0.04em; }

.embed-link { margin: 1rem 0; }
.embed-link a::before { content: "→ "; color: var(--muted); }

/* Tanım kartı. Betik yok: sarmalayıcı üstünde hover, ya da içindeki bağlantı
   odaklandığında focus-within. Dokunmatikte hover yoktur, dolayısıyla dokunmak
   bağlantıyı izler — yani bugünkü davranış. */
.def-wrap { position: relative; display: inline; }

.def-card {
    position: absolute;
    left: 0;
    top: 1.6em;
    z-index: 30;
    display: none;
    width: max-content;
    max-width: min(22rem, 90vw);
    padding: 0.6rem 0.8rem;
    background: var(--bg);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    cursor: default;
}

.def-wrap:hover .def-card,
.def-wrap:focus-within .def-card { display: block; }

.def-card-term { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.def-card-body { display: block; color: var(--muted); }

/* Kart sayfanın sağ kenarından taşmasın: son üçte birde sola hizalanır. */
@media (min-width: 45rem) {
    .def-card { max-width: 22rem; }
}

.picker-mode { display: flex; align-items: center; gap: 0.4rem; margin: 0.5rem 0;
               font-size: 0.85rem; color: var(--muted); }
.picker-mode select { padding: 0.2rem 0.4rem; border: 1px solid var(--rule); border-radius: var(--radius);
                      background: var(--bg); color: var(--fg); font: inherit; }

/* BibTeX içe aktarma. Katlanmış duruyor: kaynakça ekranının asıl işi listedir,
   içe aktarma ise arada bir yapılan bir iş. */
.import-panel { margin: 1rem 0; }
.import-panel > summary { cursor: pointer; color: var(--link); }

.import-box {
    width: 100%;
    margin: 0.5rem 0;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    resize: vertical;
}

.import-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--rule); }
.import-list li.exists { opacity: 0.55; }
.import-list p { margin: 0.2rem 0 0; }

/* ── Kutular ve ham HTML ─────────────────────────────────────────────────────
   `:::note` bugüne kadar `<div class="note">` basıyor ve hiçbir stili yoktu —
   yani kutu değil, sıradan bir paragraf görünüyordu. Artık `box box-<ad>`:
   tema paketinin adla ulaşabileceği bir kanca (90-repo.md), ve renk `:root`
   katmanından geliyor, kuralın içinden değil. */
.box {
    margin: 1.25rem 0;
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--rule);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.box > :first-child { margin-top: 0; }
.box > :last-child { margin-bottom: 0; }

.box-note { border-left-color: var(--link); }
.box-warning { border-left-color: var(--warn); }
.box-tip { border-left-color: var(--good); }

.box-quote {
    border-left-color: var(--rule);
    font-style: italic;
    color: var(--muted);
}

/* Ham HTML bloğu. Kendi sarmalayıcısı var ki tema ona da ulaşabilsin, ve içindeki
   tablo dar ekranda sayfayı yatayda taşırmasın. */
.raw-html { margin: 1.25rem 0; overflow-x: auto; }
.raw-html table { border-collapse: collapse; width: 100%; }
.raw-html th, .raw-html td { border: 1px solid var(--rule); padding: 0.35rem 0.6rem; text-align: left; }
.raw-html th { font-weight: 600; }
.raw-html dt { font-weight: 600; margin-top: 0.4rem; }
.raw-html dd { margin: 0 0 0 1rem; color: var(--muted); }

/* ── Yazdırma ────────────────────────────────────────────────────────────────
   Vizyondaki "PDF çıktısı" maddesinin karşılığı bu stil sayfasıdır, sunucuda
   çalışan bir PDF üreticisi değil. Gerekçe konteynerin kendisi: başsız bir
   tarayıcı imaja ~300 MB ekler ve her render'da yüzlerce megabayt ister —
   üç eşzamanlı görsel yüklemesinin siteyi düşürdüğü 1 GB'ın içinde
   (ADR-0027). QuestPDF gibi bir düzen API'si ise dokümanı ikinci kez, HTML
   renderer'ına paralel biçimde yazmak demekti; iki renderer birbirinden
   ayrışır. Okuyucunun tarayıcısı zaten mükemmel bir PDF üreticisi taşıyor;
   ona iyi bir sayfa vermek yeter — ve maliyeti sıfır.

   `/books/<adres>/all` bir kitabın tamamını tek sayfada verdiği için "kitabı
   PDF olarak al" da budur: o sayfayı yazdırın. */
@media print {
    /* Koyu tema basılırsa siyah bir sayfa çıkar. Yazdırma her zaman açık. */
    :root, :root[data-theme="dark"], :root[data-theme="light"] {
        color-scheme: light;
        --bg: #ffffff;
        --fg: #000000;
        --muted: #444444;
        --link: #000000;
        --rule: #999999;
    }

    /* Kâğıdın kendi kenar boşluğu var; sayfanınkini ona bırakıyoruz. */
    @page { margin: 18mm 16mm; }

    html, body { background: #fff; color: #000; font-size: 11pt; }

    main.site-main { max-width: none; margin: 0; padding: 0; }

    /* Ekranın işi olan her şey: gezinti, tema düğmesi, dil seçici, arama kutusu,
       yorum formu, soru bağlantıları. Kâğıtta tıklanacak bir şey yok. */
    .site-nav, .admin-nav, .admin-foot, .theme-toggle, .lang-picker, .theme-picker, .site-register,
    .site-signin, .site-account, .site-signout, .site-bookmarks, .bookmark, .resume, .changed-since,
    .search-form, .comment-form, .comments .admin-sub, .comments .admin-hint,
    .admin-actions, .page-help, .draft-bar { display: none !important; }

    /* Bağlantının nereye gittiği kâğıtta görünmez. Yalnız dış bağlantılar için
       adresi basıyoruz — site içi bağlantıların adresi okura hiçbir şey söylemez
       ve her satırı iki katına çıkarırdı. */
    .prose a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #444;
        word-break: break-all;
    }

    /* Açılıp kapanan her şey açık basılır: kâğıtta açacak kimse yok. */
    details { display: block; }
    details > summary { font-weight: 600; list-style: none; }
    details:not([open]) > *:not(summary) { display: revert; }

    /* Kenar kutusu kâğıtta akışa iner: dar bir sütunun yanında yüzen bir kutu,
       satırları ikiye bölerek okunmaz hâle getirir. */
    .embed-side {
        float: none;
        width: auto;
        margin: 1rem 0;
        border-top: none;
        border-left: 3px solid #999;
        padding: 0.5rem 0 0.5rem 1rem;
        font-size: inherit;
    }

    /* Tanım kartı ekranda bir katman; kâğıtta hiç yok — bağlantının metni kalır. */
    .def-card { display: none !important; }

    /* Sayfa sonları. Bir başlığın altında tek satır kalması ya da bir tablonun
       ortasından bölünmesi, basılı bir metnin en görünür kusurudur. */
    h1, h2, h3, h4 { break-after: avoid-page; }
    table, figure, .box, .embed, .raw-html, li { break-inside: avoid; }
    p { orphans: 3; widows: 3; }

    /* Kitabın tamamı: her parça yeni sayfadan başlar. Tek sayfa görünümünün
       zaten var olduğu yer burası, ve "kitabı PDF olarak al" bu demek. */
    .page-book-all .book-part { break-before: page; border-top: none; padding-top: 0; }
    .page-book-all .book-part:first-of-type { break-before: auto; }
    .page-book-all .toc { break-after: page; }

    /* Kaynakça kâğıtta da sayfanın sonunda ve ayrık durur. */
    .bibliography { break-before: auto; }

    img { max-width: 100% !important; }

    /* Çerçeveler basılamaz; yerlerine ne oldukları yazılır. */
    .video-embed, .pdf-embed iframe { display: none; }
    .pdf-embed figcaption { font-style: italic; }
}

/* Sözlük tamamlama şeridi. Kutunun altında, imlecin yanında değil: bir textarea'da imleç
   koordinatı hesaplamak ayna-div işidir ve CodeMirror geldiğinde atılacak koddur (KI-0001).
   Şerit hem basit hem yeterli — öneri zaten bir kolaylık. */
.completions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

.completions button { padding: 0.15rem 0.5rem; font-size: 0.9rem; }
.completions button:first-of-type { border-color: var(--link); color: var(--link); }
.completions .admin-sub { flex-basis: 100%; margin: 0; }