/* Epey tarzı birim karşılaştırma alt bar — light / dark (data-color-mode) */



.bk-compare-dock {

  --bk-dock-bg: var(--kku-cm-surface, #ffffff);

  --bk-dock-bg-accent: color-mix(in srgb, var(--kku-brand, #c8102e) 10%, transparent);

  --bk-dock-border: var(--kku-cm-border, #e2e8f0);

  --bk-dock-text: var(--kku-cm-text, #0f172a);

  --bk-dock-muted: var(--kku-cm-text-muted, #64748b);

  --bk-dock-count: var(--kku-brand, #c8102e);

  --bk-dock-slot-bg: var(--kku-cm-surface-2, #f8fafc);

  --bk-dock-slot-border: var(--kku-cm-border, #e2e8f0);

  --bk-dock-slot-empty: var(--kku-cm-text-muted, #94a3b8);

  --bk-dock-remove-bg: rgba(15, 23, 42, 0.55);

  --bk-dock-ghost-bg: var(--kku-cm-surface-3, #f1f5f9);

  --bk-dock-ghost-border: var(--kku-cm-border, #dbe3ee);

  --bk-dock-ghost-text: var(--kku-cm-text-secondary, #334155);

  --bk-dock-link-bg: color-mix(in srgb, #0ea5e9 12%, transparent);

  --bk-dock-link-border: color-mix(in srgb, #0ea5e9 35%, transparent);

  --bk-dock-link-text: #0369a1;

  --bk-dock-shadow: 0 -10px 36px var(--kku-cm-shadow, rgba(15, 23, 42, 0.12));

  --bk-dock-scrollbar: color-mix(in srgb, var(--kku-brand, #c8102e) 35%, transparent);



  position: fixed;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 11500;

  padding: 0 0.75rem calc(0.65rem + env(safe-area-inset-bottom, 0px));

  pointer-events: none;

}

.bk-compare-dock[hidden] { display: none !important; }



html[data-color-mode="dark"] .bk-compare-dock {

  --bk-dock-bg: #0f172a;

  --bk-dock-bg-accent: color-mix(in srgb, var(--kku-brand, #c8102e) 14%, transparent);

  --bk-dock-border: rgba(255, 255, 255, 0.12);

  --bk-dock-text: #f1f5f9;

  --bk-dock-muted: #94a3b8;

  --bk-dock-count: #fda4af;

  --bk-dock-slot-bg: rgba(255, 255, 255, 0.04);

  --bk-dock-slot-border: rgba(255, 255, 255, 0.22);

  --bk-dock-slot-empty: rgba(226, 232, 240, 0.45);

  --bk-dock-remove-bg: rgba(0, 0, 0, 0.35);

  --bk-dock-ghost-bg: rgba(255, 255, 255, 0.06);

  --bk-dock-ghost-border: rgba(255, 255, 255, 0.14);

  --bk-dock-ghost-text: #e2e8f0;

  --bk-dock-link-bg: rgba(14, 165, 233, 0.15);

  --bk-dock-link-border: rgba(14, 165, 233, 0.35);

  --bk-dock-link-text: #7dd3fc;

  --bk-dock-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);

  --bk-dock-scrollbar: rgba(255, 255, 255, 0.25);

}



.bk-compare-dock__inner {

  pointer-events: auto;

  max-width: 1180px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: auto minmax(0, 1fr) auto;

  gap: 0.75rem 1rem;

  align-items: center;

  padding: 0.75rem 1rem;

  border-radius: 1rem 1rem 0.35rem 0.35rem;

  background:

    linear-gradient(135deg, var(--bk-dock-bg-accent), transparent 42%),

    var(--bk-dock-bg);

  border: 1px solid var(--bk-dock-border);

  box-shadow: var(--bk-dock-shadow);

  color: var(--bk-dock-text);

  animation: bk-dock-up 0.28s ease;

}

@keyframes bk-dock-up {

  from { transform: translateY(110%); opacity: 0; }

  to { transform: none; opacity: 1; }

}

.bk-compare-dock__head {

  display: flex;

  flex-direction: column;

  gap: 0.15rem;

  min-width: 7.5rem;

}

.bk-compare-dock__title {

  font-size: 0.82rem;

  font-weight: 800;

  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

  color: var(--bk-dock-text);

}

.bk-compare-dock__count {

  font-size: 0.72rem;

  font-weight: 700;

  color: var(--bk-dock-count);

}

.bk-compare-dock__slots {

  display: flex;

  gap: 0.5rem;

  overflow-x: auto;

  padding: 0.15rem 0 0.35rem;

  scrollbar-width: thin;

  scrollbar-color: var(--bk-dock-scrollbar) transparent;

}

.bk-compare-dock__slots::-webkit-scrollbar {

  height: 4px;

}

.bk-compare-dock__slots::-webkit-scrollbar-track {

  background: transparent;

}

.bk-compare-dock__slots::-webkit-scrollbar-thumb {

  background: var(--bk-dock-scrollbar);

  border-radius: 999px;

}

.bk-dock-slot {

  flex: 0 0 auto;

  width: 9.5rem;

  min-height: 3.6rem;

  border-radius: 0.65rem;

  border: 1px dashed var(--bk-dock-slot-border);

  background: var(--bk-dock-slot-bg);

  display: flex;

  align-items: center;

  gap: 0.45rem;

  padding: 0.45rem 0.55rem;

  position: relative;

}

.bk-dock-slot.is-filled {

  border-style: solid;

  border-color: color-mix(in srgb, var(--bk-tone, #c8102e) 70%, transparent);

  background: color-mix(in srgb, var(--bk-tone, #c8102e) 14%, var(--bk-dock-slot-bg));

}

.bk-dock-slot__swatch {

  width: 0.4rem;

  align-self: stretch;

  border-radius: 999px;

  background: var(--bk-tone, #c8102e);

}

.bk-dock-slot__name {

  margin: 0;

  font-size: 0.72rem;

  font-weight: 800;

  line-height: 1.25;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

  color: var(--bk-dock-text);

}

.bk-dock-slot__empty {

  margin: 0;

  width: 100%;

  text-align: center;

  font-size: 0.68rem;

  font-weight: 700;

  color: var(--bk-dock-slot-empty);

}

.bk-dock-slot__remove {

  position: absolute;

  top: 0.2rem;

  right: 0.25rem;

  width: 1.2rem;

  height: 1.2rem;

  border: 0;

  border-radius: 999px;

  background: var(--bk-dock-remove-bg);

  color: #fff;

  font-size: 0.65rem;

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  justify-content: center;

}

.bk-compare-dock__actions {

  display: flex;

  flex-wrap: wrap;

  gap: 0.4rem;

  align-items: center;

  justify-content: flex-end;

}

.bk-compare-dock__btn {

  appearance: none;

  border: 1px solid transparent;

  border-radius: 0.55rem;

  padding: 0.5rem 0.85rem;

  font-size: 0.78rem;

  font-weight: 800;

  cursor: pointer;

  text-decoration: none;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  white-space: nowrap;

}

.bk-compare-dock__btn:disabled { opacity: 0.4; cursor: not-allowed; }

.bk-compare-dock__btn--primary {

  background: linear-gradient(135deg, var(--kku-brand, #c8102e), #e11d48);

  color: #fff;

  box-shadow: 0 8px 18px color-mix(in srgb, var(--kku-brand, #c8102e) 30%, transparent);

}

.bk-compare-dock__btn--ghost {

  background: var(--bk-dock-ghost-bg);

  border-color: var(--bk-dock-ghost-border);

  color: var(--bk-dock-ghost-text);

}

.bk-compare-dock__btn--link {

  background: var(--bk-dock-link-bg);

  border-color: var(--bk-dock-link-border);

  color: var(--bk-dock-link-text);

}

.bk-compare-dock__minimize {

  width: 2rem;

  height: 2rem;

  border-radius: 0.5rem;

  border: 1px solid var(--bk-dock-ghost-border);

  background: var(--bk-dock-ghost-bg);

  color: var(--bk-dock-muted);

  cursor: pointer;

}

.bk-compare-fab {

  position: fixed;

  right: 1rem;

  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));

  z-index: 11501;

  width: 3.25rem;

  height: 3.25rem;

  border-radius: 999px;

  border: 0;

  background: linear-gradient(135deg, var(--kku-brand, #c8102e), #9f1239);

  color: #fff;

  box-shadow: 0 10px 28px color-mix(in srgb, var(--kku-brand, #c8102e) 40%, transparent);

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-size: 1.1rem;

}

.bk-compare-fab[hidden] { display: none !important; }

.bk-compare-fab__n {

  position: absolute;

  top: -0.15rem;

  right: -0.15rem;

  min-width: 1.25rem;

  height: 1.25rem;

  border-radius: 999px;

  background: #fbbf24;

  color: #111;

  font-size: 0.68rem;

  font-weight: 900;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0 0.25rem;

}



body.bk-dock-open { padding-bottom: 6.5rem; }



@media (max-width: 900px) {

  .bk-compare-dock__inner {

    grid-template-columns: 1fr;

    gap: 0.55rem;

  }

  .bk-compare-dock__actions { width: 100%; }

  .bk-compare-dock__btn--primary { flex: 1; }

}



/* Hero Ekle butonu dolu hali */

.bk-dock-add-current.is-on {

  outline: 2px solid #fbbf24;

  outline-offset: 2px;

}

.bk-dock-add-current.is-on .birim-hero-pdf-label::after {

  content: none;

}