/* GENEL SAYFA ZEMİNİ — beyaz kartların görünmesi için saf beyaz değil */
html:not(.dark) body {
    background: #f7f8fa;
}

html.dark body {
    background: #000;
}



/* ALINTI BLOĞU — premium editoryal düzen: ince vurgu, arka plansız künye */
.quote-block-bg {
    position: relative;
    width: 100%;
    max-width: 100%;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
}

html.dark .quote-block-bg {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.quote-shell {
    position: relative;
    padding: 8px 0 0;
}

.quote-body {
    position: relative;
    min-width: 0;
    max-width: 100%;
}

/* ALINTI SATIRI */
.quote-copy-row {
    position: relative;
    display: block;
    min-width: 0;

    /* tırnak + çizgi için alan */
    padding-left: 24px;

    /* Tek satırlık alıntıda bile çizgi kaybolmasın */
    min-height: 48px;

    /* çizgi ile kitap künyesi arasında nefes */
    padding-bottom: 8px;
}


/* Tırnağın altından başlayan çok ince çizgi */
.quote-copy-row::before {
    content: "";
    position: absolute;

    left: 8px;
    top: 21px;

    /* Metin kısa olsa bile çizgi görünür */
    bottom: 5px;

    width: 1px;
    border-radius: 999px;

    background: rgba(29, 155, 240, 0.58);
}

html.dark .quote-copy-row::before {
    background: rgba(29, 155, 240, 0.70);
}


/* Tırnak çizginin tam tepesinde */
.quote-mark-inline {
    position: absolute;
    left: 0;
    top: 0;

    width: 17px;
    height: 17px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #1D9BF0;

    user-select: none;
    pointer-events: none;
}

.quote-mark-inline svg {
    display: block;
    width: 17px;
    height: 17px;
}


/* KİTAP KÜNYESİ — arka plansız */
.quote-book-meta {
    display: flex;
    align-items: center;
    gap: 10px;

    /*
     * Çizginin x eksenine hizalanır.
     * Çizgi burada DEVAM ETMEZ.
     */
    margin-left: 8px;
    margin-top: 6px;

    padding: 0;
    min-width: 0;

    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}


/* Daha küçük kitap kapağı */
.quote-book-cover {
    width: 29px;
    height: 42px;

    flex: 0 0 auto;
    object-fit: cover;

    border-radius: 3px;

    /* Perspektifi daha premium/sakin */
    transform: perspective(300px) rotateY(7deg);

    box-shadow:
        2px 4px 9px rgba(15, 23, 42, 0.16);
}
/* POST KARTLARI */
.post-card {
    background: #ffffff;
    border: 0;
    border-radius: 24px;
    margin-left: 20px !important;
    margin-right: 20px !important;
    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.06),
        0 1px 2px rgba(15, 23, 42, 0.04);

    transition: none;
}

/* KOYU TEMA — KART ZEMİNİ
   ===================================================================
   ÖLÇÜLDÜ (zemin #000 üzerinde, alfa kompozisyonu):
       eski taban   .045  -> rgb(11,11,11)   #0b0b0b
       eski hover   .055  -> rgb(14,14,14)   #0e0e0e
   Aradaki fark 3 birim; 0-255 ölçeğinde gözün ayırt etme eşiğinin
   altında. Yani kart hem çok karanlıktı hem de üstüne gelince
   pratikte hiçbir şey olmuyordu.

   YENİ KADEME (hepsi #000 üzerinde):
       taban   .08   -> rgb(20,20,20)  #141414
       hover   .115  -> rgb(29,29,29)  #1d1d1d   (fark 9 birim, net görünür)
       basılı  .14   -> rgb(36,36,36)  #242424

   Kullanıcının isteği "taban, hover rengi gibi olsun"du. Eski hover
   (.055) tabandan yalnızca 3 birim açıktı — onu taban yapsaydım
   "çok karanlık" şikâyeti aynen kalırdı. Bu yüzden kademenin tamamı
   yukarı taşındı ve aralar ölçülebilir hâle getirildi.

   SÜTUN ÇİZGİLERİ ETKİLENMİYOR: orta yüzeyin kenar çizgisi
   rgba(255,255,255,.10) = #1a1a1a ve kartın 10px dışında, siyah
   zeminin üstünde duruyor — kartla üst üste gelmiyor. */
html.dark .post-card {
    background: rgba(255,255,255,0.08);
    border: 0;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255,255,255,0.05);
}

/* BURADAKİ İKİ ":hover" KURALI SİLİNDİ.
   Aynı iki kural dosyanın ilerisinde "@media (hover:hover)" içinde bir
   daha yazılıydı ve farklı değerler taşıyordu (#fbfcfd / .055). Sonra
   geldikleri için masaüstünde zaten onlar kazanıyordu; buradakiler ölü
   koddu. AMA dokunmatik ekranda ölü değildi: medya sorgusu olmadığı için
   telefonda karta dokununca hover zemini YAPIŞIP KALIYORDU (parmak
   kalktıktan sonra da). Tek sürüm aşağıda, medya sorgusunun içinde. */


/* ==================================================
   ANA AKIŞ — KOMPAKT KART RİTMİ
   Yalnızca home.php içindeki .home-center-surface altında çalışır.
   Profil ve diğer sayfalardaki post_card kullanımını değiştirmez.
================================================== */
.home-center-surface .post-card {
    padding: 12px 16px 10px !important;
}

.home-center-surface .post-card > .flex {
    gap: 10px !important;
}

.home-center-surface .post-card > .flex > .flex-1 > .flex.items-start {
    padding-top: 0 !important;
    margin-bottom: 0px !important;
}



.home-center-surface .post-card .post-main-text {
    margin-bottom: 6px !important;
}

.home-center-surface .post-card .quote-optional-text {
    margin-bottom: 10px !important;
}

/* İÇERİK ile ETKİLEŞİM SATIRI ARASI.
   DİKKAT: metnin alt marjı ile .post-actions'ın üst marjı komşu
   kardeş marjıdır, ÇAKIŞIRLAR — görünen boşluk = max(ikisi), toplamı
   değil. O yüzden tek kaldıraç aşağıdaki margin-top.
   Alıntıda ayrıca quote-block-bg'nin kendi alt marjı vardı; ikisi de
   aynı sonucu versin diye o küçültüldü. */
.home-center-surface .post-card .quote-block-bg {
    margin-bottom: 10px !important;
}

.home-center-surface .post-card .post-actions {
    margin-top: 18px !important;   /* eskiden 10px — satır gönderiye yapışıktı */
}

/* KART BAŞLIĞINDAKİ TAKİP DÜĞMESİ
   .follow-btn'in genel ölçüsü layout.php'de tanımlı (32px yükseklik,
   6/14px dolgu, 13px punto) ve orası profil sayfasındaki büyük düğmeye
   göre ayarlı. Kart başlığında o ölçü fazla yer kaplıyor.

   GENEL KURALA DOKUNULMUYOR — yalnızca .post-card içindekiler
   küçülüyor. Böylece profil sayfası ve sağ paneldeki öneri satırları
   olduğu gibi kalıyor. */
.post-card .follow-btn {
    min-height: 26px;
    gap: 5px;
    padding: 4px 10px;
    font-size: 12px;
}

.post-card .follow-btn svg {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
}


/* POST MENÜ */
.pmenu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 220px;
    /* Hiçbir koşulda ekranın dışına taşmasın. */
    max-width: calc(100vw - 20px);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,.12);
    z-index: 50;
    overflow: hidden;
    display: none;
}

html.dark .pmenu {
    background: #1a1d24;
    border-color: rgba(255,255,255,.1);
}

.pmenu.open {
    display: block;
}

.pmenu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    color: inherit;
}

.pmenu-item:hover {
    background: rgba(0,0,0,.05);
}

html.dark .pmenu-item:hover {
    background: rgba(255,255,255,.06);
}

.pmenu-item.danger {
    color: #ef4444;
}

.pmenu-sep {
    height: 1px;
    background: #e5e7eb;
    margin: 4px 0;
}

html.dark .pmenu-sep {
    background: rgba(255,255,255,.08);
}

/* ==================================================
   POST KARTI YAZI AYARLARI
   Kartın yazı tiplerini aşağıdaki iki değişkenden topluca değiştirebilirsin.
================================================== */
.post-card {
    --post-ui-font: 'Jost', 'Jost Yedek', Arial, sans-serif;       /* Karttaki genel yazı tipi */
    --post-quote-font: 'Kenilla', Georgia, serif;   /* Yalnızca alıntı ve tırnak yazı tipi */
    font-synthesis: none;                            /* Tarayıcının yapay kalınlık üretmesini engeller */
}

/* 1. GÖRÜNEN KULLANICI ADI */
.post-display-name {
    font-family: var(--post-ui-font) !important; /* Yazı tipi */
    font-size: 16px !important;                  /* Boyut */
    font-weight: 600 !important;                 /* Kalınlık */
    color: #111827 !important;                   /* Açık tema rengi */
}

html.dark .post-display-name {
    color: #ffffff !important;                   /* Koyu tema rengi */
}

/* 2. PREMIUM YILDIZI
   İKİ SORUN VARDI (masaüstünde de mobilde de):

   a) ADLA ARASI ÇOK AÇIKTI. Markup'ta ad ile <span> arasında satır
      sonu var (post_card.php); tarayıcı onu GERÇEK BİR BOŞLUK olarak
      basıyor (~4px) ve üstüne Tailwind'in "ml-0.5"i (2px) biniyor.
      Toplam ~6px. Negatif marjla o boşluk geri alınıyor.

   b) SATIR DIŞINDA DURUYORDU. Ad 16px, yıldız 12px; ikisi aynı
      taban çizgisinde ama ✦ glifi kendi em kutusunun ortasında
      duruyor, gözle bir tık yukarıda görünüyordu. vertical-align
      ile ada göre ortalandı. */
/* ÖLÇÜ PUNTOYA BAĞLI — sabit px DEĞİL.
   Senin verdiğin 16px, ana kart adının 16px'ine göre doğruydu.
   Ama aynı rozet 12.5px'lik alıntı kutusu künyesinde, 13px'lik
   sıralama satırında ve takipçi kartlarında da basılıyor; orada
   yazıdan büyük kalıyordu.

   1em = "yazı ne kadarsa rozet de o kadar". 16px'lik adda yine
   16px çıkıyor, yani senin ayarın bozulmadı; 12.5px'lik satırda
   kendiliğinden 12.5px oluyor. Marj ve hizalama da aynı orana
   bağlandı (2/16 = .125em), yoksa küçük puntoda 2px orantısız
   büyük bir boşluk bırakıyordu. */
.post-premium-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 1em;
    height: 1em;

    /* KRİTİK: ikon asla ezilmesin */
    flex: 0 0 1em;
    min-width: 1em;
    min-height: 1em;

    margin-left: .125em;
    vertical-align: -.125em;
    line-height: 0;
}

.post-premium-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    flex-shrink: 0;
}



/* 3. @KULLANICIADI */
/* KONTRAST: #9ca3af beyaz üstünde 2.54:1 — WCAG AA sınırı 4.5.
   14px'lik metin için gerçek bir okunabilirlik kusuru.
   #656d7a ölçülmüş yedek: beyazda 5.22, #f6f7f9 yüzeyinde 4.87.
   review_card.css'teki .review-card-user-handle da aynı değere çekildi;
   iki kartın künye satırı birebir aynı kalıyor.
   KOYU TEMA DOKUNULMADI: #6b7280 siyah üstünde zaten ~4.8:1.
   GERİ ALMAK İÇİN: tek değer, #9ca3af yaz. */
.post-username {
    font-family: var(--post-ui-font) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #656d7a !important;
}

html.dark .post-username {
    color: #6b7280 !important;
}

/* Kullanıcının okunan sayfa toplamından gelen mevcut Okur Düzeyi.
   YALNIZCA ALINTI kartlarında basılıyor (post_card.php). */
.post-reader-level {
    flex: 0 0 100%;
    width: 100%;
    margin-top: -5px;   /* -3px'ti; ekran adıyla arası açıktı */
    color: #656d7a;   /* #7b8492 beyazda 3.8:1 idi — OKUNURLUK_20261026 */
    font-family: var(--post-ui-font) !important;
    font-size: 12px;
    font-weight: 450;
    line-height: 1.15;
}

html.dark .post-reader-level {
    color: #8b95a7;
}

/* 4. KULLANICI ADI İLE TARİH ARASINDAKİ NOKTA
   -------------------------------------------------------------------
   KALINLIK 400'E DÜŞÜRÜLMÜŞTÜ, GERİ ALINDI (700).
   Gerekçem "nokta ayırıcıdır, vurgu değil" idi ve tek başına doğruydu;
   ama değerlendirme kartındaki karşılığı (.review-card-header-separator)
   14px/700 olarak duruyordu. İkisini ayırınca gönderi kartındaki nokta
   inceldi ve satır SIKIŞMIŞ göründü — aradaki mesafe değişmemişti,
   noktanın kendisi küçülmüştü. İki kart aynı görünecekse tek referans
   değerlendirme kartı: 14px / 700.
   Renk #656d7a olarak KALIYOR (eski #9ca3af beyazda 2.54:1);
   review_card.css'teki ayıraç da aynı değere çekildi.

   MESAFE ZATEN EŞİTTİ, ÖLÇTÜM:
     gönderi kartı      .post-header-meta column-gap: 3px  -> her yan 3px
     değerlendirme      .review-card-header-separator margin: 0 3px -> 3px
   Yani "boşluk farkı" diye görünen şey boşluk değil, glif boyutuydu. */
.post-header-dot {
    font-family: var(--post-ui-font) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #656d7a !important;
}

html.dark .post-header-dot {
    color: #6b7280 !important;
}

/* 5. GÖNDERİ TARİHİ
   #9ca3af -> #656d7a. 12.5px'te 2.54:1 kontrast kabul edilemez; kucuk
   punto kontrast kusurunu buyutur. Hiyerarsi PUNTOYLA kuruluyor
   (ad 14.5 > @kullanici 14 > tarih 12.5), renkle degil — tipografi
   ureticisinin kendi notu da boyle diyor. */
.post-time {
    font-family: var(--post-ui-font) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #656d7a !important;
}

html.dark .post-time {
    color: #8b98a5 !important;   /* #6b7280 koyuda 4.0:1 idi — OKUNURLUK_20261026 */
}

/* 6. “HİKÂYE / DEĞERLENDİRME” ETİKETİ — KAPSÜL KALDIRILDI
   -------------------------------------------------------------------
   Markup'ta "bg-amber-50 ... rounded-full px-2 py-0.5" vardi: dolgulu
   kapsul icinde belirtme yazisi. Kullanicinin acik kurali bunu
   yasakliyor (istisna yalniz toast).

   Kapsul kalkinca etiketin ayirt edilebilirligi kayboluyordu: kunye
   satiri "@ahmet · 3sa Değerlendirme" diye okunuyor ve son kelime
   tarihin devami saniliyordu. Cozum YENI bir gorsel dil degil, satirin
   zaten kullandigi ayirici: ::before ile bir nokta. Markup'a dokunmadan
   X'teki "@user · 3h · Sponsored" kalibinin aynisi cikiyor.

   Renk @kullanici ve tarihle ayni (#656d7a). Mavi/amber ayrimi
   KASITLI OLARAK atildi: renk kapsulun hayaleti olurdu, ayrimi
   kelimenin kendisi zaten tasiyor. */
.post-type-label {
    font-family: var(--post-ui-font) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #656d7a !important;
    background: none !important;
    padding: 0 !important;
}

.post-type-label::before {
    content: "·";
    margin-right: 5px;
    font-weight: 400;
}

html.dark .post-type-label {
    color: #8b95a7 !important;
}

/* 7. NORMAL GÖNDERİ / DEĞERLENDİRME METNİ */
.post-main-text {
    font-family: var(--post-ui-font) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;   /* 1.5 → 1.42 → 1.35. 15px'te 20.3px satır. */
    letter-spacing: 0 !important;
    color: #000 !important;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
}
/* İSİM SATIRI → GÖNDERİ METNİ ARASI */
.post-card > .flex > .flex-1 > .flex.items-start:not(:has(.post-reader-level)) {
    margin-bottom: -8px !important;
}
html.dark .post-main-text {
    color: #f3f4f6 !important;
}

/* 8. ALINTININ ÜSTÜNDEKİ OPSİYONEL AÇIKLAMA */
.quote-optional-text {
    font-family: var(--post-ui-font) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;   /* gönderi metniyle aynı */
    letter-spacing: 0 !important;
    color: #000 !important;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
}

html.dark .quote-optional-text {
    color: #eff1f3 !important;
}

/* 9. ASIL ALINTI METNİ */
.quote-main-text {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 2px;
    font-family: var(--post-quote-font) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.30 !important;   /* Alıntı satır aralığı: küçüldükçe satırlar yaklaşır */
    color: #1f2937 !important;
    letter-spacing: .015em !important;
}

html.dark .quote-main-text {
    color: #e5e7eb !important;
}

/* 10. ALINTI VURGUSU
   Büyük tırnak kaldırıldı; vurgu quote-copy-row üzerindeki 1px çizgiyle veriliyor. */

/* 11. BÜTÜN KİTAP ADLARI */
/* 11. BÜTÜN KİTAP ADLARI
   RENK DÜŞÜRÜLDÜ. Eskiden #111827 (neredeyse siyah) idi ve koyu temada
   bembeyazdı; kart içinde gönderinin kendisi kadar yer kaplıyor,
   göz önce oraya gidiyordu. Amaç alıntıya/gönderiye odaklanmak.
   Artık yazar adıyla aynı aileden, bir tık üstünde. */
.post-book-title {
    font-family: var(--post-ui-font) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;   /* 1.3'tü — künye iki satır arası açık duruyordu */
    color: #5f6772 !important;
}

.post-quote-book-title {
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
}

/* Koyu temada YAZAR ADIYLA BİREBİR AYNI renk (#929cab). */
html.dark .post-book-title {
    color: #929cab !important;
}

/* Yalnızca alıntı kartındaki kitap adı: .post-quote-book-title */
/* Yalnızca normal gönderi/değerlendirmedeki kitap adı: .post-standard-book-title */

/* 12. BÜTÜN KİTAP YAZARLARI */
/* Markup'ta yazar satırında "mt-0.5" (2px) var; satır yüksekliği
   düşünce o da gereksiz kaldı, 1px'e indirildi. */
.post-book-author {
    font-family: var(--post-ui-font) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    margin-top: 1px !important;
    color: #6b7280 !important;
}

html.dark .post-book-author {
    color: #9ca3af !important;
}

.post-quote-book-author {
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: #7b8492 !important;
}

html.dark .post-quote-book-author {
    color: #929cab !important;
}

/* Yalnızca alıntı kartındaki yazar: .post-quote-book-author */
/* Yalnızca normal gönderi/değerlendirmedeki yazar: .post-standard-book-author */

/* 13. GÖNDERİ / ALINTI METNİ — seçilebilir ve kopyalanabilir */
.post-content {
    cursor: text !important;
    user-select: text !important;
    -webkit-user-select: text !important;
}

/* #ETİKETLER, @BAHSETMELER VE METİN İÇİ LİNKLER */
.post-card .post-content a:not(.post-read-more) {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 500 !important;
    color: #1D9BF0 !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.post-card .post-content a:not(.post-read-more):hover {
    color: #1d4ed8 !important;
    text-decoration: underline !important;
}

html.dark .post-card .post-content a:not(.post-read-more) {
    color: #60a5fa !important;
}

/* 14. BÜTÜN “DEVAMINI GÖR” YAZILARI */
.post-read-more {
    font-family: var(--post-ui-font) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #656d7a !important;   /* #9ca3af 2.54:1 idi; bu bir BAGLANTI */
    text-decoration: none !important;
}

.post-read-more:hover {
    color: #374151 !important;
}

html.dark .post-read-more {
    color: #9ca3af !important;
}

html.dark .post-read-more:hover {
    color: #e5e7eb !important;
}

/* Ayrı ayrı değiştirmek için:
   .quote-optional-read-more = opsiyonel açıklamadaki “Devamını gör”
   .quote-read-more          = alıntıdaki “Devamını gör”
   .post-main-read-more      = normal gönderideki “Devamını gör”
*/

/* 15. YORUM / REBOOK / BEĞENİ / GÖRÜNTÜLENME SAYILARI */
.post-action-count {
    font-family: var(--post-ui-font) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #656d7a !important;   /* #8b94a1 beyazda 3.0:1 idi — OKUNURLUK_20261026 */
}

/* Ayrı ayrı değiştirmek için:
   .post-comment-count = yorum sayısı
   .post-rebook-count  = rebook sayısı
   .post-like-count    = beğeni sayısı
   .post-view-count    = görüntülenme sayısı
*/

/* 16. ÜÇ NOKTA MENÜSÜNDEKİ BÜTÜN YAZILAR */
.pmenu-item {
    font-family: var(--post-ui-font) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.pmenu-item:not(.danger) {
    color: #111827 !important;
}

html.dark .pmenu-item:not(.danger) {
    color: #f3f4f6 !important;
}

.pmenu-item.danger {
    color: #ef4444 !important;
}

.post-header-meta {
    max-width: 100%;
    column-gap: 3px !important;
    row-gap: 4px !important;
}

.post-display-name,
.post-username {
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Menü yazılarını ayrı ayrı değiştirmek için:
   .post-menu-copy-text     = “Bağlantıyı kopyala”
   .post-menu-delete-text   = “Gönderiyi sil”
   .post-menu-block-text    = engelleme yazısının tamamı
   .post-menu-block-username = engelleme yazısındaki @kullanıcıadı
*/


/* HİKÂYELER — AKIŞTA CANLI ÖNİZLEME */
.post-story-preview {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 14px;
    margin: 13px 0 4px;
    padding: 13px;
    border: 1px solid #e3e7eb;
    border-radius: 17px;
    background: #fbfcfd;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.post-story-preview:hover { border-color:#c7d0da; background:#fff; box-shadow:0 9px 24px rgba(15,23,42,.07); }
html.dark .post-story-preview { border-color:rgba(255,255,255,.10); background:rgba(255,255,255,.025); }
html.dark .post-story-preview:hover { border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.045); box-shadow:0 12px 28px rgba(0,0,0,.28); }


/* Ana akışta hikâye = kart içinde kart değil, doğrudan gönderi içeriği. */
.home-center-surface .post-story-preview {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
    margin: 8px 0 2px;
    padding: 2px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.home-center-surface .post-story-preview:hover,
html.dark .home-center-surface .post-story-preview,
html.dark .home-center-surface .post-story-preview:hover {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}
.home-center-surface .post-story-cover {
    width: 82px;
    border-radius: 12px;
}
.home-center-surface .post-story-body {
    padding: 0 2px 0 0;
}
.home-center-surface .post-story-eyebrow { margin-bottom: 4px; }
.home-center-surface .post-story-description { margin-top: 5px; }
.home-center-surface .post-story-meta { margin-top: 6px; }
.home-center-surface .post-story-action { padding-top: 7px; }
.post-story-cover { position:relative; width:92px; aspect-ratio:2/3; overflow:hidden; border-radius:11px; border:1px solid #dce2e8; background:radial-gradient(circle at 78% 16%,rgba(29,155,240,.22),transparent 30%),linear-gradient(145deg,#eef2f6,#dfe6ed); }
html.dark .post-story-cover { border-color:rgba(255,255,255,.10); background:radial-gradient(circle at 78% 16%,rgba(29,155,240,.24),transparent 32%),linear-gradient(145deg,#1b2029,#101319); }
.post-story-cover img { display:block; width:100%; height:100%; object-fit:cover; }
.post-story-auto-cover { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:11px; color:#172033; }
.post-story-auto-cover small { color:#1d9bf0; font-size:8px; font-weight:800; letter-spacing:.10em; text-transform:uppercase; }
.post-story-auto-cover strong { display:-webkit-box; overflow:hidden; font-size:13px; font-weight:700; line-height:1.2; letter-spacing:-.025em; -webkit-box-orient:vertical; -webkit-line-clamp:4; }
.post-story-auto-cover span { color:#697586; font-size:8px; }
html.dark .post-story-auto-cover { color:#f8fafc; }
html.dark .post-story-auto-cover span { color:#9ca3af; }
.post-story-body { display:flex; min-width:0; flex-direction:column; padding:2px 2px 1px 0; }
.post-story-eyebrow { margin-bottom:5px; color:#1d9bf0; font-family:var(--post-ui-font); font-size:9.5px; font-weight:800; letter-spacing:.095em; text-transform:uppercase; }
.post-story-eyebrow.is-urgent { color:#d97706; }
.post-story-title { display:-webkit-box; margin:0; overflow:hidden; color:#171717; font-family:var(--post-ui-font); font-size:16px; font-weight:700; line-height:1.2; letter-spacing:-.025em; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
html.dark .post-story-title { color:#f8fafc; }
.post-story-description { display:-webkit-box; margin:7px 0 0; overflow:hidden; color:#697586; font-family:var(--post-ui-font); font-size:12px; font-weight:400; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
html.dark .post-story-description { color:#9da7b4; }
.post-story-meta { display:flex; flex-wrap:wrap; gap:5px 11px; margin-top:9px; color:#8a94a2; font-family:var(--post-ui-font); font-size:10px; line-height:1.3; }
.post-story-action { display:inline-flex; align-items:center; gap:5px; width:max-content; margin-top:auto; padding-top:10px; color:#1d9bf0; font-family:var(--post-ui-font); font-size:11px; font-weight:700; }
.post-story-action svg { width:13px; height:13px; transition:transform .18s ease; }
.post-story-preview:hover .post-story-action svg { transform:translateX(2px); }
@media (max-width:640px) {
    .post-story-preview { grid-template-columns:72px minmax(0,1fr); gap:11px; padding:11px; }
    .post-story-cover { width:72px; }
    .post-story-title { font-size:14px; }
    .post-story-description { font-size:11px; -webkit-line-clamp:2; }
    .post-story-meta { gap:4px 9px; font-size:9px; }
}

@media (max-width:640px) {
    .home-center-surface .post-story-preview {
        grid-template-columns:72px minmax(0,1fr);
        gap:10px;
        padding:2px 0 0;
    }
    .home-center-surface .post-story-cover { width:72px; }
}


/* =========================================================
   MOBİL YOĞUNLUK  (≤640px)
   ---------------------------------------------------------
   MASAÜSTÜ ETKİLENMEZ — her şey media query içinde.

   Değerler assets/css/mobile.css'teki --m-* değişkenlerinden
   geliyor; sabit sayı yazmıyoruz ki tek yerden ayarlanabilsin.
   Yedek değerler (var'ın ikinci parametresi) mobile.css hiç
   yüklenmezse devreye girer.

   YUKARIDAKİ İKİ BLOK 540'TAN 640'A ÇEKİLDİ. Projede baskın mobil
   kırılım 640 (11 dosya); 540 yalnızca bu dosyadaydı ve 540-640
   arasında iki farklı sistem çalışıyordu.
   ========================================================= */
@media (max-width: 640px) {

    /* --- KARTIN KENDİSİ ---
       margin-left/right yukarıda "20px !important" ile yazılı
       (satır 149-150). Aynı özgüllükte !important çakışmasında
       DOSYADA SONRA gelen kazanır; bu blok dosyanın sonunda. */
    .post-card {
        margin-left:  var(--m-gutter, 6px) !important;
        margin-right: var(--m-gutter, 6px) !important;
        margin-bottom: var(--m-card-gap, 8px);
        padding: var(--m-card-pad-y, 10px) var(--m-card-pad-x, 12px);
        border-radius: var(--m-card-radius, 14px);
    }

    /* --- AVATAR ---
       Markup'ta Tailwind "w-10 h-10" var (=40px). post_card.php'ye
       DOKUNULMADI; "img.w-10" seçicisi (0,1,1) Tailwind'in ".w-10"
       seçicisinden (0,1,0) daha özgül olduğu için !important
       gerekmiyor. */
    .post-card img.w-10 {
        width:  var(--m-avatar, 36px);
        height: var(--m-avatar, 36px);
    }

    /* Avatar ile içerik arası (markup: gap-3 = 12px) */
    .post-card > .flex.gap-3 { gap: 10px; }

    /* Başlık satırı ile içerik arası (markup: mb-1 pt-2) */
    .post-card > .flex > .flex-1 > .flex.items-start {
        padding-top: 0;
        margin-bottom: 6px;
    }

    /* --- ALINTI BLOĞU ---
       En büyük dikey kayıp buradaydı.

       ALINTI ile KİTAP KÜNYESİ ARASI: masaüstündeki boşluğun AYNISI
       korunuyor (quote-copy-row'un 8px alt dolgusu + künyenin 6px üst
       marjı = 14px). Önce 6+4=10px'e indirmiştim, künye alıntıya
       yapışık duruyordu. Bu iki satır bilerek YOK — masaüstü değeri
       miras alınsın diye. */
    .post-card .quote-shell      { padding-top: 4px; }
    /* min-height YAZILMIYOR — masaüstündeki 48px miras alınıyor.
       SEBEP: mavi çizgi (.quote-copy-row::before) "top:21px, bottom:5px"
       ile konumlanıyor, yani UZUNLUĞU doğrudan satırın yüksekliğinden
       geliyor. 30px'e indirince çizgi 30−21−5 = 4px'lik bir çentiğe
       düşüyordu. 48px'te çizgi 22px — masaüstüyle birebir aynı.
       Burayı küçültmek istersen ::before'un top değerini de düşür. */
    .post-card .quote-copy-row   { padding-left: 16px; }
    .post-card .quote-book-cover { width: 26px; height: 38px; }

    /* --- ALINTI YAZI BOYUTU ---
       Masaüstünde 16px. Mobilde normal gönderi metniyle (.post-main-text,
       15px) AYNI ölçüye iniyor. Alıntı serif bir yazı tipi kullanıyor
       (--post-quote-font), aynı puntoda sanstan bir tık küçük görünür;
       daha da küçültme. */
    .post-card .quote-main-text { font-size: 15px !important; }

    /* --- AKSİYON SATIRI ---
       Markup'ta "mt-6" (=24px) ve ikon sarmalında "p-1.5" (=6px).
       İkon halkası 4px'e inince dokunma hedefi 16+8 = 24px olur;
       ancak <a>/<button>'ın kendi alanı daha geniş, tıklanabilirlik
       düşmüyor. */
    .post-card .post-actions { margin-top: 14px; }
    .post-card .post-actions > * > span:first-child { padding: 4px; }


    /* --- BAŞLIK BLOĞU ---
       AD + @KULLANICI + · + SÜRE tek satırda kalıyor.
       OKUR DÜZEYİ ("Düzenli Okur") KENDİ SATIRINDA DURUYOR — bir ara
       gizlemiştim, geri alındı.

       ÇÖZÜM: satır "nowrap" (böylece ad/kullanıcı adı GERÇEKTEN
       sığmadığında kesilir, gereksiz yere kısalmaz), düzey satırı ise
       AKIŞTAN ÇIKARILIP altına mutlak konumlandırılır. Satıra 15px
       alt dolgu verilerek ona yer ayrılıyor.

       Yüzde tavan denedim, çalışmıyor: kısa kullanıcı adları da
       boşuna kesiliyordu (@zeynep.kitapsever → @zeynep.…). */
    .post-card .post-header-meta {
        position: relative;
        gap: 4px;
        flex-wrap: nowrap;
        padding-bottom: 0;
    }

    /* NOT: buradaki ":has(.post-reader-level) { padding-bottom }" kuralı
       SİLİNDİ. Aynı kural dosyanın sonunda 14px ile bir daha yazılıyordu
       ve bu kopya hiç uygulanmıyordu — iki yerde duran tek kural
       kafa karıştırıyor. Tek sürüm aşağıda, KÜNYE SATIRI bölümünde. */

    .post-card .post-display-name {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        font-size: 14.5px !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .post-card .post-username {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        font-size: 13px !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .post-card .post-header-dot { flex: 0 0 auto; }
    .post-card .post-time       { flex: 0 0 auto; }

    /* OKUR DÜZEYİ — akıştan çıkarıldı, satırın altına oturuyor.
       position:absolute olduğu için "flex: 0 0 100%" artık geçersiz. */
    .post-card .post-reader-level {
        position: absolute;
        left: 0;
        bottom: -1px;      /* ada bir tık daha yaklaşsın */
        width: auto;
        margin: 0;
        font-size: 11.5px;   /* bir tık küçük — mobile özel */
        line-height: 1.15;
        white-space: nowrap;
    }
    /* MOBİL KÜÇÜLTME KALDIRILDI.
       Nokta 13px, tarih 12px'e çekiliyordu. Değerlendirme kartında böyle
       bir küçültme YOK (ayıraç 14px, tarih 12.5px her genişlikte).
       Sonuç: aynı künye satırı telefonda iki kartta iki ayrı ölçüde
       çiziliyordu — kullanıcının "post card'dakiler çok yakın" dediği
       fark tam olarak buydu. İki kart artık her genişlikte aynı.
       Maliyet ~2px; satır zaten @kullanıcı adını kısaltarak yeri açıyor
       (flex-wrap:nowrap + text-overflow:ellipsis). */
    .post-card .post-header-dot { flex: 0 0 auto; }
    .post-card .post-time       { flex: 0 0 auto; }
    .post-card .post-type-label { flex: 0 0 auto; }

    /* Üç nokta düğmesi başlıkla aynı hizada kalsın, satırı büyütmesin. */
    .post-card > .flex > .flex-1 > .flex.items-start > .relative > button { padding: 2px; }

    /* --- GÖVDE PUNTOSU ---
       15px'ti; ekran adı mobilde 14.5px olduğu için gönderi metni
       ADDAN BÜYÜK görünüyordu. İkisi eşitlendi: ad kalın olduğu için
       hiyerarşi kalınlıkla kuruluyor, puntoyla değil (X'in yaptığı). */
    .post-card .post-main-text,
    .post-card .quote-optional-text,
    .post-card .quote-main-text { font-size: 14.5px !important; }

    /* --- KİTAP ADI: mobilde punto ve kalınlık düşük ---
       Renk zaten yukarıda (media query DIŞINDA) düşürüldü; burası
       yalnızca ölçü. Masaüstünde 13px/500 kalıyor. */
    .post-card .post-quote-book-title    { font-size: 12.5px !important; font-weight: 400 !important; }
    .post-card .post-standard-book-title { font-size: 12px !important;   font-weight: 400 !important; }

    /* --- KİTAP KÜNYESİ (alıntı dışı kartlar) --- */
    .post-card .flex.items-center.gap-2.mb-3 { margin-bottom: 8px; gap: 8px; }
}


/* ==================================================
   17. REBOOK
   --------------------------------------------------
   Bu blok BİLEREK saf CSS. Rebook parçaları önce
   Tailwind sınıflarıyla yazılmıştı ve yarısı hiç
   çalışmadı: senin app.css'in bir purge çıktısı,
   yani PHP kaynağında geçmeyen bir yardımcı sınıf
   derlemeye GİRMİYOR. hover:text-gray-900, w-max,
   max-w-full, transition-fast — hiçbiri app.css'te
   yok. "rebookladı yazısında hover yok" tam olarak
   buydu. Burada her ölçü elle yazılı; purge'ün
   haberi olmasına gerek yok.
================================================== */

/* --- "Cihan rebookladı" künyesi --- */
.post-rebook-head {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    margin-bottom: 8px;
    font-family: var(--post-ui-font);
    font-size: 12.5px;
    font-weight: 400;
    color: #656d7a;   /* #9ca3af 2.54:1 */
    text-decoration: none;
    transition: color .15s ease;
}
/* SADECE DOĞRUDAN ÇOCUK — ">" bilerek.
   Seçici "post-rebook-head svg" idi ve künyeye rozet eklenince
   kilit ikonunu da yeşile boyuyordu (kilit .rb-name içindeki
   .post-lock-mark span'inin altında bir svg). Yeşil yalnızca
   rebook okuna ait. */
.post-rebook-head > svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: #22c55e;
}
.post-rebook-head .rb-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.post-rebook-head .rb-verb { flex: 0 0 auto; }

/* HOVER ÖLÜ KURALDI: iki temada da hover rengi taban rengin ta kendisiydi
   (#9ca3af/#9ca3af ve #6b7280/#6b7280). "transition: color" tanimliydi ama
   gecis yapacak bir renk yoktu — kunye tiklanabilir oldugu halde hicbir
   geri bildirim vermiyordu. Simdi gercekten koyulasiyor/aciliyor. */
a.post-rebook-head:hover           { color: #1f2937; }
html.dark .post-rebook-head        { color: #6b7280; }
html.dark a.post-rebook-head:hover { color: #e5e7eb; }

/* --- Alıntılanan gönderi kutusu --- */
.post-rebook-embed {
    display: block;
    /* Sağdaki 10px: çerçeve, üç noktanın GÖRÜNEN sağ kenarında
       bitiyor. Noktalar 16px'lik SVG kutusunun ortasında duruyor;
       0 verilince çerçeve 10px taşıyordu. */
    margin: 8px 10px 4px 0;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    transition: background .15s ease, border-color .15s ease;
}
.post-rebook-embed:hover        { background: rgba(0,0,0,.02); border-color: #d1d5db; }
html.dark .post-rebook-embed    { border-color: rgba(255,255,255,.1); }
html.dark .post-rebook-embed:hover { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.18); }

/* Künye satırı: 20px avatar + 6px boşluk = 26px.
   Gövdenin sol girintisi de tam 26px; böylece metin
   avatarın ALTINDAN değil, ADIN hizasından başlıyor —
   normal kartta olduğu gibi. */
.post-rebook-embed-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-family: var(--post-ui-font);
    line-height: 1.2;
    min-width: 0;
}
/* SADECE DOĞRUDAN ÇOCUK — ">" bilerek.
   Seçici "post-rebook-embed-head img" idi. Premium rozeti bir
   <img> taşıdığı için o da bu kuralı yiyordu: 20x20'ye çekiliyor,
   yuvarlaklaştırılıyor ve object-fit:cover ile KIRPILIYORDU —
   kutudaki logonun bozuk görünmesinin sebebi buydu. Bu ölçüler
   yalnızca AVATARA ait. */
/* ALT MARJ BİLEREK EKSİ.
   Künye satırı bir flex satırı; yüksekliğini en uzun çocuk belirliyor
   ve o çocuk 36px'lik avatar. Ad + okur düzeyi ikisi birlikte ~30px
   olduğu için künyenin ALTINDA 6px ölü boşluk kalıyor, gövde de o
   boşluğun altından başlıyordu. Eksi alt marj avatarın ölçülen
   yüksekliğini 30px'e indiriyor; avatar yine 36px ÇİZİLİYOR, taşan
   6px gövdenin 44px'lik sol boşluğuna denk geldiği için hiçbir şeyin
   üstüne binmiyor. Künye metni uzayıp 30px'i geçtiğinde kural
   kendiliğinden devre dışı kalıyor (max() davranışı). */
.post-rebook-embed-head > img {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    margin: 0 0 -6px;
    border-radius: 9999px;
    object-fit: cover;
}
.post-rebook-embed-meta {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
}

.post-rebook-embed-name {
    min-width: 0;
    max-width: 100%;
    font-size: 13.5px;
    font-weight: 700;
    color: #111827;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    flex: 0 1 auto;
}

.post-rebook-embed-name .name-trunc {
    max-width: var(--post-name-max);
}

.post-rebook-embed-name .post-premium-mark,
.post-rebook-embed-name .post-lock-mark {
    flex-shrink: 0 !important;
}
/* ✦ ADIN İÇİNDE. Ana karttaki .post-display-name ile
   birebir aynı: orada da ✦ bağlantının içinde ve
   aradaki boşluk 2px. Ayrı bir flex çocuğu olsaydı
   satırın 8px'lik gap'ini yerdi ve kutudaki mesafe
   ana karttakinin dört katı görünürdü. */
/* BURAYA ÖZEL KURAL YOK — BİLEREK.
   Genel .post-premium-mark kuralı margin-left:-4px !important
   taşıyor ve o -4px, ana kartta adın ardındaki SATIR SONU
   BOŞLUĞUNU siliyor. Kutuda da ad ile ✦ arasına aynı boşluk
   bırakıldı; böylece iki yerde de mesafe birebir aynı çıkıyor ve
   ileride .post-premium-mark değişirse ikisi birlikte değişiyor. */

/* GOMULU KUTUNUN KUNYESI ANA KARTTAN AYRISMISTI.
   .post-username ve .post-time #656d7a'ya cekilmisti, bu uclu #9ca3af
   kalmisti: ayni bilgi iki kutuda iki ayri renkte cikiyordu. */
.post-rebook-embed-user,
.post-rebook-embed-dot,
.post-rebook-embed-time {
    color: #656d7a;
    font-weight: 400;
}
.post-rebook-embed-user {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 1 auto;
    font-size: 12.5px;
}
.post-rebook-embed-dot {
    flex: 0 0 auto;
    font-size: 12px;
}
.post-rebook-embed-time {
    flex: 0 0 auto;
    font-size: 11.5px;
}

.post-rebook-reader-level,
.rebook-quote-reader-level {
    flex: 0 0 100%;
    width: 100%;
    position: static !important;
  margin: -3px 0 0 !important;
    font-size: 11px !important;
    line-height: 1.15;
}

html.dark .post-rebook-embed-name { color: #f3f4f6; }
html.dark .post-rebook-embed-user,
html.dark .post-rebook-embed-dot,
html.dark .post-rebook-embed-time { color: #6b7280; }

/* GÖVDE — künyedeki adla aynı hizada başlar. */
.post-rebook-embed-body {
    margin-left: 44px;        /* 36px avatar + 8px gap */
    margin-top: 0;            /* 3px'ti; künyedeki ölü boşlukla toplanıyordu */
    min-width: 0;
}
.post-rebook-embed-text {
    font-family: var(--post-ui-font);
    font-size: 14px;
    line-height: 1.35;
    color: #374151;
    white-space: pre-wrap;
    word-break: break-word;
}
.post-rebook-embed-text.is-quote {
    font-family: var(--post-quote-font) !important;
    font-weight: 400;
    font-style: normal;
    letter-spacing: .015em;
}
html.dark .post-rebook-embed-text { color: #d1d5db; }

/* Kitap künyesi */
.post-rebook-embed-book {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    min-width: 0;
}
.post-rebook-embed-book img {
    width: 28px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 4px;
    object-fit: cover;
}

/* Hikâye kutusu — kart içinde kart çizmemek için
   yalnızca kapak + etiket + başlık. */
.post-rebook-embed-story {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    min-width: 0;
}
.post-rebook-embed-story img {
    width: 34px;
    height: 48px;
    flex: 0 0 auto;
    border-radius: 6px;
    object-fit: cover;
}
.post-rebook-embed-story .rb-story-eyebrow {
    display: block;
    font-family: var(--post-ui-font);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    color: #2563eb;
    margin-bottom: 2px;
}
.post-rebook-embed-story .rb-story-title {
    display: block;
    font-family: var(--post-ui-font);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.post-rebook-embed-story .rb-story-sub {
    display: block;
    font-family: var(--post-ui-font);
    font-size: 12px;
    color: #6b7280;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html.dark .post-rebook-embed-story .rb-story-eyebrow { color: #60a5fa; }
html.dark .post-rebook-embed-story .rb-story-title   { color: #f3f4f6; }
html.dark .post-rebook-embed-story .rb-story-sub     { color: #9ca3af; }

/* "Bu gönderi başka bir gönderiyi alıntılıyor"
   Eskiden 12px gri bir fısıltıydı; kutunun içinde
   kayboluyordu. Tıklanabilir bir işaret olduğu için
   gövde metniyle aynı ağırlıkta okunması gerekiyor. */
.post-rebook-quoting {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-family: var(--post-ui-font);
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
}
.post-rebook-quoting svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}
/* Dar ekranda satır kutudan taşıyordu: ikonun yanında iki
   satıra sarması da çirkin, tek satırda kesiliyor. */
.post-rebook-quoting span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html.dark .post-rebook-quoting { color: #9ca3af; }

/* Rebook menüsündeki ikonlar. .pmenu-item display:flex
   ve svg'de flex-shrink yok — uzun etikette ikon
   yatayda eziliyor, alıntı tırnağı yarım görünüyordu. */
.pmenu-item > svg { flex: 0 0 auto; }

/* Alıntı modalindeki önizleme kutusu kartla aynı
   bileşeni kullanıyor; orada kenarlık ve hover yok. */
.rebook-quote-preview.post-rebook-embed:hover { background: transparent; border-color: #e5e7eb; }
html.dark .rebook-quote-preview.post-rebook-embed:hover { background: transparent; border-color: rgba(255,255,255,.1); }

/* --- Alıntıla modalı: yazan kişinin avatarı + sayaç --- */
.rebook-quote-compose {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.rebook-quote-compose .rebook-quote-me {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    margin-top: 2px;
    border-radius: 9999px;
    object-fit: cover;
}
.rebook-quote-compose textarea {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    font-family: var(--post-ui-font, inherit);
}

/* Sayaç önizleme kutusunun sağ üstünde. */
.rebook-quote-meter {
    display: flex;
    justify-content: flex-end;
    padding: 0 2px 6px 0;
    font-family: var(--post-ui-font, inherit);
    font-size: 12px;
    font-weight: 500;
    color: #656d7a;   /* #9ca3af 2.54:1 */
    line-height: 1;
}

/* Modal zemini koyu temada #111318; orada #656d7a 3.5:1 kalıyor. */
html.dark .rebook-quote-meter {
    color: #9ca3af;
}

/* Önizleme kutusu avatarın değil, yazı alanının hizasından
   başlıyor: 40px avatar + 12px boşluk. */
.rebook-quote-preview.post-rebook-embed { margin: 0 0 0 52px; cursor: default; }
@media (max-width: 520px) {
    .rebook-quote-preview.post-rebook-embed { margin-left: 0; }
}

/* Koyu temada "Paylaş" düğmesi. Satır içi stili #0f1419 —
   koyu modal zemininde (#111318) neredeyse görünmüyordu.
   Satır içi stili yenmek için !important gerekiyor. */
html.dark #rebookQuoteSubmit {
    background: #ffffff !important;
    color: #0f1419 !important;
}

/* ==================================================
   18. SANA ÖZEL — SEBEP SATIRI
   --------------------------------------------------
   "Mert Kurt beğendi", "Ahmet takip ediyor", "Polisiye
   okuyorsun"... Her sebebin kendi ikonu ve kendi rengi
   var; tür feed_engine.php'den geliyor (feed_reason_kind)
   ve .is-<tür> sınıfı olarak basılıyor.

   RENK YALNIZCA ROZETTE. Cümlenin kendisi her türde aynı
   nötr gride kalıyor — beş farklı renkte metin, kartın
   asıl içeriğinden önce okunur ve akış diskoya döner.
   Rozet göze küçük bir işaret veriyor, cümle sessiz
   kalıyor. X'in "… reposted" satırında da böyle.
================================================== */
.post-feed-reason {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
    min-width: 0;
}

.post-feed-reason .prr-text {
    font-family: var(--post-ui-font);
    font-size: 12px;
    font-weight: 400;
    color: #656d7a;   /* #9ca3af 2.54:1 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html.dark .post-feed-reason .prr-text { color: #6b7280; }

/* Yuvarlak rozet. 20px: adın (16px) altında kalıyor,
   satırı büyütmüyor. */
.post-feed-reason .prr-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border-radius: 9999px;
    background: var(--prr-bg, #f3f4f6);
    color: var(--prr-fg, #6b7280);
}
.post-feed-reason .prr-badge svg {
    width: 12px;
    height: 12px;
    display: block;
}

/* --- TÜRE GÖRE RENK ---
   Zeminler açık temada ~%10 doygunluk, koyu temada rengin
   kendisinin %14 saydamı. Koyu temada sabit koyu bir ton
   yazsaydım kart zemini değiştiğinde tutmazdı. */

/* Beğendi — kırmızı kalp */
.post-feed-reason.is-like   { --prr-bg: #fee2e2; --prr-fg: #ef4444; }

/* Takip ediyor — mor, profil + artı */
.post-feed-reason.is-follow { --prr-bg: #e8f5fe; --prr-fg: #1270ad; }   /* mordu — MOR_YOK_20261026 */

/* Aynı tür — mavi, kitap */
.post-feed-reason.is-genre  { --prr-bg: #dbeafe; --prr-fg: #2563eb; }

/* Kitaplığındaki kitap — kehribar, yan yana kitaplar.
   Rafı/ahşabı çağrıştırdığı için bu ton seçildi; mavi
   zaten türde kullanılıyor, ikisi yan yana ayırt
   edilemezdi. */
.post-feed-reason.is-book   { --prr-bg: #fef3c7; --prr-fg: #d97706; }

/* Etiket — turkuaz, diyez */
.post-feed-reason.is-tag    { --prr-bg: #ccfbf1; --prr-fg: #0d9488; }

/* Yedek "bu hafta öne çıkan" — nötr */
.post-feed-reason.is-trend  { --prr-bg: #f1f5f9; --prr-fg: #64748b; }

html.dark .post-feed-reason.is-like   { --prr-bg: rgba(239, 68, 68,.16); --prr-fg: #f87171; }
html.dark .post-feed-reason.is-follow { --prr-bg: rgba(29,155,240,.16); --prr-fg: #7cc4f8; }
html.dark .post-feed-reason.is-genre  { --prr-bg: rgba( 37, 99,235,.22); --prr-fg: #60a5fa; }
html.dark .post-feed-reason.is-book   { --prr-bg: rgba(217,119,  6,.18); --prr-fg: #fbbf24; }
html.dark .post-feed-reason.is-tag    { --prr-bg: rgba( 13,148,136,.20); --prr-fg: #2dd4bf; }
html.dark .post-feed-reason.is-trend  { --prr-bg: rgba(148,163,184,.16); --prr-fg: #94a3b8; }


/* =========================================================
   19. ETİKET / BAHSETME BAĞLANTILARI — SİTE GENELİ
   =========================================================
   linkify() eskiden her #etiket ve @bahsetmenin üstüne satır içi
   bir style yazıyordu: color:#1D9BF0; font-weight:200; font-size:14px.

   Satır içi bicim !important dışında her CSS kuralını yener. Bu yüzden:
     • Gönderi kartında yukarıdaki 13. blok !important taşıdığı için
       etiket 500 kalınlıkta, metinle aynı puntoda, karanlık temada
       #60a5fa çıkıyordu — doğru görünüm.
     • Değerlendirme kartında (.review-card-content), hikâyede ve
       yorumda .post-card atası olmadığı için o kural EŞLEŞMİYOR;
       satır içi bicim kalıyordu → 200 kalınlık (belirgin şekilde daha
       ince), sabit 14px ve karanlık temada bile #1D9BF0.

   Sorun buydu. Bicim artık linkify()'dan alınıp buraya taşındı;
   dosya layout.php'de koşulsuz yüklendiği için kural HER SAYFADA
   geçerli. 13. blok !important'ıyla gönderi kartında hâlâ öne geçer —
   değerler birebir aynı olduğu için ana sayfa görünümü DEĞİŞMEZ. */
.content-link {
    font-family: inherit;
    font-size: inherit;
    font-weight: 500;
    color: #1D9BF0;
    text-decoration: none;
    cursor: pointer;
}

.content-link:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

html.dark .content-link {
    color: #60a5fa;
}


/* =========================================================
   20. ROZETLİ İSİM SATIRI — SİTE GENELİ
   =========================================================
   İKİ AYRI HATA, TEK KÖK:

   1) ROZET DARALIYORDU. .post-premium-mark ve .post-lock-mark
      inline-flex ve genişlikleri em cinsinden. Bir flex kutusunun
      içine girdiklerinde (lider tablosu satırı, takip önerileri,
      sol alttaki kendi kartın) flex-shrink varsayılan 1 olduğu için
      yer daralınca EZİLİYORLARDI — logo yatayda sıkışmış görünüyordu.
      Aşağıdaki flex:0 0 auto bunu kapatır: rozet asla daralmaz.

   2) UZUN ADDA ROZET KAYBOLUYORDU. .lb-name, .mdrawer-user-name ve
      Tailwind'in .truncate sınıfı overflow:hidden + text-overflow:
      ellipsis taşıyor. Rozet çıplak metnin ARDINA eklendiği için
      uzun adlarda üç noktadan sonraya düşüyor ve tamamen
      görünmez oluyordu. Kırpılması gereken şey ad, rozet değil.

      Çözüm: isim satırı flex kutusu (.name-line), adın kendisi ayrı
      bir kutuda (.name-trunc). Kırpma yalnız adın kutusunda. Rozet
      ve kilit hep tam görünür — ad daha erken üç noktaya iner.
      X'in davranışı da bu.

   Bu dosya layout.php'de KOŞULSUZ yükleniyor, üstelik sidebar.css'ten
   SONRA; yani kural her sayfada geçerli ve oradaki .lb-name tanımını
   ezer. */

.post-premium-mark,
.post-lock-mark {
    flex: 0 0 auto;
}

.name-line {
    display: flex;
    align-items: center;
    min-width: 0;
}

.name-trunc {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Flex kutusunda salt-boşluk metin düğümü çizilmez; lider tablosundaki
   "· sen" etiketinin önündeki boşluk kenar boşluğuyla veriliyor. */
.name-line .lb-me-tag { flex: 0 0 auto; margin-left: .28em; }


/* =========================================================
   21. SAĞ KENAR ÇUBUĞU — "EN ÇOK OKUYANLAR" SATIRI
   =========================================================
   Bu kurallar aslında sidebar.css'e ait. Oraya yazmadım çünkü bendeki
   sidebar.css kopyası 15 Ağustos tarihli; 18 günlük bir dosyayı
   yeniden yazmam senin o tarihten sonraki düzenlemelerini siler.
   post_card.css layout.php'de sidebar.css'ten SONRA yüklendiği için
   buradan ezmek güvenli. sidebar.css'i atarsan üçünü de oraya taşırım.

   1) "sayfa" BİRİMİ OKUNMUYORDU. .lb-unit 8.5px idi — isim 12.5px,
      @kullanıcı 11px iken birim onların çok altındaydı ve üstüne gri
      (#9ca3af). 10.5px, satırdaki en küçük yazı olmaya devam ediyor
      ama artık okunuyor.

      NOT: skor sayısının kendisi 11.5px. Birim 10.5'e çıkınca aradaki
      hiyerarşi 1px'e indi. Doğrusu skoru da 13px'e çıkarmak — sidebar'ın
      en önemli verisi o. Sen istemediğin için DOKUNMADIM.

   2) SKOR SATIRIN ORTASINA KAYIYORDU. .lb-row align-items:center;
      soldaki kutu iki satır (isim 14px + @kullanıcı 12.3px = 26.3px),
      skor 14px. Ortalanınca skor isimden ~6px aşağı düşüyor ve iki
      satırın arasında asılı kalıyordu. align-self:flex-start ile skor
      ismin tam karşısına oturuyor; avatar ve sıra numarası ortalı
      kalmaya devam ediyor (onlara dokunulmadı).

   3) AD ÇOK GEÇ KESİLİYORDU. Ad kutusunun %85'ini yiyip rozeti
      sınıra dayıyordu. %62 ile üç nokta daha erken geliyor, rozet ve
      kilit rahat nefes alıyor. Yüzde kullandım çünkü kenar çubuğu
      xl kırılımında w-80'den w-88'e genişliyor; sabit px orada dar
      kalırdı. */

.lb-unit { font-size: 10.5px; }

.lb-score { align-self: flex-start; }

.lb-name .name-trunc { max-width: 62%; }


/* =========================================================
   22. DEĞERLENDİRME KARTI — SAĞ ÜST KUTUSU
   =========================================================
   review_card.php'de takip düğmesi ile üç nokta menüsü artık ortak bir
   kapsayıcıda. .review-card-header "justify-content:space-between"
   olduğu için düğme doğrudan üçüncü çocuk olsaydı ortaya savrulurdu.
   Ana sayfadaki kartın .flex.items-center.gap-1\.5.shrink-0 kutusunun
   birebir karşılığı; oradaki Tailwind sınıfları yerine gerçek CSS,
   çünkü senin app.css'in purge edilmiş bir derleme.

   Kural buraya yazıldı çünkü bendeki review_card.css kopyası 17 Ağustos
   tarihli — 16 günlük bir dosyayı yeniden yazmam senin sonraki
   düzenlemelerini siler. post_card.css layout.php'de review_card.css'ten
   SONRA yüklendiği için ezme güvenli. */
.review-card-head-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

/* Takip düğmesi eklenince üst satır daraldı. .review-card-head-left
   flex-wrap taşıyor (lakap kendi satırına insin diye) ve flex-wrap
   açıkken tarayıcı önce SARMAYI dener — shrink vermek çözmüyordu.
   Bu yüzden @kullanıcı + ayraç + tarih review_card.php'de tek kutuya
   alındı. Kutu daralabiliyor, içinde kısalan tek şey @kullanıcı adı;
   ayraç ve tarih asla bölünmüyor. Ada dokunulmadı — içinde rozet var,
   kesilmemeli. */
/* .review-card-meta-group BLOĞU BURADAN SİLİNDİ.
   Aynı blok üç dosyada birden duruyordu (burada, post_card.css ve
   review_card.css) ve üçü de aynı özgüllükteydi; hangisinin geçerli
   olduğunu sayfada en son yüklenen dosya belirliyordu. Buradaki ve
   post_card.css'teki kopyalar "gap: 6px" yazıyordu, review_card.css
   "3px". Sonuç: değerlendirme kartının künye satırı gönderi kartından
   6px daha açık çiziliyordu ve sebebi hiçbir dosyada görünmüyordu.
   Tek kaynak artık review_card.css (layout.php <head>'inde koşulsuz
   yükleniyor, yani her sayfada geçerli). */
.review-card-head-right .follow-btn { min-height: 26px; padding: 4px 11px; gap: 5px; font-size: 11.5px; }
.review-card-head-right .follow-btn svg { flex: 0 0 12px; width: 12px; height: 12px; }

/* ==========================================================================
   inBook — post_card.css'e EKLENECEK BLOK (23)
   ==========================================================================
   Bu dosyayı OLDUĞU GİBİ post_card.css'inin EN SONUNA yapıştır.
   Mevcut hiçbir satırını silme.

   post_card.php de değişti (avatar çözünürlüğü, ad kutusu, rb-name
   kutusu) — o dosyayı ayrıca gönderdim, ikisi birlikte çalışıyor.
   ========================================================================== */

/* =========================================================
   23. KART BAŞLIĞI — AVATAR, AD KESME, ROZET HİZASI, RENK
   ========================================================= */

/* --- 1) AVATAR BİR TIK BÜYÜK: 40 → 44px ---
   Markup'ta Tailwind "w-10 h-10" (=40px) duruyor, post_card.php'de
   yalnızca get_avatar()'a giden çözünürlük 44'e çıkarıldı (40 kalsaydı
   44px'lik kutuda büyütülüp bulanıklaşırdı).

   @media (min-width: 641px) ŞART: bu blok dosyanın SONUNDA, mobil
   bloğundan (satır ~763) sonra geliyor. Medya sorgusuna almasaydım
   aynı özgüllükte "sonra gelen kazanır" kuralıyla mobildeki 36px'i de
   ezer, telefonda avatar 44px olurdu. */
@media (min-width: 641px) {
    .post-card img.w-10 { width: 44px; height: 44px; }

    /* --- 2) AD SATIRI AVATARA YAKLAŞTI: 10 → 8px ---
       Ana akışta gap zaten 12'den 10'a çekilmişti (satır ~195).
       Avatar 4px büyüdüğü için aradaki nefes zaten arttı; 8px ile
       ad bloğu avatara görsel olarak bağlanıyor. */
    .home-center-surface .post-card > .flex { gap: 8px !important; }
}

/* --- 3) EKRAN ADI ERKEN KESİLİYOR ---
   Masaüstünde ad hiç kesilmiyordu: .post-display-name'de sadece
   "overflow-wrap: anywhere" vardı, yani uzun ad SARIYOR, kısalmıyordu.
   Kesme yalnızca mobil bloğunda vardı.

   Sınır "ch" cinsinden: 1ch = fontun "0" karakterinin genişliği, yani
   punto değişince sınır da kendiliğinden ölçekleniyor. Ana kartta ad
   16px, rebook künyesinde 12.5px — tek değer ikisine de uyuyor.

   AD KENDİ KUTUSUNDA (.name-trunc), ROZET DIŞARIDA. Sınır çıplak
   metne konsaydı rozet üç noktadan sonraya düşüp kaybolurdu.

   AYAR: --post-name-max tek kaldıraç, :root'ta.

   SEN 8ch DEDİN, 12ch KOYDUM — SEBEBİ ŞU. İkisini de çizip
   karşılaştırdım:
     8ch  → "Cihaan…"      "Selin K…"    "Ada Öz…"    "Kaan A…"
     12ch → "Cihaanjkhjk…" "Selin Koç"   "Ada Özdemir" "Kaan Aydın"
   8ch'de şikâyet ettiğin uzun ad düzeliyor ama NORMAL Türkçe adların
   neredeyse hepsi de üç noktaya iniyor; kart okunmaz hâle geliyor.
   12ch uzun adı kesiyor, normal adlara dokunmuyor — istediğin sonuç bu.
   Yine de 8 istiyorsan tek satır: aşağıdaki 12ch'yi 8ch yap. */
/* --feed-x — AKIŞ SÜTUNUNDA KARTIN YAN BOŞLUĞU (masaüstü)
   -------------------------------------------------------------------
   Kartın kendi margin'i anasayfada ve profilde "0"; boşluğu kapsayıcının
   padding'i veriyor. Aynı sayı DÖRT ayrı kuralda elle yazılıydı:
     home.css     #feedContainer
     profile.css  #feedContainer  (ortak)
     profile.css  #feedContainer.profile-post-feed
     profile.css  .profile-post-list
   Biri değişince diğerleri sessizce ayrışıyordu. Dördü de artık bu
   değişkeni okuyor — daraltmak/genişletmek TEK SAYI. 14px'ti, 10px oldu.
   MOBİLE DOKUNMUYOR: orada boşluk --m-gutter (6px) ile veriliyor ve
   ayrı medya bloklarında yazılı. */
:root { --post-name-max: 12ch; --feed-x: 10px; }

.post-display-name .name-trunc,
.post-rebook-head .rb-name .name-trunc { max-width: var(--post-name-max); }

/* --- 4) PREMIUM ROZETİNİN DİKEY HİZASI ---
   Rozet, adın BÜYÜK HARF yüksekliğinin (cap-height) tam ortasına
   oturuyor: kutunun altı taban çizgisinin .135em altında, kutu 1em,
   yani merkez taban çizgisinin .365em üstünde = cap-height/2.
   Ölçtüm: 16px'lik adda üstten 2.3px, alttan 2.0px taşıyor.

   Önceki değer -.125em idi; fark 0.16px, yani gözle görülmez.
   Rozet sana hâlâ kayık geliyorsa sebep CSS değil, premiumy.svg'nin
   KENDİ İÇİNDEKİ boşluk — çizim viewBox'ın ortasında değilse hiçbir
   vertical-align düzeltmez. Aşağıdaki değişkenle kendin oynayabilirsin. */
.post-premium-mark { vertical-align: var(--premium-align, -.135em); }

/* --- 5) GÖNDERİ METNİ İLE ADIN AYRIMI ---
   Ters hiyerarşi vardı: gövde metni SAF SİYAH (#000), ad ise #111827.
   Yani metin addan DAHA KOYU çiziliyordu; göz önce gövdeye gidiyor,
   ad geri planda kalıyordu.

   İkisini de yaptım, çünkü tek başına hiçbiri yetmiyor:
     • Ad 600 → 700. Hiyerarşiyi puntoyla değil kalınlıkla kurmak
       X'in de yaptığı şey; ad 16px kalıyor, satır yüksekliği değişmiyor.
     • Gövde #000 → #262d38. Saf siyah zaten uzun metinde sert; bir
       ton açılınca ad öne çıkıyor ama metin hâlâ rahat okunuyor.
   Koyu temada zaten ad #fff, metin #f3f4f6 — orada sıra doğruydu,
   dokunmadım. */
.post-display-name { font-weight: 700 !important; }

.post-main-text,
.quote-optional-text { color: #262d38 !important; }
/* =============================================================================
   post_card.css — EK BLOK  (dosyanın SONUNA ekle, hiçbir şey silme)
   ROZET KENDİNİ SAVUNSUN
   -----------------------------------------------------------------------------
   NE OLDU:
   Hikâyeler sayfasında yazar adının yanındaki premium rozeti dev bir mavi
   yuvarlak olarak çıktı. Sebep rozette değil, sayfada:

       hikayeler.css:  .story-feed-author img { width:24px; height:24px;
                                                border-radius:50%;
                                                object-fit:cover }

   Bu kural AVATAR için yazılmış ve "bu kutudaki tek <img> avatardır"
   varsayıyor. user_badges() adın yanına ikinci bir <img> koyunca
   (premiumy.svg) o kural rozeti de yakaladı: 12.5px'lik rozet 24px'e
   şişti, üstelik %50 yuvarlatıldı.

   Özgüllük eşit (.story-feed-author img ve .post-premium-mark img — ikisi
   de 0,1,1). Eşitlikte sonra yüklenen kazanır ve sayfa CSS'i
   ($GLOBALS['page_css']) layout.php'de HER ZAMAN post_card.css'ten sonra
   yükleniyor. Yani rozet bu yarışı kural olarak kaybediyordu.

   NEDEN BURAYA YAZILIYOR, SAYFAYA DEĞİL:
   Bunu hikayeler.css'te tek seferlik ezmek işi görürdü ama aynı tuzak
   her sayfada kurulabilir — biri bir kutuya "X img { width: ... }" yazdığı
   anda rozet yine patlar. Bileşenin iç yapısını sayfa CSS'ine emanet
   edemeyiz. Kural bileşenin evinde duruyor ve post_card.css layout.php'de
   KOŞULSUZ yükleniyor; yani koruma her sayfada geçerli.

   !important BİLEREK: özgüllükle kazanılamıyor (yukarıda), sonra yüklenmekle
   de kazanılamıyor. Bu, bir bileşenin kendi iç öğelerini dış blanket
   kurallardan koruduğu ender ve meşru durum. Bu dosyada zaten aynı gerekçeyle
   kullanılan kurallar var (.post-display-name, .post-premium-mark marjları).

   Bugün projede bu tuzağa düşen tek kural .story-feed-author img. Diğer
   sayfalardaki img kuralları kapak kutularına kilitli (.flw-cover img,
   .lib-row img, .post-story-cover img, .suggest-row > img) — onlar rozete
   dokunmuyor. Bu blok, yarın yazılacak olanı da kapsıyor.
   ========================================================================== */

.post-premium-mark img,
.post-premium-mark svg,
.post-lock-mark img,
.post-lock-mark svg {
    display: block !important;

    /* Ölçü rozetin kendi kutusundan gelir; kutu da 1em, yani yazı ne
       kadarsa rozet o kadar. Dışarıdan piksel dayatılamaz. */
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;

    /* Avatar kuralları yuvarlatıp kırpıyordu; rozet ne yuvarlak ne kırpılır. */
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: contain !important;

    /* Avatar/kapak kurallarından sızabilecek diğer şeyler. */
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: none !important;
    aspect-ratio: auto !important;
}


/* ==========================================================================
   DIŞ BAĞLANTI KARTI
   Hikâye önizleme kartıyla (.post-story-preview) aynı dili konuşuyor:
   aynı kenarlık, aynı yarıçap, aynı yüzey. Farkı düzen — orada kapak solda
   dikey, burada görsel üstte 16:9, çünkü web sayfası kapağı manşet
   görselidir, kitap kapağı değil.
   ========================================================================== */
.post-link-slot:empty{display:none}

.post-link-card{
    display:block;
    margin:13px 0 4px;
    overflow:hidden;
    border:1px solid #e3e7eb;
    border-radius:17px;
    background:#fbfcfd;
    color:inherit;
    text-decoration:none;
    transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.post-link-card:hover{border-color:#c7d0da;background:#fff;box-shadow:0 9px 24px rgba(15,23,42,.07)}
html.dark .post-link-card{border-color:rgba(255,255,255,.10);background:rgba(255,255,255,.025)}
html.dark .post-link-card:hover{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.045);box-shadow:0 12px 28px rgba(0,0,0,.28)}

/* --- Görselli (büyük) --------------------------------------------------- */
.post-link-media{
    position:relative;
    aspect-ratio:16 / 9;
    overflow:hidden;
    background:#eef1f4;
}
html.dark .post-link-media{background:#171b21}
.post-link-media img{display:block;width:100%;height:100%;object-fit:cover}

/* Oynat düğmesi: gerçek bir düğme değil, "bu bir video" işareti. */
.post-link-play{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    display:grid;place-items:center;
    width:52px;height:52px;
    border-radius:50%;
    background:rgba(15,20,25,.72);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    box-shadow:0 6px 20px rgba(0,0,0,.28);
    transition:transform .16s ease, background-color .16s ease;
}
.post-link-play svg{width:26px;height:26px;fill:#fff;stroke:none;margin-left:2px}
.post-link-card:hover .post-link-play{transform:translate(-50%,-50%) scale(1.06);background:rgba(15,20,25,.85)}

.post-link-body{padding:11px 13px 12px;min-width:0}
.post-link-domain{
    display:block;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    color:#8a939e;
    font-family:var(--post-ui-font);
    font-size:11px;font-weight:600;
    letter-spacing:.01em;
}
.post-link-title{
    display:-webkit-box;
    margin-top:3px;
    overflow:hidden;
    color:#171717;
    font-family:var(--post-ui-font);
    font-size:14.5px;font-weight:700;line-height:1.3;letter-spacing:-.015em;
    -webkit-box-orient:vertical;-webkit-line-clamp:2;
}
.post-link-desc{
    display:-webkit-box;
    margin:4px 0 0;
    overflow:hidden;
    color:#6b7480;
    font-family:var(--post-ui-font);
    font-size:12.5px;line-height:1.42;
    -webkit-box-orient:vertical;-webkit-line-clamp:2;
}
html.dark .post-link-title{color:#f3f4f6}
html.dark .post-link-desc{color:#9ca3af}
html.dark .post-link-domain{color:#7b848f}

/* --- Görselsiz (kompakt) ------------------------------------------------ */
/* Görsel yoksa 16:9 boş gri bir dikdörtgen basmak kartı çöpe çevirirdi.
   Bu durumda kart tek satırlık bir künyeye iniyor. */
.post-link-card.is-compact{
    display:grid;
    grid-template-columns:40px minmax(0,1fr);
    align-items:center;
    gap:11px;
    padding:11px 13px;
}
.post-link-card.is-compact .post-link-body{padding:0}
.post-link-glyph{
    display:grid;place-items:center;
    width:40px;height:40px;
    border-radius:12px;
    background:#eef1f5;
    color:#7b848f;
}
.post-link-glyph svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html.dark .post-link-glyph{background:rgba(255,255,255,.06);color:#9aa3ae}
.post-link-card.is-compact .post-link-title{-webkit-line-clamp:1}
.post-link-card.is-compact .post-link-desc{display:none}

/* Ana akış yüzeyi kartsız; hikâye kartında olduğu gibi burada da çerçeve
   kalkıyor, yalnız görsel ve metin kalıyor. */
.home-center-surface .post-link-card{
    margin:8px 0 2px;
    border-radius:14px;
}

/* Metin içindeki çıplak bağlantı: etiket/bahsetme ile aynı mavi ama
   alan adı gösterildiği için uzun URL satırı kırmıyor. */
.post-content a.post-url{word-break:break-word}

@media (max-width:520px){
    .post-link-card{border-radius:14px}
    .post-link-play{width:44px;height:44px}
    .post-link-play svg{width:22px;height:22px}
    .post-link-title{font-size:13.5px}
}


/* Alan adı satırı HER kartta kapalı — kullanıcı isteği.
   Not: adres metnin içinde zaten görünüyor (linkify onu "youtube.com/..."
   biçiminde basıyor), yani nereye gittiği tamamen kaybolmuyor. */
.post-link-domain{display:none}
.post-link-title{margin-top:0}


/* Etkileşim çubuğundaki menü yukarı açılır: çubuk kartın en altında,
   aşağı açılan menü bir sonraki kartın üstüne düşüyordu. */
.pmenu.is-up{
    top:auto;
    bottom:calc(100% + 6px);
}

/* REBOOK / ALINTILA MENÜSÜ SOLA AÇILIR.
   Tetikleyici düğme etkileşim çubuğunun SOLUNDA duruyor ve kabı
   (.relative) yalnızca o düğme kadar geniş. Genel kuraldaki "right:0"
   menünün SAĞ kenarını o küçük düğmenin sağ kenarına yapıştırıyor,
   220px'lik menü de sola doğru ekranın dışına taşıyordu.
   Üç nokta ve paylaş menüleri çubuğun sağında olduğu için onlarda
   "right:0" doğru — bu yüzden kural yalnızca rebook menüsüne yazıldı. */
.rebook-trigger + .pmenu{
    right:auto;
    left:0;
}


/* ==========================================================================
   KARTA BASMA GERİ BİLDİRİMİ
   Kart JS ile açılıyor, yani tarayıcının bağlantılara verdiği doğal
   geri bildirim yok: mobilde parmağını basıyorsun, hiçbir şey olmuyor,
   sonra sayfa değişiyor. Arada bir boşluk hissi kalıyor.
   :active ile satır anında koyulaşıyor — X'in yaptığı da bu.
   ========================================================================== */
.post-card{
    -webkit-tap-highlight-color:transparent;
    transition:background-color .12s ease, box-shadow .12s ease;
}

/* HOVER:
   Önceki rgba() arka plan kartın BEYAZ zeminini transparan yapıyordu.
   Sonuç: alttaki sayfa zemini görünerek kart sanki kayboluyordu.
   Artık yüzey opak kalıyor; yalnız çok hafif ton + çok hafif derinlik var. */
@media (hover:hover){
    .post-card:hover{
        background:#fbfcfd;
        box-shadow:
            0 12px 32px rgba(15,23,42,.065),
            0 1px 3px rgba(15,23,42,.04);
    }

    /* .055 -> .115 : #0e0e0e idi, #1d1d1d oldu. Tabandan 9 birim açık,
       yani gerçekten görünen bir kalkma. Siyah zemin üstündeki siyah
       gölge hiçbir şey çizmiyor; derinliği veren şey zemin farkı ve
       üstteki 1px beyaz iç çizgi. */
    html.dark .post-card:hover{
        background:rgba(255,255,255,.115);
        box-shadow:
            0 12px 32px rgba(0,0,0,.38),
            inset 0 1px 0 rgba(255,255,255,.07);
    }
}

/* Basılı tutma geri bildirimi de kartı transparanlaştırmasın. */
.post-card:active{
    background:#f7f9fb;
}
/* Basılı hover'ın da üstünde olmalı, yoksa hover'dan basılıya geçerken
   kart KOYULAŞIYOR gibi görünür. .07 -> .14 (#242424). */
html.dark .post-card:active{
    background:rgba(255,255,255,.14);
}

/* Tarih artık bağlantı: metin gibi değil, tıklanabilir gibi dursun. */
a.post-time:hover{text-decoration:underline}


/* ==========================================================================
   v19 — Kart tıklama alanı ve sağ üst hizası
   ========================================================================== */

/* AVATAR BAĞLANTISI BÜTÜN SÜTUNU KAPLIYORDU.
   Avatarın <a>'sı, .flex gap-3 kapsayıcısının çocuğu. Flex'te
   align-items varsayılanı stretch olduğu için bağlantı 40px'lik
   görselin değil, SATIRIN TAMAMININ yüksekliğini alıyordu; avatarın
   altındaki boş şeride tıklayınca gönderi yerine profil açılıyordu.
   flex-start ile bağlantı yalnız görselin kapladığı alan kadar. */
.post-card .post-avatar-link{
    align-self:flex-start;
    display:block;
    line-height:0;
}

/* ÜÇ NOKTA DÜĞMESİ KENARDAN İÇERİDE KALIYORDU.
   Düğmenin kendi dolgusu (p-1 = 4px) ve ikonun svg içindeki boşluğu
   (~6px) üst üste binince ikonun mürekkebi sütun kenarından ~10px
   içeride duruyordu. Altındaki görsel sütunun tam kenarına dayandığı
   için görsel menüyü geçiyormuş gibi okunuyordu.
   Düğme kutusunu kenara yaslıyoruz: fark ~10px'ten ~5px'e iniyor,
   görselin ve metnin hizası hiç değişmiyor.
   YALNIZ sağ üstteki menü. Alt çubuktaki rebook ve paylaş menüleri
   bu sınıfı almıyor, onların hizası doğru. */
.post-card .post-menu-anchor{
    margin-right:-5px;
}


/* ==========================================================================
   v20 — GÖNDERİ GÖRSELLERİ
   Izgara düzeni görsel sayısına göre değişiyor; ayrıntı render_post_media_grid()
   yorumunda. Hücreler <button>, çünkü tıklanabilir ve klavyeyle gezilebilir
   olmaları gerekiyor — <div onclick> ikisini de vermiyor.
   ========================================================================== */
/* KENARLIK KALDIRILDI — kartin hicbir kutusunda kenarlik yok.
   Izgaranin ic bolmeleri KALIYOR: onlari cizen sey kenarlik degil,
   "gap:2px + background" ikilisi. Dis 1px sirf kenarlikti, gorsel
   artik yuvarlak kenara dogrudan dayaniyor. Koyu temadaki
   "border-color" da birlikte silindi: kenarlik yokken olu bildirimdi. */
.post-media{
    display:grid;
    gap:2px;
    margin:12px 0 4px;
    overflow:hidden;
    border-radius:16px;
    background:#e3e7eb;
}
html.dark .post-media{background:rgba(255,255,255,.08)}

.post-media .pm-item{
    position:relative;
    display:block;
    min-width:0;
    margin:0;padding:0;border:0;
    overflow:hidden;
    background:#eef1f4;
    cursor:zoom-in;
    -webkit-tap-highlight-color:transparent;
}
html.dark .post-media .pm-item{background:#171b21}
.post-media .pm-item img{display:block;width:100%;height:100%;object-fit:cover}
/* MEDIA_ACTIONS_COUNTER_FOCUS_20261025 */
.post-media .pm-item:focus, .post-media .pm-item:focus-visible{outline:none!important;box-shadow:none!important}

/* 1 — gerçek oran, PHP tarafında 4:5 ile 16:9 arasına kırpılıyor.
   aspect-ratio kapsayıcıya inline geliyor. */
.post-media.n1{grid-template-columns:1fr}
.post-media.n1 .pm-item{height:100%}

/* 2 / 3 / 4 — kapsayıcı sabit 16:9, hücreler kırpılıyor. Sabit oran şart:
   yoksa akışta her gönderi farklı yükseklikte olur ve görseller yüklendikçe
   sayfa zıplar. */
.post-media.n2,
.post-media.n3,
.post-media.n4{aspect-ratio:16 / 9}

.post-media.n2{grid-template-columns:1fr 1fr}

.post-media.n3{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.post-media.n3 .pm-item:first-child{grid-row:1 / span 2}

.post-media.n4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}

@media (max-width:520px){
    .post-media{border-radius:14px}
}

/* --- Tam ekran galeri ---------------------------------------------------- */
body.pm-lb-lock{overflow:hidden}

.pm-lightbox{
    position:fixed;inset:0;z-index:9999;
    display:none;
    align-items:center;justify-content:center;
    padding:24px;
    background:rgba(8,11,14,.92);
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.pm-lightbox.is-open{display:flex}

.pm-lb-img{
    max-width:100%;max-height:100%;
    object-fit:contain;
    border-radius:8px;
    cursor:default;
}

.pm-lb-close,
.pm-lb-nav{
    position:absolute;
    display:grid;place-items:center;
    padding:0;border:0;border-radius:50%;
    background:rgba(255,255,255,.12);
    color:#fff;cursor:pointer;
    transition:background-color .15s ease;
}
.pm-lb-close:hover,
.pm-lb-nav:hover{background:rgba(255,255,255,.24)}
.pm-lb-close svg,
.pm-lb-nav svg{fill:none;stroke:currentColor}

.pm-lb-close{top:16px;right:16px;width:38px;height:38px}
.pm-lb-close svg{width:18px;height:18px}

.pm-lb-nav{top:50%;transform:translateY(-50%);width:44px;height:44px}
.pm-lb-nav.is-prev{left:16px}
.pm-lb-nav.is-next{right:16px}
.pm-lb-nav svg{width:22px;height:22px}
.pm-lb-nav[hidden]{display:none}

.pm-lb-count{
    position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
    padding:4px 11px;border-radius:999px;
    background:rgba(255,255,255,.12);
    color:#fff;
    font-family:var(--post-ui-font);
    font-size:12.5px;font-weight:600;
    font-variant-numeric:tabular-nums;
}
.pm-lb-count[hidden]{display:none}

@media (max-width:520px){
    .pm-lightbox{padding:12px}
    .pm-lb-nav{width:38px;height:38px}
    .pm-lb-nav.is-prev{left:8px}
    .pm-lb-nav.is-next{right:8px}
}


/* --- Alıntı kartındaki görsel ------------------------------------------- */
/* Tek görsel, sınırlı yükseklik. Alıntının konusu metin; fotoğraf onu
   destekler, yerini almaz. Yükseklik sınırı olmasaydı dikey bir sayfa
   fotoğrafı alıntıyı ekrandan aşağı iterdi. */
.post-media.is-quote{
    max-height:320px;
    margin:10px 0 2px;
    border-radius:14px;
}
@media (max-width:520px){
    .post-media.is-quote{max-height:260px}
}


/* ==========================================================================
   v21 — ALINTI HİZASI
   --------------------------------------------------------------------------
   Alıntı metni artık kullanıcı adıyla AYNI hizada başlıyor; mavi çizgi
   avatarla metin arasındaki 12px'lik boşluğa kaydı.

   Tırnak ikonu kaldırıldı: metin sola dayanınca ikona yer kalmıyor,
   17px'lik ikon 12px'lik boşluğa sığmadığı için avatarın üstüne binerdi.
   Çizginin kendisi zaten alıntı işareti; ikon gereksiz tekrardı.
   Geri istersen tek satır — .quote-mark-inline'daki display:none'ı sil,
   ama o zaman padding-left'i de eski değerine döndürmen gerekir.

   Bu blok dosyanın SONUNDA olmak zorunda: yukarıdaki mobil kuralı
   (.post-card .quote-copy-row) aynı özgüllükte, kaynak sırası kazanıyor.
   ========================================================================== */

.post-card .quote-mark-inline{display:none}

.post-card .quote-copy-row{
    /* Metin gönderi metniyle aynı hizada — sol dolgu yok. */
    padding-left:0;

    /* Eski 48px, çizgiye yer açmak içindi (çizgi top:21px'ten
       başlıyordu). Çizgi artık metnin tepesinden başladığı için
       gerek kalmadı; tek satırlık alıntı boşuna uzamıyor. */
    min-height:0;

    padding-bottom:8px;
}

.post-card .quote-copy-row::before{
    /* Avatar ile metin arasındaki boşluğa kay. -9px: çizgi metinden
       7px, avatardan ~4px uzakta. Daha sola alırsan avatara değer. */
    left:-9px;

    /* Metnin tepesinden altına kadar. */
    top:2px;
    bottom:10px;

    /* 1px bu mesafede kayboluyordu; 2px'te çizgi olduğu okunuyor. */
    width:2px;

    background:rgba(29,155,240,.55);
}
html.dark .post-card .quote-copy-row::before{background:rgba(29,155,240,.68)}

/* Kitap künyesi de metinle hizalansın. Eskiden 8px'ti çünkü çizgi
   oradaydı; çizgi taşınınca künye tek başına sağa kaymış kalıyordu. */
.post-card .quote-book-meta{margin-left:0}

/* ÇİZGİYİ KESEN KATMAN.
   .quote-block-bg'de overflow:hidden var (satır 21). O kural blok
   arka planlı ve yuvarlak köşeliyken anlamlıydı; ikisi de kaldırılmış,
   geriye yalnız kırpma işlevi kalmış. Mavi çizgi artık kutunun
   dışında (left:-9px) olduğu için tam da o kırpmaya takılıyordu. */
.post-card .quote-block-bg{overflow:visible}


/* ==========================================================================
   v22 — TIRNAK İŞARETİ GERİ
   --------------------------------------------------------------------------
   v21'de kaldırmıştım, kullanıcı geri istedi. Kısıt gerçek: avatarla metin
   arasındaki boşluk 12px (Tailwind gap-3), ikon ise 17px'ti — sığmıyordu.
   İkon 12px'e indi ve boşluğun tam içine oturdu (-12px ile 0 arası), çizgi
   de onun altından, aynı dikey eksende başlıyor.

   min-height geri geldi: çizginin uzunluğu satırın yüksekliğinden
   türüyor; tek satırlık alıntıda çizgi birkaç piksellik çentiğe düşmesin.
   ========================================================================== */

.post-card .quote-mark-inline{
    display:flex;
    left:-12px;
    top:1px;
    width:12px;
    height:12px;
}
.post-card .quote-mark-inline svg{width:12px;height:12px}

.post-card .quote-copy-row{
    /* İkon + çizgi için dikey alan. Metnin SOL hizası değişmiyor:
       ikon da çizgi de kutunun dışında, boşlukta duruyor. */
    min-height:38px;
}

.post-card .quote-copy-row::before{
    /* İkonun altından başla, onunla aynı dikey eksende:
       ikon -12..0 arası, merkezi -6; çizgi -7..-5 arası, merkezi -6. */
    left:-7px;
    top:16px;
    bottom:4px;
    width:2px;
}


/* ==========================================================================
   v23 — ALINTI: ASILI TIRNAK + EPİGRAF KÜNYESİ
   --------------------------------------------------------------------------
   İkon ve ince çizgi kalktı. Yerlerine tek bir tipografik işaret geldi:
   sol boşluğa ASILI büyük bir açılış tırnağı. Metnin sol hizası değişmiyor
   — glif kutunun dışında duruyor, satır başı yine kullanıcı adıyla aynı
   çizgide.

   Neden buraya sığıyor: avatar yalnız kartın TEPESİNDE. Alıntı bloğu
   başlığın altından başladığı için sol sütun o hizada boş; glif 12px'lik
   boşlukla sınırlı değil, gerçek bir kenar boşluğuna asılabiliyor.

   Otomatik " karakteri de kaldırıldı (post_form.php, submitPost). Alıntı
   işareti artık yalnızca burada, yani geri alınabilir bir yerde.
   ========================================================================== */

/* Eski SVG ikon tamamen dışarıda. */
.post-card .quote-mark-inline{display:none}

.post-card .quote-copy-row{
    padding-left:0;
    padding-bottom:0;
    min-height:0;
}

/* ::before artık çizgi değil, glif. Eski çizgi kurallarının hepsi
   burada sıfırlanıyor (background, width, bottom). */
.post-card .quote-copy-row::before{
    content:"\201C";

    left:-26px;
    top:-14px;
    right:auto;
    bottom:auto;

    width:auto;
    height:auto;
    background:none;
    border-radius:0;

    font-family:var(--post-quote-font), Georgia, "Times New Roman", serif;
    font-size:46px;
    font-weight:700;
    line-height:1;
    color:rgba(29,155,240,.26);

    pointer-events:none;
    user-select:none;
}
html.dark .post-card .quote-copy-row::before{color:rgba(29,155,240,.34)}

/* Dar ekranda glif küçülüyor ve boşluğa yaklaşıyor: sol sütun orada
   daha dar, 46px'lik glif kartın dolgusuna taşardı. */
@media (max-width:520px){
    .post-card .quote-copy-row::before{
        left:-20px;
        top:-11px;
        font-size:36px;
    }
}

/* --- Alıntı metni ------------------------------------------------------- */
/* Bir punto büyük, satır arası biraz sıkı. Alıntı kartın konusu;
   normal gönderi metniyle aynı ölçüde olması onu sıradanlaştırıyordu. */
.post-card .quote-main-text{
    font-size:17.5px;
    line-height:1.30;
    letter-spacing:-.008em;
}
@media (max-width:520px){
    .post-card .quote-main-text{font-size:16px !important}
}

/* --- Künye: kitap adı üstte, yazar altta ------------------------------ */
.post-card .quote-book-meta{
    gap:9px;
    margin-left:0;

    /* Alıntı metni ile kitap kapağı/künye arasına daha fazla nefes. */
    margin-top:18px;

    min-width:0;
    align-items:center;
}

.post-card .quote-book-cover{
    width:24px;
    height:35px;
    border-radius:2px;
    transform:none;
    box-shadow:0 1px 3px rgba(15,23,42,.18);
}

.post-card .quote-credit-stack{
    display:flex;
    flex:1 1 auto;
    min-width:0;
    flex-direction:column;
    justify-content:center;
    gap:2px;
}

.post-card .quote-credit-title,
.post-card .quote-credit-author{
    display:block;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    font-family:var(--post-ui-font);
    letter-spacing:0;
    text-transform:none;
}

.post-card .quote-credit-title{
    color:#4b5563;
    font-size:12.5px;
    font-weight:500;
    line-height:1.2;
}

.post-card .quote-credit-author{
    color:#656d7a;   /* #7b8492 / 11.5px idi — OKUNURLUK_20261026 */
    font-size:12.5px;
    font-weight:400;
    line-height:1.2;
}

html.dark .post-card .quote-credit-title{color:#c3c9d1}
html.dark .post-card .quote-credit-author{color:#929cab}


/* ==========================================================================
   v24 — TIRNAKLAR METNİN İÇİNDE
   --------------------------------------------------------------------------
   v23'teki asılı büyük glif kaldırıldı: 46px'te profil fotoğrafıyla
   yarışıyordu ve göz önce ona gidiyordu. Alıntının kendisi öne çıkmalı.

   Yerine metnin başında ve sonunda, satır akışının içinde duran küçük
   tırnaklar. Karakter olarak DEĞİL, ::before/::after ile — veritabanına
   hiçbir şey yazılmıyor.
   ========================================================================== */

/* Asılı glifi kapat. */
.post-card .quote-copy-row::before{content:none}

.post-card .quote-text-inner::before,
.post-card .quote-text-inner::after{
    color:rgba(29,155,240,.62);
    font-family:inherit;
    font-weight:600;
    /* Metinden bir tık büyük: aynı puntoda tırnak gövdesi kaybolur,
       çok büyütünce de metnin önüne geçer. */
    font-size:1.08em;
    line-height:0;
}
html.dark .post-card .quote-text-inner::before,
html.dark .post-card .quote-text-inner::after{color:rgba(29,155,240,.72)}

.post-card .quote-text-inner::before{content:"\201C";margin-right:1px}
.post-card .quote-text-inner::after{content:"\201D";margin-left:1px}

/* Kesilmiş alıntı: cümle bitmediği için kapanış tırnağı yok. */
.post-card .quote-text-inner.is-trunc::after{content:none}


/* ==========================================================================
   v25 — TIRNAK BOYUTU VE KAPANIŞIN KONUMU
   Açılış tırnağı metnin sol ÜSTÜNDE kalıyor (doğal yeri orası),
   kapanış tırnağı sağ ALTA indiriliyor. position:relative + top ile
   kaydırıldığı için satır yüksekliğini etkilemiyor, alttaki künyeyi
   aşağı itmiyor.
   ========================================================================== */
.post-card .quote-text-inner::before,
.post-card .quote-text-inner::after{
    font-size:1.26em;
}
.post-card .quote-text-inner::after{
    position:relative;
    top:.24em;
    margin-left:2px;
}


/* ==========================================================================
   v26 — GÖNDERİ ANKETİ
   --------------------------------------------------------------------------
   İki görünüm aynı kutuda: OYLANABİLİR (tıklanabilir düğmeler, yüzde yok)
   ve SONUÇ (dolgu çubuğu + yüzde). Geçiş JS ile, sayfa yenilenmeden.
   Alıntılanan ankette (.is-embedded) her zaman sonuç görünüyor ve
   tıklanamıyor.
   ========================================================================== */
.post-poll{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin:12px 0 4px;
}
.post-poll.is-sending{opacity:.6;pointer-events:none}

/* --- Oylanabilir seçenek --- */
.post-poll .poll-opt{
    display:block;
    width:100%;
    margin:0;padding:6px 13px;
    border:1.5px solid #1d9bf0;
    border-radius:9999px;
    background:transparent;
    color:#1d9bf0;
    font-family:var(--post-ui-font);
    font-size:14px;font-weight:650;
    text-align:center;
    cursor:pointer;
    transition:background-color .14s ease;
    -webkit-tap-highlight-color:transparent;
}
.post-poll .poll-opt:hover{background:rgba(29,155,240,.10)}
.post-poll .poll-opt:focus-visible{outline:2px solid #1d9bf0;outline-offset:2px}
.post-poll .poll-opt-label{
    display:block;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* --- Sonuç satırı --- */
/* Çubuk mutlak konumlu bir katman; metin onun ÜSTÜNDE duruyor.
   Böylece uzun seçenek adları çubuğun genişliğinden bağımsız. */
.post-poll .poll-row{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    min-height:34px;
    padding:6px 11px;
    border-radius:9999px;
    background:#eef2f6;
    overflow:hidden;
}
html.dark .post-poll .poll-row{background:rgba(255,255,255,.06)}

.post-poll .poll-bar{
    position:absolute;
    left:0;top:0;bottom:0;
    border-radius:9999px;
    background:rgba(29,155,240,.26);
    transition:width .35s cubic-bezier(.22,.61,.36,1);
}
html.dark .post-poll .poll-bar{background:rgba(29,155,240,.32)}

/* Kendi oyu: çubuk daha dolu, metin daha koyu. Ayrıca sola ince bir
   işaret — renk körü kullanıcı için tek sinyal renk olmasın. */
.post-poll .poll-row.is-mine .poll-bar{background:rgba(29,155,240,.42)}
html.dark .post-poll .poll-row.is-mine .poll-bar{background:rgba(29,155,240,.50)}
.post-poll .poll-row.is-mine::after{
    content:"";
    position:absolute;left:0;top:0;bottom:0;
    width:3px;
    background:#1d9bf0;
}
.post-poll .poll-row.is-mine .poll-row-label{font-weight:750}

.post-poll .poll-row-label{
    position:relative;
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-family:var(--post-ui-font);
    font-size:14px;font-weight:600;
    color:#1f2937;
}
html.dark .post-poll .poll-row-label{color:#e5e7eb}

.post-poll .poll-row-pct{
    position:relative;
    flex:0 0 auto;
    font-family:var(--post-ui-font);
    font-size:13px;font-weight:700;
    font-variant-numeric:tabular-nums;
    color:#4b5563;
}
html.dark .post-poll .poll-row-pct{color:#cbd5e1}

/* --- Alt satır --- */
.post-poll .poll-foot{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:5px;
    margin-top:2px;
    font-family:var(--post-ui-font);
    font-size:12.5px;
    color:#8a939e;
}
html.dark .post-poll .poll-foot{color:#7f8792}
.post-poll .poll-dot{opacity:.6}
.post-poll .poll-hint{font-style:italic}
.post-poll .poll-error{
    flex:1 1 100%;
    color:#b4531f;
    font-weight:600;
}
html.dark .post-poll .poll-error{color:#e09367}

/* --- Alıntılanan anket --- */
/* Gömülü kartın tamamı zaten bir bağlantı; anket orada bir bilgi
   parçası, etkileşim değil. Küçültülüyor ve tıklama geçirmiyor. */
.post-poll.is-embedded{
    margin:8px 0 0;
    gap:6px;
    pointer-events:none;
}
.post-poll.is-embedded .poll-row{min-height:30px;padding:5px 9px;border-radius:9999px}
.post-poll.is-embedded .poll-row-label{font-size:13px}
.post-poll.is-embedded .poll-row-pct{font-size:12px}
.post-poll.is-embedded .poll-foot{font-size:11.5px}


/* ==========================================================================
   GÖNDERİ KUTUSUNDAKİ ANKET PANELİ
   ========================================================================== */
.post-poll-panel{
    margin:12px 0 2px;
    padding:12px;
    border:1px solid #e3e7eb;
    border-radius:14px;
    background:#fbfcfd;
}
html.dark .post-poll-panel{border-color:rgba(255,255,255,.10);background:rgba(255,255,255,.03)}

.post-poll-options{display:flex;flex-direction:column;gap:8px}

.post-poll-row{display:flex;align-items:center;gap:8px}

.post-poll-input{
    flex:1 1 auto;
    min-width:0;
    padding:9px 12px;
    border:1px solid #d7dde4;
    border-radius:10px;
    background:#fff;
    color:inherit;
    font-family:var(--post-ui-font);
    font-size:14px;
}
html.dark .post-poll-input{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
.post-poll-input:focus{outline:2px solid #1d9bf0;outline-offset:-1px;border-color:transparent}

.post-poll-row-remove{
    flex:0 0 26px;
    display:grid;place-items:center;
    width:26px;height:26px;
    padding:0;border:0;border-radius:50%;
    background:transparent;
    color:#8a939e;
    cursor:pointer;
}
.post-poll-row-remove:hover{background:rgba(15,23,42,.06);color:#1f2937}
html.dark .post-poll-row-remove:hover{background:rgba(255,255,255,.08);color:#e5e7eb}
.post-poll-row-remove svg{width:13px;height:13px;fill:none;stroke:currentColor}

.post-poll-add{
    align-self:flex-start;
    margin-top:2px;
    padding:6px 0;
    border:0;background:transparent;
    color:#1d9bf0;
    font-family:var(--post-ui-font);
    font-size:13px;font-weight:650;
    cursor:pointer;
}
.post-poll-add:hover{text-decoration:underline}

.post-poll-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:12px;
    padding-top:10px;
    border-top:1px solid #e9edf1;
}
html.dark .post-poll-bar{border-top-color:rgba(255,255,255,.08)}

.post-poll-duration{
    display:flex;align-items:center;gap:7px;
    font-family:var(--post-ui-font);
    font-size:13px;
    color:#6b7480;
}
html.dark .post-poll-duration{color:#9aa3ae}
.post-poll-duration select{
    padding:5px 8px;
    border:1px solid #d7dde4;
    border-radius:8px;
    background:#fff;
    color:inherit;
    font-family:inherit;
    font-size:13px;
}
html.dark .post-poll-duration select{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.05)}

.post-poll-remove{
    padding:5px 0;
    border:0;background:transparent;
    color:#b4531f;
    font-family:var(--post-ui-font);
    font-size:13px;font-weight:650;
    cursor:pointer;
}
.post-poll-remove:hover{text-decoration:underline}
html.dark .post-poll-remove{color:#e09367}

/* ==========================================================================
   ETKİLEŞİM SATIRI — İKON / SAYI ARALIĞI + GÖRÜNTÜLENME GÖZÜ
   ========================================================================== */

/* Yorum / rebook / beğeni ikonlarının kendi 6px sağ padding'i sayı ile
   araya gereksiz mesafe koyuyordu. Sayaçları ikonlara optik olarak yaklaştır. */
.post-card .post-actions .post-comment-count,
.post-card .post-actions .post-rebook-count,
.post-card .post-actions .post-like-count{
    margin-left:-5px !important;
}

/* Görüntülenmede wrapper padding'i yok; küçük ve kontrollü bir aralık yeterli. */
.post-card .post-stats-link{
    gap:2px !important;
}

.post-card .post-view-count{
    margin-left:0 !important;
}

/* ==========================================================================
   ETKİLEŞİM ÇUBUĞU — KONTRAST
   --------------------------------------------------------------------------
   İkonlar ve SAYILAR Tailwind "text-gray-400" ile geliyordu = #9ca3af.
   Beyaz üstünde 2.54:1. Sayılar gerçek metin (12px rakam) ve WCAG AA 4.5
   istiyor; ikonlar için alt sınır 3:1 — #9ca3af ikisini de geçemiyor.
   Kartta düzelttiğim en son yer burasıydı: tarih ve @kullanıcı #656d7a
   olurken hemen altındaki sayılar #9ca3af kalsaydı aynı kartta iki ayrı
   gri olurdu.

   ":not(:hover)" ŞART. Seçici (0,4,0) özgüllükte; Tailwind'in
   ".hover\:text-black:hover" kuralı (0,2,0). Düz yazsaydım hover'ı da
   ezer ve çubuktaki bütün geri bildirim ölürdü (gönderi detay
   sayfasındaki ".pd-page ... .text-gray-400" kuralında bu kaza zaten
   olmuş durumda — post.css'te düzeltilecek).
   Koyu temaya dokunulmadı: #9ca3af siyah üstünde ~8:1. */
.post-card .post-actions .text-gray-400:not(:hover) {
    color: #656d7a;
}

/* KOYU TEMA AÇIĞI — İLK SÜRÜMDE UNUTTUM.
   Üstteki kural tema ayrımı yapmıyordu; #656d7a siyah zeminde 3.3:1,
   yani karanlık modda ikonları ve sayıları ben soluklaştırmış oluyordum.
   #9ca3af siyahta ~8:1 — markup'taki özgün değer, geri konuyor. */
html.dark .post-card .post-actions .text-gray-400:not(:hover) {
    color: #9ca3af;
}

/* Kaydet sayacı da diğer üçüyle aynı optik aralığı alsın. */
.post-card .post-actions .post-save-count{
    margin-left:-5px !important;
}

/* Kullanıcının verdiği klasik göz geometrisi. */
.post-card .post-stats-icon{
    display:block;
    width:17px;
    height:17px;
    flex:0 0 17px;
    overflow:visible;
}


/* ==========================================================================
   ALINTI — ESKİ DİKEY ÇİZGİ SİSTEMİNE GERİ DÖNÜŞ
   ========================================================================== */

/* v23'teki büyük asılı pseudo-tırnakları tamamen kapat. */
.post-card .quote-text-inner::before,
.post-card .quote-text-inner::after {
    content: none !important;
}

/* Eski küçük mavi açılış ikonu geri. */
.post-card .quote-mark-inline {
    display: flex !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 17px !important;
    height: 17px !important;
    color: #1D9BF0 !important;
}

.post-card .quote-mark-inline svg {
    width: 17px !important;
    height: 17px !important;
}

/* Metin yeniden ikon + dikey çizgi için soldan yer açıyor. */
.post-card .quote-copy-row {
    position: relative !important;
    display: block !important;
    padding-left: 20px !important;
    padding-bottom: 8px !important;
    min-height: 48px !important;
}

/* Eski ince mavi dikey çizgi. */
.post-card .quote-copy-row::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 8px !important;
    top: 21px !important;
    right: auto !important;
    bottom: 5px !important;
    width: 1px !important;
    height: auto !important;
    border-radius: 999px !important;
    background: rgba(29, 155, 240, .58) !important;
    color: transparent !important;
    font-size: 0 !important;
}

html.dark .post-card .quote-copy-row::before {
    background: rgba(29, 155, 240, .70) !important;
}

/* Alıntı metni normal akışta. */
.post-card .quote-main-text {
    position: relative;
}

/* Kitap künyesi eski çizginin x eksenine otursun; önceki 18px
   dikey nefes korunuyor. */
.post-card .quote-book-meta {
    margin-left: 8px !important;
    margin-top: 18px !important;
}

/* ==========================================================================
   GÖRÜNTÜLENME / İSTATİSTİK — İNCE ÇUBUK GRAFİK
   ========================================================================== */
.post-card .post-stats-link {
    gap: 2px !important;
}

.post-card .post-stats-icon {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    overflow: visible;
}


/* ==========================================================================
   ALINTILA MODALI — AVATAR / BOŞLUK / CTA DÜZELTMESİ
   ========================================================================== */

/* Alıntılanan gönderinin avatarı modal önizlemesinde 20px fazla küçüktü.
   Yalnız modal içindeki kopyayı büyüt; normal gömülü gönderi kartlarına dokunma. */
.rebook-quote-preview .post-rebook-embed-head > img {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    margin: 0 0 -6px !important;   /* akıştaki kutuyla birebir */
}

/* Modal ve akıştaki alıntılanan kart aynı kimlik ölçüsünü kullanır. */
.rebook-quote-preview .post-rebook-embed-body {
    margin-left: 44px !important; /* 36px avatar + 8px gap */
    margin-top: 0 !important;
}

/* Kullanıcının kendi alıntı notu için daha rahat yazma yüksekliği. */
.rebook-quote-compose textarea {
    min-height: 88px;
}

/* Sayaç ile alıntılanacak gönderiyi belirgin biçimde ayır. */
.rebook-quote-meter {
    padding-bottom: 0 !important;
}

.rebook-quote-preview.post-rebook-embed {
    margin: 28px 0 0 52px !important;
}

/* CTA gereksiz yüksek değildi: tek satırlık kompakt full-radius buton. */
#rebookQuoteSubmit {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 16px !important;
    line-height: 1 !important;
    border-radius: 9999px !important;
}

/* Footer da buton yüzünden gereksiz yükselmesin. */
#rebookQuoteModal .relative.z-10 > .flex.items-center.justify-end {
    padding-top: 8px !important;
    padding-bottom: 12px !important;
}

@media (max-width: 520px) {
    .rebook-quote-preview.post-rebook-embed {
        margin: 24px 0 0 0 !important;
    }

    .rebook-quote-compose textarea {
        min-height: 82px;
    }
}


/* ==========================================================================
   ALINTILA MODALI — OKUR DÜZEYİ + CTA DİKEY AYRIŞTIRMA
   ========================================================================== */

/* Modal önizlemesinin başlığı ana post kartındaki HEADER AKIŞINI birebir
   kullanır: ad/@kullanıcı/tarih aynı flex satırında, okur düzeyi aynı
   flex-wrap içinde ikinci satırdır. Böylece ana karttaki 6px row-gap +
   .post-reader-level'in -5px margin'i birlikte çalışır; düzey ne uzağa
   kaçar ne de ada yapışır. */
.rebook-quote-head-meta {
    flex: 1 1 auto;
    min-width: 0;
}

/* Ana kartta uzun ad yalnız .name-trunc üzerinde kesiliyor ve rozet
   kesilmeden dışarıda kalıyor. Modal da artık aynı DOM yapısını kullanıyor. */
.rebook-quote-preview .post-rebook-embed-name {
    min-width: 0;
}

.rebook-quote-reader-level[hidden] {
    display: none !important;
}

/* Alıntıla butonu çerçevenin dibine yapışmasın.
   Önceki override 8px'ti; 20px'e çıkarıldı. */
#rebookQuoteModal .relative.z-10 > .flex.items-center.justify-end {
    padding-top: 20px !important;
    padding-bottom: 12px !important;
}



/* ##########################################################################
   ANASAYFA — DÜZ GÖNDERİDE İSİM SATIRI → METİN ARASI
   --------------------------------------------------------------------------
   ÖLÇÜM (telefon genişliği, okur düzeyi OLMAYAN kart):
       anasayfa  ARA 11.0px
       profil    ARA -1.0px
   12px fark, anasayfa fazla.

   SEBEP: bu dosyada aynı elemana iki kural yazıyor —
       satır 199  .home-center-surface ... .flex.items-start
                  margin-bottom: 0px !important
       satır 453  .post-card ... .flex.items-start:not(:has(.post-reader-level))
                  margin-bottom: -8px !important
   İkisi de 6 sınıf, yani aynı özgüllükte. Tarayıcıda ölçtüğümde kazanan
   199 çıktı (hesaplanan değer 0px), yani düz gönderideki -8px anasayfada
   hiç uygulanmıyordu. Profilde uygulanıyor, fark buradan.

   AŞAĞIDAKİ KURAL 7 sınıf taşıyor, ikisini de geçiyor ve SADECE şunu
   yapıyor: anasayfadaki DÜZ gönderide profildeki değeri uygular.

   DOKUNMADIKLARI — bunları özellikle yazıyorum:
     · Alıntı ve değerlendirme kartları (okur düzeyi VAR) — :not(:has())
       onları dışarıda bırakıyor, tek piksel değişmiyor.
     · Kartın kendi dolgusu, marjı, köşesi, gölgesi.
     · Masaüstü — ölçüm mobilde yapıldı ama kural her genişlikte aynı
       davranıyor, çünkü profildeki karşılığı da öyle. İki sayfa her
       genişlikte eşit oluyor.

   GERİ ALMAK İÇİN: bu bloğun tamamını sil.
   ########################################################################## */
.home-center-surface .post-card > .flex > .flex-1 > .flex.items-start:not(:has(.post-reader-level)) {
    margin-bottom: -8px !important;
}


/* ##########################################################################
   ALINTI KUTUSUNDA KAYBOLAN KULLANICI ADI
   --------------------------------------------------------------------------
   SORUN: alıntılanan gönderinin künye satırında ad ve @kullanıcı hiç
   görünmüyor, yerinde yalnız süre ve okur düzeyi kalıyordu.

   SEBEP: o satır (post_card.php:722) iki sınıf taşıyor —
       class="post-rebook-embed-meta post-header-meta"
   İkincisi yüzünden mobildeki şu kural ona da uyguluyor:
       .post-card .post-header-meta { flex-wrap: nowrap }
   Okur düzeyi ise "flex: 0 0 100%" ile kendi satırına inmek üzere
   yazılmış. nowrap varken alt satıra inemiyor, aynı satırda %100 yer
   kaplıyor ve ad ile @kullanıcıyı sıfıra eziyor.

   ÇÖZÜM: sarma yalnızca ALINTI KUTUSUNUN künye satırında geri açılıyor.
   Ana kartın künye satırı nowrap kalıyor — ona dokunulmadı.

   GERİ ALMAK İÇİN: bu bloğun tamamını sil.
   ########################################################################## */
@media (max-width: 640px) {
    .post-card .post-rebook-embed-meta,
    .post-card .rebook-quote-head-meta {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    /* Ad hiçbir koşulda sıfıra inmesin: önce @kullanıcı kısalsın.
       (Üç harf + üç nokta en azından kimin yazdığını belli eder.) */
    .post-card .post-rebook-embed-name { flex: 0 1 auto; min-width: 3ch; }
    .post-card .post-rebook-embed-user { flex: 1 1 0;    min-width: 0; }
}


/* ##########################################################################
   KÜNYE SATIRI VE TAKİP DÜĞMESİ
   ########################################################################## */

/* --- OKUR DÜZEYİ ---
   Punto yarım px küçüldü (12 -> 11.5) ve kullanıcı adıyla arası 1px açıldı
   (margin-top -5 -> -4). Mobilde düzey satırı mutlak konumlu olduğu için
   oradaki mesafe "bottom" ile ayarlanıyor: -1px -> -2px, ve ona ayrılan
   yer 1px artıyor (13 -> 14) ki alttaki içerikle çakışmasın.

   NOT: bu satır artık 15px tabanından MUAF (_punto_uret.php, PUNTO_CIZIM).
   Taban açıkken 11.5 de 12 de mobilde 15px'e çıkıyordu, yani bu değişiklik
   hiçbir şey yapmazdı. */
.post-reader-level {
    margin-top: -4px;
    font-size: 11.5px;
}

@media (max-width: 640px) {
    .post-card .post-reader-level {
        bottom: -2px;
        font-size: 11px;
    }
    /* :not(...) BİLEREK — bu kural yalnızca ANA kartın künyesi için.
       Alıntılanan kutunun künyesi de "post-header-meta" sınıfını
       taşıyor, orada okur düzeyi MUTLAK DEĞİL akışta duruyor
       (.post-rebook-reader-level → position:static). Yani kutuda bu
       14px'in ayıracağı bir yer yok; düpedüz boş şerit oluyordu.
       Kullanıcının "alıntılanan gönderide çok fazla boşluk var"
       dediği şey mobilde buydu. */
    .post-card .post-header-meta:not(.post-rebook-embed-meta):has(.post-reader-level) {
        padding-bottom: 14px;
    }
}


/* --- TAKİP DÜĞMESİ: MOBİLDE ÇIPLAK İKON ---
   Kutulu düğme dar ekranda kartın künye satırını sıkıştırıyordu. Mobilde
   kutu, kenarlık, zemin ve yazı tamamen kalkıyor; geriye mavi ikon kalıyor.

   DOKUNMA HEDEFİ KORUNUYOR: görünen ikon 20px ama şeffaf bir ::after
   katmanı dokunulan alanı 44px'te tutuyor. Çizilen şey küçüldü, basılan
   şey küçülmedi.

   .follow-btn layout.php'nin satır içi <style> bloğunda tanımlı; o blok
   <head>'de dış CSS'lerden ÖNCE geldiği için buradan ezilebiliyor.
   layout.php'ye dokunmaya gerek yok.

   KOYU TEMA AYRI YAZILMAK ZORUNDA: "html.dark .follow-btn" iki sınıflık
   bir seçici, tek sınıflık kuralımı yener. */
@media (max-width: 767px) {
    /* SEÇİCİ LİSTESİ UZUN, SEBEBİ VAR: kutuyu ve ikon ölçüsünü
       daraltan kurallar bu dosyada ".post-card .follow-btn" ve
       ".review-card-head-right .follow-btn" olarak İKİ SINIFLA
       yazılmış (satır ~236 ve ~1516). Tek sınıflık ".follow-btn"
       onları yenemiyordu: ikon kart içinde 12px'te kalıyor, yani
       "ufacık" görünüyordu. Aynı ölçüyü iki sınıflık seçicilerle
       de yazmak dışında yolu yok. */
    .follow-btn,
    html.dark .follow-btn,
    .post-card .follow-btn,
    .review-card-head-right .follow-btn,
    .suggest-row .follow-btn {
        position: relative;
        gap: 0;
        min-height: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        color: #1d9bf0;
    }
    .follow-btn > span { display: none; }

    .follow-btn svg,
    .post-card .follow-btn svg,
    .review-card-head-right .follow-btn svg,
    .suggest-row .follow-btn svg {
        flex: 0 0 22px;
        width: 22px;
        height: 22px;
        stroke-width: 2;
    }

    .follow-btn::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 44px;
        height: 44px;
    }

    /* Takip ediliyorsa mavi değil nötr: "zaten yaptın" demek. */
    .follow-btn.is-following,
    html.dark .follow-btn.is-following { color: #656d7a; }
    .follow-btn:hover,
    html.dark .follow-btn:hover { background: transparent; border: 0; }
}


/* ==========================================================================
   26. SON GEÇİŞ — KİTAP KAPAĞI, "GÖRÜNTÜLENEMİYOR" KUTUSU, MODAL YAZI ALANI
   --------------------------------------------------------------------------
   Üçü de post_card.php ile BİRLİKTE çalışıyor; o dosya ayrıca gönderildi.
   ========================================================================== */

/* --- 1) KİTAP KAPAĞI: SATIR İÇİ STİL KALKTI ---------------------------------
   Markup'ta şu duruyordu:
       style="transform: perspective(300px) rotateY(20deg);
              box-shadow: 6px 8px 20px rgba(100,100,100,0.5);"
   İki sorun vardı. Birincisi 20° eğim + 0.5 alfalı DÜZ GRİ gölge: 28x40px'lik
   bir kapak için çok sert, koyu temada siyah zeminde gri bir leke bırakıyordu.
   İkincisi tutarlılık: değerlendirme kartındaki kapağı bu seansta 14°'den 9°'ye
   ve yumuşak gölgeye çektik. Aynı nesne iki kartta iki ayrı dille duruyordu.

   Değerler review_card.css'teki .review-card-cover ile BİREBİR aynı — ileride
   biri değişirse ikisi birlikte değişsin diye kasten aynı sayılar.
   Satır içi stil CSS'e taşındı; artık !important'sız ezilebiliyor. */
.post-book-cover {
    border-radius: 2px;
    transform: perspective(220px) rotateY(9deg);
    transform-origin: center left;
    box-shadow: 2px 3px 8px rgba(0, 0, 0, .12);
}

html.dark .post-book-cover {
    box-shadow: 2px 3px 10px rgba(0, 0, 0, .5);
}

/* --- 2) "BU GÖNDERİ GÖRÜNTÜLENEMİYOR" KUTUSU --------------------------------
   Kenarlığı post_card.php'de kaldırıldı (karttaki hiçbir kutuda kenarlık yok).
   Kenarlık gidince "p-3 rounded-2xl" dolgusu görünmeyen bir kutuyu
   dolduruyordu: yazı boşlukta duruyor, yuvarlak köşe hiç okunmuyordu.
   Yerine ince bir dolgu yüzeyi — kutuyu çizen şey artık çizgi değil zemin. */
.post-gone {
    background: #f3f5f8;
}

html.dark .post-gone {
    background: rgba(255, 255, 255, .05);
}

/* --- 3) ALINTILA MODALI: YAZI ALANI 14px İDİ -------------------------------
   Markup'ta "class=text-sm" vardı = 14px. mobile.css:92'de
   "input, textarea, select { font-size: 16px }" kuralı var ve dosya kendi
   yorumunda "sınıf seçicileri eleman seçicisini yener" diyerek .msg-input
   gibi alanları tek tek yamalıyor — ama bu yazı alanı o listede yoktu.
   Sonuç: iPhone'da alana odaklanınca sayfa zorla yakınlaşıyordu.

   "text-sm" post_card.php'den kaldırıldı, punto buraya alındı.
   DEĞER 16px, 15px DEĞİL — bilerek: _punto_uret.php mobil puntoları
   masaüstü değerinden üretiyor (15-20px arası x1.12). 15px yazsaydım
   üretici çalışana kadar mobilde 15px kalır ve yakınlaştırma geri gelirdi.
   16px, üretici hiç çalışmasa bile eşiğin üstünde. */
#rebookQuoteText {
    font-size: 16px;
}


/* =========================================================
   24. ALINTI KARTI — METİN AVATARIN ALTINDAN BAŞLAR
   ---------------------------------------------------------
   Yalnız type="quote" kartları .is-quote sınıfı alır.
   Başlık/künye avatarın sağında kalır; asıl alıntı bloğu ise avatarın
   altına taşarak kartın tam kullanılabilir genişliğini kullanır.
   Kullanıcının opsiyonel notu başlık sütununda kalır — bu not gönderi
   sahibinin kendi yorumudur, alıntının kendisi değildir.
   ========================================================= */

/* Masaüstü ve tablet: genel kartta avatar 44px, gap-3 = 12px. */
@media (min-width: 641px) {
    .post-card.is-quote .quote-block-bg {
        margin-left: -8px !important;
        width: calc(100% + 8px);
        max-width: calc(100% + 8px);
        margin-top: 4px !important;
    }

    /* Ana akışta başlık boşluğu 8px'e çekildiği için telafi 52px. */
    .home-center-surface .post-card.is-quote .quote-block-bg {
        margin-left: -8px !important;
        width: calc(100% + 8px);
        max-width: calc(100% + 8px);
    }

    /* Okur düzeyi alıntıda masaüstünde çok ufak kalıyordu. */
    .post-card.is-quote .post-reader-level {
        font-size: 13px;
        line-height: 1.15;
    }
}

/* Mobil: avatar 36px + 10px başlık boşluğu = 46px. */
@media (max-width: 640px) {
    .post-card.is-quote .quote-block-bg {
        margin-left: -8px !important;
        width: calc(100% + 8px);
        max-width: calc(100% + 8px);
        margin-top: 3px !important;
    }
}

/* =========================================================
   25. ALINTI KARTI — KULLANICININ NOTU DA TAM GENİŞLİK
   ---------------------------------------------------------
   Alıntı kartındaki opsiyonel "düşünce" metni de asıl alıntı gibi
   avatar sütununun altına taşar. Normal gönderiler etkilenmez.
   ========================================================= */
@media (min-width: 641px) {
    .post-card.is-quote .quote-optional-text {
        margin-left: -56px !important;
        width: calc(100% + 56px);
        max-width: calc(100% + 56px);
        /* Avatarın alt kenarıyla düşünce metni arasında net boşluk bırak. */
        margin-top: 18px !important;
    }

    .home-center-surface .post-card.is-quote .quote-optional-text {
        margin-left: -52px !important;
        width: calc(100% + 52px);
        max-width: calc(100% + 52px);
    }
}

@media (max-width: 640px) {
    .post-card.is-quote .quote-optional-text {
        margin-left: -46px !important;
        width: calc(100% + 46px);
        max-width: calc(100% + 46px);
        /* Yalnız statik boşluk; mobil scroll/reveal davranışına dokunmaz. */
        margin-top: 12px !important;
    }
}

/* =========================================================
   26. ETKİLEŞİM SATIRI — KİTAP KAPAĞI SOL EKSENİ
   ---------------------------------------------------------
   TÜM post-card tiplerinde, mobil + masaüstü:
   İlk aksiyon ikonunun görünen sol kenarı, alıntı kartındaki
   kitap kapağının sol kenarıyla aynı x ekseninden başlar.

   Hesap:
   genel masaüstü: quote blok -56px + kapak 8px = -48px
   ana akış masaüstü: quote blok -52px + kapak 8px = -44px
   mobil: quote blok -46px + kapak 8px = -38px
   ========================================================= */

.post-card .post-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    transform: translateY(3px) !important;
}

.post-card .post-actions-left,
.post-card .post-actions-right {
    display: flex;
    align-items: center;
    min-width: 0;
}

.post-card .post-actions-left {
    gap: 18px;
    margin-left: 0 !important;
}

.post-card .post-actions-right {
    margin-left: auto;
    flex: 0 0 auto;
}

/* SVG, p-1.5 sarmalayıcı içinde 6px içeride.
   -6px ile görünen ikon kenarı post-actions'ın gerçek başlangıcına oturur. */
.post-card .post-actions-left > :first-child > span:first-child {
    margin-left: -6px !important;
}

@media (max-width: 640px) {
    .post-card .post-actions-left > :first-child > span:first-child {
        margin-left: -4px !important;
    }
}

/* Etkileşim ikonları sayılardan bir kademe daha baskın:
   Tailwind w-4/h-4 = 16px idi; yalnız aksiyon ikonları 17px. */
.post-card .post-actions svg.w-4.h-4 {
    width: 18px !important;
    height: 18px !important;
}
/* Aksiyon ikonlarının çizgisi biraz daha tok. */
.post-card .post-actions svg,
.post-card .post-actions svg * {
    stroke-width: 1.9 !important;
}


/* Sayaçlar ikonlardan daha geri planda. */
.post-card .post-actions .post-action-count {
    font-size: 13px !important;    /* 12px idi; mobil zaten 13px */
    font-weight: 400 !important;
    color: #656d7a !important;     /* #7f8996 beyazda 3.6:1 idi — OKUNURLUK_20261026 */
    line-height: 1 !important;
}

html.dark .post-card .post-actions .post-action-count {
    color: #8d96a2 !important;
}

/* Mobilde sayaçlar masaüstünden 1px daha büyük. */
@media (max-width: 640px) {
    .post-card .post-actions .post-action-count {
        font-size: 13px !important;
    }
}

/* MASAÜSTÜ / TABLET:
   Bütün kartlarda aksiyon satırı kitap kapağının sol eksenine taşınır. */
@media (min-width: 641px) {
    .post-card .post-actions,
    .home-center-surface .post-card .post-actions {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

@media (max-width: 640px) {
    .post-card .post-actions {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* Kaydet sağda kalır. */
.post-card .post-actions-right > button {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 0.5px;
}

.post-card .post-actions-right > button > span:first-child {
    padding: 4px !important;
}

.post-card .post-actions-right .post-save-count {
    margin-left: 0 !important;
    margin-right: -5px !important;
}

/* Kaydet sayısı 0 ise gösterme. */
.post-card .post-save-count:empty {
    display: none !important;
}


/* =========================================================
   27. ALINTI ÇİZGİSİ + KİTAP HİZASI
   ========================================================= */

/* Ana mavi çizgi alıntı boyunca iner. */
.post-card .quote-body:has(.quote-book-meta) .quote-copy-row::before {
    bottom: 0 !important;
}

.post-card .quote-book-meta {
    position: relative;
    /* Kapak, mavi çizginin biraz sağında başlar. */
    margin-left: 8px !important;
}

/* Çizgi kitap kapağına yaklaşırken solar; kapağa değmez. */
.post-card .quote-book-meta::before {
    content: "";
    position: absolute;
    left: 0;
    top: -18px;
    width: 1px;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(
        to bottom,
        rgba(29, 155, 240, .58) 0%,
        rgba(29, 155, 240, .24) 58%,
        rgba(29, 155, 240, 0) 100%
    );
    pointer-events: none;
}

html.dark .post-card .quote-book-meta::before {
    background: linear-gradient(
        to bottom,
        rgba(29, 155, 240, .70) 0%,
        rgba(29, 155, 240, .30) 58%,
        rgba(29, 155, 240, 0) 100%
    );
}


/* =========================================================
   28. ALINTI PUNTOSU
   ========================================================= */

/* Masaüstü mevcut değer. */
.post-card.is-quote .quote-main-text {
    font-size: 15px !important;
}

/* Mobil yalnızca +1px: 14.5px. */
@media (max-width: 640px) {
    .post-card.is-quote .quote-main-text {
        font-size: 16px !important;
    }
}


/* MOBİL — normal gönderi: kullanıcı bilgisi ile metin arasını aç */
@media (max-width: 640px) {
    .post-card:not(.is-quote) .post-main-text {
        padding-top: 6px !important;
    }
}



html.dark .post-card .post-card-absolute-date {
    color: #9ca3af;
}

/* =========================================================
   ALINTILI REBOOK MODALI — MOBILDE ALTTAN CEKMECE
   REBOOK_SHEET_20261019
   ---------------------------------------------------------
   Hedef: "Gonderi Olustur" ile AYNI davranis (post_form.php
   icindeki .post-modal-box kurallari). Kutu ekranin altindan
   yukari kayarak gelir, tam genislik, ust kose yuvarlak,
   klavye acilinca --kb ile klavyenin ustune oturur.

   NEDEN !important
     Kabukta  satir ici style="padding:8vh 16px 16px"
     Panelde  satir ici style="max-width:520px"
   Satir ici stil sinif kurallarini yener. Markup'tan silmek
   masaustu gorunumunu bozardi; yalnizca mobilde eziyoruz.

   KAPATMAK
     Bu blogu sil. Modal eski haline (ortada diyalog) doner.
     assets/js/panel_cek_kapat.js de .rbq-head bulamayinca
     kendiliginden devre disi kalir.
   ========================================================= */
@media (max-width: 767px) {

    #rebookQuoteModal {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    #rebookQuoteModal .rbq-box {
        width: 100%;
        max-width: none !important;
        margin-bottom: var(--kb, 0px);
        max-height: calc(94dvh - var(--kb, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border-radius: 22px 22px 0 0;
        overflow-y: auto;
    }

    /* display:none -> flex gecisinde transition calismaz, animation calisir.
       Ayni sebeple post_form.php de animation kullaniyor. */
    #rebookQuoteModal.flex .rbq-box {
        animation: rbqSheetUp .26s cubic-bezier(.22, .7, .2, 1);
    }
    @keyframes rbqSheetUp {
        from { transform: translateY(100%); }
        to   { transform: none; }
    }

    /* Baslik kayarken ustte kalsin; tutamac ve Kapat hep gorunur olsun. */
    #rebookQuoteModal .rbq-head {
        position: sticky;
        top: 0;
        z-index: 2;
        padding-top: 18px;
        background: var(--rbq-bg, #fff);
    }

    /* TUTAMAC — mobile-nav.js'teki .mfab-grab ile ayni olculer.
       Markup'a dokunulmadi. Hareketin kesfedilmesi icin sart:
       tutamac yoksa kullanici panelin cekilebildigini bilmez. */
    #rebookQuoteModal .rbq-head::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 38px;
        height: 4px;
        border-radius: 99px;
        background: rgba(120, 130, 145, .35);
    }
}


/* BOOK_LINK_HOVER_20261028 */
.post-card .quote-book-meta a.quote-credit-stack,
.post-card .quote-book-meta a.quote-credit-stack > span {
    text-decoration: none !important;
}
.post-card .quote-book-meta a.quote-credit-stack > span {
    transition: color 160ms ease;
}
.post-card .quote-book-meta a[href] > .quote-book-cover {
    transition: filter 160ms ease;
}
@media (hover: hover) {
    .post-card .quote-book-meta a.quote-credit-stack:hover > span {
        color: #087bbd !important;
    }
    html.dark .post-card .quote-book-meta a.quote-credit-stack:hover > span {
        color: #65c4ff !important;
    }
    .post-card .quote-book-meta a[href]:hover > .quote-book-cover {
        filter: brightness(1.10);
    }
}
.post-card .quote-book-meta a.quote-credit-stack:focus-visible > span {
    color: #087bbd !important;
}
html.dark .post-card .quote-book-meta a.quote-credit-stack:focus-visible > span {
    color: #65c4ff !important;
}
.post-card .quote-book-meta a[href]:focus-visible > .quote-book-cover {
    outline: 2px solid #1d9bf0;
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    .post-card .quote-book-meta a.quote-credit-stack > span,
    .post-card .quote-book-meta a[href] > .quote-book-cover {
        transition: none;
    }
}
/* END_BOOK_LINK_HOVER_20261028 */


/* POST_CARD_HEADER_BASELINE_20261029 */
.post-card .post-header-meta {
    align-items: baseline !important;
}