.faded-background {
    width: 100%; /* div genişliği */
    height: 200px; /* div yüksekliği */
    background: linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
    /* Yukarıdaki background gradient, sol ve sağ kenarlardan ortaya doğru siyah bir geçiş yapar */
    }

    /* Başlangıçta navigasyonu gizle */
    .navigation {
    display: none; /* Navigasyonu gizle */
    position: fixed; /* Navigasyonu üstte sabitler */
    top: 0; /* Üst kenara yapıştır */
    width: 98%; /* Tam sayfa genişliğine ayarla */
    background: #fff; /* Arka plan rengi beyaz */
    z-index: 1000; /* Diğer içeriklerin üstünde görünmesini sağlar */
    transition: top 0.3s; /* Navigasyonun görünmesi için yumuşak geçiş */
    }

    /* Navigasyon bağlantıları için stil */
    .navigation a {
    padding: 10px;
    display: inline-block;
    color: #000; /* Bağlantı rengi */
    text-decoration: none; /* Altı çizili efekti kaldır */
    transition: background-color 0.5s ease; /* Arkaplan rengi değişiklikleri için yumuşak geçiş */
    font-family: 'Roboto', sans-serif;
    border-radius: 5px;
    border:solid #000 1.5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Hafif gölge efekti */
    top: 0; /* Üst kenara yapıştır */
    background: #fff; /* Arka plan rengi beyaz */

    }

    .navigation a:active {
    transform: scale(0.9); /* Linki biraz küçült */
    background-color:chocolate; /* Aktif linkin arka plan rengini değiştir */
    border:solid #000 1.5px;
    border-radius: 5px;
    margin:1%;
    font-family: 'Roboto', sans-serif;
    }

    .navigation a.active {
    background-color: #fff; /* Aktif linkin arka plan rengi */
    border:solid #000 1.5px;
    border-radius: 5px;
    margin:1%;
    font-family: 'Roboto', sans-serif;
    background-color: #000;
    color:#fff;

    }
    /* İçerik bölümleriniz için stil */
    .section {
    height: auto; /* Örnek yükseklik */
    padding-top: 50px; /* Navigasyon menüsü için üstten boşluk bırak */
    box-sizing: border-box; /* padding'i yükseklik hesaplamasına dahil et */
    }
   
    html {
    scroll-behavior: smooth;
    margin:0px;
    padding:0px;
    }
    .scrollable-div {
    overflow-x: auto; /* Yatay kaydırmayı etkinleştir */
    white-space: nowrap; /* İçerikleri aynı satırda tut */
    max-width: 98%; /* Maksimum genişlik */
    white-space: nowrap;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    }
    .scrollable-div a {
    display: inline-block; /* Her linki blok olarak göster */
    margin-right: 10px; /* Linkler arası boşluk */
    text-decoration: none; /* Altı çizili efekti kaldır */
    }
    /* Hide scrollbar for Chrome, Safari and Opera */
    .scrollable-div::-webkit-scrollbar {
    display: none;
    }
    .rectangle {
        position: relative;
        padding: 3%;
        margin: 3%;
        background-color: white;
        box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
        font-family: 'Roboto', sans-serif;
    }
    .small_menu  {
            width: 90px;
            height: 50px;
            margin-right: 5px;
            cursor: pointer;
            text-shadow: #555;
            margin-top: -5%;
        }

    #myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: red;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 4px;
    }

    #myBtn:hover {
    background-color: #555;
    } 

    /*-------------Accordian-----------------*/
    h1 {
    text-align: center;
    margin: 1em 0;
    }

    .accordion {
    max-width: 50vw;
    margin: 0 auto;
    }

    .accordion-item {
    border-top: 0px solid;
    color: #333;
    border:0px !important;
    border-radius: 20px;
    background-color: transparent !important;
    }

    .accordion-item h2 {
    padding: 1em;
    margin: 0;
    cursor: pointer;
    font-size: 18pt;
    }

    .accordion-content {
    max-height: 0;
    /* Set a default max-height, but don't display it */
    overflow: hidden;
    /* Hide the content */
    transition: max-height 0.4s ease-out;
    /* Add a transition effect when sliding down (and up) the content */
    padding: 0 1em;
    background-color: transparent !important;
    border-radius: 20px;
    }

    .accordion-content p {
    padding: 1em 0;
    margin: 0;
    }

    /* Add this class to .accordion-content when the accordion item is active/open */
    .accordion-content.active {
    max-height: auto;
    /* Adjust as needed */
    }

    /*adding the + and - signs*/
    .accordion-item h2 {
    position: relative;
    padding-right: 30px;
    /* Adjust as needed */
    }

    .accordion-item h2::before {
    content: "+";
    position: absolute;
    right: 10px;
    /* Adjust as needed */
    }

    .accordion-item.active h2::before {
    content: "-";
    }

    /* For mobile screens */
    @media (max-width: 767px) {
    .accordion {
        max-width: 100vw;
        margin: 0 auto;
    }
    }
  


/* bootstrap-icons yerine satır içi SVG (yazı tipi dosyası indirilmez) */
.qrm-ico { width: 1em; height: 1em; fill: currentColor; vertical-align: -.125em; }