/**
 * Mocker — site & sidebar scrollbar (dark / light)
 * Firefox: scrollbar-color | WebKit: ::-webkit-scrollbar-*
 */

:root,
[data-theme="dark"] {
  --site-scrollbar-w: 10px;
  --site-scrollbar-w-slim: 6px;
  --site-scrollbar-track: rgba(14, 19, 28, 0.55);
  --site-scrollbar-thumb-color: rgba(22, 119, 255, 0.45);
  --site-scrollbar-thumb-hover-color: #69b1ff;
  --site-scrollbar-thumb: linear-gradient(
    180deg,
    rgba(96, 165, 250, 0.75) 0%,
    rgba(22, 119, 255, 0.55) 45%,
    rgba(22, 119, 255, 0.65) 100%
  );
  --site-scrollbar-thumb-hover: linear-gradient(
    180deg,
    #8fc0f0 0%,
    #69b1ff 40%,
    #1677ff 100%
  );
  --site-scrollbar-thumb-sidebar: linear-gradient(
    180deg,
    rgba(96, 165, 250, 0.65) 0%,
    rgba(22, 119, 255, 0.4) 100%
  );
}

[data-theme="light"] {
  --site-scrollbar-track: rgba(226, 232, 240, 0.85);
  --site-scrollbar-thumb-color: rgba(22, 119, 255, 0.4);
  --site-scrollbar-thumb-hover-color: #1677ff;
  --site-scrollbar-thumb: linear-gradient(
    180deg,
    rgba(96, 165, 250, 0.65) 0%,
    rgba(22, 119, 255, 0.5) 50%,
    rgba(22, 119, 255, 0.45) 100%
  );
  --site-scrollbar-thumb-hover: linear-gradient(
    180deg,
    #69b1ff 0%,
    #1677ff 55%,
    #0958d8 100%
  );
  --site-scrollbar-thumb-sidebar: linear-gradient(
    180deg,
    rgba(22, 119, 255, 0.55) 0%,
    rgba(22, 119, 255, 0.35) 100%
  );
}

/* Ana sayfa kaydırma (html + body) */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--site-scrollbar-thumb-color) var(--site-scrollbar-track);
}

html::-webkit-scrollbar {
  width: var(--site-scrollbar-w);
  height: var(--site-scrollbar-w);
}

html::-webkit-scrollbar-track {
  background: var(--site-scrollbar-track);
  border-radius: 999px;
}

html::-webkit-scrollbar-thumb {
  background: var(--site-scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.12);
}

html::-webkit-scrollbar-thumb:hover {
  background: var(--site-scrollbar-thumb-hover);
  box-shadow:
    inset 0 0 0 1px rgba(96, 165, 250, 0.2),
    0 0 12px -2px rgba(22, 119, 255, 0.45);
}

html::-webkit-scrollbar-corner {
  background: var(--site-scrollbar-track);
}

body.site-body {
  scrollbar-width: thin;
  scrollbar-color: var(--site-scrollbar-thumb-color) var(--site-scrollbar-track);
}

body.site-body::-webkit-scrollbar {
  width: var(--site-scrollbar-w);
  height: var(--site-scrollbar-w);
}

body.site-body::-webkit-scrollbar-track {
  background: var(--site-scrollbar-track);
  border-radius: 999px;
}

body.site-body::-webkit-scrollbar-thumb {
  background: var(--site-scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.12);
}

body.site-body::-webkit-scrollbar-thumb:hover {
  background: var(--site-scrollbar-thumb-hover);
  box-shadow:
    inset 0 0 0 1px rgba(96, 165, 250, 0.2),
    0 0 12px -2px rgba(22, 119, 255, 0.45);
}

/* Sidebar */
.sidebar-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--site-scrollbar-thumb-color) transparent;
}

.sidebar-scroll::-webkit-scrollbar {
  width: var(--site-scrollbar-w-slim);
}

.sidebar-scroll::-webkit-scrollbar-track {
  margin: 4px 0;
  background: transparent;
  border-radius: 999px;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
  background: var(--site-scrollbar-thumb-sidebar);
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
}

.sidebar-scroll:hover::-webkit-scrollbar-thumb,
.sidebar-scroll:focus-within::-webkit-scrollbar-thumb {
  background: var(--site-scrollbar-thumb-hover);
}

/* İçerik alanları — modal, arama, sohbet vb. */
.site-scrollbar,
.news-modal__scroll,
.search-palette__scroll,
.site-chat-messages {
  scrollbar-width: thin;
  scrollbar-color: var(--site-scrollbar-thumb-color) transparent;
}

.site-scrollbar::-webkit-scrollbar,
.news-modal__scroll::-webkit-scrollbar,
.search-palette__scroll::-webkit-scrollbar,
.site-chat-messages::-webkit-scrollbar {
  width: var(--site-scrollbar-w-slim);
  height: var(--site-scrollbar-w-slim);
}

.site-scrollbar::-webkit-scrollbar-track,
.news-modal__scroll::-webkit-scrollbar-track,
.search-palette__scroll::-webkit-scrollbar-track,
.site-chat-messages::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 999px;
}

.site-scrollbar::-webkit-scrollbar-thumb,
.news-modal__scroll::-webkit-scrollbar-thumb,
.search-palette__scroll::-webkit-scrollbar-thumb,
.site-chat-messages::-webkit-scrollbar-thumb {
  background: var(--site-scrollbar-thumb-sidebar);
  border-radius: 999px;
}

.site-scrollbar::-webkit-scrollbar-thumb:hover,
.news-modal__scroll::-webkit-scrollbar-thumb:hover,
.search-palette__scroll::-webkit-scrollbar-thumb:hover,
.site-chat-messages::-webkit-scrollbar-thumb:hover {
  background: var(--site-scrollbar-thumb-hover);
}

@media (prefers-reduced-motion: reduce) {
  html::-webkit-scrollbar-thumb,
  body.site-body::-webkit-scrollbar-thumb,
  .sidebar-scroll::-webkit-scrollbar-thumb {
    transition: none;
  }
}
