/* FORD TOPTANCI FINAL V2 */

.ft-hero{
    --ft-blue:#123b91;
    --ft-blue2:#061f5e;
    --ft-yellow:#ffc51a;
    --ft-text:#11213d;

    width:min(94vw,2200px) !important;
    max-width:2200px !important;
    margin:clamp(20px,2vw,38px) auto clamp(34px,3vw,58px) !important;
    padding:0 !important;

    font-family:Arial,Helvetica,sans-serif !important;
    color:var(--ft-text) !important;
}

.ft-hero,
.ft-hero *{
    box-sizing:border-box !important;
}

.ft-hero .ft-slider{
    display:block !important;
    position:relative !important;
    min-height:clamp(410px,22vw,560px) !important;
    overflow:hidden !important;
    border-radius:clamp(22px,1.5vw,32px) !important;
    background:
        radial-gradient(circle at 82% 28%,rgba(255,255,255,.14),transparent 29%),
        linear-gradient(120deg,var(--ft-blue2),var(--ft-blue)) !important;
    box-shadow:0 20px 60px rgba(8,37,101,.18) !important;
}

.ft-hero .ft-slider:after{
    content:"" !important;
    position:absolute !important;
    right:-4vw !important;
    bottom:-9vw !important;
    width:clamp(520px,32vw,820px) !important;
    height:clamp(520px,32vw,820px) !important;
    border:clamp(80px,5vw,120px) solid rgba(255,255,255,.06) !important;
    border-radius:50% !important;
    pointer-events:none !important;
}

.ft-hero .ft-slide{
    display:none !important;
    min-height:clamp(410px,22vw,560px) !important;
    padding:clamp(54px,4vw,92px) clamp(72px,5vw,130px) clamp(86px,5vw,120px) !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:clamp(55px,4vw,100px) !important;
}

.ft-hero .ft-slide.is-active{
    display:flex !important;
}

.ft-hero .ft-slide-content{
    max-width:min(60vw,1120px) !important;
    position:relative !important;
    z-index:2 !important;
}

.ft-hero .ft-kicker{
    display:inline-flex !important;
    padding:9px 14px !important;
    border:1px solid rgba(255,255,255,.32) !important;
    border-radius:999px !important;
    color:#fff !important;
    background:rgba(255,255,255,.08) !important;
    font-weight:800 !important;
    font-size:clamp(12px,.72vw,16px) !important;
    letter-spacing:1.1px !important;
    margin-bottom:18px !important;
}

.ft-hero .ft-slide h1,
.ft-hero .ft-slide h2{
    margin:0 0 16px !important;
    color:#fff !important;
    line-height:1.03 !important;
    font-size:clamp(42px,3.7vw,82px) !important;
    letter-spacing:-.04em !important;
    font-weight:900 !important;
}

.ft-hero .ft-slide p{
    margin:0 !important;
    max-width:900px !important;
    color:rgba(255,255,255,.84) !important;
    font-size:clamp(17px,1.05vw,23px) !important;
    line-height:1.65 !important;
}

.ft-hero .ft-art{
    width:clamp(300px,18vw,420px) !important;
    height:clamp(220px,13vw,300px) !important;
    flex:0 0 clamp(300px,18vw,420px) !important;
    border:1px solid rgba(255,255,255,.22) !important;
    border-radius:26px !important;
    background:rgba(255,255,255,.08) !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    color:#fff !important;
    text-align:center !important;
    position:relative !important;
    z-index:2 !important;
}

.ft-hero .ft-art-badge{
    display:inline-block !important;
    background:var(--ft-yellow) !important;
    color:#092a72 !important;
    font-weight:900 !important;
    font-style:italic !important;
    font-size:clamp(28px,1.7vw,40px) !important;
    padding:10px 18px !important;
    border-radius:11px !important;
    margin-bottom:16px !important;
}

.ft-hero .ft-art strong{
    color:#fff !important;
    font-size:clamp(28px,1.7vw,40px) !important;
    font-weight:900 !important;
}

.ft-hero .ft-art small{
    color:#fff !important;
    opacity:.76 !important;
    margin-top:8px !important;
}

.ft-hero .ft-arrow{
    display:block !important;
    position:absolute !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:50px !important;
    height:50px !important;
    padding:0 !important;
    border-radius:50% !important;
    border:1px solid rgba(255,255,255,.35) !important;
    background:rgba(4,23,72,.42) !important;
    color:#fff !important;
    font-size:32px !important;
    line-height:1 !important;
    cursor:pointer !important;
    z-index:5 !important;
}

.ft-hero .ft-prev{left:20px !important}
.ft-hero .ft-next{right:20px !important}

.ft-hero .ft-dots{
    position:absolute !important;
    left:clamp(72px,5vw,130px) !important;
    bottom:34px !important;
    display:flex !important;
    gap:8px !important;
    z-index:5 !important;
}

.ft-hero .ft-dots button{
    display:block !important;
    width:9px !important;
    height:9px !important;
    min-width:9px !important;
    min-height:9px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:20px !important;
    background:rgba(255,255,255,.42) !important;
}

.ft-hero .ft-dots button.is-active{
    width:38px !important;
    background:var(--ft-yellow) !important;
}

.ft-hero .ft-search-card{
    width:min(calc(100% - 7vw),1900px) !important;
    margin:-50px auto 0 !important;
    position:relative !important;
    z-index:10 !important;
    background:#fff !important;
    border:1px solid #edf0f6 !important;
    border-radius:24px !important;
    padding:24px !important;
    box-shadow:0 16px 50px rgba(22,34,64,.16) !important;
}

.ft-hero .ft-search-main{
    height:76px !important;
    display:flex !important;
    align-items:center !important;
    border:2px solid #e5e9f1 !important;
    border-radius:15px !important;
    overflow:hidden !important;
    background:#fff !important;
}

.ft-hero .ft-search-icon{
    display:inline-block !important;
    font-size:28px !important;
    padding-left:20px !important;
    color:var(--ft-blue) !important;
}

.ft-hero .ft-search-main input[type="search"]{
    flex:1 1 auto !important;
    min-width:0 !important;
    width:auto !important;
    height:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 20px !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    background:#fff !important;
    color:#17233b !important;
    font-size:17px !important;
    line-height:normal !important;
}

.ft-hero .ft-search-main button{
    align-self:stretch !important;
    width:auto !important;
    min-width:150px !important;
    margin:0 !important;
    padding:0 34px !important;
    border:0 !important;
    border-radius:0 !important;
    background:var(--ft-yellow) !important;
    color:#092a72 !important;
    font-weight:900 !important;
    font-size:15px !important;
}

.ft-hero .ft-search-hint{
    display:flex !important;
    gap:8px !important;
    flex-wrap:wrap !important;
    margin-top:12px !important;
}

.ft-hero .ft-search-hint span{
    display:inline-block !important;
    color:#61708d !important;
    background:#f3f6fb !important;
    border-radius:999px !important;
    padding:6px 10px !important;
    font-size:12px !important;
}

.ft-hero .ft-quick-wrap{
    display:grid !important;
    grid-template-columns:1.65fr 1fr !important;
    gap:24px !important;
    margin-top:30px !important;
}

.ft-hero .ft-block{
    display:block !important;
    background:#fff !important;
    border:1px solid #e9edf4 !important;
    border-radius:22px !important;
    padding:28px !important;
    box-shadow:0 8px 28px rgba(25,39,71,.06) !important;
}

.ft-hero .ft-block-head{
    display:flex !important;
    justify-content:space-between !important;
    align-items:flex-end !important;
    gap:15px !important;
    margin-bottom:20px !important;
}

.ft-hero .ft-block-head h3{
    margin:0 !important;
    color:#142546 !important;
    font-size:26px !important;
    font-weight:800 !important;
}

.ft-hero .ft-block-head span{
    display:block !important;
    margin-top:6px !important;
    color:#7a8599 !important;
    font-size:12px !important;
}

.ft-hero .ft-block-head em{
    display:inline-block !important;
    padding:7px 10px !important;
    border-radius:999px !important;
    background:#edf3ff !important;
    color:var(--ft-blue) !important;
    font-style:normal !important;
    font-size:11px !important;
    font-weight:900 !important;
}

.ft-hero .ft-models{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:12px !important;
}

.ft-hero .ft-models a{
    min-width:0 !important;
    min-height:60px !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    padding:10px 12px !important;
    border:1px solid #e8ecf3 !important;
    border-radius:13px !important;
    text-decoration:none !important;
    color:#243451 !important;
    font-weight:700 !important;
    font-size:14px !important;
    background:#fff !important;
}

.ft-hero .ft-model-logo{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    border-radius:50% !important;
    display:grid !important;
    place-items:center !important;
    background:var(--ft-blue) !important;
    color:#fff !important;
    font-style:italic !important;
    font-weight:900 !important;
}

.ft-hero .ft-model-name{
    min-width:0 !important;
}

.ft-hero .ft-models a b{
    margin-left:auto !important;
    color:#9aa8c3 !important;
}

.ft-hero .ft-cats{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
}

.ft-hero .ft-cats a{
    min-width:0 !important;
    min-height:68px !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    padding:11px 13px !important;
    border:1px solid #e8ecf3 !important;
    border-radius:13px !important;
    text-decoration:none !important;
    color:#243451 !important;
    font-weight:800 !important;
    font-size:14px !important;
    background:#fff !important;
}

.ft-hero .ft-cat-icon{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:10px !important;
    background:#edf3ff !important;
    color:var(--ft-blue) !important;
}

.ft-hero .ft-cats b{
    margin-left:auto !important;
    color:var(--ft-blue) !important;
}

@media(min-width:1920px){
    .ft-hero{
        width:min(95vw,2200px) !important;
    }

    .ft-hero .ft-slider,
    .ft-hero .ft-slide{
        min-height:500px !important;
    }
}

@media(min-width:2400px){
    .ft-hero{
        width:min(92vw,2400px) !important;
        max-width:2400px !important;
    }

    .ft-hero .ft-slider,
    .ft-hero .ft-slide{
        min-height:560px !important;
    }
}

@media(max-width:900px){
    .ft-hero{
        width:calc(100vw - 20px) !important;
    }

    .ft-hero .ft-art{
        display:none !important;
    }

    .ft-hero .ft-search-card{
        width:calc(100% - 20px) !important;
    }

    .ft-hero .ft-quick-wrap{
        grid-template-columns:1fr !important;
    }

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

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

    html,body{
        overflow-x:hidden !important;
    }

    .ft-hero{
        width:100% !important;
        max-width:100% !important;
        margin:8px auto 24px !important;
        padding:0 10px !important;
    }

    .ft-hero .ft-slider{
        min-height:300px !important;
        border-radius:18px !important;
    }

    .ft-hero .ft-slide{
        min-height:300px !important;
        padding:30px 20px 70px !important;
    }

    .ft-hero .ft-slide h1,
    .ft-hero .ft-slide h2{
        font-size:29px !important;
        line-height:1.06 !important;
    }

    .ft-hero .ft-slide p{
        font-size:14px !important;
    }

    .ft-hero .ft-kicker{
        font-size:10px !important;
        padding:6px 9px !important;
    }

    .ft-hero .ft-arrow{
        display:none !important;
    }

    .ft-hero .ft-dots{
        left:20px !important;
        bottom:24px !important;
    }

    .ft-hero .ft-search-card{
        width:calc(100% - 8px) !important;
        margin:-30px auto 0 !important;
        padding:10px !important;
        border-radius:16px !important;
    }

    .ft-hero .ft-search-main{
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        display:grid !important;
        grid-template-columns:38px minmax(0,1fr) !important;
        border-radius:12px !important;
    }

    .ft-hero .ft-search-icon{
        width:38px !important;
        height:50px !important;
        padding:0 !important;
        display:grid !important;
        place-items:center !important;
        font-size:20px !important;
    }

    .ft-hero .ft-search-main input[type="search"]{
        display:block !important;
        width:100% !important;
        height:50px !important;
        min-height:50px !important;
        max-height:50px !important;
        margin:0 !important;
        padding:0 8px 0 4px !important;
        border:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;
        font-size:13px !important;
        line-height:normal !important;
        -webkit-appearance:none !important;
        appearance:none !important;
    }

    .ft-hero .ft-search-main button{
        grid-column:1/-1 !important;
        width:100% !important;
        min-width:0 !important;
        height:48px !important;
        min-height:48px !important;
        padding:0 12px !important;
        font-size:14px !important;
    }

    .ft-hero .ft-search-hint{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:6px !important;
        margin-top:9px !important;
    }

    .ft-hero .ft-search-hint span{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        width:100% !important;
        min-height:30px !important;
        border:1px solid #e5ebf4 !important;
        border-radius:9px !important;
        padding:5px 6px !important;
        font-size:10.5px !important;
        font-weight:700 !important;
        text-align:center !important;
    }

    .ft-hero .ft-quick-wrap{
        display:block !important;
        margin-top:14px !important;
    }

    .ft-hero .ft-block{
        width:100% !important;
        margin:0 0 12px !important;
        padding:14px 10px !important;
        border-radius:16px !important;
    }

    .ft-hero .ft-block-head{
        align-items:flex-start !important;
        margin-bottom:12px !important;
    }

    .ft-hero .ft-block-head h3{
        font-size:20px !important;
    }

    .ft-hero .ft-block-head span{
        font-size:11px !important;
    }

    .ft-hero .ft-block-head em{
        display:none !important;
    }

    .ft-hero .ft-models{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:7px !important;
    }

    .ft-hero .ft-models a{
        min-height:56px !important;
        padding:8px !important;
        gap:7px !important;
        border-radius:12px !important;
        font-size:12px !important;
    }

    .ft-hero .ft-model-logo{
        width:29px !important;
        height:29px !important;
        min-width:29px !important;
        font-size:12px !important;
    }

    .ft-hero .ft-models a b{
        display:none !important;
    }

    .ft-hero .ft-cats{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:7px !important;
    }

    .ft-hero .ft-cats a{
        min-height:60px !important;
        padding:8px !important;
        gap:7px !important;
        border-radius:12px !important;
        font-size:11px !important;
    }

    .ft-hero .ft-cat-icon{
        width:29px !important;
        height:29px !important;
        min-width:29px !important;
        font-size:14px !important;
    }

    .ft-hero .ft-cats b{
        display:none !important;
    }
}

@media(max-width:360px){
    .ft-hero .ft-models,
    .ft-hero .ft-cats{
        grid-template-columns:1fr !important;
    }
}