/* =========================================================
   OKUR ŞERİDİ VE OKUR LİSTESİ PENCERESİ
   ---------------------------------------------------------
   reader_modal.php'nin render_reader_modal_shell() fonksiyonundan
   birebir alındı. Orada GÖVDEYE basılıyordu ve asıl sorun şuydu:

     render_reader_stack()        → hero'nun İÇİNDE, sayfanın en üstünde
     render_reader_modal_shell()  → sayfanın EN ALTINDA, tüm kartlardan sonra

   Yani okur avatarları çiziliyor, stilleri 1500 satır sonra geliyordu.
   O ana kadar avatarlar 28px değil doğal boyutlarında, üst üste değil
   yan yana duruyordu. "Önce profil fotoğrafı gelip kayboluyor" denen
   şeyin bir bacağı buydu; diğeri post_card.php'nin gömülü CSS'iydi.
   ========================================================= */

.reader-stack {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    min-height: 30px;

    padding: 3px 10px 3px 4px;

    border: 1px solid #e5e7eb;
    border-radius: 9999px;

    background: transparent;

    cursor: pointer;

    font-family: inherit;

    transition:
        background .15s ease,
        border-color .15s ease;
}

html.dark .reader-stack {
    border-color: rgba(255,255,255,.12);
}

.reader-stack:hover {
    background: rgba(0,0,0,.025);
}

html.dark .reader-stack:hover {
    background: rgba(255,255,255,.035);
}

.reader-stack-avatars {
    display: inline-flex;
    align-items: center;
}

.reader-stack-avatars img {
    width: 22px;
    height: 22px;

    border: 1.5px solid #fff;
    border-radius: 50%;

    object-fit: cover;
}

html.dark .reader-stack-avatars img {
    border-color: var(--shell-hero-bg, #191d24);
}

.reader-stack-avatars img:not(:first-child) {
    margin-left: -7px;
}

.reader-stack-text {
    color: #4b5563;

    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
}

.reader-stack-text strong {
    font-weight: 700;
}

html.dark .reader-stack-text {
    color: #c8cdd3;
}

#readerModal { position:fixed; inset:0; z-index:9998; display:none; align-items:flex-end; justify-content:center; }
@media(min-width:640px){ #readerModal { align-items:center; } }
#readerModal.show { display:flex; }
.rm-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(2px); }
.rm-card { position:relative; background:#fff; width:100%; max-width:420px; max-height:75vh; border-radius:24px 24px 0 0; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 -8px 40px rgba(0,0,0,.25); }
@media(min-width:640px){ .rm-card { border-radius:24px; max-height:70vh; box-shadow:0 24px 60px rgba(0,0,0,.3); } }
html.dark .rm-card { background:#000; box-shadow:0 0 0 1px rgba(255,255,255,.14); }   /* SIYAH_20261026 */
.rm-head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid #f0f1f3; }
html.dark .rm-head { border-bottom-color:rgba(255,255,255,.07); }
.rm-title { font-size:16px; font-weight:800; }
.rm-close { width:32px; height:32px; border-radius:50%; border:none; background:rgba(0,0,0,.05); cursor:pointer; font-size:15px; }
html.dark .rm-close { background:rgba(255,255,255,.08); color:#fff; }
.rm-body { overflow-y:auto; padding:8px 0; }
.rm-row { display:flex; align-items:center; gap:12px; padding:9px 20px; text-decoration:none; color:inherit; }
.rm-row:hover { background:rgba(0,0,0,.03); } html.dark .rm-row:hover { background:rgba(255,255,255,.04); }
.rm-row img { width:42px; height:42px; border-radius:50%; object-fit:cover; flex-shrink:0; }
/* READER_MODAL_IDENTITY_UI_20261012 */
.rm-name {
    display: flex;
    align-items: center;

    min-width: 0;

    margin: 0;

    font-size: 14px;
    font-weight: 700;
}

.rm-name-text {
    min-width: 0;
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.rm-name .post-premium-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 13px;

    width: 13px;
    height: 13px;

    margin-left: 3px !important;
}

.rm-name .post-premium-mark img {
    display: block;

    width: 13px !important;
    height: 13px !important;

    max-width: 13px !important;
    max-height: 13px !important;
}

.rm-handle { font-size:12px; color:#9ca3af; }
.rm-foll { margin-left:auto; font-size:11px; font-weight:700; color:#3b82f6; background:rgba(59,130,246,.1); padding:3px 10px; border-radius:99px; flex-shrink:0; }
.rm-more { width:100%; padding:12px; border:none; background:none; font-size:13px; font-weight:700; color:#6b7280; cursor:pointer; }
.rm-more:hover { color:inherit; }



/* ---------- YENİ KABUKLA UYUM ----------
   Avatar halkası kartın zeminiyle aynı renkte olmalı ki avatarlar
   kartın üstünde "kesilmiş" gibi dursun. Koyu temada sabit #0f1116
   yazıyordu; yeni hero kartının zemini #191d24. Değişkenden alınıyor,
   kabuk rengi değişirse halka da onunla değişir. */
html.dark .reader-stack-avatars img {
    border-color: var(--shell-hero-bg, #191d24);
}

/* READER_MODAL_SOURCES_UI_20261012 */

.rm-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;

    min-width: 0;
}

.rm-name {
    display: flex;
    align-items: center;

    min-width: 0;

    margin: 0;
}

.rm-name-text {
    min-width: 0;
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.rm-name .post-premium-mark,
.rm-name .post-lock-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 13px;

    width: 13px;
    height: 13px;

    margin-left: 3px !important;
}

.rm-name .post-premium-mark img,
.rm-name .post-lock-mark svg {
    display: block;

    width: 13px !important;
    height: 13px !important;

    max-width: 13px !important;
    max-height: 13px !important;
}

.rm-library-state {
    flex: 0 0 auto;

    color: #8a94a1;

    font-size: 10.5px;
    font-weight: 600;

    white-space: nowrap;
}

.rm-loading,
.rm-empty {
    margin: 0;

    padding: 28px 20px;

    color: #9ca3af;

    font-size: 12.5px;
    line-height: 1.45;

    text-align: center;
}

html.dark .rm-library-state {
    color: #788391;
}


/* =========================================================
   READER_MODAL_FINAL_CSS_20261014
   ========================================================= */

.rm-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.rm-title-count {
    color: #929ba8;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
}

html.dark .rm-title-count {
    color: #788391;
}

.rm-person {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 12px;

    min-width: 0;

    color: inherit;
    text-decoration: none;
}

.rm-row > .follow-btn {
    flex: 0 0 auto;
    margin-left: auto;
}