/* ---------- kullanıcı paneli ---------- */
.up-root .ic { width: 18px; height: 18px; flex: none; }

/* giriş kapısı */
.up-gate { position: relative; min-height: calc(100vh - var(--hdr)); display: grid; place-items: center; overflow: hidden; isolation: isolate; padding: 40px 16px; }
.up-gate-box { text-align: center; max-width: 520px; animation: rise .9s cubic-bezier(.2,.8,.2,1) both; }
.up-gate h1 { margin: 14px 0 12px; font: 700 clamp(36px, 5vw, 60px)/1 var(--f-display); background: linear-gradient(180deg, #fff3d6, #d9b26f 65%, #8f7140); -webkit-background-clip: text; background-clip: text; color: transparent; }
.up-gate p { color: #b6aa94; font-size: 17px; margin: 0 0 30px; }
.up-gate-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.up-shade { position: absolute; inset: 0; z-index: -3; pointer-events: none;
  background: linear-gradient(90deg, #06070a 0%, rgba(6,7,10,.86) 38%, rgba(6,7,10,.35) 72%, rgba(6,7,10,.6) 100%), linear-gradient(180deg, rgba(6,7,10,.5) 0%, transparent 30%, transparent 60%, #06070a 100%); }

/* kahraman alanı */
.up-hero { position: relative; overflow: hidden; isolation: isolate; background: #06070a; min-height: 440px; display: flex; align-items: flex-end; }
.up-art { background-position: 60% 28%; }
.up-hero-in { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; padding-top: 70px; padding-bottom: 46px; }
.up-hero-in > * { animation: rise .9s cubic-bezier(.2,.8,.2,1) both; }
.up-hero-in > :nth-child(2) { animation-delay: .12s; }
.up-id { display: flex; align-items: center; gap: 30px; min-width: 0; }
.up-av { position: relative; width: 150px; height: 150px; flex: none; border-radius: 50%; display: grid; place-items: center; }
.up-av img { position: relative; z-index: 1; width: calc(100% - 12px); height: calc(100% - 12px); border-radius: 50%; object-fit: cover; background: #000; box-shadow: 0 0 0 3px #0b0a0c, 0 18px 40px rgba(0,0,0,.7); }
.up-ring { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, #f3dcaa, #8f7140, #2a1d10, #c81d33, #f3dcaa, #8f7140, #2a1d10, #e2bd78, #f3dcaa);
  animation: upSpin 14s linear infinite; box-shadow: 0 0 40px rgba(226,189,120,.35), 0 0 90px rgba(200,29,51,.18); }
.up-ring::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1px dashed rgba(243,220,170,.25); animation: upSpin 40s linear infinite reverse; }
@keyframes upSpin { to { transform: rotate(360deg); } }
.up-av-edit { position: absolute; z-index: 2; right: 4px; bottom: 6px; width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer; color: #1a0e06;
  background: linear-gradient(#f3dcaa, #c79b55); border: 0; border-radius: 50%; box-shadow: 0 0 0 3px #0b0a0c, 0 6px 16px rgba(0,0,0,.6); transition: transform .25s; }
.up-av-edit:hover { transform: scale(1.12) rotate(-8deg); }
.up-av-edit .ic { width: 17px; height: 17px; }
.up-who { min-width: 0; }
.up-name { margin: 10px 0 10px; font: 700 clamp(34px, 4.6vw, 62px)/1 var(--f-display); letter-spacing: .02em; overflow-wrap: anywhere;
  background: linear-gradient(180deg, #fff3d6, #d9b26f 62%, #8f7140); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 24px rgba(0,0,0,.8)); }
.up-sub { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; font: 600 12px var(--f-head); letter-spacing: .16em; text-transform: uppercase; color: #a99d88; }
.up-sub .role { margin: 0; }
.up-cls { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 3px; background: rgba(217,178,111,.1); border: 1px solid rgba(217,178,111,.28); color: var(--gold2); border-radius: 30px; }
.up-cls img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.up-cls b { font: 700 14px var(--f-display); letter-spacing: .02em; text-transform: none; }
.up-since { color: #7d7262; }
.up-bio { margin: 16px 0 0; max-width: 560px; color: #d0c4ac; font: italic 400 17px/1.5 'Spectral', Georgia, serif; }
.up-bio a { color: #a99d88; font-style: normal; font-family: var(--f-body); font-size: 15px; display: inline-flex; gap: 6px; align-items: center; border-bottom: 1px dashed rgba(217,178,111,.4); }
.up-bio a:hover { color: var(--gold2); }
.up-bio .ic { width: 14px; height: 14px; }
.up-stats { display: grid; grid-template-columns: repeat(5, auto); gap: 0; flex: none;
  background: linear-gradient(180deg, rgba(14,11,9,.7), rgba(6,5,6,.85)); backdrop-filter: blur(8px); border: 1px solid rgba(217,178,111,.18);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px); }
.up-stat { padding: 16px 22px; text-align: center; position: relative; }
.up-stat + .up-stat::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: linear-gradient(transparent, rgba(217,178,111,.3), transparent); }
.up-stat b { display: block; font: 700 30px/1 var(--f-head); color: #f6e6c3; text-shadow: 0 0 18px rgba(226,189,120,.35); }
.up-stat span { display: block; margin-top: 6px; font: 600 10px var(--f-head); letter-spacing: .2em; text-transform: uppercase; color: #8b7f6b; white-space: nowrap; }

/* sekmeler */
.up-tabs { position: sticky; top: var(--hdr); z-index: 20; background: rgba(8,7,9,.88); backdrop-filter: blur(12px); border-top: 1px solid rgba(217,178,111,.14); border-bottom: 1px solid rgba(217,178,111,.14); }
.up-tabs-in { position: relative; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.up-tabs-in::-webkit-scrollbar { display: none; }
.up-tabs a { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 18px 18px 17px; white-space: nowrap; color: #9d917d;
  font: 600 13px var(--f-head); letter-spacing: .16em; text-transform: uppercase; transition: color .25s; }
.up-tabs a:hover { color: #f3e2bb; }
.up-tabs a.on { color: var(--gold2); text-shadow: 0 0 14px rgba(243,220,170,.35); }
.up-tabs a .ic { color: var(--gold3); transition: color .25s; }
.up-tabs a.on .ic, .up-tabs a:hover .ic { color: var(--ember2); }
.up-tabs em { display: none; font: 700 10px/1 var(--f-head); font-style: normal; letter-spacing: .04em; color: #fff; min-width: 18px; padding: 4px 5px; text-align: center;
  background: linear-gradient(#e2283f, #a3172a); box-shadow: 0 0 12px rgba(226,40,63,.5); border-radius: 9px; }
.up-tabs em.on { display: inline-block; }
.up-ink { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: linear-gradient(90deg, transparent, #f3dcaa 20%, #f3dcaa 80%, transparent);
  box-shadow: 0 0 12px rgba(243,220,170,.7); transition: transform .45s cubic-bezier(.2,.8,.2,1), width .45s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.up-ink::after { content: ''; position: absolute; left: 50%; top: -3px; width: 6px; height: 6px; margin-left: -3px; transform: rotate(45deg); background: #f3dcaa; }

/* gövde ve kartlar */
.up-body { padding: 40px 0 100px; background: radial-gradient(60% 40% at 50% 0%, rgba(200,29,51,.06), transparent 70%); }
.up-body-in.swap { animation: upIn .5s cubic-bezier(.2,.8,.2,1); }
@keyframes upIn { from { opacity: 0; transform: translateY(14px); } }
.up-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.up-grid.profile { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.up-col { display: grid; gap: 24px; min-width: 0; }
.up-card { position: relative; padding: 22px 24px 24px; min-width: 0;
  background: linear-gradient(180deg, rgba(22,18,15,.92), rgba(10,9,10,.95)); border: 1px solid rgba(217,178,111,.14);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); }
.up-card::before { content: ''; position: absolute; left: 0; top: 0; width: 55%; height: 1px; background: linear-gradient(90deg, rgba(243,220,170,.75), transparent); }
.up-card > header { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.up-card > header > .ic { color: var(--ember2); filter: drop-shadow(0 0 6px rgba(226,189,120,.5)); }
.up-card > header h3 { margin: 0; font: 700 19px var(--f-display); color: var(--gold2); letter-spacing: .03em; }
.up-more { margin-left: auto; font: 600 12px var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: #a99d88; }
.up-more:hover { color: var(--gold2); }
.up-wide { max-width: 1000px; margin: 0 auto; }
.up-empty { text-align: center; padding: 26px 16px; color: #7d7262; border: 1px dashed rgba(217,178,111,.14); background: rgba(0,0,0,.18); }
.up-empty span { display: inline-block; color: var(--ember); opacity: .8; }
.up-empty p { margin: 8px 0 14px; font: italic 400 15px 'Spectral', Georgia, serif; }
.up-empty p:last-child { margin-bottom: 0; }
.up-hint { margin: 0; color: #7d7262; font: 400 13.5px/1.5 var(--f-body); text-transform: none; letter-spacing: 0; }
.up-link { background: none; border: 0; padding: 0; cursor: pointer; color: #a99d88; font: 600 12px var(--f-head); letter-spacing: .12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; }
.up-link:hover { color: var(--gold2); }
.up-link.danger:hover { color: #ff7a6b; }

/* bildirim satırları */
.up-ntf-list { display: grid; gap: 4px; }
.up-ntf { display: flex; align-items: center; gap: 14px; padding: 11px 12px; color: #c9bba1; border-left: 2px solid transparent; transition: background .2s, border-color .2s, transform .2s; }
.up-ntf:hover { background: rgba(217,178,111,.06); border-left-color: var(--gold3); transform: translateX(2px); color: #f3e2bb; }
.up-ntf.unread { background: linear-gradient(90deg, rgba(200,29,51,.12), transparent 70%); border-left-color: var(--ember); color: #f3e7cf; }
.up-ntf-ic { width: 38px; height: 38px; flex: none; display: grid; place-items: center; color: var(--gold2); background: rgba(217,178,111,.08); border: 1px solid rgba(217,178,111,.2); transform: rotate(45deg); }
.up-ntf-ic .ic { transform: rotate(-45deg); width: 16px; height: 16px; }
.up-ntf-ic.t-msg { color: #8fb6ff; border-color: rgba(143,182,255,.3); background: rgba(143,182,255,.08); }
.up-ntf-ic.t-forum { color: #e2bd78; }
.up-ntf-ic.t-duyuru { color: #ff8f80; border-color: rgba(255,143,128,.3); background: rgba(200,29,51,.1); }
.up-ntf-t { min-width: 0; flex: 1; display: grid; gap: 3px; }
.up-ntf-t b { font: 500 15px/1.35 var(--f-body); }
.up-ntf-t small { font: 600 11px var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: #6f6656; }
.up-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff4057; box-shadow: 0 0 10px #ff4057; flex: none; }
.up-ntf-list.big .up-ntf { padding: 14px 14px; }
.up-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.up-filters .up-link, .up-filters .up-newt { margin-left: auto; }

/* konuşma satırları */
.up-conv { display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: #c9bba1; border-left: 2px solid transparent; transition: background .2s, border-color .2s; }
.up-conv:hover { background: rgba(217,178,111,.06); }
.up-conv.on { background: linear-gradient(90deg, rgba(217,178,111,.14), transparent); border-left-color: var(--gold2); }
.up-conv.unread { border-left-color: var(--ember); }
.up-conv img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px rgba(217,178,111,.35); }
.up-conv-t { min-width: 0; flex: 1; display: grid; gap: 2px; }
.up-conv-t b { font: 700 15px var(--f-body); color: #f3e2bb; }
.up-conv-t small { color: #8b7f6b; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-conv.unread .up-conv-t small { color: #e8dcc4; font-weight: 600; }
.up-conv-r { display: grid; justify-items: end; gap: 5px; flex: none; }
.up-conv-r time { font: 600 10px var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: #6f6656; }
.up-conv-r em { font: 700 11px/1 var(--f-head); font-style: normal; color: #fff; padding: 4px 7px; border-radius: 9px; background: linear-gradient(#e2283f, #a3172a); box-shadow: 0 0 10px rgba(226,40,63,.45); }

/* konu satırları */
.up-thr { display: flex; align-items: center; gap: 18px; padding: 14px 12px; border-bottom: 1px solid rgba(255,255,255,.04); transition: background .2s; }
.up-thr:hover { background: rgba(217,178,111,.05); }
.up-thr-main { flex: 1; min-width: 0; display: grid; gap: 4px; color: inherit; }
.up-thr-cat { font: 700 10px var(--f-head); letter-spacing: .26em; text-transform: uppercase; color: var(--ember2); }
.up-thr-main b { font: 600 17px/1.3 var(--f-body); color: #f3e7cf; transition: color .2s; }
.up-thr:hover .up-thr-main b { color: var(--gold2); }
.up-thr-main small { color: #7d7262; font-size: 13px; }
.up-thr-main small i { font-style: normal; color: #b6aa94; }
.up-thr-n { display: grid; text-align: center; flex: none; min-width: 64px; font: 600 9px var(--f-head); letter-spacing: .16em; text-transform: uppercase; color: #6f6656; }
.up-thr-n b { font: 700 19px var(--f-head); color: #e8dcc4; letter-spacing: 0; }
.up-follow { width: 38px; height: 38px; flex: none; display: grid; place-items: center; cursor: pointer; color: #6f6656; background: rgba(255,255,255,.02); border: 1px solid rgba(217,178,111,.16); transition: all .2s; }
.up-follow:hover { color: var(--gold2); border-color: var(--gold3); }
.up-follow.on { color: #1a0e06; background: linear-gradient(#f3dcaa, #c79b55); border-color: #f3dcaa; box-shadow: 0 0 14px rgba(243,220,170,.35); }
.up-follow .ic { width: 16px; height: 16px; }

/* karakter kartı */
.up-char { text-align: center; overflow: hidden; isolation: isolate; padding-top: 26px; }
.up-char-bg { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: 50% 25%; opacity: .32; filter: saturate(.9);
  -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 85%); mask-image: linear-gradient(180deg, #000 10%, transparent 85%); }
.up-char-k { font: 700 10px var(--f-head); letter-spacing: .34em; text-transform: uppercase; color: var(--ember2); }
.up-medal { width: 128px; height: 128px; margin: 14px auto 14px; border-radius: 50%; padding: 4px; position: relative;
  background: conic-gradient(from 200deg, #f3dcaa, #8f7140, #3a2b18, #8f7140, #f3dcaa); box-shadow: 0 0 0 4px rgba(0,0,0,.6), 0 0 40px rgba(226,189,120,.3); }
.up-medal img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: #000; transform: scale(1); }
.up-char h3 { margin: 0; font: 700 26px var(--f-display); color: #f6e6c3; }
.up-char small { display: block; margin-top: 4px; font: 600 11px var(--f-head); letter-spacing: .18em; text-transform: uppercase; color: #8b7f6b; }
.up-char p { margin: 14px auto 20px; max-width: 380px; color: #b6aa94; font: italic 400 15px/1.55 'Spectral', Georgia, serif; }
.up-char-btns { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; align-items: center; }
.up-char-btns .btn .ic { width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; }

/* profil düzenleme */
.up-avatar-edit { display: grid; gap: 14px; justify-items: center; }
.up-drop { position: relative; width: 100%; display: flex; align-items: center; gap: 24px; padding: 22px; cursor: pointer; overflow: hidden;
  border: 1px dashed rgba(217,178,111,.35); background: radial-gradient(80% 120% at 0% 50%, rgba(217,178,111,.08), transparent 70%); transition: border-color .25s, background .25s; text-transform: none; letter-spacing: 0; }
.up-drop:hover, .up-drop.over, .up-drop:focus-visible { border-color: #f3dcaa; background: radial-gradient(80% 120% at 0% 50%, rgba(217,178,111,.18), transparent 70%); outline: none; }
.up-drop.busy { pointer-events: none; opacity: .75; }
.up-av.big { width: 120px; height: 120px; }
.up-drop-t { display: grid; gap: 6px; }
.up-drop-t b { display: inline-flex; align-items: center; gap: 8px; font: 700 18px var(--f-display); color: var(--gold2); }
.up-drop-t small { color: #8b7f6b; font: 400 13px/1.5 var(--f-body); }
.up-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #c81d33, #f3dcaa); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.up-form { padding: 0; }
.up-cnt { float: right; color: #6f6656; letter-spacing: .06em; }
.up-form textarea { min-height: 100px; }
.up-cls-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 14px 0 16px; }
.up-ctab { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; color: #a99d88; background: rgba(255,255,255,.02); border: 1px solid rgba(217,178,111,.14);
  font: 700 13px var(--f-display); transition: all .2s; }
.up-ctab img { width: 18px; opacity: .7; }
.up-ctab:hover { color: #f3e2bb; border-color: rgba(217,178,111,.4); }
.up-ctab.on { color: #fff3d6; border-color: #f3dcaa; background: linear-gradient(180deg, rgba(200,29,51,.3), rgba(200,29,51,.06)); }
.up-ctab.on img { opacity: 1; filter: drop-shadow(0 0 6px rgba(243,220,170,.6)); }
.up-asc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.up-asc { display: grid; justify-items: center; gap: 4px; padding: 14px 8px 12px; cursor: pointer; color: var(--text); text-align: center;
  background: rgba(255,255,255,.02); border: 1px solid rgba(217,178,111,.12); transition: all .25s; }
.up-asc:hover { border-color: rgba(243,220,170,.45); transform: translateY(-3px); background: rgba(217,178,111,.06); }
.up-asc.on { border-color: #f3dcaa; background: linear-gradient(180deg, rgba(200,29,51,.28), rgba(217,178,111,.04)); box-shadow: 0 0 24px rgba(226,189,120,.18); }
.up-asc-art { width: 76px; height: 76px; border-radius: 50%; padding: 2px; margin-bottom: 6px; background: conic-gradient(from 200deg, #f3dcaa, #8f7140, #3a2b18, #8f7140, #f3dcaa); transition: box-shadow .25s; }
.up-asc.on .up-asc-art, .up-asc:hover .up-asc-art { box-shadow: 0 0 22px rgba(243,200,120,.45); }
.up-asc-art img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: #000; }
.up-asc b { font: 700 14px/1.2 var(--f-display); color: #f3e2bb; }
.up-asc small { font: 600 9px var(--f-head); letter-spacing: .2em; text-transform: uppercase; color: #6f6656; }
.up-asc.on small { color: var(--ember2); }

/* güvenlik */
.up-pwbox { position: relative; display: block; }
.up-pwbox .input { padding-right: 46px; }
.up-pwbox button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; background: none; border: 0; color: #6f6656; cursor: pointer; }
.up-pwbox button:hover { color: var(--gold2); }
.up-strength { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 6px; align-items: center; margin-top: -4px; }
.up-strength i { height: 4px; background: rgba(255,255,255,.07); transition: background .3s, box-shadow .3s; }
.up-strength span { font: 600 11px var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: #6f6656; min-width: 120px; text-align: right; }
.up-strength[data-s="1"] i:nth-child(-n+1) { background: #ff5a4a; box-shadow: 0 0 8px #ff5a4a; }
.up-strength[data-s="2"] i:nth-child(-n+2) { background: #e2bd78; box-shadow: 0 0 8px #e2bd78; }
.up-strength[data-s="3"] i:nth-child(-n+3) { background: #9fd36b; box-shadow: 0 0 8px #9fd36b; }
.up-strength[data-s="4"] i { background: #5fe08a; box-shadow: 0 0 8px #5fe08a; }
.up-sess { display: flex; align-items: center; gap: 14px; padding: 12px 14px; margin-bottom: 14px; background: rgba(95,224,138,.06); border: 1px solid rgba(95,224,138,.2); }
.up-sess-dot { width: 10px; height: 10px; border-radius: 50%; background: #5fe08a; box-shadow: 0 0 12px #5fe08a; animation: pulse 2s infinite; }
.up-sess b { display: block; color: #e8dcc4; font: 600 15px var(--f-body); }
.up-sess small { color: #7d7262; }
.up-card .btn.ghost.sm { margin-top: 16px; }
.up-tips { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.up-tips li { position: relative; padding-left: 18px; color: #a99d88; font-size: 14.5px; line-height: 1.5; }
.up-tips li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; transform: rotate(45deg); background: var(--ember2); }

/* mesaj kutusu */
.up-mb { display: grid; grid-template-columns: 330px minmax(0, 1fr); height: clamp(520px, calc(100vh - var(--hdr) - 160px), 820px);
  background: linear-gradient(180deg, rgba(20,16,13,.92), rgba(8,7,8,.96)); border: 1px solid rgba(217,178,111,.16); box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.up-mb-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid rgba(217,178,111,.12); background: rgba(0,0,0,.2); }
.up-mb-new { position: relative; padding: 14px; border-bottom: 1px solid rgba(217,178,111,.1); }
.up-mb-new .input { font-size: 14px; }
.up-sug { position: absolute; left: 14px; right: 14px; top: calc(100% - 8px); z-index: 5; background: #0f0c0a; border: 1px solid rgba(217,178,111,.25); box-shadow: 0 14px 30px rgba(0,0,0,.7); }
.up-sug:empty { display: none; }
.up-sug a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; color: #e8dcc4; }
.up-sug a:hover { background: rgba(217,178,111,.1); }
.up-sug img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.up-sug small { margin-left: auto; color: #6f6656; font-size: 12px; }
.up-sug p { margin: 0; padding: 12px; color: #6f6656; font-size: 14px; }
.up-mb-list { flex: 1; overflow: auto; padding: 6px 0; scrollbar-width: thin; scrollbar-color: #3a2f22 transparent; }
.up-mb-list .up-empty { margin: 12px; }
.up-mb-chat { display: flex; flex-direction: column; min-height: 0; min-width: 0; position: relative; isolation: isolate; }
.up-mb-chat::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .05; background: url(/assets/site/ui/logo.webp) center / 280px no-repeat; filter: grayscale(1); }
.up-mb-empty { margin: auto; text-align: center; padding: 30px; color: #7d7262; }
.up-mb-empty .ic { width: 48px; height: 48px; color: var(--gold3); }
.up-mb-empty h3 { margin: 12px 0 6px; font: 700 24px var(--f-display); color: var(--gold2); }
.up-mb-empty p { margin: 0; font: italic 400 15px 'Spectral', Georgia, serif; }
.up-mb-empty.small { padding: 40px 20px; }
.up-chat-head { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid rgba(217,178,111,.12); background: linear-gradient(90deg, rgba(217,178,111,.08), transparent); }
.up-chat-head img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(217,178,111,.4); }
.up-chat-head b { display: block; font: 700 17px var(--f-display); color: #f6e6c3; }
.up-chat-head small { color: #7d7262; font-size: 12px; }
.up-chat-head .role { margin: 0; }
.up-chat-head .danger { margin-left: auto; padding: 8px; }
.up-back { display: none; background: none; border: 0; color: var(--gold2); cursor: pointer; padding: 4px; }
.up-chat-scroll { flex: 1; overflow: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin; scrollbar-color: #3a2f22 transparent; }
.up-day { text-align: center; margin: 12px 0 6px; }
.up-day span { font: 600 10px var(--f-head); letter-spacing: .2em; text-transform: uppercase; color: #6f6656; padding: 4px 12px; border: 1px solid rgba(217,178,111,.12); background: rgba(0,0,0,.3); }
.up-msg { display: grid; justify-items: start; max-width: 74%; animation: upMsg .3s ease-out; }
.up-msg.mine { align-self: flex-end; justify-items: end; }
@keyframes upMsg { from { opacity: 0; transform: translateY(6px); } }
.up-bub { padding: 10px 14px; color: #e8dcc4; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere;
  background: linear-gradient(180deg, #221c17, #17130f); border: 1px solid rgba(217,178,111,.14); clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.up-msg.mine .up-bub { color: #fff1d8; background: linear-gradient(180deg, #7a1424, #4e0c17); border-color: rgba(226,40,63,.45); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); box-shadow: 0 6px 20px rgba(122,20,36,.25); }
.up-bub a { color: #f3dcaa; text-decoration: underline; }
.up-msg time { margin-top: 4px; font: 600 10px var(--f-head); letter-spacing: .1em; text-transform: uppercase; color: #5f574b; }
.up-compose { display: flex; gap: 10px; align-items: flex-end; padding: 14px 16px; border-top: 1px solid rgba(217,178,111,.12); background: rgba(0,0,0,.25); }
.up-compose textarea { flex: 1; resize: none; min-height: 44px; max-height: 160px; padding: 11px 14px; color: var(--text); font: 15px/1.45 var(--f-body); outline: none;
  background: rgba(0,0,0,.4); border: 1px solid rgba(217,178,111,.18); transition: border-color .2s, box-shadow .2s; }
.up-compose textarea:focus { border-color: rgba(243,220,170,.55); box-shadow: 0 0 0 3px rgba(217,178,111,.08); }
.up-send { width: 46px; height: 46px; flex: none; display: grid; place-items: center; cursor: pointer; color: #fff1d8; border: 1px solid rgba(226,40,63,.6);
  background: linear-gradient(180deg, #c81d33, #7a1424); box-shadow: 0 0 18px rgba(200,29,51,.35); transition: transform .2s, box-shadow .2s;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px); }
.up-send:hover { transform: translateY(-1px); box-shadow: 0 0 26px rgba(226,40,63,.55); }

/* konu sayfası: takip et ve mesaj bağlantısı */
.th-follow { display: inline-flex !important; align-items: center; gap: 8px; padding: 8px 14px; cursor: pointer; color: #e8dcc4; background: rgba(0,0,0,.35); border: 1px solid rgba(217,178,111,.35);
  font: 600 12px var(--f-head); letter-spacing: .16em; text-transform: uppercase; transition: all .2s; }
.th-follow svg { width: 15px; height: 15px; }
.th-follow:hover { border-color: #f3dcaa; color: #fff; }
.th-follow.on { color: #1a0e06; background: linear-gradient(#f3dcaa, #c79b55); border-color: #f3dcaa; }
.who-msg { display: block; margin-top: 8px; font: 600 11px var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: #a99d88; }
.who-msg:hover { color: var(--gold2); }

@media (max-width: 1100px) {
  .up-hero-in { flex-direction: column; align-items: flex-start; gap: 28px; }
  .up-grid, .up-grid.profile { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .up-hero { min-height: 0; }
  .up-hero-in { padding-top: 40px; padding-bottom: 30px; }
  .up-id { flex-direction: column; align-items: flex-start; gap: 18px; }
  .up-av { width: 112px; height: 112px; }
  .up-stats { grid-template-columns: repeat(3, 1fr); width: 100%; clip-path: none; }
  .up-stat { padding: 12px 6px; }
  .up-stat:nth-child(4)::before { display: none; }
  .up-stat b { font-size: 24px; }
  .up-tabs a { padding: 15px 12px 14px; font-size: 12px; letter-spacing: .1em; }
  .up-card { padding: 18px 16px 20px; }
  .up-thr { flex-wrap: wrap; gap: 10px; }
  .up-thr-main { flex-basis: 100%; }
  .up-thr-n { text-align: left; min-width: 0; display: flex; gap: 5px; align-items: baseline; }
  .up-thr-n b { font-size: 15px; }
  .up-follow { margin-left: auto; }
  .up-drop { flex-direction: column; text-align: center; }
  .up-cls-tabs { grid-template-columns: repeat(2, 1fr); }
  .up-mb { grid-template-columns: 1fr; height: calc(100vh - var(--hdr) - 70px); }
  .up-mb-side { border-right: 0; }
  .up-mb .up-mb-chat { display: none; }
  .up-mb.chat-open .up-mb-side { display: none; }
  .up-mb.chat-open .up-mb-chat { display: flex; }
  .up-back { display: grid; }
  .up-msg { max-width: 88%; }
  .up-strength span { min-width: 0; }
  .up-filters .up-link, .up-filters .up-newt { margin-left: 0; }
}

/* form ince ayarları */
.up-form label[hidden] { display: none; }
.up-form label { position: relative; }
.up-form .up-cnt { position: absolute; right: 0; top: 0; float: none; }

/* ---------- sürgün kartı ---------- */
.pc-holo { position: relative; width: 500px; max-width: 100%; aspect-ratio: 540 / 784; margin: 0 auto; transition: transform .25s ease-out; transform-style: preserve-3d; will-change: transform; }
.pc-canvas { display: block; width: 100%; height: 100%; filter: drop-shadow(0 30px 50px rgba(0,0,0,.75)); }
/* hareketli parıltı: kart biçiminde kırpılır, imleçle kayar */
.pc-holo::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .0; transition: opacity .35s;
  clip-path: inset(22.5% 12.5% 1.2% 12.5%);
  background:
    radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255,236,190,.38), transparent 42%),
    linear-gradient(115deg, transparent 28%, rgba(255,220,160,.16) 44%, rgba(255,255,255,.08) 50%, rgba(200,140,255,.12) 56%, transparent 70%);
  background-size: 100% 100%, 250% 250%; background-position: 0 0, var(--gx, 50%) var(--gy, 50%); }
.pc-holo:hover::after { opacity: 1; }
.pc-holo.sm { width: 300px; }

.pc-wrap { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 36px; align-items: start; }
.pc-stage { position: sticky; top: calc(var(--hdr) + 96px); display: grid; justify-items: center; gap: 18px; padding: 10px 0 20px; isolation: isolate; }
.pc-aura { position: absolute; left: 50%; top: 40%; width: 520px; height: 620px; max-width: 120%; transform: translate(-50%, -50%); z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(200,29,51,.22), rgba(226,189,120,.08) 55%, transparent); filter: blur(10px); animation: pcAura 6s ease-in-out infinite alternate; }
@keyframes pcAura { to { transform: translate(-50%, -50%) scale(1.08); opacity: .75; } }
.pc-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; align-items: center; }
.pc-actions .btn .ic { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
.pc-state { margin: 0; font: 600 11px var(--f-head); letter-spacing: .16em; text-transform: uppercase; color: #6f8a5f; }
.pc-state.warn { color: var(--ember2); }
.pc-ctrl { display: grid; gap: 24px; min-width: 0; }
.pc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pc-field { display: grid; gap: 10px; margin-top: 18px; }
.pc-lab { font: 700 11px var(--f-head); letter-spacing: .24em; text-transform: uppercase; color: var(--gold2); display: flex; justify-content: space-between; }
.pc-lab em { font-style: normal; color: #6f6656; letter-spacing: .06em; }
.pc-lvl-in { display: flex; align-items: stretch; border: 1px solid rgba(217,178,111,.25); background: rgba(0,0,0,.35); width: max-content; }
.pc-lvl-in button { width: 40px; background: none; border: 0; color: var(--gold2); font-size: 20px; cursor: pointer; transition: background .2s; }
.pc-lvl-in button:hover { background: rgba(217,178,111,.12); }
.pc-lvl-in input { width: 74px; text-align: center; background: none; border: 0; border-left: 1px solid rgba(217,178,111,.15); border-right: 1px solid rgba(217,178,111,.15);
  color: #f6e6c3; font: 700 26px var(--f-display); padding: 6px 0; outline: none; -moz-appearance: textfield; }
.pc-lvl-in input::-webkit-outer-spin-button, .pc-lvl-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pc-lvl input[type=range] { width: 100%; accent-color: #c81d33; }
.pc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-chips .chip { padding: 7px 11px; }
.pc-rar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.pc-rar button { --c: #fff; display: grid; justify-items: center; gap: 8px; padding: 12px 4px 10px; cursor: pointer; color: var(--c); background: rgba(0,0,0,.3);
  border: 1px solid rgba(217,178,111,.14); font: 700 13px var(--f-display); transition: all .2s; }
.pc-rar button i { width: 14px; height: 14px; transform: rotate(45deg); background: var(--c); box-shadow: 0 0 12px var(--c); }
.pc-rar button:hover { border-color: var(--c); }
.pc-rar button.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: inset 0 0 20px color-mix(in srgb, var(--c) 18%, transparent); }
.pc-cls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 16px; }
.pc-cls button { position: relative; display: flex; align-items: center; gap: 7px; padding: 9px 10px; cursor: pointer; color: #a99d88; background: rgba(255,255,255,.02);
  border: 1px solid rgba(217,178,111,.14); font: 700 13px var(--f-display); transition: all .2s; }
.pc-cls button img { width: 16px; opacity: .7; }
.pc-cls button em { position: absolute; top: -7px; right: 6px; font: 700 8px var(--f-head); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: #1a0e06; background: var(--ember2); padding: 2px 5px; }
.pc-cls button:hover { color: #f3e2bb; border-color: rgba(217,178,111,.4); }
.pc-cls button.on { color: #fff3d6; border-color: #f3dcaa; background: linear-gradient(180deg, rgba(200,29,51,.3), rgba(200,29,51,.06)); }
.pc-cls button.on img { opacity: 1; }
.pc-arts { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; animation: upIn .35s ease-out; }
.pc-art { display: grid; gap: 3px; padding: 0 0 10px; cursor: pointer; text-align: center; color: var(--text); background: rgba(0,0,0,.3); border: 1px solid rgba(217,178,111,.14); overflow: hidden; transition: all .25s; }
.pc-thumb { display: block; aspect-ratio: 180 / 210; overflow: hidden; margin-bottom: 6px; position: relative; }
.pc-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(6,5,6,.85)); }
.pc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; filter: saturate(.8) brightness(.85); }
.pc-art:hover { border-color: rgba(243,220,170,.5); transform: translateY(-3px); }
.pc-art:hover .pc-thumb img { transform: scale(1.07); filter: none; }
.pc-art.on { border-color: #f3dcaa; box-shadow: 0 0 0 1px #f3dcaa, 0 0 24px rgba(226,189,120,.3); }
.pc-art.on .pc-thumb img { filter: none; }
.pc-art b { font: 700 14px/1.15 var(--f-display); color: #f3e2bb; padding: 0 6px; }
.pc-art small { font: 600 9px var(--f-head); letter-spacing: .2em; text-transform: uppercase; color: #6f6656; }
.pc-art.on small { color: var(--ember2); }

/* genel bakış kartı ve çağrı */
.up-mycard { padding-bottom: 28px; }
.up-mycard .pc-holo { width: 360px; }
.up-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font: 600 12px var(--f-head); letter-spacing: .16em; text-transform: uppercase; color: var(--ember2); }
.up-cta:hover { color: #fff3d6; }

/* forumda herkese açık kart penceresi */
.modal.uc-modal { width: 900px; padding: 0; background: radial-gradient(70% 90% at 25% 40%, rgba(200,29,51,.16), transparent 70%), linear-gradient(180deg, #120e0c, #070607); border: 1px solid rgba(217,178,111,.25); }
.uc-body { position: relative; display: grid; grid-template-columns: 400px 1fr; gap: 30px; padding: 30px; align-items: center; }
.uc-body > .loading-row, .uc-body > .err-box { grid-column: 1 / -1; }
.uc-x { position: absolute; right: 14px; top: 14px; width: 36px; height: 36px; display: grid; place-items: center; font-size: 22px; cursor: pointer; color: #c9bba1; background: rgba(0,0,0,.4); border: 1px solid rgba(217,178,111,.25); transition: all .25s; z-index: 2; }
.uc-x:hover { color: #fff; border-color: var(--ember); transform: rotate(90deg); }
.uc-info h3 { margin: 10px 0 8px; font: 700 clamp(28px, 3.4vw, 40px)/1.05 var(--f-display); text-shadow: 0 0 24px currentColor; overflow-wrap: anywhere; }
.uc-note { color: #7d7262; font: italic 400 14px 'Spectral', Georgia, serif; }
.uc-bio { margin: 14px 0 0; color: #d0c4ac; font: italic 400 17px/1.5 'Spectral', Georgia, serif; }
.uc-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; margin: 22px 0; border: 1px solid rgba(217,178,111,.16); width: max-content; max-width: 100%; }
.uc-stats div { padding: 12px 18px; text-align: center; }
.uc-stats div + div { border-left: 1px solid rgba(217,178,111,.12); }
.uc-stats b { display: block; font: 700 18px var(--f-head); color: #f6e6c3; }
.uc-stats span { font: 600 9px var(--f-head); letter-spacing: .2em; text-transform: uppercase; color: #7d7262; }
.uc-btns .btn { margin-left: 0; }
button.who-av { border: 0; cursor: pointer; transition: transform .25s, box-shadow .25s; }
button.who-av:hover { transform: scale(1.05); box-shadow: 0 0 24px rgba(226,189,120,.45); }
.who-name, .th-author { cursor: pointer; }
.who-name:hover { color: #fff3d6; text-decoration: underline; text-decoration-color: rgba(226,189,120,.5); text-underline-offset: 4px; }

@media (max-width: 1100px) {
  .pc-wrap { grid-template-columns: 1fr; }
  .pc-stage { position: relative; top: 0; }
}
@media (max-width: 760px) {
  .pc-row { grid-template-columns: 1fr; gap: 0; }
  .pc-rar { grid-template-columns: repeat(3, 1fr); }
  .pc-cls { grid-template-columns: repeat(2, 1fr); }
  .pc-holo { width: 300px; }
  .uc-body { grid-template-columns: 1fr; padding: 22px 16px; justify-items: center; text-align: center; }
  .uc-body .pc-holo { width: 260px; }
  .uc-stats { margin: 18px auto; }
}
/* önizleme kartı ekran yüksekliğine sığsın */
.pc-stage .pc-holo { width: min(420px, calc((100vh - var(--hdr) - 220px) * 540 / 784)); }
@media (max-width: 1100px) { .pc-stage .pc-holo { width: min(380px, 100%); } }
/* kartın arkasındaki ışık mobilde yatay kaydırma yaratmasın */
.up-body { overflow-x: clip; }

/* ascendancy kahraman görseli: yuvarlak sanat sağda, kenarları erir; arka plan aynı görselin bulanık hali */
.up-art.asc { background-size: cover; background-position: center; filter: blur(48px) saturate(1.25) brightness(.55); transform: scale(1.3); animation: none; }
.up-asc-img { position: absolute; z-index: -4; left: 64%; top: 52%; width: min(860px, 70vw); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: center / contain no-repeat; pointer-events: none; animation: upAscIn 1.4s cubic-bezier(.2,.8,.2,1) both;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 52%, transparent 96%); mask-image: radial-gradient(circle closest-side, #000 52%, transparent 96%); }
.up-asc-img[hidden] { display: none; }
@keyframes upAscIn { from { opacity: 0; transform: translate(-50%, -48%) scale(1.06); } }
.up-char-bg.asc { background-size: 140%; background-position: center 40%; }
@media (max-width: 760px) {
  .up-asc-img { left: 70%; top: 35%; width: 520px; opacity: .55; }
}