/* m-skills: beceriler ve sınıflar. Uses the core tokens only. */
.sk-note { margin: 0 0 .9rem; color: var(--soft); max-width: 70ch; }
.sk-formula { font: 500 .86rem/1.4 var(--mono); color: var(--amber-hot); background: rgba(255, 180, 84, .07); padding: .1rem .4rem; border-radius: 3px; white-space: nowrap; }
.sk-hero-emblem .cls { width: 3.2rem; height: 3.2rem; color: var(--amber); }

/* class index */
.sk-classes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; margin-bottom: 1.5rem; }
.sk-class { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1.1rem; padding: 1.2rem; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-top: 3px solid var(--accent-d);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.sk-class__emblem { display: grid; place-items: center; align-self: start; aspect-ratio: 1; background: var(--ink-2); border: 1px solid var(--line-2); }
.sk-class__emblem .cls { width: 3.6rem; height: 3.6rem; color: var(--amber); }
.sk-class--ninja .sk-class__emblem .cls { color: var(--jinno-t); }
.sk-class--sura .sk-class__emblem .cls { color: var(--shinsoo-t); }
.sk-class--shaman .sk-class__emblem .cls { color: var(--jade); }
.sk-class__name { font-size: 1.55rem; }
.sk-class__name a { color: var(--amber-hot); text-decoration: none; }
.sk-class__name a:hover { text-decoration: underline; }
.sk-class__desc { margin: .4rem 0 .8rem; color: var(--soft); font-size: .95rem; }
.sk-branches { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; gap: .45rem; }
.sk-branch { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 .8rem; padding: .5rem .75rem; background: var(--ink-2); border: 1px solid var(--line); border-left: 3px solid var(--bronze); color: var(--bone); text-decoration: none; }
.sk-branch:hover, .sk-branch:focus-visible { border-left-color: var(--amber); background: var(--row-hover); }
.sk-branch__name { font-weight: 600; }
.sk-branch__title { grid-column: 1; color: var(--mute); font-size: .86rem; }
.sk-branch__n { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--amber); font-size: .86rem; white-space: nowrap; }
.sk-class__more { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.sk-class__count { color: var(--mute); font-size: .88rem; }

/* skill tree grid */
.sk-tree { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: .9rem 1.4rem; }
.sk-node { position: relative; min-width: 0; }
.sk-node:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -1.4rem; width: 1.4rem; border-top: 2px dashed var(--bronze-shade); pointer-events: none; }
.sk-node__link { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .7rem; align-items: center; height: 100%; padding: .7rem .8rem; background: linear-gradient(160deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-2); color: var(--bone); text-decoration: none;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.sk-node__link:hover, .sk-node__link:focus-visible { border-color: var(--amber); background: var(--row-hover); }
.sk-node__slot { position: absolute; top: .3rem; right: .6rem; font: 400 .8rem var(--display); color: var(--faint); }
.sk-node__icon { grid-row: 1 / 3; }
.sk-node__name { font-weight: 600; line-height: 1.2; align-self: end; }
.sk-node__meta { color: var(--mute); font-size: .8rem; align-self: start; }
.sk-node--destek .sk-node__link { border-left: 3px solid var(--jade-deep); }
.sk-node--aktif .sk-node__link { border-left: 3px solid var(--shinsoo); }
.sk-node--pasif .sk-node__link { border-left: 3px solid var(--line-2); }
.sk-node--gecisli .sk-node__link { border-left: 3px solid var(--info); }

/* skill page */
.sk-overview { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.sk-flags { list-style: none; margin: 0 0 .9rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.sk-flags li { padding: .15rem .6rem; border: 1px solid var(--line-2); background: var(--ink-2); color: var(--soft); font-size: .84rem; }
.sk-req__txt { display: block; color: var(--soft); font-size: .88rem; }
.sk-gloss { margin: 0; display: grid; gap: .6rem; }
.sk-gloss__row dt { color: var(--amber-hot); font-weight: 600; }
.sk-gloss__row dd { margin: .1rem 0 0; color: var(--soft); font-size: .92rem; }
.sk-gloss code { font: 600 .86rem var(--mono); color: var(--amber); }
.sk-g1 > * { background-color: rgba(127, 184, 255, .05); }
.sk-g2 > * { background-color: rgba(255, 180, 84, .06); }
.sk-g3 > * { background-color: rgba(63, 224, 176, .10); }
.sk-gfirst > * { border-top: 1px solid var(--line-2); }
.sk-effects .section__title { font-size: 1.05rem; }

@media (max-width: 1000px) {
  .sk-classes { grid-template-columns: minmax(0, 1fr); }
  .sk-overview { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .sk-class { grid-template-columns: minmax(0, 1fr); padding: 1rem; }
  .sk-class__emblem { width: 4.5rem; }
  .sk-tree { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .sk-node:not(:last-child)::after { display: none; }
}