/* =========================================================
   TEK TÜR SAYFASI  (pages/genre.php)
   =========================================================

   Bu sayfa entity.css'in ÜSTÜNE biner. Kitap ve yazar sayfalarıyla
   aynı iskelet kullanılıyor:

     .entity-center-surface  → orta sütun zemini + kenar çizgileri
     .page-hero              → başlık kartı (geri oku + tür adı)
     .page-tabs .entity-tabs → Alıntılar / Kitaplar (yapışkan)
     .entity-feed            → akış
     .entity-book-grid       → kitap ızgarası
     .entity-empty           → boş durum

   Bu dosyada YALNIZCA türe özel olan şey var: hero'daki renkli tür
   karosu ve "daha fazla" butonu.

   NE DEĞİŞTİ

   1) Gövdedeki <style> bloğu buraya taşındı; <head>'den yükleniyor.
   2) Üstteki şerit "sticky top-0 + inline background:rgba(255,255,255,.6)"
      idi — KOYU TEMADA DA BEYAZDI, üstündeki yazı okunmuyordu.
   3) "Kitap Türü" amber rozeti kalktı; sağdaki .entity-kind etiketi
      kitap/yazar sayfalarındaki "KİTAP"/"YAZAR" ile aynı yere geldi.
   4) Kitaplar ve alıntılar alt alta iki başlıksız bölümdü; artık
      sekme. Kitap/yazar sayfasıyla aynı davranış.

   ---------------------------------------------------------
   ELEMAN HARİTASI
   ---------------------------------------------------------

     .genre-tile        Hero'daki renkli tür karosu (ikon içinde)
     .genre-tile svg      └ türün ikonu (get_genre_icon)
     .genre-more        "Daha fazla göster" satırı
     .genre-more-btn      └ butonun kendisi

   Karonun rengi PHP'den geliyor: style="--genre-c:#xxxxxx".
   Tür listesindeki (genres.php) kartla AYNI renk ve AYNI ikon —
   iki sayfa arasında bağ kuruyor.
   ========================================================= */


/* ---------- HERO'DAKİ TÜR KAROSU ----------
   Kitap sayfasında burada kapak, yazar sayfasında portre var.
   Türün görseli yok; yerine kendi rengi ve ikonu duruyor. */
/* Kitapta kapak 108x162; burada içerik daha az olduğu için hero
   gereksiz uzamasın diye karo daha küçük ve gövde dikeyde ortalı. */
.genre-hero-card .entity-hero-body { align-items: center; }

.genre-tile {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 20px;
    background: var(--genre-c, #64748b);
    color: #fff;
    /* Gölge NÖTR: rengin kendisiyle gölge verince karonun etrafında
       renkli bir hale oluşuyor ve tür listesindeki (gölgesiz) kareyle
       uyuşmuyordu. Kitap kapağınınkiyle (entity.css:111) aynı aile. */
    box-shadow: 0 8px 18px -10px rgba(15, 23, 42, .45);
}
html.dark .genre-tile { box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .7); }
.genre-tile svg { width: 34px; height: 34px; }

/* .entity-genre-wrap normalde 10px üst pay veriyor (kitap sayfasında
   yazar adının altında duruyor); burada gövdenin ilk çocuğu. */
.genre-backlink-wrap { margin-top: 0; }

@media (max-width: 640px) {
    .genre-tile { width: 64px; height: 64px; border-radius: 16px; }
    .genre-tile svg { width: 28px; height: 28px; }
}


/* ---------- DAHA FAZLA GÖSTER ----------
   Etiket sayfasındaki (tag.css) butonun aynısı. Kartları listenin
   ALTINA ekliyor; sayfa yenilenmiyor, yukarısı kaybolmuyor. */
.genre-more {
    display: flex;
    justify-content: center;
    padding: 4px 20px 28px;
}

.genre-more-btn {
    padding: 10px 22px;
    border: 1px solid #dfe3e8;
    border-radius: 9999px;
    background: #ffffff;
    color: #0f1419;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.genre-more-btn:hover { background: #f5f7f9; border-color: #c9ced6; }
.genre-more-btn:disabled { opacity: .55; cursor: default; }
html.dark .genre-more-btn {
    border-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .045);
    color: #f3f5f7;
}
html.dark .genre-more-btn:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .26);
}


/* ---------- SEKMELER ----------
   İki sekme eşit paylaşsın (entity-tabs kuralı zaten var, burada
   yalnızca netlik için tekrar edilmiyor — entity.css:263). */


/* ---------- BOŞ DURUM ----------
   .entity-empty düz yazıydı; bu sayfa çoğu türde boş olduğu için
   sayfanın ortası bomboş kalıyordu. Kart içine alındı. */
.genre-empty-card {
    margin: 24px 20px;
    padding: 52px 28px;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06),
                0 1px 2px rgba(15, 23, 42, .04);
    text-align: center;
}
html.dark .genre-empty-card {
    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);
}

.genre-empty-icon {
    display: block;
    margin: 0 auto 12px;
    color: #c8cfd8;
}
html.dark .genre-empty-icon { color: rgba(255, 255, 255, .16); }

.genre-empty-title {
    margin: 0;
    color: #4b5563;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}
html.dark .genre-empty-title { color: #cbd2da; }

.genre-empty-text {
    margin: 6px 0 0;
    color: #9aa3ae;
    font-size: 13px;
    line-height: 1.5;
}
html.dark .genre-empty-text { color: #79838f; }

@media (max-width: 640px) {
    .genre-empty-card { margin-left: 14px; margin-right: 14px; padding: 40px 20px; }
}