:root {
    --custom-yellow: #f9e239;
}

h2 {
    font-weight: 900;
}

fs-14 {
    font-size: 14px;
}

fs-15 {
    font-size: 14px;
}

fs-16 {
    font-size: 14px;
}

table th, table td {
    border: 1px solid rgb(105, 105, 105) !important;
    border-collapse: collapse !important;
}

body::before, .bg--body::before {
    position: absolute;
    content: "";
    inset: 0;
    background-color: #FFFFFF !important;
    border-radius: inherit;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px !important;
}

.btn-yellow {
    background-color: var(--custom-yellow) !important;
}

.bg-yellow {
    background-color: var(--custom-yellow) !important;
}

.feature-section .bg--section::before, .counter-section .bg--section::before {
    background-color: #f9e239 !important;
}

 .modal{
    padding-right: 6px;
    backdrop-filter: blur(5px);
    background-color: rgb(56 56 56 / 40%);
}

/*winners*/
.progress-bar {
    background-color: #000 !important;
}

/* footer */
.footer {
    margin-left: -11px;
    margin-right: -12px !important;
    padding-top: 35px;
    border: 1px solid #0000001f;
    background-color:#FAFAF9
}
.footer .links-title{
    font-size:19px;
    position:relative;
}
.footer .links-title:after{
    position:absolute;
    content:'';
    width:160px;
    background-color:rgba(0, 0, 0, 0.12);
    height:1px;
    bottom:-5px;
    left:0

}

.footer #contact-list{
    width: 100%;
    justify-content: space-around;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    padding-bottom: 25px;
}

.footer #contact-list li {
    list-style: none;
    line-height: 25px;
}

.footer #contact-list li a {
    text-decoration: none;
    color: black;
    font-size:17px;
    margin-top:5px;
}
.footer #contact-list li span:first-child {
    font-weight:bold;
    font-size:19px;
}
.footer #contact-list li svg{
    background-color: var(--primary-orange-color);
    padding: 17px;
    border-radius: 50%;
    width: 18px;
    height: 18px;
}

.footer-icon-list{
    display:flex;
    gap:7px;
    margin-top:25px;
}
.footer-icon-list li{
   border:2px solid var(--primary-orange-color);
   border-radius:50%;
   display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    transition:background-color .4s ease;
    cursor:pointer
}
.footer-icon-list li:hover{
   background-color:var(--primary-orange-color);
}
.footer-icon-list li i{
   margin:0;
       font-size: 17px;
}
.footer-icon-list li:hover i{
    color:white;
}


#other-links li{
   list-style: disc;
}
#other-links li::marker {
  color:var(--primary-orange-color);
}
#other-links li a{
   color:black;
   font-size:17px;
}

/* bottom bar */
.bottom-bar {
    background-color: var(--custom-yellow);
    margin-left: -11px;
    margin-right: -12px !important;
    padding: 30px;
    border: 1px solid black;
    font-size: 20px;
}

.bottom-bar .fa-brands {
    padding-right: 5px;
}

.bottom-bar a {
    text-decoration: none;
    color: black;
}

.header__top__wrapper .text--base {
    color: #6b6a6a !important;
    font-weight: bold !important;
}

.header__top__wrapper .name {
    font-weight: normal !important;
}

/* how to use */

.how-to-use .company-title{
    color : var(--primary-orange-color);
    font-size:14px;
    letter-spacing:10px;
}

.how-to-use .row .title {
}

.how-to-use p {
    padding-right: 47px;
    margin-top: 15px !important;
}

.how-to-use #img-container{
    position:relative;
}

.how-to-use #img-container img {
    border-radius:25px;
}

.how-to-use > img {
    width: 100%;
    height: 420px;
    object-fit: cover;
}


.how-to-use #play-container{
    position:absolute;
    bottom:0;
    left:5px;
    padding:15px;
    background:white;
    border-top-right-radius:45px;
    border-top-left-radius:45px;
    border-bottom-right-radius: 45px;
}


.how-to-use #play-img-container {
    background: var(--primary-orange-color);
    border-radius:50%;
    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding-left: 6px;
    padding-top: 5px;
    cursor:pointer;
}


.how-to-use #play-img-container i {
    font-size:32px;
    margin-left: 5px;
    margin-bottom: 5px;
}

.how-to-use #play-img-container:hover {
        background: black;

}
.how-to-use #play-img-container:hover i {
            color:white;
}




/* media */
@media (max-width: 768px) {

    .footer ul li:first-child {
        float: left !important;
        margin-right: 30px !important;
    }


    .bottom-bar .fa-2x {
        font-size: 12px !important;
    }

    .bottom-bar {
        padding: 5px !important;
        font-size: 12px !important;
    }

    .how-to-use {
        height: auto;
        margin-top: 25px !important;
    }

    .how-to-use .row {
        padding: 1% !important;
    }

    .how-to-use .col-md-6 {
        padding: 10px 0 !important;
    }

    .how-to-use p {
        font-size: 12px !important;
        padding: 0 !important;
    }

    .how-to-use .col-md-6 h1 {
        font-size: 18px !important;
        text-align: center !important;
    }

    .how-to-use button {
        width: 100% !important;;
    }

    .how-to-use img {
        height: 305px;
    }

}


    .auction-card{
      border-radius:10px;
      border:1px solid #f8720038 !important;
        box-shadow: rgba(67, 71, 85, 0.07) 0px 0px 1.55em, rgba(90, 125, 188, 0.07) 0px 0.25em 1em;
       transition: all 0.3s ease;
       height:160px;
        position: relative;
       overflow: hidden;
    }

    .auction-card:hover{
          transform: scale(1.015);
    }

    .auction-card:hover .auction-id::before {
    right: 0;
}

    .auction-card .car-img{
       width:170px;
       height:auto;
       border-radius:10px;
       object-fit: cover;
    }
     .auction-card .car-count{
        font-size:25px;
        font-weight:bolder;
        margin-bottom:0;
    }
    .auction-card #car-text-container{
        width: 170px !important;
    }

      .auction-card .auction-id{
        font-size:32px;
        font-weight:bold;
        color:var(--primary-orange-color);
        position:relative;
    transition: all 0.3s ease;
    }


   .auction-card .auction-id::before {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -7px;
    height: 4px;
    background: var(--primary-orange-color);
    transition: right 0.3s ease-out;
}
.auction-card .detail-container{
}
    .auction-card #live-detail{
   padding-right:50px;
}
        .auction-card .car-date{
                font-size:18px;
    }
         .auction-card .detail-btn{
             background-color:var(--primary-orange-color);
             color:white !important;
             height:50px;
             border-radius:10px;
             display: flex;
            justify-content: center;
            align-items: center;
            font-weight:500;
    }

    .auction-card .live-text{
        background-color:var(--green-700);
        color:white;
        position:absolute;
        top: 23px;
        right: -32px;
        transform:rotate(45deg);
        width:140px;
        height:30px;
    }
        .auction-card .view-btn{
        background-color:var(--green-700);
        color:white;
       border-radius:10px;
       height:50px;
       width:70px;
    }

    .auction-card .auction-date{

    }




    .section-title-text{
        background-color: var(--primary-orange-color);
    color: white;
    border-radius: 10px;
    }

     .section-title-text .icon i {
    color: white;
    }



/* =================================================================== */
/* COMMON STYLESHEET                          */
/* =================================================================== */
/* Bu dosya, proje genelindeki tüm ortak stilleri ve bileşenleri içerir.
/* Yapı:
/* 1. Global & Layout Styles (Genel ve Yerleşim Stilleri)
/* 2. Component Styles (Bileşen Stilleri)
/* 3. Responsive Media Queries (Duyarlılık için Medya Sorguları)
/* =================================================================== */


/* =================================== */
/* 1. GLOBAL & LAYOUT STYLES           */
/* =================================== */

.footer {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

#other-links {
    display: flex;
    flex-direction: column;
}

/* =================================== */
/* 2. COMPONENT STYLES                 */
/* =================================== */

/* ----- Buttons & Links ----- */
.auction__item-footer .cmn--btn,
.auction-card .detail-btn,
.cmn--btn {
    color: white;
}

#home-login-btn {
    color: black !important;
}

/* ----- Banner ----- */
/* Not: Bu banner stilleri contact, about gibi diğer sayfalarda da kullanılıyor.
  main.css sorunu çözüldüğünde oraya taşınabilir.
*/
.banner-img,
#product-action-banner {
    width: 100%;
    height: 35vh;
    max-height: 350px;
    object-fit: cover;
}

#product-action-banner {
    object-position: 40% 85%;
}

.search-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 3.5rem;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6);
}

/* ----- Filter System ----- */
.filter-header {
    display: flex;
    flex-direction: column;
    height: fit-content;
    justify-content: space-between;
    background-color: transparent;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.filter-item {
    flex: 0 0 calc(25% - 10px);
    margin-bottom: 10px;
}

.filter-item label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.filter-item input,
.filter-item select,
.form-select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 15px;
}

.form-select {
    height: 42px !important;
    padding-block: 0 !important;
}

#desktopFilterForm, #modalFilterForm {
    background-color: white;
    border-radius: 15px;
}

#desktopFilterForm h4, #modalFilterForm h4 {
    font-weight: 500 !important;
    font-size: 17px;
    display: flex;
    align-items: center;
    margin: 0;
    color: white;
}

.price-container, .mileage-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.arrow-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--primary-orange-color);
    color: white;
    border: none;
    outline: none;
    border-radius: 6px;
    margin-top: 15px;
    padding: 8px 12px;
}

.arrow-btn i {
    color: white;
    font-size: 20px;
}

.arrow-btn .bi-arrow-down-circle {
    transition: transform .7s ease;
}

.arrow-btn.active .bi-arrow-down-circle {
    transform: rotate(180deg);
}

.content-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height .7s ease;
}

.content-container.active {
    max-height: 500px;
}

.mobile-filter-btn {
    display: flex;
    justify-content: center;
    gap: 10px;
    color: white;
    background-color: var(--primary-orange-color) !important;
    width: 150px;
    margin-left: auto;
    margin-bottom: 25px;
}

.modal .btn-close {
    color: var(--primary-orange-color);
}

/* ----- Auction Card & Item ----- */
.box-shadow-primary {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.auction__item-thumb img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.action-item-auction-container {
    position: absolute;
    bottom: -22px;
    right: 5px;
    padding: 10px;
    background: white;
    border-radius: 45px;
}

.action-item-auction-container-id {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: var(--primary-orange-color);
    border-radius: 50%;
    font-size: 16px;
    color: white;
    cursor: pointer;
}

.auction__item_car-detail {
    margin-top: 15px;
    margin-bottom: 10px;
}

.detail-item p {
    margin: 0;
}

.icon-container i {
    margin-right: 4px;
}

.car-detail-bottom-line {
    display: block;
    width: 100%;
    height: 1px;
    background-color: #eee;
    margin-top: 10px;
}

.product-status {
    margin-top: 8px;
    display: inline-block;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 8px;
    font-weight: bold;
}
.status-badge i {
    margin-right: 5px;
}

.completed-badge { color: #d9534f; }
.live-badge { color: #5cb85c; }
.upcoming-badge { color: #337ab7; }

/* ----- Play Button Component ----- */
#play-container {
    position: absolute;
    bottom: 0;
    left: 5px;
    padding: 15px;
    background: white;
    border-top-right-radius: 45px;
    border-top-left-radius: 45px;
    border-bottom-right-radius: 45px;
}

#play-img-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    padding-left: 6px;
    padding-top: 5px;
    background: var(--primary-orange-color);
    border-radius: 50%;
    cursor: pointer;
}

#play-img-container:hover {
    background: black;
}

#play-img-container:hover i {
    color: white;
}

/* ----- Generic Card & Menu ----- */
.card {
    flex: 1 0 300px;
    margin: 10px;
}

.card .card-body a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-decoration: none;
    flex-grow: 1;
}

.menu-area {
    margin-inline: auto;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu-area .menu-close {
    color: var(--primary-orange-color);
}

.menu-area .menu > li:first-child > a {
    border-top: none !important;
}

.menu-area .menu li i {
    display: none;
}

.scrollToTop{
    background: var(--primary-orange-color) !important;
    color: white;
    border: 1px solid var(--primary-orange-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.scrollToTop:hover{
    background: white !important;
    color: var(--primary-orange-color);
    border: 1px solid var(--primary-orange-color);
}
.color-orange{
    color:var(--primary-orange-color) !important;
}
.border-orange{
    border:1px solid var(--primary-orange-color) !important;
    background-color:white !important;
    border-radius:10px;
}

.offer-input-container{
    border: 1px solid #00000045;
    padding: 4px 15px;
    border-radius: 7px;
}
.offer-input{
    border:none !important;
}
.currency{
    margin:0;
    padding:0;
    color:#0000006e;
    font-size: 17px;
}

.offer-btn{
    background-color:white !important;
    border: 1px solid #00000045 !important;
    border-radius:7px;
    color:black !important;
    font-weight:bold !important;

}

.sold-text{
    position: absolute;
    top: 21px;
    right: -38px;
    background: red;
    color: white;
    width: 145px;
    rotate: 45deg;
    display: flex
;
    align-items: center;
    justify-content: center;
    height: 28px;
}

.upcoming-badge{
    padding: 0 !important;
    color: black !important;
    font-weight: normal !important;
}

.close{
    width:30px;
    height:30px;
    background:transparent;
    border-radius:50%;
    display: flex
;
    align-items: center;
    justify-content: center;
}
.close span{
    font-size:25px;

}

/* ----- Miscellaneous ----- */
#loginModal {
    z-index: 9999999;
}

.authBtn{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:100px;
    min-height:30px;
    border-radius:5px;

}

.authBtn::after{
    display:none !important;

}

.nav-login-btn{
    background-color:#EEEFF0;
    clip-path: polygon(0 0, 100% 0%, 85% 100%, 0% 100%);
    margin-right:-10px;
    padding-left:10px;
    padding-right: 20px;
}

.nav-register-btn{
    background-color:var(--primary-orange-color);
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
    padding-left: 20px;
    padding-right:10px;

}

.dashboard-container{
    display:flex;
    align-items:center;
    justify-content:center;
    background-color: #EEEFF0;
    min-height: 32px;
    border-radius:5px;
    padding-inline:15px;

}
@media screen and (max-width:580px) {
    .authBtn{
        min-width:50px;
    }
    .nav-login-btn{
        padding-left:0px;
        padding-right: 10px;
    }
    .nav-register-btn{
        padding-right:0px;
        padding-left: 10px;
    }

}

.menu-area .menu li a {
    color: black;
    position: relative;
    text-decoration: none; /* varsa alt çizgiyi kaldırmak için */
}

.menu-area .menu li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px; /* çizgi kalınlığı */
    width: 0;
    background: var(--primary-orange-color); /* çizgi rengi */
    transition: width 0.3s ease; /* animasyon süresi ve tipi */
}

.menu-area .menu li a:hover::after {
    width: 100%; /* hoverda çizgi tamamen ortaya çıkacak */
}

/* =================================== */
/* 3. RESPONSIVE MEDIA QUERIES         */
/* =================================== */


/* Large devices (991px and down) */
@media screen and (max-width: 991px) {
    .container {
        max-width: 95% !important;
    }

    h1, h2, h3, h6, p {
        font-size: 14px !important; /* Base font size adjustment */
    }
    h1 { font-size: 25px !important; }
    h3 { font-size: 18px !important; }
    h6 { font-size: 18px !important; }

    .car-count {
        font-size: 20px !important;
        width: 110px !important;
    }

    #contact-list {
        flex-wrap: wrap;
    }

    /* -- Auction Card -- */
    .auction-card .auction-id {
        font-size: 25px;
    }
    .auction-card .detail-container {
        flex-direction: column;
        align-items: flex-end;
        width: auto !important;
    }

    /* -- Header & Menu -- */
    .menu-area {
        background: white !important;
    }
    .menu-area .menu {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        height: 60%;
        justify-content: space-around;
        margin-top: -80px;
    }
    .menu-area .menu li {
        display: flex;
        align-items: center;
    }
    .menu-area .menu li a {
        font-size: 25px;
        color:red !important;

    }
    .menu-area .menu li i {
        display: flex;
        align-items: center;
        font-size: 35px;
        color: var(--primary-orange-color);
    }
    .header-bar span {
        background-color: black;
    }
    .languauge-select-icon {
        font-size: 20px;
        margin-right: -5px !important;
    }
    .mobile-user-icon {
        margin-bottom: -4px;
    }
    .mobile-user-icon i {
        font-size: 30px;
    }
    .mobile-user-icon:after {
        display: none !important;
    }
    #langugageSelectContainer {
        margin-top: 60px;
    }
    #langugageSelectContainer:hover {
        background-color: transparent !important;
    }
    #langugageSelectContainer i {
        color: black;
        margin-right: 25px;
    }
    #langugageSelectContainer #languageSelect {
        font-size: 25px;
        font-weight: bold;
        border: none !important;
        background: none;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }
}

/* Medium devices (768px and down) */
@media screen and (max-width: 768px) {
    h1, h2 { font-size: 23px !important; }
    h3 { font-size: 18px !important; }
    h6 { font-size: 18px !important; }

    .banner-img {
        height: 30vh;
    }
    .home-section-img {
        height: 60vh;
    }
    .search-icon {
        font-size: 2.5rem;
    }
    .section__header {
        width: 70%;
    }
    .banner__content .banner__title {
        margin-bottom: 15px;
    }
    .footer ul li:first-child {
        margin-right: 0px !important;
    }

    /* -- How to Use section -- */
    .how-to-use img {
        height: 250px !important;
    }
    .how-to-use .col-md-6 h1 {
        font-size: 25px !important;
        text-align: left !important;
    }
    .how-to-use p {
        font-size: 16px !important;
        padding: 0 !important;
    }

    /* -- Play Button -- */
    #play-container {
        padding: 10px !important;
        left: -10px;
    }
    #play-img-container {
        width: 35px !important;
        height: 35px !important;
    }

    /* -- Auction Card -- */
    .auction-card .auction-id {
        margin-left: 10px;
    }
    .auction-card #car-text-container {
        width: 88px !important;
    }
    .auction-card #live-detail {
        padding-right: 0px !important;
    }
}

/* Small devices (600px and down) */
@media screen and (max-width: 600px) {
    .filter-item {
        flex: 0 0 calc(50% - 10px);
    }
    #product-action-banner {
        max-height: 200px;
    }
}

/* Extra Small devices (580px and down) */
@media screen and (max-width: 580px) {
    .container {
        max-width: 100% !important;
    }
    .home-section-img {
        height: 35vh;
        margin-top: 0px;
    }
    .auction-card .detail-container {
        width: auto;
    }
}

.slick-slide{
    padding: 10px;
}

/* --- GLOBAL FAVORİ (BEĞEN) BUTONU --- */
.favorite-toggle {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 15;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;

}

.favorite-toggle:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
}

.favorite-toggle .bi-heart,
.favorite-toggle .bi-heart-fill{
    font-size: 24px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
    top: 1px; /* Bootstrap Icons kalp ikonları için küçük düzeltme */
}

.favorite-toggle.favorited{
    background: #fff; /* sarı arka plan */
    color: #FFCC34;
}

.favorite-toggle:not(.favorited){
    color: #9AA3AE; /* gri kalp */
}

/* Mobil uyumlu */
@media (max-width: 767px) {
    .favorite-toggle {
        width: 45px;
        height: 45px;
        top: 8px;
        right: 8px;
    }

    .favorite-toggle .bi-heart,
    .favorite-toggle .bi-heart-fill{
        font-size: 20px;
        top: 1px; /* Mobil için de aynı düzeltme */
    }
}