/* ====================================================
   ALS Panel · Global Tema (app.css)
   .NET 9 Blazor · Bootstrap 5.3.8 uyumlu
   Renkler: Logo (Mid Blue, Navy, Red)
   ==================================================== */

/* ---- Font Definitions (Self-Hosted) ---- */
/* ALS sabit 5 font: Bulo (varsayılan), Noto Sans, Source Serif 4, Lora, PT Sans Narrow */
@font-face {
  font-family: "Bulo";
  src:
    url("/fonts/Bulo.woff") format("woff"),
    url("/fonts/Bulo.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bulo";
  src:
    url("/fonts/BuloMedium.woff") format("woff"),
    url("/fonts/BuloMedium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bulo";
  src:
    url("/fonts/BuloBold.woff") format("woff"),
    url("/fonts/Bulo%20Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bulo";
  src:
    url("/fonts/BuloBlack.woff") format("woff"),
    url("/fonts/Bulo%20Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Noto Sans */
@font-face {
  font-family: "Noto Sans";
  src: url("/fonts/NotoSans-Latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Source Serif 4 */
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/SourceSerif4-Latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Lora */
@font-face {
  font-family: "Lora";
  src: url("/fonts/Lora-Latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* PT Sans Narrow */
@font-face {
  font-family: "PT Sans Narrow";
  src: url("/fonts/PTSansNarrow-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PT Sans Narrow";
  src: url("/fonts/PTSansNarrow-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Renk Paleti + BS 5.3.8 Theme Vars ---------- */
:root,
[data-bs-theme="light"] {
  /* Logo paleti */
  --logo-red: #ff5c5c; /* sıcak kırmızı */
  --logo-mid: #4e8fff; /* orta mavi (birincil) */
  --logo-navy: #1b3860; /* koyu lacivert */
  /* Marka eşleşmeleri */
  --brand-sky: var(--logo-mid);
  --brand-blue: var(--logo-mid);
  --brand-navy: var(--logo-navy);
  --brand-ink: #0f223d;
  /* Yüzey / metin */
  --bs-body-bg: #f7f9fc;
  --bs-body-color: #102132;
  --panel: #ffffff;
  --muted: #6b7c90;
  --border: #e4e9f2;
  /* Bootstrap renkleri (logo ile uyumlu) */
  --bs-primary: var(--logo-mid);
  --bs-info: color-mix(in srgb, var(--logo-mid) 78%, white);
  --bs-danger: var(--logo-red);
  --bs-success: #22c55e;
  --bs-warning: #f59e0b;
  /* Çekirdek yardımcılar */
  --bs-border-color: var(--border);
  --bs-border-radius: 0.55rem;
  --bs-border-radius-sm: 0.4rem;
  --bs-border-radius-lg: 0.9rem;
  --bs-border-radius-xl: 1.1rem;
  --bs-focus-ring-color: color-mix(in srgb, var(--logo-mid) 35%, transparent);
  --bs-link-color: var(--logo-mid);
  /* Yardımcı */
  --shadow: 0 10px 30px rgba(16, 24, 40, 0.06);
  --hover: #eef4ff;
  --tint-1: color-mix(in srgb, var(--logo-mid) 10%, #fff);
  --tint-2: color-mix(in srgb, var(--logo-mid) 6%, #fff);
}

/* ---------- Temel ---------- */
html,
body {
  height: 100%;
  font-family: "Bulo", sans-serif;
  background-color: #f0f4fa;
  /* Repeating geometric honeycomb pattern (real hexagons via inline SVG) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%234e8fff' stroke-width='0.6' opacity='0.12'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='%231b3860' stroke-width='0.3' opacity='0.06'/%3E%3C/svg%3E");
  background-size: 56px 100px;
  color: var(--bs-body-color);
  line-height: 1.5;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

/* ====================================================
   LAYOUT (sidebar / topbar / content)
   ==================================================== */

.app {
  min-height: 100vh;
  display: flex;
}

/* Sidebar – logo renkleriyle okunaklı gradyan */
/*.sidebar {
    width: 280px;
    background: radial-gradient(900px 600px at -15% -20%, color-mix(in srgb, var(--logo-mid) 22%, #fff) 0%, transparent 60%), linear-gradient(135deg, color-mix(in srgb, var(--logo-navy) 14%, #fff) 0%, color-mix(in srgb, var(--logo-mid) 24%, #fff) 100%);
    color: #1F2C3C;
    padding: 18px 14px;
    position: sticky;
    top: 0;
    height: 100vh;
    border-right: 1px solid var(--border);
    box-shadow: inset -1px 0 0 rgba(15,23,42,.04);
    flex: 0 0 280px flex-shrink:0
}*/
.sidebar {
  width: 280px;
  flex: 0 0 280px; /* <- sidebar genişliği sabit */
  flex-shrink: 0; /* <- küçülmeyi kesinlikle engeller */

  background:
    radial-gradient(
      900px 600px at -15% -20%,
      color-mix(in srgb, var(--logo-mid) 22%, #fff) 0%,
      transparent 60%
    ),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--logo-navy) 14%, #fff) 0%,
      color-mix(in srgb, var(--logo-mid) 24%, #fff) 100%
    );
  color: #1f2c3c;
  padding: 18px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid var(--border);
  box-shadow: inset -1px 0 0 rgba(15, 23, 42, 0.04);
}

/* Brand alanı */
.sb-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.sb-brand .brand-logo {
  display: block;
  width: 128px;
  height: 64px;
  object-fit: contain;
  border-radius: 10px;
}

.brand-text .title {
  display: block;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: var(--brand-ink);
}

.brand-text .subtitle {
  color: #7b8aa3;
  font-size: 0.8rem;
}

/* Sidebar nav */
.side-nav {
  display: block;
}

.nav-section {
  margin: 8px 0 14px;
}

.nav-section-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #8b98ad;
  padding: 10px 8px 6px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 6px;
  color: #223246;
  background: #ffffffd6;
  border: 1px solid color-mix(in srgb, var(--logo-mid) 10%, #fff);
  transition:
    background 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease;
}

.nav-link .bi {
  color: var(--logo-mid);
}

.nav-link:hover {
  background: #fff;
}

.nav-link.active-link,
.sub-link.active-link,
.btn-reset.active-link {
  background-color: var(--bs-primary-bg-subtle); /* Seçili arka plan */
  color: var(--bs-primary) !important; /* Yazı rengi */
  font-weight: 600; /* Kalın yazı */
  border-radius: 0.375rem; /* Hafif köşe yuvarlatma */
}

.nav-divider {
  height: 1px;
  background: rgba(15, 23, 42, 0.08);
  margin: 10px 8px;
}

/* Grup başlığı görünümü */
.nav-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  padding: 8px 8px;
  border-radius: 10px;
  background: #ffffffcc;
  border: 1px solid var(--border);
}
/* Başlık içeriği renkleri:
   - varsayılan mid blue
   - collapse açık/aktifken navy
*/
.nav-header .btn-reset span {
  color: var(--logo-mid);
}

.nav-header .bi {
  color: var(--logo-mid);
}

/* collapse açık => aria-expanded="true" butonda */
.nav-header .btn-reset[aria-expanded="true"] span,
.nav-header .btn-reset[aria-expanded="true"] .bi,
.nav-header.active .btn-reset span,
.nav-header.active .btn-reset .bi {
  color: var(--logo-navy);
}

/* Subnav */
.subnav {
  margin: 2px 0 8px 22px;
  border-left: 2px dashed rgba(15, 23, 42, 0.12);
  padding-left: 8px;
}

/* Subnav group label (visual separator for related links) */
.subnav-group-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--logo-mid);
  padding: 4px 8px 2px;
  margin-top: 4px;
  border-top: 1px solid rgba(78, 143, 255, 0.15);
}

.subnav .sub-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  margin-bottom: 3px;
  border-radius: 8px;
  font-size: 0.88rem;
  color: #223246;
  background: #ffffffcf;
  border: 1px solid color-mix(in srgb, var(--logo-mid) 8%, #fff);
  transition:
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.subnav .sub-link .bi {
  color: var(--logo-mid);
}

.subnav .sub-link:hover {
  background: #fff;
}

.subnav .sub-link.active {
  background: #fff;
  color: #0f223d;
  outline: 1px solid color-mix(in srgb, var(--logo-mid) 42%, transparent);
  box-shadow: 0 6px 14px rgba(27, 56, 96, 0.16);
}

/* Topbar + Content */
.app-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(120%) blur(6px);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
}

.page-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--brand-ink);
}

.app-content {
  padding: 18px;
}

/* ====================================================
   BOOTSTRAP 5.3.8 BİLEŞEN TEMASI
   ==================================================== */

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.card-header {
  font-weight: 700;
  padding: 0.85rem 1.1rem;
  color: var(--brand-ink);
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdff 65%),
    linear-gradient(
      90deg,
      transparent 0%,
      color-mix(in srgb, var(--logo-mid) 18%, transparent) 50%,
      transparent 100%
    );
  border-bottom: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
}

/* Butonlar */
.btn {
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: 0.1px;
  padding: 0.48rem 0.95rem;
  transition:
    transform 0.06s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background: linear-gradient(
    135deg,
    var(--logo-mid),
    color-mix(in srgb, var(--logo-mid) 70%, white)
  );
  border: none;
  color: #fff;
}

.btn-outline-primary {
  border-color: var(--logo-mid);
  color: var(--logo-mid);
}

.btn-outline-primary:hover {
  background: var(--logo-mid);
  color: #fff;
}

.btn-danger {
  background: var(--logo-red);
  border: none;
  color: #fff;
}

.btn-info {
  background: var(--bs-info);
  border: none;
  color: #fff;
}

.btn-success {
  background: var(--bs-success);
  border: none;
  color: #fff;
}

.btn-warning {
  background: var(--bs-warning);
  border: none;
  color: #fff;
}

/* Yumuşak kırmızı vurgu için alternatif */
.btn-accent-red {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--logo-red) 88%, white),
    var(--logo-red)
  );
  border: none;
  color: #fff;
}

/* Badge */
.badge {
  border-radius: 8px;
  font-weight: 600;
  padding: 0.4em 0.65em;
}

.text-bg-primary {
  background: var(--logo-mid) !important;
  color: #fff !important;
}

.text-bg-danger {
  background: var(--logo-red) !important;
  color: #fff !important;
}

.badge.bg-primary {
  background: var(--logo-mid) !important;
}

.badge.bg-danger {
  background: var(--logo-red) !important;
}

.badge.bg-brand-soft,
.text-bg-brand-soft {
  font-size: 0.8rem;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--logo-mid) 15%, #fff) !important;
  color: var(--logo-navy) !important;
}

/* Tablo */
.table {
  border-color: var(--border);
  font-size: 0.95rem;
}

.table thead {
  background: #f1f5fa;
  color: #0f223d;
  font-weight: 700;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: #f9fbff;
}

.table-hover tbody tr:hover {
  background-color: #f1f7ff;
}

/* Form */
.form-control,
.form-select {
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  padding: 0.55rem 0.8rem;
  background: #fff;
  color: #0f223d;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--logo-mid);
  box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}

.form-check-input:checked {
  background-color: var(--logo-mid);
  border-color: var(--logo-mid);
}

label {
  font-weight: 700;
  font-size: 0.9rem;
  color: #24364a;
}

.text-muted {
  color: #75859d !important;
}

/* Alert */
.alert {
  border-radius: 12px;
  border: none;
  padding: 1rem 1.25rem;
  font-weight: 600;
}

.alert-primary {
  background: color-mix(in srgb, var(--logo-mid) 18%, #fff);
  color: var(--logo-navy);
}

.alert-danger {
  background: color-mix(in srgb, var(--logo-red) 12%, #fff);
  color: var(--logo-red);
}

.alert-success {
  background: rgba(34, 197, 94, 0.1);
  color: var(--bs-success);
}

.alert-warning {
  background: rgba(245, 158, 11, 0.12);
  color: var(--bs-warning);
}

.alert-info {
  background: rgba(6, 182, 212, 0.1);
  color: var(--bs-info);
}

/* Modal & Tooltip */
.modal-content {
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.tooltip-inner {
  background: var(--logo-navy);
  color: #fff;
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
}

/* Küçük yardımcılar */
.text-brand {
  color: var(--logo-mid) !important;
}

.bg-brand-soft {
  background: color-mix(in srgb, var(--logo-mid) 15%, #fff) !important;
}

.border-brand {
  border-color: color-mix(in srgb, var(--logo-mid) 50%, #fff) !important;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: #ccd5e1;
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a7b4c5;
}

/* Collapse yardımcıları */
.btn-reset {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.chev {
  margin-left: auto;
  transition: transform 0.18s ease;
  opacity: 0.9;
}

.chev.rot {
  transform: rotate(90deg);
}

.collapse {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.22s ease;
}

.collapse.show {
  max-height: 400px;
}

/* Breadcrumb için ufak vurgu */
.topbar .text-brand {
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--logo-mid) 10%, #fff);
}

/* Üst seviye menüler arasında aralık */
.nav-header,
.nav-link {
  margin-bottom: 6px;
}

.subnav .sub-link {
  margin-bottom: 4px;
}

.nav-header:last-child,
.nav-link:last-child {
  margin-bottom: 0;
}

/* ====================================================
   Başlıklar (h1–h6)
   ==================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Bulo", sans-serif;
  font-weight: 700;
  color: var(--brand-ink);
  line-height: 1.3;
  margin: 0 0 0.75rem;
}

h1 {
  font-size: 1.75rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1.1rem;
}

h5 {
  font-size: 1rem;
}

h6 {
  font-size: 0.9rem;
}

h1.text-brand,
h2.text-brand,
h3.text-brand,
h4.text-brand,
h5.text-brand,
h6.text-brand {
  color: var(--logo-mid) !important;
}

.section-title {
  border-bottom: 2px solid color-mix(in srgb, var(--logo-mid) 30%, #fff);
  padding-bottom: 0.3rem;
  margin-bottom: 1rem;
}

/* ====================================================
   FORM – kompakt kontroller
   ==================================================== */
.form-control,
.form-select,
textarea.form-control {
  font-size: 0.95rem;
  padding: 0.5rem 0.75rem;
  height: 2.4rem;
  border-radius: 10px;
  border: 1px solid var(--bs-border-color);
  background-color: #fff;
  color: var(--brand-ink);
}

textarea.form-control {
  height: auto;
  min-height: 120px;
  resize: vertical;
}

.input-group > .form-control,
.input-group > .form-select {
  height: 2.4rem;
  font-size: 0.95rem;
}

.form-control::placeholder {
  color: #94a3b8;
  opacity: 1;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--logo-mid);
  box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
  outline: 0;
}

.form-control:disabled,
.form-select:disabled,
textarea.form-control:disabled {
  background-color: #f5f7fb;
  color: #8a94a6;
  opacity: 1;
}

.form-label {
  font-weight: 700;
  color: #24364a;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
}

.form-text {
  color: #73839a;
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

.is-valid.form-control,
.is-valid.form-select {
  border-color: #22c55e;
}

.is-invalid.form-control,
.is-invalid.form-select {
  border-color: #ef4444;
}

.valid-feedback,
.invalid-feedback {
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

.form-floating > .form-control,
.form-floating > .form-select {
  height: 3rem;
  padding: 0.75rem 0.8rem 0.35rem;
  font-size: 0.95rem;
}

.form-floating > label {
  padding: 0.6rem 0.8rem;
  color: #6b7c90;
  font-weight: 600;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select:focus ~ label,
.form-floating > .form-select:not([value=""]) ~ label {
  opacity: 0.85;
  transform: scale(0.92) translateY(-0.4rem) translateX(0.1rem);
}

.form-select {
  padding-right: 2rem;
  background-position: right 0.6rem center;
}

.form-check-input {
  width: 1rem;
  height: 1rem;
  margin-top: 0.2rem;
  border-color: var(--bs-border-color);
}

.form-check-input:checked {
  background-color: var(--logo-mid);
  border-color: var(--logo-mid);
}

.form-check-label {
  font-weight: 600;
  color: #24364a;
  margin-left: 0.35rem;
  user-select: none;
}

.form-switch .form-check-input {
  width: 2.25rem;
  height: 1.15rem;
}

.form-switch .form-check-input:checked {
  background-color: color-mix(in srgb, var(--logo-mid) 85%, #fff);
}

.form-compact .form-control,
.form-compact .form-select {
  height: 2.2rem;
  font-size: 0.9rem;
  padding: 0.4rem 0.65rem;
}

.form-compact .form-floating > .form-control,
.form-compact .form-floating > .form-select {
  height: 2.7rem;
}

.form-compact .mb-3 {
  margin-bottom: 0.6rem !important;
}

.input-with-icon {
  position: relative;
}

.input-with-icon .bi {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.7;
}

.input-with-icon .form-control {
  padding-right: 2rem;
}

/* Collapse chevron auto-rotate (aria üzerinden) */
button[aria-expanded="true"] .chev {
  transform: rotate(90deg);
}

/* Küçük form elemanları ve düzenli tipografi */
.form-control-sm,
.form-select-sm {
  font-size: 0.9rem;
  padding: 0.35rem 0.5rem;
}

.content-textarea {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
}

.card-header {
  background-color: #f5f7fb;
}

.text-tomato {
  color: #ff5c5c;
}

.blink-badge {
  animation: blink 2s infinite;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
    background-color: #ffc107; /* Bootstrap warning */
  }

  50% {
    opacity: 0.6;
    background-color: #dc3545; /* Bootstrap danger (kırmızı) */
  }
}

.blink-badge-alert {
  animation: blink-alert 1s infinite;
}

@keyframes blink-alert {
  0%,
  100% {
    opacity: 1;
    background-color: #ffc107; /* Bootstrap warning */
    color: #212529;
  }

  50% {
    opacity: 0.5;
    background-color: #dc3545; /* Bootstrap danger */
    color: #fff;
  }
}

/* app.css – modal kabuğunu kesin sabitle */
.modal[role="dialog"] {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1055 !important;
}

/* Alt link aktifse (NavLink activeClass) */
.sub-link.active-link,
.nav-link.active-link,
.btn-reset.active-link {
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary) !important;
  font-weight: 600;
  border-radius: 0.5rem;
}

/* Pages başlığı açıkken görünüm + ok animasyonu */
.nav-header .chev {
  margin-left: auto;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
  opacity: 0.7;
}

.nav-header.open .chev,
.nav-header [aria-expanded="true"] .chev {
  transform: rotate(90deg);
  opacity: 1;
}

/* Parent butonu açıkken hafif vurgula */
.nav-header.open,
.nav-header [aria-expanded="true"] {
  background: var(--bs-light);
  border-radius: 0.5rem;
}

/* ---- Language Badges ---- */
.lang-badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.3em 0.6em;
  border-radius: 0.35rem;
  line-height: 1;
  color: #fff;
}

.lang-badge-en {
  background-color: #0d6efd;
} /* Blue */
.lang-badge-tr {
  background-color: #dc3545;
} /* Red */
.lang-badge-de {
  background-color: #e5a100;
  color: #1a1a1a;
} /* Gold */
.lang-badge-fr {
  background-color: #6f42c1;
} /* Purple */
.lang-badge-it {
  background-color: #198754;
} /* Green */
.lang-badge-default {
  background-color: #6c757d;
} /* Gray fallback */