/* ====================================================
   OBACARS CARD V5
   Referans mobil kart tasarımı
   ==================================================== */

.section.fleet{
    background:#f7f7f7 !important;
}


/* CARD */

.section.fleet article.car{
    overflow:hidden !important;
    background:#fff !important;

    border:1.5px solid #ef9caa !important;
    border-radius:20px !important;

    box-shadow:none !important;
}


/* IMAGE */

.section.fleet .car-media{
    position:relative !important;

    aspect-ratio:auto !important;
    height:245px !important;

    background:#fff !important;

    border-bottom:1px solid #ececec !important;
}

.section.fleet .car-media-link{
    position:absolute !important;
    inset:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding:20px 18px 10px !important;
}

.section.fleet .car-media img{
    width:100% !important;
    height:100% !important;

    max-width:100% !important;
    max-height:100% !important;

    object-fit:contain !important;
}


/* RED CATEGORY */

.section.fleet .car-badges{
    top:16px !important;
    left:16px !important;
}

.section.fleet .badge.cat{
    padding:8px 13px !important;

    border:0 !important;
    border-radius:7px !important;

    background:
       linear-gradient(180deg,#ef001d,#c90016) !important;

    color:#fff !important;

    font-size:13px !important;
    font-weight:900 !important;

    box-shadow:
       0 3px 8px rgba(180,0,20,.20) !important;
}


/* BODY */

.section.fleet .car-body{
    padding:22px 20px 20px !important;
}


/* TITLE */

.oc5-title{
    margin:0 !important;

    color:#090909 !important;

    font-size:25px !important;
    line-height:1.1 !important;

    font-weight:950 !important;

    letter-spacing:.01em !important;
    text-transform:uppercase !important;
}

.oc5-title a{
    color:#090909 !important;
}


/* TOP SPECS */

.oc5-spec-line{
    display:flex !important;
    flex-wrap:wrap !important;

    align-items:center !important;

    margin-top:14px !important;

    color:#555 !important;
}

.oc5-spec-line > span{
    position:relative !important;

    display:inline-flex !important;
    align-items:center !important;

    gap:7px !important;

    padding:0 14px !important;

    font-size:13px !important;

    white-space:nowrap !important;
}

.oc5-spec-line > span:first-child{
    padding-left:0 !important;
}

.oc5-spec-line > span + span::before{
    content:"" !important;

    position:absolute !important;
    left:0 !important;
    top:2px !important;
    bottom:2px !important;

    width:1px !important;

    background:#dedede !important;
}

.oc5-spec-line svg{
    width:18px !important;
    height:18px !important;

    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.8 !important;
}


/* ACTION AREA */

.oc5-actions{
    display:grid !important;
    gap:9px !important;

    margin-top:24px !important;
}


/* ROW */

.oc5-row{
    min-height:82px !important;

    display:grid !important;

    grid-template-columns:
       minmax(0,1fr)
       minmax(175px,42%) !important;

    align-items:stretch !important;

    overflow:hidden !important;

    border-radius:11px !important;

    text-decoration:none !important;
}


/* LEFT */

.oc5-left{
    min-width:0 !important;

    display:flex !important;
    align-items:center !important;

    gap:14px !important;

    padding:11px 13px !important;
}

.oc5-copy{
    min-width:0 !important;
}

.oc5-copy strong{
    display:block !important;

    color:#111 !important;

    font-size:16px !important;
    line-height:1.2 !important;

    font-weight:850 !important;
}

.oc5-copy small{
    display:block !important;

    margin-top:7px !important;

    color:#333 !important;

    font-size:13px !important;
    line-height:1.25 !important;

    font-weight:500 !important;
}


/* BIG LEFT ICON */

.oc5-big-icon{
    width:54px !important;
    height:54px !important;

    flex:0 0 54px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    border-radius:11px !important;
}

.oc5-big-icon svg{
    width:31px !important;
    height:31px !important;

    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.8 !important;
}


/* PRICE */

.oc5-price-row{
    background:
      linear-gradient(90deg,#fff3f4,#fff9f9) !important;
}

.oc5-red-icon{
    color:#d90023 !important;
    background:#ffdfe4 !important;
}

.oc5-price-box{
    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;
    justify-content:center !important;

    padding:8px 10px !important;

    color:#fff !important;

    background:
      linear-gradient(135deg,#d90013,#e00000) !important;
}

.oc5-price-box strong{
    color:#fff !important;

    font-size:25px !important;
    line-height:1 !important;

    font-weight:900 !important;

    white-space:nowrap !important;
}

.oc5-price-box span{
    display:block !important;

    margin-top:8px !important;

    color:#fff !important;

    font-size:13px !important;
    font-weight:700 !important;
}


/* CALL */

.oc5-call-row{
    background:#f4faf4 !important;
}

.oc5-green-icon{
    color:#07953c !important;
    background:#daf1df !important;
}

.oc5-call-box{
    background:
       linear-gradient(135deg,#179d40,#31a849) !important;
}


/* RESERVATION */

.oc5-res-row{
    background:#f4f7fb !important;
}

.oc5-blue-icon{
    color:#064c8d !important;
    background:#dfe9f5 !important;
}

.oc5-res-box{
    background:
       linear-gradient(135deg,#075092,#064477) !important;
}


/* RIGHT ACTION */

.oc5-action-box{
    min-width:0 !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    gap:9px !important;

    padding:8px 12px !important;

    color:#fff !important;
}

.oc5-action-box strong{
    color:#fff !important;

    font-size:16px !important;
    font-weight:750 !important;

    white-space:nowrap !important;
}

.oc5-action-icon{
    display:flex !important;
}

.oc5-action-icon svg{
    width:28px !important;
    height:28px !important;

    fill:none !important;
    stroke:#fff !important;
    stroke-width:1.8 !important;
}

.oc5-chevron{
    display:flex !important;
    margin-left:auto !important;
}

.oc5-chevron svg{
    width:21px !important;
    height:21px !important;

    fill:none !important;
    stroke:#fff !important;
    stroke-width:2.3 !important;
}


/* BOTTOM SPECS */

.oc5-bottom-specs{
    display:grid !important;

    grid-template-columns:repeat(3,minmax(0,1fr)) !important;

    gap:10px !important;

    margin-top:22px !important;
}

.oc5-bottom-specs > span{
    min-width:0 !important;

    min-height:53px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    gap:8px !important;

    border-radius:10px !important;

    padding:9px 8px !important;
}

.oc5-bottom-specs svg{
    width:23px !important;
    height:23px !important;

    flex:0 0 23px !important;

    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.8 !important;
}

.oc5-bottom-specs b{
    overflow:hidden !important;

    font-size:13px !important;
    font-weight:700 !important;

    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}

.oc5-fuel{
    color:#111 !important;
    background:#fff0f1 !important;
}

.oc5-fuel svg{
    color:#d90023 !important;
}

.oc5-gear{
    color:#111 !important;
    background:#f2f2f2 !important;
}

.oc5-body{
    color:#111 !important;
    background:#f0eefc !important;
}

.oc5-body svg{
    color:#111 !important;
}


/* Eski script kutularını sakla */

.section.fleet .obacars-home-pricing,
.section.fleet .ob-home-v2,
.section.fleet .oc-ref-box{
    display:none !important;
}


/* =====================================================
   DESKTOP
   ===================================================== */

@media(min-width:1200px){

    .section.fleet .grid{
        grid-template-columns:
           repeat(4,minmax(0,1fr)) !important;

        gap:18px !important;
    }

    .section.fleet .car-media{
        height:175px !important;
    }

    .section.fleet .car-body{
        padding:17px 15px 16px !important;
    }

    .oc5-title{
        font-size:20px !important;
    }

    .oc5-spec-line{
        margin-top:10px !important;
    }

    .oc5-spec-line > span{
        padding:0 7px !important;
        gap:4px !important;

        font-size:10.5px !important;
    }

    .oc5-spec-line svg{
        width:14px !important;
        height:14px !important;
    }

    .oc5-actions{
        margin-top:17px !important;
        gap:7px !important;
    }

    .oc5-row{
        min-height:68px !important;

        grid-template-columns:
           minmax(0,1fr)
           minmax(110px,40%) !important;
    }

    .oc5-left{
        gap:8px !important;
        padding:8px !important;
    }

    .oc5-big-icon{
        width:38px !important;
        height:38px !important;

        flex-basis:38px !important;
    }

    .oc5-big-icon svg{
        width:22px !important;
        height:22px !important;
    }

    .oc5-copy strong{
        font-size:12px !important;
    }

    .oc5-copy small{
        margin-top:4px !important;
        font-size:9.5px !important;
    }

    .oc5-price-box{
        padding:6px !important;
    }

    .oc5-price-box strong{
        font-size:17px !important;
    }

    .oc5-price-box span{
        margin-top:5px !important;
        font-size:9px !important;
    }

    .oc5-action-box{
        gap:4px !important;
        padding:6px !important;
    }

    .oc5-action-box strong{
        font-size:11px !important;
    }

    .oc5-action-icon svg{
        width:20px !important;
        height:20px !important;
    }

    .oc5-chevron svg{
        width:15px !important;
        height:15px !important;
    }

    .oc5-bottom-specs{
        gap:5px !important;
        margin-top:14px !important;
    }

    .oc5-bottom-specs > span{
        min-height:42px !important;

        gap:4px !important;

        padding:7px 4px !important;
    }

    .oc5-bottom-specs svg{
        width:16px !important;
        height:16px !important;

        flex-basis:16px !important;
    }

    .oc5-bottom-specs b{
        font-size:9px !important;
    }
}


/* LAPTOP */

@media(min-width:901px) and (max-width:1199px){

    .section.fleet .grid{
        grid-template-columns:
          repeat(3,minmax(0,1fr)) !important;
    }

}


/* =====================================================
   MOBILE - REFERANS GÖRÜNÜM
   ===================================================== */

@media(max-width:760px){

    .section.fleet{
        padding-top:20px !important;
    }

    .section.fleet .container{
        padding-left:12px !important;
        padding-right:12px !important;
    }

    .section.fleet .grid{
        grid-template-columns:1fr !important;

        gap:16px !important;
    }

    .section.fleet article.car{
        border-radius:17px !important;
    }

    .section.fleet .car-media{
        height:275px !important;
    }

    .section.fleet .car-media-link{
        padding:25px 18px 8px !important;
    }

    .section.fleet .car-badges{
        top:14px !important;
        left:14px !important;
    }

    .section.fleet .badge.cat{
        padding:8px 13px !important;

        font-size:13px !important;
    }

    .section.fleet .car-body{
        padding:20px 15px 18px !important;
    }

    .oc5-title{
        font-size:25px !important;
    }

    .oc5-spec-line{
        display:grid !important;

        grid-template-columns:
          repeat(4,max-content) !important;

        width:100% !important;

        overflow:hidden !important;

        margin-top:13px !important;
    }

    .oc5-spec-line > span{
        padding:0 9px !important;

        gap:5px !important;

        font-size:12px !important;
    }

    .oc5-spec-line > span:first-child{
        padding-left:0 !important;
    }

    .oc5-spec-line svg{
        width:17px !important;
        height:17px !important;
    }

    .oc5-actions{
        margin-top:22px !important;

        gap:8px !important;
    }

    .oc5-row{
        min-height:84px !important;

        grid-template-columns:
          minmax(0,1fr)
          minmax(145px,39%) !important;
    }

    .oc5-left{
        gap:10px !important;
        padding:10px !important;
    }

    .oc5-big-icon{
        width:50px !important;
        height:50px !important;

        flex-basis:50px !important;
    }

    .oc5-big-icon svg{
        width:29px !important;
        height:29px !important;
    }

    .oc5-copy strong{
        font-size:15px !important;
    }

    .oc5-copy small{
        margin-top:6px !important;

        font-size:12px !important;
    }

    .oc5-price-box strong{
        font-size:22px !important;
    }

    .oc5-price-box span{
        font-size:12px !important;
    }

    .oc5-action-box strong{
        font-size:14px !important;
    }

    .oc5-action-icon svg{
        width:25px !important;
        height:25px !important;
    }

    .oc5-bottom-specs{
        gap:7px !important;

        margin-top:20px !important;
    }

    .oc5-bottom-specs > span{
        min-height:49px !important;

        gap:6px !important;

        padding:8px 5px !important;
    }

    .oc5-bottom-specs svg{
        width:20px !important;
        height:20px !important;

        flex-basis:20px !important;
    }

    .oc5-bottom-specs b{
        font-size:11.5px !important;
    }
}


/* DAR TELEFON */

@media(max-width:390px){

    .section.fleet .car-media{
        height:245px !important;
    }

    .oc5-title{
        font-size:22px !important;
    }

    .oc5-spec-line > span{
        padding:0 6px !important;
        font-size:10.5px !important;
    }

    .oc5-row{
        grid-template-columns:
          minmax(0,1fr)
          135px !important;
    }

    .oc5-big-icon{
        width:44px !important;
        height:44px !important;

        flex-basis:44px !important;
    }

    .oc5-big-icon svg{
        width:25px !important;
        height:25px !important;
    }

    .oc5-copy strong{
        font-size:13px !important;
    }

    .oc5-copy small{
        font-size:10.5px !important;
    }

    .oc5-price-box strong{
        font-size:19px !important;
    }

    .oc5-action-box strong{
        font-size:12px !important;
    }

}