:root {
    --main-color: #35294f;
    --accent-color: #b7b3c1;
    --border-color: #b7b4bf;
}

.custom-breadcrumb { --bs-breadcrumb-divider: '>'; font-size: .9rem; align-items: center; }
.custom-breadcrumb a { font-size: .8rem; color: #b7b4bf; text-decoration: none; transition: color .2s ease; }
.custom-breadcrumb a:hover { color: var(--main-color); }
.custom-breadcrumb .breadcrumb-item.active { font-size: .8rem; color: var(--main-color); font-weight: 600; }


/* Sitemap ana kutu */
.sitemap-box {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 22px 24px;
  height: 100%;
  box-shadow: 0 10px 28px rgba(53,41,79,0.08);
  transition: 0.3s;
}

.sitemap-box:hover {
  box-shadow: 0 14px 40px rgba(53,41,79,0.12);
}

.sitemap-title {
  font-size: 2rem;
  font-weight: 700;
  color: #35294f;
}

.sitemap-box h2 {
  font-size: 1.3rem;
  position: relative;
  font-weight: 600;
  color: var(--main-color);
  margin-bottom: 22px; /* liste ile aradaki boşluk */
  padding-bottom: 10px; /* çizgiye nefes */
}

.sitemap-box h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42px;
  height: 3px;
  background: var(--main-color);
  border-radius: 2px;
}

/* Başlık */
.sitemap-box h5 {
  color: var(--main-color);
  font-weight: 600;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
  letter-spacing: .3px;
}

/* Liste */
.sitemap-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Ana item */
.sitemap-box > ul > li {
  margin-bottom: 10px;
  font-weight: 500;
}

/* Link */
.sitemap-box a {
  color: #35294f;
  text-decoration: none;
  display: inline-block;
  transition: 0.25s;
  position: relative;
}

/* Hover efekti */
.sitemap-box a:hover {
  padding-left: 10px;
  color: #000;
}

/* Mini sol çizgi */
.sitemap-box a::before {
  content: "›";
  position: absolute;
  left: -12px;
  opacity: 0;
  transition: 0.25s;
  color: var(--accent-color);
}

.sitemap-box a:hover::before {
  opacity: 1;
  left: -6px;
}

/* Alt seviye (kategori derinliği) */
.sitemap-box ul ul {
  margin-top: 6px;
  margin-left: 16px;
  padding-left: 10px;
  border-left: 2px solid rgba(183,179,193,0.4);
}

.sitemap-box ul ul li {
  font-size: 0.95rem;
  margin-bottom: 6px;
}

/* 3. seviye varsa */
.sitemap-box ul ul ul {
  margin-left: 14px;
  border-left: 2px dashed rgba(183,179,193,0.3);
  font-size: 0.92rem;
}

.kategoriler  {
  max-height: 768px;
  overflow-y: auto;
  padding-right: 6px;
}

.markalar {
  max-height: 768px;
  overflow-y: auto;
  padding-right: 6px;
}

/* Liste */
.sitemap-box .markalar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sitemap-box > .markalar > ul > li {
  margin-bottom: 10px;
  font-weight: 500;
}

/* Genel Kapsayıcı Sınıflar */
.kategoriler, 
.markalar {
    /* 1. Standart Özellikler (Firefox ve Yeni Nesil Tarayıcılar) */
    scrollbar-width: thin; /* Çubuğu inceltir */
    scrollbar-color: var(--main-color) #f1f1f1; /* [Thumb] [Track] */

    /* Scrollbar'ın her zaman görünmesi veya içerik taşınca çıkması için */
    overflow-y: auto;
}

/* 2. WebKit Tabanlı Tarayıcılar (Chrome, Edge, Safari, Opera) */
.kategoriler::-webkit-scrollbar, 
.markalar::-webkit-scrollbar {
    width: 6px; /* Dikey scroll genişliği */
    height: 6px; /* Yatay scroll yüksekliği */
}

.kategoriler::-webkit-scrollbar-track, 
.markalar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.kategoriler::-webkit-scrollbar-thumb, 
.markalar::-webkit-scrollbar-thumb {
    background: var(--main-color);
    border-radius: 10px;
    border: 1px solid #f1f1f1; /* Daha yumuşak bir görünüm için track ile arasında boşluk hissi */
}

/* Hover durumunda rengi biraz koyulaştıralım (Opsiyonel ama şıktır) */
.kategoriler::-webkit-scrollbar-thumb:hover, 
.markalar::-webkit-scrollbar-thumb:hover {
    filter: brightness(0.9);
}