html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

/* Sağdan açılan offcanvas panellerin ortak genişliği.
   Tek yerden parametre: --app-offcanvas-width değişkenini düzenle, tüm
   panellere uygulansın. Mobilde (xs) panel ekranı kaplar.
   Kullanım: <div class="offcanvas offcanvas-end offcanvas-app ..."> */
:root {
    --app-offcanvas-width: 600px;
}

.offcanvas-end.offcanvas-app {
    width: var(--app-offcanvas-width) !important;
    max-width: 100vw;
}

@media (max-width: 575.98px) {
    .offcanvas-end.offcanvas-app {
        width: 100vw !important;
    }
}

/* ---------------------------------------------------------------------------
   Small-screen sidebar drawer polish.
   Below the desktop breakpoint the dark off-canvas menu (html.sidebar-enable)
   slides in over the page. Without depth/backdrop it reads as a hard black slab
   pasted onto the bright content — jarring. Give it a lift shadow and a soft
   backdrop so it reads as an intentional slide-out drawer. The backdrop sits
   below the topbar (z 1001), so the topbar + hamburger stay bright and the menu
   can be closed easily. Desktop (>=1200, inline sidebar) is untouched.
   --------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    html.sidebar-enable .left-side-menu {
        z-index: 1002;
        box-shadow: 6px 0 30px rgba(0, 0, 0, .25);
    }

    html.sidebar-enable #wrapper::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(18, 22, 26, .4);
        z-index: 1000;
        pointer-events: none;
        animation: app-drawer-backdrop .2s ease both;
    }
}

@keyframes app-drawer-backdrop {
    from { opacity: 0; }
    to   { opacity: 1; }
}