/* Gelişim Kulübü — editorial minimal tema
   Açık tema varsayılan; koyu mod [data-theme="dark"] ile. */

:root {
  --bg: #f7f7f4;
  --surface: #ffffff;
  --surface-2: #f1f1ec;
  --border: #e4e4dd;
  --border-strong: #d4d4cb;
  --text: #1d1d1a;
  --muted: #71716a;
  --accent: #2742d6;
  --accent-soft: rgba(39, 66, 214, 0.07);
  --green: #11774a;
  --red: #bb3a32;
  --btn-bg: #1d1d1a;
  --btn-text: #ffffff;
  --nav-bg: rgba(247, 247, 244, 0.88);
  --code-bg: #16181d;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(25, 25, 18, 0.04);
}

html[data-theme="dark"] {
  --bg: #121310;
  --surface: #1a1b18;
  --surface-2: #232420;
  --border: #2d2e29;
  --border-strong: #3a3b35;
  --text: #e9e9e4;
  --muted: #92928a;
  --accent: #93a5ff;
  --accent-soft: rgba(147, 165, 255, 0.1);
  --green: #4cba7e;
  --red: #e06a62;
  --btn-bg: #e9e9e4;
  --btn-text: #161711;
  --nav-bg: rgba(18, 19, 16, 0.88);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.25rem; }
h2 { font-size: 1rem; margin: 0; }
h3 { margin: 0 0 0.35rem; font-size: 0.95rem; font-weight: 600; }
code {
  background: var(--surface-2); padding: 2px 6px; border-radius: 5px;
  font-size: 0.88em; font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.muted { color: var(--muted); }
.small { font-size: 0.82rem; }
.inline { display: inline; }
.hidden { display: none !important; }
.row { display: flex; gap: 0.6rem; align-items: center; }

/* ---------- üst menü ---------- */
.topnav {
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.nav-inner {
  max-width: 1280px; margin: 0 auto; padding: 0.6rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand {
  font-weight: 700; font-size: 1.08rem; color: var(--text);
  letter-spacing: -0.02em;
}
.brand em {
  font-family: "Fraunces", Georgia, serif; font-style: italic;
  font-weight: 600; color: var(--accent);
}
.brand:hover { text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: 0.1rem; flex-wrap: wrap; }
.nav-links a {
  color: var(--muted); padding: 0.32rem 0.7rem; border-radius: 7px;
  font-size: 0.88rem; font-weight: 500;
}
.nav-links a:hover { color: var(--text); text-decoration: none; background: var(--surface-2); }
.nav-links a.active { color: var(--text); background: var(--surface-2); font-weight: 600; }
.nav-logout, .theme-btn {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font: inherit; font-size: 0.88rem; padding: 0.32rem 0.7rem; border-radius: 7px;
}
.theme-btn { font-size: 1rem; padding: 0.25rem 0.55rem; }
.nav-logout:hover { color: var(--red); background: var(--surface-2); }
.theme-btn:hover { color: var(--text); background: var(--surface-2); }

/* ---------- yerleşim ---------- */
.container { max-width: 680px; margin: 0 auto; padding: 1.25rem 1rem 4rem; }
.container.auth {
  max-width: 400px; min-height: 90vh;
  display: flex; flex-direction: column; justify-content: center;
}

.layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 300px;
  gap: 1.4rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.4rem 1.25rem 4rem;
  align-items: start;
}
.side { position: sticky; top: 68px; display: flex; flex-direction: column; gap: 1rem; }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.05rem 1.2rem;
  margin-bottom: 1rem; box-shadow: var(--shadow);
}
.side .card { margin-bottom: 0; }
.card.empty { text-align: center; color: var(--muted); padding: 2.2rem; }

.flash {
  padding: 0.65rem 1rem; border-radius: 8px; margin-bottom: 1rem;
  font-size: 0.88rem; border: 1px solid;
}
.flash-success { background: rgba(17, 119, 74, 0.07); border-color: rgba(17, 119, 74, 0.3); color: var(--green); }
.flash-error { background: rgba(187, 58, 50, 0.07); border-color: rgba(187, 58, 50, 0.3); color: var(--red); }

/* ---------- başlıklar ---------- */
.section-title {
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--muted); margin-bottom: 0.9rem;
}
.section-title.outside { margin: 1.5rem 0 0.8rem; }
.side-title {
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--muted); margin-bottom: 0.7rem;
}
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.page-head.tight { margin-bottom: 0.6rem; }
.page-head p { margin: 0; font-size: 0.85rem; }

/* ---------- form öğeleri ---------- */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], textarea, select {
  width: 100%; background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 0.52rem 0.75rem; font: inherit; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { resize: vertical; }
input.narrow { max-width: 140px; }
input.tiny { max-width: 90px; padding: 0.3rem 0.5rem; }
select { cursor: pointer; }
label { display: block; margin-bottom: 0.85rem; font-size: 0.86rem; color: var(--muted); font-weight: 500; }
label input, label textarea { margin-top: 0.3rem; }
.check-label {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0.6rem 0 0.8rem; cursor: pointer; color: var(--text);
}
.check-label input { width: auto; margin: 0; }

.btn {
  display: inline-block; background: var(--btn-bg); color: var(--btn-text);
  border: 1px solid var(--btn-bg); border-radius: 8px; padding: 0.48rem 1rem;
  font: inherit; font-weight: 600; font-size: 0.88rem; cursor: pointer;
  transition: opacity 0.15s;
}
.btn:hover { opacity: 0.85; text-decoration: none; }
.btn.full { width: 100%; }
.btn.ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--border-strong);
}
.btn.ghost:hover { opacity: 1; border-color: var(--text); }
.btn.danger { background: transparent; color: var(--red); border: 1px solid rgba(187, 58, 50, 0.4); }
.btn.danger:hover { opacity: 1; background: rgba(187, 58, 50, 0.06); }
.btn.small-btn { padding: 0.28rem 0.65rem; font-size: 0.8rem; }

.icon-btn {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 0.85rem; padding: 0.2rem 0.45rem; border-radius: 6px; margin-left: auto;
}
.icon-btn:hover { color: var(--red); background: var(--surface-2); }

.file-label {
  display: inline-flex; align-items: center; cursor: pointer;
  font-size: 0.84rem; color: var(--muted); font-weight: 500;
  padding: 0.35rem 0.7rem; border: 1px dashed var(--border-strong);
  border-radius: 8px; margin: 0;
}
.file-label:hover { color: var(--text); border-color: var(--text); }
.file-label input { display: none; }

/* ---------- avatar ---------- */
.avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 0.95rem; color: #fff; text-decoration: none;
  background: hsl(var(--hue, 25), 32%, 48%);
  overflow: hidden;
}
.avatar:hover { text-decoration: none; opacity: 0.9; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.big { width: 64px; height: 64px; font-size: 1.5rem; }
.avatar.tiny-av { width: 26px; height: 26px; font-size: 0.7rem; }

/* ---------- sol kenar ---------- */
.side-profile { text-align: center; padding: 1.3rem 1rem; }
.side-profile .avatar.big { margin: 0 auto 0.6rem; }
.side-name {
  display: block; color: var(--text); font-weight: 700;
  font-size: 1rem; letter-spacing: -0.01em;
}
.side-name:hover { color: var(--accent); text-decoration: none; }
.side-goal { color: var(--muted); font-size: 0.8rem; margin: 0.15rem 0 0.5rem; }
.streak {
  background: var(--accent-soft); color: var(--accent);
  padding: 0.4rem 0.85rem; border-radius: 999px;
  font-size: 0.88rem; white-space: nowrap;
}
.streak.small-streak { display: inline-block; font-size: 0.8rem; padding: 0.25rem 0.7rem; margin-top: 0.4rem; }

.side-members { padding: 1rem 1rem; }
.member {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.32rem 0.4rem; border-radius: 7px; color: var(--text);
  font-size: 0.86rem;
}
.member:hover { background: var(--surface-2); text-decoration: none; }
.member-name { font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-seen { font-size: 0.7rem; white-space: nowrap; }
.dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--border-strong);
}
.dot.on { background: var(--green); }

/* ---------- sohbet ---------- */
.chat-card { display: flex; flex-direction: column; padding: 1rem; }
#chat-box {
  height: min(56vh, 520px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 0.4rem;
  padding: 0.2rem 0.1rem; margin-bottom: 0.7rem;
}
.chat-line { display: flex; gap: 0.45rem; align-items: flex-end; }
.chat-line.me { flex-direction: row-reverse; }
.chat-av {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover;
}
.chat-av.letter {
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.62rem; font-weight: 700;
}
.chat-msg {
  background: var(--surface-2); border-radius: 10px;
  padding: 0.4rem 0.65rem; font-size: 0.84rem;
  max-width: 88%;
  display: flex; flex-direction: column; word-break: break-word;
}
.chat-msg.me { background: var(--accent-soft); }
.chat-user { font-weight: 600; font-size: 0.73rem; }
.chat-time { font-size: 0.64rem; color: var(--muted); align-self: flex-end; margin-top: 0.1rem; }
#chat-form { display: flex; gap: 0.45rem; }
#chat-form input { flex: 1; }
.chat-send { padding: 0.45rem 0.75rem; }

/* ---------- composer ---------- */
.tabs { display: flex; gap: 0; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.tab {
  background: none; color: var(--muted); border: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 0.45rem 0.9rem; font: inherit;
  font-size: 0.88rem; font-weight: 500; cursor: pointer;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); font-weight: 600; border-bottom-color: var(--text); }
.tab-pane .row { margin-bottom: 0.6rem; }
.tab-pane textarea { margin-bottom: 0.6rem; }
.composer-foot { display: flex; justify-content: flex-end; align-items: center; gap: 0.6rem; }
.composer-foot .file-label { margin-right: auto; }

/* ---------- paylaşım kartı ---------- */
.post-head { display: flex; align-items: flex-start; gap: 0.65rem; margin-bottom: 0.65rem; }
.post-meta { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.post-author-line { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.post-author { color: var(--text); font-weight: 600; font-size: 0.92rem; }
.post-handle { color: var(--muted); font-size: 0.8rem; font-weight: 400; }
.post-time { color: var(--muted); font-size: 0.75rem; }

/* ---------- rozetler ---------- */
.badges { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.25rem; }
.bdg {
  display: inline-flex; align-items: center; gap: 0.28rem;
  border: 1px solid var(--border); background: var(--surface-2);
  border-radius: 999px; padding: 0.12rem 0.5rem;
  font-size: 0.75rem; cursor: default;
}
.bdg b { font-weight: 600; color: var(--muted); font-size: 0.72rem; }
.bdg.fire { border-color: rgba(224, 115, 29, 0.35); background: rgba(224, 115, 29, 0.08); }
.bdg.fire b { color: #d96a14; }
.bdg img { width: 16px; height: 16px; border-radius: 4px; object-fit: cover; }
.bdg-letter {
  width: 16px; height: 16px; border-radius: 4px; background: var(--accent);
  color: #fff; font-size: 0.6rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.course-logo { width: 20px; height: 20px; border-radius: 5px; vertical-align: -4px; margin-right: 0.3rem; }
.bdg.icon-only { padding: 0.18rem 0.4rem; }
.bdg.trophy { border-color: rgba(212, 160, 23, 0.45); background: rgba(212, 160, 23, 0.1); }
.bdg.custom { border-color: rgba(212, 160, 23, 0.35); background: rgba(212, 160, 23, 0.07); font-weight: 600; }
.bdg.hash { color: var(--accent); border-color: transparent; background: var(--accent-soft); font-weight: 600; }
.bdg.hash.soft { color: var(--muted); background: var(--surface-2); }
.bdg-del {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 0.65rem; padding: 0 0 0 0.15rem;
}
.bdg-del:hover { color: var(--red); }
.badge-cell { min-width: 220px; }
.badge-cell .bdg { margin: 0 0.2rem 0.25rem 0; }
.badge-add { margin-top: 0.25rem; }
input.tiny.wide { max-width: 150px; }
input.emoji-in { max-width: 52px; padding: 0.3rem 0.4rem; text-align: center; }
select.tiny.wide { max-width: 150px; padding: 0.3rem 0.5rem; width: auto; }

/* ---------- liderlik tablosu ---------- */
.side-lead { padding: 1rem; }
.lead-row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.34rem 0.4rem; border-radius: 7px; color: var(--text);
  font-size: 0.86rem;
}
.lead-row:hover { background: var(--surface-2); text-decoration: none; }
.lead-rank { width: 1.5rem; text-align: center; flex-shrink: 0; font-size: 0.95rem; }
.lead-name { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-stats { font-size: 0.72rem; white-space: nowrap; }
.lead-foot { font-size: 0.7rem; margin: 0.5rem 0 0; }

/* ---------- üye modları ---------- */
.mood-form { margin-top: 0.6rem; }
.mood-form select {
  font-size: 0.82rem; padding: 0.35rem 0.5rem; text-align: center;
  border-radius: 999px; cursor: pointer;
}
.side-moods { padding: 1rem; }
.mood-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; padding: 0.3rem 0.4rem; font-size: 0.85rem;
}
.mood-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mood-val { white-space: nowrap; font-size: 0.8rem; }

/* ---------- video aralığı ---------- */
.range-wrap { display: flex; align-items: center; gap: 0.35rem; }
.range-wrap input { max-width: 110px; }

/* ---------- @bahis ---------- */
a.mention { font-weight: 600; }
.mention-pop {
  position: absolute; z-index: 120; width: 240px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 10px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
  overflow: hidden; display: flex; flex-direction: column;
}
.mention-opt {
  background: none; border: none; cursor: pointer; font: inherit;
  text-align: left; padding: 0.45rem 0.7rem; font-size: 0.86rem;
  color: var(--text);
}
.mention-opt:hover { background: var(--surface-2); }

/* ---------- tooltip ---------- */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 7px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #20211d; color: #fff;
  padding: 0.38rem 0.65rem; border-radius: 8px;
  font-size: 0.74rem; font-weight: 500; white-space: nowrap;
  opacity: 0; pointer-events: none; z-index: 80;
  transition: opacity 0.18s ease, transform 0.18s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Tepkilerde tooltip gecikmeli açılır: beğenmek için gelen fareyi rahatsız etmesin */
.tip-delay:hover::after { transition-delay: 0.55s; }
[data-tip].tip-delay::after { transition-delay: 0s; }

.course-chip {
  display: inline-flex; align-items: center; gap: 0.55rem;
  border: 1px solid var(--border); background: var(--surface-2);
  border-radius: 7px; padding: 0.3rem 0.65rem; margin-bottom: 0.5rem;
  font-size: 0.85rem;
}
.course-name { font-weight: 600; }
.course-no {
  color: var(--accent); font-weight: 700; font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.post-content { margin: 0.15rem 0 0.5rem; white-space: pre-wrap; word-break: break-word; font-size: 0.93rem; }
.post-img-link { display: block; margin: 0.4rem 0 0.6rem; }
.post-img {
  max-width: 100%; max-height: 420px; border-radius: 8px;
  border: 1px solid var(--border); display: block;
}

.post-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.8rem; margin-top: 0.55rem;
}
.reactions { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.reaction {
  background: none; border: 1px solid var(--border);
  border-radius: 999px; padding: 0.18rem 0.6rem; font: inherit;
  font-size: 0.85rem; cursor: pointer; color: var(--text);
  transition: border-color 0.12s, background 0.12s;
}
.reaction:hover { border-color: var(--border-strong); background: var(--surface-2); }
.reaction.mine { background: var(--accent-soft); border-color: var(--accent); }
.reaction b { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.reaction.mine b { color: var(--accent); }
.reaction.add { color: var(--muted); font-weight: 600; padding: 0.18rem 0.55rem; }

.comments-toggle {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font: inherit; font-size: 0.82rem; font-weight: 500;
  padding: 0.2rem 0.4rem; border-radius: 6px; white-space: nowrap;
}
.comments-toggle:hover { color: var(--text); background: var(--surface-2); }

.comment-area { border-top: 1px solid var(--border); margin-top: 0.7rem; padding-top: 0.7rem; }
.comment { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.55rem; }
.comment.reply { margin: 0.45rem 0 0; }
.comment-body { flex: 1; min-width: 0; }
.comment-author { font-weight: 600; font-size: 0.82rem; margin-right: 0.1rem; }
.comment-handle { color: var(--muted); font-size: 0.72rem; margin-right: 0.35rem; }
.replies { margin-top: 0.2rem; }
.comment-text { font-size: 0.87rem; word-break: break-word; }
.comment-meta { display: flex; align-items: center; gap: 0.6rem; }
.comment-time { color: var(--muted); font-size: 0.7rem; }
.comment-action {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font: inherit; font-size: 0.72rem; font-weight: 600; padding: 0;
}
.comment-action:hover { color: var(--text); }
.comment-action.danger-action:hover { color: var(--red); }
.comment-count { font-size: 0.82rem; white-space: nowrap; }
.older-toggle {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font: inherit; font-size: 0.8rem; font-weight: 600;
  padding: 0 0 0.55rem; display: block;
}
.older-toggle:hover { color: var(--text); }
.comment-form { display: flex; gap: 0.45rem; margin-top: 0.3rem; }
.comment-form input { flex: 1; }
.reply-form { margin: 0.35rem 0 0.2rem; }

/* ---------- lightbox ---------- */
.post-img { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 10, 8, 0.88);
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out; padding: 2rem;
}
.lightbox img {
  max-width: 100%; max-height: 100%;
  border-radius: 8px; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}

/* ---------- bildirimler ---------- */
.notif-wrap { position: relative; }
.notif-link {
  background: none; border: none; cursor: pointer; font: inherit;
  color: var(--muted); padding: 0.32rem 0.7rem; border-radius: 7px;
  font-size: 0.88rem; font-weight: 500;
}
.notif-link:hover { color: var(--text); background: var(--surface-2); }
.notif-drop {
  position: absolute; right: 0; top: calc(100% + 8px); width: 340px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 12px; box-shadow: 0 10px 32px rgba(0, 0, 0, 0.16);
  z-index: 90; overflow: hidden;
}
.notif-drop .notif { border-radius: 0; }
.notif-empty { padding: 1rem; margin: 0; text-align: center; }
.notif-all {
  display: block; text-align: center; padding: 0.6rem;
  border-top: 1px solid var(--border); font-size: 0.84rem; font-weight: 600;
}
.notif-all:hover { background: var(--surface-2); text-decoration: none; }
.notif.mini { padding: 0.5rem 0.7rem; }
.notif-actor {
  display: flex; align-items: center; gap: 0.45rem;
  color: var(--text); font-size: 0.85rem; flex-shrink: 0;
}
.notif-actor:hover { text-decoration: underline; }
.notif-rest {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  color: var(--text); font-size: 0.85rem;
}
.notif-rest:hover { text-decoration: none; }
.notif-rest > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nbadge {
  display: inline-block; background: var(--red); color: #fff;
  font-size: 0.66rem; font-weight: 700; line-height: 1;
  padding: 0.18rem 0.4rem; border-radius: 999px;
  margin-left: 0.35rem; vertical-align: 1px;
}
.notif-list { padding: 0.4rem 0.6rem; }
.notif {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.6rem 0.6rem; border-radius: 8px; color: var(--text);
  font-size: 0.88rem;
}
.notif:hover { background: var(--surface-2); text-decoration: none; }
.notif.unread { background: var(--accent-soft); }
.notif.unread:hover { background: var(--accent-soft); filter: brightness(0.97); }
.notif-body { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }

/* ---------- avatar kırpıcı ---------- */
.crop-wrap { display: flex; gap: 1.1rem; align-items: center; margin-bottom: 1.1rem; flex-wrap: wrap; }
#crop-canvas {
  border-radius: 12px; border: 1px solid var(--border-strong);
  cursor: grab; touch-action: none; background: var(--surface-2);
}
#crop-canvas:active { cursor: grabbing; }
.crop-controls { flex: 1; min-width: 200px; }
.crop-controls input[type="range"] { width: 100%; }

/* ---------- emoji seçici ---------- */
.emoji-pop {
  position: absolute; z-index: 100; width: 324px; max-height: 240px;
  overflow-y: auto; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
  padding: 0.5rem; display: flex; flex-wrap: wrap; gap: 2px;
}
.emoji-opt {
  background: none; border: none; font-size: 1.25rem; cursor: pointer;
  padding: 0.22rem; border-radius: 7px; line-height: 1;
}
.emoji-opt:hover { background: var(--surface-2); }

.pager { display: flex; justify-content: space-between; gap: 1rem; }

.profile-tabs { margin: 1.4rem 0 1rem; }
.show-more { margin-bottom: 1rem; }
.show-rest .note-grid { margin-top: 0.8rem; }

/* ---------- auth ---------- */
.auth-card { text-align: center; padding: 2rem 1.75rem; }
.auth-logo { font-size: 2.3rem; margin-bottom: 0.3rem; }
.auth-card form { text-align: left; margin-top: 1.4rem; }
.auth-alt { margin-top: 1.2rem; font-size: 0.86rem; color: var(--muted); }

/* ---------- profil ---------- */
.profile-head { display: flex; align-items: flex-start; gap: 1.1rem; flex-wrap: wrap; }
.profile-info { flex: 1; min-width: 180px; }
.profile-bio { margin: 0.2rem 0 0.5rem; font-size: 0.9rem; }
.chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: 0.78rem; font-weight: 500; padding: 0.15rem 0.6rem;
  border-radius: 999px;
}
.chip.muted-chip { color: var(--muted); background: none; }
.badge {
  background: var(--accent-soft); color: var(--accent);
  font-size: 0.66rem; font-weight: 700; padding: 0.12rem 0.5rem;
  border-radius: 999px; vertical-align: middle; margin-left: 0.3rem;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.profile-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; }
.profile-stats { display: flex; gap: 1.3rem; }
.stat { display: flex; flex-direction: column; align-items: center; line-height: 1.3; color: inherit; }
.stat b { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.stat span { font-size: 0.72rem; color: var(--muted); }
a.stat:hover { text-decoration: none; }
a.stat:hover b { color: var(--accent); }

.avatar-edit { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; flex-wrap: wrap; }

.progress-row { margin-bottom: 0.85rem; }
.progress-label { display: flex; justify-content: space-between; font-size: 0.86rem; margin-bottom: 0.3rem; gap: 0.8rem; flex-wrap: wrap; }
.progress-label span:first-child { font-weight: 600; }
.progress-label .percent { color: var(--accent); margin-left: 0.25rem; font-variant-numeric: tabular-nums; }
.progress-track { background: var(--surface-2); border-radius: 999px; height: 6px; overflow: hidden; }
.progress-bar { height: 100%; border-radius: 999px; min-width: 2%; background: var(--accent); }

/* ---------- notlar ---------- */
.note-filters .row { margin-bottom: 0.2rem; }
.tag-list { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.7rem; }
.tag {
  background: none; color: var(--muted); border: 1px solid var(--border);
  font-size: 0.78rem; padding: 0.16rem 0.65rem; border-radius: 999px;
}
.tag:hover { color: var(--text); text-decoration: none; border-color: var(--border-strong); }
.tag.active { background: var(--btn-bg); color: var(--btn-text); border-color: var(--btn-bg); }
.tag.small { font-size: 0.72rem; padding: 0.08rem 0.5rem; display: inline-block; margin-bottom: 0.3rem; }

.privacy { font-size: 0.72rem; font-weight: 600; color: var(--muted); display: inline-block; margin-bottom: 0.3rem; margin-right: 0.4rem; }
.privacy.pub { color: var(--green); }

.folder-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.8rem; margin-bottom: 1rem;
}
.folder-card {
  display: flex; align-items: center; gap: 0.7rem;
  margin-bottom: 0; padding: 0.85rem 1rem; color: inherit;
  background: var(--surface-2); transition: border-color 0.15s;
}
.folder-card:hover { text-decoration: none; border-color: var(--accent); }
.folder-icon { font-size: 1.5rem; flex-shrink: 0; }
.folder-info { min-width: 0; }
.folder-info h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.note-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.8rem; }
.note-card { display: block; color: inherit; transition: border-color 0.15s; margin-bottom: 0; }
.note-card:hover { text-decoration: none; border-color: var(--accent); }
.note-preview { color: var(--muted); font-size: 0.84rem; margin: 0.25rem 0 0.45rem; word-break: break-word; }

.note-form .row { margin-bottom: 0.6rem; }
.note-form textarea { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.88rem; }

.note-full h1 { margin-bottom: 0.2rem; }
.markdown { margin-top: 1rem; word-break: break-word; font-size: 0.93rem; }
.markdown pre {
  background: var(--code-bg); border-radius: 10px;
  padding: 0.9rem 1rem; overflow-x: auto; font-size: 0.85rem;
}
.markdown pre code { background: none; padding: 0; color: #e6edf3; }
.markdown table { border-collapse: collapse; width: 100%; margin: 0.8rem 0; }
.markdown th, .markdown td { border: 1px solid var(--border); padding: 0.45rem 0.7rem; text-align: left; }
.markdown th { background: var(--surface-2); }
.markdown blockquote {
  border-left: 3px solid var(--accent); margin: 0.8rem 0;
  padding: 0.2rem 0 0.2rem 1rem; color: var(--muted);
}
.markdown img { max-width: 100%; border-radius: 8px; }

/* ---------- tablolar / admin ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
th {
  text-align: left; color: var(--muted); font-weight: 600;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
}
th, td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); }
tbody tr:last-child td { border-bottom: none; }
.row-passive { opacity: 0.5; }
.course-add { margin-bottom: 1rem; }

/* ---------- duyarlı düzen ---------- */
@media (max-width: 1120px) {
  .layout { grid-template-columns: minmax(0, 1fr) 290px; }
  .side-left { display: none; }
}
@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; padding: 1rem 0.9rem 3rem; }
  .side { position: static; }
  .side-right { order: 3; }
  /* Mobilde sol kolon (üyeler, sıralama, modlar) akışın altına gelir */
  .side-left { display: flex; order: 4; }
  #chat-box { height: 300px; }
}
@media (max-width: 560px) {
  .nav-inner { flex-direction: column; gap: 0.3rem; padding-bottom: 0.5rem; }
  .nav-links { justify-content: center; }
  .profile-head { justify-content: center; text-align: center; }
  .profile-info { text-align: center; }
  .profile-info .badges { justify-content: center; }
  .chips { justify-content: center; }
  .profile-side { align-items: center; width: 100%; }
  .profile-stats { justify-content: center; }
  input.narrow { max-width: 100%; }
  .tab-pane .row { flex-direction: column; align-items: stretch; }
  .range-wrap input { max-width: 100%; flex: 1; }
  .emoji-pop { width: min(324px, calc(100vw - 24px)); }
  .mention-pop { width: min(240px, calc(100vw - 24px)); }
  .notif-drop {
    position: fixed; left: 10px; right: 10px; top: 92px; width: auto;
  }
  .post-foot { flex-wrap: wrap; }
  .post-img { max-height: 300px; }
  .composer-foot { flex-wrap: wrap; }
  .page-head { flex-direction: column; align-items: flex-start; }
  .lightbox { padding: 0.75rem; }
  .avatar-edit { justify-content: center; }
  .badge-cell { min-width: 180px; }
}