@font-face {
  font-family: "Mark Beaufort";
  src: url("../fonts/beaufort-regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}


@font-face {
  font-family: "Mark Beaufort";
  src: url("../fonts/beaufort-bold.otf") format("opentype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

:root {
  --mark-bg: #0b1521;
  --mark-bg-soft: #0e1825;
  --mark-panel: rgba(15, 24, 37, 0.95);
  --mark-panel-soft: rgba(20, 31, 46, 0.86);
  --mark-gold: #d7a64f;
  --mark-gold-light: #f2cf85;
  --mark-red: #cf3f3c;
  --mark-red-dark: #771f27;
  --mark-text: #f3ede3;
  --mark-muted: #a8a8a5;
  --mark-line: rgba(216, 168, 80, 0.2);
  --mark-line-strong: rgba(216, 168, 80, 0.52);
  --mark-shell: 1240px;
}

@property --mark-card-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

html {
  min-width: 0;
  overflow-x: hidden;
  scroll-behavior: smooth;
  background: var(--mark-bg);
}

body.mark-home-page,
body.mark-inner-page {
  position: relative;
  isolation: isolate;
  min-width: 0;
  margin: 0;
  overflow-x: hidden;
  color: var(--mark-text) !important;
  background: var(--mark-bg) !important;
  font-family: "Mark Beaufort", serif !important;
  font-size: 16px;
  line-height: 1.6;
}

body.mark-home-page::before,
body.mark-inner-page::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: block;
  pointer-events: none;
  content: "";
  opacity: .27;
  background: url("../images/wiki-market-village-bg.webp") center top / cover fixed no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 2%, #000 96%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 2%, #000 96%, transparent 100%);
}

body.mark-home-page .fas,
body.mark-home-page .far,
body.mark-inner-page .fas,
body.mark-inner-page .far {
  font-family: "Font Awesome 5 Free" !important;
  font-style: normal;
  font-weight: 900 !important;
}

body.mark-home-page .fab,
body.mark-inner-page .fab {
  font-family: "Font Awesome 5 Brands" !important;
  font-style: normal;
  font-weight: 400 !important;
}

.mark-progress {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 300;
  height: 2px;
  background: rgba(255, 255, 255, 0.03);
  pointer-events: none;
}

.mark-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--mark-red), var(--mark-gold-light));
  box-shadow: 0 0 14px rgba(215, 166, 79, 0.72);
  transform: scaleX(0);
  transform-origin: left center;
}

.mark-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 200;
  padding: 10px 0;
  border-bottom: 0;
  background: transparent;
  pointer-events: none;
  transition: padding 180ms ease;
}

.mark-header.is-scrolled {
  padding: 8px 0;
}

.mark-header-shell {
  width: min(1340px, calc(100% - 52px));
  min-height: 74px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 180px 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 8px 9px 8px 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(110deg, rgba(10, 15, 27, 0.78), rgba(20, 27, 42, 0.7));
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(22px) saturate(1.25);
  pointer-events: auto;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.mark-header.is-scrolled .mark-header-shell {
  border-color: rgba(215, 166, 79, 0.22);
  background: linear-gradient(110deg, rgba(8, 12, 22, 0.92), rgba(14, 20, 34, 0.88));
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.38);
}

.mark-brand {
  display: inline-flex;
  min-width: 170px;
  align-items: center;
  gap: 11px;
  color: var(--mark-text) !important;
  text-decoration: none !important;
}

.mark-brand img {
  width: 126px;
  height: 50px;
  object-fit: contain;
  filter: drop-shadow(0 7px 16px rgba(0, 0, 0, 0.78));
}

.mark-brand > span {
  display: grid;
  gap: 2px;
  padding-left: 10px;
  border-left: 1px solid var(--mark-line-strong);
  line-height: 1;
}

.mark-brand small {
  color: var(--mark-muted);
  font: 700 7px/1 "Mark Beaufort", serif;
  letter-spacing: 0.18em;
}

.mark-brand strong {
  color: var(--mark-gold-light);
  font: 800 13px/1 "Mark Beaufort", serif;
  letter-spacing: 0.12em;
}

.mark-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.mark-navigation > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 13px;
  color: #d8d3ca !important;
  font: 800 12px/1 "Mark Beaufort", serif;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none !important;
  border-radius: 3px;
  transition: color 160ms ease, background-color 160ms ease;
}

.mark-navigation > a > i,
.mark-navigation > a > .mark-menu-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(215, 166, 79, 0.22);
  color: #d7aa57;
  background: rgba(215, 166, 79, 0.06);
  font-family: inherit !important;
  font-size: 0 !important;
  font-style: normal;
  line-height: 0;
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

.mark-navigation > a > i::before,
.mark-navigation > a > .mark-menu-icon::before {
  width: 14px;
  height: 14px;
  display: block;
  margin: auto;
  content: "" !important;
  background: currentColor;
  -webkit-mask: var(--mark-menu-icon) center / contain no-repeat;
  mask: var(--mark-menu-icon) center / contain no-repeat;
}

.mark-navigation > a > .mark-menu-icon-home { --mark-menu-icon: url("../images/wiki-ui/target.svg"); }
.mark-navigation > a > .mark-menu-icon-guide { --mark-menu-icon: url("../images/wiki-ui/faq.svg"); }
.mark-navigation > a > .mark-menu-icon-register { --mark-menu-icon: url("../images/wiki-ui/shop.svg"); }
.mark-navigation > a > .mark-menu-icon-download { --mark-menu-icon: url("../images/wiki-ui/play.svg"); }
.mark-navigation > a > .mark-menu-icon-web { --mark-menu-icon: url("../images/wiki-ui/trade.svg"); }

.mark-navigation > a > span {
  white-space: nowrap;
}

.mark-navigation > a::after {
  position: absolute;
  right: 13px;
  bottom: 4px;
  left: 13px;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, var(--mark-red), var(--mark-gold));
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 160ms ease, transform 160ms ease;
}

.mark-navigation > a:hover,
.mark-navigation > a.is-active {
  color: var(--mark-gold-light) !important;
  background: rgba(255, 255, 255, 0.025);
}

.mark-navigation > a:hover > i,
.mark-navigation > a.is-active > i,
.mark-navigation > a:hover > .mark-menu-icon,
.mark-navigation > a.is-active > .mark-menu-icon {
  border-color: rgba(215, 166, 79, 0.5);
  color: #f2cf85;
  background: rgba(215, 166, 79, 0.11);
}

.mark-navigation > a:hover::after,
.mark-navigation > a.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.mark-header-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mark-language {
  position: relative;
}

.mark-language-toggle,
.mark-menu-toggle {
  height: 42px;
  border: 1px solid var(--mark-line);
  color: #ddd6cb;
  background: rgba(7, 11, 18, 0.76);
  cursor: pointer;
}

.mark-language-toggle {
  display: flex;
  min-width: 76px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
  font: 800 10px "Mark Beaufort", serif;
}

.mark-language-toggle img,
.mark-language-menu img {
  width: 23px;
  height: auto;
}

.mark-language-toggle i {
  color: var(--mark-gold);
  font-size: 8px;
}

.mark-language-menu {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  display: grid;
  min-width: 150px;
  padding: 7px;
  border: 1px solid var(--mark-line-strong);
  background: rgba(6, 9, 15, 0.98);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.56);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-7px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.mark-language.is-open .mark-language-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.mark-language-menu a {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  color: #ddd7cd !important;
  font: 700 11px "Mark Beaufort", serif;
  text-decoration: none !important;
}

.mark-language-menu a:hover {
  color: var(--mark-gold-light) !important;
  background: rgba(215, 166, 79, 0.08);
}

.mark-play-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 9px;
  padding: 0 15px;
  border: 1px solid rgba(207, 63, 60, 0.52);
  color: #fff1e3 !important;
  background: linear-gradient(115deg, rgba(104, 24, 29, 0.94), rgba(172, 45, 44, 0.92));
  font: 800 10px "Mark Beaufort", serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: filter 160ms ease, transform 160ms ease;
}

.mark-play-button:hover {
  color: #fff !important;
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.mark-play-icon { --mark-play-mask: url("../images/wiki-ui/play.svg"); width: 15px; height: 15px; flex: 0 0 15px; display: block; background: currentColor; -webkit-mask: var(--mark-play-mask) center / contain no-repeat; mask: var(--mark-play-mask) center / contain no-repeat; font-size: 0; }

.mark-menu-toggle {
  display: none;
  width: 44px;
  align-content: center;
  justify-items: center;
  gap: 5px;
  padding: 0;
}

.mark-menu-toggle span {
  display: block;
  width: 19px;
  height: 2px;
  background: var(--mark-gold-light);
  transition: transform 180ms ease, opacity 180ms ease;
}

.mark-menu-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mark-menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.mark-menu-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mark-hero {
  position: relative;
  min-height: 760px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 0;
  background: #06090f;
}

.mark-hero::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 180px;
  content: "";
  background: linear-gradient(180deg, transparent 0%, #0b1521 72%, #0b1521 100%);
  pointer-events: none;
}

.mark-hero-media {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 7, 12, 0.8), rgba(4, 7, 12, 0.15) 48%, rgba(4, 7, 12, 0.84)),
    linear-gradient(180deg, rgba(4, 7, 12, 0.18), rgba(4, 7, 12, 0.12) 48%, #0b1521 96%),
    url("../images/wiki-hero-classes.png?v=20260823-visual12") center 46% / cover no-repeat;
  transform: scale(1.01);
}

.mark-hero-media::before {
  position: absolute;
  inset: 0;
  content: "";
  background: radial-gradient(circle at 50% 48%, rgba(202, 119, 39, 0.18), transparent 31%);
  animation: mark-hero-pulse 8s ease-in-out infinite alternate;
}

.mark-hero-media::after {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.2;
  background-image: linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px);
  background-size: 100% 4px;
  mix-blend-mode: soft-light;
}

.mark-hero-glow {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.13;
}

.mark-hero-glow-one { top: 24%; left: 8%; background: var(--mark-red); }
.mark-hero-glow-two { right: 8%; bottom: 18%; background: var(--mark-gold); }

.mark-hero-content {
  position: relative;
  z-index: 3;
  width: min(900px, calc(100% - 40px));
  padding: 120px 0 90px;
  text-align: center;
}

.mark-eyebrow,
.mark-since {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: 0;
  color: var(--mark-gold-light);
  font: 800 9px/1 "Mark Beaufort", serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.mark-eyebrow span,
.mark-since i {
  display: block;
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mark-gold));
}

.mark-eyebrow span:last-child,
.mark-since i:last-child { transform: scaleX(-1); }

.mark-hero-logo {
  width: min(470px, 70vw);
  margin: 24px auto 13px;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.8));
}

.mark-since {
  color: #d8d0c2;
  letter-spacing: 0.14em;
}

.mark-hero h1 {
  max-width: 780px;
  margin: 28px auto 12px;
  color: #fff7ea;
  font: 800 clamp(34px, 4.4vw, 62px)/1.02 "Mark Beaufort", serif;
  letter-spacing: -0.025em;
  text-shadow: 0 5px 24px #000;
}

.mark-hero-text {
  max-width: 700px;
  margin: 0 auto;
  color: #bdb9b1;
  font: 400 16px/1.65 "Mark Beaufort", serif;
}

.mark-search {
  position: relative;
  width: min(780px, 100%);
  height: 66px;
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 32px auto 0;
  padding: 0 18px;
  border: 1px solid var(--mark-line-strong);
  border-left: 3px solid var(--mark-red);
  background: rgba(5, 8, 14, 0.9);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.42), inset 0 0 30px rgba(216, 168, 80, 0.025);
  backdrop-filter: blur(12px);
}

.mark-search:focus-within {
  border-color: var(--mark-gold);
  box-shadow: 0 0 0 3px rgba(215, 166, 79, 0.1), 0 24px 56px rgba(0, 0, 0, 0.48);
}

.mark-search > i { color: var(--mark-gold-light); font-size: 18px; }

.mark-search input {
  min-width: 0;
  height: 100%;
  flex: 1;
  border: 0;
  outline: 0;
  color: #f0ece5;
  background: transparent;
  font: 600 14px "Mark Beaufort", serif;
}

.mark-search input::placeholder { color: #8f908f; }

.mark-search kbd {
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-bottom-color: rgba(255, 255, 255, 0.2);
  color: #888c91;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: none;
  font: 700 8px "Mark Beaufort", serif;
}

.mark-search #snrtr_aramaSonuc {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 60;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  transform: none !important;
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--mark-line-strong);
  background: rgba(6, 9, 15, 0.99);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.65);
  text-align: left;
}

.mark-search #snrtr_aramaSonuc:empty { display: none !important; }

.mark-search #snrtr_aramaSonuc ul { margin: 0; padding: 8px; list-style: none; }
.mark-search #snrtr_aramaSonuc a { display: flex; min-height: 44px; align-items: center; gap: 8px; padding: 6px 10px; color: #ddd8cf !important; text-decoration: none; }
.mark-search #snrtr_aramaSonuc a:hover { color: var(--mark-gold-light) !important; background: rgba(215, 166, 79, 0.08); }

.mark-hero-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.mark-action {
  min-width: 190px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 18px;
  color: #f6eee0 !important;
  font: 800 10px "Mark Beaufort", serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: filter 160ms ease, transform 160ms ease;
}

.mark-action:hover { color: #fff !important; filter: brightness(1.12); transform: translateY(-2px); }
.mark-action-primary { border: 1px solid rgba(207, 63, 60, 0.6); background: linear-gradient(110deg, #691c23, #b33b39 52%, #691c23); }
.mark-action-secondary { border: 1px solid var(--mark-line-strong); background: rgba(9, 14, 22, 0.86); }

.mark-scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  z-index: 4;
  display: grid;
  gap: 8px;
  color: #a9a49b !important;
  font: 800 8px "Mark Beaufort", serif;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none !important;
  transform: translateX(-50%);
}

.mark-scroll-cue i { color: var(--mark-gold); animation: mark-cue 1.5s ease-in-out infinite; }

.mark-back-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 180;
  width: 46px;
  height: 46px;
  display: none;
  place-items: center;
  border: 1px solid var(--mark-line-strong);
  color: var(--mark-gold-light);
  background: rgba(6, 10, 16, 0.94);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.48);
  cursor: pointer;
}

.mark-section {
  position: relative;
  padding: 96px 0;
  background: transparent;
}

.mark-section-alt { background: linear-gradient(180deg, #070a11, #090d14 52%, #070a11); }
.mark-shell { width: min(var(--mark-shell), calc(100% - 48px)); margin: 0 auto; }

.mark-section-heading { max-width: 760px; margin: 0 auto 46px; text-align: center; }
.mark-section-heading > p:first-child { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0; color: var(--mark-gold); font: 800 9px "Mark Beaufort", serif; letter-spacing: .2em; text-transform: uppercase; }
.mark-section-heading > p:first-child span { width: 38px; height: 1px; background: linear-gradient(90deg, transparent, var(--mark-gold)); }
.mark-section-heading > p:first-child span:last-child { transform: scaleX(-1); }
.mark-section-heading h2 { margin: 14px 0 9px; color: #fff4e2; font: 800 clamp(30px, 4vw, 48px)/1.05 "Mark Beaufort", serif; }
.mark-section-heading h2 em { color: var(--mark-gold-light); font-style: normal; }
.mark-section-heading > p:last-child { margin: 0; color: var(--mark-muted); font: 400 14px/1.65 "Mark Beaufort", serif; }
.mark-heading-rule { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 17px 0; }
.mark-heading-rule::before, .mark-heading-rule::after { width: 88px; height: 1px; content: ""; background: linear-gradient(90deg, transparent, var(--mark-line-strong)); }
.mark-heading-rule::after { transform: scaleX(-1); }
.mark-heading-rule i { width: 8px; height: 8px; border: 1px solid var(--mark-gold); transform: rotate(45deg); }

.mark-character-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.mark-character-card { position: relative; min-height: 430px; overflow: hidden; border: 1px solid var(--mark-line); background: #0a1019 center top / cover no-repeat; box-shadow: 0 24px 60px rgba(0,0,0,.34); transition: border-color 180ms ease, transform 180ms ease; }
.mark-character-card::before { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, rgba(4,8,13,.08) 28%, rgba(5,8,13,.9) 78%, #06090e); }
.mark-character-card::after { position: absolute; top: 0; right: 0; left: 0; height: 2px; content: ""; background: linear-gradient(90deg, var(--mark-red), var(--mark-gold), transparent); }
.mark-character-card:hover { border-color: var(--mark-line-strong); transform: translateY(-5px); }
.mark-character-warrior { --mark-character-image: url("../images/savasci-bg.png"); --mark-start-weapon: url("../images/wiki-starter-items/00010.png"); --mark-start-armor: url("../images/wiki-starter-items/11200.png"); --mark-start-helmet: url("../images/wiki-starter-items/12200.png"); background-image: var(--mark-character-image); }
.mark-character-ninja { --mark-character-image: url("../images/ninja-bg.png"); --mark-start-weapon: url("../images/wiki-starter-items/01000.png"); --mark-start-armor: url("../images/wiki-starter-items/11400.png"); --mark-start-helmet: url("../images/wiki-starter-items/12340.png"); background-image: var(--mark-character-image); }
.mark-character-sura { --mark-character-image: url("../images/sura-bg.png"); --mark-start-weapon: url("../images/wiki-starter-items/00010.png"); --mark-start-armor: url("../images/wiki-starter-items/11600.png"); --mark-start-helmet: url("../images/wiki-starter-items/12480.png"); background-image: var(--mark-character-image); }
.mark-character-shaman { --mark-character-image: url("../images/saman-bg.png"); --mark-start-weapon: url("../images/wiki-starter-items/07000.png"); --mark-start-armor: url("../images/wiki-starter-items/11800.png"); --mark-start-helmet: url("../images/wiki-starter-items/12620.png"); background-image: var(--mark-character-image); }
.mark-character-lycan { --mark-character-image: url("../images/wiki-page-current.jpg"); --mark-start-weapon: url("../images/wiki-starter-items/06000.png"); --mark-start-armor: url("../images/wiki-starter-items/21000.png"); --mark-start-helmet: url("../images/wiki-starter-items/21500.png"); background-image: var(--mark-character-image); }
.mark-character-copy { position: absolute; right: 20px; bottom: 20px; left: 20px; z-index: 2; }
.mark-character-copy small { color: #aaa69f; font: 800 8px "Mark Beaufort", serif; letter-spacing: .15em; text-transform: uppercase; }
.mark-character-copy h3 { margin: 4px 0 16px; color: var(--mark-gold-light); font: 800 27px/1 "Mark Beaufort", serif; text-transform: uppercase; }
.mark-character-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.mark-character-links a { min-height: 37px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.1); color: #ddd8cf !important; background: rgba(3,7,12,.72); font: 800 8px "Mark Beaufort", serif; letter-spacing: .05em; text-transform: uppercase; text-decoration: none !important; }
.mark-character-links a:hover { border-color: var(--mark-gold); color: var(--mark-gold-light) !important; background: rgba(215,166,79,.09); }

.mark-guide-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; }
.mark-feature-card { position: relative; min-height: 420px; display: flex; align-items: flex-end; overflow: hidden; border: 1px solid var(--mark-line); background: #0b1019 center / cover no-repeat; }
.mark-feature-card::before { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, rgba(4,7,12,.05), rgba(4,7,12,.9) 78%, #05080d); }
.mark-feature-large { grid-row: span 2; min-height: 856px; background-image: url("../images/slider-img3.jpg?v=20260823-visual12"); }
.mark-feature-attr { background-image: url("../images/slider-img2.jpg?v=20260823-visual12"); }
.mark-feature-faq { background-image: url("../images/slider-img.jpg?v=20260823-visual12"); }
.mark-feature-copy { position: relative; z-index: 2; width: 100%; padding: 30px; }
.mark-feature-copy small { color: var(--mark-gold); font: 800 8px "Mark Beaufort", serif; letter-spacing: .16em; text-transform: uppercase; }
.mark-feature-copy h3 { margin: 8px 0; color: #fff0d5; font: 800 clamp(25px, 3vw, 42px)/1.05 "Mark Beaufort", serif; }
.mark-feature-copy p { max-width: 570px; margin: 0 0 20px; color: #b7b4ad; font: 400 13px/1.65 "Mark Beaufort", serif; }
.mark-feature-copy a { display: inline-flex; min-height: 42px; align-items: center; gap: 12px; padding: 0 16px; border: 1px solid var(--mark-line-strong); border-left: 2px solid var(--mark-red); color: #eee5d7 !important; background: rgba(6,10,16,.82); font: 800 9px "Mark Beaufort", serif; letter-spacing: .1em; text-transform: uppercase; text-decoration: none !important; }

.mark-world-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.mark-world-card { position: relative; min-height: 380px; display: flex; align-items: flex-end; overflow: hidden; border: 1px solid var(--mark-line); background: #0b1018 center / cover no-repeat; text-decoration: none !important; transition: border-color 180ms ease, transform 180ms ease; }
.mark-world-card::before { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, rgba(3,6,11,.04), rgba(5,8,13,.9) 77%, #05070c); }
.mark-world-card:hover { border-color: var(--mark-line-strong); transform: translateY(-5px); }
.mark-world-metin { background-image: url("../images/news-img-1.jpg?v=20260823-visual12"); }
.mark-world-boss { background-image: url("../images/news-img-2.jpg?v=20260823-visual12"); }
.mark-world-dungeon { background-image: url("../images/news-img-3.jpg?v=20260823-visual12"); }
.mark-world-copy { position: relative; z-index: 2; padding: 25px; }
.mark-world-copy small { color: var(--mark-gold); font: 800 8px "Mark Beaufort", serif; letter-spacing: .15em; }
.mark-world-copy h3 { margin: 5px 0 8px; color: #fff1d8; font: 800 29px "Mark Beaufort", serif; }
.mark-world-copy p { margin: 0 0 17px; color: #b4b0aa; font: 400 12px/1.6 "Mark Beaufort", serif; }
.mark-world-copy span { color: var(--mark-gold-light); font: 800 9px "Mark Beaufort", serif; letter-spacing: .1em; text-transform: uppercase; }

.mark-system-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mark-system-card { position: relative; min-height: 330px; display: flex; align-items: flex-end; overflow: hidden; border: 1px solid var(--mark-line); background: #0a0f17 center / cover no-repeat; text-decoration: none !important; transition: border-color 180ms ease, transform 180ms ease; }
.mark-system-card::before { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, rgba(5,8,13,.04), rgba(5,8,13,.88) 70%, #05070c); }
.mark-system-card:hover { border-color: var(--mark-line-strong); transform: translateY(-5px); }
.mark-system-card > div { position: relative; z-index: 2; width: 100%; padding: 24px; }
.mark-system-card small { color: var(--mark-gold); font: 800 8px "Mark Beaufort", serif; letter-spacing: .15em; text-transform: uppercase; }
.mark-system-card h3 { margin: 7px 0 8px; color: #fff0d7; font: 800 29px/1 "Mark Beaufort", serif; }
.mark-system-card p { min-height: 38px; margin: 0 0 16px; color: #b4b0aa; font: 400 12px/1.55 "Mark Beaufort", serif; }
.mark-system-card span { color: var(--mark-gold-light); font: 800 9px "Mark Beaufort", serif; letter-spacing: .1em; text-transform: uppercase; }
.mark-system-faq { background-image: url("../images/event-image.png"); }
.mark-system-npc { background-image: url("../images/Npc-Icerigi.png"); }
.mark-system-maps { background-image: url("../images/Maps-Image.png"); }
.mark-system-riding { background-image: url("../images/Binek-Sistemi.png"); }
.mark-system-pet { background-image: url("../images/BYES/Pet-Sistemi.png"); }

.mark-market-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mark-market-card { overflow: hidden; border: 1px solid var(--mark-line); background: #0a0f17; }
.mark-market-card > header { min-height: 118px; display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 5px 20px; padding: 25px 28px; border-bottom: 1px solid var(--mark-line); background: linear-gradient(110deg, rgba(126,30,34,.22), rgba(154,105,31,.07), transparent); }
.mark-market-card header small { grid-column: 1 / -1; color: var(--mark-gold); font: 800 8px "Mark Beaufort", serif; letter-spacing: .16em; text-transform: uppercase; }
.mark-market-card header h3 { margin: 0; color: #fff0d7; font: 800 29px "Mark Beaufort", serif; }
.mark-market-card header > a { align-self: center; color: var(--mark-gold-light) !important; font: 800 9px "Mark Beaufort", serif; text-decoration: none !important; text-transform: uppercase; }
.mark-market-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--mark-line); }
.mark-market-items > a { min-height: 132px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 12px; color: #c9c5bd !important; background: #0b1018; font: 700 9px/1.3 "Mark Beaufort", serif; text-align: center; text-decoration: none !important; }
.mark-market-items > a:hover { color: var(--mark-gold-light) !important; background: #111823; }
.mark-market-items img { max-width: 52px; max-height: 58px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0,0,0,.6)); }

.mark-catalog { border: 1px solid var(--mark-line); background: rgba(10,15,23,.9); box-shadow: 0 25px 70px rgba(0,0,0,.32); }
.mark-catalog-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 28px; border-bottom: 1px solid var(--mark-line); background: linear-gradient(90deg, rgba(130,35,38,.18), rgba(148,99,29,.08), transparent); }
.mark-catalog-header h3 { margin: 0; color: #fff0d7; font: 800 25px "Mark Beaufort", serif; }
.mark-catalog-header span { color: var(--mark-gold); font: 800 8px "Mark Beaufort", serif; letter-spacing: .15em; text-transform: uppercase; }
.mark-catalog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--mark-line); }
.mark-catalog-grid > a { min-height: 78px; display: flex; align-items: center; gap: 13px; padding: 13px 15px; color: #d9d5cd !important; background: #0b1018; font: 700 11px/1.35 "Mark Beaufort", serif; text-decoration: none !important; transition: color 160ms ease, background-color 160ms ease; }
.mark-catalog-grid > a:hover { color: var(--mark-gold-light) !important; background: #111823; }
.mark-catalog-grid img { width: 38px; height: 42px; object-fit: contain; filter: drop-shadow(0 7px 9px rgba(0,0,0,.55)); }

.mark-biologist { display: grid; grid-template-columns: .82fr 1.18fr; border: 1px solid var(--mark-line); background: #0a0f17; }
.mark-biologist-copy { position: relative; display: grid; align-content: center; padding: 44px; background: linear-gradient(135deg, rgba(104,27,31,.22), rgba(10,15,23,.94)); }
.mark-biologist-copy small { color: var(--mark-gold); font: 800 8px "Mark Beaufort", serif; letter-spacing: .18em; text-transform: uppercase; }
.mark-biologist-copy h3 { margin: 10px 0; color: #fff0d7; font: 800 36px/1.05 "Mark Beaufort", serif; }
.mark-biologist-copy p { margin: 0 0 22px; color: #b4b1aa; font: 400 13px/1.65 "Mark Beaufort", serif; }
.mark-biologist-copy a { width: max-content; min-height: 42px; display: inline-flex; align-items: center; gap: 10px; padding: 0 16px; border: 1px solid var(--mark-line-strong); color: var(--mark-gold-light) !important; background: rgba(5,8,13,.68); font: 800 9px "Mark Beaufort", serif; text-transform: uppercase; text-decoration: none !important; }
.mark-biologist-items { min-height: 300px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; gap: 1px; padding: 28px; background: linear-gradient(180deg, rgba(11,18,28,.86), rgba(6,10,16,.95)), url("../images/wiki-page-current.jpg") center / cover; }
.mark-biologist-item { min-height: 130px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02); }
.mark-biologist-item:hover { border-color: var(--mark-line-strong); background: rgba(215,166,79,.06); }
.mark-biologist-item img { max-width: 54px; max-height: 62px; filter: drop-shadow(0 10px 12px rgba(0,0,0,.6)); }

.mark-community-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mark-community-grid a { min-height: 82px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--mark-line); color: #ddd7ce !important; background: rgba(11,16,24,.88); font: 800 11px "Mark Beaufort", serif; letter-spacing: .08em; text-transform: uppercase; text-decoration: none !important; transition: border-color 160ms ease, color 160ms ease, transform 160ms ease; }
.mark-community-grid a:hover { border-color: var(--mark-gold); color: var(--mark-gold-light) !important; transform: translateY(-3px); }
.mark-community-grid i { color: var(--mark-gold); font-size: 20px; }

.mark-footer { position: relative; width: 100%; padding: 30px 0 20px; border-top: 1px solid var(--mark-line); background: #080d18; }
.mark-footer::before { position: absolute; top: -1px; right: 0; left: 0; height: 1px; content: ""; background: linear-gradient(90deg, transparent, var(--mark-gold), transparent); opacity: .5; }
.mark-footer-shell { width: min(var(--mark-shell), calc(100% - 48px)); display: grid; gap: 22px; margin: 0 auto; }
.mark-footer-follow { display: flex; align-items: center; justify-content: space-between; gap: 28px; width: 100%; padding: 20px 22px; border: 1px solid rgba(207,163,85,.22); border-left: 3px solid rgba(210,162,76,.78); background: linear-gradient(105deg, rgba(37,27,20,.34), rgba(10,16,25,.88)); }
.mark-footer-follow-copy { display: grid; gap: 7px; }
.mark-footer-follow-copy small { color: #a9854c; font: 800 8px/1 "Mark Beaufort", serif; letter-spacing: .16em; }
.mark-footer-follow-copy strong { color: #e9dfcf; font: 700 18px/1.1 "Mark Beaufort", serif; }
.mark-footer-socials { display: flex; gap: 9px; }
.mark-footer-socials a { min-width: 110px; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 8px 13px; border: 1px solid rgba(207,163,85,.24); color: #f3d998 !important; background: #090f1b; font: 700 10px/1 "Mark Beaufort", serif; text-decoration: none !important; transition: border-color .2s ease, color .2s ease, transform .2s ease, background-color .2s ease; }
.mark-footer-socials a:hover { border-color: rgba(231,184,96,.7); color: #fff0bd !important; background: #111827; transform: translateY(-2px); }
.mark-footer-socials .mark-footer-social-icon { --mark-social-icon: none; width: 18px; height: 18px; flex: 0 0 18px; display: block; color: var(--mark-gold-light); background-color: currentColor; -webkit-mask: var(--mark-social-icon) center / contain no-repeat; mask: var(--mark-social-icon) center / contain no-repeat; font-size: 0; transition: color .2s ease, filter .2s ease; }
.mark-footer-socials a:hover .mark-footer-social-icon { color: #fff0bd; filter: drop-shadow(0 0 7px rgba(231,184,96,.62)); }
.mark-footer-social-discord { --mark-social-icon: url("../images/wiki-ui/discord.svg") !important; }
.mark-footer-social-whatsapp { --mark-social-icon: url("../images/wiki-ui/whatsapp.svg") !important; }
.mark-footer-social-instagram { --mark-social-icon: url("../images/wiki-ui/instagram.svg") !important; }
.mark-footer-social-facebook { --mark-social-icon: url("../images/wiki-ui/facebook.svg") !important; }
.mark-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 42px; }
.mark-footer-brand { display: flex; align-items: center; gap: 22px; }
.mark-footer-brand img { width: 250px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.7)); }
.mark-footer-since { min-width: min(340px, 100%); display: grid; grid-template-columns: 1fr auto 1fr; }
.mark-footer-since article { display: grid; place-content: center; gap: 6px; padding: 8px 14px; text-align: center; }
.mark-footer-since small { color: #c4b48a; font: 800 8px/1 "Mark Beaufort", serif; letter-spacing: .16em; }
.mark-footer-since strong { color: #f4d28f; font: 700 15px/1 "Mark Beaufort", serif; letter-spacing: .08em; }
.mark-footer-since-rule { width: 1px; margin: 6px 0; background: linear-gradient(180deg, transparent, rgba(210,162,76,.75), transparent); }
.mark-footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 22px; }
.mark-footer-links a { color: #c8c3ba !important; font: 800 9px "Mark Beaufort", serif; letter-spacing: .08em; text-transform: uppercase; text-decoration: none !important; }
.mark-footer-links a:hover { color: var(--mark-gold-light) !important; }
.mark-footer-copy { padding-top: 16px; border-top: 1px solid rgba(255,255,255,.07); color: #858783; font: 400 10px "Mark Beaufort", serif; text-align: center; }

.mark-inner-page .mark-hero { min-height: 560px; }
.mark-inner-page .mark-hero-content { padding-top: 115px; padding-bottom: 75px; }
.mark-inner-page .mark-hero h1 { font-size: clamp(30px, 4vw, 50px); }
.mark-inner-page section.main { margin: 0 !important; padding: 48px 0 0 !important; background: linear-gradient(180deg, #070a10, #05070c) !important; }
.mark-inner-page section.main > .container { width: min(var(--mark-shell), calc(100% - 48px)) !important; }

.mark-reveal { opacity: 0; transform: translateY(24px); transition: opacity 650ms ease var(--mark-delay, 0ms), transform 650ms cubic-bezier(.22,.75,.25,1) var(--mark-delay, 0ms); }
.mark-reveal.is-visible { opacity: 1; transform: translateY(0); }

@keyframes mark-hero-pulse { from { opacity: .72; transform: scale(1); } to { opacity: 1; transform: scale(1.035); } }
@keyframes mark-cue { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

@media (max-width: 1120px) {
  .mark-header-shell { width: min(100% - 30px, var(--mark-shell)); gap: 16px; grid-template-columns: 150px minmax(0, 1fr) auto; }
  .mark-brand { min-width: 145px; }
  .mark-brand > span { display: none; }
  .mark-navigation > a { padding: 0 10px; font-size: 10px; gap: 7px; }
  .mark-navigation > a > i,
  .mark-navigation > a > .mark-menu-icon { width: 26px; height: 26px; }
  .mark-navigation > a > i::before,
  .mark-navigation > a > .mark-menu-icon::before { width: 13px; height: 13px; }
  .mark-character-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mark-character-card { min-height: 390px; }
  .mark-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mark-system-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .mark-header { padding: 8px 0; }
  .mark-header-shell { width: calc(100% - 24px); grid-template-columns: 1fr auto; gap: 12px; padding: 8px 12px; }
  .mark-brand img { width: 116px; height: 42px; }
  .mark-navigation { position: absolute; top: calc(100% + 6px); right: 12px; left: 12px; height: auto; display: grid; gap: 0; padding: 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 4px; background: linear-gradient(110deg, rgba(10,15,27,.96), rgba(20,27,42,.94)); box-shadow: 0 26px 60px rgba(0,0,0,.64); backdrop-filter: blur(22px) saturate(1.25); opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity 170ms ease, transform 170ms ease; }
  .mark-navigation.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .mark-navigation > a { min-height: 48px; height: auto; justify-content: flex-start; padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,.055); }
  .mark-navigation > a::after { right: auto; bottom: 9px; left: 14px; width: 30px; }
  .mark-menu-toggle { display: grid; }
  .mark-play-button { display: none; }
  .mark-hero { min-height: 700px; }
  .mark-guide-grid { grid-template-columns: 1fr; }
  .mark-feature-large { grid-row: auto; min-height: 480px; }
  .mark-feature-card { min-height: 360px; }
  .mark-world-grid { grid-template-columns: 1fr; }
  .mark-world-card { min-height: 330px; }
  .mark-market-grid { grid-template-columns: 1fr; }
  .mark-biologist { grid-template-columns: 1fr; }
  .mark-biologist-items { grid-template-columns: repeat(5, minmax(80px, 1fr)); overflow-x: auto; }
  .mark-community-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 640px) {
  .mark-header-shell { gap: 8px; }
  .mark-brand { min-width: 0; margin-right: auto; }
  .mark-brand img { width: 108px; }
  .mark-language-toggle { min-width: 44px; width: 44px; padding: 0; }
  .mark-language-toggle span, .mark-language-toggle i { display: none; }
  .mark-hero { min-height: 680px; }
  .mark-hero-content { width: calc(100% - 24px); padding: 105px 0 78px; }
  .mark-eyebrow, .mark-since { gap: 7px; font-size: 7px; letter-spacing: .13em; }
  .mark-eyebrow span, .mark-since i { width: 20px; }
  .mark-hero-logo { width: min(310px, 78vw); margin-top: 20px; }
  .mark-hero h1 { margin-top: 22px; font-size: 35px; }
  .mark-hero-text { font-size: 13px; line-height: 1.55; }
  .mark-search { height: 58px; margin-top: 24px; padding: 0 14px; }
  .mark-search input { font-size: 12px; }
  .mark-search kbd { display: none; }
  .mark-hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .mark-action { min-width: 0; min-height: 46px; padding: 0 10px; font-size: 8px; }
  .mark-scroll-cue { bottom: 20px; }
  .mark-section { padding: 72px 0; }
  .mark-shell { width: calc(100% - 24px); }
  .mark-section-heading { margin-bottom: 30px; }
  .mark-section-heading > p:last-child { font-size: 12px; }
  .mark-character-grid { grid-template-columns: 1fr; }
  .mark-character-card { min-height: 360px; background-position: center top; }
  .mark-feature-large { min-height: 420px; }
  .mark-feature-card { min-height: 320px; }
  .mark-feature-copy { padding: 22px; }
  .mark-world-card { min-height: 300px; }
  .mark-system-grid { grid-template-columns: 1fr; }
  .mark-system-card { min-height: 310px; }
  .mark-catalog-header { display: grid; padding: 20px; }
  .mark-catalog-grid { grid-template-columns: 1fr; }
  .mark-catalog-grid > a { min-height: 68px; }
  .mark-biologist-copy { padding: 30px 24px; }
  .mark-biologist-copy h3 { font-size: 31px; }
  .mark-biologist-items { padding: 18px; }
  .mark-market-card > header { grid-template-columns: 1fr; }
  .mark-market-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mark-community-grid { grid-template-columns: 1fr; }
  .mark-footer { padding: 24px 0 18px; }
  .mark-footer-shell { width: calc(100% - 24px); text-align: center; }
  .mark-footer-follow { display: grid; justify-items: center; gap: 18px; padding: 18px 14px; }
  .mark-footer-socials { flex-wrap: wrap; justify-content: center; }
  .mark-footer-socials a { min-width: 96px; }
  .mark-footer-bottom { display: grid; justify-items: center; gap: 22px; }
  .mark-footer-brand { display: grid; justify-items: center; gap: 12px; }
  .mark-footer-brand img { margin: 0 auto; }
  .mark-footer-since { min-width: 0; width: 100%; }
  .mark-footer-links { justify-content: center; }
  .mark-inner-page .mark-hero { min-height: 580px; }
  .mark-inner-page section.main { padding: 28px 0 0 !important; }
  .mark-inner-page section.main > .container { width: calc(100% - 24px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .mark-reveal { opacity: 1; transform: none; }
}

/* Shared inner-page system: production views and the local live-content proxy. */
body.mark-inner-page,
body.local-wiki-route { min-height: 100%; background: #05070c; }
.mark-detail-hero { position: relative; z-index: 4; min-height: 520px; display: grid; place-items: center; overflow: visible !important; padding: 120px 24px 64px; border-bottom: 1px solid var(--mark-line); background: linear-gradient(180deg, rgba(4,7,12,.48), #05070c 92%), url("../images/wiki-hero-current.webp") center 38% / cover no-repeat; }
.mark-detail-hero::before { position: absolute; inset: 0; content: ""; background: radial-gradient(circle at 50% 44%, rgba(160,80,30,.18), transparent 38%), linear-gradient(90deg, rgba(3,6,11,.82), transparent 34%, transparent 66%, rgba(3,6,11,.82)); pointer-events: none; }
.mark-detail-hero-content { position: relative; z-index: 2; width: min(800px, 100%); text-align: center; }
.mark-detail-hero-content > p { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 18px; color: var(--mark-gold); font: 800 8px "Mark Beaufort", serif; letter-spacing: .17em; text-transform: uppercase; }
.mark-detail-hero-content > p span { width: 44px; height: 1px; background: linear-gradient(90deg, transparent, var(--mark-gold)); }
.mark-detail-hero-content > p span:last-child { transform: rotate(180deg); }
.mark-detail-breadcrumb { display: inline-flex; margin-bottom: 10px; color: #aaa59c !important; font: 700 9px "Mark Beaufort", serif; letter-spacing: .1em; text-decoration: none !important; text-transform: uppercase; }
.mark-detail-breadcrumb:hover { color: var(--mark-gold-light) !important; }
.mark-detail-hero h1 { margin: 0; color: #fff1db; font: 800 clamp(38px, 6vw, 72px)/.98 "Mark Beaufort", serif; text-shadow: 0 12px 35px rgba(0,0,0,.76); }
.mark-detail-hero .mark-search { margin-top: 30px; }
body.mark-inner-page section.main,
body.local-wiki-route section.main { position: relative; z-index: 3; margin: 0 !important; padding: 58px 0 0 !important; background: linear-gradient(180deg, #09111b, #09111b) !important; }
body.mark-inner-page section.main > .container,
body.local-wiki-route section.main > .container { width: min(var(--mark-shell), calc(100% - 48px)) !important; }
body.mark-inner-page .snrtr_Kutu,
body.local-wiki-route .snrtr_Kutu { overflow: hidden; border: 1px solid var(--mark-line) !important; background: rgba(10,15,23,.94) !important; box-shadow: 0 22px 55px rgba(0,0,0,.25); }
body.mark-inner-page .snrtr_Kutu_Baslik,
body.local-wiki-route .snrtr_Kutu_Baslik { border-bottom-color: var(--mark-line) !important; background: linear-gradient(90deg, rgba(126,30,34,.25), rgba(154,105,31,.08), transparent) !important; }
body.mark-inner-page .snrtr_Kutu_Baslik h2,
body.local-wiki-route .snrtr_Kutu_Baslik h2 { color: #fff0d8 !important; font-family: "Mark Beaufort", serif !important; }
body.mark-inner-page .snrtr_Kutu_Baslik h3,
body.local-wiki-route .snrtr_Kutu_Baslik h3 { color: #9fa09d !important; }
body.mark-inner-page .snrtr_Kutu_Icerik,
body.local-wiki-route .snrtr_Kutu_Icerik { background: rgba(7,11,17,.82) !important; }
body.mark-inner-page .table,
body.local-wiki-route .table { width: 100%; margin-bottom: 0; }
body.mark-inner-page table.table-responsive,
body.local-wiki-route table.table-responsive { display: block; width: 100% !important; min-width: 0 !important; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.mark-inner-page table.table-responsive > thead,
body.local-wiki-route table.table-responsive > thead,
body.mark-inner-page table.table-responsive > tbody,
body.local-wiki-route table.table-responsive > tbody { display: table; width: 100%; min-width: 680px; table-layout: fixed; }
body.mark-inner-page table.table:not(.table-responsive),
body.local-wiki-route table.table:not(.table-responsive) { width: 100% !important; min-width: 0 !important; table-layout: auto; }
body.mark-inner-page .table th,
body.local-wiki-route .table th { color: var(--mark-gold-light) !important; background: rgba(126,30,34,.15) !important; }
body.mark-inner-page .table td,
body.local-wiki-route .table td { color: #d1cdc5 !important; border-color: rgba(255,255,255,.07) !important; }
body.mark-inner-page .snrtr_ItemDetayResim,
body.local-wiki-route .snrtr_ItemDetayResim { border: 1px solid rgba(215,166,79,.18); background-color: rgba(255,255,255,.025) !important; }

body.mark-route-inner section.main > .container::before,
body.mark-route-inner section.main > .container::after { display: table; clear: both; content: ""; }
body.mark-route-inner section.main .col-md-12.no-padding { width: 100%; float: none; }
body.mark-route-inner .mark-empty-box { display: none !important; }
body.mark-route-inner .snrtr_Kutu { height: auto !important; margin: 0 0 24px; border-radius: 2px; }
body.mark-route-inner .snrtr_Sol-Ust::after,
body.mark-route-inner .snrtr_Sol-Alt::after,
body.mark-route-inner .snrtr_Sag-Ust::after,
body.mark-route-inner .snrtr_Sag-Alt::after { display: none !important; content: none !important; background: none !important; }
body.mark-route-inner .snrtr_Kutu_Baslik { min-height: 112px; height: auto !important; display: grid; place-content: center; gap: 7px; padding: 24px 30px !important; text-align: center; }
body.mark-route-inner .snrtr_Kutu_Baslik h2 { margin: 0 !important; font-size: clamp(23px, 2.4vw, 34px) !important; line-height: 1.05 !important; letter-spacing: .025em; }
body.mark-route-inner .snrtr_Kutu_Baslik h3 { margin: 0 !important; font: 500 12px/1.55 "Mark Beaufort", serif !important; letter-spacing: .01em; }
body.mark-route-inner .snrtr_Kutu_Icerik { height: auto !important; padding: 28px !important; color: #c9c6bf; font: 400 14px/1.7 "Mark Beaufort", serif; }
body.mark-route-inner .snrtr_Kutu_Icerik::after { display: table; clear: both; content: ""; }
body.mark-route-inner .snrtr_Kutu_Icerik a { color: var(--mark-gold-light); }
body.mark-route-inner .snrtr_Kutu_Icerik a:hover { color: #fff1d6; }
body.mark-route-inner .snrtr_Kutu_Icerik hr { border-color: rgba(215,166,79,.16) !important; }
body.mark-route-inner .snrtr_Kutu_Icerik h1,
body.mark-route-inner .snrtr_Kutu_Icerik h2,
body.mark-route-inner .snrtr_Kutu_Icerik h3,
body.mark-route-inner .snrtr_Kutu_Icerik h4 { color: #fff0d8; font-family: "Mark Beaufort", serif; }
body.mark-route-inner .snrtr_Kutu_Icerik h2.baslik { margin: 8px 0 18px !important; color: var(--mark-gold-light) !important; font-size: 24px !important; text-align: left; }
body.mark-route-inner .snrtr_InfoBox { padding: 16px 18px; border: 1px solid rgba(215,166,79,.2); background: rgba(215,166,79,.06); color: #d9d3c8; }

body.mark-route-inner section.main table { color: #d1cdc5; background: rgba(4,8,13,.55); }
body.mark-route-inner section.main table th,
body.mark-route-inner section.main table td { padding: 13px 14px !important; vertical-align: middle !important; border-color: rgba(255,255,255,.07) !important; }
body.mark-route-inner section.main table th { color: var(--mark-gold-light) !important; font-weight: 800; }
body.mark-route-inner section.main table td a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
body.mark-route-inner section.main table img { width: auto; max-width: 44px; max-height: 48px; object-fit: contain; }

body.mark-route-detail-item table.mark-item-level-table {
  display: table !important;
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse;
}
body.mark-route-detail-item table.mark-item-level-table > tbody {
  display: table-row-group !important;
  width: 100% !important;
  min-width: 0 !important;
}
body.mark-route-detail-item table.mark-item-level-table col.mark-item-level-label { width: 11rem; }
body.mark-route-detail-item table.mark-item-level-table col.mark-item-level-col { width: auto; }
body.mark-route-detail-item table.mark-item-level-table th:first-child,
body.mark-route-detail-item table.mark-item-level-table td:first-child {
  width: 11rem !important;
  max-width: 11rem;
  padding-right: 10px !important;
  text-align: left !important;
  white-space: normal;
}
body.mark-route-detail-item table.mark-item-level-table th:not(:first-child),
body.mark-route-detail-item table.mark-item-level-table td:not(:first-child) {
  width: auto !important;
  min-width: 48px;
  padding-left: 4px !important;
  padding-right: 4px !important;
}
body.mark-route-detail-item table.mark-item-level-table .mark-item-table-icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
body.mark-route-detail-item table.mark-item-level-table span.snrtr_YukseltmeItem {
  margin-left: 0;
  vertical-align: middle;
}
body.mark-route-detail-item table.mark-item-level-table td a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

body.mark-route-inner .mark-item-grid { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
body.mark-route-inner .mark-item-grid > hr,
body.mark-route-inner .mark-item-grid > h2,
body.mark-route-inner .mark-item-grid > h3,
body.mark-route-inner .mark-item-grid > br,
body.mark-route-inner .mark-item-grid > div[style*="clear"] { grid-column: 1 / -1; }
body.mark-route-inner .mark-item-grid > br,
body.mark-route-inner .mark-item-grid > div[style*="clear"] { display: none; }
body.mark-route-inner .mark-item-grid > a { min-width: 0; display: block; text-decoration: none !important; }
body.mark-route-inner .mark-item-grid > a > .snrtr_itemIcerik { position: relative; width: 100% !important; min-height: 150px; height: 150px !important; float: none !important; display: flex; align-items: flex-end; justify-content: center; margin: 0 !important; padding: 0 !important; overflow: hidden; border: 1px solid rgba(255,255,255,.07); background-color: #0a1018 !important; background-position: center 38%, center !important; background-size: auto 68px, cover !important; transition: border-color 170ms ease, transform 170ms ease, background-color 170ms ease; }
body.mark-route-inner .mark-item-grid > a:hover > .snrtr_itemIcerik { z-index: 2; border-color: rgba(215,166,79,.5); background-color: #101823 !important; transform: translateY(-3px); }
body.mark-route-inner .mark-item-grid .snrtr_itemIcerik > span { position: static !important; width: 100% !important; min-height: 42px; display: flex !important; align-items: center; justify-content: center; margin: 0 !important; padding: 8px 7px !important; color: #ded9cf !important; background: rgba(4,7,12,.88) !important; font: 700 10px/1.25 "Mark Beaufort", serif !important; text-align: center; white-space: normal !important; }
body.mark-route-inner .mark-item-grid .snrtr_NpcDetay { background-position: center 22%, center !important; background-size: auto 108px, cover !important; }
body.mark-route-inner .mark-item-grid .yang { position: absolute; right: 5px; bottom: 47px; left: 5px; width: auto; margin: 0; padding: 4px 6px; color: #e7c777; background: rgba(4,7,12,.88); font-size: 8px; text-align: center; }
body.mark-route-inner .mark-item-grid .adet,
body.mark-route-inner .mark-item-grid .snrtr_adetAlt { position: absolute; right: 8px; z-index: 2; min-width: 24px; padding: 3px 6px; border: 1px solid rgba(215,166,79,.35); border-radius: 20px; color: #fff0d4; background: rgba(104,27,31,.9); text-align: center; }

body.mark-route-inner .mark-media-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
body.mark-route-maps .mark-media-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.mark-route-inner .mark-media-grid > .row { display: contents; margin: 0 !important; }
body.mark-route-inner .mark-media-grid > a,
body.mark-route-inner .mark-media-grid > .row > a { display: block; min-width: 0; text-decoration: none !important; }
body.mark-route-inner .mark-media-grid .col-md-2,
body.mark-route-inner .mark-media-grid .col-md-6 { width: 100% !important; float: none !important; padding: 0 !important; }
body.mark-route-inner .snrtr_ZindanIcerik { min-height: 210px; height: auto !important; border: 1px solid rgba(255,255,255,.07); background-color: #0a1018 !important; background-size: cover !important; transition: border-color 170ms ease, transform 170ms ease; }
body.mark-route-inner a:hover .snrtr_ZindanIcerik { border-color: rgba(215,166,79,.5); transform: translateY(-3px); }
body.mark-route-inner .snrtr_ZindanBaslik { min-height: 52px; display: flex; align-items: center; justify-content: center; padding: 10px 12px !important; color: #e5dfd5; background: #0b1119; font: 800 11px/1.3 "Mark Beaufort", serif !important; text-align: center; }

body.mark-route-inner .mark-detail-summary > .snrtr_Kutu_Icerik { display: grid; grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) minmax(230px, 290px); align-items: center; gap: 28px; }
body.mark-route-detail-item .mark-detail-summary { position: relative; border-color: rgba(215,166,79,.28) !important; background: #070b11 !important; box-shadow: 0 28px 80px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.018) inset; animation: mark-item-showcase-in 360ms cubic-bezier(.2,.76,.24,1) both; }
body.mark-route-detail-item .mark-detail-summary > .snrtr_Kutu_Baslik { min-height: 126px; border-bottom: 1px solid rgba(215,166,79,.22) !important; background: radial-gradient(circle at 50% 120%, rgba(215,166,79,.12), transparent 42%), linear-gradient(110deg, rgba(103,27,32,.34), rgba(13,18,26,.97) 54%, rgba(7,11,17,.98)) !important; }
body.mark-route-detail-item .mark-detail-summary > .snrtr_Kutu_Baslik h2 { color: #fff3dc !important; font-size: clamp(30px, 3vw, 42px) !important; text-shadow: 0 8px 25px rgba(0,0,0,.5); }
body.mark-route-detail-item .mark-detail-summary > .snrtr_Kutu_Baslik h3 { color: #b5aa98 !important; letter-spacing: .035em; }
body.mark-route-detail-item .mark-detail-summary > .snrtr_Kutu_Icerik {position: relative; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); grid-template-rows: minmax(150px, auto) auto; align-items: stretch; gap: 18px 34px; min-height: 350px; padding: 34px !important; overflow: hidden; background: radial-gradient(circle at 18% 46%, rgba(192, 122, 43, .12), transparent 28%), linear-gradient(135deg, rgba(12, 18, 27, .97), rgb(9 17 27 / 97%)) !important; }
body.mark-route-detail-item .mark-detail-summary > .snrtr_Kutu_Icerik::before { position: absolute; inset: 0; content: ""; background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(90deg, #000, transparent 72%); pointer-events: none; }
body.mark-route-detail-npc .mark-detail-summary > .snrtr_Kutu_Icerik,
body.mark-route-detail-entity .mark-detail-summary > .snrtr_Kutu_Icerik { grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); }
body.mark-route-inner .mark-detail-summary > .snrtr_Kutu_Icerik > [class*="col-md-"] { width: 100% !important; float: none !important; padding: 0 !important; }
body.mark-route-inner .mark-detail-summary > .snrtr_Kutu_Icerik > div[style*="clear"] { grid-column: 1 / -1; }
body.mark-route-detail-item .mark-detail-summary > .snrtr_Kutu_Icerik > div[style*="clear"] { display: none; }
body.mark-route-inner .snrtr_ItemDetayResim,
body.mark-route-inner .snrtr_ItemDetayResim_2 { width: 100% !important; min-height: 190px; height: 190px !important; float: none !important; border: 1px solid rgba(215,166,79,.18); background-color: rgba(255,255,255,.025) !important; background-size: auto 46px, cover !important; }
body.mark-route-detail-item .mark-detail-summary .snrtr_ItemDetayResim { position: relative; isolation: isolate; grid-row: 1 / 3; min-height: 280px; height: 280px !important; align-self: center; overflow: hidden; border: 1px solid rgba(215,166,79,.38); border-radius: 3px; background-color: #090e16 !important; background-position: center 44%, center !important; background-size: auto 61px, cover !important; box-shadow: 0 22px 48px rgba(0,0,0,.4), 0 0 34px rgba(192,122,43,.07); transition: transform 260ms cubic-bezier(.2,.75,.25,1), border-color 260ms ease, box-shadow 260ms ease; }
body.mark-route-detail-item .mark-detail-summary .snrtr_ItemDetayResim::before { position: absolute; top: -40%; bottom: -40%; left: -80%; z-index: -1; width: 48%; content: ""; background: linear-gradient(90deg, transparent, rgba(255,223,155,.18), transparent); transform: rotate(16deg); animation: mark-item-shimmer 4.6s ease-in-out 900ms infinite; pointer-events: none; }
body.mark-route-detail-item .mark-detail-summary .snrtr_ItemDetayResim::after { position: absolute; inset: 12px; z-index: -1; content: ""; border: 1px solid rgba(215,166,79,.12); background: radial-gradient(circle, rgba(215,166,79,.09), transparent 56%); box-shadow: 0 0 26px rgba(215,166,79,.06) inset; animation: mark-item-aura 3.6s ease-in-out infinite alternate; pointer-events: none; }
body.mark-route-detail-item .mark-detail-summary .snrtr_ItemDetayResim:hover { border-color: rgba(237,195,106,.7); box-shadow: 0 28px 62px rgba(0,0,0,.5), 0 0 40px rgba(192,122,43,.14); transform: translateY(-5px) scale(1.012); }
body.mark-route-detail-item .mark-detail-summary .snrtr_ItemDetayResim .yang { position: absolute !important; top: auto !important; right: 16px !important; bottom: 16px !important; left: 16px !important; z-index: 3; width: auto !important; min-height: 36px; display: flex; align-items: center; justify-content: center; margin: 0 !important; padding: 7px 10px !important; border: 1px solid rgba(215,166,79,.28); color: #f1d286 !important; background: linear-gradient(90deg, rgba(103,27,32,.94), rgba(20,27,38,.96)) !important; font: 800 10px/1.25 "Mark Beaufort", serif; letter-spacing: .02em; box-shadow: 0 8px 20px rgba(0,0,0,.28); }
body.mark-route-detail-item .mark-item-description { position: relative; width: 100%; min-width: 0; align-self: stretch; min-height: 150px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding: 24px !important; border: 1px solid rgba(255,255,255,.065); color: #d5d0c7; background: linear-gradient(135deg, rgba(255,255,255,.025), rgba(255,255,255,.008)); font: 400 13px/1.7 "Mark Beaufort", serif; text-align: left; }
body.mark-route-detail-item .mark-item-description:not(.is-empty)::before { margin-bottom: 11px; content: "EŞYA AÇIKLAMASI"; color: var(--mark-gold); font: 800 9px/1 "Mark Beaufort", serif; letter-spacing: .18em; }
body.mark-route-detail-item .mark-item-description.is-short,
body.mark-route-detail-item .mark-item-description.is-empty { align-items: center; text-align: center; }
body.mark-route-detail-item .mark-item-description.is-long { justify-content: flex-start; }
body.mark-route-detail-item .mark-item-description.is-full { grid-row: 1 / 3; min-height: 280px; }
body.mark-route-detail-item .mark-item-description.is-full:not(.is-long) { justify-content: center; }
body.mark-route-detail-item .mark-item-description .snrtr_SatinAlEsya { position: static; width: 100%; max-width: 100%; margin-top: 14px; }
body.mark-route-detail-item .mark-item-description.is-short .snrtr_SatinAlEsya,
body.mark-route-detail-item .mark-item-description.is-empty .snrtr_SatinAlEsya { margin-top: 18px; }
body.mark-route-detail-item .mark-item-description .snrtr_SatilanBirEsya { width: auto; max-width: 100%; margin: 0 0 8px; padding: 6px 12px; border: 1px dashed rgba(215,166,79,.35); color: #e8dfd0; background: rgba(15,43,70,.88); font: 700 10px/1.3 "Mark Beaufort", serif; letter-spacing: .06em; text-transform: uppercase; }
body.mark-route-detail-item .mark-item-description .snrtr_NpcEsya { display: flex; flex-wrap: wrap; gap: 6px; justify-content: inherit; margin: 0; padding: 0; list-style: none; }
body.mark-route-detail-item .mark-item-description.is-short .snrtr_NpcEsya,
body.mark-route-detail-item .mark-item-description.is-empty .snrtr_NpcEsya { justify-content: center; }
body.mark-route-detail-item .mark-item-description .snrtr_NpcEsya li { display: inline-flex; margin: 0; padding: 5px 10px; border: 1px dashed rgba(197,161,160,.45); color: #fff; background: rgba(15,43,70,.92); font-size: 11px; }
body.mark-route-detail-item .mark-item-description .snrtr_NpcEsya a { color: inherit; text-decoration: none; }
body.mark-route-detail-item .mark-item-description .snrtr_NpcEsya a:hover { color: var(--mark-gold-light); }
body.mark-route-detail-item .mark-item-description.is-empty::before { content: "MARKMT2 EŞYA ARŞİVİ"; color: var(--mark-gold); font: 800 9px "Mark Beaufort", serif; letter-spacing: .18em; }
body.mark-route-detail-item .mark-item-description.is-empty::after { max-width: 460px; margin-top: 12px; content: "Eşyanın kullanım sınırlamaları, özellikleri ve yükseltme bilgileri aşağıda ayrıntılı olarak listelenir."; color: #a9a59d; font: 400 13px/1.65 "Mark Beaufort", serif; }
body.mark-route-detail-item .mark-item-restrictions { align-self: end; }
body.mark-route-detail-item .mark-item-restrictions.is-empty { display: none !important; }
body.mark-route-detail-item .mark-item-restrictions ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.mark-route-detail-item .mark-item-restrictions li { min-height: 46px; display: flex; align-items: center; gap: 8px; border-color: rgba(215,166,79,.18); background: linear-gradient(90deg, rgba(17,42,67,.86), rgba(11,24,38,.72)); }
body.mark-route-detail-npc .snrtr_ItemDetayResim_2,
body.mark-route-detail-entity .snrtr_ItemDetayResim_2 { min-height: 230px; height: 230px !important; background-size: contain, cover !important; }
body.mark-route-inner .snrtr_antiFlag ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
body.mark-route-inner .snrtr_antiFlag li { padding: 9px 11px; border: 1px solid rgba(215,166,79,.13); color: #d9b45d; background: rgba(17,42,67,.78); font-size: 11px; }
body.mark-route-inner .snrtr_stats { display: flex; flex-wrap: wrap; gap: 1px; margin-bottom: 1px; background: rgba(255,255,255,.06); }
body.mark-route-inner .snrtr_stats > div,
body.mark-route-inner .snrtr_stats > strong { flex: 1 1 160px; width: auto !important; min-height: 58px; display: grid; place-content: center; gap: 4px; padding: 10px; color: #d8d4ca; background: #0d141e; text-align: center; }
body.mark-route-inner .snrtr_stats strong { color: var(--mark-gold-light); }

body.mark-route-inner .mark-conversion-content > .row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px 16px;
  margin: 0 0 14px !important;
  padding: 14px !important;
  border-color: rgba(215,166,79,.2) !important;
  background: rgba(9,14,22,.7);
}
body.mark-route-inner .mark-conversion-content > .row > [class*="col-"] {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  display: flex;
  flex-direction: column;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.mark-route-inner .mark-conversion-content > .row > [class*="col-md-12"],
body.mark-route-inner .mark-conversion-content > .row > [class*="col-"]:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  min-height: 36px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: 2px !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(255,255,255,.06);
  color: #d8d4cc;
  background: rgba(4,7,12,.88);
  font: 700 12px/1.3 "Mark Beaufort", serif;
}
body.mark-route-inner .mark-conversion-content h2,
body.mark-route-inner .mark-conversion-content h3 {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 10px !important;
  padding: 0 !important;
  color: var(--mark-gold-light) !important;
  font: 800 12px/1.2 "Mark Beaufort", serif !important;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}
body.mark-route-inner .snrtr_donusumItemIcerik {
  position: relative;
  width: 100% !important;
  max-width: 220px !important;
  min-height: 118px !important;
  height: 118px !important;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-sizing: border-box;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(215,166,79,.18);
  background-color: #0a1018 !important;
  background-position: center 34%, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: auto 42px, cover !important;
}
body.mark-route-inner .snrtr_donusumItemIcerik img {
  position: absolute;
  top: 18px;
  right: 0;
  left: 0;
  width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  margin: 0 auto;
  object-fit: contain;
  pointer-events: none;
}
body.mark-route-inner .snrtr_donusumItemIcerik span {
  position: static !important;
  top: auto !important;
  width: 100% !important;
  min-height: 32px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 6px 8px !important;
  color: #ddd7cc !important;
  background: rgba(4,7,12,.9) !important;
  font: 700 11px/1.25 "Mark Beaufort", serif !important;
  text-align: center;
  white-space: normal !important;
}
/* Database-authored guide pages keep their content, but inherit the modern MarkMt2 palette. */
body.mark-route-page .mark-embedded-guide {
  --navy-dark: #070b11;
  --navy-medium: #0d131d;
  --gold-primary: var(--mark-gold);
  --gold-secondary: #c7b38f;
  --gold-accent: var(--mark-gold-light);
  --fg: #d8d4cc;
  --accent: var(--mark-gold);
  padding: clamp(22px, 3vw, 40px) !important;
  color: #d8d4cc !important;
  background:
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.01) 1px, transparent 1px),
    linear-gradient(135deg, rgba(13,19,29,.98), rgba(6,10,16,.99)) !important;
  background-size: 34px 34px, 34px 34px, auto !important;
  font-family: "Mark Beaufort", serif !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}
body.mark-route-page .mark-embedded-guide > style { display: none !important; }
body.mark-route-page .mark-embedded-guide h2 {
  position: relative;
  margin: 4px 0 30px !important;
  padding-bottom: 18px;
  color: #fff0d5 !important;
  font: 800 clamp(25px, 3vw, 36px)/1.12 "Mark Beaufort", serif !important;
  letter-spacing: .035em !important;
  text-align: center !important;
  text-shadow: 0 8px 28px rgba(0,0,0,.45) !important;
  text-transform: uppercase;
}
body.mark-route-page .mark-embedded-guide h2::after {
  position: absolute;
  right: 50%;
  bottom: 0;
  width: 76px;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, var(--mark-red), var(--mark-gold));
  transform: translateX(50%);
}
body.mark-route-page .mark-embedded-guide .mark-duplicate-heading { display: none !important; }
body.mark-route-page .mark-embedded-guide h3 {
  margin: 24px 0 12px !important;
  color: var(--mark-gold-light) !important;
  font: 800 19px/1.25 "Mark Beaufort", serif !important;
  letter-spacing: .02em;
}
body.mark-route-page .mark-embedded-guide p,
body.mark-route-page .mark-embedded-guide li { color: #c9c5bd !important; }
body.mark-route-page .mark-embedded-guide strong { color: #eee0c6; }
body.mark-route-page .mark-embedded-guide a { color: var(--mark-gold-light) !important; }
body.mark-route-page .mark-embedded-guide ul,
body.mark-route-page .mark-embedded-guide ol { padding-left: 20px !important; }
body.mark-route-page .mark-embedded-guide li { margin-bottom: 7px; }
body.mark-route-page .mark-embedded-guide li::marker { color: var(--mark-gold); }

body.mark-route-page .mark-table-scroll {
  width: 100%;
  margin: 24px 0 8px;
  overflow-x: auto;
  border: 1px solid rgba(215,166,79,.22);
  border-radius: 4px;
  background: #080d14;
  box-shadow: 0 22px 55px rgba(0,0,0,.32);
  scrollbar-color: var(--mark-gold) #080d14;
  scrollbar-width: thin;
}
body.mark-route-page .mark-table-scroll::-webkit-scrollbar { height: 8px; }
body.mark-route-page .mark-table-scroll::-webkit-scrollbar-track { background: #080d14; }
body.mark-route-page .mark-table-scroll::-webkit-scrollbar-thumb { border-radius: 6px; background: var(--mark-gold); }
body.mark-route-page .mark-embedded-guide table.mark-guide-table {
  width: 100% !important;
  max-width: none !important;
  min-width: 900px;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 0 !important;
  color: #d7d3cb !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
body.mark-route-page .mark-embedded-guide table.mark-guide-table th,
body.mark-route-page .mark-embedded-guide table.mark-guide-table td {
  min-width: 0 !important;
  padding: 15px 16px !important;
  border: 0 !important;
  border-right: 1px solid rgba(255,255,255,.045) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  color: #cbc7bf !important;
  background: #0b1119 !important;
  font: 400 12px/1.6 "Mark Beaufort", serif !important;
  text-align: left !important;
  vertical-align: top !important;
  transform: none !important;
  box-shadow: none !important;
  transition: color 160ms ease, background-color 160ms ease !important;
}
body.mark-route-page .mark-embedded-guide table.mark-guide-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-top: 17px !important;
  padding-bottom: 17px !important;
  color: #f1cf83 !important;
  background: linear-gradient(180deg, #27151b, #1b1117) !important;
  font: 800 10px/1.35 "Mark Beaufort", serif !important;
  letter-spacing: .1em !important;
  text-align: center !important;
  text-shadow: none !important;
  text-transform: uppercase;
}
body.mark-route-page .mark-embedded-guide table.mark-guide-table tbody tr:nth-child(even) td { background: #0d141e !important; }
body.mark-route-page .mark-embedded-guide table.mark-guide-table tbody tr:hover td { color: #f0e7d8 !important; background: #121b27 !important; }
body.mark-route-page .mark-embedded-guide table.mark-guide-table tbody td:first-child {
  width: 72px !important;
  color: #f2cf85 !important;
  background: linear-gradient(135deg, rgba(119,31,39,.52), rgba(42,21,27,.78)) !important;
  font-weight: 800 !important;
  text-align: center !important;
}
body.mark-route-page .mark-embedded-guide table.mark-guide-table tbody td:nth-child(2) { color: #eee3d0 !important; font-weight: 700 !important; }
body.mark-route-page .mark-embedded-guide table.mark-guide-table td:last-child,
body.mark-route-page .mark-embedded-guide table.mark-guide-table th:last-child { border-right: 0 !important; }
body.mark-route-page .mark-embedded-guide table.mark-guide-table tbody tr:last-child td { border-bottom: 0 !important; }
body.mark-route-page .mark-embedded-guide table.mark-guide-table ul,
body.mark-route-page .mark-embedded-guide table.mark-guide-table ol { margin: 0 !important; padding-left: 17px !important; }
body.mark-route-page .mark-embedded-guide table.mark-guide-table li { margin: 0 0 5px !important; color: #c7c3bb !important; }

body.mark-route-page .mark-embedded-guide .info-box,
body.mark-route-page .mark-embedded-guide .note-box,
body.mark-route-page .mark-embedded-guide .quick-card {
  border: 1px solid rgba(215,166,79,.2) !important;
  border-left: 3px solid var(--mark-gold) !important;
  border-radius: 3px !important;
  color: #d5d0c7 !important;
  background: linear-gradient(135deg, rgba(39,21,27,.66), rgba(12,18,27,.94)) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.22) !important;
}
body.mark-route-page .mark-embedded-guide .warning-box {
  border: 1px solid rgba(207,63,60,.32) !important;
  border-left: 3px solid var(--mark-red) !important;
  border-radius: 3px !important;
  color: #e4cbc8 !important;
  background: rgba(119,31,39,.22) !important;
}
body.mark-route-page .mark-embedded-guide .anchor-links a {
  border: 1px solid rgba(215,166,79,.2) !important;
  border-radius: 2px !important;
  background: #0d141e !important;
}
body.mark-route-page .mark-embedded-guide .hero-card {
  border-color: rgba(215,166,79,.22) !important;
  border-radius: 3px !important;
  background-color: #0b1119 !important;
}
body.mark-route-page .mark-embedded-guide .hero-card::after { background: linear-gradient(180deg, transparent, rgba(5,7,12,.9)) !important; }
body.mark-route-page .mark-embedded-guide .hero-label { border-color: rgba(215,166,79,.28) !important; color: var(--mark-gold-light) !important; background: rgba(7,11,17,.92) !important; }
body.mark-route-page .mark-embedded-guide .hero-title { color: #fff0d5 !important; }
body.mark-route-page .mark-embedded-guide .hero-text { color: #c1b9aa !important; }

body.mark-route-page .mark-embedded-guide .faq-container {
  width: min(100%, 980px) !important;
  max-width: 980px !important;
  margin: 4px auto 8px !important;
  padding: 0 !important;
  counter-reset: mark-faq;
}
body.mark-route-page .mark-embedded-guide .faq-row {
  position: relative;
  margin: 0 0 12px !important;
  overflow: hidden;
  border: 1px solid rgba(215,166,79,.18) !important;
  border-radius: 3px !important;
  background: #090e16 !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.22) !important;
  counter-increment: mark-faq;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease !important;
}
body.mark-route-page .mark-embedded-guide .faq-row::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 2px;
  content: "";
  background: linear-gradient(180deg, var(--mark-red), var(--mark-gold));
  opacity: .42;
  transition: opacity 180ms ease, width 180ms ease;
}
body.mark-route-page .mark-embedded-guide .faq-row:hover,
body.mark-route-page .mark-embedded-guide .faq-row.is-open {
  border-color: rgba(215,166,79,.42) !important;
  box-shadow: 0 17px 38px rgba(0,0,0,.3) !important;
  transform: translateY(-1px);
}
body.mark-route-page .mark-embedded-guide .faq-row.is-open::before { width: 3px; opacity: 1; }
body.mark-route-page .mark-embedded-guide .faq-question {
  position: relative;
  min-height: 66px;
  display: flex;
  align-items: center;
  margin: 0 !important;
  padding: 17px 66px 17px 72px !important;
  border: 0 !important;
  color: #eee3d0 !important;
  background: linear-gradient(110deg, rgba(67,24,30,.42), rgba(13,19,29,.96) 52%, #0b1119) !important;
  font: 800 17px/1.35 "Mark Beaufort", serif !important;
  letter-spacing: .01em !important;
  text-shadow: none !important;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease !important;
}
body.mark-route-page .mark-embedded-guide .faq-question::before {
  position: absolute;
  left: 22px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(215,166,79,.26);
  border-radius: 50%;
  content: counter(mark-faq, decimal-leading-zero);
  color: #d7a64f;
  background: rgba(5,8,13,.74);
  font: 800 9px/1 "Mark Beaufort", serif;
  letter-spacing: .05em;
}
body.mark-route-page .mark-embedded-guide .faq-question::after {
  position: absolute !important;
  top: 50% !important;
  right: 22px !important;
  width: 28px !important;
  height: 28px !important;
  display: grid !important;
  place-items: center;
  border: 1px solid rgba(215,166,79,.22) !important;
  border-radius: 50%;
  content: "+" !important;
  color: #e7c36f;
  background: rgba(5,8,13,.72);
  font: 400 19px/1 "Mark Beaufort", serif;
  opacity: 1 !important;
  transform: translateY(-50%) !important;
  transition: border-color 180ms ease, color 180ms ease, transform 180ms ease !important;
}
body.mark-route-page .mark-embedded-guide .faq-row.is-open .faq-question { color: #fff0d5 !important; }
body.mark-route-page .mark-embedded-guide .faq-row.is-open .faq-question::after {
  content: "−" !important;
  border-color: rgba(215,166,79,.5) !important;
  color: #fff0d5;
  transform: translateY(-50%) rotate(180deg) !important;
}
body.mark-route-page .mark-embedded-guide .faq-question:focus-visible {
  outline: 2px solid var(--mark-gold);
  outline-offset: -3px;
}
body.mark-route-page .mark-embedded-guide .faq-answer {
  margin: 0 !important;
  padding: 22px 30px 24px 72px !important;
  border: 0 !important;
  border-top: 1px solid rgba(215,166,79,.12) !important;
  color: #c9c5bd !important;
  background: linear-gradient(135deg, #0c121b, #080d14) !important;
  font: 400 13px/1.78 "Mark Beaufort", serif !important;
}
body.mark-route-page .mark-embedded-guide .faq-answer strong { color: #efd08b !important; }
body.mark-route-page .mark-embedded-guide .faq-answer p:first-child { margin-top: 0; }
body.mark-route-page .mark-embedded-guide .faq-answer p:last-child { margin-bottom: 0; }
@keyframes mark-item-showcase-in { from { transform: translateY(10px) scale(.996); } to { transform: translateY(0) scale(1); } }
@keyframes mark-item-shimmer { 0%, 48% { left: -80%; opacity: 0; } 58% { opacity: .9; } 78%, 100% { left: 145%; opacity: 0; } }
@keyframes mark-item-aura { from { opacity: .45; transform: scale(.97); } to { opacity: 1; transform: scale(1.025); } }
.mark-route-error { min-height: 100vh; display: grid; place-content: center; gap: 14px; width: min(640px, calc(100% - 40px)); margin: auto; color: #c8c3ba; text-align: center; }
.mark-error-page { background: linear-gradient(180deg, rgba(4,7,12,.6), #05070c), url("../images/wiki-hero-current.webp") center / cover fixed !important; }
.mark-route-error > span { color: var(--mark-gold); font: 800 9px "Mark Beaufort", serif; letter-spacing: .18em; }
.mark-route-error p { margin: 0; color: #b7b3aa; font: 400 14px/1.65 "Mark Beaufort", serif; }
.mark-route-error img { width: 190px; margin: 0 auto 15px; }
.mark-route-error h1 { margin: 0; color: #fff0d7; font: 800 42px/1.05 "Mark Beaufort", serif; }
.mark-route-error a { width: max-content; margin: 8px auto 0; padding: 13px 20px; border: 1px solid var(--mark-line-strong); color: var(--mark-gold-light); text-decoration: none; }

@media (max-width: 1120px) {
  body.mark-route-inner .mark-item-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.mark-route-maps .mark-media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  body.mark-route-inner .mark-item-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.mark-route-inner .mark-media-grid,
  body.mark-route-maps .mark-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.mark-route-inner .mark-detail-summary > .snrtr_Kutu_Icerik,
  body.mark-route-detail-npc .mark-detail-summary > .snrtr_Kutu_Icerik,
  body.mark-route-detail-entity .mark-detail-summary > .snrtr_Kutu_Icerik { grid-template-columns: 1fr; }
  body.mark-route-detail-item .mark-detail-summary > .snrtr_Kutu_Icerik { grid-template-rows: auto; }
  body.mark-route-detail-item .mark-detail-summary .snrtr_ItemDetayResim { grid-row: auto; }
  body.mark-route-inner .snrtr_ItemDetayResim,
  body.mark-route-inner .snrtr_ItemDetayResim_2 { max-width: 280px; margin: 0 auto !important; }
  body.mark-route-inner .mark-conversion-content > .row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .mark-detail-hero { min-height: 470px; padding: 108px 12px 52px; }
  .mark-detail-hero-content > p { gap: 7px; font-size: 7px; letter-spacing: .12em; }
  .mark-detail-hero-content > p span { width: 22px; }
  .mark-detail-hero h1 { font-size: 42px; }
  .mark-detail-hero .mark-search { margin-top: 24px; }
  body.mark-inner-page section.main,
  body.local-wiki-route section.main { padding: 28px 0 0 !important; }
  body.mark-inner-page section.main > .container,
  body.local-wiki-route section.main > .container { width: calc(100% - 24px) !important; }
  body.mark-inner-page .snrtr_Kutu_Baslik,
  body.local-wiki-route .snrtr_Kutu_Baslik { min-height: 78px; height: auto !important; padding: 17px 18px !important; }
  body.mark-inner-page .snrtr_Kutu_Baslik h2,
  body.local-wiki-route .snrtr_Kutu_Baslik h2 { font-size: 22px !important; }
  body.mark-inner-page .snrtr_Kutu_Icerik,
  body.local-wiki-route .snrtr_Kutu_Icerik { padding: 14px !important; }
  body.mark-route-inner .mark-item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body.mark-route-inner .mark-item-grid > a > .snrtr_itemIcerik { height: 136px !important; min-height: 136px; background-size: auto 58px, cover !important; }
  body.mark-route-inner .mark-media-grid,
  body.mark-route-maps .mark-media-grid { grid-template-columns: 1fr; gap: 12px; }
  body.mark-route-inner .snrtr_ZindanIcerik { min-height: 190px; }
  body.mark-route-inner .mark-detail-summary > .snrtr_Kutu_Icerik { gap: 18px; }
  body.mark-route-detail-item .mark-detail-summary > .snrtr_Kutu_Baslik { min-height: 102px; }
  body.mark-route-detail-item .mark-detail-summary > .snrtr_Kutu_Icerik { min-height: 0; padding: 16px !important; }
  body.mark-route-detail-item .mark-detail-summary .snrtr_ItemDetayResim { min-height: 250px; height: 250px !important; background-size: auto 54px, cover !important; }
  body.mark-route-detail-item .mark-item-description { min-height: 132px; padding: 18px !important; }
  body.mark-route-detail-item .mark-item-description.is-full { grid-row: auto; min-height: 150px; }
  body.mark-route-detail-item .mark-item-restrictions ul { grid-template-columns: 1fr; }
  body.mark-route-inner section.main table th,
  body.mark-route-inner section.main table td { padding: 10px !important; font-size: 11px; }
  body.mark-route-inner .snrtr_Kutu_Icerik img { max-width: 100%; height: auto; }

  body.mark-route-page .mark-embedded-guide { padding: 18px 14px !important; font-size: 13px !important; }
  body.mark-route-page .mark-embedded-guide h2 { margin-bottom: 22px !important; font-size: 25px !important; }
  body.mark-route-page .mark-table-scroll { overflow: visible; border: 0; background: transparent; box-shadow: none; }
  body.mark-route-page .mark-embedded-guide table.mark-guide-table,
  body.mark-route-page .mark-embedded-guide table.mark-guide-table thead,
  body.mark-route-page .mark-embedded-guide table.mark-guide-table tbody,
  body.mark-route-page .mark-embedded-guide table.mark-guide-table tr,
  body.mark-route-page .mark-embedded-guide table.mark-guide-table th,
  body.mark-route-page .mark-embedded-guide table.mark-guide-table td { width: 100% !important; min-width: 0 !important; display: block; }
  body.mark-route-page .mark-embedded-guide table.mark-guide-table thead { position: absolute; width: 1px !important; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body.mark-route-page .mark-embedded-guide table.mark-guide-table tbody tr {
    margin-bottom: 14px;
    overflow: hidden;
    border: 1px solid rgba(215,166,79,.22);
    border-radius: 3px;
    background: #0a1018;
    box-shadow: 0 13px 30px rgba(0,0,0,.24);
  }
  body.mark-route-page .mark-embedded-guide table.mark-guide-table tbody td {
    display: grid;
    grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
    gap: 12px;
    padding: 12px 13px !important;
    border-right: 0 !important;
    text-align: left !important;
  }
  body.mark-route-page .mark-embedded-guide table.mark-guide-table tbody td::before {
    content: attr(data-label);
    color: #d7a64f;
    font: 800 9px/1.35 "Mark Beaufort", serif;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  body.mark-route-page .mark-embedded-guide table.mark-guide-table tbody td:first-child {
    width: 100% !important;
    color: #f2cf85 !important;
    text-align: left !important;
  }
  body.mark-route-page .mark-embedded-guide .faq-container { margin-top: 0 !important; }
  body.mark-route-page .mark-embedded-guide .faq-question {
    min-height: 62px;
    padding: 15px 52px 15px 54px !important;
    font-size: 15px !important;
  }
  body.mark-route-page .mark-embedded-guide .faq-question::before { left: 14px; width: 27px; height: 27px; font-size: 8px; }
  body.mark-route-page .mark-embedded-guide .faq-question::after { right: 12px !important; width: 26px !important; height: 26px !important; }
  body.mark-route-page .mark-embedded-guide .faq-answer { padding: 18px 17px 20px !important; font-size: 12px !important; }
}

/* =========================================================
   RONIN-INSPIRED WIKI LAYOUT · MARKMT2 VISUAL LANGUAGE
   ========================================================= */
body { padding-top: 94px; }
body .mark-header { position: fixed !important; inset: 0 0 auto; z-index: 1200; height: auto; padding: 10px 0; border-bottom: 0; background: transparent; box-shadow: none; backdrop-filter: none; pointer-events: none; }
body .mark-header.is-scrolled { padding: 8px 0; }
body .mark-header::after { display: none; }
body .mark-header-shell { width: min(1340px, calc(100% - 52px)); min-height: 74px; height: auto; display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 28px; align-items: center; margin: auto; padding: 8px 9px 8px 20px; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(110deg, rgba(10,15,27,.78), rgba(20,27,42,.7)); box-shadow: 0 18px 52px rgba(0,0,0,.28); backdrop-filter: blur(22px) saturate(1.25); pointer-events: auto; position: relative; transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; }
body .mark-header.is-scrolled .mark-header-shell { border-color: rgba(215,166,79,.22); background: linear-gradient(110deg, rgba(8,12,22,.92), rgba(14,20,34,.88)); box-shadow: 0 14px 42px rgba(0,0,0,.38); }
body .mark-brand { min-width: 0; }
body .mark-brand img { width: 105px; max-height: 50px; object-fit: contain; }
body .mark-brand span { padding-left: 9px; }

body .mark-header-search { position: relative; width: 100%; height: 44px; display: flex; align-items: center; padding: 0 12px; border: 1px solid rgba(215,166,79,.25); background: rgba(12,18,28,.92); box-shadow: inset 0 0 22px rgba(0,0,0,.3); }
body .mark-header-search:focus-within { border-color: rgba(215,166,79,.72); box-shadow: 0 0 0 3px rgba(215,166,79,.07), inset 0 0 22px rgba(0,0,0,.25); }
body .mark-header-search > i { flex: 0 0 auto; margin-right: 10px; color: var(--mark-gold); font-size: 12px; }
body .mark-header-search input { width: 100%; height: 42px; padding: 0 !important; border: 0 !important; outline: 0; color: #f3eee5; background: transparent !important; font: 600 11px "Mark Beaufort", serif; }
body .mark-header-search input::placeholder { color: #777d87; }
body .mark-header-search kbd { flex: 0 0 auto; padding: 4px 6px; border: 1px solid rgba(255,255,255,.09); border-radius: 2px; color: #777d87; background: rgba(255,255,255,.03); font: 700 7px "Mark Beaufort", serif; letter-spacing: .08em; }
body .mark-header-search #snrtr_aramaSonuc { position: absolute !important; top: calc(100% + 8px) !important; right: 0; left: 0; z-index: 1300; max-height: min(480px, calc(100vh - 105px)); overflow: auto; border: 1px solid rgba(215,166,79,.28); background: #090f18; box-shadow: 0 24px 55px rgba(0,0,0,.7); }
body .mark-navigation { justify-content: center; gap: clamp(6px, 1vw, 14px); }
body .mark-navigation a { white-space: nowrap; }
body.mark-home-page .mark-header-shell { grid-template-columns: 180px minmax(0,1fr) auto; }
body.mark-home-page .mark-navigation { justify-content: center; }

body.mark-home-page .mark-hero { min-height: 510px !important; margin-top: -94px; padding: 140px 24px 68px !important; }
body.mark-home-page .mark-hero-content { max-width: 850px; }
body.mark-home-page .mark-hero-logo { width: clamp(190px,20vw,295px); margin-bottom: 8px; }
body.mark-home-page .mark-hero h1 { max-width: 760px; margin: 17px auto 12px; font-size: clamp(31px,4vw,57px); }
body.mark-home-page .mark-hero-text { max-width: 650px; }
body.mark-home-page .mark-hero-search { width: min(760px,100%); height: 62px; margin-top: 24px; }
body.mark-inner-page .mark-inner-hero-search { width: min(760px,100%); height: 62px; margin: 24px auto 0; }

.mark-wiki-hub { position: relative; isolation: isolate; padding: 34px 0 78px; background: transparent; }
.mark-wiki-hub { scroll-margin-top: 94px; }
.mark-home-page .mark-wiki-hub ~ .mark-section { display: none !important; }
.mark-wiki-hub::before { display: none; }
.mark-hub-shell { position: relative; z-index: 1; width: min(1400px,calc(100% - 44px)); display: grid; grid-template-columns: 240px minmax(0,1fr) 258px; gap: 18px; align-items: start; margin: auto; }
.mark-hub-characters,.mark-hub-main,.mark-hub-side { display: grid; gap: 18px; min-width: 0; }
.mark-hub-characters .mark-character-card { min-height: 0; display: flex; flex-direction: column; isolation: isolate; border-color: rgba(215,166,79,.28); background: #060a11 !important; box-shadow: 0 20px 44px rgba(0,0,0,.42); }
.mark-hub-characters .mark-character-card::before { position: relative; inset: auto; z-index: 1; width: 100%; flex: 0 0 auto; aspect-ratio: 3/2; display: block; content: ""; background: var(--mark-character-image) center / cover no-repeat; }
.mark-hub-characters .mark-character-card::after { z-index: 3; height: 2px; box-shadow: 0 0 14px rgba(215,166,79,.24); }
.mark-hub-characters .mark-character-copy { position: relative; right: auto; bottom: auto; left: auto; z-index: 2; width: 100%; flex: 1 1 auto; padding: 17px 15px 15px; border-top: 1px solid rgba(215,166,79,.28); background: linear-gradient(145deg,#0c121b,#060a11 82%); }
.mark-hub-characters .mark-character-copy small { color: #f0c878; text-shadow: 0 1px 4px #000; }
.mark-hub-characters .mark-character-copy h3 { margin: 5px 0 12px; color: #fff0d2; font-size: 26px; letter-spacing: .015em; text-shadow: 0 2px 8px #000,0 0 18px rgba(215,166,79,.2); }
.mark-hub-characters .mark-character-links { grid-template-columns: 1fr; gap: 7px; }
.mark-hub-characters .mark-character-links a { position: relative; min-height: 49px; display: grid; grid-template-columns: 35px minmax(0,1fr) auto; gap: 10px; align-items: center; justify-content: initial; overflow: hidden; padding: 5px 12px 5px 8px; border: 1px solid rgba(218,190,139,.24); color: #f4eee4 !important; background: linear-gradient(105deg,rgba(130,39,38,.18),rgba(10,16,24,.96) 44%,rgba(5,9,15,.98)); box-shadow: inset 2px 0 0 rgba(206,60,55,.72),inset 0 1px rgba(255,255,255,.025),0 7px 16px rgba(0,0,0,.18); font-size: 11px; letter-spacing: .09em; transition: transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease; }
.mark-hub-characters .mark-character-links a::before { width: 31px; height: 31px; content: ""; border: 1px solid rgba(215,166,79,.2); background: var(--mark-link-icon) center / contain no-repeat,radial-gradient(circle,rgba(215,166,79,.17),transparent 70%); filter: drop-shadow(0 2px 5px rgba(0,0,0,.7)); transition: transform .2s ease,filter .2s ease; }
.mark-hub-characters .mark-character-links a:nth-child(1) { --mark-link-icon: var(--mark-start-weapon,url("../images/wiki-ui/weapon.png")); }
.mark-hub-characters .mark-character-links a:nth-child(2) { --mark-link-icon: var(--mark-start-armor,url("../images/wiki-ui/armor.png")); }
.mark-hub-characters .mark-character-links a:nth-child(3) { --mark-link-icon: var(--mark-start-helmet,url("../images/wiki-ui/helmet.png")); }
.mark-hub-characters .mark-character-links a i { color: #e2bd70; font-size: 9px; transition: transform .2s ease,color .2s ease; }
.mark-hub-characters .mark-character-links a:hover { transform: translateX(3px); border-color: rgba(215,166,79,.72); background: linear-gradient(105deg,rgba(139,38,38,.36),rgba(44,30,20,.88) 55%,rgba(7,12,19,.98)); box-shadow: inset 3px 0 0 var(--mark-gold),0 10px 22px rgba(0,0,0,.28); }
.mark-hub-characters .mark-character-links a:hover::before { transform: scale(1.09); filter: drop-shadow(0 0 7px rgba(215,166,79,.35)); }
.mark-hub-characters .mark-character-links a:hover i { color: #ffe0a0; transform: translateX(2px); }

.mark-hub-feature-stack { display: grid; gap: 14px; }
.mark-feature-slider { position: relative; min-width: 0; overflow: hidden; border: 1px solid rgba(215,166,79,.23); background: #0e1824; box-shadow: 0 20px 50px rgba(0,0,0,.28); }
.mark-feature-track { position: relative; min-height: 380px; overflow: hidden; }
.mark-feature-slider .mark-feature-slide { position: absolute; inset: 0; width: 100%; min-height: 380px !important; height: 100% !important; opacity: 0; visibility: hidden; transform: scale(1.025); transition: opacity .55s ease,transform .75s ease,visibility 0s linear .55s; }
.mark-feature-slider .mark-feature-slide.is-active { z-index: 2; opacity: 1; visibility: visible; transform: scale(1); transition-delay: 0s; }
.mark-feature-slider .mark-feature-slide > div { padding-bottom: 76px; }
.mark-feature-controls { position: absolute; right: 22px; bottom: 21px; z-index: 6; display: flex; align-items: center; gap: 11px; }
.mark-feature-controls > button { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(215,166,79,.38); color: #f1d28f; background: rgba(7,13,21,.86); font: 400 23px/1 "Mark Beaufort", serif; cursor: pointer; transition: border-color .2s ease,background .2s ease,transform .2s ease; }
.mark-feature-controls > button:hover { border-color: var(--mark-gold); background: rgba(112,72,24,.48); transform: translateY(-1px); }
.mark-feature-dots { display: flex; align-items: center; gap: 7px; }
.mark-feature-dots button { width: 23px; height: 3px; padding: 0; border: 0; border-radius: 0; background: rgba(255,255,255,.24); cursor: pointer; transition: width .2s ease,background .2s ease; }
.mark-feature-dots button.is-active { width: 38px; background: linear-gradient(90deg,var(--mark-red),var(--mark-gold)); }
.mark-hub-feature,.mark-world-card { position: relative; overflow: hidden; border: 1px solid rgba(215,166,79,.19); background: #0c121b center/cover no-repeat; box-shadow: 0 18px 44px rgba(0,0,0,.27); }
.mark-hub-feature::before,.mark-world-card::before { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg,rgba(6,10,16,.94) 0,rgba(6,10,16,.78) 50%,rgba(6,10,16,.24)); }
.mark-hub-feature::after,.mark-world-card::after { position: absolute; top: 0; right: 0; left: 0; height: 2px; content: ""; background: linear-gradient(90deg,var(--mark-red),var(--mark-gold),transparent 76%); }
.mark-hub-feature { min-height: 320px; display: flex; align-items: flex-end; background-position: center; }
.mark-hub-feature > div { position: relative; z-index: 2; width: 70%; padding: 34px; }
.mark-hub-feature small,.mark-world-card small,.mark-hub-pages small,.mark-hub-biologist small,.mark-side-panel small { color: var(--mark-gold); font: 800 10px "Mark Beaufort", serif; letter-spacing: .16em; text-transform: uppercase; }
.mark-hub-feature h2 { margin: 8px 0 10px; color: #fff0d5; font: 800 clamp(36px,4.3vw,61px)/.95 "Mark Beaufort",serif; text-transform: uppercase; }
.mark-hub-feature h3 { margin: 7px 0 18px; color: #fff0d5; font: 800 clamp(24px,2.5vw,35px)/1 "Mark Beaufort",serif; }
.mark-hub-feature p { max-width: 540px; color: #bbb6ad; font: 400 12px/1.65 "Mark Beaufort", serif; }
.mark-hub-feature a,.mark-world-card span,.mark-hub-more { display: inline-flex; align-items: center; gap: 10px; color: #f3d697 !important; font: 800 10px "Mark Beaufort", serif; letter-spacing: .13em; text-transform: uppercase; text-decoration: none !important; }
.mark-hub-feature-row { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; align-items: stretch; gap: 14px; }
.mark-hub-feature-small { min-height: 196px; height: 100%; }
.mark-hub-feature-small > div { width: 80%; padding: 24px; }
.mark-feature-attr { background-image: url("../images/slider-img2.jpg?v=20260823-visual12"); background-position: center; }
.mark-feature-large { grid-row: auto !important; min-height: 196px !important; height: 100%; background-image: url("../images/slider-img3.jpg?v=20260823-visual12"); background-position: center; }
.mark-feature-faq { background-image: url("../images/slider-img.jpg?v=20260823-visual12"); background-position: center; }

.mark-hub-world { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.mark-world-card { min-height: 370px; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 0 26px 27px; border-color: rgba(215,166,79,.3); background-position: center 34%; text-decoration: none !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.018),0 22px 48px rgba(0,0,0,.34); transition: border-color .25s ease,box-shadow .25s ease; }
.mark-world-card:hover { transform: none; border-color: rgba(215,166,79,.72); background-position: center 34%; box-shadow: inset 0 0 0 1px rgba(255,224,163,.04),0 26px 58px rgba(0,0,0,.44),0 0 30px rgba(215,166,79,.13); }
.mark-world-card::before { background: linear-gradient(180deg,rgba(5,8,13,.03) 0,rgba(5,8,13,.12) 39%,rgba(5,8,13,.78) 67%,rgba(5,8,13,.98) 100%); transition: background .25s ease; }
.mark-world-card:hover::before { background: linear-gradient(180deg,rgba(5,8,13,0) 0,rgba(5,8,13,.08) 42%,rgba(5,8,13,.72) 69%,rgba(5,8,13,.98) 100%); }
.mark-world-card::after { inset: 0; z-index: 4; height: auto; padding: 2px; pointer-events: none; opacity: .16; background: conic-gradient(from var(--mark-card-angle),transparent 0deg,transparent 214deg,rgba(207,63,60,.96) 258deg,#f2cf85 309deg,transparent 354deg); filter: drop-shadow(0 0 6px rgba(215,166,79,.5)); -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: opacity .2s ease; }
.mark-world-card:hover::after { opacity: 1; animation: mark-card-border-spin 1.8s linear infinite; }
.mark-world-card > * { position: relative; z-index: 2; }
.mark-world-card small { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; color: #e9bd63; text-shadow: 0 2px 8px #000; }
.mark-world-card small::before { width: 22px; height: 1px; flex: 0 0 auto; content: ""; background: linear-gradient(90deg,var(--mark-red),var(--mark-gold)); }
.mark-world-card strong { margin: 0 0 18px; color: #fff0d5; font: 800 31px/.98 "Mark Beaufort",serif; letter-spacing: .015em; text-transform: uppercase; text-shadow: 0 3px 13px rgba(0,0,0,.9); }
.mark-world-card span { min-height: 34px; padding: 0 13px; border: 1px solid rgba(215,166,79,.3); border-left: 2px solid var(--mark-red); background: rgba(5,9,15,.76); box-shadow: 0 8px 18px rgba(0,0,0,.22); transition: color .2s ease,border-color .2s ease,background .2s ease; }
.mark-world-card span i { transition: transform .2s ease; }
.mark-world-card:hover span { color: #ffe3a6 !important; border-color: rgba(215,166,79,.7); background: rgba(33,24,16,.82); }
.mark-world-card:hover span i { transform: translateX(3px); }

@keyframes mark-card-border-spin { to { --mark-card-angle: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .mark-world-card:hover::after { animation: none; }
}
.mark-world-metin { background-image: url("../images/news-img-1.jpg?v=20260823-visual12"); background-position: center 34%; }
.mark-world-boss { background-image: url("../images/news-img-2.jpg?v=20260823-visual12"); background-position: center 34%; }
.mark-world-dungeon { background-image: url("../images/news-img-3.jpg?v=20260823-visual12"); background-position: center 34%; }

.mark-hub-pages,.mark-hub-biologist,.mark-side-panel { border: 1px solid rgba(215,166,79,.2); box-shadow: 0 18px 45px rgba(0,0,0,.28); }
.mark-hub-pages { background: linear-gradient(145deg,rgba(12,22,34,.99),rgba(6,12,20,.99)); }
.mark-hub-biologist,.mark-side-panel { background: linear-gradient(145deg,rgba(19,29,43,.98),rgba(8,15,24,.99)); }
.mark-hub-pages > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 24px 25px; border-bottom: 1px solid rgba(215,166,79,.15); }
.mark-hub-pages h2,.mark-hub-biologist h2,.mark-side-panel h2 { margin: 5px 0 0; color: #fff0d5; font: 800 28px/1 "Mark Beaufort",serif; }
.mark-hub-pages header p { max-width: 340px; margin: 0; color: #858990; font: 400 11px/1.55 "Mark Beaufort", serif; text-align: right; }
.mark-hub-page-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 14px 16px 18px; }
.mark-hub-page-grid a { display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px 10px 10px; border: 1px solid rgba(218,190,139,.22); color: #d8d5cf !important; text-decoration: none !important; background: linear-gradient(105deg,rgba(130,39,38,.14),rgba(10,16,24,.94) 44%,rgba(5,9,15,.96)); box-shadow: inset 2px 0 0 rgba(206,60,55,.68),inset 0 1px rgba(255,255,255,.025),0 5px 14px rgba(0,0,0,.16); transition: transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease,color .18s ease; }
.mark-hub-page-grid a:hover { color: #ffe7b8 !important; border-color: rgba(215,166,79,.62); background: linear-gradient(105deg,rgba(139,38,38,.28),rgba(44,30,20,.86) 55%,rgba(7,12,19,.98)); box-shadow: inset 3px 0 0 var(--mark-gold),0 8px 20px rgba(0,0,0,.24); transform: translateY(-1px); }
.mark-hub-page-grid img { width: 38px; height: 38px; object-fit: contain; image-rendering: auto; padding: 3px; border: 1px solid rgba(215,166,79,.18); background: radial-gradient(circle,rgba(215,166,79,.12),rgba(5,9,15,.4) 72%); box-shadow: inset 0 0 8px rgba(215,166,79,.04); }
.mark-hub-page-grid span { overflow: hidden; font: 700 13px "Mark Beaufort", serif; text-overflow: ellipsis; white-space: nowrap; }
.mark-hub-page-grid i { color: #e2bd70; font-size: 8px; transition: transform .18s ease,color .18s ease; }
.mark-hub-page-grid a:hover i { color: #ffe0a0; transform: translateX(2px); }
.mark-hub-biologist { display: grid; grid-template-columns: minmax(180px,.75fr) minmax(0,1.25fr) auto; gap: 20px; align-items: center; padding: 25px; }
.mark-hub-biologist header p { margin: 8px 0 0; color: #8e9094; font: 400 11px/1.55 "Mark Beaufort", serif; }
.mark-hub-biologist > div { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; }
.mark-hub-biologist > div a { min-width: 0; display: grid; place-items: center; gap: 5px; padding: 10px 4px; border: 1px solid rgba(255,255,255,.065); color: #aaa !important; text-decoration: none !important; }
.mark-hub-biologist img { width: 42px; height: 42px; object-fit: contain; }
.mark-hub-biologist span { width: 100%; overflow: hidden; font: 700 7px "Mark Beaufort", serif; text-align: center; text-overflow: ellipsis; white-space: nowrap; }

.mark-side-panel { overflow: hidden; border-top: 2px solid var(--mark-red); }
.mark-side-panel-blue { border-top-color: #317cb4; }
.mark-side-panel-gold { border-top-color: var(--mark-gold); }
.mark-side-panel-events { border-top-color: #c45f2f; }
.mark-side-community { border-top-color: #667180; }
.mark-side-panel header { min-height: 100px; padding: 20px; background: radial-gradient(circle at 100% 0,rgba(163,38,45,.2),transparent 60%); }
.mark-side-panel h2 { font-size: 25px; }
.mark-side-panel header p { margin: 9px 0 0; color: #848990; font: 400 12px/1.55 "Mark Beaufort", serif; }
.mark-side-panel nav { display: grid; }
.mark-side-panel nav a { min-height: 56px; display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 0 16px; border-top: 1px solid rgba(255,255,255,.065); color: #ddd8cf !important; text-decoration: none !important; }
.mark-side-panel nav a:hover { color: #ffe4ae !important; background: rgba(215,166,79,.065); }
.mark-side-panel nav a > i:first-child { color: var(--mark-gold); text-align: center; }
.mark-side-panel nav a > i:last-child { color: #555e68; font-size: 8px; }
.mark-side-panel nav span { font: 700 12px "Mark Beaufort", serif; }
.mark-nav-icon { --mark-nav-mask: url("../images/wiki-ui/target.svg"); position: relative; width: 36px; height: 36px; display: block; justify-self: center; padding: 0; border: 1px solid rgba(215,166,79,.36); color: #f2d18b; background: linear-gradient(145deg,rgba(215,166,79,.13),rgba(8,14,22,.65)); font-size: 0; line-height: 0; box-shadow: inset 0 0 12px rgba(215,166,79,.05),0 5px 14px rgba(0,0,0,.18); }
.mark-nav-icon::before { position: absolute; top: 50%; left: 50%; width: 19px; height: 19px; display: block; margin: 0; content: ""; background: currentColor; -webkit-mask: var(--mark-nav-mask) center/contain no-repeat; mask: var(--mark-nav-mask) center/contain no-repeat; filter: drop-shadow(0 0 4px currentColor); transform: translate(-50%,-50%); transform-origin: center; }
.mark-side-community .mark-nav-icon::before { transform: translate(-50%,calc(-50% + 1px)); }
.mark-side-panel-red nav a:nth-child(1) .mark-nav-icon { --mark-nav-mask: url("../images/wiki-ui/shop.svg"); }
.mark-side-panel-red nav a:nth-child(2) .mark-nav-icon { --mark-nav-mask: url("../images/wiki-ui/weapon.svg"); }
.mark-side-panel-red nav a:nth-child(3) .mark-nav-icon { --mark-nav-mask: url("../images/wiki-ui/armor.svg"); }
.mark-side-panel-blue nav a:nth-child(1) .mark-nav-icon { --mark-nav-mask: url("../images/wiki-ui/faq.svg"); }
.mark-side-panel-blue nav a:nth-child(2) .mark-nav-icon { --mark-nav-mask: url("../images/wiki-ui/target.svg"); }
.mark-side-panel-blue nav a:nth-child(3) .mark-nav-icon { --mark-nav-mask: url("../images/wiki-ui/horse.svg"); }
.mark-side-panel-blue nav a:nth-child(4) .mark-nav-icon { --mark-nav-mask: url("../images/wiki-ui/lock.svg"); }
.mark-side-panel-blue nav a:nth-child(5) .mark-nav-icon { --mark-nav-mask: url("../images/wiki-ui/trade.svg"); }
.mark-side-panel-gold nav a:nth-child(1) .mark-nav-icon { --mark-nav-mask: url("../images/wiki-ui/map.svg"); }
.mark-side-panel-gold nav a:nth-child(2) .mark-nav-icon { --mark-nav-mask: url("../images/wiki-ui/dungeon.svg"); }
.mark-side-panel-gold nav a:nth-child(3) .mark-nav-icon { --mark-nav-mask: url("../images/wiki-ui/metin.svg"); }
.mark-side-panel-gold nav a:nth-child(4) .mark-nav-icon { --mark-nav-mask: url("../images/wiki-ui/boss.svg"); }
.mark-side-panel-events nav a:nth-child(1) .mark-nav-icon { --mark-nav-mask: url("../images/wiki-ui/event.svg"); }
.mark-side-panel-events nav a:nth-child(2) .mark-nav-icon { --mark-nav-mask: url("../images/wiki-ui/easter.svg"); }
.mark-side-panel-events nav a:nth-child(3) .mark-nav-icon { --mark-nav-mask: url("../images/wiki-ui/summer.svg"); }
.mark-side-community nav a:nth-child(1) .mark-nav-icon { --mark-nav-mask: url("../images/wiki-ui/discord.svg"); }
.mark-side-community nav a:nth-child(2) .mark-nav-icon { --mark-nav-mask: url("../images/wiki-ui/whatsapp.svg"); }
.mark-side-community nav a:nth-child(3) .mark-nav-icon { --mark-nav-mask: url("../images/wiki-ui/instagram.svg"); }
.mark-side-community nav a:nth-child(4) .mark-nav-icon { --mark-nav-mask: url("../images/wiki-ui/facebook.svg"); }
.mark-side-panel-blue .mark-nav-icon { border-color: rgba(75,154,211,.42); color: #91c9ef; background: rgba(43,109,158,.12); }
.mark-side-panel-events .mark-nav-icon { border-color: rgba(196,95,47,.42); color: #f0b089; background: rgba(196,95,47,.12); }
.mark-side-community .mark-nav-icon { border-color: rgba(195,205,218,.3); color: #d9e0e9; background: rgba(117,133,153,.12); }
.mark-nav-arrow { color: #7d8793; font: 400 20px/1 "Mark Beaufort", serif; transition: color .18s ease,transform .18s ease; }
.mark-side-panel nav a:hover .mark-nav-arrow { color: var(--mark-gold-light); transform: translateX(2px); }

body.mark-inner-page { padding-top: 0; }
body.mark-inner-page > main { width: min(1380px,calc(100% - 44px)); display: grid; grid-template-columns: 230px minmax(0,1fr); grid-template-areas: "hero hero" "sidebar content"; gap: 22px; align-items: start; margin: 0 auto; padding-top: 98px; }
body.mark-inner-page .mark-detail-hero { grid-area: hero; width: 100% !important; min-height: 335px !important; margin: 0 !important; padding: 38px 28px !important; border: 1px solid rgba(215,166,79,.2); background-position: center 38%; }
body.mark-inner-page .mark-detail-hero-content h1 { font-size: clamp(34px,5vw,64px); }
body.mark-inner-page .mark-inner-sidebar { grid-area: sidebar; position: sticky; top: 96px; overflow: hidden; border: 1px solid rgba(215,166,79,.18); background: #0a1018; box-shadow: 0 18px 40px rgba(0,0,0,.26); }
.mark-inner-sidebar header { display: grid; gap: 4px; padding: 19px; border-top: 2px solid var(--mark-red); border-bottom: 1px solid rgba(255,255,255,.06); }
.mark-inner-sidebar header small { color: var(--mark-gold); font: 800 8px "Mark Beaufort", serif; letter-spacing: .15em; }
.mark-inner-sidebar header strong { color: #fff0d5; font: 800 21px "Mark Beaufort",serif; }
.mark-inner-sidebar nav { display: grid; }
.mark-inner-sidebar nav a { min-height: 49px; display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,.05); color: #bfc0c0 !important; text-decoration: none !important; }
.mark-inner-sidebar nav a:hover { color: #ffe0a2 !important; background: rgba(215,166,79,.07); }
.mark-inner-sidebar nav i { --mark-inner-icon: url("../images/wiki-ui/target.svg"); width: 28px; height: 28px; display: grid; place-items: center; justify-self: center; border: 1px solid rgba(215,166,79,.22); color: #d7aa57; background: rgba(215,166,79,.06); font-family: inherit !important; font-size: 0 !important; line-height: 0; text-align: center; }
.mark-inner-sidebar nav i::before { width: 16px; height: 16px; display: block; margin: auto; content: "" !important; background: currentColor; -webkit-mask: var(--mark-inner-icon) center / contain no-repeat; mask: var(--mark-inner-icon) center / contain no-repeat; }
.mark-inner-sidebar nav i.fa-khanda { --mark-inner-icon: url("../images/wiki-ui/weapon.png"); }
.mark-inner-sidebar nav i.fa-shield-alt { --mark-inner-icon: url("../images/wiki-ui/armor.png"); }
.mark-inner-sidebar nav i.fa-user-shield { --mark-inner-icon: url("../images/wiki-ui/helmet.png"); }
.mark-inner-sidebar nav i.fa-gem { --mark-inner-icon: url("../images/wiki-ui/event.svg"); }
.mark-inner-sidebar nav i.fa-percentage { --mark-inner-icon: url("../images/wiki-ui/target.svg"); }
.mark-inner-sidebar nav i.fa-cubes { --mark-inner-icon: url("../images/wiki-ui/metin.svg"); }
.mark-inner-sidebar nav i.fa-skull { --mark-inner-icon: url("../images/wiki-ui/boss.svg"); }
.mark-inner-sidebar nav i.fa-dungeon { --mark-inner-icon: url("../images/wiki-ui/dungeon.svg"); }
.mark-inner-sidebar nav i.fa-map { --mark-inner-icon: url("../images/wiki-ui/map.svg"); }
.mark-inner-sidebar nav i.fa-question-circle { --mark-inner-icon: url("../images/wiki-ui/faq.svg"); }
.mark-inner-sidebar nav a:hover i { border-color: rgba(215,166,79,.5); color: #f2cf85; background: rgba(215,166,79,.11); }
.mark-inner-sidebar nav span { font: 700 9px "Mark Beaufort", serif; }
body.mark-inner-page section.main { grid-area: content; width: 100% !important; min-width: 0; margin: 0 !important; padding: 0 0 54px !important; }
body.mark-inner-page section.main > .container { width: 100% !important; max-width: none !important; padding: 0 !important; }
body.mark-inner-page .mark-back-top { position: fixed; }

@media (max-width: 1180px) {
  body { padding-top: 94px; }
  body .mark-header-shell { grid-template-columns: 150px minmax(0,1fr) auto; width: calc(100% - 32px); gap: 16px; }
  body.mark-home-page .mark-header-shell { grid-template-columns: 150px minmax(0,1fr) auto; }
  body .mark-navigation { position: absolute; top: calc(100% + 6px); right: 22px; width: 280px; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 4px; background: linear-gradient(110deg, rgba(10,15,27,.96), rgba(20,27,42,.94)); box-shadow: 0 22px 50px rgba(0,0,0,.58); backdrop-filter: blur(22px) saturate(1.25); }
  body .mark-navigation.is-open { display: flex; }
  body .mark-navigation a { min-height: 46px; display: flex; align-items: center; padding: 0 13px; border-bottom: 1px solid rgba(255,255,255,.05); }
  body .mark-menu-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
  .mark-hub-shell { grid-template-columns: 220px minmax(0,1fr); }
  .mark-hub-side { grid-column: 1/-1; grid-template-columns: repeat(5,minmax(0,1fr)); }
  .mark-side-panel header { min-height: 148px; }
}

@media (max-width: 820px) {
  body { padding-top: 94px; }
  body .mark-header { padding: 8px 0; }
  body .mark-header-shell { width: calc(100% - 24px); grid-template-columns: 1fr auto; gap: 12px; padding: 8px 12px; }
  body.mark-home-page .mark-header-shell { grid-template-columns: 1fr auto; }
  body .mark-brand { grid-column: 1; grid-row: 1; }
  body .mark-brand img { width: 94px; }
  body .mark-header-tools { grid-column: 2; grid-row: 1; }
  body .mark-header-search { grid-column: 1/-1; grid-row: 2; height: 42px; }
  body.mark-home-page .mark-hero { margin-top: -94px; }
  body .mark-navigation { top: calc(100% + 6px); right: 12px; left: 12px; width: auto; }
  body .mark-play-button { display: none; }
  body.mark-home-page .mark-hero { min-height: 535px !important; margin-top: -94px; padding-top: 164px !important; }
  body.mark-home-page .mark-hero-search { height: 58px; margin-top: 20px; }
  body.mark-inner-page > main { padding-top: 84px; }
  body.mark-inner-page .mark-detail-hero { min-height: 285px !important; padding: 30px 17px !important; }
  body.mark-inner-page .mark-inner-hero-search { height: 58px; margin-top: 20px; }
  .mark-hub-shell { width: calc(100% - 24px); grid-template-columns: 1fr; }
  .mark-hub-characters { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mark-hub-characters .mark-character-card { min-height: 0; }
  .mark-hub-side { grid-column: auto; grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.mark-inner-page > main { width: calc(100% - 24px); display: block; padding-top: 134px; }
  body.mark-inner-page .mark-detail-hero { min-height: 210px !important; margin-bottom: 14px !important; }
  body.mark-inner-page .mark-inner-sidebar { position: relative; top: auto; margin-bottom: 14px; }
  .mark-inner-sidebar nav { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mark-hub-biologist { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  body .mark-header-search kbd { display: none; }
  body.mark-home-page .mark-hero { min-height: 520px !important; padding-right: 16px !important; padding-left: 16px !important; }
  body.mark-home-page .mark-hero h1 { font-size: 35px; }
  .mark-wiki-hub { padding-top: 12px; }
  .mark-hub-shell { gap: 12px; }
  .mark-hub-characters { grid-template-columns: 1fr; gap: 12px; }
  .mark-hub-characters .mark-character-card { min-height: 0; }
  .mark-hub-feature-row,.mark-hub-world,.mark-hub-side { grid-template-columns: 1fr; }
  .mark-hub-feature { min-height: 285px; }
  .mark-feature-track,.mark-feature-slider .mark-feature-slide { min-height: 310px !important; }
  .mark-feature-slider .mark-feature-slide > div { padding-bottom: 78px; }
  .mark-feature-controls { right: 16px; bottom: 16px; }
  .mark-hub-feature > div,.mark-hub-feature-small > div { width: 100%; padding: 23px; }
  .mark-hub-feature-small { min-height: 190px !important; }
  .mark-world-card { min-height: 340px; padding: 0 22px 24px; }
  .mark-hub-pages > header { display: block; }
  .mark-hub-pages header p { margin-top: 10px; text-align: left; }
  .mark-hub-page-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; padding: 10px 12px 14px; }
  .mark-hub-page-grid a { min-height: 92px; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; justify-items: center; align-content: center; gap: 5px; padding: 10px 8px 8px; text-align: center; }
  .mark-hub-page-grid img { width: 34px; height: 34px; padding: 2px; }
  .mark-hub-page-grid span { width: 100%; font-size: 9px; line-height: 1.25; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .mark-hub-page-grid i { font-size: 7px; opacity: .8; }
  .mark-hub-biologist > div { grid-template-columns: repeat(3,minmax(0,1fr)); }
  body.mark-inner-page .mark-detail-hero { min-height: 285px !important; padding: 28px 17px !important; }
  body.mark-inner-page .mark-detail-hero-content h1 { font-size: 33px; }
  .mark-inner-sidebar nav { grid-template-columns: 1fr 1fr; }
  .mark-inner-sidebar nav a { min-height: 42px; padding: 0 9px; }
}