/* mir4.live — sade koyu tema. Mor yalnızca hero'da; geri kalanı nötr. */
:root {
  --bg: #0a0a0c;
  --surface: #111115;
  --surface2: #17171c;
  --line: rgba(255,255,255,.08);
  --line2: rgba(255,255,255,.16);
  --text: #f3f3f6;
  --muted: #8d8d99;
  --accent: #7136fa;
  --accent2: #9a6bff;
  --radius: 24px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --display: "Clash Display", "Inter", "Noto Sans Arabic", "Noto Sans Thai", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", system-ui, sans-serif;
  --body: "Inter", "Noto Sans Arabic", "Noto Sans Thai", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, select { font-family: inherit; }
.wrap { width: min(1240px, 100% - 48px); margin-inline: auto; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
::selection { background: var(--accent); color: #fff; }

/* ince, nötr scrollbar */
html { scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #2a2a31 var(--bg); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2a2a31; border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #3b3b44; }

/* Latin dışı diller */
.lang-zh, .lang-ja, .lang-ko, .lang-th, .lang-ar { --display: var(--body); }
.lang-zh .mega, .lang-ja .mega, .lang-ko .mega, .lang-th .mega, .lang-ar .mega,
.lang-zh .big, .lang-ja .big, .lang-ko .big, .lang-th .big, .lang-ar .big { font-weight: 800; letter-spacing: 0; }

/* ---------- scroll ilerleme çubuğu ---------- */
.progress { position: fixed; top: 0; inset-inline: 0; height: 2px; z-index: 100; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--accent), var(--accent2)); }
[dir="rtl"] .progress { transform-origin: 100% 50%; }

/* ---------- NAV ---------- */
.nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(10,10,12,.4); border-bottom: 1px solid transparent; transition: transform .5s var(--ease), background .3s, border-color .3s; }
.nav.scrolled { background: rgba(10,10,12,.82); border-color: var(--line); }
.nav.hide { transform: translateY(-100%); }
.nav-inner { display: flex; align-items: center; gap: 14px; height: 72px; }
.brand { display: inline-flex; align-items: center; transition: opacity .2s, scale .35s var(--ease); }
.brand img { display: block; height: 40px; width: auto; }
.brand:hover { opacity: .85; scale: 1.04; }
.nav-links { display: flex; gap: 4px; margin-inline-end: auto; padding-inline-start: 14px; }
.nav-links a { position: relative; padding: 8px 16px; border-radius: 999px; color: var(--muted); font-weight: 500; font-size: 15px; transition: color .25s, background .25s, transform .3s var(--ease); }
.nav-links a::after { content: ""; position: absolute; inset-inline: 16px; bottom: 4px; height: 1.5px; background: currentColor; transform: scaleX(0); transition: transform .4s var(--ease); }
.nav-links a:hover { color: var(--text); background: rgba(255,255,255,.05); transform: translateY(-1px); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--text); }

/* Dil seçici */
.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.02); font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--text); transition: background .25s, border-color .25s, transform .3s var(--ease); user-select: none; }
.lang summary svg { transition: transform .6s var(--ease); }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover, .lang[open] summary { background: rgba(255,255,255,.07); border-color: var(--line2); transform: translateY(-2px); }
.lang summary:hover svg, .lang[open] summary svg { transform: rotate(180deg); }
.lang-menu { position: absolute; inset-inline-end: 0; top: calc(100% + 12px); width: min(420px, 90vw); max-height: 70vh; overflow: auto; padding: 10px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; border-radius: 20px; border: 1px solid var(--line); background: rgba(17,17,21,.97); backdrop-filter: blur(20px); box-shadow: 0 30px 80px -20px rgba(0,0,0,.8); animation: pop .35s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
.lang-menu a { padding: 10px 14px; border-radius: 12px; font-size: 14.5px; color: var(--muted); transition: background .2s, color .2s, transform .3s var(--ease); }
.lang-menu a:hover { background: rgba(255,255,255,.07); color: var(--text); transform: translateX(4px); }
[dir="rtl"] .lang-menu a:hover { transform: translateX(-4px); }
.lang-menu a.on { background: rgba(255,255,255,.1); color: #fff; }

/* ---------- BUTONLAR (hepsinde hover: kalkma, parlama, basılma) ---------- */
.btn {
  --lift: 0px;
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 56px; padding: 0 32px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  font: 600 16px var(--body); white-space: nowrap; color: var(--text);
  transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) + var(--lift)), 0);
  transition: transform .4s var(--ease), box-shadow .35s, background-color .3s, border-color .3s, color .3s;
}
.btn > span { position: relative; z-index: 2; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%); transform: translateX(-130%) skewX(-18deg); transition: transform .9s var(--ease); pointer-events: none; }
[dir="rtl"] .btn::before { transform: translateX(130%) skewX(18deg); }
.btn:hover { --lift: -3px; }
.btn:hover::before { transform: translateX(130%) skewX(-18deg); }
[dir="rtl"] .btn:hover::before { transform: translateX(-130%) skewX(18deg); }
.btn:active { --lift: 0px; transform: translate3d(var(--mx, 0px), var(--my, 0px), 0) scale(.95); transition-duration: .12s; }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.btn-primary { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent2)); background-size: 160% 160%; box-shadow: 0 10px 36px -10px rgba(113,54,250,.8); animation: gradshift 6s ease-in-out infinite alternate; }
.btn-primary:hover { box-shadow: 0 18px 50px -10px rgba(154,107,255,.85); }
@keyframes gradshift { to { background-position: 100% 50%; } }

.btn-light { color: #0a0a0c; background: #f3f3f6; }
.btn-light::before { background: linear-gradient(110deg, transparent 30%, rgba(113,54,250,.35) 50%, transparent 70%); }
.btn-light:hover { background: #fff; box-shadow: 0 14px 40px -12px rgba(255,255,255,.45); }

.btn-ghost { background: transparent; border-color: var(--line2); color: var(--text); }
.btn-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.34); box-shadow: 0 14px 40px -16px rgba(255,255,255,.25); }

.btn-small { height: 40px; padding: 0 20px; font-size: 14px; }
.ripple, .btn > .ripple { position: absolute; z-index: 1; border-radius: 50%; background: rgba(255,255,255,.4); transform: scale(0); animation: ripple .7s var(--ease) forwards; pointer-events: none; }
.btn-light .ripple { background: rgba(10,10,12,.2); }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* ---------- TİPOGRAFİ ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 12px var(--accent2); animation: pulse 1.8s infinite; }
@keyframes pulse { 50% { opacity: .3; transform: scale(.7); } }
.mega { font-family: var(--display); font-weight: 700; margin: 0; line-height: .94; letter-spacing: -.02em; font-size: clamp(50px, 9.2vw, 138px); overflow-wrap: anywhere; }
.mega .line { display: block; }
.big { font-family: var(--display); font-weight: 700; margin: 0 0 24px; line-height: 1.04; letter-spacing: -.02em; font-size: clamp(36px, 6vw, 84px); overflow-wrap: anywhere; }
.dim, .dim .wi { color: #5d5d68; }
.grad, .grad .wi { background: linear-gradient(120deg, var(--accent), var(--accent2) 55%, #c4a8ff 80%, var(--accent)); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear infinite; }
@keyframes shimmer { to { background-position: -220% 0; } }
.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); max-width: 520px; margin: 28px 0; }
.lead.narrow { max-width: 640px; margin-top: 0; }

/* Başlık kelime animasyonu */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.wi { display: inline-block; transform: translateY(115%) rotate(4deg); transition: transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.in .wi, [data-split].in .wi { transform: none; }
.js [data-split] { visibility: hidden; animation: showfb 0s 3s forwards; }
.js [data-split].ready { visibility: visible; }
.js .reveal { opacity: 0; transform: translateY(36px); transition: opacity .9s var(--ease), transform .9s var(--ease), translate .5s var(--ease), border-color .3s, background-color .3s, box-shadow .3s; transition-delay: var(--d, 0s); animation: revealfb 0s 3.5s forwards; }
.js .reveal.done { transition: translate .5s var(--ease), border-color .3s, background-color .3s, box-shadow .3s; transition-delay: 0s; }
.js .reveal.in { opacity: 1; transform: none; }
@keyframes showfb { to { visibility: visible; } }
@keyframes revealfb { to { opacity: 1; transform: none; } }

/* ---------- HERO (mor sadece burada) ---------- */
.hero { position: relative; isolation: isolate; margin-top: -72px; min-height: max(760px, 100svh); display: flex; align-items: center; padding: 150px 0 90px; overflow: hidden; }
/* Görsel opaklığı tek yerden: --hero-img. Alt kısım maske ile tamamen şeffaflaşıp site rengine karışır. */
.hero { --hero-img: .15; }
.hero-bg { position: absolute; inset: 0; z-index: -2; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 12%, rgba(0,0,0,.45) 38%, transparent 72%); mask-image: linear-gradient(180deg, #000 0%, #000 12%, rgba(0,0,0,.45) 38%, transparent 72%); }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; z-index: -1; pointer-events: none; background: linear-gradient(180deg, transparent, var(--bg) 88%); }
.hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% 22%; opacity: var(--hero-img); filter: saturate(.3) contrast(.95); transform: translate3d(0, calc(var(--hp, 0) * 60px), 0) scale(calc(1.04 + var(--hp, 0) * .06)); will-change: transform; animation: bgin 1.8s var(--ease) both; }
@keyframes bgin { from { opacity: 0; transform: scale(1.14); } }
.hero-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
#embers { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-inner { position: relative; }
.hero-copy { max-width: 880px; transform: translate3d(0, calc(var(--hp, 0) * -50px), 0); opacity: calc(1 - var(--hp, 0) * 1.1); will-change: transform, opacity; }
.hero-copy .mega { margin-block: 22px 28px; }
.hero-copy .lead { max-width: 560px; margin-bottom: 36px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero .eyebrow { color: #d6c6ff; }

/* ---------- MARQUEE ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 18px 0; margin-top: 40px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: 40px; width: max-content; direction: ltr; font-family: var(--display); font-size: 26px; font-weight: 600; white-space: nowrap; color: #4a4a54; transform: skewX(var(--skew, 0deg)); animation: slide 40s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; color: #6b6b77; }
.marquee b { color: #2e2e36; font-weight: 400; }
@keyframes slide { to { transform: translateX(-50%) skewX(var(--skew, 0deg)); } }

/* ---------- STATS ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.stat { padding: 28px 8px; text-align: center; border-inline-end: 1px solid var(--line); }
.stat:last-child { border-inline-end: 0; }
.stat strong { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(40px, 6vw, 80px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 10px; color: var(--muted); font-size: 14px; }

/* ---------- BÖLÜMLER ---------- */
.section { position: relative; padding: clamp(80px, 11vw, 150px) 0 0; }

/* Kartlar (nötr, ince imleç ışığı) */
.spot { --sx: 50%; --sy: 50%; position: relative; overflow: hidden; }
.spot::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(380px circle at var(--sx) var(--sy), rgba(255,255,255,.06), transparent 60%); }
.spot:hover::before { opacity: 1; }
.spot > * { position: relative; }

.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.card { padding: 34px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); transition: border-color .3s, background-color .3s, translate .5s var(--ease); }
.card:hover { border-color: var(--line2); background: var(--surface2); translate: 0 -4px; }
.card-wide { grid-column: span 2; }
.card-k { font-family: var(--display); font-size: 14px; color: var(--muted); letter-spacing: .15em; }
.card h3 { font-family: var(--display); font-size: clamp(22px, 2.4vw, 30px); margin: 14px 0 10px; line-height: 1.14; }
.card p { margin: 0; color: var(--muted); max-width: 46ch; }

/* Boss timer yönlendirme (anasayfa) */
.teaser { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: center; padding: clamp(32px, 5vw, 64px); border-radius: 32px; background: var(--surface); border: 1px solid var(--line); }
.teaser .big { margin-bottom: 18px; }
.teaser .lead { margin-bottom: 28px; }
.chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.chips a { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg); font-weight: 500; transition: border-color .25s, translate .4s var(--ease), background-color .25s; }
.chips a:hover { border-color: var(--line2); background: var(--surface2); translate: 6px 0; }
[dir="rtl"] .chips a:hover { translate: -6px 0; }
.chips i { font-style: normal; font-size: 13px; color: var(--muted); padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.06); }

/* ---------- BOSS TIMERS SAYFASI ---------- */
.bt-head { padding-top: 64px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin-top: 36px; }
.field, .clock { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 12px 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); min-width: 190px; }
.field span, .clock span { font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.clock strong { font-family: var(--display); font-size: 24px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.field select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: var(--text); font-size: 16px; font-weight: 600; padding: 2px 22px 2px 0; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238d8d99' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; }
[dir="rtl"] .field select { padding: 2px 0 2px 22px; background-position: left 2px center; }
.field select option { background: var(--surface); color: var(--text); }
.field { transition: border-color .25s, translate .35s var(--ease); }
.field:hover { border-color: var(--line2); translate: 0 -2px; }

.bt { padding-top: 48px; }
.bt-layout { display: grid; grid-template-columns: 320px 1fr; gap: 28px; align-items: start; }
.bt-menu { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 112px); overflow-x: hidden; overflow-y: auto; padding: 2px 10px 2px 2px; margin: -2px -10px -2px -2px; scrollbar-width: none; overscroll-behavior: auto; }
.bt-menu::-webkit-scrollbar { display: none; }
[dir="rtl"] .bt-menu { padding: 2px 2px 2px 10px; margin: -2px -2px -2px -10px; }
.bt-tab { display: block; width: 100%; text-align: start; color: var(--text); cursor: pointer; padding: 14px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); transition: border-color .3s, background-color .3s, translate .45s var(--ease); }
.bt-tab::after { content: ""; position: absolute; inset-inline-start: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 3px; background: var(--accent); transform: scaleY(0); transition: transform .45s var(--ease); }
.bt-tab:hover { border-color: var(--line2); background: var(--surface2); translate: 5px 0; }
[dir="rtl"] .bt-tab:hover { translate: -5px 0; }
.bt-tab[aria-selected="true"] { border-color: var(--line2); background: var(--surface2); }
.bt-tab[aria-selected="true"]::after { transform: scaleY(1); }
.tab-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tab-name { font-family: var(--display); font-size: 17px; font-weight: 600; }
.tab-count { font-size: 12px; color: var(--muted); padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.06); }
.tab-next { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 12px; margin-top: 8px; }
.tab-next small { display: none; }
.tab-next b { font-family: var(--display); font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.tab-next em { font-style: normal; color: var(--muted); font-size: 12px; text-align: end; max-width: 120px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-tab.live .tab-next b { color: #fff; }
.bt-tab.live .tab-next b::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 8px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 10px var(--accent2); animation: pulse 1.4s infinite; vertical-align: middle; }

.panel-title { font-family: var(--display); font-size: clamp(26px, 3vw, 40px); margin: 0 0 20px; letter-spacing: -.01em; }
.bt-panel.enter .row, .bt-panel.enter .panel-title { animation: rowin .6s var(--ease) both; }
.bt-panel.enter .row:nth-of-type(2) { animation-delay: .04s; }
.bt-panel.enter .row:nth-of-type(3) { animation-delay: .08s; }
.bt-panel.enter .row:nth-of-type(4) { animation-delay: .12s; }
.bt-panel.enter .row:nth-of-type(n+5) { animation-delay: .16s; }
.row[hidden], .bt-panel[hidden] { display: none; }
@keyframes rowin { from { opacity: 0; transform: translateY(18px); } }
.row { display: grid; grid-template-columns: 1fr auto; gap: 6px 28px; align-items: center; padding: 20px 24px; margin-bottom: 10px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); transition: border-color .3s, background-color .3s, translate .45s var(--ease); }
.row:hover { border-color: var(--line2); background: var(--surface2); translate: 0 -3px; }
.row.live { border-color: rgba(113,54,250,.7); }
.row-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row-tags:empty, .row-tags:not(:has(:not([hidden]))) { display: none; }
.pill, .lv { padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .02em; background: rgba(255,255,255,.07); color: var(--muted); border: 1px solid transparent; transition: background .25s, color .25s, border-color .25s, scale .3s var(--ease); }
.pill:hover { scale: 1.06; }
.lv { color: #cfcfd8; border-color: var(--line); }
.pill[hidden] { display: none; }
.p-1 { background: rgba(255,99,99,.14); color: #ff8f8f; border-color: rgba(255,99,99,.35); }
.p-2 { background: rgba(255,163,72,.14); color: #ffb86b; border-color: rgba(255,163,72,.32); }
.p-3 { background: rgba(240,205,80,.12); color: #efd36c; border-color: rgba(240,205,80,.28); }
.p-4 { background: rgba(96,165,250,.12); color: #8fbcf5; border-color: rgba(96,165,250,.28); }
.p-5 { background: rgba(255,255,255,.06); color: #b4b4c0; border-color: var(--line2); }
.p-live { background: #f3f3f6; color: #0a0a0c; animation: pillpulse 1.6s infinite; }
@keyframes pillpulse { 50% { opacity: .55; } }
.field.search { flex: 1 1 280px; }
.field.search input { background: transparent; border: 0; outline: 0; color: var(--text); font-size: 16px; font-weight: 500; padding: 2px 0; width: 100%; }
.field.search input::placeholder { color: var(--muted); }
.field.search:focus-within { border-color: var(--line2); }
.bt-empty { padding: 24px 4px; }
.row h3 { font-family: var(--display); font-size: clamp(19px, 1.8vw, 24px); line-height: 1.15; margin: 4px 0 2px; }
.row p { margin: 0; }
.row-time { text-align: end; min-width: 230px; }
.countdown { font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.2vw, 42px); letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.row.live .countdown { color: #fff; }
.bar { height: 3px; border-radius: 4px; background: rgba(255,255,255,.07); overflow: hidden; margin: 10px 0 8px; }
.bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); border-radius: 4px; background: linear-gradient(90deg, #5d5d68, #f3f3f6); transition: width 1s linear; }
.row.live .bar i { background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.row-actions { grid-column: 1 / -1; display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); margin-top: 8px; }
.bt-note { margin: 24px 4px 0; max-width: 70ch; }

/* ---------- CTA / 404 / FOOTER ---------- */
.cta { padding-bottom: 40px; }
.notfound { padding: 140px 0; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 960px) {
  .teaser { grid-template-columns: 1fr; }
  .hero { padding: 130px 0 140px; }
  .hero-bg img { object-position: 74% 20%; }
  .bento { grid-template-columns: 1fr; }
  .card-wide { grid-column: auto; }
  .nav-links { display: none; }
  .brand { margin-inline-end: auto; }
  .stat strong { font-size: clamp(32px, 9vw, 56px); }
  .bt-layout { grid-template-columns: 1fr; }
  .bt-menu { position: static; flex-direction: row; overflow-x: auto; max-height: none; padding-bottom: 6px; scroll-snap-type: x mandatory; }
  .bt-tab { min-width: 210px; scroll-snap-align: start; }
  .bt-tab:hover, [dir="rtl"] .bt-tab:hover { translate: none; }
}
@media (max-width: 640px) {
  .row { grid-template-columns: 1fr; padding: 22px; }
  .row-time { text-align: start; min-width: 0; }
  .toolbar > * { flex: 1 1 100%; }
}
@media (max-width: 520px) {
  .nav .btn-small { display: none; }
  .btn { height: 52px; padding: 0 24px; }
  .stats { gap: 6px; }
  .stat span { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-copy { transform: none; opacity: 1; }
  *, *::before, *::after { animation: none !important; }
  .js .reveal, .wi { opacity: 1 !important; transform: none !important; }
  .js [data-split] { visibility: visible; }
  .hero-fx canvas { display: none; }
}

/* ---------- Boss menüsü: grup, canlı parlama ---------- */
.bt-item { display: block; }
.bt-ghead .tab-top { gap: 8px; }
.bt-ghead .tab-name { margin-inline-end: auto; }
.bt-ghead .chev { color: var(--muted); transition: transform .45s var(--ease); flex: none; }
.bt-group.open .chev { transform: rotate(180deg); }
.bt-group.has-active > .bt-ghead { border-color: var(--line2); background: var(--surface2); }
.bt-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.bt-group.open .bt-sub { grid-template-rows: 1fr; }
.bt-sub-in { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 6px; margin-inline-start: 14px; padding-inline: 10px 8px; border-inline-start: 1px solid var(--line); opacity: 0; transition: opacity .4s; }
.bt-group.open .bt-sub-in { opacity: 1; padding-top: 8px; }
.bt-sub .bt-tab { padding: 11px 14px; border-radius: 13px; }
.bt-sub .tab-name { font-size: 15px; }
.bt-sub .tab-next b { font-size: 18px; }
.bt-tab.flash, .row.flash { animation: flash 1.8s var(--ease); }
@keyframes flash { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.0); } 18% { box-shadow: 0 0 0 1px rgba(255,255,255,.55), 0 0 34px rgba(255,255,255,.22); background-color: rgba(255,255,255,.1); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
.bt-tab.live { border-color: var(--line2); }

/* ---------- SPA geçiş ---------- */
/* yumuşak sayfa geçişi: eski içerik solar, yenisi hafifçe yükselerek gelir */
main { transition: opacity .5s cubic-bezier(.4,0,.6,1), transform .5s cubic-bezier(.4,0,.6,1); }
main.leaving { opacity: 0; transform: translateY(10px); }
main.entering { transition: opacity 1.1s cubic-bezier(.22,1,.36,1), transform 1.3s cubic-bezier(.22,1,.36,1); }
.noanim .reveal, .noanim .wi { transition: none !important; animation: none !important; }

/* ---------- Modern açılır liste ---------- */
.field { position: relative; }
.field:has(.dd.open) { z-index: 40; }
.dd { position: relative; }
.dd-btn { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; background: transparent; border: 0; color: var(--text); font: inherit; font-size: 16px; font-weight: 600; padding: 2px 0; cursor: pointer; text-align: start; }
.dd-chev { color: var(--muted); transition: transform .4s var(--ease), color .2s; flex: none; }
.dd-btn:hover .dd-chev { color: var(--text); }
.dd.open .dd-chev { transform: rotate(180deg); color: var(--text); }
.dd-menu { position: absolute; inset-inline: -20px; top: calc(100% + 18px); min-width: 230px; margin: 0; padding: 6px; list-style: none; border-radius: 16px; border: 1px solid var(--line2); background: rgba(20,20,26,.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 24px 60px rgba(0,0,0,.55); opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.97); transform-origin: top; transition: opacity .25s, transform .35s var(--ease), visibility 0s .25s; max-height: 320px; overflow: auto; }
.dd.open .dd-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .35s var(--ease); }
.dd-menu li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: 11px; font-size: 15px; font-weight: 500; cursor: pointer; color: var(--muted); transition: background .2s, color .2s, padding .3s var(--ease); }
.dd-menu li svg { opacity: 0; color: var(--text); transition: opacity .2s; }
.dd-menu li:hover { background: rgba(255,255,255,.07); color: var(--text); padding-inline-start: 18px; }
.dd-menu li[aria-selected="true"] { color: var(--text); background: rgba(255,255,255,.05); }
.dd-menu li[aria-selected="true"] svg { opacity: 1; }

/* ---------- Footer ---------- */
.footer { position: relative; margin-top: 140px; border-top: 1px solid var(--line); padding: 90px 0 0; overflow: hidden; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: start; }
.foot-big { font-family: var(--display); font-weight: 700; font-size: clamp(40px, 6vw, 84px); line-height: .98; letter-spacing: -.03em; margin: 18px 0 34px; }
.foot-big .dim { color: #55555f; }
.foot-cta .eyebrow .dash { margin-inline-end: 6px; }
.foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; padding-top: 10px; }
.foot-cols h4 { margin: 0 0 18px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.foot-cols a { display: block; width: fit-content; padding: 7px 0; font-size: 17px; color: var(--text); opacity: .86; transition: opacity .2s, translate .35s var(--ease), color .2s; }
.foot-cols a:hover { opacity: 1; translate: 6px 0; }
[dir="rtl"] .foot-cols a:hover { translate: -6px 0; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 80px; padding-top: 26px; border-top: 1px solid var(--line); }
.foot-bottom p { margin: 0; }
.foot-bottom .status { display: inline-flex; align-items: center; gap: 8px; color: #4ade80; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 10px #4ade80; animation: pulse 1.8s infinite; }
.foot-mark { font-family: var(--display); font-weight: 700; font-size: clamp(120px, 24vw, 380px); line-height: .8; letter-spacing: -.04em; white-space: nowrap; text-align: end; margin-top: 10px; margin-inline-end: -3vw; padding-bottom: 0; transform: translateY(14%); color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.12); user-select: none; pointer-events: none; transition: -webkit-text-stroke-color .6s; }
.footer:hover .foot-mark { -webkit-text-stroke-color: rgba(255,255,255,.22); }
@media (max-width: 960px) { .foot-grid { grid-template-columns: 1fr; } .brand img { height: 34px; } }
.bt-head { position: relative; z-index: 50; }
.toolbar { position: relative; z-index: 50; }
.nav { z-index: 200; }
.dd-menu { background: #16161c; backdrop-filter: none; -webkit-backdrop-filter: none; }
.footer { margin-top: 90px; }


/* Radyyo tarzı hero alt bölümü */
.hero-inner { width: min(1240px, 100% - 48px); }
.hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-top: 8px; }
.hero-row .lead { max-width: 480px; margin: 0; }
.hero .stats { width: 100%; margin: 64px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line2); }
.hero .stat { padding: 28px 24px 0; border-inline-start: 1px solid var(--line); }
.hero .stat:first-child { border-inline-start: 0; padding-inline-start: 0; }
@media (max-width: 720px) { .hero .stats { margin-top: 44px; } .hero .stat { padding: 20px 12px 0; } }
.hero .stats { gap: 0; }
.hero .stat { text-align: start; border-inline-end: 0; padding-bottom: 0; }
.hero .stat strong { font-size: clamp(36px, 4.4vw, 60px); }
.hero .stat span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.hero-row { margin-top: 40px; }

/* ---------- v14: radyyo tarzı — yüzen hap menü, ince büyük başlık, italik vurgu ---------- */
.nav, .nav.scrolled { background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
.nav-inner { pointer-events: auto; width: fit-content; max-width: calc(100% - 24px); height: 58px; margin: 14px auto 0; padding: 0 8px 0 20px; gap: 10px; border-radius: 999px; background: rgba(20,20,25,.7); border: 1px solid var(--line2); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); box-shadow: 0 18px 50px -20px rgba(0,0,0,.8); }
.nav-links { margin-inline-end: 0; padding-inline-start: 6px; }
.brand img { height: 20px; }
.hero { --hero-img: .2; }
.hero::before { content: ""; position: absolute; z-index: -1; width: 70vmax; height: 70vmax; inset-inline-start: -28vmax; top: -22vmax; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(113,54,250,.30), rgba(113,54,250,.08) 55%, transparent 75%); filter: blur(30px); }
.hero .mega { font-weight: 500; letter-spacing: -.045em; line-height: .98; font-size: clamp(48px, 8.4vw, 124px); margin-block: 14px 36px; }
.hero .mega .grad { font-style: italic; font-weight: 600; padding-inline-end: .12em; }
.hero .eyebrow { font-size: 12px; margin: 0; }
.hero .stats { grid-template-columns: repeat(4, 1fr); margin-top: 72px; }
.hero .stat strong { font-weight: 500; }
@media (max-width: 720px) { .hero .stats { grid-template-columns: repeat(2, 1fr); } .hero .stat:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; } .hero .stat:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 20px; } .brand img { height: 16px; } }

/* Hap menü: margin çökmesi yapışkan konumda boşluğu yutuyordu, boşluk padding ile verilir */
.nav { padding-top: 14px; }
.nav-inner { margin: 0 auto; }
.nav.scrolled .nav-inner { background: rgba(16,16,20,.9); }

/* ---------- Harita sayfası (tam ekran, sabit 3B) ---------- */
.page-map { overflow: hidden; }
.page-map footer, .page-map .progress { display: none; }
.mapview { position: relative; height: 100svh; margin-top: -72px; overflow: hidden;
  background: radial-gradient(75vmax 60vmax at 55% 45%, #1c2d52 0%, #101b36 38%, #070b17 72%, #04060d 100%); }
.mapview::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(2,4,10,.55) 100%); }
.map-stage { position: absolute; inset: 0; z-index: 0; }
.map-side { position: relative; flex: none; align-self: flex-start; height: auto; max-height: 100%; width: 330px; overflow-y: auto; transition: opacity .45s ease, translate .6s var(--ease), visibility 0s; padding: 22px 20px; border-radius: 26px; border: 1px solid var(--line2); background: rgba(14,18,30,.72); backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1); box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); pointer-events: auto; overscroll-behavior: contain; }
.map-side .eyebrow { margin-bottom: 8px; font-size: 11px; }
.map-title { margin: 0 0 12px; font-family: var(--display); font-weight: 600; font-size: 32px; letter-spacing: -.03em; line-height: 1; }
.map-hint { margin: 0 0 18px; color: var(--muted); font-size: 13.5px; }
.map-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chip-btn { border: 1px solid var(--line2); background: rgba(255,255,255,.04); color: var(--text); padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .25s, border-color .25s, translate .3s var(--ease); }
.chip-btn:hover { background: rgba(255,255,255,.1); translate: 0 -2px; }
.map-sub { margin: 0 0 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.mgroup { margin-bottom: 14px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.02); overflow: hidden; }
.mhead { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; user-select: none; transition: background .25s; }
.mhead:hover { background: rgba(255,255,255,.04); }
.mhead input { position: absolute; opacity: 0; pointer-events: none; }
.sw { position: relative; width: 38px; height: 22px; border-radius: 999px; background: rgba(255,255,255,.12); flex: none; transition: background .3s; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: translate .35s var(--ease); }
.mhead input:checked + .sw { background: var(--accent); }
.mhead input:checked + .sw::after { translate: 16px 0; }
.mhead input:indeterminate + .sw { background: rgba(113,54,250,.55); }
.mhead input:indeterminate + .sw::after { translate: 8px 0; }
.mhead input:focus-visible + .sw { outline: 2px solid var(--accent2); outline-offset: 2px; }
.mname { display: flex; align-items: center; gap: 9px; font-weight: 600; flex: 1; }
.mcount { font-size: 12px; color: var(--muted); padding: 2px 9px; border-radius: 999px; background: rgba(255,255,255,.06); }
.mdot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.mdot-red { background: #e0364d; box-shadow: 0 0 10px rgba(224,54,77,.6); }
.mdot-yellow { background: #f3c53d; box-shadow: 0 0 10px rgba(243,197,61,.55); }
.mdot-blue { background: #2fd0c0; box-shadow: 0 0 10px rgba(47,208,192,.55); }
.mico { width: 12px; height: 12px; flex: none; background: linear-gradient(135deg, #e0364d 50%, #f3c53d 50%); box-shadow: 0 0 10px rgba(243,197,61,.4); }
.mico-mine { transform: rotate(45deg) scale(.85); border-radius: 2px; }
.mico-energy { border-radius: 50%; }
.mico-dark { border-radius: 3px; }
.mico-plant { border-radius: 0 100% 0 100%; }
.mgroup { transition: border-color .35s, box-shadow .35s, background .35s; }
.mgroup.on { border-color: rgba(113,54,250,.5); box-shadow: 0 0 24px -8px rgba(113,54,250,.6); background: rgba(113,54,250,.06); }
.map-side .map-sub { margin-top: 18px; }
.mlist { list-style: none; margin: 0; padding: 4px 8px 10px; display: grid; gap: 4px; border-top: 1px solid var(--line); }
.mli { display: grid; gap: 4px; }
.mrow { width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid transparent; background: none; color: var(--text); border-radius: 12px; font-size: 13.5px; cursor: pointer; text-align: start; transition: background .25s, border-color .25s, opacity .25s, translate .3s var(--ease); }
.mrow:hover { background: rgba(255,255,255,.07); translate: 3px 0; }
.mrow .mlabel { flex: 1; }
.mrow.off { opacity: .42; }
.mrow.off .mdot { box-shadow: none; filter: grayscale(.6); }
.mrow.sel { border-color: var(--accent2); background: rgba(113,54,250,.18); opacity: 1; }
.mtime { font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--muted); }
.mtime.warm { color: #ffb347; } .mtime.hot { color: #ff6b6b; } .mtime.live { color: #5dffa6; }
.mkill { margin: 0 4px 6px 30px; justify-self: start; border: 1px solid rgba(243,197,61,.4); background: rgba(243,197,61,.08); color: #ffe08a; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .25s, translate .3s var(--ease); }
.mkill:hover { background: rgba(243,197,61,.2); translate: 0 -1px; }
.map-labels { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.map-label { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: rgba(8,10,18,.82); border: 1px solid var(--line2); backdrop-filter: blur(6px); font: 700 12.5px/1 var(--display, inherit); font-variant-numeric: tabular-nums; white-space: nowrap; will-change: transform; margin-top: -4px; }
.map-label.c-red { border-color: rgba(224,54,77,.7); } .map-label.c-yellow { border-color: rgba(243,197,61,.7); }
.map-label.warm { color: #ffb347; } .map-label.hot { color: #ff6b6b; }
.map-label.live { color: #5dffa6; border-color: #5dffa6; animation: lblpulse 1s ease-in-out infinite; }
.map-label.sel { background: rgba(113,54,250,.5); }
.ml-x { pointer-events: auto; border: 0; background: rgba(255,255,255,.12); color: inherit; width: 18px; height: 18px; border-radius: 50%; line-height: 1; cursor: pointer; font-size: 13px; padding: 0; transition: background .2s; }
.ml-x:hover { background: rgba(255,255,255,.3); }
@keyframes lblpulse { 50% { box-shadow: 0 0 18px rgba(93,255,166,.55); } }
#map-canvas { cursor: grab; } #map-canvas.drag { cursor: grabbing; }
.map-tip.t-blue { border-color: rgba(47,208,192,.7); }

#map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s ease; touch-action: none; }
#map-canvas.ready { opacity: 1; }
.map-load { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; transition: opacity .6s; }
.map-load span { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line2); border-top-color: var(--accent2); animation: spin 1s linear infinite; }
.map-load.done { opacity: 0; }
@keyframes spin { to { rotate: 360deg; } }
.map-tip { position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, -140%); padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: rgba(10,10,14,.9); border: 1px solid var(--line2); white-space: nowrap; }
.map-tip.t-red { border-color: rgba(224,54,77,.7); }
.map-tip.t-yellow { border-color: rgba(243,197,61,.7); }
.map-zoom { position: absolute; z-index: 5; right: 22px; bottom: 26px; display: grid; gap: 8px; }
.map-zoom button { width: 46px; height: 46px; border-radius: 16px; border: 1px solid var(--line2); background: rgba(14,18,30,.72); backdrop-filter: blur(12px); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; transition: background .25s, translate .3s var(--ease); }
.map-zoom button:hover { background: rgba(113,54,250,.35); translate: 0 -2px; }
@media (max-width: 860px) {
  .page-map { overflow: auto; }
  .mapview { height: auto; min-height: 100svh; overflow: visible; padding-top: 62svh; }
  .map-stage { height: 62svh; bottom: auto; }
  .map-dock { position: relative; left: auto; top: auto; bottom: auto; flex-direction: column; margin: 12px; }
  .map-nav { width: auto; background: rgba(14,18,30,.92); }
  .map-side { width: auto; height: auto; overflow: visible; background: rgba(14,18,30,.92); }
  .mapview::after { height: 62svh; bottom: auto; }
  .map-zoom { top: calc(62svh - 112px); bottom: auto; }
}

.mdot-boss { background: #ff3a3a; box-shadow: 0 0 12px rgba(255,58,58,.7); }
.mgroup[data-type="boss"] .mlist { grid-template-columns: 1fr; }

.map-dock { position: absolute; z-index: 6; left: 18px; top: 86px; bottom: 18px; display: flex; gap: 12px; pointer-events: none; }
.map-nav { pointer-events: auto; align-self: flex-start; width: 256px; padding: 20px 14px; border-radius: 26px; border: 1px solid var(--line2); background: rgba(14,18,30,.72); backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1); box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); }
.map-nav .eyebrow { margin: 0 8px 12px; font-size: 11px; }
.mn-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px; border: 0; border-radius: 14px; background: none; color: var(--text); font: 600 16px var(--display); letter-spacing: -.01em; cursor: pointer; transition: background .25s; }
.mn-head:hover { background: rgba(255,255,255,.06); }
.mn-head .chev { transition: rotate .35s var(--ease); }
.mn-group.open .mn-head .chev { rotate: 180deg; }
.mn-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.mn-group.open .mn-sub { grid-template-rows: 1fr; }
.mn-sub-in { overflow: hidden; display: grid; gap: 4px; padding: 3px 4px 3px 10px; min-width: 0; }
.mn-item { box-sizing: border-box; width: 100%; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; background: none; color: var(--muted); font: 500 14px var(--body); text-align: start; cursor: pointer; transition: background .25s, color .25s, border-color .25s, translate .3s var(--ease); }
.mn-item:hover:not(:disabled) { background: rgba(255,255,255,.06); color: var(--text); }
.mn-item.on { color: var(--text); border-color: var(--accent2); background: rgba(113,54,250,.2); }
.mn-item:disabled { opacity: .5; cursor: not-allowed; }
.mn-item em { font-style: normal; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--muted); }
.panel-closed .map-side { opacity: 0; translate: -26px 0; visibility: hidden; pointer-events: none; transition: opacity .35s ease, translate .45s var(--ease), visibility 0s .45s; }
.map-pick { display: grid; gap: 6px; margin: 0 0 16px; }
.mp { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-radius: 16px; border: 1px solid var(--line2); background: rgba(255,255,255,.03); color: var(--text); font: inherit; text-align: start; cursor: pointer; transition: background .25s, border-color .25s; }
.mp b { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -.02em; }
.mp.on { border-color: var(--accent2); background: rgba(113,54,250,.2); }
.mp em { font-style: normal; font-size: 11.5px; color: var(--muted); padding: 2px 9px; border-radius: 999px; background: rgba(255,255,255,.06); }
.mp:disabled { opacity: .55; cursor: not-allowed; }

.mico-chest { border-radius: 4px 4px 2px 2px; background: linear-gradient(90deg, #35d46f 34%, #4a9bff 34% 67%, #e0364d 67%); }
.map-tip.t-green { border-color: rgba(53,212,111,.7); }
.mico-goblin { border-radius: 50% 50% 40% 40%; background: radial-gradient(circle at 50% 40%, #ffd652, #a06f06); }
.mico-dark-red { border-radius: 3px; background: linear-gradient(135deg, #ff5a6e, #8f1630); box-shadow: 0 0 10px rgba(224,54,77,.5); }
.mico-dark-yellow { border-radius: 3px; background: linear-gradient(135deg, #ffd652, #a06f06); }
.mico-zone { border-radius: 3px; background: linear-gradient(135deg, #b98cff, #4a1fa6); box-shadow: 0 0 10px rgba(154,107,255,.6); }
.mico-portal { border-radius: 50%; background: conic-gradient(#b98cff, #4a1fa6, #b98cff); }
.map-tip.t-purple { border-color: rgba(154,107,255,.8); }
a.mn-item { text-decoration: none; }
.mico-mine-red { border-radius: 3px; background: linear-gradient(135deg, #ff5a6e, #8f1630); }
.mico-plant-red { border-radius: 0 100% 0 100%; background: linear-gradient(135deg, #ff5a6e, #8f1630); }
#map-canvas.switching { transition: opacity .2s ease; opacity: 0; }
.mico-mine-yellow { border-radius: 3px; background: linear-gradient(135deg, #ffd652, #a06f06); }
.mico-plant-yellow { border-radius: 0 100% 0 100%; background: linear-gradient(135deg, #ffd652, #a06f06); }
.map-side { scrollbar-width: none; -ms-overflow-style: none; }
.map-side::-webkit-scrollbar { display: none; }
.msb { position: absolute; z-index: 7; width: 6px; border-radius: 9px; background: rgba(255,255,255,.04); opacity: 0; transition: opacity .35s ease, width .2s ease; pointer-events: auto; }
.msb i { position: absolute; left: 0; right: 0; top: 0; border-radius: 9px; background: linear-gradient(180deg, rgba(168,132,255,.75), rgba(113,54,250,.7)); cursor: grab; transition: background .25s; }
.map-dock:hover .msb, .msb.on, .msb.drag { opacity: 1; }
.msb:hover { width: 8px; }
.msb.drag i { cursor: grabbing; background: #8a5cff; }
.panel-closed .msb { opacity: 0 !important; pointer-events: none; }

.map-link { display: flex; align-items: center; justify-content: center; gap: 8px; margin: -6px 0 22px; padding: 12px 16px; border-radius: 14px; font-size: 14px; font-weight: 600; color: #fff; background: linear-gradient(135deg, rgba(113,54,250,.45), rgba(113,54,250,.18)); border: 1px solid rgba(113,54,250,.6); transition: background .25s, transform .25s; }
.map-link:hover { background: linear-gradient(135deg, rgba(113,54,250,.7), rgba(113,54,250,.3)); }

.map-nav { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; }
.map-nav::-webkit-scrollbar { display: none; }
@media (max-width: 900px) { .map-nav { max-height: none; overflow: visible; } }
.mn-sub-in { min-height: 0; transition: padding .4s var(--ease); }
.mn-group:not(.open) .mn-sub-in { padding-top: 0; padding-bottom: 0; }

/* 3D rozeti: minik, gri zemin, yazının içinde çok silik akan ışık */
.nav-links a { display: inline-flex; align-items: center; gap: 5px; }
.b3d, .bnew { display: inline-block; align-self: flex-start; margin-top: 2px; padding: 1px 3px; font-size: 0; line-height: 0; border-radius: 4px; background: rgba(255,255,255,.07);
  background-image: none; color: transparent; }
.b3d::before, .bnew::before { content: "3D"; display: block; font: 700 7px/9px var(--body, inherit); letter-spacing: .06em; color: transparent;
  background: linear-gradient(100deg, rgba(255,255,255,.38) 35%, rgba(255,255,255,.62) 50%, rgba(255,255,255,.38) 65%) 0 0 / 300% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; animation: b3dSweep 3.8s ease-in-out infinite; }
@keyframes b3dSweep { 0% { background-position: 110% 0; } 100% { background-position: -10% 0; } }
.bnew::before { content: attr(data-t); text-transform: uppercase; }
.cr-gr .bnew { margin: 0 0 0 6px; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .b3d::before, .bnew::before { animation: none; } }

/* ===== Craft Material ===== */
.craft { padding-top: 40px; padding-bottom: 90px; }
.cr-stage { display: flex; flex-direction: column; align-items: center; padding: 32px 22px 28px; border-radius: 26px; border: 1px solid var(--line); background: var(--cr-glow), var(--surface); --cr-glow: radial-gradient(ellipse 380px 300px at 50% 36%, color-mix(in srgb, var(--gc, #7136fa) 24%, transparent), transparent 70%); }
.cr-route { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: min(100%, 480px); border-bottom: 1px solid var(--line2); margin-bottom: 14px; }
.craft [hidden] { display: none !important; }
#cr-route { margin-bottom: 28px; }
#cr-type .cr-gr { --gc: var(--accent2); }
.cr-gr { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 8px 16px; border: 0; background: none; color: var(--muted); font-weight: 700; font-size: 15px; letter-spacing: .02em; cursor: pointer; transition: color .25s, background-color .3s; }
.cr-gr::before { content: ""; width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); background: var(--gc); opacity: .4; transition: opacity .25s, box-shadow .25s; }
.cr-gr:hover { color: var(--text); }
.cr-gr[aria-pressed="true"] { color: #fff; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--gc) 14%, transparent)); }
.cr-gr[aria-pressed="true"]::before { opacity: 1; box-shadow: 0 0 10px var(--gc); }
.cr-ind { position: absolute; left: 0; bottom: -1px; height: 2px; width: calc(100% / var(--n, 3)); background: var(--gc, var(--accent)); box-shadow: 0 0 14px var(--gc, var(--accent)); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform .45s var(--ease), background-color .3s, box-shadow .3s; pointer-events: none; }
[dir="rtl"] .cr-ind { left: auto; right: 0; transform: translateX(calc(var(--i, 0) * -100%)); }
.cr-ring { position: relative; width: 250px; height: 250px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #0d0d12; border: 1px solid var(--line2); }
.cr-ring::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; border: 3px solid var(--gc, var(--accent)); opacity: .9; }
.cr-ring::after { content: ""; position: absolute; inset: 26px; border-radius: 50%; border: 1px solid var(--line2); }
.cr-ring > * { position: relative; z-index: 1; }
.cr-ring-t { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; text-align: center; max-width: 130px; }
.cr-qty { width: 96px; text-align: center; padding: 10px 4px; border-radius: 14px; border: 1px solid var(--line2); background: var(--surface2); color: var(--text); font-size: 26px; font-weight: 700; outline: 0; }
.cr-qty:focus { border-color: var(--accent); }
.cr-stem { width: 2px; height: 30px; background: var(--line2); margin-top: 18px; }
.cr-slots { position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 16px; width: 100%; max-width: 780px; }
.cr-slots::before { content: ""; position: absolute; top: 0; left: calc(50% / var(--n, 4)); right: calc(50% / var(--n, 4)); height: 2px; background: var(--line2); }
.cr-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 22px; }
.cr-slot::before { content: ""; position: absolute; top: 0; height: 22px; width: 2px; background: var(--line2); }
.cr-disc { position: relative; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: #101018; border: 3px solid #3a3350; transition: border-color .3s, box-shadow .3s; }
.cr-slot.ok .cr-disc { border-color: #4ade80; box-shadow: 0 0 22px rgba(74,222,128,.25); }
.cr-disc .cr-ico { width: 56px; height: 56px; background: none; margin-top: -8px; }
.cr-disc b { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px #000; }
.cr-ico { position: relative; flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #0d0d11; overflow: hidden; }
.cr-ico img { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); object-fit: contain; z-index: 1; }
.cr-ico i { display: none; font-style: normal; font-weight: 700; color: var(--muted); }
.cr-ico.err i { display: block; }
.cr-sl-name { font-size: 14px; font-weight: 600; text-align: center; }
.cr-sl-name em, .cr-nm em { font-style: normal; }
.cr-have { width: 100%; max-width: 130px; text-align: center; padding: 9px 8px; border-radius: 12px; border: 1px solid var(--line2); background: var(--surface2); color: var(--text); font-size: 16px; font-weight: 600; outline: 0; -moz-appearance: textfield; }
.cr-have::-webkit-outer-spin-button, .cr-have::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cr-have:disabled { opacity: .55; cursor: default; }
.cr-have:focus { border-color: var(--accent); }
.cr-have::placeholder { color: var(--muted); font-weight: 500; }
.cr-out { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; align-items: start; }
.cr-box { padding: 22px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); }
.cr-box[hidden] { display: none; }
.cr-box .panel-title { font-family: var(--body, inherit); margin: 0 0 14px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.cr-reqs { display: grid; gap: 8px; }
.cr-req { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--surface2); }
.cr-nm { flex: 1; font-weight: 600; font-size: 15px; min-width: 0; }
.cr-req b { font-size: 20px; font-variant-numeric: tabular-nums; }
.cr-box .cr-ready { margin: 0; color: #4ade80; font-weight: 600; max-width: none; }
.cr-note { color: var(--muted); font-size: 13px; margin: 14px 4px 0; }
@media (max-width: 860px) { .cr-out { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .cr-slots { grid-template-columns: 1fr 1fr; row-gap: 22px; }
  .cr-slots::before, .cr-slot::before { display: none; }
  .cr-slot { padding-top: 0; }
  .cr-stem { display: none; }
}
.cr-content { min-width: 0; }
.cr-layout { grid-template-columns: 210px 1fr; gap: 20px; }
.cr-menu { gap: 6px; }
.cr-menu .bt-tab { padding: 11px 14px; border-radius: 13px; }
.cr-menu .tab-top { justify-content: flex-start; }
.cr-menu .tab-name { font-size: 15px; }
.cr-menu .bnew { align-self: center; margin: 0 0 0 8px; }
.cr-out { margin-top: 16px; }
@media (max-width: 900px) { .cr-layout { grid-template-columns: 1fr; } .cr-menu .bt-tab { flex: none; width: auto; min-width: 0; white-space: nowrap; padding: 10px 15px; } }

.cr-stage:hover { translate: none; border-color: var(--line); background: var(--cr-glow), var(--surface); }
.cr-box:hover { translate: none; border-color: var(--line); background: var(--surface); }

/* Craft: artifact halkası, maliyet, geçiş animasyonları */
.cr-inner { display: flex; flex-direction: column; align-items: center; width: 100%; }
.cr-art .cr-ico { width: 132px; height: 132px; border-radius: 0; background: none; overflow: visible; }
.cr-art .cr-ico img { inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 6px 18px rgba(113,54,250,.45)); }
.cr-art .cr-ico i { font-size: 44px; }
.cr-artname { position: relative; z-index: 2; margin-top: -16px; padding: 8px 20px; border-radius: 999px; background: #17141f; border: 1px solid var(--line2); font-weight: 700; font-size: 15px; }
.cr-costs { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 26px; width: 100%; }
.cr-costs-t { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.cr-costs-in { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cr-costs-in .cr-req { min-width: 230px; }
.cr-in { animation: crIn .45s var(--ease) both; }
.cr-swap { animation: crIn .42s var(--ease) both; }
.cr-swap-soft { animation: crSoft .38s var(--ease) both; }
@keyframes crIn { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes crSoft { from { opacity: .25; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cr-in, .cr-swap, .cr-swap-soft { animation: none; } }
@media (max-width: 900px) {
  .cr-menu .bt-group { display: contents; }
  .cr-menu .bt-ghead { display: none; }
  .cr-menu .bt-sub { display: contents; }
  .cr-menu .bt-sub-in { display: contents; opacity: 1; }
  .cr-menu .bt-sub .bt-tab { padding: 10px 15px; }
}
@media (max-width: 640px) { .cr-artname { margin-bottom: 22px; } }

.cr-ring.is-art { width: 188px; height: 188px; }
.cr-ring.is-art::before { inset: 10px; }
.cr-ring.is-art::after { inset: 21px; }
.cr-art .cr-ico { width: 104px; height: 104px; }
.cr-art .cr-ico i { font-size: 36px; }
.cr-artname { margin-top: -14px; padding: 7px 18px; font-size: 14px; }
.cr-inner.cr-leave, .cr-out.cr-leave { opacity: 0; transform: translateY(-8px); transition: opacity .14s ease, transform .14s ease; }
.cr-costs { flex-direction: row; align-items: center; justify-content: flex-end; align-self: flex-end; width: auto; gap: 14px; margin-top: 18px; }
.cr-costs-in { justify-content: flex-end; gap: 8px; }
.cr-costs-in .cr-req { min-width: 0; padding: 8px 14px 8px 10px; }
.cr-costs-in .cr-ico { width: 32px; height: 32px; }
.cr-costs-in .cr-req b { font-size: 17px; }
@media (max-width: 640px) { .cr-costs { flex-direction: column; align-self: stretch; align-items: stretch; } .cr-costs-in { justify-content: stretch; } .cr-costs-in .cr-req { flex: 1 1 100%; } }

/* Rütbe sekmeleri: kartın tüm genişliğine yayılan büyük alan, küçük yazı */
.cr-stage { overflow: hidden; }
.cr-route { width: calc(100% + 44px); margin: -32px -22px 28px; border-bottom: 1px solid var(--line2); }
.cr-gr { padding: 22px 8px 24px; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; }
.cr-gr + .cr-gr { border-inline-start: 1px solid var(--line); }
.cr-gr::before { width: 7px; height: 7px; }
#cr-route { margin-bottom: 28px; }

/* rütbe rengi halkayı ve zemin ışığını boyar */
@property --gc { syntax: '<color>'; inherits: true; initial-value: #7136fa; }
.cr-stage, .js .cr-stage.reveal.done { transition: --gc .5s var(--ease), border-color .3s, background-color .3s; }
.cr-ring::before { border-color: var(--gc, var(--accent)); transition: border-color .5s; }
.cr-out > .cr-ic-box { grid-column: 1 / -1; }
.cr-ic-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cr-ic-head .panel-title { margin: 0; }
.cr-methods { display: flex; gap: 6px; padding: 4px; border-radius: 12px; background: var(--surface2); }
.cr-methods:empty { display: none; }
.cr-mth { padding: 7px 16px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 600; font-size: 13px; cursor: pointer; transition: background-color .25s, color .25s; }
.cr-mth[aria-pressed="true"] { background: var(--accent); color: #fff; }
.cr-reqs.wide { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ===== Ranking ===== */
.rk { --k0: #6d6d79; --k1: #ff5d5d; --k2: #5b94ff; --k3: #3ed68a; --k4: #ffd04a; --k5: #a6e34f; --k6: #e05bd0; --k7: #ff9a3d; --k8: #3ad0d8; --rk-top: 86px; --rk-bar-h: 66px; padding-top: 4px; padding-bottom: 90px; }
body:has(#nav.hide) .rk { --rk-top: 14px; }
.rk [hidden] { display: none !important; }
.rk [data-k="0"] { --k: var(--k0); } .rk [data-k="1"] { --k: var(--k1); } .rk [data-k="2"] { --k: var(--k2); } .rk [data-k="3"] { --k: var(--k3); } .rk [data-k="4"] { --k: var(--k4); }
.rk [data-k="5"] { --k: var(--k5); } .rk [data-k="6"] { --k: var(--k6); } .rk [data-k="7"] { --k: var(--k7); } .rk [data-k="8"] { --k: var(--k8); }
.rk-head { padding-bottom: 6px; }
.rk-head .lead { margin-bottom: 22px; }
.rk-layout { grid-template-columns: 236px minmax(0, 1fr); gap: 20px; }
.rk-content { min-width: 0; }
html.rk-lock { overflow: hidden; }

/* ---- üst kontrol çubuğu: sunucu · gün · arama · (Global'de) bölge ---- */
.rk-bar { position: sticky; top: var(--rk-top); z-index: 60; display: flex; align-items: stretch; margin: 6px 0 14px; border-radius: 22px; border: 1px solid var(--line2); background: #121217; box-shadow: 0 18px 44px -26px rgba(0,0,0,.95); transition: top .45s var(--ease); }
.rk-bar::after { content: ""; position: absolute; inset-inline: 22px; bottom: -1px; height: 2px; border-radius: 2px; opacity: 0; pointer-events: none; background: linear-gradient(90deg, transparent, var(--accent2), transparent) no-repeat; background-size: 40% 100%; }
.rk-loading .rk-bar::after { opacity: 1; animation: rkBusy 1s linear infinite; }
@keyframes rkBusy { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.rk-ctl { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 16px; }
.rk-ctl + .rk-ctl { border-inline-start: 1px solid var(--line); }
.rk-ctl:has(.dd.open) { z-index: 5; }
.rk-bar > .rk-ctl:last-child { border-radius: 0 21px 21px 0; }
[dir="rtl"] .rk-bar > .rk-ctl:last-child { border-radius: 21px 0 0 21px; }
.rk-ctl-tx small, .rk-ctl-main small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); line-height: 1.35; }

.rk-scope { flex: 0 0 auto; padding: 0; }
.rk-scope-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 268px; height: 100%; padding: 9px 16px 9px 10px; border: 0; border-radius: 21px 0 0 21px; background: transparent; color: var(--text); font: inherit; text-align: start; cursor: pointer; transition: background-color .2s; }
[dir="rtl"] .rk-scope-btn { border-radius: 0 21px 21px 0; padding: 9px 10px 9px 16px; }
.rk-scope-btn:hover, .rk-scope-btn[aria-expanded="true"] { background: rgba(255,255,255,.05); }
.rk-scope-btn:focus-visible { outline: 2px solid var(--accent2); outline-offset: -2px; }
.rk-scope-btn .dd-chev { margin-inline-start: auto; display: grid; place-items: center; }
.rk-scope-btn[aria-expanded="true"] .dd-chev { transform: rotate(180deg); color: var(--text); }
.rk-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: #d4c2ff; background: linear-gradient(135deg, rgba(113,54,250,.42), rgba(154,107,255,.14)); border: 1px solid rgba(154,107,255,.38); }
.rk-ctl-tx { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.rk-ctl-tx b { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; white-space: nowrap; }
.rk-grp { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.07); color: #b9b9c6; }

.rk-date { gap: 4px; padding: 8px 10px; }
.rk-ctl-main { min-width: 0; padding-inline: 8px; }
.rk-ctl-main .dd-btn { font-size: 16px; font-weight: 600; gap: 12px; padding: 1px 0; white-space: nowrap; }
.rk-ctl-main select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: var(--text); font: inherit; font-size: 16px; font-weight: 600; padding: 0; }
.rk-ctl .dd-menu { top: calc(100% + 16px); inset-inline: -12px; min-width: 220px; }
.rk-reg .dd-menu { inset-inline-start: auto; inset-inline-end: -12px; }
.rk-step { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; border: 1px solid var(--line); color: var(--text); transition: background-color .2s, border-color .2s, opacity .2s; }
.rk-step:hover { background: rgba(255,255,255,.08); border-color: var(--line2); }
.rk-step.dis { opacity: .28; pointer-events: none; }
[dir="rtl"] .rk-step svg { transform: scaleX(-1); }

.rk-find { flex: 1 1 240px; color: var(--muted); cursor: text; }
.rk-find:focus-within { color: var(--text); background: rgba(255,255,255,.03); }
.rk-find input { flex: 1; min-width: 0; height: 42px; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; font-weight: 500; }
.rk-find input::placeholder { color: var(--muted); opacity: 1; }
.rk-find input::-webkit-search-cancel-button { display: none; }
.rk-kbd { flex: none; display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 7px; border: 1px solid var(--line2); background: rgba(255,255,255,.04); font: 600 12px/1 var(--body); color: var(--muted); transition: opacity .2s; }
.rk-find:focus-within .rk-kbd { opacity: 0; }
@media (hover: none) { .rk-kbd { display: none; } }
.rk-reg { padding: 8px 12px; }

/* ---- sunucu seçici paneli ---- */
.rk-pop { position: absolute; top: calc(100% + 10px); inset-inline-start: 0; z-index: 70; display: flex; flex-direction: column; width: min(960px, calc(100vw - 48px)); max-height: min(74vh, 620px); border-radius: 22px; border: 1px solid var(--line2); background: #14141a; box-shadow: 0 44px 100px -24px rgba(0,0,0,.95); animation: rkPop .32s var(--ease); }
@keyframes rkPop { from { opacity: 0; transform: translateY(-8px) scale(.985); } }
.rk-pop-top { display: flex; gap: 10px; padding: 14px; border-bottom: 1px solid var(--line); }
.rk-pop-find { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; height: 46px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface2); color: var(--muted); }
.rk-pop-find:focus-within { border-color: var(--accent2); color: var(--text); }
.rk-pop-find input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; }
.rk-pop-find input::placeholder { color: var(--muted); opacity: 1; }
.rk-pop-find input::-webkit-search-cancel-button { display: none; }
.rk-pop-x { display: none; flex: none; width: 46px; height: 46px; place-items: center; border-radius: 14px; border: 1px solid var(--line); background: var(--surface2); color: var(--text); cursor: pointer; }
.rk-pop-body { overflow-y: auto; overscroll-behavior: contain; padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 12px; align-content: start; min-height: 0; }
.rk-pop-body.one { grid-template-columns: 1fr; }
.rk-pop-body.one .rk-grp-box { padding: 0; border: 0; background: none; }
.rk-pop-body.one .rk-grp-box h4 { display: none; }
.rk-pop-body.one .rk-srvs { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.rk-pop-body.one .rk-srv { justify-content: center; height: 42px; font-size: 14.5px; border-radius: 12px; }
.rk-gtabs { flex: none; display: flex; flex-wrap: nowrap; gap: 6px; padding: 10px 14px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; border-bottom: 1px solid var(--line); transition: opacity .2s; }
.rk-gtabs::-webkit-scrollbar { display: none; }
.rk-gtabs.dim { opacity: .4; }
.rk-gtab { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .04em; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.rk-gtab em { font-style: normal; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.07); letter-spacing: 0; }
.rk-gtab:hover { color: var(--text); border-color: var(--line2); }
.rk-gtab[aria-selected="true"] { background: linear-gradient(135deg, var(--accent), var(--accent2)); border-color: transparent; color: #fff; }
.rk-gtab[aria-selected="true"] em { background: rgba(255,255,255,.22); }
.rk-gtab:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.rk-glob { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface2); transition: border-color .2s, background-color .2s; }
.rk-glob:hover { border-color: var(--line2); background: #1d1d24; }
.rk-glob.on { border-color: var(--accent2); box-shadow: inset 0 0 0 1px var(--accent2); }
.rk-glob-tx { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.rk-glob-tx b { font-size: 16px; font-weight: 700; }
.rk-glob-tx small { font-size: 12.5px; color: var(--muted); }
.rk-grp-box { min-width: 0; padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.02); }
.rk-grp-box h4 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.rk-grp-box h4 em { font-style: normal; padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,.06); font-size: 11px; letter-spacing: 0; }
.rk-srvs { display: flex; flex-wrap: wrap; gap: 6px; }
.rk-srv { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface2); font-size: 13.5px; font-weight: 600; letter-spacing: .03em; font-variant-numeric: tabular-nums; color: #dcdce4; transition: border-color .2s, background-color .2s, color .2s, opacity .2s; }
.rk-srv:hover { border-color: var(--accent2); background: rgba(113,54,250,.18); color: #fff; }
.rk-srv.on { background: linear-gradient(135deg, var(--accent), var(--accent2)); border-color: transparent; color: #fff; }
.rk-srv.off { opacity: .42; border-style: dashed; }
.rk-srv.off:hover { opacity: .85; }
.rk-pop-none { grid-column: 1 / -1; margin: 6px 0 2px; text-align: center; }
.rk-scope.open::before { content: ""; display: none; }

/* ---- etkin süzgeç etiketleri ---- */
.rk-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.rk-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 6px 0 13px; border-radius: 999px; border: 1px solid var(--line2); background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: border-color .2s, background-color .2s; max-width: 100%; }
.rk-chip:hover { border-color: rgba(255,255,255,.34); background: var(--surface2); }
.rk-chip .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-chip .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--k, var(--accent2)); box-shadow: 0 0 10px var(--k, transparent); margin-inline-end: -2px; }
.rk-chip .x { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--muted); font-size: 15px; line-height: 1; transition: background-color .2s, color .2s; }
.rk-chip:hover .x { background: rgba(255,255,255,.2); color: #fff; }
.rk-clear { padding: 6px 8px; border: 0; background: transparent; color: var(--accent2); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.rk-clear:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---- sol menü: class süzgeci ---- */
.rk-menu { gap: 6px; top: calc(var(--rk-top) + var(--rk-bar-h) + 20px); max-height: calc(100vh - var(--rk-top) - var(--rk-bar-h) - 40px); transition: top .45s var(--ease); }
.rk-menu .bt-tab { position: relative; overflow: hidden; padding: 10px 12px 11px; border-radius: 14px; }
.rk-tab-top { display: flex; align-items: center; gap: 10px; }
.rk-tab .tab-name { flex: 1; min-width: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-tab .tab-count { font-variant-numeric: tabular-nums; }
.rk-tab.zero { opacity: .5; }
.rk-tab.zero[aria-selected="true"] { opacity: 1; }
.rk-share { display: block; height: 3px; margin-top: 9px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; }
.rk-share i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--k, var(--accent2)); transition: width .55s var(--ease); }
.rk-tab[data-k="0"] .rk-share i { background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.rk-menu .rk-av { width: 30px; height: 30px; font-size: 9px; }

/* sınıf avatarı: oyunun char_N.png görseli; yüklenmezse renkli harf rozeti */
.rk-av { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #15151b; overflow: hidden; display: grid; place-items: center; font: 700 11px/1 var(--body); letter-spacing: .02em; color: var(--k, var(--muted)); }
.rk-av img { width: 100%; height: 100%; object-fit: cover; }
.rk-av::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--k, #3a3a44); pointer-events: none; }
.rk-av:empty::before { content: attr(data-l); }
.rk-av.all { color: var(--text); --k: #3a3a44; }
.rk-av.all::after { box-shadow: inset 0 0 0 2px #3a3a44; }

/* ---- bilgi şeritleri ---- */
.rk-sample { margin: 0 0 12px; padding: 12px 18px; border-radius: 14px; border: 1px dashed rgba(255,208,74,.5); background: rgba(255,208,74,.07); color: #ffd98a; font-size: 14px; }
.rk-info { margin: 0 0 12px; padding: 12px 18px; border-radius: 14px; border: 1px solid rgba(154,107,255,.35); background: rgba(113,54,250,.1); color: #d6c6ff; font-size: 14px; }
.rk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.rk-stat { min-width: 0; padding: 14px 20px; }
.rk-stat + .rk-stat { border-inline-start: 1px solid var(--line); }
.rk-stat span { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.rk-stat strong { display: block; font-family: var(--display); font-size: clamp(20px, 2.1vw, 26px); font-variant-numeric: tabular-nums; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- podyum (ilk 3) ---- */
.rk-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; margin-bottom: 14px; }
.rk-pod { --medal: 255, 208, 74; position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 16px 14px 18px; text-align: center; overflow: hidden; border-radius: 22px; border: 1px solid rgba(var(--medal), .3); background: linear-gradient(180deg, rgba(var(--medal), .11), rgba(var(--medal), 0) 64%), var(--surface); animation: rkPod .6s var(--ease) both; }
.rk-pod.p1 { padding-block: 20px 22px; animation-delay: .07s; }
.rk-pod.p2 { --medal: 205, 211, 225; }
.rk-pod.p3 { --medal: 227, 163, 115; animation-delay: .13s; }
@keyframes rkPod { from { opacity: 0; transform: translateY(14px); } }
.rk-pod-top { display: flex; align-items: center; justify-content: center; gap: 8px; }
.rk-pod-rk { padding: 2px 11px; border-radius: 999px; border: 1px solid rgba(var(--medal), .4); background: rgba(var(--medal), .14); color: rgb(var(--medal)); font-family: var(--display); font-size: 15px; font-weight: 700; }
.rk-crown { margin: 2px 0 -6px; color: #ffd04a; filter: drop-shadow(0 4px 14px rgba(255,208,74,.6)); }
.rk-av.lg { width: 70px; height: 70px; margin-block: 6px 4px; font-size: 15px; }
.rk-pod.p1 .rk-av.lg { width: 84px; height: 84px; }
.rk-av.lg::after { box-shadow: inset 0 0 0 3px var(--k, #3a3a44); }
.rk-pod-n { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; font-weight: 700; line-height: 1.35; }
.rk-pod-s, .rk-pod-c { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted); }
.rk-pod-p { margin-top: 4px; font-family: var(--display); font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.25; }
.rk-pod .rk-dp { font-size: 12.5px; }

/* ---- liste kartı ---- */
.rk-card { border-radius: 22px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; transition: opacity .2s; }
.rk-loading .rk-card, .rk-loading .rk-podium, .rk-loading .rk-stats { opacity: .45; pointer-events: none; }
.rk-tools { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; padding: 12px 14px 12px 22px; border-bottom: 1px solid var(--line); }
.rk-sum { font-size: 14px; font-weight: 500; }
.rk-tools-r { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.rk-sort { display: inline-flex; padding: 3px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface2); }
.rk-sort button { height: 30px; padding: 0 13px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color .25s, color .25s; }
.rk-sort button:hover { color: var(--text); }
.rk-sort button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.rk-copy { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 13px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: color .2s, border-color .2s; }
.rk-copy:hover { color: var(--text); border-color: var(--line2); }
.rk-copy.ok { color: #4ade80; border-color: rgba(74,222,128,.45); }

.rk-hd, .rk-row { display: grid; grid-template-columns: 104px minmax(0, 2.3fr) 92px minmax(0, 1.5fr) 150px; align-items: center; column-gap: 14px; padding-inline: 22px; }
.rk-card[data-all="0"] .rk-hd, .rk-card[data-all="0"] .rk-row { grid-template-columns: 104px minmax(0, 2.4fr) minmax(0, 1.6fr) 150px; }
.rk-card[data-all="0"] .rk-hd-sv { display: none; }
.rk-hd { height: 44px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.02); }
.rk-hd-pw { text-align: end; }
.rk-row { min-height: 66px; padding-block: 10px; border-bottom: 1px solid var(--line); transition: background-color .2s; }
.rk-row:hover { background: rgba(255,255,255,.035); }
.rk-row[style] { animation: rkIn .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 24ms); }
@keyframes rkIn { from { opacity: 0; transform: translateY(10px); } }
.rk-rk { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.rk-rk b { min-width: 2.4ch; font-family: var(--display); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rk-row.top1 .rk-rk b { color: #ffd04a; } .rk-row.top2 .rk-rk b { color: #d5d9e3; } .rk-row.top3 .rk-rk b { color: #e3a373; }
.rk-ch { font-size: 12px; font-weight: 700; color: #55555f; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rk-ch.up { color: #4ade80; } .rk-ch.dn { color: #ff7b7b; }
.rk-ch.nw { padding: 1px 6px; border-radius: 6px; background: rgba(154,107,255,.18); color: #c4a8ff; letter-spacing: .04em; font-size: 10px; }
.rk-pl { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rk-nm { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rk-n { display: block; font-weight: 600; font-size: 16px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-sub { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-cl::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-end: 6px; border-radius: 50%; background: var(--k, var(--muted)); }
.rk-m { display: none; }
.rk-sv a, .rk-sv span { display: inline-block; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.04); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: #cfcfd8; transition: border-color .2s, background-color .2s, color .2s; }
.rk-sv a:hover { border-color: var(--accent2); background: rgba(113,54,250,.2); color: #fff; }
.rk-cn { min-width: 0; color: #cfcfd8; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-cb { display: block; max-width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-cb:hover { color: #fff; text-decoration: underline; text-decoration-color: rgba(154,107,255,.9); text-underline-offset: 3px; }
.rk-dash { color: #4a4a54; }
.rk-pw { display: flex; flex-direction: column; align-items: flex-end; }
.rk-pw b { font-family: var(--display); font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.25; }
.rk-dp { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.rk-dp.up { color: #4ade80; } .rk-dp.dn { color: #ff7b7b; }
.rk-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0; padding: 48px 22px; text-align: center; }
.rk-empty p { margin: 0; }
.rk-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 22px; }
.rk-foot-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.rk-note { margin: 14px 4px 0; max-width: 78ch; }
.rk-none { padding: 80px 0 20px; max-width: 560px; }
.rk-none h2 { font-family: var(--display); font-size: clamp(28px, 4vw, 44px); margin: 0 0 10px; letter-spacing: -.01em; }
.rk-none-s { padding-top: 56px; }
.rk-none-s .btn { margin-top: 12px; }
.rk-clm { color: #70707c; }

@media (max-width: 1100px) {
  .rk-layout { grid-template-columns: 206px minmax(0, 1fr); }
  .rk-scope-btn { min-width: 226px; }
  .rk-find { flex-basis: 170px; }
  .rk-hd, .rk-row { grid-template-columns: 92px minmax(0, 2fr) 84px minmax(0, 1.2fr) 128px; padding-inline: 16px; }
  .rk-card[data-all="0"] .rk-hd, .rk-card[data-all="0"] .rk-row { grid-template-columns: 92px minmax(0, 2fr) minmax(0, 1.3fr) 128px; }
}
@media (max-width: 960px) {
  .rk-layout { grid-template-columns: 1fr; }
  .rk-menu { top: auto; max-height: none; }
  .rk-menu .bt-tab { flex: none; width: auto; min-width: 150px; scroll-snap-align: start; }
  .rk-bar { position: relative; top: auto; z-index: auto; flex-wrap: wrap; }
  .rk-scope { flex: 1 1 100%; border-bottom: 1px solid var(--line); }
  .rk-scope-btn { min-width: 0; border-radius: 21px 21px 0 0; }
  [dir="rtl"] .rk-scope-btn { border-radius: 21px 21px 0 0; }
  .rk-date, .rk-reg { flex: 1 1 0; border-inline-start: 0; }
  .rk-date + .rk-find, .rk-reg + .rk-find { border-inline-start: 0; }
  .rk-find { flex: 1 1 100%; border-top: 1px solid var(--line); border-inline-start: 0; order: 5; }
  .rk-bar > .rk-ctl:last-child { border-radius: 0 0 21px 21px; }
  [dir="rtl"] .rk-bar > .rk-ctl:last-child { border-radius: 0 0 21px 21px; }
  .rk-reg { border-inline-start: 1px solid var(--line); }
}
@media (max-width: 720px) {
  .rk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rk-stat:nth-child(3) { border-inline-start: 0; }
  .rk-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .rk-hd { display: none; }
  .rk-hd, .rk-row, .rk-card[data-all="0"] .rk-hd, .rk-card[data-all="0"] .rk-row { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .rk-row { padding-inline: 14px; column-gap: 10px; min-height: 64px; }
  .rk-sv, .rk-cn { display: none; }
  .rk-m { display: inline; }
  .rk-sub.rk-m { display: block; }
  .rk-sub:not(.rk-clm) { white-space: normal; text-overflow: clip; line-height: 1.35; }  /* "class · sunucu" dar ekranda kesilmesin, alta insin */
  .rk-sub .rk-m { white-space: nowrap; }
  .rk-rk { flex-direction: column; align-items: flex-start; gap: 1px; }
  .rk-rk b { font-size: 18px; min-width: 0; }
  .rk-av { width: 36px; height: 36px; }
  .rk-n { font-size: 15px; }
  .rk-pw b { font-size: 16px; }
  .rk-foot { padding: 14px; }
  .rk-tools { padding: 12px 14px; }
  .rk-copy span { display: none; }
  .rk-copy.ok span { display: inline; }
  /* sunucu seçici: alttan açılan sayfa */
  .rk-scope.open::before { display: block; position: fixed; inset: 0; z-index: 290; background: rgba(5,5,8,.66); }
  .rk-pop { position: fixed; inset: auto 0 0 0; z-index: 300; width: auto; max-height: 84vh; border-radius: 24px 24px 0 0; border-bottom: 0; animation: rkSheet .38s var(--ease); }
  @keyframes rkSheet { from { transform: translateY(100%); } }
  .rk-pop-x { display: grid; }
  .rk-pop-body { grid-template-columns: 1fr; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .rk-pop-body.one .rk-srvs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rk-gtabs { padding-inline: 14px; }
  .rk-srv { height: 40px; padding: 0 14px; }
}
@media (max-width: 520px) {
  .rk-date { flex-basis: 100%; border-bottom: 1px solid var(--line); }
  .rk-reg { flex-basis: 100%; border-inline-start: 0; border-bottom: 1px solid var(--line); }
  .rk-sort button { padding: 0 10px; }
}
/* alt çubuk: telefon/tablette üst çubuk sabit olmadığından, liste uzunken sunucu seçmek ve yukarı dönmek için */
.rk-dock { display: none; }
@media (max-width: 960px) {
  .rk-dock { position: fixed; z-index: 70; inset-inline: 0; bottom: calc(14px + env(safe-area-inset-bottom)); margin-inline: auto; width: max-content; max-width: calc(100vw - 24px); display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; background: #17171d; border: 1px solid var(--line2); box-shadow: 0 18px 40px -14px rgba(0,0,0,.95); animation: rkDock .34s var(--ease); }
  .rk-dock[hidden] { display: none; }
  .rk-dock button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border: 0; border-radius: 999px; background: transparent; color: var(--text); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .2s; }
  .rk-dock-srv { padding: 0 14px 0 12px; color: #d4c2ff; }
  .rk-dock-srv b { font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--text); }
  .rk-dock-srv svg:last-child { color: var(--muted); }
  .rk-dock .rk-dock-up { width: 42px; background: linear-gradient(135deg, var(--accent), #8b52ff); color: #fff; }
  .rk-dock .rk-dock-srv:active { background-color: rgba(255,255,255,.1); }
  .rk-dock .rk-dock-up:active { filter: brightness(1.15); }
  .rk-dock button:focus-visible { outline: 2px solid var(--accent2); outline-offset: 1px; }
  @keyframes rkDock { from { opacity: 0; transform: translateY(16px); } }
}
@media (min-width: 721px) and (max-width: 960px) { .rk-dock .rk-dock-srv { display: none; } }   /* tabletteki açılır panel çubuğa bağlıdır; orada yalnız "yukarı" */
@media (prefers-reduced-motion: reduce) { .rk-pod, .rk-row[style], .rk-pop, .rk-dock, .rk-loading .rk-bar::after { animation: none; } }

/* ===== Ranking → profil bağlantıları ===== */
.rk-pa { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; color: inherit; text-decoration: none; vertical-align: bottom; }
.rk-pa bdi { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-arw { flex: none; opacity: .55; transition: opacity .2s, color .2s, transform .25s var(--ease); }
.rk-pa:hover .rk-arw, .rk-pa:focus-visible .rk-arw { opacity: 1; color: #b99bff; transform: translate(2px, -2px); }
.rk-pa:hover bdi, .rk-pa:focus-visible bdi { text-decoration: underline; text-decoration-color: rgba(154,107,255,.9); text-underline-offset: 3px; }
.rk-pa:focus-visible { outline: 2px solid var(--accent2); outline-offset: 3px; border-radius: 6px; }
.rk-pod-n { display: block; }
.rk-pod .rk-pa { max-width: 100%; justify-content: center; }
.rk-ca { color: #cfcfd8; }
.rk-ca:hover { color: #fff; }

/* ===== Profil sayfası (oyuncu / klan) ===== */
.pf-head .pf-h1 { font-size: clamp(34px, 6vw, 72px); line-height: 1.08; word-break: break-word; overflow-wrap: anywhere; }
.pf { padding-bottom: 80px; }
.pf-search { display: flex; align-items: center; gap: 6px; max-width: 780px; margin: 0 0 22px; padding: 6px; border-radius: 999px; border: 1px solid var(--line2); background: var(--surface); transition: border-color .2s, box-shadow .2s; }
.pf-search:focus-within { border-color: var(--accent2); box-shadow: 0 0 0 4px rgba(113,54,250,.16); }
.pf-seg { display: inline-flex; flex: none; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.05); }
.pf-seg label { position: relative; cursor: pointer; }
.pf-seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.pf-seg span { display: block; padding: 8px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); transition: background-color .2s, color .2s; text-align: center; }
.pf-seg input:hover + span { color: var(--text); }
.pf-seg input:checked + span { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; }
.pf-seg input:focus-visible + span { outline: 2px solid var(--accent2); outline-offset: 2px; }
.pf-find { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; height: 44px; padding: 0 8px 0 12px; color: var(--muted); cursor: text; }
.pf-find input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; }
.pf-find input::placeholder { color: var(--muted); opacity: 1; }
.pf-find input::-webkit-search-cancel-button { display: none; }
.pf-find:focus-within { color: var(--text); }
.pf-go { flex: none; height: 44px; padding: 0 26px; border: 0; border-radius: 999px; background: #f4f4f6; color: #0a0a0c; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .2s var(--ease), background-color .2s; }
.pf-go:hover { background: #fff; transform: translateY(-1px); }
.pf-go:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }

/* benzer arama sonuçları */
.pf-res { margin-bottom: 14px; padding-bottom: 6px; }
.pf-res-h { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 20px; flex-wrap: wrap; padding: 18px 22px 12px; }
.pf-res-h h2 { margin: 0; font-family: var(--display); font-size: 20px; letter-spacing: -.005em; overflow-wrap: anywhere; }
.pf-res-h p { margin: 0; font-size: 14px; }
.pf-rt { display: flex; flex-direction: column; }
.pf-rr { display: grid; align-items: center; gap: 14px; padding: 11px 22px; border-top: 1px solid var(--line); color: inherit; transition: background-color .2s; }
.pf-rt-p .pf-rr { grid-template-columns: 64px minmax(0, 2.2fr) minmax(0, .9fr) minmax(0, 1.5fr) minmax(0, 1fr); }
.pf-rt-c .pf-rr { grid-template-columns: minmax(0, 2.2fr) minmax(0, .9fr) minmax(0, 1.4fr) 104px minmax(0, 1fr); }
a.pf-rr:hover { background: rgba(154,107,255,.09); }
a.pf-rr:focus-visible { outline: 2px solid var(--accent2); outline-offset: -2px; }
.pf-rh { padding-block: 9px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pf-rr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-rn { display: flex; align-items: center; gap: 12px; }
.pf-rn > b, .pf-rt2 b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 16px; }
.pf-rn .pf-clan-ic { width: 34px; height: 34px; flex: none; }
.pf-rt2 { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.pf-rt2 small { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-rs-m { display: none; }
.pf-rs { color: #cfcfd8; font-weight: 600; letter-spacing: .03em; }
.pf-rl { color: #cfcfd8; }
.pf-rk { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 600; }
.pf-rp { text-align: end; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 16px; }
.pf-rp em, .pf-rl em, .pf-rk em { font-weight: 500; font-size: 13px; }
.pf-rh .pf-rp, .pf-rh > span:last-child { text-align: end; }
.pf-id { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 14px; padding: 16px 20px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); }
.pf-id .rk-av.lg, .pf-id .pf-clan-ic { width: 64px; height: 64px; }
.pf-clan-ic { color: var(--accent2); background: rgba(113,54,250,.14); }
.pf-id-tx { min-width: 0; flex: 1 1 240px; }
.pf-id-n { display: block; font-family: var(--display); font-size: clamp(20px, 2.6vw, 28px); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pf-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 3px 12px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(255,255,255,.03); font-size: 13px; font-weight: 600; color: var(--text); max-width: 100%; }
a.pf-chip { transition: background-color .2s, border-color .2s; }
a.pf-chip:hover { background: rgba(154,107,255,.16); border-color: rgba(154,107,255,.55); }
.pf-chip .dot { width: 7px; height: 7px; background: var(--k, var(--accent2)); box-shadow: none; animation: none; }
.pf-chip[data-k] { --k: var(--muted); }
.pf [data-k="1"].pf-chip { --k: var(--k1); } .pf [data-k="2"].pf-chip { --k: var(--k2); } .pf [data-k="3"].pf-chip { --k: var(--k3); } .pf [data-k="4"].pf-chip { --k: var(--k4); }
.pf [data-k="5"].pf-chip { --k: var(--k5); } .pf [data-k="6"].pf-chip { --k: var(--k6); } .pf [data-k="7"].pf-chip { --k: var(--k7); } .pf [data-k="8"].pf-chip { --k: var(--k8); }
.pf-chip-clan bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-upd { margin-inline-start: auto; }
.pf-stats { margin-bottom: 14px; }
.pf-stats .rk-stat strong { display: block; }
.pf-sub { display: block; font-size: 12px; line-height: 1.35; margin-top: 2px; }
.pf-leader a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(154,107,255,.7); text-underline-offset: 4px; }
.pf-leader a:hover { color: #fff; }
.pf-chg { font-variant-numeric: tabular-nums; }
.pf-chg.up { color: #3ed68a; } .pf-chg.dn { color: #ff6b6b; }

.pf-chartcard, .pf-days, .pf-pick { margin-bottom: 14px; padding-bottom: 6px; }
.pf-ch-h, .pf-days-h, .pf-pick-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; padding: 18px 22px 4px; }
.pf-ch-h h2, .pf-days-h h2, .pf-pick-h h2 { margin: 0; font-family: var(--display); font-size: 20px; letter-spacing: -.005em; }
.pf-leg { font-size: 13px; }
.pf-chart { position: relative; margin: 6px 12px 0; min-height: 230px; outline: none; touch-action: pan-y; cursor: crosshair; }
.pf-chart:focus-visible { box-shadow: 0 0 0 2px rgba(154,107,255,.6); border-radius: 12px; }
.pf-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pf-grid { stroke: rgba(255,255,255,.06); stroke-width: 1; shape-rendering: crispEdges; }
.pf-yl, .pf-xl { fill: #7c7c89; font: 500 11px/1 var(--body); font-variant-numeric: tabular-nums; }
.pf-line { stroke: var(--accent2); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 4px 10px rgba(113,54,250,.55)); }
.pf-dot { fill: #15151b; stroke: var(--accent2); stroke-width: 1.8; }
.pf-hdot { fill: #fff; stroke: var(--accent); stroke-width: 3; filter: drop-shadow(0 0 8px rgba(154,107,255,.9)); }
.pf-cross { stroke: rgba(255,255,255,.22); stroke-width: 1; stroke-dasharray: 3 4; }
.pf-gap { rx: 6; }
.pf-tip { position: absolute; z-index: 3; pointer-events: none; min-width: 140px; max-width: 220px; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line2); background: rgba(17,17,21,.96); backdrop-filter: blur(14px); box-shadow: 0 18px 40px -14px rgba(0,0,0,.85); font-size: 12.5px; line-height: 1.4; }
.pf-tip[hidden] { display: none; }
.pf-tip-d { font-weight: 600; color: var(--muted); font-size: 12px; }
.pf-tip-v { font-family: var(--display); font-size: 19px; font-variant-numeric: tabular-nums; }
.pf-tip-c { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--muted); }
.pf-tip-c.up { color: #3ed68a; } .pf-tip-c.dn { color: #ff6b6b; }
.pf-tip-r, .pf-tip-n { color: var(--muted); }
.pf-empty { display: grid; place-items: center; min-height: 160px; color: var(--muted); }
.pf-note { margin: 4px 22px 14px; }

.pf-tbl { padding: 6px 0 4px; }
.pf-tr { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(0, 1.4fr) minmax(0, 1.2fr) 100px 100px; column-gap: 14px; align-items: center; padding: 11px 22px; border-top: 1px solid var(--line); font-size: 14.5px; font-variant-numeric: tabular-nums; }
.pf-tr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-th { border-top: 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-block: 8px; }
.pf-tr.none { color: var(--muted); }
.pf-tr em { font-style: normal; color: var(--muted); }
.pf-mr { grid-template-columns: 72px minmax(0, 2.4fr) minmax(0, 1.4fr) minmax(0, 1.2fr); }
.pf-pl { display: flex; align-items: center; gap: 12px; }
.pf-pl .rk-av { width: 34px; height: 34px; font-size: 9px; }
.pf-pl a { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.pf-pl a:hover { text-decoration: underline; text-decoration-color: rgba(154,107,255,.9); text-underline-offset: 3px; }
.pf-lead-tag { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: rgba(255,208,74,.14); color: #ffd98a; flex: none; }
.pf-share { display: flex; align-items: center; gap: 10px; }
.pf-share i { display: block; flex: 1 1 auto; height: 6px; border-radius: 99px; background: rgba(255,255,255,.07); position: relative; overflow: hidden; }
.pf-share i::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.pf-share small { flex: none; width: 46px; text-align: end; color: var(--muted); }
.pf-srvs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.pf-srv { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; border-radius: 999px; border: 1px solid var(--line2); font-weight: 600; font-size: 13.5px; transition: background-color .2s, border-color .2s; }
.pf-srv i { font-style: normal; min-width: 24px; padding: 1px 7px; border-radius: 99px; background: rgba(255,255,255,.08); color: var(--muted); font-size: 12px; text-align: center; }
.pf-srv:hover { background: rgba(154,107,255,.12); }
.pf-srv.on { background: linear-gradient(135deg, var(--accent), var(--accent2)); border-color: transparent; color: #fff; }
.pf-srv.on i { background: rgba(255,255,255,.22); color: #fff; }
.pf-pick-row { display: flex; align-items: center; gap: 14px; padding: 12px 22px; border-top: 1px solid var(--line); transition: background-color .2s; }
.pf-pick-row:hover { background: rgba(255,255,255,.04); }
.pf-pick-tx { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.pf-pick-tx b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-pick-tx small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-pick-pw { font-variant-numeric: tabular-nums; font-weight: 600; }
.pf-pick-h p { margin: 0; flex-basis: 100%; }

@media (max-width: 720px) {
  .pf-tr { grid-template-columns: minmax(70px, .9fr) minmax(0, 1.4fr) minmax(0, 1.1fr) 70px; padding-inline: 14px; column-gap: 10px; font-size: 13.5px; }
  .pf-hide-s { display: none; }
  .pf-mr { grid-template-columns: 52px minmax(0, 1fr) minmax(0, .9fr); }
  .pf-mr .pf-share { display: none; }
  .pf-mr > span:last-child { text-align: end; }
  .pf-upd { margin-inline-start: 0; flex-basis: 100%; }
  .pf-ch-h, .pf-days-h, .pf-pick-h { padding-inline: 16px; }
  .pf-note { margin-inline: 16px; }
  .pf-pick-row { padding-inline: 16px; }
  .pf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-stats .rk-stat:nth-child(3) { border-inline-start: 0; }
  .pf-stats .rk-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) { .pf-line { transition: none !important; } }

@media (max-width: 720px) {
  .pf-search { flex-wrap: wrap; border-radius: 24px; padding: 8px; }
  .pf-seg { flex: 1 1 100%; }
  .pf-seg label { flex: 1; }
  .pf-find { flex: 1 1 0; padding-inline-start: 10px; }
  .pf-go { padding: 0 20px; }
  .pf-res-h { padding-inline: 16px; }
  .pf-rr { padding-inline: 16px; gap: 10px; }
  .pf-rt-p .pf-rr { grid-template-columns: 48px minmax(0, 1fr) minmax(0, auto); }
  .pf-rt-p .pf-rs, .pf-rt-p .pf-rl { display: none; }
  .pf-rt-p .pf-rs-m { display: inline; }
  .pf-rt-c .pf-rr { grid-template-columns: minmax(0, 1fr) auto minmax(0, auto); }
  .pf-rt-c .pf-rl, .pf-rt-c .pf-rk { display: none; }
  .pf-rh { display: none; }
  .pf-rn > b, .pf-rt2 b { font-size: 15px; }
}
.rk-nm > .rk-pa { align-self: flex-start; }

/* ===== Event Timer üst çubuğu (Ranking çubuğuyla aynı dil) ===== */
.bt { --rk-top: 86px; --rk-bar-h: 66px; padding-top: 10px; }
body:has(#nav.hide) .bt { --rk-top: 14px; }
.bt-bar { margin: 6px 0 26px; }
@media (min-width: 961px) {                     /* Ranking çubuğuyla aynı: navbar'ın altında yapışır, navbar kaybolunca yukarı kayar */
  .bt-menu { top: calc(var(--rk-top) + var(--rk-bar-h) + 20px); max-height: calc(100vh - var(--rk-top) - var(--rk-bar-h) - 40px); transition: top .45s var(--ease); }
}
.bt-reg { flex: 0 0 auto; padding: 8px 18px 8px 10px; }
.bt-reg .rk-ctl-main { min-width: 168px; }
.bt-reg .dd-menu { inset-inline-start: -4px; inset-inline-end: auto; min-width: 270px; }
.bt-clk { flex: 0 0 auto; min-width: 176px; padding: 8px 20px; }
.bt-clk .rk-ctl-main { padding-inline: 0; }
.bt-clk strong { display: block; font-family: var(--display); font-size: 23px; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
@media (max-width: 960px) {
  .bt-bar { flex-wrap: wrap; }
  .bt-bar .bt-reg { flex: 1 1 100%; border-bottom: 1px solid var(--line); }
  .bt-bar .rk-find { flex: 1 1 100%; order: 2; border-inline-start: 0; border-top: 0; border-bottom: 1px solid var(--line); }
  .bt-bar .bt-clk { order: 3; flex: 1 1 0; min-width: 0; border-inline-start: 0; }
  .bt-bar .bt-clk + .bt-clk { border-inline-start: 1px solid var(--line); }
  .bt-bar > .rk-ctl:last-child { border-radius: 0 0 21px 0; }
  [dir="rtl"] .bt-bar > .rk-ctl:last-child { border-radius: 0 0 0 21px; }
  .bt-bar > .bt-reg:first-child { border-radius: 21px 21px 0 0; }
}
@media (max-width: 480px) { .bt-clk strong { font-size: 19px; } .bt-clk { padding-inline: 14px; } }

.pf-chip-old { border-style: dashed; color: var(--muted); font-weight: 500; }
.pf-chip-old bdi { color: var(--text); font-weight: 600; }

/* ===== Event Timer: yıldız (favori), zil (bildirim), favoriler kutusu, uyarı kartı ===== */
.row-tools { display: inline-flex; gap: 6px; margin-inline-start: auto; }
.row-tags:has(.row-tools) { display: flex !important; }
.bt-ib { width: 32px; height: 32px; padding: 0; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid var(--line2); background: transparent; color: var(--muted); cursor: pointer; transition: color .2s, background-color .2s, border-color .2s, transform .2s; }
.bt-ib:hover { color: var(--text); background: rgba(255,255,255,.07); }
.bt-ib:active { transform: scale(.92); }
.bt-ib:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.bt-ib[data-role="star"][aria-pressed="true"] { color: #ffd04a; border-color: rgba(255,208,74,.5); background: rgba(255,208,74,.1); }
.bt-ib[data-role="star"][aria-pressed="true"] svg { fill: currentColor; }
.bt-ib[data-role="bell"][aria-pressed="true"] { color: #d4c2ff; border-color: rgba(113,54,250,.7); background: rgba(113,54,250,.22); }
.bt-ib[data-role="bell"][aria-pressed="true"] svg { fill: currentColor; }
.row.is-fav { border-color: rgba(255,208,74,.28); }
.row.is-fav.live { border-color: rgba(113,54,250,.7); }
.bt-favs { margin: 0 0 30px; padding: 20px 20px 10px; border-radius: 28px; border: 1px solid rgba(255,208,74,.26); background: linear-gradient(180deg, rgba(255,208,74,.07), rgba(255,208,74,0) 70%), var(--surface); }
.bt-favs[hidden] { display: none; }
.bt-favs-t { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: clamp(20px, 2.2vw, 28px); }
.bt-favs-t svg { color: #ffd04a; fill: currentColor; flex: none; }
.bt-favs .row { background: rgba(255,255,255,.03); }
.bt-favs .row .row-tags .cat-tag { color: var(--muted); font-size: 12px; font-weight: 600; }
.bt-toast-wrap { position: fixed; z-index: 200; inset-inline-end: 18px; top: 92px; display: flex; flex-direction: column; gap: 10px; pointer-events: none; max-width: min(360px, calc(100vw - 36px)); }
.bt-toast { pointer-events: auto; display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 18px; background: #17171d; border: 1px solid rgba(113,54,250,.6); box-shadow: 0 24px 60px -20px rgba(0,0,0,.9), 0 0 0 4px rgba(113,54,250,.12); animation: rowin .5s var(--ease) both; }
.bt-toast svg { flex: none; color: #d4c2ff; }
.bt-toast b { display: block; font-size: 15px; }
.bt-toast small { color: var(--muted); }
.bt-toast button { margin-inline-start: auto; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 18px; padding: 4px 8px; }
@media (max-width: 720px) { .bt-favs { padding: 16px 12px 6px; border-radius: 22px; } .bt-toast-wrap { top: 76px; inset-inline: 12px; max-width: none; } }