/* ==========================================================================
   Blog (Solo) — kalip katmani
   --------------------------------------------------------------------------
   Ortak katmanin (ghost-ortak.css) ustune biner. Buradaki kurallar yalnizca
   bloga ait; kalip farkini tasiyan yer burasi.

   BLOGUN KALIBI: uzun metin.
   Okuma konforu once gelir; olcu (satir uzunlugu), satir araligi ve baslik
   hiyerarsisi buna gore ayarlanir. Gorsel ikinci plandadir.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Okuma olcusu
   Uzun metinde satir uzunlugu okunurlugun en belirleyici degiskeni. Ana
   sitedeki metin bloklari 50-52 karakterde duruyor; burada metin ana icerik
   oldugu icin biraz daha genis, tipografide onerilen 65-75 karakter
   araliginda tutuluyor.
   -------------------------------------------------------------------------- */

/* NOT: burada bir max-width kurali vardi, islevsizdi ve kaldirildi.
   Solo icerigi 12 sutunlu izgarada `grid-column: 4 / span 6` ile
   konumlandiriyor; olcuyu izgara belirledigi icin cocuklara verilen
   max-width hicbir sey degistirmiyordu. Olculdu: 55 karakter, tipografide
   onerilen 45-75 araliginda. Temanin kalibiyla kavga edilmiyor. */

/* Govde puntosu blogda ortak tokenden BIR KADEME asagida.
   17px okunakliydi ama satir basina az kelime aliyor ve yazi gereginden
   cok yer kapliyordu. Liste maddeleri ve giris paragrafi de ayni olcekten
   turedigi icin tek degisken yetiyor. */
.gh-content {
    --icerik-govde: 16px;
}

@media (max-width: 767px) {
    .gh-content {
        --icerik-govde: 15.5px;
    }
}

.gh-content > p,
.gh-content > ul,
.gh-content > ol,
.gh-content > ul > li,
.gh-content > ol > li {
    font-size: var(--icerik-govde);
    line-height: var(--da-satir-govde);
}

/* Paragraf arasi bosluk, satir araligiyla orantili olmali; aksi halde
   paragraflar ya birbirine yapisir ya da kopuk durur. */
.gh-content > p + p {
    margin-top: var(--da-bosluk-6);
}

/* --------------------------------------------------------------------------
   Baslik hiyerarsisi
   Yazi icindeki basliklar govdeden acikca ayrilmali ama sayfa basligiyla
   yarismamali. Ustlerindeki bosluk altlarindakinin iki kati: baslik kendinden
   sonraki metne aittir, oncekine degil (yakinlik ilkesi).
   -------------------------------------------------------------------------- */

.gh-content > h2,
.gh-content > h3 {
    margin-top: var(--da-bosluk-12);
    margin-bottom: var(--da-bosluk-4);
    line-height: var(--da-satir-siki);
}

/* Yazi basligi 24px'e indigi icin icerik basliklari da altina cekildi;
   aksi halde govde icindeki h2 (27px) sayfa basligindan buyuk kaliyordu. */
.gh-content > h2 {
    font-size: 21px;
}

.gh-content > h3 {
    font-size: 18px;
}

/* --------------------------------------------------------------------------
   Yazi basligi ve kunye
   -------------------------------------------------------------------------- */

.gh-article-title {
    letter-spacing: -.02em;
    line-height: 1.15;
}

.gh-article-excerpt {
    color: var(--da-metin);
    line-height: var(--da-satir-govde);
}

.gh-article-tag,
.gh-article-tag a {
    color: var(--da-turuncu-metin);
    font-weight: var(--da-agirlik-kalin);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: var(--da-olcek-kucuk);
}

/* --------------------------------------------------------------------------
   Yazi listesi
   Ana sayfadaki kartlar ortak katmandan kart dilini aliyor; burada yalnizca
   ritim ayarlaniyor.
   -------------------------------------------------------------------------- */

/* Solo'nun "classic feed" akisi her yaziyi tam genislikte, gorsel bir yanda
   metin diger yanda duran bir serit olarak diziyor. 1280px'te bir kart 1110
   piksel genisliginde ve basligi 46.8px oluyordu: alti yazi neredeyse dort
   ekran boyu suruyor, baslik ana sitedeki kart basliginin (14px) uc katini
   asiyordu. Editoryal bir dergi kalibi icin dogru, "ayni ailenin blogu" icin
   degil.

   Akis ana sitedeki icerik kartlarinin diline getiriliyor: beyaz zemin, ince
   kenarlik, 16/9 kapak ustte, metin altta, hover'da hafif yukselme. Kalip
   farki korunuyor -- ana sitede kartlar bir bolumun icinde uc tane, burada
   sayfanin tamami; ama ayni aileden olduklari ilk bakista belli.

   Mobilde tek sutun: kart genisligi zaten ekran kadar, ikinci sutun okuma
   olcusunu bozar. */
.gh-feed {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--da-bosluk-4);
}

@media (min-width: 768px) {
    .gh-feed {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Kirilma noktalari ana sitedeki icerik kartlariyla ayni: 768'de ikiye,
   992'de uce. Ayni ekran genisliginde iki mulkte ayni sayida kart
   gorulsun. */
@media (min-width: 992px) {
    .gh-feed {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* --- OZGULLUK NOTU ---
   Solo bu kurallari `.has-classic-feed .gh-card-*` ile yaziyor (0,2,x).
   Sade `.gh-card-*` (0,1,x) onlari yenemiyor: ilk denemede kural dosyada
   duruyor ama hicbir sey degismiyordu. Seciciler `.gh-feed` on ekiyle
   ayni seviyeye getirildi; esitlikte kaynak sirasi belirliyor ve bu dosya
   temadan sonra yukleniyor. */

/* Solo klasik akista kartlar arasina clamp(4.8rem, 4rem+2.5vw, 8rem)
   -- 1280px'te 72px -- ust marj koyuyor. Alt alta serit dizilirken
   dogruydu; izgarada satirin ilk karti marjsiz, digerleri marjli kaliyor
   ve ayni satirdaki kartlar 72px farkla bitiyordu. */
.gh-feed .gh-card + .gh-card {
    margin-top: 0;
}

/* Kabuk (zemin, kenarlik, yaricap, hover) .gh-card uzerinde ve ortak
   katmandan geliyor -- burada TEKRARLANMAMALI. Ilk surumde ayni kabuk
   baglantiya da verilmisti: 345px'lik kartin icinde 343px'lik ikinci bir
   cerceve olusuyor, iki cizgi 1px arayla ust uste binip kenar bulanik
   goruluyordu.
   Baglantiya kalan tek is kartin tamamini tiklanabilir yapmak. */
.gh-feed .gh-card-link {
    flex-direction: column;
    gap: 0;
    height: 100%;
}

/* Kapak orani temanin kendi ::before hilesinden geliyor (padding-bottom
   %56.25 = 16/9); ona dokunulmuyor. Degisen tek sey `flex`: tema figure'e
   de sarmalayiciya da `flex: 1` veriyor. Yatay dizilimde bu "iki yani esit
   bol" demekti; dikeyde ise gorsel kartin butun bos yuksekligini yutuyor
   ve 16/9 orani gecersiz kaliyordu (355px genislikte 392px yuksek gorsel
   olculdu). Artik gorsel kendi oraninda sabit, slack metin blogunda. */
.gh-feed .gh-card-image {
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
    background-color: var(--da-zemin);
}

.gh-feed .gh-card-wrapper {
    flex: 1 1 auto;
    width: 100%;
    padding: var(--da-kart-dolgu);
}

/* Baslik olcegi: ana sitede kart basligi govde ile ayni puntoda (1em),
   burada bir kademe uzerinde. Blog kartinda baslik tek bilgi kaynagi
   (ozet yok), o yuzden biraz daha agir olmayi hak ediyor. */
.gh-feed .gh-card-title {
    font-size: var(--da-olcek-3);
    line-height: var(--da-satir-siki);
}

/* Tarih/okuma suresi satiri kartin altina yapisir; boylece farkli
   uzunluktaki basliklar satirdaki kartlarin alt kenarini bozmaz. */
.gh-feed .gh-card-meta {
    margin-top: auto;
    padding-top: var(--da-bosluk-3);
}


/* --------------------------------------------------------------------------
   Hero okunabilirligi — NEDEN BURADA BIR SEY YOK
   --------------------------------------------------------------------------
   Buraya bir karartma katmani eklenmisti; kaldirildi. Iki sebeple yanlisti:

   1. Gereksizdi. Solo'nun kendi ortusu zaten var:
        .has-background-about .gh-about::before  -> siyah, opacity .4
      Ustune ikinci bir gradyan koymak gorseli fazladan karartiyordu.

   2. Zarar veriyordu. Katmani konumlandirmak icin .gh-about-inner'a
      position: relative verilmisti. Hero gorseli (.gh-about-image) mutlak
      konumlu ve inset: 0; referansi boylece bolumden (375px) ic kaba
      (327px) kaydi. Gorsel daralinca iki yanda 24px'lik serit aciga cikti
      ve temanin siyah ortusu beyaz zemin uzerinde gri bant olarak
      goruldu.

   Ders: bir temaya katman eklemeden once temanin ayni isi zaten yapip
   yapmadigina bak; ve mutlak konumlu cocugu olan bir ogeye position
   vermek o cocugun referansini degistirir.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Dar ekran
   --------------------------------------------------------------------------
   Kart basligi --da-olcek-3 kullandigi icin ortak katmandaki mobil kademe
   onu kendiliginden 20 -> 17px'e indiriyor; burada ayrica bir kural yok.
   (Solo'nun kendi olcegi -- clamp(3.2rem, 2.7rem+1.5625vw, 5.2rem), yani
   1280px'te 46.8px -- artik hic devrede degil: .gh-feed kurallari onu her
   boyutta yeniden yaziyor. O olcek tam genislikte editoryal serit icin
   dogruydu, kart izgarasi icin degil.)
   -------------------------------------------------------------------------- */

/* Ana sayfa herosu: 375px'te 32.3px olculdu, sayfa basligiyla (30px)
   yarisiyordu. Bir bolum tanitimi, sayfanin basligi degil. */
@media (max-width: 767px) {
    .gh-about-primary {
        font-size: 26px;
    }
}

/* --------------------------------------------------------------------------
   Yazi sayfasi: baslik ve kapak metin sutunuyla ayni izde
   --------------------------------------------------------------------------
   Solo'nun tuvali 12 ESIT sutun. Baslik `1 / span 9` (x=78), metin ise
   `4 / span 6` (x=355) izinde duruyordu: iki farkli sol kenar sayfayi iki
   parcaya boluyordu. Kapak da baslik blogunda `1 / span 12` mirasiyla
   tuvale ortalanip metinden 4px kayiyordu.

   Bu kural YALNIZCA burada: Taste isimli cizgi kullaniyor
   ([main-start] 720px [main-end]) ve ayni deger orada baslikla kapagi
   273px'lik bir seride saga firlatiyor.
   -------------------------------------------------------------------------- */
/* YALNIZCA 768 USTU. Solo'nun 12 sutunlu tuvali dar ekranda da duruyor;
   iz mobile de uygulaninca baslik 173px'lik bir seride kaliyor ve alti
   satira sariyordu (olculdu, 375px). Dar ekranda tam genislik dogru. */
@media (min-width: 768px) {
    .gh-article-title,
    .gh-content > .da-acilis-gorseli {
        grid-column: 4 / span 6;
    }
}