.btn-share {
       --btn-color:rgba(var(--bs-dark-rgb));
       position: relative;
       padding: 16px 32px;
       font-family: Roboto, sans-serif;
       font-weight: 500;
       font-size: 16px;
       line-height: 1;
       color: white;
       background: none;
       border: none;
       outline: none;
       overflow: hidden;
       cursor: pointer;
       filter: drop-shadow(0 2px 8px rgba(39, 94, 254, 0.32));
       transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
   }

   .btn-share::before {
       position: absolute;
       content: "";
       top: 0;
       left: 0;
       z-index: -1;
       width: 100%;
       height: 100%;
       background: var(--btn-color);
       border-radius: 24px;
       transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
   }

   .btn-share .btn-text,
   .btn-share .btn-icon {
       display: inline-flex;
       vertical-align: middle;
       transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
   }

   .btn-share .btn-text {
       transition-delay: 0.05s;
   }

   .btn-share .btn-icon {
       margin-left: 8px;
       transition-delay: 0.1s;
   }

   .btn-share .social-icons {
       position: absolute;
       top: 50%;
       left: 0;
       right: 0;
       display: flex;
       margin: 0;
       padding: 0;
       list-style-type: none;
       transform: translateY(-50%);
   }

   .btn-share .social-icons li {
       flex: 1;
   }

   .btn-share .social-icons li a {
       display: inline-flex;
       vertical-align: middle;
       transform: translateY(55px);
       transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
   }

   .btn-share .social-icons li a:hover {
       opacity: 0.5;
   }

   .btn-share:hover::before {
       transform: scale(1.2);
   }

   .btn-share:hover .btn-text,
   .btn-share:hover .btn-icon {
       transform: translateY(-55px);
   }

   .btn-share:hover .social-icons li a {
       transform: translateY(0);
   }

   .btn-share:hover .social-icons li:nth-child(1) a {
       transition-delay: 0.15s;
   }

   .btn-share:hover .social-icons li:nth-child(2) a {
       transition-delay: 0.2s;
   }

   .btn-share:hover .social-icons li:nth-child(3) a {
       transition-delay: 0.25s;
   }

   .blogdetailtopimg {
       width: 100%;
       height: 100%;
       border-radius: 10px;
       max-height: 600px;
   }
   
   .commentorlike
 {
     color:black;
 }
    .comment h2
    {
        color:red;
    }
        .comments-section {
    max-width: auto;
    margin: 20px auto;
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.comments-sectionh3 {
    margin-bottom: 15px;
    font-size: 2rem;
    color: #333;
}

/* Yorum yazma kutusu */
.comment-box {
    margin-bottom: 20px;
}

.comment-input {
    width: 100%;
    height: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: none;
    font-size: 16px;
    margin-bottom: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.comment-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.submit-button {
    display: inline-block;
    background: black;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.submit-button:hover {
    background: #0056b3;
}

/* Yorum listesi */
.comments-list {
    margin-top: 20px;
}

.comment {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.comment:last-child {
    border-bottom: none;
}

.username {
    font-weight: bold;
    color: black;
    margin-right: 10px;
}

.user-comment {
    margin: 5px 0 0 0;
    color: #555;
}

.adminres{
    
     background-color:black;
    border:1px solid black;
            color:white;
    margin-top:1rem;

 }
    #adminpic{
        width:4rem;
        height:4rem;
        border-radius:50%;
    }