/* =========================================================
   KİMİ TAKİP ETMELİ
   ---------------------------------------------------------
   Sayfa CSS'i <head> içinde yüklenir.
   Başlık, Kaydedilenler sayfasındaki page-hero yapısını kullanır.
   Okur kartlarının ölçüleri Profil > Takipçiler/Takip edilenler
   kompakt kartlarıyla birebir eşleştirilmiştir.
   ========================================================= */

/* ---------- ORTA YÜZEY ---------- */
.ktf-page {
    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 .ktf-page {
    background:transparent;
    border-color:rgba(255,255,255,.10);
    box-shadow:none;
}

/* ---------- BAŞLIK ----------
   Kaydedilenler sayfasındaki başlık yapısıyla BİREBİR aynı geometriyi kullanır.
   Ölçü, padding, radius, tipografi ve yatay hizayı global .page-hero sınıfları verir.
   Burada yalnız o sayfadaki gibi sticky davranış ve margin düzeltmesi var. */
.page-hero.ktf-hero {
    position:sticky;
    top:0;
    margin-bottom:0;
}

/* Kaydedilenler ile aynı TEK SATIR hero yüksekliği.
   Uzun açıklama ikinci satıra düşüp kartı büyütmesin. */
.ktf-hero .page-hero-head {
    flex-wrap:nowrap !important;
}
.ktf-hero .page-hero-title {
    flex:0 0 auto;
    white-space:nowrap;
}
.ktf-hero .page-hero-note {
    flex:0 1 auto;
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

/* ---------- KART IZGARASI ----------
   Profildeki kompakt takip kartıyla aynı. */
.ktf-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    padding:12px 14px 16px;
}
.ktf-card {
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    min-width:0;
    border:1px solid #e2e5ea;
    border-radius:18px;
    background:#fff;
    box-shadow:0 1px 2px rgba(15,23,42,.04);
}
html.dark .ktf-card {
    background:rgba(255,255,255,.03);
    border-color:rgba(255,255,255,.08);
    box-shadow:none;
}

.ktf-card-cover {
    height:58px;
    flex:0 0 58px;
    overflow:hidden;
    background:#0f172a;
}
.ktf-card-cover-img,
.ktf-card-cover-fallback {
    display:block;
    width:100%;
    height:100%;
}
.ktf-card-cover-img { object-fit:cover; }
.ktf-card-cover-fallback { background:#0f172a; }

.ktf-card-avatar-link {
    display:block;
    position:relative;
    z-index:2;
    width:80px;
    height:80px;
    flex:0 0 80px;
    margin:-40px auto 0;
}
.ktf-av {
    display:block;
    width:80px;
    height:80px;
    object-fit:cover;
    border:3px solid #fff;
    border-radius:9999px;
    background:#f3f4f6;
}
html.dark .ktf-av {
    border-color:#111827;
    background:#1f2937;
}

.ktf-card-body {
    display:flex;
    flex-direction:column;
    align-items:center;
    min-width:0;
    padding:6px 8px 10px;
    text-align:center;
}
.ktf-name {
    max-width:100%;
    margin-top:1px;
    overflow:hidden;
    color:inherit;
    font-size:13px;
    font-weight:700;
    line-height:1.2;
    text-decoration:none;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.ktf-name:hover { text-decoration:underline; }
.ktf-handle {
    max-width:100%;
    margin-top:1px;
    overflow:hidden;
    color:#8d96a3;
    font-size:11.5px;
    line-height:1.2;
    text-overflow:ellipsis;
    white-space:nowrap;
}
html.dark .ktf-handle { color:#9aa5b1; }

/* Profil kartındaki sıra: seviye > kitap/paylaşım. */
.ktf-level {
    margin:5px 0 0;
    color:#667085;
    font-size:11.5px;
    font-weight:600;
    line-height:1.2;
}
html.dark .ktf-level { color:#c5ccd5; }
.ktf-meta {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:nowrap;
    gap:4px;
    margin-top:3px;
    color:#8b95a7;
    font-size:11px;
    line-height:1.2;
    white-space:nowrap;
}
.ktf-meta-sep { opacity:.75; }

.ktf-follow {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:auto;
    min-height:28px;
    margin-top:8px;
    gap:4px;
    padding:5px 9px;
    border:1px solid #d9dde3;
    border-radius:9999px;
    background:#fff;
    color:#0f1419;
    box-shadow:0 1px 2px rgba(15,23,42,.03);
    font-family:inherit;
    font-size:11px;
    font-weight:650;
    line-height:1;
    cursor:pointer;
    transition:background-color .15s ease,border-color .15s ease,color .15s ease,opacity .15s ease;
}
.ktf-follow svg {
    width:12px;
    height:12px;
    flex:0 0 12px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.ktf-follow:hover { background:#f8fafc; border-color:#cfd5dd; }
.ktf-follow.is-following { background:#0f1419; border-color:#0f1419; color:#fff; }
.ktf-follow.is-following:hover { background:#252a31; border-color:#252a31; }
.ktf-follow:disabled { opacity:.58; cursor:wait; }
html.dark .ktf-follow { background:#e5e7eb; border-color:#d1d5db; color:#111827; box-shadow:none; }
html.dark .ktf-follow:hover { background:#d1d5db; border-color:#c4c9d0; color:#0f1419; }
html.dark .ktf-follow.is-following { background:#cfd4da; border-color:#c4c9d0; color:#111827; }
html.dark .ktf-follow.is-following:hover { background:#bec4cb; border-color:#b6bcc4; color:#0f1419; }

.ktf-empty {
    padding:60px 20px;
    color:#9ca3af;
    font-size:14px;
    text-align:center;
}

@media (max-width:900px) {
    .ktf-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:640px) {
    .ktf-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .ktf-hero .page-hero-note { display:none; }
}
@media (max-width:420px) {
    .ktf-grid { grid-template-columns:1fr; }
}