/* =========================================================
   TÜM TÜRLER SAYFASI  (pages/genres.php)
   =========================================================

   NE DEĞİŞTİ

   1) Bu dosya yoktu. Stil gövdenin içindeki <style> bloğundaydı;
      tarayıcı sayfayı çizmeye başladıktan SONRA okuyordu, bu yüzden
      kartlar bir an stilsiz görünüp yerine oturuyordu. Artık
      $GLOBALS['page_css'] ile <head>'den yükleniyor.

   2) Üstteki şerit "sticky top-0 + border-b + inline
      background:rgba(255,255,255,.6)" idi. O inline zemin KOYU TEMADA
      DA BEYAZDI — koyu temada beyaz yarı saydam bir bant çıkıyor,
      üzerindeki #e7e9ea yazı okunmuyordu. Şerit kaldırıldı, yerine
      sitenin kabuğu geldi: .page-hero (öndeki kart) + .page-subbar
      (arkadaki yapışkan kart, içinde arama).

   3) Kart ikonları crc32'den türetilen 16 renklik bir gökkuşağı
      paletindeydi ve HER TÜRDE AYNI etiket ikonu vardı. Oysa
      functions.php'de get_genre_icon() zaten türe göre ikon veriyor
      (kulüp sayfası bunu kullanıyor). İkon gerçek oldu, renk sitenin
      geri kalanı gibi nötr.

   4) Arama kutusunun odak rengi #8b5cf6 (mor) idi. Sitede o renk yok.

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

     .gl-center-surface   Orta sütunun zemini + sol/sağ kenar çizgisi
     .gl-hero             Üstteki "Tüm Türler" kartı (.page-hero)
     .gl-title-line         └ geri oku + başlığı yan yana koyan satır
     .gl-back               └ geri okunun yuvarlak butonu
                               (entity.css'teki .entity-back'in aynısı)
     .gl-count              └ sağdaki "68 tür" yazısı

     .gl-subbar           Arkadaki YAPIŞKAN kart (.page-subbar)
     .gl-search             └ arama formu
     .gl-search input       └ kutunun kendisi
     .gl-search-clear       └ içindeki × (yazı varken çıkar)

     .gl-grid             Kart ızgarası (2 sütun, dar ekranda 1)
     .gl-card               └ tek tür kartı
     .gl-card.is-empty      └ hiç kitabı/alıntısı olmayan tür (soluk)
     .gl-ic                 └ soldaki ikon karesi
     .gl-name               └ tür adı (taşarsa üç nokta)
     .gl-sub                └ "12 alıntı · 5 kitap" satırı
     .gl-chev               └ sağdaki ok (hover'da belirir)

     .gl-empty            "Eşleşen tür yok" / "Henüz tür yok" kutusu

   HIZLI AYAR
     Sütun sayısı        → .gl-grid  grid-template-columns
     Kartlar arası boşluk→ .gl-grid  gap
     Kart yan boşluğu    → .gl-grid  padding (20px)
     İkon karesi ölçüsü  → .gl-ic    width/height
   ========================================================= */


/* ---------- ORTA YÜZEY ----------
   Değerler profil / keşfet / etiket / gönderi sayfalarıyla BİREBİR
   aynı; sayfalar arası geçişte sütun genişliği oynamasın diye. */
.gl-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 .gl-center-surface {
    background: transparent;
    border-left-color: rgba(255, 255, 255, .10);
    border-right-color: rgba(255, 255, 255, .10);
    box-shadow: none;
}


/* ---------- BAŞLIK (öndeki kart) ---------- */

/* .page-hero-head varsayılanı baseline hizalıyor; geri oku için
   center gerekiyor, yoksa ok başlığın altına düşüyor. */
.gl-hero .page-hero-head { align-items: center; }

.gl-title-line {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* entity.css satır 59-75'ten birebir — kitap/yazar/etiket
   sayfalarındaki okla aynı. */
.gl-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;
}
.gl-back:hover { background: #f1f3f5; color: #111827; }
html.dark .gl-back { color: #9ca3af; }
html.dark .gl-back:hover { background: rgba(255, 255, 255, .08); color: #f3f4f6; }

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

.gl-count { flex: 0 0 auto; }


/* ---------- ARAMA (arkadaki yapışkan kart) ----------
   Ölçü ve zemin kabuktaki .page-subbar'dan geliyor. 68 kartlık bir
   ızgarada aşağı inerken arama kutusunun ekranda kalması işe yarıyor;
   bu yüzden sekme değil subbar seçildi. */
/* ÜST BOŞLUK: .page-subbar varsayılanı üstten 22px veriyor ama bunun
   20px'i hero kartının ALTINDA kalıyor — geriye 2px görünür pay
   kalıyordu ve kutu başlığa yapışık duruyordu. Sekmeli sayfalarda bu
   sorun yok, çünkü .page-tab'ın kendi 16px üst dolgusu var. Burada o
   payı elle veriyoruz: 20px gizli + 14px görünür.
   Boşluğu değiştirmek istersen aşağıdaki 14 sayısını değiştir. */
.gl-subbar { padding-top: calc(var(--shell-overlap) + 14px); }

.gl-search {
    position: relative;
    display: flex;
    align-items: center;
}

.gl-search-icon {
    position: absolute;
    left: 14px;
    width: 16px;
    height: 16px;
    opacity: .4;
    pointer-events: none;
}

.gl-search input {
    box-sizing: border-box;
    width: 100%;
    min-height: 40px;
    padding: 9px 38px 9px 40px;
    border: 1px solid #d5dae1;
    border-radius: 9999px;
    outline: none;
    background: #fff;
    color: inherit;
    font-family: inherit;
    font-size: 13.5px;
    box-shadow: 0 3px 12px rgba(15, 23, 42, .045);
    transition: border-color .16s ease;
}
/* ODAK: kenarlık sitenin mavisine dönüyor (#1d9bf0 — layout.php'deki
   gündem etiketleri, post_card bağlantıları ve profil hep bu renk).
   ÇİFT ÇERÇEVE YOK: dışarıya halka (box-shadow ring) çizilmiyor,
   yalnızca kenarlık renk değiştiriyor. Eski hâli mor (#8b5cf6) idi. */
.gl-search input:focus { border-color: #1d9bf0; }
.gl-search input::placeholder { opacity: .45; }
html.dark .gl-search input {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .06);
    color: #f3f4f6;
    box-shadow: none;
}
html.dark .gl-search input:focus { border-color: #1d9bf0; }

.gl-search-clear {
    display: flex;
    position: absolute;
    right: 12px;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: inherit;
    opacity: .4;
    cursor: pointer;
}
.gl-search-clear:hover { opacity: .85; }
.gl-search-clear[hidden] { display: none; }


/* ---------- IZGARA ----------
   Üstteki 24px AÇIK yazıldı. "margin: 0 20px" gibi bir kısayol
   margin-top'u 0'a çekip kabuğun ".page-subbar + * { margin-top:24px }"
   kuralını ezer ve ızgara arama barına yapışır. */
.gl-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 24px;
    padding: 0 20px 28px;
}
@media (max-width: 520px) { .gl-grid { grid-template-columns: 1fr; } }


/* ---------- KART ---------- */
.gl-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #e7eaee;
    border-radius: 16px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.gl-card:hover {
    border-color: #cfd6de;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .07);
}
html.dark .gl-card {
    border-color: rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .035);
}
html.dark .gl-card:hover {
    border-color: rgba(255, 255, 255, .2);
    box-shadow: none;
    background: rgba(255, 255, 255, .06);
}

/* Hiç kitabı ve alıntısı olmayan türler listenin sonunda toplanıyor
   (sıralama functions.php:3388'de). Silmiyoruz — taksonomi eksik
   görünmesin — ama göz önce dolu olanları görsün diye soluklar. */
.gl-card.is-empty { opacity: .5; }
.gl-card.is-empty:hover { opacity: 1; }

/* İKON KARESİ — RENK GERİ GELDİ.
   Zemin rengi PHP'den geliyor: kart üzerinde style="--gl-c:#xxxxxx".
   Değer önce functions.php:3215 get_genre_color()'dan alınıyor (Aşk
   kırmızı, Bilim-Kurgu camgöbeği gibi ANLAMLI eşleşmeler); haritada
   olmayan türler için crc32 paletine düşülüyor, böylece hiçbir kart
   aynı gri tonda kalmıyor.

   Tümünü nötrleştirmek istersen: aşağıdaki background'ı
   var(--gl-c, #f1f3f6) yerine düz #f1f3f6 yap, color'ı da #5f6772. */
.gl-ic {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--gl-c, #f1f3f6);
    color: #fff;
}
.gl-ic svg { width: 19px; height: 19px; }

.gl-info { flex: 1 1 auto; min-width: 0; }

.gl-name {
    margin: 0;
    overflow: hidden;
    color: #0f1419;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html.dark .gl-name { color: #f1f3f7; }

.gl-sub {
    margin: 2px 0 0;
    overflow: hidden;
    color: #656d7a;   /* #9099a5 / 11.5px idi, beyazda 2.9:1 — OKUNURLUK_20261026 */
    font-size: 12.5px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html.dark .gl-sub { color: #79838f; }

/* Sağdaki ok: normalde soluk, kartın üstüne gelince belirginleşiyor.
   "Bu bir bağlantı" bilgisini renk kullanmadan veriyor. */
.gl-chev {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: #c3cad3;
    transition: color .15s ease, transform .15s ease;
}
.gl-card:hover .gl-chev { color: #6b7280; transform: translateX(2px); }
html.dark .gl-chev { color: rgba(255, 255, 255, .18); }
html.dark .gl-card:hover .gl-chev { color: #9ca3af; }


/* ---------- BOŞ DURUM ----------
   Etiket / bildirimler / kaydedilenler sayfalarındaki kartın aynısı. */
.gl-empty {
    margin: 24px 20px;
    padding: 56px 28px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06),
                0 1px 2px rgba(15, 23, 42, .04);
    color: #9aa3ae;
    font-size: 13.5px;
    line-height: 1.5;
    text-align: center;
}
html.dark .gl-empty {
    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;
}
.gl-empty[hidden] { display: none; }


@media (max-width: 640px) {
    .gl-grid  { padding-left: 14px; padding-right: 14px; }
    .gl-empty { margin-left: 14px; margin-right: 14px; padding: 44px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .gl-card, .gl-chev { transition: none !important; }
}