/* Kitap Alıntıları — özel stiller (Tailwind tamamlayıcı) */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* Alıntı tipografisi — Kitap Alıntıları */
.quote-body {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 17px;
    line-height: 1.65;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Yumuşak fade-in */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp .25s ease-out both; }

/* Scrollbar (sade) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d6d3d1; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #a8a29e; }

/* Form focus iyileştirme */
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px rgba(28,25,23,0.06); }

/* Heights helper (Tailwind dışı) */
.h-15 { height: 3.75rem; }
.h-30 { height: 7.5rem; }

/* ---- İleti kartları (feed) ----
   Bu kurallar <head>'de yüklenmek ZORUNDA: sayfa sonunda gelince gövde
   önce tam boy çizilip sonra kısalıyor ve göz kırpması oluyordu. */
/* Kısaltma: sabit yükseklikte kesince son satır ORTASINDAN bölünüp
       "yarım harf" gibi duruyordu. Kesildiği yer artık yumuşak bir solmayla
       bitiyor — okur orada devamı olduğunu görüyor, kırık satır görünmüyor.
       Maske YALNIZCA gerçekten kısaltılmış kartlara uygulanır (is-clamped). */
    /* KISALTMA = CSS satır sınırı (1000kitap'ın yöntemi).
       Eskiden JS ölçüp kelime kelime kırpıyordu: yükseklik yüklemeden sonra
       değişiyor, sayfa oynuyor ve son satır anlık titriyordu. line-clamp'te
       yükseklik satır sayısından gelir — JS hiçbir şeyi yeniden yerleştirmez,
       yazı tipi geç yüklense bile kayma olmaz. */
    .post-body.is-clamped {
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7;
        overflow: hidden;
    }
    .post-body.is-expanded, .post-body.is-expanded.is-clamped {
        display: block; -webkit-line-clamp: unset; overflow: visible;
    }
    /* JS kesmeyi tam satır sınırına oturttuysa solmaya gerek yok: yarım satır
       kalmıyor, metin net bitiyor. Maske yalnızca JS ölçemezse devrede kalır. */
    .post-body.is-cut-clean { -webkit-mask-image: none; mask-image: none; }

    /* ---- "… daha fazla" — son satırın sonunda (1000kitap: absolute right bottom) ---- */
    .post-body-wrap { position: relative; }
    .post-more {
        position: absolute; right: 0; bottom: 0; z-index: 2;
        font-size: 15px; line-height: 1.625;           /* gövdenin satır kutusuyla aynı */
        color: #78716c; font-weight: 500; cursor: pointer;
        /* Metnin hemen ardına konduğunda dolgu KÜÇÜK olmalı; büyük dolgu düğmeyi
           görünür biçimde uzaklaştırıyor (ölçümde 6px, ekranda ~43px boşluk). */
        border: 0; padding: 0 0 0 .5em; background: none;
        white-space: nowrap;           /* iki satıra bölünmesin */
    }
    .post-more:hover { color: #1c1917; }
    .post-more.hidden { display: none; }
    /* Son satır doluysa düğme metnin ÜSTÜNE biner (sağ kenara dayanır). O zaman
       altındaki yarım kelime okunmasın diye sola doğru beyaza eriyen zemin gerekir
       — 1000kitap da aynısını yapıyor. Bitişik durumda zemin YOK, yoksa metinle
       düğme arasında görünür bir boşluk oluşuyor. */
    .post-more.ustune-biner {
        padding-left: 2.4em;
        background: linear-gradient(to right, rgba(255,255,255,0) 0, #fff 2em);
    }
    /* Açıkken düğme metnin altına iner */
    .post-body.is-expanded ~ .post-more {
        position: static; background: none; padding-left: 0; margin-top: .25rem;
    }
    /* .hidden ile aynı özgüllükte olduğu için ve style.css sonra yüklendiği için
       Tailwind'in .hidden'ını eziyordu → gizlenmesi gereken düğme görünüyordu. */
    .post-more.hidden { display: none; }

    /* ---- Kategori rozeti: renkli nokta + ad (1000kitap düzeni) ---- */
    .post-cat {
        display: inline-flex; align-items: center; gap: 6px;
        margin-top: .6rem; padding: 3px 10px 3px 8px; border-radius: 9999px;
        font-size: 13px; font-weight: 500; color: #57534e; line-height: 1.4;
        transition: background-color .15s;
    }
    .post-cat:hover { background: #f5f5f4; color: #1c1917; }
    .post-cat-dot { width: 8px; height: 8px; border-radius: 9999px; flex: 0 0 auto; }
    .post-body h2 { font-size: 1.05rem; font-weight: 700; margin: .5rem 0 .2rem; color:#1c1917; }
    .post-body a { color:#4f46e5; }
    /* Görsel yüksekliği sınırı (Tailwind arbitrary derlenmiyor → gerçek CSS) */
    .pg-img { display:block; margin:0; max-width:100%; max-height:min(70vh, 520px); object-fit:contain; object-position:left center; border-radius:12px; cursor:zoom-in; }
    /* Çoklu görsel galerisi (carousel) */
    .pg-track { -ms-overflow-style:none; scrollbar-width:none; scroll-snap-type:x mandatory; scroll-behavior:smooth; }
    .pg-track::-webkit-scrollbar { display:none; }
    .pg-slide { scroll-snap-align:center; }
    .pg-prev,.pg-next { position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:9999px; background:rgba(0,0,0,.45); color:#fff; display:flex; align-items:center; justify-content:center; font-size:20px; line-height:1; cursor:pointer; border:none; z-index:2; transition:opacity .15s; }
    .pg-prev{ left:8px; } .pg-next{ right:8px; }
    .pg-prev:disabled,.pg-next:disabled { opacity:0; pointer-events:none; }
    .pg-counter { position:absolute; top:8px; right:8px; background:rgba(0,0,0,.55); color:#fff; font-size:11px; font-weight:600; padding:2px 8px; border-radius:9999px; z-index:2; }
    .pg-dots { position:absolute; bottom:8px; left:0; right:0; display:flex; gap:5px; justify-content:center; z-index:2; }
    .pg-dot { width:6px; height:6px; border-radius:9999px; background:rgba(255,255,255,.55); }
    .pg-dot.is-active { background:#fff; }