/* ════════════════════════════════════════════════════════════════
   12-strategy.css — DİPLOMASİ PANELİ (#gs-panel)
   Sağ tıkla açılan sol diplomasi paneli. Eski HOI4 (bronz/serif)
   kaplaması kaldırıldı — panel artık tema değişkenleriyle
   (--surf/--bdr/--accent/--txt) çizilir ve seçili arayüz temasına
   (Front/Liquid/Pixel) uyum sağlar. Faction modalının eski "grand
   strategy" kaplaması da kaldırıldı; modal doğrudan temaları izler.
   Yerleşim ölçüleri (genişlik, sütunlar) faction_hoi.js ile uyumlu
   olacak şekilde aynen korundu.
   ════════════════════════════════════════════════════════════════ */

#gs-panel {
  position: fixed;
  top: 64px;
  left: 10px;
  bottom: 14px;
  width: 344px;
  max-width: 92vw;
  z-index: 690; /* faction modalının (700) altında */
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--surf);
  border: 1px solid var(--bdr2);
  border-radius: 8px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, .45);
  transform: translateX(-112%);
  transition: transform .32s cubic-bezier(.2, .9, .3, 1);
  pointer-events: none;
  color: var(--txt);
}
#gs-panel.open { transform: translateX(0); pointer-events: auto; }
#gs-panel::-webkit-scrollbar { width: 4px; }
#gs-panel::-webkit-scrollbar-thumb { background: var(--bdr); border-radius: 2px; }

/* Başlık şeridi */
.gs-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem .8rem;
  background: var(--surf2);
  border-bottom: 1px solid var(--bdr);
  flex-shrink: 0;
}
.gs-title {
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--txt);
}
.gs-close {
  background: none;
  border: 1px solid transparent;
  color: var(--muted);
  font-size: .85rem;
  cursor: pointer;
  padding: .1rem .4rem;
  border-radius: 4px;
}
.gs-close:hover { color: var(--txt); border-color: var(--bdr); }

/* Üst blok: sol sütun (bayrak+portre) + sağ sütun (kimlik+istatistik) */
.gs-top {
  display: flex;
  gap: .7rem;
  padding: .8rem;
  border-bottom: 1px solid var(--bdr);
  flex-shrink: 0;
}
.gs-left-col {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  width: 104px;
  flex-shrink: 0;
}
/* Bayrak — portrenin üstünde */
.gs-flag {
  width: 104px;
  height: 64px;
  overflow: hidden;
  border: 1px solid var(--bdr2);
  border-radius: 4px;
  background: var(--bg);
}
/* Lider portresi */
.gs-portrait {
  width: 104px;
  height: 122px;
  overflow: hidden;
  border: 1px solid var(--bdr2);
  border-radius: 4px;
  background: var(--bg);
}
.gs-leader-plate {
  background: var(--surf2);
  border: 1px solid var(--bdr);
  border-radius: 4px;
  padding: .3rem .35rem;
  text-align: center;
}
.gs-leader-role {
  font-size: .48rem;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--accent-text, var(--accent));
  margin-bottom: .12rem;
}
.gs-leader-name {
  font-family: var(--font-ui);
  font-size: .74rem;
  font-weight: 700;
  color: var(--txt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gs-leader-lvl {
  font-family: var(--font-mono, monospace);
  font-size: .52rem;
  color: var(--muted);
  margin-top: .1rem;
}

.gs-right-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.gs-nation-name {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gs-nation-sub {
  font-family: var(--font-mono, monospace);
  font-size: .6rem;
  color: var(--muted);
  margin-top: .1rem;
}
.gs-nation-prov {
  font-size: .58rem;
  color: var(--muted);
  margin-top: .2rem;
}

.gs-info-rows {
  display: flex;
  flex-direction: column;
  background: var(--surf2);
  border: 1px solid var(--bdr);
  border-radius: 4px;
}
.gs-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .26rem .5rem;
  border-bottom: 1px solid var(--bdr);
  font-size: .6rem;
}
.gs-info-row:last-child { border-bottom: none; }
.gs-info-k { color: var(--muted); display: flex; align-items: center; gap: .3rem; }
.gs-info-v { font-family: var(--font-mono, monospace); font-weight: 700; color: var(--txt); }

/* İlişki bandı — durum rengini inline style verir (savaş/ittifak/nap) */
.gs-banner {
  border: 1px solid;
  border-radius: 4px;
  padding: .42rem .5rem;
  text-align: center;
  font-family: var(--font-ui);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Sekmeler */
.gs-tabs {
  display: flex;
  gap: 4px;
  padding: .5rem .8rem 0;
  flex-shrink: 0;
}
.gs-tab {
  flex: 1;
  padding: .42rem 0;
  background: var(--surf2);
  border: 1px solid var(--bdr);
  border-radius: 5px;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
}
.gs-tab:hover { color: var(--txt); background: var(--surf3); }
.gs-tab.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.gs-body {
  flex: 1;
  padding: .6rem .8rem .9rem;
}

/* Aksiyon listesi — diplomasi aksiyon satırları */
.gs-actions { display: flex; flex-direction: column; gap: 4px; }
.gs-action {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .6rem;
  background: var(--surf2);
  border: 1px solid var(--bdr);
  border-radius: 5px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  user-select: none;
}
.gs-action:hover {
  background: var(--surf3);
  border-color: var(--bdr2);
}
.gs-action:active { transform: translateY(1px); }
.gs-action.disabled { opacity: .48; cursor: default; }
.gs-action.disabled:hover { background: var(--surf2); border-color: var(--bdr); }
.gs-action-ic { font-size: .8rem; width: 18px; text-align: center; color: var(--txt); flex-shrink: 0; }
.gs-action-label { flex: 1; font-size: .68rem; font-weight: 600; color: var(--txt); letter-spacing: .01em; }
.gs-action-chev { color: var(--muted); font-size: .8rem; }
.gs-action-right { font-size: .54rem; color: var(--muted); }

.gs-hint {
  font-size: .6rem;
  color: var(--muted);
  line-height: 1.55;
  padding: .45rem .3rem;
  text-align: center;
}

/* Detay sekmesi */
.gs-detail-sec-title {
  font-family: var(--font-ui);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-text, var(--accent));
  margin: .65rem 0 .3rem;
  padding-bottom: .2rem;
  border-bottom: 1px solid var(--bdr);
  display: flex;
  align-items: center;
  gap: .35rem;
}
.gs-detail-sec-title:first-child { margin-top: 0; }
.gs-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .3rem .45rem;
  background: var(--surf2);
  border: 1px solid var(--bdr);
  border-radius: 4px;
  margin-bottom: 3px;
  font-size: .64rem;
}
.gs-detail-row:hover { background: var(--surf3); border-color: var(--bdr2); }
.gs-detail-name { color: var(--txt); font-weight: 600; display: flex; align-items: center; gap: .35rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-detail-val { font-family: var(--font-mono, monospace); color: var(--muted); flex-shrink: 0; }

@media (max-width: 640px) {
  #gs-panel { width: 88vw; top: 58px; bottom: 10px; left: 6px; }
}

/* ════════════════════════════════════════════════════════════════
   DİPLOMASİ PANOSU — "harp odası" durum satırları
   İlişki türü (müttefik / savaş / saldırmazlık / nötr) bu ekranın en
   önemli bilgisi — her satırda sol renkli OMURGA + duruma göre tint +
   ikonlu durum çipiyle bir bakışta okunur. 11-front sonrası yüklenir
   (aktif tema hover'ını ezmek için); .fc-diplo-item.diplo-* iki-sınıf
   özgüllüğü kullanır. Layout/JS mantığı değişmedi — yalnız sunum.
════════════════════════════════════════════════════════════════ */
.fc-diplo-item{
  position:relative; overflow:hidden;
  padding-left:.85rem !important;
  border:1px solid var(--bdr) !important;
  background:var(--surf2) !important;
  transition:transform .16s var(--ease-spring, ease-out),
             box-shadow .2s ease, background .2s ease, border-color .2s ease !important;
}
/* Sol durum omurgası */
.fc-diplo-item::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--ds, transparent);
  box-shadow:0 0 10px -1px var(--ds, transparent);
}
.fc-diplo-item.diplo-ally    { --ds:#00d4a0; background:linear-gradient(90deg, rgba(0,212,160,.11) 0%, var(--surf2) 62%) !important; border-color:rgba(0,212,160,.30) !important; }
.fc-diplo-item.diplo-war     { --ds:#f04a4a; background:linear-gradient(90deg, rgba(240,74,74,.11) 0%, var(--surf2) 62%) !important; border-color:rgba(240,74,74,.30) !important; }
.fc-diplo-item.diplo-nap     { --ds:#38bdf8; background:linear-gradient(90deg, rgba(56,189,248,.11) 0%, var(--surf2) 62%) !important; border-color:rgba(56,189,248,.28) !important; }
.fc-diplo-item.diplo-neutral { --ds:var(--bdr2); }

.fc-diplo-item:hover{ transform:translateX(3px); }
.fc-diplo-item.diplo-ally:hover   { box-shadow:0 4px 16px rgba(0,212,160,.18) !important; border-color:rgba(0,212,160,.52) !important; }
.fc-diplo-item.diplo-war:hover    { box-shadow:0 4px 16px rgba(240,74,74,.18) !important; border-color:rgba(240,74,74,.52) !important; }
.fc-diplo-item.diplo-nap:hover    { box-shadow:0 4px 16px rgba(56,189,248,.18) !important; border-color:rgba(56,189,248,.50) !important; }
.fc-diplo-item.diplo-neutral:hover{ box-shadow:0 4px 14px rgba(0,0,0,.32) !important; border-color:var(--bdr2) !important; }

/* Durum çipi: ikon + etiket, tek hizada */
.fc-diplo-status{ display:inline-flex !important; align-items:center; gap:.3rem; flex-shrink:0; }
.fc-diplo-status svg{ width:.85em; height:.85em; vertical-align:-.1em; }

/* Chevron — hover'da omurga rengine kayar */
.fc-diplo-chev{ color:var(--muted); font-size:1rem; flex-shrink:0; transition:transform .16s ease, color .2s ease; }
.fc-diplo-item:hover .fc-diplo-chev{ transform:translateX(2px); color:var(--ds); }

/* ── Banner diplomasi özeti — küçük durum kümesi ── */
.fc-diplo-mini{ display:flex; flex-direction:column; gap:.28rem; flex-shrink:0; }
.fdm{
  display:flex; align-items:center; gap:.32rem; justify-content:flex-end;
  font-family:var(--font-mono); font-weight:800; font-size:.68rem; line-height:1;
  padding:.16rem .42rem; border-radius:6px; min-width:2.6rem;
}
.fdm svg{ width:.9em; height:.9em; }
.fdm-n{ min-width:.7rem; text-align:right; }
.fdm.ally{ color:#00d4a0; background:rgba(0,212,160,.10); border:1px solid rgba(0,212,160,.26); }
.fdm.nap { color:#38bdf8; background:rgba(56,189,248,.10); border:1px solid rgba(56,189,248,.24); }
.fdm.war { color:#f04a4a; background:rgba(240,74,74,.10); border:1px solid rgba(240,74,74,.26); }
.fdm.prestij{ color:#ffd23e; background:rgba(255,210,62,.10); border:1px solid rgba(255,210,62,.26); }