/* ============================================================
   PANEL LANGUAGE HEADER – centered pills (dark + red theme)
   Requires flag-icons (fi fi-xx)
   ============================================================ */
:root {
  --plang-bg:   linear-gradient(180deg, #0b0b0b 0%, #141414 100%);
  --plang-card: rgba(255,255,255,.06);
  --plang-text: #fff;
  --plang-dim:  rgba(255,255,255,.78);
  --plang-red1: #D90404;  /* brand red */
  --plang-red2: #730707;
}

.panel-lang-header{
  width:100%;
  background: var(--plang-bg);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: .55rem .75rem;
}

.plang-list{
  margin:0; padding:0;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:center;   /* yatay ortalı */
  gap:.4rem .55rem;
  flex-wrap:wrap;           /* dar ekranda kay */
}

.plang-item{ /* active indicator spacing */
  display:inline-flex;
}

.plang-link{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.45rem .7rem;
  color:var(--plang-text);
  text-decoration:none;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;          /* pill */
  transition: all .2s ease;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset;
  line-height:1;
  white-space:nowrap;
}

.plang-link:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-1px);
}

.plang-item.active .plang-link{
  background: linear-gradient(180deg, var(--plang-red1) 0%, var(--plang-red2) 100%);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 6px 18px rgba(217,4,4,.35), inset 0 1px 0 rgba(255,255,255,.12);
}

.plang-flag{
  width:20px; height:14px;
  border-radius:3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset, 0 1px 2px rgba(0,0,0,.35);
}

.plang-name{
  font-size:.92rem;
  font-weight:600;
  letter-spacing:.2px;
  color:#fff; /* aktif ve pasifte net beyaz */
}

/* Compact on very small screens */
@media (max-width: 420px){
  .plang-link{ padding:.4rem .6rem; }
  .plang-name{ font-size:.88rem; }
  .plang-flag{ width:18px; height:12px; }
}

/* Optional: stick to top if desired (uncomment) */
/*
.panel-lang-header{
  position:sticky; top:0; z-index:110;
}
*/