/* =========================================================
   profile.php sayfa CSS'i — govdeden bu dosyaya tasindi.
   Sira korunmustur: bloklar profile.php icindeki dokuman
   sirasiyla birlestirildi.
   layout.php <head> icinde, app.css SONRASI yuklenir.
   ========================================================= */

/* ---------- profile.php satir 127 ---------- */

.profile-center-surface {
    display: flow-root;
    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);
}

/* Kitaplık ve Hikâyeler beyaz içerik yüzeyi kullanır.
   Sekme barının alt köşelerinde gri zemin görünmez. */
.profile-center-surface[data-profile-tab="library"],
.profile-center-surface[data-profile-tab="stories"] {
    background:#ffffff;
}

html.dark .profile-center-surface[data-profile-tab="library"],
html.dark .profile-center-surface[data-profile-tab="stories"] {
    background:transparent;
}

html.dark .profile-center-surface {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: none;
}

/* ==================================================
   PROFİL SAYFASI YAZI AYARLARI
   Bu değişken yalnızca bu sayfadaki aşağıda listelenen yazıları etkiler.
================================================== */
.profile-center-surface,
.profile-reader-sidebar,
.profile-common-books-sidebar,
#goalModal {
    --inbook-profile-ui-font: 'Jost', Arial, sans-serif;
}

/* Mevcut özel yazı sınıfları: ikinci bir class eklenmeden aynı fonta bağlandı. */
.profile-center-surface :is(
    .sb-num, .sb-lbl,
    .goal-label, .goal-count, .goal-edit,
    .nr-label, .nr-text, .nr-more,
    .lib-empty, .lib-pill, .lib-add, .lib-t, .lib-au, .lib-mi,
    .lib-mclose, .lib-row .t, .lib-row .a, .lib-stbtn,
    .lib-confirm-text, .lib-cbtn,
    .lib-year-q, .lib-year-sub, .lib-year-btn, .lib-year-x
),
.profile-reader-sidebar :is(
    .sid-cap, .sid-club-name, .sid-club-role, .sid-club-more,
    .sid-auth-av, .sid-auth-name, .sid-genre-name, .sid-genre-cnt
),
#goalModal :is(
    .goal-modal-title, .goal-modal-sub, .goal-input-suffix,
    .goal-btn, .goal-btn-del
) {
    font-family: var(--inbook-profile-ui-font) !important;
}

/* Takip ve engelleme aksiyonlarının yazı ayarı; script #actionBtn sınıflarını yenileyebilir. */
.profile-center-surface :is(.profile-action-button, #actionBtn) {
    font-family: var(--inbook-profile-ui-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
}

/* 8. KİTAP EKLE PENCERESİ BAŞLIĞI VE ARAMA YAZISI */
.profile-center-surface .lib-modal-title {
    font-family: var(--inbook-profile-ui-font) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}

.profile-center-surface .lib-search-input {
    font-family: var(--inbook-profile-ui-font) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

/* Scriptin ürettiği “Aranıyor / Sonuç bulunamadı / Bir hata oluştu” yazıları.
   Script değiştirilmeden yalnız kapsayıcısı üzerinden hedeflenir. */
.profile-center-surface .lib-res > p {
    font-family: var(--inbook-profile-ui-font) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}

/* 9. ENGEL VE BOŞ GÖNDERİ BİLGİLERİ */
.profile-center-surface .profile-blocked-title {
    font-family: var(--inbook-profile-ui-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

.profile-center-surface .profile-blocked-description {
    font-family: var(--inbook-profile-ui-font) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

.profile-center-surface .profile-empty-posts {
    font-family: var(--inbook-profile-ui-font) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

/* 10. SAĞ SÜTUN BAŞLIKLARI */
.profile-reader-sidebar .profile-sidebar-title,
.profile-common-books-sidebar .profile-sidebar-title {
    font-family: var(--inbook-profile-ui-font) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
}

/* 11. ORTAK KİTAPLAR AÇIKLAMASI VE SAYISI */
.profile-common-books-sidebar .profile-common-books-text {
    font-family: var(--inbook-profile-ui-font) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #6b7280 !important;
}

.profile-common-books-sidebar .profile-common-books-count {
    font-family: var(--inbook-profile-ui-font) !important;
    font-size: inherit !important;
    font-weight: 700 !important;
    color: #374151 !important;
}

html.dark .profile-common-books-sidebar .profile-common-books-count {
    color: #d1d5db !important;
}

/* 12. OKUMA HEDEFİ SAYI GİRİŞİ */
#goalModal .goal-input-field {
    font-family: var(--inbook-profile-ui-font) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}
/* PROFİL — MESAJ İKONU */
.profile-center-surface .profile-message-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    flex:0 0 32px;
    padding:0;

    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;

    color:#0f1419;
    text-decoration:none;
    cursor:pointer;

    transform:scale(1);
    transform-origin:center;
    transition:
        color .16s ease,
        transform .16s ease;
}

.profile-center-surface .profile-message-button svg {
    display:block;
    width:20px;
    height:20px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;

    pointer-events:none;
}

/* Hover: sadece renk ve büyüme */
.profile-center-surface .profile-message-button:hover {
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;

    color:#1d9bf0;
    transform:scale(1.12);
}

/* Dark mode */
html.dark .profile-center-surface .profile-message-button {
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;

    color:#e7e9ea;
}

html.dark .profile-center-surface .profile-message-button:hover {
    background:transparent !important;
    color:#1d9bf0;
    transform:scale(1.12);
}
/* PROFİL — LAYOUT İLE AYNI TAKİP BUTONU */
.profile-center-surface :is(#actionBtn, .profile-action-button).profile-follow-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    flex:0 0 auto;

    min-height:27px;
    padding:5px 10px !important;

    border:1px solid #e4e7eb !important;
    border-radius:9999px !important;
    background:#ffffff !important;
    color:#111827 !important;
    box-shadow:0 1px 2px rgba(15,23,42,.04) !important;

    font-family:'Jost', Arial, sans-serif !important;
    font-size:10.5px !important;
    font-weight:600 !important;
    line-height:1 !important;

    cursor:pointer;
    white-space:nowrap;

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

.profile-center-surface :is(#actionBtn, .profile-action-button).profile-follow-btn span {
    color:inherit !important;
    font-family:'Jost', Arial, sans-serif !important;
    font-size:12px !important;
    font-weight:600 !important;
    line-height:1 !important;
}

.profile-center-surface :is(#actionBtn, .profile-action-button).profile-follow-btn svg {
    width:13px;
    height:13px;
    flex:0 0 13px;

    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.profile-center-surface :is(#actionBtn, .profile-action-button).profile-follow-btn:hover {
    background:#f8fafc !important;
    border-color:#d8dde4 !important;
    color:#111827 !important;
}

.profile-center-surface :is(#actionBtn, .profile-action-button).profile-follow-btn.is-following {
    background:#ffffff !important;
    border-color:#e4e7eb !important;
    color:#111827 !important;
}

.profile-center-surface :is(#actionBtn, .profile-action-button).profile-follow-btn:disabled {
    opacity:.55;
    cursor:wait;
}

/* Dark mode — layout ile aynı */
html.dark .profile-center-surface :is(#actionBtn, .profile-action-button).profile-follow-btn,
html.dark .profile-center-surface :is(#actionBtn, .profile-action-button).profile-follow-btn.is-following {
    background:#e5e7eb !important;
    border-color:#d1d5db !important;
    color:#111827 !important;
    box-shadow:none !important;
}

html.dark .profile-center-surface :is(#actionBtn, .profile-action-button).profile-follow-btn span,
html.dark .profile-center-surface :is(#actionBtn, .profile-action-button).profile-follow-btn.is-following span {
    color:#111827 !important;
}

html.dark .profile-center-surface :is(#actionBtn, .profile-action-button).profile-follow-btn:hover,
html.dark .profile-center-surface :is(#actionBtn, .profile-action-button).profile-follow-btn.is-following:hover {
    background:#d1d5db !important;
    border-color:#c4c9d0 !important;
    color:#0f1419 !important;
}
/* PROFİL SEKME BARI — tek kaynak, sabit geometri.
   Tailwind sınıflarına, geç yüklenen transition'a veya backdrop-filter'a bağlı değildir. */
.profile-center-surface .profile-tabs {
    display:flex;
    align-items:stretch;
    justify-content:space-between;
    position:sticky;
    /* -22px: barın üst 22px'i hero kartın altında kalıyor. Negatif top sayesinde
       tepeye yapıştığında o gizli kısım ekran dışında kalır, sekmeler tam üste oturur. */
    top:-22px;
    z-index:10;
    width:100%;
    height:auto;
    gap:8px;
    margin-top:0;
    /* üst 22px: hero kartın altında kalan telafi payı. yan 24px: alt köşe radius'uyla hizalı. */
    padding:22px 18px 0;
    overflow-x:auto;
    overflow-y:hidden;
    box-sizing:border-box;
    background:#ffffff;
    border-radius:0 0 24px 24px;
       box-shadow:none;
    scrollbar-width:none;
    border-bottom:1px solid rgba(255,255,255,.080);
}
.profile-center-surface .profile-tabs::-webkit-scrollbar {
    display:none;
}
.profile-center-surface .profile-tab-label {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    column-gap:6px;
    box-sizing:border-box;
    flex:0 0 auto;
    min-width:0;
    height:auto;
    /* İçeriğe göre genişlik: uzun “Değerlendirme + sayı” komşu sekmeye taşımaz.
       Kalan boşluk sekmeler arasına eşit dağıtılır. */
    padding:15px 3px 13px;
    border:0;
    border-bottom:2px solid transparent;
    background:transparent;
    color:#6b7280;
    font-family:var(--inbook-profile-ui-font);
    font-size:14px;
    font-weight:600;
    line-height:20px;
    text-align:center;
    text-decoration:none;
    white-space:nowrap;
    transition:none !important;
}
.profile-center-surface .profile-tab-label:hover {
    color:#374151;
}
.profile-center-surface .profile-tab-label.active-tab {
    color:#111827;
    border-bottom-color:#111827;
}
.profile-center-surface .profile-tab-count {
    display:inline-block;
    margin-left:0;
    color:currentColor;
    opacity:.5;
    font-weight:500;
    font-variant-numeric:tabular-nums;
}

html.dark .profile-center-surface .profile-tabs {
    background:#0b0b0b;   /* #0f1115 yanlış siyahtı (SIYAH_20261026) */
     box-shadow:0 8px 18px -10px rgba(0,0,0,.75);
}
html.dark .profile-center-surface .profile-tab-label {
    color:#8f98a5;
}
html.dark .profile-center-surface .profile-tab-label:hover {
    color:#d1d5db;
}
html.dark .profile-center-surface .profile-tab-label.active-tab {
    color:#f9fafb;
    border-bottom-color:#f9fafb;
}
@media (max-width:640px) {
    .profile-center-surface .profile-tabs {
        justify-content:flex-start;
        gap:18px;
        padding-left:14px;
        padding-right:14px;
        border-radius:0 0 20px 20px;
    }
    .profile-center-surface .profile-tab-label {
        min-width:0;
        padding-left:2px;
        padding-right:2px;
        font-size:12px;
    }
}
/* SADECE AÇIK TEMA — TAB BAR */
html:not(.dark) .profile-center-surface .profile-tabs {
    background: #ffffff !important;
    box-shadow: none;
    border-bottom: 1px solid #e5e7eb;
}

/* SADECE AÇIK TEMA — ÜST PROFİL KARTININ GÖLGESİ */
html:not(.dark) .profile-center-surface .profile-hero-card {
    box-shadow: none;
    border-bottom: 1px solid #e5e7eb;
}
/* ==================================================
   KRİTİK HERO GEOMETRİSİ
   Bu kurallar cover/avatar HTML'inden ÖNCE gelmeli.
   Aşağıya bırakılırsa sayfa açılışında cover görseli
   doğal boyutunda çizilip sonra 13rem'e küçülür (layout shift).
================================================== */

/* Profil üst kartı: cover, kimlik, okur özeti ve istatistiklerin beyaz yüzeyi. PROFİL HERO GÖLGESİ */
.profile-center-surface .profile-hero-card {
    position:relative;
    /* z-index 20 > sekme barının 10'u: hero önde kalır, bar altından taşar. */
    z-index:20;
    /* Negatif margin sekme barını 20px yukarı çeker = üst üste kart etkisi. */
    margin-bottom:-20px;
    overflow:visible;
    border-radius:0 0 24px 24px;
    background:#ffffff;
    /* Bu gölge sekme barının üstüne düşer; derinliği yaratan şey odur. */
    box-shadow:none;
}

/* Cover ile profil bilgisini aynı katmanda tutar; avatarın dışarı taşmasına izin verir. */
.profile-center-surface .profile-cover-shell {
    position:relative;
    z-index:0;
    overflow:visible;
    isolation:isolate;
    background:#ffffff;
}

/* Cover görselinin sabit yüksekliğini, taşmasını ve alt köşe radiusunu yönetir. */
.profile-center-surface .profile-cover-media {
    position:relative;
    z-index:1;
    height:13rem;
    overflow:hidden;
    border-radius:0 0 1.5rem 1.5rem;
}

/* Yüklenen cover görselini alanı bozmadan tamamen doldurur. */
.profile-center-surface .profile-cover-image {
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Cover yüklenmemişse açık/dark temaya uygun düz zemin gösterir. */
.profile-center-surface .profile-cover-placeholder {
    width:100%;
    height:100%;
    background:#000000;
}
html.dark .profile-center-surface .profile-cover-placeholder {
    background:#ffffff;
}

/* Profil fotoğrafını cover sınırının önünde ve sol altında konumlandırır. */
.profile-center-surface .profile-avatar-wrap {
    position:absolute;
    left:1rem;
    bottom:-4rem;
    z-index:3;
}

/* Profil fotoğrafının ölçüsü, dairesi, beyaz çerçevesi ve gölgesi. */
.profile-center-surface .profile-avatar-image {
    display:block;
    width:7rem;
    height:7rem;
    border-radius:9999px;
    object-fit:cover;
    border:4px solid #ffffff;
    background:#ffffff;
    box-shadow:0 4px 14px rgba(15,23,42,.14);
}

/* Koyu tema: derinlik gölgeyle değil, aydınlık farkıyla veriliyor. */
html.dark .profile-center-surface .profile-hero-card,
html.dark .profile-center-surface .profile-cover-shell {
    background: #191d24;                               /* ÖNDEKİ kart — daha açık */
}

/* Dark mode: avatar çerçevesini kart yüzeyiyle birleştirir. */
html.dark .profile-center-surface .profile-avatar-image {
    border-color:#0b0b0b;
    background:#0b0b0b;
    box-shadow:0 4px 16px rgba(0,0,0,.38);
}
html.dark .profile-center-surface .profile-hero-card {
    /* Koyu temada gölge iş görmez; kartın sınırını bu 1px çizgi tanımlar. */
    border-bottom:1px solid rgba(255,255,255,.12);
    box-shadow:0 14px 26px -12px rgba(0,0,0,1);
}

/* ---------- profile.php satir 670 ---------- */

    /* Bio üstü seviye satırı — hafif gri, tıklanınca modal. */
    /* OKUR SEVİYESİ SATIRI — ölçülmüş değerlerle yeniden kuruldu.
       Eski: 14px / weight 320 / #7e848b. Kontrast 3.78:1, AA sınırı 4.5.
       Jost'un 320 kesimi 14px'te zaten ince; ikisi birleşince silik.
       Yeni: weight 500, renk #6b7280 (4.83:1, AA geçiyor).
       SİMSİYAH YAPMADIM bilerek: ad #111827 / 700. İkisi de siyah
       olursa iki eşit yüksek sesli satır olur, kimlik hiyerarşisi çöker.
       Bu satır ikincil bir bilgi — ikincil kalmalı, ama okunur. */
    .profile-level-line { display:inline-flex; align-items:center; gap:5px; margin:2px 0 8px; padding:0; background:none; border:0; font-family:inherit; font-size:14px; font-weight:500; color:#6b7280; cursor:pointer; letter-spacing:-.01em; }
    .profile-level-line:hover { color:#6b7480; }
    /* Bastaki ikon: kunyedeki .sid-profile-label svg ile birebir ayni
       degerler — begenilen cizgi kalinligi ve rengi budur. */
    /* 17px -> 13px, kalınlık 2 -> 1.7.
       14px yazının büyük harf yüksekliği ~10.5px. 2px kalınlıkta 17px'lik
       bir ikon kelimenin kendisinden daha ağır duruyordu — "ikon yazıdan
       büyük" dediğin şey buydu. 13px bir büyük harfle optik olarak eşit. */
.profile-level-line-icon {
    display:none;
}
    /* Sondaki (i). Eski hali 12px'e sikistirilmis 2px kalinlikta bir
       daireydi ve icindeki nokta "M12 16h.01" hilesiyle, yani SIFIR
       uzunlukta bir cizginin yuvarlak ucuyla ciziliyordu. Tarayici bunu
       yarim piksele oturtunca kenarlar bulaniyor, nokta lekeye donuyordu.
       Ustelik nokta ALTTAydi: o bir bilgi "i"si degil, unlem isaretidir.
       Simdi: 14px (yarim piksel isi biter), 1.6 kalinlik (bastaki ikonla
       ayni aile), nokta gercek bir dolu daire ve YUKARIDA. */
/* 9px + opacity:.55, zaten soluk bir rengin üstüne ikinci kez soluklaştırma
   demekti; sonuç leke gibi görünüyordu. Üstelik bu işaret "bas, bilgi var"
   diyen tek ipucu — kaybolmamalı. 12px'e çıktı (yazının altında kalıyor),
   opaklık kaldırıldı, rengi satırın rengiyle aynı. */
.profile-level-line-info {
    width:12px;
    height:12px;
    flex:0 0 12px;
    margin-left:-1px;
    transform:translateY(-1px);

    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}
    .profile-level-line-info .dot { fill:currentColor; stroke:none; }
    html.dark .profile-level-line { color:#7f8894; }
    html.dark .profile-level-line:hover { color:#a6afb9; }
    /* Seviye modalı. */
    .level-modal { display:none; position:fixed; inset:0; z-index:1000; align-items:center; justify-content:center; padding:20px; background:rgba(15,20,25,.5); }
    .level-modal.is-open { display:flex; }
    .level-modal-card { width:100%; max-width:400px; max-height:82vh; overflow-y:auto; background:#fff; border-radius:18px; padding:20px; }
    html.dark .level-modal-card { background:#16181c; }
    .level-modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
    .level-modal-title { margin:0; font-size:17px; font-weight:600; color:#0f1419; }
    html.dark .level-modal-title { color:#f4f5f6; }
    .level-modal-close { width:30px; height:30px; border:0; border-radius:50%; background:#f0f2f5; color:#5f6773; font-size:15px; cursor:pointer; line-height:1; }
    html.dark .level-modal-close { background:rgba(255,255,255,.08); color:#a6afb9; }
    .level-modal-sub { margin:0 0 16px; font-size:13px; line-height:1.5; color:#6b7480; }
    html.dark .level-modal-sub { color:#929ba8; }
    .level-modal-sub strong { color:#854F0B; font-weight:500; }
    html.dark .level-modal-sub strong { color:#f6c667; }
    .level-row { display:flex; align-items:center; gap:11px; padding:9px 0; border-top:1px solid #f0f2f5; }
    html.dark .level-row { border-color:rgba(255,255,255,.07); }
    .level-row-check { width:18px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#16a34a; }
    .level-row-dot { width:7px; height:7px; border-radius:50%; background:#d4d9df; }
    html.dark .level-row-dot { background:rgba(255,255,255,.18); }
    .level-row-name { flex:1; font-size:14px; font-weight:400; color:#404853; display:flex; align-items:center; gap:7px; }
    html.dark .level-row-name { color:#c3cad2; }
    .level-row.is-reached .level-row-name { color:#0f1419; font-weight:500; }
    html.dark .level-row.is-reached .level-row-name { color:#f4f5f6; }
    .level-row.is-current .level-row-name { color:#854F0B; font-weight:500; }
    html.dark .level-row.is-current .level-row-name { color:#f6c667; }
    .level-row-you { font-size:10.5px; font-weight:500; color:#854F0B; background:#FAEEDA; padding:1px 7px; border-radius:99px; }
    html.dark .level-row-you { color:#f6c667; background:rgba(217,119,6,.18); }
    .level-row-req { font-size:12px; color:#9aa3ad; white-space:nowrap; }
    html.dark .level-row-req { color:#7f8894; }

/* ---------- profile.php satir 753 ---------- */

/* Okunan sayfa/kitap özeti ile okuma hedefini aynı satırda tutar. */
.profile-center-surface .profile-reading-summary-row {
    display: flex;
    align-items: center;
    gap: 28px;
    width: 100%;
    margin: 10px 0 2px;
}
.profile-center-surface .profile-reading-summary-row .reader-status {
    flex: 0 0 auto;
    width: auto;
    padding: 0;
}
.profile-center-surface .profile-reading-summary-row .profile-goal-mini {
    flex: 1 1 260px;
    min-width: 220px;
    margin: 0;
}
.profile-center-surface .profile-reading-summary-row .profile-goal-mini-set {
    margin: 0;
}
@media (max-width: 560px) {
    .profile-center-surface .profile-reading-summary-row {
        flex-wrap: wrap;
        gap: 10px 18px;
    }
    .profile-center-surface .profile-reading-summary-row .reader-status,
    .profile-center-surface .profile-reading-summary-row .profile-goal-mini {
        width: 100%;
        min-width: 0;
    }
}

/* ---------- profile.php satir 798 ---------- */

/* Okur özeti satırı: seviye + sayfa/kitap toplamı. Tek sakin satır (çubuk sağ panele taşındı). */
.profile-center-surface .reader-status {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0;
    margin: 0;
    padding: 10px 0;
    
    font-family: var(--inbook-profile-ui-font) !important;
}

/* Seviye adı ile sayaçları aynı satırda hizalar. */
.profile-center-surface .reader-status-primary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

/* Seviye adı + ayırıcı nokta grubu. */
.profile-center-surface .reader-status-level {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

/* "Düzenli Okur" — SEVİYE ADI. Renk: amber. (Mavi istersen: #1D9BF0) */
.profile-center-surface .reader-status-name {
    color: #854F0B;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -.02em;
}

/* Seviye adı ile sayaçlar arasındaki "•" ayırıcı. */
.profile-center-surface .reader-status-dot {
    color: #c9cfd7;
    font-size: 14px;
    line-height: 1;
}

/* Sayfa + kitap sayaç grubu (etiket rengi). */
.profile-center-surface .reader-status-metrics {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    color: #8d96a3;
}

/* "X sayfa" ve "Y kitap okundu" alt grupları. */
.profile-center-surface .reader-status-page-total,
.profile-center-surface .reader-status-book-total {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
}

/* Sayfa ve kitap RAKAMLARI (2.523 / 7). */
.profile-center-surface .reader-status-page-total strong,
.profile-center-surface .reader-status-book-total strong {
    color: #0f1419;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.02em;
}

/* "sayfa" ve "kitap okundu" ETİKETLERİ. */
.profile-center-surface .reader-status-page-total span,
.profile-center-surface .reader-status-book-total span {
    font-size: 12px;
    font-weight: 400;
}

/* Sayfa ile kitap arasındaki dikey "|" çizgi. */
.profile-center-surface .reader-status-divider {
    width: 1px;
    height: 17px;
    align-self: center;
    background: #e1e5ea;
}

/* Dark mode. */
html.dark .profile-center-surface .reader-status { border-color: rgba(255,255,255,.10); }
html.dark .profile-center-surface .reader-status-name { color: #f6c667; }
html.dark .profile-center-surface .reader-status-page-total strong,
html.dark .profile-center-surface .reader-status-book-total strong { color: #f4f5f6; }
html.dark .profile-center-surface .reader-status-metrics { color: #929ba8; }
html.dark .profile-center-surface .reader-status-divider { background: rgba(255,255,255,.14); }

@media (max-width: 560px) {
    /* Mobilde nefes payı + seviyeyi üst satıra alma. */
    .profile-center-surface .reader-status { padding: 16px 0 18px; }
    .profile-center-surface .reader-status-level { width: 100%; }
}

/* ---------- profile.php satir 924 ---------- */

/* Sade okuma hedefi — metrik satırının hemen altında, tek satır + ince çubuk. */
.profile-goal-mini { margin: 1px 0 2px; }
.profile-goal-mini-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.profile-goal-mini-label { font-size: 12.5px; color: #8d96a3; }          /* "2026 okuma hedefi" */
html.dark .profile-goal-mini-label { color: #929ba8; }
.profile-goal-mini-count { font-size: 12.5px; color: #8d96a3; white-space: nowrap; }  /* "7 / 20 kitap" */
.profile-goal-mini-count strong { color: #0f1419; font-weight: 500; }
html.dark .profile-goal-mini-count { color: #929ba8; }
html.dark .profile-goal-mini-count strong { color: #f4f5f6; }
/* ===== OKUMA HEDEFİ ÇUBUĞU =====
   ESKİ HALİ NEDEN "DÜZ ÇİZGİ" GİBİ DURUYORDU:
   oluk rengi #eef0f2'ydi; kartın zemini #ffffff, yüzeyin zemini #f6f7f9.
   Yani oluğun kendisi görünmüyordu, yalnızca mavi DOLU kısım görünüyordu.
   Bir çubuğun "hedef çubuğu" olduğunu anlatan şey dolu kısım değil, BOŞ
   kısmın da görünmesi — kat edilecek yolu göstermesi.

   ÜÇ DEĞİŞİKLİK:
   1) oluk #eef0f2 -> #e3e8ef  (hem beyaz hem #f6f7f9 üstünde ayırt ediliyor)
   2) 5px -> 7px + içe gölge   (oluk bir "yuva" gibi okunuyor)
   3) %10'luk dilim çizgileri  (ölçeği gösteren şey bu; sağ paneldeki
      büyük hedef çubuğunda zaten vardı, mini sürüme de geldi)
   Yükseklik 2px arttı, başka hiçbir şeyin yeri değişmedi. */
.profile-goal-mini-bar {
    position: relative;
    height: 7px;
    border-radius: 99px;
    background: #e3e8ef;
    box-shadow: inset 0 1px 2px rgba(16,24,40,.07);
    overflow: hidden;
}
.profile-goal-mini-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1d9bf0, #60a5fa);
    box-shadow: 0 0 10px rgba(29,155,240,.26);
}
/* Dilim çizgileri DOLGUNUN ÜSTÜNDE: ::after boyama sırasında sonra
   geldiği için ayrı bir z-index'e gerek yok. */
.profile-goal-mini-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent calc(10% - 2px),
        rgba(255,255,255,.85) calc(10% - 2px),
        rgba(255,255,255,.85) 10%
    );
}
html.dark .profile-goal-mini-bar {
    background: rgba(255,255,255,.11);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.18);
}
html.dark .profile-goal-mini-bar::after {
    background: repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent calc(10% - 2px),
        rgba(16,20,25,.75) calc(10% - 2px),
        rgba(16,20,25,.75) 10%
    );
}
.profile-goal-mini-set {
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin:12px 0 2px;
    padding:0;
    border:0;
    background:none;
    color:#8d96a3;
    font-family:inherit;
    font-size:12.5px;
    font-weight:500;
    line-height:1;
    cursor:pointer;
    transition:color .16s ease;
}
.profile-goal-mini-set svg {
    display:block;
    width:14px;
    height:14px;
    flex:0 0 14px;
    color:currentColor;
    transform:translateY(-.5px);
}
.profile-goal-mini-set span {
    display:block;
    line-height:14px;
}
.profile-goal-mini-set:hover { color:#667085; text-decoration:none; }
.profile-goal-mini-set:focus-visible {
    outline:2px solid rgba(15,20,25,.18);
    outline-offset:4px;
    border-radius:9999px;
}
html.dark .profile-goal-mini-set { color:#929ba8; }
html.dark .profile-goal-mini-set:hover { color:#c3cad2; }
html.dark .profile-goal-mini-set:focus-visible { outline-color:rgba(255,255,255,.22); }
/* Eski detaylı mobil hedef bloğunu gizle — yerini bu sade sürüm aldı. */
.profile-reading-goal--mobile { display: none !important; }

/* ---------- profile.php satir 999 ---------- */

.profile-reading-goal {
    --goal-accent: #1d9bf0;
    --goal-accent-2: #60a5fa;
    font-family: var(--inbook-profile-ui-font);
}
.profile-reading-goal .goal-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.profile-reading-goal .goal-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(145deg, var(--goal-accent), var(--goal-accent-2));
    box-shadow: 0 5px 13px rgba(29,155,240,.24), inset 0 1px 0 rgba(255,255,255,.28);
}
.profile-reading-goal .goal-mark svg {
    width: 13px;
    height: 13px;
    stroke-width: 2;
}
.profile-reading-goal .goal-title-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.profile-reading-goal .goal-year {
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .09em;
    color: var(--goal-accent);
}
.profile-reading-goal .goal-label {
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: #344054;
}
.profile-reading-goal .goal-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    margin-left: auto;
    padding: 0;
    flex: 0 0 27px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: #8a94a3;
    cursor: pointer;
    transition: color .15s ease, background .15s ease, transform .15s ease;
}
.profile-reading-goal .goal-edit svg {
    width: 14px;
    height: 14px;
}
.profile-reading-goal .goal-edit:hover {
    color: var(--goal-accent);
    background: rgba(37, 99, 235, .08);
    transform: translateY(-1px);
}
.profile-reading-goal .goal-metric {
    display: flex;
    align-items: baseline;
    min-width: 0;
}
.profile-reading-goal .goal-count {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    color: #101828;
    white-space: nowrap;
}
.profile-reading-goal .goal-count strong {
    font-size: 27px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -.06em;
    font-variant-numeric: tabular-nums;
}
.profile-reading-goal .goal-count span {
    font-size: 13px;
    font-weight: 650;
    line-height: 1;
    letter-spacing: -.02em;
    color: #98a2b3;
    font-variant-numeric: tabular-nums;
}
.profile-reading-goal .goal-unit {
    margin-left: 5px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    color: #98a2b3;
}
.profile-reading-goal .goal-percent {
    margin-left: auto;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.01em;
    color: var(--goal-accent);
    font-variant-numeric: tabular-nums;
}
.profile-reading-goal .goal-bar {
    position: relative;
    height: 7px;
    overflow: hidden;
    border-radius: 9999px;
    background: #e9edf4;
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, .06);
}
.profile-reading-goal .goal-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--goal-accent), var(--goal-accent-2));
    box-shadow: 0 0 12px rgba(29,155,240,.24);
    transition: width .5s ease;
}
.profile-reading-goal .goal-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent calc(10% - 2px),
        rgba(255,255,255,.82) calc(10% - 2px),
        rgba(255,255,255,.82) 10%
    );
    pointer-events: none;
}
.profile-reading-goal .goal-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    font-size: 9.5px;
    font-weight: 550;
    line-height: 1.2;
    color: #98a2b3;
}
.profile-reading-goal .goal-meta strong {
    font-weight: 750;
    color: #667085;
}
.profile-reading-goal .goal-empty {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.profile-reading-goal .goal-empty-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}
.profile-reading-goal .goal-empty-copy strong {
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.15;
    color: #344054;
}
.profile-reading-goal .goal-empty-copy span {
    margin-top: 2px;
    font-size: 9.5px;
    font-weight: 550;
    line-height: 1.15;
    color: #98a2b3;
}
.profile-reading-goal .goal-empty-arrow {
    width: 15px;
    height: 15px;
    color: var(--goal-accent);
    transition: transform .15s ease;
}
.profile-reading-goal .goal-empty:hover .goal-empty-arrow {
    transform: translateX(2px);
}
.profile-reading-goal--mobile {
    display: none;
}
.profile-reading-goal--sidebar {
    margin: 1px 0 13px;
    padding: 1px 0 2px;
}
.profile-reading-goal--sidebar .goal-heading {
    margin-bottom: 10px;
}
.profile-reading-goal--sidebar .goal-metric {
    margin-bottom: 8px;
}
html.dark .profile-reading-goal .goal-label,
html.dark .profile-reading-goal .goal-empty-copy strong {
    color: #e7e9ea;
}
html.dark .profile-reading-goal .goal-count {
    color: #f5f7fa;
}
html.dark .profile-reading-goal .goal-count span,
html.dark .profile-reading-goal .goal-unit,
html.dark .profile-reading-goal .goal-meta,
html.dark .profile-reading-goal .goal-empty-copy span {
    color: #8793a3;
}
html.dark .profile-reading-goal .goal-meta strong {
    color: #aab4c0;
}
html.dark .profile-reading-goal .goal-bar {
    background: rgba(255,255,255,.09);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.16);
}
html.dark .profile-reading-goal .goal-bar::after {
    background: repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent calc(10% - 2px),
        rgba(16,20,25,.72) calc(10% - 2px),
        rgba(16,20,25,.72) 10%
    );
}
@media (max-width: 1023px) {
    .profile-reading-goal--mobile {
        display: block;
        margin: 0 14px 11px;
        padding: 11px 12px 10px;
        border: 0;                     /* kenarlık kalktı; zemin zaten renkli */
        border-radius: 16px;
        background:
            radial-gradient(circle at 100% 0, rgba(29,155,240,.10), transparent 42%),   /* mordu */
            linear-gradient(135deg, rgba(37,99,235,.055), rgba(255,255,255,.74));
        box-shadow: 0 7px 22px rgba(37, 99, 235, .055);
    }
    .profile-reading-goal--mobile .goal-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "heading metric"
            "bar bar"
            "meta meta";
        align-items: center;
        column-gap: 12px;
    }
    .profile-reading-goal--mobile .goal-heading {
        grid-area: heading;
    }
    .profile-reading-goal--mobile .goal-metric {
        grid-area: metric;
    }
    .profile-reading-goal--mobile .goal-count strong {
        font-size: 21px;
    }
    .profile-reading-goal--mobile .goal-count span {
        font-size: 12px;
    }
    .profile-reading-goal--mobile .goal-unit {
        display: none;
    }
    .profile-reading-goal--mobile .goal-percent {
        margin-left: 7px;
        font-size: 10px;
    }
    .profile-reading-goal--mobile .goal-bar {
        grid-area: bar;
        margin-top: 9px;
        height: 6px;
    }
    .profile-reading-goal--mobile .goal-meta {
        grid-area: meta;
        margin-top: 5px;
    }
    .profile-reading-goal--mobile .goal-edit {
        width: 25px;
        height: 25px;
        flex-basis: 25px;
    }
    html.dark .profile-reading-goal--mobile {
        border: 0;
        background:
            radial-gradient(circle at 100% 0, rgba(29,155,240,.15), transparent 44%),   /* mordu */
            linear-gradient(135deg, rgba(37,99,235,.09), rgba(255,255,255,.025));
        box-shadow: none;
    }
}

/* ---------- profile.php satir 1308 ---------- */

.now-reading { display:inline-flex; align-items:center; gap:8px; margin-bottom:12px; text-decoration:none; color:inherit; max-width:100%; }
.nr-label { font-size:13px; color:#9ca3af; flex-shrink:0; }
.nr-cover { width:18px; height:27px; object-fit:cover; border-radius:3px; flex-shrink:0; }
.nr-text { font-size:13px; color:#6b7280; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html.dark .nr-text { color:#9ca3af; }
.nr-text b { font-weight:600; color:#374151; }
html.dark .nr-text b { color:#d1d5db; }
.now-reading:hover .nr-text b { text-decoration:underline; }
.nr-more { font-size:12px; color:#9ca3af; flex-shrink:0; }

/* ---------- profile.php satir 1413 ---------- */

.rev-card { background: #ffffff; border-bottom: 1px solid #e5e7eb; }
html.dark .rev-card { background: transparent; border-bottom-color: rgba(255,255,255,0.08); }
.rev-card:hover { background: #f9fafb; }
html.dark .rev-card:hover { background: rgba(255,255,255,0.03); }
/* Kazanan işareti artık SOL ŞERİT değil, soldan silinen altın zemin:
   "kartta kenarlık olmayacak" kuralı bunu da kapsıyor, ama işaretin
   kendisi anlam taşıdığı için yok edilmedi — biçimi değişti. */
.rev-card.weekly-winner {
    background-image: linear-gradient(90deg, rgba(245,158,11,.13), rgba(245,158,11,0) 46%);
}
.rev-star { color: #f59e0b; font-size: 14px; line-height: 1; }
.rev-star.empty { color: #d1d5db; }
html.dark .rev-star.empty { color: rgba(255,255,255,0.15); }
.rev-score-badge { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 99px; }
.rev-score-5 { background: rgba(251,191,36,0.12); color: #92400e; }
html.dark .rev-score-5 { background: rgba(251,191,36,0.12); color: #fbbf24; }
.rev-score-4 { background: #f3f4f6; color: #374151; }
html.dark .rev-score-4 { background: rgba(255,255,255,0.07); color: #9ca3af; }
.rev-score-low { background: rgba(239,68,68,0.08); color: #b91c1c; }
html.dark .rev-score-low { background: rgba(239,68,68,0.08); color: #f87171; }
.pmenu { position:absolute; top:calc(100% + 4px); right:0; min-width:220px; background:#fff; border:1px solid #e5e7eb; border-radius:16px; box-shadow:0 8px 32px rgba(0,0,0,.12); z-index:50; overflow:hidden; display:none; }
html.dark .pmenu { background:#1a1d24; border-color:rgba(255,255,255,.1); }
.pmenu.open { display:block; }
.pmenu-item { display:flex; align-items:center; gap:10px; padding:9px 14px; font-size:12px; font-weight:500; cursor:pointer; background:none; border:none; width:100%; text-align:left; color:inherit; font-family:inherit; }
.pmenu-item:hover { background:rgba(0,0,0,.05); }
html.dark .pmenu-item:hover { background:rgba(255,255,255,.06); }
.pmenu-item.danger { color:#ef4444; }
.pmenu-sep { height:1px; background:#e5e7eb; margin:4px 0; }
html.dark .pmenu-sep { background:rgba(255,255,255,.08); }

/* ---------- profile.php satir 1473 ---------- */

.lib-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px 16px 4px; }
.lib-status { display:flex; gap:8px; flex-wrap:wrap; }
.lib-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:99px; font-size:13px; font-weight:450; text-decoration:none; border:1px solid #e5e7eb; color:#6b7280; }
html.dark .lib-pill { border-color:rgba(255,255,255,.12); color:#9ca3af; }
.lib-pill.active { background:#0f1419; color:#fff; border-color:#0f1419; }
html.dark .lib-pill.active { background:#e7e9ea; color:#0f1419; border-color:#e7e9ea; }
.lib-pill .c { opacity:.55; }
.lib-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(102px, 1fr));
    gap:22px 14px;
    padding:16px;
}
.lib-book {
    min-width:0;
    color:inherit;
    text-decoration:none;
}
.lib-book .cv {
    width:100%;
    aspect-ratio:2/3;
    object-fit:cover;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#e5e7eb;
    color:#9ca3af;
    box-shadow:0 5px 16px rgba(15,20,25,.16);
    transition:transform .16s ease, box-shadow .16s ease;
}
.lib-book:hover .cv {
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(15,20,25,.19);
}
.lib-book .lib-t {
    margin:8px 0 0;
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    color:#111827;
    font-size:13.5px;
    font-weight:650;
    line-height:1.22;
    letter-spacing:-.012em;
}
.lib-book .lib-au {
    margin-top:2px;
    overflow:hidden;
    color:#8d96a3;
    font-size:11.5px;
    line-height:1.25;
    text-overflow:ellipsis;
    white-space:nowrap;
}
html.dark .lib-book .lib-t { color:#f1f3f5; }
html.dark .lib-book .lib-au { color:#929ba8; }
.lib-empty { padding:48px 16px; text-align:center; color:#9ca3af; font-size:13px; line-height:1.6; }
@media (max-width:560px) {
    .lib-grid {
        grid-template-columns:repeat(auto-fill, minmax(92px, 1fr));
        gap:20px 12px;
        padding:14px;
    }
}

/* Profil / Hikâyeler — kitaplık kartını taklit etmez; kendi kompakt hikâye kartı. */
.profile-center-surface .profile-story-tab {
    padding:0 0 18px;
    background:#ffffff;
}
html.dark .profile-center-surface .profile-story-tab {
    background:transparent;
}
.profile-center-surface .profile-story-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
}
/* KENARLIK YOK — kart yüzeyden ZEMİN FARKIYLA ayrılıyor
   (kart #ffffff, yüzey #f6f7f9). Gölge biraz güçlendirildi ki
   kenarlığın yaptığı ayırma işi boşlukta kalmasın. */
.profile-center-surface .profile-story-card {
    display:grid;
    grid-template-columns:74px minmax(0, 1fr);
    gap:13px;
    min-width:0;
    padding:12px;
    border:0;
    border-radius:18px;
    background:#ffffff;
    box-shadow:0 2px 10px rgba(15,23,42,.055);
    transition:box-shadow .15s ease, transform .15s ease;
}
.profile-center-surface .profile-story-card:hover {
    box-shadow:0 8px 20px rgba(15,23,42,.085);
    transform:translateY(-1px);
}
.profile-center-surface .profile-story-cover-link {
    display:block;
    width:74px;
    align-self:start;
    text-decoration:none;
}
.profile-center-surface .profile-story-cover {
    display:flex;
    width:74px;
    height:108px;
    object-fit:cover;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:12px;
    background:#edf0f3;
    color:#9aa3ad;
}
.profile-center-surface .profile-story-cover-empty svg {
    width:25px;
    height:25px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.profile-center-surface .profile-story-copy {
    display:flex;
    flex-direction:column;
    min-width:0;
    padding:2px 0 1px;
}
.profile-center-surface .profile-story-kicker {
    display:flex;
    align-items:center;
    min-width:0;
    gap:6px;
    margin-bottom:6px;
    overflow:hidden;
    color:#8a94a1;
    font-size:10.5px;
    font-weight:600;
    line-height:1.2;
    white-space:nowrap;
}
.profile-center-surface .profile-story-kicker > span:not(.profile-story-kicker-dot) {
    overflow:hidden;
    text-overflow:ellipsis;
}
.profile-center-surface .profile-story-kicker-dot {
    width:3px;
    height:3px;
    flex:0 0 3px;
    border-radius:50%;
    background:#c4cbd3;
}
.profile-center-surface .profile-story-title {
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    color:#111827;
    font-size:15px;
    font-weight:650;
    line-height:1.28;
    letter-spacing:-.015em;
    text-decoration:none;
}
.profile-center-surface .profile-story-title:hover {
    color:#1d9bf0;
}
.profile-center-surface .profile-story-meta {
    margin:6px 0 0;
    color:#8d96a3;
    font-size:11.5px;
    font-weight:400;
    line-height:1.3;
}
.profile-center-surface .profile-story-open {
    display:inline-flex;
    align-items:center;
    gap:4px;
    width:max-content;
    max-width:100%;
    margin-top:auto;
    padding-top:10px;
    color:#1d9bf0;
    font-size:11.5px;
    font-weight:600;
    line-height:1;
    text-decoration:none;
}
.profile-center-surface .profile-story-open svg {
    width:13px;
    height:13px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:transform .14s ease;
}
.profile-center-surface .profile-story-open:hover svg { transform:translateX(2px); }
.profile-center-surface .profile-story-more-note {
    padding:15px 2px 0;
    color:#929ba8;
    font-size:12px;
    line-height:1.4;
    text-align:center;
}
html.dark .profile-center-surface .profile-story-card {
    border-color:rgba(255,255,255,.10);
    background:rgba(255,255,255,.035);
    box-shadow:none;
}
html.dark .profile-center-surface .profile-story-card:hover {
    border-color:rgba(255,255,255,.16);
    background:rgba(255,255,255,.05);
}
html.dark .profile-center-surface .profile-story-cover {
    background:rgba(255,255,255,.07);
    color:#7f8996;
}
html.dark .profile-center-surface .profile-story-title { color:#f2f4f6; }
html.dark .profile-center-surface .profile-story-title:hover { color:#5ab3f5; }
html.dark .profile-center-surface .profile-story-kicker,
html.dark .profile-center-surface .profile-story-meta,
html.dark .profile-center-surface .profile-story-more-note { color:#8993a0; }
html.dark .profile-center-surface .profile-story-kicker-dot { background:#626c78; }

@media (max-width:640px) {
    .profile-center-surface .profile-story-tab { padding:0 0 14px; }
    .profile-center-surface .profile-story-grid { grid-template-columns:1fr; gap:9px; }
    .profile-center-surface .profile-story-card {
        grid-template-columns:68px minmax(0, 1fr);
        gap:12px;
        padding:11px;
        border-radius:16px;
    }
    .profile-center-surface .profile-story-cover-link,
    .profile-center-surface .profile-story-cover { width:68px; }
    .profile-center-surface .profile-story-cover { height:102px; border-radius:11px; }
}

/* ---------- profile.php satir 1567 ---------- */

.lib-pagewarn { display:flex; align-items:center; gap:9px; margin:0 16px 4px; padding:10px 13px; border-radius:12px; background:rgba(217,119,6,.10); color:#92610e; font-size:12.5px; line-height:1.35; }
.lib-pagewarn svg { flex-shrink:0; opacity:.9; }
.lib-pagewarn strong { font-weight:750; }
html.dark .lib-pagewarn { background:rgba(245,158,11,.10); color:#f5b942; }

/* ---------- profile.php satir 1628 ---------- */

.lib-add { display:inline-flex; align-items:center; gap:6px; padding:7px 15px; border-radius:99px; background:#0f1419; color:#fff; font-size:13px; font-weight:600; border:none; cursor:pointer; }
html.dark .lib-add { background:#e7e9ea; color:#0f1419; }
.lib-modal { position:fixed; inset:0; z-index:9998; display:none; align-items:flex-end; justify-content:center; }
@media(min-width:640px){ .lib-modal { align-items:center; } }
.lib-modal.show { display:flex; }
.lib-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(2px); }
.lib-card2 { position:relative; background:#fff; width:100%; max-width:480px; max-height:80vh; border-radius:24px 24px 0 0; display:flex; flex-direction:column; overflow:hidden; }
@media(min-width:640px){ .lib-card2 { border-radius:24px; max-height:72vh; } }
html.dark .lib-card2 { background:rgba(255,255,255,.045); }
.lib-mhead { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid #f0f1f3; }
html.dark .lib-mhead { border-bottom-color:rgba(255,255,255,.07); }
.lib-mhead p { font-size:16px; font-weight:800; }
.lib-mclose { width:32px; height:32px; border-radius:50%; border:none; background:rgba(0,0,0,.05); cursor:pointer; font-size:14px; }
html.dark .lib-mclose { background:rgba(255,255,255,.08); color:#fff; }
.lib-sbox { padding:14px 18px 8px; }
.lib-sbox input { width:100%; padding:11px 14px; border-radius:12px; border:1px solid #e5e7eb; background:#f9fafb; font-size:14px; outline:none; }
html.dark .lib-sbox input { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); color:#fff; }
.lib-res { overflow-y:auto; padding:4px 10px 16px; }
.lib-row { display:flex; gap:12px; padding:10px; border-radius:12px; }
.lib-row img { width:44px; height:66px; object-fit:cover; border-radius:4px; flex-shrink:0; background:#e5e7eb; }
.lib-row .meta { flex:1; min-width:0; }
.lib-row .t { font-size:13px; font-weight:700; line-height:1.3; }
.lib-row .a { font-size:11px; color:#9ca3af; margin-top:1px; }
.lib-stbtns { display:flex; gap:5px; margin-top:8px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
.lib-stbtns::-webkit-scrollbar { display:none; }
.lib-stbtn { font-size:11px; font-weight:300; padding:4px 9px; border-radius:99px; border:1px solid #e5e7eb; background:none; cursor:pointer; color:inherit; white-space:nowrap; flex-shrink:0; transition:background-color .12s, color .12s, border-color .12s; }
.lib-stbtn:hover { background:#0f1419; color:#fff; border-color:#0f1419; }html.dark .lib-stbtn { border-color:rgba(255,255,255,.15); }
html.dark .lib-stbtn:hover { background:#e7e9ea; color:#0f1419; }
.lib-cov-wrap {
    position:relative;
    isolation:isolate;
    overflow:visible;
}
.lib-cov-wrap > a:first-child {
    display:block;
    overflow:hidden;
    border-radius:10px;
}
.lib-info {
    display:block;
    min-width:0;
    padding:0 3px;
    color:inherit;
    text-decoration:none;
}
.lib-dots {
    position:absolute;
    top:8px;
    right:8px;
    z-index:20;
    width:32px;
    height:32px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.58);
    border-radius:50%;
    background:rgba(15,20,25,.82);
    color:#fff;
    box-shadow:0 5px 14px rgba(0,0,0,.24);
    cursor:pointer;
    opacity:1;
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
    transition:background-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.lib-dots::before {
    content:"";
    position:absolute;
    inset:-6px;
    border-radius:50%;
}
.lib-dots svg {
    position:relative;
    z-index:1;
    width:15px;
    height:15px;
}
.lib-dots:hover {
    background:#0f1419;
    transform:translateY(-1px);
    box-shadow:0 7px 17px rgba(0,0,0,.28);
}
.lib-dots:focus-visible {
    outline:2px solid rgba(15,20,25,.32);
    outline-offset:3px;
}
html.dark .lib-dots:focus-visible { outline-color:rgba(255,255,255,.36); }
.lib-menu { position:absolute; top:48px; right:8px; min-width:185px; background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 8px 28px rgba(0,0,0,.16); z-index:80; overflow:hidden; display:none; }
html.dark .lib-menu { background:#1a1d24; border-color:rgba(255,255,255,.1); }
.lib-menu.open { display:block; }
.lib-mi { display:block; width:100%; text-align:left; padding:9px 13px; font-size:12px; font-weight:500; background:none; border:none; cursor:pointer; color:inherit; font-family:inherit; white-space:nowrap; }
.lib-mi:hover { background:rgba(0,0,0,.05); } html.dark .lib-mi:hover { background:rgba(255,255,255,.06); }
.lib-mi.danger { color:#ef4444; }
.lib-msep { height:1px; background:#e5e7eb; } html.dark .lib-msep { background:rgba(255,255,255,.08); }

/* ---------- profile.php satir 1819 ---------- */

.lib-stbtn-year { background:#0f1419 !important; color:#fff !important; border-color:#0f1419 !important; }
html.dark .lib-stbtn-year { background:#e7e9ea !important; color:#0f1419 !important; border-color:#e7e9ea !important; }
.lib-confirm { position:fixed; left:0; right:0; bottom:0; z-index:10000; display:flex; justify-content:center; padding:16px; transform:translateY(120%); transition:transform .25s cubic-bezier(.4,0,.2,1); pointer-events:none; }
.lib-confirm.show { transform:translateY(0); }
.lib-confirm-card { pointer-events:auto; display:flex; align-items:center; gap:14px; background:#0f1419; color:#fff; padding:12px 14px 12px 18px; border-radius:16px; box-shadow:0 12px 40px rgba(0,0,0,.35); max-width:440px; width:100%; }
html.dark .lib-confirm-card { background:#1f242e; border:0; }
.lib-confirm-text { font-size:13.5px; font-weight:600; flex:1; line-height:1.4; }
.lib-confirm-btns { display:flex; gap:8px; flex-shrink:0; }
.lib-cbtn { font-size:13px; font-weight:700; padding:7px 14px; border-radius:99px; border:none; cursor:pointer; }
.lib-cbtn-cancel { background:rgba(255,255,255,.12); color:#fff; }
.lib-cbtn-cancel:hover { background:rgba(255,255,255,.2); }
.lib-cbtn-del { background:#ef4444; color:#fff; }
.lib-cbtn-del:hover { background:#dc2626; }

/* ---------- profile.php satir 1834 ---------- */

.lib-year-sheet { position:fixed; left:0; right:0; bottom:0; z-index:10000; display:flex; justify-content:center; padding:16px; transform:translateY(120%); transition:transform .25s cubic-bezier(.4,0,.2,1); pointer-events:none; }
.lib-year-sheet.show { transform:translateY(0); }
.lib-year-card { pointer-events:auto; background:#fff; border-radius:18px; box-shadow:0 12px 40px rgba(0,0,0,.35); max-width:440px; width:100%; padding:18px; }
html.dark .lib-year-card { background:#1f242e; border:0; }
.lib-year-q { font-size:14px; font-weight:700; margin-bottom:3px; }
.lib-year-sub { font-size:12px; color:#9ca3af; margin-bottom:14px; }
.lib-year-btns { display:flex; gap:10px; }
.lib-year-btn { flex:1; padding:11px; border-radius:99px; font-size:13px; font-weight:700; border:none; cursor:pointer; }
.lib-year-btn-yes { background:#0f1419; color:#fff; }
html.dark .lib-year-btn-yes { background:#e7e9ea; color:#0f1419; }
.lib-year-btn-no { background:#f3f4f6; color:#374151; }
html.dark .lib-year-btn-no { background:rgba(255,255,255,.08); color:#e5e7eb; }
.lib-year-x { display:block; width:100%; margin-top:8px; padding:7px; background:none; border:none; color:#9ca3af; font-size:12px; font-weight:600; cursor:pointer; }

/* ---------- profile.php satir 1939 ---------- */

.page-input { width:100%; padding:11px 14px; border-radius:12px; border:1px solid #e5e7eb; background:#f7f8fa; font-size:15px; font-family:inherit; outline:none; }
html.dark .page-input { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.1); color:#fff; }
.page-input:focus { border-color:#0f1419; }
html.dark .page-input:focus { border-color:#e7e9ea; }
.page-err { font-size:12px; color:#ef4444; margin:6px 0 0; min-height:14px; }
.lib-pgflag { position:absolute; left:5px; bottom:5px; padding:2px 7px; border-radius:99px; font-size:9.5px; font-weight:700; line-height:1.4; z-index:5; pointer-events:none; }
.lib-pgflag.miss { background:rgba(0,0,0,.62); color:#fff; }
.lib-pgflag.pend { background:rgba(217,119,6,.94); color:#fff; }

/* ---------- profile.php satir 2027 ---------- */

/* Takipçi / Takip edilenler — kompakt 4 sütunlu profil kartları. */
.flw-tabs {
    display:flex;
    margin-top:22px;
    padding:0 10px;
    border-bottom:1px solid #e5e7eb;
    position:relative;
    z-index:21;
}
html.dark .flw-tabs { background:transparent; border-color:rgba(255,255,255,.08); }
.flw-tab { flex:1; text-align:center; padding:13px 4px; font-size:14px; font-weight:600; color:#6b7480; text-decoration:none; border-bottom:2px solid transparent; }
.flw-tab.active { color:#0f1419; border-bottom-color:#0f1419; }
html.dark .flw-tab { color:#8d96a3; }
html.dark .flw-tab.active { color:#f4f5f6; border-bottom-color:#f4f5f6; }

.flw-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    padding:12px 14px 16px;
}
.flw-card {
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    min-width:0;
    border:0;                                   /* kenarlık kalktı */
    border-radius:18px;
    background:#fff;
    box-shadow:0 2px 10px rgba(15,23,42,.07);   /* ayırma işini gölge yapıyor */
}
/* Koyu temada gölge görünmez; ayırmayı zemin farkı yapıyor. */
html.dark .flw-card { background:rgba(255,255,255,.05); border:0; box-shadow:none; }

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

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

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

.flw-level {
    margin:5px 0 0;
    font-size:11.5px;
    line-height:1.2;
    font-weight:600;
    color:#667085;
}
html.dark .flw-level { color:#c5ccd5; }
.flw-meta {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    flex-wrap:nowrap;
    margin-top:3px;
    font-size:11px;
    line-height:1.2;
    color:#8b95a7;
    white-space:nowrap;
}
.flw-meta-sep { opacity:.75; }
.flw-bio { display:none !important; }

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

@media (max-width:900px){ .flw-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:640px){ .flw-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:420px){ .flw-grid { grid-template-columns:1fr; } }

/* ---------- profile.php satir 2204 ---------- */

/* Gönderiler / Beğeniler / Kaydedilenler: ana sayfadaki post kartı düzeni.
   Bu CSS kartlardan ÖNCE yüklenir; açılışta geçici çerçeve/yeniden biçimlenme oluşmaz. */
.profile-center-surface #feedContainer.profile-post-feed {
    margin-top:12px !important;
    /* Yan boşluk --feed-x'ten geliyor (post_card.css :root, 10px).
       Aynı sayı dört yerde elle yazılıydı; tek kaldıraca bağlandı. */
    padding:0 var(--feed-x, 10px) 24px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.profile-center-surface #feedContainer.profile-post-feed > article.post-card {
    margin:0 !important;
    border:0 !important;
    border-radius:24px !important;
    padding:12px 16px 10px !important;
    transition:none !important;
}

.profile-center-surface #feedContainer.profile-post-feed > article.post-card > .flex {
    gap:10px !important;
}

/* İSİM SATIRI → GÖNDERİ METNİ ARASI — anasayfayla birebir.
   ÖNCEKİ HÂLİ koşulsuz 2px veriyordu. Anasayfa ise post_card.css:453'te
   DÜZ GÖNDERİDE (okur düzeyi yok) -8px veriyor:
     .post-card > .flex > .flex-1 > .flex.items-start:not(:has(.post-reader-level))
   Bu kural daha özel olduğu için o -8px'i eziyordu; düz gönderide 10px
   fazla boşluk çıkıyordu. Aynı :not(:has()) ayrımı buraya da kondu.
   ANASAYFA KARTINA DOKUNULMADI — selector profil akışına bağlı. */
.profile-center-surface #feedContainer.profile-post-feed > article.post-card > .flex > .flex-1 > .flex.items-start {
    padding-top:0 !important;
    margin-bottom:0 !important;
}
.profile-center-surface #feedContainer.profile-post-feed > article.post-card > .flex > .flex-1 > .flex.items-start:not(:has(.post-reader-level)) {
    margin-bottom:-8px !important;
}

.profile-center-surface #feedContainer.profile-post-feed .post-main-text {
    margin-bottom:6px !important;
}

.profile-center-surface #feedContainer.profile-post-feed .quote-optional-text {
    margin-bottom:10px !important;
}

.profile-center-surface #feedContainer.profile-post-feed .quote-block-bg {
    margin-bottom:22px !important;
}

.profile-center-surface #feedContainer.profile-post-feed .post-actions {
    margin-top:10px !important;
}

/* Hikâye önizlemeleri de ana akıştaki kart içi düzene eşitlenir. */
.profile-center-surface #feedContainer.profile-post-feed .post-story-preview {
    grid-template-columns:82px minmax(0, 1fr);
    gap:12px;
    margin:8px 0 2px;
    padding:2px 0 0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
}
.profile-center-surface #feedContainer.profile-post-feed .post-story-preview:hover,
html.dark .profile-center-surface #feedContainer.profile-post-feed .post-story-preview,
html.dark .profile-center-surface #feedContainer.profile-post-feed .post-story-preview:hover {
    border-color:transparent;
    background:transparent;
    box-shadow:none;
}
.profile-center-surface #feedContainer.profile-post-feed .post-story-cover {
    width:82px;
    border-radius:12px;
}
.profile-center-surface #feedContainer.profile-post-feed .post-story-body { padding:0 2px 0 0; }
.profile-center-surface #feedContainer.profile-post-feed .post-story-eyebrow { margin-bottom:4px; }
.profile-center-surface #feedContainer.profile-post-feed .post-story-description { margin-top:5px; }
.profile-center-surface #feedContainer.profile-post-feed .post-story-meta { margin-top:6px; }
.profile-center-surface #feedContainer.profile-post-feed .post-story-action { padding-top:7px; }

@media (max-width:540px) {
    .profile-center-surface #feedContainer.profile-post-feed .post-story-preview {
        grid-template-columns:72px minmax(0,1fr);
        gap:10px;
        padding:2px 0 0;
    }
    .profile-center-surface #feedContainer.profile-post-feed .post-story-cover { width:72px; }
}

/* ---------- profile.php satir 2477 ---------- */

/* Profil aksiyon ikonları — mevcut davranış korunur */
/* PROFİL — BİLDİRİM ZİLİ */
.profile-center-surface .bell-plain {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    flex:0 0 32px;
    padding:0;

    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;

    color:#0f1419;
    cursor:pointer;

    transform:scale(1);
    transform-origin:center;
    transition:
        color .16s ease,
        transform .16s ease;
}

.profile-center-surface .bell-plain svg {
    display:block;
    width:19px;
    height:19px;
    pointer-events:none;
}

/* Hover: yalnızca renk değişimi ve büyüme */
.profile-center-surface .bell-plain:hover {
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;

    color:#1d9bf0;
    transform:scale(1.12);
}

/* Bildirimler açıkken */
.profile-center-surface .bell-plain.is-on {
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;

    color:#1d9bf0;
}

/* Dark mode */
html.dark .profile-center-surface .bell-plain {
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;

    color:#e7e9ea;
}

html.dark .profile-center-surface .bell-plain:hover {
    background:transparent !important;
    color:#1d9bf0;
    transform:scale(1.12);
}

html.dark .profile-center-surface .bell-plain.is-on {
    background:transparent !important;
    color:#1d9bf0;
}

/* PROFİL — ENGELLE İKONU */
.profile-center-surface #blockBtn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    flex:0 0 32px;
    padding:0;

    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;

    color:#0f1419;
    cursor:pointer;

    transition:color .16s ease;
}

.profile-center-surface #blockBtn svg {
    display:block;
    width:19px;
    height:19px;

    fill:none;
    stroke:currentColor;

    transform:scale(1);
    transform-origin:center;
    transition:transform .16s ease;

    pointer-events:none;
}

/* Hover: yalnızca kırmızı renk ve ikon büyümesi */
.profile-center-surface #blockBtn:hover {
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;

    color:#ef4444;
}

.profile-center-surface #blockBtn:hover svg {
    transform:scale(1.12);
}

/* Dark mode: normal durumda görünür */
html.dark .profile-center-surface #blockBtn {
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;

    color:#e7e9ea;
}

html.dark .profile-center-surface #blockBtn:hover {
    background:transparent !important;
    color:#f87171;
}


/* “Profili Düzenle” bağlantısının tek ve bağımsız buton görünümü. */
.profile-center-surface .profile-edit-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 14px !important;
    border:1px solid #e4e7eb !important;
    border-radius:9999px;
    font-family:var(--inbook-profile-ui-font) !important;
    font-size:12px !important;
    font-weight:600 !important;
    line-height:1.25 !important;
    color:#111827 !important;
    background:#ffffff !important;
    box-shadow:0 1px 2px rgba(15,23,42,.04) !important;
    text-decoration:none;
    transition:color .15s ease, background-color .15s ease, border-color .15s ease;
}

/* “Profili Düzenle” butonunun hover durumu. */
.profile-center-surface .profile-edit-button:hover {
    color:#111827 !important;
    background:#f8fafc !important;
    border-color:#d8dde4 !important;
}
html.dark .profile-center-surface .profile-edit-button {
    color:#111827 !important;
    background:#ffffff !important;
    border-color:#ffffff !important;
}
html.dark .profile-center-surface .profile-edit-button:hover {
    background:#f0f2f4 !important;
}

/* Profil adı, kullanıcı adı, biyografi ve özetlerin ana içerik alanı. */
.profile-center-surface .profile-overview {
    position: relative;
    background: transparent;
    padding-top: 5rem !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
    padding-bottom: 0 !important;
}

html.dark .profile-center-surface .profile-overview {
    background: transparent;
}

/* Adı, kullanıcı adını ve butonu profil fotoğrafının yanına taşır. */
.profile-center-surface .profile-identity-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    /* Profil fotoğrafının sağında yer açar */
    padding-left: 7rem;

    /* Satırı yukarı, profil fotoğrafının hizasına taşır */
    margin-top: -3.25rem;

    margin-bottom: 18px !important;
}

/* Uzun ekran adının butonu itmesini engeller */
.profile-center-surface .profile-identity-row > div:first-child {
    min-width: 0;
}

/* Profili Düzenle butonunu sağda sabit tutar */
.profile-center-surface .profile-edit-button {
    flex: 0 0 auto;
    margin-left: auto;
}

/* Profilde görünen ad ve premium işaretinin ortak satırı. */
.profile-center-surface .profile-display-name {
    display:flex;
    align-items:center;
    gap:6px;
    margin:0;
    font-family:var(--inbook-profile-ui-font) !important;
    font-size:18px !important;
    font-weight:700 !important;
    line-height:1.2 !important;
    color:#111827 !important;
}

/* Dark mode: profil görünen adı. */
html.dark .profile-center-surface .profile-display-name {
    color:#ffffff !important;
}

/* Profil adının yanındaki premium yıldızı. */
.profile-center-surface .profile-premium-mark {
    font-family:var(--inbook-profile-ui-font) !important;
    font-size:14px !important;
    font-weight:700 !important;
    color:#f59e0b !important;
}

/* Profilin @kullanıcıadı satırı. */
.profile-center-surface .profile-username {
    margin:0;
    font-family:var(--inbook-profile-ui-font) !important;
    font-size:13.5px !important;
    font-weight:400 !important;
    line-height:1.4 !important;
    color:#6b7280 !important;
}

/* Dark mode: @kullanıcıadı satırı. */
html.dark .profile-center-surface .profile-username {
    color:#9ca3af !important;
}

/* Profil biyografisinin boşluğu, yazı ölçüsü ve okunabilirliği. */
.profile-center-surface .profile-bio-text {
    margin-bottom:14px !important;
    font-family:var(--inbook-profile-ui-font) !important;
    font-size:15px !important;
    font-weight:400 !important;
    line-height:1.55 !important;
    color:#414955 !important;
}

/* Dark mode: profil biyografisi. */
html.dark .profile-center-surface .profile-bio-text {
    color:#d5d9df !important;
}

/* Gönderi, takipçi ve takip değerlerinin ortak yatay şeridi. */
.profile-center-surface .profile-stats {
    display:flex;
    align-items:baseline;
    gap:38px !important;
    padding:26px 0 19px !important;
}

/* İstatistikteki sayı ve etiketi yan yana hizalar; bağlantı alt çizgisini kapatır. */
.profile-center-surface .profile-stat {
    display:inline-flex;
    align-items:baseline;
    gap:7px;
    color:inherit;
    text-decoration:none !important;
}

/* Gönderi, takipçi ve takip rakamlarının ortak görünümü. */
.profile-center-surface .profile-stat-number {
    font-family:var(--inbook-profile-ui-font) !important;
    font-size:17px !important;
    font-weight:650 !important;
    line-height:1 !important;
    letter-spacing:-.02em;
    color:#0f1419;
}

/* İstatistik rakamlarının yanındaki “Gönderi / Takipçi / Takip” etiketleri. */
.profile-center-surface .profile-stat-label {
    font-family:var(--inbook-profile-ui-font) !important;
    font-size:12px !important;
    font-weight:400 !important;
    line-height:1.3 !important;
    color:#656d7a !important;   /* #98a0ab beyazda 2.6:1 idi — OKUNURLUK_20261026 */
}

/* Dark mode: profil istatistik rakamları ve etiketleri. */
html.dark .profile-center-surface .profile-stat-number {
    color:#f4f5f6;
}
html.dark .profile-center-surface .profile-stat-label {
    color:#8e98a6 !important;
}
@media (max-width: 560px) {
    .profile-center-surface .profile-overview {
        padding-left:16px !important;
        padding-right:16px !important;
    }
    .profile-center-surface .profile-bio-text {
        margin-bottom:24px !important;
        font-size:12.5px !important;
    }
    /* Mobilde istatistikleri ekran genişliğine dengeli yayar. */
    .profile-center-surface .profile-stats {
        justify-content:space-between;
        gap:18px !important;
        padding:26px 0 25px !important;
    }
    .profile-center-surface .profile-stat {
        gap:5px;
    }
    .profile-center-surface .profile-stat-number {
        font-size:16px !important;
    }
    .profile-center-surface .profile-stat-label {
        font-size:11.5px !important;
    }
}

/* Gönderi akışının ortak dış geometrisi.
   post-card görseli artık burada ezilmez; Gönderiler/Beğeniler/Kaydedilenler
   ana sayfadaki includes/post_card.php görünümünü doğrudan kullanır. */
.profile-center-surface #feedContainer {
    /* Sekme barı ile içerik arasındaki boşluk — bütün sekmeler için tek kaynak. */
    margin-top:20px !important;
    /* Yan boşluk --feed-x'ten geliyor (post_card.css :root, 10px).
       Aynı sayı dört yerde elle yazılıydı; tek kaldıraca bağlandı. */
    padding:0 var(--feed-x, 10px) 24px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

/* Değerlendirme kartlarının mevcut profil görünümü korunur. */
/* KENARLIK YOK. Kart beyaz (#ffffff), yüzey #f6f7f9 — ayırma zemin
   farkıyla. ".rev-card"ın alt çizgisi de bu kuralla birlikte kalkıyor:
   16px köşeli bir kutunun içinde alt çizgi zaten yanlıştı. */
.profile-center-surface #feedContainer > .rev-card {
    margin:0 !important;
    border:0 !important;
    border-radius:16px !important;
    box-shadow:none !important;
    overflow:hidden;
    transition:box-shadow .18s ease, transform .18s ease, background-color .18s ease;
}
/* background ZORUNLU: satır ~1164'teki ".rev-card:hover" zemini #f9fafb
   yapıyor ve yüzeyin zemini #f6f7f9 — kenarlık varken fark etmiyordu,
   kenarlık kalkınca kart hover'da yüzeye karışıp KAYBOLUR. Kart beyaz
   kalıyor, kalkma işini yalnızca gölge yapıyor.
   "background-color" bilerek: "background" kısaltması yazılırsa
   .weekly-winner'ın altın zemin geçişini de siler. */
.profile-center-surface #feedContainer > .rev-card:hover {
    background-color:#ffffff !important;
    box-shadow:0 8px 24px rgba(17,24,39,.075) !important;
    transform:translateY(-1px) !important;
}
/* KOYU TEMADA ZORUNLU: .rev-card'ın zemini koyuda "transparent".
   Kenarlık da kalktığına göre kartın hiçbir sınırı kalmıyordu —
   siyah üstünde siyah. Çok hafif bir açılma kartı var ediyor. */
html.dark .profile-center-surface #feedContainer > .rev-card {
    border:0 !important;
    background-color:rgba(255,255,255,.04) !important;
}
html.dark .profile-center-surface #feedContainer > .rev-card:hover {
    box-shadow:0 10px 28px rgba(0,0,0,.22) !important;
    background-color:rgba(255,255,255,.065) !important;
}

@media (max-width:640px) {
    .profile-center-surface .profile-hero-card {
        margin-bottom:-18px;
        border-radius:0 0 20px 20px;
    }
    .profile-center-surface #feedContainer { padding-left:10px; padding-right:10px; }
}

/* ---------- profile.php satir 2896 ---------- */

/* ==================================================
   inBook KÜNYESİ
   --------------------------------------------------
   Burası kullanıcının kendini gösterdiği alan; sayfadaki
   en iddialı kutu olmalı ama en gürültülüsü değil.

   ESKİ HALİNİN ÜÇ TEMEL SORUNU

   1) KUTU İÇİNDE KUTU. Her bölüm kendi gri panelindeydi
      (.sid-sec — 15/16px dolgu, kendi radius'u, kendi zemini).
      Kartın 12px dolgusuyla birlikte içerik kenardan 28px
      içeride başlıyordu ve dört panel arasında 10px daha
      boşluk vardı. Yüksekliğin çoğu buradan geliyordu.
      Paneller gitti; bölümler saç teli çizgiyle ayrılan
      şeritler oldu. Kartın kendisi zaten kap.

   2) ÜÇ AYRI MAVİ SİNYAL. Üstte 4px sert gradyan şerit +
      başlıkta mavi gradyan zemin + mavi kenarlık. Aynı anda
      üçü bağırınca hiçbiri prim yapmıyor. Tek bir yumuşak
      üst ışık kaldı.

   3) KAPSÜLLER BOŞ KONUŞUYORDU. "Hedef / Seviye / Profil"
      yazıyordu — yani içindeki bölümlerin adları. Kapsüller
      çizgiye de değiyordu, çünkü tetiğin alt dolgusu 2px iken
      kapsüller translateY(7px) ile aşağı itilmişti. Artık
      gerçek sayı taşıyorlar ve kendi satırlarında duruyorlar.
================================================== */
.profile-reader-sidebar {
    position: relative;
    margin-top: 18px;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid #e6ebf1 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .04) !important;
    transition: border-color .18s ease, box-shadow .18s ease;
}
/* Sert 4px şerit yerine başlığın arkasına düşen yumuşak ışık.
   Dikkat çekiyor ama kartın üstüne şeker bandı yapıştırmıyor. */
.profile-reader-sidebar::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 96px;
    z-index: 0;
    background: linear-gradient(180deg, rgba(29, 155, 240, .10), rgba(29, 155, 240, 0));
    pointer-events: none;
}
.profile-reader-sidebar.is-collapsed:hover {
    border-color: #d6e4f2 !important;
    box-shadow: 0 14px 36px rgba(29, 155, 240, .10), 0 1px 2px rgba(15, 23, 42, .04) !important;
}

/* Açık künye artık büyüyen tek bir "yüzen kart" gibi davranmıyor.
   Dış gölge kapatılır; tabloyu kendi border/separator hiyerarşisi taşır. */
.profile-reader-sidebar:not(.is-collapsed) {
    border-color: #d6e4f2 !important;
    box-shadow: none !important;
}

html.dark .profile-reader-sidebar {
    border-color: rgba(255, 255, 255, .09) !important;
    background: rgba(255, 255, 255, .045) !important;   /* #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) !important;
}
html.dark .profile-reader-sidebar::before {
    background: linear-gradient(180deg, rgba(83, 184, 255, .12), rgba(83, 184, 255, 0));
}
html.dark .profile-reader-sidebar.is-collapsed:hover {
    border-color: rgba(83, 184, 255, .26) !important;
}
html.dark .profile-reader-sidebar:not(.is-collapsed) {
    border-color: rgba(83, 184, 255, .18) !important;
    box-shadow: none !important;
}


/* ---------- BAŞLIK ---------- */
.profile-sidebar-trigger {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 14px 14px 12px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font-family: var(--inbook-profile-ui-font);
}
.profile-sidebar-trigger:focus-visible {
    outline: 2px solid rgba(29, 155, 240, .55);
    outline-offset: -2px;
    border-radius: 18px;
}
.profile-sidebar-trigger-main {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 11px;
}
.profile-sidebar-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;

    background: transparent;
    border-radius: 12px;
    box-shadow: none;
}

.profile-sidebar-mark img {
    display: block;

    width: 50px;
    height: 50px;

    object-fit: contain;

    filter: none;
}
.profile-sidebar-copy { display: flex; flex-direction: column; min-width: 0; }
.profile-reader-sidebar .profile-sidebar-title {
    margin: 0 !important;
    padding: 0 !important;
    color: #111827;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -.02em !important;
}
.profile-sidebar-description {
    margin-top: 2px;
    color: #8a94a2;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.3;
}
.profile-reader-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid #e4e9ef;
    border-radius: 9999px;
    background: #fff;
    color: #4b5563;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    transition: background .18s ease, border-color .18s ease;
}
.profile-sidebar-trigger:hover .profile-reader-sidebar-toggle { background: #f2f5f9; border-color: #cfd9e4; }
.profile-reader-sidebar-toggle svg {
    width: 16px;
    height: 16px;
    transform: rotate(180deg);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}

/* ---------- KAPALI HALDEKİ ÖZET ----------
   Kendi satırında, tetiğin dolgusunun içinde. Eskiden
   translateY(7px) ile aşağı itilip kenarlığa değiyordu. */
.profile-sidebar-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: 11px;
    min-width: 0;
}
.profile-sidebar-preview-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border: 1px solid #e4eaf1;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .9);
    color: #5b6672;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}
.profile-sidebar-preview-tag strong { color: #111827; font-weight: 700; }
/* Seviye rozeti tek vurgu: kapsüllerden yalnız bu renkli. */
.profile-sidebar-preview-tag.is-level {
    border-color: rgba(29, 155, 240, .28);
    background: rgba(29, 155, 240, .09);
    color: #0f6fb4;
    font-weight: 650;
}
.profile-sidebar-state-label {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 9px;
    color: #6b7684;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    text-align: right;
}
.profile-sidebar-state-label::before { content: "Detayları aç"; }
.profile-reader-sidebar:not(.is-collapsed) .profile-sidebar-state-label::before { content: "Detayları kapat"; }

html.dark .profile-reader-sidebar .profile-sidebar-title { color: #f4f5f6; }
html.dark .profile-sidebar-description { color: #8b95a2; }
html.dark .profile-reader-sidebar-toggle {
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .06);
    color: #e5e7eb;
    box-shadow: none;
}
html.dark .profile-sidebar-trigger:hover .profile-reader-sidebar-toggle {
    background: rgba(255, 255, 255, .11);
    border-color: rgba(255, 255, 255, .2);
}
html.dark .profile-sidebar-preview-tag {
    border-color: rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .04);
    color: #9aa4b1;
}
html.dark .profile-sidebar-preview-tag strong { color: #f3f4f6; }
html.dark .profile-sidebar-preview-tag.is-level {
    border-color: rgba(83, 184, 255, .3);
    background: rgba(83, 184, 255, .12);
    color: #7cc6ff;
}
html.dark .profile-sidebar-state-label { color: #98a2af; }


/* ---------- GÖVDE ---------- */
.profile-reader-sidebar-body {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    border-top: 1px solid #edf1f5;
    transition: grid-template-rows .32s cubic-bezier(.2, .8, .2, 1), opacity .22s ease, border-color .22s ease;
}
.profile-reader-sidebar-body-inner {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
}
.profile-reader-sidebar.is-collapsed .profile-reader-sidebar-body {
    grid-template-rows: 0fr;
    opacity: 0;
    border-top-color: transparent;
    pointer-events: none;
}
.profile-reader-sidebar.is-collapsed .profile-reader-sidebar-toggle svg { transform: rotate(0deg); }
html.dark .profile-reader-sidebar-body { border-top-color: rgba(255, 255, 255, .08); }
html.dark .profile-reader-sidebar.is-collapsed .profile-reader-sidebar-body { border-top-color: transparent; }
html.dark .profile-sidebar-mark {
    background: linear-gradient(145deg, #262c38, #0b0f16);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .1);
}

/* Bölümler artık panel değil, saç teli çizgiyle ayrılan şerit. */
.sid-sec {
    margin: 0;
    padding: 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.sid-sec + .sid-sec,
.kunye-stats + .sid-sec { border-top: 1px solid #f0f3f6; }
html.dark .sid-sec:hover { background: transparent; }
html.dark .sid-sec + .sid-sec,
html.dark .kunye-stats + .sid-sec { border-top-color: rgba(255, 255, 255, .07); }
.sid-sec:hover { background: transparent; }

/* Bölüm başlığı: küçük, büyük harf, sessiz. İçeriğin önüne geçmez. */
.sid-cap {
    margin: 0 0 11px !important;
    font-family: var(--inbook-profile-ui-font) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .09em !important;
    text-transform: uppercase !important;
    color: #9aa3ae !important;
}
html.dark .sid-cap { color: #7c8592 !important; }


/* ---------- HEDEF + SEVİYE: TEK ŞERİT, İKİ SÜTUN ----------
   auto-fit sayesinde ikisinden biri yoksa tek sütun olur. */
/* İki sütunun DÖRT satırı da (başlık / değer / çubuk / alt yazı)
   birbiriyle hizalı olmak zorunda. Sorun şuydu: seviye satırı
   "Düzenli Okur → Tutkulu Okur" iki satıra sarıyor, hedef satırı
   "6/20  %30" tek satır kalıyordu; dolayısıyla çubuklar ve alt
   yazılar farklı yüksekliklerde duruyordu.

   Çözüm subgrid: iki sütun aynı satır ızgarasını paylaşıyor, her
   satırın yüksekliğini ikisinden UZUN olanı belirliyor. Desteklemeyen
   tarayıcıda aşağıdaki min-height devreye giriyor — o da yaklaşık
   hizalıyor, hiç hizasız kalmıyor. */
.kunye-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 0;
    border-bottom: 1px solid #f0f3f6;
}

/* Yedek: subgrid yoksa değer satırına taban yükseklik. */
.profile-reading-goal--sidebar .goal-metric,
.rp-seviye-ladder { min-height: 40px; }

@supports (grid-template-rows: subgrid) {
    .kunye-stats { grid-template-rows: auto auto auto auto; }
    .kunye-stat {
        display: grid;
        grid-row: span 4;
        grid-template-rows: subgrid;
        row-gap: 0;
    }
    .profile-reading-goal--sidebar .goal-metric,
    .rp-seviye-ladder { min-height: 0; align-self: end; }
    /* Hedef henüz yoksa tek buton dört satırı birden kaplasın. */
    .profile-reading-goal--sidebar .goal-empty { grid-row: 1 / -1; }
}
html.dark .kunye-stats { border-bottom-color: rgba(255, 255, 255, .07); }

.kunye-stat {
    min-width: 0;
    margin: 0 !important;
    padding: 13px 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.kunye-stat + .kunye-stat { border-left: 1px solid #f0f3f6 !important; }
html.dark .kunye-stat + .kunye-stat { border-left-color: rgba(255, 255, 255, .07) !important; }

.kunye-stat-cap {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 7px;
    color: #9aa3ae;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .09em;
    text-transform: uppercase;
}
html.dark .kunye-stat-cap { color: #7c8592; }

.kunye-stat-foot {
    margin: 7px 0 0;
    color: #8a93a0;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.3;
}
html.dark .kunye-stat-foot { color: #838d9a; }

/* Hedef */
.profile-reading-goal--sidebar .goal-metric {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0 0 8px !important;
}
.profile-reading-goal--sidebar .goal-count strong {
    color: #111827;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.045em;
}
html.dark .profile-reading-goal--sidebar .goal-count strong { color: #f4f5f6; }
.profile-reading-goal--sidebar .goal-count span { color: #98a1ad; font-size: 12.5px; font-weight: 600; }
.profile-reading-goal--sidebar .goal-percent {
    margin-left: auto;
    color: #1d9bf0;
    font-size: 11.5px;
    font-weight: 700;
}
html.dark .profile-reading-goal--sidebar .goal-percent { color: #6cc0ff; }
.profile-reading-goal--sidebar .goal-bar {
    height: 5px;
    border-radius: 99px;
    background: #eceff3;
    overflow: hidden;
    box-shadow: none;
}
html.dark .profile-reading-goal--sidebar .goal-bar { background: rgba(255, 255, 255, .09); }
.profile-reading-goal--sidebar .goal-bar-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1d9bf0, #53b8ff);
    box-shadow: none;
}
.profile-reading-goal .goal-bar::after { display: none !important; }
.profile-reading-goal--sidebar .goal-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: #9aa3ae;
    opacity: 0;
    cursor: pointer;
    transition: opacity .15s ease, color .15s ease;
}
.profile-reading-goal--sidebar .goal-edit svg { width: 13px; height: 13px; }
.profile-reader-sidebar:hover .goal-edit,
.profile-reading-goal--sidebar .goal-edit:focus-visible { opacity: 1; }
.profile-reading-goal--sidebar .goal-edit:hover { color: #1d9bf0; }

/* Hedef yoksa: davet */
.goal-empty { width: 100%; }

/* Seviye — merdiven okuması */
.rp-seviye-ladder {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0 0 9px;
    line-height: 1.2;
}
.rp-seviye-now {
    color: #111827;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.02em;
}
html.dark .rp-seviye-now { color: #f4f5f6; }
.rp-seviye-arrow { color: #c3cad3; font-size: 12px; }
.rp-seviye-next-name { color: #98a1ad; font-size: 11.5px; font-weight: 600; }
html.dark .rp-seviye-arrow { color: #59626f; }
html.dark .rp-seviye-next-name { color: #838d9a; }
.rp-seviye-bar { height: 5px; border-radius: 99px; background: #eceff3; overflow: hidden; }
.rp-seviye-bar-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f0a020, #ffc757); }
html.dark .rp-seviye-bar { background: rgba(255, 255, 255, .09); }
html.dark .rp-seviye-bar-fill { background: linear-gradient(90deg, #d8a94a, #f3cd83); }


/* ---------- OKUMA PROFİLİ ---------- */
.sid-profile-groups { display: flex; flex-direction: column; gap: 14px; }
.sid-profile-group { min-width: 0; }
.sid-profile-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    color: #4b5563;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: .015em;
}
.sid-profile-label svg {
    width: 12px; height: 12px; flex: 0 0 12px;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}
html.dark .sid-profile-label { color: #b8c0ca; }

.sid-profile-empty {
    margin: 0;
    color: #a2abb6;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
}
html.dark .sid-profile-empty { color: #7c8592; }

/* Türler: sayı parantez içinde değil, adın yanında sessiz rakam. */
.sid-genres {
    display: flex;
    flex-wrap: wrap;
    column-gap: 14px;
    row-gap: 5px;
}
.sid-genre {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #374151;
    text-decoration: none;
    transition: color .15s ease;
}
.sid-genre:hover {
    color: #1d9bf0;
    background: transparent;
    transform: none;
}
html.dark .sid-genre {
    border: 0;
    background: transparent;
    color: #d5dbe2;
}
html.dark .sid-genre:hover {
    color: #72c7ff;
    background: transparent;
}
.sid-genre-name {
    font-size: 11.5px !important;
    font-weight: 500 !important;
    color: inherit !important;
}
.sid-genre-cnt {
    font-size: 10px !important;
    font-weight: 400 !important;
    color: #a7b0bb !important;
}
.sid-genre-cnt::before { content: none; }
.sid-genre-cnt::after { content: none; }

/* Yazarlar */
.sid-auths {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 14px;
    row-gap: 6px;
}
.sid-auth {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: auto;
    margin: 0;
    padding: 0;
    border-radius: 0;
    color: inherit;
    text-decoration: none;
    transition: color .15s ease;
}
.sid-auth:hover {
    background: transparent;
    color: #1d9bf0;
    transform: none;
}
html.dark .sid-auth:hover {
    background: transparent;
    color: #72c7ff;
}
.sid-auth-av {
    display: flex;
    flex: 0 0 13px;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #9aa3ae;
}
.sid-auth-av svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}
html.dark .sid-auth-av {
    background: transparent;
    color: #7f8995;
}
.sid-auth-name {
    overflow: hidden;
    color: #374151;
    font-size: 11.5px;
    font-weight: 450;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sid-auth:hover .sid-auth-name { color: inherit; }
html.dark .sid-auth-name { color: #d5dbe2; }

/* Başarılar — değerlendirme rozetleri artık Okuma Kimliği'nin altına
   karışmıyor; adı görünen ayrı bir başarı satırı olarak okunuyor. */
.sid-achievements-sec {
    border-top: 1px solid #edf0f3;
}
html.dark .sid-achievements-sec {
    border-top-color: rgba(255,255,255,.07);
}
.sid-achievements {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.sid-achievement {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 6px 8px;
    border-radius: 11px;
    background: #f7f9fb;
    color: #27313c;
}
html.dark .sid-achievement {
    background: rgba(255,255,255,.045);
    color: #e2e7ed;
}
.sid-badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: var(--badge-color);
    color: #fff;
    box-shadow: 0 3px 9px color-mix(in srgb, var(--badge-color) 28%, transparent);
}
.sid-badge svg { width: 14px; height: 14px; }
.sid-achievement-name {
    overflow: hidden;
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Kitaplar — kapak tek başına bırakılmıyor; kitap adı ve alıntı sayısı
   aynı satırda görünür. Mevcut bağlantı ve veri kaynağı değişmedi. */
.sid-books {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.sid-book {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    margin: 0 -6px;
    padding: 5px 6px;
    border-radius: 9px;
    color: inherit;
    text-decoration: none;
    transition: background-color .15s ease;
}
.sid-book:hover {
    background: #f3f6f9;
    transform: none;
}
html.dark .sid-book:hover { background: rgba(255,255,255,.05); }
.sid-book .cv {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 41px;
    object-fit: cover;
    border: 0;
    border-radius: 4px;
    background: #e9ecf0;
    color: #9ca3af;
    box-shadow: 0 2px 6px rgba(15,23,42,.13);
}
html.dark .sid-book .cv {
    background: rgba(255,255,255,.08);
    color: #8f98a4;
}
.sid-book-meta {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}
.sid-book-title {
    overflow: hidden;
    color: #2b333e;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html.dark .sid-book-title { color: #dfe4ea; }
.sid-book-count {
    color: #9aa3ae;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.2;
}
.sid-book-arrow {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    fill: none;
    stroke: #c2c9d1;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.sid-book:hover .sid-book-arrow { stroke: #1d9bf0; }
html.dark .sid-book-arrow { stroke: #66717d; }

/* ---------- KULÜPLER ----------
   Sıra numarası ("01", "02") kaldırıldı: hiçbir sıralama anlamı
   yoktu ve listeyi tabloya çeviriyordu. Rol sağda soluk gri yazı
   değil, adın yanında rozet. */
.sid-clubs { display: flex; flex-direction: column; gap: 2px; }

.sid-club {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto 14px;
    align-items: center;
    gap: 9px;
    margin: 0 -6px;
    padding: 6px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    transition: background-color .15s ease;
}
.sid-club:hover { background: #f3f6f9; transform: none; }
html.dark .sid-club:hover { background: rgba(255, 255, 255, .05); }

.sid-club-ic {
    display: flex;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 9px;
    object-fit: cover;
    background: #eef1f5;
    color: #6b7280;
}
html.dark .sid-club-ic { background: rgba(255, 255, 255, .07); color: #c8d0da; }

.sid-club-name {
    min-width: 0;
    overflow: hidden;
    color: #1f2733;
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}
html.dark .sid-club-name { color: #edf0f3; }

.sid-club-role {
    padding: 2.5px 8px;
    border-radius: 9999px;
    background: #eef1f5;
    color: #6b7684;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .01em;
    white-space: nowrap;
}
/* Kurucu olmak bir statü — tek renkli rol bu. */
.sid-club-role.is-owner { background: rgba(240, 160, 32, .13); color: #a56a06; }
.sid-club-role.is-mod   { background: rgba(29, 155, 240, .11); color: #0f6fb4; }
html.dark .sid-club-role { background: rgba(255, 255, 255, .07); color: #98a2af; }
html.dark .sid-club-role.is-owner { background: rgba(240, 160, 32, .16); color: #f0c065; }
html.dark .sid-club-role.is-mod   { background: rgba(83, 184, 255, .14); color: #7cc6ff; }

.sid-club-go {
    width: 14px;
    height: 14px;
    color: #c3cad3;
    opacity: 0;
    transform: translateX(-3px);
    transition: opacity .15s ease, transform .15s ease;
}
.sid-club:hover .sid-club-go { opacity: 1; transform: translateX(0); }

.sid-club-more {
    display: inline-flex;
    margin: 8px 0 0;
    color: #6b7684;
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none;
}
.sid-club-more:hover { color: #1d9bf0; }
.sid-clubs-panel { padding: 12px 10px; }
.sid-clubs-panel .sid-cap { margin: 0 8px 6px; }

/* ORTAK KİTAPLAR — KOMPAKT */
.profile-common-books-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "title books"
        "text  books";
    align-items: center;
    column-gap: 12px;

    padding: 11px 12px !important;
    margin-bottom: 14px !important;
    border-radius: 16px !important;
}

.profile-common-books-sidebar .profile-sidebar-title {
    grid-area: title;
    margin: 0 0 2px !important;

    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

.profile-common-books-sidebar .profile-common-books-text {
    grid-area: text;
    margin: 0 !important;

    font-size: 12px !important;
    line-height: 1.35 !important;
}

.cmn-books {
    grid-area: books;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
}

.cmn-book {
    display: block;
    flex: 0 0 auto;
}

.cmn-book .cv {
    width: 36px;
    height: 54px;
    object-fit: cover;

    border-radius: 5px;
    background: #e5e7eb;
    color: #9ca3af;
    box-shadow: 0 2px 7px rgba(0, 0, 0, .13);

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

.cmn-book:hover .cv {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, .18);
}

.profile-common-books-sidebar {
    background:
        linear-gradient(135deg, #e1f5e8 0%, #92e4e0 100%) !important;
 
}
html.dark .profile-common-books-sidebar {
    background:
        linear-gradient(
            135deg,
            rgba(34, 197, 94, .10),
            rgba(16, 185, 129, .055)
        ) !important;

    border-color: rgba(74, 222, 128, .16) !important;
}
.profile-common-books-sidebar .profile-sidebar-title {
    color: #153f28 !important;
}

html.dark .profile-common-books-sidebar .profile-sidebar-title {
    color: #d8f3e1 !important;
}
.profile-common-books-sidebar .profile-common-books-text {
    color: #668072 !important;
}

html.dark .profile-common-books-sidebar .profile-common-books-text {
    color: #91aa9b !important;
}

/* ---------- profile.php satir 3668 ---------- */

    /* Panel "Seviye" bölümü — sıradaki seviye + ince çubuk. */
    .rp-seviye-level { margin:4px 0 8px; }
    .rp-seviye-badge {
        display:inline-flex;
        align-items:center;
        gap:4px;
        min-height:20px;
        padding:2px 7px;
        border:1px solid #fde7a7;
        border-radius:18px !important;
        background:#fffaf0;
        color:#b45309;
        font-size:11.5px;
        font-weight:550;
        line-height:1;
        letter-spacing:0;
        white-space:nowrap;
    }
    .rp-seviye-badge svg {
        width:12px;
        height:12px;
        flex:0 0 12px;
        fill:none;
        stroke:#f59e0b;
        stroke-width:1.8;
        stroke-linecap:round;
        stroke-linejoin:round;
    }
    /* İnce ilerleme çubuğu — zemin. */
    .rp-seviye-bar { height: 5px; border-radius: 99px; background: #eef0f2; overflow: hidden; }
    /* Dolan kısım (amber). */
    .rp-seviye-bar-fill { height: 100%; border-radius: inherit; background: #ff9500; }
    /* "Tutkulu Okur'a X sayfa kaldı" METNİ. */
    .rp-seviye-next { margin: 8px 0 0; font-size: 12px; color: #8d96a3; }
    .rp-seviye-next strong { color: #0f1419; font-weight: 500; }   /* sonraki seviye adı + rakam */
    /* Dark mode. */
    html.dark .rp-seviye-badge {
        border-color:rgba(245,158,11,.28);
        background:rgba(245,158,11,.09);
        color:#fbbf24;
    }
    html.dark .rp-seviye-badge svg { stroke:#fbbf24; }
    html.dark .rp-seviye-bar { background: rgba(255,255,255,.09); }
    html.dark .rp-seviye-bar-fill { background: #d8a94a; }
    html.dark .rp-seviye-next { color: #929ba8; }
    html.dark .rp-seviye-next strong { color: #f4f5f6; }

/* ---------- profile.php satir 3936 ---------- */

.goal-modal { position:fixed; inset:0; z-index:10001; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.5); }
.goal-modal.show { display:flex; }
.goal-modal-card { background:#fff; border-radius:20px; padding:24px; max-width:360px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,.3); }
html.dark .goal-modal-card { background:#1a1d24; }
.goal-modal-title { font-size:17px; font-weight:800; margin-bottom:4px; }
.goal-modal-sub { font-size:13px; color:#9ca3af; margin-bottom:18px; }
.goal-input-row { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.goal-input-row input { flex:1; padding:12px 16px; border-radius:9999px; border:2px solid #e5e7eb; font-size:16px; font-weight:700; outline:none; background:transparent; text-align:center; }
html.dark .goal-input-row input { border-color:rgba(255,255,255,.15); color:#fff; }
.goal-input-row input:focus { border-color:#1d9bf0; }
.goal-input-suffix { font-size:14px; color:#9ca3af; font-weight:600; }
.goal-modal-actions { display:flex; gap:10px; }
.goal-btn { flex:1; padding:11px; border-radius:9999px; font-size:14px; font-weight:700; border:none; cursor:pointer; }
.goal-btn-save { background:#0f1419; color:#fff; }
.goal-btn-save:hover { background:#272c30; }   /* mordu */
html.dark .goal-btn-save:hover { background:#d7dbdc; }
.goal-btn-cancel { background:#f3f4f6; color:#374151; }
html.dark .goal-btn-save { background:#e7e9ea; color:#0f1419; }
.goal-btn-del { width:100%; margin-top:10px; padding:9px; border-radius:9999px; font-size:12.5px; font-weight:700; border:none; background:none; color:#ef4444; cursor:pointer; }

/* ---------- profile.php satir 4004 ---------- */

.cmn-books { display:flex; flex-wrap:wrap; gap:9px; }
.cmn-book .cv { width:46px; height:69px; object-fit:cover; border-radius:5px; box-shadow:0 3px 10px rgba(0,0,0,.16); background:#e5e7eb; display:flex; align-items:center; justify-content:center; color:#9ca3af; transition:transform .15s; }
.cmn-book:hover .cv { transform:translateY(-2px); }


/* =========================================================
   MOBİL YOĞUNLUK — FAZ 2
   Buraya yazılıyor çünkü profile.css mobile.css'ten SONRA
   yükleniyor; mobile.css'e yazılan kural bu dosyanın
   !important'larını yenemez.
   --m-* değişkenleri mobile.css'te tanımlı, miras alınıyor.
   ========================================================= */
@media (max-width: 640px) {

    /* --- KAPAK: 208px ekranın dörtte birini yiyordu --- */
    .profile-center-surface .profile-cover-media { height: 8rem; }

    /* --- AVATAR ÜÇLÜSÜ — BU DÖRT DEĞER BİRBİRİNE BAĞLI ---
       avatar 72px, yarısı (36px) kapağın altına sarkıyor:
         wrap bottom      = -2.25rem (36px)
         overview üst pay = 36px sarkma + 12px nefes = 48px
         identity sol pay = 72px avatar + 12px boşluk = 84px
       Birini değiştirirsen diğer üçünü de değiştir. */
    .profile-center-surface .profile-avatar-image { width: 4.5rem; height: 4.5rem; border-width: 3px; }
    .profile-center-surface .profile-avatar-wrap  { left: 12px; bottom: -2.25rem; }
    .profile-center-surface .profile-overview {
        padding-top: 48px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    .profile-center-surface .profile-identity-row {
        padding-left: 84px;
        margin-top: -2.5rem;
        margin-bottom: 12px !important;
    }

    /* --- METİN --- */
    .profile-center-surface .profile-display-name { font-size: 16.5px !important; }
    .profile-center-surface .profile-username     { font-size: 13px !important; }
    .profile-center-surface .profile-bio-text     { margin-bottom: 12px !important; font-size: 13.5px !important; }

    /* --- SAYAÇ ŞERİDİ: 53px dikey dolgu → 30px --- */
    .profile-center-surface .profile-stats       { gap: 20px !important; padding: 14px 0 16px !important; }
    .profile-center-surface .profile-stat-number { font-size: 15.5px !important; }
    .profile-center-surface .profile-stat-label  { font-size: 11.5px !important; }

    /* --- SEKMELER: uzun başlıkları sıkıştırmadan yatay kaydırılabilir tut. --- */
    .profile-center-surface .profile-tab-label {
        flex:0 0 auto;
        min-width:0;
        padding:13px 2px 11px;
        font-size:13px;
    }

    /* --- AKIŞ: faz 1'in ortak ölçüleri --- */
    .profile-center-surface #feedContainer,
    .profile-center-surface #feedContainer.profile-post-feed {
        margin-top: 14px !important;
        gap: var(--m-card-gap, 8px);
        padding: 0 var(--m-gutter, 6px) 16px;
    }
    .profile-center-surface #feedContainer.profile-post-feed > article.post-card {
        padding: var(--m-card-pad-y, 10px) var(--m-card-pad-x, 12px) !important;
        border-radius: var(--m-card-radius, 14px) !important;
    }
    .profile-center-surface #feedContainer > .rev-card {
        border-radius: var(--m-card-radius, 14px) !important;
    }

    /* --- KİTAPLIK --- */
    .lib-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 16px 10px; padding: 12px; }
    .lib-bar  { padding: 12px 12px 4px; gap: 10px; }
}

/* =============================================================
   PROFİL KONTROLLERİ — üç nokta menüsü + içerik bildirimleri
   ============================================================= */
.profile-center-surface .profile-action-cluster {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:5px;
    margin-left:auto;
    min-width:0;
}

.profile-center-surface .profile-notify-wrap,
.profile-center-surface .profile-more-wrap {
    position:relative;
    display:inline-flex;
    flex:0 0 auto;
}

.profile-center-surface .profile-notify-wrap.is-hidden {
    display:none;
}

.profile-center-surface .profile-more-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    flex:0 0 32px;
    padding:0;
    border:0;
    background:transparent;
    color:#0f1419;
    cursor:pointer;
    border-radius:9999px;
    transition:color .15s ease, transform .15s ease, background-color .15s ease;
}
.profile-center-surface .profile-more-button svg {
    width:20px;
    height:20px;
    pointer-events:none;
}
.profile-center-surface .profile-more-button:hover,
.profile-center-surface .profile-more-button[aria-expanded="true"] {
    color:#1d9bf0;
    background:rgba(29,155,240,.07);
}
.profile-center-surface .profile-more-button:hover { transform:scale(1.06); }
html.dark .profile-center-surface .profile-more-button { color:#e7e9ea; }
html.dark .profile-center-surface .profile-more-button:hover,
html.dark .profile-center-surface .profile-more-button[aria-expanded="true"] {
    color:#60a5fa;
    background:rgba(96,165,250,.09);
}

.profile-center-surface .profile-popover {
    position:absolute;
    top:calc(100% + 7px);
    right:0;
    z-index:120;
    min-width:232px;
    padding:6px;
    border:1px solid #e6e9ee;
    border-radius:16px;
    background:rgba(255,255,255,.98);
    box-shadow:0 16px 38px rgba(15,23,42,.14), 0 2px 8px rgba(15,23,42,.06);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}
.profile-center-surface .profile-popover[hidden] { display:none !important; }
html.dark .profile-center-surface .profile-popover {
    border-color:rgba(255,255,255,.10);
    background:rgba(20,24,31,.98);
    box-shadow:0 18px 42px rgba(0,0,0,.48);
}

.profile-center-surface .profile-more-popover { width:238px; }
.profile-center-surface .profile-notify-popover { width:276px; }

.profile-center-surface .profile-popover-title {
    padding:7px 9px 6px;
    color:#6b7280;
    font-size:13px;
    font-weight:600;
    line-height:1.3;
    letter-spacing:.005em;
}
html.dark .profile-center-surface .profile-popover-title { color:#9ca3af; }

.profile-center-surface .profile-menu-row,
.profile-center-surface .profile-notify-option {
    width:100%;
    min-height:38px;
    display:flex;
    align-items:center;
    border:0;
    border-radius:11px;
    background:transparent;
    color:#1f2937;
    font-family:var(--inbook-profile-ui-font);
    font-size:14px;
    font-weight:500;
    line-height:1.25;
    text-align:left;
    cursor:pointer;
    transition:background-color .14s ease, color .14s ease;
}
.profile-center-surface .profile-menu-row { gap:10px; padding:8px 10px; }
.profile-center-surface .profile-notify-option { justify-content:space-between; gap:14px; padding:8px 9px 8px 10px; }
.profile-center-surface .profile-menu-row:hover,
.profile-center-surface .profile-notify-option:hover { background:#f5f7f9; }
.profile-center-surface .profile-menu-row:disabled,
.profile-center-surface .profile-notify-option:disabled { opacity:.55; cursor:wait; }

.profile-center-surface .profile-menu-row svg {
    width:18px;
    height:18px;
    flex:0 0 18px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.75;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.profile-center-surface .profile-menu-row.is-danger { color:#dc2626; }
.profile-center-surface .profile-menu-row.is-danger-soft { color:#b91c1c; }
.profile-center-surface .profile-menu-row.is-danger:hover,
.profile-center-surface .profile-menu-row.is-danger-soft:hover { background:#fff3f3; }
.profile-center-surface .profile-menu-divider {
    height:1px;
    margin:5px 8px;
    background:#eceff3;
}

html.dark .profile-center-surface .profile-menu-row,
html.dark .profile-center-surface .profile-notify-option { color:#e5e7eb; }
html.dark .profile-center-surface .profile-menu-row:hover,
html.dark .profile-center-surface .profile-notify-option:hover { background:rgba(255,255,255,.06); }
html.dark .profile-center-surface .profile-menu-row.is-danger,
html.dark .profile-center-surface .profile-menu-row.is-danger-soft { color:#f87171; }
html.dark .profile-center-surface .profile-menu-row.is-danger:hover,
html.dark .profile-center-surface .profile-menu-row.is-danger-soft:hover { background:rgba(248,113,113,.08); }
html.dark .profile-center-surface .profile-menu-divider { background:rgba(255,255,255,.08); }

.profile-center-surface .profile-switch {
    position:relative;
    width:34px;
    height:20px;
    flex:0 0 34px;
    border-radius:9999px;
    background:#d8dde4;
    transition:background-color .16s ease;
}
.profile-center-surface .profile-switch > span {
    position:absolute;
    top:2px;
    left:2px;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 1px 3px rgba(15,23,42,.18);
    transition:transform .16s ease;
}
.profile-center-surface .profile-notify-option.is-on .profile-switch { background:#1d9bf0; }
.profile-center-surface .profile-notify-option.is-on .profile-switch > span { transform:translateX(14px); }
html.dark .profile-center-surface .profile-switch { background:#3b424d; }
html.dark .profile-center-surface .profile-notify-option.is-on .profile-switch { background:#1d9bf0; }

/* Zil artık yalnız menüyü açar; açık/kapalı ayrımı rengiyle okunur. */
.profile-center-surface .bell-plain {
    border-radius:9999px !important;
    transition:color .15s ease, transform .15s ease, background-color .15s ease !important;
}
.profile-center-surface .bell-plain:hover,
.profile-center-surface .bell-plain[aria-expanded="true"] {
    background:rgba(29,155,240,.07) !important;
}
html.dark .profile-center-surface .bell-plain:hover,
html.dark .profile-center-surface .bell-plain[aria-expanded="true"] {
    background:rgba(96,165,250,.09) !important;
}

.profile-center-surface :is(#actionBtn, .profile-action-button).profile-follow-btn.is-blocked {
    border-color:#f1b4b4 !important;
    color:#dc2626 !important;
    background:transparent !important;
}
html.dark .profile-center-surface :is(#actionBtn, .profile-action-button).profile-follow-btn.is-blocked {
    border-color:rgba(248,113,113,.4) !important;
    color:#f87171 !important;
    background:transparent !important;
}

/* Profil modalları açıldığında scrollbarı KALDIRMA.
   layout.php sabit sidebar konumlarını viewport genişliğine göre hesaplıyor;
   scrollbarı yok etmek bütün sayfada optik bir yatay sıçrama yaratabiliyor. */
html.profile-modal-open {
    overflow-x:hidden !important;
    overflow-y:scroll !important;
    scrollbar-gutter:stable !important;
}
.profile-sheet-backdrop {
    position:fixed;
    inset:0;
    z-index:1400;
    display:flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    width:100vw;
    height:100dvh;
    padding:18px;
    background:rgba(15,23,42,.30);
    backdrop-filter:blur(2px) saturate(.96);
    -webkit-backdrop-filter:blur(2px) saturate(.96);
    overscroll-behavior:contain;
}
.profile-sheet-backdrop[hidden] { display:none !important; }
.profile-sheet-card {
    width:min(430px, 100%);
    max-height:calc(100dvh - 36px);
    overflow:auto;
    box-sizing:border-box;
    border:0;                 /* 28px'lik gölge sınırı zaten çiziyor */
    border-radius:22px;
    background:#fff;
    box-shadow:0 28px 80px rgba(15,23,42,.22);
    padding:18px;
    color:#111827;
}
.profile-sheet-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:15px;
}
.profile-sheet-head h2 {
    margin:0 0 4px;
    font-family:var(--inbook-profile-ui-font);
    font-size:18px;
    font-weight:700;
    line-height:1.25;
    letter-spacing:-.015em;
}
.profile-sheet-head p {
    margin:0;
    color:#6b7280;
    font-family:var(--inbook-profile-ui-font);
    font-size:14px;
    font-weight:400;
    line-height:1.45;
}
.profile-sheet-close {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    flex:0 0 30px;
    border:0;
    border-radius:9999px;
    background:transparent;
    color:#6b7280;
    cursor:pointer;
}
.profile-sheet-close:hover { background:#f3f4f6; color:#111827; }
.profile-sheet-close svg {
    width:17px;
    height:17px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
}
.profile-report-input {
    display:block;
    width:100%;
    min-height:116px;
    box-sizing:border-box;
    resize:vertical;
    border:1px solid #dfe3e8;
    border-radius:14px;
    outline:none;
    background:#fbfcfd;
    color:#111827;
    padding:11px 12px;
    font-family:var(--inbook-profile-ui-font);
    font-size:14px;
    font-weight:400;
    line-height:1.5;
    transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.profile-report-input:focus {
    border-color:#aeb7c2;
    background:#fff;
    box-shadow:0 0 0 3px rgba(15,23,42,.035);
}
.profile-sheet-foot {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-top:13px;
}
.profile-report-note {
    color:#8a929d;
    font-family:var(--inbook-profile-ui-font);
    font-size:13px;
    line-height:1.35;
}
.profile-sheet-primary {
    min-height:33px;
    padding:6px 14px;
    border:0;
    border-radius:9999px;
    background:#0f1419;
    color:#fff;
    font-family:var(--inbook-profile-ui-font);
    font-size:13px;
    font-weight:650;
    line-height:1;
    cursor:pointer;
}
.profile-sheet-primary.is-danger { background:#dc2626; }
.profile-sheet-primary.is-danger:hover { background:#c81e1e; }
.profile-sheet-primary:disabled { opacity:.55; cursor:wait; }

.profile-about-list {
    overflow:hidden;
    border:1px solid #e7e9ed;
    border-radius:15px;
}
.profile-about-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    min-height:42px;
    padding:8px 12px;
    font-family:var(--inbook-profile-ui-font);
    font-size:14px;
    line-height:1.35;
}
.profile-about-row + .profile-about-row { border-top:1px solid #eceff3; }
.profile-about-row span { color:#6b7280; }
.profile-about-row strong { color:#111827; font-weight:600; text-align:right; }

html.dark .profile-sheet-card {
    border:0;
    background:#151920;
    color:#f3f4f6;
    box-shadow:0 30px 90px rgba(0,0,0,.58);
}
html.dark .profile-sheet-head p,
html.dark .profile-report-note,
html.dark .profile-about-row span { color:#9ca3af; }
html.dark .profile-sheet-close { color:#aeb4bd; }
html.dark .profile-sheet-close:hover { background:rgba(255,255,255,.07); color:#fff; }
html.dark .profile-report-input {
    border-color:rgba(255,255,255,.10);
    background:#10141a;
    color:#f3f4f6;
}
html.dark .profile-report-input:focus {
    border-color:rgba(255,255,255,.22);
    background:#11161d;
    box-shadow:none;
}
html.dark .profile-about-list { border-color:rgba(255,255,255,.09); }
html.dark .profile-about-row + .profile-about-row { border-top-color:rgba(255,255,255,.08); }
html.dark .profile-about-row strong { color:#f3f4f6; }

@media (max-width:640px) {
    .profile-center-surface .profile-action-cluster { gap:2px; }
    .profile-center-surface .profile-popover {
        position:fixed;
        top:auto;
        right:12px;
        left:12px;
        bottom:calc(12px + env(safe-area-inset-bottom));
        width:auto;
        min-width:0;
        z-index:1350;
        border-radius:18px;
        padding:7px;
    }
    .profile-sheet-backdrop {
        align-items:flex-end;
        padding:0;
    }
    .profile-sheet-card {
        width:100%;
        border-radius:22px 22px 0 0;
        border-left:0;
        border-right:0;
        border-bottom:0;
        padding:18px 16px calc(18px + env(safe-area-inset-bottom));
    }
}

/* =========================================================
   KORUMALI HESAP
   ---------------------------------------------------------
   Profilin KİMLİĞİ açık kalıyor (ad, avatar, biyografi,
   sayılar), kapanan şey İÇERİK. Bu yüzden kilit ekranı
   sayfanın tamamını değil yalnızca akış alanını dolduruyor.
   ========================================================= */

/* Adın yanındaki kilit. Premium ✦ ile aynı satırda duruyor;
   ikisi de "bu hesap hakkında bir şey" söylüyor. */
.profile-lock-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 4px;
    vertical-align: -2px;
    color: #6b7280;
}
.profile-lock-mark svg { width: 15px; height: 15px; display: block; }
html.dark .profile-lock-mark { color: #9ca3af; }

/* Sayılar korumalıyken bağlantı değil düz metin. */
.profile-stat.is-locked { cursor: default; }
.profile-stat.is-locked:hover { text-decoration: none; opacity: 1; }

/* Kilit ekranı */
.profile-locked {
    margin: 12px 20px 24px;
    padding: 48px 28px;
    border: 1px solid #e6e9ed;
    border-radius: 22px;
    background: #fff;
    text-align: center;
}
html.dark .profile-locked {
    border-color: rgba(255, 255, 255, .09);
    background: rgba(255, 255, 255, .035);
}

.profile-locked-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #f1f4f8;
    color: #64748b;
}
.profile-locked-icon svg { width: 26px; height: 26px; }
html.dark .profile-locked-icon { background: rgba(255, 255, 255, .07); color: #9ca3af; }

.profile-locked-title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: #111827;
}
html.dark .profile-locked-title { color: #f3f4f6; }

.profile-locked-text {
    max-width: 420px;
    margin: 0 auto;
    font-size: 13.5px;
    line-height: 1.55;
    color: #6b7280;
}
html.dark .profile-locked-text { color: #9ca3af; }

/* İSTEK GÖNDERİLDİ düğmesi.
   "Takiptesin"den bilerek farklı: orada bir şey kazandın,
   burada bekliyorsun. Kesikli çerçeve bunu yazıyı okumadan
   da söylüyor. Hover kırmızı, çünkü tıklamak isteği geri
   çeker — layout.php'deki .follow-btn.is-requested ile aynı
   dil. */
.profile-follow-btn.is-requested {
    border-style: dashed;
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #64748b;
}
.profile-follow-btn.is-requested:hover {
    border-color: #f0b4b4;
    background: #fff;
    color: #dc2626;
}
html.dark .profile-follow-btn.is-requested {
    border-style: dashed;
    border-color: rgba(255, 255, 255, .22);
    background: transparent;
    color: #9ca3af;
}
html.dark .profile-follow-btn.is-requested:hover {
    border-color: #b91c1c;
    background: transparent;
    color: #f87171;
}

@media (max-width: 640px) {
    .profile-locked { margin: 10px 8px 20px; padding: 36px 18px; border-radius: 16px; }
    .profile-locked-icon { width: 48px; height: 48px; margin-bottom: 14px; }
    .profile-locked-icon svg { width: 22px; height: 22px; }
    .profile-locked-title { font-size: 15.5px; }
    .profile-locked-text { font-size: 13px; }
}


/* .profile-edit-button artık <button> ("Profili Düzenle" sayfa
   değiştirmiyor, modalı açıyor). Tarayıcının düğme varsayılanları
   sıfırlanmazsa bağlantı hâlinden farklı görünüyor. */
.profile-edit-button {
    font: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* Profil başlığındaki premium + kilit artık user_badges()'ten
   geliyor ve .post-premium-mark / .post-lock-mark kullanıyor
   (post_card.css layout tarafından her sayfada yükleniyor).

   GAP SIFIRLANDI. .profile-display-name bir flex kutu ve
   "gap: 6px" taşıyordu; rozet sarmalayıcısı ikinci flex çocuğu
   olunca o 6px, rozetin kendi .125em marjının ÜSTÜNE biniyordu —
   ad ile rozet arası kartlardakinin üç katı çıkıyordu. Başlıkta
   artık yalnızca iki çocuk var (ad + rozetler), boşluğu rozetin
   kendi marjı veriyor; kartla birebir aynı. */
.profile-center-surface .profile-display-name { gap: 0; }

.profile-display-name .profile-name-badges {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* ==========================================================================
   inBook — post_card.css'e EKLENECEK BLOK
   ==========================================================================
   Bu dosyayı OLDUĞU GİBİ post_card.css'inin EN SONUNA yapıştır.
   Hiçbir mevcut satırını silme, hiçbir yerini değiştirme.

   Bu blokların hepsi YENİ; senin dosyanda karşılığı yok, dolayısıyla
   çakışma da olmaz.
   ========================================================================== */

/* =========================================================
   19. ETİKET / BAHSETME BAĞLANTILARI — SİTE GENELİ
   =========================================================
   linkify() eskiden her #etiket ve @bahsetmenin üstüne satır içi
   bir style yazıyordu: color:#1D9BF0; font-weight:200; font-size:14px.

   Satır içi bicim !important dışında her CSS kuralını yener. Bu yüzden:
     • Gönderi kartında yukarıdaki 13. blok !important taşıdığı için
       etiket 500 kalınlıkta, metinle aynı puntoda, karanlık temada
       #60a5fa çıkıyordu — doğru görünüm.
     • Değerlendirme kartında (.review-card-content), hikâyede ve
       yorumda .post-card atası olmadığı için o kural EŞLEŞMİYOR;
       satır içi bicim kalıyordu → 200 kalınlık (belirgin şekilde daha
       ince), sabit 14px ve karanlık temada bile #1D9BF0.

   Sorun buydu. Bicim artık linkify()'dan alınıp buraya taşındı;
   dosya layout.php'de koşulsuz yüklendiği için kural HER SAYFADA
   geçerli. 13. blok !important'ıyla gönderi kartında hâlâ öne geçer —
   değerler birebir aynı olduğu için ana sayfa görünümü DEĞİŞMEZ. */
.content-link {
    font-family: inherit;
    font-size: inherit;
    font-weight: 500;
    color: #1D9BF0;
    text-decoration: none;
    cursor: pointer;
}

.content-link:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

html.dark .content-link {
    color: #60a5fa;
}


/* =========================================================
   20. ROZETLİ İSİM SATIRI — SİTE GENELİ
   =========================================================
   İKİ AYRI HATA, TEK KÖK:

   1) ROZET DARALIYORDU. .post-premium-mark ve .post-lock-mark
      inline-flex ve genişlikleri em cinsinden. Bir flex kutusunun
      içine girdiklerinde (lider tablosu satırı, takip önerileri,
      sol alttaki kendi kartın) flex-shrink varsayılan 1 olduğu için
      yer daralınca EZİLİYORLARDI — logo yatayda sıkışmış görünüyordu.
      Aşağıdaki flex:0 0 auto bunu kapatır: rozet asla daralmaz.

   2) UZUN ADDA ROZET KAYBOLUYORDU. .lb-name, .mdrawer-user-name ve
      Tailwind'in .truncate sınıfı overflow:hidden + text-overflow:
      ellipsis taşıyor. Rozet çıplak metnin ARDINA eklendiği için
      uzun adlarda üç noktadan sonraya düşüyor ve tamamen
      görünmez oluyordu. Kırpılması gereken şey ad, rozet değil.

      Çözüm: isim satırı flex kutusu (.name-line), adın kendisi ayrı
      bir kutuda (.name-trunc). Kırpma yalnız adın kutusunda. Rozet
      ve kilit hep tam görünür — ad daha erken üç noktaya iner.
      X'in davranışı da bu.

   Bu dosya layout.php'de KOŞULSUZ yükleniyor, üstelik sidebar.css'ten
   SONRA; yani kural her sayfada geçerli ve oradaki .lb-name tanımını
   ezer. */

.post-premium-mark,
.post-lock-mark {
    flex: 0 0 auto;
}

.name-line {
    display: flex;
    align-items: center;
    min-width: 0;
}

.name-trunc {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Flex kutusunda salt-boşluk metin düğümü çizilmez; lider tablosundaki
   "· sen" etiketinin önündeki boşluk kenar boşluğuyla veriliyor. */
.name-line .lb-me-tag { flex: 0 0 auto; margin-left: .28em; }


/* =========================================================
   21. SAĞ KENAR ÇUBUĞU — "EN ÇOK OKUYANLAR" SATIRI
   =========================================================
   Bu kurallar aslında sidebar.css'e ait. Oraya yazmadım çünkü bendeki
   sidebar.css kopyası 15 Ağustos tarihli; 18 günlük bir dosyayı
   yeniden yazmam senin o tarihten sonraki düzenlemelerini siler.
   post_card.css layout.php'de sidebar.css'ten SONRA yüklendiği için
   buradan ezmek güvenli. sidebar.css'i atarsan üçünü de oraya taşırım.

   1) "sayfa" BİRİMİ OKUNMUYORDU. .lb-unit 8.5px idi — isim 12.5px,
      @kullanıcı 11px iken birim onların çok altındaydı ve üstüne gri
      (#9ca3af). 10.5px, satırdaki en küçük yazı olmaya devam ediyor
      ama artık okunuyor.

      NOT: skor sayısının kendisi 11.5px. Birim 10.5'e çıkınca aradaki
      hiyerarşi 1px'e indi. Doğrusu skoru da 13px'e çıkarmak — sidebar'ın
      en önemli verisi o. Sen istemediğin için DOKUNMADIM.

   2) SKOR SATIRIN ORTASINA KAYIYORDU. .lb-row align-items:center;
      soldaki kutu iki satır (isim 14px + @kullanıcı 12.3px = 26.3px),
      skor 14px. Ortalanınca skor isimden ~6px aşağı düşüyor ve iki
      satırın arasında asılı kalıyordu. align-self:flex-start ile skor
      ismin tam karşısına oturuyor; avatar ve sıra numarası ortalı
      kalmaya devam ediyor (onlara dokunulmadı).

   3) AD ÇOK GEÇ KESİLİYORDU. Ad kutusunun %85'ini yiyip rozeti
      sınıra dayıyordu. %62 ile üç nokta daha erken geliyor, rozet ve
      kilit rahat nefes alıyor. Yüzde kullandım çünkü kenar çubuğu
      xl kırılımında w-80'den w-88'e genişliyor; sabit px orada dar
      kalırdı.

      KURAL .sidebar-compact-box'A BAĞLI — İLK HÂLİNDE DEĞİLDİ.
      .lb-name sınıfını degerlendirme.php'deki "Öne Çıkan Eleştirmenler"
      tablosu da kullanıyor; orada yazı 14px ve kutu daha dar, %62
      "Kağan Aslan" gibi KISA isimleri bile üç noktaya indiriyordu.
      Sınır artık yalnız okur tablosunda. Değerlendirme tablosunda ad
      hâlâ .name-trunc içinde: sığmazsa doğal olarak kısalır, rozet
      ve kilit yine korunur — sadece erken kesme yok. */

.lb-unit { font-size: 10.5px; }

.lb-score { align-self: flex-start; }

.sidebar-compact-box .lb-name .name-trunc { max-width: 62%; }


/* =========================================================
   22. DEĞERLENDİRME KARTI — SAĞ ÜST KUTUSU
   =========================================================
   review_card.php'de takip düğmesi ile üç nokta menüsü artık ortak bir
   kapsayıcıda. .review-card-header "justify-content:space-between"
   olduğu için düğme doğrudan üçüncü çocuk olsaydı ortaya savrulurdu.
   Ana sayfadaki kartın .flex.items-center.gap-1\.5.shrink-0 kutusunun
   birebir karşılığı; oradaki Tailwind sınıfları yerine gerçek CSS,
   çünkü senin app.css'in purge edilmiş bir derleme.

   Kural buraya yazıldı çünkü bendeki review_card.css kopyası 17 Ağustos
   tarihli — 16 günlük bir dosyayı yeniden yazmam senin sonraki
   düzenlemelerini siler. post_card.css layout.php'de review_card.css'ten
   SONRA yüklendiği için ezme güvenli. */
.review-card-head-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

/* Takip düğmesi eklenince üst satır daraldı. .review-card-head-left
   flex-wrap taşıyor (lakap kendi satırına insin diye) ve flex-wrap
   açıkken tarayıcı önce SARMAYI dener — shrink vermek çözmüyordu.
   Bu yüzden @kullanıcı + ayraç + tarih review_card.php'de tek kutuya
   alındı. Kutu daralabiliyor, içinde kısalan tek şey @kullanıcı adı;
   ayraç ve tarih asla bölünmüyor. Ada dokunulmadı — içinde rozet var,
   kesilmemeli. */
/* .review-card-meta-group BLOĞU BURADAN SİLİNDİ.
   Aynı blok üç dosyada birden duruyordu (burada, post_card.css ve
   review_card.css) ve üçü de aynı özgüllükteydi; hangisinin geçerli
   olduğunu sayfada en son yüklenen dosya belirliyordu. Buradaki ve
   post_card.css'teki kopyalar "gap: 6px" yazıyordu, review_card.css
   "3px". Sonuç: değerlendirme kartının künye satırı gönderi kartından
   6px daha açık çiziliyordu ve sebebi hiçbir dosyada görünmüyordu.
   Tek kaynak artık review_card.css (layout.php <head>'inde koşulsuz
   yükleniyor, yani her sayfada geçerli). */
/* ==========================================================================
   inBook — profile.css'e EKLENECEK BLOK
   ==========================================================================
   Bu dosyayı OLDUĞU GİBİ profile.css'inin EN SONUNA yapıştır.
   Mevcut hiçbir satırını silme, hiçbir yerini değiştirme.
   profile.php DEĞİŞMEDİ — dört maddenin hepsi CSS ile çözüldü.
   ========================================================================== */

/* =========================================================
   PROFİL BAŞLIĞI — SIKIŞTIRMA VE AD KESME
   ---------------------------------------------------------
   Bu blok dosyanın SONUNDA, dolayısıyla yukarıdaki aynı özgüllükteki
   kuralları ezer. Hiçbir mevcut satır silinmedi.
   ========================================================= */

/* --- 1) EKRAN ADI 15 KARAKTERDE KESİLİYOR ---
   Ad zaten kendi kutusunda (#pfDisplayName), rozetler ayrı bir
   sarmalayıcıda (.profile-name-badges) — yani kırpma yalnız ada
   uygulanıyor, rozet ve kilit hep tam görünüyor.

   Sınır "ch" cinsinden: 1ch = fontun "0" karakterinin genişliği.
   15ch, 18px'lik profil adında yaklaşık 15-17 karakter gösteriyor;
   punto değişirse sınır da kendiliğinden ölçekleniyor.
   Ayar tek yerden: --profile-name-max. */
.profile-center-surface { --profile-name-max: 15ch; }

.profile-center-surface .profile-display-name #pfDisplayName {
    min-width: 0;
    max-width: var(--profile-name-max);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Rozet kutusu daralmasın — ad kısalırken o ezilmemeli. */
.profile-center-surface .profile-name-badges {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

/* --- 2) AD + "PROFİLİ DÜZENLE" SATIRI 14px YUKARI ---
   Kapağın altı ile ad satırının üstü arası 28px'ti; ölçtüm.
   -3.25rem → -4.125rem, yani satır 14px yukarı çıkıyor ve boşluk
   14px'e iniyor.

   DUVAR AVATAR. Avatar kapaktan 4rem (64px) sarkıyor, alt kenarı
   sabit. Ad satırını daha fazla yukarı çekmek görünümü bozmaz ama
   ALTINDAKİ satırlar avatarın üstüne biner — asıl sınır orası. */
.profile-center-surface .profile-identity-row {
    margin-top: -4.125rem;

    /* --- 3) "TUTKULU OKUR" SATIRI YUKARI ---
       Bu 18px + aşağıdaki level-line'ın 2px üst marjı, avatarın altına
       24.5px boşluk bırakıyordu. İkisi birlikte 4px kısaldı; ad satırı
       zaten 14px yukarı gittiği için "Tutkulu Okur" toplam 20px
       yukarı geliyor ve avatarın 6.5px altında duruyor.
       Daha fazlası avatarın üstüne biner — denedim, ölçtüm. */
    margin-bottom: 16px !important;
}

.profile-level-line { margin-top: 0; }

/* --- 4) BİO İLE OKUMA BİLGİSİ ARASI DARALDI, TAKİP KORUNDU ---
   Arada 14px vardı. DİKKAT: .profile-bio-text'in alt marjı ile
   .profile-reading-summary-row'un üst marjı KOMŞU KARDEŞ MARJIDIR,
   çakışırlar — görünen boşluk max(ikisi), toplamı değil. O yüzden
   tek birini düşürmek işe yaramaz, ikisi de düşürüldü: max(6,4)=6px.

   TAKİP SATIRINA DOKUNULMADI. Oradaki boşluk .profile-stats'ın
   26px üst DOLGUSUNDAN geliyor (marj değil, çakışmıyor); summary'nin
   2px alt marjıyla birlikte 28px olarak kalıyor. */
.profile-center-surface .profile-bio-text { margin-bottom: 6px !important; }

.profile-center-surface .profile-reading-summary-row { margin-top: 4px; }

/* ==========================================================================
   inBook — profile.css: ÖNERİ SEBEP BLOĞU (DÜZELTİLMİŞ)
   ==========================================================================
   ÖNCE: profile.css'in sonundaki "PROFİL — ÖNERİ SATIRINDAKİ SEBEP"
   bloğunu KOMPLE SİL (bir önceki teslimatta verdiğim blok — seçicileri
   .profile-center-surface ile başlıyordu, o yüzden hiç çalışmadı).
   SONRA: bu dosyayı dosyanın sonuna yapıştır.

   "PROFİL BAŞLIĞI — SIKIŞTIRMA VE AD KESME" bloğuna DOKUNMA, o doğru.
   ========================================================================== */

/* =========================================================
   PROFİL — ÖNERİ SATIRINDAKİ SEBEP ("Ortak: Dune")
   ---------------------------------------------------------
   SEÇİCİDE .profile-center-surface YOK — BİLEREK.
   İlk yazdığımda öyleydi ve HİÇ UYGULANMADI: .profile-center-surface
   ORTA sütun, öneri kutusu ise layout_end()'e verilen SAĞ sütunda.
   Kural eşleşmeyince .suggest-reason display:flex almadı ve rozet SVG'si
   kendi doğal boyutuna büyüdü — kutuyu paramparça eden şey buydu.
   profile.css zaten yalnızca profil sayfasında yükleniyor
   ($GLOBALS['page_css']), o yüzden öneksiz sınıf adları çakışmaz.

   Ölçüler: "Sana Özel" akışındaki .post-feed-reason kalıbının kenar
   çubuğu sürümü. Orada rozet 16px / metin 12px; burada satır üç katlı
   (ad / @kullanıcı / sebep) ve kutu dar, o yüzden 14px / 11px.
   ========================================================= */
.suggest-reason {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    min-width: 0;
}

.suggest-reason-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    background: #fef3c7;
    color: #d97706;
}

/* SVG'ye ölçü VERİLMEZSE 100px+ çiziliyor: markup'ta width/height
   yok, yalnız viewBox var. Kutunun bozulmasının ikinci yarısı buydu. */
.suggest-reason-badge svg {
    width: 10px;
    height: 10px;
    display: block;
    flex: 0 0 auto;
}

.suggest-reason-text {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.25;
    color: #6b7280;
}

html.dark .suggest-reason-badge {
    background: rgba(217, 119, 6, .18);
    color: #fbbf24;
}
html.dark .suggest-reason-text { color: #9ca3af; }

/* Okuma Kimliği — yalnız bu alt bölümün hiyerarşisi. */
.sid-reading-identity .sid-profile-groups { gap: 15px; }
.sid-reading-identity .sid-profile-label {
    margin-bottom: 6px;
}

/* =============================================================================
   MOBİL DÜZELTMELER  —  dosyanın SONUNDA, bilerek.
   Yukarıdaki .profile-identity-row ve .profile-stats kuralları dört ayrı
   yerde tanımlı; araya girmek yerine sonda son sözü söylüyorum.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1) AD SATIRI KAPAĞA BİNİYORDU

   profile.css:3972'deki genel kural  margin-top:-4.125rem  diyor ve
   3152'deki MOBİL değeri (-2.5rem) eziyordu; medya sorgusunda değil,
   düz kural olduğu için sıra üstünlüğüyle kazanıyordu.

   Sonuç: telefonda ad satırı 66px yukarı fırlıyor, ekran adı, rozet ve
   "Profili Düzenle" düğmesi kapak görselinin üstüne biniyordu.

   Mobil değeri burada yeniden ilan ediyorum. Masaüstü (-4.125rem) aynen
   kalıyor — oraya dokunulmadı.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .profile-center-surface .profile-identity-row {
        margin-top: -2.5rem;
        margin-bottom: 12px !important;
    }
}

/* ---------------------------------------------------------------------------
   2) GÖNDERİ / TAKİP / TAKİPÇİ SATIRI

   profile.css:2081  justify-content:space-between  diyordu: üç sayı ekranın
   iki ucuna yapışıp ortada kocaman boşluk bırakıyordu. 3164'teki
   gap:20px o yüzden hiçbir şey yapmıyordu — space-between varken gap'in
   hükmü yok.

   Sola yaslı + sabit aralık. Üç sayı bir grup olarak okunuyor, göz
   soldan sağa tek seferde tarıyor. X'in yaptığı da bu.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .profile-center-surface .profile-stats {
        justify-content: flex-start !important;
        gap: 22px !important;
        flex-wrap: wrap;
    }
}

/* ---------------------------------------------------------------------------
   3) ÜST BARDAKİ İŞARETLER
   Kullanıcı adıyla rozet arasında standart 4px — profil başlığındakiyle aynı.
   --------------------------------------------------------------------------- */
.mobile-header-title {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}
.mobile-header-badges {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 4px;
    flex: 0 0 auto;
}
.mobile-header-badges img,
.mobile-header-badges svg {
    width: 15px;
    height: 15px;
    display: block;
}

/* ---------------------------------------------------------------------------
   4) KÜNYE SAYFASI (BOTTOM SHEET)

   Sağ sütun mobilde display:none; içindeki her şey (rozetler, kulüpler,
   takip önerileri, ortak kitaplar) kullanıcıya hiç ulaşmıyordu. Bu sayfa
   o içeriği tek dokunuşla getiriyor.

   Alttan açılıyor çünkü telefonda başparmak orada. Üstten açılan bir panel
   tek elle kapatılamaz.
   --------------------------------------------------------------------------- */
.profile-more-trigger {
    display: none;                       /* masaüstünde gerek yok, sütun zaten açık */
}

@media (max-width: 1023px) {
    /* DOLGULU KUTU KALDIRILDI.
       Kutunun 15px iç dolgusu metni diğer her şeyden 15px içeri itiyordu:
       "120 Gönderi" 14px'ten başlarken bu satır 29px'ten başlıyordu, göz
       kırık bir sol hat görüyordu.

       Artık kutu yok. Satır .profile-overview'un kendi 14px dolgusunu
       kullanıyor, yani ad, bio, istatistikler ve bu satır AYNI sol
       hizada. Üstteki ince çizgi okuma hedefinden ayırıyor. */
    .profile-more-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        /* üstte hedefle 14px, altta istatistiklerle 18px nefes —
           "dip dibe" olmasın diye alt boşluk bilerek daha geniş */
        margin: 14px 0 18px;
        padding: 13px 0 0;
        border: 0;
        border-top: 1px solid rgba(127,127,127,.15);
        border-radius: 0;
        background: none;
        color: #3f4854;
        font-family: inherit;
        font-size: 13.5px;
        font-weight: 500;
        text-align: left;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .profile-more-trigger svg { width: 16px; height: 16px; flex: 0 0 auto; opacity: .5; }
    .profile-more-trigger:active { opacity: .6; }
    html.dark .profile-more-trigger { color: #cbd2db; border-top-color: rgba(255,255,255,.12); }
}

.pf-sheet-scrim {
    position: fixed;
    inset: 0;
    z-index: 118;
    background: rgba(0,0,0,.45);
}
.pf-sheet-scrim[hidden] { display: none; }

.pf-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 119;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    border-radius: 20px 20px 0 0;
    background: #fff;
    box-shadow: 0 -16px 44px rgba(15,23,42,.22);
    transform: translateY(100%);
    transition: transform .26s cubic-bezier(.22,.7,.2,1);
    /* iOS ana ekran çubuğu */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
html.dark .pf-sheet { background: #0f1117; box-shadow: 0 -16px 44px rgba(0,0,0,.65); }
html.pf-sheet-open .pf-sheet { transform: translateY(0); }
html.pf-sheet-open { overflow: hidden; }

.pf-sheet-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0 6px;
    flex: 0 0 auto;
}
.pf-sheet-grab {
    width: 38px; height: 4px;
    border-radius: 999px;
    background: rgba(15,23,42,.18);
}
html.dark .pf-sheet-grab { background: rgba(255,255,255,.22); }

.pf-sheet-close {
    position: absolute;
    right: 10px; top: 6px;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: .55;
}
.pf-sheet-close svg { width: 17px; height: 17px; }

.pf-sheet-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 14px 18px;
}
/* Sağ sütunun kutuları burada kenardan kenara dursun. */
.pf-sheet-body .sidebar-box { margin-left: 0; margin-right: 0; }

@media (min-width: 1024px) {
    .pf-sheet, .pf-sheet-scrim { display: none; }
}

/* =============================================================================
   OKUMA HEDEFİ ARTIK METRİK SATIRINDA
   "13.824 sayfa · 49 kitap okudu · 47/20 hedef"
   Eskiden hedef altta ayrı bir blok (.profile-goal-mini) olarak iki satır
   yer kaplıyordu. Aynı türden üç sayı tek satırda daha hızlı okunuyor.
   ============================================================================= */
.profile-center-surface .reader-status-goal {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    white-space: nowrap;
}
.profile-center-surface .reader-status-goal strong {
    font-weight: 650;
}
.profile-center-surface .reader-status-goal > span {
    opacity: .62;
}

/* "Hedef belirle" — hedef yokken, aynı satırda, metin düğmesi.
   Dolgulu düğme yapmadım: yanındaki iki metrik düz metin, araya
   düğme koymak satırın ritmini bozuyordu. */
.profile-center-surface .reader-status-goal-set {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: none;
    color: #1d9bf0;
    font-family: inherit;
    font-size: inherit;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}
.profile-center-surface .reader-status-goal-set svg { width: 14px; height: 14px; }
.profile-center-surface .reader-status-goal-set:active { opacity: .7; }

/* ===== OKUMA HEDEFİ ÇUBUĞU — PROFİLDE GÖRÜNEN ÇUBUK BU =====
   (Metrik satırı varsa .profile-goal-mini basılmıyor; profile.php
    $hasReading doluysa buraya düşüyor.)

   NEDEN "DÜZ ÇİZGİ" GİBİ DURUYORDU:
     - yüksekliği 3px'ti
     - oluğun rengi rgba(29,155,240,.14), yani MAVİNİN SOLUĞU
   Sonuç: dolu kısım mavi, boş kısım soluk mavi, yükseklik 3px —
   göz bunu bir çubuk değil, tek bir çizgi olarak okuyor.

   Bir çubuğun "hedef" olduğunu anlatan şey dolu kısım değil, KAT
   EDİLECEK YOLUN görünmesi. Üç değişiklik:
     1) 3px -> 7px + içe gölge  (oluk bir yuva gibi okunuyor)
     2) oluk nötr griye döndü   (mavi/soluk mavi ikilisi okunmuyordu)
     3) %10'luk dilim çizgileri (ölçek; sağ paneldeki büyük çubukta
        zaten var, aynı dil)
   Satır 4px uzuyor, başka hiçbir şeyin yeri değişmiyor. */
.profile-center-surface .reader-status-goalbar {
    position: relative;
    height: 7px;
    margin-top: 9px;
    border-radius: 999px;
    background: #e3e8ef;
    box-shadow: inset 0 1px 2px rgba(16,24,40,.07);
    overflow: hidden;
}
.profile-center-surface .reader-status-goalbar > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #1d9bf0, #60a5fa);
    box-shadow: 0 0 10px rgba(29,155,240,.26);
}
/* Dilim çizgileri dolgunun ÜSTÜNDE: ::after boyama sırasında sonra
   geldiği için ayrıca z-index gerekmiyor. */
.profile-center-surface .reader-status-goalbar::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent calc(10% - 2px),
        rgba(255,255,255,.85) calc(10% - 2px),
        rgba(255,255,255,.85) 10%
    );
}
html.dark .profile-center-surface .reader-status-goalbar {
    background: rgba(255,255,255,.11);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.18);
}
html.dark .profile-center-surface .reader-status-goalbar > span { background: linear-gradient(90deg, #1d9bf0, #60a5fa); }
html.dark .profile-center-surface .reader-status-goalbar::after {
    background: repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent calc(10% - 2px),
        rgba(16,20,25,.75) calc(10% - 2px),
        rgba(16,20,25,.75) 10%
    );
}

/* Üç metrik dar ekranda alt satıra sarsın, sıkışıp taşmasın. */
@media (max-width: 480px) {
    .profile-center-surface .reader-status-metrics {
        flex-wrap: wrap;
        row-gap: 4px;
    }
}

/* ==================================================================
   KİTAP EKLE PENCERESİ — MOBİL YÜKSEKLİK + TAM YUVARLAK ARAMA KUTUSU
   ------------------------------------------------------------------
   Sorun 1: .lib-card2 bir flex kolon ve yüksekliği içeriğine bağlıydı.
   Pencere ilk açıldığında sonuç listesi boş olduğu için yükseklik
   sadece başlık + arama kutusu kadardı (~150px). Telefonda klavye
   açılınca pencerenin tamamı neredeyse klavyenin arkasında kalıyordu.
   Çözüm: telefonda sabit yükseklik. Sonuç geldikçe pencere zıplamıyor,
   liste kendi içinde kayıyor.

   Sorun 2: arama kutusu 12px köşeliydi. Tam yuvarlak yapıldı; yan
   boşluk 14px -> 18px, yoksa yazı kavise yapışıyor.

   GERİ ALMAK İÇİN: bu bloğun tamamını sil. Yukarıdaki orijinal
   .lib-* kurallarına hiç dokunulmadı.
   ================================================================== */
.lib-sbox input {
    border-radius: 999px;
    padding: 11px 18px;
}

@media (max-width: 639px) {
    .lib-card2 {
        height: 82vh;
        height: 82dvh;        /* dvh destekleyen tarayıcı bunu kullanır */
        max-height: 92vh;
        max-height: 92dvh;
    }
    /* Sonuç listesi kalan alanı doldursun, taşarsa kendi içinde kaysın. */
    .lib-res {
        flex: 1 1 auto;
        min-height: 0;
    }
}

/* Pencere yeni açıldığında sonuç alanı bomboş; uzun beyaz bir boşluk
   kalmasın diye tek satır ipucu. İSTEMEZSEN bu kuralı sil. */
.lib-res:empty::before {
    content: "Kitap adı veya yazar yazmaya başla…";
    display: block;
    padding: 26px 10px;
    text-align: center;
    color: #9ca3af;
    font-size: 15px;
}




/* ##########################################################################
   TUR A — DOKUNMA HEDEFLERİ + KARANLIK MOD + SAFE-AREA
   --------------------------------------------------------------------------
   Üç ayrı konu, üç ayrı başlık. Hiçbiri diğerinin alanına girmiyor ve
   hiçbiri aydınlık moddaki görünümü değiştirmiyor — tek istisna A3'te
   açıkça yazıldı.

   GERİ ALMAK İÇİN: bu bloğun tamamını sil.
   ########################################################################## */


/* ==========================================================================
   A1. DOKUNMA HEDEFLERİ
   --------------------------------------------------------------------------
   Apple 44pt, Google 48dp diyor. Ölçtüğüm 22 elemanın hepsi altındaydı.

   YÖNTEM: şeffaf bir ::after katmanı. ÇİZİLEN kutu değişmiyor, yalnız
   DOKUNULAN alan büyüyor. Yani kimlik satırının dizilişi, buton
   boyutları, hiçbir şey görsel olarak oynamıyor.

   İKİ GRUP VAR, sebebi şu: yan yana duran butonlarda hedefi yatayda
   büyütmek komşunun alanını yer. O yüzden sadece dikeyde büyütülüyor —
   kaydırılan bir sayfada parmak hatası zaten ağırlıklı olarak dikeydir.
   ========================================================================== */

/* --- A1a. TEK BAŞINA DURAN İKON BUTONLAR → tam 44×44 --- */
/* .pf-sheet-close BU LİSTEDE DEĞİL — BİLEREK.
   O buton profile.css:4261'de zaten "position:absolute; right:10px; top:6px"
   taşıyor. İlk sürümde buraya da yazmıştım; "relative" mutlak konumu ezince
   buton akışa düşüp künye sayfasının ortasına kaydı. Mutlak konumlu bir
   eleman ::after için zaten kapsayıcı blok olduğundan ek bir şey gerekmiyor —
   dokunma hedefi büyütmesi orada da çalışıyor. */
.profile-sheet-close,
.level-modal-close,
.lib-mclose,
.profile-reader-sidebar-toggle,
.profile-reading-goal .goal-edit,
.profile-reading-goal--mobile .goal-edit,
.profile-reading-goal--sidebar .goal-edit {
    position: relative;
}
.profile-sheet-close::after,
.pf-sheet-close::after,
.level-modal-close::after,
.lib-mclose::after,
.profile-reader-sidebar-toggle::after,
.profile-reading-goal .goal-edit::after,
.profile-reading-goal--mobile .goal-edit::after,
.profile-reading-goal--sidebar .goal-edit::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    min-width: 44px;
    min-height: 44px;
}

/* --- A1b. YAN YANA DURAN BUTONLAR → yalnız dikeyde 44px --- */
.profile-center-surface .profile-edit-button,
.profile-center-surface .profile-message-button,
.profile-center-surface .profile-more-button,
.profile-center-surface #blockBtn,
.profile-center-surface #actionBtn,
.profile-center-surface .profile-action-button.profile-follow-btn,
.lib-pill,
.lib-cbtn,
.lib-year-btn,
.goal-btn,
.goal-btn-del {
    position: relative;
}
.profile-center-surface .profile-edit-button::after,
.profile-center-surface .profile-message-button::after,
.profile-center-surface .profile-more-button::after,
.profile-center-surface #blockBtn::after,
.profile-center-surface #actionBtn::after,
.profile-center-surface .profile-action-button.profile-follow-btn::after,
.lib-pill::after,
.lib-cbtn::after,
.lib-year-btn::after,
.goal-btn::after,
.goal-btn-del::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
    min-height: 44px;
}

/* --- A1c. RAF BUTONLARI — tek görsel değişiklik ---
   .lib-stbtn 24.3px ve YATAY KAYAN bir satırın içinde. Kaydırma kutusu
   taşmayı kırptığı için ::after numarası burada çalışmaz; hedefi büyütmenin
   tek yolu kutunun kendisini büyütmek. Dikey dolgu 4px -> 9px, yükseklik
   ~24px'ten ~37px'e çıkıyor. 44 değil ama kaydırma kutusunu bozmadan
   gidilebilecek en uç nokta.
   BU TURUN TEK GÖRSEL DEĞİŞİKLİĞİ BUDUR. */
.lib-stbtn {
    padding: 9px 11px;
}

/* --- A1d. DÜZELTİLMEYENLER, sebebiyle ---
   .profile-tab-label  40.2px  → sekme çubuğu yatay kayıyor, ::after kırpılır.
                                 Düzeltmek çubuğu 4px uzatır; onayın olmadan
                                 yapmadım.
   .flw-tabs           38.0px  → aynı sebep.
   İkisini de istersen tek satırla hallederim. */


/* ==========================================================================
   A2. KARANLIK MOD — 3 GERÇEK HATA
   --------------------------------------------------------------------------
   Ölçüm: 102 seçici somut açık zemin tanımlıyor, 86'sının html.dark
   karşılığı var, 16'sının yok. O 16'nın çoğu kasıtlı (marka mavisi,
   tehlike kırmızısı, gradyanlar). Gerçekten hata olan 3 tanesi:
   ========================================================================== */

/* 1) Alttan açılan sayfanın birincil butonu #0f1419 (neredeyse siyah).
      Karanlıkta kartın zemini #151920 — buton zeminin içinde kayboluyor.
      Sitede zaten kullanılan ters kapsül deseni uygulandı
      (bkz. html.dark .lib-stbtn:hover). */
html.dark .profile-sheet-primary {
    background: #e7e9ea;
    color: #0f1419;
}
html.dark .profile-sheet-primary:hover {
    background: #ffffff;
}

/* 2) Hedef modalının "Vazgeç" butonu #f3f4f6 — koyu modalın üstünde
      açık gri bir kutu olarak duruyordu. */
html.dark .goal-btn-cancel {
    background: rgba(255, 255, 255, .08);
    color: #e7e9ea;
}

/* 3) Kapak yer tutucuları #e5e7eb. Kapak yüklenmediğinde karanlık modda
      parlak gri dikdörtgenler çıkıyordu. */
html.dark .lib-book .cv,
html.dark .cmn-book .cv,
html.dark .lib-row img {
    background: rgba(255, 255, 255, .08);
    color: #6b7280;
}


/* ==========================================================================
   A3. SAFE-AREA — iPhone ALT ÇUBUĞU
   --------------------------------------------------------------------------
   Alta yapışan üç panel var. .pf-sheet zaten env(safe-area-inset-bottom)
   kullanıyor, doğru. Diğer ikisi kullanmıyordu: butonları ana ekran
   çubuğunun ALTINDA kalıyordu. Kitap Ekle penceresinde de sonuç
   listesinin son satırı çubuğun altına giriyordu.

   layout.php ve mobile.css tarafı temiz, orada düzeltilecek bir şey yok —
   .mobile-nav, .mfab ve .mobile-header üçü de zaten kullanıyor.
   ========================================================================== */
.lib-confirm {
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}
.lib-year-sheet {
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}
.lib-res {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}


/* ##########################################################################
   MOBİL AKIŞTAKİ TAKİP ÖNERİSİ KARTI
   --------------------------------------------------------------------------
   "Kimi takip etmeli" kutusu sağ sütunda, yani <aside class="hidden lg:block">
   içinde duruyor. Telefonda o sütun hiç çizilmediği için kutuya ancak künye
   sayfasından ulaşılabiliyordu. Kart artık akışın İÇİNDE, 3. gönderiden
   sonra. İşaretleme profile.php'de, sınıf adı .profil-oneri-kart.

   Yalnızca telefonda görünür (markup'ta lg:hidden) — masaüstünde sağ sütun
   zaten var, iki kez göstermek gereksiz.

   ÖLÇÜLER profildeki gönderi kartından BİREBİR alındı
   (profile.css: article.post-card kuralı), iki kart yan yana aynı
   geometride dursun diye.

   Satır içindeki .suggest-row / .suggest-reason / .follow-btn sınıfları
   ZATEN TANIMLI ve kapsam dışı değil — yeni bir satır stili yazmadım.

   GERİ ALMAK İÇİN: bu bloğu sil + profile.php'deki iki
   profil_oneri_karti() çağrısını kaldır.
   ########################################################################## */
.profil-oneri-kart {
    margin: 0;
    padding: 12px 16px 10px;
    border: 0;
    border-radius: 24px;
    background: #ffffff;
}
html.dark .profil-oneri-kart {
    background: rgba(255, 255, 255, .045);   /* #161a22 yanlış siyahtı — sözleşme kart rengi (SIYAH_20261026) */
}

.profil-oneri-baslik {
    margin: 0 0 6px;
    font-family: var(--inbook-profile-ui-font, 'Jost', Arial, sans-serif);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.01em;
}

/* "Daha fazla öneri gör" — kenar çubuğundaki bağlantının aynısı, ama
   kart dolgusuna göre yeniden hizalandı. */
.profil-oneri-devam {
    display: block;
    margin: 8px -16px -10px;
    padding: 12px 16px 11px;
    border-top: 1px solid rgba(127, 127, 127, .20);
    color: #1d9bf0;
    font-family: var(--inbook-profile-ui-font, 'Jost', Arial, sans-serif);
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
}
.profil-oneri-devam:hover { background: rgba(127, 127, 127, .07); }

/* ≤640px: kartın köşesi ve dolgusu gönderi kartıyla aynı değişkenlerden. */
@media (max-width: 640px) {
    .profil-oneri-kart {
        border-radius: var(--m-card-radius, 14px);
        padding: var(--m-card-pad-y, 10px) var(--m-card-pad-x, 12px);
    }
    .profil-oneri-devam {
        margin-left: calc(-1 * var(--m-card-pad-x, 12px));
        margin-right: calc(-1 * var(--m-card-pad-x, 12px));
        margin-bottom: calc(-1 * var(--m-card-pad-y, 10px));
        padding-left: var(--m-card-pad-x, 12px);
        padding-right: var(--m-card-pad-x, 12px);
    }
}


/* ##########################################################################
   TUR B — KONTRAST VE GRİ SADELEŞTİRME
   --------------------------------------------------------------------------
   ÖLÇÜM: dosyada 52 farklı metin rengi vardı, 26'sı beyaz üzerinde WCAG AA
   sınırını (4.5:1) geçmiyordu. Bu blok 62 seçiciyi 3 renge indiriyor.

   SADECE AÇIK MOD. Karanlık modda mevcut #9ca3af zeminde 6.86:1 veriyor,
   yani zaten geçiyor — oraya dokunmadım.

   DOKUNMADIKLARIM, SEBEBİYLE:
     #f59e0b  yıldızlar ve premium işareti — süsleme, metin değil
     #d97706  öneri sebebi rozeti — süsleme
     #16a34a  seviye tiki — süsleme
     #d1d5db  boş yıldız — süsleme
     #c9cfd7  okuma durumu noktası — süsleme
     #c3cad3  chevron okları — süsleme
     #668072  tek seçici, 4.29:1 (sınıra çok yakın) ve yeşilimsi tonu
              bilinçli seçilmiş görünüyor; nötr griye çevirmek rengi
              öldürürdü. Bırakıldı, kararı sana ait.

   GERİ ALMAK İÇİN: bu bloğun tamamını sil.
   ########################################################################## */

/* --- İKİNCİL METİN — 17 ayrı gri tek griye indi --- 
   Eski değerler: #9ca3af #8d96a3 #9aa3ae #98a2b3 #9aa3ad #98a1ad #8a94a3
   #8a94a1 #929ba8 #8b95a7 #98a0ab #8a94a2 #8a93a0 #a2abb6 #a7b0bb #8a929d.
   Hiçbiri diğerinden ayırt edilemiyordu; bu bir palet değil, zamanla
   birikmiş sapmaydı. Hepsinin kontrastı 2.19-3.14 arasındaydı, WCAG AA
   sınırı 4.5. #656d7a beyaz kartta 5.22, #f6f7f9 yüzeyde 4.87 —
   ikisinde de geçiyor. Mavi tonlu karakter korundu. */
.nr-label,
.nr-more,
.lib-empty,
.lib-row .a,
.lib-year-sub,
.lib-year-x,
.flw-empty,
.goal-modal-sub,
.goal-input-suffix,
.lib-res:empty::before,
.profile-center-surface .reader-status-metrics,
.profile-goal-mini-label,
.profile-goal-mini-count,
.profile-goal-mini-set,
.lib-book .lib-au,
.profile-center-surface .profile-story-meta,
.flw-handle,
.rp-seviye-next,
.sid-cap,
.kunye-stat-cap,
.profile-reading-goal--sidebar .goal-edit,
.sid-auth-av,
.sid-book-count,
.profile-reading-goal .goal-count span,
.profile-reading-goal .goal-unit,
.profile-reading-goal .goal-meta,
.profile-reading-goal .goal-empty-copy span,
.level-row-req,
.flw-self,
.profile-reading-goal--sidebar .goal-count span,
.rp-seviye-next-name,
.profile-reading-goal .goal-edit,
.profile-center-surface .profile-story-kicker,
.profile-center-surface .profile-story-more-note,
.flw-meta,
.profile-center-surface .profile-stat-label,
.profile-sidebar-description,
.kunye-stat-foot,
.sid-profile-empty,
.sid-genre-cnt,
.profile-report-note {
    color: #656d7a;
}

/* --- BAĞLANTI MAVİSİ — yalnız YAZI olduğu yerde --- 
   #1d9bf0 beyaz üzerinde 3.00:1. Dolgu ve ikon olarak sorun değil ama
   11.5px bağlantı metni olarak okunmuyor. #1270ad = 5.32.
   MARKA RENGİNİ DEĞİŞTİRDİĞİNİN FARKINDAYIM: bu blok silinirse eski
   mavi geri gelir, tek yer burası. */
.profile-center-surface .profile-message-button:hover,
.profile-center-surface .profile-story-title:hover,
.profile-center-surface .profile-story-open,
.profile-center-surface .bell-plain:hover,
.profile-center-surface .bell-plain.is-on,
.profile-reading-goal--sidebar .goal-percent,
.profile-reading-goal--sidebar .goal-edit:hover,
.sid-genre:hover,
.sid-auth:hover,
.sid-club-more:hover,
.profile-center-surface .profile-more-button:hover,
.profile-center-surface .profile-more-button[aria-expanded="true"],
.content-link,
.profile-center-surface .reader-status-goal-set,
.profil-oneri-devam {
    color: #1270ad;
}

/* --- TEHLİKE KIRMIZISI — yazı --- 
   #ef4444 = 3.76:1. Sil / engelle gibi geri alınamaz eylemlerin yazısı
   okunaklı olmak zorunda. #cc2727 = 5.40. */
.pmenu-item.danger,
.lib-mi.danger,
.page-err,
.profile-center-surface #blockBtn:hover,
.goal-btn-del {
    color: #cc2727;
}


/* ##########################################################################
   TUR B — KALAN İKİ DOKUNMA HEDEFİ
   --------------------------------------------------------------------------
   Tur A'da bu ikisini bırakmıştım: ikisi de yatay kayan çubukta duruyor ve
   kaydırma kutusu taşmayı kırptığı için ::after numarası orada çalışmıyor.
   Tek yol kutunun kendisini uzatmak.

   .profile-tab-label  40.2px -> 44.2px   (dikey dolgu 13/11 -> 15/13)
   .flw-tabs           38.0px -> 44.0px   (yükseklik doğrudan)

   BEDELİ: sekme çubuğu 4px uzuyor. Başka yolu yok; onayını beklediğim
   şey buydu.
   ########################################################################## */
.profile-center-surface .profile-tab-label {
    padding-top: 15px;
    padding-bottom: 13px;
}
.flw-tabs {
    min-height: 44px;
}


/* ##########################################################################
   PROFİL — OKUR SEVİYESİ SATIRI, İKİNCİ TUR
   --------------------------------------------------------------------------
   İKİ ŞİKÂYET:
     "ikon yazıdan büyük olmasın, aynı boyda olsunlar"
     "bu yazı @ ile başlayan kullanıcı adını geçmemeli"

   ÖLÇÜLER:
     .profile-username   13.5px   (mobilde 13px)
     .profile-level-line 14px     ← kullanıcı adından BÜYÜKTÜ

   ÇÖZÜM:
     punto 14 -> 12.5px. Mobilde (taban muafiyetiyle) 14.5px çıkıyor,
     @kullanıcıadı ise 15.5px — yani düzey artık onun ALTINDA.

     İKON ARTIK em CİNSİNDEN. Sabit px yerine 1em verildi: ikon her
     kırılımda yazıyla BİREBİR aynı boyda olur, punto katmanı yazıyı
     değiştirse bile ikon onunla birlikte değişir. Bir daha ayrı ayrı
     ayarlamak gerekmez.

     (i) işareti .85em — yazının altında, ama görünür.
   ########################################################################## */
.profile-level-line {
    font-size: 12.5px;
}

.profile-level-line-icon {
    width: 1em;
    height: 1em;
    flex: 0 0 1em;
}

.profile-level-line-info {
    width: .85em;
    height: .85em;
    flex: 0 0 .85em;
}


/* =============================================================================
   5. MADDE — MİSAFİR PROFİL AKIŞI
   -----------------------------------------------------------------------------
   TEŞHİS:
   Girişli profilde akışın kabı  #feedContainer.profile-post-feed.
   MİSAFİR dalında ise .profile-post-list (pages/profile.php, ~143. satır)
   ve bu sınıf için profile.css'te TEK BİR KURAL YOKTU. Sonuç tam olarak
   şikâyet ettiğin şey: kartlar sekme barına yapışık, aralarında boşluk
   yok, yanlarda dolgu yok.

   Burada yeni bir tasarım yapılmıyor — girişli sürümün kap geometrisi
   birebir kopyalanıyor. Değerler #feedContainer.profile-post-feed
   (~1696) ve mobil karşılığından (~3143) alındı.
   ============================================================================= */
.profile-center-surface .profile-post-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
    /* Yan boşluk --feed-x'ten geliyor (post_card.css :root, 10px).
       Aynı sayı dört yerde elle yazılıydı; tek kaldıraca bağlandı. */
    padding: 0 var(--feed-x, 10px) 24px;
}
.profile-center-surface .profile-post-list > article.post-card {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 24px !important;
    padding: 12px 16px 10px !important;
}
.profile-center-surface .profile-post-list > .rev-card {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    overflow: hidden;
}
/* Koyu temada .rev-card zemini "transparent"; kenarlık da olmadığına göre
   kartın hiçbir sınırı kalmıyor. Girişli akıştaki ile aynı hafif açılma. */
html.dark .profile-center-surface .profile-post-list > .rev-card {
    background-color: rgba(255,255,255,.04) !important;
}
@media (max-width: 640px) {
    .profile-center-surface .profile-post-list {
        margin-top: 14px;
        gap: var(--m-card-gap, 8px);
        padding: 0 var(--m-gutter, 6px) 16px;
    }
    .profile-center-surface .profile-post-list > article.post-card {
        padding: var(--m-card-pad-y, 10px) var(--m-card-pad-x, 12px) !important;
        border-radius: var(--m-card-radius, 14px) !important;
    }
    .profile-center-surface .profile-post-list > .rev-card {
        border-radius: var(--m-card-radius, 14px) !important;
    }
}

/* 9. MADDE'NİN PROFİL AYAĞI — SEKME BARI DA SİMSİYAH.
   html.dark .profile-tabs zemini #0f1115 idi; sütunun geri kalanı siyah.
   Anasayfada düzelttiğimiz şeyin aynısı burada da duruyordu.
   Alt çizgi ve gölge olduğu gibi kalıyor; ayrımı onlar yapıyor. */
html.dark .profile-center-surface .profile-tabs {
    background: #000;
}


/* =============================================================================
   PROFİL SEKME BARI — MOBİLDE ANA SAYFADAKİ KABUK DAVRANIŞI
   -----------------------------------------------------------------------------
   Tek-panel katmanı profil hero'sunun eski -20px bindirmesini kaldırıyor.
   Bu nedenle profile-tabs içinde kalan eski 22px "hero altına girme" payı
   artık geçersizdi: bar yukarı taşınıyor ve profil üst alanıyla çakışıyordu.

   Mobilde o eski bindirme geometrisini tamamen kaldırıyoruz:
   - sekme barında gizli 22px üst dolgu yok,
   - bar görünür mobil header'ın TAM altına yapışır,
   - chrome-hidden durumunda header ile birlikte ekran dışına çıkar,
   - yukarı kaydırınca ikisi birlikte geri gelir.

   Masaüstüne dokunulmaz.
   ============================================================================= */
@media (max-width: 767px) {
    .profile-center-surface .profile-tabs {
        padding-top: 0;
        transform: none !important;
        transition: top .24s ease;
    }

    /* Header görünürken sekme barı tam altında yapışır. */
    body:has(.mobile-header) .profile-center-surface .profile-tabs {
        top: var(--m-header-h, 48px);
    }

    /* ÖNEMLİ:
       Sekme barını transform ile yukarı çekmiyoruz.
       Transform normal akıştayken de elemanı fiziksel olarak yukarı taşıdığı için
       "Rozetler, kulüpler..." satırının üstüne biniyordu.
       Sticky inset'i değiştirince bar yalnız gerçekten yapıştığı anda hareket eder;
       profil hero alanının içinden geçmez.
       Header gizlenince sekme barı KAYBOLMAZ; top:0'da sabit kalır.
       Parmağı aşağı çekip header geri gelince top yeniden 48px olur. */
    html.chrome-hidden body:has(.mobile-header) .profile-center-surface .profile-tabs {
        top: calc(0px - var(--m-header-h, 48px) - 4px);
    }

    /* Header açılıp kapanırken sticky bar ile header arasında oluşabilen
       birkaç karelik boşlukta alttaki gönderiler görünmesin.
       Bu perde tab barın üstünde 48px alanı kapatır; header z-index:45 olduğu
       için header her zaman bunun üstünde kalır. */
    .profile-center-surface .profile-tabs::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: var(--m-header-h, 48px);
        background: #ffffff;
        pointer-events: none;
        z-index: -1;
    }

    html.dark .profile-center-surface .profile-tabs::before {
        background: #000000;
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-center-surface .profile-tabs { transition: none !important; }
}

/* PROFILE_CONTENT_TAB_ALIGNMENT_20261008
   Bio + okur özeti + istatistikler, ilk profil sekmesiyle aynı sol eksende. */

/* Masaüstü:
   profile-tabs sol padding 18px
   profile-tab-label sol padding 3px
   gerçek yazı başlangıcı = 21px */
@media (min-width: 641px) {
    .profile-center-surface .profile-overview {
        padding-left: 21px !important;
    }
}

/* Mobil:
   profile-tabs sol padding 14px
   profile-tab-label sol padding 2px
   gerçek yazı başlangıcı = 16px */
@media (max-width: 640px) {
    .profile-center-surface .profile-overview {
        padding-left: 16px !important;
    }
}

/* PROFILE_CONTENT_TAB_ALIGNMENT_20261008
   Bio + okur özeti + istatistikler, ilk profil sekmesiyle aynı sol eksende. */

/* Masaüstü:
   profile-tabs sol padding 18px
   profile-tab-label sol padding 3px
   gerçek yazı başlangıcı = 21px */
@media (min-width: 641px) {
    .profile-center-surface .profile-overview {
        padding-left: 21px !important;
    }
}

/* Mobil:
   profile-tabs sol padding 14px
   profile-tab-label sol padding 2px
   gerçek yazı başlangıcı = 16px */
@media (max-width: 640px) {
    .profile-center-surface .profile-overview {
        padding-left: 16px !important;
    }
}


/* =========================================================
   PROFILE_MOBILE_COVER_ACTIONS_20261009
   Yalnız mobil profil:
   - avatar tekrar büyük
   - üç nokta kapak üzerinde
   - üç nokta menüsü tetikleyicinin altında
   ========================================================= */
@media (max-width: 640px) {

    /* -----------------------------------------------------
       PROFİL FOTOĞRAFI
       72px mobil override kaldırılıyor; 112px'e dönüyor.
       Geometri birlikte güncelleniyor.
       ----------------------------------------------------- */
    .profile-center-surface .profile-avatar-image {
        width: 7rem !important;
        height: 7rem !important;
        border-width: 4px !important;
    }

    .profile-center-surface .profile-avatar-wrap {
        left: 12px !important;
        bottom: -3.5rem !important;
    }

    .profile-center-surface .profile-overview {
        padding-top: calc(3.5rem + 12px) !important;
    }

    .profile-center-surface .profile-identity-row {
        padding-left: calc(7rem + 12px) !important;
        margin-top: -3.5rem !important;
    }


    /* -----------------------------------------------------
       ÜÇ NOKTA
       DOM'daki mevcut düğme korunuyor; yalnızca mobilde
       profile-overview'un sağ üstünden kapağın üzerine taşınıyor.
       ----------------------------------------------------- */
    .profile-center-surface .profile-more-wrap {
        position: absolute !important;
        top: calc(-8rem + 12px) !important;
        right: 14px !important;
        z-index: 130 !important;
        margin: 0 !important;
    }


    /* -----------------------------------------------------
       ÜÇ NOKTA MENÜSÜ
       Genel mobil .profile-popover kuralındaki fixed/bottom
       yalnız BU menü için iptal ediliyor.
       Bildirim menüsü aynen kalır.
       ----------------------------------------------------- */
    .profile-center-surface .profile-more-popover {
        position: absolute !important;

        top: calc(100% + 7px) !important;
        right: 0 !important;
        bottom: auto !important;
        left: auto !important;

        width: 238px !important;
        min-width: 232px !important;
        max-width: calc(100vw - 24px) !important;

        z-index: 1350 !important;
    }
}


/* =========================================================
   PROFILE_OWN_MOBILE_MENU_20261009
   ========================================================= */

.profile-center-surface .profile-own-more-wrap {
    display: none;
}

@media (max-width: 640px) {

    /* Kapak radiusu: resim de aynı kırpmayı birebir takip etsin. */
    .profile-center-surface .profile-cover-media {
        overflow: hidden !important;
        border-radius: 0 0 24px 24px !important;
    }

    .profile-center-surface .profile-cover-image,
    .profile-center-surface .profile-cover-placeholder {
        border-radius: inherit !important;
    }


    /* Kendi profilde yazılı buton mobilde kalkar. */
    .profile-center-surface .profile-edit-button {
        display: none !important;
    }

    /* Aynı konumda dikey üç nokta. */
    .profile-center-surface .profile-own-more-wrap {
        position: relative;
        display: inline-flex;
        flex: 0 0 auto;
        margin-left: auto;
        z-index: 140;
    }

    .profile-center-surface .profile-own-more-button {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
    }

    .profile-center-surface .profile-own-more-button svg {
        width: 21px;
        height: 21px;
    }


    /* Genel mobil .profile-popover alt-sheet kuralını
       yalnız kendi profil menüsü için iptal ediyoruz. */
    .profile-center-surface .profile-own-popover {
        position: absolute !important;
        top: calc(100% + 7px) !important;
        right: 0 !important;
        bottom: auto !important;
        left: auto !important;

        width: 190px !important;
        min-width: 190px !important;
        max-width: calc(100vw - 24px) !important;

        z-index: 1450 !important;
    }
}

/* =========================================================
   READING_PERIOD_GOALS_UI_MODAL_CSS_20261012
   Haftalık / aylık / yıllık hedef modalı
   ========================================================= */

.goal-scope-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;

    margin: 14px 0 12px;
    padding: 4px;

    border-radius: 999px;

    background: #f2f4f7;
}


.goal-scope-tab {
    appearance: none;

    min-width: 0;
    min-height: 34px;

    border: 0;
    border-radius: 999px;

    padding: 6px 10px;

    background: transparent;

    color: #7c8794;

    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;

    transition:
        color .16s ease,
        background-color .16s ease,
        transform .16s ease;
}


.goal-scope-tab:hover {
    color: #0f1419;
}


.goal-scope-tab:focus-visible {
    outline: 2px solid rgba(29, 155, 240, .28);
    outline-offset: 2px;
}


.goal-scope-tab.is-active {
    background: #fff;

    color: #0f1419;
    font-weight: 700;

    box-shadow:
        0 1px 3px rgba(15, 20, 25, .08);
}


.goal-modal-error {
    margin: 8px 2px 0;

    color: #b42318;

    font-size: 12px;
    line-height: 1.4;
}


.goal-modal-error[hidden],
#goalDeleteButton[hidden] {
    display: none !important;
}


html.dark .goal-scope-tabs {
    background: rgba(255, 255, 255, .06);
}


html.dark .goal-scope-tab {
    color: #929ba8;
}


html.dark .goal-scope-tab:hover {
    color: #f4f5f6;
}


html.dark .goal-scope-tab.is-active {
    background: rgba(255, 255, 255, .10);

    color: #fff;

    box-shadow: none;
}


html.dark .goal-modal-error {
    color: #ff8b82;
}


@media (max-width: 640px) {

    .goal-scope-tabs {
        margin-top: 12px;
    }

    .goal-scope-tab {
        min-height: 36px;
        padding-inline: 7px;
    }
}

/* =========================================================
   READING_PERIOD_GOALS_UI_MOBILE_CSS_20261013
   ========================================================= */

.profile-reading-goal--mobile .goal-period-list {
    display: flex;
    flex-direction: column;
    gap: 7px;

    margin-top: 11px;
    padding-top: 10px;

    border-top: 1px solid rgba(15, 20, 25, .07);
}


.profile-reading-goal--mobile .goal-period-list--standalone {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}


.profile-reading-goal--mobile .goal-period-row {
    display: grid;

    grid-template-columns:
        66px
        auto
        minmax(44px, 1fr)
        auto;

    align-items: center;

    gap: 7px;

    min-height: 27px;
}


.profile-reading-goal--mobile .goal-period-label {
    color: #667085;

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

    white-space: nowrap;
}


.profile-reading-goal--mobile .goal-period-progress {
    color: #8a94a1;

    font-size: 12px;

    white-space: nowrap;
}


.profile-reading-goal--mobile .goal-period-progress strong {
    color: #0f1419;
    font-weight: 700;
}


.profile-reading-goal--mobile .goal-period-empty {
    grid-column: 2 / 4;

    color: #98a1ad;

    font-size: 11.5px;
}


.profile-reading-goal--mobile .goal-period-mini-bar {
    display: block;

    overflow: hidden;

    width: 100%;
    height: 4px;

    border-radius: 999px;

    background: #edf0f3;
}


.profile-reading-goal--mobile .goal-period-mini-bar > span {
    display: block;

    height: 100%;
    max-width: 100%;

    border-radius: inherit;

    background: #1d9bf0;
}


.profile-reading-goal--mobile .goal-period-action {
    appearance: none;

    border: 0;
    border-radius: 999px;

    padding: 3px 0;

    background: transparent;

    color: #8a94a1;

    font: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.1;

    cursor: pointer;

    white-space: nowrap;
}


.profile-reading-goal--mobile .goal-period-action:hover,
.profile-reading-goal--mobile .goal-period-action:focus-visible {
    color: #1d9bf0;
    text-decoration: none;
}


.profile-reading-goal--mobile .goal-period-action--set {
    color: #1d9bf0;
}


html.dark
.profile-reading-goal--mobile
.goal-period-list {
    border-top-color: rgba(255, 255, 255, .07);
}


html.dark
.profile-reading-goal--mobile
.goal-period-label,

html.dark
.profile-reading-goal--mobile
.goal-period-progress,

html.dark
.profile-reading-goal--mobile
.goal-period-empty {
    color: #929ba8;
}


html.dark
.profile-reading-goal--mobile
.goal-period-progress strong {
    color: #f4f5f6;
}


html.dark
.profile-reading-goal--mobile
.goal-period-mini-bar {
    background: rgba(255, 255, 255, .09);
}


html.dark
.profile-reading-goal--mobile
.goal-period-action {
    color: #929ba8;
}


html.dark
.profile-reading-goal--mobile
.goal-period-action:hover,

html.dark
.profile-reading-goal--mobile
.goal-period-action:focus-visible,

html.dark
.profile-reading-goal--mobile
.goal-period-action--set {
    color: #6cc0ff;
}


@media (max-width: 420px) {

    .profile-reading-goal--mobile .goal-period-row {
        grid-template-columns:
            61px
            auto
            minmax(30px, 1fr)
            auto;

        gap: 6px;
    }

}

/* =========================================================
   READING_PERIOD_GOALS_UI_SIDEBAR_CSS_20261013
   ========================================================= */

.profile-reading-goal--sidebar .goal-period-list {
    display: flex;
    flex-direction: column;
    gap: 6px;

    margin-top: 10px;
    padding-top: 9px;

    border-top: 1px solid #f0f3f6;
}


.profile-reading-goal--sidebar .goal-period-row {
    display: grid;

    grid-template-columns:
        56px
        auto
        minmax(28px, 1fr)
        auto;

    align-items: center;
    gap: 6px;

    min-height: 24px;
}


.profile-reading-goal--sidebar .goal-period-label {
    color: #7f8996;

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

    white-space: nowrap;
}


.profile-reading-goal--sidebar .goal-period-progress {
    color: #98a1ad;

    font-size: 10.5px;

    white-space: nowrap;
}


.profile-reading-goal--sidebar .goal-period-progress strong {
    color: #111827;
    font-weight: 750;
}


.profile-reading-goal--sidebar .goal-period-empty {
    grid-column: 2 / 4;

    color: #a0a8b2;

    font-size: 10.5px;
}


.profile-reading-goal--sidebar .goal-period-mini-bar {
    display: block;

    overflow: hidden;

    width: 100%;
    height: 4px;

    border-radius: 999px;

    background: #eceff3;
}


.profile-reading-goal--sidebar .goal-period-mini-bar > span {
    display: block;

    height: 100%;
    max-width: 100%;

    border-radius: inherit;

    background: #1d9bf0;
}


.profile-reading-goal--sidebar .goal-period-action {
    appearance: none;

    border: 0;
    border-radius: 999px;

    padding: 2px 0;

    background: transparent;

    color: #939ca8;

    font: inherit;
    font-size: 10px;
    font-weight: 650;
    line-height: 1;

    cursor: pointer;

    white-space: nowrap;
}


.profile-reading-goal--sidebar .goal-period-action:hover,
.profile-reading-goal--sidebar .goal-period-action:focus-visible {
    color: #1d9bf0;
    text-decoration: none;
}


.profile-reading-goal--sidebar .goal-period-action--set {
    color: #1d9bf0;
}


html.dark
.profile-reading-goal--sidebar
.goal-period-list {
    border-top-color: rgba(255, 255, 255, .07);
}


html.dark
.profile-reading-goal--sidebar
.goal-period-label,

html.dark
.profile-reading-goal--sidebar
.goal-period-progress,

html.dark
.profile-reading-goal--sidebar
.goal-period-empty {
    color: #838d9a;
}


html.dark
.profile-reading-goal--sidebar
.goal-period-progress strong {
    color: #f4f5f6;
}


html.dark
.profile-reading-goal--sidebar
.goal-period-mini-bar {
    background: rgba(255, 255, 255, .09);
}


html.dark
.profile-reading-goal--sidebar
.goal-period-action {
    color: #838d9a;
}


html.dark
.profile-reading-goal--sidebar
.goal-period-action:hover,

html.dark
.profile-reading-goal--sidebar
.goal-period-action:focus-visible,

html.dark
.profile-reading-goal--sidebar
.goal-period-action--set {
    color: #6cc0ff;
}

/* =========================================================
   READING_CHECKIN_UI_CSS_20261013
   Profil — "Şu an okuyor" günlük check-in
   ========================================================= */

.now-reading-row {
    display: flex;
    align-items: center;
    gap: 9px;

    width: 100%;
    max-width: 100%;

    margin-bottom: 12px;
}


.now-reading-row .now-reading {
    flex: 1 1 auto;
    min-width: 0;

    margin-bottom: 0;
}


.nr-checkin {
    appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    flex: 0 0 auto;

    min-height: 30px;

    padding: 5px 10px;

    border: 0;
    border-radius: 999px;

    background: #f1f3f5;

    color: #667085;

    font: inherit;
    font-size: 11px;
    font-weight: 650;
    line-height: 1;

    cursor: pointer;

    white-space: nowrap;

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


.nr-checkin svg {
    width: 14px;
    height: 14px;

    flex: 0 0 auto;
}


.nr-checkin:hover:not(:disabled) {
    background: #e9edf1;
    color: #1d9bf0;

    transform: translateY(-1px);
}


.nr-checkin:focus-visible {
    outline: 2px solid rgba(29, 155, 240, .28);
    outline-offset: 2px;
}


.nr-checkin.is-loading {
    opacity: .65;

    cursor: wait;
}


.nr-checkin.is-done,
.nr-checkin:disabled.is-done {
    background: rgba(22, 163, 74, .08);

    color: #16834a;

    cursor: default;

    opacity: 1;
}


html.dark .nr-checkin {
    background: rgba(255, 255, 255, .065);

    color: #a2aab5;
}


html.dark .nr-checkin:hover:not(:disabled) {
    background: rgba(255, 255, 255, .10);

    color: #6cc0ff;
}


html.dark .nr-checkin.is-done,
html.dark .nr-checkin:disabled.is-done {
    background: rgba(34, 197, 94, .10);

    color: #67d693;
}


@media (max-width: 640px) {

    .now-reading-row {
        align-items: flex-start;
        flex-wrap: wrap;

        gap: 7px 8px;
    }


    .now-reading-row .now-reading {
        flex-basis: 100%;
    }


    .nr-checkin {
        margin-left: auto;
    }

}

/* =========================================================
   READING_STREAK_UI_CSS_20261013
   Okuma Profili — gerçek okuma serisi
   ========================================================= */

.sid-reading-streak .sid-profile-label svg {
    stroke: currentColor;
    fill: none;
}


.sid-streak-row {
    display: flex;
    align-items: baseline;

    gap: 6px;

    min-width: 0;
}


.sid-streak-current {
    display: inline-flex;
    align-items: baseline;

    gap: 3px;

    flex: 0 0 auto;

    white-space: nowrap;
}


.sid-streak-current strong {
    color: #d97706;

    font-size: 19px;
    font-weight: 750;
    line-height: 1;

    letter-spacing: -.035em;
}


.sid-streak-current span {
    color: #7f8996;

    font-size: 11px;
    font-weight: 600;
}


.sid-streak-state {
    overflow: hidden;

    color: #8b95a2;

    font-size: 11px;
    font-weight: 500;

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


.sid-streak-best {
    margin-left: auto;

    color: #98a1ad;

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

    white-space: nowrap;
}


.sid-streak-best strong {
    color: #667085;

    font-weight: 700;
}


html.dark .sid-streak-current strong {
    color: #f3bd63;
}


html.dark .sid-streak-current span,
html.dark .sid-streak-state,
html.dark .sid-streak-best {
    color: #838d9a;
}


html.dark .sid-streak-best strong {
    color: #b5bdc8;
}


@media (max-width: 420px) {

    .sid-streak-row {
        flex-wrap: wrap;
    }


    .sid-streak-best {
        margin-left: 0;
    }

}

/* =========================================================
   READING_ACHIEVEMENTS_UI_CSS_20261013
   inBook Künyesi — Okuma başarıları
   ========================================================= */

.sid-achievements {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 7px 10px;

    width: 100%;
}


.sid-achievement {
    display: flex;
    align-items: center;

    gap: 6px;

    min-width: 0;

    color: #606a77;
}


.sid-achievement-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 24px;

    width: 24px;
    height: 24px;

    border-radius: 8px;

    background: #f2f4f6;

    color: #7b8491;
}


.sid-achievement-icon svg {
    width: 13px;
    height: 13px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.sid-achievement-name {
    min-width: 0;

    overflow: hidden;

    color: #667085;

    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.2;

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


/* Kitap / sayfa / seri aynı görsel sistem içinde,
   yalnız ikon vurgusu kategoriyi ayırıyor. */

.sid-achievement--books .sid-achievement-icon {
    background: rgba(29, 155, 240, .08);
    color: #2589cc;
}


.sid-achievement--pages .sid-achievement-icon {
    background: rgba(29, 155, 240, .08);   /* mordu */
    color: #1270ad;
}


.sid-achievement--streak .sid-achievement-icon {
    background: rgba(217, 119, 6, .09);
    color: #d97706;
}


html.dark .sid-achievement {
    color: #9aa3ae;
}


html.dark .sid-achievement-name {
    color: #a6aeba;
}


html.dark .sid-achievement-icon {
    background: rgba(255, 255, 255, .06);
    color: #929ba8;
}


html.dark
.sid-achievement--books
.sid-achievement-icon {
    background: rgba(29, 155, 240, .10);
    color: #6cc0ff;
}


html.dark
.sid-achievement--pages
.sid-achievement-icon {
    background: rgba(29, 155, 240, .12);
    color: #7cc4f8;
}


html.dark
.sid-achievement--streak
.sid-achievement-icon {
    background: rgba(217, 119, 6, .11);
    color: #f3bd63;
}


@media (max-width: 360px) {

    .sid-achievements {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   READING_ACHIEVEMENT_SHARE_CSS_20261013
   Okuma başarısı paylaşım etkileşimi
   ========================================================= */

.sid-achievement-share {
    cursor: pointer;

    border: 0;
    outline: 0;

    border-radius: 8px;

    transition:
        opacity .15s ease,
        transform .15s ease;
}


.sid-achievement-share:hover {
    opacity: .82;
}


.sid-achievement-share:hover
.sid-achievement-name {
    color: #343a40;
}


.sid-achievement-share:active {
    transform: scale(.985);
}


.sid-achievement-share:focus-visible {
    outline: 2px solid rgba(29, 155, 240, .42);
    outline-offset: 3px;
}


.sid-achievement-share[data-share-busy="1"] {
    pointer-events: none;
    opacity: .55;
}


html.dark
.sid-achievement-share:hover
.sid-achievement-name {
    color: #d7dce2;
}

/* =========================================================
   KUNYE_PREMIUM_V3_CSS_20261013
   Baştan kurulmuş inBook Künyesi.
   İç içe kart / pill / dashboard görünümü yok.
   ========================================================= */

.profile-reader-sidebar.kunye-v3 {
    --k3-text: #111827;
    --k3-muted: #7b8491;
    --k3-faint: #a0a8b3;
    --k3-line: #e8ecf0;
    --k3-soft: #f6f8fa;
    --k3-blue: #1d9bf0;

    overflow: hidden;

    width: 100%;

    border: 1px solid #e3e8ed;
    border-radius: 22px !important;

    background: #fff;

    box-shadow:
        0 10px 30px rgba(15, 23, 42, .045);
}


.profile-reader-sidebar.kunye-v3,
.profile-reader-sidebar.kunye-v3 * {
    box-sizing: border-box;
}


/* HEADER */

.kunye-v3 .kv3-trigger {
    appearance: none;

    display: block;

    width: 100%;

    margin: 0;
    padding: 16px 16px 13px;

    border: 0;

    background: transparent;

    color: var(--k3-text);

    text-align: left;

    cursor: pointer;
}


.kunye-v3 .kv3-head {
    display: grid;

    grid-template-columns:
        38px
        minmax(0, 1fr)
        31px;

    align-items: center;

    gap: 10px;
}


.kunye-v3 .kv3-brand {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 12px;

    background: #111;

    overflow: hidden;
}


.kunye-v3 .kv3-brand img {
    width: 27px;
    height: 27px;

    object-fit: contain;
}


.kunye-v3 .kv3-head-copy {
    display: flex;
    flex-direction: column;

    gap: 2px;

    min-width: 0;
}


.kunye-v3 .kv3-title {
    color: var(--k3-text);

    font-size: 15px;
    font-weight: 800;
    line-height: 1.15;

    letter-spacing: -.025em;
}


.kunye-v3 .kv3-subtitle {
    color: var(--k3-muted);

    font-size: 11.5px;
    font-weight: 500;
}


.kunye-v3 .kv3-chevron {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 31px;
    height: 31px;

    border: 1px solid var(--k3-line);
    border-radius: 50%;

    color: #697482;

    transition: transform .18s ease;
}


.kunye-v3 .kv3-chevron svg {
    width: 14px;
    height: 14px;
}


.kunye-v3:not(.is-collapsed)
.kv3-chevron {
    transform: rotate(180deg);
}


/* ÖZET — PILL YOK */

.kunye-v3 .kv3-summary {
    display: flex;
    align-items: center;

    gap: 0;

    margin-top: 13px;

    overflow: hidden;

    color: #747f8c;

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

    white-space: nowrap;
}


.kunye-v3 .kv3-summary > span {
    display: inline-flex;
    align-items: center;

    min-width: 0;
}


.kunye-v3 .kv3-summary > span + span::before {
    content: "";

    width: 3px;
    height: 3px;

    margin: 0 8px;

    border-radius: 50%;

    background: #c4cad1;
}


.kunye-v3 .kv3-summary strong {
    color: var(--k3-text);
    font-weight: 750;
}


/* BODY */

.kunye-v3.is-collapsed
.profile-reader-sidebar-body {
    display: none;
}


.kunye-v3:not(.is-collapsed)
.profile-reader-sidebar-body {
    display: block;

    overflow: visible;

    max-height: none;
}


.kunye-v3 .profile-reader-sidebar-body {
    border-top: 1px solid var(--k3-line);

    background: #fff;
}


.kunye-v3 .kv3-body {
    display: flex;
    flex-direction: column;

    gap: 0;

    padding: 0 16px 16px;
}


/* BÖLÜMLER */

.kunye-v3 .kv3-section {
    margin: 0;

    padding: 17px 0;

    border-bottom: 1px solid var(--k3-line);
}


.kunye-v3 .kv3-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 13px;
}


.kunye-v3 .kv3-section-head > div {
    min-width: 0;
}


.kunye-v3 .kv3-eyebrow {
    display: block;

    margin-bottom: 4px;

    color: #89939f;

    font-size: 10.5px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: .105em;

    text-transform: uppercase;
}


.kunye-v3 .kv3-section-title {
    display: block;

    color: var(--k3-text);

    font-size: 14px;
    font-weight: 750;
    line-height: 1.2;
}


.kunye-v3 .kv3-action,
.kunye-v3 .kv3-period-action {
    appearance: none;

    flex: 0 0 auto;

    padding: 0;

    border: 0;

    background: transparent;

    color: #84909d;

    font: inherit;
    font-size: 11px;
    font-weight: 650;

    text-decoration: none;

    cursor: pointer;
}


.kunye-v3 .kv3-action:hover,
.kunye-v3 .kv3-period-action:hover {
    color: var(--k3-blue);
}


/* ANA HEDEF */

.kunye-v3 .kv3-goal-value {
    display: flex;
    align-items: baseline;

    margin-top: 2px;
}


.kunye-v3 .kv3-goal-value strong {
    color: var(--k3-text);

    font-size: 34px;
    font-weight: 820;
    line-height: 1;

    letter-spacing: -.055em;
}


.kunye-v3 .kv3-goal-value span {
    margin-left: 3px;

    color: #7f8a97;

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


.kunye-v3 .kv3-goal-value em {
    margin-left: 7px;

    color: #929ba7;

    font-size: 10px;
    font-style: normal;
    font-weight: 600;
}


.kunye-v3 .kv3-progress {
    overflow: hidden;

    width: 100%;
    height: 6px;

    margin-top: 11px;

    border-radius: 999px;

    background: #edf0f3;
}


.kunye-v3 .kv3-progress span {
    display: block;

    height: 100%;

    border-radius: inherit;

    background: var(--k3-blue);
}


.kunye-v3 .kv3-goal-meta {
    display: flex;
    justify-content: space-between;

    gap: 12px;

    margin-top: 7px;

    color: #8b95a1;

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


.kunye-v3 .kv3-empty-action {
    appearance: none;

    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding: 12px 0 3px;

    border: 0;

    background: transparent;

    color: var(--k3-text);

    font: inherit;
    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}


.kunye-v3 .kv3-empty-action svg {
    width: 15px;
    height: 15px;

    color: #8c96a2;
}


/* AY / HAFTA */

.kunye-v3 .kv3-periods {
    margin-top: 13px;

    border-top: 1px solid #edf0f3;
}


.kunye-v3 .kv3-period {
    display: grid;

    grid-template-columns:
        66px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 7px;

    min-height: 32px;
}


.kunye-v3 .kv3-period + .kv3-period {
    border-top: 1px solid #f1f3f5;
}


.kunye-v3 .kv3-period-name {
    color: #66717f;

    font-size: 11px;
    font-weight: 650;
}


.kunye-v3 .kv3-period-value,
.kunye-v3 .kv3-period-empty {
    min-width: 0;

    color: #7f8996;

    font-size: 11px;

    white-space: nowrap;
}


.kunye-v3 .kv3-period-value strong {
    color: #374151;
    font-weight: 750;
}


/* SEVİYE + SERİ */

.kunye-v3 .kv3-insights {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    margin: 0;

    padding: 15px 0;

    border-bottom: 1px solid var(--k3-line);
}


.kunye-v3 .kv3-insight {
    min-width: 0;

    padding-right: 13px;
}


.kunye-v3 .kv3-insight + .kv3-insight {
    padding-right: 0;
    padding-left: 13px;

    border-left: 1px solid var(--k3-line);
}


.kunye-v3 .kv3-insight-label {
    display: block;

    margin-bottom: 5px;

    color: #89939f;

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

    text-transform: uppercase;

    letter-spacing: .07em;
}


.kunye-v3 .kv3-insight-value {
    display: block;

    overflow: hidden;

    color: var(--k3-text);

    font-size: 13.5px;
    font-weight: 780;
    line-height: 1.25;

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


.kunye-v3 .kv3-insight-value.kv3-streak {
    color: #d97706;

    font-size: 19px;
}


.kunye-v3 .kv3-insight-value small {
    color: #7f8996;

    font-size: 10.5px;
    font-weight: 650;
}


.kunye-v3 .kv3-insight-note {
    display: block;

    overflow: hidden;

    margin-top: 4px;

    color: #909aa6;

    font-size: 10.5px;
    line-height: 1.35;

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


/* BAŞARILAR — DİKEY PAZAR DEĞİL, YATAY MADALYA RAIL */

.kunye-v3 .kv3-section-hint {
    flex: 0 0 auto;

    padding-top: 3px;

    color: #8f99a5;

    font-size: 10px;
    font-weight: 550;
}


.kunye-v3 .kv3-achievement-rail {
    display: flex;

    gap: 11px;

    overflow-x: auto;
    overflow-y: hidden;

    margin-right: -16px;

    padding:
        1px
        16px
        4px
        0;

    scrollbar-width: none;

    overscroll-behavior-x: contain;
}


.kunye-v3 .kv3-achievement-rail::-webkit-scrollbar {
    display: none;
}


.kunye-v3 .kv3-achievement {
    appearance: none;

    display: flex;
    flex: 0 0 62px;
    flex-direction: column;
    align-items: center;

    gap: 6px;

    min-width: 0;

    padding: 0;

    border: 0;

    background: transparent;

    font: inherit;

    cursor: pointer;
}


.kunye-v3 .kv3-medal {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 39px;
    height: 39px;

    border-radius: 14px;

    background: #f2f5f8;

    color: #647181;

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


.kunye-v3 .kv3-medal svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.kunye-v3
.kv3-achievement--books
.kv3-medal {
    background: rgba(29, 155, 240, .09);

    color: #258dce;
}


.kunye-v3
.kv3-achievement--pages
.kv3-medal {
    background: rgba(29, 155, 240, .08);   /* mordu */

    color: #1270ad;
}


.kunye-v3
.kv3-achievement--streak
.kv3-medal {
    background: rgba(217, 119, 6, .09);

    color: #d97706;
}


.kunye-v3
.kv3-achievement:hover
.kv3-medal {
    transform: translateY(-2px);
}


.kunye-v3 .kv3-achievement-name {
    display: -webkit-box;

    overflow: hidden;

    width: 62px;

    color: #727d8a;

    font-size: 10.5px;
    font-weight: 650;
    line-height: 1.25;

    text-align: center;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}


/* EDEBİYAT PROFİLİ */

.kunye-v3 .kv3-literary {
    display: flex;
    flex-direction: column;
}


.kunye-v3 .kv3-literary-row {
    display: grid;

    grid-template-columns:
        58px
        minmax(0, 1fr);

    align-items: start;

    gap: 9px;

    padding: 8px 0;
}


.kunye-v3
.kv3-literary-row
+ .kv3-literary-row {
    border-top: 1px solid #f0f2f4;
}


.kunye-v3 .kv3-literary-label {
    color: #7f8996;

    font-size: 10.5px;
    font-weight: 650;
}


.kunye-v3 .kv3-literary-values {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;

    gap: 2px 5px;

    min-width: 0;

    color: #535f6e;

    font-size: 11.5px;
    line-height: 1.5;
}


.kunye-v3 .kv3-literary-values a {
    color: inherit;

    font-weight: 600;

    text-decoration: none;
}


.kunye-v3 .kv3-literary-values a:hover {
    color: var(--k3-blue);
}


.kunye-v3 .kv3-dot {
    color: #c0c6cd;
}


.kunye-v3 .kv3-books-row {
    align-items: center;
}


.kunye-v3 .kv3-covers {
    display: flex;
    align-items: center;

    gap: 6px;
}


.kunye-v3 .kv3-cover {
    display: block;

    overflow: hidden;

    width: 28px;
    height: 42px;

    border-radius: 6px;

    background: #eef1f4;

    box-shadow:
        0 2px 6px rgba(15, 23, 42, .10);
}


.kunye-v3 .kv3-cover img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.kunye-v3 .kv3-cover > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    color: #8b95a1;
}


.kunye-v3 .kv3-cover svg {
    width: 14px;
    height: 14px;
}


/* DEĞERLENDİRME ROZETLERİ FOOTER */

.kunye-v3 .kv3-review-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 13px 0;

    border-bottom: 1px solid var(--k3-line);

    color: #8d97a3;

    font-size: 10.5px;
    font-weight: 650;
}


.kunye-v3 .kv3-review-badges {
    display: flex;
    align-items: center;

    gap: 5px;
}


/* KULÜPLER */

.kunye-v3 .kv3-club-list {
    display: flex;
    flex-direction: column;
}


.kunye-v3 .kv3-club {
    display: grid;

    grid-template-columns:
        28px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 8px;

    min-height: 38px;

    color: var(--k3-text);

    text-decoration: none;
}


.kunye-v3 .kv3-club + .kv3-club {
    border-top: 1px solid #f0f2f4;
}


.kunye-v3 .kv3-club-mark {
    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    width: 28px;
    height: 28px;

    border-radius: 9px;

    background: #f1f4f7;

    color: #687484;

    font-size: 10px;
    font-weight: 750;
}


.kunye-v3 .kv3-club-mark img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.kunye-v3 .kv3-club-name {
    overflow: hidden;

    font-size: 11.5px;
    font-weight: 650;

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


.kunye-v3 .kv3-club small {
    color: #89939f;

    font-size: 10px;
}


/* son bölüm altta gereksiz çizgi bırakmasın */

.kunye-v3
.kv3-body
> :last-child {
    border-bottom: 0;
}


/* DARK */

html.dark
.profile-reader-sidebar.kunye-v3 {
    --k3-text: #f1f3f5;
    --k3-muted: #9099a5;
    --k3-faint: #737d89;
    --k3-line: rgba(255,255,255,.075);
    --k3-soft: #15181c;

    border-color: rgba(255,255,255,.085);

    background: #0e1013;

    box-shadow: none;
}


html.dark
.kunye-v3 .kv3-trigger,
html.dark
.kunye-v3 .profile-reader-sidebar-body {
    background: #0e1013;
}


html.dark
.kunye-v3 .kv3-chevron {
    border-color: rgba(255,255,255,.09);

    color: #a1a9b4;
}


html.dark
.kunye-v3 .kv3-summary {
    color: #89939f;
}


html.dark
.kunye-v3 .kv3-summary strong {
    color: #e8ebee;
}


html.dark
.kunye-v3 .kv3-summary > span + span::before {
    background: #4b535d;
}


html.dark
.kunye-v3 .kv3-progress,
html.dark
.kunye-v3 .kv3-medal,
html.dark
.kunye-v3 .kv3-club-mark {
    background: rgba(255,255,255,.065);
}


html.dark
.kunye-v3 .kv3-periods,
html.dark
.kunye-v3 .kv3-period + .kv3-period,
html.dark
.kunye-v3 .kv3-literary-row + .kv3-literary-row,
html.dark
.kunye-v3 .kv3-club + .kv3-club {
    border-color: rgba(255,255,255,.06);
}


html.dark
.kunye-v3 .kv3-period-value strong {
    color: #dce0e5;
}


html.dark
.kunye-v3 .kv3-literary-values {
    color: #aeb5be;
}


html.dark
.kunye-v3 .kv3-review-strip {
    color: #858f9b;
}


/* MOBİL */

@media (max-width: 360px) {

    .kunye-v3 .kv3-body {
        padding-right: 14px;
        padding-left: 14px;
    }


    .kunye-v3 .kv3-insights {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, .72fr);
    }


    .kunye-v3 .kv3-section-hint {
        display: none;
    }

}



/* =========================================================
   KUNYE_ACHIEVEMENT_DESKTOP_SCROLL_20261013
   Masaüstünde başarı rail gerçekten kullanılabilir olsun.
   ========================================================= */

@media (pointer: fine) {

    .kunye-v3 .kv3-achievement-rail {
        padding-bottom: 9px;

        scrollbar-width: thin;
        scrollbar-color:
            #cbd2d9
            transparent;
    }


    .kunye-v3
    .kv3-achievement-rail::-webkit-scrollbar {
        display: block;

        height: 5px;
    }


    .kunye-v3
    .kv3-achievement-rail::-webkit-scrollbar-track {
        background: transparent;
    }


    .kunye-v3
    .kv3-achievement-rail::-webkit-scrollbar-thumb {
        border-radius: 999px;

        background: #cbd2d9;
    }


    .kunye-v3
    .kv3-achievement-rail::-webkit-scrollbar-thumb:hover {
        background: #aeb7c1;
    }


    html.dark
    .kunye-v3
    .kv3-achievement-rail {
        scrollbar-color:
            #4b5561
            transparent;
    }


    html.dark
    .kunye-v3
    .kv3-achievement-rail::-webkit-scrollbar-thumb {
        background: #4b5561;
    }

}



/* =========================================================
   KUNYE_YEARBOOK_ENTRY_CSS_20261013
   ========================================================= */

.kunye-v3 .kv3-yearbook-entry {
    display: flex;
    align-items: center;

    gap: 11px;

    width: 100%;

    margin:
        0
        0
        12px;

    padding:
        11px
        12px;

    border: 0;
    border-radius: 14px;

    background:
        rgba(29, 155, 240, .065);

    color: #17191c;

    text-decoration: none;

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


.kunye-v3 .kv3-yearbook-entry:hover {
    background:
        rgba(29, 155, 240, .095);

    transform:
        translateY(-1px);
}


.kunye-v3 .kv3-yearbook-icon {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    border-radius: 10px;

    background:
        rgba(29, 155, 240, .11);

    color: #1d9bf0;
}


.kunye-v3 .kv3-yearbook-icon svg {
    width: 17px;
    height: 17px;
}


.kunye-v3 .kv3-yearbook-copy {
    min-width: 0;

    flex: 1 1 auto;
}


.kunye-v3 .kv3-yearbook-copy strong,
.kunye-v3 .kv3-yearbook-copy small {
    display: block;
}


.kunye-v3 .kv3-yearbook-copy strong {
    color: inherit;

    font-size: 12px;
    font-weight: 760;
    line-height: 1.25;
}


.kunye-v3 .kv3-yearbook-copy small {
    margin-top: 2px;

    color: #7f8992;

    font-size: 10.5px;
    font-weight: 520;
    line-height: 1.3;
}


.kunye-v3 .kv3-yearbook-arrow {
    flex: 0 0 auto;

    width: 15px;
    height: 15px;

    color: #8b949c;
}


html.dark
.kunye-v3
.kv3-yearbook-entry {
    background:
        rgba(29, 155, 240, .10);

    color: #edf0f2;
}


html.dark
.kunye-v3
.kv3-yearbook-entry:hover {
    background:
        rgba(29, 155, 240, .14);
}


html.dark
.kunye-v3
.kv3-yearbook-copy small {
    color: #89939b;
}