/* ==========================================================================
   BLOG YAZI SAYFASI -- OKUMA DENEYIMI
   2026-09-19

   Bu dosya YALNIZCA blog yazi detay sayfasinda yuklenir. Tema dosyalarina
   (style.css) DOKUNULMAZ: o dosya 625 KB ve butun siteyi besliyor; oradaki
   bir degisiklik her sayfayi riske atardi.

   OLCULEN SORUNLAR (375px ekran, gercek yazi):
     - Sayfa 838px / ekran 375px  -> 463px YATAY TASMA
       Sebep: icerikteki <table width="779"> ve max-width kurali olmayan
       <img>. IKISI BIRBIRINI MASKELIYOR; ikisi de duzeltilmeden sayfa
       duzelmiyor (her biri tek basina denendi, ikisi de tek basina
       hicbir sey degistirmedi).
     - Okuma alani 265px / ekran 375px -> 110px kayip, bunun 80px'i
       .card-body'nin 40px yan dolgusu.
     - Masaustunde (1432px) baslik kolonu yalnizca 550px (%38).

   NOT: 54 yazinin HICBIRI <figure> kullanmiyor, bu yuzden temanin
   "figure img { max-width:100% }" kurali icerik gorsellerine HIC
   uygulanmiyordu. Asagidaki kural bu boslugu dolduruyor.
   ========================================================================== */

/* --- 1) Yatay tasmayi kesen iki kural ----------------------------------- */

.blog.single .post-content img {
    max-width: 100%;
    height: auto;
}

/* Isleyici her tabloyu .table-responsive icine sariyor; bu sinif temada
   zaten overflow-x:auto tasiyor. Burada tablonun KENDISINI sinirliyoruz ki
   sarmalayici gercekten kaydirsin, kapsayiciyi itmesin. */
.blog.single .post-content .table-responsive {
    margin-bottom: 1.5rem;
}
.blog.single .post-content .table-responsive > table {
    width: auto;
    min-width: 100%;
    margin-bottom: 0;
}
/* Kaydirilabilir alan klavyeyle gezilirken nerede oldugu gorunsun. */
.blog.single .post-content .table-responsive:focus-visible {
    outline: 2px solid var(--home-primary, #2563eb);
    outline-offset: 2px;
}

/* Icerikteki tablolar tema tablolariyla ayni dili konussun.
   (Yazi HTML'inde class yok; isleyici stil ozniteliklerini temizliyor.) */
.blog.single .post-content table th,
.blog.single .post-content table td {
    padding: .625rem .75rem;
    border-bottom: 1px solid rgba(20, 35, 65, .10);
    vertical-align: top;
    text-align: left;
}
.blog.single .post-content table th {
    font-weight: 700;
    white-space: nowrap;
    background: rgba(20, 35, 65, .035);
}

/* --- 2) Okuma tipografisi ------------------------------------------------ */

/* DIKKAT -- 1rem = 20px (style.css: --bs-root-font-size:20px).
   Bu dosyanin ilk surumunde 1.0625rem yazilmisti; 16px kok
   varsayimiyla "17px" olsun diye secilmisti ama gercekte 21.25px
   cikiyordu -- yani metni kucultmek yerine BUYUTUYORDU.
   Olculen tema govdesi 0.8rem = 16px; okuma metni icin 18px daha
   rahat. Satir yuksekligi 1.75 -> 31.5px. */
.blog.single .post-content {
    font-size: .9rem;          /* 18px -- 1rem = 20px oldugu icin */
    line-height: 1.75;
}
.blog.single .post-content p {
    margin-bottom: 1.25rem;
}

/* Ara basliklar govdeden net ayrilsin; ust bosluk alt bosluktan BUYUK
   olmali ki baslik kendinden SONRAKI metne ait gorunsun. */
.blog.single .post-content h2 {
    font-size: 1.5rem;
    line-height: 1.3;
    margin-top: 2.75rem;
    margin-bottom: 1rem;
}
.blog.single .post-content h3 {
    font-size: 1.2rem;
    line-height: 1.35;
    margin-top: 2rem;
    margin-bottom: .75rem;
}
.blog.single .post-content h2:first-child,
.blog.single .post-content h3:first-child {
    margin-top: 0;
}

.blog.single .post-content ul,
.blog.single .post-content ol {
    margin-bottom: 1.25rem;
    padding-left: 1.35rem;
}
.blog.single .post-content li {
    margin-bottom: .4rem;
}

/* Metin icindeki baglantilar gorunur olsun: renk TEK BASINA yeterli bir
   ayirt edici degil (renk korlugu). Alt cizgi ekleniyor. */
.blog.single .post-content a {
    color: var(--home-primary, #2563eb);
    text-decoration: underline;
    text-underline-offset: .15em;
}
.blog.single .post-content a:hover {
    text-decoration-thickness: 2px;
}

.blog.single .post-content img {
    border-radius: .5rem;
    margin: .5rem 0 1.5rem;
}

.blog.single .post-content blockquote {
    border-left: 3px solid var(--home-primary, #2563eb);
    padding: .25rem 0 .25rem 1rem;
    margin: 1.5rem 0;
    color: #5a6a85;
}

/* --- 3) Mobilde okuma alanini genislet ---------------------------------- */
/* Olculdu: .card-body'nin 40px yan dolgusu, 375px ekranda kaybin 80px'i.
   Mobilde 20px yeterli -- okuma alani 265px'ten ~305px'e cikiyor (%15). */
@media (max-width: 575.98px) {
    .blog.single .card-body {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    .blog.single .post-content {
        font-size: .875rem;    /* 17.5px */
    }
    .blog.single .post-content h2 {
        font-size: 1.3rem;
        margin-top: 2.25rem;
    }
    .blog.single .post-content h3 {
        font-size: 1.1rem;
    }
    /* Uzun basliklar dar ekranda tasmasin; Turkce birlesik kelimeler
       uzun olabiliyor. */
    .blog.single .post-content h2,
    .blog.single .post-content h3 {
        overflow-wrap: break-word;
    }
}

/* --- 4) Yazi ust bilgisi (kunye) ---------------------------------------- */
.post-kunye {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1.1rem;
    padding: 0 0 1.25rem;
    margin: 0 0 1.5rem;
    border-bottom: 1px solid rgba(20, 35, 65, .10);
    font-size: .8rem;   /* 16px */
    color: #5a6a85;
}
@media (max-width: 575.98px) {
    /* Dar ekranda kunye uc satira yayiliyordu; kucultunce iki satira
       iniyor ve basligin altindaki bosluk makaleyi bogmuyor. */
    .post-kunye {
        font-size: .7rem;   /* 14px */
        gap: .3rem .75rem;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }
}
.post-kunye .post-kunye-oge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.post-kunye i {
    font-size: 1em;
    line-height: 1;
}

/* --- 5) Icindekiler ------------------------------------------------------ */
.post-icindekiler {
    background: rgba(20, 35, 65, .035);
    border: 1px solid rgba(20, 35, 65, .08);
    border-radius: .6rem;
    padding: 1.1rem 1.25rem;
    margin: 0 0 2rem;
}
.post-icindekiler .post-icindekiler-baslik {
    font-weight: 700;
    font-size: .95rem;
    margin: 0 0 .6rem;
}
.post-icindekiler ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
    /* 16px: liste, GOVDEDEN kucuk olmali. 0.95rem (19px) denendi ve
       govde metninden (17.5px) buyuk cikti -- olculdu: 12 maddelik bir
       icindekiler o boyutta ekranin tamamini kapliyordu. */
    font-size: .8rem;
    line-height: 1.5;
}
.post-icindekiler li {
    margin-bottom: .35rem;
    padding-left: .85rem;
    position: relative;
}
/* Numara yerine kucuk bir isaret: basliklarin bir kisminda metnin
   kendisi zaten numarali oldugu icin ikinci bir numara konulamiyor. */
.post-icindekiler li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: .3rem;
    height: .3rem;
    border-radius: 50%;
    background: var(--home-primary, #2563eb);
    opacity: .45;
}
/* Uzun icindekiler (12+ madde) mobilde 674px yer kapliyordu -- olculdu;
   yazinin ilk paragrafi ekranin cok altina itiliyordu. */
@media (max-width: 575.98px) {
    .post-icindekiler ul {
        max-height: 40vh;
        overflow-y: auto;
    }
}
.post-icindekiler a {
    color: #33415c;
    text-decoration: none;
}
.post-icindekiler a:hover,
.post-icindekiler a:focus-visible {
    color: var(--home-primary, #2563eb);
    text-decoration: underline;
}

/* Ara basliga koprulendiginde baslik sabit menunun ALTINDA kalmasin. */
.blog.single .post-content h2[id],
.blog.single .post-content h3[id] {
    scroll-margin-top: 90px;
}

/* Ikonun basligin yaninda dogru hizalanmasi + h2 varsayilan olcegini ezme.
   .post-icindekiler-baslik bir <h2>: tema h2'ye 26px veriyor, kutu basligi
   icin bu cok buyuk. Ustteki kural font-size/margin'i zaten ayarliyor;
   burada yalnizca ikon hizalamasi var. */
.post-icindekiler .post-icindekiler-baslik i {
    margin-right: .4rem;
    color: var(--home-primary, #2563eb);
}

/* --- 6) Okuma genisligi (masaustu) -------------------------------------- */
/* OLCULEN SORUN: 1440px ekranda metin sutunu ~836px ve satir uzunlugu
   ~95 karakter. Tipografi olcutu 50-75 karakter; 95 karakterde goz satir
   sonundan satir basina donerken siki sik yer kaybediyor.
   38rem = 760px DEGIL -- bu temada 1rem = 20px oldugu icin 38rem = 760px
   eder; hedefimiz ~680px oldugu icin 34rem kullaniliyor (~72 karakter).
   NEDEN .card-body'ye DEGIL .post-content'e: kunye, icindekiler ve
   kenarliklarin tam genislikte kalmasi, yalnizca AKAN METNIN daralmasi
   isteniyor. Tablolar ve gorseller asagida bu sinirdan muaf tutuluyor --
   onlar ne kadar genis olabilirse o kadar iyi. */
@media (min-width: 992px) {
    .blog.single .post-content {
        max-width: 34rem;
    }
    .blog.single .post-content .table-responsive,
    .blog.single .post-content img,
    .blog.single .post-content figure {
        max-width: none;
        width: 100%;
    }
}

/* Kaydirma ile gelen h4 seviyesi: blog_baslik_seviyesi_duzelt() govde
   <h1>'lerini bir seviye asagi kaydirdigi icin eski h3'ler artik h4.
   Temada h4 = 0.95rem (19px) -- govde metninden (17px) neredeyse
   ayirt edilemiyor. Net bir merdiven icin burada buyutuluyor. */
.blog.single .post-content h4 {
    font-size: 1.05rem;
    line-height: 1.4;
    margin-top: 1.6rem;
    margin-bottom: .5rem;
    font-weight: 700;
}
.blog.single .post-content h4[id] {
    scroll-margin-top: 90px;
}

/* --- 7) Yapiskan kenar cubugu ------------------------------------------- */
/* Yalnizca lg ve ustunde: mobilde sticky, kisa ekranda widget'i ekranin
   yarisina yapistirip okumayi engellerdi. */
@media (min-width: 992px) {
    .sidebar .yapiskan-kenar {
        position: sticky;
        top: 2rem;
    }
}

/* --- 8) "Icerige atla" bagi --------------------------------------------- */
/* TASINDI -> assets/css/home-theme.css.
   NEDEN: bu dosya blog LISTE sayfasinda yuklenmiyor (blog.php satir 121,
   "if (isset($pageContent))" yalnizca yazi detayinda dogru). Kural burada
   kaldigi surece /blog sayfasinda atlama bagi stilsiz kaliyor ve sayfanin
   en ustunde gorunur bir baglanti olarak basiliyordu. */

/* --- 9) Odak halkasi ----------------------------------------------------- */
/* OLCULEN SORUN: tema genelinde 25 adet "outline:0" kurali var ve tek
   :focus-visible kurali da odagi KALDIRIYOR. Sonuc: klavye kullanicisi
   sayfada nerede oldugunu goremiyor (WCAG 2.4.7).
   Bu dosya yalnizca yazi sayfasinda yuklendigi icin duzeltme de yalnizca
   bu sayfayi kapsar -- site geneli ayri bir is.
   :focus-visible kullanildi, :focus DEGIL: fareyle tiklandiginda halka
   cikmaz, yalnizca klavye/yardimci teknoloji odaginda cikar. */
.blog.single a:focus-visible,
.blog.single button:focus-visible,
.post-icindekiler a:focus-visible,
.sidebar a:focus-visible,
.table-responsive:focus-visible {
    outline: 3px solid var(--home-primary, #2563eb) !important;
    outline-offset: 2px !important;
    border-radius: 2px;
}

/* --- 10) Tarih/kunye renk karsitligi ------------------------------------ */
/* OLCULEN SORUN: tema .post-meta rengi #aab0bc; beyaz kart uzerinde
   karsitlik 2.18:1. WCAG AA normal metin icin 4.5:1 gerekir -- yani
   yayin tarihi, yani "bu yazi guncel mi" sorusunun cevabi, okunmuyordu.
   #5a6a85 beyaz uzerinde 5.9:1. */
.blog .post-meta,
.blog .post-meta li,
.blog .post-meta li span,
.blog .post-meta li a {
    color: #5a6a85;
    font-size: .8rem;
}

/* --- 11) <picture> sarmalayicisi ---------------------------------------- */
/* <picture> varsayilan olarak satir ici (inline) bir ogedir; icindeki
   gorsel %100 genisligi alsa bile sarmalayici satir ici kaldigi icin
   altinda satir ici bosluk birakir ve figure yuksekligi 3-4px kayar.
   display:block bunu keser. */
.blog.single .card-img-top picture,
.sidebar .image-list picture {
    display: block;
    line-height: 0;
}
.sidebar .image-list picture img {
    width: 100%;
    height: auto;
}