/* ==========================================================================
   Proje: ACİZANE Portal
   Paket: HIZIRBEY Design System
   Bileşen: Navigation — `site-panel` varyantı
   Dosya: themes/default/assets/css/hds/components/navigation/variants/site-panel.css
   Açıklama: Public sol/sağ kenar menüsünün iç görünümü: degrade kimlik
             başlığı, altında açılan bağlantı paneli, iç içe alt menüler.
             Panel yüzeyi (zemin, çerçeve, gölge) kabuğun yerleşim
             sarmalayıcısındadır: css/navigation/navigation_site_shell.css.
   Yazar: Mehmet Kalli
   Oluşturuldu: 18.10.2026 · T2.3 (public-navigation.css'ten ayrıldı)
   Sürüm: 1.0.0
========================================================================== */

/* ---> Kimlik başlığı */

.hds-navigation.variant-site-panel > .hds-navigation__identity {
  margin: 0;
}

.hds-navigation.variant-site-panel :is(.hds-navigation__identity-trigger, .hds-navigation__identity-link) {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 10px 12px;
  color: #ffffff;
  background: linear-gradient(180deg, #477fab 0%, #356d99 100%);
  border: 0;
  border-radius: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  text-shadow: 0 1px 0 rgb(0 0 0 / 18%);
}

.hds-navigation.variant-site-panel :is(.hds-navigation__identity-trigger, .hds-navigation__identity-link):hover,
.hds-navigation.variant-site-panel .hds-navigation__identity-trigger[aria-expanded="true"] {
  color: #ffffff;
  background: linear-gradient(180deg, #3d77a4 0%, #2e638d 100%);
}

/* <--- Kimlik başlığı */

/* ---> Liste ve ilk düzey bağlantı */

.hds-navigation.variant-site-panel > .hds-navigation__list {
  width: 100%;
  gap: 3px;
  margin: 0;
  padding: 4px 0 5px;
}

.hds-navigation.variant-site-panel > .hds-navigation__list > .hds-navigation__item {
  width: 100%;
}

.hds-navigation.variant-site-panel > .hds-navigation__list > .hds-navigation__item--link > .hds-navigation__link {
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  color: #0b57d0;
  background: transparent;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.hds-navigation.variant-site-panel > .hds-navigation__list > .hds-navigation__item--link > .hds-navigation__link:hover,
.hds-navigation.variant-site-panel > .hds-navigation__list > .hds-navigation__item.is-active > .hds-navigation__link {
  background: #e7edf6;
}

/* <--- Liste ve ilk düzey bağlantı */

/* ---> İç içe alt menü */

.hds-navigation.variant-site-panel .hds-navigation__submenu {
  position: static;
  width: 100%;
  min-width: 0;
  gap: 3px;
  margin: 0;
  padding: 4px 0 5px 14px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.hds-navigation.variant-site-panel .hds-navigation__submenu .hds-navigation__link {
  box-sizing: border-box;
  width: 100%;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
}

/* <--- İç içe alt menü */

/* ---> Kimlik paneli (başlığa tıklayınca açılan liste) */

.hds-navigation.variant-site-panel > .hds-navigation__list[data-hds-navigation-identity-panel] {
  position: static;
  min-width: 0;
  gap: 0;
  padding: 0;
  background: #f4f7fa;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.hds-navigation.variant-site-panel > .hds-navigation__list[data-hds-navigation-identity-panel] > .hds-navigation__item {
  border-top: 1px solid #d4dee6;
}

.hds-navigation.variant-site-panel > .hds-navigation__list[data-hds-navigation-identity-panel] .hds-navigation__submenu .hds-navigation__link {
  color: #253640;
  background: #f4f7fa;
  border-radius: 0;
}

.hds-navigation.variant-site-panel > .hds-navigation__list[data-hds-navigation-identity-panel] .hds-navigation__submenu .hds-navigation__link:hover {
  background: #e4edf4;
}

.hds-navigation.variant-site-panel > .hds-navigation__list[data-hds-navigation-identity-panel] .hds-navigation__item.is-active > .hds-navigation__link {
  color: #174f78;
  background: #d9e8f3;
  box-shadow: inset 3px 0 0 #2f78ad;
}

/* <--- Kimlik paneli */