/* =========================================================
   GÖNDERİ DETAY SAYFASI  (pages/post.php)
   =========================================================

   NE İŞE YARAR

   Bu sayfadaki her kutu Tailwind sınıflarıyla tek tek yazılmıştı ve
   ölçüleri post kartıyla TUTMUYORDU:

       .post-card        → margin 0 20px, radius 24px, yumuşak gölge
       yorum kutuları    → mx-4 (16px), rounded-2xl (16px), shadow-sm

   Yani her kart 4px daha dar, köşeleri 8px daha köşeli ve gölgesi
   farklıydı. Doğru olan post kartıydı; hepsi ona göre hizalandı.

   ---------------------------------------------------------
   HIZLI AYAR — aşağıdaki dört değeri değiştirmen yeterli
   ---------------------------------------------------------
   Sayfadaki bütün kutular bu değişkenleri okur.

     --pd-card-x       kartların sol/sağ boşluğu      (varsayılan 20px)
     --pd-card-gap     kartlar arası dikey boşluk     (varsayılan 16px)
     --pd-card-radius  köşe yuvarlaklığı              (varsayılan 24px)
     --pd-card-pad     kart içi boşluk                (varsayılan 16px)

   DİKKAT: post kartının kendi 20px'i post_card.css satır 149-150'de
   "!important" ile yazılı. --pd-card-x'i değiştirirsen orayı da
   değiştir, yoksa yine tutmaz.

   ---------------------------------------------------------
   ELEMAN HARİTASI — hangi sınıf ekranda neye denk geliyor
   ---------------------------------------------------------

     .pd-center-surface  Orta sütunun zemini ve sol/sağ kenar çizgileri
     .pd-hero            En üstteki "Gönderi" başlık kartı
     .pd-back              └ geri okunun yuvarlak butonu
     .pd-page            Başlığın altındaki her şeyin sarmalı
                           (değişkenler burada tanımlı)

     .pd-composer        "Yanıtını yaz..." satırının kartı
     .pd-composer-avatar   └ soldaki kendi profil fotoğrafın
     .pd-composer-field    └ input + gönder butonunu saran hap
     .pd-composer-input    └ yazı alanı
     .pd-send              └ sağdaki siyah yuvarlak ok butonu

     .pd-empty           "İlk yorumu yaz!" kutusu

     .pd-comment         Bir ana yorumun kartı
     .pd-comment-body      └ avatar + metin sütununu yan yana koyan satır
     .pd-avatar            └ 36px yorumcu fotoğrafı
     .pd-main              └ sağdaki metin sütunu
     .pd-head              └ isim / @kullanıcı / zaman satırı
     .pd-name              └ görünen ad
     .pd-premium           └ ✦ premium işareti
     .pd-handle            └ @kullanıcıadı
     .pd-dot               └ aradaki nokta
     .pd-time              └ "5 gün önce"
     .pd-text              └ yorumun kendisi

     .pd-actions         Yorumun altındaki buton satırı
     .pd-act               └ tek bir buton (ortak taban)
     .pd-act.is-like       └ beğen (aktifken kırmızı)
     .pd-act.is-replies    └ yanıt sayısı / göster-gizle
     .pd-act.is-reply      └ sağdaki "Yanıtla"
     .pd-act-icon          └ butonların 14px ikonu

     .pd-replybox        "@birine yanıtla..." açılan hap kutusu
     .pd-replybox-input    └ yazı alanı
     .pd-replybox-send     └ küçük siyah ok butonu

     .pd-replies         Yanıtların kapsayıcısı (soldan girinti buradan)
     .pd-reply             └ tek bir yanıt kartı (iç yüzey, gölgesiz)

     .pd-notfound        "Gönderi bulunamadı" ekranı

   ---------------------------------------------------------
   GÖVDEDEN SİLİNEN <style> BLOĞU
   ---------------------------------------------------------
   post.php'de değerlendirme gönderileri için 24 satırlık bir <style>
   vardı. İçindeki her seçici zaten review_card.css ve post_card.css'te
   duruyordu; üstelik gövdede olduğu için ONLARI EZİYORDU:

       .rev-card { border-bottom: 1px solid #e5e7eb; }
           → review_card.css'te kart 24px yuvarlak ve gölgeli.
             Bu satır altına düz bir çizgi çiziyordu.
       html.dark .rev-card { background: transparent; }
           → koyu temada kartın zemini (#161a22) kayboluyordu.
       .rev-card.weekly-winner
           → review_card.php satır 9: "weekly winner sistemi kaldırıldı".
             Sınıf hiçbir yerde basılmıyor, ölü kod.
       .pmenu, .pmenu-item, .pmenu-sep
           → post_card.css satır 222'den itibaren zaten var.

   Blok tamamen kaldırıldı; bu dosyada karşılığı yok çünkü gerekmiyor.
   ========================================================= */


/* ---------- ORTA YÜZEY ----------
   BU EKSİKTİ: sayfanın orta sütununu çerçeveleyen dikey çizgiler ve
   zemin yoktu. Değerler profil / keşfet / bildirimler / kaydedilenler
   sayfalarındaki *-center-surface ile BİREBİR aynı. */
.pd-center-surface {
    box-sizing: border-box;
    min-height: 100vh;
    background: #f6f7f9;
    border-left: 1px solid #e2e5ea;
    border-right: 1px solid #e2e5ea;
    box-shadow: 0 12px 32px rgba(17, 24, 39, .04);
}
html.dark .pd-center-surface {
    background: transparent;
    border-left-color: rgba(255, 255, 255, .10);
    border-right-color: rgba(255, 255, 255, .10);
    box-shadow: none;
}


/* ---------- SARMAL VE DEĞİŞKENLER ---------- */
.pd-page {
    --pd-card-x:      20px;
    --pd-card-gap:    16px;
    --pd-card-radius: 24px;
    --pd-card-pad:    16px;

    /* Başlık kartı ile ilk kart arası. Sitedeki diğer sayfalarda
       .page-tabs + * kuralı 24px veriyor; burada sekme yok. */
    padding-top: 24px;
    padding-bottom: 24px;
}


/* ---------- BAŞLIK ----------
   Eskiden "mx-4 mt-4 sticky top-4 bg-transparent" ile yüzen bir
   metindi. Artık sitenin diğer sayfalarındaki kabuk başlığı.
   Sekme olmadığı için arkada ikinci kart yok, negatif payı iptal. */
.page-hero.pd-hero { margin-bottom: 0; }

/* Geri oku başlıkla aynı satırda; .page-hero-head baseline hizalıyor,
   ikon için center gerekiyor. */
.pd-hero .page-hero-head { align-items: center; gap: 10px; }
.pd-hero-left { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* Kitap / yazar sayfalarındaki .entity-back ile BİREBİR aynı:
   entity.css satır 59-75'ten alındı. İkon da aynı — uzun ok değil,
   tek çizgilik chevron (M15 19l-7-7 7-7). */
.pd-back {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-left: -6px;
    border-radius: 9999px;
    color: #6b7280;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.pd-back:hover { background: #f1f3f5; color: #111827; }
html.dark .pd-back { color: #9ca3af; }
html.dark .pd-back:hover { background: rgba(255, 255, 255, .08); color: #f3f4f6; }

.pd-back svg { width: 19px; height: 19px; }


/* ---------- ORTAK KART GÖRÜNÜMÜ ----------
   .post-card ile birebir aynı: 20px kenar boşluğu, 24px köşe,
   iki katmanlı yumuşak gölge. Eskiden shadow-sm ve 16px köşeydi. */
.pd-composer,
.pd-comment,
.pd-empty {
    box-sizing: border-box;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--pd-line, #eceff3);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
html.dark .pd-composer,
html.dark .pd-comment,
html.dark .pd-empty { background: transparent; box-shadow: none; }


/* ---------- YANIT YAZMA ÇUBUĞU ---------- */
.pd-composer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

.pd-composer-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 9999px;
    object-fit: cover;
    background: #e6e9ee;
}
html.dark .pd-composer-avatar { background: rgba(255, 255, 255, .08); }

.pd-composer-field {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    padding: 6px 6px 6px 16px;
    border: 1px solid transparent;
    border-radius: 9999px;
    background: #f1f3f5;
    transition: background-color .15s ease, border-color .15s ease;
}
.pd-composer-field:focus-within { border-color: #b8c0ca; background: #fff; }
html.dark .pd-composer-field { background: rgba(255, 255, 255, .06); }
html.dark .pd-composer-field:focus-within { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); }

.pd-composer-input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
}
.pd-composer-input::placeholder { color: #9aa3ae; }
html.dark .pd-composer-input::placeholder { color: #79838f; }

.pd-send {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 32px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: #0f1419;
    color: #fff;
    cursor: pointer;
    transition: opacity .15s ease;
}
.pd-send:hover { opacity: .85; }
.pd-send:disabled { opacity: .4; cursor: default; }
html.dark .pd-send { background: #f3f4f6; color: #111827; }
.pd-send svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }


/* ---------- BOŞ DURUM ----------
   Bildirimler ve Kaydedilenler'deki boş durumlarla aynı ölçüler. */
.pd-empty {
    padding: 48px 24px;
    color: #9aa3ae;
    font-size: 13.5px;
    line-height: 1.5;
    text-align: center;
}
html.dark .pd-empty { color: #79838f; }


/* ---------- YORUM KARTI ---------- */
.pd-comment { padding: 14px 16px; }

.pd-comment-body { display: flex; gap: 12px; }

.pd-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 9999px;
    object-fit: cover;
    background: #e6e9ee;
}
html.dark .pd-avatar { background: rgba(255, 255, 255, .08); }

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

.pd-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 3px;
    row-gap: 4px;
    margin-bottom: 3px;
}

/* 600 → 650: sitedeki diğer isimlerle (bildirim satırı, mesaj listesi)
   aynı ağırlık. */
.pd-author {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    flex: 0 1 auto;
}

/* Site genelindeki gönderi kartlarıyla aynı sınır:
   uzun görünen ad 12ch'de … olur; rozet kırpılan alanın DIŞINDA kalır. */
.pd-name {
    display: block;
    min-width: 0;
    max-width: var(--post-name-max, 12ch);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: inherit;
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
}


.pd-premium { color: #f59e0b; font-size: 12px; }
/* Rozet adın hemen yanında; .pd-head'in 6px gap'i artık ad→rozet arasına
   giremez çünkü ikisi .pd-author içinde tek grup. */
.pd-head .post-premium-mark {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    margin-left: 2px;
    vertical-align: 0;
}
.pd-head .post-premium-mark img {
    display: block;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    object-fit: contain;
}
.pd-handle  { color: #656d7a; font-size: 12.5px; }   /* #9aa3ae beyazda 2.5:1 idi — OKUNURLUK_20261026 */
.pd-dot     { color: #c8ced6; font-size: 12.5px; }
.pd-time    { color: #656d7a; font-size: 12.5px; }   /* #9aa3ae idi */
html.dark .pd-handle,
html.dark .pd-time { color: #79838f; }
html.dark .pd-dot  { color: #4b5563; }

.pd-text {
    margin: 0;
    color: inherit;
    font-size: 14px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
/* :visited BELİRTİLMEZSE tarayıcı ziyaret edilmiş bağlantıyı kendi mor
   rengiyle çiziyor — "mora yakın mavi" tam olarak buydu. Alt çizgi de
   hover'da buradan geliyordu. İkisi de kalktı. */
.pd-text a,
.pd-text a:visited { color: #1d9bf0; text-decoration: none; }
.pd-text a:hover { text-decoration: none; color: #1785cf; }
.pd-name:hover { text-decoration: none; color: #1d9bf0; }


/* ---------- YORUM ALTI BUTONLARI ---------- */
.pd-actions { display: flex; align-items: center; gap: 18px; margin-top: 8px; }

.pd-act {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: none;
    color: #656d7a;   /* #9aa3ae idi — OKUNURLUK_20261026 */
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.4;
    cursor: pointer;
    transition: color .15s ease;
}
html.dark .pd-act { color: #79838f; }

.pd-act-icon { width: 14px; height: 14px; flex: 0 0 14px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Kırmızı, post kartındaki beğen butonuyla aynı (#ef4444).
   Bildirimlerdeki pembe kalp oraya özel; burada değiştirilmedi. */
.pd-act.is-like:hover { color: #ef4444; }
/* Beğenilmiş hali — JS bu sınıfı ekleyip çıkarıyor. */
.pd-act.is-like.is-active { color: #ef4444; }

.pd-act.is-replies:hover { color: #1d9bf0; }

/* Eskiden style="margin-left:18px" ile itiliyordu, JS de aynı satır içi
   style'ı yazıyordu. Artık sağa yaslama sınıfın kendi işi. */
.pd-act.is-reply { margin-left: auto; }
.pd-act.is-reply:hover { color: #0f1419; }
html.dark .pd-act.is-reply:hover { color: #f3f5f7; }


/* ---------- YANIT YAZMA KUTUSU ---------- */
.pd-replybox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 5px 5px 5px 14px;
    border: 1px solid transparent;
    border-radius: 9999px;
    background: #f1f3f5;
}
.pd-replybox.hidden { display: none; }
.pd-replybox:focus-within { border-color: #b8c0ca; background: #fff; }
html.dark .pd-replybox { background: rgba(255, 255, 255, .06); }
html.dark .pd-replybox:focus-within { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); }

.pd-replybox-input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 13px;
}
.pd-replybox-input::placeholder { color: #9aa3ae; }
html.dark .pd-replybox-input::placeholder { color: #79838f; }

.pd-replybox-send {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: #0f1419;
    color: #fff;
    cursor: pointer;
    transition: opacity .15s ease;
}
.pd-replybox-send:hover { opacity: .85; }
html.dark .pd-replybox-send { background: #f3f4f6; color: #111827; }
.pd-replybox-send svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }


/* ---------- YANITLAR ----------
   Girinti: avatar (36) + aralık (12) = 48px. Yanıt kartları ana
   yorumun metniyle aynı sol hizada başlar. */
/* ---------- KONUŞMA YAPISI ----------
   Yanıtlar DOM'da gerçekten iç içe: her yanıt, cevap verdiği yorumun
   .pd-main'i içinde duruyor. Nereye ait olduğu bu yüzden belli.

   Girinti = avatar sütunu (36) + aralık (12) = 48px, seviye başına.
   Kıvrımlı bağlantı bu 48px'in üstünde çiziliyor. */
.pd-row { display: flex; gap: 12px; }

/* Avatar + dikey tel tek sütunda. */
.pd-lane {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 36px;
    width: 36px;
}
.pd-lane > a { display: block; line-height: 0; }

/* Tel yalnız zincir AÇIKKEN var. Kapalıyken tek bir çizgi bile yok. */
.pd-wire {
    flex: 1;
    width: 1px;
    min-height: 8px;
    margin-top: 8px;
    background: var(--pd-wire, #c9d3dc);
    display: none;
}
.pd-row.is-open > .pd-lane > .pd-wire { display: block; }

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

/* Çocuk kutusu: kapalı gelir, .is-open ile açılır. */
.pd-kids { display: none; margin-top: 12px; }
.pd-row.is-open > .pd-main > .pd-kids { display: block; }

/* Yanıt satırı. İçteki .pd-comment kendi kenarlığını/dolgusunu kullanmaz —
   dış yorumun kutusunun içinde. */
.pd-comment.pd-kid {
    position: relative;
    margin: 0;
    padding: 12px 0 0;
    border: 0;
    background: transparent;
}

/* KIVRIMLI BAĞLANTI — ebeveynin telinden çocuğun avatarına.
   Kutu yüksekliği köşe yarıçapına eşit (14 = 14): sol kenarlık baştan
   sona yay, düz dikey parça yok. Düz parça olsaydı telle üst üste binip
   kalınlaşırdı. */
.pd-comment.pd-kid::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 16px;
    width: 30px;
    height: 14px;
    border-left: 1px solid var(--pd-wire, #c9d3dc);
    border-bottom: 1px solid var(--pd-wire, #c9d3dc);
    border-bottom-left-radius: 14px;
}

/* Tel son çocuğun kıvrımında biter. Yüksekliği CSS ile hesaplanamadığı
   için kuyruk yüzey rengiyle örtülüyor. */
.pd-comment.pd-kid:last-child::after {
    content: "";
    position: absolute;
    left: -32px;
    top: 30px;
    bottom: 0;
    width: 3px;
    background: #fff;
}
html.dark .pd-comment.pd-kid:last-child::after { background: #0b0b0b; }   /* panel zeminiyle aynı */

/* ---------- AÇ/KAPA DÜĞMESİ ----------
   İkon + sayı + chevron. Yanıtı olan yorumda mavi: tıklanabilir olduğu
   anlaşılsın. "N yanıtı göster" metni denendi, sayfayı forum görünümüne
   soktu; ikon geri geldi. */
.pd-act.is-replies {
    padding: 4px 8px;
    border-radius: 999px;
    color: #1d9bf0;
    font-weight: 650;
}
.pd-act.is-replies:hover { background: rgba(29,155,240,.10); }
.pd-act.is-replies[hidden] { display: none; }
.pd-chev {
    width: 13px; height: 13px; flex: 0 0 13px;
    stroke: currentColor; stroke-width: 2; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform .15s ease;
}
.pd-row.is-open > .pd-main > .pd-actions > .is-replies .pd-chev { transform: rotate(180deg); }

/* ---------- GÖNDERİ BULUNAMADI ---------- */
.pd-notfound {
    margin: 24px var(--pd-card-x, 20px);
    padding: 64px 24px;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06),
                0 1px 2px rgba(15, 23, 42, .04);
    color: #9aa3ae;
    font-size: 13.5px;
    text-align: center;
}
html.dark .pd-notfound {
    background: rgba(255, 255, 255, .045);   /* #161a22 yanlış siyahtı — sözleşme kart rengi (SIYAH_20261026) */
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35),
                inset 0 1px 0 rgba(255, 255, 255, .04);
    color: #79838f;
}
.pd-notfound strong {
    display: block;
    margin-bottom: 6px;
    color: #1f2937;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.02em;
}
html.dark .pd-notfound strong { color: #e5e7eb; }


/* ---------- TELEFON ----------
   Kenar boşluğu post kartıyla birlikte küçülsün diye değişken
   üzerinden; post_card.css'te 20px "!important" olduğu için post
   kartı 20px kalır, onu da değiştirmek istersen orayı düzenle. */
@media (max-width: 640px) {
    .pd-composer, .pd-comment { padding-left: 14px; padding-right: 14px; }
    .pd-page .post-card, .pd-page .rev-card { padding: 14px !important; }
    .pd-page .post-card .post-content { font-size: 16.5px; }
}


/* =========================================================================
   v2 — TEK YÜZEY
   -------------------------------------------------------------------------
   ÖNCEKİ HÂLİ: sayfada dört ayrı beyaz kart havada duruyordu — başlık kartı,
   gönderi kartı, yanıt yazma kartı ve her yorum için bir kart daha. Her
   birinin kendi 24px köşesi, kendi gölgesi, aralarında 16px boşluk vardı.
   Başlıkla gönderi arasındaki boşluğun sebebi de buydu: .pd-page'in 24px üst
   dolgusu + kartın kendi kenar boşluğu + gölge payı üst üste biniyordu.

   ŞİMDİ: başlığın altından yorumların sonuna kadar kesintisiz TEK yüzey.
   Ayırma işini gölge değil 1px saç teli çizgiler yapıyor — gölge "bu ayrı
   bir nesne" der, oysa hepsi aynı şeyin parçası.

   Eski değişkenler (--pd-card-x, --pd-card-gap, --pd-card-radius) BİLEREK
   duruyor: .pd-notfound ve dosyanın geri kalanı onları okuyor. İptal edilen
   şey kart kabuğu, değerler değil.
   ========================================================================= */

.pd-page{
    --pd-line:#eceff3;
    --pd-line-strong:#dde3e9;
    --pd-wire:#c9d3dc;
    padding-bottom:0;
}
html.dark .pd-page{
    --pd-line:rgba(255,255,255,.08);
    --pd-line-strong:rgba(255,255,255,.12);
    --pd-wire:rgba(255,255,255,.16);
}

/* Yüzey kenardan kenara. Mobilde 12px boşluk + 24px yuvarlak köşe dar
   ekranda yer israfıydı; sütun ne kadarsa yüzey o kadar. */
.pd-center-surface{background:#f6f7f9}
html.dark .pd-center-surface{background:transparent}

/* ---------- BAŞLIK: YÜKSELMİŞ KATMAN ----------
   Yapışkan; içerik ALTINDAN kayıyor. Alt çizgiyle birlikte yumuşak bir gölge
   katman hissini veriyor — .page-hero hiyerarşisi korunuyor ama ayrı bir
   kart olmadan. */
.page-hero.pd-hero{
    position:sticky;
    top:0;
    z-index:30;
    display:flex;
    align-items:center;
    height:54px;
    min-height:0;
    margin:0;
    padding:0 14px;
    border:0;
    border-bottom:1px solid #eceff3;
    border-radius:0;
    background:#fff;
    box-shadow:none;
}
/* .page-hero'nun global dolguları başlığı şişiriyordu; sıfırlanıyor. */
.pd-hero .page-hero-head,
.pd-hero .page-hero-body{padding:0;margin:0;min-height:0}
html.dark .page-hero.pd-hero{
    background:#0b0b0b;   /* kabuk kartıyla aynı (SIYAH_20261026) */
    border-bottom-color:rgba(255,255,255,.08);
    box-shadow:none;
}

/* Gövde başlığın ALTINA giriyor: kendi üst köşeleri yuvarlak, başlığın
   yuvarlak alt köşesinin altından çıkıyor. Katman hissi buradan geliyor. */
.pd-page{
    position:relative;
    margin-top:0;
    padding-top:0;
    border-radius:0 0 22px 22px;
    background:#fff;
}
html.dark .pd-page{background:#0b0b0b}
.pd-hero .page-hero-title{font-size:17px;font-weight:700;letter-spacing:-.01em}

/* MOBİLDE GİZLİ. layout.php'nin mobil başlığı zaten geri oku + sayfa adını
   basıyor; ikisi birden olunca aynı başlık iki kez üst üste duruyordu ve
   aradaki boşluk göze batıyordu. */
@media (max-width:767px){
    /* layout.php'nin mobil başlığı zaten geri oku + sayfa adını basıyor;
       ikisi birden olunca aynı başlık iki kez üst üste duruyordu. */
    .page-hero.pd-hero{display:none}
    .pd-page{margin-top:0;padding-top:0;border-radius:0 0 22px 22px}
}

/* ---------- GÖNDERİNİN KENDİSİ ----------
   post_card.css kart kabuğunu !important ile yazıyor (satır 149-150), o
   yüzden burada da !important şart. Kart iptal edilmiyor, yalnız KABUĞU:
   içerik, ikonlar, menüler aynen çalışıyor. */
.pd-page .post-card,
.pd-page .rev-card{
    margin:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    padding:16px !important;
    cursor:default;
    border-bottom:1px solid var(--pd-line, #eceff3);
}
.pd-page .post-card:hover,
.pd-page .post-card:active,
.pd-page .rev-card:hover{background:transparent !important}

/* Detayda metin büyür: akışta 14px, burada 17px. "Bu sayfanın konusu bu
   gönderi" demenin en sessiz yolu. Eskiden ikisi aynıydı ve detay sayfası
   akıştan farksız duruyordu. */
.pd-page .post-card .post-content{font-size:17px;line-height:1.5;letter-spacing:-.003em}

/* Sıfırsa hiç yer kaplamasın. */
.pd-act.is-replies.is-empty{display:none}

/* Kapalı alt zincir */
.pd-reply.is-collapsed{display:none}


/* ---------- DETAY SAYFASI TARİHİ ----------
   Akış kartında göreli zaman kalır; yalnız tek gönderi detayında isim
   satırından kalkar ve içerikten sonra, etkileşimlerin üstünde görünür. */
.pd-page .post-card > .flex .post-header-meta > .post-header-dot,
.pd-page .post-card > .flex .post-header-meta > .post-time {
    display: none !important;
}

.pd-page .post-card .post-actions {
    flex-wrap: wrap;
}

.pd-page .post-card .post-actions::before {
    content: var(--pd-detail-date, "");
    flex: 0 0 100%;
    width: 100%;
    margin: 0 0 10px;
    /* #8b95a3 idi — beyaz üzerinde 3.07:1, WCAG AA sınırı 4.5. 14px'te
       okunmuyordu. #4b5563 = 7.47:1. Ağırlık da 400 -> 500: bu satır
       gönderinin tek mutlak zaman bilgisi, fısıltı olmamalı. */
    color: #4b5563;
    font-family: var(--post-ui-font, 'Jost', Arial, sans-serif);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
}

html.dark .pd-page .post-card .post-actions::before {
    /* #7f8997 koyu zeminde de sınırın altındaydı. */
    color: #b6bfca;
}


/* ##########################################################################
   GÖNDERİ DETAYI — TARİH VE KARANLIK MOD ZEMİNİ
   ########################################################################## */

/* --- TARİH SATIRI ---
   Şikâyet: "tarih yazısı ikonlardan bile büyük, ikonlar soluk kalıyor."
   Doğru. Tarih 14px tabanıyla mobilde 16px'e çıkıyordu; ikonlar 16px.
   Yazı 13px'e indi (mobilde 15px), yani ikonların altında kalıyor.
   Renk de #4b5563'ten siyaha yakın #111827'ye geçti — bu satır gönderinin
   tek MUTLAK zaman bilgisi, fısıltı olmamalı. */
.pd-page .post-card .post-actions::before {
    color: #111827;
    font-size: 13px;
    font-weight: 500;
}
html.dark .pd-page .post-card .post-actions::before {
    color: #e7e9ea;
}

/* --- ETKİLEŞİM İKONLARI ---
   Markup'ta Tailwind "text-gray-400" (#9ca3af) var; tarih koyulaşınca
   ikonlar iyice soluk kaldı. Burada koyulaştırılıyor. Aktif renkler
   (beğenilmiş kırmızı, kaydedilmiş sarı) etkilenmiyor: onlar
   text-red-500 / text-yellow-500 ile geliyor, bu kural yalnız
   text-gray-400 taşıyanları hedefliyor.

   ">" YERİNE BOŞLUK — DÜZELTME:
   Rebook düğmesi doğrudan .post-actions'ın çocuğu DEĞİL; menüsü olduğu
   için <div class="relative"> içine sarılmış ve text-gray-400 o düğmenin
   üstünde. Çocuk seçicisi (">") ona ulaşmıyordu, bu yüzden beş ikondan
   DÖRDÜ koyulaşıyor, rebook soluk kalıyordu. Ekran görüntüsünde net
   görünen fark tam olarak buydu.
   Torun seçicisi güvenli: .post-actions içindeki tek text-gray-400
   taşıyıcılar bu beş eylem; menü satırları .pmenu-item sınıfını
   kullanıyor, korumalı hesap sürümü ise text-gray-300. */
/* İKİ DÜZELTME — 05.10.2026
   1) ":not(:hover)" EKLENDİ. Seçici (0,4,0) özgüllükteydi, Tailwind'in
      ".hover\:text-black:hover" kuralı (0,2,0). Yani bu kural hover'ı da
      eziyordu: detay sayfasında ikonların üstüne gelince HİÇBİR ŞEY
      olmuyordu. Kural artık yalnız hover DIŞINDA geçerli, geri bildirim
      Tailwind'e kalıyor.
   2) RENKLER AKIŞLA EŞİTLENDİ. Burası #4b5563 / #aab2bf, akıştaki
      .post-card .post-actions ise #656d7a / #9ca3af kullanıyordu —
      aynı çubuk iki sayfada iki ayrı renkteydi. İkisi de akışın
      değerine çekildi; #656d7a beyazda 5.22:1, #9ca3af siyahta ~8:1,
      ikisi de AA'nın üstünde. */
.pd-page .post-card .post-actions .text-gray-400:not(:hover) {
    color: #656d7a;
}
html.dark .pd-page .post-card .post-actions .text-gray-400:not(:hover) {
    color: #9ca3af;
}

/* --- KARANLIK MOD: TEK ZEMİN ---
   Şikâyet: "gönderiyi açıyorum, başka bir renk daha."
   Doğru: sayfa gövdesi #000 (page_shell'de değil, app zemininde),
   .pd-page ise #161a22 idi. İki farklı siyah yan yana duruyordu.
   Üçü de #000'a çekildi; ayrımı ÇİZGİLER yapıyor, zemin farkı değil. */
html.dark .pd-page { background: #000; }
html.dark .page-hero.pd-hero { background: #000; }

/* --- EN ALTTAKİ ÇİFT ÇİZGİ ---
   Yuvarlak alt kenarın hemen altında ikinci bir DÜZ çizgi vardı.
   Sebebi: .pd-composer / .pd-comment / .pd-empty üçlüsü (bu dosya, ~171)
   koşulsuz bir "border-bottom" taşıyor. Bu çizgi AYIRICI — iki öğeyi
   ayırmak için var. Ama en SON öğede de basılıyordu ve ayıracak bir şey
   yoktu; panelin yuvarlak alt kenarının 1px altında, köşesiz, tam
   genişlikte duruyordu. Açık temada da vardı, rengi zemine yakın
   olduğu için görünmüyordu.

   #commentsContainer .pd-page'in son çocuğu; onun son çocuğu da
   paneldeki son öğe. "İlk yorumu yaz!" kutusu yorum eklenince
   DOM'dan siliniyor (post.php: empty.remove()), yani :last-child
   her durumda doğru öğeyi buluyor. */
.pd-page #commentsContainer > :last-child {
    border-bottom: 0;
}

/* --- KOYU TEMADA ALT KÖŞELER ---
   AÇIK TEMA: .pd-page beyaz, altındaki .pd-center-surface #f6f7f9 —
   22px'lik yuvarlak alt köşe ZEMİN FARKINDAN görünüyor.
   KOYU TEMA: ikisi de #000 oldu (üstteki kuralla), yani yarıçap hâlâ
   duruyor ama görünecek bir şey kalmadı; panel düz bitiyormuş gibi
   duruyordu. Doğru düzeltme zemini açmak değil — koyu temada ayrım
   zaten ÇİZGİYLE yapılıyor (sütunun sol/sağ hatları da öyle).
   Alt kenara aynı hattan bir tane: yarıçapı takip ediyor, açık temadaki
   silueti birebir çiziyor. Sol/sağ kenara YAZILMADI, çünkü oraları
   .pd-center-surface zaten çiziyor — iki çizgi yan yana gelirdi. */
html.dark .pd-page {
    border-bottom: 1px solid rgba(255,255,255,.10);
}
/* Yanıt zincirindeki telin kuyruğunu örten şerit de zeminle aynı olmalı,
   yoksa koyu zeminde açık bir çizgi olarak görünür. */
html.dark .pd-comment.pd-kid:last-child::after { background: #000; }
html.dark .pd-notfound { background: #000; }


/* PD_DESKTOP_DATE_FONT_20261008
   Yalnız masaüstünde detay tarihi normal gönderi metniyle aynı tipografide. */
@media (min-width: 768px) {
    .pd-page .post-card .post-actions::before {
        font-family: var(--post-ui-font, 'Jost', Arial, sans-serif) !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;
        letter-spacing: 0 !important;
    }
}

/* Masaüstü detay tarihi = etkileşim ikon/rakam rengi */
@media (min-width: 768px) {
    .pd-page .post-card .post-actions::before {
        color: #656d7a !important;
    }

    html.dark .pd-page .post-card .post-actions::before {
        color: #9ca3af !important;
    }
}


/* PD_MOBILE_DATE_PARITY_20261008 */
@media (max-width: 767px) {

    /*
     * Detay sayfasında tarih zaten içerikten sonra gösteriliyor.
     * Akış kartı için eklenen sağ üst tarih burada ikinci kez görünmesin.
     */
    .pd-page .post-card .post-card-absolute-date {
        display: none !important;
    }

    /*
     * Detaydaki alt tarih masaüstüyle birebir aynı tipografi/rengin
     * mobil karşılığı.
     */
    .pd-page .post-card .post-actions::before {
        color: #656d7a !important;
        font-family: var(--post-ui-font, 'Jost', Arial, sans-serif) !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        line-height: 1.35 !important;
        letter-spacing: 0 !important;
    }

    html.dark .pd-page .post-card .post-actions::before {
        color: #9ca3af !important;
    }
}


/* =========================================================
   COMMENT_SAVE_UI_CSS_20261014
   ========================================================= */

.pd-act.is-save:hover,
.pd-act.is-save.is-active {
    color: #1d9bf0;
}

.pd-act.is-save:disabled {
    opacity: .55;
    cursor: default;
}