/* ============================================
   forumhit — modern refined theme
   editorial · dark · typographic
   ============================================ */

:root {
  /* canvas */
  --bg: #0a0a0b;
  --bg-soft: #111113;
  --bg-elev: #17171a;
  --bg-hover: #1d1d21;
  --bg-strong: #222226;

  /* lines */
  --line: #26262b;
  --line-soft: #1c1c20;
  --line-strong: #35353b;

  /* text */
  --ink: #ededf0;
  --ink-muted: #a0a0aa;
  --ink-dim: #6a6a74;
  --ink-faint: #464650;

  /* accents */
  --amber: #f59e0b;
  --amber-2: #fbbf24;
  --amber-soft: rgba(245, 158, 11, 0.12);
  --amber-border: rgba(245, 158, 11, 0.3);

  --green: #10b981;
  --blue: #3b82f6;
  --red: #ef4444;
  --purple: #a78bfa;
  --teal: #2dd4bf;

  /* type — the footer font picker toggles [data-font="original"] on <html>
     to switch back to the very first font pairing (see override below) */
  --font-display: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;
  --heading-weight: 600;

  /* geometry */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
  --glow-amber: 0 0 0 1px var(--amber-border), 0 4px 20px rgba(245, 158, 11, 0.15);
}

/* Light theme — toggled via data-theme="light" on <html>, set/persisted by
   the switch in the topbar. Dark stays the default (no attribute needed). */
:root[data-theme="light"] {
  /* warm off-white, not stark white */
  --bg: #f6f4ef;
  --bg-soft: #efece4;
  --bg-elev: #faf8f3;
  --bg-hover: #e8e4da;
  --bg-strong: #ddd7c9;

  --line: #ddd7c8;
  --line-soft: #e6e1d4;
  --line-strong: #c7bfab;

  --ink: #1d1b16;
  --ink-muted: #58544a;
  --ink-dim: #938d7f;
  --ink-faint: #c9c3b4;

  --amber-soft: rgba(245, 158, 11, 0.1);
  --amber-border: rgba(245, 158, 11, 0.35);

  --shadow-sm: 0 1px 2px rgba(30,26,15,0.06);
  --shadow-md: 0 4px 16px rgba(30,26,15,0.08);
  --shadow-lg: 0 12px 40px rgba(30,26,15,0.10);
}

/* Webmaster vertical (webmasterturk.net) uses the same amber accent as
   ForumHit — its logo is itself gold/orange-toned, so no color override is
   needed here; the logo swap (topbar/footer) alone makes the brand switch
   obvious. */

:root[data-theme="light"] .topbar {
  background: rgba(246, 244, 239, 0.85);
}

:root[data-theme="light"] .user-menu-dropdown,
:root[data-theme="light"] .topic-tools-menu {
  box-shadow: 0 12px 32px rgba(20, 20, 30, 0.12);
}

/* the very first font pairing this site shipped with, kept as an opt-in
   choice via the footer font picker — Instrument Serif only ships one
   weight, so headings fall back to a normal weight here too */
:root[data-font="original"] {
  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-body: "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  --heading-weight: 400;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; }

body {
  background: var(--bg);
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.6;
  font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* subtle noise overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    radial-gradient(at 15% 0%, rgba(245, 158, 11, 0.06) 0%, transparent 40%),
    radial-gradient(at 85% 100%, rgba(139, 92, 246, 0.04) 0%, transparent 40%);
}

body > * { position: relative; z-index: 2; }

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--heading-weight);
  color: var(--amber-2);
  letter-spacing: 0.01em;
}

b, strong {
  font-weight: 600;
  color: var(--ink);
}

kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 5px;
  background: var(--bg-strong);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink-muted);
}

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 1px 6px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--amber-2);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* ============================================
   TOP BAR
   ============================================ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 11, 0.85);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}

.site-announcement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 10px 20px;
  background: var(--amber-soft);
  border-bottom: 1px solid var(--amber-border);
  color: var(--ink);
  font-size: 14px;
  text-align: center;
}

.site-announcement-text {
  flex: 1;
  max-width: 1360px;
}

.site-announcement-link {
  flex-shrink: 0;
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  white-space: nowrap;
}

.site-announcement-link:hover {
  opacity: 0.8;
}

.site-announcement-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--ink-muted);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}

.site-announcement-close:hover {
  color: var(--ink);
}

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

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.15s ease;
  padding-right: 24px;
  border-right: 1px solid var(--line);
  margin-right: -2px;
  height: 108px;
}

.brand:hover {
  opacity: 0.88;
}

.brand-logo {
  height: 80px;
  width: auto;
  display: block;
  filter: drop-shadow(0 3px 14px rgba(245, 158, 11, 0.22));
  transition: filter 0.2s ease;
}

.brand:hover .brand-logo {
  filter: drop-shadow(0 5px 20px rgba(245, 158, 11, 0.35));
}

.footer-logo {
  height: 52px;
  width: auto;
  display: block;
}

.nav-primary {
  display: flex;
  gap: 2px;
}

.nav-primary a {
  padding: 8px 13px;
  font-size: 12.5px;
  color: var(--ink-muted);
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
  font-weight: 500;
}

.nav-primary a:hover {
  color: var(--ink);
  background: var(--bg-hover);
}

.nav-primary a.active {
  color: var(--ink);
  background: var(--bg-elev);
  box-shadow: inset 0 0 0 1px var(--line);
}

.nav-primary .nav-soon {
  padding: 8px 13px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-dim);
  opacity: 0.5;
  cursor: default;
}

.topbar-actions {
  margin-left: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input {
  width: 220px;
  padding: 7px 12px 7px 32px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 13px;
  font-family: var(--font-body);
  outline: none;
  transition: all 0.15s ease;
}

.search-input::placeholder {
  color: var(--ink-dim);
}

.search-input:focus {
  border-color: var(--line-strong);
  background: var(--bg-elev);
}

.search-icon {
  position: absolute;
  left: 10px;
  color: var(--ink-dim);
  font-size: 16px;
  pointer-events: none;
}

.search-wrap kbd {
  position: absolute;
  right: 8px;
}

.icon-btn {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  font-size: 14px;
  transition: all 0.15s ease;
}

.icon-btn:hover {
  background: var(--bg-hover);
  color: var(--ink);
}

/* Ghost text button — like .icon-btn's hover treatment, but sized to its
   label instead of a fixed 34x34 icon box. .icon-btn was being reused for
   multi-word labels ("iptal", "konu işlemleri", pagination links, etc.),
   which squeezed and wrapped them inside that fixed square. */
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}

.btn-text:hover {
  background: var(--bg-hover);
  color: var(--ink);
}

.btn-text.btn-outline {
  background: var(--bg-elev);
  border: 1px solid var(--line);
}

.btn-text.btn-outline.active {
  background: var(--amber-soft);
  border-color: var(--amber-border);
  color: var(--amber-2);
}

.icon-btn .badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--amber);
  color: var(--bg);
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-mono);
  padding: 1px 4px;
  border-radius: 8px;
  min-width: 14px;
  text-align: center;
}

.profile-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
}

.profile-chip:hover {
  background: var(--bg-hover);
  border-color: var(--line-strong);
}

.user-menu {
  position: relative;
}

.user-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  padding: 6px;
  z-index: 50;
}

.user-menu-dropdown.open {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-menu-dropdown a,
.user-menu-dropdown button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
}

.user-menu-dropdown .umi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  flex-shrink: 0;
}

.user-menu-dropdown a:hover,
.user-menu-dropdown button:hover {
  background: var(--bg-hover);
}

.user-menu-divider {
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}

.topic-tools {
  position: relative;
  display: inline-block;
}

.topic-tools-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  padding: 6px;
  z-index: 50;
  flex-direction: column;
  gap: 2px;
}

.topic-tools-menu.open {
  display: flex;
}

.topic-tools-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--ink);
  background: none;
  border: none;
  cursor: pointer;
}

.topic-tools-menu button:hover {
  background: var(--bg-hover);
}

.topic-title-edit {
  display: none;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.topic-title-edit.open {
  display: flex;
}

.topic-title-input {
  flex: 1;
  min-width: 280px;
  max-width: 700px;
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: var(--heading-weight);
  letter-spacing: -0.02em;
  color: var(--ink);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
}

.topic-edit-box {
  display: none;
  padding: 0 20px 20px;
}

.topic-edit-box.open {
  display: block;
}

/* On narrower viewports, hide username and show only avatar */
@media (max-width: 1180px) {
  .profile-chip {
    padding: 3px;
    gap: 0;
  }
  .profile-chip > span:last-child {
    display: none;
  }
}

/* ============================================
   AVATARS
   ============================================ */

.avatar-xs, .avatar-sm, .avatar-md, .avatar-lg {
  display: inline-block;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  position: relative;
}

.avatar-xs { width: 18px; height: 18px; }
.avatar-sm { width: 26px; height: 26px; }
.avatar-md { width: 44px; height: 44px; }
.avatar-lg { width: 56px; height: 56px; border-radius: var(--radius); }

.avatar-xs.green, .avatar-sm.green, .avatar-md.green, .avatar-lg.green {
  background: linear-gradient(135deg, #10b981, #047857);
}
.avatar-xs.amber, .avatar-sm.amber, .avatar-md.amber, .avatar-lg.amber {
  background: linear-gradient(135deg, #f59e0b, #b45309);
}
.avatar-xs.purple, .avatar-sm.purple, .avatar-md.purple, .avatar-lg.purple {
  background: linear-gradient(135deg, #a78bfa, #6d28d9);
}
.avatar-xs.teal, .avatar-sm.teal, .avatar-md.teal, .avatar-lg.teal {
  background: linear-gradient(135deg, #2dd4bf, #0f766e);
}

/* ============================================
   HERO STRIP
   ============================================ */

.hero-strip {
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(at 30% 0%, rgba(245, 158, 11, 0.05), transparent 60%),
    var(--bg);
}

.hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 48px 24px 40px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: end;
}


.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-dim);
  margin-bottom: 14px;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: var(--heading-weight);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 700px;
}

.hero-sub {
  display: block;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-muted);
  margin-top: 14px;
  letter-spacing: 0;
}

.hero-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-end;
}

.cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--amber);
  color: #1a0f00;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: none;
  transition: all 0.15s ease;
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 2px 8px rgba(245, 158, 11, 0.25);
  cursor: pointer;
}

.cta-primary:hover {
  background: var(--amber-2);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 6px 20px rgba(245, 158, 11, 0.35);
}

.cta-primary span:first-child {
  font-size: 16px;
  font-weight: 400;
}

.cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
}

.cta-ghost:hover {
  background: var(--bg-hover);
  border-color: var(--ink-dim);
}

.hero-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  min-width: 70px;
}

.stat-num {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: var(--heading-weight);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
}

.stat-divider {
  width: 1px;
  height: 26px;
  background: var(--line);
}

/* ============================================
   LAYOUT
   ============================================ */

.layout {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 24px 60px;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 300px;
  gap: 32px;
  align-items: start;
}

.layout-category {
  grid-template-columns: 240px minmax(0, 1fr);
}

/* ============================================
   SIDEBAR
   ============================================ */

.sidebar {
  position: sticky;
  top: 128px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.side-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.side-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-dim);
  padding: 0 10px;
}

.cat-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cat-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--ink-muted);
  transition: all 0.15s ease;
}

.cat-link:hover {
  background: var(--bg-hover);
  color: var(--ink);
}

.cat-link.active {
  background: var(--bg-elev);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}

.cat-dot {
  width: 8px;
  height: 8px;
  background: var(--dot);
  border-radius: 50%;
  flex-shrink: 0;
}

.cat-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 10px;
}

.tag {
  display: inline-block;
  padding: 4px 10px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  transition: all 0.15s ease;
}

.tag:hover {
  border-color: var(--amber-border);
  color: var(--amber-2);
  background: var(--amber-soft);
}

.tag.big {
  font-size: 12px;
  padding: 5px 12px;
  color: var(--ink);
  background: var(--bg-elev);
  border-color: var(--line-strong);
}

.online-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 10px;
}

.online-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  margin: -4px -6px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--ink-muted);
  transition: background 0.15s ease;
}

.online-user[href]:hover {
  background: var(--bg-hover);
}

.online-user .avatar-xs {
  position: relative;
}

.online-user .avatar-xs::after {
  content: '';
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 7px;
  height: 7px;
  background: var(--green);
  border-radius: 50%;
  border: 2px solid var(--bg);
}

.online-role {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  padding: 1px 5px;
  background: var(--amber-soft);
  color: var(--amber-2);
  border-radius: 3px;
  margin-left: auto;
}

.online-more {
  font-size: 11px;
  color: var(--amber-2);
  margin-top: 8px;
  font-weight: 500;
}

.online-more:hover {
  color: var(--amber);
}

.rules-box {
  padding: 14px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rule {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.5;
}

.rule-num {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--amber-2);
  background: var(--amber-soft);
  border-radius: 4px;
  padding: 2px 6px;
  height: fit-content;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ============================================
   FEED / FILTER
   ============================================ */

.feed {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.f-tab {
  display: inline-block;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--ink-muted);
  border-radius: var(--radius-sm);
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s ease;
}

.f-tab:hover {
  color: var(--ink);
  background: var(--bg-hover);
}

.f-tab.active {
  color: var(--bg);
  background: var(--ink);
}

.filter-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-dim);
}

.filter-meta select {
  padding: 5px 10px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 12px;
  outline: none;
  cursor: pointer;
}

/* ============================================
   FEED CARDS (homepage)
   ============================================ */

.card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: all 0.2s ease;
  overflow: hidden;
}

.card:hover {
  background: var(--bg-elev);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

.card-pinned {
  border-color: var(--amber-border);
  background: linear-gradient(to bottom, var(--amber-soft), var(--bg-soft));
  position: relative;
}

.pin-ribbon {
  position: absolute;
  top: 0;
  right: 16px;
  background: var(--amber);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 10px 5px;
  border-radius: 0 0 6px 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* A poll card dropped into the feed between regular topic cards (see
   templates/partials/poll_feed_card.html) — same outer .card shell, no
   .card-body since the poll's own markup already carries its spacing. */
.poll-feed-card {
  padding: 20px 22px;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--ink-dim);
}

.cat-pill {
  display: inline-block;
  padding: 3px 10px;
  background: color-mix(in srgb, var(--pill) 15%, transparent);
  color: var(--pill);
  border: 1px solid color-mix(in srgb, var(--pill) 30%, transparent);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: all 0.15s ease;
}

.cat-pill:hover {
  background: color-mix(in srgb, var(--pill) 25%, transparent);
}

.dot-sep {
  color: var(--ink-faint);
}

.meta-time {
  font-family: var(--font-mono);
}

.hot-badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--amber-2);
  padding: 2px 8px;
  background: var(--amber-soft);
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.card-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--heading-weight);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.card-title a {
  color: var(--ink);
  transition: color 0.15s ease;
}

.card-title a:hover {
  color: var(--amber-2);
}

.card-excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin-bottom: 2px;
}

.tag-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.mini-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  padding: 2px 8px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: all 0.15s ease;
}

.mini-tag:hover {
  color: var(--amber-2);
  border-color: var(--amber-border);
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  color: var(--ink-dim);
}

.author-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-muted);
}

.reply-ping {
  color: var(--ink-dim);
  margin-left: 8px;
}

.reply-ping b {
  color: var(--green);
  font-weight: 500;
}

.card-stats {
  display: flex;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
}

.card-stats span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.load-more-wrap {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.load-more {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink-muted);
  font-size: 13px;
  transition: all 0.15s ease;
}

.load-more:hover {
  background: var(--bg-elev);
  color: var(--ink);
  border-color: var(--line-strong);
}

.load-more .arrow {
  transition: transform 0.15s ease;
}

.load-more:hover .arrow {
  transform: translateY(2px);
}

/* ============================================
   RIGHT RAIL
   ============================================ */

.rail {
  position: sticky;
  top: 128px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rail-card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}

.rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.rail-title {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-dim);
}

.rail-icon {
  color: var(--amber);
  font-size: 14px;
}

.rank-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rank-list li {
  display: flex;
  gap: 12px;
}

.rank-num {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--heading-weight);
  line-height: 1;
  color: var(--ink-faint);
  letter-spacing: -0.05em;
  flex-shrink: 0;
  width: 28px;
}

.rank-list li:first-child .rank-num { color: var(--amber); }
.rank-list li:nth-child(2) .rank-num { color: var(--ink-dim); }
.rank-list li:nth-child(3) .rank-num { color: var(--ink-dim); }

.rank-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rank-body a {
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink);
  transition: color 0.15s ease;
}

.rank-body a:hover {
  color: var(--amber-2);
}

.rank-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
}

.quote-card {
  text-align: center;
  padding: 24px 20px;
  border-color: var(--amber-border);
  background: linear-gradient(135deg, var(--amber-soft), var(--bg-soft));
}

.quote-mark {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 0.8;
  color: var(--amber);
  margin-bottom: 6px;
}

.quote-text {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--heading-weight);
  font-style: italic;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 10px;
}

.quote-author {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
}

.new-members {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.member-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--ink-muted);
  transition: background 0.15s ease;
  cursor: pointer;
}

.member-chip:hover {
  background: var(--bg-hover);
}

.compact-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
}

.compact-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--ink-muted);
}

.compact-row b {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
}

/* ============================================
   CATEGORY PAGE
   ============================================ */

.cat-hero {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.cat-hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 24px 40px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  margin-bottom: 20px;
}

.breadcrumb a {
  color: var(--ink-muted);
  transition: color 0.15s ease;
}

.breadcrumb a:hover {
  color: var(--amber-2);
}

.breadcrumb span:not(.meta-chip) {
  color: var(--ink-faint);
}

.cat-main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: start;
}

.cat-emoji {
  font-size: 48px;
  line-height: 1;
  padding: 16px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.cat-title-block {
  min-width: 0;
}

.cat-title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: var(--heading-weight);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 10px;
}

.cat-accent {
  color: var(--amber);
  font-weight: 400;
}

.cat-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 560px;
  margin-bottom: 16px;
}

.cat-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 12px;
  color: var(--ink-muted);
}

.meta-chip b {
  font-family: var(--font-mono);
  color: var(--ink);
}

.meta-chip.mods {
  padding-left: 6px;
}

.mod-avatars {
  display: inline-flex;
}

.mod-avatars .avatar-xs {
  border: 2px solid var(--bg);
  margin-right: -6px;
}

.cat-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ============================================
   TOPIC ROWS (category page)
   ============================================ */

.section-divider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--line-soft);
  margin-top: 8px;
}

.divider-count {
  color: var(--ink-faint);
}

.topic-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: all 0.15s ease;
}

.topic-row:hover {
  background: var(--bg-elev);
  border-color: var(--line-strong);
}

.topic-row.pinned-row {
  border-color: var(--amber-border);
  background: linear-gradient(to right, var(--amber-soft), var(--bg-soft) 20%);
}

.topic-row.unread {
  background: var(--bg-elev);
  box-shadow: inset 3px 0 0 var(--amber);
}

.topic-row.locked {
  opacity: 0.6;
}

.topic-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.topic-emoji {
  font-size: 20px;
  line-height: 1;
}

.topic-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line-strong);
}

.topic-dot.new {
  background: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-soft);
}

.topic-dot.hot {
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.topic-dot.locked-dot {
  background: transparent;
  width: auto;
  height: auto;
  font-size: 14px;
}

.topic-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.topic-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.topic-prefix {
  display: inline-block;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--pfx) 15%, transparent);
  color: var(--pfx);
  border: 1px solid color-mix(in srgb, var(--pfx) 30%, transparent);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}

.topic-prefix.big {
  font-size: 11px;
  padding: 4px 10px;
}

.hot-flag {
  font-size: 12px;
}

.topic-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--heading-weight);
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.01em;
  transition: color 0.15s ease;
}

.topic-title:hover {
  color: var(--amber-2);
}

.topic-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--ink-dim);
}

.topic-author {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-muted);
}

.page-indicator {
  display: inline-flex;
  gap: 2px;
  margin-left: 4px;
}

.page-indicator a {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 5px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--ink-muted);
  transition: all 0.15s ease;
}

.page-indicator a:hover {
  border-color: var(--amber-border);
  color: var(--amber-2);
}

.page-indicator span {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 10px;
}

.topic-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-dim);
}

.topic-stats b {
  margin-right: 4px;
}

.stat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
  padding: 0 4px;
}

.stat-box.hot-stat {
  color: var(--amber-2);
}

.stat-num-sm {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--heading-weight);
  line-height: 1;
  color: inherit;
  letter-spacing: -0.02em;
}

.stat-box:not(.hot-stat) .stat-num-sm {
  color: var(--ink);
}

.stat-label-sm {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  margin-top: 3px;
}

.last-reply {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
  min-width: 110px;
}

.last-name {
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
}

.last-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
}

/* ============================================
   PAGINATION
   ============================================ */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 24px 0;
  margin-top: 8px;
}

.page-btn {
  padding: 8px 16px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  font-size: 13px;
  transition: all 0.15s ease;
}

.page-btn:hover:not(:disabled) {
  background: var(--bg-elev);
  color: var(--ink);
  border-color: var(--line-strong);
}

.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.page-numbers {
  display: flex;
  gap: 4px;
  margin: 0 8px;
}

.page-num {
  width: 36px;
  height: 36px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  transition: all 0.15s ease;
}

.page-num:hover:not(.active) {
  background: var(--bg-elev);
  color: var(--ink);
}

.page-num.active {
  background: var(--amber);
  color: var(--bg);
  border-color: var(--amber);
  font-weight: 700;
}

.page-dots {
  display: flex;
  align-items: center;
  padding: 0 4px;
  color: var(--ink-faint);
}

/* ============================================
   TOPIC PAGE
   ============================================ */

.topic-hero {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.topic-hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px 24px;
}

/* Blog post with a cover image: the photo sits inside the title band
   itself, anchored to its right edge and matching the band's full height
   (so its bottom lines up with the title/meta text, never a separate
   banner above or below) — a torn-paper clip-path on its left edge
   instead of a sharp straight line. */
.topic-hero-inner.has-cover-thumb {
  position: relative;
  padding-top: 0;
  padding-bottom: 0;
  min-height: 220px;
}

.topic-hero-text-col {
  min-width: 0;
}

.topic-hero-inner.has-cover-thumb .topic-hero-text-col {
  padding: 28px 0;
  padding-right: 42%;
}

.topic-hero-cover-thumb {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 44%;
  object-fit: cover;
  clip-path: polygon(
    18% 0%, 100% 0%, 100% 100%, 18% 100%,
    24% 94%, 14% 89%, 26% 83%, 12% 77%,
    22% 71%, 10% 65%, 28% 59%, 15% 53%,
    20% 47%, 8% 41%, 24% 35%, 12% 29%,
    22% 23%, 10% 17%, 26% 11%, 14% 5%
  );
}

@media (max-width: 768px) {
  .topic-hero-inner.has-cover-thumb {
    padding-top: 28px;
    padding-bottom: 0;
    min-height: 0;
  }
  .topic-hero-inner.has-cover-thumb .topic-hero-text-col {
    padding: 0 0 160px;
  }
  .topic-hero-cover-thumb {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 160px;
    clip-path: polygon(
      0% 14%, 0% 0%, 100% 0%, 100% 14%,
      94% 20%, 89% 10%, 83% 22%, 77% 8%,
      71% 18%, 65% 6%, 59% 24%, 53% 11%,
      47% 16%, 41% 4%, 35% 20%, 29% 8%,
      23% 18%, 17% 6%, 11% 22%, 5% 10%
    );
  }
}

.topic-prefix-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.topic-page-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.5vw, 48px);
  font-weight: var(--heading-weight);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 900px;
  margin-bottom: 24px;
}

.topic-page-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.author-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 4px;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-muted);
}

/* Reply/view/like counts plus the pinned/locked badges used to be one
   unbroken string ("X yanıt · Y görüntüleme · Z beğeni") — fine on
   desktop, but with nowhere to wrap it just ran into the username and
   timestamp on narrow screens. Each stat is its own element now so the
   whole group can wrap as a unit, dropping to its own line under the
   byline on mobile instead of mixing in with it mid-word. */
.topic-meta-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12px;
  color: var(--ink-dim);
}

.meta-badge {
  color: var(--amber);
  font-size: 12px;
}

.topic-prefix-badge {
  display: inline-block;
  color: #0a0a0b;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .topic-meta-stats {
    flex-basis: 100%;
    margin-left: 30px;
  }
}

.meta-time-sm {
  font-size: 11px;
  color: var(--ink-dim);
  margin-top: 2px;
}

.topic-page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.topic-progress {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  transform: translateY(1px);
}

.progress-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  margin-bottom: 6px;
}

.progress-bar {
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(to right, var(--amber), var(--amber-2));
  border-radius: 2px;
}

/* topic layout */
.topic-layout {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 24px 60px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 32px;
  align-items: start;
}

/* Blog view (/blog/:slug): the same thread as the forum side, but without
   anything that reads as a forum — no per-post avatar-card sidebar
   (username moves to a plain byline instead), no post numbering. The
   title/author/stats/actions row in the hero above is shared with the
   forum view and stays as-is. The right rail still shows (same grid as
   the base .topic-layout) but with a "diğer yazılar" blog-post list
   instead of the forum "konu bilgisi" card — see .blog-rail-item below. */

.topic-layout.blog-view .post {
  grid-template-columns: minmax(0, 1fr);
}

.topic-layout.blog-view .post-sidebar {
  display: none;
}

.topic-layout.blog-view .post-num {
  display: none;
}

.blog-byline {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 16px 20px 0;
  font-size: 13px;
  color: var(--ink-muted);
}

.topic-layout.blog-view .blog-byline {
  display: flex;
}

/* The cover image already runs full-width as the banner above the title,
   so showing it again inline would just repeat it — hide the first image
   in the article body specifically (blog view only; the forum view still
   shows it inline since it has no banner of its own) and offer it instead
   as a small clickable attachment underneath the text. */
.topic-layout.blog-view #topicBodyView img:first-of-type {
  display: none;
}

.blog-attachment {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 20px 16px;
  padding: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  width: fit-content;
}

.blog-attachment img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.blog-attachment span {
  font-size: 12px;
  color: var(--ink-dim);
  padding-right: 10px;
}

.package-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin: 20px 20px;
}

.package-card-specs li b {
  color: var(--ink);
  font-weight: 700;
}

.package-card {
  padding: 20px;
  background: linear-gradient(135deg, var(--amber-soft), transparent);
  border: 1px solid var(--amber-border);
  border-radius: var(--radius);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.package-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.package-card-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--amber);
  margin-bottom: 8px;
}

.package-card-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--heading-weight);
  color: var(--ink);
  margin-bottom: 12px;
}

.package-card-specs {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--ink-muted);
}

.package-card-specs li {
  padding-left: 16px;
  position: relative;
}

.package-card-specs li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--amber);
}

.package-card-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

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

.package-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.package-table th,
.package-table td {
  padding: 10px 16px;
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}

.package-table thead th {
  background: linear-gradient(135deg, var(--amber-soft), transparent);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--heading-weight);
  color: var(--ink);
}

.package-table tbody tr:last-child td {
  border-bottom: none;
}

.package-table-label {
  text-align: left;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.package-table-price-row td {
  font-size: 16px;
  font-weight: 700;
  color: var(--amber);
}

.package-card-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}

.package-card-buy {
  margin-left: auto;
}

.blog-rail-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 4px;
}

.blog-rail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}

.blog-rail-item:hover {
  background: var(--bg-elev);
}

.blog-rail-item img,
.blog-rail-noimg {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
}

.blog-rail-item-title {
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink);
  font-weight: 500;
}

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.9);
  align-items: center;
  justify-content: center;
  padding: 40px;
  cursor: zoom-out;
}

.lightbox.open {
  display: flex;
}

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.doc-lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.9);
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.doc-lightbox-overlay.open {
  display: flex;
}

.doc-lightbox-close {
  position: fixed;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}

.doc-lightbox-body {
  width: 100%;
  height: 100%;
  max-width: 900px;
  max-height: 900px;
}

.doc-lightbox-frame {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-lg);
}

.simple-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.6);
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.simple-modal-overlay.open {
  display: flex;
}

.simple-modal-box {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 20px;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.simple-modal-title {
  font-weight: 600;
  font-size: 15px;
}

.simple-modal-box select,
.simple-modal-box input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
}

.posts-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.topic-rail {
  position: sticky;
  top: 128px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 250px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--bg-soft);
}

/* ============================================
   POSTS
   ============================================ */

.post {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 0;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.post:hover {
  border-color: var(--line-strong);
}

.op-post {
  border-color: var(--amber-border);
  box-shadow: 0 0 0 1px var(--amber-soft);
}

.post-sidebar {
  padding: 20px 16px;
  background: var(--bg-elev);
  border-right: 1px solid var(--line);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.post-avatar-wrap {
  position: relative;
  display: inline-block;
}

.op-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--amber);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  border: 2px solid var(--bg-elev);
}

.post-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.post-username {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--heading-weight);
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1;
}

.post-username:hover {
  color: var(--amber-2);
}

.post-rank {
  font-size: 12px;
  font-weight: 700;
  margin-top: 4px;
}

.post-rank-admin {
  color: var(--role-color-admin);
}

.post-rank-mod {
  color: var(--role-color-moderator);
}

.post-rank-tier {
  color: var(--ink-muted);
  font-weight: 600;
}

/* Top page-transition progress bar (nprogress-style, not a spinner) —
   starts on link click/form submit and never needs to "finish" since the
   real page navigation replaces it. */
#page-loader {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--amber), var(--amber-2));
  z-index: 10000;
  opacity: 0;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

#page-loader.active {
  opacity: 1;
}

/* Generic full-page skeleton shown during slower navigations, alongside
   the progress bar above — see pageloader.html for the show/hide timing. */
#page-skeleton {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  opacity: 0;
  transition: opacity 0.25s ease;
  overflow: hidden;
}

#page-skeleton.show {
  display: block;
}

#page-skeleton.visible {
  opacity: 1;
}

.skel-header {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 64px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
}

.skel-logo {
  width: 130px;
  height: 26px;
  border-radius: 6px;
}

.skel-pill {
  width: 72px;
  height: 30px;
  border-radius: 8px;
}

.skel-body {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.skel-card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skel-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.skel-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.skel-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}

.skel-line {
  height: 11px;
  border-radius: 6px;
}

.skel-pulse {
  background: var(--bg-elev);
  animation: skel-pulse 1.4s ease-in-out infinite;
}

@keyframes skel-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@media (max-width: 640px) {
  .skel-body {
    padding: 20px 16px;
  }
}

/* Small auto-dismissing toast — used instead of alert() for background
   actions (e.g. "doğrulama e-postası gönderildi") that shouldn't block
   or reload the page. */
#toast-stack {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  min-width: 260px;
  max-width: 360px;
  padding: 14px 18px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  color: var(--ink);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.toast-error {
  border-left-color: #f85149;
}

/* Username role/verification colors: gray = unverified, blue = verified
   member, orange = moderator, red = admin. The three role colors are also
   CSS custom properties (see :root below) so an admin can override them
   from /admin/roller without touching this file. */
:root {
  --role-color-member: #58a6ff;
  --role-color-moderator: #f59e0b;
  --role-color-admin: #f85149;
}
.role-gray { color: #9ca3af; }
.role-blue { color: var(--role-color-member); }
.role-orange { color: var(--role-color-moderator); font-weight: 700; }
.role-red { color: var(--role-color-admin); font-weight: 700; }

.user-role {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  padding: 2px 8px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 100px;
}

.user-role.role-mod {
  color: var(--role-color-moderator);
  border-color: color-mix(in srgb, var(--role-color-moderator) 30%, transparent);
  background: color-mix(in srgb, var(--role-color-moderator) 10%, transparent);
}

.user-role.new {
  color: var(--purple);
  border-color: color-mix(in srgb, var(--purple) 30%, transparent);
  background: color-mix(in srgb, var(--purple) 10%, transparent);
}

.user-stats-row {
  display: flex;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 4px;
}

.rep-up {
  color: var(--green);
}

.rep-neutral {
  color: var(--ink-dim);
}

.user-since {
  font-size: 10px;
  color: var(--ink-dim);
  line-height: 1.4;
  margin-top: 6px;
}

/* post content */
.post-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.post-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.post-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--amber-2);
  font-weight: 600;
}

.post-date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
}

.post-head-actions {
  margin-left: auto;
  display: flex;
  gap: 2px;
}

.post-action-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--ink-dim);
  font-size: 14px;
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.post-action-icon:hover {
  background: var(--bg-hover);
  color: var(--ink);
}

/* ============================================
   POLL (anket)
   ============================================ */

.poll-card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
}

.poll-question {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  font-size: 16px;
  color: var(--ink);
  margin-bottom: 14px;
}

.poll-option {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.poll-option:hover {
  border-color: var(--line-strong);
}

.poll-option.readonly {
  cursor: default;
}

.poll-option.picked {
  border-color: var(--amber-border);
}

.poll-option:has(input:checked) {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber);
}

.poll-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.poll-option-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--amber-soft);
  transition: width 0.3s ease;
}

.poll-option-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
}

.poll-option-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.poll-option-pct {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  white-space: nowrap;
}

.poll-meta {
  font-size: 12px;
  color: var(--ink-dim);
  margin-top: 10px;
}

.post-body {
  padding: 20px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  min-width: 0;
}

.post-body::after {
  content: '';
  display: table;
  clear: both;
}

.post-signature {
  margin: 0 20px 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-dim);
  white-space: pre-wrap;
  word-break: break-word;
}

.post-body p {
  margin-bottom: 14px;
}

.post-body p:last-child {
  margin-bottom: 0;
}

/* A genuinely empty <p></p> (pressing Enter for a blank line in the
   editor) has zero content, border and padding — CSS lets its own
   margins collapse straight through it and merge with the paragraphs on
   either side, so the blank line the author typed rendered as nothing at
   all. min-height gives it real height so that collapse-through no
   longer applies. */
.post-body p:empty {
  min-height: 1em;
}

/* The global `* { margin: 0 }` reset (top of this file) left h1-h3 with no
   spacing of their own inside published content — a heading picked from
   the editor's "yazı boyutu" dropdown rendered flush against the text
   right before and after it instead of standing apart. */
.post-body h1,
.post-body h2,
.post-body h3 {
  margin: 24px 0 12px;
  line-height: 1.3;
}

.post-body h1:first-child,
.post-body h2:first-child,
.post-body h3:first-child {
  margin-top: 0;
}

.post-body ul,
.post-body ol {
  margin: 0 0 14px 22px;
  padding: 0;
}

.post-body li {
  margin-bottom: 6px;
  line-height: 1.6;
}

.post-body a {
  color: var(--amber-2);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--amber-border);
  transition: all 0.15s ease;
}

.post-body a:hover {
  text-decoration-color: var(--amber-2);
}

.mention {
  display: inline-block;
  color: var(--amber-2);
  background: var(--amber-soft);
  border: 1px solid var(--amber-border);
  border-radius: 100px;
  padding: 1px 8px;
  font-weight: 600;
  text-decoration: none !important;
}

.mention:hover {
  background: var(--amber-border);
}

.post-body blockquote {
  border-left: 3px solid var(--amber);
  margin: 0 0 14px;
  padding: 4px 0 4px 14px;
  color: var(--ink-muted);
}

.post-body pre {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 0 0 14px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
}

.post-body pre code {
  background: none;
  padding: 0;
}

.post-body code {
  background: var(--bg-elev);
  border-radius: 4px;
  padding: 2px 5px;
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.post-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  margin: 0 0 14px;
}

/* quote block */
.quote-block {
  border-left: 3px solid var(--amber);
  background: var(--bg);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 0 0 16px 0;
  overflow: hidden;
}

.quote-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-elev);
  font-size: 12px;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--line-soft);
}

.quote-head b {
  color: var(--ink);
}

.quote-head a {
  color: inherit;
}

.quote-jump {
  margin-left: auto;
  color: var(--amber-2) !important;
  font-size: 14px;
}

.quote-body {
  padding: 12px 16px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* code block */
.code-block {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: 14px 0;
}

.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line-soft);
}

.code-lang {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--amber-2);
}

.code-copy {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  padding: 3px 8px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.code-copy:hover {
  background: var(--bg-strong);
  color: var(--ink);
}

.code-block pre {
  padding: 14px 16px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink);
}

.code-block pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.post-signature {
  padding: 12px 20px;
  background: var(--bg);
  border-top: 1px dashed var(--line);
  font-size: 12px;
  color: var(--ink-dim);
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.4;
}

.post-signature em {
  color: var(--ink-muted);
  font-size: 13px;
}

.post-signature a {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--amber-2);
}

.post-signature-banner {
  max-height: 60px;
  max-width: 100%;
  object-fit: contain;
  border-radius: 6px;
  margin: 4px 20px 12px;
  display: block;
}

.post-reactions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--bg);
  border-top: 1px solid var(--line);
  gap: 10px;
}

.reactions-left {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.react-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 12px;
  color: var(--ink-muted);
  transition: all 0.15s ease;
}

.react-btn:hover {
  background: var(--bg-elev);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

.react-btn.active {
  background: var(--amber-soft);
  border-color: var(--amber-border);
  color: var(--amber-2);
}

.react-btn b {
  font-family: var(--font-mono);
  font-size: 11px;
  color: inherit;
}

.react-btn.add {
  padding: 4px 10px;
  color: var(--ink-dim);
}

.reactions-right {
  display: flex;
  gap: 4px;
}

.react-action {
  padding: 4px 10px;
  font-size: 12px;
  color: var(--ink-muted);
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
}

.reaction-bar {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.reaction-bar form {
  display: inline-flex;
}

.reaction-palette {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  gap: 4px;
  padding: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 100px;
  box-shadow: var(--shadow-lg);
}

.reaction-palette.open {
  display: flex;
}

.reaction-palette-item {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border-radius: 50%;
  background: none;
  border: none;
  cursor: pointer;
}

.reaction-palette-item:hover,
.reaction-palette-item.active {
  background: var(--bg-hover);
}

.react-action:hover {
  background: var(--bg-hover);
  color: var(--ink);
}

/* ============================================
   COMPOSER
   ============================================ */

.composer {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 14px;
}

.composer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-muted);
}

.composer-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg);
}

.tb-btn {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  font-size: 13px;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tb-btn:hover {
  background: var(--bg-hover);
  color: var(--ink);
}

.tb-sep {
  width: 1px;
  height: 18px;
  background: var(--line);
  margin: 0 6px;
}

.tb-select {
  height: 30px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--ink-muted);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tb-select:hover {
  background: var(--bg-hover);
  color: var(--ink);
}

.editor-emoji-picker {
  display: none;
  flex-direction: column;
  position: fixed;
  z-index: 300;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: 280px;
  max-height: 280px;
  overflow: hidden;
}

.editor-emoji-picker.open {
  display: flex;
}

.editor-emoji-tabs {
  display: flex;
  gap: 2px;
  padding: 6px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  flex-shrink: 0;
}

.editor-emoji-tab {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  cursor: pointer;
}

.editor-emoji-tab:hover {
  background: var(--bg-hover);
}

.editor-emoji-tab.active {
  background: var(--amber-soft);
}

.editor-emoji-grid {
  display: grid;
  grid-template-columns: repeat(6, 36px);
  gap: 2px;
  padding: 8px;
  overflow-y: auto;
}

.editor-emoji-item {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
}

.editor-emoji-item:hover {
  background: var(--bg-hover);
}

.editor-emoji-item img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.tb-right {
  margin-left: auto;
}

.tb-mode {
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: all 0.15s ease;
}

.tb-mode:hover {
  color: var(--ink);
  border-color: var(--line-strong);
}

.composer-text {
  width: 100%;
  min-height: 140px;
  padding: 16px 18px;
  background: var(--bg-soft);
  color: var(--ink);
  border: none;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
  outline: none;
}

.composer-text::placeholder {
  color: var(--ink-dim);
}

.composer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg);
  border-top: 1px solid var(--line-soft);
}

.composer-hints {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-dim);
}

.composer-hints kbd {
  margin-right: 2px;
}

.composer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* ============================================
   RICH EDITOR (TipTap)
   ============================================ */

.rich-editor .composer-toolbar {
  flex-wrap: wrap;
  row-gap: 4px;
}

.rich-editor .tb-btn.active {
  background: var(--bg-hover);
  color: var(--amber);
}

.editor-content .ProseMirror {
  width: 100%;
  min-height: 140px;
  max-height: 70vh;
  padding: 16px 18px;
  background: var(--bg-soft);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  outline: none;
  resize: vertical;
  overflow-y: auto;
}

.editor-content .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  color: var(--ink-dim);
  float: left;
  height: 0;
  pointer-events: none;
}

.editor-content .ProseMirror p {
  margin: 0 0 10px;
}

.editor-content .ProseMirror p:last-child {
  margin-bottom: 0;
}

/* Same empty-paragraph margin-collapse fix as .post-body — while actively
   editing, the browser's own cursor-placement <br> keeps an empty
   paragraph visible, but that <br> isn't part of Tiptap's saved HTML, so
   without this the blank line only ever looked fine here and vanished
   once published. */
.editor-content .ProseMirror p:empty {
  min-height: 1em;
}

/* Same gap the published .post-body view was missing — without this a
   heading picked from the toolbar's "yazı boyutu" dropdown looked fine
   while composing (flush margins everywhere look consistent inline) but
   had nothing to visually compare it against until publish made the
   missing spacing obvious. */
.editor-content .ProseMirror h1,
.editor-content .ProseMirror h2,
.editor-content .ProseMirror h3 {
  margin: 18px 0 8px;
  line-height: 1.3;
}

.editor-content .ProseMirror h1:first-child,
.editor-content .ProseMirror h2:first-child,
.editor-content .ProseMirror h3:first-child {
  margin-top: 0;
}

.editor-content .ProseMirror ul,
.editor-content .ProseMirror ol {
  padding-left: 22px;
  margin: 0 0 10px;
}

.editor-content .ProseMirror blockquote {
  border-left: 3px solid var(--amber);
  margin: 0 0 10px;
  padding: 4px 0 4px 14px;
  color: var(--ink-muted);
}

.editor-content .ProseMirror pre {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 0 0 10px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
}

.editor-content .ProseMirror pre code {
  background: none;
  padding: 0;
}

.editor-content .ProseMirror code {
  background: var(--bg-elev);
  border-radius: 4px;
  padding: 2px 5px;
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.editor-content .ProseMirror img {
  max-width: 100%;
  border-radius: var(--radius-sm);
}

.editor-img-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
  max-width: 100%;
  vertical-align: top;
}

.editor-img-wrap img {
  max-width: 100%;
  border-radius: var(--radius-sm);
  display: block;
}

.editor-img-delete,
.editor-img-resize-handle,
.editor-img-align-row {
  opacity: 0;
  transition: opacity 0.1s ease;
}

.editor-img-wrap:hover .editor-img-delete,
.editor-img-wrap:hover .editor-img-resize-handle,
.editor-img-wrap:hover .editor-img-align-row {
  opacity: 1;
}

.editor-img-align-row {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  gap: 2px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: var(--radius-sm);
  padding: 2px;
}

.editor-img-align-btn {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.editor-img-align-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Float classes — applied to the editor's node-view wrapper (span) while
   editing, and to the sanitized <img> itself in stored/rendered content
   (see util.SanitizeHTML), so both views wrap surrounding text the same
   way. Kept unscoped (not under .post-body) so they also work live in
   .editor-content while composing. */
.img-align-left {
  float: left;
  margin: 4px 16px 12px 0;
}

.img-align-right {
  float: right;
  margin: 4px 0 12px 16px;
}

.img-align-center {
  display: block;
  float: none;
  margin: 12px auto;
}

.editor-img-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.editor-img-delete:hover {
  background: #f85149;
}

.editor-img-resize-handle {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--amber);
  border: 2px solid var(--bg);
  cursor: nwse-resize;
}

.editor-content .ProseMirror a {
  color: var(--amber);
}

/* ============================================
   RELATED TOPICS
   ============================================ */

.related {
  margin-top: 14px;
  padding: 18px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.related-head {
  margin-bottom: 12px;
}

.related-title {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-dim);
}

.related-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.related-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}

.related-item:hover {
  background: var(--bg-elev);
}

.related-body {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.related-cat {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--amber-2);
  padding: 2px 6px;
  background: var(--amber-soft);
  border-radius: 3px;
  flex-shrink: 0;
}

.related-name {
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.related-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  flex-shrink: 0;
}

/* ============================================
   TOPIC RAIL
   ============================================ */

.info-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--ink-muted);
}

.info-row b {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
}

.pick-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pick-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}

.pick-item:hover {
  background: var(--bg-elev);
}

.pick-rank {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--heading-weight);
  color: var(--amber);
  line-height: 1;
  flex-shrink: 0;
  width: 20px;
}

.pick-quote {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 3px;
}

.pick-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
}

/* ============================================
   FOOTER
   ============================================ */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  margin-top: 40px;
}

.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-tag {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-dim);
  font-weight: 400;
}

.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-nav {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-nav a {
  font-size: 13px;
  color: var(--ink-muted);
  transition: color 0.15s ease;
}

.footer-nav a:hover {
  color: var(--amber-2);
}

.footer-font-picker {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-font-picker label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
}

.footer-font-picker select {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  font-size: 12px;
  padding: 5px 8px;
  cursor: pointer;
}

.footer-font-picker select:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}

.footer-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
}

.footer-meta .dot-sep {
  color: var(--ink-faint);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 7px;
  height: 7px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 10%, transparent); }
}

/* ============================================
   SELECTION & SCROLLBAR
   ============================================ */

::selection {
  background: var(--amber);
  color: var(--bg);
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 3px solid var(--bg);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ink-dim);
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* Dead zone between the full desktop topbar/hero and the 768px mobile
   layout: without this, the search box pushes the login/signup buttons
   (or the hero stat box) past the edge of the viewport instead of
   reflowing. Drop the search box first since it's the least essential
   piece, then stack the hero stats under the title before anything
   actually has to overlap. */
@media (max-width: 1150px) {
  .search-wrap {
    display: none;
  }
}

/* Dropping the search box alone wasn't enough — measured live, the full
   logo + nav links + login/signup buttons still overflow before the
   768px mobile layout (which already hides nav-primary) kicks in. Closes
   that last gap instead of guessing at a single "mobile" cutoff — re-
   measure this number whenever a nav item is added/removed, since it's
   literally how much room the current link count needs. */
@media (max-width: 920px) {
  .nav-primary {
    display: none;
  }
}

@media (max-width: 980px) {
  .hero-inner {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .hero-right {
    align-items: flex-start;
    width: 100%;
  }
  .hero-stats {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 1100px) {
  .layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }
  .rail {
    display: none;
  }
  .topic-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .topic-rail {
    display: none;
  }
}

@media (max-width: 768px) {
  .layout,
  .layout-category {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .sidebar {
    position: static;
  }
  .nav-primary {
    display: none;
  }
  /* The 80px-tall logo plus its border/padding ate almost the whole
     phone-width topbar by itself, pushing "giriş yap"/"kayıt ol" (or the
     notification/message icons) past the edge of the screen instead of
     fitting beside it. */
  .topbar-inner {
    height: 64px;
    padding: 0 14px;
    gap: 10px;
  }
  .brand {
    padding-right: 12px;
    margin-right: 0;
    height: 64px;
  }
  .brand-logo {
    height: 34px;
  }
  .topbar-actions {
    gap: 4px;
  }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 32px 16px;
  }
  .cat-main {
    grid-template-columns: 1fr;
  }
  .topic-row {
    grid-template-columns: 1fr;
  }
  .topic-stats {
    justify-content: flex-start;
  }
  .last-reply {
    border-left: none;
    padding-left: 0;
    margin-top: 4px;
  }
  .post {
    grid-template-columns: 1fr;
  }
  .post-sidebar {
    order: 2;
    flex-direction: row;
    padding: 10px 14px;
    border-right: none;
    border-top: 1px solid var(--line);
    text-align: left;
    justify-content: flex-start;
  }
  /* The full author card (topic/post counts, hit score, join date) made
     sense as the first thing in a desktop sidebar column, but stacked
     above the post text on mobile it just pushed the actual message
     down — moved below the post (order: 2) and trimmed to avatar +
     username so it reads like a compact byline instead. */
  .post-user-meta {
    display: none !important; /* inline style="display:flex" on the element otherwise wins */
  }
  .layout > .sidebar {
    order: 2;
  }
  /* The category list's own job on mobile is now the dropdown above the
     feed (home_feed.html) — this sidebar copy would just repeat it right
     below, so only "şu an aktif" (the sidebar's second section) stays. */
  .sidebar .side-section:first-child {
    display: none;
  }
}

@media (max-width: 360px) {
  /* The very smallest phone widths (≤360px, e.g. iPhone SE 1st gen) were
     still a few pixels too tight for "giriş yap" + "kayıt ol" side by
     side even after the shrinking above — trim their padding specifically
     rather than shrinking the logo/icons further for everyone else. */
  .topbar-actions .btn-text {
    padding: 8px 8px;
  }
  .topbar-actions .cta-primary {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  /* .stat's 70px min-width (×3) plus .hero-stats's own padding/gap added
     up to a box wider than the 288px left after the page's side padding
     at this width — nothing left to shrink since min-width is a hard
     floor, so loosen the floor here specifically. */
  .hero-stats {
    padding: 10px 12px;
    gap: 10px;
  }
  .stat {
    min-width: 56px;
  }
  .stat-num {
    font-size: 20px;
  }
}

/* ============================================================
   NEW PAGES - AUTH (login, register)
   ============================================================ */

.auth-body {
  overflow-x: hidden;
  min-height: 100vh;
  background: var(--bg);
}

.auth-body::before {
  background-image:
    radial-gradient(at 0% 0%, rgba(245, 158, 11, 0.08) 0%, transparent 50%),
    radial-gradient(at 100% 100%, rgba(239, 68, 68, 0.06) 0%, transparent 50%);
}

.auth-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

/* Grid items default to min-width:auto, which keeps a 1fr track from ever
   shrinking below its content's min-content size — on forgot-password
   specifically, "sıfırlama bağlantısı gönder" is long enough to want more
   than a 320px-wide track has, so the whole grid (and page) blew out
   sideways by a few px instead of just wrapping the text. Same latent risk
   on every auth page; this is the actual fix, not a per-page patch. */
.auth-left,
.auth-right {
  min-width: 0;
}

.auth-left {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 40px 50px;
  background: var(--bg-soft);
  border-right: 1px solid var(--line);
  overflow: hidden;
}

.auth-left-content {
  position: relative;
  z-index: 2;
  margin: auto 0;
}

.auth-brand {
  display: inline-block;
  align-self: flex-start;
  z-index: 2;
}

.auth-brand img {
  height: 68px;
  width: auto;
  display: block;
}

.auth-quote {
  position: relative;
  z-index: 2;
  max-width: 440px;
  margin-bottom: 40px;
}

.quote-mark-lg {
  font-family: var(--font-display);
  font-size: 96px;
  line-height: 0.6;
  color: var(--amber);
  margin-bottom: 16px;
}

.auth-quote-text {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.2;
  font-weight: var(--heading-weight);
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}

.auth-quote-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* features list on register */
.features-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 440px;
}

.feature {
  display: flex;
  gap: 16px;
}

.feature-num {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--amber);
  line-height: 1;
  flex-shrink: 0;
  width: 40px;
}

.feature div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.feature b {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
}

.feature span {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.5;
}

.auth-stats {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid var(--line);
  max-width: 440px;
}

.auth-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.auth-stat-num {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: var(--heading-weight);
  line-height: 1;
  color: var(--amber);
  letter-spacing: -0.02em;
}

.auth-stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
}

.auth-bg-decoration {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.deco-circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

.deco-circle.c1 {
  width: 400px;
  height: 400px;
  background: rgba(245, 158, 11, 0.15);
  top: -100px;
  right: -100px;
}

.deco-circle.c2 {
  width: 300px;
  height: 300px;
  background: rgba(239, 68, 68, 0.1);
  bottom: -80px;
  left: -80px;
}

.deco-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line-strong), transparent);
}

/* Decorative wireframe "forum card" shapes for the auth-page side panel —
   purely illustrative (skeleton lines, no real content), just to fill the
   empty space with something on-theme. */
.deco-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0.6;
  width: 230px;
}

.deco-card.dc1 {
  top: 12%;
  right: 8%;
  transform: rotate(-4deg);
}

.deco-card.dc2 {
  bottom: 16%;
  right: 18%;
  transform: rotate(3deg);
}

.deco-card-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--dot);
  flex-shrink: 0;
}

.deco-card-lines {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}

.deco-card-lines span {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--line-strong);
}

.deco-card-lines span:first-child {
  width: 85%;
}

.deco-card-lines span:last-child {
  width: 55%;
}

.auth-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px;
}

.auth-box {
  width: 100%;
  max-width: 420px;
  padding: 40px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.auth-head {
  margin-bottom: 32px;
}

.auth-title {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: var(--heading-weight);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 8px;
}

.auth-sub {
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.5;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* data-size="compact" renders Turnstile's narrow, stacked ~150x140 layout
   instead of the wide "checkbox + text + logo" row, which was the one
   that didn't fit an auth card this narrow on mobile — center it rather
   than letting it sit flush left. */
.cf-turnstile {
  display: flex;
  justify-content: center;
}

.cf-turnstile iframe {
  max-width: 100%;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field label {
  font-size: 12px;
  color: var(--ink-muted);
  font-weight: 500;
}

.form-field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.forgot-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.forgot-link:hover {
  color: var(--amber-2);
}

.label-hint {
  color: var(--ink-dim);
  font-weight: 400;
}

.label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.label-link {
  font-size: 11px;
  color: var(--amber-2);
  text-decoration: none;
}

.label-link:hover {
  color: var(--amber);
}

.form-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  transition: all 0.15s ease;
}

.form-input::placeholder {
  color: var(--ink-dim);
}

.form-input:focus {
  border-color: var(--amber);
  background: var(--bg-elev);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

.form-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.field-hint {
  font-size: 11px;
  color: var(--ink-dim);
  line-height: 1.4;
}

.field-hint b {
  color: var(--ink-muted);
}

.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.input-wrap .form-input {
  padding-right: 70px;
}

.input-action {
  position: absolute;
  right: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.input-action:hover {
  background: var(--bg-hover);
  color: var(--ink);
}

.input-action.check-availability {
  color: var(--green);
}

/* password strength */
.strength-bar {
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}

.strength-fill {
  height: 100%;
  background: linear-gradient(to right, var(--red), var(--amber), var(--green));
  border-radius: 2px;
  transition: width 0.2s ease;
}

.strength-text {
  color: var(--amber);
}

/* checkbox */
.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-muted);
  user-select: none;
}

.check-row input {
  display: none;
}

.check-box {
  width: 18px;
  height: 18px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  flex-shrink: 0;
  position: relative;
  transition: all 0.15s ease;
}

.check-row input:checked ~ .check-box {
  background: var(--amber);
  border-color: var(--amber);
}

.check-row input:checked ~ .check-box::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--bg);
  font-size: 12px;
  font-weight: 700;
}

.check-row a {
  color: var(--amber-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.terms-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-muted);
  cursor: pointer;
}

.terms-check input {
  margin-top: 2px;
  accent-color: var(--amber);
  cursor: pointer;
  flex-shrink: 0;
}

.terms-check a {
  color: var(--amber-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.auth-submit {
  padding: 12px 24px;
  background: var(--amber);
  color: #1a0f00;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 2px 12px rgba(245, 158, 11, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}

.auth-submit:hover {
  background: var(--amber-2);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 6px 20px rgba(245, 158, 11, 0.35);
}

.auth-submit .arrow {
  transition: transform 0.15s ease;
}

.auth-submit:hover .arrow {
  transform: translateX(3px);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.auth-divider span {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-dim);
}

.auth-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 24px;
  background: var(--bg-elev);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.auth-google-btn:hover {
  background: var(--bg-hover);
  border-color: var(--line-soft);
}

.social-row {
  display: flex;
  gap: 8px;
}

.social-btn {
  flex: 1;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.social-btn:hover {
  background: var(--bg-hover);
  border-color: var(--line-strong);
}

.social-icon {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--amber-2);
}

.auth-footer {
  margin-top: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-muted);
}

.auth-footer a {
  color: var(--amber-2);
  font-weight: 500;
}

.auth-footer a:hover {
  color: var(--amber);
}

.auth-legal {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
}

.auth-legal a {
  color: var(--ink-muted);
}

.auth-legal a:hover {
  color: var(--amber-2);
}

@media (max-width: 900px) {
  .auth-wrap {
    grid-template-columns: 1fr;
  }
  /* The feature list + live stats + decoration panel is sales copy, not
     the thing someone opening this page on a phone is here for — it was
     stacking above the form and pushing it (and the actual login/signup
     fields) well below the fold. Collapse it to a slim logo bar instead
     and let the form show first. */
  .auth-left {
    min-height: auto;
    padding: 20px 24px;
  }
  .auth-left-content,
  .auth-bg-decoration {
    display: none;
  }
  .auth-brand img {
    height: 36px;
  }
  /* .auth-right centers its content vertically, which looked fine split
     50/50 with the old feature panel, but now that .auth-left is just a
     slim bar, .auth-right inherits the rest of a tall phone screen's
     height and centering within THAT pushes the form down behind a big
     empty gap instead of right under the logo. */
  .auth-right {
    justify-content: flex-start;
    padding-top: 24px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .auth-box {
    padding: 24px 20px;
  }
  /* "sıfırlama bağlantısı gönder →" is longer than the login/signup button
     text and wrapped to two lines inside the narrowed mobile auth card. */
  .auth-submit {
    font-size: 13px;
    padding: 12px 14px;
    white-space: nowrap;
  }
}

/* ============================================================
   PAGE HERO (shared across many pages)
   ============================================================ */

.page-hero {
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(at 20% 0%, rgba(245, 158, 11, 0.04), transparent 60%),
    var(--bg);
}

.page-hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 24px 36px;
}

.page-title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: var(--heading-weight);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 6px 0 10px;
}

.page-sub {
  font-size: 15px;
  color: var(--ink-muted);
  line-height: 1.5;
  max-width: 640px;
}

/* Site switch — toggles between ForumHit's general forum and the webmaster
   vertical on webmasterturk.net (see internal/middleware/site.go). */
.site-switch {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 999px;
  flex-shrink: 0;
}

.site-switch-opt {
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
  text-decoration: none;
  border-radius: 999px;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}

.site-switch-opt:hover {
  color: var(--ink);
}

.site-switch-opt.active {
  background: var(--amber);
  color: #0a0a0b;
  pointer-events: none;
}

.site-switch-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: #0a0a0b;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.site-switch-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.site-switch-overlay img {
  width: min(70%, 380px);
  border-radius: 16px;
}

.site-switch-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--amber);
  animation: site-switch-spin 0.8s linear infinite;
}

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

.site-switch-overlay-text {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}

/* ============================================================
   PROFILE PAGE
   ============================================================ */

.profile-hero {
  position: relative;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.profile-cover {
  height: 200px;
  background:
    radial-gradient(at 20% 50%, rgba(245, 158, 11, 0.25), transparent 50%),
    radial-gradient(at 80% 50%, rgba(239, 68, 68, 0.2), transparent 50%),
    linear-gradient(135deg, #2a1a0a, #0f0a14);
  position: relative;
  overflow: hidden;
}

.profile-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, var(--bg));
}

.cover-upload-row {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  gap: 8px;
}

.cover-upload-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.cover-upload-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}

.cover-upload-btn input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.cover-remove-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}

.cover-remove-btn:hover {
  background: rgba(239, 68, 68, 0.6);
}

.profile-hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px 0;
}

.profile-main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: flex-end;
  margin-top: -60px;
  position: relative;
  z-index: 2;
  padding-bottom: 20px;
}

.profile-avatar-wrap {
  position: relative;
}

.profile-avatar {
  width: 140px;
  height: 140px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border: 4px solid var(--bg);
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
}

.profile-avatar.sm {
  width: 72px;
  height: 72px;
  border-width: 2px;
}

.online-indicator {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  background: var(--green);
  border: 3px solid var(--bg);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

.profile-info {
  padding-bottom: 12px;
}

.profile-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.profile-name {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 42px);
  font-weight: var(--heading-weight);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.profile-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink-muted);
}

.profile-badge.gold {
  background: var(--amber-soft);
  border-color: var(--amber-border);
  color: var(--amber-2);
}

.profile-tagline {
  font-size: 14px;
  color: var(--ink-muted);
  margin-bottom: 10px;
}

.profile-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: var(--ink-muted);
}

.profile-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.profile-meta-item a {
  color: var(--amber-2);
}

.profile-tier-badge {
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 11px;
}

.status-online {
  color: var(--green);
  font-weight: 500;
}

.profile-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
}

.cta-ghost.icon-only {
  padding: 9px 12px;
}

.profile-stats {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
}

.p-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 80px;
}

.p-stat-num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--heading-weight);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.p-stat-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
}

.profile-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 0;
  overflow-x: auto;
}

.profile-tab {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.profile-tab:hover {
  background: var(--bg-hover);
  color: var(--ink);
}

.profile-tab.active {
  background: var(--ink);
  color: var(--bg);
}

.tab-count {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 6px;
  background: rgba(255,255,255,0.15);
  border-radius: 10px;
}

.profile-tab:not(.active) .tab-count {
  background: var(--bg-elev);
  color: var(--ink-dim);
}

.profile-layout {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 24px 60px;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.profile-side {
  position: sticky;
  top: 128px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.profile-bio {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin-bottom: 14px;
}

.profile-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  color: var(--ink-muted);
}

.profile-detail b {
  color: var(--ink);
  font-weight: 500;
}

/* badges grid */
.badges-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
  cursor: help;
}

.badge-item:hover {
  border-color: var(--amber-border);
  transform: translateY(-2px);
}

.badge-item.gold {
  background: var(--amber-soft);
  border-color: var(--amber-border);
}

.badge-item.locked {
  opacity: 0.4;
}

.badge-icon {
  font-size: 20px;
}

.badge-item span {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
}

/* activity bars */
.activity-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.activity-bar {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-muted);
}

.bar-label span:last-child {
  font-family: var(--font-mono);
  color: var(--ink-dim);
  font-size: 11px;
}

.bar-track {
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(to right, var(--amber), var(--amber-2));
  border-radius: 3px;
}

/* profile feed */
.profile-feed {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.activity-card {
  padding: 18px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.activity-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 12px;
}

.activity-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.activity-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--amber-2);
  margin-left: 8px;
}

.activity-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  text-transform: uppercase;
}

.legend-squares {
  display: flex;
  gap: 2px;
}

.legend-sq {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.level-0 { background: var(--bg); border: 1px solid var(--line); }
.level-1 { background: rgba(245, 158, 11, 0.25); }
.level-2 { background: rgba(245, 158, 11, 0.5); }
.level-3 { background: rgba(245, 158, 11, 0.75); }
.level-4 { background: var(--amber); }

.heatmap {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.hm-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hm-sq {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  flex-shrink: 0;
}

.hm-sq.level-0 { background: var(--bg); border: 1px solid var(--line); }

.section-divider .divider-link {
  font-family: var(--font-body);
  color: var(--amber-2);
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 400;
}

/* profile post */
.profile-post {
  padding: 18px 20px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: all 0.15s ease;
  cursor: pointer;
}

.profile-post:hover {
  border-color: var(--line-strong);
  background: var(--bg-elev);
}

.pp-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 8px;
}

.pp-topic {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pp-topic:hover {
  color: var(--amber-2);
}

.pp-cat {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--pill) 15%, transparent);
  color: var(--pill);
  border: 1px solid color-mix(in srgb, var(--pill) 30%, transparent);
  border-radius: 100px;
}

.pp-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
  flex-shrink: 0;
}

.pp-body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin-bottom: 10px;
}

.pp-foot {
  display: flex;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
}

@media (max-width: 900px) {
  .profile-layout {
    grid-template-columns: 1fr;
  }
  .profile-side {
    position: static;
  }
  .profile-main {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .profile-meta-row {
    justify-content: center;
  }
  .profile-stats {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ============================================================
   NEW TOPIC (composer)
   ============================================================ */

.compose-layout {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 24px 60px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px;
  align-items: start;
}

.compose-main {
  min-width: 0;
}

.compose-card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.compose-section {
  padding: 24px;
  border-bottom: 1px solid var(--line);
}

.compose-section:last-of-type {
  border-bottom: none;
}

.compose-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.step-num {
  width: 22px;
  height: 22px;
  background: var(--amber);
  color: var(--bg);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.optional {
  font-weight: 400;
  color: var(--ink-dim);
  font-size: 12px;
}

.char-counter {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
}

.label-right {
  margin-left: auto;
  display: flex;
  gap: 4px;
}

.tab-switch {
  padding: 4px 12px;
  font-size: 11px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.tab-switch.active {
  background: var(--bg-elev);
  color: var(--ink);
  border-color: var(--line-strong);
}

/* cat picker */
.cat-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.cat-pick-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.cat-pick-item input { display: none; }

.cat-pick-item:hover {
  border-color: var(--line-strong);
  background: var(--bg-elev);
}

.cat-pick-item.active {
  border-color: var(--amber);
  background: var(--amber-soft);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

.cat-pick-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cat-pick-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cat-pick-body b {
  font-size: 13px;
  color: var(--ink);
}

.cat-pick-body span {
  font-size: 11px;
  color: var(--ink-muted);
}

/* title */
.title-input {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--heading-weight);
  letter-spacing: -0.01em;
  outline: none;
  transition: all 0.15s ease;
}

.title-input::placeholder {
  color: var(--ink-dim);
  font-style: italic;
}

.title-input:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

.title-hints {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.hint-pill {
  font-size: 11px;
  padding: 4px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink-muted);
}

/* prefix picker */
.prefix-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.pre-label {
  font-size: 12px;
  color: var(--ink-dim);
  margin-right: 4px;
}

.pre-chip {
  cursor: pointer;
  user-select: none;
}

.pre-chip input { display: none; }

.pre-chip span {
  display: inline-block;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: transparent;
  color: var(--pfx);
  border: 1px solid color-mix(in srgb, var(--pfx) 30%, transparent);
  border-radius: 4px;
  transition: all 0.15s ease;
}

.pre-chip:hover span {
  background: color-mix(in srgb, var(--pfx) 10%, transparent);
}

.pre-chip input:checked + span {
  background: color-mix(in srgb, var(--pfx) 20%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pfx) 30%, transparent);
}

/* tags input */
.tags-input-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  min-height: 42px;
}

.tag-chip-added {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 10px;
  background: var(--amber-soft);
  border: 1px solid var(--amber-border);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--amber-2);
}

.tag-chip-added button {
  color: var(--amber-2);
  font-size: 14px;
  padding: 0 4px;
  opacity: 0.6;
}

.tag-chip-added button:hover {
  opacity: 1;
}

.tags-input {
  flex: 1;
  min-width: 120px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 4px;
}

.tags-input::placeholder {
  color: var(--ink-dim);
}

/* big composer */
.big-toolbar {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.big-composer {
  width: 100%;
  min-height: 280px;
  padding: 16px 18px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  resize: vertical;
  outline: none;
}

.big-composer::placeholder {
  color: var(--ink-dim);
  font-style: italic;
}

.big-composer:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

/* options */
.options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.option-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.option-row:hover {
  background: var(--bg-elev);
}

.option-row input { display: none; }

.option-row .check-box {
  margin-top: 1px;
}

.option-row input:checked ~ .check-box {
  background: var(--amber);
  border-color: var(--amber);
}

.option-row input:checked ~ .check-box::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--bg);
  font-size: 12px;
  font-weight: 700;
}

.option-row div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.option-row b {
  font-size: 13px;
  color: var(--ink);
}

.option-row span {
  font-size: 11px;
  color: var(--ink-muted);
  line-height: 1.4;
}

/* submit bar */
.compose-submit-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: var(--bg-elev);
  border-top: 1px solid var(--line);
  gap: 16px;
  flex-wrap: wrap;
}

.submit-info {
  font-size: 12px;
  color: var(--ink-muted);
}

.submit-info b {
  color: var(--amber-2);
}

.submit-actions {
  display: flex;
  gap: 8px;
}

/* sidebar tips */
.compose-side {
  position: sticky;
  top: 128px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tips-card {
  padding: 20px;
}

.tips-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tip {
  display: flex;
  gap: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-muted);
}

.tip-num {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--amber);
  line-height: 1;
  flex-shrink: 0;
  width: 26px;
}

.tip b {
  color: var(--ink);
}

.warning-card {
  border-color: color-mix(in srgb, var(--amber) 30%, transparent);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), var(--bg-soft));
}

.warning-head {
  font-size: 12px;
  font-weight: 600;
  color: var(--amber-2);
  margin-bottom: 8px;
}

.warning-text {
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.6;
}

.warning-text a {
  color: var(--amber-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.draft-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.draft-item {
  display: block;
  padding: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
}

.draft-item:hover {
  border-color: var(--line-strong);
  background: var(--bg-elev);
}

.draft-title {
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 2px;
}

.draft-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
}

@media (max-width: 1000px) {
  .compose-layout {
    grid-template-columns: 1fr;
  }
  .compose-side {
    position: static;
  }
}

/* ============================================================
   MESSAGES PAGE
   ============================================================ */

.msg-layout {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  height: calc(100vh - 108px);
  gap: 0;
}

.msg-list {
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.msg-list-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px 12px;
}

.msg-list-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--heading-weight);
  letter-spacing: -0.02em;
}

.msg-search {
  position: relative;
  padding: 0 20px 10px;
}

.msg-search input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 13px;
  font-family: var(--font-body);
  outline: none;
}

.msg-search .search-icon {
  position: absolute;
  left: 32px;
  top: 9px;
  color: var(--ink-dim);
}

.msg-filter {
  display: flex;
  gap: 4px;
  padding: 0 16px 12px;
  border-bottom: 1px solid var(--line);
}

.msg-f {
  padding: 5px 10px;
  font-size: 11px;
  color: var(--ink-muted);
  border-radius: 100px;
  font-weight: 500;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.msg-f:hover {
  background: var(--bg-hover);
  color: var(--ink);
}

.msg-f.active {
  background: var(--ink);
  color: var(--bg);
}

.msg-f span {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 0 5px;
  background: var(--bg-elev);
  border-radius: 8px;
  color: var(--ink-dim);
}

.msg-f.active span {
  background: rgba(255,255,255,0.2);
  color: inherit;
}

.conv-list {
  flex: 1;
  overflow-y: auto;
}

.conv-item {
  display: flex;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-soft);
  transition: background 0.1s ease;
}

.conv-item:hover {
  background: var(--bg-hover);
}

.conv-item.active {
  background: var(--bg-elev);
  box-shadow: inset 3px 0 0 var(--amber);
}

.conv-item.unread .conv-name {
  color: var(--ink);
}

.conv-item.unread .conv-preview {
  color: var(--ink);
  font-weight: 500;
}

.conv-avatar {
  position: relative;
  flex-shrink: 0;
}

.conv-online {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  background: var(--green);
  border: 2px solid var(--bg);
  border-radius: 50%;
}

.conv-body {
  flex: 1;
  min-width: 0;
}

.conv-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}

.conv-name {
  font-size: 13px;
  color: var(--ink-muted);
}

.conv-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  flex-shrink: 0;
}

.conv-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.conv-preview {
  font-size: 12px;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conv-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  background: var(--amber);
  color: var(--bg);
  border-radius: 10px;
  flex-shrink: 0;
}

/* chat */
.msg-chat {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}

.chat-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chat-user > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--heading-weight);
  color: var(--ink);
}

.chat-status {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--green);
}

.chat-actions {
  display: flex;
  gap: 4px;
}

.chat-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-date-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
}

.chat-date-sep::before,
.chat-date-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.chat-date-sep span {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-dim);
}

.msg-bubble {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 70%;
}

.msg-bubble.received {
  align-self: flex-start;
}

.msg-bubble.sent {
  align-self: flex-end;
  align-items: flex-end;
}

.bubble-body {
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
  border-radius: var(--radius);
}

.msg-bubble.received .bubble-body {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
  color: var(--ink);
}

.msg-bubble.sent .bubble-body {
  background: var(--amber);
  color: #1a0f00;
  border-bottom-right-radius: 4px;
}

.bubble-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  padding: 0 4px;
}

.typing-indicator {
  align-self: flex-start;
  display: flex;
  gap: 3px;
  padding: 12px 16px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  border-bottom-left-radius: 4px;
}

.typing-dot {
  width: 6px;
  height: 6px;
  background: var(--ink-dim);
  border-radius: 50%;
  animation: typing 1.4s infinite;
}

.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.chat-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
}

.chat-attach,
.chat-emoji {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink-muted);
  font-size: 16px;
  transition: all 0.15s ease;
}

.chat-attach:hover,
.chat-emoji:hover {
  background: var(--bg-hover);
  color: var(--ink);
}

.chat-input {
  flex: 1;
  padding: 10px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
}

.chat-input:focus {
  border-color: var(--amber);
}

.chat-send {
  padding: 10px 20px;
  background: var(--amber);
  color: #1a0f00;
  font-size: 13px;
  font-weight: 600;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.chat-send:hover {
  background: var(--amber-2);
}

.icon-btn.active {
  color: var(--amber);
  background: var(--amber-soft);
}

@media (max-width: 900px) {
  .msg-layout {
    grid-template-columns: 1fr;
    padding: 0;
  }
  .msg-list {
    display: none;
  }
}

/* ============================================================
   NOTIFICATIONS PAGE
   ============================================================ */

.notif-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.notif-actions {
  display: flex;
  gap: 8px;
}

.notif-layout {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 24px 60px;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.notif-feed {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.notif-group-head {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-dim);
  padding: 14px 4px 6px;
  margin-top: 8px;
  border-bottom: 1px solid var(--line-soft);
}

.notif-group-head:first-child {
  margin-top: 0;
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: all 0.15s ease;
  position: relative;
}

.notif-item:hover {
  border-color: var(--line-strong);
  background: var(--bg-elev);
}

.notif-item.unread {
  background: linear-gradient(to right, var(--amber-soft), var(--bg-soft) 40%);
  border-color: var(--amber-border);
}

.notif-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  background: var(--bg);
  border: 1px solid var(--line);
}

.notif-icon.reply { background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.3); }
.notif-icon.heart { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); color: var(--red); }
.notif-icon.mention { background: var(--amber-soft); border-color: var(--amber-border); color: var(--amber-2); font-weight: 700; font-family: var(--font-mono); }
.notif-icon.follow { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.3); }
.notif-icon.badge-icn { background: var(--amber-soft); border-color: var(--amber-border); }
.notif-icon.system { background: rgba(167, 139, 250, 0.1); border-color: rgba(167, 139, 250, 0.3); color: var(--purple); }

.notif-body {
  flex: 1;
  min-width: 0;
}

.notif-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin-bottom: 4px;
}

.notif-text b {
  color: var(--ink);
  font-weight: 600;
}

.notif-text a {
  color: var(--amber-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.notif-text em {
  color: var(--ink-muted);
  font-size: 12px;
  display: block;
  margin-top: 4px;
  padding: 6px 10px;
  background: var(--bg);
  border-left: 2px solid var(--line);
  border-radius: 0 4px 4px 0;
  font-family: var(--font-display);
}

.notif-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
}

.notif-dot {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: var(--amber);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--amber-soft);
}

.notif-inline-btn {
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  background: var(--amber);
  color: var(--bg);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.notif-inline-btn:hover {
  background: var(--amber-2);
}

@media (max-width: 900px) {
  .notif-layout {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   MEMBERS PAGE
   ============================================================ */

.member-filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  gap: 16px;
  flex-wrap: wrap;
}

.members-layout {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 24px 60px;
}

.members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

/* --- Membership tier cards (üyelik paketlerim / satici-uyelikleri) --- */

.tier-section-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--heading-weight);
  color: var(--ink);
  margin: 24px 0 14px;
}

.tier-section-title:first-child {
  margin-top: 0;
}

.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.tier-card {
  display: flex;
  flex-direction: column;
  padding: 22px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tier-color) 28%, var(--bg-soft)), var(--bg-soft) 70%);
  border: 1px solid color-mix(in srgb, var(--tier-color) 45%, var(--line));
  border-top: 3px solid var(--tier-color);
  border-radius: var(--radius);
}

.tier-card-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--heading-weight);
  color: var(--ink);
}

.tier-card-desc {
  font-size: 13px;
  color: var(--ink-muted);
  margin-top: 6px;
  line-height: 1.5;
}

.tier-card-features {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13px;
  color: var(--ink);
}

.tier-card-features li {
  color: var(--ink-muted);
}

.tier-card-price-box {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tier-card-price-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-muted);
}

.tier-card-price-row b {
  color: var(--ink);
  font-size: 15px;
}

.duration-option {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--bg-soft);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.duration-option:hover {
  border-color: var(--ink-dim);
}

.duration-option:has(input:checked) {
  border-color: var(--amber);
  background: var(--amber-soft);
}

.duration-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.duration-option-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.duration-option-price {
  font-size: 13px;
  color: var(--ink-muted);
}

.duration-option-price s {
  color: var(--ink-dim);
  font-size: 11px;
}

.duration-option-price b {
  color: var(--ink);
}

.tier-card-price-was {
  color: var(--ink-dim);
  font-size: 12px;
  font-weight: 400;
}

.tier-card-cta {
  margin-top: 18px;
  display: inline-flex;
  justify-content: center;
}

.tier-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.tier-card-tag {
  display: inline-block;
  padding: 3px 10px;
  background: color-mix(in srgb, var(--tier-color) 16%, transparent);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--tier-color) 35%, transparent);
  border-radius: 100px;
  font-size: 11px;
}

.tier-card-tag.tier-card-tag-category {
  font-weight: 600;
}

.tier-card-owned {
  margin-top: 18px;
  display: inline-flex;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(63, 185, 80, 0.1);
  border: 1px solid rgba(63, 185, 80, 0.3);
  color: #3fb950;
  font-size: 13px;
  font-weight: 600;
}

.member-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 16px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
  transition: all 0.2s ease;
}

.member-card:hover {
  border-color: var(--line-strong);
  background: var(--bg-elev);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.member-card.featured {
  background: linear-gradient(135deg, var(--amber-soft), var(--bg-soft));
  border-color: var(--amber-border);
}

.member-top {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.member-avatar-wrap {
  position: relative;
}

.member-avatar-wrap .online-indicator {
  bottom: 0;
  right: 0;
  width: 14px;
  height: 14px;
  border-width: 2px;
}

.member-role {
  position: absolute;
  top: -6px;
  right: -10px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border-radius: 100px;
  white-space: nowrap;
}

.member-role.role-founder {
  background: var(--amber);
  color: var(--bg);
}

.member-role.role-admin {
  background: var(--role-color-admin);
  color: #fff;
}

.member-role.role-mod {
  background: var(--role-color-moderator);
  color: #fff;
}

.member-role.role-new {
  background: var(--purple);
  color: #fff;
}

.member-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--heading-weight);
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-top: 4px;
}

.member-title {
  font-size: 11px;
  color: var(--ink-muted);
}

.member-stats {
  display: flex;
  gap: 14px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  width: 100%;
  justify-content: center;
}

.member-stats > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  align-items: center;
}

.member-stats b {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  font-weight: 600;
}

.member-stats span {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
}

/* ============================================================
   SEARCH PAGE
   ============================================================ */

.search-big-wrap {
  position: relative;
  max-width: 640px;
  margin-bottom: 14px;
}

.search-icon-big {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-dim);
  font-size: 20px;
}

.search-big {
  width: 100%;
  padding: 14px 20px 14px 48px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 20px;
  outline: none;
  transition: all 0.15s ease;
}

.search-big:focus {
  border-color: var(--amber);
  background: var(--bg-elev);
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.1);
}

.search-layout {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 24px 60px;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.search-result {
  display: flex;
  gap: 16px;
  padding: 18px 20px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: all 0.15s ease;
}

.search-result:hover {
  border-color: var(--line-strong);
  background: var(--bg-elev);
}

.result-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 50px;
  padding-top: 4px;
}

.type-icon {
  font-size: 18px;
}

.result-type span:last-child {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
}

.result-body {
  flex: 1;
  min-width: 0;
}

.result-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.result-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--heading-weight);
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.result-title:hover {
  color: var(--amber-2);
}

.result-title mark {
  background: var(--amber-soft);
  color: var(--amber-2);
  padding: 0 3px;
  border-radius: 2px;
  font-style: normal;
}

.result-snippet {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin-bottom: 8px;
}

.result-snippet mark {
  background: var(--amber-soft);
  color: var(--amber-2);
  padding: 0 3px;
  border-radius: 2px;
}

.result-cat {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  background: color-mix(in srgb, var(--pill) 15%, transparent);
  color: var(--pill);
  border: 1px solid color-mix(in srgb, var(--pill) 30%, transparent);
  border-radius: 100px;
}

/* Marks which site a followed-topics card belongs to — only meaningful
   since follows are cross-site (one shared "takip ettiklerim" list for
   both forumhit.com and webmasterturk.net). Replaces the generic 💬 icon
   with a letter badge (F / W) so the site is obvious at a glance. */
.result-site-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--amber);
  color: #0a0a0b;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
}

.result-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--ink-dim);
}

.result-tag-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dim);
}

.user-type {
  color: var(--purple);
}

.result-user-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.result-user-name {
  display: block;
  margin-bottom: 4px;
}

/* ============================================================
   SETTINGS PAGE
   ============================================================ */

.settings-layout {
  max-width: 1400px;
  margin: 0 auto;
  padding: 32px 24px 60px;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.settings-nav {
  position: sticky;
  top: 128px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.set-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
}

.set-nav-item:hover {
  background: var(--bg-hover);
  color: var(--ink);
}

.set-nav-item.active {
  background: var(--bg-elev);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}

.set-nav-item.danger {
  color: var(--red);
}

.set-nav-item.danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--red);
}

.set-icon {
  font-size: 15px;
  width: 20px;
  text-align: center;
}

.set-nav-divider {
  height: 1px;
  background: var(--line);
  margin: 8px 0;
}

.settings-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.set-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}

.set-tab {
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-bottom: -1px;
}

.set-tab:hover {
  color: var(--ink);
}

.set-tab.active {
  color: var(--amber);
  border-bottom-color: var(--amber);
}

.set-reveal-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.set-reveal-body {
  display: none;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.set-reveal[data-open] .set-reveal-body {
  display: block;
}

.set-section {
  padding: 28px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.set-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--heading-weight);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 4px;
}

.set-desc {
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 24px;
}

.set-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  padding: 16px 0;
  border-top: 1px solid var(--line-soft);
  align-items: center;
}

.set-row:first-of-type {
  border-top: none;
  padding-top: 0;
}

.set-field-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.set-field-label label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.set-field-label span {
  font-size: 11px;
  color: var(--ink-muted);
  line-height: 1.4;
}

.avatar-row {
  align-items: center;
}

.avatar-edit {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.avatar-edit input[type="file"] {
  /* The browser's native file-input button has an intrinsic width (the
     "Choose File / no file chosen" text) that doesn't shrink in a flex
     row by default — on a narrow phone it was the one thing forcing the
     whole settings page wider than the viewport. */
  max-width: 100%;
  min-width: 0;
}

.avatar-edit-actions {
  display: flex;
  gap: 8px;
}

.field-with-btn {
  display: flex;
  gap: 10px;
  align-items: center;
}

.field-with-btn .form-input {
  flex: 1;
}

.set-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

/* ============================================================
   SETTINGS — action rows (hesap & güvenlik) + 2FA method cards
   ============================================================ */

.set-action-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--line-soft);
}

.set-action-row:first-of-type {
  border-top: none;
  padding-top: 0;
}

.set-action-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.set-action-main {
  flex: 1;
  min-width: 0;
}

.set-action-main label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.set-action-main span {
  display: block;
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 2px;
}

.tfa-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.tfa-method-card {
  position: relative;
  padding: 20px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tfa-method-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--amber-soft);
  color: var(--amber);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.tfa-method-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--amber);
  background: var(--amber-soft);
  border: 1px solid var(--amber-border);
  border-radius: 4px;
  padding: 3px 7px;
}

.tfa-method-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.tfa-method-desc {
  font-size: 12.5px;
  color: var(--ink-muted);
  line-height: 1.5;
  flex: 1;
}

.tfa-status-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: linear-gradient(to right, rgba(63, 185, 80, 0.08), transparent);
  border: 1px solid rgba(63, 185, 80, 0.25);
  border-radius: var(--radius);
  margin-bottom: 20px;
}

.tfa-status-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(63, 185, 80, 0.15);
  color: #3fb950;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.tfa-status-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.tfa-status-sub {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 2px;
}

/* ============================================================
   MODALS (password / email / 2FA flows)
   ============================================================ */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(3, 6, 10, 0.7);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 400;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.open {
  display: flex;
}

.modal-box {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 28px;
}

.modal-box.modal-wide {
  max-width: 640px;
}

/* ============================================================
   ONBOARDING MODAL (first-time "introduce yourself" walkthrough)
   ============================================================ */

.onboard-box {
  padding: 32px 32px 24px;
  text-align: center;
}

.onboard-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}

.onboard-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.onboard-dot.active {
  background: var(--amber);
  transform: scale(1.3);
}

.onboard-steps {
  position: relative;
  min-height: 190px;
}

.onboard-step {
  display: none;
  animation: onboardFadeIn 0.3s ease;
}

.onboard-step.active {
  display: block;
}

@keyframes onboardFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.onboard-emoji {
  font-size: 44px;
  line-height: 1;
  margin-bottom: 16px;
}

.onboard-box .modal-title {
  font-size: 22px;
  margin-bottom: 12px;
}

.onboard-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-muted);
  max-width: 440px;
  margin: 0 auto;
}

.onboard-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.onboard-actions-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 560px) {
  .onboard-box {
    padding: 28px 20px 20px;
  }
  .onboard-emoji {
    font-size: 36px;
  }
  .onboard-box .modal-title {
    font-size: 19px;
  }
  .onboard-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 14px;
  }
  .onboard-actions-right {
    justify-content: stretch;
  }
  .onboard-actions-right .cta-primary,
  .onboard-actions-right .cta-ghost {
    flex: 1;
    justify-content: center;
  }
  #onboardSkip {
    text-align: center;
  }
}

.legal-doc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-muted);
}

.legal-doc h3 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 20px 0 6px;
}

.legal-doc h3:first-of-type {
  margin-top: 0;
}

.legal-doc a {
  color: var(--amber-2);
}

.legal-doc ul {
  margin: 4px 0;
  padding-left: 20px;
}

.legal-updated {
  font-size: 11px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.legal-disclaimer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: 11px;
  font-style: italic;
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--ink-dim);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  background: var(--bg-elev);
  color: var(--ink);
}

.modal-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--amber-soft);
  color: var(--amber);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 14px;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: var(--heading-weight);
  color: var(--ink);
  margin-bottom: 6px;
  padding-right: 24px;
}

.modal-sub {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.5;
  margin-bottom: 20px;
}

.modal-step {
  display: none;
}

.modal-step.active {
  display: block;
}

.modal-steps-indicator {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}

.modal-steps-indicator span {
  height: 3px;
  flex: 1;
  border-radius: 2px;
  background: var(--line);
}

.modal-steps-indicator span.done,
.modal-steps-indicator span.current {
  background: var(--amber);
}

.modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.modal-field label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-muted);
}

.modal-error {
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  font-size: 12.5px;
  display: none;
}

.modal-error.show {
  display: block;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

.modal-actions .cta-primary {
  flex: 1;
  justify-content: center;
}

.modal-hint-box {
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--ink-muted);
  margin-bottom: 16px;
  line-height: 1.5;
}

.code-input {
  font-family: var(--font-mono);
  font-size: 22px;
  letter-spacing: 0.3em;
  text-align: center;
}

.qr-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.qr-wrap img {
  width: 160px;
  height: 160px;
  border-radius: 10px;
  background: #fff;
  padding: 8px;
}

.secret-box {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.secret-box code {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  word-break: break-all;
}

.backup-codes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 16px;
}

/* toggle */
.toggle {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 22px;
  cursor: pointer;
}

.toggle input { display: none; }

.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--line-strong);
  border-radius: 100px;
  transition: background 0.2s ease;
}

.toggle-track::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: var(--ink);
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.toggle input:checked + .toggle-track {
  background: var(--amber);
}

.toggle input:checked + .toggle-track::before {
  transform: translateX(18px);
  background: var(--bg);
}

.toggle.sm {
  width: 32px;
  height: 18px;
}

.toggle.sm .toggle-track::before {
  width: 12px;
  height: 12px;
  top: 3px;
  left: 3px;
}

.toggle.sm input:checked + .toggle-track::before {
  transform: translateX(14px);
}

/* theme picker */
.theme-picker {
  display: flex;
  gap: 12px;
}

.theme-option {
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.theme-option input { display: none; }

.theme-preview {
  width: 70px;
  height: 50px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--line);
  overflow: hidden;
  transition: all 0.15s ease;
}

.theme-option.active .theme-preview {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.theme-preview .theme-bar {
  height: 12px;
  background: var(--line);
}

.theme-preview .theme-body {
  height: calc(100% - 12px);
}

.theme-preview.light .theme-bar { background: #e5e5e5; }
.theme-preview.light .theme-body { background: #fff; }
.theme-preview.dark .theme-bar { background: var(--bg-elev); }
.theme-preview.dark .theme-body { background: var(--bg); }
.theme-preview.auto .theme-bar { background: linear-gradient(to right, #e5e5e5 50%, var(--bg-elev) 50%); }
.theme-preview.auto .theme-body { background: linear-gradient(to right, #fff 50%, var(--bg) 50%); }

.theme-option span {
  font-size: 11px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-mono);
}

/* color picker */
.color-picker {
  display: flex;
  gap: 10px;
}

.color-option {
  cursor: pointer;
  position: relative;
}

.color-option input { display: none; }

.color-option span {
  display: block;
  width: 30px;
  height: 30px;
  background: var(--c);
  border-radius: 50%;
  border: 2px solid var(--bg);
  transition: all 0.15s ease;
}

.color-option.active span {
  box-shadow: 0 0 0 2px var(--c);
  transform: scale(1.1);
}

/* segmented */
.segmented {
  display: inline-flex;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 2px;
}

.seg {
  padding: 6px 14px;
  font-size: 12px;
  color: var(--ink-muted);
  border-radius: 4px;
  transition: all 0.15s ease;
}

.seg:hover {
  color: var(--ink);
}

.seg.active {
  background: var(--bg-elev);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* notif table */
.notif-table {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-top: 8px;
}

.nt-head,
.nt-row {
  display: grid;
  grid-template-columns: 1fr 80px 80px 80px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.nt-head {
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
}

.nt-head span {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  text-align: center;
}

.nt-head span:first-child {
  text-align: left;
}

.nt-row {
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  color: var(--ink);
}

.nt-row:first-of-type {
  border-top: none;
}

.nt-row .toggle {
  margin: 0 auto;
}

/* sessions */
.session-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  background: var(--bg);
}

.session-item.current {
  border-color: var(--amber-border);
  background: var(--amber-soft);
}

.session-icon {
  font-size: 24px;
  width: 40px;
  text-align: center;
}

.session-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.session-body b {
  font-size: 13px;
  color: var(--ink);
}

.session-body span {
  font-size: 11px;
  color: var(--ink-muted);
}

.session-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  background: var(--amber);
  color: var(--bg);
  border-radius: 100px;
  font-weight: 700;
}

.cta-ghost.full-width {
  width: 100%;
  justify-content: center;
  margin-top: 10px;
}

.cta-ghost.danger-txt {
  color: var(--red);
  border-color: rgba(239, 68, 68, 0.3);
}

.cta-ghost.danger-txt:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: var(--red);
}

.danger-txt {
  color: var(--red) !important;
}

.danger-section {
  border-color: rgba(239, 68, 68, 0.3);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.04), var(--bg-soft));
}

.danger-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--line-soft);
  gap: 20px;
}

.danger-row:first-of-type {
  border-top: none;
  padding-top: 0;
}

.danger-row b {
  font-size: 13px;
  color: var(--ink);
  display: block;
  margin-bottom: 4px;
}

.danger-row p {
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.5;
  margin: 0;
}

.danger-delete b {
  color: var(--red);
}

.cta-danger {
  padding: 9px 16px;
  background: var(--red);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.cta-danger:hover {
  background: #dc2626;
}

@media (max-width: 900px) {
  .settings-layout {
    grid-template-columns: 1fr;
  }
  .settings-nav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
  }
  .set-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .set-action-row {
    flex-wrap: wrap;
  }
  .set-action-row > button,
  .set-action-row > form {
    margin-left: auto;
  }
  .modal-box {
    padding: 22px 18px;
    max-width: 100%;
  }
  .backup-codes-grid {
    grid-template-columns: 1fr 1fr;
    font-size: 12px;
  }
}

@media (max-width: 420px) {
  .backup-codes-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   404 PAGE
   ============================================================ */

.error-body {
  min-height: 100vh;
  background: var(--bg);
  overflow-x: hidden;
}

.error-body::before {
  background-image:
    radial-gradient(at 20% 30%, rgba(245, 158, 11, 0.08) 0%, transparent 50%),
    radial-gradient(at 80% 70%, rgba(239, 68, 68, 0.06) 0%, transparent 50%);
}

.error-wrap {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  gap: 40px;
}

.error-brand {
  z-index: 2;
}

.error-brand img {
  height: 40px;
  width: auto;
}

.error-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  text-align: center;
}

.error-number {
  display: flex;
  justify-content: center;
  gap: 0;
  font-family: var(--font-display);
  font-size: clamp(120px, 20vw, 220px);
  line-height: 1;
  letter-spacing: -0.05em;
  margin-bottom: 20px;
}

.err-4 {
  color: var(--ink);
}

.err-0 {
  background: linear-gradient(135deg, var(--amber) 0%, var(--red) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  animation: spin-0 8s linear infinite;
}

@keyframes spin-0 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.notice-icon {
  font-size: clamp(56px, 8vw, 80px);
  line-height: 1;
  margin-bottom: 20px;
}

.error-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: var(--heading-weight);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 16px;
}

.error-sub {
  font-size: 15px;
  color: var(--ink-muted);
  line-height: 1.6;
  margin-bottom: 32px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.error-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.error-suggest {
  padding-top: 40px;
  border-top: 1px solid var(--line);
}

.suggest-title {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-dim);
  margin-bottom: 16px;
}

.suggest-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.suggest-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: left;
  transition: all 0.15s ease;
}

.suggest-item:hover {
  border-color: var(--amber-border);
  background: var(--bg-elev);
  transform: translateY(-2px);
}

.suggest-icon {
  font-size: 22px;
}

.suggest-item div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.suggest-item b {
  font-size: 13px;
  color: var(--ink);
}

.suggest-item span {
  font-size: 11px;
  color: var(--ink-muted);
}

.error-decoration {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.error-decoration .deco-circle.c1 {
  width: 600px;
  height: 600px;
  background: rgba(245, 158, 11, 0.08);
  top: -200px;
  right: -200px;
}

.error-decoration .deco-circle.c2 {
  width: 500px;
  height: 500px;
  background: rgba(239, 68, 68, 0.06);
  bottom: -150px;
  left: -150px;
}

/* ============================================================
   EXTRAS: page divider link
   ============================================================ */

.divider-link {
  font-family: var(--font-body) !important;
  color: var(--amber-2) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

.divider-link:hover {
  color: var(--amber) !important;
}

/* ============================================================
   VIEW TOGGLE (feed vs forum list on homepage)
   Modern colors preserved, only structure changes
   ============================================================ */

.view-toggle {
  display: inline-flex;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 2px;
  margin-left: 6px;
  gap: 1px;
}

.vt-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-dim);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.vt-btn svg {
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

.vt-btn:hover {
  color: var(--ink);
}

.vt-btn:hover svg {
  opacity: 1;
}

.vt-btn.active {
  background: var(--bg-elev);
  color: var(--amber-2);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.vt-btn.active svg {
  opacity: 1;
}

/* ============================================================
   FORUM LIST VIEW (classic forum structure, modern colors)
   ============================================================ */

/* Forum list hidden by default (feed mode is default) */
.forum-list {
  display: none;
}

/* In feed mode, hide the forum list — explicit for clarity */
body:not(.view-forums) .forum-list {
  display: none;
}

/* In forums mode: show forum list, hide feed cards */
body.view-forums .forum-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* .card used to be a direct child of .feed, which is what this rule
   actually matches — #feedCards (added later for infinite scroll) wraps
   them now, so ">  .card" stopped matching anything and every card kept
   rendering right under the forum list in forums view. Target the
   wrapper itself instead of relying on exact nesting depth. */
body.view-forums .feed > #feedCards,
body.view-forums .feed > .load-more-wrap {
  display: none;
}

/* The homepage's blog teaser lives outside .feed entirely (it's its own
   section below the whole layout), so the view-forums rules above never
   touched it — switching to "forumlar" view still showed it sitting right
   under the forum list, when it should only ever appear under the akış
   feed. */
body.view-forums .home-blog-teaser {
  display: none;
}

/* Mobile-only category dropdown sitting above the feed (see home_feed.html)
   — the real .sidebar still does this job on desktop. */
.mobile-cat-dropdown {
  display: none;
}

@media (max-width: 768px) {
  .mobile-cat-dropdown {
    display: block;
    margin-bottom: 14px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 4px 14px;
  }

  .mobile-cat-dropdown summary {
    padding: 10px 0;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-dim);
    cursor: pointer;
  }

  .mobile-cat-dropdown[open] summary {
    border-bottom: 1px solid var(--line);
  }

  .mobile-cat-dropdown .cat-list {
    list-style: none;
    padding: 8px 0 10px;
  }
}

/* Hide filter tabs in forums mode (sort/view still useful) */
body.view-forums .filter-bar .filter-tabs {
  opacity: 0.4;
  pointer-events: none;
}

/* In forums mode: hide the category sidebar and let the forum list expand
   into that space instead of leaving it empty */
body.view-forums .layout {
  grid-template-columns: minmax(0, 1fr) 300px;
}

body.view-forums .layout > .sidebar {
  display: none;
}

/* Same selector + specificity as the unconditional rule above, so on a
   tie the one that comes later in the file wins regardless of which
   media query is active — this one needs to be physically after it to
   actually override it at phone widths instead of the reverse. */
@media (max-width: 768px) {
  body.view-forums .layout {
    grid-template-columns: 1fr;
  }
}

/* --- FEATURED TOPICS RAIL (home.html, cosmetic-tier perk) --- */

.featured-rail {
  max-width: 1400px;
  margin: 0 auto 20px;
  padding: 0 24px;
}

.featured-rail-head {
  font-size: 13px;
  font-weight: 700;
  color: var(--amber-2);
  margin-bottom: 8px;
}

.featured-rail-list {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.featured-rail-item {
  flex: 0 0 auto;
  min-width: 220px;
  max-width: 280px;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--amber-soft), var(--bg-soft));
  border: 1px solid var(--amber-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.featured-rail-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.featured-rail-meta {
  display: block;
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 4px;
}

/* --- RECENT TOPICS WIDGET (forumlar.html) --- */

.fl-recent {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 24px;
  /* No overflow:hidden here — it clipped the "diğer kategoriler" dropdown,
     which has to render outside this box's own bounds. Rounded corners are
     handled on the first/last child instead. */
}

.fl-recent-tabs {
  border-radius: var(--radius) var(--radius) 0 0;
}

.fl-recent-tablewrap {
  border-radius: 0 0 var(--radius) var(--radius);
}

.fl-recent-tabs {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2px;
  padding: 8px;
  background: linear-gradient(90deg, var(--bg-elev), color-mix(in srgb, var(--amber) 6%, var(--bg-elev)));
  border-bottom: 1px solid var(--line);
  position: relative;
}

.fl-recent-tab {
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fl-recent-tab:hover {
  background: var(--bg-hover);
  color: var(--ink);
}

.fl-recent-tab.active {
  background: var(--amber);
  color: #0d1117;
  font-weight: 600;
}

.fl-recent-tab.active .fl-recent-tab-dot {
  box-shadow: 0 0 0 2px rgba(13, 17, 23, 0.25);
}

.fl-recent-tab-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fl-recent-more {
  position: relative;
  margin-left: auto;
}

.fl-recent-more-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  z-index: 50;
  flex-direction: column;
  gap: 2px;
}

.fl-recent-more-dropdown.open {
  display: flex;
}

.fl-recent-more-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink-muted);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}

.fl-recent-more-item:hover {
  background: var(--bg-hover);
  color: var(--ink);
}

.fl-recent-more-item.active {
  background: var(--amber-soft);
  color: var(--amber-2);
  font-weight: 600;
}

.fl-recent-tablewrap {
  max-height: 340px;
  overflow-y: auto;
}

.fl-recent-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.fl-recent-table th {
  text-align: left;
  padding: 8px 14px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--bg-soft);
}

.fl-recent-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.fl-recent-table tr:last-child td {
  border-bottom: none;
}

.fl-recent-title {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}

.fl-recent-title:hover {
  color: var(--amber-2);
}

.fl-recent-num {
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
}

.fl-recent-cat {
  color: var(--ink-muted);
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
}

.fl-recent-cat:hover {
  color: var(--amber-2);
}

.fl-recent-empty {
  text-align: center;
  color: var(--ink-muted);
  padding: 24px;
}

/* --- CATEGORY BLOCK --- */

.fl-category {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  scroll-margin-top: 128px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.fl-category-highlight {
  background: var(--bg-hover);
  border-color: var(--amber);
  box-shadow: 0 0 0 1px var(--amber);
}

.fl-category-highlight .fl-cat-head {
  background: rgba(245, 158, 11, 0.12);
}

.fl-cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  transition: background 0.15s ease;
}

.fl-cat-head:hover {
  background: var(--bg-hover);
}

.fl-cat-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--heading-weight);
  color: var(--ink);
  letter-spacing: -0.01em;
  text-decoration: none;
}

.fl-cat-title:hover {
  color: var(--amber-2);
}

.fl-cat-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dot);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot) 15%, transparent);
}

.fl-cat-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* --- FORUM ROW --- */

.fl-forums {
  display: flex;
  flex-direction: column;
}

/* .fl-forum is `display: contents` — it no longer paints its own box (no
   background, border, padding); it exists purely so its children (icon,
   name/desc, stats, last-time) stay one clickable link while actually
   being laid out by the outer .fl-forum-wrap grid below, alongside
   .fl-chips and .fl-main-last — the only way for .fl-main-last to span
   both the forum row and the chips row and vertically center across both
   (see .fl-forum-wrap). */
.fl-forum {
  display: contents;
  text-decoration: none;
  color: inherit;
}

.fl-forum > .fl-icon {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 14px;
}

.fl-forum > .fl-main-text {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  margin-bottom: 14px;
}

.fl-forum > .fl-stats {
  grid-column: 4;
  grid-row: 1 / 3;
}

.fl-forum > .fl-last {
  grid-column: 5;
  grid-row: 1 / 3;
}

/* When forum has sub-forums, connect visually (no border below) */
.fl-forum.has-subs {
  border-bottom: none;
}

/* ============================================================
   SUB-FORUMS (tree-style indent below parent forum)
   ============================================================ */

.fl-subforums {
  background: var(--bg);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: -1px;
  padding: 2px 18px 6px 18px;
}

.fl-subforum {
  display: grid;
  grid-template-columns: 24px 28px minmax(0, 1fr) max-content 170px;
  column-gap: 12px;
  align-items: center;
  padding: 8px 0 8px 30px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
}

.fl-subforum:hover {
  background: var(--bg-hover);
}

.fl-tree {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-faint);
  line-height: 1;
  user-select: none;
  grid-column: 1;
}

.fl-sub-icon {
  grid-column: 2;
  width: 24px;
  height: 24px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  position: relative;
}

.fl-sub-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1px;
  background: var(--ink-dim);
  box-shadow: 0 3px 0 var(--ink-dim), 0 -3px 0 var(--ink-dim);
  transform: translate(-50%, -50%);
  opacity: 0.4;
}

.fl-sub-icon.new {
  background: var(--amber-soft);
  border-color: var(--amber);
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.08);
}

.fl-sub-icon.new::before {
  background: var(--amber);
  box-shadow: 0 3px 0 var(--amber), 0 -3px 0 var(--amber);
  opacity: 1;
}

.fl-sub-main {
  grid-column: 3;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.fl-sub-name {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s ease;
}

.fl-subforum:hover .fl-sub-name {
  color: var(--amber-2);
}

.fl-sub-desc {
  font-size: 11px;
  color: var(--ink-muted);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fl-sub-stats {
  grid-column: 4;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  white-space: nowrap;
}

.fl-sub-stats b {
  color: var(--ink);
  font-weight: 600;
}

.fl-sub-last {
  grid-column: 5;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding-left: 12px;
  border-left: 1px solid var(--line-soft);
}

.fl-sub-last b {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fl-subforum:hover .fl-sub-last b {
  color: var(--amber-2);
}

.fl-sub-last span {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
}

.fl-forum.locked {
  opacity: 0.6;
}

/* Icon — modern square with amber glow for "new" */
.fl-icon {
  width: 44px;
  height: 44px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.15s ease;
}

.fl-icon-inner {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* The same flame mark from the logo, reused as a per-forum status light:
   lit amber when the forum has activity (last_post_at set), unlit gray
   when it's still quiet. */
.fl-icon-inner svg {
  width: 22px;
  height: 22px;
  color: var(--ink-dim);
  opacity: 0.4;
  transition: all 0.15s ease;
}

.fl-icon.new {
  background: var(--amber-soft);
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.08), inset 0 1px 0 rgba(255,255,255,0.05);
}

.fl-icon.new .fl-icon-inner svg {
  color: var(--amber);
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.5));
}

.fl-forum:hover .fl-icon.new {
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15), inset 0 1px 0 rgba(255,255,255,0.05);
}

.fl-icon.locked {
  background: var(--bg);
  border-color: var(--line);
}

.fl-icon.locked .fl-icon-inner svg {
  opacity: 0.5;
}

/* --- FORUM MAIN (name + desc + sub) --- */

.fl-main-text {
  min-width: 0;
}

/* The "son konu" title — its own grid column (see .fl-forum-wrap), spanning
   both the forum row and the chips row so it vertically centers across the
   real, combined height of this forum's block instead of just the short
   top row. Web-width only (the whole thing is hidden at narrower widths,
   see the responsive rules below, so this never competes for space on
   mobile). */
.fl-main-last {
  grid-column: 3;
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  /* Reserved blank margin before the konu/mesaj column — without it, a long
     title's ellipsis cutoff lands flush against the column edge (no gap at
     all), while a short title already leaves plenty of its own space; this
     fixed amount keeps a visible gap either way instead of depending on how
     long the title happens to be. */
  padding-right: 28px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-muted);
}

.fl-main-last-icon {
  flex-shrink: 0;
  font-size: 12px;
}

.fl-main-last-text {
  min-width: 0;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fl-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--heading-weight);
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
  transition: color 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fl-forum:hover .fl-name {
  color: var(--amber-2);
}

.fl-desc {
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- ALT FORUMLAR (subforum chips, under a forum's description) --- */

.fl-forum-wrap {
  display: grid;
  grid-template-columns: 44px minmax(0, 1.6fr) minmax(0, 0.7fr) max-content 120px;
  column-gap: 14px;
  align-items: center;
  padding: 14px 18px 0;
  border-top: 1px solid var(--line-soft);
  transition: background 0.15s ease;
}

.fl-forum-wrap:hover {
  background: var(--bg-hover);
}

.fl-forum-wrap:first-child {
  border-top: none;
}

/* A forum with no subforum chips has nothing in row 2 — .fl-main-last,
   .fl-stats and .fl-last would otherwise span into an empty row that still
   reserves space via its content, so they're capped to row 1 only in that
   case (see the "no-chips" class the template adds). */
.fl-forum-wrap.no-chips .fl-main-last,
.fl-forum-wrap.no-chips .fl-forum > .fl-stats,
.fl-forum-wrap.no-chips .fl-forum > .fl-last {
  grid-row: 1;
}

.fl-chips {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 18px 14px 0;
  /* Capped well under column 2's own width (not just "fits inside it") so
     there's a clearly visible, invisible-boundary gap before column 3 (the
     "son konu" text) starts — chips wrapping right up to that edge made
     the two feel like they were sharing the same lane. */
  max-width: min(100%, 560px);
}

.fl-chip {
  font-size: 11.5px;
  color: var(--ink-muted);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 11px;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.fl-chip:hover {
  color: var(--amber-2);
  border-color: var(--amber-border);
  background: var(--amber-soft);
}


/* --- STATS (konu & mesaj) --- */

.fl-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
}

.fl-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 48px;
}

.fl-stat b {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--heading-weight);
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}

.fl-stat span {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
}

/* --- LAST MESSAGE --- */

.fl-last {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
  min-width: 0;
}

.fl-last-title {
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fl-forum:hover .fl-last-title {
  color: var(--amber-2);
}

.fl-last-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-muted);
}

.fl-last-meta b {
  color: var(--ink);
  font-weight: 500;
}

.fl-last-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-dim);
}

.fl-last-empty {
  /* No extra alignment/padding of its own — .fl-last already provides
     padding-left:14px; the old justify-content/align-items:center plus a
     second padding-left here doubled the inset and recentered the text,
     which is why "henüz yok" sat in a different spot than "X dk önce". */
}

.fl-last-empty span {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
}

/* --- RESPONSIVE --- */

/* Medium width: drop last-message and "son konu" columns */
@media (max-width: 1280px) {
  .fl-forum-wrap {
    grid-template-columns: 44px minmax(0, 1fr) max-content;
  }
  .fl-forum > .fl-last {
    display: none;
  }
  .fl-main-last {
    display: none;
  }
  .fl-subforum {
    grid-template-columns: 24px 28px minmax(0, 1fr) max-content;
  }
  .fl-sub-last {
    display: none;
  }
}

/* Narrow: drop sub-stats last column too, show compact */
@media (max-width: 960px) {
  .fl-subforum {
    grid-template-columns: 20px 24px minmax(0, 1fr) max-content;
    column-gap: 10px;
    padding-left: 24px;
  }
  .fl-sub-desc {
    display: none;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .fl-forum-wrap {
    padding: 14px 14px 0;
    column-gap: 12px;
  }
  .fl-subforums {
    padding: 2px 14px 6px 14px;
  }
  .fl-subforum {
    grid-template-columns: 16px 22px minmax(0, 1fr) max-content;
    padding: 8px 0 8px 14px;
    column-gap: 8px;
  }
  .fl-tree {
    font-size: 11px;
  }
  .fl-sub-stats {
    font-size: 10px;
  }
  .fl-sub-stats b {
    display: inline;
  }
  .fl-sub-desc {
    display: none;
  }
}

/* ============================================================
   BLOG
   ============================================================ */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.15s ease;
}

.blog-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.blog-card.featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
}

.blog-card.featured .blog-card-cover {
  height: 100%;
  min-height: 280px;
}

.blog-card-cover {
  height: 180px;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-elev);
}

.blog-card-cover-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  opacity: 0.3;
}

.blog-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.blog-card.featured .blog-card-body {
  justify-content: center;
  padding: 32px;
}

.blog-card-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: var(--heading-weight);
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.blog-card.featured .blog-card-title {
  font-size: clamp(24px, 3vw, 32px);
}

.blog-card-excerpt {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-dim);
  margin-top: auto;
}

@media (max-width: 900px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
  .blog-card.featured {
    grid-template-columns: 1fr;
  }
  .blog-card.featured .blog-card-cover {
    min-height: 200px;
  }
}

.blog-post-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--amber-soft);
  border: 1px solid var(--amber-border);
  color: var(--amber-2);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

@media (max-width: 768px) {
  .topic-hero-cover-wrap {
    height: 220px;
  }
}

/* Homepage "son blog yazıları" teaser row */
.home-blog-teaser {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px 40px;
}

.home-blog-teaser-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.home-blog-teaser-head h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--heading-weight);
  color: var(--ink);
}

.home-blog-teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .home-blog-teaser-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   MODERATION (reports queue + profile ban controls)
   ============================================================ */

.report-actions summary {
  cursor: pointer;
  list-style: none;
}

.report-actions summary::-webkit-details-marker {
  display: none;
}

.report-actions-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  padding: 14px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  width: 100%;
  max-width: 420px;
}

.report-action-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-muted);
  cursor: pointer;
}

.report-ban-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.ban-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ban-history-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.ban-history-item.active {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.08);
}

.profile-name.is-banned {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  opacity: 0.75;
}