/* ════════════════════════════════════════════════════════════════
   WORTHAM HARİTA TEMASI  v1 (2026-09-26) — Pl3xMap 1.21.11-544 web arayüzü
   Kırmızı ağırlıklı (#D2434A), altın yalnız ikincil (#E3B55B), sıcak koyu zemin.
   Yazı: Barlow Condensed (başlık/etiket) + Barlow (metin) — yerel woff2, latin-ext (Türkçe tam).
   Pl3xMap'in kendi styles.css'ine DOKUNMAZ; üstüne biner. Harita karolarına dokunmaz.
   BAĞLANTI: web/index.html içindeki "WORTHAM" işaretli satırlar (css + js + rozet).
   GERİ ALMA: /root/pl3xmap-yedek-20260926/index.html.orijinal → web/index.html
   SÜRÜM: değişiklikte dosya adını sürümle (wortham-v2.css) ve index.html satırını güncelle.
   ⚠ config.yml settings.web-directory.read-only: true KALMALI; false olursa açılışta
     index.html/favicon.ico jar'daki varsayılanla ezilir (wortham/ klasörü ve tr_tr.json kalır).
   ════════════════════════════════════════════════════════════════ */

/* ---------- 0. Yazı tipleri (fonts/) ---------- */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ---------- 1. Jetonlar (Pl3xMap degiskenlerini ezer; acik/koyu sistem temasindan bagimsiz) ---------- */
html:root {
  color-scheme: dark;
  --w-red: #D2434A;
  --w-red-hi: #E0575E;
  --w-red-deep: #A8262E;
  --w-rose: #EE8E92;
  --w-gold: #E3B55B;
  --w-text: #ECE6E3;
  --w-soft: #BDB0AB;
  --w-muted: #8C807C;
  --w-bg: #120C0C;
  --w-bg-2: #0B0707;
  --w-surface: rgba(26, 18, 18, .94);
  --w-surface-solid: #1A1212;
  --w-line: #3A2A29;
  --w-line-soft: #2A1F1E;
  --w-btn: linear-gradient(180deg, #DB4B52 0%, #B9333B 100%);
  --w-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;

  --ui-font: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ui-button-size: 5rem;
  --ui-element-spacing: 1rem;
  --ui-border-radius: .8rem;
  --ui-border: 1px solid var(--w-line);
  --ui-box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .04);
  --ui-outline: solid var(--w-gold) .2rem;
  --ui-background: var(--w-surface);
  --ui-background-hover: #2E1F1E;
  --ui-background-active: #3B2625;
  --ui-background-selected: var(--w-red);
  --ui-background-disabled: #1E1616;
  --ui-text: var(--w-text);
  --ui-text-hover: #FFFFFF;
  --ui-text-active: #FFFFFF;
  --ui-text-selected: #FFFFFF;
  --ui-text-disabled: #6F6461;
  --ui-sidebar-width: 30rem;
}

html, body { background: var(--w-bg-2); }
.map, .leaflet-container { background: var(--w-bg-2); font-family: var(--ui-font); }

/* ---------- 2. Dugmeler (zoom, kenar cubugu, baglanti) ---------- */
.leaflet-bar a, .leaflet-touch .leaflet-bar a,
#sidebar #sidebar__buttons button,
.leaflet-control-button {
  color: var(--w-text);
  border-color: var(--w-line);
}
.leaflet-bar a:hover, .leaflet-touch .leaflet-bar a:hover,
#sidebar #sidebar__buttons button:hover,
.leaflet-control-button:hover {
  border-color: rgba(210, 67, 74, .75);
  color: #FFFFFF;
}
.leaflet-bar a, .leaflet-touch .leaflet-bar a {
  font-family: var(--w-display);
  font-weight: 600;
  font-size: 2.6rem;
  text-decoration: none;
}
.leaflet-bar a.leaflet-disabled, .leaflet-touch .leaflet-bar a.leaflet-disabled {
  color: var(--ui-text-disabled);
  border-color: var(--w-line);
}
html #sidebar #sidebar__buttons button[aria-expanded=true] {
  background: var(--w-btn);
  border-color: var(--w-red-hi);
  color: #FFFFFF;
  box-shadow: 0 8px 20px -10px rgba(210, 67, 74, .9), inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* ---------- 3. Kenar cubugu (Dunyalar / Katmanlar / Oyuncular) ---------- */
#sidebar #sidebar__content {
  background: linear-gradient(180deg, rgba(36, 24, 23, .97) 0%, rgba(18, 12, 12, .97) 60%);
  border: 0;
  border-left: 1px solid var(--w-line);
  box-shadow: -24px 0 48px -24px rgba(0, 0, 0, .9);
  padding: 2rem 1.8rem 3rem;
  scrollbar-width: thin;
  scrollbar-color: #4A3332 transparent;
}
#sidebar #sidebar__content::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--w-gold) 0 18%, var(--w-red) 18% 100%);
}
#sidebar #sidebar__content h2 {
  position: relative;
  margin: 0 0 1.6rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--w-line);
  font-family: var(--w-display);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1.1;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #FFFFFF;
}
#sidebar #sidebar__content h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 4.8rem; height: 2px;
  background: var(--w-red);
}
#sidebar #sidebar__content p {
  margin: 0;
  color: var(--w-soft);
  font-size: 1.5rem;
  line-height: 1.45;
}

/* Liste satirlari (katman / oyuncu) */
#sidebar .menu input + label {
  display: flex;
  align-items: center;
  min-height: 4.4rem;
  margin-bottom: .6rem;
  padding: .8rem 1.2rem;
  font-family: var(--ui-font);
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.3;
  white-space: normal;
  color: var(--w-text);
  background-color: rgba(255, 255, 255, .025);
  border: 1px solid var(--w-line);
  border-radius: .8rem;
  box-shadow: none;
}
#sidebar .menu input + label:hover {
  background-color: var(--ui-background-hover);
  border-color: rgba(210, 67, 74, .6);
}
#sidebar .menu input:checked + label {
  background-color: rgba(210, 67, 74, .16);
  border-color: var(--w-red);
  color: #FFFFFF;
  font-weight: 600;
}
#sidebar .menu input:focus-visible + label { outline: var(--ui-outline); outline-offset: 1px; }

/* Katmanlar: onay kutusu gostergesi */
#sidebar__layers .menu input + label::before {
  content: "";
  flex: 0 0 auto;
  width: 1.8rem; height: 1.8rem;
  margin-right: 1rem;
  border: 2px solid var(--w-muted);
  border-radius: .4rem;
  background: transparent center / 1.3rem no-repeat;
}
#sidebar__layers .menu input:checked + label::before {
  border-color: var(--w-red);
  background-color: var(--w-red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Oyuncular: kafa gorseli satirin solunda */
#sidebar .menu input.players + label {
  padding-left: 5rem;
  background-position: .8rem center;
  background-size: 3.2rem 3.2rem;
  image-rendering: pixelated;
}

/* Dunyalar: her dunya bir kart; ad + gorunum ikonlari */
#sidebar__worlds .menu > fieldset {
  margin: 0 0 1rem;
  padding: 1rem 1.2rem 1.2rem;
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--w-line);
  border-radius: .8rem;
}
#sidebar__worlds .menu > fieldset legend {
  float: left;
  width: 100%;
  margin: 0 0 .8rem;
  padding: 0;
  font-family: var(--w-display);
  font-weight: 700;
  font-size: 1.9rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #FFFFFF;
}
#sidebar__worlds .menu > fieldset:has(input:checked) {
  border-color: var(--w-red);
  background: rgba(210, 67, 74, .12);
}
#sidebar .menu input.renderer + label {
  display: inline-block;
  width: 4.4rem; height: 4.4rem;
  min-height: 0;
  margin: 0 .6rem 0 0;
  padding: 0;
  background-color: transparent;
  background-size: 100%;
  border: 2px solid var(--w-line);
  border-radius: .6rem;
}
#sidebar .menu input.renderer:checked + label {
  border-color: var(--w-red-hi);
  box-shadow: 0 0 0 3px rgba(210, 67, 74, .35);
}

/* ---------- 4. Alt paneller: koordinat, blok bilgisi, baglanti, imza ---------- */
.leaflet-control-panel {
  background: var(--w-surface);
  border-color: var(--w-line);
  box-shadow: var(--ui-box-shadow);
}
.leaflet-control-coordinates {
  min-width: 22rem;
  padding: .5rem 1.4rem .6rem;
  font-family: var(--w-display);
  font-weight: 600;
  font-size: 2.1rem;
  line-height: 1.15;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
}
.leaflet-control-coordinates:before {
  margin-bottom: .1rem;
  font-family: var(--w-display);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--w-gold);
}
.leaflet-control-blockinfo {
  padding: .6rem 1.2rem;
  font-family: var(--ui-font);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--w-text);
}
.leaflet-container .leaflet-control-attribution {
  padding: .2rem .8rem;
  font-family: var(--ui-font);
  font-size: 1.1rem;
  color: var(--w-muted);
  background: rgba(18, 12, 12, .75);
  border-radius: .6rem;
}
.leaflet-container .leaflet-control-attribution a,
.leaflet-container .leaflet-control-attribution a:visited,
.leaflet-container .leaflet-control-attribution a:hover {
  color: var(--w-soft);
}

/* ---------- 5. Harita ustu baloncuklar (oyuncu isim etiketleri players.yml'de, dokunulmadi) ---------- */
.leaflet-tooltip {
  font-family: var(--ui-font);
  color: var(--w-text);
  background: var(--w-surface-solid);
  border: 1px solid var(--w-line);
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .9);
}
.leaflet-tooltip-top:before { border-top-color: var(--w-surface-solid); }
.leaflet-tooltip-bottom:before { border-bottom-color: var(--w-surface-solid); }
.leaflet-tooltip-left:before { border-left-color: var(--w-surface-solid); }
.leaflet-tooltip-right:before { border-right-color: var(--w-surface-solid); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--w-surface-solid);
  color: var(--w-text);
  box-shadow: 0 10px 28px -12px rgba(0, 0, 0, .9);
}
.leaflet-popup-content-wrapper { border: 1px solid var(--w-line); }
.leaflet-popup-content { font-family: var(--ui-font); font-size: 1.4rem; }
.leaflet-container a.leaflet-popup-close-button { color: var(--w-soft); }

/* ---------- 6. Wortham rozeti (ust orta; tiklayinca wortham.net) ---------- */
.wortham-marka {
  position: fixed;
  z-index: 1001; /* haritanin ustunde, kenar cubugunun (1002) altinda */
  top: var(--ui-element-spacing);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1rem;
  height: var(--ui-button-size);
  padding: 0 1.8rem 0 .7rem;
  font-family: var(--w-display);
  font-weight: 700;
  font-size: 2.3rem;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: #FFFFFF;
  background: var(--w-surface);
  border: 1px solid var(--w-line);
  border-radius: 99rem;
  box-shadow: var(--ui-box-shadow);
  transition: border-color .2s ease, opacity .2s ease, visibility .2s;
  -webkit-tap-highlight-color: transparent;
}
.wortham-marka:hover { border-color: rgba(210, 67, 74, .75); }
.wortham-marka:focus-visible { outline: var(--ui-outline); outline-offset: 2px; }
.wortham-marka img {
  display: block;
  width: 4.2rem; height: 4.2rem;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .7));
}
.wortham-marka .wm-alt {
  padding-left: 1rem;
  border-left: 1px solid var(--w-line);
  color: var(--w-red-hi);
}

/* Dar ekranda acik kenar cubugu rozetin ustune binmesin */
@media (max-width: 1100px) {
  body:has(#sidebar.sidebar--expanded) .wortham-marka { opacity: 0; visibility: hidden; }
}

/* ---------- 7. Mobil ---------- */
@media (max-width: 600px) {
  html:root { --ui-sidebar-width: min(28rem, calc(100vw - 13rem)); }
  .wortham-marka { gap: .8rem; font-size: 1.9rem; padding: 0 1.4rem 0 .6rem; }
  .wortham-marka img { width: 3.6rem; height: 3.6rem; }
  .wortham-marka .wm-alt { padding-left: .8rem; }
  /* blok bilgisi fare ile calisir; dokunmatikte koordinatla cakisiyordu */
  .leaflet-control-blockinfo { display: none !important; }
  .leaflet-control-container-bottom { grid-template-columns: 0 minmax(0, 1fr) auto; }
  .leaflet-control-coordinates { min-width: 0; padding: .4rem 1rem .5rem; font-size: 1.8rem; }
  .leaflet-container .leaflet-control-attribution { font-size: 1rem; }
  #sidebar #sidebar__content { padding: 1.6rem 1.4rem 3rem; }
  #sidebar #sidebar__content h2 { font-size: 2.3rem; }
}
@media (max-width: 360px) {
  .wortham-marka .wm-alt { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wortham-marka, #sidebar, #sidebar #sidebar__content { transition: none; }
}