/* ==========================================================================
   bispir — arayüz
   Koyu tema tek kaynaktan yönetilir: aşağıdaki değişkenler dışında renk yazılmaz.
   ========================================================================== */

:root {
    color-scheme: dark;

    --bg:          #0d1117;
    --bg-soft:     #10151c;
    --surface:     #161b22;
    --surface-2:   #1c2230;
    --border:      #30363d;
    --border-soft: #21262d;

    --text:        #c9d1d9;
    --text-strong: #f0f6fc;
    --text-muted:  #8b949e;
    --text-faint:  #6e7681;

    --accent:      #58a6ff;
    --accent-dim:  #1f6feb;
    --up:          #f0883e;
    --down:        #6cb6ff;
    --danger:      #f85149;
    --danger-bg:   #2d1618;
    --success:     #3fb950;
    --success-bg:  #0d2818;
    --warning:     #e3b341;
    --warning-bg:  #2b2113;
    --ghost:       #a371f7;

    --radius:    10px;
    --radius-sm: 7px;
    --shadow:    0 1px 3px rgba(1, 4, 9, 0.6);

    --sans: "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
    --mono: "Cascadia Mono", ui-monospace, "SF Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.6 var(--sans);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { color: var(--text-strong); line-height: 1.3; margin: 0 0 10px; }
h1 { font-size: 25px; letter-spacing: -0.4px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }

hr { border: 0; border-top: 1px solid var(--border-soft); margin: 20px 0; }

img { max-width: 100%; }

/* --- Üst çubuk ------------------------------------------------------------ */

.topbar {
    position: sticky; top: 0; z-index: 50;
    background: rgba(13, 17, 23, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}

.topbar-inner {
    max-width: 1280px; margin: 0 auto; padding: 0 20px;
    height: 56px; display: flex; align-items: center; gap: 18px;
}

.brand {
    display: flex; align-items: baseline; gap: 8px;
    font-size: 20px; font-weight: 700; color: var(--text-strong);
    letter-spacing: -0.5px;
}
.brand:hover { text-decoration: none; }
.brand em {
    font: 400 12px var(--mono); font-style: normal;
    color: var(--text-faint); letter-spacing: 0;
}

.topnav { display: flex; align-items: center; gap: 4px; margin-left: auto; }

.topnav a, .topnav .linkish {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 12px; border-radius: var(--radius-sm);
    color: var(--text); font-size: 14px; font-weight: 500;
    background: none; border: 0; cursor: pointer; font-family: inherit;
}
.topnav a:hover, .topnav .linkish:hover { background: var(--surface-2); text-decoration: none; }
.topnav a.current { background: var(--surface-2); color: var(--text-strong); }

.badge-count {
    min-width: 19px; height: 19px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--danger); color: #fff;
    border-radius: 10px; font-size: 11px; font-weight: 700; line-height: 1;
}

/* --- Düzen ---------------------------------------------------------------- */

.layout {
    max-width: 1280px; margin: 0 auto; padding: 22px 20px 60px;
    display: grid; grid-template-columns: 232px minmax(0, 1fr) 268px; gap: 22px;
    align-items: start;
}
.layout.narrow  { grid-template-columns: 232px minmax(0, 1fr); }
.layout.single  { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.layout.wide    { grid-template-columns: minmax(0, 1fr); }

.col-side { position: sticky; top: 78px; }

/* --- Kartlar -------------------------------------------------------------- */

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 16px;
}
.panel.tight { padding: 12px 14px; }
.panel-title {
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px;
    color: var(--text-muted); margin: 0 0 10px;
}

/* --- Yan panel: kanal listesi -------------------------------------------- */

.channel-list { list-style: none; margin: 0; padding: 0; }

.channel-list a {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: var(--radius-sm);
    color: var(--text); font-size: 14px;
}
.channel-list a:hover { background: var(--surface-2); text-decoration: none; }
.channel-list a.current { background: var(--surface-2); color: var(--text-strong); font-weight: 600; }
.channel-list .hash { color: var(--text-faint); font-weight: 600; }
.channel-list .count { margin-left: auto; color: var(--text-faint); font-size: 12px; }
.channel-list .ghost-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ghost); flex: none;
}

/* --- Duyuru şeridi -------------------------------------------------------- */

.announce {
    display: flex; gap: 12px; align-items: flex-start;
    border-left: 3px solid var(--accent);
    background: var(--surface); border-radius: var(--radius-sm);
    padding: 11px 14px; margin-bottom: 10px;
}
.announce.warning  { border-left-color: var(--warning); }
.announce.critical { border-left-color: var(--danger); }
.announce strong { display: block; color: var(--text-strong); font-size: 14px; }
.announce p { margin: 2px 0 0; font-size: 13px; color: var(--text-muted); }
.announce .tag {
    flex: none; font: 700 10px var(--mono); text-transform: uppercase;
    letter-spacing: 0.6px; color: var(--accent); padding-top: 2px;
}
.announce.warning .tag  { color: var(--warning); }
.announce.critical .tag { color: var(--danger); }

/* --- Gönderi kartı -------------------------------------------------------- */

.post {
    display: grid; grid-template-columns: 44px minmax(0, 1fr);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); margin-bottom: 14px; overflow: hidden;
}
.post.removed { border-color: #4a2b2b; background: #171314; }
.post.pinned  { border-color: #3c4a2e; }

.post-votes {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 12px 0; background: var(--bg-soft); border-right: 1px solid var(--border-soft);
}

.vote-btn {
    width: 28px; height: 26px; padding: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; border-radius: 5px;
    color: var(--text-faint); font-size: 14px; line-height: 1;
}
.vote-btn:hover { background: var(--surface-2); color: var(--text); }
.vote-btn.up.active   { color: var(--up); }
.vote-btn.down.active { color: var(--down); }
.vote-btn[disabled] { cursor: not-allowed; opacity: 0.45; }

.vote-score { font: 700 13px var(--sans); color: var(--text); }
.vote-score.positive { color: var(--up); }
.vote-score.negative { color: var(--down); }

.post-main { padding: 13px 16px 14px; min-width: 0; }

.post-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
    font-size: 12.5px; color: var(--text-muted); margin-bottom: 7px;
}
.post-meta a { color: var(--text-muted); }
.post-meta a:hover { color: var(--text); }
.post-meta .channel-link { color: var(--text-strong); font-weight: 600; }
.post-meta .sep { color: var(--text-faint); }
.post-meta-time { margin-left: auto; white-space: nowrap; }

.post-title {
    font-size: 17px; font-weight: 600; color: var(--text-strong);
    margin: 0 0 8px; line-height: 1.35;
}
.post-title a { color: inherit; }

.post-body {
    font-size: 14.5px; color: var(--text); white-space: pre-wrap; word-wrap: break-word;
    margin: 0 0 10px;
}
.post-body.excerpt { color: var(--text-muted); }

.post-image {
    display: block; border-radius: var(--radius-sm); border: 1px solid var(--border-soft);
    margin: 10px 0; max-height: 460px; object-fit: cover; width: 100%;
}

.post-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
    margin-top: 10px; padding-top: 4px;
}

.action {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 9px; border-radius: var(--radius-sm);
    font-size: 12.5px; font-weight: 600; color: var(--text-muted);
    background: none; border: 0; cursor: pointer; font-family: inherit;
}
.action:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.action.danger:hover { background: var(--danger-bg); color: var(--danger); }

/* --- Rozetler ------------------------------------------------------------- */

.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 7px; border-radius: 20px;
    font-size: 11px; font-weight: 700; line-height: 1.5;
    border: 1px solid currentColor;
}
.badge.plain { border-color: var(--border); color: var(--text-muted); }
.badge.ghost  { color: var(--ghost); }
.badge.spoiler { color: var(--warning); }
.badge.nsfw    { color: var(--danger); }
.badge.pinned  { color: var(--success); }
.badge.removed { color: var(--danger); }
.badge.poll    { color: var(--accent); }

.avatar {
    width: 22px; height: 22px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #fff; text-transform: uppercase;
    object-fit: cover;
}
.avatar.lg { width: 64px; height: 64px; font-size: 26px; }
.avatar.md { width: 34px; height: 34px; font-size: 14px; }

/* --- Spoiler / NSFW ------------------------------------------------------- */
/* İçerik DOM'da durur ama okunamaz; açmak bilinçli bir tıklama gerektirir. */

.veil { position: relative; border-radius: var(--radius-sm); overflow: hidden; }

.veil > .veil-content {
    filter: blur(14px);
    transition: filter 0.18s ease;
    pointer-events: none;
    user-select: none;
}
.veil.revealed > .veil-content { filter: none; pointer-events: auto; user-select: auto; }

.veil-cover {
    position: absolute; inset: 0; z-index: 2; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    background: rgba(13, 17, 23, 0.55);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-strong); font-size: 13px; font-weight: 600;
    text-align: center; padding: 14px;
}
.veil-cover .veil-kind { font: 700 10px var(--mono); letter-spacing: 1px; text-transform: uppercase; }
.veil.spoiler .veil-cover .veil-kind { color: var(--warning); }
.veil.nsfw    .veil-cover .veil-kind { color: var(--danger); }
.veil-cover small { color: var(--text-muted); font-weight: 400; }
.veil.revealed .veil-cover { display: none; }

.veil-hide {
    display: none; margin-top: 8px;
    font-size: 12px; color: var(--text-muted);
    background: none; border: 0; cursor: pointer; padding: 0; font-family: inherit;
}
.veil.revealed + .veil-hide { display: inline-block; }
.veil-hide:hover { color: var(--text); text-decoration: underline; }

/* --- Kaldırılan içerik ---------------------------------------------------- */

.removed-note {
    display: flex; gap: 9px; align-items: flex-start;
    background: var(--danger-bg); border: 1px solid rgba(248, 81, 73, 0.25);
    border-radius: var(--radius-sm); padding: 10px 13px;
    color: #ffa198; font-size: 13.5px; line-height: 1.5;
}
.removed-note .icon { flex: none; font-size: 14px; }
.removed-note em { font-style: normal; color: #ffc1bb; }
.removed-note .who { display: block; margin-top: 3px; font-size: 12px; color: #d98a86; }

/* --- Anket ---------------------------------------------------------------- */

.poll { margin: 10px 0 4px; display: flex; flex-direction: column; gap: 7px; }

.poll-option {
    position: relative; display: block; width: 100%;
    background: var(--bg-soft); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 9px 12px;
    color: var(--text); font: 500 14px var(--sans); text-align: left;
    cursor: pointer; overflow: hidden;
}
.poll-option:hover { border-color: var(--accent-dim); }
.poll-option[disabled] { cursor: default; }
.poll-option[disabled]:hover { border-color: var(--border); }
.poll-option.chosen { border-color: var(--accent); }

.poll-fill {
    position: absolute; inset: 0 auto 0 0; z-index: 0;
    background: rgba(88, 166, 255, 0.14);
    transition: width 0.3s ease;
}
.poll-option.chosen .poll-fill { background: rgba(88, 166, 255, 0.26); }

.poll-label { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 12px; }
.poll-label .pct { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.poll-total { font-size: 12.5px; color: var(--text-faint); margin-top: 2px; }

/* --- Yorum ağacı ---------------------------------------------------------- */

.comment-tree { margin-top: 6px; }

.comment { position: relative; padding-left: 0; }

.comment-children {
    margin-left: 15px; padding-left: 15px;
    border-left: 2px solid var(--border-soft);
}
.comment-children:hover { border-left-color: var(--border); }

.comment-body-wrap {
    padding: 10px 0 6px;
    border-bottom: 1px solid rgba(48, 54, 61, 0.35);
}

.comment-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
    font-size: 12.5px; color: var(--text-muted); margin-bottom: 5px;
}
.comment-head .who { color: var(--text-strong); font-weight: 600; }
.comment-head .who:hover { color: var(--accent); }

.comment-text {
    font-size: 14.5px; color: var(--text);
    white-space: pre-wrap; word-wrap: break-word; margin: 0 0 6px;
}

.comment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.comment-actions .action { padding: 3px 7px; font-size: 12px; }

.comment-votes { display: inline-flex; align-items: center; gap: 1px; }
.comment-votes .vote-btn { width: 22px; height: 20px; font-size: 12px; }
.comment-votes .vote-score { font-size: 12px; min-width: 18px; text-align: center; }

.collapse-toggle {
    background: none; border: 0; cursor: pointer; padding: 0 4px;
    color: var(--text-faint); font: 700 12px var(--mono);
}
.collapse-toggle:hover { color: var(--text); }
.comment.collapsed > .comment-children,
.comment.collapsed > .comment-body-wrap > .comment-text,
.comment.collapsed > .comment-body-wrap > .comment-actions,
.comment.collapsed > .comment-body-wrap > .removed-note,
.comment.collapsed > .comment-body-wrap > .reply-box { display: none; }

.reply-box { margin: 8px 0 4px; display: none; }
.reply-box.open { display: block; }

.depth-limit {
    font-size: 12.5px; color: var(--text-faint);
    padding: 6px 0 2px;
}

/* --- Formlar -------------------------------------------------------------- */

label.field { display: block; margin-bottom: 14px; }
label.field > span.label {
    display: block; margin-bottom: 5px;
    font-size: 13px; font-weight: 600; color: var(--text-strong);
}
label.field > span.hint {
    display: block; margin-top: 4px; font-size: 12px; color: var(--text-faint);
}

input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="datetime-local"], input[type="number"],
textarea, select {
    width: 100%; padding: 9px 12px;
    background: var(--bg-soft); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font: 14px var(--sans); outline: none;
}
textarea { resize: vertical; min-height: 92px; line-height: 1.55; }

input:focus, textarea:focus, select:focus {
    border-color: var(--accent-dim);
    box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.25);
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }

select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                      linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 17px) 18px, calc(100% - 12px) 18px;
    background-size: 5px 5px; background-repeat: no-repeat;
    padding-right: 32px;
}

.checkline { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14px; }
.checkline input { width: auto; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 16px; border-radius: var(--radius-sm);
    background: var(--surface-2); color: var(--text-strong);
    border: 1px solid var(--border); cursor: pointer;
    font: 600 14px var(--sans); text-decoration: none;
}
.btn:hover { background: #262d3d; text-decoration: none; }
.btn.primary { background: #238636; border-color: #2ea043; color: #fff; }
.btn.primary:hover { background: #2ea043; }
.btn.accent { background: var(--accent-dim); border-color: #388bfd; color: #fff; }
.btn.accent:hover { background: #388bfd; }
.btn.danger { background: var(--danger-bg); border-color: rgba(248, 81, 73, 0.4); color: #ff9a92; }
.btn.danger:hover { background: #3d1c1e; }
.btn.small { padding: 5px 11px; font-size: 12.5px; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.form-row > * { flex: 1 1 200px; }

.charcount { float: right; font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.charcount.over { color: var(--danger); }

/* --- Bildirimler ---------------------------------------------------------- */

.flash-stack { margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; }

.flash {
    padding: 11px 14px; border-radius: var(--radius-sm); font-size: 14px;
    border: 1px solid transparent;
}
.flash.success { background: var(--success-bg); border-color: rgba(63, 185, 80, 0.3); color: #7ee787; }
.flash.error   { background: var(--danger-bg);  border-color: rgba(248, 81, 73, 0.3); color: #ffa198; }
.flash.warning { background: var(--warning-bg); border-color: rgba(227, 179, 65, 0.3); color: #e3b341; }
.flash.info    { background: #10202f; border-color: rgba(88, 166, 255, 0.3); color: #79c0ff; }

.empty {
    text-align: center; padding: 44px 20px; color: var(--text-muted);
    background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius);
}
.empty strong { display: block; color: var(--text-strong); margin-bottom: 6px; font-size: 16px; }

/* --- Sayfalama ------------------------------------------------------------ */

.pager { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 22px 0 8px; }
.pager .page-info { color: var(--text-muted); font-size: 13px; padding: 0 6px; }

/* --- Profil --------------------------------------------------------------- */

.profile-head { display: flex; gap: 18px; align-items: flex-start; }
.profile-head .who h1 { margin-bottom: 2px; }
.profile-head .handle { color: var(--text-muted); font: 14px var(--mono); }
.profile-bio { margin: 10px 0 0; color: var(--text); font-size: 14.5px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; margin-top: 16px; }
.stat {
    background: var(--bg-soft); border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm); padding: 10px 12px;
}
.stat .n { display: block; font-size: 20px; font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.stat .k { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tabs a {
    padding: 9px 14px; font-size: 14px; font-weight: 600; color: var(--text-muted);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a.current { color: var(--text-strong); border-bottom-color: var(--up); }

/* --- Mesajlaşma ----------------------------------------------------------- */

.dm-layout {
    display: grid; grid-template-columns: 288px minmax(0, 1fr);
    gap: 16px; align-items: start;
}

.dm-list { list-style: none; margin: 0; padding: 0; max-height: 70vh; overflow-y: auto; }
.dm-list li + li { border-top: 1px solid var(--border-soft); }

.dm-list a {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 11px 12px; color: var(--text); border-radius: var(--radius-sm);
}
.dm-list a:hover { background: var(--surface-2); text-decoration: none; }
.dm-list a.current { background: var(--surface-2); }
.dm-list .who { display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--text-strong); font-size: 14px; }
.dm-list .snippet {
    font-size: 12.5px; color: var(--text-muted); margin-top: 2px;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.dm-list .when { font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.dm-list .grow { min-width: 0; flex: 1; }

.dm-thread {
    display: flex; flex-direction: column; gap: 12px;
    padding: 18px; min-height: 320px; max-height: 62vh; overflow-y: auto;
    background: var(--bg-soft); border: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
}

.bubble { max-width: 74%; display: flex; flex-direction: column; gap: 4px; }
.bubble.mine { align-self: flex-end; align-items: flex-end; }

.bubble .text {
    padding: 9px 13px; border-radius: 14px;
    background: var(--surface); border: 1px solid var(--border);
    font-size: 14.5px; white-space: pre-wrap; word-wrap: break-word; color: var(--text);
}
.bubble.mine .text { background: #1c3a5e; border-color: #2b5580; color: #dbeafe; }
.bubble .stamp { font-size: 11px; color: var(--text-faint); padding: 0 4px; }

.bubble.system { max-width: 100%; align-self: center; align-items: center; }
.bubble.system .text {
    background: var(--warning-bg); border-color: rgba(227, 179, 65, 0.35);
    color: #e3b341; font-size: 13px; text-align: center; border-radius: var(--radius-sm);
}
.bubble.removed .text {
    background: var(--danger-bg); border-color: rgba(248, 81, 73, 0.3);
    color: #ffa198; font-style: italic;
}

.dm-compose {
    display: flex; gap: 10px; align-items: flex-end;
    padding: 12px 14px; background: var(--surface);
    border: 1px solid var(--border); border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
}
.dm-compose textarea { min-height: 44px; max-height: 160px; }

/* --- Tablolar (admin) ----------------------------------------------------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }

table.grid { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--surface); }
table.grid th, table.grid td { padding: 10px 13px; text-align: left; vertical-align: middle; }
table.grid thead th {
    background: var(--bg-soft); color: var(--text-muted);
    font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.6px;
    border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.grid tbody tr + tr td { border-top: 1px solid var(--border-soft); }
table.grid tbody tr:hover { background: var(--bg-soft); }
table.grid .num { font-variant-numeric: tabular-nums; text-align: right; }
table.grid .nowrap { white-space: nowrap; }

.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.metric {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 16px;
}
.metric .n { display: block; font-size: 26px; font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; line-height: 1.2; }
.metric .k { font-size: 12px; color: var(--text-muted); }
.metric .sub { font-size: 11.5px; color: var(--text-faint); margin-top: 3px; }

.audit-line {
    display: flex; gap: 10px; align-items: baseline;
    padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: 13.5px;
}
.audit-line:last-child { border-bottom: 0; }
.audit-line time { color: var(--text-faint); font: 12px var(--mono); white-space: nowrap; }
.audit-line .verb { color: var(--text-muted); }
.audit-line .reason { color: var(--text-faint); font-style: italic; }

.mono { font-family: var(--mono); font-size: 13px; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.small { font-size: 12.5px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.tight { gap: 6px; }
.grow { flex: 1; min-width: 0; }

/* --- Giriş / kayıt sayfaları ---------------------------------------------- */

.auth-wrap { max-width: 400px; margin: 60px auto; padding: 0 20px; }
.auth-wrap .brand { justify-content: center; font-size: 28px; margin-bottom: 6px; }
.auth-wrap .lede { text-align: center; color: var(--text-muted); margin: 0 0 24px; font-size: 14px; }
.auth-wrap .panel { padding: 24px; }
.auth-alt { text-align: center; margin-top: 16px; font-size: 14px; color: var(--text-muted); }

.seed-hint {
    margin-top: 16px; padding: 12px 14px; font-size: 12.5px;
    background: var(--bg-soft); border: 1px dashed var(--border);
    border-radius: var(--radius-sm); color: var(--text-muted);
}
.seed-hint code { color: var(--text-strong); font-family: var(--mono); }

/* --- Popup ------------------------------------------------------------------
   Kurucunun yayınladığı tam ekran duyuru. Varsayılan olarak [hidden]; app.js
   sayfa yüklendikten kısa süre sonra .open ekleyip görünür kılar.               */

.popup-overlay {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    background: rgba(1, 4, 9, 0.72);
    opacity: 0; transition: opacity 0.2s ease;
    padding: 20px;
}
.popup-overlay.open { opacity: 1; }
.popup-overlay[hidden] { display: none; }

.popup-box {
    position: relative; max-width: min(480px, 100%); max-height: 86vh;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: 0 12px 40px rgba(1, 4, 9, 0.6);
    transform: scale(0.96); transition: transform 0.2s ease;
    overflow: hidden;
}
.popup-overlay.open .popup-box { transform: scale(1); }
.popup-box img { display: block; width: 100%; max-height: 86vh; object-fit: contain; }

.popup-close {
    position: absolute; top: 8px; right: 8px; z-index: 1;
    width: 30px; height: 30px; border-radius: 50%; border: none;
    background: rgba(1, 4, 9, 0.6); color: #fff; font-size: 18px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.popup-close:hover { background: rgba(1, 4, 9, 0.85); }

/* --- Reklam alanları --------------------------------------------------------
   Ortadaki 1280px'lik düzenin dışında, boşta kalan sağ/sol şeride yerleşir.
   position:absolute olduğu için sayfayla birlikte kayar (fixed gibi viewport'a
   yapışık kalmaz). Sabit bir viewport eşiği yerine assets/app.js gerçek boş
   alanı ölçüp yalnızca sığdığında gösterir ve konumlar; bu yüzden display
   burada değil JS'te açılır.                                                    */

.ad-rail {
    position: absolute; z-index: 5;
    width: 140px; display: none;
    flex-direction: column; gap: 14px;
}
.ad-rail a { display: block; }
.ad-rail img {
    width: 100%; border-radius: var(--radius-sm);
    border: 1px solid var(--border-soft); display: block;
}

/* --- Sürprizler -------------------------------------------------------------
   Sitede rastgele beliren küçük görseller. Konumu assets/app.js rastgele
   belirler; burası yalnızca görünümü tanımlar.                                 */

.surprise-prop {
    position: fixed; z-index: 150;
    width: 44px; height: 44px; border-radius: 50%;
    object-fit: cover; cursor: pointer;
    border: 2px solid var(--border); box-shadow: var(--shadow);
    transition: left 2s ease-in-out, top 2s ease-in-out, transform 0.15s ease, opacity 0.3s ease;
    animation: surprise-in 0.3s ease;
}
.surprise-prop:hover { transform: scale(1.12); }
.surprise-prop.bounced { animation: surprise-bounce 0.4s ease; }

@keyframes surprise-in {
    from { opacity: 0; transform: scale(0.4); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes surprise-bounce {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.3) rotate(8deg); }
}

/* --- Uyarlanabilirlik ----------------------------------------------------- */

@media (max-width: 1080px) {
    .layout, .layout.narrow { grid-template-columns: 216px minmax(0, 1fr); }
    .col-right { display: none; }
}

@media (max-width: 800px) {
    .layout, .layout.narrow, .layout.single { grid-template-columns: minmax(0, 1fr); }
    .col-side { position: static; }
    .dm-layout { grid-template-columns: minmax(0, 1fr); }
    .topbar-inner { gap: 10px; }
    .brand { flex: none; }
    .brand em { display: none; }

    /* Etiketleri gizlemek yerine (o zaman ikonsuz linkler tamamen görünmez
       oluyordu) çubuğu yatayda kaydırılabilir yapıyoruz — hiçbir öğe kaybolmaz. */
    .topnav {
        overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; margin-left: 0;
    }
    .topnav::-webkit-scrollbar { display: none; }
    .topnav a, .topnav .linkish { flex: none; white-space: nowrap; }

    .bubble { max-width: 88%; }
}