/* =========================================================
   Review card bilesen CSS'i — review_card.php govdesinden alindi.
   Eskiden ilk degerlendirme kartiyla birlikte, yani sayfa cizilmeye
   baslandiktan SONRA basiliyordu ve bir kez yeniden stil hesabina
   sebep oluyordu. Artik layout.php <head> icinde yukleniyor.
   Icerik birebir korunmustur.
   ========================================================= */

/* =========================================================
   REVIEW CARD — DÜZENLENEBİLİR SINIF REHBERİ
   Bütün görsel değerler aşağıdaki sınıflardan değiştirilebilir.
   PHP verileri, onclick işlemleri ve JS için gerekli eski sınıflar korunmuştur.
   ========================================================= */

/* 1. ANA KART
   Kartın iç boşluğunu kontrol eder.
   Dış arka plan, kenarlık, radius ve hover görünümü değerlendirme sayfasındaki .rev-card üzerinden gelir. */
.review-card {
    padding: 15px 16px;
}

/* 2. KART ANA YERLEŞİMİ — AVATAR İLE METİN ARASI
   ÖLÇÜLDÜ, gönderi kartının gerçek değerleri:
     post_card.css:704   .post-card > .flex.gap-3 { gap: 10px }   ← GENEL
     post_card.css:1557  .home-center-surface ... { gap: 8px }    ← yalnız
                         anasayfa, yalnız >=641px
   Yani 8px anasayfaya özel bir sapma; gönderi kartı profilde ve her
   yerde 10px kullanıyor. Değerlendirme kartı da 10px'e çekildi —
   iki kart profil akışında alt alta geldiğinde metin sütunları aynı
   yerden başlasın diye. 8px alsaydım profilde 2px kayardı. */
.review-card-layout {
    display: flex;
    gap: 10px;
}

/* 3. AVATAR BAĞLANTISI
   Avatar sütununun daralmasını engeller. */
.review-card-avatar-link {
    display: block;
    flex: 0 0 auto;
}

/* 4. PROFİL RESMİ
   Avatarın genişliği, yüksekliği, yuvarlaklığı ve kenarlığı buradan değiştirilir. */
/* ÖLÇÜLDÜ — gönderi kartının avatarı:
     <=640px  36px (--m-avatar)      >=641px  44px  (post_card.css:1551)
   Değerlendirme kartı ise 36px / 40px idi; masaüstünde 4px küçük kalıyordu.
   Mobil değer zaten aynı, yalnız masaüstü eşitlendi (aşağıdaki
   min-width:641px bloğu). Buradaki 40px taban olarak duruyor. */
.review-card-avatar {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: cover;
    border: 1px solid #f0f1f3;
    border-radius: 9999px;
}

html.dark .review-card-avatar {
    border-color: rgba(255,255,255,.08);
}

/* 5. KART İÇERİK SÜTUNU
   Sağ alanın kalan genişliği kullanmasını ve taşmamasını sağlar. */
.review-card-body {
    flex: 1 1 auto;
    min-width: 0;
}

/* 6. ÜST BİLGİ SATIRI
   Kullanıcı bilgileri ile üç nokta menüsünün hizasını ve alt boşluğunu kontrol eder. */
.review-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

/* 7. KULLANICI BİLGİLERİ GRUBU
   Görünen ad, @kullanıcı, tarih ve lider etiketinin satır düzenini kontrol eder. */
.review-card-head-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

/* 8. GÖRÜNEN KULLANICI ADI
   Kullanıcı adının boyutu ve kalınlığı. */
.review-card-user-name {
    color: #111827;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.25;
    text-decoration: none;
    transition: opacity .15s ease;
}

.review-card-user-name:hover {
    opacity: .72;
}

html.dark .review-card-user-name {
    color: #f3f4f6;
}

/* 10-11-12. @KULLANICI / AYIRICI NOKTA / TARİH — KOPYALAR BİRLEŞTİRİLDİ
   -------------------------------------------------------------------
   Bu üç kural dosyanın İKİ ayrı yerinde tanımlıydı. Aşağıdaki (eski)
   sürümün yalnızca "line-height" satırları yürürlükteydi; renk ve punto
   dosyanın sonundaki ikinci kopya tarafından eziliyordu. Yani buradaki
   #8993a2 / #d1d5db / 13px / 12px değerlerinin HİÇBİRİ ekrana
   çıkmıyordu — okuyan herkesi yanıltıyorlardı.
   Tek sürüm aşağıda, "KÜNYE SATIRI" bölümünde; line-height'lar oraya
   taşındı. Buradan yalnızca bu yorum kaldı. */

/* 15. ÜÇ NOKTA MENÜ KAPSAYICISI
   Menü konumlandırmasının referans noktasıdır. */
.review-card-menu-wrap {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}
/* 16. ÜÇ NOKTA BUTONU
   Butonun ölçüsü, hover zemini ve opaklığı. */
.review-card-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: #8b95a3;
    cursor: pointer;
    opacity: .8;
    transition: opacity .15s ease, background-color .15s ease, color .15s ease;
}

.review-card-menu-button:hover {
    background: #f3f4f6;
    color: #4b5563;
    opacity: 1;
}

html.dark .review-card-menu-button:hover {
    background: rgba(255,255,255,.07);
    color: #d1d5db;
}

/* 17. ÜÇ NOKTA İKONU */
.review-card-menu-icon {
    width: 16px;
    height: 16px;
}

/* 18. PUANLAMA SATIRI
   Yıldızlar ve sayı rozetinin hizası ile alt boşluğu. */
.review-card-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
}

/* 19. YILDIZLAR
   Değerlendirme yıldızlarının ölçüsü.
   .rev-star ve .empty sınıfları değerlendirme sayfasıyla uyum için korunur. */
.review-card-rating-star {
    font-size: 14px;
    line-height: 1;
}

/* 20. SAYISAL PUAN
   4.0 / 5.0 gibi puan kapsülünün temel ölçüleri.
   Renkleri .rev-score-5, .rev-score-4 ve .rev-score-low belirlemeye devam eder. */
.review-card-score {
    margin-left: 2px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
}

/* 20A. ORTA PUAN RENGİ
   3.0 puanını hata gibi göstermemek için pastel turuncu kullanır. */
.rev-score-mid {
    background: #fff3e4 !important;
    color: #c56a13 !important;
}

html.dark .rev-score-mid {
    background: rgba(249,115,22,.14) !important;
    color: #fb923c !important;
}

/* 20B. DÜŞÜK PUAN RENGİ
   1.0 ve 2.0 puanlarında yumuşak kırmızı kullanır. */
.rev-score-low {
    background: #fef2f2 !important;
    color: #c24141 !important;
}

html.dark .rev-score-low {
    background: rgba(239,68,68,.12) !important;
    color: #f87171 !important;
}

/* 21. KİTAP BİLGİSİ SATIRI
   Kapak ile kitap/yazar arasındaki boşluk ve değerlendirme metnine olan mesafe.
   Metni daha aşağı almak için margin-bottom değerini artır. */
.review-card-book {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;   /* 16 idi; kapak küçülünce blok da sıkılaştı */
}

/* 22. KİTAP KAPAĞI BAĞLANTISI
   Bağlantılı kapakların bağlantısız kapaklarla aynı ölçüde kalmasını sağlar. */
/* HİYERARŞİ DÜZELTMESİ — bu üç değer birlikte değişir (bkz. 23). */
.review-card-book-cover-link {
    display: block;
    width: 34px;
    min-width: 34px;
    flex: 0 0 34px;
}

/* 23. KİTAP KAPAĞI
   Kapak boyutunu değiştirirken width, height ve flex-basis değerlerini birlikte değiştir.
   Örnek daha büyük kapak: width:48px; height:68px; flex-basis:48px. */
/* NEDEN KÜÇÜLDÜ:
   Kart bir DEĞERLENDİRME kartı — asıl içerik kullanıcının yazdığı
   metin, kitap ise künye bilgisi. 40x56 kapak + 14 derece eğim +
   sert gölge (3px 5px 12px / .18) bloğu kartın ağırlık merkezi
   yapıyordu; metin en küçük ve en soluk eleman olarak kalıyordu.
   Kapak 34x48'e indi, eğim 14 -> 9 derece, gölge yarıya yakın
   yumuşadı. Kitap hâlâ tanınıyor ama artık sahneyi çalmıyor. */
.review-card-book-cover {
    display: block;
    width: 34px;
    height: 48px;
    min-width: 34px;
    max-width: 34px;
    flex: 0 0 34px;
    object-fit: cover;
    border-radius: 4px;
    transform: perspective(220px) rotateY(9deg);
    transform-origin: center left;
    box-shadow: 2px 3px 8px rgba(0,0,0,.12);
}

/* 24. KİTAP METİN ALANI
   Kitap adı ve yazarın kalan genişliği kullanmasını sağlar. */
.review-card-book-meta {
    flex: 1 1 auto;
    min-width: 0;
}

/* 25. KİTAP ADI
   Kartın ana başlığıdır.
   Daha büyük yapmak için yalnızca font-size değerini değiştirebilirsin. */
/* 16px/700 İDİ — kullanıcı adıyla BİREBİR aynı ölçü ve ağırlık.
   İki farklı şey aynı sesle konuşunca hiyerarşi düzleşiyordu.
   Yeni sıra: kullanıcı adı 16/700 > değerlendirme metni 15/400 >
   kitap adı 14.5/600 > yazar 12.5/400. */
.review-card-book-title {
    display: block;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    color: #111827;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.16px;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.review-card-book-title:hover {
    text-decoration: underline;
}

html.dark .review-card-book-title {
    color: #f3f4f6;
}

/* 26. YAZAR ADI
   Kitap adının altındaki ikincil metin. */
.review-card-book-author {
    display: block;
    max-width: 100%;
    margin: 2px 0 0;
    overflow: hidden;
    /* #7c8796 beyaz üstünde ~4.3:1, AA sınırının altında. */
    color: #656d7a;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.3;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.review-card-book-author:hover {
    text-decoration: underline;
}

html.dark .review-card-book-author {
    color: #8f99a7;
}

/* 27. DEĞERLENDİRME METNİ
   Kitap bilgisinden sonra gelen ana değerlendirme yazısı. */
.review-card-content {
    margin: 0 0 12px;
    color: #374151;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;
}

html.dark .review-card-content {
    color: #d1d5db;
}

/* 28. DEVAMINI GÖR BAĞLANTISI
   RENK: #9ca3af beyaz üstünde 2.54:1 — ve bu bir BAĞLANTI.
   post_card.css'teki .post-read-more ile aynı değere çekildi. */
.review-card-more-link {
    color: #656d7a;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: color .15s ease;
}

/* Koyu temada TABAN rengi yoktu: yalnız :hover tanımlıydı, taban
   açık tema değerini kullanıyordu. #656d7a'ya çekilince siyah
   zeminde 3.3:1'e düştü. */
html.dark .review-card-more-link {
    color: #9ca3af;
}

.review-card-more-link:hover {
    color: #4b5563;
}

html.dark .review-card-more-link:hover {
    color: #d1d5db;
}

/* 29. ETKİLEŞİM SATIRI
   Yorum, beğeni, beğenmeme, görüntülenme ve kaydetme alanlarının dağılımı. */
.review-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 12px;
}
.review-card-action-icon {
    width: 16px;
    height: 16px;
}

/* 30. TÜM ETKİLEŞİM ÖĞELERİ
   İkon ile sayı arasındaki boşluk ve temel görünüm. */
.review-card-action {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    transition: color .15s ease;
}

/* 31. ETKİLEŞİM İKON KAPSÜLÜ
   İkonun çevresindeki hover alanının ölçüsü. */
.review-card-action-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 9999px;
    transition: background-color .15s ease;
}

/* 32. ETKİLEŞİM İKONU
   Yorum, beğeni, beğenmeme ve kaydet ikonlarının standart ölçüsü. */
.review-card-action-icon {
    width: 16px;
    height: 16px;
}

/* 33. GÖRÜNTÜLENME İKONU
   İstatistik ikonunu diğerlerinden bir miktar küçük tutar. */
.review-card-action-icon--views {
    width: 14px;
    height: 14px;
}

/* 34. ETKİLEŞİM SAYILARI */
.review-card-action-count {
    font-size: 12px;
    line-height: 1;
}

/* 35. YORUM HOVER ZEMİNİ */
.review-card-action--comment:hover .review-card-action-icon-wrap {
    background: #f3f4f6;
}

html.dark .review-card-action--comment:hover .review-card-action-icon-wrap {
    background: rgba(255,255,255,.06);
}

/* 36. BEĞENİ HOVER ZEMİNİ */
.review-card-action--like:hover .review-card-action-icon-wrap {
    background: #fef2f2;
}

html.dark .review-card-action--like:hover .review-card-action-icon-wrap {
    background: rgba(127,29,29,.22);
}

/* 37. BEĞENMEME HOVER ZEMİNİ */
.review-card-action--dislike:hover .review-card-action-icon-wrap {
    background: #eff6ff;
}

html.dark .review-card-action--dislike:hover .review-card-action-icon-wrap {
    background: rgba(30,58,138,.22);
}

/* 38. GÖRÜNTÜLENME ALANI
   Tıklanmaz; diğer etkileşimlerle aynı hizada görünür. */
.review-card-action--views {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #656d7a;   /* #9ca3af 2.54:1 */
}

/* ETKİLEŞİM ÇUBUĞU KONTRASTI — gönderi kartıyla aynı düzeltme.
   İkonlar ve sayılar markup'ta Tailwind "text-gray-400" = #9ca3af ile
   geliyor; 12px rakamlar için 2.54:1 kabul edilemez, ikonlar için de
   3:1 alt sınırının altında.
   ":not(:hover)" ŞART: seçici (0,3,0), Tailwind'in ".hover\:text-black:hover"
   kuralı (0,2,0). Düz yazsaydım hover'ı ezer, çubuğun geri bildirimi
   ölürdü. Koyu temaya dokunulmadı (#9ca3af siyahta ~8:1). */
.review-card-actions .text-gray-400:not(:hover) {
    color: #656d7a;
}

/* KOYU TEMA AÇIĞI — İLK SÜRÜMDE UNUTTUM.
   Üstteki iki kural tema ayrımı yapmıyordu; #656d7a siyah zeminde
   3.3:1 kalıyor, 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. Aynı düzeltme post_card.css'te de var. */
html.dark .review-card-actions .text-gray-400:not(:hover),
html.dark .review-card-action--views {
    color: #9ca3af;
}

/* 39. KAYDET HOVER ZEMİNİ */
.review-card-action--save:hover .review-card-action-icon-wrap {
    background: #fffbeb;
}

html.dark .review-card-action--save:hover .review-card-action-icon-wrap {
    background: rgba(120,53,15,.22);
}

@media (max-width: 639px) {
    .review-card {
        padding: 14px;
    }

    .review-card-layout {
        gap: 10px;
    }

    .review-card-avatar {
        width: 36px;
        height: 36px;
    }

    .review-card-book-cover-link,
    .review-card-book-cover {
        width: 31px;
        min-width: 31px;
        max-width: 31px;
        flex-basis: 31px;
    }

    .review-card-book-cover {
        height: 44px;
    }
}


/* =========================================================
   LAKAP (rozet unvanı) — ismin yanında, sade
   Eski .review-card-lakap amber hap görünümündeydi ve üç nokta
   menünün yanında duruyordu. Akışta 20 kart varsa 20 renkli hap
   duvar kağıdına döner; sade gri metin ismin parçası gibi okunur.
   ========================================================= */
.review-card-title-tag {
    /* flex-basis:100% → sarmalayıcı flex-wrap olduğu için kendi satırına iner.
       Böylece lakap kullanıcı adının ALTINDA, ayrı bir satırda durur. */
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 4px;
    /* 1px idi. Satır arası = .review-card-head-left'in row-gap'i (2px)
       + buradaki margin, yani toplam 3px'ti. -1px ile toplam 1px'e indi. */
    margin-top: -1px;
    color: #8993a2;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
}
html.dark .review-card-title-tag { color: #7f8894; }

/* Yalnızca en üst kademe: küçük ikon + bir tık koyu renk. */
.review-card-title-tag.is-top        { color: #9a6a15; font-weight: 600; }
html.dark .review-card-title-tag.is-top { color: #d9ac52; }
.review-card-title-icon {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
}

/* =========================================================
   ANA SAYFA KARTIYLA HİZALAMA
   Aşağıdaki değerler post_card.php'deki karşılıklarından birebir
   alındı; iki kart aynı ölçülerde okunsun diye.
   ========================================================= */

/* Gövde metni: 14px/1.65 idi, ana sayfada 15px/1.5. Küçük punto ve
   geniş satır aralığı yazıyı olduğundan ince ve soluk gösteriyordu.
   PUNTO 15'TE KALIYOR — gönderi kartıyla eşitliği korumak için.
   Değişen tek şey renk: #374151 -> #1f2937. Kitap bloğu küçülürken
   metnin de bir tık öne çıkması gerekiyordu; punto büyütmek iki kartın
   ritmini bozardı, koyulaştırmak bozmuyor. */
.review-card-content {
    font-size: 15px;
    line-height: 1.5;
    color: #1f2937;
}

/* AYIRAÇ NOKTASI — TEK SÜRÜM.
   post_card.css'teki .post-header-dot ile BİREBİR aynı değerler:
   14px / 700 / #656d7a. İkisi ayrıldığı anda aynı künye satırı iki
   kartta iki ayrı yoğunlukta çiziliyor ve bu "boşluk farkı" sanılıyor —
   mesafe ikisinde de 3px, değişen şey glifin kendisi.
   RENK: #9ca3af beyaz üstünde 2.54:1 idi. */
.review-card-header-separator {
    color: #656d7a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}
html.dark .review-card-header-separator { color: #6b7280; }

/* İsim (16px), kullanıcı adı (14px) ve tarih (12.5px) farklı puntolarda.
   align-items:center bunları kutu ortasına göre hizalıyor ve harfler
   birbirine göre kayık duruyordu. baseline, yazıları ortak taban
   çizgisine oturtur — farklı puntolu metinlerin doğru hizalaması budur. */
/* ÖLÇÜLDÜ — iki kartın künye satırı yan yana konup piksel okundu:
     ad genişliği    anasayfa 70px   değerlendirme 70px   (aynı)
     rozet kutusu    144..154        144..154             (aynı)
     AD → ROZET      4px             4px                  (AYNI)
     ROZET → @KULL.  1px             7px                  (6px FAZLA)
   Yani sorun ad ile premium arasında değil, premiumdan SONRAYDI.
   Sebep: .review-card-head-left'in gap'i 6px; gönderi kartında aynı
   mesafe .post-header-meta'nın column-gap:3px'i. column-gap sıfırlanınca
   ölçülen mesafe 1px'e iniyor — gönderi kartıyla birebir.
   row-gap 2px KALIYOR: lakap satırının üst boşluğu ona bağlı. */
.review-card-head-left {
    align-items: baseline;
    /* 0 FAZLA SIKTI. 6px -> 0 bir seferde çok büyük bir sıçramaydı:
       rozetin sağındaki nefes tamamen kalkınca ikon sıkışmış görünüyor.
       2px, ölçülen mesafeyi 7px'ten ~3px'e indiriyor — gönderi kartına
       çok yakın ama ikonun kenar boşluğunu yok etmiyor. */
    column-gap: 2px;
    row-gap: 2px;
}

/* @KULLANICI · TARİH — GÖNDERİ KARTIYLA AYNI YERLEŞİM MODELİ
   ===================================================================
   ÖLÇÜLDÜ (tarayıcı, getBoundingClientRect):
       HANDLE w=84.70  pad 0  mar 0        fs 14px
       NOKTA  w=4.51   pad 0  mar 3px/3px  fs 14px
       SAAT   w=14.43  pad 0  mar 0        fs 12.5px
       kutudan kutuya ölçülen boşluk:  sol 8.98   sağ 8.98

   Marj 3px, dolgu yok, kelime boşluğu yok — yine de 8.98 çıkıyor.
   Çünkü bu üçlü .review-card-meta-group içinde SATIR İÇİ öğe;
   gönderi kartında ise .post-header-meta'nın FLEX ÇOCUĞU. Satır içi
   bağlamda kutular arası mesafeyi tek başına marj belirlemiyor, yazı
   akışının kendi ölçüleri de giriyor. İki dosyada da "3px" yazıyordu
   ama ikisi aynı şeyi ölçmüyordu — defalarca "mesafe eşit" dememin
   sebebi buydu ve yanlıştı.

   Marjı eksiye çekip 8.98'i 3'e indirmek de olurdu; yapmadım, çünkü
   o sayı yazı akışına bağlı ve punto değişince kayar. Bunun yerine
   grup gönderi kartının modeline alındı: flex + column-gap:3px.
   Flex'te kutudan kutuya mesafe TAM OLARAK gap'tir.

   Kırpma düzeni post_card.css'teki mobil bloğun birebir aynısı:
   kısalan yalnız @kullanıcı (flex:0 1 auto + min-width:0 + ellipsis),
   nokta ve saat sabit (flex:0 0 auto). Eskiden kırpma grubun kendi
   kutusundaydı; flex'e geçince oraya gerek kalmadı. */
/* ÖZGÜLLÜK BİLEREK YÜKSELTİLDİ: ".review-card" öneki var.
   Çünkü AYNI sınıf post_card.css ve profile.css içinde de tanımlı
   (ikisinde de "gap: 6px"). Üçü de (0,1,0) özgüllükteydi ve sayfada
   en son yüklenen kazanıyordu — bu dosya değil. Önek (0,2,0) yapıyor,
   yükleme sırası ne olursa olsun bu kural geçerli.
   KALICI ÇÖZÜM: diğer iki kopyayı silmek. post_card.css'teki aynı
   değere çekildi; profile.css'teki duruyor ama artık bu kuralı
   yenemiyor. */
.review-card .review-card-meta-group {
    display: flex;
    align-items: baseline;
    column-gap: 3px;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
}

.review-card-meta-group .review-card-user-handle {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.review-card-meta-group .review-card-header-separator,
.review-card-meta-group .review-card-time {
    flex: 0 0 auto;
}

.review-card-header-separator {
    margin: 0;
}

/* Lakap kendi satırında olduğu için baseline'dan etkilenmesin. */
.review-card-title-tag { align-self: flex-start; }


/* =========================================================
   TABAN KART GÖRÜNÜMÜ — HER SAYFADA GEÇERLİ
   ---------------------------------------------------------
   Bu blok daha önce YOKTU. Kartın yuvarlaklığı, zemini ve gölgesi
   yalnızca degerlendirme.css içinde tanımlıydı; o dosya da sadece
   degerlendirme.php'de yükleniyor. Sonuç: kitap ve yazar sayfalarında
   aynı kart DÜZ çıkıyordu, üstelik o sayfalar kendi içlerinde
   ".rev-card { border-bottom: 1px solid }" yazıp radius'u da eziyordu.

   Kartın nasıl göründüğü kartın kendi dosyasında durmalı. Sayfa CSS'i
   yalnızca sayfaya özel sapmaları söyler.
   ========================================================= */
.rev-card {
    position: relative;
    margin: 0 20px 16px;
    border: 0;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06),
                0 1px 2px rgba(15, 23, 42, .04);
    transition: box-shadow .18s ease, background .18s ease;
}

.rev-card:hover {
    background: #ffffff;
    box-shadow: 0 16px 42px rgba(15, 23, 42, .09),
                0 3px 8px rgba(15, 23, 42, .05);
}

html.dark .rev-card {
    border: 0;
    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);
}

@media (max-width: 640px) {
    .rev-card { margin-left: 12px; margin-right: 12px; }
}


/* ---------- YILDIZLAR VE PUAN KAPSÜLÜ ----------
   Bunlar da sayfa CSS'lerinde dağınık duruyordu. Kart bu sınıfları
   kendi işaretlemesinde kullanıyor (review_card.php satır 133 ve 137),
   dolayısıyla tanımları burada olmak zorunda. */
.rev-star {
    color: #f59e0b;
    font-size: 14px;
    line-height: 1;
}
.rev-star.empty { color: #d1d5db; }
html.dark .rev-star.empty { color: rgba(255, 255, 255, .15); }

.rev-score-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 99px;
}
.rev-score-5 { background: rgba(251, 191, 36, .12); color: #92400e; }
html.dark .rev-score-5 { background: rgba(251, 191, 36, .12); color: #fbbf24; }
.rev-score-4 { background: #f3f4f6; color: #374151; }
html.dark .rev-score-4 { background: rgba(255, 255, 255, .07); color: #9ca3af; }


/* =========================================================
   DEĞERLENDİRME KARTI = GÖNDERİ KARTI (KİMLİK SATIRI)
   ---------------------------------------------------------
   Her değer post_card.css'ten ÖLÇÜLEREK alındı, uydurma yok:

     post_card.css:322   .post-display-name  16px / #111827 / Jost
     post_card.css:1603  .post-display-name  font-weight: 700 !important
                         (322'de 600 yazıyor ama 1603 onu eziyor —
                          tarayıcının hesapladığı değer 700)
     post_card.css:68    .post-username      14px / 400 / #9ca3af
     post_card.css:424   .post-time          12.5px / 400 / #9ca3af
     post_card.css:858   ≤640px: ad 14.5px, @kullanıcı 13px
     page_shell.css:291  --post-ui-font .post-card ÜZERİNDE tanımlı,
                         bu karta ulaşmıyordu → burada da tanımlanıyor

   Ayraç noktası (14px/700/#9ca3af) zaten eşitti, dokunulmadı.

   GERİ ALMAK İÇİN: bu bloğun tamamını sil.
   ========================================================= */
.review-card {
    --post-ui-font: 'Jost', 'Jost Yedek', Arial, sans-serif;
    /* .post-card'da var: tarayıcının sahte kalınlık üretmesini engeller. */
    font-synthesis: none;
}

.review-card-user-name {
    font-family: var(--post-ui-font) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #111827;
}
html.dark .review-card-user-name { color: #ffffff; }

/* KONTRAST: #9ca3af beyaz üstünde 2.54:1 — WCAG AA sınırı 4.5.
   14px'lik bir metin için gerçek bir okunabilirlik kusuru.
   #656d7a ölçülmüş yedek: beyazda 5.22, #f6f7f9 üstünde 4.87.
   AYNI DEĞİŞİKLİK post_card.css'teki .post-username'de de yapıldı —
   iki kartın künye satırı birebir aynı kalsın diye.
   KOYU TEMA DOKUNULMADI: #6b7280 siyah üstünde zaten ~4.8:1. */
.review-card-user-handle {
    font-family: var(--post-ui-font);
    font-size: 14px;
    font-weight: 400;
    color: #656d7a;
    line-height: 1.25;
}
html.dark .review-card-user-handle { color: #6b7280; }

/* TARİH. Renk #9ca3af idi (beyazda 2.54:1) — post_card.css'teki
   .post-time ile aynı değere çekildi; punto da ikisinde 12.5px. */
.review-card-time {
    font-family: var(--post-ui-font);
    font-size: 12.5px;
    font-weight: 400;
    color: #656d7a;
    line-height: 1.25;
}
html.dark .review-card-time { color: #6b7280; }

/* Kimlik satırı sarmasın. */
.review-card-user-name,
.review-card-meta-group {
    flex: 0 1 auto;
    min-width: 0;
}
/* Kırpma YALNIZ meta grubunda: @kullanıcı · tarih tek kutu. */
.review-card-meta-group {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.review-card-user-name  { flex-shrink: 1; }   /* ad en son kısalsın */
.review-card-meta-group { flex-shrink: 3; }   /* önce @kullanıcı kısalsın */

/* UZUN ADDA ÜÇ NOKTA — gönderi kartındaki düzenin aynısı.
   .review-card-user-name artık "name-line" sınıfını da taşıyor (flex kutusu,
   post_card.css'te tanımlı) ve adın kendisi "name-trunc" kutusunda.
   Kırpma yalnız adın kutusunda olduğu için rozet üç noktadan sonraya düşüp
   kaybolmuyor — gönderi kartında da böyle.
   Sınır ortak: :root'taki --post-name-max (12ch). Tek kaldıraç, iki kart. */
.review-card-user-name .name-trunc { max-width: var(--post-name-max, 12ch); }

/* post_card.css:740 ile AYNI eşik. */
@media (max-width: 640px) {
    .review-card .review-card-user-name  { font-size: 14.5px !important; }
    .review-card .review-card-user-handle { font-size: 13px; }
}

/* MASAÜSTÜ AVATARI GÖNDERİ KARTIYLA EŞİT.
   post_card.css aynı eşiği kullanıyor: @media (min-width: 641px) içinde
   ".post-card img.w-10 { width: 44px }". */
@media (min-width: 641px) {
    .review-card-avatar { width: 44px; height: 44px; }
}


/* BOOK_LINK_HOVER_20261028 */
a.review-card-book-title,
a.review-card-book-author,
a.review-card-book-title:hover,
a.review-card-book-author:hover {
    text-decoration: none !important;
    transition: color 160ms ease;
}
.review-card-book-cover-link .review-card-book-cover {
    transition: filter 160ms ease;
}
@media (hover: hover) {
    a.review-card-book-title:hover,
    a.review-card-book-author:hover {
        color: #087bbd !important;
    }
    html.dark a.review-card-book-title:hover,
    html.dark a.review-card-book-author:hover {
        color: #65c4ff !important;
    }
    .review-card-book-cover-link:hover .review-card-book-cover {
        filter: brightness(1.10);
    }
}
a.review-card-book-title:focus-visible,
a.review-card-book-author:focus-visible {
    color: #087bbd !important;
}
html.dark a.review-card-book-title:focus-visible,
html.dark a.review-card-book-author:focus-visible {
    color: #65c4ff !important;
}
.review-card-book-cover-link:focus-visible {
    outline: 2px solid #1d9bf0;
    outline-offset: 3px;
    border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
    a.review-card-book-title,
    a.review-card-book-author,
    .review-card-book-cover-link .review-card-book-cover {
        transition: none;
    }
}
/* END_BOOK_LINK_HOVER_20261028 */