/* ==========================================================================
   Yetenekler (Resume sağ sütun)
   Seviye düz yazıyla (Confident / Comfortable / Working knowledge).
   Satır üzerine gelince / odaklanınca hedef gibi kilitlenir: köşeler oturur,
   gri ikon vurgu rengine döner.
   Seviyesiz araçlar (deneyim metninden) köşeli etiket olarak durur.
   ========================================================================== */

.resume-row .sk-group {
  --sk-line: var(--background-dark-80);
  --sk-dim: var(--background-dark-70);
  --sk-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.resume-row .sk-group h2 {
  margin-bottom: 14px;
}

/* --- Seviyeli satırlar --- */

.sk-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--sk-line);
}

.sk {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-areas:
    "ico name"
    "ico tier";
  align-items: center;
  column-gap: 14px;
  row-gap: 1px;
  padding: 10px 10px 10px 8px;
  border-bottom: 1px solid var(--sk-line);
  outline: none;
  cursor: default;
  transition: background-color 0.25s ease;
}

/* Kilit köşeleri (main.css'teki imza ile aynı çizim) */
.sk::after,
.sk-chip::after {
  --s: 9px;
  --w: 2px;
  content: "";
  position: absolute;
  inset: -1px 0;
  pointer-events: none;
  background:
    linear-gradient(var(--accent) 0 0) 0 0 / var(--s) var(--w),
    linear-gradient(var(--accent) 0 0) 0 0 / var(--w) var(--s),
    linear-gradient(var(--accent) 0 0) 100% 0 / var(--s) var(--w),
    linear-gradient(var(--accent) 0 0) 100% 0 / var(--w) var(--s),
    linear-gradient(var(--accent) 0 0) 0 100% / var(--s) var(--w),
    linear-gradient(var(--accent) 0 0) 0 100% / var(--w) var(--s),
    linear-gradient(var(--accent) 0 0) 100% 100% / var(--s) var(--w),
    linear-gradient(var(--accent) 0 0) 100% 100% / var(--w) var(--s);
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.06, 1.35);
  transition: opacity 0.18s ease, transform 0.3s var(--sk-ease, ease);
}

/* İkon kutusu: gri + tarama çizgisi, kilitlenince vurgu renginde */
.sk-ico {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--color-white-70);
  transition: color 0.25s ease;
}

.sk .sk-ico {
  grid-area: ico;
  width: 36px;
  height: 36px;
  background: var(--background-dark-95);
  border: 1px solid var(--sk-line);
  transition: color 0.25s ease, border-color 0.25s ease;
}

.sk .sk-ico::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scanlines);
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Marka/glif ikonları maske ile: rengi currentColor'dan alır */
.sk-ico[class*="sk-ico--"]::after {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}

.sk-ico--html5 { --i: url("../images/skills/html5.svg"); }
.sk-ico--python { --i: url("../images/skills/python.svg"); }
.sk-ico--java { --i: url("../images/skills/java.svg"); }
.sk-ico--javascript { --i: url("../images/skills/javascript.svg"); }
.sk-ico--cplusplus { --i: url("../images/skills/cplusplus.svg"); }
.sk-ico--database { --i: url("../images/skills/database.svg"); }
.sk-ico--feature { --i: url("../images/skills/feature.svg"); }
.sk-ico--ml { --i: url("../images/skills/ml.svg"); }
.sk-ico--evaluation { --i: url("../images/skills/evaluation.svg"); }
.sk-ico--deep-learning { --i: url("../images/skills/deep-learning.svg"); }
.sk-ico--nlp { --i: url("../images/skills/nlp.svg"); }
.sk-ico--vision { --i: url("../images/skills/vision.svg"); }
.sk-ico--rl { --i: url("../images/skills/rl.svg"); }
.sk-ico--ros { --i: url("../images/skills/ros.svg"); }
.sk-ico--opencv { --i: url("../images/skills/opencv.svg"); }
.sk-ico--wireshark { --i: url("../images/skills/wireshark.svg"); }
.sk-ico--burpsuite { --i: url("../images/skills/burpsuite.svg"); }
.sk-ico--metasploit { --i: url("../images/skills/metasploit.svg"); }
.sk-ico--tensorflow { --i: url("../images/skills/tensorflow.svg"); }
.sk-ico--pytorch { --i: url("../images/skills/pytorch.svg"); }
.sk-ico--xil { --i: url("../images/skills/xil.svg"); }

/* Logosu olmayanlar: iki harflik çağrı kodu */
.sk-mark {
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}

.sk-mark::after {
  content: none;
}

.sk-name {
  grid-area: name;
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-white-95);
}

.sk-note {
  display: block;
  font-size: var(--font-size-12);
  font-weight: 300;
  color: var(--color-white-60);
}

.sk-tier {
  grid-area: tier;
  font-size: var(--font-size-12);
  color: var(--color-white-60);
}

/* --- Kilitlenme: fare, klavye odağı, dokunma (tabindex sayesinde odak alır) --- */
.sk:is(:hover, :focus) {
  background-color: var(--background-dark-95);
}

.sk:is(:hover, :focus)::after {
  opacity: 1;
  transform: none;
}

.sk:is(:hover, :focus) .sk-ico {
  color: var(--accent);
  border-color: var(--background-dark-70);
}

.sk:is(:hover, :focus) .sk-ico::before {
  opacity: 0.1;
}

/* Klavye odağı: köşelere ek olarak ince vurgu renkli çerçeve (WCAG için belirgin) */
.sk:focus-visible {
  outline: 1px solid rgba(132, 165, 178, 0.55);
  outline-offset: -1px;
}

/* --- Seviyesiz araçlar --- */
.sk-sub {
  margin: 18px 0 10px;
  font-size: var(--font-size-14);
  font-weight: 500;
  color: var(--color-white-80);
}

.sk-sub:first-of-type {
  margin-top: 4px;
}

.sk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sk-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px 0 0;
  font-size: 13px;
  color: var(--color-white-95);
  background: var(--background-dark-95);
  border: 1px solid var(--sk-line);
  transition: border-color 0.25s ease;
}

.sk-chip::after {
  --s: 6px;
  inset: -1px;
  transform: scale(1.12);
}

.sk-chip .sk-ico {
  width: 30px;
  height: 100%;
  border-right: 1px solid var(--sk-line);
  background: var(--background-dark-90);
}

.sk-chip .sk-ico[class*="sk-ico--"]::after {
  width: 15px;
  height: 15px;
}

.sk-chip .sk-mark {
  font-size: 11px;
}

.sk-chip:hover::after {
  opacity: 1;
  transform: none;
}

.sk-chip:hover .sk-ico {
  color: var(--accent);
}

/* --- Dar ekran --- */
@media screen and (max-width: 400px) {
  .sk {
    column-gap: 12px;
  }

  .sk-name {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk,
  .sk::after,
  .sk-chip::after,
  .sk-ico {
    transition: none;
  }

  .sk::after,
  .sk-chip::after {
    transform: none;
  }
}