/*BASE START*/

body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    overflow-x: hidden;
    scroll-behavior: smooth;
    background-color: #000;
    margin: 0;
}

html {
    background-color: #000;
}

/*BASE END*/

/*Variables start*/

/*Variables end*/

/*UTILS START*/
.no-padding {
    padding: 0px;
}

.no-margin {
    margin: 0px;
}

a {
    text-decoration: none !important;
}

/*UTILS END*/

.mainMenuNavbar {
    display: flex;
    width: 100%;
    height: 60px;
    align-items: center;
    justify-content: space-between;
    box-shadow: 1px 1px 200px 1px grey;
    background-color: #000;
    position: relative;
    padding: 0px 20px;
}

.forMeNavbar {
    display: flex;
    width: 100%;
    height: 60px;
    align-items: center;
    justify-content: space-between;
    box-shadow: 1px 1px 200px 1px grey;
    background-color: #262626;
    position: relative;
    padding: 0px 20px;
}

.forMeNavbarWebContent {
    display: flex;
    width: 100%;
    height: 60px;
    align-items: center;
    justify-content: space-between;
    -webkit-box-shadow: 1px 1px 5px 0px rgba(38, 38, 38, 0.7);
    -moz-box-shadow: 1px 1px 5px 0px rgba(38, 38, 38, 0.7);
    box-shadow: 1px 1px 5px 0px rgba(38, 38, 38, 0.7);
    background-color: white;
    position: relative;
    z-index: 100;
    padding: 0px 20px;
}

.forMeNavbarWebContentContainer {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 5px;
    align-items: center;
    justify-content: space-between;
    column-gap: 10px;
}

.ForMeNavbarWebEachItem {
    height: 100%;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    background-color: white;
    text-decoration: none;
    position: relative;
    z-index: 101;
    cursor: pointer;
}

.ForMeNavbarWebEachItemActive {
    height: 100%;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    background-color: white;
    text-decoration: none;
    border-bottom: 2px solid #262626;
    position: relative;
    z-index: 101;
    cursor: pointer;
}

.ForMeNavbarWebEachItem:hover .ForMeNavbarWebEachItemText {
    color: blue;
}

.ForMeNavbarWebEachItemActive:hover .ForMeNavbarWebEachItemText {
    color: blue;
}

.ForMeNavbarWebEachItemText {
    color: #262626;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    vertical-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    position: relative;
}

.ForMeNavbarWebBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background-color: #dc3545;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.forMeWebContainer {
    width: 100%;
    height: 100%;
}

.logoContainer {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.logoIcon {
    display: none;
    color: white;
    font-size: 18px;
}

.mainMenuNavbarButtons {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #262626;
    /* height: 100%; */
    transition:
        background-color 0.4s ease-in-out,
        color 0.4s ease-in-out;
    column-gap: 5px;
    text-decoration: none;
    margin-right: 8px;
}

.mainMenuNavbarButtons h5 {
    color: white;
    transition: color 0.4s ease-in-out;
    font-size: 17px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.mainMenuNavbarButtons i {
    color: white;
    transition: color 0.4s ease-in-out;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.mainMenuNavbarButtons:hover {
    background-color: white;
}

.mainMenuNavbarButtons:hover.mainMenuNavbarButtons h5 {
    color: #262626;
}

.mainMenuNavbarButtons:hover.mainMenuNavbarButtons i {
    color: #262626;
}

.mainContainer {
    flex-grow: 1;
    width: 100%;
    display: grid;
    place-items: center;
    min-height: 100vh;
}

.mainContainerAdverts {
    flex-grow: 1;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.mobileHidden {
    display: none;
}

.webHidden {
    display: block;
}

.mainContainerForMe {
    flex-grow: 1;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.mainContainerChat {
    flex-grow: 1;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;

    background: url(https://wallpapercat.com/w/full/8/3/2/195228-2560x1600-desktop-hd-motorcycle-background.jpg);
    background-size: cover;
}

.mainContainerchooseCategory {
    flex-grow: 1;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url(https://wallpapercat.com/w/full/8/3/2/195228-2560x1600-desktop-hd-motorcycle-background.jpg);
    background-size: cover;
}

.loginSignupMainContainer {
    flex-grow: 1;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: url(https://wallpapercat.com/w/full/8/3/2/195228-2560x1600-desktop-hd-motorcycle-background.jpg);
    background-size: cover;
    background-position: center;
    padding: 10px;
}

.loginFormContainer {
    max-width: 600px;
    /* Set a max-width for the form container */
    width: 100%;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding: 30px;
    row-gap: 15px;
}

.signupFormContainer {
    max-width: 600px;
    min-height: 600px;
    height: auto;
    /* Set a max-width for the form container */
    width: 100%;
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.signupPageTitle {
    color: #ffffff;
    text-align: center;
    width: 100%;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.signup-contract-link {
    color: #000000 !important;
    text-decoration: underline;
}

.signup-contract-link:hover {
    color: #333333 !important;
}

.confirmEmailFormContainer {
    max-width: 600px;
    height: 450px;
    /* Set a max-width for the form container */
    width: 100%;
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.mainContainerCreateAdvert {
    flex-grow: 1;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: url(https://wallpapercat.com/w/full/8/3/2/195228-2560x1600-desktop-hd-motorcycle-background.jpg);
    background-size: cover;
}

.createAdvertLabel {
    color: white;
}

.editAdvertLabel {
    color: black;
    font-weight: 600;
}

.card-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    /* slide-in animasyonu kartları geçici olarak ekran dışına taşıyor,
       yatay kaymayı engelle */
    overflow: hidden;
}

.myCard {
    background-color: #f0f0f0;
    opacity: 0;
    height: 500px;
    /* Initial state for animation */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.myCard:hover .cardImage {
    opacity: 0.8;
    transition:
        opacity 0.4s ease-in-out,
        transform 0.4s ease-in-out;
    transform: scale(1.2);
}

.myCard:hover .cardBottomContainer {
    display: flex;
    animation: cardButtonShowUp 1s ease-in-out;
}

.cardImage {
    height: 100%;
    width: 100%;
    position: relative;
    object-fit: cover;
    transition:
        opacity 0.4s ease-in-out,
        transform 0.4s ease-in-out;
}

.cardBottomContainer {
    height: 10%;
    background-color: black;
    padding: 15px 60px;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 45%;
    border-radius: 10px;
}

.cardBottomContainerText {
    color: white;
    margin: 0px;
    font-size: 1.2rem;
}

.indexBannerButtonText {
    color: black;
    text-align: center;
    margin: 0px;
    padding: 5px 10px;
}

@keyframes slide-in-top {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-left {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-right {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes cardButtonShowUp {
    0% {
        background-color: #262626;
    }

    100% {
        background-color: black;
    }
}

@keyframes cardButtonShowUpGrey {
    0% {
        background-color: #333333;
    }

    100% {
        background-color: #262626;
    }
}

.slideBanner {
    animation: slide-in-top 0.8s ease-out forwards;
    animation-delay: 0.2s;
}

.card1 {
    animation: slide-in-left 0.8s ease-out forwards;
    animation-delay: 0.2s;
}

.card2 {
    animation: slide-in-right 0.8s ease-out forwards;
    animation-delay: 0.2s;
}

.card3 {
    animation: slide-in-left 0.8s ease-out forwards;
    animation-delay: 0.2s;
}

.card4 {
    animation: slide-in-right 0.8s ease-out forwards;
    animation-delay: 0.2s;
}

.card5 {
    animation: slide-in-left 0.8s ease-out forwards;
    animation-delay: 0.2s;
}

.footer {
    width: 100%;
    background-color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    margin-top: auto;
    flex-shrink: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.footerHeaderSlickContainer {
    width: 100%;
    padding: 10px 0 0;
    row-gap: 10px;
    padding-bottom: 0;
}

.footer-bottom-container {
    background-color: #565656;
    color: white;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    row-gap: 10px;
    padding: 10px 20px;
    width: 100%;
    margin: 0;
}

.footer-bottom-container span {
    font-size: 14px;
}

.footer .your-slider,
.footer .your-slider.slick-slider,
.homepage-recent-section .your-slider,
.homepage-recent-section .your-slider.slick-slider {
    margin-bottom: 0 !important;
    position: relative;
    overflow: visible;
}

.footer .slick-list,
.homepage-recent-section .slick-list {
    overflow: hidden;
    margin: 0 52px;
}

.footer .slick-track,
.homepage-recent-section .slick-track {
    display: flex !important;
    align-items: stretch;
}

.homepage-recent-section {
    width: 100%;
    background: #1f1f1f;
    overflow: visible;
    position: relative;
    z-index: 2;
}

/* Grid + place-items:center bölümleri içeriğe göre daraltıp sağa kaydırıyordu */
.mainContainer.homepageMain {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

.mainContainer.homepageMain > * {
    width: 100%;
    max-width: 100%;
}

.homepage-recent-header {
    width: min(1100px, 92%);
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.homepage-recent-header h5 {
    color: #fff;
    margin: 0;
    font-size: 1.15rem;
}

.homepage-recent-all-link {
    color: #d0d5dd;
    text-decoration: none;
    font-size: 0.9rem;
}

.homepage-recent-all-link:hover {
    color: #fff;
    text-decoration: underline;
}

.homepage-recent-slider {
    width: min(1100px, 92%);
    margin: 0 auto;
}

.footer-stolen-header {
    width: min(1100px, 92%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0 18px;
}

.footer-stolen-header h5 {
    color: #fff;
    margin: 0;
    font-size: 1.15rem;
}

.footer-stolen-all-link {
    color: #d0d5dd;
    text-decoration: none;
    font-size: 0.9rem;
}

.footer-stolen-all-link:hover {
    color: #fff;
    text-decoration: underline;
}

.your-slider {
    min-height: 230px;
    display: block;
    width: min(1100px, 92%);
    margin: 0 auto 10px;
    position: relative;
    overflow: visible;
}

.your-slider.slick-initialized {
    display: block;
}

.your-slider .slick-slide {
    padding: 0 8px;
    height: auto;
    float: none;
}

.your-slider .slick-slide > div {
    height: 100%;
}

.your-slider a.slickImagesContainer {
    height: 210px;
    width: 100%;
    display: block;
    text-decoration: none;
}

.slickImages {
    height: 100%;
    width: 100%;
    position: relative;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 0.35s ease, filter 0.35s ease;
}

.slickImagesContainer {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #1a1a1a;
}

.slickImagesContainer.is-doping {
    border: 2px solid #f59e0b;
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.35), 0 8px 20px rgba(245, 158, 11, 0.18);
    background: #2a1f08;
}

.slick-doping-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.82);
    border: 1px solid #f59e0b;
    color: #fbbf24;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
}

.slickImagesContainer:hover .slickImages {
    transform: scale(1.05);
    filter: brightness(0.85);
}

.slickButtonContainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 2px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 28px 12px 12px;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.85) 70%);
    border-radius: 0 0 12px 12px;
    text-align: left;
}

.slickButtonContainerText {
    color: #fff;
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.slickButtonContainerMeta {
    color: #d0d5dd;
    font-size: 0.75rem;
    line-height: 1.2;
}

.footer-slick-arrow,
.your-slider .footer-slick-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 30 !important;
    width: 42px !important;
    height: 42px !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 50% !important;
    background: rgba(10, 10, 10, 0.92) !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 28px !important;
    line-height: 1 !important;
    padding: 0 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* slick-theme.css kendi ok karakterini :before ile basiyor, kapat */
.footer-slick-arrow::before,
.your-slider .footer-slick-arrow::before {
    content: none !important;
    display: none !important;
}

.footer-slick-arrow:hover,
.your-slider .footer-slick-arrow:hover {
    background: #fff !important;
    color: #111 !important;
    border-color: #fff !important;
}

.footer-slick-prev,
.your-slider .footer-slick-prev {
    left: 0 !important;
}

.footer-slick-next,
.your-slider .footer-slick-next {
    right: 0 !important;
}

.footer-slick-arrow.slick-disabled,
.your-slider .footer-slick-arrow.slick-disabled {
    opacity: 0.4 !important;
    cursor: default !important;
}

/* Varsayılan slick ok yazılarını gizle; özel okları kullan */
.your-slider .slick-prev:not(.footer-slick-arrow),
.your-slider .slick-next:not(.footer-slick-arrow) {
    display: none !important;
}

.footer-stolen-empty {
    width: min(1100px, 92%);
    font-size: 0.95rem;
}

.homepageBanner {
    width: 100%;
    height: 600px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bannerImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.homepageBannerTextBox {
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #00000088;
    display: flex;
    align-items: center;
    justify-content: center;
}

.homepageBannerTextBoxInner {
    height: 100%;
    width: 35%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0px 30px;
    row-gap: 20px;
}

.InnerBoxButton {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 10px;
}

.form-control:focus {
    border-color: #00000077;
    box-shadow: 0 0 0 0.2rem #00000077;
}

.pagination {
    --bs-pagination-focus-box-shadow: 0 0 5px 0.5px #262626;
}

.btn-toggle::before {
    display: inline-block;
    /* Ensure it behaves like an inline-block element */
    width: 1.25em;
    height: 1.25em;
    /* Add height to ensure it's square */
    line-height: 0;
    content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
    transition: transform 0.35s ease;
    /* Ensure transition is applied to transform */
    transform-origin: center;
    /* Correct transform-origin to center */
}

.btn-toggle[aria-expanded="true"]::before {
    transform: rotate(90deg);
    /* Rotate 90 degrees when expanded */
}

.advertSidebar {
    width: 280px;
    flex: 0 0 280px;
    max-height: 100vh;
    overflow-y: auto;
    display: flex;
    background-color: whitesmoke;
    border-right: 1px solid #e2e2e2;
}

/* ---- Sol filtre paneli ---- */

.listingFilterForm {
    width: 100%;
}

.listingFilterHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 1px solid #dcdcdc;
}

.listingFilterTitle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1c1c1c;
}

.listingFilterCount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background-color: #262626;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.listingFilterClear {
    font-size: 13px;
    color: #6c6c6c;
    text-decoration: none;
}

.listingFilterClear:hover {
    color: #000;
    text-decoration: underline;
}

.listingFilterGroup {
    margin-bottom: 14px;
}

.listingFilterLabel {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 600;
    color: #3d3d3d;
}

.listingFilterColors {
    max-height: 170px;
    overflow-y: auto;
    padding-right: 4px;
}

.listingFilterColors .form-check-label {
    font-size: 13px;
}

.listingFilterActions {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    margin-top: 4px;
    background-color: whitesmoke;
}

.tableWeb {
    display: flex;
}

.tableMobile {
    display: none;
}

/* .advertSidebar::-webkit-scrollbar {
    display: none;
} */

.collapse ul li {
    width: 100%;
    padding: 5px;
    display: flex;
    margin-top: 5px;
}

.collapse ul li a {
    text-decoration: none;
}

.btn-toggle::before {
    content: url("data: image/svg+xml, %3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' %3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6' /%3e%3c/svg%3e");
}

.navItem {
    background-color: #262626;
    transition:
        background-color 0.4s ease-in-out,
        color 0.4s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-decoration: none;
    padding: 20px 5px;
}

.navItem:hover {
    background-color: white;
    transition:
        background-color 0.4s ease-in-out,
        color 0.4s ease-in-out;
}

.navItem:hover .navItemText {
    color: black;
    transition: color 0.4s ease-in-out;
}

.navItemText {
    margin: 0px;
    color: white;
    text-align: center;
    font-size: 15px;
}

.sideBarAndContentMainContainer {
    width: 100%;
    display: flex;
}

.form-check-input:checked {
    background-color: black;
    border-color: black;
}

/* .tableImageContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
} */

.tableImage {
    width: 150px;
    object-fit: cover;
}

.tableData {
    text-align: center;
}

.forMeHeaderContainer {
    width: 100%;
    height: 60px;
    background-color: #ececec;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
}

.forMeMobileContent {
    width: 100%;
    height: 60px;
    background-color: white;
    padding: 20px;
}

.forMeHeaderText {
    margin: 0px;
    color: #262626dd;
    font-size: 16px;
    font-weight: 600;
}

.forMeItemContainer {
    width: 100%;
    height: 60px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid lightgrey;
    text-decoration: none;
    color: #262626;
}

.forMeItemText {
    color: #262626cc;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
}

.forMeItemChevron {
    color: #262626cc;
}

.forMeWebMainContainer {
    width: 100%;
    height: 100vh;
    display: flex;
}

.forMeWebContentMainContainer {
    width: 100%;
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.advertWebContentMainContainer {
    width: 100%;
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.advertWebContentMainContainerDescription {
    width: 100%;
    min-height: 50vh;
    padding: 0px;
    display: flex;
    justify-content: center;
}

.forMeWebContentRowContainer {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    min-height: calc(100dvh - 180px);
    height: auto;
    position: relative;
    z-index: 1;
}

.forMeWebContentRowContainer > .AdvertPageForMeWebContentCols {
    flex: 0 0 25%;
    max-width: 25%;
    position: relative;
    z-index: 10;
}

.forMeWebContentRowContainer > .forMeWebContentCols {
    flex: 1 1 0;
    min-width: 0;
    max-width: 75%;
}

.AdvertPageWebContentRowContainer {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    align-items: center;
}

.AdvertPageForMeWebContentCols {
    background-color: white;
    overflow: hidden;
}

.forMeWebContentCols {
    background-color: white;
    overflow: scroll;
}

.accordionContainer {
    height: 100%;
    overflow: visible;
    position: relative;
    z-index: 10;
}

.accordionContainer .accordion-body a,
.accordionContainer .accordion-body {
    position: relative;
    z-index: 11;
    cursor: pointer;
}

.accordionContainer::-webkit-scrollbar {
    display: none;
}

.forMeWebContentCols::-webkit-scrollbar {
    display: none;
}

.accordionItem {
    background-color: white !important;
}

.accordion-button:not(.collapsed) {
    background-color: white;
}

.accordion-button:focus {
    box-shadow: 0px 0px 5px 0.1px #262626;
}

#advertsTableBody td {
    text-align: center;
    /* Centers text horizontally */
    vertical-align: middle;
    /* Centers content vertically */
}

#advertsTableBodyStolen td {
    text-align: center;
    /* Centers text horizontally */
    vertical-align: middle;
    /* Centers content vertically */
}

.thead-dark tr th {
    text-align: center;
    /* Centers text horizontally */
    vertical-align: middle;
    /* Centers content vertically */
}

.carousel-item {
    max-height: 350px;
}

.carouselImage {
    object-fit: contain;
}

.carousel-item.active {
    object-fit: contain;
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-color: #262626;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background-size: 75% 65%;
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
    background-color: #262626;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background-size: 75% 65%;
}

.small-image-container {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.small-image {
    height: 100%;
    width: 100%;
}

.smallImageRow {
    row-gap: 10px;
    overflow-y: scroll;
    max-height: 300px;
    padding: 0px;
    overflow-x: hidden;
}

.row {
    --bs-gutter-x: 0px;
}

.smallImageRow::-webkit-scrollbar {
    display: none !important;
}

.advertTitle {
    font-size: 21px;
    font-weight: 700;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

.advertInfoList li {
    color: black;
    margin: 12px 0px;
    font-size: 14px;
    border-bottom: 1px solid lightgrey;
    padding: 2px;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    word-break: break-all;
    column-gap: 5px;
    padding-bottom: 5px;
}

.advertInfoList li span {
    font-weight: 600;
}

.advertInfoList {
    padding: 0px;
}

.advertInfos {
    flex: 1;
    text-align: right;
    font-weight: 400 !important;
}

.advertInfoOwnerContainer {
    background-color: #f4f4f4;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0px;
}

.advertOwnerPhoneContainer {
    width: 90%;
    border: 1px solid lightgrey;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    align-self: center;
    min-height: 50px;
    border-radius: 5px;
}

.advertInfoSendMessageContainer {
    width: 100%;
    padding: 0px 20px;
    column-gap: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.advertAccordionInnerContainer {
    padding: 10px;
    width: 100%;
    text-align: left;
}

.AdvertProductFeaturesLabelContainer {
    width: 100%;
    display: flex;
    align-items: center;
}

.AdvertProductFeaturesContainer {
    padding: 10px 20px;
    background-color: #26262611;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.AdvertProductAccessoriesContainer {
    padding: 10px 20px;
    background-color: #26262611;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.AdvertProductFeature {
    width: 20%;
    display: flex;
    align-items: center;
    column-gap: 5px;
}

.AdvertProductFeatureCheckContainer {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkPassive {
    display: none !important;
}

.accordion-content {
    visibility: hidden;
    transition:
        visibility 0s 0.3s,
        opacity 0.3s linear;
    opacity: 0;
}

.accordion-content.show {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

.messageBoxesContainer {
    width: 100%;
    height: 70%;
    padding: 0px 20px;
}

.messageBox {
    width: 100%;
    height: 100px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #3d3d3d11;
    column-gap: 15px;
}

.avatarImageContainer {
    width: 70px;
    height: 70px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatarImage {
    width: 70px;
    height: 70px;
    border-radius: 100%;
    object-fit: contain;
}

.messageBoxNameContainer {
    height: 100%;
    display: flex;
    padding: 5px;
    flex-direction: column;
    justify-content: space-around;
}

.single-line-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.--dark-theme {
    --chat-background: rgba(10, 14, 14, 0.95);
    --chat-panel-background: #131719;
    --chat-bubble-background: #14181a;
    --chat-add-button-background: #212324;
    --chat-send-button-background: #8147fc;
    --chat-text-color: #a3a3a3;
    --chat-options-svg: #a3a3a3;
}

/* body {
    background: url(https://images.unsplash.com/photo-1495808985667-ba4ce2ef31b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80);
    background-size: cover;
  } */

#chat {
    background: var(--chat-background);
    width: 70%;
    margin: 25px auto;
    box-sizing: border-box;
    padding: 1em;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    height: 100vh;
}

/* #chat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://images.unsplash.com/photo-1495808985667-ba4ce2ef31b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80) fixed;
    z-index: -1;
  } */
#chat .btn-icon {
    position: relative;
    cursor: pointer;
}

#chat .btn-icon svg {
    stroke: #fff;
    fill: #fff;
    width: 50%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#chat .chat__conversation-board {
    padding: 1em 0 2em;
    height: 91.5%;
    overflow: auto;
}

#chat .chat__conversation-board__message-container.reversed {
    flex-direction: row-reverse;
}

#chat
    .chat__conversation-board__message-container.reversed
    .chat__conversation-board__message__bubble {
    position: relative;
}

#chat
    .chat__conversation-board__message-container.reversed
    .chat__conversation-board__message__bubble
    span:not(:last-child) {
    margin: 0 0 2em 0;
}

#chat
    .chat__conversation-board__message-container.reversed
    .chat__conversation-board__message__person {
    margin: 0 0 0 1.2em;
}

#chat
    .chat__conversation-board__message-container.reversed
    .chat__conversation-board__message__options {
    align-self: center;
    position: absolute;
    left: 0;
    display: flex;
    align-items: center;
}

#chat .chat__conversation-board__message-container {
    position: relative;
    display: flex;
    flex-direction: row;
}

#chat
    .chat__conversation-board__message-container:hover
    .chat__conversation-board__message__options {
    display: flex;
    align-items: center;
}

#chat
    .chat__conversation-board__message-container:hover
    .option-item:not(:last-child) {
    margin: 0 0.5em 0 0;
}

#chat .chat__conversation-board__message-container:not(:last-child) {
    margin: 0 0 2em 0;
}

#chat .chat__conversation-board__message__person {
    text-align: center;
    margin: 0 1.2em 0 0;
    display: flex;
    align-items: center;
    row-gap: 5px;
    flex-direction: column;
}

#chat .chat__conversation-board__message__person__avatar {
    height: 35px;
    width: 35px;
    overflow: hidden;
    border-radius: 50%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
}

#chat .chat__conversation-board__message__person__avatar::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
}

#chat .chat__conversation-board__message__person__avatar img {
    height: 100%;
    width: auto;
}

#chat .chat__conversation-board__message__person__nickname {
    font-size: 9px;
    color: #484848;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: none;
}

#chat .chat__conversation-board__message__context {
    max-width: 55%;
    align-self: flex-end;
}

#chat .chat__conversation-board__message__options {
    align-self: center;
    position: absolute;
    right: 0;
    display: none;
}

#chat .chat__conversation-board__message__options .option-item {
    border: 0;
    background: rgba(255, 255, 255, 0.08);
    padding: 0;
    margin: 0;
    height: 28px;
    width: 28px;
    border-radius: 50%;
    outline: none;
    color: #ff6b6b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#chat .chat__conversation-board__message__options .option-item:hover {
    background: rgba(255, 107, 107, 0.2);
}

#chat .chat__conversation-board__message__options .delete-message-btn i {
    font-size: 13px;
}

#chat .chat__conversation-board__message__options .emoji-button svg {
    stroke: var(--chat-options-svg);
    fill: transparent;
    width: 100%;
}

#chat .chat__conversation-board__message__options .more-button svg {
    stroke: var(--chat-options-svg);
    fill: transparent;
    width: 100%;
}

#chat .chat__conversation-board__message__bubble span {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    display: inline-table;
    word-wrap: break-word;
    background: var(--chat-bubble-background);
    font-size: 13px;
    color: var(--chat-text-color);
    padding: 0.5em 0.8em;
    line-height: 1.5;
    border-radius: 6px;
    font-family: "Lato", sans-serif;
}

#chat .chat__conversation-board__message__bubble:not(:last-child) {
    margin: 0 0 0.3em;
}

#chat .chat__conversation-board__message__bubble:active {
    background: var(--chat-bubble-active-background);
}

#chat .chat__conversation-panel {
    background: var(--chat-panel-background);
    border-radius: 12px;
    padding: 0 1em;
    height: 55px;
    margin: 0.5em 0 0;
}

#chat .chat__conversation-panel__container {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
    width: 100%;
    border-width: 1px;
    border-color: #3d3d3d55;
}

#chat .chat__conversation-panel__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
    flex-shrink: 0;
}

#chat .chat__conversation-panel__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#chat .chat__conversation-panel__container .panel-item:not(:last-child) {
    margin: 0 1em 0 0;
}

#chat .chat__conversation-panel__button {
    background: grey;
    height: 20px;
    width: 30px;
    border: 0;
    padding: 0;
    outline: none;
    cursor: pointer;
}

#chat .chat__conversation-panel .add-file-button {
    height: 23px;
    min-width: 23px;
    width: 23px;
    background: var(--chat-add-button-background);
    border-radius: 50%;
}

#chat .chat__conversation-panel .add-file-button svg {
    width: 70%;
    stroke: #54575c;
}

#chat .chat__conversation-panel .emoji-button {
    min-width: 23px;
    width: 23px;
    height: 23px;
    background: transparent;
    border-radius: 50%;
}

#chat .chat__conversation-panel .emoji-button svg {
    width: 100%;
    fill: transparent;
    stroke: #54575c;
}

#chat .chat__conversation-panel .send-message-button {
    background: var(--chat-send-button-background);
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    transition: 0.3s ease;
}

#chat .chat__conversation-panel .send-message-button:active {
    transform: scale(0.97);
}

#chat .chat__conversation-panel .send-message-button svg {
    margin: 1px -1px;
}

#chat .chat__conversation-panel__input {
    width: 100%;
    height: 100%;
    outline: none;
    position: relative;
    color: var(--chat-text-color);
    font-size: 13px;
    background: transparent;
    border: 0;
    font-family: "Lato", sans-serif;
    resize: none;
}

.chooseCategoryInnerContainer {
    height: 100vh;

    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.chooseCategoryTextContainer {
    width: 80%;
}

.categoryContainer {
    width: 80%;
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.createAdvertContainer {
    width: 80%;
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.editAdvertPhotoContainer {
    width: 100%;
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.photoUploadContainer {
    width: 50px;
    height: 50px;
    border: 1px solid lightgrey;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.eachCategory {
    height: 175px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 10px;
    border-radius: 5px;
    overflow: hidden;
    transition: transform 0.4s ease-in-out;
    background: rgb(23, 23, 24);
    background: linear-gradient(
        180deg,
        rgba(23, 23, 24, 1) 0%,
        rgba(46, 46, 50, 1) 100%
    );
    margin: 5px 0px;
}

.eachCategory:hover {
    transition: transform 0.4s ease-in-out;
    transform: scale(1.1);
}

#pageTitleContainer {
    width: 80%;
}

.pageTitleNav {
    padding: 15px;
    background: rgb(23, 23, 24);
    background: linear-gradient(
        180deg,
        rgba(23, 23, 24, 1) 0%,
        rgba(46, 46, 50, 1) 100%
    );
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}

#goBackButton {
    background: rgb(23, 23, 24);
    background: linear-gradient(
        180deg,
        rgba(23, 23, 24, 1) 0%,
        rgba(46, 46, 50, 1) 100%
    );
}

.photoPlaceholder {
    width: 100%;
    height: 100%;
    padding: 10px 15px;
}

#advertContentSection {
    padding: 0px 15px;
}

#stolenAdvertContentSection {
    width: 45%;
}

.ForMe3Cols {
    display: flex;

    flex-direction: column;
    height: 175px;
    border-radius: 5px;
    padding: 10px;
    -webkit-box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
    -moz-box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
    box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
}

.ForMeCreateAdvertCol {
    border-radius: 5px;
    -webkit-box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
    -moz-box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
    box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
}

.personalInfoContainers {
    border-bottom: 1px solid #3d3d3d55;
    padding: 10px;
    display: flex;
}

.addPhotoContainer {
    display: inline-block;
    border: 1px solid #d8d8d8;
    width: 100px;
    height: 100px;
    background: linear-gradient(to bottom, #ffffff 60%, #f5f5f5);
    box-shadow:
        inset 0 0 0 1px #fff,
        0 0 2px 1px #e7e7e7;
    text-align: center;
    color: #999;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-container {
    position: relative;
    display: flex;
    align-items: center;
}

.input-container input {
    width: 100%;
    padding-right: 30px;
    padding-left: 10px;
}

.icon {
    position: absolute;
    right: 10px;
    cursor: pointer;
}

.icon-eye {
    font-size: 18px;
}

/* Example icon styles (you might use a font icon like FontAwesome) */
.icon-eye::before {
    content: "\f06e";
    /* FontAwesome eye icon */
    font-family: FontAwesome;
}

.icon-eye.slash::before {
    content: "\f070";
    /* FontAwesome eye-slash icon */
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

.btn-dark {
    background-color: #000;
    color: #fff;
    border: none;
}

.btn-sm {
    font-size: 14px;
}

.favoriteListEach {
    height: 175px;
    -webkit-box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
    -moz-box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
    box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 10px;
    background-color: #405d72;
    color: white;
    font-size: 20px;
    font-weight: bold;
}

.favoriteListNew {
    height: 175px;
    -webkit-box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
    -moz-box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
    box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 10px;
    border: 1px solid #405d72;
    background-color: white;
    color: #405d72;
    font-size: 20px;
    font-weight: bold;
}

.favoriteListContainer {
    height: 125px;
    -webkit-box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
    -moz-box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
    box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
    display: flex;
    align-items: center;
}

.favoriteListCols {
    display: flex;
}

.favoriteListImage {
    width: 100px;
    height: 100px;
    border-radius: 5px;
    -webkit-box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
    -moz-box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
    box-shadow: 1px 1px 7px 0px rgba(61, 61, 61, 0.6);
    object-fit: contain;
}

.tableAllAdverts {
    display: flex;
    flex-direction: column;
    overflow: scroll;
    flex: 1;
}

.table.table-striped.table-bordered {
    flex: 1;
}

.table.table-striped.table-bordered td {
    text-align: center;
    vertical-align: middle;
}

.tableAllAdverts::-webkit-scrollbar {
    display: none;
}

.forgotPasswordGoBackContainer {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
    text-decoration: none;
    color: white;
}

.newUsedButtons {
    background-color: white;
    color: #262626;
    border: 1px solid #262626;
    padding: 10px;
    transition:
        background-color 0.3s,
        transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
}

.newUsedButtons:hover {
    background-color: #262626;
    transform: scale(1.05);
    color: white;
}

.newUsedButtons.active {
    background-color: #262626;
    /* Change to your desired active color */
    color: white;
}

.newUsedButtons::before {
    display: none;
}

.slick-prev,
.slick-next {
    top: 40% !important;
}

/* Eski varsayılan slick yazı butonlarını gizle (footer kendi oklarını kullanır) */
.footer .your-slider .slick-prev:not(.footer-slick-arrow),
.footer .your-slider .slick-next:not(.footer-slick-arrow) {
    display: none !important;
}

.footer-links {
    row-gap: 2rem;
    padding: 10px 25px;
}

.doping-row {
    background-color: #daa520;
    --bs-table-bg: #daa520;
    color: white;
}

.doping-row td {
    color: white;
}

#searchQuery {
    font-size: 15px !important;
    padding: 10px !important;
    width: 30% !important;
}

.about-us-container {
    max-width: 1200px;
    margin: 0 auto;
}

.contact-us-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.about-us-title {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 2rem;
    color: #ffffff;
}

.about-us-content {
    display: flex;
    gap: 2rem;
    margin-bottom: 3rem;
}

.team-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.about-us-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

h2 {
    color: #ffffff;
    margin-top: 0;
}

p {
    line-height: 1.6;
}

.values-list {
    list-style-type: none;
    padding: 0;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.values-list li {
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
    position: relative;
    text-align: center;
}

.team-section {
    text-align: center;
}

.team-members {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 2rem;
}

.team-member {
    background-color: #333333;
    border-radius: 8px;
    padding: 1.5rem;
    width: 250px;
    text-align: center;
    transition: transform 0.3s ease;
}

.team-member:hover {
    transform: translateY(-5px);
}

.team-member img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin-bottom: 1rem;
}

.team-member h3 {
    margin: 0;
    color: #ffffff;
}

.team-member p {
    margin: 0.5rem 0 0;
    color: #cccccc;
    font-size: 0.9rem;
}

.aboutUsContainer {
    background-color: #262626;
    color: #ffffff;
    font-family: Arial, sans-serif;
    padding: 2rem;
}

.page-shell {
    flex: 1 0 auto;
    width: 100%;
    position: relative;
    z-index: 5;
    padding: 2rem 1rem 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-us-container,
.faq-page-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.contact-page-content {
    width: 100%;
    position: relative;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.contact-page-content h1,
.contact-page-content h2,
.faq-section h2 {
    width: 100%;
    text-align: center;
    color: #ffffff;
}

.contact-page-content p {
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.contact-info-box {
    width: 100%;
    max-width: 560px;
    background-color: #333333;
    border-radius: 10px;
    padding: 24px 20px;
    margin-bottom: 2rem;
}

.faq-section {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.faq-section h2 {
    margin-bottom: 1.5rem;
}

.SSSAccordion {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.SSSAccordion .accordion-item {
    border: none;
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
}

.SSSAccordion .accordion-button {
    text-align: left;
    white-space: normal;
    word-break: break-word;
    line-height: 1.4;
}

.SSSAccordion .accordion-body {
    text-align: left;
    word-break: break-word;
}

.SSSAccordion .accordion-body p,
.SSSAccordion .accordion-body li,
.SSSAccordion .accordion-body span {
    color: #262626 !important;
}

.contactUsForm {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    background-color: #333;
    padding: 20px;
    border-radius: 8px;
    position: relative;
    z-index: 6;
    text-align: left;
}

.contact-input {
    background-color: #444 !important;
    color: #fff !important;
    border: 1px solid #666;
    width: 100%;
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

.contact-input:focus {
    background-color: #444 !important;
    color: #fff !important;
    border-color: #888;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.15);
}

.contact-submit-btn {
    background-color: #555;
    color: #fff;
    min-width: 35%;
    border-color: #262626;
}

.contactFormGroup {
    margin-top: 20px;
}

.contactFormGroup label {
    margin-bottom: 10px;
    display: block;
    color: #fff;
    text-align: left;
}

.privacyPolicyContainer {
    width: 100%;
}

.accordion_headerSSS {
    background-color: #262626 !important;
    color: white !important;
}

.accordion_bodySSS {
    background-color: white !important;
    color: #262626 !important;
}

.hoverable {
    position: relative;
    margin-right: 10px;
    height: 100%;
    display: flex;
    align-items: center;
}

.dropdown-menu {
    display: none;
    position: absolute;
    background-color: #262626;
    color: white;
    border-radius: 5px;
    padding: 10px;
    z-index: 1000;
    width: 250px;
    right: 0px;
    top: 60px;
    opacity: 0;
    pointer-events: none;
    animation: fadeIn 0.3s forwards;
}

.hoverable:hover .dropdown-menu,
.hoverable.is-open .dropdown-menu {
    display: block;
    pointer-events: auto;
    animation: fadeIn 0.3s forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.dropdown-item {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    display: block;
}

.dropdown-item:hover {
    background-color: #444;
    color: white;
}

.footer-separator {
    height: 1px;
    background-color: #ffffff33;
    margin: 1rem 0;
    width: 100%;
}

.footer-column a {
    text-decoration: none;
    color: white;
    font-size: 17px;
}

.dopingTableParent {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
}

.dopingTableStar {
    color: white;
    padding: 5px;
}

.dopingTableText {
    color: white;
    font-weight: 500;
}

.dropdown-item i {
    margin-right: 10px;
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

swiper-container {
    width: 100%;
    height: 100%;
}

swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mySwiper swiper-slide img {
    cursor: zoom-in;
}

swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

swiper-container {
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}

swiper-slide {
    background-size: cover;
    background-position: center;
}

.mySwiper {
    height: 70%;
    width: 100%;
}

.mySwiper2 {
    height: 20%;
    box-sizing: border-box;
    padding: 10px 0;
}

.mySwiper2 swiper-slide {
    width: 25%;
    height: 85%;
    opacity: 0.4;
}

.mySwiper2 .swiper-slide-thumb-active {
    opacity: 1;
}

swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.advertImageModal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.9);
}

.AdvertImageModalContent {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

.AdvertImageModalClose {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.AdvertImageModalClose:hover,
.AdvertImageModalClose:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* MEDIA START */

/*#region MEDIA START */

/* For screens larger than 1025px */
@media screen and (min-width: 1025px) {
    .advertsMainContentNavBar {
        width: 100%;
        background-color: #262626;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        column-gap: 30px;
        padding: 0px 20px;
    }

    .logoContainerMenuButton {
        display: none;
    }

    .logoContainerAdvertLogo {
        display: flex;
    }

    .contactUsForm {
        max-width: 560px;
        width: 100%;
    }

    .SSSAccordion {
        max-width: 900px;
        width: 100%;
    }

    .faq-section {
        max-width: 900px;
        width: 100%;
    }

    .tableContainer {
        display: flex;
    }
}

@media screen and (max-width: 1024px) {
    .mainContainerAdverts {
        flex-grow: 1;
        width: 100%;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .sideBarShownMobile {
        display: none;
    }

    .sideBarAndContentMainContainer {
        flex-direction: column;
    }

    .advertSidebar {
        display: flex;
        width: 100%;
        flex: 0 0 auto;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid #e2e2e2;
    }

    /* Mobil tablolar kaldirildigi icin sunucudan gelen tablo burada da gorunmeli. */
    .tableContainer {
        display: flex;
        width: 100%;
    }

    .advertsMainContentNavBar {
        width: 100%;
        background-color: #262626;
        align-items: center;
        justify-content: space-around;
        padding: 0px 20px;
        display: none;
    }

    .tableWeb {
        display: none;
    }

    .tableMobile {
        display: flex;
    }

    .logoContainerMenuButton {
        display: flex;
    }

    /*   .logoContainerAdvertLogo {
        display: none;
    } */

    #chat {
        width: 100%;
    }

    .mobileHidden {
        display: block;
    }

    .webHidden {
        display: none;
    }

    .homepageBannerTextBoxInner {
        width: 90%;

        margin: 0px;
    }

    #stolenAdvertContentSection {
        width: 65%;
    }

    .contactUsForm {
        max-width: 560px;
        width: 100%;
    }

    .SSSAccordion {
        max-width: 900px;
        width: 100%;
    }

    .faq-section {
        max-width: 900px;
        width: 100%;
    }

    .mainNavbarLogo {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    #stolenAdvertContentSection {
        width: 80%;
    }

    .contactUsForm {
        max-width: 560px;
        width: 100%;
    }

    .faq-section {
        max-width: 900px;
        width: 100%;
    }

    .SSSAccordion {
        max-width: 900px;
        width: 100%;
    }
}

@media only screen and (max-width: 600px) {
    #chat {
        margin: 0;
        border-radius: 0;
    }

    #chat .chat__conversation-board {
        height: 91.5%;
    }

    #chat .chat__conversation-board__message__options {
        display: none;
    }

    #chat .chat__conversation-board__message-container.reversed
        .chat__conversation-board__message__options {
        display: flex;
        align-items: center;
    }
}

/*#endregion MEDIA END */

#paymentForm {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

#paymentForm .form-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

#paymentForm .form-row label {
    width: 100%;
}

#paymentForm .form-row .form-group {
    flex: 1;
}

#paymentForm .form-row .form-group input {
    width: 100%;
}

#paymentForm .form-group label {
    margin-bottom: 0.5rem;
}

/* Auctions Page Styles */
.auctions-container {
    width: 90%;
    max-width: 1200px;
    margin: 2rem auto;
}

.auctions-header {
    color: white;
    margin-bottom: 2rem;
    text-align: center;
}

.auctions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    padding: 1rem;
}

.auction-card {
    background: #333;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.auction-card:hover {
    transform: translateY(-5px);
}

.auction-image {
    width: 100%;
    aspect-ratio: 1;
    max-height: 250px;
    object-fit: cover;
}

.auction-content {
    padding: 1rem;
    color: white;
}

.auction-title {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.auction-info {
    font-size: 0.9rem;
    color: #ccc;
}

.auction-info-inner {
    color: #333;
}

@media (min-width: 769px) {
    .auction-info-inner {
        grid-column: span 2;
    }
}

.auction-info-inner p {
    color: #333;
}

/* Auction Details Page Styles */
.auction-details-container {
    background-color: #262626;
    padding: 2rem;
    min-height: 100vh;
}

.auction-details-content {
    max-width: 1200px;
    margin: 0 auto;
    background: white;
    border-radius: 12px;
    padding: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.auction-image-carousel {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}

.auction-title-inner {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #333;
}

.auction-details p {
    margin-bottom: 0.5rem;
}

.auction-date-time {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.join-auction-btn {
    margin-top: 2rem;
    padding: 1rem 2rem;
    background: #4caf50;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.3s ease;
}

.join-auction-btn:hover {
    background: #45a049;
}

/* Auction Livestream Page Styles */
.auction-livestream-container {
    background: #000;
    min-height: 100vh;
    padding: 1rem;
}

.livestream-content {
    max-width: 1200px;
    margin: 0 auto;
}

.livestream-video {
    width: 100%;
    height: 70vh;
    background: #111;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.livestream-video img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.auction-controls {
    background: rgba(255, 255, 255, 0.1);
    padding: 1rem 2rem;
    border-radius: 12px;
    color: white;
}

.current-price {
    text-align: center;
    margin-bottom: 2rem;
    word-break: break-all;
}

.current-price h3 {
    font-size: 2rem;
    color: #4caf50;
}

.bidding-controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bid-input-container {
    display: flex;
    gap: 1rem;
}

.bid-input {
    flex: 1;
    padding: 0.5rem;
    border-radius: 4px;
    border: 1px solid #444;
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.bid-button,
.quick-bid-button {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.bid-button {
    background: #2196f3;
    color: white;
}

.quick-bid-button {
    background: #4caf50;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.livestream-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    margin-bottom: 1rem;
    border-radius: 8px;
}

.viewer-count {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: white;
    border-radius: 5px;
    padding: 0.5rem 1rem;
    color: #4caf50;
}

#viewerCount {
    color: #4caf50;
    font-weight: 400;
}

.share-button {
    background: #25d366;
    /* WhatsApp green */
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.share-button:hover {
    background: #128c7e;
}

/* Modal Styles */
.modal-content {
    background-color: #262626;
    color: white;
}

.modal-header {
    border-bottom: 1px solid #444;
}

.modal-footer {
    border-top: 1px solid #444;
}

.btn-close {
    background-color: white;
}

.contractTitle {
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
}

.contractContainer {
    border: 1px solid white;
    padding: 0px 20px;
    border-radius: 10px;
}

.contractText {
    text-align: justify;
    line-height: 2;
    font-size: 1rem;
    margin-top: 30px;
    font-weight: 300;
}

@media (max-width: 768px) {
    .auction-details-content {
        grid-template-columns: 1fr;
    }

    .bid-input-container {
        flex-direction: column;
    }
}


/* Homepage Slider Styles - Swiper */
.homepage-slider {
    width: 100%;
    height: 600px;
}

.homepage-slider .swiper-wrapper {
    height: 600px;
}

.homepage-slider .swiper-slide {
    height: 600px;
}

.homepage-slider .swiper-button-next,
.homepage-slider .swiper-button-prev {
    color: white;
    background: rgba(0, 0, 0, 0.5);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    transition: background 0.3s ease;
}

.homepage-slider .swiper-button-next:after,
.homepage-slider .swiper-button-prev:after {
    font-size: 20px;
}

.homepage-slider .swiper-button-next:hover,
.homepage-slider .swiper-button-prev:hover {
    background: rgba(0, 0, 0, 0.8);
}

.homepage-slider .swiper-pagination-bullet {
    background: white;
    opacity: 0.5;
    width: 12px;
    height: 12px;
}

.homepage-slider .swiper-pagination-bullet-active {
    opacity: 1;
    background: white;
}

.homepage-slider .swiper-pagination {
    bottom: 25px;
}

/* Responsive Slider Styles */
@media (max-width: 768px) {
    .homepage-slider,
    .homepage-slider .swiper-wrapper,
    .homepage-slider .swiper-slide {
        height: 500px;
    }

    .homepage-slider .swiper-button-next,
    .homepage-slider .swiper-button-prev {
        width: 35px;
        height: 35px;
    }

    .homepage-slider .swiper-button-next:after,
    .homepage-slider .swiper-button-prev:after {
        font-size: 16px;
    }

    .homepageBannerTextBoxInner {
        width: 80%;
        padding: 0 15px;
    }
    
    .homepageBanner {
        height: 500px;
    }
}