: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;
}

/* Dar ekranda tablonun SAYFAYI değil kendini kaydırması için. Tablo doğrudan
   sayfada dursaydı, dar bir telefonda bütün panel sağa taşar ve yatay kaydırma
   çubuğu sayfanın tamamına gelirdi (bkz. docs/troubleshooting.md → "Panelde
   bir sayfa telefonda sağa taşıyor"). Sarmalayıcı, taşmayı tablonun kendi
   kutusunda tutuyor. */
.table-scroll {
    overflow-x: auto;
}

/* Alan adı sayfasındaki DNS kayıtları tablosu. Değerler kopyalanacak şeyler,
   o yüzden satır içinde bölünmemeleri gerekiyor. */
.dns-table {
    white-space: nowrap;
}

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);
}

/* Onay kutusu etiketiyle aynı satırda dursun (2026-08-13).

   Yukarıdaki `display: block` metin kutuları için doğru: etiket üstte, kutu
   altında. Ama onay kutusunda aynı kural etiketi tam satır yapıp kutuyu bir
   alt satıra düşürüyordu ve ikisinin aynı şeyi anlattığı görünmüyordu (blog
   oluşturma ekranı). Kural sadece Django'nun `as_p` ile bastığı formlar için;
   elle yazılan yerler `checkbox-row` sınıfını kullanıyor. */
form p:has(> input[type="checkbox"]) label {
    display: inline;
    margin-bottom: 0;
    margin-right: 0.45rem;
}

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;
}

/* Ücretli planda olan bir özelliğin kapalı hâli (ör. Görseller sayfasında
   yükleme formunun yerine geçen satır). Bilerek bir hata kutusu gibi değil:
   kullanıcı yanlış bir şey yapmadı, o özellik onun planında yok. Kenardaki
   çizgi vurgu renginde, çünkü bu bir uyarı değil bir bilgi. */
.plan-locked {
    border-left: 3px solid var(--accent);
    padding-left: 0.75rem;
    margin: 1rem 0;
}

/* İstatistik ekranı. Grafik saf CSS: her gün bir sütun, yüksekliği yüzde
   olarak sunucuda hesaplanıyor (bkz. main/istatistik.py::ozet). Bir grafik
   kütüphanesi bu tek ekran için hem bağımlılık hem JavaScript demekti.

   Çubuklar `align-items: flex-end` ile tabandan yükseliyor ve `flex: 1` ile
   kaç gün olursa olsun kutuya sığıyor: 7 günde geniş, 90 günde ince
   çubuklar çıkıyor, yatay kaydırma hiç doğmuyor. */
.istatistik-araliklar a,
.istatistik-araliklar strong {
    margin-right: 0.9rem;
}

.istatistik-toplam {
    font-size: 1.1rem;
    margin: 0.75rem 0 1.25rem;
}

/* Grafik, solunda y ekseni etiketleriyle birlikte tek bir satır. */
.istatistik-grafik-alan {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.istatistik-eksen-y {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--muted);
    /* Etiketler çizgilerin tam hizasında dursun diye: üstteki değer
       grafiğin tepesine, sıfır tabanına yaslanıyor. */
    line-height: 1;
    padding-bottom: 0.2rem;
}

.istatistik-grafik {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 1px;
    height: 140px;
    /* Sıfır okumalı bir günün de bir yeri olduğu görünsün diye zeminde
       ince bir çizgi var; boş kutu "veri yok" gibi okunurdu. */
    border-bottom: 1px solid var(--border);
    /* Aralıktaki her gün bir sütun. Tek gün veri olan bir blogta çubuğun
       bütün genişliği kaplamaması için üst sınır: 7 günlük aralıkta
       çubuklar rahat, 365 günlükte ince kalıyor ama ikisi de aynı
       hizada başlıyor. */
    justify-content: flex-start;
}

.istatistik-cubuk-alan {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-end;
    position: relative;
}

/* Bilgi balonu. Tarayıcının kendi `title` balonu kullanılmıyor, çünkü o
   yaklaşık bir saniye gecikiyor ve gecikmesi ayarlanamıyor; burada gecikme
   sıfır. `pointer-events: none` şart: balon çubuğun üstünü kaplasaydı
   fareyi kendi üzerine alır, çubuk "hover" olmaktan çıkar ve balon sürekli
   yanıp sönerdi. */
.istatistik-cubuk-alan:hover::after {
    content: attr(data-bilgi);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 4px;
    white-space: nowrap;
    background: var(--fg);
    color: var(--bg);
    padding: 0.15rem 0.4rem;
    font-size: 0.75rem;
    pointer-events: none;
    z-index: 2;
}

/* Uçlardaki çubukların balonu grafiğin dışına taşmasın diye kenara
   yaslanıyor: ortalanmış bir balon ilk ve son günde ekranı taşırırdı. */
.istatistik-cubuk-alan:first-child:hover::after {
    left: 0;
    transform: none;
}

.istatistik-cubuk-alan:last-child:hover::after {
    left: auto;
    right: 0;
    transform: none;
}

.istatistik-cubuk {
    width: 100%;
    background: var(--accent);
    /* Sayılar zaten metin olarak da yazılı; çubuk sadece biçim. */
    opacity: 0.75;
}

.istatistik-eksen {
    display: flex;
    justify-content: space-between;
    margin-top: 0;
}

/* Listeler: solda ad, sağda sayı. Kompakt tutuluyor (kendi liste
   biçimlendirmesi var, `.post-list` değil): bu ekranda bir satır bir
   kayıt değil bir veri noktası, gövde metni sıklığında dizilince sayfa
   gereksiz uzuyor ve karşılaştırmak zorlaşıyor. */
.istatistik-liste {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
}

.istatistik-liste li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.15rem 0;
    font-size: 0.95rem;
}

/* Uzun bir yazı başlığı sayıyı sıkıştırmasın: ad kalan yeri alıyor,
   sığmayan kısım üç noktayla kesiliyor. */
.istatistik-ad {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.istatistik-sayi {
    flex: none;
    font-variant-numeric: tabular-nums;
}

/* Satırın yanındaki "yeni sekmede aç" oku. Başlığın kendisi o satırın
   istatistiğine filtreliyor, ok ise gerçek adrese gidiyor; ikisi ayrı
   linkler olduğu için ok soluk duruyor ve altı çizilmiyor. */
.istatistik-dis {
    margin-left: 0.3rem;
    color: var(--muted);
    text-decoration: none;
}

.istatistik-filtre {
    margin: 0.5rem 0 0;
}

.istatistik-filtre-kaldir {
    margin-left: 0.6rem;
    font-size: 0.85rem;
}

/* İki satırlık düzen: üstte iki geniş sütun (sayfalar, nereden geldiler),
   altta dört dar sütun (cihaz, işletim sistemi, tarayıcı, ülke). Tek bir
   `auto-fit` ızgarada hepsi eşit sütuna düşüyordu ve "Sayfalar" tek başına
   tam genişliği kaplayıp ekranı dağıtıyordu. `auto-fit` + `minmax` sütun
   sayısını yere göre seçtiği için ayrıca medya sorgusu gerekmiyor: dar
   ekranda ikisi de tek sütuna iniyor. */
.istatistik-genis-satir {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0 2.5rem;
}

.istatistik-dar-satir {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0 1.5rem;
}

.istatistik-genis-satir h2,
.istatistik-dar-satir h2 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin: 1.5rem 0 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border);
    /* Başlık solda, sütun adları sağda: sayıların hizasında dursunlar. */
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

/* "okuma / tekil" — iki sayının hangisinin ne olduğunu söyleyen etiket.
   Başlıktan ayrılsın diye büyük harfe çevrilmiyor. */
.istatistik-legend {
    text-transform: none;
    letter-spacing: 0;
    font-weight: normal;
}

/* 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;
}

/* Özel alan adı sayfasındaki yedek A-kaydı tablosu (2026-08-14). Aynı native
   <details> kalıbı: asıl tablo hep açık, bu ikinci yol kapalı duruyor.
   Kapalı olmasının sebebi yer kazanmak değil, tercih sırasını göstermek. */
.dns-yedek {
    margin: 0.5rem 0 1.25rem;
}

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

.dns-yedek summary:hover {
    color: var(--fg);
}

.dns-yedek .table-scroll {
    margin-top: 0.75rem;
}

/* "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;
}

/* Planında olmayan bir yere giden link (ör. limite gelmiş hesapta "+ Yeni blog
   oluştur"). Soluk ama tıklanabilir: açılan sayfa neden kapalı olduğunu
   anlatıyor. `pointer-events: none` ile gerçekten kapatmak, kullanıcıyı
   gerekçeyi hiç göremeyeceği bir yerde bırakırdı. Renk `--muted`, yani
   karşıtlığı ölçülmüş bir değer (bkz. "Koyu mod karşıtlığı"). */
.panel-nav-muted {
    color: var(--muted) !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;
    }

    /* Ölçüldü (2026-08-12, 390 piksellik ekran): panel sayfaları telefonda
       ekrandan taşıyordu, blog ayarları sayfası 390 piksellik ekranda 662
       piksel yer kaplıyordu. Sebep yukarıdaki `.panel-shell`in
       `align-items: flex-start` kuralı: sütun yönüne dönünce yatay eksen
       "çapraz eksen" oluyor ve `flex-start` her öğeyi İÇERİĞİ kadar
       genişletiyor, ekran kadar değil. `.panel-sidebar` kendi `width: 100%`
       kuralı sayesinde kurtuluyordu, `.panel-main`in ise böyle bir kuralı
       yoktu: içinde küçülemeyen tek bir öğe (aşağıdaki tek satıra zorlanmış
       etiket) varsa bütün sütun onun genişliğine kilitleniyordu.
       `flex: 1` bunu çözmüyor, o ana eksene (sütunda: dikey) bakıyor. */
    .panel-main {
        width: 100%;
    }

    /* Bu etiket masaüstünde tek satırda dursun diye `nowrap` (yukarıya bak),
       ama telefonda o kural satırı küçülemez hâle getirip yukarıdaki taşmayı
       besliyordu. Dar ekranda iki satıra bölünmesi sorun değil. */
    .attributes-row.checkbox-row-wide label {
        white-space: normal;
    }
}

.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;
}

/* Sütunlar bilerek SABİT genişlikte, esnek (`1fr`) değil. Önizleme bir
   iframe ve iframe'ler `object-fit` gibi kendiliğinden ölçeklenmiyor:
   aşağıdaki `.theme-swatch-iframe` 640 pikseli 0,28 ile çarpıp sabit 179
   piksele indiriyor. Sütun bundan genişse aradaki fark kutunun sağında boş
   beyaz bir alan olarak kalıyordu — telefonda tek sütun ~313 piksele
   çıktığı için orada göze batıyordu, ama masaüstünde de vardı. Sütun
   genişliği artık her ekranda önizlemenin genişliğiyle aynı, yani boşluk
   hiçbir yerde oluşmuyor; ekran daraldıkça sütun SAYISI değişiyor.
   `justify-content: center` tek sütun kalınca ızgarayı ortalıyor. */
.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 180px);
    justify-content: center;
    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-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; }
}

/* Panel ekranının en altındaki doküman linki. Sayfanın geri kalanından
   ayrılsın diye üstünde ince bir çizgi var, ama dikkat çekmesi istenmiyor:
   takılan kullanıcı için bir çıkış kapısı, bir çağrı değil. */
.yardim-linki {
    margin-top: 2.5rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
    font-size: 0.8125rem;
    color: var(--muted);
}