/* Faraza2 tanıtım — Elveron iskeleti, Faraza2 paleti. elveron.css kullanılmaz. */
:root {
  --bg: #1b1a1f;
  --bg2: #141316;
  --card: #2a282c;
  --line: #4a484e;
  --ice: #edd656;
  --ice2: #c9a53d;
  --ember: #c0392b;
  --text: #c5c5c5;
  --muted: #9a9a9a;
  --white: #ffffff;
  --side: 280px;
  --side-min: 64px;
  --top: 64px;
}

.fz-page, .fz-page * { box-sizing: border-box; }
.fz-page a { color: inherit; }
.fz-page img { max-width: 100%; }
body.fz-page {
  margin: 0;
  margin-left: var(--side);
  padding-top: var(--top);
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(1100px 480px at 50% 0, #3a1518 0%, transparent 55%),
    var(--bg);
  font-family: Manrope, Play, sans-serif;
  line-height: 1.7;
  transition: margin-left .28s ease;
}
body.fz-page.nav-collapsed { margin-left: var(--side-min); }

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 120;
  height: var(--top);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  background: rgba(27, 26, 31, .94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 14px; }
.nav-toggle {
  width: 42px; height: 38px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #222126;
  color: var(--ice);
  cursor: pointer;
  font-size: 18px;
}
.nav-toggle:hover { border-color: var(--ice); }
.topbar-logo { display: flex; align-items: center; height: 44px; }
.topbar-logo img {
  height: 44px; width: auto; max-width: 180px;
  object-fit: contain;
  mix-blend-mode: lighten;
}
.nav-links { display: flex; gap: 8px; }
.nav-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  color: var(--white);
  text-decoration: none;
  font-family: Rajdhani, sans-serif;
  font-weight: 700;
  letter-spacing: .04em;
  border: 1px solid #515151;
  background: linear-gradient(to bottom, #5a5a5a, #121212);
}
.nav-link:nth-child(2) {
  background: linear-gradient(135deg, #c0392b, #7a1f18);
  border-color: #6b6b6b;
}
.nav-link:nth-child(3) {
  background: #413f3f;
  color: var(--ice);
}
.nav-link:hover { filter: brightness(1.12); }

.hero {
  position: relative;
  min-height: 52vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(192, 57, 43, .28), transparent 55%),
    linear-gradient(180deg, #2a1518 0%, var(--bg) 100%);
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 30%, var(--bg) 100%);
  pointer-events: none;
}
.hero-content { position: relative; z-index: 2; padding: 2.8rem 1rem 1.4rem; text-align: center; width: 100%; }
.hero-logo { display: flex; justify-content: center; width: min(720px, 92vw); margin: 0 auto; }
.hero-logo img {
  height: auto;
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  mix-blend-mode: lighten;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.55));
}
.hero-logo h1 {
  margin: 0;
  font-family: Rajdhani, sans-serif;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  letter-spacing: .18em;
  color: var(--ice);
}

.server-countdown-wrapper {
  display: flex; justify-content: center;
  padding: 0 20px 8px;
  margin-top: -28px;
  position: relative; z-index: 8;
}
.server-countdown {
  width: min(560px, 100%);
  background: linear-gradient(135deg, rgba(65,63,63,.95), rgba(27,26,31,.92));
  border: 1px solid #606060;
  border-radius: 16px;
  padding: 16px 22px 18px;
  text-align: center;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.server-countdown::before {
  content: "";
  display: block; height: 2px; margin: -16px -22px 12px;
  background: linear-gradient(90deg, transparent, var(--ice), transparent);
}
.countdown-header { display: flex; align-items: center; justify-content: center; gap: 10px; }
.countdown-header h3 {
  margin: 0; color: var(--ice);
  font-family: Rajdhani, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 1.05rem;
}
.countdown-header i { color: var(--ember); }
.countdown-timer { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; }
.countdown-item {
  min-width: 58px; padding: 8px 6px;
  background: rgba(0,0,0,.4);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex; flex-direction: column; align-items: center;
}
.countdown-value {
  font-family: Rajdhani, sans-serif;
  font-size: 1.55rem; font-weight: 700; color: var(--white); line-height: 1;
}
.countdown-label {
  font-size: .55rem; letter-spacing: .16em; color: var(--muted); margin-top: 4px;
}
.countdown-separator { font-size: 1.35rem; color: var(--ice); opacity: .45; margin-top: -10px; }

.sidebar-navigation {
  position: fixed;
  top: var(--top); left: 0;
  width: var(--side);
  height: calc(100vh - var(--top));
  z-index: 110;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #222126, #141316);
  border-right: 1px solid var(--line);
  overflow: hidden;
  transition: width .28s ease;
}
.sidebar-navigation.collapsed { width: var(--side-min); }
.nav-scroll { flex: 1; overflow-y: auto; padding: 12px 10px 16px; }
.nav-category {
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(165deg, rgba(65,63,63,.9), rgba(27,26,31,.92));
  overflow: hidden;
}
.category-header {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 12px; cursor: pointer;
  color: var(--ice);
  font-family: Rajdhani, sans-serif;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .78rem;
}
.category-korean {
  display: none;
  width: 28px; height: 28px;
  align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(237,214,86,.12);
  color: var(--ice2);
}
.category-title { flex: 1; }
.category-arrow { color: var(--muted); font-size: 11px; transition: transform .2s; }
.nav-category.expanded .category-arrow { transform: rotate(180deg); }
.category-items { display: none; padding: 0 8px 10px; }
.nav-category.expanded .category-items { display: block; }
.sidebar-navigation .nav-item {
  display: flex; align-items: center;
  margin: 4px 0; padding: 9px 11px;
  color: var(--text); text-decoration: none;
  background: rgba(0,0,0,.42);
  border: 1px solid #3a383c;
  border-radius: 10px;
  font-family: Rajdhani, sans-serif; font-weight: 600; font-size: .92rem;
}
.sidebar-navigation .nav-item:hover,
.sidebar-navigation .nav-item.active {
  color: var(--white);
  border-color: #edd65688;
  background: linear-gradient(90deg, rgba(237,214,86,.18), rgba(42,40,44,.95));
  box-shadow: inset 3px 0 0 var(--ice);
}
.sidebar-navigation.collapsed .category-title,
.sidebar-navigation.collapsed .category-items,
.sidebar-navigation.collapsed .category-arrow,
.sidebar-navigation.collapsed .english { display: none; }
.sidebar-navigation.collapsed .category-korean { display: flex; }
.sidebar-navigation.collapsed .category-header { justify-content: center; padding: 12px 6px; }
.sidebar-navigation.collapsed .nav-category { border: 0; background: transparent; }
.chevron {
  display: block; text-align: center; color: var(--ice);
  padding: 6px; margin: 6px 8px; border-radius: 8px;
  background: rgba(0,0,0,.3); text-decoration: none;
}
.nav-quick-jump {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--line);
}
.quick-jump-prev, .quick-jump-next {
  flex: 1; height: 36px; cursor: pointer;
  border-radius: 8px; border: 1px solid var(--line);
  background: #1c1c1c; color: var(--ice);
}
.sidebar-navigation.collapsed .nav-quick-jump { display: none; }

.main-content {
  max-width: 1240px;
  margin: 0 auto;
  padding: 28px 28px 96px;
}
.content-section {
  margin-bottom: 36px;
  scroll-margin-top: 80px;
}
.section-title {
  margin: 0 0 14px;
  font-family: Rajdhani, sans-serif;
  font-size: clamp(1.45rem, 2.6vw, 1.9rem);
  color: var(--white);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  background: none !important;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--line);
  margin-left: 0 !important;
}
.section-title::before, .section-title::after { display: none !important; }
.feature-card {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px 26px;
  box-shadow: 0 14px 32px rgba(0,0,0,.28);
}
.feature-card.is-catalog {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}
.block-head { margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid rgba(237,214,86,.28); }
.block-head.has-count { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.efsun-count {
  flex: 0 0 auto;
  padding: 8px 0 8px 20px;
  border-left: 1px solid rgba(237,214,86,.45);
  color: var(--ice);
  font-family: Rajdhani, sans-serif;
  font-weight: 700;
  letter-spacing: .18em;
  font-size: 1.05rem;
  white-space: nowrap;
}
.block-kicker {
  font-family: Rajdhani, sans-serif;
  font-size: .78rem;
  letter-spacing: .22em;
  color: var(--ice);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.block-title {
  margin: 0 0 8px;
  font-family: Rajdhani, sans-serif;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  color: var(--white);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 700;
}
.block-lead, .block-lead p { margin: 0; color: var(--muted); font-size: .92rem; max-width: 62ch; }
.map-rule {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 28px 0 16px;
  color: var(--ice);
  font-family: Rajdhani, sans-serif;
  letter-spacing: .18em;
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 700;
}
.map-rule::before, .map-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(237,214,86,.55), transparent);
}
.map-rule span { white-space: nowrap; }
.loot-row {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 14px 16px;
  margin-bottom: 12px;
  background: linear-gradient(180deg, #1f1e23, #161518);
  border: 1px solid #3a383c;
  border-radius: 12px;
}
.loot-source { text-align: center; }
.loot-orb {
  width: 120px;
  height: 120px;
  margin: 0 auto 10px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
}
.loot-orb::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px solid rgba(237,214,86,.18);
  box-shadow: 0 0 0 10px rgba(237,214,86,.04);
}
.loot-orb img {
  width: 78px;
  height: 78px;
  object-fit: contain;
  position: relative;
  z-index: 1;
}
.kind-boss img { width: 108px; height: 108px; }
.loot-crystal {
  width: 46px;
  height: 62px;
  position: relative;
  z-index: 1;
  clip-path: polygon(50% 0, 92% 28%, 78% 100%, 22% 100%, 8% 28%);
  background: linear-gradient(180deg, #fff6c8, #c9a53d 40%, #6b4a12);
  box-shadow: inset 0 0 12px rgba(255,255,255,.35);
}
.glow-gold { background: radial-gradient(circle, rgba(237,214,86,.38), transparent 68%); }
.glow-violet { background: radial-gradient(circle, rgba(168,85,247,.4), transparent 68%); }
.glow-ember { background: radial-gradient(circle, rgba(234,88,12,.42), transparent 68%); }
.glow-purple { background: radial-gradient(circle, rgba(109,40,217,.4), transparent 68%); }
.glow-green { background: radial-gradient(circle, rgba(34,197,94,.38), transparent 68%); }
.glow-ice { background: radial-gradient(circle, rgba(125,211,252,.4), transparent 68%); }
.glow-slate { background: radial-gradient(circle, rgba(148,163,184,.4), transparent 68%); }
.glow-sand { background: radial-gradient(circle, rgba(217,183,106,.4), transparent 68%); }
.glow-red, .glow-blood, .glow-crimson { background: radial-gradient(circle, rgba(192,57,43,.45), transparent 68%); }
.glow-teal { background: radial-gradient(circle, rgba(45,212,191,.4), transparent 68%); }
.glow-blue { background: radial-gradient(circle, rgba(59,130,246,.4), transparent 68%); }
.loot-badge {
  display: inline-block;
  max-width: 100%;
  padding: 6px 8px;
  border: 1px solid rgba(237,214,86,.45);
  border-radius: 4px;
  color: #fff;
  font-family: Rajdhani, sans-serif;
  font-size: .72rem;
  letter-spacing: .08em;
  line-height: 1.25;
}
.loot-meta { margin-top: 6px; font-size: .72rem; color: var(--muted); }
.drop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 8px;
}
.drop-slot {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.45);
  border: 1px solid #3a383c;
  border-radius: 6px;
}
.drop-slot img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}
.drop-qty {
  position: absolute;
  right: 4px;
  bottom: 3px;
  color: var(--ice);
  font-size: .62rem;
  font-family: Rajdhani, sans-serif;
  font-weight: 700;
}
.drop-slot .drop-tip {
  display: none;
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 6;
  min-width: 180px;
  background: #141316;
  border: 1px solid rgba(237,214,86,.35);
  color: #d7cbb8;
  font-size: .75rem;
  line-height: 1.45;
  padding: 8px 10px;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
}
.drop-slot:hover .drop-tip { display: block; }
.efsun-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.efsun-search {
  flex: 1 1 240px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #141316;
  border: 1px solid rgba(237,214,86,.28);
  border-radius: 10px;
  padding: 0 12px;
  color: var(--ice);
}
.efsun-search input {
  width: 100%;
  background: transparent;
  border: 0;
  color: #fff;
  padding: 11px 0;
  outline: none;
  font-family: Manrope, sans-serif;
}
.efsun-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.efsun-filters button {
  background: #1c1c1c;
  border: 1px solid #3a383c;
  color: var(--muted);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-family: Rajdhani, sans-serif;
  font-weight: 700;
}
.efsun-filters button.is-on { border-color: var(--ice); color: #fff; }
.efsun-cols {
  display: grid;
  grid-template-columns: minmax(180px, .42fr) 1fr;
  gap: 12px;
  color: var(--ice);
  font-family: Rajdhani, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .78rem;
  padding: 0 6px 8px;
}
.efsun-cols small { letter-spacing: .04em; color: var(--muted); text-transform: none; margin-left: 6px; }
.efsun-row {
  display: grid;
  grid-template-columns: minmax(180px, .42fr) 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 8px;
  border-top: 1px solid #2e2d32;
}
.efsun-row[hidden],
.efsun-row.is-off,
.efsun-empty[hidden] {
  display: none !important;
}
.efsun-name { color: #fff; font-weight: 600; }
.efsun-name small { display: block; color: var(--muted); font-weight: 400; font-size: .75rem; margin-top: 3px; }
.efsun-tiers { display: flex; flex-wrap: wrap; gap: 8px; }
.efsun-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1a191e;
  border: 1px solid #3a383c;
  border-radius: 999px;
  padding: 5px 10px 5px 6px;
  color: #cfcfcf;
  font-size: .82rem;
}
.efsun-pill i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: .7rem;
  background: #2a282c;
}
.efsun-pill.is-max { border-color: var(--ice); color: var(--ice); box-shadow: 0 0 12px rgba(237,214,86,.18); }
.craft-cols { grid-template-columns: minmax(200px, .34fr) minmax(0, 1fr) 160px; }
.craft-row {
  display: grid;
  grid-template-columns: minmax(200px, .34fr) minmax(0, 1fr) 160px;
  gap: 12px;
  align-items: center;
  padding: 12px 8px;
  border-top: 1px solid #2e2d32;
}
.craft-name { display: flex; align-items: center; gap: 10px; color: #fff; }
.craft-name img { width: 32px; height: 32px; image-rendering: pixelated; flex-shrink: 0; }
.craft-name strong { display: block; font-weight: 600; }
.craft-name small { display: block; color: var(--muted); font-size: .75rem; margin-top: 2px; }
.craft-mats { justify-items: start; }
.craft-mats.drop-grid { grid-template-columns: repeat(auto-fill, minmax(52px, 52px)); }
.craft-cost { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.cw {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  min-height: 420px;
  border: 1px solid rgba(237,214,86,.38);
  border-radius: 4px;
  background: linear-gradient(180deg, #1c1b20, #121114);
  overflow: hidden;
  position: relative;
}
.cw::before, .cw::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--ice);
  pointer-events: none;
  z-index: 2;
}
.cw::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.cw::after { top: 6px; right: 6px; border-left: 0; border-bottom: 0; }
.cw-side {
  border-right: 1px solid rgba(237,214,86,.28);
  overflow-y: auto;
  max-height: 520px;
  padding: 10px 8px;
  scrollbar-color: var(--ice) #141316;
}
.cw-cat { margin-bottom: 8px; }
.cw-cat-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #161518;
  border: 1px solid rgba(237,214,86,.4);
  color: var(--ice);
  font-family: Rajdhani, sans-serif;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 8px 10px;
  cursor: pointer;
}
.cw-recipes { display: none; padding: 6px 4px 2px; }
.cw-cat.is-open .cw-recipes { display: block; }
.cw-recipe {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: #d7cbb8;
  padding: 6px 8px;
  cursor: pointer;
  font-size: .88rem;
}
.cw-recipe::before { content: "• "; color: var(--ice); }
.cw-recipe.is-on { background: rgba(237,214,86,.12); color: #fff; }
.cw-main {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  background: radial-gradient(ellipse at 30% 55%, rgba(237,214,86,.08), transparent 55%);
}
.cw-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.cw-head h4 { margin: 0; color: #fff; font-size: 1.35rem; font-family: Rajdhani, sans-serif; }
.cw-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.cw-npc, .cw-ok {
  border: 1px solid rgba(237,214,86,.45);
  color: var(--ice);
  padding: 5px 10px;
  font-size: .78rem;
  font-family: Rajdhani, sans-serif;
  font-weight: 700;
  letter-spacing: .04em;
}
.cw-ok { border-color: #3d8f4a; color: #7dcc86; }
.cw-slots {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
  flex: 1;
}
.cw-col { text-align: center; }
.cw-stack {
  display: grid;
  gap: 4px;
  padding: 6px 5px;
  border: 1px solid rgba(237,214,86,.32);
  background: rgba(0,0,0,.28);
}
.cw-cell {
  height: 52px;
  border: 1px solid rgba(237,214,86,.18);
  background: rgba(0,0,0,.35);
  display: grid;
  place-items: center;
  position: relative;
}
.cw-cell.is-on { background: radial-gradient(circle, rgba(237,214,86,.16), rgba(0,0,0,.2)); }
.cw-cell img { width: 32px; height: 32px; image-rendering: pixelated; }
.cw-cell-qty {
  position: absolute;
  right: 3px; bottom: 2px;
  color: var(--ice);
  font-size: .68rem;
  font-weight: 700;
  font-family: Rajdhani, sans-serif;
}
.cw-need { margin-top: 6px; color: var(--ice); font-family: Rajdhani, sans-serif; font-weight: 700; }
.cw-need.is-empty { visibility: hidden; }
.cw-stepper {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-family: Rajdhani, sans-serif;
  font-weight: 700;
}
.cw-stepper button {
  width: 22px; height: 22px;
  border: 1px solid rgba(237,214,86,.4);
  background: #161518;
  color: var(--ice);
  cursor: pointer;
}
.cw-yang {
  margin-top: auto;
  align-self: flex-end;
  border: 1px solid rgba(237,214,86,.45);
  padding: 8px 12px;
  color: var(--ice);
  font-family: Rajdhani, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .82rem;
}
.cw-yang b { font-size: 1rem; }
.feature-card .content-paragraph { color: var(--text); }
.feature-card table, .fz-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.feature-card th, .feature-card td, .fz-table th, .fz-table td {
  border: 1px solid var(--line); padding: 8px 10px; text-align: left;
}
.feature-card th, .fz-table th { background: #1c1c1c; color: var(--ice); font-family: Rajdhani, sans-serif; }
.fz-table-wrap { overflow-x: auto; margin: 12px 0 18px; }
.cms-section-img { border-radius: 10px; margin: 10px 0; max-width: 100%; }
.fz-sub { color: var(--ice); margin-bottom: 10px; }
.fz-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.fz-badge { background: #1c1c1c; border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.fz-badge b { display: block; color: var(--white); margin: 4px 0; }
.fz-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.fz-tabs button {
  background: #1c1c1c; border: 1px solid var(--line); color: var(--muted);
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  font-family: Rajdhani, sans-serif; font-weight: 700;
}
.fz-tabs button.active { background: var(--ember); border-color: var(--ember); color: #fff; }
.fz-class { display: none; grid-template-columns: 220px 1fr; gap: 18px; }
.fz-class.is-on { display: grid; }
.fz-class[hidden] { display: none !important; }
.fz-class img.portrait { width: 100%; border-radius: 10px; border: 1px solid var(--line); background: #141316; }
.fz-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fz-chip {
  display: flex; align-items: center; gap: 6px;
  background: #1c1c1c; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: .82rem;
}
.fz-eq { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.fz-eq div {
  width: 52px; height: 52px; background: #141316; border: 1px solid var(--line);
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
}
.m2-item-img, .fz-eq img, .fz-chip img { width: 32px; height: 32px; image-rendering: pixelated; }
.glow-word { color: var(--ice); font-weight: 700; }

.discord-float { position: fixed; bottom: 2rem; right: 2rem; z-index: 9998; display: flex; align-items: center; }
.discord-float-btn {
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, #5865F2, #4752C4);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; border: 2px solid rgba(255,255,255,.1);
  box-shadow: 0 8px 32px rgba(88,101,242,.4);
  animation: discordPulse 2s ease-in-out infinite;
}
.discord-float-btn svg { width: 32px; height: 32px; fill: #fff; }
.discord-online {
  position: absolute; top: -2px; right: -2px; width: 16px; height: 16px;
  background: #22c55e; border-radius: 50%; border: 3px solid var(--bg);
}
.discord-float-btn { position: relative; }
.discord-tooltip {
  position: absolute; right: 70px;
  background: #1b1a1f; border: 1px solid #5865F266; border-radius: 12px;
  padding: .75rem 1.25rem; white-space: nowrap;
  opacity: 0; visibility: hidden; pointer-events: none;
}
.discord-float-btn:hover + .discord-tooltip { opacity: 1; visibility: visible; }
.discord-tooltip-title { font-weight: 700; color: #5865F2; }
.metin-map {
  margin: 28px 0 12px;
  font-family: Rajdhani, sans-serif;
  font-size: 1.25rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ice);
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}
.metin-card-layout {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.boss-portrait {
  width: 140px;
  height: 160px;
  object-fit: contain;
  object-position: center bottom;
  background: radial-gradient(ellipse at 50% 80%, rgba(237,214,86,.12), transparent 70%);
  border-radius: 10px;
}
@media (max-width: 700px) {
  .metin-card-layout { grid-template-columns: 1fr; }
  .boss-portrait { width: 100%; height: 180px; }
}
.metin-card {
  background: linear-gradient(180deg, #222126, #18171b);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px 18px;
  margin-bottom: 14px;
}
.metin-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.metin-name {
  margin: 0;
  font-family: Rajdhani, sans-serif;
  font-size: 1.2rem;
  color: var(--white);
  letter-spacing: .04em;
}
.metin-lv {
  flex: 0 0 auto;
  background: rgba(192, 57, 43, .2);
  border: 1px solid #c0392b88;
  color: #f3c6c0;
  font-family: Rajdhani, sans-serif;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .08em;
  padding: 4px 10px;
  border-radius: 999px;
}
.metin-map-line {
  margin-top: 4px;
  font-size: .78rem;
  color: var(--muted);
  letter-spacing: .04em;
}
.metin-card-body { margin-top: 2px; }
.metin-card-body > p:first-child { margin-top: 0; }
.metin-card-body .fz-sub { display: none; }
.metin-card-body .fz-items,
.metin-drops {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 8px;
}
.metin-card-body .fz-item,
.metin-drop {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 6px 10px;
  background: rgba(0,0,0,.42);
  border: 1px solid #3a383c;
  border-radius: 8px;
  font-size: .78rem;
  color: var(--text);
}
.metin-drop { position: relative; }
.metin-drop img,
.metin-card-body .fz-item img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  flex-shrink: 0;
}
.drop-tip {
  display: none;
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 5;
  width: max(220px, 100%);
  background: #141316;
  border: 1px solid rgba(237,214,86,.35);
  color: #d7cbb8;
  font-size: .75rem;
  line-height: 1.45;
  padding: 8px 10px;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
}
.metin-drop:hover .drop-tip { display: block; }
.feature-card table,
.fz-table,
.metin-card-body table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .88rem;
  overflow: hidden;
  border-radius: 10px;
}
.feature-card th,
.fz-table th,
.metin-card-body th {
  background: linear-gradient(180deg, #2e2c32, #1c1c1c);
  color: var(--ice);
  font-family: Rajdhani, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .78rem;
  padding: 10px 12px;
  border: 1px solid var(--line);
  text-align: left;
}
.feature-card td,
.fz-table td,
.metin-card-body td {
  background: rgba(0,0,0,.28);
  border: 1px solid #3a383c;
  padding: 10px 12px;
  color: var(--text);
}
.feature-card tbody tr:hover td,
.fz-table tbody tr:hover td,
.metin-card-body tbody tr:hover td {
  background: rgba(237, 214, 86, .08);
}
.fz-table-wrap { overflow-x: auto; margin: 4px 0 0; }

@keyframes discordPulse {
  0%,100% { box-shadow: 0 8px 32px rgba(88,101,242,.4), 0 0 0 0 rgba(88,101,242,.4); }
  50% { box-shadow: 0 8px 32px rgba(88,101,242,.4), 0 0 0 15px rgba(88,101,242,0); }
}

@media (max-width: 1024px) {
  body.fz-page { margin-left: var(--side-min); }
  body.fz-page:not(.nav-collapsed) { margin-left: 260px; }
  .sidebar-navigation { width: var(--side-min); }
  .sidebar-navigation:not(.collapsed) { width: 260px; }
}
@media (max-width: 768px) {
  body.fz-page, body.fz-page:not(.nav-collapsed), body.fz-page.nav-collapsed { margin-left: 0; }
  .topbar-logo { display: none; }
  .nav-link span { display: none; }
  .sidebar-navigation {
    transform: translateX(-110%);
    width: min(280px, 86vw) !important;
  }
  .sidebar-navigation:not(.collapsed) { transform: translateX(0); }
  body.fz-page:not(.nav-collapsed)::after {
    content: "";
    position: fixed; inset: var(--top) 0 0 0;
    background: rgba(0,0,0,.45); z-index: 100;
  }
  .hero-logo { width: min(520px, 94vw); }
  .hero-logo img { max-height: 160px; }
  .fz-class, .fz-badges, .loot-row, .efsun-row, .efsun-cols { grid-template-columns: 1fr; }
  .cw { grid-template-columns: 1fr; }
  .cw-side { max-height: 240px; border-right: 0; border-bottom: 1px solid rgba(237,214,86,.28); }
  .cw-slots { grid-template-columns: repeat(7, 78px); overflow-x: auto; }
  .main-content { padding: 16px 14px 90px; }
  .discord-tooltip { display: none; }
}