/* Ayarlar penceresi (app.js renderSettings): body'ye takılı, ölçeksiz gerçek px. Bronz/altın deri pencere; solda sekmeler, sağda satırlar. */
#setWin { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 12px; background: rgba(4, 6, 10, .62); backdrop-filter: blur(2px);
  --gold: #e6c27a; --bronze: #c9974a; --ink: #f2e2c0; --dim: #b9a47e; --line: rgba(201, 151, 74, .28);
  color: var(--ink); font: 14px/1.3 system-ui, "Segoe UI", sans-serif; }
#setWin[hidden] { display: none; }
#setWin button { font: inherit; color: inherit; cursor: pointer; }
#setWin .swCard { width: min(820px, 100%); height: min(560px, 100%); display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; border: 1px solid var(--bronze);
  background: 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);
  background-size: auto, auto, 384px; box-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); }

#setWin .swTop { flex: none; display: flex; align-items: center; justify-content: center; position: relative; padding: 10px 48px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(201, 151, 74, .16), transparent); }
#setWin .swTop h2 { margin: 0; font: 600 18px/1.2 Georgia, "Times New Roman", serif; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); text-shadow: 0 1px 0 #000, 0 0 10px rgba(230, 180, 90, .35); }
#setWin .swX { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; min-width: 0; min-height: 0; padding: 0 0 2px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--bronze); background: linear-gradient(#3a2a18, #1a120a); font-size: 20px; line-height: 1; }
#setWin .swX:hover { color: #fff; border-color: var(--gold); }

#setWin .swMain { flex: 1; min-height: 0; display: flex; }
#setWin .swTabs { flex: none; width: 168px; display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; border-right: 1px solid var(--line); background: rgba(0, 0, 0, .25); overflow-y: auto; }
#setWin .swTabs button { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--dim); text-align: left; font-weight: 600; }
#setWin .swTabs button:hover { color: var(--ink); background: rgba(201, 151, 74, .08); }
#setWin .swTabs button[aria-current="true"] { color: #fff3d6; border-color: var(--bronze); background: linear-gradient(90deg, rgba(201, 151, 74, .32), rgba(201, 151, 74, .08)); box-shadow: inset 3px 0 0 var(--gold); }
#setWin .swTabs svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#setWin .swTabs button[aria-current="true"] svg { color: var(--gold); }

#setWin .swBody { flex: 1; min-width: 0; overflow-y: auto; padding: 4px 16px 14px; scrollbar-color: var(--bronze) transparent; }
#setWin .swHead { margin: 14px 0 4px; padding-bottom: 4px; font: 600 12px/1.2 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); border-bottom: 1px solid var(--line); }
#setWin .swRow { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 6px 4px; border-bottom: 1px solid rgba(201, 151, 74, .1); }
#setWin .swRow:hover { background: rgba(255, 220, 160, .03); }
#setWin .swTxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#setWin .swTxt b { font-weight: 600; color: var(--ink); }
#setWin .swTxt small { font-size: 12px; color: var(--dim); }

/* Anahtar (aç/kapa) */
#setWin .swSwitch { flex: none; position: relative; width: 46px; height: 24px; padding: 0; border-radius: 12px; border: 1px solid #6b5230; background: #1a120a; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7); transition: background .15s; }
#setWin .swSwitch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(#bfae90, #7d6b4f); box-shadow: 0 1px 2px #000; transition: left .15s; }
#setWin .swSwitch[aria-checked="true"] { background: linear-gradient(#b5852e, #7a5418); border-color: var(--gold); }
#setWin .swSwitch[aria-checked="true"]::after { left: 24px; background: linear-gradient(#fff2c8, #e6c27a); }

/* Parçalı seçim */
#setWin .swSeg { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; max-width: 62%; border: 1px solid #6b5230; border-radius: 8px; overflow: hidden; background: #1a120a; }
#setWin .swSeg button { min-height: 30px; padding: 4px 11px; border: 0; border-left: 1px solid #4a3820; background: none; color: var(--dim); font-size: 13px; font-weight: 600; white-space: nowrap; }
#setWin .swSeg button:first-child { border-left: 0; }
#setWin .swSeg button:hover { color: var(--ink); }
#setWin .swSeg button[aria-checked="true"] { color: #2a1a08; background: linear-gradient(#f0d48e, #c9974a); }

/* Kaydırıcı */
#setWin .swSlide { flex: none; display: flex; align-items: center; gap: 10px; width: min(260px, 45%); }
#setWin .swSlide input { flex: 1; min-width: 0; height: 24px; margin: 0; background: none; -webkit-appearance: none; appearance: none; --p: 50%; }
#setWin .swSlide input::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; border: 1px solid #6b5230; background: linear-gradient(90deg, #c9974a var(--p), #1a120a var(--p)); }
#setWin .swSlide input::-moz-range-track { height: 6px; border-radius: 3px; border: 1px solid #6b5230; background: linear-gradient(90deg, #c9974a var(--p), #1a120a var(--p)); }
#setWin .swSlide input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; border: 1px solid #000; background: radial-gradient(circle at 35% 30%, #fff2c8, #e6c27a 45%, #8a5f22); box-shadow: 0 1px 3px #000; }
#setWin .swSlide input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; border: 1px solid #000; background: radial-gradient(circle at 35% 30%, #fff2c8, #e6c27a 45%, #8a5f22); }
#setWin .swSlide output { flex: none; min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 600; }

/* Düğmeler */
#setWin .swBtn { flex: none; min-height: 34px; padding: 6px 16px; border-radius: 8px; border: 1px solid var(--bronze); background: linear-gradient(#3e2c18, #20160c); font-weight: 600; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 230, 170, .15); }
#setWin .swBtn:hover { border-color: var(--gold); color: #fff; }
#setWin .swBtn.primary { color: #2a1a08; border-color: #f0d48e; background: linear-gradient(#f0d48e, #c9974a); }
#setWin .swBtn.danger { border-color: #a0443a; background: linear-gradient(#5a1e18, #2e0e0a); }

/* Tuşlar */
#setWin .swKeys { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 16px; padding-top: 6px; }
#setWin .swKey { display: flex; align-items: center; gap: 10px; min-height: 30px; font-size: 13px; color: var(--dim); }
#setWin .swKbd { flex: none; min-width: 84px; display: flex; gap: 3px; }
#setWin kbd { min-width: 22px; padding: 2px 6px; border-radius: 4px; border: 1px solid #6b5230; border-bottom-width: 2px; background: linear-gradient(#3a2a18, #1e150c); color: var(--gold); font: 600 12px/1.3 ui-monospace, Consolas, monospace; text-align: center; }

#setWin .swHero { display: flex; flex-direction: column; gap: 2px; margin: 6px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0, 0, 0, .25); }
#setWin .swHero b { font: 600 17px/1.2 Georgia, serif; color: var(--gold); }
#setWin .swHero small { color: var(--dim); }
#setWin .swNote { margin: 6px 4px; color: var(--dim); font-size: 13px; }

#setWin .swFoot { flex: none; display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); background: rgba(0, 0, 0, .3); }

/* Telefon: sekmeler üstte tek sıra, satırlar sıkı */
@media (max-width: 600px), (max-height: 440px) {
  #setWin { padding: 6px; font-size: 13px; }
  #setWin .swCard { height: 100%; }
  #setWin .swTop { padding: 6px 44px; }
  #setWin .swTop h2 { font-size: 15px; }
  #setWin .swX { width: 28px; height: 28px; }
  #setWin .swMain { flex-direction: column; }
  #setWin .swTabs { width: auto; flex-direction: row; padding: 4px 6px; gap: 2px; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; }
  #setWin .swTabs button { flex: 1 0 auto; justify-content: center; min-height: 34px; gap: 6px; padding: 4px 10px; }
  #setWin .swTabs button[aria-current="true"] { box-shadow: inset 0 -3px 0 var(--gold); background: linear-gradient(0deg, rgba(201, 151, 74, .3), rgba(201, 151, 74, .06)); }
  #setWin .swTabs svg { width: 18px; height: 18px; }
  #setWin .swBody { padding: 0 12px 10px; }
  #setWin .swRow { min-height: 42px; padding: 4px 2px; }
  #setWin .swTxt small { font-size: 11px; }
  #setWin .swFoot { padding: 6px 10px; }
  #setWin .swBtn { min-height: 30px; padding: 4px 12px; }
}
@media (max-width: 480px) { #setWin .swTabs span { display: none; } #setWin .swSeg { max-width: 70%; } #setWin .swSlide { width: 50%; } }