/* ══════════════════════════════════════════════════════════════════
   FRAKSİYON KOMUTA PANELİ (v77)
   Tasarım fikri: panel bir "saha karargâhı dosyası". Fraksiyonun KENDİ
   rengi (--fac) üniforma gibi tüm panele yayılır; piksel ızgarası dokusu
   ve çentikli (kesik köşeli) plakalar oyunun kendi diline — piksel + savaş
   — ait. Yuvarlak köşeli jenerik kart görünümünden kasıtlı olarak uzak.
   EN SON yüklenir: 01-base.css'teki .fc-tab !important kurallarını yener.
   --fac faction.js tarafından #faction-card üzerine yazılır.
══════════════════════════════════════════════════════════════════ */

#faction-card{ --fac:var(--accent); }

/* Modal başlığı artık künye: asıl ad sancakta büyük duruyor,
   burada tekrar etmesin (aynı bilgi iki kez bağırmasın). */
#faction-card .fc-header h2#fc-title{
  font-family:var(--font-mono);font-size:.62rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:.4rem;
}
#faction-card .fc-header h2#fc-title svg{width:.9em;height:.9em;color:var(--fac);}

/* ── Çentikli plaka: köşeleri kesilmiş askeri panel silueti ── */
.fc-notch{
  clip-path:polygon(0 14px,14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
}

/* ══ SANCAK (hero) ═══════════════════════════════════════════════ */
.fc-standard{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;gap:1.05rem;
  padding:1.25rem 1.3rem;
  background:var(--surf2);
  border:1px solid var(--bdr2);
  clip-path:polygon(0 16px,16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);
}
/* Fraksiyon renginin çapraz yayılımı */
.fc-standard::before{
  content:'';position:absolute;inset:0;z-index:-2;
  background:linear-gradient(112deg,var(--fac) 0%,transparent 64%);
  opacity:.3;
}
/* Piksel ızgarası dokusu — oyunun tuvali sancağa işlenmiş gibi */
.fc-standard::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,rgba(var(--shine-rgb),.055) 0 1px,transparent 1px 8px),
    repeating-linear-gradient(90deg,rgba(var(--shine-rgb),.055) 0 1px,transparent 1px 8px);
  -webkit-mask-image:linear-gradient(105deg,#000 0%,transparent 72%);
  mask-image:linear-gradient(105deg,#000 0%,transparent 72%);
}

/* Arma plakası */
.fc-std-crest{
  position:relative;width:66px;height:66px;flex-shrink:0;cursor:pointer;
  clip-path:polygon(0 12px,12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
  background:var(--surf);
  box-shadow:0 0 0 2px var(--fac),0 8px 22px rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;
}
/* Arma zemini: koyu plaka + hafif fraksiyon yıkaması (logosuz
   fraksiyonlarda ikon soluk kalmasın diye kontrast burada kurulur) */
.fc-std-crest::before{
  content:'';position:absolute;inset:0;background:var(--fac);opacity:.2;
}
.fc-std-crest img,.fc-std-crest .fc-logo-inner{
  position:relative;width:100%;height:100%;border-radius:0;object-fit:cover;
  display:flex;align-items:center;justify-content:center;font-size:2.1rem;
  background:transparent!important;
}
.fc-std-crest .fc-logo-inner svg{width:1em;height:1em;}
.fc-std-crest .fc-logo-overlay{
  position:absolute;inset:0;border-radius:0;
  background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .18s;
}
.fc-std-crest:hover .fc-logo-overlay{opacity:1;}

/* Ad bloğu */
.fc-std-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.28rem;}
.fc-std-line{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;}
.fc-std-tag{
  font-family:var(--font-mono);font-size:.62rem;font-weight:700;letter-spacing:.16em;
  color:var(--fac);background:rgba(0,0,0,.32);
  border:1px solid var(--fac);padding:.15rem .45rem;
  clip-path:polygon(0 5px,5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%);
}
.fc-std-role{
  font-size:.55rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  padding:.18rem .5rem;
}
.fc-std-name{
  font-family:var(--font-display);font-size:1.45rem;font-weight:700;
  letter-spacing:-.015em;line-height:1.05;color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 2px 14px rgba(0,0,0,.5);
}
.fc-std-sub{
  font-family:var(--font-mono);font-size:.6rem;color:var(--muted);
  letter-spacing:.04em;
}

/* Yabancı fraksiyon künyesi (hakkında sayfası): arma tıklanamaz */
.fc-std-foreign .fc-std-crest{cursor:default;}
.fc-std-foreign .fc-diplo-status{border-radius:0;font-size:.55rem;}

/* ══ GÖSTERGE ŞERİDİ — sert sayılar, kokpit okuması gibi ═════════ */
.fc-readout{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(76px,1fr));
  background:var(--surf3);border:1px solid var(--bdr);
  border-top:none;
}
.fc-ro{
  display:flex;flex-direction:column;align-items:center;gap:.1rem;
  padding:.6rem .3rem;border-left:1px solid var(--bdr);
}
.fc-ro:first-child{border-left:none;}
.fc-ro b{
  font-family:var(--font-mono);font-size:1.02rem;font-weight:700;color:var(--txt);
  line-height:1;
}
.fc-ro span{
  font-size:.5rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
}
.fc-ro.prestij b{color:#ffd23e;}
.fc-ro.hot b{color:var(--fac);}

/* ══ KOMUTA SEKMELERİ ════════════════════════════════════════════ */
/* Alt satıra taşmak yerine yatay kaydırılır — şerit tek çizgi kalır */
#faction-card .fc-tabs{
  gap:.15rem;border-bottom:1px solid var(--bdr2);padding-bottom:0;
  flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
}
#faction-card .fc-tabs::-webkit-scrollbar{height:0;display:none;}
#faction-card .fc-tab{flex-shrink:0;white-space:nowrap;}
/* Sağ uçta yumuşama: şeridin devam ettiği belli olsun, kesik durmasın */
#faction-card .fc-tabs{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
}
#faction-card .fc-tab{
  position:relative;background:transparent;border:none;border-radius:0;
  color:var(--muted);font-family:var(--font-display);font-weight:700;
  font-size:.7rem;letter-spacing:.02em;padding:.5rem .7rem .55rem;
  transition:color .15s,background .15s;
}
#faction-card .fc-tab:hover:not(.active){
  color:var(--txt);background:rgba(var(--shine-rgb),.04);
}
/* Aktif sekme: koyu plaka + fraksiyon rengi üst çubuk.
   (Zemini fraksiyon rengiyle boyamıyoruz — açık renkli fraksiyonlarda
   yazı okunmaz hale geliyordu.) */
#faction-card .fc-tab.active{
  background:var(--surf3)!important;color:var(--fac)!important;
  box-shadow:inset 0 2px 0 var(--fac)!important;
}
#faction-card .fc-tab svg{width:.92em;height:.92em;vertical-align:-.12em;}

/* ══ BÖLÜM BAŞLIĞI ═══════════════════════════════════════════════ */
.fc-sec{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:.58rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin-bottom:.1rem;
}
.fc-sec::after{content:'';flex:1;height:1px;background:var(--bdr);}
.fc-sec::before{content:'';width:3px;height:.85em;background:var(--fac);}

/* ══ DAVET KODU — mühürlü belge hissi ════════════════════════════ */
#faction-card .fc-invite-box{
  background:var(--surf3);
  border:1px dashed var(--fac);border-radius:0;
  padding:.8rem .9rem;
}
#faction-card .fc-invite-code{
  color:var(--fac);font-size:1rem;letter-spacing:.28em;font-weight:700;
}
/* !important: 01-base.css ve 11-front.css accent rengini !important ile
   dayatıyor — davet butonu fraksiyon rengini giymeli. */
#faction-card .fc-copy-btn{
  background:var(--fac)!important;background-image:none!important;
  border-radius:0!important;color:#fff!important;border:none!important;
  box-shadow:none!important;
  font-family:var(--font-mono);font-size:.62rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:.42rem .85rem!important;
  clip-path:polygon(0 5px,5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%);
}
#faction-card .fc-copy-btn:hover{filter:brightness(1.15);box-shadow:none!important;}

/* Eylem butonları da çentikli dile uyar */
#faction-card .fc-btn{
  border-radius:0!important;
  clip-path:polygon(0 9px,9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%);
  font-family:var(--font-display);letter-spacing:.02em;
}
#faction-card .fc-small-btn{border-radius:0!important;}

/* ══ DİPLOMATİK DURUŞ TABLOSU ════════════════════════════════════ */
.fc-standing{display:flex;flex-direction:column;gap:1px;background:var(--bdr);border:1px solid var(--bdr);}
.fc-st-row{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--surf3);padding:.5rem .7rem;font-size:.7rem;
}
.fc-st-row span{display:flex;align-items:center;gap:.4rem;color:var(--muted);}
.fc-st-row svg{width:.9em;height:.9em;}
.fc-st-row b{font-family:var(--font-mono);font-size:.85rem;}
.fc-st-row.ally span,.fc-st-row.ally b{color:#00d4a0;}
.fc-st-row.nap span,.fc-st-row.nap b{color:#38bdf8;}
.fc-st-row.war span,.fc-st-row.war b{color:#f04a4a;}

/* ══ ÜYE SATIRLARI — sicil kaydı ═════════════════════════════════ */
#faction-card .fc-member{
  position:relative;border-radius:0;padding:.5rem .6rem .5rem .75rem;
  border:1px solid transparent;border-left:2px solid var(--bdr2);
}
#faction-card .fc-member:hover{
  background:var(--surf2);border-color:var(--bdr);border-left-color:var(--fac);
}
#faction-card .fc-member-av{border-radius:0;clip-path:polygon(0 5px,5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%);}
#faction-card .fc-member-name{font-size:.8rem;}
#faction-card .fc-member-role{border-radius:0;font-size:.53rem;letter-spacing:.1em;}

/* ══ DİPLOMASİ / KEŞFET SATIRLARI ════════════════════════════════ */
#faction-card .fc-diplo-item,
#faction-card .fc-browse-row{
  border-radius:0;
  clip-path:polygon(0 8px,8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);
}
#faction-card .fc-browse-row:hover{border-color:var(--fac);}
#faction-card .fc-diplo-status{border-radius:0;letter-spacing:.08em;}
#faction-card .fc-diplo-btn{
  border-radius:0;font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;
}

/* ══ DURUŞ ÇİPLERİ (sancak sağı) ═════════════════════════════════ */
#faction-card .fdm{
  border-radius:0;
  clip-path:polygon(0 4px,4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%);
}

/* ══ BOŞ DURUM ═══════════════════════════════════════════════════ */
#faction-card .fc-empty{
  border:1px dashed var(--bdr2);padding:1.8rem 1rem;
  clip-path:polygon(0 12px,12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
}
#faction-card .fc-empty strong{color:var(--fac);opacity:.75;}

/* ══ MOBİL ═══════════════════════════════════════════════════════ */
@media (max-width:520px){
  .fc-standard{padding:1rem;gap:.8rem;}
  .fc-std-crest{width:54px;height:54px;}
  .fc-std-name{font-size:1.18rem;}
  .fc-ro b{font-size:.9rem;}
  #faction-card .fc-tab{padding:.45rem .5rem .5rem;font-size:.64rem;}
}

/* ── Fraksiyon ayarları (lider): ad + renk ── */
.fc-settings {
  display: flex; flex-direction: column; gap: .5rem;
  background: rgba(var(--fac-rgb, 79,140,255), .07);
  border: 1px solid rgba(var(--fac-rgb, 79,140,255), .25);
  border-radius: 12px; padding: .7rem .8rem; margin-bottom: .6rem;
}
.fc-set-title {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-display, sans-serif);
  font-size: .72rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--fac, var(--accent));
}
.fc-set-row { display: flex; align-items: center; gap: .6rem; font-size: .74rem; color: var(--muted); }
.fc-set-row > span { min-width: 42px; }
.fc-set-row input[type=text], .fc-set-row input:not([type=color]) {
  flex: 1; background: rgba(var(--surf-rgb), .9);
  border: 1px solid var(--bdr2); border-radius: 8px;
  padding: .4rem .6rem; color: var(--fg); font-size: .78rem;
}
.fc-set-row input:not([type=color]):focus { border-color: var(--fac, var(--accent)); outline: none; }
.fc-set-row input[type=color] {
  width: 46px; height: 30px; padding: 0; border: 1px solid var(--bdr2);
  border-radius: 8px; background: none; cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════
   ALAYLAR (fraksiyon içi birimler) — faction.js _fcRenderUnitsPanel
   Renk değişkeni: --u (alayın kendi rengi)
══════════════════════════════════════════════════════════════════ */
.fc-unit-list{ display:flex; flex-direction:column; gap:4px; }
.fc-unit{
  display:flex; align-items:center; gap:.5rem;
  padding:.42rem .55rem;
  background:color-mix(in srgb, var(--u, #4f8cff) 10%, var(--surf2, #1c1d33));
  border:1px solid color-mix(in srgb, var(--u, #4f8cff) 38%, transparent);
  border-left:3px solid var(--u, #4f8cff);
  border-radius:8px;
}
.fc-unit-dot{
  width:8px; height:8px; border-radius:50%; flex:0 0 auto;
  background:var(--u, #4f8cff);
  box-shadow:0 0 7px var(--u, #4f8cff);
}
.fc-unit-name{
  flex:1 1 auto; min-width:0;
  font-size:.72rem; font-weight:800; color:var(--txt, #e8eaf8);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fc-unit-count{
  flex:0 0 auto; font-size:.56rem; color:var(--muted, #8b8db8);
}
.fc-unit-mine{
  flex:0 0 auto; padding:.1rem .35rem; border-radius:20px;
  background:var(--u, #4f8cff); color:#fff;
  font-size:.5rem; font-weight:800; text-transform:uppercase;
}
.fc-unit-del{
  flex:0 0 auto; width:22px; height:22px; padding:0;
  background:transparent; border:none; cursor:pointer;
  color:var(--muted, #8b8db8);
  display:flex; align-items:center; justify-content:center;
}
.fc-unit-del:hover{ color:#f04a4a; }
.fc-unit-del svg, .fc-unit-del span{ width:13px; height:13px; }

.fc-unit-empty{
  padding:.7rem .4rem; text-align:center;
  font-size:.65rem; color:var(--muted, #8b8db8);
}

.fc-unit-new{ display:flex; gap:5px; align-items:center; }
.fc-unit-new input[type="text"], .fc-unit-new input:not([type]){
  flex:1 1 auto; min-width:0;
  padding:.4rem .5rem;
  background:var(--surf2, #1c1d33);
  border:1px solid var(--bdr2, #2a2b45);
  border-radius:7px;
  color:var(--txt, #e8eaf8); font-family:inherit; font-size:.7rem;
}
.fc-unit-new input[type="color"]{
  flex:0 0 auto; width:34px; height:30px; padding:2px;
  background:var(--surf2, #1c1d33);
  border:1px solid var(--bdr2, #2a2b45);
  border-radius:7px; cursor:pointer;
}
/* .fc-btn'in genel kuralında width:100% var (03-components.css) — burada
   ezmezsek buton tüm satırı yutuyor, ad kutusu bir kareye iniyordu. */
.fc-unit-new .fc-btn{
  flex:0 0 auto; width:auto;
  font-size:.68rem; padding:.4rem .85rem;
}
.fc-unit-new input{ min-width:0; }

.fc-unit-hint{
  margin-top:.4rem; font-size:.56rem; line-height:1.45;
  color:var(--muted, #8b8db8);
}

.fc-unit-assign{ display:flex; flex-direction:column; gap:3px; }
.fc-ua-row{
  display:flex; align-items:center; gap:.5rem;
  padding:.3rem .45rem;
  background:var(--surf2, #1c1d33);
  border-radius:7px;
}
.fc-ua-name{
  flex:1 1 auto; min-width:0;
  font-size:.68rem; color:var(--txt, #e8eaf8);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fc-ua-sel{
  flex:0 0 auto; max-width:46%;
  padding:.25rem .4rem;
  background:var(--surf, #14152a);
  border:1px solid var(--bdr2, #2a2b45);
  border-radius:6px;
  color:var(--txt, #e8eaf8); font-family:inherit; font-size:.62rem;
  cursor:pointer;
}