.container-son {
       width: 100% !important;
       justify-content: center;
   }

   .service-container-2 {
       margin-top: 25px;
   }


   .etiket {
       background-color: #ffc107;
       color: #a30d0d;
       padding: 4px 8px;
       border-radius: 4px;
       font-size: 0.8rem;
       margin-left: 8px;
       margin-top: 33px;

   }

   #edit-alert {
       display: flex;
       /* İçeriği hizalamak için flex container */
       justify-content: center;
       /* Yatayda ortalama */
       align-items: center;
       /* Dikeyde ortalama */
       width: 100%;
       /* Tüm satırı kaplasın */
       height: 80px;
       /* Dikey ortalama için sabit yükseklik */
       background-color: #ffeeba;
       color: #856404;
       border-radius: 6px;
       border: 1px solid #ffeeba;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }

   .alert-span {
       font-size: 16px;
       font-weight: 500;
       text-align: center;
   }

   .alert-box.fade-out {
       opacity: 0;
       transform: translateY(-20px);
       /* yukarı doğru kayma */
       margin-top: -60px;
       /* yukarıdaki içerik sert sıçramasın diye */
   }

   #books {
       display: inline-block;
       width: 360px;
       background: #fff;
       border-radius: 15px;
       box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
       transition: .3s;
       font-family: 'Segoe UI', sans-serif;
       overflow: hidden;
       position: relative;
       cursor: pointer;
       margin: 6px;
   }

   .navbar-center {
       display: flex;
       justify-content: center;
       /* align-items: center; */
       gap: 24px;
       flex-wrap: wrap;
       width: 100%;

   }

   .navbar-logo,
   .navbar-menu {
       display: flex;
       align-items: center;
   }

   .card {
       width: 360px;
       background: #fff;
       border-radius: 15px;
       box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
       transition: .3s;
       font-family: 'Segoe UI', sans-serif;
       margin: 20px auto;
       overflow: hidden;
       position: relative;
       cursor: pointer
   }

   .card:hover {
       transform: translateY(-5px);
       box-shadow: 0 10px 25px rgba(0, 0, 0, .15)
   }

   .badge {
       position: absolute;
       top: 10px;
       right: 10px;
       background: linear-gradient(to right, rgba(169, 3, 41, 1) 0%, rgba(196, 72, 72, 1) 44%, rgba(170, 34, 56, 1) 100%);
       color: #fff;
       padding: 5px 10px;
       font-size: 11px;
       font-weight: 600;
       letter-spacing: 1px;
       text-transform: uppercase;
       border-radius: 10px;
       box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
       z-index: 10
   }

   .tilt {
       overflow: hidden
   }

   .img {
       height: 200px;
       overflow: hidden
   }

   .img img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform .5s
   }

   .card:hover .img img {
       transform: scale(1.05)
   }

   .info {
       padding: 20px
   }

   .cat {
       font-size: 11px;
       font-weight: 600;
       letter-spacing: 1px;
       text-transform: uppercase;
       color: #71717A;
       margin-bottom: 5px
   }

   .title {
       font-size: 18px;
       font-weight: 700;
       color: #18181B;
       margin: 0 0 10px;
       letter-spacing: -.5px
   }

   .desc {
       font-size: 13px;
       color: #52525B;
       line-height: 1.4;
       margin-bottom: 12px
   }

   .feats {
       display: flex;
       gap: 6px;
       margin-bottom: 15px
   }

   .feat {
       font-size: 10px;
       background: #F4F4F5;
       color: #71717A;
       padding: 3px 8px;
       border-radius: 10px;
       font-weight: 500
   }

   .bottom {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 12px
   }

   .price {
       display: flex;
       flex-direction: column
   }

   .old {
       font-size: 13px;
       text-decoration: line-through;
       color: #A1A1AA;
       margin-bottom: 2px
   }

   .new {
       font-size: 20px;
       font-weight: 700;
       color: #18181B
   }

   .btn {
       background: linear-gradient(45deg, #18181B, #27272A);
       color: #fff;
       border: none;
       border-radius: 10px;
       padding: 8px 15px;
       font-size: 13px;
       font-weight: 600;
       cursor: pointer;
       display: flex;
       align-items: center;
       gap: 6px;
       transition: .3s;
       box-shadow: 0 3px 10px rgba(0, 0, 0, .1)
   }

   .btn:hover {
       background: linear-gradient(45deg, #27272A, #3F3F46);
       transform: translateY(-2px);
       box-shadow: 0 5px 15px rgba(0, 0, 0, .15)
   }

   .btn:before {
       content: '';
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 100%;
       background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent);
       transition: .5s
   }

   .btn:hover:before {
       left: 100%
   }

   .icon {
       transition: transform .3s
   }

   .btn:hover .icon {
       transform: rotate(-10deg) scale(1.1)
   }

   .meta {
       display: flex;
       justify-content: space-between;
       align-items: center;
       border-top: 1px solid #F4F4F5;
       padding-top: 12px
   }

   .rating {
       display: flex;
       align-items: center;
       gap: 2px
   }

   .rcount {
       margin-left: 6px;
       font-size: 11px;
       color: #71717A
   }

   .stock {
       font-size: 11px;
       font-weight: 600;
       color: #22C55E
   }



   /* Edit User Alanı */

   .user-edit-rols {
       display: block !important;
       /* width: 100%; */
       text-align: left !important;
       /* gap: 12px; */
   }

   .user-rols {
       display: flex !important;
       align-items: baseline !important;
       justify-content: left !important;
       /* gap: 8px; */
       /* input ile label arasında boşluk */
   }



   .create-border {
       border: 1px solid #ccc;
       border-radius: 8px;
   }

   .yayin-durumu-group {
       display: flex;
       flex-direction: column;
       gap: 8px;
       margin-top: 6px;
       align-items: flex-start;
       /* Sol hizalama */
       margin: 0px 0px 5px 10px;
   }


   .yayin-durumu-option {
       display: flex;
       align-items: center;
       gap: 8px;
   }

   .yayin-durumu-label {
       font-weight: 500;
       color: #18181B;
       text-align: left;
   }

   .yayin-durumu-option label {
       margin-bottom: 0px;
       margin-top: 4px;
   }

   .article-forms label {
       font-weight: bold;
   }


   /* Açılır menü  */

   .accordion-content {
       max-height: 0;
       overflow: hidden;
       transition: max-height 0.3s ease;
       padding-left: 20px;
       display: none;
   }

   .accordion-content li {
       margin: 5px 0;
   }

   .accordion-item.open .accordion-content {
       max-height: 500px;
       /* Yeterli bir yükseklik, içeriğe göre ayarlanabilir */
       display: block;
   }

   @media (max-width: 1200px) {

       .Baslik {
           display: flex !important;
           visibility: visible !important;
       }

       .logo {
           display: inline-block !important;
           visibility: visible !important;
       }

       .buton-group {
           /* display: block !important; */
           display: inline-flexbox !important;
           margin: 5px 0 10px 0 !important;
       }

       .container-son {
           width: 100% !important;
           margin-top: 20px !important;
       }



   }

   @media (max-width: 880px) {
       .Baslik {
           /* display: inline-flex !important;
        visibility: visible !important; */
           display: flex !important;
           visibility: visible !important;
       }

       /* .service-container-2{
        margin-top: 210px;
            } */

       .logo {
           display: inline-block !important;
           visibility: visible !important;
       }

       .buton-group {
           /* display: block !important; */
           /* display: block !important;
        margin-top: 30px !important; */

           display: flexbox !important;
           margin: 5px 0 10px 0 !important;
       }

       .buton-group a {
           margin-bottom: 5px;
       }

       .container-son {
           width: 100% !important;
           margin-top: 90px !important;

       }

       .navbar-nav {
           display: İnline-block;
           /* Listeyi blok düzene sokar */
           padding-left: 0;
           /* Varsayılan boşluğu kaldırır */
           margin: 0;
           /* Varsayılan dış boşluğu kaldırır */
           list-style: none;
           /* Noktalı liste görünümünü kaldırır */
       }

       .navbar-nav li {
           display: block;
           /* Her <li> elemanını blok olarak gösterir */
           margin-bottom: 10px;
           /* Alt alta boşluk bırakır */
       }

       .navbar-nav li a {
           display: block;
           /* Linkin tüm satırı kaplamasını sağlar */
           padding: 8px 12px;
           /* İç boşluk ekler */
           text-decoration: none;
           /* Alt çizgiyi kaldırır */
           color: #333;
           /* Yazı rengi */
       }

       .navbar-nav li a:hover {
           background-color: #f0f0f0;
           /* Üzerine gelince arka plan rengi */
       }
       .container {
           width: 80%;
       }

       .container-articles{
        margin-top: 10px;
       }

       .container-dream{
        margin-top: 30px;
       }

   }

   @media (max-width: 797px) {
       .Baslik {
           display: flex !important;
           visibility: visible !important;
       }

       .logo {
           display: inline-block !important;
           visibility: visible !important;
       }

       .buton-group {
           display: block !important;
           margin-top: 30px !important;
           /* width: max-content !important; */
                   display: flow-root !important;

       }

       .buton-group a {
           margin-bottom: 5px;
           display: block;
       }

       .container-son {
           width: 100% !important;
           margin-top: 190px !important;
       }

       .container {
           width: 80%;
       }

       /* Tüm menü listesi için temel stil */
       .navbar-nav,
       .navbar-nav ul {
           list-style: none !important;;
           /* Noktalı liste görünümünü kaldırır */
           padding: 0 !important;
           /* Varsayılan iç boşluğu kaldırır */
           margin: 0 !important;
           /* Varsayılan dış boşluğu kaldırır */
           

           display: grid !important;
       }

       /* Her <li> öğesini blok olarak alt alta getirir */
       .navbar-nav li {
           display: block !important;
           /* Her öğe alt alta gelsin */
           margin-bottom: 8px !important;
           /* Öğeler arasında dikey boşluk bırakır */
       }

       /* Tüm <a> etiketlerini blok hale getirir ve stil kazandırır */
       .navbar-nav li a {
           display: block !important;
           /* Tüm satırı kaplasın, kolay tıklanabilir olsun */
           padding: 10px 12px !important;
           /* İç boşluk ekler */
           text-decoration: none !important;
           /* Alt çizgiyi kaldırır */
           color: #C3360B !important;
           /* Yazı rengini koyu yapar */
           background-color: #ffff;
           /* Arka plan rengi */
           border-radius: 4px !important;
           /* Köşeleri yumuşatır */
       }

       /* Alt menüler (accordion-content) için özel stil */
       .accordion-content {
           padding-left: 15px !important;
           /* Ana menüden biraz içeride görünür */
       }

       /* Alt menüdeki <li> öğeleri de dikey dizilir */
       .accordion-content li {
           display: block !important;
           /* Alt menü öğeleri alt alta gelsin */
           margin-bottom: 6px !important;
           /* Alt menü öğeleri arasında boşluk */
       }

       /* Alt menüdeki <a> etiketleri için stil */
       .accordion-content li a {
           display: block !important;
           padding: 8px 10px;
           background-color: #eee;
           border-radius: 3px !important;
           color: #444;
       }

        .container-articles{
        margin-top: 160px;
       }

        .container-dream{
        margin-top: 150px;
       }
    }

   @media (max-width: 477px) {
       .Baslik {
           display: flex !important;
           height: auto !important;
       }

       .logo {
           display: block !important;
           visibility: visible !important;
       }

       .buton-group {
           /* display: block !important; */
           display: flex !important;
           margin-top: 0px !important;
       }



       .navbar-center {
           display: inline-block !important;
           flex-wrap: nowrap !important;


       }

       .navbar-nav {
           display: inline-block !important;
           flex-wrap: nowrap !important;
           margin-top: 10px !important;
       }

       .container-son {
           width: 100% !important;
           margin-top: 230px !important;
       }

       .container {
           width: 80%;
       }

         .container-articles{
        margin-top: 200px;
       }

          .container-dream{
        margin-top: 190px;
       }

   }


   @media (max-width:400px) {
       .card {
           width: 90%
       }

       .title {
           font-size: 16px
       }

       .img {
           height: 180px
       }

       .bottom {
           flex-direction: column;
           align-items: flex-start;
           gap: 10px
       }

       .price {
           margin-bottom: 5px
       }

       .btn {
           width: 100%;
           justify-content: center
       }

       .container-son {
           width: 100% !important;
           margin-top: 230px !important;
       }

   }