body {
    display: flex;
    flex-direction: column;
    min-height: 100vh !important;
    margin: 0;
}

main {
    flex: 1; /* Main content will expand to fill available space */
}
.me-2 {
    display: block !important;
}

@media (max-width: 575.98px) {
    .me-2 {
        display: block !important;
    }
}

@media (min-width: 0px) and (max-width: 575.99px) {
    #footer-brand {
        width: 200px;
    }

    #navigation {
        background-size: 300%;
        background-position: 25% 10%;
    }

    .navbar-brand {
        width: 200px;
        z-index: 10;
    }

    #offerText {
        font-size: 0.8rem;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    #footer-brand {
        width: 225px;
    }

    #navigation {
        background-size: 200%;
    }

    .navbar-brand {
        width: 225px;
        z-index: 10;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    #footer-brand {
        width: 180px;
    }

    #navigation {
        background-size: 150%;
        background-position: 25% 10%;
    }

    .navbar-brand {
        width: 180px;
        z-index: 10;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    #footer-brand {
        width: 225px;
    }

    #navigation {
        background-size: 100%;
        background-position: 25% 10%;
    }

    .navbar-brand {
        width: 225px;
        z-index: 10;
    }
}

@media (min-width: 1400px) {
    #footer-brand {
        width: 225px;
    }

    #navigation {
        background-size: 100%;
        background-position: 25% 10%;
    }

    .navbar-brand {
        width: 225px;
        z-index: 10;
    }
}

.form-control:focus {
    border-color: #f08021;
    box-shadow: 0 0 0 0.1rem rgba(203, 46, 59, 0.5);
}

#menu li a {
    font-weight: bold;
}

#menu li a:hover {
    border-bottom: 0px;
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    z-index: -1;
    color: white !important;
    background-color: #f08021;
}

#menu {
    background-color: #eeeeee;
}

#filters .form-check-input {
    border: 2px solid rgba(240, 128, 33, 0.95);
}

#filters .form-check-input:checked {
    background-color: #f08021 !important;
}

#filters .form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(203, 46, 59, 0.25); /* Gölge rengini belirle */
}

#searchInput:focus {
    border-color: #f08021;
    box-shadow: 0 0px 0px #f08021 inset, 0 0 5px #f08021;
    outline: 0 none;
}

.fa-search {
    transition: transform 0.2s;
    /* Animation */
}

#search:hover > .fa-search {
    transform: scale(1.5);
}

#offerButton {
    background-color: #f08021;
    animation: wiggle 3s linear infinite;
}

.fa-envelope {
    transition: transform 0.2s;
    /* Animation */
}

#offerButton > span {
    transition: transform 0.2s;
    /* Animation */
    display: inline-block;
}

#offerButton:hover > .fa-envelope {
    transform: scale(1.1);
}

#offerButton:hover > span {
    transform: scale(1.1);
}

.lang:hover {
    transform: scale(1.1);
}

.lang {
    transition: transform 0.2s;
    /* Animation */
    display: inline-block;
}

/* Keyframes */
@keyframes wiggle {
    0%,
    7% {
        transform: rotateZ(0);
    }

    15% {
        transform: rotateZ(-15deg);
    }

    20% {
        transform: rotateZ(10deg);
    }

    25% {
        transform: rotateZ(-10deg);
    }

    30% {
        transform: rotateZ(6deg);
    }

    35% {
        transform: rotateZ(-4deg);
    }

    40%,
    100% {
        transform: rotateZ(0);
    }
}

/* Left Sidebar Menu CSS BAŞLANGIÇ */
#collapseExample11 .nav-item button:hover {
    background-color: #f08021 !important;
    color: white !important;
}

#collapseExample11 .nav-item button:hover > .fas {
    color: white !important;
}

#collapseExample11 .nav-link {
    color: black !important;
}

#collapseExample11 .nav-item a:hover {
    background-color: #f08021 !important;
    color: white !important;
    cursor: pointer;
}

#collapseExample11 .nav-item button a:hover > .fas {
    color: white !important;
}

#collapseExample11 .nav-link a {
    color: black !important;
}

@media all and (min-width: 992px) {
    .sidebar li {
        position: relative;
    }

    .sidebar li .submenu {
        display: none;
        position: absolute;
        left: 100%;
        min-width: 240px;
        transform: translateY(-30%); /* Menü tamamen yukarı çıkacak şekilde ayarlar */
    }

    [dir="rtl"] .sidebar li .submenu {
        right: 100%;
        left: auto;
    }

    .sidebar li:hover {
        background: var(--bs-light);
    }

    .sidebar li:hover > .submenu {
        display: block;
    }
}

/* ============ desktop view .end// ============ */

/* ============ small devices ============ */
@media (max-width: 991px) {
    .sidebar .submenu,
    .sidebar .dropdown-menu {
        position: static !important;
        margin-left: 0.7rem;
        margin-right: 0.7rem;
        margin-bottom: 0.5rem;
    }
    #menu {
        height: 0px !important;
        padding-top: 0px;
        padding-bottom: 0px;
    }
}

/* ============ small devices .end// ============ */

.sidebar .nav-link {
    font-weight: 500;
    color: var(--bs-dark);
}

.sidebar .nav-link:hover {
    background: var(--bs-light);
    color: var(--bs-primary);
}

#menu li a:hover {
    border-bottom: 0px;
    background: #f08021 !important;
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    z-index: -1;
    color: #ffffff !important;
}
/* Left Sidebar Menu CSS BİTİŞ */

button[aria-expanded="true"] > .fas.fa-chevron-circle-down {
    transform: rotate(180deg);
    transition: 0.3s;
}

/*for animation*/
.fas.fa-chevron-circle-down {
    transition: 0.1s;
}
#gruplar {
    background-color: #f08021;
}

#collapseExample11 .btn:hover > span {
    transform: scale(1.15);
    margin-left: 5px;
    /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

#collapseExample11 .btn {
    font-weight: 500;
}

#collapseExample11 .btn > span {
    transition: transform 0.2s;
    /* Animation */
}

button[aria-expanded="true"] > .fas.fa-chevron-circle-down {
    transform: rotate(180deg);
    transition: 0.3s;
}

/*for animation*/
.fas.fa-chevron-circle-down {
    transition: 0.1s;
}
#gruplar {
    background-color: #f08021;
}

#collapseExample11 .btn:hover > span {
    transform: scale(1.15);
    margin-left: 5px;
    /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

#collapseExample11 .btn {
    font-weight: 500;
}

#collapseExample11 .btn > span {
    transition: transform 0.2s;
    /* Animation */
}

#one-cikanlar .btn:hover {
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    color: white !important;
    background-color: #f08021;
}

#one-cikanlar .card:hover {
    transform: scale(1.05);
    /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

#one-cikanlar .card {
    transition: transform 0.2s;
    /* Animation */
}

#footer {
    opacity: 0.99;
}

#footer-brand {
    width: 70%;
}

.modal-content {
    padding-right: -17px !important;
}