/* Forum sayfaları: kartlı, profesyonel görünüm. Renkler aşağıdaki değişkenlerden (karanlık mod en altta). */

.forum {
  --f-card: #fff;
  --f-soft: #f8f9fb;
  --f-line: #e4e6ea;
  --f-text: #363636;
  --f-muted: #8b8b8b;
  --f-hover: #f5f9fe;
  --f-accent: #1c95f3;
  --f-accent-soft: #eef6fe;
  --f-sticky: #fffaf0;
  --f-shadow: 0 2px 6px rgba(0, 0, 0, .04);
  color: var(--f-text);
  font-family: "Roboto", sans-serif;
  font-size: 14px;
}
.forum p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
.forum a { color: var(--f-text); transition: color .15s ease; }
.forum a:hover { color: var(--f-accent); }

/* Ortak parçalar */
.forum-tag { display: inline-block; flex-shrink: 0; padding: 0 7px; border-radius: 3px; color: #fff; font: 700 9.5px/17px "Exo", sans-serif; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.forum-tag { margin-right: 8px; vertical-align: 3px; }
.forum-tag.is-sticky { background: #ffb400; }
.forum-tag.is-official { margin: 0 0 0 8px; background: #f30a5c; vertical-align: 2px; }
.forum-time { color: var(--f-muted); font-size: 12px; }
.forum-dot { color: var(--f-muted); }
.forum-note { display: inline-flex; align-items: center; gap: 6px; color: var(--f-muted); font-size: 12px; }
.forum-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border: 0; border-radius: 6px; background: var(--f-accent); color: #fff !important; font: 700 12px "Exo", sans-serif; text-transform: uppercase; cursor: pointer; transition: filter .15s ease, transform .15s ease; }
.forum-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.forum-btn.is-light { border: 1px solid var(--f-line); background: var(--f-card); color: var(--f-text) !important; }
.forum-alert { margin-bottom: 20px; padding: 12px 16px; border-radius: 6px; font-weight: 700; }
.forum-alert.is-error { background: #fde7ee; color: #c0103f; }
.forum-alert.is-success { background: #eafbe3; color: #2f8a12; }
.forum-card { padding: 18px 20px; border: 1px solid var(--f-line); border-radius: 8px; background: var(--f-card); box-shadow: var(--f-shadow); }
.forum-card + .forum-card { margin-top: 20px; }
.forum-card-title { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--f-text); font: 800 14px "Exo", sans-serif; text-transform: none; }
.forum-card-title .fa { color: var(--f-accent); }
.forum-card-empty { color: var(--f-muted); }

/* Sayfa başı */
.forum-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--f-line); }
.forum-head-main { min-width: 0; }
.forum-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--f-muted); font-size: 12px; }
.forum-crumbs a { color: var(--f-accent); }
.forum-title { margin: 6px 0 10px; color: var(--f-text); font: 800 26px/1.25 "Exo", sans-serif; text-transform: none; word-break: break-word; }
.forum-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--f-muted); font-size: 12px; }
.forum-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.forum-search { position: relative; }
.forum-search .fa { position: absolute; top: 50%; left: 13px; color: var(--f-muted); transform: translateY(-50%); pointer-events: none; }
.forum-search input { width: 220px; height: 40px; padding: 0 14px 0 36px; border: 1px solid var(--f-line); border-radius: 6px; background: var(--f-card); color: var(--f-text); font-size: 13px; transition: border-color .15s ease, width .2s ease; }
.forum-search input:focus { width: 260px; border-color: var(--f-accent); outline: none; }

/* Yerleşim */
.forum-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }

/* Bölüm kartı (ana sayfadaki başlıklar ve konu listesi) */
.forum-section { margin-bottom: 24px; border: 1px solid var(--f-line); border-radius: 8px; background: var(--f-card); box-shadow: var(--f-shadow); overflow: hidden; }
.forum-section-head { padding: 14px 20px; border-bottom: 1px solid var(--f-line); background: var(--f-soft); border-left: 4px solid var(--f-accent); }
.forum-section-head h2 { margin: 0; color: var(--f-text); font: 800 15px "Exo", sans-serif; text-transform: none; }
.forum-section-head p { margin-top: 2px; color: var(--f-muted); font-size: 12px; }
.forum-columns { display: grid; grid-template-columns: minmax(0, 1fr) 100px 220px; gap: 16px; padding: 10px 20px 10px 80px; border-bottom: 1px solid var(--f-line); background: var(--f-soft); color: var(--f-muted); font: 700 11px "Exo", sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.forum-columns span:nth-child(2) { text-align: center; }

/* Forum satırı */
.forum-node, .forum-thread { display: grid; align-items: center; gap: 16px; padding: 16px 20px; border-top: 1px solid var(--f-line); transition: background .15s ease; }
.forum-section-head + .forum-node, .forum-columns + .forum-thread { border-top: 0; }
.forum-node:hover, .forum-thread:hover { background: var(--f-hover); }
.forum-node { grid-template-columns: 52px minmax(0, 1fr) 120px 220px; }
.forum-node-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 8px; background: var(--f-accent-soft); color: var(--f-accent); font-size: 22px; object-fit: cover; }
.forum-node-icon.is-official { background: #fde7ee; color: #f30a5c; }
/* Yüklenen resimler: fotoğraflar (jpg) kutuyu doldurur; şeffaf ikonlar (png, gif, webp) zeminsiz ve kırpılmadan gösterilir. */
img.forum-node-icon.is-photo { background: none; }
img.forum-node-icon.is-art { padding: 2px; border-radius: 0; background: none; object-fit: contain; image-rendering: pixelated; user-select: none; }
.forum-node.is-empty .forum-node-icon:not(img) { background: var(--f-soft); color: var(--f-muted); }
.forum-node-title { font: 700 15px "Exo", sans-serif; }
.forum-node-description { margin-top: 3px !important; color: var(--f-muted) !important; font-size: 12.5px !important; }
.forum-node-counts { display: none; margin-top: 4px !important; color: var(--f-muted) !important; font-size: 12px !important; }
.forum-node-stats { display: flex; justify-content: center; gap: 18px; margin: 0; }
.forum-node-stats div { text-align: center; }
.forum-node-stats dt { color: var(--f-muted); font-size: 11px; font-weight: 400; }
.forum-node-stats dd { margin: 0; font: 800 16px "Exo", sans-serif; }

/* Son mesaj hücresi */
.forum-last { display: flex; align-items: center; gap: 10px; min-width: 0; }
.forum-last-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.forum-last-title { overflow: hidden; font: 700 13px "Exo", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.forum-last .player-chip-name { font-size: 12px; }
.forum-last.is-empty { color: var(--f-muted); font-size: 12px; font-style: italic; }

/* Konu satırı */
.forum-thread { grid-template-columns: 44px minmax(0, 1fr) 100px 220px; }
.forum-thread.is-sticky { background: var(--f-sticky); }
.forum-thread-title { display: block; font: 700 15px "Exo", sans-serif; }
.forum-thread-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 5px; }
.forum-pill { justify-self: center; padding: 3px 12px; border-radius: 20px; background: var(--f-accent-soft); color: var(--f-accent); font: 700 12px "Exo", sans-serif; white-space: nowrap; }
.forum-empty { padding: 48px 20px; color: var(--f-muted); text-align: center; }
.forum-empty .fa { display: block; margin-bottom: 10px; font-size: 34px; opacity: .45; }

/* Mesaj kartı */
.forum-posts { margin: 4px 0 8px; }
.forum-post { display: grid; grid-template-columns: 190px minmax(0, 1fr); margin-bottom: 20px; border: 1px solid var(--f-line); border-radius: 8px; background: var(--f-card); box-shadow: var(--f-shadow); overflow: hidden; scroll-margin-top: 20px; }
.forum-post:target { box-shadow: 0 0 0 2px var(--f-accent); }
.forum-post-user { padding: 20px 16px; border-top: 4px solid var(--rank); border-right: 1px solid var(--f-line); background: var(--f-soft); text-align: center; }
.forum-post-face { display: inline-block; }
.forum-post-face .player-face { margin: 0 auto 12px; border: 3px solid var(--rank); border-radius: 6px; box-shadow: 0 6px 14px rgba(0, 0, 0, .12); }
.forum-post-identity { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.forum-post-name { color: var(--rank) !important; font: 800 15px "Exo", sans-serif; word-break: break-word; }
.forum-op { padding: 1px 9px; border: 1px solid var(--f-accent); border-radius: 20px; color: var(--f-accent); font: 700 10px "Exo", sans-serif; }
.forum-post-facts { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--f-line); font-size: 11.5px; text-align: left; }
.forum-post-facts dt { color: var(--f-muted); font-weight: 400; }
.forum-post-facts dd { margin: 0; font-weight: 700; text-align: right; }
.forum-post-main { display: flex; flex-direction: column; min-width: 0; }
.forum-post-bar { display: flex; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid var(--f-line); color: var(--f-muted); font-size: 12px; }
.forum-post-bar a { color: var(--f-muted); font-weight: 700; }
.forum-post-body { flex: 1; padding: 20px; }
.forum-post-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 20px; border-top: 1px solid var(--f-line); }
.forum-post-edited { color: var(--f-muted); font-size: 11.5px; font-style: italic; }
.forum-post-actions { display: flex; gap: 18px; margin-left: auto; }
.forum-post-actions a, .forum-post-actions button { padding: 0; border: 0; background: none; color: var(--f-muted); font: 700 12px "Roboto", sans-serif; cursor: pointer; }
.forum-post-actions a:hover, .forum-post-actions button:hover { color: var(--f-accent); }

/* Cevap yazma */
.forum-reply { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; margin-top: 28px; padding: 22px; border: 1px solid var(--f-line); border-radius: 8px; background: var(--f-soft); }
.forum-reply-title { margin: 0 0 12px; color: var(--f-text); font: 800 16px "Exo", sans-serif; text-transform: none; }
.forum-reply-locked { grid-column: 1 / -1; color: var(--f-muted); text-align: center; }
.forum-compose { padding: 24px; }
.forum-label { display: block; margin: 0 0 6px; color: var(--f-text); font: 700 12px "Exo", sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.forum-input { width: 100%; height: 46px; margin-bottom: 18px; padding: 0 14px; border: 1px solid var(--f-line); border-radius: 6px; background: var(--f-card); color: var(--f-text); font-size: 15px; }
.forum-input:focus { border-color: var(--f-accent); outline: none; }
.forum-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }

/* Kenar çubuğu */
.forum-facts { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--f-line); border-radius: 6px; }
.forum-facts div { padding: 12px 0; text-align: center; }
.forum-facts div + div { border-left: 1px solid var(--f-line); }
.forum-facts strong { display: block; font: 800 18px "Exo", sans-serif; }
.forum-facts span { color: var(--f-muted); font-size: 11px; text-transform: uppercase; }
.forum-newest { display: flex; align-items: center; gap: 10px; margin-top: 14px !important; font-size: 12.5px; }
.forum-newest a { color: var(--f-accent); font-weight: 700; }
.forum-feed, .forum-top { margin: 0; padding: 0; list-style: none; }
.forum-feed li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--f-line); }
.forum-feed li:first-child { padding-top: 0; border-top: 0; }
.forum-feed-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.forum-feed-title { overflow: hidden; font: 700 13px "Exo", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.forum-feed .player-chip-name { font-size: 12px; }
.forum-top li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--f-line); }
.forum-top li:first-child { border-top: 0; }
.forum-top-place { width: 20px; color: var(--f-muted); font: 800 13px "Exo", sans-serif; text-align: center; }
.forum-top li:nth-child(1) .forum-top-place { color: #e6a700; }
.forum-top li:nth-child(2) .forum-top-place { color: #9aa4ae; }
.forum-top li:nth-child(3) .forum-top-place { color: #c07a3b; }
.forum-top .player-chip { flex: 1; }
.forum-top-count { color: var(--f-muted); font: 700 12px "Exo", sans-serif; }

/* Mesaj içeriği (editörün ürettiği HTML) */
.bb-content { color: var(--f-text, #363636); font-size: 14.5px; line-height: 1.8; word-wrap: break-word; }
.bb-content > :first-child { margin-top: 0; }
.bb-content > :last-child { margin-bottom: 0; }
.bb-content p { margin: 0 0 1em; color: inherit; font-size: inherit; line-height: inherit; }
.bb-content h2, .bb-content h3, .bb-content h4 { margin: 1.2em 0 .5em; color: inherit; font-family: "Exo", sans-serif; font-weight: 700; text-transform: none; }
.bb-content h2 { font-size: 20px; }
.bb-content h3 { font-size: 17px; }
.bb-content h4 { font-size: 15px; }
.bb-content a { color: var(--f-accent, #1c95f3); }
.bb-content ul, .bb-content ol { margin: 0 0 1em; padding-left: 1.6em; }
.bb-content ul { list-style: disc; }
.bb-content ol { list-style: decimal; }
.bb-content img { max-width: 100%; height: auto; border-radius: 4px; }
.bb-content figure { margin: 1em 0; }
.bb-content figure.image { display: table; margin: 1em auto; text-align: center; }
.bb-content figure.image-style-side { float: right; max-width: 50%; margin: 0 0 1em 1.5em; }
.bb-content figcaption { margin-top: 6px; color: var(--f-muted, #8b8b8b); font-size: 12px; }
.bb-content hr { margin: 1.5em 0; border: 0; border-top: 1px solid var(--f-line, #e4e6ea); }
.bb-content blockquote { position: relative; margin: 1.2em 0; padding: 18px 22px; border: 0; background: var(--f-soft, #f4f4f4); font-size: inherit; }
.bb-content blockquote::before { content: '"'; position: absolute; top: 0; left: 0; width: 20px; height: 18px; padding-top: 2px; background: #f30a5c; color: #fff; font: 700 16px/18px "Exo", sans-serif; text-align: center; }
.bb-content blockquote p:first-child strong:only-child { display: block; font-family: "Exo", sans-serif; font-size: 12.5px; }
.bb-content pre { margin: 1.2em 0; padding: 16px 18px; border-radius: 6px; background: #252627; color: #e6e6e6; font-size: 13px; line-height: 1.6; overflow-x: auto; }
.bb-content code { font-family: Consolas, "Courier New", monospace; }
.bb-content table { width: 100%; margin: 1em 0; border-collapse: collapse; }
.bb-content th, .bb-content td { padding: 8px 10px; border: 1px solid var(--f-line, #e4e6ea); }
.bb-content th { background: var(--f-soft, #f4f4f4); }
.bb-content::after { content: ''; display: table; clear: both; }
.bb-spoiler { margin: 1.2em 0; border-left: 3px solid #7442ce; background: var(--f-soft, #f4f4f4); }
.bb-spoiler summary { padding: 11px 16px; color: #7442ce; font: 700 12px "Exo", sans-serif; letter-spacing: .03em; cursor: pointer; list-style: none; user-select: none; }
.bb-spoiler summary::-webkit-details-marker { display: none; }
.bb-spoiler summary::before { content: '\f070'; margin-right: 8px; font-family: FontAwesome; }
.bb-spoiler[open] summary::before { content: '\f06e'; }
.bb-spoiler summary::after { content: ' — göstermek için tıklayın'; color: var(--f-muted, #8b8b8b); font: 400 12px "Roboto", sans-serif; }
.bb-spoiler[open] summary::after { content: ''; }
.bb-spoiler-body { padding: 0 16px 14px; }
.bb-video { position: relative; max-width: 720px; margin: 1.2em 0; padding-bottom: min(56.25%, 405px); }
.bb-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 6px; }

/* Karanlık mod */
html.dark-mode .forum {
  --f-card: var(--dm-surface);
  --f-soft: var(--dm-surface-2);
  --f-line: var(--dm-border);
  --f-text: var(--dm-text);
  --f-muted: var(--dm-muted);
  --f-hover: var(--dm-surface-3);
  --f-accent: var(--dm-accent);
  --f-accent-soft: rgba(62, 166, 255, .12);
  --f-sticky: rgba(255, 180, 0, .06);
  --f-shadow: none;
}
html.dark-mode .forum-node-icon.is-official { background: rgba(243, 10, 92, .15); }
html.dark-mode .bb-spoiler summary { color: #b39ae6; }
html.dark-mode .forum-alert.is-error { background: #3a1820; color: #ff8fa8; }
html.dark-mode .forum-alert.is-success { background: #1c3014; color: #8fe06a; }

/* Dar ekranlar */
@media screen and (max-width: 1100px) {
  .forum-layout { grid-template-columns: minmax(0, 1fr); }
  .forum-node { grid-template-columns: 52px minmax(0, 1fr) 200px; }
  .forum-node-stats { display: none; }
  .forum-node-counts { display: block; }
}
@media screen and (max-width: 760px) {
  .forum-title { font-size: 21px; }
  .forum-head-actions, .forum-search, .forum-search input, .forum-search input:focus { width: 100%; }
  .forum-node { grid-template-columns: 44px minmax(0, 1fr); padding: 14px 16px; }
  .forum-node-icon { width: 44px; height: 44px; font-size: 18px; }
  .forum-node .forum-last, .forum-thread .forum-last, .forum-columns { display: none; }
  .forum-thread { grid-template-columns: 36px minmax(0, 1fr) auto; padding: 14px 16px; }
  .forum-thread > .player-face { width: 36px; height: 36px; }
  .forum-post { grid-template-columns: minmax(0, 1fr); }
  .forum-post-user { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--f-line); text-align: left; }
  .forum-post-face .player-face { width: 48px; height: 48px; margin: 0; }
  .forum-post-identity { flex-direction: row; flex-wrap: wrap; }
  .forum-post-facts { display: none; }
  .forum-post-body { padding: 16px; }
  .forum-reply { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .forum-reply-user { display: none; }
  .bb-content figure.image-style-side { float: none; max-width: 100%; margin: 1em 0; }
}