/*
 * Sol menü ayracı.
 *
 * Ayraçlar önceden <ul id="navbar-nav"> içinde doğrudan <div> olarak duruyordu.
 * <ul> yalnız <li>/<script>/<template> alır; <div> hem geçersiz işaretlemeydi
 * (ekran okuyucu liste öğesi sayısını yanlış okur) hem de daraltılmış menüde
 * gizlenmiyordu — 70px'lik ikon şeridinde başıboş yatay çizgiler kalıyordu.
 *
 * Artık <li class="menu-divider"> ve genişlik yüzdesi burada; Blade'de satır içi
 * style tekrar etmiyor.
 */
.navbar-menu .navbar-nav .menu-divider {
    height: 0;
    margin: 1.25rem auto 0.5rem;
    padding: 0;
    width: 80%;
    border-bottom: 1px solid var(--vz-vertical-menu-item-color, rgba(255, 255, 255, 0.15));
    opacity: 0.25;
    list-style: none;
}

/*
 * Daraltılmış menüde (ikon şeridi) ayraç ve grup başlığı gizlenir.
 * Velzon .menu-title'ı zaten gizliyor; ayraç yeni olduğu için burada.
 */
[data-sidebar-size="sm"] .navbar-menu .navbar-nav .menu-divider,
[data-sidebar-size="sm-hover"] .navbar-menu .navbar-nav .menu-divider {
    display: none;
}

/*
 * Aktif üst seviye öğeye sol şerit: Velzon yalnız metin rengini değiştiriyor
 * (bkz. --vz-vertical-menu-item-active-color) ve uzun menüde bu tek başına
 * göz taraması için zayıf kalıyor.
 *
 * DİKKAT: burada `.navbar-nav > .nav-item` yazılamaz. app.js menüye SimpleBar
 * uyguluyor ve öğeleri .simplebar-content içine alıyor, yani üst seviye <li>
 * artık #navbar-nav'ın doğrudan çocuğu değil. Çocuk seçici çıplak HTML'de
 * çalışır ama gerçek sayfada sessizce eşleşmez. Üst seviyeyi .menu-link
 * ayırt ediyor — alt öğeler (.nav-sm içindekiler) bu sınıfı taşımıyor.
 */
.navbar-menu .navbar-nav .nav-link.menu-link.active {
    box-shadow: inset 3px 0 0 0 var(--vz-vertical-menu-item-active-color, currentColor);
}

/*
 * Hover ile aktif ayrımı.
 *
 * Velzon hover ve aktif rengini aynı yapıyor (--vz-vertical-menu-item-hover-color
 * ve -active-color aynı değer), bu yüzden fareyle gezerken hangisinin gerçekten
 * açık sayfa olduğu anlaşılmıyordu. Aktif = sol şerit; hover = hafif zemin.
 *
 * Zemin currentColor'dan türetiliyor: uygulama açık menü (data-sidebar="light",
 * beyaz zemin) kullanıyor, sabit beyaz tint orada görünmüyordu. currentColor
 * hover'da tema rengine çözüldüğü için açık ve koyu menüde de iş görür.
 * color-mix desteklemeyen tarayıcı için önce nötr bir yedek veriliyor.
 */
.navbar-menu .navbar-nav .nav-link:hover {
    background-color: rgba(0, 0, 0, 0.04);
    background-color: color-mix(in srgb, currentColor 8%, transparent);
}

.navbar-menu .navbar-nav .nav-link.active:hover {
    background-color: rgba(0, 0, 0, 0.06);
    background-color: color-mix(in srgb, currentColor 13%, transparent);
}

/*
 * Klavye odağı. Velzon outline'ı kapatıyor; klavyeyle gezen kullanıcıda
 * hiçbir işaret kalmıyordu. :focus-visible olduğu için fare tıklamasında çıkmaz.
 */
.navbar-menu .navbar-nav .nav-link:focus-visible {
    outline: 2px solid var(--vz-vertical-menu-item-active-color, currentColor);
    outline-offset: -2px;
}

/*
 * Bölüm başlığı kontrastı (açık menü).
 *
 * Velzon'un --vz-vertical-menu-title-color değeri #919da9; beyaz zeminde
 * 2.76:1 veriyor ve başlıklar 11px olduğu için WCAG AA'nın istediği 4.5:1'in
 * altında kalıyor. Menü öğelerinin rengine (#6d7080) çekiliyor → 4.91:1.
 *
 * Yalnız data-sidebar="light" kapsamında: koyu menüde başlık #838fb9 ve
 * #132649 zemin üstünde 4.71:1 ile eşiği zaten geçiyor, oraya dokunmak
 * kontrastı düşürürdü.
 */
[data-sidebar="light"] .navbar-menu .navbar-nav .menu-title,
[data-sidebar="light"] .navbar-menu .navbar-nav .menu-title span {
    color: #6d7080;
}