:root {
    color-scheme: light dark;
    --bg: #fdfdfc;
    --fg: #1a1a1a;
    --muted: #6b6b6b;
    --border: #e5e5e3;
    --accent: #4f46e5;
    --accent-fg: #ffffff;
    --accent-hover: #4338ca;
    --code-bg: #f5f5f4;
    --success-bg: #e6f4ea;
    --success-fg: #1e4620;
    --error-bg: #fce8e6;
    --error-fg: #611a15;
    --warning-bg: #fdf1dd;
    --warning-fg: #6b4200;
    --danger: #c0362c;
    --danger-hover: #a32c23;
}

/* Koyu tema: kullanıcının kendi kişisel blog temasının koyu halinden
   uyarlandı (bkz. main/themes.py THEME_PRESETS "kisisel-koyu"). Sadece ana
   platform sayfalarını etkiler (blog sayfaları kendi temasını kullanır,
   bkz. main/templates/main/base.html). */
@media (prefers-color-scheme: dark) {
    :root {
        /* Metin rengi bilerek saf beyaz değil. Koyu zeminde parlak beyaz
           harflerin kenarları dağılıp okumayı yoruyor (halation), kalın
           yazılarda etkisi daha da artıyor. #dddddd/#333333 ikilisi 9,3:1
           karşıtlık veriyordu; aşağıdaki ikili 7,2:1'de kalıyor, yani hâlâ
           erişilebilirlik eşiğinin (4,5:1) epey üstünde ama göze yumuşak.
           Renkler nötrden bir tık sıcak, gri ekranın mavi soğukluğunu alsın
           diye. */
        --bg: #2a2a2b;
        --fg: #b9b6b1;
        /* Ölçüldü (2026-08-06, gerçek koyu sistem temasıyla): #8f8c87 zemine
           karşı 4,28:1 veriyordu, yani AA eşiğinin (4,5) hemen altında.
           Açık temadaki karşılığı 5,24 olduğu için soluk metin koyu temada
           farkında olmadan daha okunmaz hâldeydi. Bu değer 4,92 veriyor ve
           gövde metninden hâlâ belirgin şekilde soluk. */
        --muted: #9a9791;
        --border: #414144;
        --accent: #8cc2dd;
        --accent-fg: #1a1a1a;
        --accent-hover: #a8d4ea;
        /* Eskiden #777777'ydi: kod bloğunun zemini gövde metninden daha
           açıktı, sayfada parlayan bir kutu gibi duruyordu. */
        --code-bg: #37373a;
        --success-bg: #1b2b20;
        --success-fg: #9ece6a;
        --error-bg: #3b2733;
        --error-fg: #f7768e;
        --warning-bg: #332b1b;
        --warning-fg: #e0af68;
        --danger: #f7768e;
        --danger-hover: #ff8fa3;
    }
}

* {
    box-sizing: border-box;
}

/* İçerik sütununun genişliği ve konumu. Buradaki değerler varsayılan; blog
   sahibi panelin Tema sekmesinden değiştirirse blog sayfalarında bu üç değişken
   ayrı bir <style> ile yeniden tanımlanıyor (bkz. main/models.py::Blog.
   content_layout_css ve main/templates/main/base.html). Ayar bilerek temanın
   parçası değil, yoksa her tema denemesinde sıfırlanırdı.

   `auto` olan kenar boşluğu kalan yeri yutar: sağ `auto` + sol `0` sola yaslar,
   ikisi de `auto` ise ortalar. */
:root {
    --content-width: 680px;
    --content-margin-left: auto;
    --content-margin-right: auto;
}

body {
    max-width: var(--content-width);
    margin: 0 var(--content-margin-right) 0 var(--content-margin-left);
    padding: 2rem 1.5rem 4rem;
    font-family: Georgia, "Noto Serif", "Times New Roman", serif;
    font-size: 1.0625rem;
    line-height: 1.7;
    background: var(--bg);
    color: var(--fg);
}

/* Dar ekranda genişlik ve konum ayarının ikisi de anlamını yitiriyor: 560px'lik
   bir sütun zaten ekrandan geniş, "sağa yaslı" diye bir yer de yok. Bu yüzden
   telefonda her blog aynı davranıyor, kenar boşluğunu sadece padding veriyor. */
@media (max-width: 700px) {
    body {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

h1, h2, h3 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }

p {
    margin: 0 0 1rem;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 2.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.header-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}

.blog-title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--fg);
    text-decoration: none;
}

.blog-title:hover {
    color: var(--accent);
}

.home-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.home-mark {
    width: 1.5em;
    height: 1.5em;
}

/* Menü (2026-08-06'da yeniden yazıldı).

   Eskiden linkler `margin-right` ile yan yana duran inline kutulardı ve
   şablon onları aralarında hiç boşluk bırakmadan basıyordu. İki bitişik
   inline kutu arasında satır kırma fırsatı YOK: tarayıcı "Köşeleri",
   "Şimdilerde", "Hakkımda", "İletişim" zincirini tek bir kopmaz parça
   sayıyordu. O parça satıra sığmayınca hepsi birden alt satıra iniyor,
   üst satırda 245 piksel boş yer kalıyordu. Kullanıcı bunu kendi
   blogunda gördü ve sordu.

   Flex sarması bunu kökünden çözüyor: her link ayrı bir öğe, sığmayan
   TEK BİR link alt satıra iniyor.

   `flex: 0 1 auto` neden: büyümek yok (`0`), ama daralmak serbest (`1`).
   Normal genişliklerde daralma hiç devreye girmiyor, çünkü flex satıra
   sığmayan öğeyi zaten alt satıra atıyor; daralma yalnızca TEK BAŞINA
   satıra sığmayan bir link kaldığında çalışıyor ve onu taşırmak yerine
   kendi içinde kırıyor. `flex: 0 0 auto` ile ölçüldü: 140 piksellik bir
   menüde uzun link kutunun dışına taşıyordu (2026-08-06). */
nav {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 1rem;
}

nav a {
    flex: 0 1 auto;
    color: var(--muted);
    font-size: 0.9375rem;
}

nav a:hover {
    color: var(--fg);
    text-decoration: none;
}

/* Panel üst menüsündeki "Çıkış yap", diğer nav linkleriyle aynı boyutta
   görünsün diye (2026-08-04, "Panelim" kaldırılıp bu satıra taşındı). */
nav .link-button {
    font-size: 0.9375rem;
}

/* Panel üst menüsünde "Ada" (logo ile) en solda (2026-08-07, ikinci geçiş:
   ilk sürümde sağdaydı, kullanıcı sonradan sola almayı tercih etti).
   Diğer nav linklerinden azıcık göze batsın diye biraz büyük ve `--fg`
   (diğerleri `--muted`) kullanılıyor.

   `inline-flex` DEĞİL: bir inline-flex kutunun taban çizgisi tarayıcı
   tarafından sentezleniyor ve düz metin linklerinin gerçek yazı taban
   çizgisiyle uyuşmuyordu, "Ada" satırın biraz üstünde duruyormuş gibi
   görünüyordu (`nav`'ın `align-items: baseline`'ı bunu büyütüyor). İkon
   burada normal satır içi bir öğe, hizası `vertical-align` ile elle
   ayarlanıyor; bu şekilde linkin taban çizgisi gerçek metin taban
   çizgisiyle aynı kalıyor. */
.nav-brand-link {
    color: var(--fg);
    font-size: 1.0625rem;
}

.nav-brand-mark {
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.22em;
    margin-right: 0.3rem;
}

nav .link-button:hover {
    text-decoration: none;
}

.auth-nav {
    margin-left: auto;
    font-size: 0.875rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.auth-nav a {
    color: var(--muted);
}

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

.site-footer {
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    font-size: 0.875rem;
}

/* Sadece footer'ın KENDİ linkleri (Dokümantasyon, İletişim): `>` bilerek
   var. Kural eskiden `.site-footer a` idi ve blog sahibinin footer metnine
   yazdığı linkleri de yakalıyordu; kullanıcı kendi blogunda "RSS" ile
   "veya" arasında beklemediği bir boşluk gördü (2026-08-07). Metnin
   içindeki linklerin arasını yazarın yazdığı boşluk belirler, bizim
   koyduğumuz bir marj değil.

   Aynı sızıntı marka işaretinde de olmuştu ve orada `margin-right: 0`
   ile tek tek kapatılmıştı; seçici daraltılınca o istisnaya da gerek
   kalmadı. */
.site-footer > a {
    color: var(--muted);
    margin-right: 1rem;
}

.site-footer > a:hover {
    color: var(--fg);
}

.blog-footer-text {
    margin-bottom: 0.75rem;
}

.blog-footer-attribution {
    color: var(--muted);
    margin: 0;
    text-align: center;
}

.blog-footer-attribution a {
    color: var(--muted);
    text-decoration: underline;
}

.blog-footer-attribution a:hover {
    color: var(--fg);
}

.ascii-mark-icon {
    width: 1.05em;
    height: 1.05em;
    vertical-align: -0.15em;
}

.inline-form {
    display: inline;
    margin: 0;
}

.link-button {
    background: none;
    border: none;
    padding: 0;
    color: var(--muted);
    text-decoration: none;
    cursor: pointer;
    font: inherit;
}

.link-button:hover {
    /* `background: none` burada da tekrar lazım: genel `button:hover`
       kuralı (element+pseudo-class) `.link-button` kuralının (tek class,
       :hover'sız) arkaplan sıfırlamasından daha spesifik, o yüzden hover'da
       accent rengi sızıyordu (2026-08-04, "Çıkış yap" üzerinde fark edildi). */
    background: none;
    color: var(--fg);
}

.blog-description {
    color: var(--muted);
    margin-bottom: 2rem;
}

.blog-description-empty {
    font-style: italic;
}

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

.post-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.3rem 0;
}

.post-list li:first-child {
    padding-top: 0;
}

/* Liste başlıkları metinle aynı renkte duruyor (sade, okunur bir görünüm için)
   ama bu tek başına bırakılınca tıklanabilir oldukları hiç belli olmuyordu:
   "Selamlar" yazan satırın bir bağlantı olduğunu ancak üzerine gelince
   anlıyordun. Çözüm soluk bir alt çizgi. Renk eklemek başlığı gürültülü
   yapardı, kutu ya da düğme ise bu kadar sade bir listeye ağır gelirdi; alt
   çizgi web'in en eski ve en anlaşılır işareti. Üzerine gelince hem yazı hem
   çizgi vurgu rengine dönüyor, yani hareket hâlâ görünüyor.

   `:not(.list-action-danger)` şart: bu kural aslında satır **başlığı** için
   yazıldı ama seçici `.post-list` içindeki her bağlantıyı yakalıyordu, yani
   satır sonundaki "sil" kutusunu da. Kutunun kendi kuralı (`color:
   var(--danger)`) daha düşük özgüllükte kaldığı için eziliyordu: kutu
   kırmızı kenarlıklı ama içi gövde renginde, altı çizili bir yazı oluyordu,
   ve üzerine gelince alt çizgi kaybolup zemin birden kırmızıya dönüyordu.
   Fark edilen şey o hovertı (2026-08-06). */
.post-list a:not(.list-action-danger) {
    color: var(--fg);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--border);
    text-underline-offset: 4px;
}

.post-list a:not(.list-action-danger):hover {
    color: var(--accent);
    text-decoration-color: var(--accent);
}

/* Satır sonundaki ikincil bağlantılar ("görüntüle ↗", tarih yanı) başlıkla
   aynı ağırlıkta durmasın: bağlantı oldukları alt çizgiden zaten belli. */
.explore-meta a {
    font-weight: 400;
}

.explore-meta {
    color: var(--muted);
    font-size: 0.875rem;
    white-space: nowrap;
}

.pagination {
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    margin-top: 1.5rem;
}

.post-list time,
article time {
    color: var(--muted);
    font-size: 0.875rem;
    white-space: nowrap;
}

article h1 {
    margin-top: 0;
}

article > time {
    display: block;
    margin-bottom: 1.5rem;
}

img {
    max-width: 100%;
    border-radius: 4px;
}

blockquote {
    margin: 1rem 0;
    padding: 0.25rem 1rem;
    border-left: 3px solid var(--border);
    color: var(--muted);
}

/* ==vurgulu== metin. Tarayıcının kendi varsayılanı sabit sarı zemin +
   siyah yazı; koyu temalarda göz çıkarıyor, kullanıcının kendi teması
   da onu değiştiremiyor. Bunun yerine temanın kendi renklerinden
   türetilen soluk bir zemin kullanılıyor, yani her temada okunuyor. */
mark {
    /* İlk satır yedek: color-mix'i tanımayan eski bir tarayıcı bunu
       kullanıyor, tanıyan ise bir alttaki satırla üzerine yazıyor. */
    background: var(--code-bg);
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    color: inherit;
    padding: 0.05em 0.25em;
    border-radius: 3px;
}

/* Dipnotlar. Uzantı listeyi sayfanın en altına bir <div class="footnote">
   içine koyuyor ve başına bir <hr> ekliyor; o çizgi zaten ayırıcı görevi
   gördüğü için burada sadece metni küçültüp soluklaştırıyoruz. */
.footnote {
    margin-top: 2rem;
    font-size: 0.9em;
    color: var(--muted);
}

.footnote ol {
    padding-left: 1.2rem;
}

/* Dipnot numarasının metin satırını itmemesi için. */
sup, sub {
    line-height: 0;
}

pre {
    overflow-x: auto;
    padding: 1rem;
    border-radius: 6px;
    background: var(--code-bg);
}

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9em;
}

:not(pre) > code {
    background: var(--code-bg);
    padding: 0.15em 0.4em;
    border-radius: 4px;
}

table {
    border-collapse: collapse;
    width: 100%;
    margin: 1rem 0;
}

th, td {
    border: 1px solid var(--border);
    padding: 0.5rem 0.75rem;
    text-align: left;
}

/* Markdown tablosundaki hizalama (`|:---:|` gibi) hücreye `align="center"`
   özniteliği olarak yazılıyor. Tarayıcı bu özniteliği bir "sunum ipucu"
   sayıyor ve sunum ipuçları HERHANGİ bir yazar CSS kuralından daha düşük
   öncelikli; yani yukarıdaki `text-align: left` onu eziyor ve hizalama söz
   dizimi kabul edilmesine rağmen ekranda hiçbir şey olmuyordu. Aşağıdaki
   üç kural özniteliği tekrar geçerli kılıyor. */
th[align="left"], td[align="left"] { text-align: left; }
th[align="center"], td[align="center"] { text-align: center; }
th[align="right"], td[align="right"] { text-align: right; }

th {
    font-weight: 600;
}

hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 2rem 0;
}

form p {
    margin-bottom: 1.25rem;
}

label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.9375rem;
    color: var(--muted);
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--fg);
    font: inherit;
}

/* Açılır liste (şu an sadece saat dilimi seçimi). Tam genişlik verilmiyor:
   içeriği kadar yer kaplasın, yanındaki "Kaydet" düğmesiyle aynı satırda kalsın. */
select {
    max-width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--fg);
    font: inherit;
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

textarea {
    min-height: 320px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.helptext {
    display: block;
    color: var(--muted);
    font-size: 0.8125rem;
    margin-top: 0.35rem;
}

/* Bir yardım metni madde madde anlatılması gerektiğinde (ör. yayın zamanı
   biçimi) `<div class="helptext">` bir `<ul>` sarmalıyor; tarayıcının
   varsayılan liste boşluğu diğer yardım metinleriyle aynı sıklıkta kalsın
   diye sıfırlanıp yeniden ayarlanıyor. */
.helptext ul {
    margin: 0;
    padding-left: 1.1rem;
}

.helptext li + li {
    margin-top: 0.3rem;
}

/* Blog ayarlarındaki "blog adresi" alanının altında tam alan adını gösterir
   (bkz. blog_form.html). Yazı/sayfa editörlerindeki "adres" bir yol parçası
   iken burası sitenin tamamının adı, bu satır o farkı görünür kılıyor. */
.slug-preview {
    margin: 0.35rem 0 0;
    font-size: 0.8125rem;
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.slug-preview-note {
    font-family: inherit;
    opacity: 0.7;
}

/* Manifestonun sonundaki motif dipnotu: aynı işaret footer'da da var
   (main/templates/main/_brand_mark.html) ama orada 1.05em, göz kırpınca
   kaybolacak kadar küçük. Burada işaretin kendisini gösterdiğimiz için
   büyütülüyor, metnin solunda hizalı duruyor. */
.motif-note {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: 2rem;
}

.motif-note-icon {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
}

input.editor-title-input {
    display: block;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--code-bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    padding: 0.4rem 0.65rem;
    margin: 0 0 1.25rem;
}

input.editor-title-input:hover {
    border-color: var(--muted);
}

input.editor-title-input:focus {
    outline: none;
    border-color: var(--accent);
}

input.editor-title-input::placeholder {
    color: var(--muted);
    font-weight: 400;
}

.title-input-wrap {
    position: relative;
}

.title-input-wrap::after {
    content: "";
    position: absolute;
    right: 0.68rem;
    top: 0.55rem;
    width: 2px;
    height: 1.95rem;
    background: var(--accent);
    animation: blink-caret 1s step-end infinite;
    pointer-events: none;
}

.title-input-wrap:focus-within::after {
    display: none;
}

@keyframes blink-caret {
    50% {
        opacity: 0;
    }
}

.attributes {
    margin-bottom: 1.25rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0 0.9rem;
}

/* Blok kapalıyken alt çizgi gereksiz, çünkü altında gösterecek satır yok. */
.attributes-label {
    padding: 0.6rem 0;
    color: var(--muted);
    font-size: 0.8125rem;
    list-style: none;
}

/* Ok, tıklanabilirlik imleci ve açılma davranışı sadece <details><summary>
   olarak kullanıldığında (yazı/sayfa editörü): oradaki kutu gerçekten
   kapanabiliyor. Blog ayarlarındaki kutu her zaman açık bir <div>, bu
   yüzden aşağıdaki dört kural `summary` etiketine daraltıldı; aksi halde
   tıklanamayan bir etikete yanıltıcı bir "▸" ve el imleci binerdi. */
summary.attributes-label {
    cursor: pointer;
}

summary.attributes-label::-webkit-details-marker {
    display: none;
}

summary.attributes-label::before {
    content: "▸ ";
}

.attributes[open] > summary.attributes-label {
    border-bottom: 1px solid var(--border);
}

.attributes[open] > summary.attributes-label::before {
    content: "▾ ";
}

summary.attributes-label:hover {
    color: var(--fg);
}

.attributes-field {
    padding: 0.6rem 0;
}

.attributes-field:not(:last-child) {
    border-bottom: 1px solid var(--border);
}

/* Bearblog'un "More info" açılır bölümü (2026-08-04): attribute alanlarının
   altındaki uzun yardım metinleri artık varsayılan gizli, native <details>
   ile (JS gerekmiyor). Editör ilk açıldığında sadece başlık + kompakt
   attribute satırları görünüyor. */
.attributes-more {
    margin: -0.5rem 0 1.25rem;
}

.attributes-more summary {
    color: var(--muted);
    font-size: 0.8125rem;
    cursor: pointer;
    width: fit-content;
}

.attributes-more summary:hover {
    color: var(--fg);
}

.attributes-more .helptext {
    margin-top: 0.5rem;
}

/* "Daha fazla bilgi" artık Detaylar kutusunun içinde duruyor; dışarıdaki
   negatif üst boşluğu orada anlamsız. */
.attributes > .attributes-more {
    margin: 0;
    padding: 0.6rem 0;
}

.attributes-row {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.6rem 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875rem;
}

.attributes-row:not(:last-child) {
    border-bottom: 1px solid var(--border);
}

.attributes-field .attributes-row {
    padding: 0;
    border-bottom: none;
}

.attributes-row label {
    flex: 0 0 auto;
    /* En uzun etiket "yayın zamanı:" (yazı formu). Daha dar olursa iki satıra
       kırılıyor ve satırlar arasındaki hizalama bozuluyor. */
    width: 7rem;
    margin: 0;
    color: var(--muted);
    font-family: inherit;
    font-size: inherit;
}

/* Metin kutusu ve açılır liste aynı görünsün: ikisi de "detaylar" kutusunun
   içinde yan yana duruyor. Yayın zamanı da düz bir metin kutusu, yani
   buradaki kurala kendiliğinden giriyor (2026-08-03'e kadar tarayıcının
   datetime-local seçicisiydi, bkz. main/forms.py::PostForm). `select`
   tarayıcının kendi elemanı, bilerek: 400 satırlık bir saat dilimi listesi
   için elle bir şey yazmanın anlamı yok. Bu yüzden sadece çerçeve ve renk
   hizalanıyor, davranışa dokunulmuyor. */
.attributes-row input[type="text"],
.attributes-row select {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg);
    padding: 0.25rem 0.5rem;
    font: inherit;
    color: var(--fg);
    min-width: 0;
}

.attributes-row input[type="text"]:hover,
.attributes-row select:hover {
    border-color: var(--muted);
}

.attributes-row input[type="text"]:focus,
.attributes-row select:focus {
    outline: none;
    border-color: var(--accent);
}

.attributes-row.checkbox-row input {
    flex: 0 0 auto;
    order: 2;
}

/* "taslak:" gibi kısa etiketler 7rem'e sığıyor ama "Blogum Keşfet'te
   görünsün" gibi uzun bir onay kutusu etiketi o genişlikte üç satıra
   bölünüyordu. Bu değişiklikte etiket serbest genişlikte, tek satırda. */
.attributes-row.checkbox-row-wide label {
    width: auto;
    white-space: nowrap;
    color: var(--fg);
}

.editor-content {
    min-height: 400px;
}

/* Footer birkaç satırlık bir şey: bir isim, bir yıl, belki bir link. Yukarıdaki
   genel textarea kuralı 320 piksellik bir alt sınır koyuyor ve o sınır yüzünden
   footer kutusu karşılama metni editörü kadar yer kaplıyordu; formdaki rows="4"
   tek başına yetmiyor, CSS onu eziyor. */
.footer-textarea {
    min-height: 0;
}

.editor-actions {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
}

/* Navigasyon sayfasındaki yardım bölümü. Menü artık ok tuşlarıyla sıralanan
   bir liste değil, tek bir metin kutusu (bkz. main/nav.py), o yüzden eski
   .nav-order-* kuralları 2026-08-04'te kaldırıldı. */
.nav-help {
    margin-top: 1.5rem;
    font-size: 0.9375rem;
}

.nav-help summary {
    cursor: pointer;
    color: var(--muted);
}

.nav-help ul {
    padding-left: 1.2rem;
}

.editor-view-link,
.editor-back-link {
    font-size: 0.9375rem;
}

/* Üstteki işlem satırında geri linki en solda, kaydetme butonundan önce
   geliyor (referans editördeki "← Back" ile aynı yer). */
.editor-back-link {
    color: var(--muted);
}

.editor-back-link:hover {
    color: var(--fg);
}

/* Önizleme penceresinin en üstündeki şerit. Referanstaki önizleme de
   böyle bir şeritle açılıyor: solda ne olduğu, sağda nasıl yenileneceği.

   Renk blogun temasından BAĞIMSIZ ve bilerek öyle: bu şerit sayfanın
   parçası değil, sayfanın üstüne konmuş bir uyarı. Blogun teması onu
   kendi rengine boyasaydı yazının bir parçası gibi görünürdü. */
.preview-banner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin: 0 0 1.5rem;
    padding: 0.4rem 0.75rem;
    background: #f0a868;
    color: #2b1c0b;
    font-size: 0.8125rem;
    border-radius: 4px;
}

.preview-banner-label {
    font-weight: 700;
    letter-spacing: 0.08em;
}

.list-action-danger {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border: 1px solid var(--danger);
    border-radius: 4px;
    color: var(--danger);
    font-size: 0.8125rem;
}

.list-action-danger:hover {
    background: var(--danger);
    /* Sabit beyaz değil: koyu temada --danger açık pembe, üstünde beyaz yazı
       okunmuyor. Sayfa zemini iki temada da doğru kontrastı veriyor. */
    color: var(--bg);
    text-decoration: none;
}

button {
    display: inline-block;
    padding: 0.55rem 1.1rem;
    border-radius: 6px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--accent-fg);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

button:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

button[value="preview"] {
    background: transparent;
    color: var(--accent);
}

button[value="preview"]:hover {
    background: var(--code-bg);
}

.button-danger {
    border-color: var(--danger);
    background: var(--danger);
}

.button-danger:hover {
    background: var(--danger-hover);
    border-color: var(--danger-hover);
}

.preview-box {
    border: 1px dashed var(--border);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-top: 1.5rem;
}

/* Hata bildirimleri: bir kutu, sadece kırmızı bir yazı değil.
   Önceden `.error` yalnızca yazı rengini değiştiriyordu ve açık temadaki
   koyu bordo (#611a15) normal metinden ayırt edilmiyordu; formu kaydedemeyen
   kullanıcı hatanın nereye çıktığını göremiyordu. Renk tek başına yeterli bir
   işaret de değil: renk körlüğü olan biri için kutu, kenarlık ve konum
   kalıyor, bu yüzden üçü birden veriliyor.

   `.errorlist` Django'nun `{{ form.as_p }}` çıktısındaki kendi hata listesi
   (giriş, kayıt, şifre sıfırlama sayfaları onu kullanıyor). Şimdiye kadar
   hiç biçimlendirilmemişti, yani o sayfalarda hatalar madde işaretli düz bir
   liste olarak çıkıyordu. Panel formlarındaki `.error` ile aynı görünüyorlar
   ki hata nereden gelirse gelsin aynı şey gibi okunsun. */
.error,
.errorlist {
    background: var(--error-bg);
    color: var(--error-fg);
    border-left: 3px solid var(--danger);
    border-radius: 0 6px 6px 0;
    padding: 0.625rem 0.875rem;
    margin: 0.5rem 0;
    font-size: 0.9375rem;
    list-style: none;
}

.errorlist li + li {
    margin-top: 0.375rem;
}

.messages {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.messages li {
    padding: 0.75rem 1rem;
    border-radius: 0 6px 6px 0;
    margin-bottom: 0.5rem;
    font-size: 0.9375rem;
    /* Sol kenarlık her mesaj türünde var, rengi türe göre değişiyor. Sabit
       genişlik sayesinde mesajlar aynı hizada başlıyor. */
    border-left: 3px solid var(--border);
}

.messages .success {
    background: var(--success-bg);
    color: var(--success-fg);
    border-left-color: var(--success-fg);
}

.messages .error {
    background: var(--error-bg);
    color: var(--error-fg);
    border-left-color: var(--danger);
}

/* "Uyarı" ile "bilgi" ayrı şeyler, o yüzden aynı görünmüyorlar. Uyarı, bir
   işin yarım kaldığını söylüyor (ör. hesap açıldı ama doğrulama postası
   gönderilemedi); okunmadan geçilmemeli. Bilgi ise sadece durum bildiriyor
   (ör. "hesabın zaten doğrulanmış"), nötr kalması doğru. */
.messages .warning {
    background: var(--warning-bg);
    color: var(--warning-fg);
    border-left-color: var(--warning-fg);
}

.messages .info {
    border: 1px solid var(--border);
}

.verify-notice {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin: 0 0 1.5rem;
    font-size: 0.9375rem;
}

.verify-notice p {
    margin: 0 0 0.5rem;
}

.verify-notice p:last-child {
    margin: 0;
}

/* Bot tuzağı (bkz. main/bot_protection.py). Kayıt ve abone formlarındaki bu
   kutuyu sadece formu HTML olarak okuyan botlar görür ve doldurur, dolu gelen
   form reddedilir. `display: none` bilerek seçildi: ekran okuyucular da böyle
   gizlenmiş bir alanı hiç okumaz, yani görme engelli bir kullanıcı tuzağa
   düşmez (ekran dışına itmek, ör. left: -9999px, bunu sağlamazdı).
   İkinci seçici kutunun içinde durduğu satırı da kaldırıyor: `{{ form.as_p }}`
   her alanı bir <p> içine sarıyor ve boş kalan o <p> sayfada boşluk yapardı. */
.bot-tuzagi,
p:has(> .bot-tuzagi) {
    display: none;
}

.subscribe-form {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.subscribe-form input {
    flex: 1;
}

@media (max-width: 600px) {
    .subscribe-form {
        flex-direction: column;
    }
}

.panel-body {
    max-width: 1100px;
}

/* Kalıcı sol sidebar (2026-08-07, beşinci geçiş). Kullanıcı 10 mockup
   arasından Mataroa'nın grupsuz düz link listesini seçti: sidebar artık her
   panel sayfasında aynı yerde duruyor, bir linke tıklayınca kaybolmuyor.
   Öncesindeki "sadece Panel sayfasında büyük menü, diğerlerinde breadcrumb"
   yaklaşımı (`.panel-breadcrumb`, `.panel-nav-group`) tamamen bunun yerine
   geçti. */
.panel-shell {
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
}

.panel-sidebar {
    width: 180px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: sticky;
    top: 2rem;
}

.panel-sidebar-brand {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--fg);
    text-decoration: none;
}

.panel-sidebar-links {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.panel-sidebar-links a {
    color: var(--muted);
    font-size: 0.9375rem;
    text-decoration: none;
}

.panel-sidebar-links a:hover {
    color: var(--fg);
    text-decoration: underline;
}

.panel-sidebar-links a.active {
    color: var(--accent);
    font-weight: 600;
}

.panel-sidebar-foot {
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.panel-sidebar-foot a {
    color: var(--muted);
    font-size: 0.875rem;
    text-decoration: none;
}

.panel-sidebar-foot a:hover {
    color: var(--fg);
    text-decoration: underline;
}

.panel-nav-danger {
    color: var(--danger) !important;
}

.panel-main {
    min-width: 0;
    flex: 1;
}

@media (max-width: 700px) {
    .panel-shell {
        flex-direction: column;
        gap: 1.5rem;
    }

    .panel-sidebar {
        width: 100%;
        position: static;
    }

    .panel-sidebar-links {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.25rem 1rem;
    }
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.stat-number {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.stat-label {
    color: var(--muted);
    font-size: 0.8125rem;
}

/* Görsel kitaplığı (panel → Görseller) */
.image-upload-form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.image-list {
    /* Vesikalık ızgara: her kutu aynı boyda, satıra kaç tane sığıyorsa o kadar.
       `auto-fill` + `minmax` sayesinde ayrı bir mobil kuralı gerekmiyor, dar
       ekranda kendiliğinden tek sütuna iniyor. */
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1rem;
}

.image-list li {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.6rem;
    min-width: 0;
}

.image-list li img {
    /* Kutu sabit yükseklikte, görsel içine oturuyor: farklı en-boy oranındaki
       görseller yan yana dizilirken ızgara zıplamasın. `contain` kırpmıyor,
       yani hangi görsel olduğu tanınıyor. */
    display: block;
    width: 100%;
    height: 120px;
    object-fit: contain;
    background: var(--code-bg);
    border-radius: 4px;
}

.image-list-empty {
    color: var(--muted);
    /* Boş liste kutusu ızgaranın tamamını kaplasın, tek başına dar bir
       hücrede asılı kalmasın. */
    grid-column: 1 / -1;
    border: none;
    padding: 0;
}

.image-name {
    margin: 0.5rem 0 0.15rem;
    font-size: 0.875rem;
    /* Uzun dosya adı kutuyu genişletmesin: tek satırda kesiliyor, tamamı
       fareyle üstüne gelince görünüyor (title özniteliği). */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.image-copy {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.image-copy input {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    padding: 0.2rem 0.4rem;
}

.image-copy button {
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    background: transparent;
    color: var(--fg);
    border: 1px solid var(--border);
    white-space: nowrap;
}

.image-copy button:hover {
    background: var(--code-bg);
}

.image-actions {
    margin: 0.5rem 0 0;
}

/* Metin kutusunun hemen altındaki bar: SOLDA Markdown yardımına giden link,
   SAĞDA araçlar (Görsel ekle, Görseller, Önizle). Yerleşim 2026-08-06'da
   referans alınan editöre göre kuruldu; kaydetme işlemleri artık en üstte.

   Öncesinde burada uzun bir ipucu cümlesi vardı. Bir cümleyi her yazıda
   okumak yerine, ihtiyaç duyan kişiyi dokümantasyondaki Markdown sayfasına
   göndermek daha az gürültü yapıyor. */
.editor-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.25rem 1.5rem;
    margin-top: 0.4rem;
    font-size: 0.8125rem;
}

.editor-bar-tools {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    /* Açılan görsel kutusunun tutunacağı yer, aşağıya bak. */
    position: relative;
}

.editor-bar a,
.editor-bar .link-button {
    color: var(--muted);
    font-size: inherit;
}

.editor-bar a:hover,
.editor-bar .link-button:hover {
    color: var(--fg);
}

/* "Görsel ekle": arada hiçbir kutu yok, doğrudan dosya seçme penceresini
   açıyor (2026-08-06). Görünen şey gizli dosya alanının <label>'ı; bir
   label'a tıklamak bağlı olduğu alanı tetikliyor, yani bu davranış HTML'in
   kendisinden geliyor, JavaScript'ten değil.

   Öncesinde burada açılıp kapanan bir <details> vardı. Kullanıcı onu
   gereksiz buldu: tek bir iş için (dosya seçmek) araya bir adım koyuyordu. */
.editor-image-trigger {
    color: var(--muted);
    cursor: pointer;
}

.editor-image-trigger:hover {
    color: var(--fg);
}

/* Dosya alanı ekranda görünmüyor ama DOM'da duruyor: klavyeyle
   erişilebilir kalsın ve label onu tetikleyebilsin diye `display: none`
   değil, bir piksellik bir alan. */
.editor-image-file {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* JavaScript çalışıyorsa gizleniyor (bkz. gorsel.js): dosya seçilir
   seçilmez yükleme kendiliğinden başlıyor. JS yoksa görünür kalıyor ve
   iş iki tıkla yine bitiyor. */
.editor-image-upload {
    font-size: 0.8125rem;
}

/* Yükleme sonucu: barın altında, sadece bir yükleme olduğunda beliriyor. */
.editor-image-result {
    margin-top: 0.6rem;
}

.editor-image-result .image-copy {
    max-width: 480px;
}



.image-confirm-preview {
    max-width: 320px;
    height: auto;
    border: 1px solid var(--border);
    border-radius: 4px;
}

.theme-grid-frame {
    max-height: 640px;
    overflow-y: auto;
    padding: 0.9rem;
    margin-bottom: 2rem;
    border: 1px solid var(--border);
    border-radius: 4px;
}

.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.9rem;
}

.theme-swatch-item {
    position: relative;
}

.theme-radio-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.theme-swatch {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--bg);
}

.theme-swatch-thumb {
    display: block;
    width: 100%;
    height: 108px;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid var(--border);
}

.theme-swatch-iframe {
    display: block;
    width: 640px;
    height: 400px;
    border: none;
    pointer-events: none;
    transform: scale(0.28);
    transform-origin: top left;
}

.theme-swatch-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 0.85rem;
    font-weight: 500;
    font-size: 0.9375rem;
    box-sizing: border-box;
}

.theme-swatch:hover {
    border-color: var(--accent);
}

.theme-radio-input:checked + .theme-swatch {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.theme-radio-input:focus-visible + .theme-swatch {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.theme-swatch-dot {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.theme-swatch-active {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.theme-apply-button {
    margin-bottom: 2rem;
}

/* Tema sayfasının altındaki genişlik/konum radyo grubu. Django'nun RadioSelect'i
   her seçeneği kendi <div>'ine sarıyor, buradaki kurallar o yapının üstüne
   yazılmış. */
.layout-options {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    margin-bottom: 1rem;
}

.layout-options fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

.layout-options legend {
    padding: 0;
    color: var(--muted);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}

.layout-options label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9375rem;
    cursor: pointer;
}

.layout-options input[type="radio"] {
    margin: 0;
}

/* Pygments (codehilite) kod bloğu renklendirmesi, açık mod */
.codehilite .c { color: #3D7B7B; font-style: italic }
.codehilite .k { color: #008000; font-weight: bold }
.codehilite .o { color: #666 }
.codehilite .cm { color: #3D7B7B; font-style: italic }
.codehilite .cp { color: #9C6500 }
.codehilite .c1 { color: #3D7B7B; font-style: italic }
.codehilite .kc { color: #008000; font-weight: bold }
.codehilite .kd { color: #008000; font-weight: bold }
.codehilite .kn { color: #008000; font-weight: bold }
.codehilite .kt { color: #B00040 }
.codehilite .m { color: #666 }
.codehilite .s { color: #BA2121 }
.codehilite .na { color: #687822 }
.codehilite .nb { color: #008000 }
.codehilite .nc { color: #00F; font-weight: bold }
.codehilite .no { color: #800 }
.codehilite .nd { color: #A2F }
.codehilite .ne { color: #CB3F38; font-weight: bold }
.codehilite .nf { color: #00F }
.codehilite .nn { color: #00F; font-weight: bold }
.codehilite .nt { color: #008000; font-weight: bold }
.codehilite .nv { color: #19177C }
.codehilite .ow { color: #A2F; font-weight: bold }
.codehilite .s1, .codehilite .s2 { color: #BA2121 }

@media (prefers-color-scheme: dark) {
    /* Pygments (codehilite) kod bloğu renklendirmesi, koyu mod (monokai tabanlı) */
    .codehilite .c { color: #959077 }
    .codehilite .k { color: #66D9EF }
    .codehilite .o { color: #FF4689 }
    .codehilite .cm { color: #959077 }
    .codehilite .cp { color: #959077 }
    .codehilite .c1 { color: #959077 }
    .codehilite .kc { color: #66D9EF }
    .codehilite .kd { color: #66D9EF }
    .codehilite .kn { color: #FF4689 }
    .codehilite .kt { color: #66D9EF }
    .codehilite .m { color: #AE81FF }
    .codehilite .s { color: #E6DB74 }
    .codehilite .na { color: #A6E22E }
    .codehilite .nb { color: #F8F8F2 }
    .codehilite .nc { color: #A6E22E }
    .codehilite .no { color: #66D9EF }
    .codehilite .nd { color: #A6E22E }
    .codehilite .ne { color: #A6E22E }
    .codehilite .nf { color: #A6E22E }
    .codehilite .nn { color: #F8F8F2 }
    .codehilite .nt { color: #FF4689 }
    .codehilite .nv { color: #F8F8F2 }
    .codehilite .ow { color: #FF4689 }
    .codehilite .s1, .codehilite .s2 { color: #E6DB74 }
}

/* Dokümantasyon (bkz. main/templates/main/docs.html ve docs/detay.html).
   Index, kategorilere ayrılmış bir link listesi; her linkin altında ne
   olduğunu anlatan tek satırlık bir not var, okuyucu 27 başlıktan
   hangisinin işine yaradığını tıklamadan görebilsin diye. */
.docs-intro {
    color: var(--muted);
    max-width: 60ch;
}

.docs-group {
    margin-top: 2.25rem;
}

.docs-group h2 {
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--muted);
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
}

.docs-list {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
}

.docs-list li + li {
    margin-top: 0.7rem;
}

/* Not, linkin altına geçiyor: başlıklar tek bir dikey hat üzerinde
   kalınca liste taranabilir oluyor, aynı satırda kalsalardı göz her
   satırda linki yeniden aramak zorunda kalırdı. */
.docs-list-note {
    display: block;
    color: var(--muted);
    font-size: 0.9em;
    max-width: 62ch;
}
.docs-soon {
    font-size: 0.75rem;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0.05rem 0.4rem;
    margin-left: 0.4rem;
    white-space: nowrap;
}
.docs-back {
    margin-bottom: 0.5rem;
}

/* Konu sayfasının altındaki "önceki / sonraki" gezinmesi. Tek komşu
   varsa (listenin ilk ve son konusu) `space-between` onu yanlış tarafa
   iterdi, o yüzden sonraki linki `margin-left: auto` ile sağa
   yaslanıyor: önceki yoksa bile sonraki sağda kalıyor. */
.docs-komsu {
    display: flex;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.docs-komsu a {
    display: block;
    max-width: 45%;
}

.docs-komsu-sonraki {
    margin-left: auto;
    text-align: right;
}

.docs-komsu-etiket {
    display: block;
    font-size: 0.8em;
    color: var(--muted);
}
@media (max-width: 600px) {
    .docs-index { grid-template-columns: 1fr; }
}