/* Kadim Diyar arayüz takımı: bütün pencereler tek dilde — Ayarlar penceresinin (settings.css) bronz deri görünümü.
   En son yüklenir; var olan işaretlemeyi yeniden boyar. Ölçek notu: #sidePanel #game içinde zoom .6 (1280x720'de 1 px ≈ 1.2 ekran px),
   #dialog #game içinde (1280x720'de 1 px = 2 ekran px, telefonda ≈ 1.1), .arenaBox/.arenaEnd/.stallBox body'de gerçek px. */
:root {
  --kd-gold: #e6c27a; --kd-gold-hi: #f0d48e; --kd-bronze: #c9974a; --kd-bronze-d: #6b5230; --kd-wood: #1a120a;
  --kd-ink: #f2e2c0; --kd-dim: #b9a47e; --kd-mute: #8f7d5e; --kd-ok: #8fd86a; --kd-bad: #ff8a74;
  --kd-line: rgba(201, 151, 74, .28); --kd-line-soft: rgba(201, 151, 74, .14);
  --kd-head: "Cinzel", Georgia, "Times New Roman", serif; --kd-body: system-ui, "Segoe UI", sans-serif;
  --kd-win-bg: radial-gradient(120% 50% at 50% 0, rgba(120, 84, 36, .32), transparent 70%), linear-gradient(180deg, rgba(34, 25, 16, .97), rgba(14, 10, 7, .98)), url(img/art/ui/leather.webp);
  --kd-win-shadow: 0 0 0 1px #000, 0 0 0 3px rgba(201, 151, 74, .2), 0 18px 50px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 230, 170, .15);
  --kd-head-bg: linear-gradient(180deg, rgba(58, 42, 24, .98), rgba(30, 22, 14, .98));
  --kd-row: linear-gradient(180deg, rgba(255, 230, 170, .05), rgba(0, 0, 0, .14));
  --kd-btn: linear-gradient(#3e2c18, #20160c); --kd-btn-h: linear-gradient(#4a3520, #261a0e);
  --kd-btn-pri: linear-gradient(#f0d48e, #c9974a); --kd-btn-bad: linear-gradient(#6a2219, #2e0e0a);
}

/* ---------- pencere kabuğu ---------- */
#sidePanel, #dialog .card, .arenaBox, .arenaEnd > div, .stallBox {
  background: var(--kd-win-bg) !important; background-size: auto, auto, 384px !important;
  border: 1px solid var(--kd-bronze) !important; border-image: none !important; border-radius: 12px !important;
  box-shadow: var(--kd-win-shadow) !important; color: var(--kd-ink); scrollbar-width: thin; scrollbar-color: var(--kd-bronze) transparent;
}
.arenaBox::before, .arenaEnd > div::before, #dialog .card::before { display: none !important; }
#sidePanel :is(*, *::before) { scrollbar-width: thin; scrollbar-color: var(--kd-bronze) transparent; }

/* ---------- yan panel: yapışkan başlık bandı (simge + başlık + para + kapat) ---------- */
#sidePanel { padding: 0 14px 14px !important; gap: 10px; }
#sidePanel > header { position: sticky; top: 0; z-index: 4; margin: 0 -14px; padding: 9px 10px 9px 14px; min-height: 50px; box-sizing: border-box; gap: 8px;
  border-bottom: 1px solid var(--kd-line); border-radius: 11px 11px 0 0; background: var(--kd-head-bg); box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .8); }
#sidePanel > header::after { display: none !important; }
#sidePanel > header > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; min-width: 2.5em; font: 700 15px/1.2 var(--kd-head) !important; letter-spacing: .03em; color: var(--kd-gold) !important; text-shadow: 0 1px 0 #000, 0 0 10px rgba(230, 180, 90, .3); }
#sidePanel > header > .gi.big { width: 26px; height: 26px; }
#sidePanel > header .cur { gap: 4px; flex-wrap: nowrap; }
#sidePanel > header .cur > i { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 3px; border-radius: 999px; border: 1px solid var(--kd-line); background: rgba(0, 0, 0, .35);
  font: 600 11px/1.3 var(--kd-body); font-style: normal; color: var(--kd-ink); white-space: nowrap; }
/* Yükseltme taşı yalnız çanta, karakter ve demircide gerekir; dar NPC pencerelerinde başlığa yer açar */
#sidePanel:not([data-k=bag], [data-k=char], [data-k=smith]) > header .cur > i:nth-child(3) { display: none; }
/* NPC portreli başlıkta (art.css header::before) ikinci simge gereksiz: başlığa yer kalır */
#sidePanel:is([data-npc=tuccar], [data-npc=simyaci], [data-npc=gizemli], [data-k=smith], [data-k=petshop], [data-k=muhur], [data-k=camp]) > header > .gi.big { display: none; }
#sidePanel > header .cur .gi { width: 15px; height: 15px; }

/* kapat düğmesi: bütün pencerelerde aynı bronz yuvarlak */
#sidePanel > header .x, .arenaBox .ax, .stallBox .sx {
  flex: none; width: 30px !important; height: 30px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 0 2px !important; display: grid !important; place-items: center;
  border-radius: 50% !important; border: 1px solid var(--kd-bronze) !important; border-image: none !important;
  background: linear-gradient(#3a2a18, #1a120a) !important; box-shadow: inset 0 1px 0 rgba(255, 230, 170, .15), 0 1px 3px rgba(0, 0, 0, .6) !important;
  color: var(--kd-ink) !important; font: 400 17px/1 var(--kd-body) !important; cursor: pointer; transform: none; }
#sidePanel > header .x:hover, .arenaBox .ax:hover, .stallBox .sx:hover { color: #fff !important; border-color: var(--kd-gold-hi) !important; }

/* ---------- sekmeler ---------- */
#sidePanel .tabs { gap: 2px; padding: 3px; border-radius: 10px; border: 1px solid var(--kd-line-soft); background: rgba(0, 0, 0, .35) !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6) !important; }
#sidePanel .tabs button { flex: 1 1 auto; min-width: 0; min-height: 34px; padding: 5px 7px !important; border: 1px solid transparent !important; border-radius: 8px !important;
  background: none !important; color: var(--kd-dim) !important; font: 600 12.5px/1.15 var(--kd-body) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: none !important; }
#sidePanel .tabs button:hover:not(.on) { color: var(--kd-ink) !important; background: rgba(201, 151, 74, .08) !important; }
#sidePanel .tabs button.on { color: #fff3d6 !important; border-color: var(--kd-bronze) !important; background: linear-gradient(180deg, rgba(201, 151, 74, .34), rgba(201, 151, 74, .08)) !important; box-shadow: inset 0 -2px 0 var(--kd-gold) !important; text-shadow: 0 1px 2px #000; }

#sidePanel .invBag .tabs button { padding: 4px 1px !important; font-size: 10.5px !important; letter-spacing: 0; text-overflow: clip; }

/* bölüm başlığı (Ayarlar .swHead gibi) */
#sidePanel h4 { margin: 6px 0 0; padding-bottom: 4px; border-bottom: 1px solid var(--kd-line); font: 600 11.5px/1.2 var(--kd-body); letter-spacing: .14em; text-transform: uppercase; color: var(--kd-bronze); }
#sidePanel .pts { background: linear-gradient(var(--kd-gold-hi), var(--kd-bronze)); color: #2a1a08; }
#sidePanel .tip { color: var(--kd-dim); font-size: 12px; line-height: 1.4; }

/* ---------- düğmeler: ikincil, birincil (.pri/.primary), tehlike (.danger/.no), kapalı ---------- */
#sidePanel :is(.row, .bagbar, .wares, .skills, .attrs, .beasts, .crafts, .cnav, .bulkBar, .bulkAsk, .cq, .cup, .tside, .rfoot) button:not(.cell, .x, .tcard, .node, .store, .gem-pack, .jTrack, .chip, .cchip),
#sidePanel .cturn, #dialog .card footer button, .arenaBox button:not(.ax), .arenaEnd button, .stallBox button:not(.sx, .scell, .chip) {
  min-height: 32px; padding: 6px 14px !important; border: 1px solid var(--kd-bronze) !important; border-image: none !important; border-radius: 8px !important;
  background: var(--kd-btn) !important; color: var(--kd-ink) !important; font: 600 13px/1.2 var(--kd-body) !important; letter-spacing: .01em; text-shadow: 0 1px 1px #000 !important;
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, .15), 0 1px 2px rgba(0, 0, 0, .5) !important; filter: none; cursor: pointer; transition: border-color .12s, background .12s, transform .08s; }
#sidePanel :is(.row, .bagbar, .wares, .skills, .attrs, .beasts, .crafts, .cnav, .bulkBar, .bulkAsk, .cq, .cup, .tside, .rfoot) button:not(.cell, .x, .tcard, .node, .store, .gem-pack, .jTrack, .chip, .cchip):hover:not(:disabled),
#sidePanel .cturn:hover:not(:disabled), #dialog .card footer button:hover:not(:disabled), .arenaBox button:not(.ax):hover:not(:disabled), .arenaEnd button:hover, .stallBox button:not(.sx, .scell, .chip):hover:not(:disabled) {
  border-color: var(--kd-gold-hi) !important; background: var(--kd-btn-h) !important; color: #fff !important; }
#sidePanel button:is(.pri, .primary), #dialog .card footer button.primary, .arenaBox .am button, .arenaEnd button, .stallBox button.pri {
  color: #2a1a08 !important; border-color: var(--kd-gold-hi) !important; background: var(--kd-btn-pri) !important; text-shadow: 0 1px 0 rgba(255, 240, 200, .5) !important; font-weight: 700 !important; }
#sidePanel button:is(.pri, .primary):hover:not(:disabled), #dialog .card footer button.primary:hover:not(:disabled), .arenaBox .am button:hover:not(:disabled), .arenaEnd button:hover, .stallBox button.pri:hover:not(:disabled) {
  color: #1a1004 !important; background: linear-gradient(#fbe3a6, #d7a556) !important; }
#sidePanel button:is(.danger, .no), #dialog .card footer button:is(.danger, .no), .arenaBox .aq button, .stallBox button.danger {
  color: #ffe2da !important; border-color: #b0503f !important; background: var(--kd-btn-bad) !important; }
#sidePanel button:is(.danger, .no):hover:not(:disabled), #dialog .card footer button:is(.danger, .no):hover:not(:disabled), .arenaBox .aq button:hover, .stallBox button.danger:hover:not(:disabled) {
  border-color: #ff8a74 !important; background: linear-gradient(#80291f, #3a120c) !important; }
:is(#sidePanel, #dialog, .arenaBox, .arenaEnd, .stallBox) button:disabled { opacity: .45; cursor: default; filter: grayscale(.4); }
:is(#sidePanel, #dialog, .arenaBox, .arenaEnd, .stallBox) button:active:not(:disabled) { transform: translateY(1px); }
#dialog .card footer button.primary:not(:has(> img))::before { display: none !important; }
/* klavye odağı */
:is(#sidePanel, #itemSide, #dialog, .arenaBox, .arenaEnd, .stallBox, #deathBar) :is(button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--kd-gold-hi) !important; outline-offset: 2px; }

/* ---------- yazı alanları ---------- */
:is(#sidePanel, .stallBox, .arenaBox) :is(input, select, textarea) { min-height: 32px; box-sizing: border-box; padding: 6px 10px; border: 1px solid var(--kd-bronze-d) !important; border-radius: 8px !important;
  background: var(--kd-wood) !important; color: var(--kd-ink) !important; font: 500 13px/1.2 var(--kd-body); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7) !important; }
:is(#sidePanel, .stallBox, .arenaBox) :is(input, select, textarea):focus { outline: none; border-color: var(--kd-gold) !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7), 0 0 0 2px rgba(230, 194, 122, .22) !important; }
:is(#sidePanel, .stallBox) input::placeholder { color: var(--kd-mute); }

/* ---------- liste satırları ---------- */
#sidePanel :is(.wares, .skills, .attrs, .beasts, .crafts) > li, #sidePanel .recs li, #sidePanel ol.rank li {
  border: 1px solid var(--kd-line-soft) !important; border-radius: 8px !important; background: var(--kd-row) !important; box-shadow: none; transition: border-color .12s; }
#sidePanel :is(.wares, .skills, .beasts, .crafts) > li:hover, #sidePanel ol.rank li:hover { border-color: var(--kd-line) !important; }
#sidePanel :is(.wares, .skills, .beasts) > li b { color: var(--kd-ink); }
#sidePanel :is(.wares, .skills, .attrs, .beasts) small { color: var(--kd-dim) !important; }
#sidePanel ol.rank li.me { border-color: var(--kd-gold) !important; background: linear-gradient(90deg, rgba(201, 151, 74, .26), rgba(201, 151, 74, .06)) !important; box-shadow: inset 3px 0 0 var(--kd-gold) !important; }
#sidePanel .recs li { padding: 8px 10px; }
#sidePanel .card:not(.hint) { border-radius: 10px; }
#sidePanel .card.hint { border-radius: 10px; border: 1px dashed var(--kd-line) !important; color: var(--kd-dim); text-align: center; padding: 14px 10px; }
#sidePanel .tcard { border-radius: 10px !important; border-color: var(--kd-line) !important; }
#sidePanel .tcard:hover:not(:disabled) { border-color: var(--kd-gold) !important; box-shadow: 0 0 0 1px rgba(230, 194, 122, .3) !important; }
#sidePanel .rfoot { border-top: 1px solid var(--kd-line); }

/* ---------- genel iletişim kutusu (dialog): başlık bandı, okunur metin, altta düğme şeridi ---------- */
#game #dialog .card:not(.questDetail) { width: min(300px, 92%) !important; max-width: none !important; max-height: calc(100% - 16px); overflow-y: auto; padding: 0 !important; display: flex; flex-direction: column; gap: 0; text-align: left; }
#game #dialog .card:not(.questDetail) > img { align-self: center; margin: 10px 0 0; max-height: 64px; width: auto; }
#game #dialog .card:not(.questDetail) > h3 { margin: 0; padding: 9px 14px 8px; border-bottom: 1px solid var(--kd-line); background: linear-gradient(180deg, rgba(201, 151, 74, .16), transparent);
  font: 700 12px/1.25 var(--kd-head) !important; letter-spacing: .1em; text-transform: uppercase; text-align: center; color: var(--kd-gold) !important; text-shadow: 0 1px 0 #000, 0 0 8px rgba(230, 180, 90, .3); }
#game #dialog .card h3::after { display: none !important; }
#game #dialog .card:not(.questDetail) > :is(p, .stars, .loot) { margin: 0; padding: 10px 14px 4px; }
#game #dialog .card:not(.questDetail) > p { font: 9.5px/1.5 var(--kd-body) !important; color: var(--kd-ink) !important; white-space: pre-line; min-height: 0; }
#game #dialog .card:not(.questDetail) > footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin: 8px 0 0; padding: 7px 10px; border-top: 1px solid var(--kd-line); background: rgba(0, 0, 0, .3); border-radius: 0 0 11px 11px; }
#game #dialog .card footer button { flex: 1 1 auto; min-height: 22px !important; padding: 4px 10px !important; border-radius: 5px !important; font-size: 8.5px !important; white-space: nowrap; }
#game #dialog .card footer button img { width: 1.2em; height: 1.2em; }

/* ---------- arena: sıra penceresi ve bitiş ekranı ---------- */
.arenaBox { width: min(480px, calc(100vw - 16px)) !important; max-height: calc(100dvh - 16px); overflow-y: auto; box-sizing: border-box; padding: 0 0 12px !important; font: 13px/1.4 var(--kd-body) !important; }
.arenaBox h3 { margin: 0 0 10px !important; padding: 11px 48px 10px 16px; border-bottom: 1px solid var(--kd-line); background: linear-gradient(180deg, rgba(201, 151, 74, .16), transparent);
  font: 700 17px/1.2 var(--kd-head) !important; letter-spacing: .1em; text-transform: uppercase; color: var(--kd-gold) !important; }
.arenaBox .ax { position: absolute; right: 9px !important; top: 9px !important; }
.arenaBox > p { margin: 0 16px 8px !important; color: var(--kd-dim) !important; }
.arenaBox .am { margin: 0 12px 6px; padding: 8px 10px !important; border: 1px solid var(--kd-line-soft) !important; border-radius: 8px; background: var(--kd-row); }
.arenaBox .am > b { font: 700 16px var(--kd-head) !important; color: var(--kd-gold) !important; }
.arenaBox small { color: var(--kd-dim) !important; } .arenaBox small.top { color: var(--kd-gold-hi) !important; opacity: .85; }
.arenaBox .aq { margin: 8px 12px 0 !important; padding: 8px 10px !important; border: 1px solid var(--kd-bronze) !important; border-radius: 8px !important; background: linear-gradient(90deg, rgba(201, 151, 74, .22), rgba(201, 151, 74, .05)) !important; }
.arenaEnd { background: rgba(4, 6, 10, .62) !important; backdrop-filter: blur(2px); }
.arenaEnd > div { min-width: min(360px, calc(100vw - 24px)) !important; box-sizing: border-box; padding: 18px 22px 16px !important; }
.arenaEnd h2 { font: 700 30px/1.15 var(--kd-head) !important; letter-spacing: .08em; text-transform: uppercase; }
.arenaEnd p { color: var(--kd-ink); } .arenaEnd .rw { color: var(--kd-gold-hi) !important; }
.arenaEnd button { min-height: 38px; padding: 8px 22px !important; }

/* ---------- pazar tezgâhı pencereleri ---------- */
.stallBox { max-height: calc(100dvh - 16px) !important; overflow-y: auto !important; box-sizing: border-box; padding: 0 14px 12px !important; }
.stallBox > h3 { margin: 0 -14px 4px !important; padding: 11px 50px 10px 14px; border-bottom: 1px solid var(--kd-line); background: linear-gradient(180deg, rgba(201, 151, 74, .16), transparent);
  font: 700 17px/1.2 var(--kd-head) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--kd-gold) !important; }
.stallBox .sx { position: absolute !important; right: 9px !important; top: 9px !important; }
.stallBox > p.sub { margin-bottom: 10px !important; }

/* ---------- NPC konuşması (npctalk.css): aynı kenar ve gölge ---------- */
.tvPanel { border: 1px solid var(--kd-bronze) !important; border-radius: 12px !important; box-shadow: var(--kd-win-shadow) !important; }
.tvPanel::before { display: none !important; }

/* ---------- yeniden bağlanma şeridi (body'de, gerçek px) ---------- */
#netBanner { display: flex; align-items: center; gap: 8px; padding: 7px 16px !important; border-radius: 999px !important; border: 1px solid var(--kd-bronze);
  background: linear-gradient(180deg, rgba(44, 32, 18, .95), rgba(16, 11, 7, .95)) !important; box-shadow: 0 0 0 1px #000, 0 6px 18px rgba(0, 0, 0, .6); color: var(--kd-ink) !important; font: 600 13px/1.3 var(--kd-body) !important; letter-spacing: .02em; }
#netBanner::before { content: ""; width: 12px; height: 12px; flex: none; border-radius: 50%; border: 2px solid rgba(230, 194, 122, .25); border-top-color: var(--kd-gold); animation: kdSpin .9s linear infinite; }
#netBanner[hidden] { display: none; }
@keyframes kdSpin { to { transform: rotate(360deg); } }

/* ---------- telefon (844x390 gibi alçak ekranlar) ---------- */
@media (max-height: 440px) {
  #sidePanel { padding: 0 10px 10px !important; }
  #sidePanel > header { margin: 0 -10px; padding: 6px 8px 6px 10px; min-height: 44px; }
  #sidePanel > header > b { font-size: 14px !important; }
  .arenaBox h3, .stallBox > h3 { font-size: 15px !important; padding-top: 8px; padding-bottom: 8px; }
  .arenaBox .ax, .stallBox .sx { top: 6px !important; right: 6px !important; }
  .arenaBox .am { padding: 6px 8px !important; margin-bottom: 4px; }
  .arenaBox > p { font-size: 12px; }
  #game #dialog .card:not(.questDetail) { width: min(330px, 92%) !important; }
  #game #dialog .card:not(.questDetail) > p { font-size: 10px !important; }
  #game #dialog .card footer button { min-height: 26px !important; font-size: 9.5px !important; }
}
@media (prefers-reduced-motion: reduce) { #netBanner::before { animation: none; } }

/* ---------- Karakter: "Tüm değerler" çekmecesi (panels.js statDrawer, ek panel #itemSide) ---------- */
#sidePanel .statTab { position: absolute; right: 0; top: 64px; z-index: 5; width: 18px; height: 54px; padding: 0; border: 1px solid var(--kd-bronze); border-right: 0; border-radius: 8px 0 0 8px;
  background: var(--kd-btn); color: var(--kd-gold); font: 700 16px/52px var(--kd-head); cursor: pointer; box-shadow: -2px 0 8px rgba(0, 0, 0, .5); }
#sidePanel .statTab.on, #sidePanel .statTab:hover { background: var(--kd-btn-h); color: var(--kd-gold-hi); }
#itemSide .statSheet h3 { margin: 0 30px 2px 0; font: 700 15px var(--kd-head); color: var(--kd-gold); }
#itemSide .statSheet h4 { margin: 8px 0 3px; padding-bottom: 2px; border-bottom: 1px solid var(--kd-line); font: 700 11px var(--kd-head); letter-spacing: .5px; color: var(--kd-bronze); text-transform: uppercase; }
#itemSide .statSheet ul { margin: 0; padding: 0; list-style: none; }
#itemSide .statSheet li { padding: 2px 4px; border-radius: 4px; font: 11px/1.4 var(--kd-body); color: var(--kd-ink); }
#itemSide .statSheet li:nth-child(odd) { background: var(--kd-row); }
#itemSide .statSheet li > span, #itemSide .statSheet summary { display: flex; justify-content: space-between; gap: 6px; }
#itemSide .statSheet li:not(:has(details)) { display: flex; justify-content: space-between; gap: 6px; }
#itemSide .statSheet summary { cursor: pointer; list-style: none; } #itemSide .statSheet summary::-webkit-details-marker { display: none; }
#itemSide .statSheet b { color: var(--kd-gold-hi); font-variant-numeric: tabular-nums; }
#itemSide .statSheet small { display: block; color: var(--kd-dim); font-size: 10px; }
#itemSide .statSheet li.zero { opacity: .45; }
/* Tüm değerler dili dışa dönük: yuvarlak yüzü panelin dış kenarına bakar. */
#sidePanel .statTab { border: 1px solid var(--kd-bronze); border-left: 0; border-radius: 0 8px 8px 0; box-shadow: 2px 0 8px rgba(0, 0, 0, .5); }

/* ---------- Karakter penceresi: yedi sekme ve içerik sıkışmasın diye geniş (çanta gibi 580); ek panel #itemSide yine yanına sığar ---------- */
#sidePanel[data-k=char] { width: min(580px, calc(100vw - 72px)); }
/* sekme adı kısaltılmaz: sığmazsa sekmeler alt satıra geçer */
#sidePanel[data-k=char] > .tabs { flex-wrap: wrap; }
#sidePanel[data-k=char] > .tabs button { flex: 1 0 auto; overflow: visible; text-overflow: clip; }
/* Tüm değerler dili sekme şeridinin üstüne değil, kahraman kartının yanına; kart dile yer bırakır */
#sidePanel .statTab { top: 150px; }
#sidePanel[data-k=char] .hero.wide { padding-right: 8px; }
/* Sınıf Dalı (branch-ui.js) ve Unvan/Topluluk (topluluk.js) pencereleri: kapat düğmesi öteki pencerelerdeki bronz yuvarlak, işaret ortada */
#tpWin .x { width: 30px !important; height: 30px !important; border-radius: 50% !important; border-color: var(--kd-bronze) !important; }
:is(#dalWin .dalX, #tpWin .x) { display: grid !important; place-items: center; padding: 0 0 2px !important; font: 400 17px/1 var(--kd-body) !important; }
/* ek panelin (#itemSide) kapat işareti de yuvarlağın ortasında */
#itemSide > .x { display: grid; place-items: center; padding: 0 0 2px; font: 400 15px/1 var(--kd-body); }
/* Tüm değerler dili pencerenin dışında, sağ kenara yapışık (panels.js placeTab). */
#statTabOut { position: absolute; z-index: 31; width: 18px; height: 54px; padding: 0; border: 1px solid var(--kd-bronze); border-left: 0; border-radius: 0 8px 8px 0; background: var(--kd-btn); color: var(--kd-gold); font: 700 16px/52px var(--kd-head); cursor: pointer; box-shadow: 2px 0 8px rgba(0, 0, 0, .5); }
#statTabOut[hidden] { display: none; }
#statTabOut.on, #statTabOut:hover { background: var(--kd-btn-h); color: var(--kd-gold-hi); }