body {
    height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
      font-family: "Lato", sans-serif;
  font-weight: 600;
  font-style: normal;
      background-color: #edf3fc;
    }
    .navbar{
        background: #f8f9fa;
        padding: 18px;
        box-shadow: 5px 5px 5px #DCDCDC;
    }
    .navbar .collapse .nav-item a{
        color: #383f43;
    }
    
    
   #navbar-2 .navbar{
        background: #f8f9fa;
        padding: 15px;
        box-shadow: 2px 2px 2px #DCDCDC;
    }
    #navbar-2 .navbar .collapse .nav-item a{
        color: #383f43;
    }
    
    
    
    

    
    .sidebar {
     max-height: calc(100vh - 56px); /* header hariç ekran boyu */
      overflow-y: auto; /* içerik fazla olursa kaydırma çıksın */
      background: #f8f9fa;
      color: #fff;
      padding-top: 20px;
      box-shadow: 5px 5px 5px #DCDCDC;
      /* Firefox modern scrollbar */
      scrollbar-width: thin;
      scrollbar-color: #D3D3D3;
    }
    .sidebar a {
      color: #000;
      text-decoration: none;
      display: block;
      padding: 10px 15px;
      border-radius: 8px;
      margin: 5px 10px;
    }
    
     .sidebar #s-link a:hover {
      background: #0dcaf0 !important;
      color: #fff;
    }
    
    .sidebar a:hover {
      background: rgba(255, 255, 255, 0.2) !important;
    }
    
   
    
    
    .sidebar .profil{
       width: 100%;
        padding: 5px;
        background: #edf3fc;
    }
    .sidebar .profil #profilMenu{
        width: 95%;
    }
     .sidebar .butonlar ul li a{
         font-weight: 550;
     }
     
     .sidebar .butonlar ul li a:hover{
         color: #000 !important;
         font-weight: 550;
     }
      

    /* Chrome, Safari modern scrollbar */
    .sidebar::-webkit-scrollbar {
      width: 6px;
    }
    .sidebar::-webkit-scrollbar-track {
      background: #D3D3D3;
      border-radius: 10px;
    }
    .sidebar::-webkit-scrollbar-thumb {
      background-color: #D3D3D3;
      border-radius: 10px;
    }
    .sidebar::-webkit-scrollbar-thumb:hover {
      background-color: #D3D3D3;
    }
    
    
    .sidebar .jeton_kazan{
         width: 100%;
       
       
    }
    
    .sidebar .jeton_kazan #jetonkazan{
        width: 90%;
    }
    
    
    
    
   
    
    .offcanvas {
     
      overflow-y: auto; /* içerik fazla olursa kaydırma çıksın */
      background: #f8f9fa;
      color: #000;
     
      box-shadow: 5px 5px 5px #DCDCDC;
      /* Firefox modern scrollbar */
      scrollbar-width: thin;
      scrollbar-color: #D3D3D3;
    }
    .offcanvas a {
      color: #000;
      text-decoration: none;
      display: block;
      padding: 10px 15px;
      border-radius: 8px;
      margin: 5px 10px;
    }
    
    .offcanvas #s-link a:hover {
      background: #0dcaf0 !important;
      color: #fff;
    }
    
    
    .offcanvas a:hover {
      background: rgba(255, 255, 255, 0.2);
    }
    
    .offcanvas .profil{
       width: 100%;
        padding: 5px;
        background: #edf3fc;
    }
    .offcanvas .profil #profilMenu{
        width: 95%;
    }
     .offcanvas .butonlar ul li a{
         font-weight: 550;
     }
     
     .offcanvas .butonlar ul li a:hover{
         color: #000 !important;
         font-weight: 550;
     }
      

    /* Chrome, Safari modern scrollbar */
    .offcanvas::-webkit-scrollbar {
      width: 6px;
    }
    .offcanvas::-webkit-scrollbar-track {
      background: #D3D3D3;
      border-radius: 10px;
    }
    .offcanvas::-webkit-scrollbar-thumb {
      background-color: #D3D3D3;
      border-radius: 10px;
    }
    .offcanvas::-webkit-scrollbar-thumb:hover {
      background-color: #D3D3D3;
    }
    
    
    .offcanvas .jeton_kazan{
         width: 100%;
       
       
    }
    
    .offcanvas .jeton_kazan #jetonkazan{
        width: 90%;
    }
    
    
    
    
    .contenti {
     
       flex: 1;
   
  margin-top: 80px;   /* header yüksekliği kadar boşluk */
  padding: 20px;
    }
    
    .contenti select{
     width: 100%;
     padding: 10px;
     border-radius: 10px;
    }
    
    .navbar-brand {
      font-weight: 600;
    }
    
    #blue-box{
        background: #f8f9fa;
        color: #383f43;
       box-shadow: 0 4px 8px 0 #DCDCDC, 0 6px 20px 0 #DCDCDC;
    }
    
    #blue-box .title{
        background: #edf3fc !important;
        color: #383f43;
       
    }
    
    @media (min-width: 992px) {
      .sidebar {
        position: fixed;
        width: 250px;
        top: 56px; /* header yüksekliği */
        left: 0;
      }
      .contenti {
        flex: 1;
  margin-left: 250px; /* sidebar genişliği kadar boşluk */
  margin-top: 80px;   /* header yüksekliği kadar boşluk */
  padding: 20px;
      }
    }
    
   footer {
      background: #f8f9fa;
      color: #383f43;
      padding: 15px;
      text-align: center;
      box-shadow: 5px 5px 5px 8px #DCDCDC;
    }