/* ==========================================================================
   OkuToon — web arayüzü
   Renk ve ölçüler variables.css'ten gelir. Düz, çerçevesiz yüzeyler; tek
   marka rengi yalnızca birincil eylem ve etkin durumlarda kullanılır.
   ========================================================================== */

/* ===== 1. Sıfırlama ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

/* Çapa (#yorum-…) ve odaklanan alanlar sabit başlığın altında kalmasın. html üzerinde
   scroll-padding kullanılmaz: başlıktaki arama kutusu o bölgede kaldığı için tarayıcı
   odakta ve her tuşta sayfayı yukarı kaydırıyordu. */
main :where(*) { scroll-margin-top: calc(var(--header-h) + 12px); }

body {
    min-height: 100vh;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: var(--fs-15);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
/* Bağlantı hover standardı (docs/web-link-hover.md): içerik bağlantısı hep altı çizili;
   kullanıcı adı, başlık ve metin eylemi hover'da renk korunarak altı çizili (ortak kural dosya sonunda);
   meta/önizleme bağlantısı yalnız renk açılır; kart, avatar, çip, menü ve buton altı çizilmez. */
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
hr { border: 0; border-top: 1px solid var(--line); }
ul, ol { list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
::selection { background: var(--brand-soft); }

h1, h2, h3, h4 { line-height: 1.25; letter-spacing: -0.01em; font-weight: 700; }

/* Lucide ikonları */
[data-lucide], .lucide { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 2; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ===== 2. Yerleşim ===== */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
@media (min-width: 768px) { :root { --gutter: 24px; } }

main.container { padding-top: var(--sp-6); padding-bottom: var(--sp-12); min-height: calc(100vh - var(--header-h) - 200px); }

.container-narrow { max-width: 760px; margin: 0 auto; }

.section { padding: var(--sp-2) 0 var(--sp-8); }
.section + .section { padding-top: var(--sp-4); }

/* Bölüm başlığı: "Başlık ............ Tamamı ›" */
.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
}
.section-copy { min-width: 0; display: grid; gap: 2px; }
.section-title {
    font-size: var(--fs-20);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.section-title--lg { font-size: var(--fs-24); }
@media (min-width: 768px) {
    .section-title { font-size: var(--fs-24); }
    .section-title--lg { font-size: var(--fs-28); }
}
.section-description { color: var(--fg-3); font-size: var(--fs-14); }
.section-subtitle { font-size: var(--fs-18); font-weight: 700; letter-spacing: -0.01em; }
.result-count { color: var(--fg-3); font-size: 0.6em; font-weight: 500; letter-spacing: 0; }
.section-header-actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.section-action {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--fg-3);
    font-size: var(--fs-14);
    font-weight: 600;
    white-space: nowrap;
    transition: color var(--dur) var(--ease);
}
.section-action:hover { color: var(--fg); }
.section-action [data-lucide], .section-action svg { width: 16px; height: 16px; }

/* ===== 3. Butonlar ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font-size: var(--fs-14);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn [data-lucide], .btn svg, .btn-icon { width: 16px; height: 16px; }
.btn:disabled, .btn.is-disabled { opacity: 0.45; pointer-events: none; }

.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover { background: color-mix(in srgb, var(--brand) 88%, var(--fg)); color: var(--on-brand); }

.btn-invert { background: var(--invert-bg); color: var(--invert-fg); }
.btn-invert:hover { opacity: 0.86; color: var(--invert-fg); }

.btn-ghost, .btn-secondary { background: var(--surface-2); color: var(--fg); }
.btn-ghost:hover, .btn-secondary:hover { background: var(--surface-3); color: var(--fg); }

.btn-outline { background: transparent; border-color: var(--line-strong); color: var(--fg); }
.btn-outline:hover { background: var(--surface-2); }

.btn-plain { background: transparent; color: var(--fg-2); }
.btn-plain:hover { background: var(--surface-2); color: var(--fg); }

.btn-danger { background: var(--danger-soft); color: var(--danger); }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 22%, transparent); color: var(--danger); }

.btn-sm { height: 34px; padding: 0 12px; font-size: var(--fs-13); border-radius: var(--r-md); }
.btn-lg { height: 48px; padding: 0 22px; font-size: var(--fs-15); border-radius: var(--r-lg); }
.btn-block { width: 100%; }
.btn-pill { border-radius: var(--r-full); }

.icon-btn {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: var(--r-full);
    color: var(--fg-2);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn:hover, .icon-btn[aria-expanded="true"] { background: var(--surface-2); color: var(--fg); }
.icon-btn [data-lucide], .icon-btn svg { width: 20px; height: 20px; }
.icon-btn--sm { width: 32px; height: 32px; }
.icon-btn--sm [data-lucide], .icon-btn--sm svg { width: 17px; height: 17px; }
.icon-btn.is-active { color: var(--brand-ink); }

/* Başlıktaki premium tacı (premium olmayan üye). Altın dolgu her iki temada parlak kalır. */
.site-premium-btn {
    position: relative;
    color: #E0A800;
    background: radial-gradient(circle at 50% 55%, rgba(246, 195, 67, 0.22), rgba(246, 195, 67, 0.06) 70%);
    box-shadow: inset 0 0 0 1px rgba(246, 195, 67, 0.35);
}
.site-premium-btn:hover { color: #F6C343; background: rgba(246, 195, 67, 0.2); }
.site-premium-btn svg { width: 20px; height: 20px; fill: #F6C343; stroke: #B77F00; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; overflow: visible; transform-origin: 50% 80%; animation: premium-crown-bob 7s ease-in-out infinite; filter: drop-shadow(0 0 3px rgba(246, 195, 67, 0.55)); }
.site-premium-btn svg path:last-child { fill: none; stroke: #F6C343; stroke-width: 2; }
[data-theme="light"] .site-premium-btn svg path:last-child { stroke: #C98A00; }
.site-premium-btn__spark {
    position: absolute;
    top: 5px;
    right: 6px;
    width: 7px;
    height: 7px;
    background: #FFF6D6;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    opacity: 0;
    animation: premium-spark 3.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes premium-crown-bob {
    0%, 82%, 100% { transform: none; }
    86% { transform: rotate(-9deg) scale(1.08); }
    90% { transform: rotate(8deg) scale(1.08); }
    94% { transform: rotate(-4deg); }
}
@keyframes premium-spark {
    0%, 60%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
    72% { opacity: 1; transform: scale(1.15) rotate(45deg); }
    84% { opacity: 0; transform: scale(0.4) rotate(90deg); }
}

/* İlk ziyaretlerde tacın altında dokunan parmak ipucu (premium-promo.js ekler). */
.premium-tap-hint {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    z-index: 260;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transform: translateX(-50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 240ms ease;
}
.premium-tap-hint.is-visible { opacity: 1; }
.premium-tap-hint__hand { display: block; font-size: 24px; line-height: 1; animation: premium-tap 1.1s ease-in-out infinite; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)); }
.premium-tap-hint__label {
    padding: 4px 9px;
    border-radius: var(--r-full);
    background: #F6C343;
    color: #3A2600;
    font-size: var(--fs-11);
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
@keyframes premium-tap {
    0%, 100% { transform: translateY(4px) rotate(-8deg); }
    45% { transform: translateY(-3px) rotate(-8deg) scale(0.92); }
}
@media (prefers-reduced-motion: reduce) {
    .site-premium-btn svg, .site-premium-btn__spark, .premium-tap-hint__hand { animation: none; }
}

.btn-text {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--fg-2); font-size: var(--fs-13); font-weight: 600;
}
.btn-text:hover { color: var(--fg); }
.btn-text--danger { color: var(--danger); }
.btn-text--danger:hover { color: var(--danger); opacity: 0.8; }
.btn-text-icon { width: 14px; height: 14px; }

@keyframes button-spin { to { transform: rotate(360deg); } }

/* ===== 4. Chip / Sekme / Rozet ===== */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--r-full);
    background: var(--surface-2);
    color: var(--fg-2);
    font-size: var(--fs-13);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.chip:hover { background: var(--surface-3); color: var(--fg); }
.chip.is-active, .chip.active, .chip[aria-pressed="true"], .chip[aria-current="page"] {
    background: var(--brand-soft);
    border-color: var(--brand-line);
    color: var(--brand-ink);
}
.chip [data-lucide], .chip svg { width: 14px; height: 14px; }
.chip-count { color: var(--fg-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.chip.is-active .chip-count, .chip.active .chip-count { color: inherit; opacity: 0.8; }

.chip-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}
.chip-row::-webkit-scrollbar { display: none; }

/* Alt çizgili sekmeler */
.tabs {
    display: flex;
    gap: 22px;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 0;
    color: var(--fg-3);
    font-size: var(--fs-15);
    font-weight: 600;
    white-space: nowrap;
    transition: color var(--dur) var(--ease);
}
.tab:hover { color: var(--fg); }
.tab.active, .tab.is-active, .tab[aria-selected="true"] { color: var(--fg); }
.tab.active::after, .tab.is-active::after, .tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--fg);
}
.tab-count { color: var(--fg-3); font-weight: 500; font-size: var(--fs-13); }

/* Küçük bilgi rozetleri — nötr */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 8px;
    border-radius: var(--r-xs);
    background: var(--surface-2);
    color: var(--fg-2);
    font-size: var(--fs-12);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
.badge-ongoing::before, .badge-status-ongoing::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ongoing);
}
.badge-admin, .badge-premium {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--r-xs);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}
.badge-admin { background: var(--admin-soft); color: var(--admin); }
.badge-premium { background: var(--premium-soft); color: var(--premium); }
.badge-admin-icon, .badge-premium-icon { width: 11px !important; height: 11px !important; }
.badge-admin--lg, .badge-premium--lg { height: 24px; padding: 0 8px; font-size: var(--fs-12); }

.tag, .tag-link {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: var(--r-full);
    background: var(--surface-2);
    color: var(--fg-2);
    font-size: var(--fs-13);
    font-weight: 500;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tag-link:hover { background: var(--surface-3); color: var(--fg); }

.dot-sep { color: var(--fg-4); }

/* ===== 5. Avatar ===== */
.avatar,
.navbar-avatar,
.comment-avatar,
.comment-form-avatar,
.profile-avatar,
.avatar-preview,
.forum-teaser-item-avatar,
.home-community-user-avatar,
.forum-topic-card-author-avatar,
.forum-topic-post-side-avatar,
.profile-forum-item-avatar,
.like-user-avatar,
.feed-avatar {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--fg-2);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
}
.avatar img,
.navbar-avatar img,
.comment-avatar img,
.comment-form-avatar img,
.profile-avatar img,
.avatar-preview img,
.forum-teaser-item-avatar img,
.home-community-user-avatar img,
.forum-topic-card-author-avatar img,
.forum-topic-post-side-avatar img,
.profile-forum-item-avatar img,
.like-user-avatar img,
.feed-avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar > span, .comment-avatar > span, .comment-form-avatar > span, .feed-avatar > span,
.forum-teaser-item-avatar > span, .home-community-user-avatar > span, .forum-topic-card-author-avatar > span,
.forum-topic-post-side-avatar > span, .profile-forum-item-avatar > span { display: grid; place-items: center; width: 100%; height: 100%; }

/* Premium / yönetici halkası (uygulamalardaki gibi ince halka).
   outline + offset: halka ile avatar arasındaki boşluk bulunduğu zeminin rengini
   alır, bu yüzden tonlu panellerde, kartlarda ve açılır menülerde de doğru görünür.
   Yönetici halkası premiumu ezer (ikisi birden varsa kırmızı). */
.is-premium-avatar, .is-admin-avatar {
    --ring-w: 2px;
    --ring-gap: 2px;
    outline: var(--ring-w) solid var(--ring-color);
    outline-offset: var(--ring-gap);
    box-shadow: none;
}
.is-premium-avatar { --ring-color: var(--premium); }
.is-admin-avatar { --ring-color: var(--admin); }
/* Küçük avatarlar: daha ince halka, daha dar boşluk */
.avatar--xs.is-premium-avatar, .avatar--xs.is-admin-avatar,
.avatar--sm.is-premium-avatar, .avatar--sm.is-admin-avatar,
.comment-form-avatar.is-premium-avatar, .comment-form-avatar.is-admin-avatar,
.comment-avatar--sm.is-premium-avatar, .comment-avatar--sm.is-admin-avatar,
.comment--reply .comment-avatar.is-premium-avatar, .comment--reply .comment-avatar.is-admin-avatar { --ring-w: 1.5px; --ring-gap: 1.5px; }
/* Avatar çerçevesi (docs/cosmetics.md): avatarın 1,2 katı, ortalı, tıklamayı geçirir.
   Listelerde durağan kare, profilde animasyonlu dosya kullanılır. */
.avatar-deco { position: relative; display: inline-grid; flex-shrink: 0; align-self: flex-start; }
.avatar-deco > .avatar-deco-img, .avatar-deco > picture > .avatar-deco-img { position: absolute; top: 50%; left: 50%; z-index: 1; width: 120%; height: 120%; max-width: none; transform: translate(-50%, -50%); pointer-events: none; }
/* Renkli isim (docs/cosmetics.md): renkler --name-dark / --name-light değişkenlerinde,
   açık temada sunucunun koyulaştırdığı (≥ 3:1 kontrast) renkler kullanılır. */
.has-name-color, [data-name-color] { background-image: var(--name-dark); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
[data-theme="light"] .has-name-color, [data-theme="light"] [data-name-color] { background-image: var(--name-light, var(--name-dark)); }
.has-name-color::selection { -webkit-text-fill-color: var(--fg); }
/* İsmin içine eklenen etiketler ("Senin incelemen") şeffaf metni devralmasın */
.has-name-color::after, [data-name-color]::after { color: var(--fg-2); -webkit-text-fill-color: var(--fg-2); }
/* Büyük avatarlar: biraz daha belirgin */
.profile-avatar.is-premium-avatar, .profile-avatar.is-admin-avatar,
.avatar-preview.is-premium-avatar, .avatar-preview.is-admin-avatar { --ring-w: 3px; --ring-gap: 3px; }

.avatar--xs { width: 20px; height: 20px; font-size: 9px; }
.avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.avatar--md { width: 36px; height: 36px; font-size: 13px; }
.avatar--lg { width: 48px; height: 48px; font-size: 16px; }

/* ===== 6. Formlar ===== */
.form-group { display: grid; gap: 6px; margin-bottom: var(--sp-4); }
.form-group:last-child { margin-bottom: 0; }
.form-group > label, .form-label { font-size: var(--fs-13); font-weight: 600; color: var(--fg-2); }
.form-hint { color: var(--fg-3); font-size: var(--fs-12); line-height: 1.5; }

.input,
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="search"],
.form-group input[type="number"],
.form-group input[type="url"],
.form-group select,
.form-group textarea,
.forum-input,
.forum-select,
.select {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--fg);
    font-size: var(--fs-15);
    outline: none;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form-group textarea, textarea.input { height: auto; min-height: 120px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.input::placeholder, .form-group input::placeholder, .form-group textarea::placeholder, .forum-input::placeholder { color: var(--fg-4); }
.input:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.forum-input:focus,
.forum-select:focus,
.select:focus {
    border-color: var(--brand);
    background: var(--bg);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
select.select, .form-group select, .forum-select, .browse-sort-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    cursor: pointer;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); }

.form-group input[type="file"] {
    width: 100%;
    padding: 10px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-md);
    background: transparent;
    color: var(--fg-2);
    font-size: var(--fs-13);
}
.form-group input[type="file"]::file-selector-button {
    margin-right: 10px;
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--fg);
    font-weight: 600;
    cursor: pointer;
}

/* iOS benzeri anahtar */
.switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 28px;
    flex-shrink: 0;
}
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-slider {
    position: absolute;
    inset: 0;
    border-radius: var(--r-full);
    background: var(--surface-3);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease);
}
.switch-slider::before {
    content: "";
    position: absolute;
    top: 3px; left: 3px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform var(--dur) var(--ease);
}
.switch input:checked + .switch-slider { background: var(--brand); }
.switch input:checked + .switch-slider::before { transform: translateX(18px); }
.switch input:focus-visible + .switch-slider { box-shadow: 0 0 0 3px var(--focus-ring); }

/* ===== 7. Uyarılar ===== */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: var(--sp-4);
    padding: 12px 14px;
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--fg);
    font-size: var(--fs-14);
    line-height: 1.5;
}
.alert-icon { width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; }
.alert-success .alert-icon { color: var(--brand); }
.alert-error { background: var(--danger-soft); }
.alert-error .alert-icon { color: var(--danger); }
.alert p + p { margin-top: 4px; }

/* ===== 8. Boş durum ===== */
.empty-state {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: var(--sp-12) var(--sp-4);
    color: var(--fg-3);
    font-size: var(--fs-14);
    text-align: center;
}
.empty-state-icon, .empty-state > [data-lucide], .empty-state > svg { width: 32px; height: 32px; color: var(--fg-4); margin-bottom: 4px; }
.empty-state-title, .empty-state h2 { color: var(--fg); font-size: var(--fs-16); font-weight: 600; }
.empty-state-sub { color: var(--fg-3); font-size: var(--fs-14); }
.empty-state a { color: var(--brand-ink); font-weight: 600; }

/* ===== 9. Sayfalama ===== */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: var(--sp-8);
    flex-wrap: wrap;
}
.pagination-numbers { display: flex; align-items: center; gap: 4px; }
.pagination-btn, .pagination-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: var(--r-md);
    color: var(--fg-2);
    font-size: var(--fs-14);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pagination-btn:hover, .pagination-num:hover { background: var(--surface-2); color: var(--fg); }
.pagination-num--active, .pagination-num--active:hover { background: var(--invert-bg); color: var(--invert-fg); }
.pagination-btn--disabled { opacity: 0.35; pointer-events: none; }
.pagination-ellipsis { color: var(--fg-4); padding: 0 4px; }
@media (max-width: 480px) {
    .pagination-btn { font-size: 0; padding: 0; width: 36px; }
    .pagination-btn::before { font-size: var(--fs-16); }
    .pagination-btn:first-child::before { content: "‹"; }
    .pagination-btn:last-child::before { content: "›"; }
}

/* ===== 10. İstatistik ===== */
.stat {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--fg-3);
    font-size: var(--fs-12);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.stat-icon { width: 13px !important; height: 13px !important; }
.stat-icon--star { color: var(--rating); fill: var(--rating); stroke: var(--rating); }

/* ===== 11. Açılır menü (header, paylaş, ⋮) ===== */
.menu,
.user-dropdown-menu,
.comment-more-menu-popover,
.notification-dropdown,
.navbar-categories-menu {
    background: var(--surface-overlay);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-pop);
}
.user-dropdown-item,
.comment-more-menu-item,
.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border-radius: var(--r-md);
    color: var(--fg);
    font-size: var(--fs-14);
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease);
}
.user-dropdown-item:hover, .comment-more-menu-item:hover, .menu-item:hover { background: var(--surface-2); color: var(--fg); }
.user-dropdown-item--danger, .comment-more-menu-item.is-danger, .menu-item.is-danger { color: var(--danger); }
.user-dropdown-item--danger:hover, .comment-more-menu-item.is-danger:hover { color: var(--danger); }
.user-dropdown-icon, .comment-more-menu-item svg, .comment-more-menu-item [data-lucide], .menu-item svg {
    width: 17px !important;
    height: 17px !important;
    color: var(--fg-3);
}
.user-dropdown-item--danger .user-dropdown-icon, .comment-more-menu-item.is-danger svg { color: currentColor; }
.user-dropdown-divider, .menu-divider { height: 1px; margin: 6px 4px; background: var(--line); }
.user-dropdown-item--premium { min-height: 48px; }
.user-dropdown-item--premium .user-dropdown-icon { color: var(--premium); }
.user-dropdown-premium-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.user-dropdown-premium-copy > span { font-weight: 600; }
.user-dropdown-premium-copy small { overflow: hidden; color: var(--fg-3); font-size: var(--fs-12); font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }

/* ===== 12. Bildirim (toast) ===== */
.toast {
    position: fixed;
    left: 50%;
    bottom: calc(24px + env(safe-area-inset-bottom));
    z-index: 10000;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: min(92vw, 440px);
    padding: 12px 16px;
    border-radius: var(--r-lg);
    background: var(--invert-bg);
    color: var(--invert-fg);
    font-size: var(--fs-14);
    font-weight: 600;
    box-shadow: var(--shadow-pop);
    opacity: 0;
    transform: translate(-50%, 12px);
    pointer-events: none;
    transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}
.toast--visible { opacity: 1; transform: translate(-50%, 0); }
.toast--error { background: var(--danger); color: #fff; }
.toast-icon { width: 16px; height: 16px; flex-shrink: 0; }
.toast--success .toast-icon { color: var(--brand); }

/* ===== 13. Kaydırma çubuğu ===== */
.scrollbar-minimal { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
.scrollbar-minimal::-webkit-scrollbar { width: 8px; height: 8px; }
.scrollbar-minimal::-webkit-scrollbar-thumb { background: var(--surface-3); border: 2px solid transparent; border-radius: 999px; background-clip: padding-box; }
.scrollbar-minimal::-webkit-scrollbar-track { background: transparent; }

/* ===== 14. Üst bar (header) ===== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--header-bg);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid var(--line);
}
.site-header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "logo nav actions";
    align-items: center;
    column-gap: 28px;
    height: var(--header-h);
}
.site-logo { grid-area: logo; display: inline-flex; align-items: center; }
.site-logo-img { width: auto; height: 30px; }
/* Masaüstünde logo biraz daha büyük; mobil ölçüsü aşağıda ayrı */
@media (min-width: 900px) {
    .site-header .site-logo-img { height: 36px; }
}

.site-nav {
    grid-area: nav;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}
.site-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 36px;
    padding: 0 12px;
    border-radius: var(--r-full);
    color: var(--fg-3);
    font-size: var(--fs-15);
    font-weight: 600;
    white-space: nowrap;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.site-nav-link:hover { color: var(--fg); }
.site-nav-link.is-active { color: var(--fg); }
.site-nav-link .dropdown-caret { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
.navbar-categories-toggle.active .dropdown-caret { transform: rotate(180deg); }
.navbar-categories-toggle.active { color: var(--fg); background: var(--surface-2); }
.site-nav-link--mobile-only { display: none; }

.site-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

/* Kategori açılır menüsü */
.navbar-categories { position: relative; }
.navbar-categories-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: -8px;
    z-index: 120;
    width: min(560px, calc(100vw - 32px));
    padding: 14px;
    background: var(--surface-overlay, #1c1c1e);
    border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
    border-radius: var(--r-lg, 14px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.navbar-categories-menu.active { opacity: 1; visibility: visible; transform: none; }
.navbar-categories-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 6px 10px;
    color: var(--fg);
    font-size: var(--fs-14);
    font-weight: 700;
}
.navbar-categories-all { display: inline-flex; align-items: center; gap: 4px; color: var(--fg-2); font-size: var(--fs-13); font-weight: 500; transition: color var(--dur) var(--ease); }
.navbar-categories-all:hover { color: var(--fg); }
.navbar-categories-all svg, .navbar-categories-all [data-lucide] { width: 14px; height: 14px; }
.navbar-categories-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    max-height: min(55vh, 380px);
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--surface-3) transparent;
}
.navbar-categories-grid::-webkit-scrollbar {
    width: 6px;
}
.navbar-categories-grid::-webkit-scrollbar-track {
    background: transparent;
}
.navbar-categories-grid::-webkit-scrollbar-thumb {
    background: var(--surface-3);
    border-radius: var(--r-full);
}
.navbar-categories-grid::-webkit-scrollbar-thumb:hover {
    background: var(--seg-active);
}
.navbar-category-link {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 0 10px;
    border-radius: var(--r-md);
    color: var(--fg-2);
    font-size: var(--fs-14);
    font-weight: 500;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.navbar-category-link:hover { background: var(--surface-2); color: var(--fg); }
.navbar-category-link.active { color: var(--brand-ink); font-weight: 600; }

/* Arama */
.navbar-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 240px;
    height: 38px;
    border-radius: var(--r-full);
    background: var(--surface-2);
    transition: width 220ms var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.navbar-search:focus-within { width: 300px; background: var(--bg); box-shadow: 0 0 0 1px var(--line-strong); }
.navbar-search-icon { position: absolute; left: 12px; width: 17px; height: 17px; color: var(--fg-3); pointer-events: none; }
.navbar-search-input {
    width: 100%;
    height: 100%;
    padding: 0 14px 0 36px;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: var(--fg);
    font-size: var(--fs-14);
    outline: none;
}
.navbar-search-input::placeholder { color: var(--fg-3); }
.navbar-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.navbar-search-cancel { display: none; }
.site-search-toggle { display: none; }

.navbar-search-suggest {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 130;
    width: 360px;
    max-width: calc(100vw - 24px);
    padding: 6px;
    background: var(--surface-overlay);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-pop);
}
.navbar-search-suggest-list { display: grid; gap: 2px; max-height: 420px; overflow-y: auto; }
.navbar-search-suggest-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 8px;
    border-radius: var(--r-md);
    color: var(--fg);
}
.navbar-search-suggest-item:hover, .navbar-search-suggest-item.is-active { background: var(--surface-2); color: var(--fg); }
.navbar-search-suggest-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.navbar-search-suggest-thumb {
    width: 36px; height: 48px; flex-shrink: 0;
    overflow: hidden; border-radius: var(--r-sm); background: var(--surface-3);
}
.navbar-search-suggest-thumb img { width: 100%; height: 100%; object-fit: cover; }
.navbar-search-suggest-thumb-placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: var(--fg-3); font-weight: 700; }
.navbar-search-suggest-copy { display: grid; min-width: 0; }
.navbar-search-suggest-title { overflow: hidden; font-size: var(--fs-14); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.navbar-search-suggest-meta { overflow: hidden; color: var(--fg-3); font-size: var(--fs-12); white-space: nowrap; text-overflow: ellipsis; }
.navbar-search-suggest-arrow { width: 16px; height: 16px; color: var(--fg-4); }
.navbar-search-suggest-empty { display: block; padding: 14px; color: var(--fg-3); font-size: var(--fs-14); text-align: center; }

/* Bildirim */
.notification-widget { position: relative; }
.navbar-notification-toggle { position: relative; }
.notification-badge {
    position: absolute;
    top: 3px;
    right: 2px;
    display: inline-grid;
    place-items: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 2px solid var(--bg);
    border-radius: var(--r-full);
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.notification-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: -6px;
    z-index: 120;
    display: flex;
    flex-direction: column;
    width: 360px;
    max-height: min(520px, calc(100vh - 90px));
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.notification-dropdown.active { opacity: 1; visibility: visible; transform: none; }
.notification-dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    font-size: var(--fs-16);
}
.notification-more-menu { position: relative !important; top: auto !important; right: auto !important; }
.notification-more-menu .comment-more-menu-popover { width: 220px; }
.notification-more-menu .comment-more-menu-item[hidden] { display: none; }
.notification-dropdown-list { flex: 1; overflow-y: auto; padding: 0 6px; }
.notification-dropdown-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px 10px 10px;
    border-radius: var(--r-md);
    color: var(--fg-2);
    --notif-size: 36px;
    --notif-badge: 17px;
    --notif-ring: var(--surface-overlay);
}
.notification-dropdown-item:hover { background: var(--surface-2); color: var(--fg-2); }
/* Okunmamış: hafif marka tonu (sol noktanın yerini avatar aldı). */
.notification-dropdown-item.is-unread { background: color-mix(in srgb, var(--brand) 8%, transparent); }
.notification-dropdown-item.is-unread:hover { background: color-mix(in srgb, var(--brand) 13%, transparent); }
.notification-dropdown-item .notif-title { font-size: var(--fs-14); }
.notification-dropdown-item .notif-body { font-size: var(--fs-13); }
.notification-dropdown-item:not(.is-unread) .notif-title { font-weight: 500; color: var(--fg-2); }
.notification-dropdown-row { position: relative; }
.notification-dropdown-row .notification-dropdown-item { padding-right: 36px; }
.notification-dropdown-delete {
    position: absolute;
    top: 8px;
    right: 6px;
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: var(--fg-3);
    opacity: 0;
    transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}
.notification-dropdown-delete svg { width: 15px; height: 15px; }
.notification-dropdown-row:hover .notification-dropdown-delete,
.notification-dropdown-delete:focus-visible { opacity: 1; }
.notification-dropdown-delete:hover { background: var(--surface-3); color: var(--fg); }
@media (hover: none) { .notification-dropdown-delete { opacity: 1; } }
.notification-dropdown-empty { display: block; padding: 28px 12px; color: var(--fg-3); font-size: var(--fs-14); text-align: center; }
.notification-dropdown-all {
    display: block;
    padding: 12px;
    border-top: 1px solid var(--line);
    color: var(--fg-2);
    font-size: var(--fs-14);
    font-weight: 600;
    text-align: center;
}
.notification-dropdown-all:hover { color: var(--fg); background: var(--surface-1); }
.notification-dropdown-all { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.notification-dropdown-list { min-height: 0; }

/* Hesap menüsü */
.user-dropdown { position: relative; }
.navbar-user-btn {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    margin-left: 4px;
}
.navbar-avatar { width: 30px; height: 30px; font-size: 12px; }
.navbar-avatar--lg { width: 40px; height: 40px; font-size: 15px; }
.navbar-user-btn:hover .navbar-avatar:not(.is-premium-avatar):not(.is-admin-avatar),
.navbar-user-btn.active .navbar-avatar:not(.is-premium-avatar):not(.is-admin-avatar) { outline: 2px solid var(--surface-3); outline-offset: 2px; }
.user-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 120;
    width: 248px;
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.user-dropdown-menu.active { opacity: 1; visibility: visible; transform: none; }
.user-dropdown-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--r-md);
}
.user-dropdown-profile:hover { background: var(--surface-2); }
.user-dropdown-profile-copy { display: grid; min-width: 0; line-height: 1.3; }
.user-dropdown-profile-copy strong { overflow: hidden; font-size: var(--fs-15); white-space: nowrap; text-overflow: ellipsis; }
.user-dropdown-profile-copy span { color: var(--fg-3); font-size: var(--fs-12); }
.user-dropdown-logout { margin: 0; }

.site-login-link {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 12px;
    color: var(--fg-2);
    font-size: var(--fs-14);
    font-weight: 600;
}
.site-login-link:hover { color: var(--fg); }

/* Tablet/mobil: menü ikinci satıra, arama ikona iner */
@media (max-width: 1023px) {
    .navbar-search { width: 200px; }
    .navbar-search:focus-within { width: 240px; }
    .site-action-desktop { display: none; }
}
@media (max-width: 899px) {
    :root { --header-h: 56px; }
    .site-header-inner {
        grid-template-columns: auto 1fr;
        grid-template-areas: "logo actions" "nav nav";
        height: auto;
        column-gap: 12px;
    }
    .site-logo { height: 52px; }
    .site-logo-img { height: 30px; } /* 52px satıra sığar, üst bar yüksekliği değişmez */
    .site-nav {
        margin: 0 calc(-1 * var(--gutter));
        padding: 0 calc(var(--gutter) - 10px) 6px;
        gap: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .site-nav::-webkit-scrollbar { display: none; }
    .site-nav-link { height: 34px; padding: 0 10px; font-size: var(--fs-15); }
    .site-nav-link.is-active::after {
        content: "";
        position: absolute;
        left: 10px; right: 10px; bottom: -6px;
        height: 2px;
        border-radius: 2px;
        background: var(--fg);
    }
    .site-nav-link--mobile-only { display: inline-flex; }
    .navbar-categories { position: static; }
    .navbar-categories-menu {
        top: calc(100% + 6px);
        left: 12px;
        right: 12px;
        width: auto;
    }
    .navbar-categories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 60vh; }

    .site-search-toggle { display: inline-grid; }
    .navbar-search {
        position: absolute;
        inset: 0 0 auto 0;
        z-index: 5;
        display: none;
        width: auto;
        height: 52px;
        padding: 7px var(--gutter);
        border-radius: 0;
        background: var(--bg);
        gap: 10px;
    }
    .navbar-search:focus-within { width: auto; box-shadow: none; }
    .site-header.is-search-open .navbar-search { display: flex; }
    .navbar-search-icon { left: calc(var(--gutter) + 12px); }
    .navbar-search-input { height: 38px; border-radius: var(--r-full); background: var(--surface-2); font-size: 16px; }
    .navbar-search-cancel { display: inline-flex; flex-shrink: 0; color: var(--fg); font-size: var(--fs-15); font-weight: 500; }
    .navbar-search-suggest { left: 8px; right: 8px; width: auto; max-width: none; }
    .site-register-btn { 
        height: 32px; 
        padding: 0 14px; 
        width: auto !important; 
        flex: none !important; 
        white-space: nowrap !important; 
    }
}
@media (max-width: 380px) {
    .site-login-link { padding: 0 6px; }
    .site-register-btn { padding: 0 10px; font-size: 13px; }
}

/* ===== 15. Alt bilgi (footer) ===== */
.site-footer {
    margin-top: var(--sp-12);
    padding: var(--sp-10) 0 calc(var(--sp-8) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--bg);
    color: var(--fg-3);
    font-size: var(--fs-13);
}
.footer-top { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: var(--sp-10); }
.footer-logo { display: inline-flex; }
.footer-logo .site-logo-img { height: 40px; }
@media (max-width: 639px) { .footer-logo .site-logo-img { height: 34px; } }
.footer-tagline { margin-top: 12px; color: var(--fg-3); line-height: 1.6; }
.footer-app-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.footer-app-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 14px 0 12px;
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--fg);
    transition: background-color var(--dur) var(--ease);
}
.footer-app-link:hover { background: var(--surface-3); color: var(--fg); }
.footer-app-link-icon { width: 18px; height: 18px; }
.footer-app-link-copy { display: grid; line-height: 1.15; }
.footer-app-link-kicker { color: var(--fg-3); font-size: 10px; font-weight: 600; }
.footer-app-link-title { font-size: var(--fs-13); font-weight: 700; }
.footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-6); }
.footer-col-title { margin-bottom: 12px; color: var(--fg); font-size: var(--fs-13); font-weight: 700; letter-spacing: 0; }
.footer-links { display: grid; gap: 8px; }
.footer-links--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.footer-links a { color: var(--fg-3); transition: color var(--dur) var(--ease); }
.footer-links a:hover { color: var(--fg); }
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: var(--sp-10);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--line);
    color: var(--fg-3);
    font-size: var(--fs-12);
}
.footer-legal { display: flex; gap: 16px; }
.footer-legal a { color: var(--fg-3); }
.footer-legal a:hover { color: var(--fg); }
@media (max-width: 899px) {
    .footer-top { grid-template-columns: 1fr; gap: var(--sp-8); }
    .footer-cols { grid-template-columns: 1fr 1fr; }
    .footer-col--wide { grid-column: 1 / -1; }
    .footer-links--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .footer-links--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== 16. Modal / diyalog (tek sistem) ===== */
/* Okuyucu hata bildirimi, şikâyet/engelle, yönetici kullanıcı bilgisi aynı
   .reader-report-popup kabuğunu kullanır; beğenenler, içerik politikası ve
   forum erişim diyalogları aynı görünümü paylaşır. */
.reader-report-popup,
.like-users-modal-overlay,
.content-policy-overlay,
.forum-access-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--scrim);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.reader-report-popup {
    z-index: 225;
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms var(--ease);
}
.reader-report-popup.visible { opacity: 1; pointer-events: auto; }
.community-modal-popup { z-index: 1200; }

.reader-report-card,
.like-users-modal,
.content-policy-dialog,
.forum-access-dialog {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 48px);
    overflow: auto;
    border-radius: var(--r-xl);
    background: var(--surface-overlay);
    box-shadow: var(--shadow-pop);
}
.reader-report-card { transform: translateY(12px); transition: transform 240ms var(--ease); }
.reader-report-popup.visible .reader-report-card { transform: none; }

.reader-report-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 20px 4px;
}
.reader-report-heading { display: grid; gap: 4px; min-width: 0; }
.reader-report-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-18);
    font-weight: 700;
}
.reader-report-title svg, .reader-report-title [data-lucide] { width: 18px; height: 18px; color: var(--fg-3); }
.reader-report-subtitle { color: var(--fg-3); font-size: var(--fs-14); line-height: 1.5; }
.reader-report-close,
.like-users-modal-close,
.forum-access-dialog__close {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--fg-2);
}
.reader-report-close:hover, .like-users-modal-close:hover, .forum-access-dialog__close:hover { background: var(--surface-3); color: var(--fg); }
.reader-report-close svg, .like-users-modal-close svg, .forum-access-dialog__close svg,
.reader-report-close [data-lucide], .like-users-modal-close [data-lucide] { width: 16px; height: 16px; }

.reader-report-form { display: grid; gap: 14px; padding: 16px 20px 20px; }
.reader-report-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.reader-report-meta-item {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 26px;
    padding: 0 10px;
    border-radius: var(--r-full);
    background: var(--surface-2);
    color: var(--fg-2);
    font-size: var(--fs-12);
    font-weight: 600;
    overflow-wrap: anywhere;
}
.reader-report-label { font-size: var(--fs-13); font-weight: 600; color: var(--fg-2); }
.reader-report-field { display: grid; gap: 6px; }
.reader-report-form textarea,
.reader-report-form select,
.reader-report-captcha-row input {
    width: 100%;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--fg);
    font-size: var(--fs-15);
    outline: none;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.reader-report-form textarea { min-height: 110px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.reader-report-form select { height: 44px; padding: 0 36px 0 14px; appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.reader-report-form textarea:focus,
.reader-report-form select:focus,
.reader-report-captcha-row input:focus { border-color: var(--brand); background-color: var(--bg); }
.reader-report-captcha { display: grid; gap: 6px; }
.reader-report-captcha-row { display: grid; grid-template-columns: minmax(7rem, 1fr) 4.5rem 44px; align-items: center; gap: 8px; }
.reader-report-captcha-question {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 14px;
    border-radius: var(--r-md);
    background: var(--surface-1);
    border: 1px dashed var(--line-strong);
    font-weight: 700;
    letter-spacing: 0.04em;
}
.reader-report-captcha-row input { height: 44px; padding: 0 8px; text-align: center; }
.reader-report-captcha-refresh {
    display: inline-grid;
    place-items: center;
    height: 44px;
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--fg-2);
}
.reader-report-captcha-refresh:hover:not(:disabled) { background: var(--surface-3); color: var(--fg); }
.reader-report-captcha-refresh:disabled { cursor: wait; opacity: 0.6; }
.reader-report-captcha-refresh svg { width: 16px; height: 16px; }
.reader-report-status { padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); color: var(--fg-2); font-size: var(--fs-14); }
.reader-report-status.is-success { background: var(--brand-soft); color: var(--brand-ink); }
.reader-report-status.is-error { background: var(--danger-soft); color: var(--danger); }
.reader-report-actions { display: flex; justify-content: flex-end; gap: 8px; }

.community-confirm-copy { display: grid; justify-items: start; gap: 10px; }
.community-confirm-copy p { color: var(--fg-2); font-size: var(--fs-14); line-height: 1.6; }
.community-confirm-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--r-md);
    background: var(--danger-soft);
    color: var(--fg-2);
    font-size: var(--fs-14);
    line-height: 1.55;
}
.community-confirm-note svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--danger); }
.community-report-success { display: grid; justify-items: center; gap: 8px; padding: 16px 8px 4px; text-align: center; }
.community-report-success > svg { width: 40px; height: 40px; color: var(--brand); }
.community-report-success > p { color: var(--fg-2); font-size: var(--fs-14); }
.community-info-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; font-size: var(--fs-14); line-height: 1.5; }
.community-info-list dt { color: var(--fg-3); }
.community-info-list dd { color: var(--fg); overflow-wrap: anywhere; }
.community-info-status { color: var(--fg-3); font-size: var(--fs-14); }

/* Beğenenler listesi */
.like-users-modal { display: flex; flex-direction: column; max-width: 420px; max-height: min(620px, calc(100vh - 48px)); overflow: hidden; }
.like-users-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 12px 20px; border-bottom: 1px solid var(--line); }
.like-users-modal-title-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.like-users-modal-icon { display: inline-grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: var(--surface-2); color: var(--like); }
.like-users-modal-icon svg { width: 15px; height: 15px; fill: currentColor; }
.like-users-modal h2 { overflow: hidden; font-size: var(--fs-16); white-space: nowrap; text-overflow: ellipsis; }
.like-users-modal-list { min-height: 8rem; overflow-y: auto; padding: 6px; }
.like-users-modal-items { display: grid; gap: 2px; }
.like-user-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); color: var(--fg); }
.like-user-row:hover { background: var(--surface-2); color: var(--fg); }
.like-user-avatar { width: 36px; height: 36px; font-size: 13px; }
.like-user-main { display: grid; min-width: 0; line-height: 1.3; }
.like-user-main strong { overflow: hidden; font-size: var(--fs-14); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.like-user-main small, .like-users-empty { color: var(--fg-3); font-size: var(--fs-12); }
.like-users-empty { padding: 32px 16px; text-align: center; }
.like-users-load-more-wrap { display: flex; justify-content: center; padding: 8px 0 6px; }

/* İçerik politikası */
.content-policy-overlay { z-index: 9998; }
.content-policy-dialog { max-width: 460px; padding: 24px; }
.content-policy-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 50%; background: var(--surface-2); color: var(--fg); }
.content-policy-icon svg { width: 22px; height: 22px; }
.content-policy-title { margin-bottom: 8px; font-size: var(--fs-20); }
.content-policy-text { color: var(--fg-2); font-size: var(--fs-14); line-height: 1.65; }
.content-policy-text p + p { margin-top: 8px; }
.content-policy-text strong { color: var(--fg); }
.content-policy-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.content-policy-dialog--warning .content-policy-icon { background: var(--danger-soft); color: var(--danger); }

/* Küfür uyarısı (forum konu formu, sunucu tarafında çizilir) */
.forum-profanity-warning { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: start; margin: 4px 0 16px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--line)); border-radius: var(--r-md); background: var(--danger-soft); }
.forum-profanity-warning > svg { width: 20px; height: 20px; margin-top: 2px; color: var(--danger); }
.forum-profanity-warning strong { display: block; margin-bottom: 4px; color: var(--fg); font-size: var(--fs-15); }
.forum-profanity-warning p { color: var(--fg-2); font-size: var(--fs-14); line-height: 1.6; }
.forum-profanity-warning-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; }

/* Forum erişim diyaloğu */
.forum-access-overlay { z-index: 9999; }
.forum-access-dialog { max-width: 400px; padding: 32px 24px 24px; text-align: center; }
.forum-access-dialog__close { position: absolute; top: 12px; right: 12px; }
.forum-access-mark {
    --forum-access-mark-size: 64px;
    display: grid;
    place-items: center;
    width: var(--forum-access-mark-size);
    height: var(--forum-access-mark-size);
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--fg);
}
.forum-access-mark span { display: grid; place-items: center; }
.forum-access-mark svg { width: 26px; height: 26px; }
.forum-access-dialog__mark { margin: 0 auto 16px; }
.forum-access-dialog__eyebrow { display: block; margin-bottom: 6px; color: var(--fg-3); font-size: var(--fs-12); font-weight: 600; }
.forum-access-dialog h2 { margin-bottom: 8px; font-size: var(--fs-20); }
.forum-access-dialog p { color: var(--fg-2); font-size: var(--fs-14); line-height: 1.6; }
.forum-access-dialog__actions { display: flex; justify-content: center; margin-top: 22px; }
.forum-access-dialog__actions .btn { min-width: 140px; }

@media (max-width: 639px) {
    .reader-report-popup,
    .like-users-modal-overlay,
    .content-policy-overlay,
    .forum-access-overlay { align-items: flex-end; padding: 0; }
    .reader-report-card,
    .like-users-modal,
    .content-policy-dialog,
    .forum-access-dialog {
        max-width: none;
        max-height: 88vh;
        border-radius: var(--r-xl) var(--r-xl) 0 0;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .content-policy-dialog { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
    .reader-report-actions, .content-policy-actions { flex-direction: column-reverse; }
    .reader-report-actions .btn, .content-policy-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
    .forum-access-overlay:not([hidden]) .forum-access-dialog,
    .content-policy-dialog,
    .like-users-modal-overlay:not([hidden]) .like-users-modal { animation: modal-enter 200ms var(--ease) both; }
}
@keyframes modal-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Gizli bal küpü alanı */
.auth-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* ===== 17. Mobil uygulama tanıtımı ===== */
.mobile-app-promo {
    position: fixed;
    z-index: 240;
    left: 50%;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: min(480px, calc(100% - 24px));
    padding: 14px;
    border-radius: var(--r-xl);
    background: var(--surface-overlay);
    box-shadow: var(--shadow-pop);
    opacity: 0;
    transform: translate(-50%, calc(100% + 40px));
    transition: opacity 200ms ease, transform 260ms cubic-bezier(0.4, 0, 1, 1);
}
.mobile-app-promo.is-visible { opacity: 1; transform: translate(-50%, 0); transition: opacity 260ms ease-out, transform 460ms cubic-bezier(0.16, 1.1, 0.3, 1); }
.mobile-app-promo__close { position: absolute; top: 8px; right: 8px; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--fg-3); }
.mobile-app-promo__close:hover { background: var(--surface-2); color: var(--fg); }
.mobile-app-promo__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mobile-app-promo__main { display: flex; align-items: center; gap: 12px; min-width: 0; padding-right: 30px; }
.mobile-app-promo__app-icon { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 12px; }
.mobile-app-promo__copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mobile-app-promo__eyebrow { margin-bottom: 2px; color: var(--fg-3); font-size: 11px; font-weight: 600; }
.mobile-app-promo__copy strong { color: var(--fg); font-size: var(--fs-15); font-weight: 700; }
.mobile-app-promo__copy > span:last-child { margin-top: 2px; color: var(--fg-3); font-size: var(--fs-12); line-height: 1.4; }
.premium-promo__icon { display: inline-grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px; background: var(--premium-soft); color: var(--premium); }
.premium-promo__icon svg { width: 24px; height: 24px; fill: currentColor; }
.premium-promo .mobile-app-promo__eyebrow { color: var(--premium); }
.mobile-app-promo__action.premium-promo__action { background: #F6C343; color: #3A2600; }
.mobile-app-promo__action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    margin-top: 12px;
    border-radius: var(--r-md);
    background: var(--brand);
    color: var(--on-brand);
    font-size: var(--fs-14);
    font-weight: 700;
}
.mobile-app-promo__action:hover { color: var(--on-brand); }
.mobile-app-promo__action svg { width: 17px; height: 17px; flex: 0 0 17px; }
@media (prefers-reduced-motion: reduce) { .mobile-app-promo { transition: none; } }

/* ===== 18. Kapak ve kartlar ===== */
.cover-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background: var(--surface-2);
    color: var(--fg-4);
    font-size: var(--fs-28);
    font-weight: 800;
}
.cover-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--r-xs);
    background: rgba(0, 0, 0, 0.72);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.cover-badge--up { background: var(--brand); color: var(--on-brand); }
.cover-badge--end { background: rgba(0, 0, 0, 0.72); }

/* Sütun sayısı 3 / 4 / 6: sayfa başına 24 seri her satırı tam doldurur */
.series-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 24px 16px;
}
@media (max-width: 1023px) {
    .series-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
    .series-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; }
}

.series-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: var(--fg); }
.series-card:hover { color: var(--fg); }
.series-card-cover {
    position: relative;
    aspect-ratio: var(--cover-ratio);
    overflow: hidden !important;
    border-radius: var(--r-md);
    background: var(--surface-2);
    isolation: isolate;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: -webkit-radial-gradient(white, black);
    transform: translateZ(0);
}
.update-card-cover,
.popular-series-cover,
.series-detail-cover {
    position: relative;
    overflow: hidden !important;
    isolation: isolate;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: -webkit-radial-gradient(white, black);
    transform: translateZ(0);
}
.series-card-cover::after,
.update-card-cover::after,
.popular-series-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(127, 127, 127, 0.12);
    pointer-events: none;
    z-index: 5;
}
.series-card-cover img,
.update-card-cover img,
.popular-series-cover img,
.series-detail-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease), filter 300ms var(--ease); }
.series-card:hover .series-card-cover:not(.adult-blur) img,
.update-card:hover .update-card-cover:not(.adult-blur) img,
.popular-series-card:hover .popular-series-cover:not(.adult-blur) img { transform: scale(1.03); }
.series-card-cover.adult-blur:not(.unblurred) img,
.update-card-cover.adult-blur:not(.unblurred) img,
.popular-series-cover.adult-blur:not(.unblurred) img,
.series-detail-cover.adult-blur:not(.unblurred) img,
.adult-cover-wrapper.adult-blur:not(.unblurred) img,
.adult-blur:not(.unblurred) > img,
.adult-blur:not(.unblurred) img,
img.adult-blur:not(.unblurred) {
    filter: blur(16px) !important;
    transform: scale(1.15) !important;
}
.adult-blur.unblurred img,
.series-card-cover.unblurred img,
.update-card-cover.unblurred img,
.popular-series-cover.unblurred img,
.series-detail-cover.unblurred img,
.adult-cover-wrapper.unblurred img,
img.adult-blur.unblurred {
    filter: none !important;
    transform: none !important;
}
.adult-blur {
    position: relative !important;
    overflow: hidden !important;
    border-radius: var(--r-md, 12px) !important;
    isolation: isolate;
}
.adult-unblur-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 25 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.45) !important;
    cursor: pointer !important;
    transition: opacity 0.25s ease, background 0.25s ease !important;
    border-radius: inherit !important;
    pointer-events: auto !important;
}
.adult-unblur-overlay:hover {
    background: rgba(0, 0, 0, 0.6) !important;
}
.adult-unblur-overlay .unblur-action-btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(18, 18, 22, 0.92) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    margin: 0 auto !important;
    pointer-events: none !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.adult-unblur-overlay:hover .unblur-action-btn {
    transform: scale(1.15) !important;
    background: rgba(28, 28, 35, 0.98) !important;
    border-color: rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.95), 0 0 14px rgba(255, 255, 255, 0.25) !important;
}
.adult-unblur-overlay .unblur-action-btn svg {
    width: 22px !important;
    height: 22px !important;
    stroke: #ffffff !important;
    stroke-width: 2.2 !important;
    fill: none !important;
    display: block !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8)) !important;
}
.series-card-body { display: grid; gap: 2px; min-width: 0; }
.series-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--fs-14);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.005em;
}
.series-card-author,
.series-card-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
    color: var(--fg-3);
    font-size: var(--fs-12);
    white-space: nowrap;
    text-overflow: ellipsis;
}
.series-card-author { display: block; }
.series-card-state { color: var(--fg-3); }
.series-card-state.is-done { color: var(--brand-ink); font-weight: 600; }
.series-card-rank {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 24px 12px 6px 10px;
    color: #ffffff;
    font-size: var(--fs-28, 28px);
    font-weight: 900;
    font-style: italic;
    line-height: 1;
    letter-spacing: -0.04em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    z-index: 10;
}
.library-card-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.25);
}
.library-card-progress > span { display: block; height: 100%; background: var(--brand); }

/* ===== 19. Ana sayfa ===== */
.page-home main.container { padding-top: var(--sp-5); }
.home-section { margin-top: var(--sp-10); }
.home-section:first-child { margin-top: 0; }
@media (max-width: 639px) { .home-section { margin-top: var(--sp-8); } }

/* Manşet — sade: görsel, başlık, tek satır özet, iki eylem */
.home-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-xl);
    background: #000;
    isolation: isolate;
}
.home-headline-swiper { width: 100%; }
.hero-slide {
    position: relative;
    display: block;
    /* Görseller 16:9; masaüstünde daha az kırpılsın diye bant biraz daha yüksek (~2.2:1) */
    height: clamp(340px, 42vw, 520px);
    overflow: hidden;
    background: #000;
    color: #fff;
}
.hero-slide-media { position: absolute; inset: 0; display: block; }
.hero-slide-media img,
.hero-slide-media video { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    object-position: center 22%; 
    pointer-events: none;
    transform: translateZ(0);
}
.hero-slide-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.35) 42%, rgba(0, 0, 0, 0) 68%),
                linear-gradient(0deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 40%);
}
.hero-slide-placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: rgba(255, 255, 255, 0.16); font-size: 6rem; font-weight: 800; }
.hero-slide-content {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    display: grid;
    gap: 8px;
    width: min(520px, 100%);
    padding: 0 40px 40px;
}
.hero-slide-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.7); font-size: var(--fs-13); font-weight: 500; }
.hero-slide-meta .dot-sep { color: rgba(255, 255, 255, 0.4); }
.hero-slide-title { font-size: clamp(1.75rem, 3.4vw, 2.625rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; }
.hero-slide-title a { color: #fff; }
.hero-slide-desc {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--fs-14);
    line-height: 1.5;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.hero-slide-actions { display: flex; gap: 8px; margin-top: 8px; }
.hero-slide-read { background: #fff; color: #000; }
.hero-slide-read:hover { background: rgba(255, 255, 255, 0.86); color: #000; opacity: 1; }
.hero-slide-btn { background: rgba(255, 255, 255, 0.16); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hero-slide-btn:hover { background: rgba(255, 255, 255, 0.26); color: #fff; }

/* Kontroller: sağ altta tek küçük grup */
.hero-controls {
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: var(--r-full);
    background: rgba(0, 0, 0, 0.38);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.hero-arrow {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    transition: background-color var(--dur) var(--ease);
}
.hero-arrow:hover { background: rgba(255, 255, 255, 0.18); }
.hero-arrow svg, .hero-arrow [data-lucide] { width: 17px; height: 17px; }
.home-hero .hero-pagination.swiper-pagination-bullets {
    position: static;
    display: flex;
    align-items: center;
    gap: 5px;
    width: auto;
    padding: 0 4px;
    transform: none;
}
.hero-pagination .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    margin: 0 !important;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.45);
    opacity: 1;
    transition: width 240ms var(--ease), background-color 240ms var(--ease);
}
.hero-pagination .swiper-pagination-bullet-active { width: 18px; background: #fff; }

/* Swiper hazır olmadan yalnızca ilk manşet görünsün (alt alta dizilmesin) */
.home-headline-swiper:not(.swiper-initialized) .swiper-wrapper { display: flex; }
.home-headline-swiper:not(.swiper-initialized) .swiper-slide { flex: 0 0 100%; }
.home-headline-swiper:not(.swiper-initialized) .swiper-slide:not(:first-child) { display: none; }
.hero-slide-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }

@media (max-width: 639px) {
    .page-home main.container { padding-top: 0; }
    .home-hero { margin: 0 calc(-1 * var(--gutter)); border-radius: 0; }
    .hero-slide { height: min(125vw, 72vh); min-height: 380px; }
    .hero-slide-media::after { background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 40%, rgba(0, 0, 0, 0) 62%); }
    .hero-slide-content { gap: 6px; padding: 0 var(--gutter) 52px; }
    .hero-slide-desc { display: none; }
    .hero-slide-actions .btn { flex: 1; }
    .hero-controls { left: 0; right: 0; bottom: 18px; justify-content: center; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .hero-arrow { display: none; }
}

/* Yatay raylar */
.rail { overflow: hidden; }
.rail .swiper-wrapper { align-items: stretch; }
/* Swiper yüklenmeden önce kart genişliği aynı kalsın */
.rail:not(.swiper-initialized) .swiper-wrapper { display: flex; gap: 12px; }
.rail:not(.swiper-initialized) .swiper-slide { flex: 0 0 calc((100% - 12px * 3) / 3.1); }
.home-popular-swiper:not(.swiper-initialized) .swiper-slide { flex-basis: calc((100% - 12px * 2) / 2.2); }
@media (min-width: 640px) {
    .rail:not(.swiper-initialized) .swiper-wrapper { gap: 14px; }
    .rail:not(.swiper-initialized) .swiper-slide { flex-basis: calc((100% - 14px * 4) / 4.2); }
    .home-popular-swiper:not(.swiper-initialized) .swiper-slide { flex-basis: calc((100% - 14px * 3) / 3.2); }
}
@media (min-width: 900px) {
    .rail:not(.swiper-initialized) .swiper-wrapper { gap: 16px; }
    .rail:not(.swiper-initialized) .swiper-slide { flex-basis: calc((100% - 16px * 4) / 5); }
    .home-popular-swiper:not(.swiper-initialized) .swiper-slide { flex-basis: calc((100% - 16px * 3) / 4); }
}
@media (min-width: 1200px) {
    .rail:not(.swiper-initialized) .swiper-slide { flex-basis: calc((100% - 16px * 5) / 6); }
    .home-popular-swiper:not(.swiper-initialized) .swiper-slide { flex-basis: calc((100% - 16px * 4) / 5); }
}
.rail-toolbar { display: flex; align-items: center; gap: 12px; margin: -4px 0 16px; }
/* Popüler: dönem sekmeleri başlık ile "Tümü" arasında ortada */
.popular-header { display: grid; grid-template-columns: 1fr auto auto; align-items: center; column-gap: 16px; }
.popular-header .popular-period-tabs { padding-bottom: 0; }
@media (max-width: 767px) {
    .popular-header { grid-template-columns: 1fr auto; row-gap: 12px; }
    .popular-header .popular-period-tabs { grid-column: 1 / -1; grid-row: 2; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
    /* Taşarsa sola kırpılmadan kaydırılabilsin diye auto kenar boşluklarıyla ortalanır */
    .popular-header .popular-period-tabs > :first-child { margin-left: auto; }
    .popular-header .popular-period-tabs > :last-child { margin-right: auto; }
}
.rail-toolbar .chip-row { min-width: 0; }
.rail-wrap { position: relative; }
/* Oklar rayın iki yanında, kapakların ortasında; yalnızca üzerine gelince belirgin */
.rail-arrow {
    position: absolute;
    top: var(--rail-arrow-top, 38%);
    z-index: 10;
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border-radius: 50%;
    background: var(--surface-overlay);
    color: var(--fg);
    box-shadow: var(--shadow-pop);
    opacity: 0.92;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.rail-arrow--prev { left: -20px; }
.rail-arrow--next { right: -20px; }
.rail-arrow:hover, .rail-arrow:focus-visible { opacity: 1; }
.rail-arrow:hover { background: var(--surface-3); transform: scale(1.06); }
.rail-arrow svg, .rail-arrow [data-lucide] { width: 20px; height: 20px; }
.rail-wrap .rail-arrow.swiper-button-disabled { opacity: 0 !important; pointer-events: none; }
.rail-wrap .rail-arrow.swiper-button-lock { display: none; }
@media (hover: none) { .rail-arrow { display: none; } }
@media (max-width: 639px) {
    .rail-arrow { display: none; }
    .rail { margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); overflow: hidden; }
    .rail.swiper-initialized { overflow: visible; }
    .home-section:has(.rail) { overflow: hidden; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
}

/* Yeni bölüm kartı */
.update-card { display: grid; gap: 8px; min-width: 0; }
.update-card-cover {
    position: relative;
    display: block;
    aspect-ratio: var(--cover-ratio);
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--surface-2);
}
.update-card-body { display: grid; gap: 2px; min-width: 0; }
.update-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--fs-14);
    font-weight: 600;
    line-height: 1.35;
}
.update-card-title a { color: var(--fg); }
.update-card-meta { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--fg-3); font-size: var(--fs-12); white-space: nowrap; }
.update-card-chapter { color: var(--fg-2); font-weight: 500; }
.update-card-chapter:hover { color: var(--fg); }
.update-card-time { overflow: hidden; text-overflow: ellipsis; }

/* Popüler (sıralı) kart: büyük sıra rakamı kapağın arkasında */
.popular-series-stage { position: relative; transition: opacity var(--dur) var(--ease); }
.popular-series-stage.is-loading { opacity: 0.45; pointer-events: none; }
.popular-series-error { padding: 12px 0; color: var(--danger); font-size: var(--fs-14); }
.home-popular-swiper { --rail-arrow-top: 42%; }
.popular-series-card {
    position: relative;
    display: grid;
    grid-template-columns: 22% minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 0;
    row-gap: 8px;
    min-width: 0;
    container-type: inline-size;
}
.popular-series-rank {
    grid-column: 1 / 3;
    grid-row: 1;
    z-index: 0;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: var(--bg);
    font-size: 58cqw;
    font-weight: 800;
    line-height: 0.78;
    letter-spacing: -0.06em;
    -webkit-text-stroke: 2.5px var(--fg-4);
    paint-order: stroke fill;
    user-select: none;
    pointer-events: none;
}
/* İki basamaklı sıralar alt alta */
.popular-series-rank--stacked { font-size: 34cqw; line-height: 0.82; letter-spacing: 0; }
.popular-series-rank-digit { display: block; }
.popular-series-cover {
    grid-column: 2;
    grid-row: 1;
    z-index: 1;
    position: relative;
    display: block;
    aspect-ratio: var(--cover-ratio);
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--surface-2);
    box-shadow: -8px 0 16px -6px rgba(0, 0, 0, 0.55);
}
[data-theme="light"] .popular-series-cover { box-shadow: -8px 0 16px -8px rgba(0, 0, 0, 0.25); }
.popular-series-placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: var(--fg-4); font-size: var(--fs-32); font-weight: 800; }
.popular-series-body { grid-column: 2; grid-row: 2; display: grid; align-content: start; min-width: 0; }
.popular-series-position { display: none; }
.popular-series-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--fs-14);
    font-weight: 600;
    line-height: 1.35;
}
.popular-series-title a { color: var(--fg); }
.popular-series-card:hover .popular-series-rank { -webkit-text-stroke-color: var(--fg-3); }

/* Segment kontrol (mobil sekmeler) */
.segmented {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 2px;
    padding: 3px;
    border-radius: var(--r-md);
    background: var(--surface-2);
}
.segmented-item {
    height: 32px;
    padding: 0 14px;
    border-radius: 6px;
    color: var(--fg-2);
    font-size: var(--fs-13);
    font-weight: 600;
    white-space: nowrap;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.segmented-item:hover { color: var(--fg); }
.segmented-item.is-active { background: var(--seg-active); color: var(--fg); box-shadow: var(--shadow-sm); }

/* Topluluk akışı */
/* Topluluk: diğer bölümlerden hafif zemin tonuyla ayrılır */
.home-community { padding: 20px 24px 12px; border-radius: var(--r-xl); background: var(--surface-1); }
.home-community .feed-item { border-bottom-color: var(--line); }
[data-theme="light"] .home-community { background: #F2F2F7; --surface-2: #FFFFFF; --surface-3: #E5E5EA; --seg-active: #FFFFFF; --line: #E0E0E5; }
[data-theme="light"] .home-community .segmented { background: #E5E5EA; }
.home-community-tabs { display: none; margin-bottom: 8px; }
.home-community-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.home-community-title { margin-bottom: 4px; color: var(--fg-2); font-size: var(--fs-14); font-weight: 600; }
.home-community-actions { display: flex; gap: 8px; margin-top: 12px; }
@media (max-width: 639px) {
    .home-community { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); border-radius: 0; }
}
@media (max-width: 899px) {
    .home-community { padding: 16px var(--gutter) 8px; }
    .home-community-tabs { display: grid; width: 100%; }
    .home-community-grid { grid-template-columns: 1fr; gap: 0; }
    .home-community-col { display: none; }
    .home-community-col.is-active { display: block; }
    .home-community-title { display: none; }
}

.feed-list { display: grid; }
.feed-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}
.feed-item:last-child { border-bottom: 0; }
.feed-item--topic { grid-template-columns: 36px minmax(0, 1fr); align-items: start; }
.feed-cover {
    display: block;
    width: 44px;
    aspect-ratio: var(--cover-ratio);
    overflow: hidden;
    border-radius: var(--r-sm);
    background: var(--surface-2);
}
.feed-cover img { width: 100%; height: 100%; object-fit: cover; }
.feed-cover > span { display: grid; place-items: center; width: 100%; height: 100%; color: var(--fg-4); font-weight: 700; }
.feed-body { display: grid; gap: 4px; min-width: 0; }
.feed-target { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-13); font-weight: 600; }
.feed-target a { overflow: hidden; color: var(--fg); white-space: nowrap; text-overflow: ellipsis; }
.feed-target .feed-target-sub { flex-shrink: 0; color: var(--fg-3); font-weight: 500; }
.feed-target .feed-target-sub:hover { color: var(--fg); }
.feed-rating { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; margin-left: auto; color: var(--fg-2); font-size: var(--fs-12); font-weight: 600; }
.feed-rating svg, .feed-rating [data-lucide] { width: 12px; height: 12px; color: var(--rating); fill: var(--rating); }
.feed-text, .feed-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--fg-2);
    font-size: var(--fs-14);
    line-height: 1.45;
    overflow-wrap: anywhere;
}
.feed-text:hover { color: var(--fg); }
.feed-title { color: var(--fg); font-weight: 600; }
.feed-meta { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--fg-3); font-size: var(--fs-12); white-space: nowrap; }
.feed-meta a { color: var(--fg-3); }
.feed-meta a:hover { color: var(--fg); }
.feed-user { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.feed-user-name { overflow: hidden; max-width: 130px; color: var(--fg-2); font-weight: 500; text-overflow: ellipsis; }
.feed-reply-to { overflow: hidden; text-overflow: ellipsis; }
.feed-avatar.avatar--xs { width: 18px; height: 18px; font-size: 9px; }
.feed-empty { padding: 24px 0; color: var(--fg-3); font-size: var(--fs-14); }

/* SEO metni */
.seo-content {
    max-width: 820px;
    margin: var(--sp-12) auto 0;
    padding-top: var(--sp-6);
    border-top: 1px solid var(--line);
    color: var(--fg-3);
    font-size: var(--fs-13);
    line-height: 1.7;
}
.seo-content h2 { margin-bottom: 8px; color: var(--fg-2); font-size: var(--fs-15); }
.seo-content h3 { margin: 16px 0 6px; color: var(--fg-2); font-size: var(--fs-14); }
.seo-content p + p { margin-top: 8px; }
.seo-content strong { color: var(--fg-2); font-weight: 600; }
.seo-content a { color: var(--fg-2); text-decoration: underline; }

/* ===== 20. Seri detay ===== */
.page-series main.container { padding-top: 0; }
.series-page { max-width: 1040px; margin: 0 auto; }
.series-detail { position: relative; padding: var(--sp-8) 0 var(--sp-6); }
/* Arka plan bandı: video → kapak → yok. Bandın üzerinde metin durmaz;
   yalnızca kapak posteri bandın alt kısmına biner, iki temada da okunur. */
.series-detail { --hero-h: 0px; --hero-overlap: 0px; }
.series-detail.has-hero-video,
.series-detail.has-hero-banner { --hero-h: clamp(320px, 38vw, 460px); --hero-overlap: 170px; }
/* Videosuz seride kapak yalnızca başlığın arkasında hafif bir zemin tonu verir, içeriği aşağı itmez */
.series-detail.has-hero-cover { --hero-h: 100%; }
.series-detail.has-hero-video,
.series-detail.has-hero-banner { padding-top: calc(var(--hero-h) - var(--hero-overlap)); }
.series-hero-media {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: -1;
    width: 100vw;
    height: var(--hero-h);
    overflow: hidden;
    transform: translateX(-50%);
    background: var(--bg);
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 50%, transparent 100%);
}
.series-hero-media video, .series-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.series-hero-media--video video { object-position: center 35%; }
.series-hero-media--image img { object-position: center 30%; filter: brightness(0.9); }
.series-hero-media--cover { -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, transparent 100%); }
.series-hero-media--cover img { object-position: center 30%; filter: blur(60px) saturate(1.2); transform: scale(1.2); opacity: 0.28; }
.series-hero-media--cover.adult-bg-blur:not(.unblurred) img { filter: blur(80px) brightness(0.4) !important; opacity: 0.12 !important; }
[data-theme="light"] .series-hero-media--cover img { opacity: 0.22; }
.has-hero-video .series-detail-info,
.has-hero-banner .series-detail-info { padding-top: calc(var(--hero-overlap) + 6px); }
.series-page { position: relative; isolation: isolate; }
body.page-series { overflow-x: hidden; overflow-x: clip; }
.series-detail-header { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 36px; align-items: start; }
.series-detail-cover {
    position: relative;
    aspect-ratio: var(--cover-ratio);
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--surface-2);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.series-detail-cover img { width: 100%; height: 100%; object-fit: cover; }
.series-detail-info { display: grid; gap: 12px; min-width: 0; align-content: start; padding-top: 4px; }
.series-detail-kicker { display: flex; align-items: center; gap: 6px; color: var(--fg-3); font-size: var(--fs-13); font-weight: 600; }
.series-status--ongoing { color: var(--ongoing); }
.series-detail-kicker { flex-wrap: wrap; row-gap: 6px; }
.series-translation {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px 2px 7px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface-2); color: var(--fg-2);
    font-size: var(--fs-12); font-weight: 600; line-height: 1.5; white-space: nowrap;
}
.series-translation svg, .series-translation [data-lucide] { width: 13px; height: 13px; }
.series-translation--ongoing { color: var(--ongoing); }
.series-translation--completed { color: #30D158; }
[data-theme="light"] .series-translation--completed { color: #248A3D; }
.series-translation--hiatus { color: var(--warning); }
.series-translation--dropped { color: var(--danger); }
.series-detail-title { font-size: clamp(1.625rem, 3.4vw, 2.375rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.series-detail-alt-title { margin-top: -6px; color: var(--fg-3); font-size: var(--fs-14); }
.series-detail-author { color: var(--fg-2); font-size: var(--fs-15); font-weight: 500; }
.series-detail-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; color: var(--fg-2); font-size: var(--fs-14); }
.series-stat { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.series-stat svg, .series-stat [data-lucide] { width: 16px; height: 16px; color: var(--fg-3); }
.series-stat--rating svg, .series-stat--rating [data-lucide] { color: var(--rating); fill: var(--rating); }
.series-stat--rating strong { color: var(--fg); font-weight: 700; }
.series-stat-sub { color: var(--fg-3); }
.series-stat-sub:hover { color: var(--fg); }
.series-detail-genres { display: flex; flex-wrap: wrap; gap: 6px; }
.series-detail-genres .tag-link { height: 28px; font-size: var(--fs-12); }

.series-detail-desc { --series-desc-collapsed-height: 4.8rem; max-width: 720px; }
.series-detail-desc-content { color: var(--fg-2); font-size: var(--fs-14); line-height: 1.65; overflow-wrap: anywhere; }
.series-detail-desc.is-collapsible:not(.is-expanded) .series-detail-desc-content {
    max-height: var(--series-desc-collapsed-height);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
    mask-image: linear-gradient(180deg, #000 60%, transparent);
}
.series-detail-desc-content p + p { margin-top: 8px; }
.series-detail-desc-toggle { margin-top: 4px; color: var(--fg); font-size: var(--fs-13); font-weight: 600; }

.series-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
/* İkincil eylemler ana renkte (docs/theme.md): görünür kalsınlar, birincil düğme yine dolu tek düğme. */
.series-detail-actions .btn-ghost, .series-detail-actions .btn-ghost:hover, .series-detail-actions .series-share-toggle { color: var(--brand-ink); }
.series-cta { min-width: 200px; }
.series-cta-sub { margin-left: 2px; padding-left: 8px; border-left: 1px solid rgba(0, 0, 0, 0.2); font-weight: 500; opacity: 0.8; }
.series-library-action { display: inline-flex; align-items: center; gap: 8px; }
.series-library-action .library-form { display: inline-flex; }
/* Kütüphane durumu: marka rengini birincil eyleme bırak */
.series-library-action [data-library-button].btn-primary,
.series-library-action [data-library-button].btn-primary:hover { background: var(--surface-2); color: var(--brand-ink); }
.series-library-action [data-library-button].is-pending { opacity: 0.6; }
.series-library-preview:empty { display: none; }
.icon-btn--boxed { width: 48px; height: 48px; border-radius: var(--r-lg); background: var(--surface-2); color: var(--fg); }
.icon-btn--boxed:hover, .icon-btn--boxed.active { background: var(--surface-3); }
.series-share-dropdown { position: relative; }
.series-share-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 999;
    width: 230px;
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.series-share-menu.active { 
    opacity: 1 !important; 
    visibility: visible !important; 
    transform: none !important; 
    display: block !important; 
}
.series-share-brand-icon { display: inline-grid; place-items: center; width: 17px; height: 17px; color: var(--fg-3); }
.series-share-brand-icon svg { width: 16px; height: 16px; fill: currentColor; }

.series-progress-menu { position: relative !important; top: auto !important; right: auto !important; }
.series-progress-menu .comment-more-menu-popover { width: 210px; }

/* Okuma durumu: sosyal eylemlerden ayrı, dar sütunda tek kart */
.series-column { max-width: 760px; margin: 0 auto; }
.series-reading {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin-top: var(--sp-4);
    padding: 14px 12px 14px 16px;
    border-radius: var(--r-xl);
    background: var(--surface-1);
}
.series-reading-ring { position: relative; display: grid; place-items: center; width: 56px; height: 56px; }
.series-reading-ring > svg:not(.series-reading-ring-icon) { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.series-reading-ring circle { fill: none; stroke-width: 4; }
.series-reading-ring-track { stroke: var(--surface-3); }
.series-reading-ring-fill { stroke: var(--brand); stroke-linecap: round; stroke-dasharray: var(--pct) 100; transition: stroke-dasharray 400ms var(--ease); }
.series-reading-ring[style="--pct: 0"] .series-reading-ring-fill { stroke-dasharray: 0 100; stroke-linecap: butt; }
.series-reading-ring-value { position: relative; color: var(--fg); font-size: var(--fs-13); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.series-reading-ring-icon { position: relative; width: 22px; height: 22px; color: var(--brand-ink); }
.series-reading-copy { display: grid; gap: 2px; min-width: 0; }
.series-reading-title { overflow: hidden; color: var(--fg); font-size: var(--fs-15); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.series-reading-sub { color: var(--fg-3); font-weight: 500; }
.series-reading-meta { color: var(--fg-3); font-size: var(--fs-13); font-variant-numeric: tabular-nums; }
.series-reading .series-progress-menu summary { width: 36px; height: 36px; }

.series-detail-headline, .series-detail-body { display: grid; gap: 12px; min-width: 0; align-content: start; }
.series-detail-body { margin-top: 4px; }
@media (max-width: 767px) {
    .series-detail { padding-top: var(--sp-5); }
    .series-detail.has-hero-video,
    .series-detail.has-hero-banner { --hero-h: 56.25vw; --hero-overlap: 56px; }
    /* Mobilde de metin bandın altından başlar; yalnızca poster biner */
    .has-hero-video .series-detail-info,
    .has-hero-banner .series-detail-info { padding-top: 0; }
    .has-hero-video .series-detail-headline,
    .has-hero-banner .series-detail-headline { align-self: start; padding-top: calc(var(--hero-overlap) + 4px); }
    .series-detail-header { grid-template-columns: 116px minmax(0, 1fr); gap: 16px; }
    .series-detail-cover { border-radius: var(--r-md); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); }
    .series-detail-info { display: contents; }
    .series-detail-headline { gap: 6px; align-self: center; }
    .series-detail-body { grid-column: 1 / -1; margin-top: 0; }
    .series-detail-title { font-size: var(--fs-20); }
    .series-detail-stats { gap: 4px 12px; font-size: var(--fs-13); }
    .series-detail-actions > .btn-ghost .series-action-label { display: none; }
    .series-detail-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; }
    .series-cta { min-width: 0; grid-column: 1 / -1; }
    .series-detail-actions .btn-lg { height: 46px; }
    .series-library-action { grid-column: 1; }
    .series-library-action .library-form, .series-library-action .library-form .btn, .series-library-action > a.btn { flex: 1; width: 100%; }
    .series-library-action { display: flex; }
    .series-detail-actions > a.btn-ghost { grid-column: 2; grid-row: 2; width: 46px; padding: 0; }
    .series-library-action { grid-row: 2; }
    .series-share-dropdown { grid-column: 3; grid-row: 2; }
    .icon-btn--boxed { width: 46px; height: 46px; }
}

/* ===== 21. Bölüm listesi ===== */
/* Topluluk bölümüyle aynı dil: hafif tonlu panel, küçük karo + iki satırlık metin */
.chapter-list { margin-top: var(--sp-6); padding: 16px 20px; border-radius: var(--r-xl); background: var(--surface-1); border: 1px solid var(--line, rgba(255, 255, 255, 0.08)); }
[data-theme="light"] .chapter-list,
[data-theme="light"] .series-reading { background: #F2F2F7; border: 1px solid #E5E5EA; --surface-2: #FFFFFF; --surface-3: #E5E5EA; --line: #E0E0E5; }
.chapter-list-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 8px; }
.chapter-list-header .section-subtitle { display: flex; align-items: baseline; gap: 8px; }
.chapter-list-tools { display: flex; align-items: center; gap: 8px; }
.chapter-tool-btn,
.chapter-mark-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--r-full);
    background: var(--surface-2);
    color: var(--fg-2);
    font-size: var(--fs-13);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
}
.chapter-tool-btn:hover,
.chapter-mark-all-btn:hover { background: var(--surface-3); color: var(--fg); }
.chapter-tool-btn svg, .chapter-tool-btn [data-lucide],
.chapter-mark-all-btn svg, .chapter-mark-all-btn [data-lucide] { width: 15px; height: 15px; flex-shrink: 0; }
.chapter-mark-all-btn.is-read-all {
    background: rgba(72, 189, 130, 0.15);
    color: #48bd82;
}
.chapter-mark-all-btn.is-read-all:hover {
    background: rgba(72, 189, 130, 0.25);
    color: #48bd82;
}
.chapter-mark-all-btn.is-loading {
    opacity: 0.6;
    pointer-events: none;
}
.series-progress-quick { display: inline-flex; }
.chapter-filter {
    position: relative;
    display: flex;
    align-items: center;
    width: 180px;
    height: 34px;
    border-radius: var(--r-full);
    background: var(--surface-2);
}
.chapter-filter svg, .chapter-filter [data-lucide] { position: absolute; left: 10px; width: 15px; height: 15px; color: var(--fg-3); pointer-events: none; }
.chapter-filter input {
    width: 100%;
    height: 100%;
    padding: 0 12px 0 32px;
    border: 0;
    border-radius: inherit;
    background: transparent;
    font-size: var(--fs-13);
    outline: none;
}
.chapter-filter:focus-within { box-shadow: 0 0 0 1px var(--line-strong); background: var(--bg); }
.select--sm, .chapter-sort-select {
    height: 34px;
    padding: 0 32px 0 12px;
    border: 0;
    border-radius: var(--r-full);
    background-color: var(--surface-2);
    color: var(--fg);
    font-size: var(--fs-13);
    font-weight: 600;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    cursor: pointer;
}
.chapter-list-items, .chapter-list-hidden { display: grid; }
.chapter-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-top: 1px solid var(--line);
    color: var(--fg);
}
.chapter-number {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--fg-2);
    font-size: var(--fs-14);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    transition: background-color var(--dur) var(--ease);
}
.chapter-number--long { font-size: var(--fs-12); }
.chapter-number--xl { font-size: 10px; letter-spacing: -0.04em; }
.chapter-number > span { max-width: 42px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chapter-item:hover .chapter-number { background: var(--surface-3); color: var(--fg); }
.chapter-main { display: grid; gap: 2px; min-width: 0; }
.chapter-title { overflow: hidden; font-size: var(--fs-14); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.chapter-date { color: var(--fg-3); font-size: var(--fs-12); }
.chapter-progress { display: inline-flex; align-items: center; justify-content: flex-end; min-width: 20px; color: var(--fg-3); font-size: var(--fs-12); font-weight: 600; font-variant-numeric: tabular-nums; }
.chapter-progress-icon { width: 16px; height: 16px; }
.chapter-progress-icon.completed, .chapter-progress.completed { color: var(--fg-4); }
.chapter-item.is-read .chapter-title, .chapter-item.is-read .chapter-number { color: var(--fg-4); }
.chapter-item.is-current .chapter-number { background: var(--brand-soft); color: var(--brand-ink); }
.chapter-item.is-current .chapter-title::after {
    content: "Kaldığın yer";
    margin-left: 8px;
    padding: 2px 6px;
    border-radius: var(--r-xs);
    background: var(--brand-soft);
    color: var(--brand-ink);
    font-size: 11px;
    font-weight: 700;
    vertical-align: 1px;
}
.chapter-show-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 44px;
    margin: 4px 0 8px;
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--fg-2);
    font-size: var(--fs-14);
    font-weight: 600;
}
.chapter-show-all:hover { background: var(--surface-3); color: var(--fg); }
.chapter-filter-empty { padding: 28px 0; color: var(--fg-3); font-size: var(--fs-14); text-align: center; }
.chapter-list .empty-state { padding: 32px 0; }
@media (max-width: 639px) {
    .chapter-list { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 16px var(--gutter) 8px; border-radius: 0; }
    .chapter-list-header { flex-wrap: wrap; }
    .chapter-list-tools { width: 100%; }
    .chapter-tool-label,
    .chapter-mark-all-btn span { display: none; }
    .chapter-tool-btn,
    .chapter-mark-all-btn { width: 34px; padding: 0; justify-content: center; }
    .chapter-item { gap: 10px; }
    .chapter-item.is-current .chapter-title::after { display: none; }
}

/* ===== 22. Daha fazla yükle ===== */
.load-more-btn,
.load-more-replies-btn,
.comment-thread-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    border-radius: var(--r-full);
    background: var(--surface-2);
    color: var(--fg-2);
    font-size: var(--fs-13);
    font-weight: 600;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.load-more-btn:hover, .load-more-replies-btn:hover, .comment-thread-page-btn:hover { background: var(--surface-3); color: var(--fg); }
.load-more-btn:disabled, .load-more-replies-btn:disabled, .comment-thread-page-btn:disabled { opacity: 0.6; cursor: wait; }
.load-more-icon { width: 15px !important; height: 15px !important; }
.load-more-btn.is-loading .load-more-icon, .load-more-replies-btn.is-loading .load-more-icon { animation: button-spin 0.8s linear infinite; }
.forum-load-more-wrap, .load-more-replies-wrap { display: flex; justify-content: center; margin-top: 16px; }
.forum-load-more-wrap--previous { margin: 12px 0 4px; }
.forum-load-more-wrap.is-infinite-scroll { min-height: 52px; align-items: center; margin-top: 8px; }
.forum-load-more-wrap.is-infinite-scroll .comment-load-more-btn { background: transparent; color: var(--fg-3); pointer-events: none; }
.forum-load-more-wrap.is-infinite-scroll-error .comment-load-more-btn { background: var(--surface-2); color: var(--fg-2); pointer-events: auto; }
.load-more-replies-wrap--inline { justify-content: flex-start; margin: 4px 0; }
.comment-thread-node--more .load-more-replies-btn { height: 30px; padding: 0 12px; background: transparent; color: var(--fg-2); }
.comment-thread-node--more .load-more-replies-btn:hover { background: var(--surface-2); }
.comment-thread-pager { padding: 2px 0 6px; }

/* ===== 23. Yorumlar ===== */
/* Benzer seriler: bölüm listesi ile incelemeler arasında yatay, kaydırmalı kısa şerit */
.series-similar { --similar-gap: 12px; --similar-per-view: 2.75; margin-top: var(--sp-8); min-width: 0; }
.series-similar-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.series-similar-nav { display: flex; gap: 6px; }
.series-similar-nav[hidden] { display: none; }
.series-similar-arrow {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--fg-2);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.series-similar-arrow:hover:not(:disabled) { background: var(--surface-3); color: var(--fg); }
.series-similar-arrow:disabled { opacity: 0.35; cursor: default; }
.series-similar-arrow svg { width: 18px; height: 18px; }
.series-similar-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - var(--similar-gap) * (var(--similar-per-view) - 1)) / var(--similar-per-view));
    gap: var(--similar-gap);
    margin: 0;
    padding: 0 0 4px;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.series-similar-rail::-webkit-scrollbar { display: none; }
.series-similar-item { min-width: 0; scroll-snap-align: start; }
.series-similar-card { display: grid; gap: 6px; min-width: 0; color: var(--fg); }
.series-similar-cover {
    position: relative;
    display: block;
    aspect-ratio: var(--cover-ratio);
    overflow: hidden;
    border-radius: var(--r-md);
    background: var(--surface-2);
}
.series-similar-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur) var(--ease); }
.series-similar-card:hover .series-similar-cover img { transform: scale(1.04); }
.series-similar-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--fs-13);
    font-weight: 600;
    line-height: 1.35;
}
.series-similar-card:hover .series-similar-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.series-similar-meta { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; color: var(--fg-3); font-size: var(--fs-12); white-space: nowrap; }
.series-similar-meta > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.series-similar-rating { flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px; color: var(--fg-2); font-weight: 500; }
.series-similar-rating .stat-icon { width: 12px; height: 12px; }
@media (min-width: 640px) { .series-similar { --similar-per-view: 5; --similar-gap: 14px; } }
@media (min-width: 900px) { .series-similar { --similar-per-view: 6; --similar-gap: 16px; } }
@media (min-width: 1200px) { .series-similar { --similar-per-view: 7; } }
@media (max-width: 639px) {
    /* Telefonda şerit kenardan kenara kaysın, ilk kart hizada başlasın */
    .series-similar-rail { margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scroll-padding-inline: var(--gutter); }
}
@media (hover: none) { .series-similar-nav { display: none; } }

.comments-section {
    --c-av: 36px;
    --c-av-reply: 28px;
    --c-gap: 12px;
    /* Opak renk: gövde ve kıvrımlar üst üste bindiğinde birleşim noktası koyulaşmaz */
    --c-line: color-mix(in srgb, var(--fg) 22%, var(--bg));
    max-width: 760px;
    margin-top: var(--sp-10);
}
.page-series .comments-section { margin: var(--sp-10) auto 0; }
.comments-section > .section-subtitle { display: flex; align-items: baseline; gap: 6px; margin-bottom: 16px; }
.comment-count-label { color: var(--fg-3); font-size: var(--fs-14); font-weight: 500; }

.comment-form-card { margin-bottom: 8px; }
.comment-form { display: grid; gap: 10px; }
.comment-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.comment-form-hint { display: flex; align-items: flex-start; gap: 6px; color: var(--fg-3); font-size: var(--fs-12); line-height: 1.5; }
.comment-form-hint-icon { width: 13px !important; height: 13px !important; margin-top: 2px; flex-shrink: 0; }
.comment-form-hint--inline { margin-top: 2px; }
.comment-form-avatar { width: 26px; height: 26px; font-size: 11px; }
.comment-form-username { overflow: hidden; max-width: 140px; font-size: var(--fs-13); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 639px) {
    .comment-form-footer { flex-direction: column; align-items: stretch; }
    .comment-form-footer .btn { width: 100%; }
}

.comment-login-card {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 28px 16px;
    border-radius: var(--r-lg);
    background: var(--surface-1);
    text-align: center;
}
.comment-login-icon { width: 26px !important; height: 26px !important; color: var(--fg-4); }
.comment-login-text { color: var(--fg-2); font-size: var(--fs-14); }
.comment-login-actions { display: flex; gap: 8px; }

.empty-comments { display: grid; justify-items: center; gap: 4px; padding: 40px 16px; text-align: center; }
.empty-comments-icon { width: 30px !important; height: 30px !important; margin-bottom: 4px; color: var(--fg-4); }
.empty-comments-text { color: var(--fg-2); font-size: var(--fs-15); font-weight: 600; }
.empty-comments-sub { color: var(--fg-3); font-size: var(--fs-13); }

.comment-list { display: flex; flex-direction: column; margin-top: 8px; }
.comment-list > .comment { padding: 16px 0; border-bottom: 1px solid var(--line); }
.comment-list > .comment:last-child { border-bottom: 0; }

.comment { position: relative; }
.comment-main { position: relative; display: flex; gap: var(--c-gap); }
.comment-avatar { width: var(--c-av); height: var(--c-av); font-size: 13px; position: relative; z-index: 1; }
.comment--reply .comment-avatar, .comment-avatar--sm { width: var(--c-av-reply); height: var(--c-av-reply); font-size: 11px; }
.comment-content { position: relative; flex: 1; min-width: 0; }
.comment-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 8px;
    min-height: 22px;
    padding-right: 34px;
    margin-bottom: 2px;
}
.comment-author { overflow: hidden; max-width: 100%; color: var(--fg); font-size: var(--fs-14); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.comment-date, .comment-reply-context { color: var(--fg-3); font-size: var(--fs-12); }
.comment-date--edited::before { content: "· "; }
.comment-reply-context { display: inline-flex; align-items: center; gap: 3px; min-width: 0; color: var(--fg-3); }
.comment-reply-context svg { flex-shrink: 0; }
a.comment-reply-context:hover { color: var(--fg-2); }
.comment-review-stars { display: inline-flex; align-items: center; gap: 1px; }
.comment-review-star { display: inline-flex; color: var(--surface-3); }
.comment-review-star.is-active { color: var(--rating); }
.comment-review-star-icon { width: 13px !important; height: 13px !important; fill: currentColor; stroke: currentColor; }
.comment--own-review > .comment-main > .comment-content > .comment-header .comment-author::after {
    content: "Senin incelemen";
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: var(--r-xs);
    background: var(--surface-2);
    color: var(--fg-2);
    font-size: 11px;
    font-weight: 600;
}

.comment-body { color: var(--fg); font-size: var(--fs-15); line-height: 1.55; overflow-wrap: anywhere; }
.comment-actions { display: flex; align-items: center; gap: 4px; margin-top: 6px; margin-left: -8px; }
.forum-comment-actions-main { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.comment-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 8px;
    border-radius: var(--r-full);
    color: var(--fg-3);
    font-size: var(--fs-13);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.comment-action-btn:hover { background: var(--surface-2); color: var(--fg); }
.comment-action-btn:disabled { cursor: progress; }
.comment-action-icon { width: 16px !important; height: 16px !important; }
.like-action-btn { font-variant-numeric: tabular-nums; }
.like-icon-wrap { display: inline-grid; place-items: center; width: 16px; height: 16px; }
.like-action-icon { transition: transform var(--dur) var(--ease), fill var(--dur) var(--ease); }
.like-count { min-width: 1ch; }
.like-label { font-weight: 600; }
.comment-like-btn.active, .comment-like-btn.is-liked { color: var(--like); }
.comment-like-btn.active:hover, .comment-like-btn.is-liked:hover { color: var(--like); }
.comment-like-btn.active .like-action-icon, .comment-like-btn.is-liked .like-action-icon { fill: currentColor; }
.comment-like-btn.is-pending { opacity: 0.7; }
.comment-like-btn.is-animating .like-icon-wrap { animation: like-pop 360ms cubic-bezier(0.2, 1.7, 0.35, 1); }
@keyframes like-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes like-count-pop { 0% { transform: translateY(0); } 50% { transform: translateY(-2px); } 100% { transform: translateY(0); } }

.like-preview-stack {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 6px 0 4px;
    border-radius: var(--r-full);
    color: var(--fg-3);
    transition: background-color var(--dur) var(--ease);
}
.like-preview-stack:hover { background: var(--surface-2); }
.like-preview-avatars { display: inline-flex; align-items: center; }
.like-preview-avatar {
    display: inline-grid;
    place-items: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin-left: -6px;
    overflow: hidden;
    border: 2px solid var(--bg);
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--fg-2);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}
.like-preview-avatar:first-child { margin-left: 0; }
.like-preview-avatar img { width: 100%; height: 100%; object-fit: cover; }
.like-preview-avatar > span { display: grid; place-items: center; width: 100%; height: 100%; }
/* Üst üste binen yığında halka dışarı taşmaz; ayırıcı kenarlık halka rengini alır */
.like-preview-avatar.is-premium-avatar, .like-preview-avatar.is-admin-avatar { outline: 0; border-color: var(--ring-color); }
.like-preview-more { color: var(--fg-3); font-size: var(--fs-12); font-weight: 600; font-variant-numeric: tabular-nums; }
.library-preview-stack { height: 40px; }
.library-preview-stack .like-preview-avatar { flex-basis: 26px; width: 26px; height: 26px; }
/* Takipçi önizlemesi istatistik satırında: sosyal bilgi eylemlerden ayrı durur */
.series-library-preview { display: inline-flex; }
.series-detail-stats .library-preview-stack { height: 22px; }
.series-detail-stats .like-preview-avatar { flex-basis: 20px; width: 20px; height: 20px; font-size: 8px; }

/* ⋮ menüsü */
.comment-more-menu { position: absolute; top: -4px; right: 0; z-index: 20; }
.comment-more-menu[open] { z-index: 80; }
.comment-list > .comment:has(.comment-more-menu[open]),
.comment-thread-node:has(.comment-more-menu[open]) { z-index: 60; }
.comment-more-menu > summary {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--fg-3);
    list-style: none;
    cursor: pointer;
}
.comment-more-menu > summary::-webkit-details-marker { display: none; }
.comment-more-menu > summary:hover, .comment-more-menu[open] > summary { background: var(--surface-2); color: var(--fg); }
.comment-more-menu > summary svg, .comment-more-menu > summary [data-lucide] { width: 17px; height: 17px; }
.comment-more-menu-popover {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    width: 190px;
    padding: 6px;
}
.comment-more-menu-popover form { margin: 0; }

/* Satır içi yanıt/düzenleme formları (JS inline display:grid verir) */
.comment-reply-form { display: grid; gap: 8px; margin-top: 10px; }
.forum-inline-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Yanıt ağacı: kök avatarın altından inen çizgi, her yanıta kıvrımlı bağlantı */
.comment--has-thread > .comment-main::before {
    content: "";
    position: absolute;
    left: calc(var(--c-av) / 2 - 0.75px);
    top: calc(var(--c-av) + 6px);
    /* Gövde her zaman alttaki "N yanıt / Yanıtları gizle" düğmesine bağlanır:
       15px kıvrım sonu + 12px yay, gövde yayın başında biter */
    bottom: 27px;
    width: 1.5px;
    border-radius: 1px;
    background: var(--c-line);
}
.comment-thread-panel {
    --line-x: calc(-1 * (var(--c-gap) + var(--c-av) / 2) - 0.75px);
    display: flex;
    flex-direction: column;
    margin-top: 6px;
}
.comment-thread-node { position: relative; --indent: 0px; margin-left: var(--indent); }
.comment-thread-node--depth-2 { --indent: 28px; }
.comment-thread-node--depth-3 { --indent: 56px; }
.comment-thread-gutter { display: none; }
.comment-thread-body { min-width: 0; padding: 8px 0 4px; }
.comment-thread-node::before {
    content: "";
    position: absolute;
    left: calc(var(--line-x) - var(--indent));
    top: -4px;
    width: calc(-1 * var(--line-x) + var(--indent) - 6px);
    height: calc(8px + var(--c-av-reply) / 2 + 4px);
    border-left: 1.5px solid var(--c-line);
    border-bottom: 1.5px solid var(--c-line);
    border-bottom-left-radius: 12px;
    pointer-events: none;
}
.comment-thread-node--more::before { height: calc(8px + 15px + 4px); }
.comment-thread-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    margin-top: 4px;
    padding: 0 10px 0 8px;
    border-radius: var(--r-full);
    color: var(--fg-2);
    font-size: var(--fs-13);
    font-weight: 600;
}
.comment-thread-toggle:hover { background: var(--surface-2); color: var(--fg); }
.comment-thread-toggle:disabled { opacity: 0.6; cursor: wait; }
.comment--has-thread > .comment-main > .comment-content > .comment-thread-toggle::before {
    content: "";
    position: absolute;
    left: calc(-1 * (var(--c-gap) + var(--c-av) / 2) - 0.75px);
    top: -6px;
    width: calc(var(--c-gap) + var(--c-av) / 2 - 2px);
    height: 21px;
    border-left: 1.5px solid var(--c-line);
    border-bottom: 1.5px solid var(--c-line);
    border-bottom-left-radius: 12px;
    pointer-events: none;
}
.comment--notification-focus > .comment-main > .comment-content,
.comment--notification-focus.comment--reply > .comment-main > .comment-content {
    margin: -6px -8px;
    padding: 6px 8px;
    border-radius: var(--r-md);
    background: var(--brand-soft);
    animation: notification-comment-focus 1.6s var(--ease);
}
@keyframes notification-comment-focus { from { box-shadow: 0 0 0 2px var(--brand-line); } to { box-shadow: 0 0 0 0 transparent; } }
@media (max-width: 639px) {
    .comments-section { --c-av: 32px; --c-av-reply: 24px; --c-gap: 10px; }
    .comment-thread-node--depth-2 { --indent: 16px; }
    .comment-thread-node--depth-3 { --indent: 32px; }
    .comment-body { font-size: var(--fs-15); }
}

/* Puan yıldızları */
.star-rating { display: inline-flex; align-items: center; gap: 8px; }
.star-rating-stars { display: inline-flex; }
.star-rating-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; color: var(--surface-3); cursor: pointer; transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.star-rating-btn:hover { transform: scale(1.1); }
.star-rating-btn.active, .star-rating-btn.preview { color: var(--rating); }
.star-rating-icon { width: 20px !important; height: 20px !important; fill: currentColor; stroke: currentColor; }
.review-rating-input { display: inline-flex; align-items: center; }
.review-rating-input--inline { margin-bottom: 4px; }

/* ===== 24. Zengin metin editörü ===== */
.forum-editor {
    position: relative;
    display: grid;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
    background: var(--bg);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.forum-editor:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.forum-editor-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-1);
}
.forum-editor-btn {
    display: inline-grid;
    place-items: center;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border-radius: var(--r-sm);
    color: var(--fg-2);
    font-size: var(--fs-14);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.forum-editor-btn:hover { background: var(--surface-3); color: var(--fg); }
.forum-editor-btn.is-active { background: var(--brand-soft); color: var(--brand-ink); }
.forum-editor-icon { width: 16px !important; height: 16px !important; }
.forum-editor-divider { flex-shrink: 0; width: 1px; height: 18px; margin: 0 6px; background: var(--line-strong); }
/* Medya grubu (emoji, GIF, fotoğraf) sağa yaslanır ve metin düğmelerinden ayrı durur (docs/editor-toolbar.md). */
.forum-editor-media { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding-left: 8px; }
.forum-editor-btn--gif { padding: 0 5px; }
.forum-editor-gif-badge {
    display: inline-grid;
    place-items: center;
    height: 18px;
    padding: 0 4px;
    border: 1.5px solid currentColor;
    border-radius: 5px;
    background: linear-gradient(110deg, transparent 0 40%, color-mix(in srgb, currentColor 28%, transparent) 50%, transparent 60% 100%) 0 0 / 250% 100% no-repeat;
    background-position: 130% 0;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .04em;
}
/* Küçük "canlı" ipucu: üzerine gelince / panel açıkken rozetin üstünden bir ışık geçer. */
.forum-editor-btn--gif:hover .forum-editor-gif-badge,
.forum-editor-btn--gif.is-active .forum-editor-gif-badge { animation: forum-editor-gif-shine 1.4s var(--ease) infinite; }
@keyframes forum-editor-gif-shine { from { background-position: 130% 0; } to { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) {
    .forum-editor-btn--gif:hover .forum-editor-gif-badge,
    .forum-editor-btn--gif.is-active .forum-editor-gif-badge { animation: none; }
}
.forum-editor-identity { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 11rem; padding-left: 2px; }
.forum-editor-divider--identity { flex: 0 0 1px; }
.forum-editor-content {
    position: relative;
    min-height: 200px;
    padding: 12px 14px;
    color: var(--fg);
    font-size: 16px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    outline: none;
}
.forum-editor-content--compact { min-height: 96px; }
.forum-editor-content:empty::before,
.forum-editor-content[data-empty="true"]::before {
    content: attr(data-placeholder);
    position: absolute;
    color: var(--fg-4);
    pointer-events: none;
}
.forum-editor-emoji-panel,
.forum-editor-gif-panel {
    display: grid;
    gap: 10px;
    padding: 10px 12px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-1);
    overflow: hidden;
}
.forum-editor-emoji-panel { max-height: 240px; }
.forum-editor-gif-panel { min-height: 200px; max-height: 300px; }
.forum-editor-panel-header, .forum-editor-gif-search { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.forum-editor-panel-title { color: var(--fg-2); font-size: var(--fs-13); font-weight: 600; }
.forum-editor-panel-close {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--fg-2);
}
.forum-editor-panel-close:hover { background: var(--surface-3); color: var(--fg); }
.forum-editor-gif-input {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    background: var(--surface-2);
    font-size: var(--fs-14);
    outline: none;
}
.forum-editor-gif-input:focus { border-color: var(--brand); background: var(--bg); }
.forum-editor-emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    gap: 4px;
    max-height: 170px;
    overflow-y: auto;
}
.forum-editor-emoji-item {
    display: inline-grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: var(--r-sm);
    font-size: 1.3rem;
    line-height: 1;
}
.forum-editor-emoji-item:hover { background: var(--surface-3); }
.forum-editor-gif-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    align-content: start;
    min-height: 180px;
    max-height: 220px;
    overflow-y: auto;
}
.forum-editor-gif-item {
    position: relative;
    display: block;
    width: 100%;
    padding-bottom: 100%;
    overflow: hidden;
    border-radius: var(--r-sm);
    background: var(--surface-2);
}
.forum-editor-gif-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.forum-editor-gif-item:hover { outline: 2px solid var(--brand); outline-offset: -2px; }
.forum-editor-gif-empty { grid-column: 1 / -1; color: var(--fg-3); font-size: var(--fs-13); }
.forum-editor-gif-attribution { justify-self: end; line-height: 0; }
.forum-editor-gif-attribution-logo { width: 120px; height: auto; }
.forum-editor-gif-attribution-logo--light-theme { display: none; }
[data-theme="light"] .forum-editor-gif-attribution-logo--dark-theme { display: none; }
[data-theme="light"] .forum-editor-gif-attribution-logo--light-theme { display: block; }
@media (max-width: 639px) {
    .forum-editor-gif-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .forum-editor-identity { max-width: 8rem; }
}

/* ===== 25. Zengin metin tipografisi ===== */
.comment-body > *:first-child, .forum-topic-detail-body > *:first-child, .rich-text > *:first-child { margin-top: 0; }
.comment-body p, .forum-comment-body p, .forum-topic-detail-body p, .forum-editor-content p, .forum-editor-content div { margin: 0 0 12px; }
.comment-body p:last-child, .forum-comment-body p:last-child, .forum-topic-detail-body p:last-child,
.forum-editor-content p:last-child, .forum-editor-content div:last-child { margin-bottom: 0; }
.comment-body ul, .comment-body ol, .forum-topic-detail-body ul, .forum-topic-detail-body ol,
.forum-editor-content ul, .forum-editor-content ol, .rich-text ul, .rich-text ol { margin: 10px 0; padding-left: 22px; }
.comment-body ul, .forum-topic-detail-body ul, .forum-editor-content ul, .rich-text ul { list-style: disc; }
.comment-body ol, .forum-topic-detail-body ol, .forum-editor-content ol, .rich-text ol { list-style: decimal; }
.comment-body li, .forum-topic-detail-body li, .forum-editor-content li, .rich-text li { margin: 4px 0; }
.comment-body a, .forum-topic-detail-body a, .rich-text a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 2px; }
/* Mentions (@kullanıcı) and series tags (#seri) — docs/mentions.md */
a.mention, a.mention:visited {
    color: var(--brand-ink);
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.mention-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1em;
    height: 1.1em;
    /* Negative block margins keep the line box exactly as tall as plain text. */
    margin: -.3em .2em -.3em 0;
    overflow: hidden;
    border-radius: 50%;
    background: var(--brand-soft);
    vertical-align: middle;
    line-height: 1;
}
.mention-avatar::before { content: attr(data-initial); font-size: .62em; font-weight: 700; color: var(--brand-ink); }
/* Beats the generic ".comment-body img" rule (block, 10px top margin, max-width). */
a.mention > .mention-avatar > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    border-radius: 0;
    object-fit: cover;
}
a.series-tag, a.series-tag:visited {
    display: inline;
    padding: 1px 7px 2px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand-ink);
    font-weight: 600;
    text-decoration: none;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
a.series-tag::before { content: "#"; margin-right: 1px; opacity: .7; }
.forum-editor-content a.series-tag,
.forum-editor-content a.mention { cursor: default; user-select: all; -webkit-user-select: all; }
/* In the composer a picked user is a chip, so it is clearly a tag and not plain text. */
.forum-editor-content a.mention {
    padding: 1px 7px 2px 4px;
    border-radius: 999px;
    background: var(--brand-soft);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.mention-popup {
    position: fixed;
    z-index: 1000;
    max-height: 264px;
    padding: 4px;
    overflow-y: auto;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--bg);
    box-shadow: var(--shadow-pop);
    overscroll-behavior: contain;
}
.mention-popup[hidden] { display: none; }
.mention-popup-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 6px 8px;
    border-radius: var(--r-sm);
    color: var(--fg);
    text-align: left;
}
.mention-popup-item.is-active, .mention-popup-item:hover { background: var(--surface-2); }
.mention-popup-media {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--fg-2);
    font-size: var(--fs-13);
    font-weight: 700;
}
.mention-popup-media--series { width: 28px; height: 38px; border-radius: 4px; }
.mention-popup-media img { width: 100%; height: 100%; object-fit: cover; }
.mention-popup-text { display: grid; min-width: 0; }
.mention-popup-text strong { overflow: hidden; font-size: var(--fs-14); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.mention-popup-text small { color: var(--fg-3); font-size: var(--fs-12, 12px); }
.mention-popup-empty { padding: 10px 12px; color: var(--fg-3); font-size: var(--fs-13); }
.comment-body img, .forum-topic-detail-body img, .forum-editor-content img {
    display: block;
    max-width: min(100%, 280px);
    height: auto;
    margin-top: 10px;
    border-radius: var(--r-md);
}
.forum-editor-content blockquote:not(.spoiler), .comment-body blockquote:not(.spoiler), .forum-topic-detail-body blockquote:not(.spoiler) {
    margin: 12px 0;
    padding: 2px 0 2px 14px;
    border-left: 3px solid var(--line-strong);
    color: var(--fg-2);
}

/* Spoiler */
blockquote.spoiler {
    --spoiler-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49'/%3E%3Cpath d='M14.084 14.158a3 3 0 0 1-4.242-4.242'/%3E%3Cpath d='M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");
    margin: 12px 0;
    padding: 12px 14px;
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--fg-2);
}
blockquote.spoiler::before {
    content: "Spoiler";
    display: block;
    margin-bottom: 6px;
    padding-left: 22px;
    background: var(--spoiler-icon) left center / 16px 16px no-repeat;
    color: var(--fg-3);
    font-size: var(--fs-12);
    font-weight: 700;
    line-height: 16px;
}
html.js-spoilers blockquote.spoiler { cursor: pointer; transition: background-color var(--dur) var(--ease); }
html.js-spoilers blockquote.spoiler:hover { background: var(--surface-3); }
html.js-spoilers blockquote.spoiler:not(.is-revealed) { font-size: 0; line-height: 0; user-select: none; -webkit-user-select: none; }
html.js-spoilers blockquote.spoiler:not(.is-revealed) > * { display: none; }
html.js-spoilers blockquote.spoiler:not(.is-revealed)::before { content: "Spoiler — görmek için dokun"; margin-bottom: 0; font-size: var(--fs-13); font-weight: 600; }
html .forum-editor-content blockquote.spoiler,
html .forum-editor-content blockquote.spoiler:not(.is-revealed),
html [contenteditable="true"] blockquote.spoiler:not(.is-revealed) {
    font-size: inherit;
    line-height: inherit;
    user-select: auto;
    -webkit-user-select: auto;
    cursor: text;
    background: var(--surface-2);
}
html .forum-editor-content blockquote.spoiler:not(.is-revealed) > *,
html [contenteditable="true"] blockquote.spoiler:not(.is-revealed) > * { display: revert; }
html .forum-editor-content blockquote.spoiler::before,
html .forum-editor-content blockquote.spoiler:not(.is-revealed)::before {
    content: "Spoiler";
    margin-bottom: 6px;
    font-size: var(--fs-12);
    font-weight: 700;
    user-select: none;
    -webkit-user-select: none;
}

.rich-text { color: var(--fg-2); line-height: 1.7; }
.rich-text h2, .rich-text h3 { margin: 24px 0 8px; color: var(--fg); }
.rich-text p { margin: 0 0 12px; }

/* ===== 26. Okuyucu ===== */
/* Okuma ekranı: üst bar ve alt bilgi gizli, sayfalar tam genişlik. */
.reader-body .site-header,
.reader-body .site-footer { display: none; }
.reader-body main.container { max-width: 100%; padding: 0; min-height: 0; }
.reader-body { background: var(--bg); }

.reader {
    --reader-bar-bg: rgba(0, 0, 0, 0.88);
    position: relative;
    min-height: 100vh;
    margin-bottom: var(--sp-8);
}
[data-theme="light"] .reader { --reader-bar-bg: rgba(255, 255, 255, 0.92); }

/* Üst araç çubuğu */
.reader-toolbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--reader-bar-bg);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-100%);
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.reader-toolbar.visible { transform: translateY(0); }
.reader-toolbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-top: max(6px, env(safe-area-inset-top));
}
.reader-toolbar-left { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.reader-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: var(--fg);
    font-size: var(--fs-15);
    font-weight: 600;
}
.reader-breadcrumb:hover { color: var(--fg); }
.reader-breadcrumb-icon { width: 20px !important; height: 20px !important; flex-shrink: 0; }
.reader-breadcrumb-title { overflow: hidden; max-width: 260px; white-space: nowrap; text-overflow: ellipsis; }
.reader-breadcrumb-sep { color: var(--fg-4); font-size: var(--fs-14); flex-shrink: 0; }
.reader-breadcrumb-chapter { flex-shrink: 0; color: var(--fg-3); font-size: var(--fs-14); font-weight: 500; white-space: nowrap; }
.reader-toolbar-right { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.reader-tool-btn {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--fg-2);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.reader-tool-btn svg, .reader-tool-btn i { width: 20px; height: 20px; }
.reader-tool-btn:hover { background: var(--surface-2); color: var(--fg); }
.reader-tool-btn.active { color: var(--brand-ink); }
.reader-tool-btn.pending { color: var(--fg); opacity: 0.7; }
.reader-tool-btn--warning:hover { color: var(--warning); }
.reader-progress-bar { height: 2px; background: transparent; }
.reader-progress-fill { width: 0%; height: 100%; background: var(--brand); transition: width 0.15s linear; }
/* Sağdan sola manga: ilerleme sağdan dolar (docs/reader-direction.md). */
.reader.manga-rtl .reader-progress-fill { margin-left: auto; }

/* Hızlı kaydırma */
.reader-quick-scroll {
    position: fixed;
    top: 50%;
    left: 12px;
    z-index: 204;
    transform: translateY(-50%);
    pointer-events: none;
    user-select: none;
}
.reader-quick-scroll.visible { pointer-events: auto; }
.reader-quick-scroll-track {
    position: relative;
    width: 22px;
    height: 240px;
    border-radius: 999px;
    background: var(--reader-bar-bg);
    box-shadow: 0 0 0 1px var(--line), 0 12px 32px rgba(0, 0, 0, 0.28);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    cursor: grab;
    touch-action: none;
}
.reader-quick-scroll-thumb {
    position: absolute;
    top: 3px;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 56px;
    border-radius: 999px;
    background: var(--brand);
    color: var(--on-brand);
    font-size: 0.54rem;
    font-weight: 700;
    line-height: 1;
    transform-origin: center center;
}
.reader-quick-scroll.dragging .reader-quick-scroll-track,
.reader-quick-scroll-track:active { cursor: grabbing; }
.reader-quick-scroll-thumb-label { display: block; white-space: nowrap; line-height: 1; transform: rotate(270deg); }
@media (max-width: 639px) {
    .reader-quick-scroll { left: 8px; }
    .reader-quick-scroll-track { width: 24px; height: 200px; }
    .reader-quick-scroll-thumb { width: 18px; height: 50px; font-size: 0.5rem; }
}

/* Sayfalar */
.reader-pages { max-width: 800px; margin: 0 auto; cursor: pointer; user-select: none; }
@media (max-width: 639px) { .reader-pages { width: 100%; max-width: 100%; } }
.reader-page-frame {
    --reader-page-placeholder-top: clamp(24px, calc(50vh - 48px), 420px);
    position: relative;
    width: 100%;
    min-height: 320px;
    overflow: hidden;
    background: var(--surface-1);
}
.reader.reader--page-based:not(.manga-mode) .reader-page-frame { margin-bottom: clamp(12px, 2.5vw, 24px); }
.reader.reader--page-based:not(.manga-mode) .reader-page-frame:last-child { margin-bottom: 0; }
.reader-page-frame.is-loaded { min-height: 0; background: transparent; }
.reader-page { display: block; width: 100%; height: auto; background: var(--surface-1); }
.reader-page-frame.is-loaded .reader-page { background: transparent; }
.reader-page-frame.is-loading .reader-page,
.reader-page-frame.is-error .reader-page { visibility: hidden; }
.reader-page-loading,
.reader-page-error {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-height: 220px;
    padding: var(--reader-page-placeholder-top) 24px 24px;
    background: var(--surface-1);
    color: var(--fg-3);
    text-align: center;
}
.reader-page-frame.is-loading .reader-page-loading,
.reader-page-frame.is-error .reader-page-error { display: flex; }
.reader-page-spinner {
    width: 26px;
    height: 26px;
    border: 2.5px solid var(--surface-3);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: readerPageSpin 0.9s linear infinite;
}
.reader-page-loading-text { max-width: 18rem; font-size: var(--fs-14); font-weight: 500; }
.reader-page-error-title { color: var(--fg); font-size: var(--fs-14); font-weight: 600; }
.reader-page-retry {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: var(--r-full);
    background: var(--surface-3);
    color: var(--fg);
    font-size: var(--fs-13);
    font-weight: 600;
}
.reader-page-retry:hover { background: var(--line-strong); }
.reader-page-retry svg, .reader-page-retry i { width: 14px; height: 14px; }
@keyframes readerPageSpin { to { transform: rotate(360deg); } }

/* Bölüm sonu gezinme */
.reader-end-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
    width: min(100%, 800px);
    margin: 0 auto;
    padding: 20px 12px 8px;
}
.reader-end-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 52px;
    padding: 0 16px;
    border-radius: var(--r-lg);
    background: var(--surface-2);
    color: var(--fg);
    font-size: var(--fs-15);
    font-weight: 600;
    text-align: center;
    transition: background-color var(--dur) var(--ease);
}
.reader-end-nav-btn:hover { background: var(--surface-3); color: var(--fg); }
.reader-end-nav-btn svg, .reader-end-nav-btn i { width: 18px; height: 18px; flex-shrink: 0; }
.reader-end-nav-btn--series { padding: 0 20px; background: var(--brand); color: var(--on-brand); }
.reader-end-nav-btn--series:hover { background: color-mix(in srgb, var(--brand) 88%, var(--fg)); color: var(--on-brand); }
.reader-end-nav-btn--disabled { opacity: 0.35; pointer-events: none; }
.reader.manga-mode .reader-end-nav { display: none; }
@media (max-width: 639px) {
    .reader-end-nav { gap: 6px; padding-inline: 12px; }
    .reader-end-nav-btn { height: 48px; padding: 0 10px; font-size: var(--fs-14); }
    .reader-end-nav-btn--series { padding: 0 14px; }
}

/* Alt gezinme çubuğu */
.reader-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background: var(--reader-bar-bg);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border-top: 1px solid var(--line);
    transform: translateY(100%);
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.reader-bottom-nav.visible { transform: translateY(0); }
.reader-bottom-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 56px;
    padding-top: 8px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
}
.reader-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--r-full);
    color: var(--fg);
    font-size: var(--fs-14);
    font-weight: 600;
    transition: background-color var(--dur) var(--ease);
}
.reader-nav-btn svg, .reader-nav-btn i { width: 18px; height: 18px; }
.reader-nav-btn:hover { background: var(--surface-2); color: var(--fg); }
.reader-nav-btn--disabled { opacity: 0.3; pointer-events: none; }
.reader-chapter-select {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    border-radius: var(--r-full);
    background: var(--surface-2);
    color: var(--fg);
    font-size: var(--fs-14);
    font-weight: 600;
    transition: background-color var(--dur) var(--ease);
}
.reader-chapter-select:hover { background: var(--surface-3); }
.reader-chapter-select-icon { width: 16px !important; height: 16px !important; transition: transform var(--dur) var(--ease); }
.reader-chapter-select.active .reader-chapter-select-icon { transform: rotate(180deg); }

/* Tıklama bölgeleri önizlemesi */
.click-zones-preview {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    animation: clickZonesFadeIn 0.3s ease;
}
.click-zones-preview.is-hiding { animation: clickZonesFadeOut 0.3s ease forwards; }
@keyframes clickZonesFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes clickZonesFadeOut { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .click-zones-preview, .click-zones-preview.is-hiding { animation: none; }
}
.click-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}
.click-zone svg, .click-zone i { width: 28px; height: 28px; }
.click-zone-top, .click-zone-bottom { flex: 0 0 25%; background: rgba(0, 0, 0, 0.55); }
.click-zone-top { border-bottom: 2px dashed rgba(255, 255, 255, 0.4); }
.click-zone-bottom { border-top: 2px dashed rgba(255, 255, 255, 0.4); }
.click-zone-middle { flex: 0 0 50%; background: rgba(var(--brand-rgb), 0.4); }
/* Manga rehberi: sol / orta / sağ üçte bir. */
.click-zones-preview--manga { flex-direction: row; }
.click-zones-preview--manga .click-zone { padding: 0 8px; text-align: center; }
.click-zones-preview--manga .click-zone-side { flex: 0 0 33.333%; background: rgba(0, 0, 0, 0.55); }
.click-zones-preview--manga .click-zone-left { border-right: 2px dashed rgba(255, 255, 255, 0.4); }
.click-zones-preview--manga .click-zone-right { border-left: 2px dashed rgba(255, 255, 255, 0.4); }
.click-zones-preview--manga .click-zone-middle { flex: 1 1 auto; }

/* Sağdan sola ilk kullanım ipucu */
.reader-direction-hint {
    position: fixed;
    left: 50%;
    bottom: calc(76px + env(safe-area-inset-bottom));
    z-index: 310;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: min(92vw, 520px);
    padding: 12px 16px;
    border-radius: var(--r-lg);
    background: var(--invert-bg);
    color: var(--invert-fg);
    font-size: var(--fs-14);
    font-weight: 600;
    line-height: 1.4;
    box-shadow: var(--shadow-pop);
    cursor: pointer;
    opacity: 0;
    transform: translate(-50%, 12px);
    transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}
.reader-direction-hint.visible { opacity: 1; transform: translate(-50%, 0); }
.reader-direction-hint svg, .reader-direction-hint i { width: 18px; height: 18px; flex-shrink: 0; color: var(--brand); }
@media (prefers-reduced-motion: reduce) {
    .reader-direction-hint { transition: none; }
}

/* Manga modu */
.reader.manga-mode .reader-pages { max-width: 800px; margin: 0 auto; }
.reader.manga-mode .reader-page-frame { display: none; }
.reader.manga-mode .reader-page-frame.manga-active { display: block; width: 100%; margin: 0 auto; }
.reader.manga-mode.manga-fit-height .reader-pages {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 60px);
}
.reader.manga-mode.manga-fit-height .reader-page-frame.manga-active {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-height: calc(100vh - 60px);
    max-height: calc(100vh - 60px);
    aspect-ratio: auto !important;
}
.reader.manga-mode.manga-fit-height .reader-page-frame.manga-active .reader-page {
    width: auto;
    max-width: 100%;
    max-height: calc(100vh - 60px);
    object-fit: contain;
}
.reader.manga-mode .reader-settings-scroll-section { display: none; }
/* Dokunarak çevirme manga modunda da var; kaydırma mesafesi yalnız webtoon içindir. */
.reader.manga-mode #clickScrollAmountGroup { display: none; }
.reader.manga-mode #readerPlayBtn { display: none; }
.manga-arrow {
    position: fixed;
    top: 50%;
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 72px;
    border-radius: var(--r-lg);
    background: var(--reader-bar-bg);
    box-shadow: 0 0 0 1px var(--line);
    color: var(--fg-2);
    transform: translateY(-50%);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.manga-arrow:hover { color: var(--fg); }
.manga-arrow svg, .manga-arrow i { width: 24px; height: 24px; }
.manga-arrow-left { left: 16px; }
.manga-arrow-right { right: 16px; }
.manga-arrow:disabled { opacity: 0.2; pointer-events: none; }
/* Sağdan sola: "Sonraki Sayfa" solda, "Önceki Sayfa" sağda; oklar gidiş yönünü gösterir. */
.reader.manga-rtl .manga-page-nav { flex-direction: row-reverse; }
.reader.manga-rtl .manga-page-btn { flex-direction: row-reverse; }
.reader.manga-rtl .manga-page-btn svg { transform: scaleX(-1); }
.manga-page-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: 800px;
    margin: 16px auto;
    padding: 12px 20px;
}
.manga-page-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 38px;
    padding: 0 14px;
    border-radius: var(--r-full);
    background: var(--surface-2);
    color: var(--fg);
    font-size: var(--fs-14);
    font-weight: 600;
}
.manga-page-btn:hover { background: var(--surface-3); }
.manga-page-btn:disabled { opacity: 0.3; pointer-events: none; }
.manga-page-btn svg, .manga-page-btn i { width: 16px; height: 16px; }
.manga-page-indicator { min-width: 64px; color: var(--fg-3); font-size: var(--fs-14); font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; }
@media (max-width: 639px) {
    .manga-arrow { width: 34px; height: 58px; }
    .manga-arrow-left { left: 4px; }
    .manga-arrow-right { right: 4px; }
    .manga-arrow svg, .manga-arrow i { width: 20px; height: 20px; }
    .manga-page-nav { gap: 8px; padding: 8px; }
    .manga-page-btn { height: 34px; padding: 0 10px; font-size: var(--fs-12); }
}

/* Bölüm listesi (alt sayfa) */
.reader-chapter-list {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 210;
    display: flex;
    flex-direction: column;
    width: min(100%, 560px);
    max-height: 64vh;
    margin: 0 auto;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    background: var(--surface-overlay);
    box-shadow: var(--shadow-pop);
    transform: translateY(100%);
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.reader-chapter-list.visible { transform: translateY(0); }
.reader-chapter-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 14px 12px 10px 20px;
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-16);
    font-weight: 700;
}
.reader-chapter-list-close,
.reader-settings-close {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--fg-2);
}
.reader-chapter-list-close:hover, .reader-settings-close:hover { background: var(--surface-3); color: var(--fg); }
.reader-chapter-list-close svg, .reader-settings-close svg,
.reader-chapter-list-close i, .reader-settings-close i { width: 16px; height: 16px; }
.reader-chapter-list-items {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 6px 8px calc(8px + env(safe-area-inset-bottom));
    overscroll-behavior: contain;
}
.reader-chapter-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: var(--r-md);
    color: var(--fg);
    font-size: var(--fs-14);
}
.reader-chapter-list-item:hover { background: var(--surface-2); color: var(--fg); }
.reader-chapter-list-item.active { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
.reader-chapter-list-num { width: 2.75rem; flex-shrink: 0; color: var(--fg-3); font-size: var(--fs-13); font-weight: 700; font-variant-numeric: tabular-nums; }
.reader-chapter-list-item.active .reader-chapter-list-num { color: inherit; }
.reader-chapter-list-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.reader-chapter-list-progress { flex-shrink: 0; color: var(--fg-3); font-size: var(--fs-12); font-weight: 600; }
.reader-chapter-list-progress.completed { color: var(--fg-4); }
.reader-chapter-list-progress svg, .reader-chapter-list-progress i { width: 15px; height: 15px; }

/* Okuyucu ayarları (yan panel) */
.reader-settings-popup {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 220;
    width: 100%;
    max-width: 400px;
    overflow-y: auto;
    background: var(--surface-overlay);
    box-shadow: var(--shadow-pop);
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
    overscroll-behavior: contain;
}
.reader-settings-popup.visible { transform: translateX(0); }
.reader-settings-header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: max(16px, env(safe-area-inset-top)) 16px 12px 20px;
    background: var(--surface-overlay);
    font-size: var(--fs-17, 1.0625rem);
    font-weight: 700;
}
.reader-settings-header span { display: inline-flex; align-items: center; gap: 8px; }
.reader-settings-header svg, .reader-settings-header > span i { width: 18px; height: 18px; color: var(--fg-3); }
.reader-settings-body { padding: 0 20px calc(24px + env(safe-area-inset-bottom)); }
.reader-settings-section { padding: 18px 0; border-bottom: 1px solid var(--line); }
.reader-settings-section:last-child { border-bottom: 0; }
.reader-settings-title { margin-bottom: 2px; font-size: var(--fs-15); font-weight: 600; }
.reader-settings-desc { margin-bottom: 12px; color: var(--fg-3); font-size: var(--fs-13); }
.reader-settings-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 32px; font-size: var(--fs-14); }
.reader-settings-hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--fg-2);
    font-size: var(--fs-12);
    line-height: 1.5;
}
.reader-settings-toggle-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    padding: 3px;
    border-radius: var(--r-md);
    background: var(--surface-2);
}
.reader-settings-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    border-radius: 6px;
    color: var(--fg-2);
    font-size: var(--fs-14);
    font-weight: 600;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.reader-settings-toggle svg, .reader-settings-toggle i { width: 16px; height: 16px; }
.reader-settings-toggle:hover { color: var(--fg); }
.reader-settings-toggle.active { background: var(--seg-active); color: var(--fg); box-shadow: var(--shadow-sm); }
.reader-settings-toggle-group--3 { grid-template-columns: repeat(3, 1fr); }
.reader-settings-toggle-group--3 .reader-settings-toggle { min-height: 44px; height: auto; padding: 4px 6px; font-size: var(--fs-13); line-height: 1.2; text-align: center; }
.reader-settings-toggle--stacked { flex-direction: column; gap: 1px; }
.reader-settings-toggle--stacked small { color: var(--fg-3); font-size: var(--fs-11, 0.6875rem); font-weight: 500; }
.reader-settings-note { margin-top: 8px; color: var(--fg-3); font-size: var(--fs-12); }
.reader-switch { position: relative; display: inline-block; flex-shrink: 0; width: 46px; height: 28px; }
.reader-switch input { position: absolute; width: 0; height: 0; opacity: 0; }
.reader-switch-slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--surface-3);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease);
}
.reader-switch-slider::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform var(--dur) var(--ease);
}
.reader-switch input:checked + .reader-switch-slider { background: var(--brand); }
.reader-switch input:checked + .reader-switch-slider::before { transform: translateX(18px); }
.reader-switch input:focus-visible + .reader-switch-slider { box-shadow: 0 0 0 3px var(--focus-ring); }
.reader-settings-range-group { margin-top: 10px; }
.reader-settings-range {
    width: 100%;
    height: 4px;
    margin: 12px 0 8px;
    border-radius: 2px;
    background: var(--surface-3);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    accent-color: var(--brand);
}
.reader-settings-range::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35), 0 0 0 0.5px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.reader-settings-range::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    cursor: pointer;
}
.reader-settings-range:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 6px; }
.reader-settings-range-labels { display: flex; justify-content: space-between; color: var(--fg-3); font-size: var(--fs-12); }
.reader-shortcuts { display: grid; gap: 8px; }
.reader-shortcut { display: flex; align-items: center; gap: 10px; color: var(--fg-2); font-size: var(--fs-14); }
.reader-shortcut kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.5rem;
    height: 26px;
    padding: 0 8px;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    box-shadow: inset 0 -1px 0 var(--line-strong);
    color: var(--fg-2);
    font-family: var(--font-sans);
    font-size: var(--fs-12);
    font-weight: 600;
}

/* Arka örtü */
.reader-overlay {
    position: fixed;
    inset: 0;
    z-index: 205;
    background: var(--scrim);
    opacity: 0;
    pointer-events: none;
    transition: opacity 280ms ease;
}
.reader-overlay.visible { opacity: 1; pointer-events: auto; }

/* Okuyucu altındaki yorumlar */
.reader-body .comments-section { margin: var(--sp-8) auto 0; padding: 0 var(--gutter) var(--sp-12); }
@media (max-width: 639px) {
    .reader-breadcrumb-title { max-width: 34vw; }
    .reader-tool-btn { width: 36px; height: 36px; }
    .reader-bottom-nav-inner { padding-left: 8px; padding-right: 8px; }
    .reader-nav-btn { padding: 0 10px; }
}

/* Açılır yüzeylerin içinde dolgular bir kademe açılır (koyu temada zemin ile karışmasın) */
.reader-report-card, .like-users-modal, .content-policy-dialog, .forum-access-dialog,
.user-dropdown-menu, .comment-more-menu-popover, .notification-dropdown, .navbar-categories-menu,
.reader-settings-popup, .reader-chapter-list, .navbar-search-suggest, .mobile-app-promo, .menu {
    --surface-2: var(--elev-2);
    --surface-3: var(--elev-3);
}

/* ===== 27. Forum ===== */
.forum-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; }
.forum-aside { position: sticky; top: calc(var(--header-h) + 20px); }
.forum-aside-inner { display: grid; gap: 16px; }
.forum-category-list { display: grid; gap: 2px; }
.forum-category-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: var(--r-md);
    color: var(--fg-2);
    font-size: var(--fs-14);
    font-weight: 500;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.forum-category-link svg, .forum-category-link [data-lucide] { width: 16px; height: 16px; color: var(--fg-4); }
.forum-category-link span:first-of-type { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.forum-category-link:hover { background: var(--surface-1); color: var(--fg); }
.forum-category-link.active { background: var(--surface-2); color: var(--fg); font-weight: 600; }
.forum-category-link.active svg { color: var(--fg-2); }
.forum-category-count { color: var(--fg-3); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }

.forum-main { min-width: 0; }
.forum-header { display: grid; gap: 14px; margin-bottom: 8px; }
.forum-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.forum-new-mobile { display: none; }
.forum-search {
    position: relative;
    display: flex;
    align-items: center;
    height: 42px;
    border-radius: var(--r-md);
    background: var(--surface-2);
    transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.forum-search:focus-within { background: var(--bg); box-shadow: 0 0 0 1px var(--line-strong); }
.forum-search > svg, .forum-search > [data-lucide] { position: absolute; left: 12px; width: 17px; height: 17px; color: var(--fg-3); pointer-events: none; }
.forum-search input {
    flex: 1;
    height: 100%;
    padding: 0 40px 0 38px;
    border: 0;
    border-radius: inherit;
    background: transparent;
    font-size: var(--fs-15);
    outline: none;
}
.forum-search input::placeholder { color: var(--fg-3); }
.forum-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.forum-search-clear { position: absolute; right: 8px; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-3); color: var(--fg-2); }
.forum-search-clear svg { width: 14px; height: 14px; }
.forum-category-chips { display: none; }
.forum-result-line { margin: 4px 0 0; color: var(--fg-3); font-size: var(--fs-13); }

.forum-topic-list { display: grid; }

/* Ana sayfa Gündem'de canlı bir sabit konu: forumdaki kutuyla aynı turuncu raptiye. */
.feed-pin { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 6px; border-radius: 5px; background: var(--warning); color: #fff; vertical-align: -2px; }
.feed-pin svg, .feed-pin [data-lucide] { width: 10px; height: 10px; transform: rotate(35deg); }

/* Sabit konular: nötr yüzey kartı, önemi turuncu raptiye rozeti taşır (yeşil marka
   rengi her yerde, premium sarı; turuncu yalnızca "önemli/duyuru" demek). Tek satırlık
   satırlar, 3'ten fazlası <details> içinde (docs/forum-pinned.md). */
.forum-pinned {
    margin: 12px 0 4px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-lg, 14px);
    background: var(--surface-1, var(--surface-2));
}
.forum-pinned-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; color: var(--fg); font-size: var(--fs-13); font-weight: 700; }
.forum-pinned-badge { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--warning); color: #fff; }
.forum-pinned-badge svg, .forum-pinned-badge [data-lucide] { width: 13px; height: 13px; transform: rotate(35deg); }
.forum-pinned-count { color: var(--fg-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.forum-pinned-list { margin: 0; padding: 0; list-style: none; }
.forum-pinned-list li + li, .forum-pinned-more .forum-pinned-list li:first-child { border-top: 1px solid var(--line); }
.forum-pinned-link { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 10px 0 12px; color: var(--fg); }
.forum-pinned-link:hover { background: var(--surface-2); }
.forum-pinned-title { flex: 1; min-width: 0; overflow: hidden; font-size: var(--fs-14); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.forum-pinned-lock { width: 14px !important; height: 14px !important; flex-shrink: 0; color: var(--fg-3); }
.forum-pinned-replies { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; color: var(--fg-3); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.forum-pinned-replies svg, .forum-pinned-replies [data-lucide] { width: 13px; height: 13px; }
.forum-pinned-chevron { width: 15px !important; height: 15px !important; flex-shrink: 0; color: var(--fg-4); }
.forum-pinned-more > summary { display: flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px; border-top: 1px solid var(--line); color: var(--fg-2); font-size: var(--fs-13); font-weight: 600; cursor: pointer; list-style: none; }
.forum-pinned-more > summary::-webkit-details-marker { display: none; }
.forum-pinned-more > summary svg, .forum-pinned-more > summary [data-lucide] { width: 15px; height: 15px; }
.forum-pinned-more-open, .forum-pinned-more-close { display: inline-flex; align-items: center; gap: 4px; }
.forum-pinned-more-close, .forum-pinned-more[open] .forum-pinned-more-open { display: none; }
.forum-pinned-more[open] .forum-pinned-more-close { display: inline-flex; }
/* Satır: üstte yazar · zaman · kategori, ortada başlık + özet, altta etkileşim.
   Başlık bağlantısı kartı kaplar (::after); diğer bağlantılar üstte kalır. */
.forum-topic-card {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}
.forum-topic-card:last-child { border-bottom: 0; }
.forum-topic-card-main { display: grid; gap: 6px; min-width: 0; }
.forum-topic-card-head { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 22px; }
.forum-topic-card-author-avatar { position: relative; z-index: 1; width: 40px; height: 40px; font-size: 14px; }
.forum-topic-card-byline { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; flex: 1; min-width: 0; color: var(--fg-3); font-size: var(--fs-13); }
.forum-topic-card-byline a { position: relative; z-index: 1; color: var(--fg-3); }
.forum-topic-card-byline a:hover { color: var(--fg); }
.forum-topic-card-user { overflow: hidden; max-width: 160px; color: var(--fg) !important; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.forum-topic-card-byline .badge-admin, .forum-topic-card-byline .badge-premium { height: 18px; padding: 0 6px; font-size: 10.5px; }
.forum-topic-card-category {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 24px;
    padding: 0 9px 0 6px;
    border-radius: var(--r-full);
    background: var(--surface-2);
    color: var(--fg-2);
    font-size: var(--fs-12);
    font-weight: 600;
}
.forum-topic-card-category svg, .forum-topic-card-category [data-lucide] { width: 13px; height: 13px; color: var(--fg-4); }
.forum-topic-card-category:hover { background: var(--surface-3); color: var(--fg); }
.forum-topic-card-pin {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    height: 22px;
    padding: 0 8px;
    border-radius: var(--r-full);
    background: var(--brand-soft);
    color: var(--brand-ink);
    font-size: var(--fs-12);
    font-weight: 700;
}
.forum-topic-card-pin svg, .forum-topic-card-pin [data-lucide] { width: 12px; height: 12px; }

.forum-topic-card-title { display: flex; align-items: flex-start; gap: 6px; min-width: 0; font-size: var(--fs-16); font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
.forum-topic-card-title a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--fg); overflow-wrap: anywhere; }
.forum-topic-card-title a::after { content: ""; position: absolute; inset: 0; }
.forum-topic-card-title a:focus-visible { outline: none; }
.forum-topic-card:has(.forum-topic-card-title a:focus-visible) { box-shadow: 0 0 0 2px var(--focus-ring); border-radius: var(--r-md); }
.forum-flag-icon { width: 15px !important; height: 15px !important; flex-shrink: 0; margin-top: 3px; color: var(--fg-3); }
.forum-flag-icon--pin { color: var(--brand-ink); }
.forum-topic-card-body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--fg-2); font-size: var(--fs-14); line-height: 1.5; overflow-wrap: anywhere; }

.forum-topic-card-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; color: var(--fg-3); font-size: var(--fs-13); }
.forum-topic-stat { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.forum-topic-stat svg, .forum-topic-stat [data-lucide] { width: 15px; height: 15px; }
.forum-topic-card-activity { margin-left: auto; font-size: var(--fs-12); }

@media (max-width: 899px) {
    .forum-layout { grid-template-columns: 1fr; gap: 0; }
    .forum-aside { display: none; }
    .forum-new-mobile { display: inline-grid; }
    .forum-category-chips { display: flex; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 2px; }
}
@media (max-width: 639px) {
    .forum-topic-card { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 14px 0; }
    .forum-topic-card-author-avatar { width: 36px; height: 36px; font-size: 13px; }
    .forum-topic-card-title { font-size: var(--fs-15); }
    .forum-topic-card-byline { font-size: var(--fs-12); }
    .forum-topic-stat-label { display: none; }
}

/* Konu sayfası */
.forum-topic-page { max-width: 760px; margin: 0 auto; }
.forum-breadcrumb { display: flex; align-items: center; gap: 4px; margin-bottom: 20px; color: var(--fg-3); font-size: var(--fs-14); font-weight: 500; }
.forum-breadcrumb a { color: var(--fg-3); }
.forum-breadcrumb a:hover { color: var(--fg); }
.forum-breadcrumb > svg, .forum-breadcrumb > [data-lucide] { width: 15px; height: 15px; color: var(--fg-4); }
.forum-breadcrumb-new { margin-left: auto; }
.forum-topic-detail { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.forum-post-author { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.forum-topic-post-side-avatar { width: 44px; height: 44px; font-size: 16px; }
.forum-post-author-copy { display: grid; flex: 1; gap: 1px; min-width: 0; }
.forum-topic-menu { position: relative !important; top: auto !important; right: auto !important; align-self: flex-start; flex-shrink: 0; }
.forum-topic-menu .comment-more-menu-popover { right: 0; }
.forum-topic-menu .comment-more-menu-item.is-disabled { opacity: .55; }
.forum-post-author-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.forum-topic-author { overflow: hidden; max-width: 100%; color: var(--fg); font-size: var(--fs-15); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.forum-post-author-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 12px; color: var(--fg-3); font-size: var(--fs-12); }
.forum-meta-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.forum-meta-item svg, .forum-meta-item [data-lucide] { width: 13px; height: 13px; color: var(--fg-4); }
a.forum-meta-item--link { color: var(--fg-2); font-weight: 600; }
a.forum-meta-item--link:hover { color: var(--fg); }
.forum-post-author-meta a { color: var(--fg-3); }
.forum-post-author-meta a:hover { color: var(--fg); }
.forum-topic-detail-title { display: flex; align-items: flex-start; gap: 8px; font-size: clamp(1.375rem, 3vw, 1.75rem); font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.forum-topic-detail-title .forum-flag-icon { width: 20px !important; height: 20px !important; margin-top: 6px; }
.forum-topic-detail-body { margin-top: 14px; color: var(--fg); font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
.forum-topic-detail-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.forum-topic-meta-pills { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-left: -8px; }
.forum-topic-actions { margin: 0; }
.forum-topic-like-btn .like-label { display: none; }
.forum-topic-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 14px; color: var(--fg-3); font-size: var(--fs-13); }
.forum-topic-page .comments-section { max-width: none; margin-top: var(--sp-8); }

/* Konu formu */
.forum-create-page { max-width: 760px; margin: 0 auto; }
.forum-form { display: grid; gap: 4px; }
.forum-form-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.forum-form-actions { display: flex; gap: 8px; }
@media (max-width: 639px) {
    .forum-form-footer { flex-direction: column; align-items: stretch; }
    .forum-form-actions .btn { flex: 1; }
}

/* Yazma kısıtı bildirimi */
.forum-write-notice {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: var(--r-lg);
    background: var(--surface-1);
}
.forum-write-notice__mark { --forum-access-mark-size: 44px; }
.forum-write-notice__mark svg { width: 20px; height: 20px; }
.forum-write-notice__copy { display: grid; gap: 2px; min-width: 0; }
.forum-write-notice__copy strong { font-size: var(--fs-15); }
.forum-write-notice__copy > span { color: var(--fg-2); font-size: var(--fs-14); line-height: 1.5; }

/* ===== 28. Keşfet ===== */
.browse-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 16px; }
.browse-result-count { color: var(--fg-3); font-size: var(--fs-14); }
.browse-bar { display: grid; gap: 12px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.browse-bar-top { display: flex; align-items: center; gap: 8px; }
.browse-search-wrap { position: relative; flex: 1; min-width: 0; max-width: 420px; }
.browse-search-icon { position: absolute; top: 50%; left: 12px; width: 16px !important; height: 16px !important; color: var(--fg-3); transform: translateY(-50%); pointer-events: none; }
.browse-search-input {
    width: 100%;
    height: 38px;
    padding: 0 12px 0 36px;
    border: 1px solid transparent;
    border-radius: var(--r-full);
    background: var(--surface-2);
    font-size: var(--fs-14);
    outline: none;
}
.browse-search-input::placeholder { color: var(--fg-3); }
.browse-search-input:focus { border-color: var(--line-strong); background: var(--bg); }
.browse-select { flex-shrink: 0; }
.browse-select .select--sm { height: 38px; }
.browse-period-group.is-hidden { display: none; }

.browse-bar-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 2px;
    overflow-x: auto;
    scrollbar-width: none;
}
.browse-bar-row::-webkit-scrollbar { display: none; }
.browse-bar-divider { flex-shrink: 0; width: 1px; height: 20px; margin: 0 6px; background: var(--line-strong); }
.browse-status-list, .browse-cats { display: flex; gap: 6px; }
.browse-status-list { flex-shrink: 0; }
.browse-cats { flex-wrap: wrap; }
.browse-status-item, .browse-cat-item, .browse-cats-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    height: 32px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: var(--r-full);
    background: var(--surface-2);
    color: var(--fg-2);
    font-size: var(--fs-13);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.browse-status-item:hover, .browse-cat-item:hover, .browse-cats-toggle:hover { background: var(--surface-3); color: var(--fg); }
.browse-status-item.is-checked, .browse-cat-item.is-checked { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-ink); font-weight: 600; }
.browse-status-item input, .browse-cat-item input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.browse-status-item:has(input:focus-visible), .browse-cat-item:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.browse-cats-toggle svg, .browse-cats-toggle [data-lucide] { width: 15px; height: 15px; }
.browse-cats-caret { transition: transform var(--dur) var(--ease); }
.browse-cats-toggle.is-open { background: var(--invert-bg); color: var(--invert-fg); }
.browse-cats-toggle.is-open .browse-cats-caret { transform: rotate(180deg); }
.browse-cats-toggle.has-selection:not(.is-open) { border-color: var(--brand-line); color: var(--brand-ink); }
.browse-toggle-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--brand); color: var(--on-brand); font-size: 11px; font-weight: 700; }

.browse-cats-panel { display: grid; gap: 16px; padding: 16px; border-radius: var(--r-lg); background: var(--surface-1); }
.browse-cats-group { display: grid; gap: 8px; }
.browse-cats-title { color: var(--fg-3); font-size: var(--fs-12); font-weight: 600; }
.browse-cats-actions { display: flex; justify-content: flex-end; gap: 8px; }
button.browse-cat-item { font-family: inherit; }
.browse-range { display: flex; align-items: flex-end; gap: 8px; max-width: 320px; }
.browse-range-field { display: grid; flex: 1; gap: 4px; min-width: 0; color: var(--fg-3); font-size: var(--fs-12); }
.browse-range-field input {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--fg);
    font-size: var(--fs-14);
    font-variant-numeric: tabular-nums;
    outline: none;
    -moz-appearance: textfield;
}
.browse-range-field input::-webkit-outer-spin-button, .browse-range-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.browse-range-field input:focus { border-color: var(--brand-line); background: var(--bg); }
.browse-range-sep { padding-bottom: 8px; color: var(--fg-3); }
.browse-chips { margin: -4px 0 20px; }
.browse-chip { height: 30px; }
.browse-chip-x { width: 13px !important; height: 13px !important; }
.browse-chip--reset { background: transparent; color: var(--fg-3); }
@media (max-width: 639px) {
    .browse-search-wrap { max-width: none; }
    .browse-select .select--sm { max-width: 150px; }
    .browse-cats-panel { margin: 0 calc(-1 * var(--gutter)); border-radius: 0; padding: 16px var(--gutter); }
    .browse-cats-actions .btn { flex: 1; }
}

/* ===== 29. Profil ===== */
/* Solda yapışkan profil kartı, sağda sekmeler ve içerik. Mobilde kart üste geçer. */
body.page-profile, body.profile-page { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; }
div.profile-page, main .profile-page { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: start; max-width: 1120px; margin: 0 auto; width: 100%; }

.profile-card { position: sticky; top: calc(var(--header-h) + 20px); border-radius: var(--r-xl); background: var(--surface-1); }
@media (min-width: 768px) {
    [data-theme="light"] .profile-card { background: #F2F2F7; --surface-2: #FFFFFF; --surface-3: #E5E5EA; }
}
/* Kapak Discord oranında (17:6, 680×240 yükleme). Yüklenen kapak net, yedek avatar bulanık gösterilir. */
.profile-card-banner { position: relative; aspect-ratio: 17 / 6; overflow: hidden; border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--profile-accent, var(--surface-3)); }
.profile-card-banner img { width: 100%; height: 100%; object-fit: cover; }
.profile-card-banner.has-image img { filter: blur(28px) saturate(1.3); transform: scale(1.4); opacity: 0.75; }
/* Avatar çerçevesi avatarın 1,2 katı, ortalı ve tıklamayı geçirir (Discord avatar decoration). */
.profile-avatar-wrap { position: relative; display: inline-grid; flex-shrink: 0; }
.profile-avatar-decoration { position: absolute; top: 50%; left: 50%; z-index: 1; width: 120%; height: 120%; max-width: none; transform: translate(-50%, -50%); pointer-events: none; }
.profile-card-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 0 20px 20px; }
.profile-card-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: -48px; }
.profile-avatar { width: 96px; height: 96px; font-size: 34px; box-shadow: 0 0 0 4px var(--surface-1); }
[data-theme="light"] .profile-avatar { box-shadow: 0 0 0 4px #F2F2F7; }
.profile-avatar > span { display: grid; place-items: center; width: 100%; height: 100%; }
/* Premium/yönetici halkası kart zemininde de görünsün */
.profile-avatar.is-premium-avatar, .profile-avatar.is-admin-avatar { box-shadow: none; --ring-gap: 3px; }
.profile-more-menu { position: relative !important; top: auto !important; right: auto !important; margin-bottom: 4px; }
.profile-more-menu > summary { width: 36px; height: 36px; background: var(--surface-2); }
.profile-more-menu .comment-more-menu-popover { right: 0; }
.profile-name { margin-top: 4px; overflow: hidden; font-size: var(--fs-24); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; white-space: nowrap; text-overflow: ellipsis; }
.profile-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -2px; }
.profile-joined { display: flex; align-items: center; gap: 6px; color: var(--fg-3); font-size: var(--fs-13); }
.profile-joined svg, .profile-joined [data-lucide] { width: 15px; height: 15px; }
/* Biyografi ayarı (/ayarlar/biyografi) */
.bio-editor { overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--bg); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.bio-editor:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.bio-editor-toolbar { display: flex; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--line); background: var(--surface-1); }
.bio-editor-count { margin-left: auto; color: var(--fg-3); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.bio-editor-count.is-near { color: var(--warning, #E5A23A); }
.bio-editor-count.is-over { color: var(--danger); font-weight: 700; }
.bio-editor-content { position: relative; min-height: 84px; padding: 12px 14px; color: var(--fg); font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; outline: none; }
.bio-editor-content[data-empty="true"]::before { content: attr(data-placeholder); position: absolute; color: var(--fg-4); pointer-events: none; }
.bio-editor-actions { display: flex; gap: 8px; margin-top: 12px; }
.profile-edit-btn { height: 38px; margin-top: 4px; background: var(--surface-2); font-size: var(--fs-14); }
.profile-edit-btn:hover { background: var(--surface-3); }

.profile-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 6px; overflow: hidden; border-radius: var(--r-lg); background: var(--line); }
.profile-stat { display: grid; justify-items: center; gap: 1px; padding: 12px 4px; background: var(--surface-1); color: var(--fg); text-align: center; transition: background-color var(--dur) var(--ease); }
[data-theme="light"] .profile-stat { background: #F2F2F7; }
.profile-stat:hover { background: var(--surface-2); color: var(--fg); }
.profile-stat strong { font-size: var(--fs-18); font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.profile-stat span { color: var(--fg-3); font-size: var(--fs-12); font-weight: 500; }

.profile-main { min-width: 0; }
.profile-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
}
.profile-tabs::-webkit-scrollbar { display: none; }
.profile-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    height: 46px;
    padding: 0 12px;
    color: var(--fg-3);
    font-size: var(--fs-15);
    font-weight: 600;
    white-space: nowrap;
}
.profile-tab svg, .profile-tab [data-lucide] { width: 17px; height: 17px; }
.profile-tab:hover { color: var(--fg); }
.profile-tab.active { color: var(--fg); }
.profile-tab.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--fg); }
.profile-tab-count { min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--r-full); background: var(--surface-2); color: var(--fg-3); font-size: var(--fs-12); font-weight: 600; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.profile-tab.active .profile-tab-count { background: var(--invert-bg); color: var(--invert-fg); }
.profile-panel { min-height: 280px; }
/* Masaüstü: sekmeler sol sütunda dikey menü, sayılar sağda (profil kartındaki rakam ızgarasının yerine). */
.profile-side { display: grid; gap: 12px; min-width: 0; }
@media (min-width: 768px) {
    .profile-card { position: static; }
    .profile-tabs { flex-direction: column; gap: 2px; margin: 0; padding: 6px; overflow: visible; border: 0; border-radius: var(--r-xl); background: var(--surface-1); }
    [data-theme="light"] .profile-tabs { background: #F2F2F7; }
    .profile-tab { height: 42px; padding: 0 12px; border-radius: var(--r-md); font-size: var(--fs-14); }
    .profile-tab:hover { background: var(--surface-2); }
    [data-theme="light"] .profile-tab:hover { background: #FFFFFF; }
    /* Seçili satır: sitedeki seçili çiplerle aynı ters renk dolgu. */
    .profile-tab.active, [data-theme="light"] .profile-tab.active { background: var(--invert-bg); color: var(--invert-fg); }
    .profile-tab.active::after { display: none; }
    .profile-tab-count { margin-left: auto; }
    .profile-tab.active .profile-tab-count { background: color-mix(in srgb, var(--invert-fg) 12%, transparent); color: var(--invert-fg); }
}
.library-filters { margin-bottom: 12px; }
/* Kendi kitaplığın (docs/library-history.md): arama + sıralama, durum, sayılı tür çipleri, menülü kart. */
.library-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.library-search { position: relative; flex: 1; min-width: 0; max-width: 360px; }
.library-search svg, .library-search [data-lucide] { position: absolute; top: 50%; left: 12px; width: 16px; height: 16px; color: var(--fg-3); transform: translateY(-50%); pointer-events: none; }
.library-search input { width: 100%; height: 36px; padding: 0 12px 0 36px; border: 1px solid transparent; border-radius: var(--r-full); background: var(--surface-2); color: var(--fg); font-size: var(--fs-14); outline: none; }
.library-search input:focus { border-color: var(--line-strong); background: var(--bg); }
.library-toolbar .select--sm { height: 36px; }
.library-categories { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.library-categories .is-extra { display: none; }
.library-categories.is-expanded .is-extra { display: inline-flex; }
.library-categories-more { border-style: dashed; border-color: var(--line-strong); background: transparent; font-family: inherit; }
.library-categories-more[hidden] { display: none; }
@media (max-width: 639px) {
    /* Telefonda tek satır kaydırma; sağ kenardaki solma devamı olduğunu gösterir. */
    .library-categories { flex-wrap: nowrap; margin: 0 calc(-1 * var(--gutter)) 18px; padding: 0 var(--gutter) 2px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
    .library-categories::-webkit-scrollbar { display: none; }
    .library-categories .is-extra { display: inline-flex; }
    .library-categories-more { display: none; }
}
.library-category-count { color: inherit; font-weight: 700; font-variant-numeric: tabular-nums; opacity: .75; }
.library-card { position: relative; }
.library-card-new { position: absolute; top: 6px; left: 6px; z-index: 1; padding: 2px 7px; border-radius: var(--r-sm); background: var(--brand); color: var(--on-brand); font-size: 11px; font-weight: 700; letter-spacing: .01em; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.library-card-menu { position: absolute !important; top: 4px !important; right: 4px !important; z-index: 3; }
.library-card-menu > summary { width: 30px; height: 30px; background: rgba(0, 0, 0, .55); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.library-card-menu > summary:hover, .library-card-menu[open] > summary { background: rgba(0, 0, 0, .75); color: #fff; }
.library-card-menu .comment-more-menu-popover { right: 0; width: min(220px, calc(100vw - 32px)); }
.library-card-menu form { margin: 0; }
.library-card .series-card-title a { color: inherit; }
.library-card-progress--completed > span { background: var(--brand-ink); }
.library-card-continue { display: inline-flex; align-items: center; gap: 5px; width: fit-content; max-width: 100%; margin-top: 4px; overflow: hidden; color: var(--brand-ink); font-size: var(--fs-12); font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.library-card-continue svg, .library-card-continue [data-lucide] { flex-shrink: 0; width: 13px; height: 13px; }
.library-card-continue:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 639px) {
    .profile-series-grid:has(> .library-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
    .library-search { max-width: none; }
    .library-toolbar .browse-select .select--sm { max-width: 140px; }
}
.profile-series-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.empty-state-action { margin-top: 10px; }
.empty-state .empty-state-action { color: var(--on-brand); }


/* Okuma geçmişi */
.history-list { display: grid; }
.history-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.history-item-menu { position: relative !important; top: auto !important; right: auto !important; }
.history-item-menu .comment-more-menu-popover { right: 0; width: 220px; }
.history-item-menu form { margin: 0; }
.history-item--removed { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--fg-3); font-size: var(--fs-13); }
.history-item--removed strong { color: var(--fg-2); }
.history-item:last-child { border-bottom: 0; }
.history-cover { display: block; width: 56px; aspect-ratio: var(--cover-ratio); overflow: hidden; border-radius: var(--r-sm); background: var(--surface-2); }
.history-cover img { width: 100%; height: 100%; object-fit: cover; }
.history-cover .cover-placeholder { font-size: var(--fs-16); }
.history-main { display: grid; gap: 4px; min-width: 0; }
.history-title { overflow: hidden; color: var(--fg); font-size: var(--fs-15); font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.history-chapter { display: flex; align-items: center; gap: 8px; color: var(--fg-2); font-size: var(--fs-13); }
.history-state { color: var(--brand-ink); font-size: var(--fs-12); font-weight: 700; font-variant-numeric: tabular-nums; }
.history-state.is-done { color: var(--fg-4); }
.history-state.is-started { color: var(--fg-3); font-weight: 600; }
.history-progress { display: block; width: min(220px, 100%); height: 3px; overflow: hidden; border-radius: 2px; background: var(--surface-3); }
.history-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.history-date { color: var(--fg-3); font-size: var(--fs-12); }
.history-resume { flex-shrink: 0; background: var(--surface-2); }
.history-resume:hover { background: var(--surface-3); }

@media (max-width: 1023px) {
    div.profile-page, main .profile-page { grid-template-columns: 280px minmax(0, 1fr); gap: 28px; }
    .profile-series-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Mobil/tablet: kart üste, sekmeler yatay kaydırılır */
@media (max-width: 767px) {
    .page-profile main.container { padding-top: 0; }
    div.profile-page, main .profile-page { grid-template-columns: 1fr; gap: 0; }
    .profile-card { position: static; margin: 0 calc(-1 * var(--gutter)); border-radius: 0; background: none; }
    [data-theme="light"] .profile-card { background: none; }
    .profile-card-banner { border-radius: 0; }
    .profile-card-body { padding: 0 var(--gutter) 16px; gap: 8px; }
    .profile-card-top { margin-top: -40px; }
    .profile-avatar { width: 80px; height: 80px; font-size: 28px; box-shadow: 0 0 0 4px var(--bg); }
    [data-theme="light"] .profile-avatar { box-shadow: 0 0 0 4px var(--bg); }
    .profile-name { font-size: var(--fs-20); }
    .profile-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); background: none; gap: 0; border-radius: 0; }
    .profile-stat, [data-theme="light"] .profile-stat { padding: 8px 0; background: none; }
    .profile-stat strong { font-size: var(--fs-16); }
    .profile-stat span { font-size: 11px; }
    .profile-tabs { margin: 0 calc(-1 * var(--gutter)) 16px; padding: 0 calc(var(--gutter) - 8px); }
    .profile-tab { height: 44px; padding: 0 10px; font-size: var(--fs-14); }
    .profile-tab svg, .profile-tab [data-lucide] { display: none; }
    .profile-series-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
    .history-item { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; }
    .history-cover { width: 48px; }
    .history-resume span { display: none; }
    .history-resume { width: 36px; padding: 0; }
}

/* ===== 30. Ayarlar ===== */
.settings-page { max-width: 960px; margin: 0 auto; }
.settings-page-header { margin-bottom: 20px; }
.settings-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; }
.settings-sidebar { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 2px; }
.settings-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: var(--r-md);
    color: var(--fg-2);
    font-size: var(--fs-14);
    font-weight: 500;
}
.settings-nav-link:hover { background: var(--surface-1); color: var(--fg); }
.settings-nav-link.is-active { background: var(--surface-2); color: var(--fg); font-weight: 600; }
.settings-nav-icon { width: 17px !important; height: 17px !important; color: var(--fg-3); }
.settings-content { min-width: 0; }
.settings-panel { display: grid; gap: 16px; }
.settings-panel > .btn { justify-self: start; }
.settings-panel-header h2 { font-size: var(--fs-20); }
.settings-panel-header p { margin-top: 4px; color: var(--fg-3); font-size: var(--fs-14); }
.settings-card { padding: 18px; border-radius: var(--r-lg); background: var(--surface-1); }
.settings-card .form-group > label { color: var(--fg); font-size: var(--fs-14); }
.settings-card .form-group input:not([type="file"]):not([type="checkbox"]) { background: var(--surface-2); }
.settings-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; }
.settings-switch-row > span:first-child { display: grid; gap: 2px; }
.settings-switch-row strong { font-size: var(--fs-15); }
.settings-switch-row small { color: var(--fg-3); font-size: var(--fs-13); }
.settings-static-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
.settings-static-field { display: grid; gap: 2px; min-width: 0; }
.settings-static-label { color: var(--fg-3); font-size: var(--fs-12); }
.settings-static-value { overflow: hidden; font-size: var(--fs-15); font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.settings-card--danger { background: var(--danger-soft); }
/* Kullanıcı adı değiştirme (/ayarlar/kullanici-adi, docs/username-change.md) */
.username-current { display: grid; gap: 2px; margin-bottom: 18px; }
.username-current-label { color: var(--fg-3); font-size: var(--fs-12); }
.username-current strong { overflow-wrap: anywhere; font-size: var(--fs-18); }
.username-current-url { color: var(--fg-3); font-size: var(--fs-13); overflow-wrap: anywhere; }
.username-form .auth-field { margin-bottom: 14px; }
.username-locked { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); color: var(--fg-2); font-size: var(--fs-14); line-height: 1.5; }
.username-locked svg, .username-locked [data-lucide] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--warning); }
.username-rules { display: grid; gap: 8px; color: var(--fg-3); font-size: var(--fs-13); line-height: 1.5; }
.username-rules li { display: flex; align-items: flex-start; gap: 8px; }
.username-rules svg, .username-rules [data-lucide] { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }
.username-dialog { width: min(400px, calc(100vw - 32px)); margin: auto; padding: 22px; border: 0; border-radius: var(--r-lg); background: var(--surface-1); color: var(--fg); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.username-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.username-dialog h3 { font-size: var(--fs-18); }
.username-dialog-change { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; font-size: var(--fs-15); overflow-wrap: anywhere; }
.username-dialog-change > span { color: var(--fg-3); text-decoration: line-through; }
.username-dialog-change svg, .username-dialog-change [data-lucide] { width: 16px; height: 16px; color: var(--fg-3); }
.username-dialog-note { margin-top: 12px; color: var(--fg-2); font-size: var(--fs-14); line-height: 1.5; }
.username-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.settings-danger-header { display: grid; gap: 8px; margin-bottom: 16px; }
.settings-danger-title { color: var(--danger); font-size: var(--fs-16); }
.settings-danger-description { color: var(--fg-2); font-size: var(--fs-14); line-height: 1.6; }
.settings-danger-link { color: var(--fg); text-decoration: underline; }
.settings-danger-list { display: grid; gap: 6px; color: var(--fg-2); font-size: var(--fs-14); }
.settings-danger-list li { display: flex; align-items: flex-start; gap: 8px; }
.settings-danger-dot { width: 5px; height: 5px; margin-top: 8px; flex-shrink: 0; border-radius: 50%; background: var(--danger); }
.settings-blocked-user, .settings-blocked-user-main { display: flex; align-items: center; gap: 12px; }
.settings-blocked-user { justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); }
.settings-blocked-user:last-child { border-bottom: 0; }
.settings-blocked-user-main { color: var(--fg); }
.settings-blocked-user-main .comment-avatar { width: 32px; height: 32px; flex-shrink: 0; }
.settings-blocked-user-main { min-width: 0; }
.settings-blocked-user-text { display: flex; flex-direction: column; min-width: 0; }
.settings-blocked-user-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-blocked-user-text small { color: var(--fg-2); font-size: var(--fs-12, 12px); }
.avatar-upload { display: flex; align-items: center; gap: 20px; margin-top: 4px; }
.avatar-preview { width: 80px; height: 80px; font-size: 28px; }
.avatar-upload-input { display: grid; gap: 8px; flex: 1; min-width: 0; }
@media (max-width: 767px) {
    .settings-layout { grid-template-columns: 1fr; gap: 16px; }
    .settings-sidebar { position: static; display: flex; gap: 6px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; }
    .settings-sidebar::-webkit-scrollbar { display: none; }
    .settings-nav-link { flex-shrink: 0; min-height: 34px; border-radius: var(--r-full); background: var(--surface-2); }
    .settings-nav-link.is-active { background: var(--invert-bg); color: var(--invert-fg); }
    .settings-nav-link.is-active .settings-nav-icon { color: inherit; }
    .settings-static-grid { grid-template-columns: 1fr; }
    .settings-panel > .btn { justify-self: stretch; }
}

/* ===== 31. Giriş / kayıt ===== */
/* Arka planda tam genişlikte rastgele vitrin serisi (video → manşet görseli),
   önünde dar bir form kartı; seri bilgisi sol altta. Görsel üzerindeki metin
   temadan bağımsız beyazdır, form kartı temanın zeminini kullanır. */
.page-auth { overflow-x: hidden; overflow-x: clip; }
.page-auth main.container { padding-top: 0; padding-bottom: 0; }
.auth-page { position: relative; isolation: isolate; }
.auth-page.has-showcase { width: 100vw; margin-left: calc(50% - 50vw); }
.auth-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #000; }
.auth-bg video, .auth-bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.auth-page.has-showcase::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.25) 55%, rgba(0, 0, 0, 0.55) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.6) 100%);
    pointer-events: none;
}
.auth-stage {
    display: grid;
    justify-items: center;
    align-items: center;
    width: 100%;
    max-width: var(--container);
    min-height: calc(100vh - var(--header-h) - 1px);
    margin: 0 auto;
    padding: 40px var(--gutter);
}
.has-showcase .auth-stage { grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; align-items: end; }
.has-showcase .auth-panel { align-self: center; }

.auth-showcase { display: grid; gap: 8px; max-width: 520px; padding-bottom: 8px; color: #fff; }
.auth-showcase-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.8); font-size: var(--fs-13); font-weight: 600; }
.auth-showcase-kicker .dot-sep { color: rgba(255, 255, 255, 0.5); }
.auth-showcase-rating { display: inline-flex; align-items: center; gap: 3px; }
.auth-showcase-rating svg, .auth-showcase-rating [data-lucide] { width: 13px; height: 13px; color: var(--rating); fill: var(--rating); }
.auth-showcase-title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35); }
.auth-showcase-desc {
    display: -webkit-box;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.84);
    font-size: var(--fs-15);
    line-height: 1.55;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.auth-showcase-link { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin-top: 4px; color: #fff; font-size: var(--fs-14); font-weight: 600; }
.auth-showcase-link svg, .auth-showcase-link [data-lucide] { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.auth-showcase-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.auth-showcase-link:hover svg { transform: translateX(2px); }

.auth-panel { display: grid; justify-items: center; width: 100%; }
.has-showcase .auth-card {
    max-width: 420px;
    padding: 32px 28px 24px;
    border-radius: var(--r-xl);
    background: var(--bg);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
.auth-card { width: 100%; max-width: 400px; }
.auth-header { margin-bottom: 24px; }
.auth-page:not(.has-showcase) .auth-header { text-align: center; }
.auth-title { font-size: var(--fs-28); font-weight: 800; line-height: 1.15; letter-spacing: -0.025em; }
.auth-subtitle { margin-top: 6px; color: var(--fg-3); font-size: var(--fs-15); line-height: 1.5; }
.auth-card > .alert { margin-bottom: 16px; }
.auth-form { display: grid; }

.auth-field { display: grid; gap: 6px; margin-bottom: 16px; }
.auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.auth-label { color: var(--fg-2); font-size: var(--fs-13); font-weight: 600; }
.auth-label-link { color: var(--fg-3); font-size: var(--fs-13); font-weight: 500; }
.auth-label-link:hover { color: var(--fg); }
.auth-input-wrap { position: relative; }
.auth-input {
    width: 100%;
    height: 48px;
    padding: 0 44px 0 14px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--fg);
    font-size: var(--fs-15);
    outline: none;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.auth-input::placeholder { color: var(--fg-4); }
.auth-input:focus { border-color: var(--brand); background: var(--bg); box-shadow: 0 0 0 3px var(--brand-soft); }
.auth-field.is-invalid .auth-input { border-color: var(--danger); }
.auth-field.is-invalid .auth-input:focus { box-shadow: 0 0 0 3px var(--danger-soft); }
/* Tarayıcının otomatik doldurma zemini temayla uyumlu kalsın */
.auth-input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--surface-2) inset; -webkit-text-fill-color: var(--fg); caret-color: var(--fg); }

.auth-input-status { position: absolute; top: 50%; right: 14px; width: 18px; height: 18px; transform: translateY(-50%); pointer-events: none; }
.auth-field.is-checking .auth-input-status {
    border: 2px solid var(--surface-3);
    border-top-color: var(--fg-3);
    border-radius: 50%;
    animation: auth-spin 700ms linear infinite;
}
.auth-field.is-valid .auth-input-status {
    background: var(--brand);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes auth-spin { to { transform: translateY(-50%) rotate(360deg); } }
.auth-input-action {
    position: absolute;
    top: 50%;
    right: 6px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--r-md);
    color: var(--fg-3);
    transform: translateY(-50%);
}
.auth-input-action:hover { background: var(--surface-3); color: var(--fg); }
.auth-input-action svg, .auth-input-action [data-lucide] { width: 18px; height: 18px; }
.auth-input-action > span { display: grid; place-items: center; }

.auth-field-hint { color: var(--fg-3); font-size: var(--fs-12); line-height: 1.5; }
.auth-field.is-invalid .auth-field-hint { display: none; }
.auth-field-msg { color: var(--fg-3); font-size: var(--fs-13); line-height: 1.45; }
.auth-field-msg:empty { display: none; }
.auth-field-msg.is-error { color: var(--danger); }
.auth-field-msg.is-success { color: var(--brand-ink); }
.auth-suggest { color: var(--brand-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.auth-strength { display: flex; align-items: center; gap: 10px; }
.auth-strength[hidden] { display: none; }
.auth-strength-bars { display: grid; flex: 1; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.auth-strength-bars > span { height: 4px; border-radius: 2px; background: var(--surface-3); transition: background-color var(--dur) var(--ease); }
.auth-strength-label { min-width: 104px; color: var(--fg-3); font-size: var(--fs-12); font-weight: 600; text-align: right; }
.auth-strength[data-score="1"] .auth-strength-bars > span:nth-child(-n+1) { background: var(--danger); }
.auth-strength[data-score="2"] .auth-strength-bars > span:nth-child(-n+2) { background: var(--warning); }
.auth-strength[data-score="3"] .auth-strength-bars > span:nth-child(-n+3) { background: var(--brand); }
.auth-strength[data-score="4"] .auth-strength-bars > span { background: var(--brand); }
.auth-caps { display: flex; align-items: center; gap: 5px; color: var(--warning); font-size: var(--fs-12); font-weight: 600; }
.auth-caps[hidden] { display: none; }
.auth-caps svg, .auth-caps [data-lucide] { width: 14px; height: 14px; }

.auth-check { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin: -4px 0 16px; color: var(--fg-2); font-size: var(--fs-14); cursor: pointer; }
.auth-check input { width: 16px; height: 16px; }
.auth-submit { height: 48px; font-size: var(--fs-15); }
.auth-submit.is-loading { opacity: 0.7; cursor: progress; }
.auth-legal { margin-top: 14px; color: var(--fg-3); font-size: var(--fs-12); line-height: 1.55; text-align: center; }
.auth-legal a { color: var(--fg-2); text-decoration: underline; text-underline-offset: 2px; }
.auth-legal a:hover { color: var(--fg); }
.auth-link { margin-top: 24px; color: var(--fg-3); font-size: var(--fs-14); text-align: center; }
.auth-link a { display: inline-flex; align-items: center; gap: 4px; color: var(--fg); font-weight: 600; }
.auth-link a svg, .auth-link a [data-lucide] { width: 15px; height: 15px; }

@media (max-width: 1023px) {
    .has-showcase .auth-stage { grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; }
    .has-showcase .auth-card { max-width: 400px; }
}
/* Masaüstünde görsel alt bilgiye kadar uzanır, arada boşluk kalmaz */
@media (min-width: 900px) {
    .page-auth:has(.auth-page.has-showcase) .site-footer { margin-top: 0; }
}
/* Mobil/tablet: vitrin gizlenir, form sade haliyle tek başına durur */
@media (max-width: 899px) {
    .auth-page.has-showcase { width: auto; margin-left: 0; }
    .auth-page.has-showcase::before, .auth-bg, .auth-showcase { display: none; }
    .auth-stage, .has-showcase .auth-stage { grid-template-columns: 1fr; min-height: 0; padding: 32px 0 16px; }
    .has-showcase .auth-card { max-width: 440px; padding: 0; border-radius: 0; background: none; box-shadow: none; }
    .auth-page .auth-header { text-align: left; }
    .auth-title { font-size: var(--fs-24); }
}
@media (prefers-reduced-motion: reduce) {
    .auth-field.is-checking .auth-input-status { animation-duration: 2s; }
}

/* ===== 32. Bildirimler ===== */
.notifications-page { max-width: 760px; margin: 0 auto; }
.notifications-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.notifications-page-head h1 { font-size: var(--fs-28); font-weight: 800; letter-spacing: -0.02em; }
.notifications-page-head p { margin-top: 2px; color: var(--fg-3); font-size: var(--fs-14); }
.notification-list { display: grid; }
.notification-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; border-bottom: 1px solid var(--line); }
.notification-row:hover { background: var(--surface-1); }
.notification-row-menu { position: relative !important; top: auto !important; right: auto !important; margin: 12px 0 0 4px; }
.notification-row:has(.notification-row-menu[open]) { z-index: 30; }
.notification-row:last-child { border-bottom: 0; }
.notification-row-link { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px 4px; color: var(--fg); }
.notification-row-link:hover { color: var(--fg); }
.notification-row:not(.is-unread) .notif-title { font-weight: 500; color: var(--fg-2); }
.notification-unread-dot { flex-shrink: 0; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--brand); }

/* ===== 33. Statik sayfa ve hata ===== */
.static-page { max-width: 760px; margin: 0 auto; padding: 8px 0 24px; }
.static-page-title { margin-bottom: 20px; font-size: var(--fs-32); font-weight: 800; letter-spacing: -0.02em; }
.static-page-body { color: var(--fg-2); font-size: var(--fs-16); line-height: 1.75; }
.static-page-body h2 { margin: 32px 0 10px; color: var(--fg); font-size: var(--fs-20); }
.static-page-body h3 { margin: 24px 0 8px; color: var(--fg); font-size: var(--fs-18); }
.static-page-body p, .static-page-body ul, .static-page-body ol { margin-bottom: 14px; }
.static-page-body strong { color: var(--fg); }
.error-page { display: grid; justify-items: center; gap: 10px; padding: 80px 16px; text-align: center; }
.error-page-code { color: var(--fg-4); font-size: 5rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.error-page-title { font-size: var(--fs-24); font-weight: 800; }
.error-page-desc { max-width: 420px; margin-bottom: 12px; color: var(--fg-3); font-size: var(--fs-15); }
.category-description { margin-top: var(--sp-8); color: var(--fg-3); font-size: var(--fs-14); line-height: 1.7; }

@media (max-width: 639px) {
    .popular-series-title, .update-card-title, .series-card-title { font-size: var(--fs-13); }
    .popular-series-rank { -webkit-text-stroke-width: 2px; }
    .update-card-meta { font-size: 11px; gap: 4px; }
}

@media (max-width: 767px) {
    .series-library-action { min-width: 0; }
}

/* Türler menüsü: okuyucu kitlesi ayrı grup */
.navbar-categories-subtitle { padding: 4px 6px 8px; color: var(--fg-3); font-size: var(--fs-12); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.navbar-categories-audience { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 6px 14px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.navbar-categories-audience .navbar-audience-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 16px;
    border-radius: var(--r-full);
    background: var(--surface-2);
    color: var(--fg-2);
    font-size: var(--fs-13);
    font-weight: 600;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.navbar-categories-audience .navbar-audience-link:hover {
    background: var(--surface-3);
    color: var(--fg);
}

.browse-bar-top .browse-cats-toggle { height: 38px; }
@media (max-width: 639px) {
    .browse-bar-top { flex-wrap: wrap; }
    .browse-bar-top .browse-search-wrap { flex-basis: 100%; }
    .browse-bar-top .browse-select, .browse-bar-top .browse-cats-toggle { flex: 1; }
    .browse-bar-top .browse-select .select--sm { width: 100%; max-width: none; }
    .browse-bar-top .browse-cats-toggle { justify-content: center; }
}


/* ===== 30. Profil görünümü (/ayarlar/gorunum) ===== */
.appearance-preview { overflow: hidden; border-radius: var(--r-lg); background: var(--surface-1); }
.appearance-preview-banner { aspect-ratio: 17 / 6; max-height: 150px; width: 100%; background: var(--profile-accent, var(--surface-3)) center / cover no-repeat; }
.appearance-preview-body { display: flex; align-items: flex-end; gap: 14px; padding: 0 18px 16px; margin-top: -36px; }
.appearance-preview-avatar .profile-avatar { width: 80px; height: 80px; font-size: 28px; box-shadow: 0 0 0 4px var(--surface-1); }
.appearance-preview-avatar .profile-avatar.is-premium-avatar, .appearance-preview-avatar .profile-avatar.is-admin-avatar { box-shadow: none; }
.appearance-preview-name { overflow: hidden; padding-bottom: 6px; font-size: var(--fs-20); font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.appearance-grid { display: grid; gap: 10px; margin-top: 10px; }
.appearance-grid--decorations { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.appearance-grid--banners { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.appearance-grid--colors { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.appearance-option { position: relative; cursor: pointer; }
.appearance-option input { position: absolute; opacity: 0; pointer-events: none; }
.appearance-tile { position: relative; display: grid; gap: 6px; justify-items: center; height: 100%; padding: 10px 8px 8px; border: 2px solid transparent; border-radius: var(--r-md); background: var(--surface-2); transition: border-color .15s, background .15s; }
.appearance-option:hover .appearance-tile { background: var(--surface-3); }
.appearance-option input:checked + .appearance-tile { border-color: var(--brand); }
.appearance-option input:focus-visible + .appearance-tile { outline: 2px solid var(--brand); outline-offset: 2px; }
.appearance-option.is-locked { cursor: not-allowed; }
.appearance-option.is-locked .appearance-deco-thumb, .appearance-option.is-locked .appearance-banner-thumb, .appearance-option.is-locked .appearance-color-sample { opacity: .45; filter: saturate(.6); }
.appearance-caption { overflow: hidden; max-width: 100%; color: var(--fg-2); font-size: var(--fs-12); white-space: nowrap; text-overflow: ellipsis; }
.appearance-none { display: grid; place-items: center; width: 64px; height: 64px; color: var(--fg-4); }
.appearance-deco-thumb { position: relative; display: grid; place-items: center; width: 64px; height: 64px; }
.appearance-deco-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--surface-3); }
.appearance-deco-thumb img { position: absolute; inset: 0; width: 64px; height: 64px; }
.appearance-banner-thumb { width: 100%; aspect-ratio: 17 / 6; overflow: hidden; border-radius: 8px; background: var(--surface-3); }
.appearance-banner-thumb.appearance-none { width: 100%; height: auto; }
.appearance-banner-thumb img { width: 100%; height: 100%; object-fit: cover; }
.appearance-color-sample { overflow: hidden; max-width: 100%; padding: 6px 0; font-size: var(--fs-15); font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.appearance-lock { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-1); color: var(--premium); }
.appearance-lock svg { width: 13px; height: 13px; }
.appearance-premium-badge { position: absolute; top: 6px; right: 6px; z-index: 2; background: color-mix(in srgb, var(--premium) 22%, var(--surface-1)); }
.appearance-option.is-locked .appearance-premium-badge { opacity: 1; }
.appearance-tag { position: absolute; top: 6px; right: 6px; padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.appearance-tag--premium { background: color-mix(in srgb, var(--premium) 18%, transparent); color: var(--premium); }
.appearance-upload { margin-top: 12px; }
.appearance-premium-hint { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.appearance-premium-hint svg { flex-shrink: 0; width: 14px; height: 14px; color: var(--premium); }
.appearance-accent { display: inline-flex; align-items: center; gap: 12px; }
.appearance-accent input[type="color"] { width: 36px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; }
.appearance-achievements { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.appearance-achievements li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); }
.appearance-achievements li:not(.is-earned) { opacity: .75; }
.appearance-achievement-icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: var(--surface-3); color: var(--premium); }
.appearance-achievement-icon img { width: 40px; height: 40px; border-radius: 10px; }
.appearance-achievement-text { display: grid; flex: 1; gap: 2px; min-width: 0; }
.appearance-achievement-text small { color: var(--fg-3); font-size: var(--fs-12); }
.appearance-achievement-check { color: var(--brand); }
.appearance-progress { display: block; height: 4px; margin-top: 4px; overflow: hidden; border-radius: 2px; background: var(--surface-3); }
.appearance-progress > span { display: block; height: 100%; background: var(--brand); }
/* Profil rozetleri (başarımlar) */
.profile-badge-achievement { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 3px; border-radius: 999px; background: var(--surface-2); color: var(--fg-2); font-size: var(--fs-12); font-weight: 600; }
.profile-badge-achievement img, .profile-badge-achievement svg { width: 18px; height: 18px; border-radius: 5px; }
.profile-badge-achievement svg { color: var(--premium); }

/* Görünüm sayfası: sekmeler, filtreler, koleksiyon grupları, kayıt çubuğu */
.appearance-preview-body { align-items: flex-start; }
.appearance-preview-copy { display: grid; gap: 6px; min-width: 0; padding-top: 42px; }
.appearance-preview-copy .appearance-preview-name { padding-bottom: 0; }
.appearance-ring-toggle { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-3); font-size: var(--fs-13); cursor: pointer; }
.switch--sm { width: 34px; height: 20px; }
.switch--sm .switch-slider::before { top: 2px; left: 2px; width: 16px; height: 16px; }
.switch--sm input:checked + .switch-slider::before { transform: translateX(14px); }
.appearance-tabs { position: sticky; top: var(--header-h, 56px); z-index: 5; display: flex; gap: 4px; margin: 0 -2px; padding: 6px 2px 0; overflow-x: auto; border-bottom: 1px solid var(--line); background: var(--bg); scrollbar-width: none; }
.appearance-tabs::-webkit-scrollbar { display: none; }
.appearance-tab { position: relative; display: inline-flex; flex: 1 0 auto; align-items: center; justify-content: center; gap: 6px; padding: 9px 12px 11px; border: 0; background: transparent; color: var(--fg-3); font: inherit; font-size: var(--fs-14); font-weight: 600; cursor: pointer; }
.appearance-tab svg { width: 16px; height: 16px; }
/* Bölümler = alt çizgili sekme, altındaki erişim filtresi = hap çip (docs/app-ui-standards.md). */
.appearance-tab:hover { color: var(--fg); }
.appearance-tab.is-active { color: var(--fg); }
.appearance-tab.is-active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--fg); }
.appearance-tab-count { min-width: 22px; padding: 1px 7px; border-radius: var(--r-full); background: var(--surface-2); color: var(--fg-3); font-size: 11px; text-align: center; font-variant-numeric: tabular-nums; }
.appearance-tab.is-active .appearance-tab-count { background: var(--invert-bg); color: var(--invert-fg); }
.appearance-tab-panel { display: grid; gap: 14px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--surface-1); }
.appearance-tab-panel[hidden] { display: none; }
.appearance-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.appearance-filter { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border, var(--surface-3)); border-radius: var(--r-full); background: transparent; color: var(--fg-2); font: inherit; font-size: var(--fs-13); cursor: pointer; }
.appearance-filter span { color: var(--fg-4); font-size: 12px; }
.appearance-filter.is-active { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--fg); }
.appearance-filter.is-active span { color: var(--brand); }
.appearance-tab-panel > .appearance-grid { margin-top: 0; }
.appearance-group { display: grid; gap: 8px; }
.appearance-group[hidden] { display: none; }
.appearance-group-title { margin: 4px 0 0; color: var(--fg-3); font-size: var(--fs-12); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.appearance-group .appearance-grid { margin-top: 0; }
.appearance-option[hidden] { display: none; }
.appearance-grid--avatar_decoration { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.appearance-grid--banner { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.appearance-grid--name_color { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.appearance-mini-progress { display: block; width: 80%; height: 3px; overflow: hidden; border-radius: 2px; background: var(--surface-3); }
.appearance-mini-progress > span { display: block; height: 100%; background: var(--premium); }
.appearance-empty { margin: 0; padding: 16px 0; color: var(--fg-3); font-size: var(--fs-14); text-align: center; }
.appearance-upload-thumb { display: grid; place-items: center; border: 1.5px dashed var(--fg-4); background: transparent; color: var(--fg-3); }
.appearance-upload-thumb svg { width: 22px; height: 22px; }
.appearance-upload-tile:hover .appearance-upload-thumb { border-color: var(--brand); color: var(--brand); }
.appearance-upload-tile.is-locked .appearance-upload-thumb { opacity: .6; }
.appearance-grid-hint { margin: -4px 0 0; }
.appearance-upload-tile.is-chosen .appearance-tile { border-color: var(--brand); }
.appearance-upload-tile.is-chosen .appearance-upload-thumb { border: 0; background: center / cover no-repeat; }
.appearance-upload-tile.is-chosen .appearance-upload-thumb svg { display: none; }
.appearance-upload { display: grid; justify-items: start; gap: 4px; margin-top: 0; }
.appearance-accent-row { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--surface-2); }
.appearance-accent-head { display: grid; gap: 2px; }
.appearance-accent-head small { color: var(--fg-3); font-size: var(--fs-13); }
.appearance-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.appearance-swatch { position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--swatch, var(--surface-2)); color: var(--fg-3); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.appearance-swatch svg { width: 16px; height: 16px; }
.appearance-swatch.is-selected { outline: 2px solid var(--fg); outline-offset: 2px; }
.appearance-swatch--custom { overflow: hidden; background: var(--swatch, conic-gradient(#ef4444, #eab308, #22c55e, #3b82f6, #a855f7, #ef4444)); color: #fff; }
.appearance-swatch--custom svg { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
.appearance-swatch--custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.appearance-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: -4px; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--surface-2); background: var(--bg); }
.appearance-dirty { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; color: var(--fg-2); font-size: var(--fs-13); }
.appearance-dirty::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--premium); }
.appearance-avatar-edit { position: absolute; right: -2px; bottom: -2px; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; border: 3px solid var(--surface-1); border-radius: 50%; background: var(--surface-3); color: var(--fg); cursor: pointer; }
.appearance-avatar-edit:hover { background: var(--brand); color: var(--on-brand, #fff); }
.appearance-avatar-edit svg { width: 14px; height: 14px; }
.appearance-avatar-remove { justify-self: start; }
.appearance-account { margin-top: 2px; }
.appearance-savebar .btn[disabled] { opacity: .5; cursor: default; }

/* Görünüm: alt sekme filtreleri, koleksiyon seçici, yatay koleksiyon sıraları */
.appearance-subtabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.appearance-subtabs::-webkit-scrollbar { display: none; }
.appearance-subtab { display: inline-flex; flex-shrink: 0; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border: 1px solid transparent; border-radius: var(--r-full); background: var(--surface-2); color: var(--fg-2); font: inherit; font-size: var(--fs-13); font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.appearance-subtab span { color: inherit; font-size: 12px; font-weight: 700; opacity: .75; }
.appearance-subtab:hover { background: var(--surface-3); color: var(--fg); }
.appearance-subtab.is-active { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
.appearance-collections { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.appearance-collections::-webkit-scrollbar { display: none; }
/* İkinci çip satırı: başındaki "Koleksiyon" etiketi onu erişim filtresinden ayırır (docs/app-ui-standards.md). */
.appearance-collections-label { flex-shrink: 0; margin-right: 2px; color: var(--fg-3); font-size: var(--fs-12); font-weight: 600; }
.appearance-collection { display: inline-flex; flex-shrink: 0; align-items: center; height: 30px; padding: 0 12px; border: 1px solid transparent; border-radius: var(--r-full); background: var(--surface-2); color: var(--fg-2); font: inherit; font-size: var(--fs-13); font-weight: 500; white-space: nowrap; cursor: pointer; }
.appearance-collection:hover { background: var(--surface-3); color: var(--fg); }
.appearance-collection.is-active { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
.appearance-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.appearance-group-title span { margin-left: 4px; color: var(--fg-4); font-weight: 600; }
.appearance-group-more { display: inline-flex; align-items: center; gap: 2px; padding: 0; border: 0; background: none; color: var(--brand); font: inherit; font-size: var(--fs-13); font-weight: 600; cursor: pointer; }
.appearance-group-more svg { width: 14px; height: 14px; }
.appearance-group-more[hidden] { display: none; }
.appearance-grid.is-strip { grid-template-columns: none; grid-auto-flow: column; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.appearance-grid.is-strip > .appearance-option { scroll-snap-align: start; }
.appearance-grid--avatar_decoration.is-strip { grid-auto-columns: 96px; }
.appearance-grid--banner.is-strip { grid-auto-columns: 168px; }
.appearance-grid--name_color.is-strip { grid-auto-columns: 128px; }
.appearance-grid.is-strip > .appearance-option[hidden] { display: none; }
/* Premium / kilit bilgisi görselin altında; satır her kutuda ayrılır, kutular eşit boyda kalır */
.appearance-meta { display: flex; align-items: center; justify-content: center; min-height: 20px; }
.appearance-meta .badge-premium { height: 18px; font-size: 10px; }
.appearance-meta-lock { display: inline-flex; align-items: center; gap: 3px; color: var(--fg-3); font-size: 11px; font-weight: 600; }
.appearance-meta-lock svg { width: 12px; height: 12px; color: var(--premium); }
.appearance-option.is-locked .appearance-meta { opacity: 1; }

/* Çerçeve dene: kutularda kendi avatarı, odaktaki çerçeve hareketli; kayıt çubuğunda canlı önizleme */
.appearance-deco-avatar { display: grid; place-items: center; overflow: hidden; color: var(--fg-3); font-size: 20px; font-weight: 700; }
.appearance-deco-avatar img { position: static; width: 100%; height: 100%; object-fit: cover; }
.appearance-deco-thumb .appearance-deco-frame { position: absolute; inset: 0; z-index: 1; width: 64px; height: 64px; pointer-events: none; }
.appearance-option.is-locked .appearance-deco-thumb { opacity: 1; filter: none; }
.appearance-option.is-locked .appearance-deco-avatar { opacity: .55; }
.appearance-option.is-locked .appearance-deco-frame { opacity: .6; filter: saturate(.7); }
.appearance-option.is-trying .appearance-tile { border-color: var(--fg-4); border-style: dashed; }
.appearance-option.is-trying .appearance-deco-avatar, .appearance-option.is-trying .appearance-deco-frame { opacity: 1; filter: none; }
.appearance-option.is-flash .appearance-tile { animation: appearance-flash 1.2s ease-out; }
@keyframes appearance-flash { 0%, 40% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 55%, transparent); } 100% { box-shadow: 0 0 0 3px transparent; } }
.appearance-tryon { display: flex; align-items: center; gap: 12px; min-width: 0; margin-right: auto; }
.appearance-tryon[hidden] { display: none; }
.appearance-tryon-avatar { position: relative; display: grid; flex-shrink: 0; place-items: center; width: 48px; height: 48px; margin-left: 5px; }
.appearance-tryon-avatar .appearance-deco-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--surface-3); font-size: 18px; }
.appearance-tryon-frame { position: absolute; top: 50%; left: 50%; z-index: 1; width: 120%; height: 120%; max-width: none; transform: translate(-50%, -50%); pointer-events: none; transition: opacity .18s; }
.appearance-tryon-frame.is-swapping { opacity: 0; }
.appearance-tryon-text { display: grid; gap: 1px; min-width: 0; }
.appearance-tryon-text strong { overflow: hidden; font-size: var(--fs-14); white-space: nowrap; text-overflow: ellipsis; }
.appearance-tryon-text small { display: flex; align-items: center; gap: 4px; overflow: hidden; color: var(--fg-3); font-size: var(--fs-12); white-space: nowrap; text-overflow: ellipsis; }
.appearance-tryon-text small .badge-premium { height: 18px; font-size: 10px; }
.appearance-tryon-status-text { overflow: hidden; min-width: 0; text-overflow: ellipsis; }
.appearance-tryon-text small svg { flex-shrink: 0; width: 12px; height: 12px; color: var(--premium); }
.appearance-tryon:not([hidden]) ~ .appearance-dirty { margin-right: 0; }
@media (max-width: 560px) { .appearance-tryon:not([hidden]) ~ .appearance-dirty { font-size: 0; gap: 0; } }
/* Başarım ödülleri */
.appearance-rewards { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.appearance-rewards-label { color: var(--fg-3); font-size: var(--fs-12); }
.appearance-reward { display: inline-flex; align-items: center; gap: 6px; max-width: 180px; padding: 3px 9px 3px 3px; border: 0; border-radius: 999px; background: var(--surface-3); color: var(--fg-2); font: inherit; font-size: var(--fs-12); font-weight: 600; cursor: pointer; }
.appearance-reward:hover { color: var(--fg); }
.appearance-reward--badge { padding-left: 8px; cursor: default; }
.appearance-reward--badge svg { width: 13px; height: 13px; color: var(--premium); }
.appearance-reward-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.appearance-reward-deco { position: relative; display: grid; flex-shrink: 0; place-items: center; width: 26px; height: 26px; }
.appearance-reward-deco .appearance-deco-avatar { width: 21px; height: 21px; border-radius: 50%; background: var(--surface-2); font-size: 10px; }
.appearance-reward-deco > img { position: absolute; inset: 0; width: 26px; height: 26px; }
.appearance-reward-banner { flex-shrink: 0; width: 44px; height: 16px; margin-left: 2px; border-radius: 4px; background: var(--surface-2) center / cover no-repeat; }
.appearance-reward-color { flex-shrink: 0; padding-left: 6px; font-weight: 800; }
.appearance-achievements li:not(.is-earned) .appearance-reward > :not(.appearance-reward-name) { opacity: .6; }

.appearance-more { height: 1px; }
.appearance-more[hidden] { display: none; }
/* 900+ öğede ekran dışındaki kutuların yerleşim/çizim maliyeti atlanır */
.appearance-grid:not(.is-strip) > .appearance-option { content-visibility: auto; contain-intrinsic-size: auto 132px; }

.feed-avatar-link { display: inline-flex; flex-shrink: 0; align-self: flex-start; border-radius: 50%; }
.feed-avatar-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }


/* ── Bağlantı hover standardı (docs/web-link-hover.md) ──
   1. İçerik bağlantısı (yorum/forum/SEO metni): her zaman altı çizili, marka rengi.
   2. Kullanıcı adı (+ @bahsetme, #seri etiketi): renk korunur, hover'da alt çizgi.
      Renkli isimde metin şeffaf olduğundan çizgi --name-line rengindedir.
   3. Başlık ve metin eylemi (seri/konu/bölüm başlığı, "Devamını oku"): renk korunur,
      hover'da alt çizgi; satır/kart linkinde satırın hover'ı tetikler.
   4. Meta ve önizleme (kategori, bölüm, kırıntı, footer, yorum özeti): soluk renk,
      hover'da --fg; alt çizgi yok.
   5. Kart, avatar, çip, menü öğesi, buton: alt çizgi yok; mevcut arka plan/yakınlaştırma.
   Klavye odağı her türde global :focus-visible halkasıyla görünür.
   Alt çizgi longhand ile verilir ki renkli isimlerin text-decoration-color'ı ezilmesin. */
/* Forum satırındaki isim de diğer akışlardaki gibi --fg-2 (meta rengi değil) */
.feed-meta a.feed-user-name { color: var(--fg-2); }
.has-name-color, [data-name-color] { text-decoration-color: var(--name-line, var(--fg-3)); }
[data-theme="light"] .has-name-color, [data-theme="light"] [data-name-color] { text-decoration-color: var(--name-line-light, var(--name-line, var(--fg-3))); }
/* 2. kullanıcı adı */
.comment-author:hover, .forum-topic-author:hover, .forum-topic-card-user:hover,
a.feed-user-name:hover, .feed-user:hover .feed-user-name,
a.mention:hover, a.series-tag:hover,
/* 3. başlık ve metin eylemi */
.feed-target a:not(.feed-target-sub):hover, .feed-title:hover,
.update-card-title a:hover, .popular-series-title a:hover,
.chapter-item:hover .chapter-title, .forum-pinned-link:hover .forum-pinned-title,
.forum-topic-card:hover .forum-topic-card-title a,
.history-title:hover,
.series-detail-desc-toggle:hover, .auth-link a:hover {
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.feed-meta a.feed-user-name:hover { color: var(--fg-2); }


/* ── AI çevirisi etiketleri (docs/ai-translation.md) ── */
.ai-mark { width: 1em; height: 1em; flex-shrink: 0; }
.cover-badges {
    position: absolute; top: 6px; left: 6px; z-index: 30;
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    pointer-events: none;
}
.cover-badges .cover-badge { position: static; }
.cover-badge--ai {
    gap: 3px; padding: 0 6px 0 5px; white-space: nowrap;
    background: var(--ai-solid); color: var(--on-ai-solid);
    box-shadow: 0 2px 8px rgba(76, 29, 149, 0.45);
}
.cover-badge--ai .ai-mark { width: 10px; height: 10px; }
.ai-tag {
    display: inline-flex; align-items: center; gap: 3px; vertical-align: 1px;
    height: 18px; padding: 0 6px 0 5px; border-radius: 999px;
    border: 1px solid var(--ai-line); background: var(--ai-soft); color: var(--ai);
    font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0.01em; white-space: nowrap;
}
.ai-tag .ai-mark { width: 9px; height: 9px; }
.chapter-title .ai-tag { margin-left: 4px; }
.update-card-meta .ai-tag { height: 16px; font-size: 10px; }
.series-ai-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 10px 2px 8px; border-radius: 999px;
    background: var(--ai-solid); color: var(--on-ai-solid);
    font-size: var(--fs-12); font-weight: 700; line-height: 1.5; white-space: nowrap;
    box-shadow: 0 2px 10px rgba(124, 58, 237, 0.35);
}
.series-ai-badge .ai-mark { width: 12px; height: 12px; }
.series-ai-partial {
    display: inline-flex; align-items: flex-start; gap: 8px; justify-self: start;
    padding: 8px 12px; border-radius: var(--r-md);
    border: 1px solid var(--ai-line); background: var(--ai-soft); color: var(--fg-2);
    font-size: var(--fs-13); line-height: 1.45; text-decoration: none;
}
.series-ai-partial > .ai-mark { width: 14px; height: 14px; margin-top: 2px; color: var(--ai); }
.series-ai-partial strong { color: var(--ai); }
.series-ai-partial .ai-tag { height: 16px; font-size: 10px; }
.reader-ai-notice {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    max-width: 720px; margin: 12px auto; padding: 10px 14px; border-radius: var(--r-md);
    border: 1px solid var(--ai-line); background: var(--ai-soft); color: var(--fg-2);
    font-size: var(--fs-13); line-height: 1.45; text-align: left;
}
.reader-ai-notice strong { color: var(--fg); }
.reader-ai-notice-icon { display: inline-flex; color: var(--ai); }
.reader-ai-notice-icon .ai-mark { width: 16px; height: 16px; }
.ai-tag--toolbar { margin-left: 8px; flex-shrink: 0; }
.reader-chapter-list-title .ai-tag { margin-left: 4px; }
.browse-ai-toggle .browse-ai-mark { display: inline-flex; color: var(--ai); }
.browse-ai-toggle .ai-mark { width: 13px; height: 13px; }
.browse-ai-toggle.is-checked { background: var(--ai-soft); border-color: var(--ai-line); color: var(--ai); }
.browse-ai-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

/* ===== Çeviri kaynağı kartı (docs/source-credit.md) ===== */
.source-credit {
    display: flex; align-items: center; gap: 10px; min-height: 44px;
    margin: 4px 0 8px; padding: 8px 8px 8px 10px;
    border: 1px solid var(--line); border-radius: var(--r-lg);
    background: var(--surface-2); color: var(--fg-2); text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}
.source-credit:hover { border-color: var(--brand-line); color: var(--fg-2); }
.source-credit-logo {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
    background: var(--surface-3, var(--line)); color: var(--fg);
}
.source-credit-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.source-credit-initial { font-weight: 700; font-size: var(--fs-13); }
.source-credit-text {
    flex: 1; min-width: 0; font-size: var(--fs-13); line-height: 1.4; color: var(--fg-2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.source-credit-name { color: var(--fg); font-weight: 600; }
.source-credit-host { color: var(--fg-3); }
.source-credit-cta-short { display: none; }
.source-credit-icon {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--r-md);
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--brand-line); background: var(--brand-soft); color: var(--brand-ink);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.source-credit-icon svg { width: 16px; height: 16px; }
.source-credit:hover .source-credit-icon { background: var(--brand); border-color: var(--brand); color: #fff; }
/* Yer tutucu: kart JS ile gelene kadar yüksekliği ayrılır, sayfa kaymaz. */
.source-credit-slot:not(.is-loaded) { min-height: 54px; margin: 4px 0 8px; }
.source-credit-slot > .source-credit { margin: 4px 0 8px; }
.source-credit-slot--reader { width: min(100% - 24px, 776px); margin: 16px auto 0; }
.source-credit-slot--reader > .source-credit { margin: 0; }
.reader.manga-mode .source-credit-slot--reader { display: none; }
@media (min-width: 900px) {
    .source-credit-slot:not(.is-loaded) { min-height: 46px; }
}
@media (max-width: 480px) {
    .source-credit { gap: 8px; }
    .source-credit-host { display: none; }
    .source-credit-text { font-size: var(--fs-12); }
    .source-credit-cta { display: none; }
    .source-credit-cta-short { display: inline; }
}

/* ===== Profil duvarı, akış ve istatistik (docs/profile-wall.md) ===== */
.profile-wall.comments-section { max-width: none; margin-top: 0; }
.wall-composer { margin-bottom: 14px; }
.wall-closed-note { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--surface-1); color: var(--fg-3); font-size: var(--fs-14); }
.wall-closed-note svg, .wall-closed-note [data-lucide] { width: 16px; height: 16px; flex-shrink: 0; color: var(--fg-4); }
.wall-closed-note a { color: var(--brand-ink); font-weight: 600; }
.wall-filters { margin-bottom: 4px; }
.wall-focus { display: grid; gap: 8px; margin: 12px 0 4px; padding: 12px 14px; border: 1px solid var(--brand-line); border-radius: var(--r-lg); background: var(--brand-soft); }
.wall-focus-label { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-ink); font-size: var(--fs-12); font-weight: 700; }
.wall-focus-label svg, .wall-focus-label [data-lucide] { width: 13px; height: 13px; }
.profile-wall-feed { margin-top: 4px; }
.profile-wall-feed > [data-feed-item] { padding: 16px 0; border-bottom: 1px solid var(--line); }
.profile-wall-feed > [data-feed-item]:last-child { border-bottom: 0; }
.wall-post-card.is-new { animation: wall-post-in 360ms var(--ease); }
/* Duvara sabitleme (docs/profile-pins.md): sabitlenenler akışın üstünde, aynı kart + soluk "Sabitlendi" satırı. */
.profile-wall-pinned { margin-top: 4px; border-bottom: 1px solid var(--line); }
.profile-wall-pinned[hidden], .profile-wall-pinned:not(:has([data-feed-item])) { display: none; }
.profile-wall-pinned > [data-feed-item] { padding: 16px 0; border-bottom: 1px solid var(--line); }
.profile-wall-pinned > [data-feed-item]:last-child { border-bottom: 0; }
.profile-wall-pinned + .profile-wall-feed { margin-top: 0; }
.feed-pin-label { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--fg-3); font-size: var(--fs-12); font-weight: 600; line-height: 1.3; }
.feed-card > .feed-pin-label { margin-bottom: -2px; }
.feed-pin-label svg, .feed-pin-label [data-lucide] { width: 13px; height: 13px; flex-shrink: 0; }
.feed-card-menu { position: relative !important; top: auto !important; right: auto !important; align-self: flex-start; flex-shrink: 0; margin: -4px -6px 0 0; }
.feed-card-menu .comment-more-menu-popover { right: 0; }

@keyframes wall-post-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.wall-feed-more { display: flex; justify-content: center; padding: 8px 0 4px; }
.wall-feed-more[hidden], .wall-empty[hidden] { display: none; }
.wall-feed-more.is-loading .load-more-btn { opacity: .6; pointer-events: none; }

/* Etkinlik kartları: sosyal gönderi düzeni. Türü avatarın köşesindeki renkli rozet belirtir. */
/* Tür rengi yalnızca avatar köşesindeki rozette; balon, çip ve "+N" kutusu her türde nötr yüzey
   (renkli yarı saydam tonlar koyu zeminde bulanık duruyordu, sarı kahverengiye dönüyordu). */
.feed-card { --feed-accent: var(--fg-3); --feed-accent-soft: var(--surface-2); display: grid; gap: 10px; }
.feed-card--comment { --feed-accent: #5AC8FA; }
.feed-card--review { --feed-accent: var(--rating); }
.feed-card--forum_topic, .feed-card--forum_comment { --feed-accent: var(--brand); }
.feed-card--library { --feed-accent: #64A8FF; }
.feed-card--reading { --feed-accent: #C68CF5; }
.feed-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.feed-card-avatar { position: relative; flex-shrink: 0; }
.feed-card-avatar .comment-avatar { width: 40px; height: 40px; font-size: 14px; }
.feed-card-badge { position: absolute; right: -4px; bottom: -4px; z-index: 2; display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid var(--bg); border-radius: 50%; background: var(--feed-accent); color: #000; }
.feed-card-badge svg, .feed-card-badge [data-lucide] { width: 11px; height: 11px; stroke-width: 2.6; }
.feed-card-action { flex: 1; min-width: 0; margin: 0; color: var(--fg-2); font-size: var(--fs-14); line-height: 1.4; }
.feed-card-action strong, .feed-card-action b { color: var(--fg); font-weight: 700; }
.feed-card-action a { color: var(--fg); font-weight: 600; }
.feed-card-date { display: block; margin-top: 1px; color: var(--fg-3); font-size: var(--fs-12); }
.feed-card-content { display: grid; gap: 10px; margin-left: 52px; min-width: 0; }

/* Yatay seri kartı */
.feed-media { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px; border-radius: var(--r-lg); background: var(--surface-1); }
.feed-media-cover { display: block; aspect-ratio: var(--cover-ratio); overflow: hidden; border-radius: var(--r-md); background: var(--surface-2); }
.feed-media-cover img { width: 100%; height: 100%; object-fit: cover; }
.feed-media-cover > span, .wall-cover > span { display: grid; place-items: center; width: 100%; height: 100%; color: var(--fg-4); font-weight: 700; }
.feed-media-body { display: grid; gap: 6px; align-content: center; min-width: 0; }
.feed-media-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--fg); font-size: var(--fs-16); font-weight: 700; line-height: 1.3; }
a.feed-media-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.feed-media-meta { color: var(--fg-3); font-size: var(--fs-13); }
.feed-media-meta:empty { display: none; }
.feed-media-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.feed-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: var(--r-full); background: var(--surface-2); color: var(--fg-2); font-size: var(--fs-12); font-weight: 600; white-space: nowrap; }
.feed-chip svg, .feed-chip [data-lucide] { width: 13px; height: 13px; }
a.feed-chip:hover { background: var(--surface-3); color: var(--fg); }
.feed-chip--action { background: var(--feed-accent-soft); color: var(--fg); }
a.feed-chip--action:hover { background: var(--surface-3); color: var(--fg); }
.feed-card-stars { display: inline-flex; gap: 2px; }
.feed-card-stars svg, .feed-card-stars [data-lucide] { width: 15px; height: 15px; color: var(--surface-3); fill: var(--surface-3); }
.feed-card-stars .is-on { color: var(--rating); fill: var(--rating); }

/* Birden çok seri: kartı dolduran kapak ızgarası */
.wall-cover-grid { display: grid; gap: 10px; }
.wall-cover-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 300px; }
.wall-cover-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 440px; }
.wall-cover-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 560px; }
.wall-cover-tile { display: grid; gap: 6px; align-content: start; min-width: 0; }
.wall-cover { display: block; aspect-ratio: var(--cover-ratio); overflow: hidden; border-radius: var(--r-md); background: var(--surface-2); }
.wall-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 240ms var(--ease); }
.wall-cover-tile:hover .wall-cover img { transform: scale(1.03); }
.wall-cover-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--fg-2); font-size: var(--fs-12); font-weight: 600; line-height: 1.3; }
.wall-cover-tile:hover .wall-cover-title { color: var(--fg); }
.wall-cover-tile--more .wall-cover { background: var(--feed-accent-soft); }
.wall-cover-tile--more .wall-cover > span { color: var(--fg); font-size: var(--fs-20); font-weight: 800; }

/* Yorum alıntısı ve forum */
.feed-quote { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; padding: 10px 14px; border-radius: 4px 16px 16px 16px; background: var(--feed-accent-soft); color: var(--fg); font-size: var(--fs-14); line-height: 1.55; overflow-wrap: anywhere; }
a.feed-quote:hover { filter: brightness(1.08); }
.feed-forum { display: grid; gap: 6px; justify-items: start; padding: 12px 14px; border-radius: var(--r-lg); background: var(--surface-1); }
.feed-forum-title { color: var(--fg); font-size: var(--fs-15); font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
a.feed-forum-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.feed-forum-preview { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--fg-2); font-size: var(--fs-14); line-height: 1.5; overflow-wrap: anywhere; }
.feed-forum-stats { display: inline-flex; align-items: center; gap: 4px; color: var(--fg-3); font-size: var(--fs-12); }
.feed-forum-stats svg, .feed-forum-stats [data-lucide] { width: 13px; height: 13px; margin-left: 6px; }
.feed-forum-stats svg:first-child { margin-left: 0; }

/* İçerik fotoğrafları (docs/content-images.md) */
.content-images { display: grid; gap: 4px; max-width: 520px; margin-top: 10px; overflow: hidden; border-radius: var(--r-lg); }
.content-images--compact { max-width: 360px; margin-top: 4px; border-radius: var(--r-md); }
.content-image { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 0; background: var(--surface-2); cursor: zoom-in; }
.content-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 240ms var(--ease), opacity var(--dur) var(--ease); }
.content-image:hover img { transform: scale(1.02); }
.content-image:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.content-images--1 .content-image { aspect-ratio: var(--image-ratio, 4 / 3); max-height: 420px; }
.content-images--1 .content-image { width: auto; max-width: 100%; justify-self: start; }
.content-images--1 .content-image img { width: auto; max-width: 100%; max-height: 420px; object-fit: contain; }
.content-images--compact.content-images--1 .content-image, .content-images--compact.content-images--1 .content-image img { max-height: 240px; }
.content-images--2 { grid-template-columns: 1fr 1fr; }
.content-images--2 .content-image { aspect-ratio: 1; }
.content-images--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 3 / 2; }
.content-images--3 .content-image:first-child { grid-row: 1 / span 2; }
.content-images--4 { grid-template-columns: 1fr 1fr; }
.content-images--4 .content-image { aspect-ratio: 4 / 3; }
.forum-topic-detail-body + .content-images { margin: 4px 0 16px; }

/* Düzenleyicide fotoğraf tepsisi */
.forum-editor-images { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--surface-1); }
.forum-editor-images[hidden] { display: none; }
.forum-editor-image { position: relative; width: 76px; height: 76px; overflow: hidden; border-radius: var(--r-md); background: var(--surface-2); }
.forum-editor-image img { width: 100%; height: 100%; object-fit: cover; }
.forum-editor-image.is-uploading img { opacity: .45; }
.forum-editor-image.is-uploading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: forum-image-spin 800ms linear infinite; }
@keyframes forum-image-spin { to { transform: rotate(360deg); } }
.forum-editor-image-remove { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.72); color: #fff; }
.forum-editor-image-remove svg, .forum-editor-image-remove [data-lucide] { width: 13px; height: 13px; }
.forum-editor-image-remove:hover { background: var(--danger); }
.forum-editor-btn--image.is-full { opacity: .4; }

/* Tam ekran fotoğraf görüntüleyici */
.image-lightbox { position: fixed; inset: 0; z-index: 1200; display: grid; grid-template-rows: auto 1fr auto; background: rgba(0, 0, 0, .94); color: #fff; }
.image-lightbox[hidden] { display: none; }
.image-lightbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; font-size: var(--fs-14); font-variant-numeric: tabular-nums; }
.image-lightbox-stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 56px; touch-action: pan-y; }
.image-lightbox-stage img { max-width: 100%; max-height: calc(100vh - 120px); object-fit: contain; border-radius: var(--r-sm); user-select: none; }
.image-lightbox-btn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; }
.image-lightbox-btn:hover { background: rgba(255,255,255,.2); }
.image-lightbox-btn svg, .image-lightbox-btn [data-lucide] { width: 20px; height: 20px; }
.image-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); }
.image-lightbox-nav--prev { left: 8px; }
.image-lightbox-nav--next { right: 8px; }
.image-lightbox-nav[hidden] { display: none; }
.image-lightbox-open { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.75); font-size: var(--fs-13); }
.image-lightbox-open:hover { color: #fff; }
@media (max-width: 639px) {
    .image-lightbox-stage { padding: 0 8px; }
    .image-lightbox-nav { display: none; }
}

/* İstatistik sekmesi */
.stats-page { display: grid; gap: 14px; }
.stats-note { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px 10px 14px; border-radius: var(--r-lg); background: var(--surface-1); }
.stats-note-text { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--fg-3); font-size: var(--fs-13); }
.stats-note-text svg, .stats-note-text [data-lucide] { width: 14px; height: 14px; flex-shrink: 0; color: var(--fg-4); }
.stats-visibility { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 12px; border-radius: var(--r-full); background: var(--brand-soft); color: var(--brand-ink); font-size: var(--fs-13); font-weight: 700; white-space: nowrap; transition: background-color var(--dur) var(--ease); }
.stats-visibility:hover { background: rgba(var(--brand-rgb), .24); }
.stats-visibility.is-private { background: var(--surface-2); color: var(--fg-2); }
.stats-visibility.is-private:hover { background: var(--surface-3); }
.stats-visibility svg, .stats-visibility [data-lucide] { width: 14px; height: 14px; }
.stats-visibility-arrow { opacity: .7; }
.stats-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.stats-tile { display: grid; gap: 2px; padding: 14px; border-radius: var(--r-lg); background: var(--surface-1); }
.stats-tile svg, .stats-tile [data-lucide] { width: 18px; height: 18px; margin-bottom: 6px; color: var(--brand-ink); }
.stats-tile strong { font-size: var(--fs-24); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stats-tile span { color: var(--fg-3); font-size: var(--fs-13); }
.stats-card { display: grid; gap: 14px; align-content: start; padding: 16px; border-radius: var(--r-lg); background: var(--surface-1); min-width: 0; }
.stats-card-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
.stats-card-head h3 { font-size: var(--fs-15); font-weight: 700; }
.stats-muted { color: var(--fg-3); font-size: var(--fs-12); }
.stats-streak { display: inline-flex; align-items: center; gap: 12px; font-size: var(--fs-13); font-weight: 700; }
.stats-streak > span:first-child { display: inline-flex; align-items: center; gap: 4px; color: var(--warning); }
.stats-streak svg, .stats-streak [data-lucide] { width: 15px; height: 15px; }
.stats-heatmap { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; overflow-x: auto; }
.stats-heatmap-week { display: grid; grid-template-rows: repeat(7, auto); gap: 3px; }
.stats-heatmap-day { display: block; aspect-ratio: 1; min-width: 9px; border-radius: 3px; background: var(--surface-3); }
.stats-heatmap-day.level-1 { background: rgba(var(--brand-rgb), .28); }
.stats-heatmap-day.level-2 { background: rgba(var(--brand-rgb), .5); }
.stats-heatmap-day.level-3 { background: rgba(var(--brand-rgb), .75); }
.stats-heatmap-day.level-4 { background: var(--brand); }
.stats-heatmap-day.is-future { background: transparent; }
.stats-heatmap-legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; color: var(--fg-3); font-size: var(--fs-11); }
.stats-heatmap-legend .stats-heatmap-day { width: 11px; min-width: 11px; }
.stats-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: 6px; height: 160px; }
.stats-bar { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; min-width: 0; }
.stats-bar-track { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; width: 100%; min-height: 0; padding-top: 18px; }
.stats-bar-value { color: var(--fg-3); font-size: var(--fs-11); font-variant-numeric: tabular-nums; }
.stats-streak > span.is-idle { color: var(--fg-3); }
.stats-bar-fill { display: block; flex-shrink: 0; width: 100%; max-width: 28px; min-height: 3px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--brand), rgba(var(--brand-rgb), .55)); }
.stats-bar-label { color: var(--fg-3); font-size: var(--fs-11); }
.stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.stats-rows { display: grid; gap: 9px; }
.stats-row { display: grid; grid-template-columns: 116px minmax(0, 1fr) 40px; align-items: center; gap: 10px; font-size: var(--fs-13); }
.stats-row-label { display: inline-flex; align-items: center; gap: 4px; overflow: hidden; color: var(--fg-2); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
a.stats-row-label:hover { color: var(--fg); }
.stats-row-track { height: 8px; overflow: hidden; border-radius: var(--r-full); background: var(--surface-3); }
.stats-row-track > span { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.stats-row-value { color: var(--fg-3); text-align: right; font-variant-numeric: tabular-nums; }
.stats-star { width: 13px !important; height: 13px !important; flex-shrink: 0; color: var(--surface-3); fill: var(--surface-3); }
.stats-star.is-on { color: var(--rating); fill: var(--rating); }
.stats-row-stars { gap: 2px; }
.stats-rating-avg { display: inline-flex; align-items: center; gap: 4px; color: var(--rating); font-weight: 800; }
.stats-rating-avg svg, .stats-rating-avg [data-lucide] { width: 15px; height: 15px; fill: var(--rating); }
.stats-formats { display: flex; flex-wrap: wrap; gap: 6px; }
.stats-top-series { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.stats-top-item { display: grid; gap: 4px; min-width: 0; }
.stats-top-cover { position: relative; display: block; aspect-ratio: var(--cover-ratio); overflow: hidden; border-radius: var(--r-md); background: var(--surface-2); }
.stats-top-cover img { width: 100%; height: 100%; object-fit: cover; }
.stats-top-cover > span:first-child:not(.stats-top-rank) { display: grid; place-items: center; height: 100%; color: var(--fg-4); font-weight: 700; }
.stats-top-rank { position: absolute; left: 6px; top: 6px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-full); background: rgba(0,0,0,.72); color: #fff; font-size: var(--fs-12); font-weight: 800; }
.stats-top-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--fs-13); font-weight: 600; line-height: 1.3; }
.stats-community { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.stats-community > div { display: grid; gap: 2px; padding: 10px; border-radius: var(--r-md); background: var(--surface-2); text-align: center; }
.stats-community strong { font-size: var(--fs-18); font-variant-numeric: tabular-nums; }
.stats-community span { color: var(--fg-3); font-size: var(--fs-12); }

/* Ayarlar: seçenek grubu (Profil ve Gizlilik) */
.settings-choice-group { display: grid; gap: 10px; }
.settings-choice-title { font-size: var(--fs-15); }
.settings-choice { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; }
.settings-choice:has(input:checked) { border-color: var(--brand-line); background: var(--brand-soft); }
.settings-choice input { margin-top: 3px; accent-color: var(--brand); }
.settings-choice > span { display: grid; gap: 2px; }
.settings-choice small { color: var(--fg-3); font-size: var(--fs-13); }
.settings-card .settings-switch-row + .settings-switch-row { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }

@media (max-width: 767px) {
    .stats-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stats-grid { grid-template-columns: 1fr; }
    .stats-top-series { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stats-community { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stats-heatmap-day { min-width: 8px; border-radius: 2px; }
    .stats-heatmap { gap: 2px; }
    .stats-heatmap-week { gap: 2px; }
}
@media (max-width: 479px) {
    .stats-row { grid-template-columns: 92px minmax(0, 1fr) 34px; }
    .stats-bars { gap: 3px; height: 130px; }
    .stats-bar:not(.is-max) .stats-bar-value { visibility: hidden; }
    .feed-card-content { margin-left: 0; }
    .feed-media { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; }
    .wall-cover-grid { gap: 8px; }
    .content-images { border-radius: var(--r-md); }
}


/* ===== Takip sistemi (docs/follow.md) ===== */
/* Düğme: takip etmiyorken ters renk dolgu (X/Instagram gibi en belirgin eylem), takip ederken sakin
   yüzey; üzerine gelince "Takibi bırak" kırmızısı. İkonlar durumla değişir. */
.follow-btn { gap: 6px; min-width: 112px; background: var(--invert-bg); color: var(--invert-fg); font-weight: 700; }
.follow-btn:hover { opacity: .88; color: var(--invert-fg); }
.follow-btn .follow-btn-icon-on, .follow-btn .follow-btn-hover { display: none; }
.follow-btn.is-following { background: var(--surface-2); color: var(--fg); opacity: 1; box-shadow: inset 0 0 0 1px var(--line-strong, var(--line)); }
.follow-btn.is-following .follow-btn-icon-add { display: none; }
.follow-btn.is-following .follow-btn-icon-on { display: inline-block; }
@media (hover: hover) {
    .follow-btn.is-following:hover { background: var(--danger-soft); color: var(--danger); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 35%, transparent); }
    .follow-btn.is-following:hover .follow-btn-label, .follow-btn.is-following:hover .follow-btn-icon-on { display: none; }
    .follow-btn.is-following:hover .follow-btn-hover { display: inline; }
}
.follow-btn[disabled] { opacity: .6; pointer-events: none; }
/* Küçük düğme (listeler): ikonsuz, iki durumda da aynı genişlik; satır yüksekliği değişmez. */
.follow-btn--sm { width: 108px; min-width: 0; height: 32px; padding: 0 8px; font-size: var(--fs-13); }
.follow-btn--sm .btn-icon, .follow-btn--sm.is-following .follow-btn-icon-on { display: none; }
.follow-btn--sm > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.profile-card-actions { display: flex; align-items: center; gap: 8px; margin-bottom: -6px; }
.profile-card-actions .profile-more-menu { margin-bottom: 0; }
.profile-card-actions { flex-shrink: 1; min-width: 0; gap: 6px; }
/* Kartta düğme her durumda aynı genişlikte: "Takip et" ↔ "Takip ediliyor" geçişinde satır kaymaz. */
.profile-card-actions .follow-btn { width: 116px; min-width: 0; height: 36px; padding: 0 10px; border-radius: var(--r-full); font-size: var(--fs-13); }
.profile-card-actions .follow-btn .btn-icon { display: none; }
.profile-card-actions .follow-btn > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.profile-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 4px; }
.profile-name-row .profile-name { margin-top: 0; min-width: 0; }
.profile-name-row .follow-tag { flex-shrink: 0; }
/* Takip kutusu: iki bölmeli sayı (büyük rakam + etiket), altında tanıdık takipçiler. */
/* Takip satırı (docs/profile-bio.md): iki ayrı sayı bloğu, altında tanıdık takipçiler; kutu yok. */
.profile-follow { display: grid; gap: 6px; min-width: 0; --pf-ring: var(--surface-1); }
.profile-follow-stats { display: flex; align-items: baseline; gap: 22px; }
.profile-follow-stat { display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 0; border: 0; background: none; color: var(--fg-3); font: inherit; font-size: var(--fs-14); cursor: pointer; transition: color var(--dur) var(--ease); }
.profile-follow-stat strong { color: var(--fg); font-size: var(--fs-16); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.profile-follow-stat span { font-weight: 500; }
.profile-follow-stat:hover span { color: var(--fg-2); text-decoration: underline; text-underline-offset: 3px; }
.profile-follow-stat:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-sm); }
.profile-follow-preview { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 0; border: 0; background: none; color: var(--fg-3); font: inherit; font-size: var(--fs-12); line-height: 1.4; text-align: left; cursor: pointer; }
.profile-follow-preview:hover .profile-follow-preview-text { color: var(--fg-2); }
.profile-follow-avatars { display: flex; flex-shrink: 0; }
.profile-follow-avatars .comment-avatar { width: 20px; height: 20px; font-size: 9px; box-shadow: 0 0 0 2px var(--pf-ring); }
.profile-follow-avatars .comment-avatar + .comment-avatar { margin-left: -6px; }
.profile-follow-preview-text { overflow: hidden; min-width: 0; white-space: nowrap; text-overflow: ellipsis; }
.profile-follow-more { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: var(--r-full); background: var(--surface-3); color: var(--fg-2); font-size: 11px; font-weight: 700; line-height: 18px; }
[data-theme="light"] .profile-follow { --pf-ring: #F2F2F7; }
@media (max-width: 767px) {
    .profile-card .profile-follow, [data-theme="light"] .profile-card .profile-follow { --pf-ring: var(--bg); }
}

/* Biyografi */
.profile-bio { margin: 0; color: var(--fg); font-size: var(--fs-14); line-height: 1.5; overflow-wrap: anywhere; }
.profile-bio a.mention, .profile-bio a.series-tag { color: var(--brand-ink); font-weight: 600; white-space: nowrap; }
.profile-bio-empty { display: inline-flex; align-items: center; gap: 6px; width: fit-content; color: var(--fg-3); font-size: var(--fs-13); }
.profile-bio-empty:hover { color: var(--fg); }
.profile-bio-empty svg, .profile-bio-empty [data-lucide] { width: 14px; height: 14px; }

/* Küçük istatistik şeridi: hücreler genişliğe göre 3 → 5 (container query); tamamı İstatistik'e gider. */
.profile-card-stats { container-type: inline-size; display: flex; align-items: center; min-width: 0; padding: 8px 2px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); color: var(--fg); transition: border-color var(--dur) var(--ease); }
[data-theme="light"] .profile-card-stats { background: #FFFFFF; }
.profile-card-stats:hover { border-color: var(--line-strong); }
.profile-card-stats:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.profile-card-stat { display: grid; flex: 1 1 0; min-width: 0; justify-items: center; gap: 1px; padding: 0 4px; line-height: 1.25; }
.profile-card-stat + .profile-card-stat { border-left: 1px solid var(--line); }
.profile-card-stat strong { font-size: var(--fs-15); font-weight: 700; font-variant-numeric: tabular-nums; }
.profile-card-stat span { overflow: hidden; max-width: 100%; color: var(--fg-3); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.profile-card-stat:nth-child(n+4) { display: none; }
@container (min-width: 340px) { .profile-card-stat:nth-child(4) { display: grid; } }
@container (min-width: 430px) { .profile-card-stat:nth-child(5) { display: grid; } }
.profile-card-stats-private, .profile-card-stats-chevron { flex-shrink: 0; width: 15px !important; height: 15px !important; margin: 0 4px; color: var(--fg-4); }
.follow-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--fg-2); font-size: 11px; font-weight: 600; white-space: nowrap; }

/* Liste satırı: avatar, ad, ilişki etiketi, düğme. */
.follow-rows { display: grid; }
.follow-row { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 0; }
.follow-row-user { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; color: var(--fg); }
.follow-row-user:hover { color: var(--fg); }
.follow-row-user:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.follow-row-avatar { width: 44px; height: 44px; flex-shrink: 0; font-size: 16px; }
.follow-row-copy { display: grid; gap: 2px; min-width: 0; }
.follow-row-copy strong { overflow: hidden; font-size: var(--fs-15); font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.follow-row-copy small { overflow: hidden; color: var(--fg-3); font-size: var(--fs-12); white-space: nowrap; text-overflow: ellipsis; }
.follow-row-copy small .follow-tag { vertical-align: middle; }
.follow-row-actions { display: flex; flex-shrink: 0; align-items: center; gap: 6px; }
.follow-row-remove { height: 32px; background: var(--surface-2); }

/* Takipçi / takip penceresi: başlık, iki sekme, arama, kayan liste. Mobilde tam ekran. */
.follow-list-card { display: flex; flex-direction: column; max-width: 440px; height: min(640px, calc(100vh - 48px)); overflow: hidden; }
.follow-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 6px 20px; }
.follow-list-head strong { overflow: hidden; font-size: var(--fs-16); font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.follow-list-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.follow-list-tab { position: relative; height: 44px; border: 0; background: none; color: var(--fg-3); font: inherit; font-size: var(--fs-14); font-weight: 700; cursor: pointer; }
.follow-list-tab:hover { color: var(--fg); }
.follow-list-tab.active { color: var(--fg); }
.follow-list-tab.active::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: -1px; height: 3px; border-radius: 3px; background: var(--fg); }
.follow-list-search { display: flex; align-items: center; gap: 8px; margin: 12px 16px 4px; padding: 0 12px; height: 38px; border-radius: var(--r-md); background: var(--surface-2); color: var(--fg-3); }
.follow-list-search svg, .follow-list-search [data-lucide] { width: 16px; height: 16px; flex-shrink: 0; }
.follow-list-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--fg); font: inherit; font-size: var(--fs-14); }
.follow-list-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 12px; overscroll-behavior: contain; }
.follow-list-empty { padding: 36px 8px; color: var(--fg-3); font-size: var(--fs-14); text-align: center; }
.follow-list-more { display: flex; justify-content: center; padding: 12px 0; }
.follow-list-more[hidden], .follow-list-empty[hidden] { display: none; }
.follow-list-spinner { width: 20px; height: 20px; border: 2px solid var(--surface-3); border-top-color: var(--fg-2); border-radius: 50%; animation: follow-spin .8s linear infinite; }
@keyframes follow-spin { to { transform: rotate(360deg); } }

/* Takibi bırak / takipçiyi çıkar onayı: liste penceresinin üstünde açılır. */
.follow-confirm-popup { z-index: 1300; }
.follow-confirm-card { max-width: 340px; padding: 22px 20px 18px; text-align: center; }
.follow-confirm-copy { display: grid; gap: 8px; }
.follow-confirm-copy strong { font-size: var(--fs-17, 17px); font-weight: 800; overflow-wrap: anywhere; }
.follow-confirm-copy p { margin: 0; color: var(--fg-3); font-size: var(--fs-14); line-height: 1.5; }
.follow-confirm-actions { display: grid; gap: 8px; margin-top: 18px; }
.follow-confirm-actions .btn { width: 100%; border-radius: var(--r-full); }

/* Bildirimde geri takip. */
.notification-dropdown-row .notification-follow-back { display: block; padding: 0 12px 10px 56px; margin-top: -4px; }
/* Bildirimler sayfası: düğme metnin altında, ikonla hizalı ayrı satırda (dar ekranda metni sıkıştırmaz). */
.notification-row .notification-follow-back { grid-column: 1; grid-row: 2; margin: -6px 0 0; padding: 0 4px 14px 60px; }
.notification-row .notification-row-menu { grid-column: 2; grid-row: 1; }

/* Akış sayfası: solda akış, sağda profil özeti ve öneriler. */
.follow-feed-page { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; max-width: 1040px; margin: 0 auto; }
.follow-feed-head { display: grid; gap: 4px; margin-bottom: 14px; }
.follow-feed-head h1 { margin: 0; font-size: var(--fs-28, 28px); font-weight: 800; letter-spacing: -0.02em; }
.follow-feed-head p { margin: 0; color: var(--fg-3); font-size: var(--fs-14); }
.follow-feed-empty { padding-top: 40px; }
.follow-feed-section.comments-section { max-width: none; margin-top: 0; }
/* Duvar yazma alanı (profil duvarı + Akış): kapalıyken tek satır (X / Facebook "Ne düşünüyorsun?"),
   açılınca duvar düzenleyicisi. */
.wall-composer-box { margin-bottom: 14px; }
.wall-composer-collapsed { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 10px 10px 12px; border: 0; border-radius: var(--r-xl); background: var(--surface-1); color: var(--fg-3); font: inherit; text-align: left; cursor: text; transition: background-color var(--dur) var(--ease); }
[data-theme="light"] .wall-composer-collapsed { background: #F2F2F7; }
.wall-composer-collapsed:hover { background: var(--surface-2); }
.wall-composer-collapsed[hidden], .wall-composer-box .wall-composer[hidden] { display: none; }
.wall-composer-avatar { width: 38px; height: 38px; flex-shrink: 0; font-size: 14px; }
.wall-composer-prompt { flex: 1; min-width: 0; overflow: hidden; font-size: var(--fs-15); white-space: nowrap; text-overflow: ellipsis; }
.wall-composer-action { display: inline-flex; flex-shrink: 0; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--r-full); background: var(--surface-2); color: var(--fg); font-size: var(--fs-14); font-weight: 700; }
.wall-composer-action svg, .wall-composer-action [data-lucide] { width: 16px; height: 16px; }
.wall-composer-buttons { display: flex; flex-shrink: 0; gap: 8px; }
.wall-composer-box .wall-composer { margin-bottom: 0; }
.follow-feed-list.comment-list { margin-top: 4px; }
.follow-feed-list > .follow-feed-wall { margin: 0; }
.follow-feed-context { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--fg-3); font-size: var(--fs-13); }
.follow-feed-context svg, .follow-feed-context [data-lucide] { width: 14px; height: 14px; flex-shrink: 0; color: var(--fg-4); }
.follow-feed-context a { color: var(--fg-2); font-weight: 600; }
.follow-feed-context a:hover { color: var(--fg); }
/* Öne çıkan kart etiketi: tek satır, marka tonunda ikon; kartın kendisi takip edilenlerle aynı. */
.feed-highlight { margin-bottom: 2px; }
.feed-highlight svg, .feed-highlight [data-lucide] { color: var(--brand); }
.feed-highlight b { color: var(--fg-2); font-weight: 600; }
.feed-card.is-highlight .feed-highlight { margin: 0; }
.feed-card-name { color: var(--fg); font-weight: 700; }
.feed-card-name:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.follow-feed-side { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 12px; }
.follow-side-card { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 12px; padding: 16px; border-radius: var(--r-xl); background: var(--surface-1); }
/* Akış: kısa profil kartı (profil kartıyla aynı kapak, avatar ve takip kutusu). */
.follow-side-me { gap: 0; overflow: hidden; padding: 0; }
.follow-me-banner { display: block; aspect-ratio: auto; height: 72px; border-radius: 0; }
.follow-me-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0 16px 16px; }
/* Avatar kapağa taşar; aynı satırda, kapağın altında kullanıcı adı ve sağda "Profilini gör". */
.follow-me-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; min-width: 0; margin-top: -26px; }
.follow-me-avatar { position: relative; z-index: 1; width: 60px; height: 60px; flex-shrink: 0; font-size: 22px; box-shadow: 0 0 0 4px var(--surface-1); }
[data-theme="light"] .follow-me-avatar { box-shadow: 0 0 0 4px #F2F2F7; }
.follow-me-avatar.is-premium-avatar, .follow-me-avatar.is-admin-avatar { box-shadow: none; }
.follow-me-link { flex-shrink: 0; height: 30px; margin-bottom: 0; padding: 0 10px 0 12px; gap: 2px; border-radius: var(--r-full); background: var(--surface-2); color: var(--fg-2); font-weight: 600; }
.follow-me-link:hover { background: var(--surface-3); color: var(--fg); }
[data-theme="light"] .follow-me-link { background: #FFFFFF; }
.follow-me-link .btn-icon { width: 14px; height: 14px; }
.follow-me-name { flex: 1; min-width: 0; overflow: hidden; padding-bottom: 5px; color: var(--fg); font-size: var(--fs-16); font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.follow-me-name:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
[data-theme="light"] .follow-side-card { background: #F2F2F7; }
.follow-side-title { margin: 0; font-size: var(--fs-15); font-weight: 800; }
.follow-side-card .follow-row { padding: 6px 0; }
.follow-side-card .follow-row-avatar { width: 40px; height: 40px; }

@media (max-width: 1023px) {
    .follow-feed-page { grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; }
}
@media (max-width: 767px) {
    .follow-feed-page { grid-template-columns: 1fr; gap: 16px; }
    /* Mobilde öneriler akışın üstünde; çok kişiyi takip edince yer kaplamasın diye gizlenir. */
    .follow-feed-side { position: static; order: -1; }
    .follow-feed-side.is-secondary { display: none; }
    .follow-side-me { display: none; }
    .follow-feed-head h1 { font-size: var(--fs-24); }
}
@media (min-width: 768px) and (max-width: 1023px) {
    /* Dar masaüstünde kart 260 px: avatar küçülür ki düğme ve menü kartın içinde kalsın. */
    .profile-avatar { width: 80px; height: 80px; font-size: 28px; }
    .profile-card-top { margin-top: -40px; gap: 8px; }
}
@media (max-width: 639px) {
    .follow-list-popup, .community-modal-popup:has(.follow-list-card) { padding: 0; }
    .follow-list-card { max-width: none; height: 100%; max-height: none; border-radius: 0; }
}


/* ===== Bildirim satırı (docs/notification-list.md) =====
   Web, iOS ve Android aynı yapı: solda bildirimi yapanın avatarı ve köşesinde türünün renkli rozeti
   (akış kartlarıyla aynı dil); kişi yoksa seri kapağı + rozet; o da yoksa renkli ikon dairesi. */
.notif-media { --notif-accent: var(--fg-3); --notif-on: #000; position: relative; flex-shrink: 0; width: var(--notif-size, 44px); height: var(--notif-size, 44px); }
.notif-media--follow { --notif-accent: var(--brand); }
.notif-media--like { --notif-accent: #FF375F; --notif-on: #fff; }
.notif-media--reply { --notif-accent: #5AC8FA; }
.notif-media--mention { --notif-accent: #FF9F0A; }
.notif-media--wall { --notif-accent: #64A8FF; }
.notif-media--chapter { --notif-accent: #C68CF5; }
.notif-media--resolved { --notif-accent: #30D158; }
.notif-media--moderation { --notif-accent: #FF453A; --notif-on: #fff; }
.notif-avatar { width: 100%; height: 100%; font-size: 15px; }
.notif-cover { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 10px; background: var(--surface-2); }
.notif-cover img { width: 100%; height: 100%; object-fit: cover; }
.notif-badge { position: absolute; right: -4px; bottom: -4px; z-index: 2; display: grid; place-items: center; width: var(--notif-badge, 20px); height: var(--notif-badge, 20px); border: 2px solid var(--notif-ring, var(--bg)); border-radius: 50%; background: var(--notif-accent); color: var(--notif-on); }
.notif-badge svg, .notif-badge [data-lucide] { width: 11px; height: 11px; stroke-width: 2.6; }
.notif-media--like .notif-badge svg { fill: currentColor; }
.notif-icon { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--surface-2); color: var(--notif-accent); }
.notif-media--announcement .notif-icon { color: var(--fg-2); }
.notif-icon svg, .notif-icon [data-lucide] { width: 19px; height: 19px; }
.notif-copy { display: grid; flex: 1; gap: 2px; min-width: 0; }
.notif-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--fg); font-size: var(--fs-15); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.notif-body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--fg-2); font-size: var(--fs-14); line-height: 1.45; overflow-wrap: anywhere; }
.notif-time { color: var(--fg-3); font-size: var(--fs-12); }

/* ── Tema ve renk (docs/theme.md) ── */
.accent-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.settings-nav-accent { margin-left: auto; }
.user-dropdown-theme-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.25; }
.user-dropdown-theme-value { color: var(--fg-3); font-size: var(--fs-12); font-weight: 500; }
.user-dropdown-theme-dot { width: 12px; height: 12px; margin-left: 8px; }

.theme-settings { display: grid; gap: 16px; }
.theme-settings-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.theme-settings-status { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: var(--r-full); color: var(--brand-ink); background: var(--brand-soft); font-size: var(--fs-12); font-weight: 600; opacity: 0; transform: translateY(-2px); transition: opacity 200ms var(--ease), transform 200ms var(--ease); }
.theme-settings-status.is-visible { opacity: 1; transform: none; }
.theme-settings-status.is-error { color: var(--danger); background: var(--danger-soft); }
.theme-settings-title { margin-bottom: 12px; color: var(--fg); font-size: var(--fs-15); font-weight: 700; }
.theme-settings-sync { display: flex; align-items: center; gap: 8px; color: var(--fg-3); font-size: var(--fs-13); }
.theme-settings-sync svg { width: 15px; height: 15px; flex: none; color: var(--brand-ink); }

/* Önizleme: gerçek değişkenlerle çizilen küçük uygulama maketi. */
.theme-preview { display: grid; gap: 12px; padding: 14px; border-radius: var(--r-xl); background: var(--bg); box-shadow: 0 0 0 1px var(--line-strong); transition: background 240ms var(--ease); }
.theme-preview-bar { display: flex; align-items: center; justify-content: space-between; }
.theme-preview-logo { display: inline-flex; align-items: center; gap: 7px; color: var(--fg); font-size: var(--fs-15); font-weight: 800; letter-spacing: -0.01em; }
.theme-preview-logo-mark { width: 18px; height: 18px; border-radius: 6px; background: var(--brand); transition: background 240ms var(--ease); }
.theme-preview-bar-icons { display: inline-flex; gap: 12px; color: var(--fg-2); }
.theme-preview-bar-icons svg { width: 17px; height: 17px; }
.theme-preview-chips { display: flex; gap: 6px; overflow: hidden; }
.theme-preview-chip { flex: none; padding: 5px 11px; border-radius: var(--r-full); background: var(--surface-2); color: var(--fg-2); font-size: var(--fs-12); font-weight: 600; transition: background 240ms var(--ease), color 240ms var(--ease); }
.theme-preview-chip.is-active { background: var(--brand); color: var(--on-brand); }
.theme-preview-card { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: var(--r-lg); background: var(--surface-1); box-shadow: 0 0 0 1px var(--line); }
.theme-preview-cover { display: grid; place-items: center; flex: none; width: 46px; height: 62px; border-radius: 6px; background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand-line); color: var(--brand-ink); transition: background 240ms var(--ease), color 240ms var(--ease); }
.theme-preview-cover svg { width: 20px; height: 20px; }
.theme-preview-body { display: grid; gap: 3px; flex: 1; min-width: 0; }
.theme-preview-kicker { color: var(--brand-ink); font-size: var(--fs-11); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.theme-preview-title { color: var(--fg); font-size: var(--fs-14); font-weight: 700; }
.theme-preview-meta { color: var(--fg-3); font-size: var(--fs-12); }
.theme-preview-progress { height: 5px; margin-top: 3px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.theme-preview-progress span { display: block; width: 62%; height: 100%; border-radius: inherit; background: var(--brand); transition: background 240ms var(--ease); }
.theme-preview-actions { display: flex; align-items: center; gap: 14px; }
.theme-preview-button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--r-full); background: var(--brand); color: var(--on-brand); font-size: var(--fs-13); font-weight: 700; transition: background 240ms var(--ease), color 240ms var(--ease); }
.theme-preview-button svg { width: 15px; height: 15px; }
.theme-preview-link { color: var(--brand-ink); font-size: var(--fs-13); font-weight: 600; }
.theme-preview-switch { position: relative; width: 38px; height: 22px; margin-left: auto; border-radius: var(--r-full); background: var(--brand); transition: background 240ms var(--ease); }
.theme-preview-switch span { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); }

/* Tema kartları */
.theme-mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.theme-mode, .accent-option { position: relative; cursor: pointer; }
.theme-mode input, .accent-option input { position: absolute; opacity: 0; pointer-events: none; }
.theme-mode-card { display: grid; gap: 6px; padding: 8px 8px 10px; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: 0 0 0 1px var(--line); transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }
.theme-mode:hover .theme-mode-card { background: var(--surface-3); }
.theme-mode input:checked + .theme-mode-card { background: var(--brand-soft); box-shadow: 0 0 0 2px var(--brand); }
.theme-mode input:focus-visible + .theme-mode-card { box-shadow: 0 0 0 2px var(--brand), 0 0 0 5px var(--focus-ring); }
.theme-mode-shot { position: relative; display: flex; overflow: hidden; aspect-ratio: 5 / 4; border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--line-strong); }
.theme-mode-screen { display: grid; align-content: start; gap: 5px; flex: 1; min-width: 0; padding: 8px; }
.theme-mode-screen--dark { --tm-bg: #000; --tm-fg: #F2F2F7; --tm-tile: #1C1C1E; --tm-line: #2C2C2E; --tm-accent: var(--mock-accent-dark); }
.theme-mode-screen--light { --tm-bg: #FFF; --tm-fg: #1C1C1E; --tm-tile: #F2F2F7; --tm-line: #E5E5EA; --tm-accent: var(--mock-accent-light); }
.theme-mode-screen { background: var(--tm-bg); }
.theme-mode-shot--system .theme-mode-screen { padding-right: 4px; }
.theme-mode-shot--system .theme-mode-screen--light { padding: 8px 8px 8px 4px; }
.tm-bar { display: flex; padding-bottom: 5px; border-bottom: 1px solid var(--tm-line); }
.tm-logo { width: 30%; min-width: 12px; height: 5px; border-radius: 3px; background: var(--tm-accent); transition: background 240ms var(--ease); }
.tm-line { height: 5px; border-radius: 3px; background: var(--tm-fg); opacity: 0.85; }
.tm-line--title { width: 60%; }
.tm-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.tm-tiles span { aspect-ratio: 1; border-radius: 3px; background: var(--tm-tile); }
.theme-mode-shot--system .tm-tiles { grid-template-columns: repeat(2, 1fr); }
.theme-mode-shot--system .tm-tiles span:nth-child(3) { display: none; }
.tm-pill { width: 45%; height: 6px; border-radius: 4px; background: var(--tm-accent); transition: background 240ms var(--ease); }
.theme-mode-check { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: var(--on-brand); opacity: 0; transform: scale(0.6); transition: opacity 160ms var(--ease), transform 160ms var(--ease); }
.theme-mode-check svg { width: 13px; height: 13px; stroke-width: 3; }
.theme-mode input:checked + .theme-mode-card .theme-mode-check { opacity: 1; transform: none; }
.theme-mode-name { display: inline-flex; align-items: center; gap: 6px; padding: 0 2px; color: var(--fg); font-size: var(--fs-14); font-weight: 700; }
.theme-mode-name svg { width: 15px; height: 15px; color: var(--fg-2); }
.theme-mode input:checked + .theme-mode-card .theme-mode-name svg { color: var(--brand-ink); }
.theme-mode-hint { padding: 0 2px; color: var(--fg-3); font-size: var(--fs-12); }

/* Renk örnekleri: örnek o anki temanın tonunu gösterir. */
.accent-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 8px; }
.accent-option { display: grid; justify-items: center; gap: 7px; padding: 4px 0; text-align: center; }
.accent-swatch { --sw: var(--swatch-dark); --sw-on: var(--swatch-dark-on); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--sw); color: var(--sw-on); box-shadow: 0 0 0 3px var(--surface-1), 0 0 0 4px transparent; transition: transform 160ms var(--ease), box-shadow 160ms var(--ease); }
[data-theme="light"] .accent-swatch { --sw: var(--swatch-light); --sw-on: var(--swatch-light-on); }
.accent-swatch svg { width: 22px; height: 22px; stroke-width: 3; opacity: 0; transform: scale(0.5); transition: opacity 160ms var(--ease), transform 160ms var(--ease); }
.accent-option:hover .accent-swatch { transform: scale(1.06); }
.accent-option input:checked + .accent-swatch { box-shadow: 0 0 0 3px var(--surface-1), 0 0 0 5px var(--sw); }
.accent-option input:checked + .accent-swatch svg { opacity: 1; transform: none; }
.accent-option input:focus-visible + .accent-swatch { box-shadow: 0 0 0 3px var(--surface-1), 0 0 0 5px var(--sw), 0 0 0 8px var(--focus-ring); }
.accent-name { display: grid; gap: 1px; color: var(--fg-2); font-size: var(--fs-13); font-weight: 600; line-height: 1.25; }
.accent-name small { color: var(--fg-4); font-size: var(--fs-11); font-weight: 500; }
.accent-option input:checked ~ .accent-name { color: var(--fg); }

@media (max-width: 480px) {
    .theme-mode-grid { gap: 8px; }
    .theme-mode-card { padding: 6px 6px 8px; }
    .theme-mode-hint { display: none; }
    .theme-mode-name { font-size: var(--fs-13); }
    .accent-swatch { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .theme-preview *, .theme-mode-card, .accent-swatch, .accent-swatch svg, .theme-mode-check { transition: none !important; }
}


/* ===== YouTube videoları (docs/youtube.md) ===== */
/* Yazıdaki kart: 16:9 küçük resim + oynat; oynatıcı yalnız dokununca yüklenir. */
.yt-card { position: relative; display: block; width: 100%; max-width: 420px; margin: 4px 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-1); }
.yt-card-media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #000; cursor: pointer; }
.yt-card-media img { display: block; width: 100%; height: 100%; max-width: none !important; margin: 0 !important; border-radius: 0 !important; object-fit: cover; }
.yt-card-play { position: absolute; inset: 0; display: grid; place-items: center; transition: transform var(--dur) var(--ease); }
.yt-card-play svg { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .35)); }
.yt-card-media:hover .yt-card-play, .yt-card-media:focus-visible .yt-card-play { transform: scale(1.06); }
.yt-card-media:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.yt-card-start { position: absolute; right: 8px; bottom: 8px; padding: 2px 6px; border-radius: var(--r-sm); background: rgba(0, 0, 0, .75); color: #fff; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.yt-card-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.yt-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; color: var(--fg-3) !important; font-size: var(--fs-12); font-weight: 600; text-decoration: none !important; }
.yt-card-meta:hover { color: var(--fg) !important; background: var(--surface-2); }
.yt-card-meta svg { flex-shrink: 0; }
p:has(> .yt-card) { margin: 6px 0; }

/* Düzenleyicide video: tek parça, küçük resimli çip. */
.forum-editor-content a.youtube {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    padding: 6px 12px 6px 6px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--surface-2);
    color: var(--fg) !important;
    text-decoration: none !important;
    vertical-align: middle;
    user-select: none;
    cursor: default;
}
.forum-editor-content a.youtube::selection, .forum-editor-content a.youtube *::selection { background: transparent; }
.yt-chip-thumb { position: relative; flex-shrink: 0; width: 64px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-sm); background: #000; }
.yt-chip-thumb img { display: block; width: 100%; height: 100%; max-width: none !important; margin: 0 !important; object-fit: cover; }
.yt-chip-thumb::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-left: 10px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; transform: translateX(2px); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.yt-chip-text { display: grid; min-width: 0; line-height: 1.25; }
.yt-chip-text strong { font-size: var(--fs-13); }
.yt-chip-text span { overflow: hidden; color: var(--fg-3); font-size: var(--fs-12); white-space: nowrap; text-overflow: ellipsis; }

/* Video bağlantısı paneli (GIF / emoji panelleriyle aynı yerde). */
.forum-editor-video-panel { display: grid; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-1); }
.forum-editor-video-panel[hidden] { display: none; }
.forum-editor-video-row { display: flex; align-items: center; gap: 8px; }
.forum-editor-video-mark { flex-shrink: 0; color: var(--fg-3); }
.forum-editor-video-input { flex: 1; min-width: 0; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); color: var(--fg); font-size: var(--fs-14); outline: none; }
.forum-editor-video-input:focus { border-color: var(--brand-line); }
.forum-editor-video-hint { margin: 0; color: var(--fg-3); font-size: var(--fs-12); }
.forum-editor-video-hint.is-error { color: var(--danger); }


/* ===== Çeviri oyu ve AI bildirimi (docs/translation-feedback.md) ===== */
.translation-vote { display: grid; gap: 10px; width: min(100% - 32px, 520px); margin: 20px auto 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-1); }
.tv-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tv-question { margin: 0; color: var(--fg); font-size: var(--fs-15); font-weight: 700; }
.tv-chapter { color: var(--fg-3); font-size: var(--fs-12); }
.tv-seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r-full); background: var(--surface-2); }
.tv-knob { position: absolute; top: 0; bottom: 0; left: -50%; width: 50%; border-radius: var(--r-full); transition: left 380ms cubic-bezier(.3, 1.4, .5, 1), background-color 250ms var(--ease); }
.tv-seg[data-state="good"] .tv-knob { left: 0; background: color-mix(in srgb, var(--ongoing) 18%, transparent); }
.tv-seg[data-state="bad"] .tv-knob { left: 50%; background: color-mix(in srgb, var(--danger) 18%, transparent); }
.tv-option { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border: 0; background: none; color: var(--fg-2); font: inherit; font-size: var(--fs-14); font-weight: 600; cursor: pointer; transition: color 250ms var(--ease); }
.tv-option svg, .tv-option [data-lucide] { width: 17px; height: 17px; }
.tv-seg[data-state="good"] .tv-option[data-vote="good"] { color: var(--ongoing); }
.tv-seg[data-state="bad"] .tv-option[data-vote="bad"] { color: var(--danger); }
.tv-option:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; border-radius: var(--r-full); }
.tv-result { display: grid; gap: 6px; }
.tv-result[hidden] { display: none; }
.tv-bar { display: flex; height: 6px; overflow: hidden; border-radius: 3px; background: var(--surface-3); }
.tv-bar-good { width: 0; background: var(--ongoing); transition: width 700ms cubic-bezier(.2, .8, .2, 1); }
.tv-bar-bad { width: 0; background: var(--danger); transition: width 700ms cubic-bezier(.2, .8, .2, 1); }
.tv-summary { margin: 0; color: var(--fg-3); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.tv-ai { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.tv-ai-question { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-3); font-size: var(--fs-13); }
.tv-ai-question .ai-mark { width: 14px; height: 14px; color: var(--ai); }
.tv-ai-btn { position: relative; display: inline-flex; flex-shrink: 0; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border: 1px solid var(--ai-line); border-radius: var(--r-full); background: transparent; color: var(--ai); font: inherit; font-size: var(--fs-12); font-weight: 600; cursor: pointer; transition: background-color 250ms var(--ease), border-color 250ms var(--ease); }
.tv-ai-btn.is-done { border-color: var(--ai); background: var(--ai-soft); }
.tv-ai-icon { width: 14px !important; height: 14px !important; transition: transform 450ms cubic-bezier(.3, 1.6, .5, 1); }
.tv-ai-btn.is-done .tv-ai-icon { transform: rotate(360deg) scale(1.1); }
.tv-ai-spark { position: absolute; left: 30%; top: 20%; color: var(--ai); font-size: 10px; pointer-events: none; animation: tv-spark 700ms ease-out forwards; }
@keyframes tv-spark { from { opacity: 1; transform: translate(0, 0) scale(.6); } to { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.1); } }
.tv-ai-note { margin: -4px 0 0; color: var(--fg-4); font-size: 11px; min-height: 0; }
.tv-ai-note:empty { display: none; }
/* Manga (sayfa sayfa) modunda kart her sayfanın altında değil, yalnız son sayfada görünür. */
.reader.manga-mode .translation-vote { display: none; }
.reader.manga-mode.is-manga-last .translation-vote { display: grid; }
@media (prefers-reduced-motion: reduce) {
    .tv-knob, .tv-bar-good, .tv-bar-bad, .tv-ai-icon { transition: none; }
    .tv-ai-spark { display: none; }
}
/* Seri sayfası: çeviri kalitesi çubuğu */
.translation-quality { display: grid; gap: 6px; margin: 4px 0 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); }
.translation-quality-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.translation-quality-title { color: var(--fg); font-size: var(--fs-13); font-weight: 700; }
.translation-quality-total { color: var(--fg-3); font-size: var(--fs-12); font-variant-numeric: tabular-nums; }
.translation-quality .tv-bar-good, .translation-quality .tv-bar-bad { transition: none; }
.translation-quality-legend { display: flex; justify-content: space-between; color: var(--fg-3); font-size: var(--fs-12); }
.notification-container {
    position: fixed;
    top: calc(var(--header-h, 60px) + 20px) !important;
    right: 24px !important;
    z-index: 9999999 !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    max-width: 380px;
    width: calc(100% - 48px);
}
@media (max-width: 767px) {
    .notification-container {
        top: calc(var(--header-h, 56px) + 12px) !important;
        right: 12px !important;
        left: 12px !important;
        width: auto !important;
        max-width: none !important;
    }
}
[data-theme="light"] .notification {
    background: #FFFFFF !important;
    color: #000000 !important;
    border-color: #E5E5EA !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .notification-message {
    color: #000000 !important;
}
[data-theme="light"] .notification-close {
    color: #8E8E93 !important;
}
[data-theme="light"] .notification-close:hover {
    color: #000000 !important;
}

/* okutoon-asset-complete */