:root,
body.ss-tema-sari {
  --ss-primary: #faa61a;
  --ss-primary-deep: #9a5f00;
  --ss-accent: #ffd24d;
  --ss-primary-rgb: 250, 166, 26;
  --ss-body-bg: #fff4dc;
  --ss-surface: #fffdf6;
  --ss-surface-soft: #ffe9bf;
  --ss-border: #f1d39a;
  --ss-text-main: #5f3b00;
  --ss-text-muted: #8c6a33;
  --ss-sidebar-bg: #c07a00;
  --ss-sidebar-text: #fff3d8;
  --ss-sidebar-active: #faa61a;
  --ss-on-primary: #ffffff;
}

body.ss-tema-kirmizi {
  --ss-primary: #d7263d;
  --ss-primary-deep: #000000;
  --ss-accent: #ff4d6d;
  --ss-primary-rgb: 215, 38, 61;
  --ss-body-bg: #fff0f2;
  --ss-surface: #fffafb;
  --ss-surface-soft: #ffd9df;
  --ss-border: #efb7c1;
  --ss-text-main: #5e0d19;
  --ss-text-muted: #8c3d49;
  --ss-sidebar-bg: #2a0308;
  --ss-sidebar-text: #ffd4db;
  --ss-sidebar-active: #d7263d;
  --ss-on-primary: #ffffff;
}

body.ss-tema-acik {
  --ss-primary: #2563eb;
  --ss-primary-deep: #1e3a8a;
  --ss-accent: #0891b2;
  --ss-primary-rgb: 37, 99, 235;
  --ss-body-bg: #f3f7ff;
  --ss-surface: #ffffff;
  --ss-surface-soft: #e8efff;
  --ss-border: #d8e3fb;
  --ss-text-main: #1d2a45;
  --ss-text-muted: #5f6f94;
  --ss-sidebar-bg: #1e3a8a;
  --ss-sidebar-text: #dbe7ff;
  --ss-sidebar-active: #2563eb;
  --ss-on-primary: #ffffff;
}

body.ss-tema-koyu {
  --ss-primary: #61a0ff;
  --ss-primary-deep: #4f79ff;
  --ss-accent: #35c9ff;
  --ss-primary-rgb: 97, 160, 255;
  --ss-body-bg: #080f1f;
  --ss-surface: #121b2f;
  --ss-surface-soft: #182440;
  --ss-border: #223353;
  --ss-text-main: #e5ecff;
  --ss-text-muted: #93a4cf;
  --ss-sidebar-bg: #050a16;
  --ss-sidebar-text: #b7c7ee;
  --ss-sidebar-active: #61a0ff;
  --ss-on-primary: #08162d;
}

body {
  background: var(--ss-body-bg);
  color: var(--ss-text-main);
}

.main-header {
  background: var(--ss-surface) !important;
  border-bottom: 1px solid var(--ss-border);
}

.content-wrapper,
.main-footer {
  background: transparent !important;
  color: var(--ss-text-main);
}

.main-sidebar {
  background: linear-gradient(180deg, var(--ss-sidebar-bg), color-mix(in srgb, var(--ss-sidebar-bg) 55%, #000000)) !important;
}

.brand-mark.ss-brand {
  background: linear-gradient(135deg, var(--ss-primary), var(--ss-accent));
  color: #fff;
}

.brand-copy .brand-text {
  color: #fff;
}

.brand-copy small {
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.03em;
}

.nav-sidebar .nav-link {
  color: var(--ss-sidebar-text);
  border-radius: 12px;
  margin: 0.15rem 0.5rem;
}

.nav-sidebar .nav-link.active {
  background: var(--ss-sidebar-active) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.nav-sidebar .nav-link:not(.active):hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.navbar-user,
.navbar-user span,
.navbar-nav .nav-link {
  color: var(--ss-text-main) !important;
}

.dropdown-menu {
  background: var(--ss-surface);
  border: 1px solid var(--ss-border);
  box-shadow: 0 18px 32px rgba(12, 20, 40, 0.16);
}

.navbar-status.ss-status {
  background: rgba(var(--ss-primary-rgb), 0.13);
  color: var(--ss-primary-deep);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
}

.status-dot.ss-dot {
  background: var(--ss-primary);
  box-shadow: 0 0 0 6px rgba(var(--ss-primary-rgb), 0.2);
}

.yp-page-hero {
  padding: 1.2rem 1.35rem;
  border: 1px solid var(--ss-border);
  border-radius: 24px;
  background: linear-gradient(125deg, rgba(var(--ss-primary-rgb), 0.15), rgba(var(--ss-primary-rgb), 0.04) 55%, var(--ss-surface));
}

.yp-page-hero h1 {
  font-size: 1.62rem;
  margin: 0 0 0.35rem;
}

.yp-page-hero p {
  margin: 0;
  color: var(--ss-text-muted);
}

.card,
.ss-ozet-kart,
.ss-grafik-kart {
  background: var(--ss-surface);
  border: 1px solid var(--ss-border);
  border-radius: 20px;
  box-shadow: 0 14px 28px rgba(12, 20, 40, 0.08);
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--ss-border);
}

.yp-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.ss-kart-ikon {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(var(--ss-primary-rgb), 0.14);
  color: var(--ss-primary-deep);
  font-size: 1.1rem;
}

.btn-primary,
.yp-list-add-btn {
  border-radius: 999px;
  font-weight: 700;
  border: none;
  background: linear-gradient(130deg, var(--ss-primary), var(--ss-primary-deep));
  color: var(--ss-on-primary) !important;
}

.btn-primary:hover,
.yp-list-add-btn:hover {
  filter: brightness(0.96);
  color: var(--ss-on-primary) !important;
}

.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:visited,
.yp-list-add-btn:focus,
.yp-list-add-btn:active,
.yp-list-add-btn:visited {
  color: var(--ss-on-primary) !important;
}

.btn-outline-primary {
  color: var(--ss-primary-deep);
  border-color: rgba(var(--ss-primary-rgb), 0.45);
}

.btn-outline-primary:hover {
  background: rgba(var(--ss-primary-rgb), 0.12);
  color: var(--ss-primary-deep);
}

.table {
  color: var(--ss-text-main);
}

.table thead th {
  background: rgba(var(--ss-primary-rgb), 0.16);
  border-bottom: 1px solid var(--ss-border);
  color: var(--ss-primary-deep);
}

.table td,
.table th {
  border-top: 1px solid var(--ss-border);
}

.table-hover tbody tr:hover {
  background: var(--ss-surface-soft);
}

.badge-info {
  background: rgba(var(--ss-primary-rgb), 0.26);
  color: var(--ss-primary-deep);
}

.ss-bilgi-listesi dt {
  color: var(--ss-text-muted);
  font-weight: 700;
}

.ss-bilgi-listesi dd {
  margin-bottom: 1rem;
}

.text-muted,
.ss-form-yardim {
  color: var(--ss-text-muted) !important;
}

.form-control,
.custom-select,
select.form-control {
  border-radius: 14px;
  border: 1px solid var(--ss-border);
  min-height: 2.45rem;
  box-shadow: none;
  background-color: var(--ss-surface);
  color: var(--ss-text-main);
}

.form-control:focus,
.custom-select:focus,
select.form-control:focus {
  border-color: var(--ss-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--ss-primary-rgb), 0.2);
}

select.form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ss-primary) 50%),
    linear-gradient(135deg, var(--ss-primary) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 3px),
    calc(100% - 10px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.1rem;
}

.form-check {
  position: relative;
  padding-left: 2rem;
}

.form-check-input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  margin-left: -2rem;
  border: 1.7px solid var(--ss-border);
  background-color: var(--ss-surface);
  transition: all 0.2s ease;
}

.form-check-input:checked {
  background-color: var(--ss-primary);
  border-color: var(--ss-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--ss-primary-rgb), 0.2);
}

.form-check-input[type="radio"] {
  border-radius: 999px;
}

.form-check-label {
  font-weight: 600;
  color: var(--ss-text-main);
}

.ss-grafik-alani {
  position: relative;
  min-height: 280px;
}

.ss-grafik-alani canvas {
  width: 100% !important;
  height: 100% !important;
}

body.ss-tema-koyu .navbar-status.ss-status {
  color: #d6e4ff;
}

body.ss-tema-koyu .dropdown-menu,
body.ss-tema-koyu .modal-content {
  color: var(--ss-text-main);
}

body.ss-tema-koyu .table-hover tbody tr:hover {
  background: #1a2947;
}

@media (max-width: 991.98px) {
  .navbar-ops {
    display: none !important;
  }

  .ss-tema-secici .form-control {
    min-width: 112px;
    font-size: 0.74rem;
    padding: 0.12rem 1.55rem 0.12rem 0.5rem;
  }

  .navbar-user span:last-child {
    display: none;
  }

  .content-header .yp-page-hero {
    border-radius: 16px;
    padding: 0.9rem 1rem;
  }

  .content-header .yp-page-hero h1 {
    font-size: 1.2rem;
  }

  .card,
  .ss-ozet-kart,
  .ss-grafik-kart {
    border-radius: 14px;
  }
}