/* =========================================================================
   4GLOBAL FORUM — site.css'in renk ve yazı tiplerini kullanır; burada yalnız forum parçaları.
   ========================================================================= */
.forum { background: #04070d; }
.fo-brand-tag { margin-left: .55rem; padding: .12rem .45rem; font-family: var(--f-label); font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #04101f; background: var(--gold); vertical-align: middle; }
.brand { display: inline-flex; align-items: center; }
.fo-main { min-height: 70vh; outline: none; }   /* menü yapışkan (sticky), içerik altından başlar */
.fo-loading { padding: 6rem 0; color: var(--ash); text-align: center; }
.fo-muted { color: var(--ash); }
.fo-hero { position: relative; padding: 3.2rem 0 2.2rem; background: radial-gradient(ellipse at 80% 0%, rgba(61, 155, 255, .18), transparent 60%), linear-gradient(180deg, #08101f, transparent); border-bottom: 1px solid var(--line); }
.fo-hero .page-title { font-size: clamp(2.4rem, 5vw, 3.6rem); }
.fo-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start; padding-block: 2rem 4rem; }
.fo-page > .fo-grid { padding-top: 1rem; }
.fo-col { min-width: 0; display: flex; flex-direction: column; gap: 1.6rem; }
.fo-page { padding-top: 2rem; padding-bottom: 4rem; }
.fo-narrow { max-width: 860px; }
.fo-center { text-align: center; padding-top: 6rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.fo-crumbs { margin-bottom: 1rem; flex-wrap: wrap; }
.fo-h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; text-transform: uppercase; margin: 0 0 1.2rem; }
.fo-h2 { font-size: 1.3rem; font-weight: 800; text-transform: uppercase; margin: 0 0 .8rem; }

/* bölüm listesi */
.fo-group-h { margin: 0 0 .5rem; font-family: var(--f-label); font-weight: 700; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-hi); display: flex; align-items: center; gap: .7rem; }
.fo-group-h::after { content: ''; flex: 1; height: 1px; background: var(--line-2); }
.fo-cats { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.fo-cat { display: grid; grid-template-columns: 52px minmax(0, 1fr) 70px 70px minmax(0, 230px); gap: 1rem; align-items: center; padding: .95rem 1.1rem; background: #060c19; color: inherit; text-decoration: none; transition: background .15s ease; }
.fo-cat:hover { background: #0a1426; }
.fo-cat-ic { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-2); background: rgba(61, 155, 255, .07); color: var(--cyan); }
.fo-cat-ic svg { width: 24px; height: 24px; }
.fo-cat-ic .fo-emb { width: 32px; height: 32px; }
.fo-cat-ic--lg { width: 56px; height: 56px; flex: none; }
.fo-cat-ic--lg svg { width: 30px; height: 30px; }
.fo-cat-t { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
.fo-cat-t b { font-family: var(--f-display); font-weight: 800; font-size: 1.2rem; }
.fo-cat-t small { flex-basis: 100%; color: var(--ash); font-size: .88rem; }
.fo-tag { font-style: normal; font-family: var(--f-label); font-weight: 700; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; padding: .1rem .4rem; border: 1px solid var(--line-2); color: var(--gold-hi); }
.fo-tag--derion { border-color: rgba(79, 149, 211, .6); color: #9cc8f0; }
.fo-tag--valorian { border-color: rgba(224, 83, 63, .6); color: #ffab9c; }
.fo-cat-n { display: flex; flex-direction: column; align-items: center; }
.fo-cat-n b { font-family: var(--f-display); font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.fo-cat-n small { color: var(--ash); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.fo-cat-last { min-width: 0; display: flex; flex-direction: column; gap: .15rem; font-size: .85rem; color: var(--ash); }
.fo-cat-lt { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fo-who { display: inline-flex; align-items: center; gap: .3rem; color: var(--text); }
.fo-who b { font-weight: 600; }
.fo-emb { vertical-align: -3px; flex: none; }

/* yan sütun */
.fo-side { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 90px; }
.fo-card { padding: 1.1rem 1.2rem; background: #060c19; border: 1px solid var(--line); display: flex; flex-direction: column; gap: .6rem; }
.fo-card h3 { margin: 0; font-family: var(--f-display); font-weight: 800; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .02em; }
.fo-card p { margin: 0; font-size: .9rem; }
.fo-card--me { flex-direction: row; align-items: center; gap: .9rem; }
.fo-me-n { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; font-size: 1.05rem !important; }
.fo-small-link { align-self: flex-start; background: none; border: 0; padding: 0; color: var(--gold-hi); font: inherit; font-size: .85rem; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.fo-latest { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.fo-latest li { display: flex; flex-direction: column; gap: .15rem; font-size: .85rem; color: var(--ash); }
.fo-latest a { color: var(--text); text-decoration: none; font-weight: 600; font-size: .92rem; }
.fo-latest a:hover { color: var(--gold-hi); }
.fo-card--links a { display: flex; align-items: center; gap: .6rem; color: var(--text); text-decoration: none; font-size: .92rem; }
.fo-card--links a:hover { color: var(--gold-hi); }
.fo-card--links svg { width: 18px; height: 18px; color: var(--cyan); }
.btn-block { width: 100%; justify-content: center; }

/* avatar: sınıf resminden yüz kırpması, kenarı krallık renginde */
.fo-av { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #0b1424 center 18% / 180% no-repeat; border: 2px solid var(--line-2); }
.fo-av--big { width: 64px; height: 64px; }
/* yüzü ortalamak için sınıf resmine göre yakınlaştırma ve konum */
.fo-av[data-c] { background-size: 300%; }
.fo-av--none { background: radial-gradient(circle at 50% 38%, #1a2a44 0 22%, transparent 23%), radial-gradient(ellipse at 50% 100%, #1a2a44 0 45%, transparent 46%), #0b1424; }
.fo-av[data-c="warrior"] { background-position: 72% 0%; }
.fo-av[data-c="rogue"] { background-position: 100% 20%; }
.fo-av[data-c="archer"] { background-position: 95% 11%; }
.fo-av[data-c="mage"] { background-position: 65% 28%; }
.fo-av[data-c="priest"] { background-position: 58% 24%; }
.fo-av[data-c="summoner"] { background-size: 400%; background-position: 61% 56%; }
.fo-av[data-k="derion"] { border-color: var(--derion); }
.fo-av[data-k="valorian"] { border-color: var(--valorian); }
.fo-role { font-style: normal; font-family: var(--f-label); font-weight: 700; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; padding: .12rem .4rem; }
.fo-role--staff { background: var(--gold); color: #04101f; }
.fo-role--mod { background: rgba(167, 150, 255, .2); color: #c9bdff; border: 1px solid rgba(167, 150, 255, .5); }

/* bölüm sayfası: konu listesi */
.fo-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.fo-head-t { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.fo-head h1 { margin: 0; font-size: clamp(1.7rem, 3.5vw, 2.4rem); font-weight: 800; text-transform: uppercase; overflow-wrap: anywhere; }
.fo-head p { margin: .2rem 0 0; }
.fo-head--topic { flex-direction: column; align-items: flex-start; gap: .2rem; }
.fo-head--topic h1 { text-transform: none; font-family: var(--f-display); letter-spacing: .01em; }
.fo-why { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 0 0 1rem; padding: .8rem 1rem; background: rgba(61, 155, 255, .06); border: 1px solid var(--line); color: #cdd5e2; font-size: .92rem; }
.fo-topics { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.fo-trow { display: grid; grid-template-columns: minmax(0, 1fr) 80px 80px 170px; gap: 1rem; align-items: center; padding: .85rem 1.1rem; background: #060c19; color: inherit; text-decoration: none; }
a.fo-trow:hover { background: #0a1426; }
.fo-trow--h { padding-block: .55rem; background: #0a1324; font-family: var(--f-label); font-weight: 700; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ash); }
.fo-trow.is-pinned { background: linear-gradient(90deg, rgba(61, 155, 255, .1), #060c19 40%); }
.fo-tt { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .45rem; }
.fo-tt b { font-weight: 600; font-size: 1rem; overflow-wrap: anywhere; }
.fo-tt small { flex-basis: 100%; color: var(--ash); font-size: .82rem; }
.fo-tl { display: flex; flex-direction: column; gap: .1rem; font-size: .85rem; }
.fo-tl small { color: var(--ash); }
.fo-num { text-align: center; font-variant-numeric: tabular-nums; color: #cdd5e2; }
.fo-flag { width: 16px; height: 16px; color: var(--gold-hi); flex: none; margin-right: .1rem; vertical-align: -2px; }
.fo-empty { padding: 2.5rem; text-align: center; color: var(--ash); border: 1px dashed var(--line-2); }
.fo-pager { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: center; margin-top: 1.2rem; }
.fo-pg { min-width: 38px; height: 38px; display: grid; place-items: center; padding: 0 .6rem; border: 1px solid var(--line-2); color: var(--text); text-decoration: none; font-variant-numeric: tabular-nums; }
.fo-pg:hover { border-color: var(--gold); }
.fo-pg.is-on { background: var(--gold); border-color: var(--gold); color: #04101f; font-weight: 700; }
.fo-pg-gap { align-self: center; color: var(--ash); }

/* konu sayfası: mesajlar */
.fo-mod { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; padding: .6rem .8rem; border: 1px dashed rgba(167, 150, 255, .5); background: rgba(167, 150, 255, .06); }
.fo-mod-l { font-family: var(--f-label); font-weight: 700; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: #c9bdff; margin-right: .3rem; }
.fo-posts { display: flex; flex-direction: column; gap: 1rem; }
.fo-post { display: grid; grid-template-columns: 170px minmax(0, 1fr); background: #060c19; border: 1px solid var(--line); scroll-margin-top: 90px; }
.fo-post.is-flash { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), var(--glow); }
.fo-post--staff { border-color: rgba(61, 155, 255, .45); }
.fo-post-a { padding: 1.1rem 1rem; display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; border-right: 1px solid var(--line); background: linear-gradient(180deg, #0a1324, #060c19); }
.fo-post-a p { margin: 0; font-size: .82rem; }
.fo-post-n { display: flex; align-items: center; gap: .3rem; font-size: 1rem !important; overflow-wrap: anywhere; justify-content: center; }
.fo-post-c { font-size: .76rem !important; }
.fo-post-m { min-width: 0; display: flex; flex-direction: column; }
.fo-post-h { display: flex; align-items: center; gap: .6rem; padding: .6rem 1.1rem; border-bottom: 1px solid var(--line); color: var(--ash); font-size: .85rem; }
.fo-post-no { color: var(--gold-hi); text-decoration: none; font-family: var(--f-display); font-weight: 800; }
.fo-post-f { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; padding: .4rem .8rem .6rem; margin-top: auto; }
.fo-act { background: none; border: 1px solid transparent; color: var(--ash); padding: .3rem .6rem; font: inherit; font-size: .82rem; cursor: pointer; }
.fo-act:hover { color: var(--text); border-color: var(--line-2); }
.fo-act--danger:hover { color: #ff8a6a; border-color: rgba(255, 138, 106, .5); }
.fo-body { padding: 1rem 1.1rem; color: #dce3ee; line-height: 1.65; overflow-wrap: anywhere; }
.fo-body > :first-child { margin-top: 0; }
.fo-body > :last-child { margin-bottom: 0; }
.fo-body p { margin: 0 0 .8rem; }
.fo-body h4 { margin: 1rem 0 .4rem; font-family: var(--f-display); font-weight: 800; font-size: 1.15rem; text-transform: uppercase; }
.fo-body ul, .fo-body ol { margin: 0 0 .8rem; padding-left: 1.3rem; }
.fo-body li::marker { color: var(--cyan); }
.fo-body a { color: var(--gold-hi); }
.fo-body code { padding: .05rem .3rem; background: rgba(255, 255, 255, .07); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; }
.fo-body pre { margin: 0 0 .8rem; padding: .8rem 1rem; background: #02050b; border: 1px solid var(--line); overflow-x: auto; }
.fo-body pre code { padding: 0; background: none; }
.fo-body blockquote { margin: 0 0 .8rem; padding: .6rem .9rem; border-left: 3px solid var(--gold); background: rgba(61, 155, 255, .06); color: #c3ccda; }

/* yazı kutusu */
.fo-reply { margin-top: 1.6rem; padding: 1.2rem; background: #060c19; border: 1px solid var(--line); }
.fo-ed { border: 1px solid var(--line-2); background: #050b18; }
.fo-ed-bar { display: flex; align-items: center; gap: .2rem; padding: .35rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.fo-tb { min-width: 34px; height: 32px; padding: 0 .55rem; background: none; border: 1px solid transparent; color: #b7c3d6; font: inherit; font-size: .85rem; cursor: pointer; }
.fo-tb:hover:not(:disabled) { color: var(--text); border-color: var(--line-2); }
.fo-tb:disabled { opacity: .35; cursor: default; }
.fo-tb--tab[aria-pressed="true"] { color: var(--text); border-bottom: 2px solid var(--gold); }
.fo-ed-sp { flex: 1; }
.fo-ed textarea { display: block; width: 100%; min-height: 160px; resize: vertical; padding: .8rem .9rem; background: transparent; border: 0; color: var(--text); font: inherit; line-height: 1.6; }
.fo-ed textarea:focus { outline: none; }
.fo-ed:focus-within { border-color: var(--gold); }
.fo-ed-prev { min-height: 160px; }
.fo-ed-foot { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: .4rem .8rem; border-top: 1px solid var(--line); color: var(--ash); font-size: .76rem; }
.fo-reply-act { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .8rem; }
.fo-editf { display: flex; flex-direction: column; }
.fo-new { display: flex; flex-direction: column; gap: .4rem; }
.fo-new select, .fo-new input[type="text"], .fo-dlg select, .fo-dlg textarea { width: 100%; height: 46px; padding: 0 .8rem; background: #050b18; border: 1px solid var(--line-2); color: var(--text); font: inherit; }
.fo-dlg textarea { height: auto; padding: .6rem .8rem; resize: vertical; }
.fo-new select:focus, .fo-new input:focus, .fo-dlg select:focus, .fo-dlg textarea:focus { outline: none; border-color: var(--gold); }
.fo-lbl { margin-top: .6rem; font-family: var(--f-label); font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ash); }
.fo-as { margin: 0 0 .4rem; display: flex; align-items: center; gap: .5rem; color: var(--ash); }
.fo-rules-note { font-size: .85rem; margin: .6rem 0 0; }
.fo-new .captcha { margin-top: .8rem; }

/* iletişim kutusu */
.fo-dlg { width: min(520px, calc(100vw - 2rem)); padding: 0; border: 1px solid var(--line-2); background: #0a1120; color: var(--text); }
.fo-dlg::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(3px); }
.fo-dlg-in { padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .8rem; }
.fo-dlg h2 { margin: 0; font-size: 1.4rem; font-weight: 800; text-transform: uppercase; }
.fo-dlg p { margin: 0; }
.fo-dlg-act { display: flex; justify-content: flex-end; gap: .6rem; }
.btn-danger { background: #c4372d !important; border-color: #c4372d !important; color: #fff !important; }
.fo-pick { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; }
.fo-pick-c { display: flex; align-items: center; gap: .8rem; padding: .6rem .8rem; border: 1px solid var(--line-2); cursor: pointer; }
.fo-pick-c:has(input:checked) { border-color: var(--gold); background: rgba(61, 155, 255, .08); }
.fo-pick-c input { accent-color: var(--gold); }
.fo-pick-c span { display: flex; flex-direction: column; }
.fo-pick-c small { color: var(--ash); display: flex; align-items: center; gap: .3rem; }

.fo-foot { border-top: 1px solid var(--line); padding: 1.6rem 0 2rem; color: var(--ash); font-size: .85rem; }
.fo-foot-in { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.fo-foot a { color: var(--ash); }
.fo-foot a:hover { color: var(--text); }

@media (max-width: 1020px) {
  .fo-grid { grid-template-columns: minmax(0, 1fr); }
  .fo-side { position: static; }
  .fo-cat { grid-template-columns: 44px minmax(0, 1fr) 64px; }
  .fo-cat-n:nth-of-type(4), .fo-cat-last { display: none; }
}
@media (max-width: 680px) {
  .nav-links { display: none; }
  .fo-trow { grid-template-columns: minmax(0, 1fr) 60px; }
  .fo-trow > :nth-child(3), .fo-trow > :nth-child(4) { display: none; }
  .fo-post { grid-template-columns: minmax(0, 1fr); }
  .fo-post-a { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; text-align: left; border-right: 0; border-bottom: 1px solid var(--line); padding: .7rem 1rem; gap: .5rem .7rem; }
  .fo-post-a .fo-av--big { width: 40px; height: 40px; }
  .fo-cat { grid-template-columns: 40px minmax(0, 1fr); }
  .fo-cat-n { display: none; }
  .fo-ed-foot > :first-child { display: none; }
}