/*
 * Kor Diyarı — "Kor & Obsidyen" (Ember & Obsidian) Ana RPG Görsel Teması (uiTheme.css)
 * Kart: CE2-48 · KD-UI-CORE-03 · Sprint: SPRINT-KOR-DIYARI-UI-KIMLIK
 *
 * Kurallar:
 * - Yontulmuş volkanik bazalt/obsidyen yüzeyler (#121017 / #1a1721)
 * - Dövme bronz (#cfa060 / #946f47) çerçeveler & kor kehribar (#ea580c / #fbbf24) rün vurguları
 * - Gömülü kare eşya/yetenek yuvaları (.kd-slot 52x52 ve .kd-slot--lg 56x56)
 * - Nadirlik çerçeveleri (common / rare / epic / legendary)
 * - Murat'ın Sade Ekran Kuralı & WCAG AA: HİÇBİR font-size 13px altı OLAMAZ (>= 13px zorunlu).
 */

:root {
  color-scheme: dark;

  /* 1. Yontulmuş Obsidyen & Bazalt Yüzeyler */
  --kd-bg-abyss: #09080c;
  --kd-bg-backdrop: rgba(8, 7, 12, 0.76);
  --kd-bg-obsidian: #121017;
  --kd-bg-obsidian-glass: rgba(18, 16, 23, 0.92);
  --kd-bg-basalt: #1a1721;
  --kd-bg-slate: #24202e;
  --kd-bg-parchment: #231c16;
  --kd-bg-parchment-hi: #2d231b;
  --kd-bg-socket: #0d0b11;
  --kd-bg-socket-hover: #191522;

  /* 2. Dövme Bronz & Kor Kehribar Metalurji */
  --kd-bronze-dim: #4a3825;
  --kd-bronze-muted: #6b5035;
  --kd-bronze-base: #946f47;
  --kd-bronze-bright: #cfa060;
  --kd-bronze-highlight: #f3d299;

  --kd-ember-deep: #9a3412;
  --kd-ember-core: #ea580c;
  --kd-ember-amber: #f59e0b;
  --kd-ember-gold: #fbbf24;

  /* 3. Tipografi (>= 13px Zorunlu) & WCAG AA/AAA Kontrastlı Metin Renkleri */
  --kd-font-display: "Cinzel", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --kd-font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --kd-text-ivory: #f7f2e8;
  --kd-text-sand: #d7cbb8;
  --kd-text-ash: #a89b88;
  --kd-text-gold: #fde68a;

  --kd-fs-xs: 13px;
  --kd-fs-sm: 14px;
  --kd-fs-md: 15px;
  --kd-fs-lg: 16px;
  --kd-fs-xl: 20px;
  --kd-fs-2xl: 24px;

  /* 4. Barlar & Anlamsal Savaş Renkleri */
  --kd-hp-start: #991b1b;
  --kd-hp-end: #ef4444;
  --kd-mp-start: #1d4ed8;
  --kd-mp-end: #38bdf8;
  --kd-xp-start: #b45309;
  --kd-xp-end: #fbbf24;

  --kd-delta-up: #4ade80;
  --kd-delta-down: #f87171;
  --kd-status-online: #34d399;
  --kd-status-danger: #fb7185;

  /* 5. Nadirlik Kademeleri (Sıradan · Nadir · Destansı · Efsanevi) */
  --kd-rarity-common-border: #6e665e;
  --kd-rarity-common-glow: rgba(168, 162, 158, 0.14);
  --kd-rarity-common-text: #e7e5e4;

  --kd-rarity-rare-border: #38bdf8;
  --kd-rarity-rare-glow: rgba(56, 189, 248, 0.30);
  --kd-rarity-rare-text: #7dd3fc;

  --kd-rarity-epic-border: #c084fc;
  --kd-rarity-epic-glow: rgba(192, 132, 252, 0.36);
  --kd-rarity-epic-text: #e9d5ff;

  --kd-rarity-legendary-border: #fbbf24;
  --kd-rarity-legendary-glow: rgba(251, 146, 60, 0.48);
  --kd-rarity-legendary-text: #fde68a;

  --kd-rarity-mythic-border: #ef4444;
  --kd-rarity-mythic-glow: rgba(239, 68, 68, 0.56);
  --kd-rarity-mythic-text: #fecaca;

  /* 6. Yuva, Boşluk ve Derinlik Ölçüleri */
  --kd-slot-md: 52px;
  --kd-slot-lg: 56px;
  --kd-slot-gap: 8px;
  --kd-card-gap: 14px;
  --kd-radius-sm: 6px;
  --kd-radius-md: 8px;
  --kd-radius-lg: 10px;

  --kd-shadow-window: 0 24px 64px rgba(0, 0, 0, 0.84), 0 0 0 1px rgba(207, 160, 96, 0.24);
  --kd-shadow-socket: inset 0 3px 7px rgba(0, 0, 0, 0.90), inset 0 0 0 1px rgba(255, 236, 200, 0.05), 0 1px 0 rgba(207, 160, 96, 0.18);
  --kd-shadow-tooltip: 0 20px 48px rgba(0, 0, 0, 0.92), 0 0 24px rgba(234, 88, 12, 0.22);

  /* Geriye Dönük Değişken Köprüsü (styles.css / mpStyles.css / mmoStyles.css için Kor & Obsidyen eşlemesi) */
  --bg-deep: #09080c;
  --glass-bg: rgba(18, 16, 23, 0.92);
  --glass-modal: #121017;
  --glass-card: #1a1721;
  --border-soft: rgba(148, 111, 71, 0.55);
  --border-strong: #cfa060;
  --text-main: #f7f2e8;
  --text-muted: #d7cbb8;
  --emerald: #ea580c;
  --emerald-bright: #cfa060;
  --amber: #f59e0b;
  --amber-soft: #fde68a;
  --hp-color: #ef4444;
  --mp-color: #38bdf8;
  --xp-color: #fbbf24;
  --shadow-lg: 0 20px 52px rgba(0, 0, 0, 0.80), 0 0 0 1px rgba(207, 160, 96, 0.20);
}

button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--kd-ember-gold);
  outline-offset: 2px;
}

.pixel-art {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ============================================================================
   1. DÖVME BRONZ & RÜN KÖŞEBENTLİ RPG PENCERE ÇERÇEVESİ (.kd-window)
   ============================================================================ */
.kd-window,
.kd-rune-frame {
  position: relative;
  background: var(--kd-bg-obsidian);
  border: 1.5px solid var(--kd-bronze-base);
  border-radius: var(--kd-radius-md);
  box-shadow: var(--kd-shadow-window);
  color: var(--kd-text-ivory);
}

.kd-window::before,
.kd-rune-frame::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--kd-ember-core),
    var(--kd-ember-gold),
    var(--kd-ember-core),
    transparent
  );
  z-index: 3;
  pointer-events: none;
}

/* Saf CSS Dövme Bronz Köşe Rün Çentikleri (SVG eklenmemiş pencerelerde otomatik çalışır) */
.kd-rune-frame::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 5px;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(90deg, var(--kd-bronze-bright) 0 12px, transparent 12px) top left / 14px 2px no-repeat,
    linear-gradient(180deg, var(--kd-bronze-bright) 0 12px, transparent 12px) top left / 2px 14px no-repeat,
    linear-gradient(270deg, var(--kd-bronze-bright) 0 12px, transparent 12px) top right / 14px 2px no-repeat,
    linear-gradient(180deg, var(--kd-bronze-bright) 0 12px, transparent 12px) top right / 2px 14px no-repeat,
    linear-gradient(90deg, var(--kd-bronze-bright) 0 12px, transparent 12px) bottom left / 14px 2px no-repeat,
    linear-gradient(0deg, var(--kd-bronze-bright) 0 12px, transparent 12px) bottom left / 2px 14px no-repeat,
    linear-gradient(270deg, var(--kd-bronze-bright) 0 12px, transparent 12px) bottom right / 14px 2px no-repeat,
    linear-gradient(0deg, var(--kd-bronze-bright) 0 12px, transparent 12px) bottom right / 2px 14px no-repeat;
}

.kd-corner-svg {
  position: absolute;
  width: 24px;
  height: 24px;
  z-index: 4;
  pointer-events: none;
}

.kd-corner-svg--tl { top: 2px; left: 2px; }
.kd-corner-svg--tr { top: 2px; right: 2px; transform: scaleX(-1); }
.kd-corner-svg--bl { bottom: 2px; left: 2px; transform: scaleY(-1); }
.kd-corner-svg--br { bottom: 2px; right: 2px; transform: scale(-1, -1); }

.kd-win-hdr {
  min-height: 54px;
  flex-shrink: 0;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(180deg, #1d1925 0%, #14111a 100%);
  border-bottom: 1px solid var(--kd-bronze-muted);
}

.kd-win-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.kd-win-seal {
  width: 32px;
  height: 32px;
  border-radius: var(--kd-radius-sm);
  background: radial-gradient(circle, #3b2a1e, #141018);
  border: 1px solid var(--kd-bronze-bright);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.kd-win-title {
  margin: 0;
  font-family: var(--kd-font-display);
  font-size: var(--kd-fs-xl);
  font-weight: 700;
  color: var(--kd-text-ivory);
  letter-spacing: 0.03em;
}

.kd-win-sub {
  font-size: var(--kd-fs-xs);
  color: var(--kd-text-ash);
  margin-left: 6px;
}

.kd-close-btn {
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--kd-radius-sm);
  background: #1d1824;
  border: 1px solid var(--kd-bronze-base);
  color: var(--kd-text-sand);
  font-size: var(--kd-fs-xs);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.kd-close-btn:hover {
  border-color: var(--kd-ember-gold);
  color: #ffffff;
  background: #2b2129;
}

.kd-win-body {
  padding: 16px 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ============================================================================
   2. GÖMÜLÜ KARE EŞYA & YETENEK YUVALARI (.kd-slot 52x52 ve 56x56)
   ============================================================================ */
.kd-slot {
  position: relative;
  width: var(--kd-slot-md);
  height: var(--kd-slot-md);
  min-width: var(--kd-slot-md);
  min-height: var(--kd-slot-md);
  padding: 0;
  border-radius: var(--kd-radius-sm);
  background: var(--kd-bg-socket);
  border: 1.5px solid var(--kd-bronze-dim);
  box-shadow: var(--kd-shadow-socket);
  color: var(--kd-text-ivory);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 100ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.kd-slot--md {
  width: var(--kd-slot-md);
  height: var(--kd-slot-md);
  min-width: var(--kd-slot-md);
  min-height: var(--kd-slot-md);
}

.kd-slot--lg {
  width: var(--kd-slot-lg);
  height: var(--kd-slot-lg);
  min-width: var(--kd-slot-lg);
  min-height: var(--kd-slot-lg);
}

.kd-slot:hover,
.kd-slot.is-selected {
  background: var(--kd-bg-socket-hover);
  transform: translateY(-1px);
  border-color: var(--kd-bronze-highlight);
}

.kd-slot.is-selected {
  outline: 2px solid var(--kd-ember-gold);
  outline-offset: 1px;
}

.kd-slot img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  pointer-events: none;
  image-rendering: pixelated;
}

.kd-slot--lg img {
  width: 46px;
  height: 46px;
}

.kd-slot-sil {
  width: 26px;
  height: 26px;
  font-size: 20px;
  opacity: 0.24;
  color: var(--kd-bronze-bright);
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Nadirlik Çerçeveleri (common / rare / epic / legendary) */
.kd-slot[data-rarity="common"],
.kd-rarity-common {
  border-color: var(--kd-rarity-common-border);
}

.kd-slot[data-rarity="rare"],
.kd-rarity-rare {
  border-color: var(--kd-rarity-rare-border);
  box-shadow: inset 0 0 12px var(--kd-rarity-rare-glow), var(--kd-shadow-socket);
}

.kd-slot[data-rarity="epic"],
.kd-rarity-epic {
  border-color: var(--kd-rarity-epic-border);
  box-shadow: inset 0 0 14px var(--kd-rarity-epic-glow), var(--kd-shadow-socket);
}

.kd-slot[data-rarity="legendary"],
.kd-rarity-legendary {
  border-color: var(--kd-rarity-legendary-border);
  box-shadow: inset 0 0 16px var(--kd-rarity-legendary-glow), 0 0 10px rgba(251, 191, 36, 0.26);
}

.kd-slot[data-rarity="mythic"],
.kd-rarity-mythic {
  border-color: var(--kd-rarity-mythic-border);
  box-shadow: inset 0 0 18px var(--kd-rarity-mythic-glow), 0 0 12px rgba(239, 68, 68, 0.34);
}

.slot-plus {
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: var(--kd-fs-xs);
  font-weight: 800;
  line-height: 1;
  color: var(--kd-ember-gold);
  text-shadow: 0 1px 2px #000000;
  pointer-events: none;
}

.slot-qty {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-size: var(--kd-fs-xs);
  font-weight: 800;
  line-height: 1;
  color: var(--kd-text-ivory);
  text-shadow: 0 1px 3px #000000;
  pointer-events: none;
}

.slot-pet-dot {
  position: absolute;
  bottom: 3px;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kd-ember-gold);
  box-shadow: 0 0 6px var(--kd-ember-core);
  pointer-events: none;
}

/* ============================================================================
   3. BUTON HİYERARŞİSİ & ORTAK PANELLER / IZGARALAR
   ============================================================================ */
.kd-btn {
  min-height: 38px;
  padding: 7px 15px;
  border-radius: var(--kd-radius-sm);
  font-family: var(--kd-font-ui);
  font-size: var(--kd-fs-sm);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  transition: filter 120ms ease, border-color 120ms ease, background 120ms ease;
}

.kd-btn--primary {
  min-height: 40px;
  padding: 8px 18px;
  background: linear-gradient(180deg, #c2410c 0%, #9a3412 100%);
  border: 1px solid var(--kd-ember-gold);
  color: #fff7ed;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.35);
}

.kd-btn--primary:hover:not(:disabled) {
  filter: brightness(1.1);
}

.kd-btn--secondary {
  background: #1f1b27;
  border: 1px solid var(--kd-bronze-base);
  color: var(--kd-text-ivory);
}

.kd-btn--secondary:hover:not(:disabled) {
  border-color: var(--kd-bronze-highlight);
  background: #292434;
}

.kd-btn--ghost {
  min-height: 34px;
  padding: 5px 12px;
  background: rgba(18, 16, 23, 0.78);
  border: 1px solid var(--kd-bronze-dim);
  color: var(--kd-text-sand);
  font-size: var(--kd-fs-xs);
}

.kd-btn--ghost.is-active,
.kd-btn--ghost:hover:not(:disabled) {
  border-color: var(--kd-bronze-bright);
  color: var(--kd-text-gold);
  background: #231d29;
}

.kd-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.kd-panel {
  background: var(--kd-bg-basalt);
  border: 1px solid var(--kd-bronze-dim);
  border-radius: var(--kd-radius-md);
  padding: 14px;
}

.kd-sec-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.kd-sec-title {
  margin: 0;
  font-family: var(--kd-font-display);
  font-size: var(--kd-fs-md);
  font-weight: 700;
  color: var(--kd-bronze-highlight);
}

.bag-grid-6x4 {
  display: grid;
  grid-template-columns: repeat(6, var(--kd-slot-md));
  gap: var(--kd-slot-gap);
  justify-content: start;
}

.vault-grid-8x4 {
  display: grid;
  grid-template-columns: repeat(8, var(--kd-slot-md));
  gap: var(--kd-slot-gap);
  justify-content: start;
}

.trade-grid-4x2 {
  display: grid;
  grid-template-columns: repeat(4, var(--kd-slot-md));
  gap: var(--kd-slot-gap);
}

.quest-parchment {
  background: linear-gradient(165deg, var(--kd-bg-parchment-hi), var(--kd-bg-parchment));
  border: 1px solid var(--kd-bronze-base);
  border-radius: var(--kd-radius-md);
  padding: 18px;
}

/* ============================================================================
   4. EVRENSEL KARŞILAŞTIRMALI HOVER İPUCU KARTI (.kd-tooltip)
   ============================================================================ */
.kd-tooltip {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 95;
  width: 320px;
  max-width: calc(100vw - 24px);
  pointer-events: none;
  background: linear-gradient(180deg, #191522 0%, #100d15 100%);
  border: 1.5px solid var(--kd-bronze-bright);
  border-radius: var(--kd-radius-md);
  box-shadow: var(--kd-shadow-tooltip);
  padding: 12px 14px;
  color: var(--kd-text-ivory);
  font-family: var(--kd-font-ui);
  font-size: var(--kd-fs-sm);
  line-height: 1.42;
}

.kd-tooltip[hidden] {
  display: none !important;
}

.kd-tooltip::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--kd-ember-amber), transparent);
  pointer-events: none;
}

.kd-tooltip[data-rarity="common"] {
  border-color: var(--kd-rarity-common-border);
}

.kd-tooltip[data-rarity="rare"] {
  border-color: var(--kd-rarity-rare-border);
}

.kd-tooltip[data-rarity="epic"] {
  border-color: var(--kd-rarity-epic-border);
}

.kd-tooltip[data-rarity="legendary"] {
  border-color: var(--kd-rarity-legendary-border);
  box-shadow: var(--kd-shadow-tooltip), 0 0 18px rgba(251, 191, 36, 0.25);
}

.tt-hdr {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(207, 160, 96, 0.22);
}

.tt-icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: var(--kd-radius-sm);
  background: var(--kd-bg-socket);
  border: 1px solid var(--kd-bronze-base);
  box-shadow: var(--kd-shadow-socket);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tt-icon img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  image-rendering: pixelated;
}

.tt-icon-glyph {
  font-size: 20px;
  line-height: 1;
}

.tt-hdr-body {
  min-width: 0;
  flex: 1;
}

.tt-title {
  font-family: var(--kd-font-display);
  font-size: var(--kd-fs-lg);
  font-weight: 700;
  line-height: 1.25;
  color: var(--kd-text-ivory);
  word-break: break-word;
}

.kd-tooltip[data-rarity="common"] .tt-title {
  color: var(--kd-rarity-common-text);
}

.kd-tooltip[data-rarity="rare"] .tt-title {
  color: var(--kd-rarity-rare-text);
}

.kd-tooltip[data-rarity="epic"] .tt-title {
  color: var(--kd-rarity-epic-text);
}

.kd-tooltip[data-rarity="legendary"] .tt-title {
  color: var(--kd-rarity-legendary-text);
}

.kd-tooltip[data-rarity="mythic"] .tt-title {
  color: var(--kd-rarity-mythic-text);
}

.tt-meta {
  font-size: var(--kd-fs-xs);
  color: var(--kd-text-sand);
  margin-top: 3px;
}

.tt-req-locked {
  margin-top: 4px;
  font-size: var(--kd-fs-xs);
  font-weight: 700;
  color: var(--kd-delta-down);
}

.tt-primary {
  font-size: var(--kd-fs-md);
  font-weight: 800;
  color: var(--kd-text-ivory);
  margin: 8px 0 6px;
}

.tt-desc {
  font-size: var(--kd-fs-sm);
  color: var(--kd-text-ivory);
  margin-top: 7px;
  line-height: 1.45;
}

.tt-cmp-box {
  padding: 7px 9px;
  border-radius: 5px;
  background: rgba(9, 8, 12, 0.82);
  border: 1px solid rgba(207, 160, 96, 0.22);
  margin: 7px 0;
  font-size: var(--kd-fs-xs);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tt-cmp-hdr {
  color: var(--kd-text-ash);
  font-size: var(--kd-fs-xs);
  margin-bottom: 2px;
  font-weight: 600;
}

.tt-delta-up {
  color: var(--kd-delta-up);
  font-size: var(--kd-fs-xs);
  font-weight: 700;
}

.tt-delta-down {
  color: var(--kd-delta-down);
  font-size: var(--kd-fs-xs);
  font-weight: 700;
}

.tt-delta-neutral {
  color: var(--kd-text-ash);
  font-size: var(--kd-fs-xs);
}

.tt-affix {
  font-size: var(--kd-fs-xs);
  color: #bae6fd;
  margin: 3px 0;
}

.tt-passive {
  margin-top: 7px;
  padding: 6px 8px;
  border-radius: 5px;
  background: rgba(154, 52, 18, 0.26);
  border: 1px solid rgba(251, 191, 36, 0.48);
  color: var(--kd-text-gold);
  font-size: var(--kd-fs-xs);
}

.tt-note {
  margin-top: 6px;
  font-size: var(--kd-fs-xs);
  color: var(--kd-text-gold);
}

.tt-foot {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(207, 160, 96, 0.18);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--kd-fs-xs);
  color: var(--kd-text-ash);
}

/* Tekrarlı Sağ-Alt MMO Dock Çubuğu Gizlemesi (Pazar [B] ve Lonca [G] üst hızlı şeritte birleşti) */
.mmo-dock-bar {
  display: none !important;
}

@media (max-width: 960px) {
  .bag-grid-6x4,
  .bag-grid-8x6 {
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  }
  .vault-grid-8x4 {
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  }
  .kd-tooltip {
    width: min(304px, calc(100vw - 24px));
  }
}

/* ============================================================================
   7. FAZ 1: 48-YUVA ENVANTER, BUFF HUD, 7-SLOT +10 DEMİRCİ & [F10] GM KONSOLU
   ============================================================================ */
.hud-buffs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.kd-buff-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(18, 16, 23, 0.92);
  border: 1px solid rgba(251, 191, 36, 0.55);
  color: var(--kd-text-ivory);
  font-size: var(--kd-fs-xs);
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.kd-buff-pill--haste {
  border-color: #38bdf8;
  color: #e0f2fe;
}

.kd-buff-pill--power {
  border-color: #f97316;
  color: #ffedd5;
}

.kd-buff-pill--defense {
  border-color: #a855f7;
  color: #f3e8ff;
}

.kd-buff-timer {
  color: var(--kd-text-gold);
  font-variant-numeric: tabular-nums;
}

.kd-inv-header-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.kd-inv-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.kd-inv-tab {
  padding: 4px 9px;
  border-radius: var(--kd-radius-sm);
  background: var(--kd-bg-socket);
  border: 1px solid var(--kd-bronze-dim);
  color: var(--kd-text-sand);
  font-size: var(--kd-fs-xs);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.kd-inv-tab:hover {
  border-color: var(--kd-bronze-bright);
  color: var(--kd-text-ivory);
}

.kd-inv-tab.is-active {
  background: linear-gradient(180deg, #3c2618 0%, #241812 100%);
  border-color: var(--kd-ember-gold);
  color: var(--kd-text-gold);
}

.bag-grid-8x6 {
  display: grid !important;
  grid-template-columns: repeat(8, var(--kd-slot-md)) !important;
  gap: 6px !important;
  justify-content: start;
  max-height: 256px;
  overflow-y: auto;
  padding: 4px;
}

.kd-slot-glyph {
  font-size: 22px;
  line-height: 1;
  pointer-events: none;
}

.slot-bound-tag {
  position: absolute;
  bottom: 2px;
  left: 3px;
  font-size: var(--kd-fs-xs);
  line-height: 1;
  color: #fda4af;
  pointer-events: none;
}

.kd-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.kd-confirm-strip {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: var(--kd-radius-sm);
  background: rgba(127, 29, 29, 0.35);
  border: 1px solid #ef4444;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--kd-fs-xs);
  color: #fecaca;
}

/* Demirci 7-Slot + Çanta +1..+10 Upgrade Kürsüsü */
.kd-smith-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 10px;
  padding: 8px;
  border-radius: var(--kd-radius-md);
  background: rgba(9, 8, 12, 0.65);
  border: 1px solid rgba(148, 111, 71, 0.4);
}

.kd-smith-check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0;
}

.kd-smith-check-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: var(--kd-radius-sm);
  background: var(--kd-bg-socket);
  border: 1px solid var(--kd-bronze-muted);
  color: var(--kd-text-ivory);
  font-size: var(--kd-fs-xs);
  cursor: pointer;
}

.kd-smith-check-label.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.kd-pity-wrap {
  margin: 8px 0;
}

.kd-pity-head {
  display: flex;
  justify-content: space-between;
  font-size: var(--kd-fs-xs);
  color: var(--kd-text-gold);
  margin-bottom: 4px;
  font-weight: 700;
}

.kd-pity-track {
  height: 12px;
  border-radius: 999px;
  background: #09080c;
  border: 1px solid var(--kd-bronze-muted);
  overflow: hidden;
}

.kd-pity-fill {
  height: 100%;
  background: linear-gradient(90deg, #ea580c 0%, #fbbf24 100%);
  transition: width 160ms ease;
}

/* Üst Bar GM Sahip Rozeti & [F10] Kor & Obsidyen GM Konsolu */
.kd-gm-top-badge {
  border-color: var(--kd-ember-gold) !important;
  color: var(--kd-text-gold) !important;
  font-weight: 700 !important;
}

.kd-gm-top-badge.is-gm-active {
  background: linear-gradient(180deg, #7c2d12 0%, #431407 100%) !important;
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.42);
  color: #ffffff !important;
}

.kd-gm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 940;
  background: rgba(7, 6, 10, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.kd-gm-backdrop[hidden] {
  display: none !important;
}

.kd-gm-window {
  width: min(920px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);
  background: linear-gradient(180deg, #17131f 0%, #100d15 100%);
  border: 2px solid var(--kd-bronze-bright);
  border-radius: var(--kd-radius-lg);
  box-shadow: var(--kd-shadow-window);
  color: var(--kd-text-ivory);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.kd-gm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(90deg, rgba(154, 52, 18, 0.36) 0%, rgba(18, 16, 23, 0.95) 100%);
  border-bottom: 1px solid var(--kd-bronze-base);
}

.kd-gm-title {
  margin: 0;
  font-family: var(--kd-font-display);
  font-size: var(--kd-fs-lg);
  color: var(--kd-text-gold);
}

.kd-gm-status-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(9, 8, 12, 0.72);
  border-bottom: 1px solid rgba(148, 111, 71, 0.35);
  font-size: var(--kd-fs-sm);
}

.kd-gm-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 16px 0;
}

.kd-gm-body {
  padding: 14px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kd-gm-card {
  padding: 12px;
  border-radius: var(--kd-radius-md);
  background: var(--kd-bg-basalt);
  border: 1px solid rgba(207, 160, 96, 0.32);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kd-gm-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.kd-gm-input,
.kd-gm-select {
  padding: 6px 10px;
  border-radius: var(--kd-radius-sm);
  background: var(--kd-bg-socket);
  border: 1px solid var(--kd-bronze-base);
  color: var(--kd-text-ivory);
  font-size: var(--kd-fs-sm);
}

.kd-gm-catalog-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 7px;
  max-height: 210px;
  overflow-y: auto;
  padding: 4px;
}

.kd-gm-item-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 7px 10px;
  border-radius: var(--kd-radius-sm);
  background: var(--kd-bg-socket);
  border: 1px solid var(--kd-bronze-dim);
  color: var(--kd-text-ivory);
  font-size: var(--kd-fs-xs);
  text-align: left;
  cursor: pointer;
}

.kd-gm-item-btn.is-selected,
.kd-gm-item-btn:hover {
  border-color: var(--kd-ember-gold);
  background: var(--kd-bg-socket-hover);
}

.kd-gm-player-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kd-gm-player-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--kd-radius-sm);
  background: var(--kd-bg-socket);
  border: 1px solid rgba(148, 111, 71, 0.4);
  font-size: var(--kd-fs-sm);
}

.kd-gm-feedback {
  padding: 8px 12px;
  border-top: 1px solid rgba(148, 111, 71, 0.35);
  background: #0d0b11;
  font-size: var(--kd-fs-xs);
  color: var(--kd-text-sand);
}

.kd-gm-feedback.is-error {
  color: #fca5a5;
}

.kd-gm-feedback.is-ok {
  color: #86efac;
}

/* ============================================================================
   8. FAZ 2: 3 SÜTUNLU [K] YETENEK AĞACI, CANLI VFX SAHNESİ & 12-SLOT HOTBAR
   ============================================================================ */
.kd-drag-ghost {
  position: fixed;
  z-index: 1300;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--kd-radius-sm);
  background: rgba(18, 16, 23, 0.96);
  border: 1.5px solid var(--kd-ember-gold);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.88), 0 0 14px rgba(251, 191, 36, 0.45);
  color: var(--kd-text-ivory);
  font-size: var(--kd-fs-xs);
  font-weight: 700;
  white-space: nowrap;
}

.kd-drag-ghost .slot-icon {
  width: 28px;
  height: 28px;
}

.kd-drag-ghost-symbol {
  font-size: var(--kd-fs-md);
  color: var(--kd-text-gold);
}

.kd-hotbar-slot {
  touch-action: none;
}

.kd-hotbar-slot.is-empty {
  border-style: dashed;
  border-color: rgba(148, 111, 71, 0.45);
  background: rgba(11, 10, 15, 0.84);
}

.slot-empty-rune {
  font-size: var(--kd-fs-md);
  color: rgba(207, 160, 96, 0.36);
  pointer-events: none;
}

/* CE2-107: tuş harfi sol üstte, rütbe/adet rozeti sağ altta; ikisi de yuvanın kenarına oturur ve ikonu örtmez.
   uiTheme.css styles.css'ten önce yüklenir, bu yüzden kurallar orada yazılandan daha özgül seçicilerle yazıldı. */
.action-slot .slot-key,
.action-slot .slot-rank-badge,
.action-slot .slot-count {
  z-index: 4;
  height: 13px;
  padding: 0 3px;
  line-height: 13px;
  white-space: nowrap;
  border-radius: 3px;
  background: rgba(9, 8, 12, 0.94);
  box-shadow: 0 0 0 1px rgba(148, 111, 71, 0.55);
}

.action-slot .slot-key {
  top: -8px;
  right: auto;
  bottom: auto;
  left: -3px;
}

.action-slot .slot-rank-badge,
.action-slot .slot-count,
#btn-slot-mount.action-slot .slot-rank-badge {
  top: auto;
  right: -3px;
  bottom: -8px;
  left: auto;
  max-width: none;
}

.action-slot.kd-slot .slot-icon {
  width: calc(100% - 12px);
  height: calc(100% - 12px);
}

.kd-hotbar-slot.is-depleted .slot-icon {
  filter: grayscale(0.92) brightness(0.62);
}

.kd-hotbar-slot.is-depleted .slot-count {
  color: #fca5a5;
}

.kd-hotbar-slot.is-awakened-r5 {
  border-color: var(--kd-ember-gold);
  box-shadow: inset 0 0 10px rgba(251, 191, 36, 0.28), 0 0 10px rgba(234, 88, 12, 0.26);
}

.kd-hotbar-slot.is-pressed {
  transform: scale(0.93) !important;
  border-color: #fde047 !important;
  box-shadow: 0 0 14px rgba(253, 224, 71, 0.65), inset 0 0 10px rgba(251, 146, 60, 0.5) !important;
}

.kd-hotbar-slot.is-drop-ready {
  border-color: rgba(251, 191, 36, 0.62);
}

.kd-hotbar-slot.is-drop-hover {
  border-color: #4ade80 !important;
  background: rgba(22, 101, 52, 0.38) !important;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 0 14px rgba(74, 222, 128, 0.55);
}

.slot-cd-sweep {
  background: rgba(9, 8, 12, 0.78);
}

.slot-cd-text {
  font-size: var(--kd-fs-xs);
  font-weight: 800;
  color: #fde047;
  text-shadow: 0 1px 3px #000000;
}

.kd-hotbar-lock-btn {
  width: 38px !important;
  min-width: 38px !important;
  font-size: var(--kd-fs-md);
}

.kd-hotbar-lock-btn.is-locked-active {
  border-color: var(--kd-ember-gold);
  background: rgba(154, 52, 18, 0.34);
}

.kd-bag-slot[data-hotbar-bindable="1"] {
  touch-action: none;
  cursor: grab;
}

/* [K] Yetenek Ağacı Penceresi — CE2-100 UX yenilemesi
   Üst şerit + Kademe I..IV ağacı + pasif/SP alt şeritleri solda; 336px arena + detay kartı sağda.
   index.html iskeleti korunur: #skills-col-left / #skills-col-center "display: contents" ile
   çocuklarını doğrudan grid alanlarına bırakır. */
.modal-window--skills {
  width: min(1240px, 97vw) !important;
  padding: 14px 18px 16px !important;
  gap: 10px !important;
}

.kd-skills-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  grid-template-areas:
    "top right"
    "tree right"
    "pas right"
    "sp right"
    ". right";
  grid-template-rows: auto auto auto auto 1fr;
  column-gap: 14px;
  row-gap: 8px;
  align-items: start;
}

.kd-skills-col--left,
.kd-skills-col--center {
  display: contents;
}

.kd-skills-col--right {
  grid-area: right;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.kd-sk-topstrip {
  grid-area: top;
}

.kd-sk-tree {
  grid-area: tree;
}

.kd-passive-tier-block {
  grid-area: pas;
}

.kd-sk-sp-strip {
  grid-area: sp;
}

/* Üst şerit: sınıf sekmeleri · Kalan SP / J-Lv · Sıfırla */
.kd-sk-topstrip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "tabs sp"
    "jlv respec";
  align-items: center;
  gap: 8px 12px;
  padding: 8px 10px;
  border-radius: var(--kd-radius-sm);
  background: linear-gradient(180deg, rgba(24, 18, 28, 0.94), rgba(12, 10, 16, 0.94));
  border: 1px solid rgba(148, 111, 71, 0.42);
  min-width: 0;
}

.kd-class-tabs {
  grid-area: tabs;
  display: flex;
  gap: 6px;
  min-width: 0;
}

.kd-class-tabs > .kd-class-pick-btn {
  flex: 1 1 auto;
}

.kd-class-pick-btn {
  --kd-class-accent: #cfa060;
  position: relative;
  min-height: 38px;
  padding: 5px 9px 5px 6px;
  border-radius: var(--kd-radius-sm);
  background: var(--kd-bg-socket);
  border: 1px solid var(--kd-bronze-dim);
  color: var(--kd-text-sand);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.kd-class-pick-btn:hover {
  border-color: var(--kd-bronze-bright);
  background: var(--kd-bg-socket-hover);
  color: var(--kd-text-ivory);
}

.kd-class-pick-btn.is-active {
  border-color: var(--kd-class-accent);
  color: var(--kd-text-ivory);
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--kd-class-accent) 30%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(40, 28, 26, 0.96), rgba(16, 12, 18, 0.96));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--kd-class-accent) 40%, transparent),
    0 0 12px color-mix(in srgb, var(--kd-class-accent) 28%, transparent);
}

.kd-class-pick-btn.is-active::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--kd-class-accent);
}

.kd-class-tab-crest {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #2a2233, #0b090f);
  border: 1px solid color-mix(in srgb, var(--kd-class-accent) 55%, #3a2c22);
}

.kd-class-pick-name {
  font-family: var(--kd-font-ui);
  font-size: var(--kd-fs-sm);
  font-weight: 800;
  white-space: nowrap;
}

.kd-sk-jlv {
  grid-area: jlv;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.kd-jlv-badge {
  flex: 0 0 auto;
  font-size: var(--kd-fs-sm);
  font-weight: 800;
  color: var(--kd-text-ivory);
  white-space: nowrap;
}

.kd-jlv-bar {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 20px;
}

.kd-sk-sp {
  grid-area: sp;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}

.kd-sp-points-pill {
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(30, 27, 38, 0.9);
  border: 1px solid var(--kd-bronze-muted);
  color: var(--kd-text-sand);
  font-size: var(--kd-fs-md);
  font-weight: 900;
  white-space: nowrap;
}

.kd-sp-points-pill.has-sp {
  background: linear-gradient(180deg, rgba(194, 65, 12, 0.6), rgba(124, 45, 18, 0.55));
  border-color: #fbbf24;
  color: #fef08a;
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.35), inset 0 0 6px rgba(254, 240, 138, 0.2);
}

.kd-sp-budget-line {
  font-size: var(--kd-fs-xs);
  color: var(--kd-text-sand);
  white-space: nowrap;
}

.kd-respec-btn-row {
  grid-area: respec;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.kd-sk-respec-btn.kd-btn {
  min-height: 30px;
  padding: 4px 10px;
  font-size: var(--kd-fs-xs);
  white-space: nowrap;
}

.kd-vital-fill--jlv {
  background: linear-gradient(90deg, #0f766e 0%, #10b981 55%, #34d399 100%);
}

.kd-vital-fill--sp-energy {
  background: linear-gradient(90deg, #6d28d9 0%, #a855f7 55%, #fb923c 100%);
}

/* Kademe I..IV ağacı + amber bağlantı hatları */
.kd-sk-tree {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 8px 8px 8px 0;
  border-radius: var(--kd-radius-sm);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(124, 45, 18, 0.16), transparent 70%),
    rgba(13, 11, 17, 0.82);
  border: 1px solid rgba(148, 111, 71, 0.34);
}

.kd-sk-tree::before {
  content: "";
  position: absolute;
  left: 25px;
  top: 30px;
  bottom: 30px;
  width: 2px;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.15), rgba(251, 146, 60, 0.75), rgba(251, 191, 36, 0.15));
  box-shadow: 0 0 6px rgba(251, 146, 60, 0.45);
  pointer-events: none;
}

.kd-skill-tier-block {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}

.kd-sk-sp-strip {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.kd-sk-band {
  padding: 7px 8px 7px 0;
  border-radius: var(--kd-radius-sm);
  background: rgba(13, 11, 17, 0.82);
  border: 1px solid rgba(148, 111, 71, 0.34);
}

.kd-tier-ribbon {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.kd-tier-roman {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-family: var(--kd-font-display, Georgia, serif);
  font-size: var(--kd-fs-md);
  font-weight: 900;
  color: #fef3c7;
  background: radial-gradient(circle at 40% 30%, #7c2d12, #2a1208 75%);
  border: 1.5px solid #f59e0b;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.45);
}

.kd-tier-lv {
  font-size: var(--kd-fs-xs);
  font-weight: 800;
  color: var(--kd-text-gold);
  white-space: nowrap;
  letter-spacing: -0.02em;
}

.kd-skill-tier-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.kd-skill-tier-grid::before {
  content: "";
  position: absolute;
  left: -10px;
  right: 6px;
  top: 50%;
  height: 2px;
  transform: translateY(-1px);
  background: linear-gradient(90deg, rgba(251, 146, 60, 0.75), rgba(251, 191, 36, 0.35));
  box-shadow: 0 0 5px rgba(251, 146, 60, 0.4);
  pointer-events: none;
}

.kd-skill-node {
  position: relative;
  z-index: 1;
  padding: 6px 8px 6px 6px;
  border-radius: var(--kd-radius-sm);
  background: linear-gradient(180deg, #1a1621, #110e16);
  border: 1.5px solid var(--kd-bronze-dim);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  cursor: pointer;
  touch-action: none;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.kd-skill-node:hover {
  border-color: var(--kd-bronze-bright);
  background: linear-gradient(180deg, #221c2b, #15111b);
}

.kd-skill-node:focus-visible {
  outline: 2px solid var(--kd-ember-gold);
  outline-offset: 1px;
}

.kd-skill-node.is-selected {
  border-color: var(--kd-ember-gold);
  background: linear-gradient(180deg, rgba(154, 52, 18, 0.42), rgba(26, 16, 18, 0.96));
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.4), 0 0 14px rgba(251, 146, 60, 0.28);
}

.kd-skill-node.is-awakened {
  border-color: #fbbf24;
  box-shadow: inset 0 0 12px rgba(251, 191, 36, 0.22);
}

.kd-skill-node.is-unlearned .kd-skill-node-img {
  filter: saturate(0.55) brightness(0.8);
}

.kd-skill-node.is-locked {
  opacity: 0.72;
}

.kd-skill-node.is-locked .kd-skill-node-img {
  filter: grayscale(0.85) brightness(0.62);
}

.kd-skill-node-socket {
  position: relative;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 7px;
  background: radial-gradient(circle at 50% 40%, #1d1726, #07060a);
  border: 1px solid var(--kd-bronze-muted);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.9);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.kd-skill-node.is-awakened .kd-skill-node-socket {
  border-color: #fbbf24;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.9), 0 0 8px rgba(251, 191, 36, 0.45);
}

.kd-skill-node-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.kd-skill-art-img {
  image-rendering: auto;
}

.kd-skill-node-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.kd-skill-node-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.kd-skill-node-sub {
  min-width: 0;
  font-size: var(--kd-fs-xs);
  color: var(--kd-text-sand);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
}

.kd-skill-node.is-locked .kd-skill-node-sub {
  color: #fca5a5;
  font-weight: 700;
}

.kd-skill-node-title {
  font-family: var(--kd-font-ui);
  font-size: var(--kd-fs-sm);
  font-weight: 800;
  color: var(--kd-text-ivory);
  line-height: 1.2;
  white-space: nowrap;
  letter-spacing: -0.005em;
}

.kd-skill-node-title.is-long {
  font-size: 13px;
  letter-spacing: -0.02em;
}

.kd-skill-node.is-selected .kd-skill-node-title {
  color: #fef3c7;
}

.kd-skill-node-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.kd-rank-beads {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
}

.kd-rank-bead {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0b090f;
  border: 1px solid rgba(148, 111, 71, 0.75);
}

.kd-rank-bead.is-on {
  background: radial-gradient(circle at 35% 30%, #fde68a, #f59e0b 60%, #b45309);
  border-color: #fbbf24;
  box-shadow: 0 0 4px rgba(251, 191, 36, 0.6);
}

.kd-rank-bead.is-r5 {
  transform: rotate(45deg);
  border-radius: 2px;
}

.kd-rank-bead.is-r5.is-on {
  background: radial-gradient(circle at 35% 30%, #fff7ed, #fb923c 55%, #c2410c);
  box-shadow: 0 0 6px rgba(251, 146, 60, 0.85);
}

.kd-skill-rank-pill {
  font-size: var(--kd-fs-xs);
  font-weight: 800;
  color: var(--kd-text-gold);
  white-space: nowrap;
}

.kd-skill-rank-pill.is-r5 {
  color: #fde047;
}

.kd-skill-sp-tag,
.kd-skill-key-chip {
  padding: 0 5px;
  border-radius: 4px;
  font-size: var(--kd-fs-xs);
  font-weight: 800;
  line-height: 1.35;
  white-space: nowrap;
}

.kd-skill-sp-tag {
  background: rgba(124, 45, 18, 0.92);
  color: #fde047;
}

.kd-skill-sp-tag.is-ult {
  background: rgba(88, 28, 135, 0.92);
  color: #f5d0fe;
}

.kd-skill-key-chip {
  margin-left: auto;
  background: #0b090f;
  border: 1px solid rgba(74, 222, 128, 0.6);
  color: #bbf7d0;
}

.kd-skill-plus-btn {
  flex: 0 0 auto;
  min-width: 24px;
  height: 22px;
  padding: 0 6px;
  border-radius: 5px;
  border: 1px solid var(--kd-bronze-muted);
  background: #16131d;
  color: var(--kd-text-sand);
  font-size: var(--kd-fs-sm);
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.kd-skill-plus-btn.can-upgrade {
  border-color: #fbbf24;
  background: linear-gradient(180deg, #c2410c, #7c2d12);
  color: #fef08a;
  box-shadow: 0 0 8px rgba(251, 146, 60, 0.55);
}

.kd-skill-plus-btn.can-upgrade:hover {
  filter: brightness(1.15);
}

.kd-skill-plus-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* Alt şerit: pasifler + SP formları */
.kd-tier-ribbon--passive .kd-sk-ico,
.kd-tier-ribbon--sp .kd-tier-roman {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #1e3a5f, #0b1220 75%);
  border: 1.5px solid #60a5fa;
}

.kd-tier-ribbon--sp .kd-tier-roman {
  font-family: var(--kd-font-ui);
  font-size: var(--kd-fs-xs);
  background: radial-gradient(circle at 40% 30%, #581c87, #1a0b2e 75%);
  border-color: #c084fc;
  box-shadow: 0 0 10px rgba(192, 132, 252, 0.4);
}

.kd-passive-tier-block .kd-skill-tier-grid::before {
  display: none;
}

.kd-skill-node--passive .kd-rank-bead.is-on {
  background: radial-gradient(circle at 35% 30%, #dbeafe, #60a5fa 60%, #1d4ed8);
  border-color: #93c5fd;
  box-shadow: 0 0 4px rgba(96, 165, 250, 0.6);
}

.kd-sp-cards-stack {
  display: grid;
  grid-template-columns: minmax(170px, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.kd-sk-sp-energy {
  min-width: 0;
}

.kd-sp-energy-bar {
  position: relative;
  height: 22px;
}

.kd-sp-mastery-card {
  padding: 5px 6px;
  border-radius: var(--kd-radius-sm);
  background: linear-gradient(180deg, #1a1621, #110e16);
  border: 1px solid rgba(148, 111, 71, 0.45);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  touch-action: none;
  cursor: grab;
}

.kd-sp-mastery-card.is-active {
  border-color: var(--kd-ember-gold);
  background: linear-gradient(180deg, rgba(124, 45, 18, 0.42), rgba(18, 15, 24, 0.95));
  box-shadow: 0 0 10px rgba(251, 146, 60, 0.3);
}

.kd-sp-mastery-card.is-locked {
  opacity: 0.74;
  cursor: default;
}

.kd-sp-mastery-card.is-locked .kd-sp-card-icon {
  filter: grayscale(0.8) brightness(0.65);
}

.kd-sp-card-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 6px;
  border: 1px solid var(--kd-bronze-muted);
  background: #09080c;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.kd-sp-card-titles {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kd-sp-card-name {
  font-size: var(--kd-fs-xs);
  font-weight: 800;
  color: var(--kd-text-gold);
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.kd-sp-card-req {
  font-size: var(--kd-fs-xs);
  color: var(--kd-text-sand);
  line-height: 1.2;
  white-space: nowrap;
}

.kd-sp-toggle-btn.kd-btn {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 3px 10px;
  font-size: var(--kd-fs-xs);
}

/* Sağ sütun: 320x196 koyu arena */
.kd-preview-stage-card {
  padding: 8px;
  border-radius: var(--kd-radius-sm);
  background: rgba(13, 11, 17, 0.94);
  border: 1px solid var(--kd-bronze-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.kd-preview-stage-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--kd-fs-xs);
  font-weight: 800;
  color: var(--kd-text-gold);
}

.kd-preview-stage-res {
  color: #4ade80;
}

#skill-preview-canvas {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  aspect-ratio: 320 / 196;
  border-radius: 6px;
  border: 1.5px solid rgba(207, 160, 96, 0.52);
  background: #09080f;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.9);
}

.kd-skills-preview-body {
  padding: 10px;
  border-radius: var(--kd-radius-sm);
  background: rgba(13, 11, 17, 0.9);
  border: 1px solid rgba(148, 111, 71, 0.42);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.kd-sk-detail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.kd-sk-detail-icon {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 8px;
  border: 1.5px solid var(--kd-ember-gold);
  background: #08070b;
  box-shadow: 0 0 10px rgba(251, 146, 60, 0.28);
  pointer-events: none;
}

.kd-sk-detail-titles {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.kd-sk-detail-eyebrow {
  font-size: var(--kd-fs-xs);
  font-weight: 700;
  color: var(--kd-text-sand);
  white-space: nowrap;
}

.kd-preview-skill-title {
  font-family: var(--kd-font-display, Georgia, serif);
  font-size: var(--kd-fs-lg);
  font-weight: 800;
  color: var(--kd-text-gold);
  line-height: 1.15;
}

.kd-sk-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.kd-sk-chip {
  padding: 1px 7px;
  border-radius: 999px;
  background: #16131d;
  border: 1px solid var(--kd-bronze-dim);
  font-size: var(--kd-fs-xs);
  font-weight: 700;
  color: var(--kd-text-ivory);
  white-space: nowrap;
}

.kd-sk-chip[data-element="fire"] { border-color: #f97316; color: #fed7aa; }
.kd-sk-chip[data-element="ice"] { border-color: #38bdf8; color: #e0f2fe; }
.kd-sk-chip[data-element="lightning"] { border-color: #facc15; color: #fef9c3; }
.kd-sk-chip[data-element="wind"] { border-color: #34d399; color: #d1fae5; }
.kd-sk-chip[data-element="shadow"] { border-color: #a855f7; color: #f3e8ff; }
.kd-sk-chip[data-element="holy"] { border-color: #fde047; color: #fefce8; }

.kd-preview-controls-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.kd-sk-seg {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 2px;
  border-radius: var(--kd-radius-sm);
  background: #0b090f;
  border: 1px solid var(--kd-bronze-dim);
}

.kd-sk-seg-btn {
  min-height: 30px;
  padding: 3px 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--kd-text-sand);
  font-family: var(--kd-font-ui);
  font-size: var(--kd-fs-xs);
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  justify-content: center;
}

.kd-sk-seg-btn:hover {
  color: var(--kd-text-ivory);
}

.kd-sk-seg-btn.is-active {
  background: linear-gradient(180deg, #3a2a1c, #1f1712);
  color: #fef3c7;
  box-shadow: inset 0 0 0 1px var(--kd-bronze-bright);
}

.kd-preview-toggle-btn.is-active {
  background: linear-gradient(180deg, #c2410c, #7c2d12);
  color: #fef08a;
  box-shadow: inset 0 0 0 1px #fbbf24, 0 0 10px rgba(251, 146, 60, 0.4);
}

.kd-preview-replay-btn.kd-btn {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 3px 10px;
  font-size: var(--kd-fs-xs);
}

.kd-rank-diff-box {
  padding: 8px;
  border-radius: 6px;
  background: rgba(8, 7, 12, 0.92);
  border: 1px solid rgba(207, 160, 96, 0.34);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kd-rank-diff-heading {
  font-size: var(--kd-fs-xs);
  font-weight: 800;
  color: var(--kd-text-gold);
}

.kd-sk-metrics {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 6px;
}

.kd-sk-metric {
  padding: 5px;
  border-radius: 5px;
  background: #13101a;
  border: 1px solid rgba(148, 111, 71, 0.4);
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.kd-sk-metric.is-current {
  border-color: var(--kd-ember-gold);
}

.kd-sk-metric-label {
  font-size: var(--kd-fs-xs);
  font-weight: 700;
  color: var(--kd-text-sand);
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.kd-sk-metric-value {
  font-family: var(--kd-font-display, Georgia, serif);
  font-size: var(--kd-fs-lg);
  font-weight: 900;
  color: #fef3c7;
  white-space: nowrap;
}

.kd-sk-metric.is-dmg .kd-sk-metric-value { color: #fdba74; }
.kd-sk-metric.is-cd .kd-sk-metric-value { color: #e0f2fe; }
.kd-sk-metric.is-mp .kd-sk-metric-value { color: #93c5fd; }

.kd-sk-metric-delta {
  font-size: var(--kd-fs-xs);
  font-weight: 700;
  color: var(--kd-delta-up, #4ade80);
  white-space: nowrap;
}

.kd-awakening-callout {
  padding: 5px 7px;
  border-radius: 5px;
  background: rgba(124, 45, 18, 0.24);
  border: 1px solid rgba(251, 191, 36, 0.35);
  font-size: var(--kd-fs-xs);
  color: var(--kd-text-sand);
  line-height: 1.32;
  align-items: flex-start;
}

.kd-awakening-callout .kd-rpg-icon-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.kd-awakening-callout.is-active {
  background: rgba(154, 52, 18, 0.45);
  border-color: var(--kd-ember-gold);
  color: #fef08a;
  font-weight: 700;
}

.kd-quick-bind-box {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.kd-quick-bind-label {
  flex: 0 0 auto;
  font-size: var(--kd-fs-xs);
  color: var(--kd-text-sand);
  font-weight: 700;
  white-space: nowrap;
}

.kd-quick-bind-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 3px;
  min-width: 0;
}

.kd-quick-key-btn {
  min-width: 0;
  height: 26px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid var(--kd-bronze-dim);
  background: var(--kd-bg-socket);
  color: var(--kd-text-ivory);
  font-size: var(--kd-fs-xs);
  font-weight: 800;
  cursor: pointer;
}

.kd-quick-key-btn:hover:not(:disabled) {
  border-color: var(--kd-ember-gold);
}

.kd-quick-key-btn.is-bound {
  border-color: #4ade80;
  background: rgba(22, 101, 52, 0.38);
  color: #bbf7d0;
}

.kd-quick-key-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.kd-preview-upgrade-btn {
  width: 100%;
  white-space: nowrap;
}

.kd-preview-upgrade-btn.is-lock-condition:disabled {
  background: linear-gradient(180deg, #2a1f24, #1a1418);
  border-color: rgba(248, 113, 113, 0.5);
  color: #fecaca;
  box-shadow: none;
  opacity: 1;
}

/* Kısa ekranlar (ör. 1280x800): pencere iç kaydırma olmadan sığsın diye dikey boşluklar sıkılaşır */
@media (max-height: 860px) {
  .modal-window--skills {
    padding: 10px 16px 12px !important;
    gap: 8px !important;
  }
  .kd-skills-columns {
    row-gap: 6px;
  }
  .kd-sk-topstrip {
    padding: 6px 8px;
    gap: 6px 10px;
  }
  .kd-sk-tree {
    gap: 6px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .kd-sk-band {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .kd-skill-node {
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .kd-skill-node-info {
    gap: 2px;
  }
  .kd-skills-col--right,
  .kd-skills-preview-body {
    gap: 6px;
  }
  .kd-skills-preview-body,
  .kd-preview-stage-card {
    padding: 7px 8px;
  }
}

@media (max-width: 1180px) {
  .kd-skills-columns {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "top"
      "tree"
      "pas"
      "sp"
      "right";
    grid-template-rows: none;
  }
  .kd-skills-col--right {
    display: grid;
    grid-template-columns: 336px minmax(0, 1fr);
    align-items: start;
  }
}

@media (max-width: 820px) {
  .kd-sk-topstrip {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "tabs" "sp" "jlv" "respec";
  }
  .kd-skill-tier-grid,
  .kd-sp-cards-stack {
    grid-template-columns: minmax(0, 1fr);
  }
  .kd-skills-col--right {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================================
   12. [I] GARDIROP / KOSTÜM (SKIN) SEKMESİ & 2X CANLI PAPERDOLL 2.0 VİTRİNİ (CE2-72)
   ============================================================================ */
.kd-inv-mode-tabs {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: var(--kd-radius-md);
  background: rgba(13, 11, 17, 0.92);
  border: 1px solid rgba(148, 111, 71, 0.45);
}

.kd-inv-mode-btn {
  flex: 1;
  min-height: 38px;
  padding: 7px 14px;
  border-radius: var(--kd-radius-sm);
  border: 1px solid var(--kd-bronze-dim);
  background: var(--kd-bg-socket);
  color: var(--kd-text-sand);
  font-family: var(--kd-font-display);
  font-size: var(--kd-fs-sm);
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.kd-inv-mode-btn:hover {
  border-color: var(--kd-bronze-bright);
  color: var(--kd-text-ivory);
}

.kd-inv-mode-btn.is-active {
  background: linear-gradient(180deg, rgba(154, 52, 18, 0.55), rgba(36, 24, 20, 0.94));
  border-color: var(--kd-ember-gold);
  color: var(--kd-text-gold);
  box-shadow: inset 0 0 12px rgba(234, 88, 12, 0.28);
}

.kd-wardrobe-layout {
  display: grid;
  grid-template-columns: 284px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.kd-wardrobe-stage-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kd-wardrobe-stage-card {
  padding: 12px;
  border-radius: var(--kd-radius-md);
  background: linear-gradient(180deg, rgba(24, 20, 32, 0.96), rgba(13, 11, 18, 0.96));
  border: 1.5px solid var(--kd-bronze-base);
  box-shadow: var(--kd-shadow-socket);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.kd-wardrobe-stage-hdr {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.kd-wardrobe-stage-badge {
  font-size: var(--kd-fs-xs);
  font-weight: 800;
  color: var(--kd-text-gold);
}

.kd-wardrobe-dir-pill {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.14);
  border: 1px solid rgba(56, 189, 248, 0.45);
  color: #bae6fd;
  font-size: var(--kd-fs-xs);
  font-weight: 700;
}

.kd-wardrobe-canvas {
  display: block;
  width: 224px;
  height: 256px;
  border-radius: var(--kd-radius-md);
  border: 1.5px solid rgba(207, 160, 96, 0.56);
  background: radial-gradient(circle at 50% 62%, #1d1829 0%, #09080e 82%);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.92);
}

.kd-wardrobe-dir-row {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.kd-wardrobe-dir-btn {
  padding: 6px 4px;
  border-radius: var(--kd-radius-sm);
  border: 1px solid var(--kd-bronze-dim);
  background: var(--kd-bg-socket);
  color: var(--kd-text-sand);
  font-size: var(--kd-fs-xs);
  font-weight: 700;
  cursor: pointer;
}

.kd-wardrobe-dir-btn:hover {
  border-color: var(--kd-bronze-bright);
  color: var(--kd-text-ivory);
}

.kd-wardrobe-dir-btn.is-active {
  border-color: var(--kd-ember-gold);
  background: rgba(154, 52, 18, 0.44);
  color: #fef08a;
}

.kd-wardrobe-pose-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.kd-wardrobe-ctrl-btn {
  width: 100%;
  font-size: var(--kd-fs-xs);
}

.kd-wardrobe-ctrl-btn.is-active {
  border-color: var(--kd-ember-gold);
  color: #fef08a;
}

.kd-wardrobe-toggles {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 6px;
  border-top: 1px solid rgba(148, 111, 71, 0.28);
}

.kd-wardrobe-toggle-btn {
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: var(--kd-radius-sm);
  border: 1px solid var(--kd-bronze-muted);
  background: rgba(13, 11, 17, 0.94);
  color: var(--kd-text-sand);
  font-size: var(--kd-fs-xs);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.kd-wardrobe-toggle-btn:hover {
  border-color: var(--kd-bronze-bright);
  color: var(--kd-text-ivory);
}

.kd-wardrobe-toggle-btn.is-on {
  border-color: #34d399;
  background: rgba(6, 78, 59, 0.36);
  color: #d1fae5;
}

.kd-wardrobe-clear-btn {
  width: 100%;
  font-size: var(--kd-fs-xs);
}

.kd-wardrobe-zero-stat-banner {
  padding: 12px;
  border-radius: var(--kd-radius-md);
  background: linear-gradient(180deg, rgba(6, 78, 59, 0.26), rgba(13, 11, 18, 0.94));
  border: 1px solid rgba(52, 211, 153, 0.45);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kd-wardrobe-zero-stat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.kd-cosmetic-pure-badge {
  font-size: var(--kd-fs-xs);
  font-weight: 800;
  color: #6ee7b7;
}

.kd-zero-delta-pill {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(52, 211, 153, 0.55);
  color: #ecfdf5;
  font-size: var(--kd-fs-xs);
  font-weight: 800;
}

.kd-wardrobe-zero-stat-numbers {
  font-size: var(--kd-fs-xs);
  font-weight: 700;
  color: var(--kd-text-ivory);
  line-height: 1.4;
}

.kd-wardrobe-zero-stat-note {
  margin: 0;
  font-size: var(--kd-fs-xs);
  color: var(--kd-text-sand);
  line-height: 1.38;
}

.kd-wardrobe-catalog-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.kd-wardrobe-active-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--kd-radius-sm);
  background: rgba(13, 11, 17, 0.9);
  border: 1px solid rgba(207, 160, 96, 0.35);
}

.kd-wardrobe-summary-chip {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(36, 32, 46, 0.85);
  border: 1px solid var(--kd-bronze-dim);
  color: var(--kd-text-sand);
  font-size: var(--kd-fs-xs);
  font-weight: 700;
}

.kd-wardrobe-summary-chip.is-equipped {
  background: rgba(154, 52, 18, 0.38);
  border-color: var(--kd-ember-gold);
  color: #fef08a;
}

.kd-wardrobe-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kd-wardrobe-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-height: 492px;
  overflow-y: auto;
  padding-right: 4px;
}

.kd-skin-card {
  padding: 12px;
  border-radius: var(--kd-radius-md);
  background: var(--kd-bg-basalt);
  border: 1.5px solid var(--kd-bronze-dim);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  transition: border-color 120ms ease, transform 100ms ease, box-shadow 120ms ease;
}

.kd-skin-card:hover {
  border-color: var(--kd-bronze-bright);
  transform: translateY(-1px);
}

.kd-skin-card.is-equipped {
  border-color: var(--kd-ember-gold);
  background: linear-gradient(180deg, rgba(48, 28, 18, 0.92), rgba(22, 18, 28, 0.96));
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.2);
}

.kd-skin-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.kd-skin-thumb-wrap {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: var(--kd-radius-sm);
  background: radial-gradient(circle at 50% 55%, #261f33 0%, #0d0b12 80%);
  border: 1.5px solid var(--kd-bronze-base);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.kd-skin-thumb {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.kd-skin-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kd-skin-badge-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.kd-skin-status-pill {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(207, 160, 96, 0.14);
  border: 1px solid var(--kd-bronze-muted);
  color: var(--kd-text-sand);
  font-size: var(--kd-fs-xs);
  font-weight: 700;
}

.kd-skin-status-pill.is-active {
  background: rgba(16, 185, 129, 0.24);
  border-color: #34d399;
  color: #d1fae5;
}

.kd-skin-zero-tag {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(56, 189, 248, 0.14);
  border: 1px solid rgba(56, 189, 248, 0.38);
  color: #bae6fd;
  font-size: var(--kd-fs-xs);
  font-weight: 800;
}

.kd-skin-title {
  margin: 0;
  font-family: var(--kd-font-display);
  font-size: var(--kd-fs-md);
  font-weight: 800;
  color: var(--kd-text-ivory);
  line-height: 1.25;
}

.kd-skin-sub {
  font-size: var(--kd-fs-xs);
  color: var(--kd-text-ash);
  line-height: 1.32;
}

.kd-skin-actions {
  display: flex;
  gap: 8px;
}

.kd-skin-btn {
  flex: 1;
  min-height: 34px;
  font-size: var(--kd-fs-xs);
}

.kd-skin-btn.is-unequip {
  border-color: var(--kd-ember-gold);
  color: #fef08a;
}

@media (max-width: 1020px) {
  .kd-wardrobe-layout {
    grid-template-columns: 1fr;
  }
  .kd-wardrobe-grid {
    max-height: none;
  }
}

@media (max-width: 680px) {
  .kd-wardrobe-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   CE2-94: "Kor & Obsidyen" Özel Çizim SVG RPG İkon Sistemi (.kd-rpg-icon)
   ========================================================================== */

.kd-rpg-icon {
  display: inline-block;
  vertical-align: -0.18em;
  flex: 0 0 auto;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(6, 4, 10, 0.85));
}

.kd-rpg-icon--amber {
  filter: drop-shadow(0 1px 2px rgba(6, 4, 10, 0.88)) drop-shadow(0 0 4px rgba(200, 138, 50, 0.28));
}

.kd-rpg-icon--gold {
  filter: drop-shadow(0 1px 2px rgba(6, 4, 10, 0.88)) drop-shadow(0 0 5px rgba(250, 204, 21, 0.36));
}

.kd-rpg-icon--ruby,
.kd-rpg-icon--crimson {
  filter: drop-shadow(0 1px 2px rgba(6, 4, 10, 0.88)) drop-shadow(0 0 5px rgba(244, 63, 94, 0.34));
}

.kd-rpg-icon--arcane {
  filter: drop-shadow(0 1px 2px rgba(6, 4, 10, 0.88)) drop-shadow(0 0 5px rgba(168, 85, 247, 0.35));
}

.kd-rpg-icon--emerald {
  filter: drop-shadow(0 1px 2px rgba(6, 4, 10, 0.88)) drop-shadow(0 0 4px rgba(16, 185, 129, 0.32));
}

.kd-rpg-icon--frost {
  filter: drop-shadow(0 1px 2px rgba(6, 4, 10, 0.88)) drop-shadow(0 0 4px rgba(56, 189, 248, 0.32));
}

.kd-with-rpg-icon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

div.kd-with-rpg-icon,
h2.kd-with-rpg-icon,
h3.kd-with-rpg-icon {
  display: flex;
}

.kd-rpg-icon-text {
  display: inline;
  line-height: inherit;
}

.tt-icon-glyph .kd-rpg-icon,
.kd-slot-sil .kd-rpg-icon,
.kd-reward-emoji .kd-rpg-icon {
  display: block;
}