/* =====================================================
   OBACARS PREMIUM HOME HERO
   ===================================================== */

.oc-premium-hero{
    position:relative !important;
    overflow:hidden !important;
    color:#fff !important;
    background:
        radial-gradient(circle at 72% 30%,rgba(255,0,35,.35),transparent 34%),
        radial-gradient(circle at 20% 60%,rgba(255,0,35,.22),transparent 38%),
        linear-gradient(145deg,#71000e 0%,#a00017 38%,#d00029 70%,#70000d 100%) !important;
}

.oc-premium-hero::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    pointer-events:none !important;
    background:
      linear-gradient(118deg,transparent 0 60%,rgba(255,255,255,.05) 60.4%,transparent 61%),
      linear-gradient(0deg,rgba(0,0,0,.18),transparent 35%,rgba(0,0,0,.08)) !important;
    z-index:0 !important;
}

.oc-premium-hero::after{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    height:35% !important;
    pointer-events:none !important;
    background:
      linear-gradient(173deg,transparent 0 59%,rgba(255,255,255,.12) 59.5%,transparent 60.2%),
      linear-gradient(7deg,transparent 0 64%,rgba(255,0,32,.25) 64.5%,transparent 65.2%) !important;
    z-index:0 !important;
}

.oc-hero-shell{
    position:relative;
    z-index:2;
    width:min(100%,1180px);
    margin:0 auto;
    padding:48px 28px 34px;
}

.oc-hero-top{
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(220px,.75fr);
    gap:30px;
    align-items:start;
}

.oc-hero-copy{
    padding-top:22px;
}

.oc-hero-copy h1{
    margin:0 !important;
    max-width:660px !important;
    color:#fff !important;
    font-size:clamp(38px,4.5vw,64px) !important;
    line-height:1.08 !important;
    font-weight:900 !important;
    letter-spacing:-.04em !important;
    text-shadow:0 4px 20px rgba(0,0,0,.24) !important;
}

.oc-red-line{
    display:block;
    width:58px;
    height:5px;
    margin:30px 0 20px;
    border-radius:999px;
    background:#ff1238;
    box-shadow:0 0 16px rgba(255,18,56,.6);
}

.oc-hero-copy p{
    max-width:510px;
    color:rgba(255,255,255,.93) !important;
    font-size:18px !important;
    line-height:1.75 !important;
    font-weight:500 !important;
}


/* 98 YIL */

.oc-promo-area{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    min-height:380px;
}

.oc-year-badge{
    position:relative;
    width:150px;
    height:150px;
    border:3px double #f4d07d;
    border-radius:50%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#ffe3a2;
    background:radial-gradient(circle,#7d0715 10%,rgba(90,0,10,.92) 68%,rgba(100,0,10,.3));
    box-shadow:
      inset 0 0 0 7px rgba(255,221,145,.10),
      0 10px 28px rgba(0,0,0,.22);
}

.oc-year-badge::before,
.oc-year-badge::after{
    content:"✦";
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    color:#f5d37e;
    font-size:18px;
}

.oc-year-badge::before{left:12px}
.oc-year-badge::after{right:12px}

.oc-year-star{
    position:absolute;
    top:-17px;
    font-size:28px;
    color:#ffe194;
    text-shadow:0 2px 4px #5a0000;
}

.oc-year-badge strong{
    font-size:52px;
    line-height:.9;
    letter-spacing:-.05em;
    color:#ffe6a8;
}

.oc-year-badge span{
    margin-top:8px;
    font-size:18px;
    font-weight:900;
    letter-spacing:.12em;
}


/* %30 */

.oc-discount{
    position:relative;
    z-index:2;
    width:230px;
    margin-top:14px;
    padding:16px 10px 22px;
    border:2px solid rgba(255,255,255,.92);
    border-radius:10px;
    text-align:center;
    transform:rotate(-2deg);
    background:
      linear-gradient(145deg,#c8001e 0%,#f10a35 53%,#a50016 100%);
    box-shadow:
      0 14px 32px rgba(0,0,0,.3),
      inset 0 0 24px rgba(255,255,255,.08);
}

.oc-discount-main{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    line-height:.8;
}

.oc-discount-main span{
    font-size:54px;
    font-weight:900;
}

.oc-discount-main strong{
    font-size:105px;
    letter-spacing:-.08em;
    font-weight:950;
}

.oc-discount b{
    display:block;
    margin-top:10px;
    font-size:42px;
    line-height:.95;
    font-weight:950;
}

.oc-limited{
    position:relative;
    z-index:3;
    margin-top:-3px;
    padding:11px 16px;
    border-radius:9px;
    color:#111;
    background:#fff;
    font-size:14px;
    font-weight:900;
    box-shadow:0 8px 20px rgba(0,0,0,.22);
    transform:rotate(-2deg);
    white-space:nowrap;
}

.oc-limited svg{
    width:19px;
    height:19px;
    margin-right:5px;
    vertical-align:-4px;
    fill:none;
    stroke:#d4002a;
    stroke-width:2;
}


/* CAR */

.oc-car-stage{
    position:relative;
    z-index:4;
    max-width:900px;
    margin:-160px auto -12px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
}

.oc-car-stage::after{
    content:"";
    position:absolute;
    z-index:-1;
    left:14%;
    right:14%;
    bottom:5%;
    height:10%;
    background:rgba(0,0,0,.48);
    filter:blur(22px);
    border-radius:50%;
}

.oc-car-stage img{
    display:block;
    width:100% !important;
    max-width:860px !important;
    height:auto !important;
    object-fit:contain !important;
    filter:drop-shadow(0 18px 20px rgba(0,0,0,.25));
}


/* STATS */

.oc-hero-stats{
    max-width:1030px;
    margin:0 auto;
    padding:22px 12px 16px;
    border-top:1px solid rgba(255,255,255,.72);
    display:grid;
    grid-template-columns:repeat(3,1fr);
}

.oc-stat{
    min-height:74px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    padding:0 20px;
}

.oc-stat + .oc-stat{
    border-left:1px solid rgba(255,255,255,.55);
}

.oc-stat svg{
    width:42px;
    height:42px;
    fill:none;
    stroke:#fff;
    stroke-width:1.8;
    flex-shrink:0;
}

.oc-stat strong{
    display:block;
    color:#fff;
    font-size:31px;
    line-height:1;
    font-weight:900;
}

.oc-stat span{
    display:block;
    margin-top:8px;
    color:rgba(255,255,255,.94);
    font-size:12px;
    font-weight:800;
}


/* RESERVATION */

.oc-reservation-big{
    max-width:1040px;
    min-height:122px;
    margin:18px auto;
    padding:20px 30px;
    display:grid;
    grid-template-columns:85px 1fr 60px;
    align-items:center;
    gap:18px;
    border-radius:22px;
    background:#fff;
    color:#d4002a;
    box-shadow:0 13px 30px rgba(0,0,0,.22);
    transition:transform .15s,box-shadow .15s;
}

.oc-reservation-big:hover{
    transform:translateY(-2px);
    box-shadow:0 17px 36px rgba(0,0,0,.28);
}

.oc-reservation-icon svg{
    width:67px;
    height:67px;
    fill:none;
    stroke:#d4002a;
    stroke-width:1.8;
}

.oc-reservation-text strong{
    display:block;
    font-size:31px;
    line-height:1.1;
    font-weight:950;
    letter-spacing:-.025em;
    color:#d4002a;
}

.oc-reservation-text span{
    display:block;
    margin-top:8px;
    color:#5e5e5e;
    font-size:18px;
    font-weight:600;
}

.oc-reservation-arrow{
    display:flex;
    justify-content:flex-end;
}

.oc-reservation-arrow svg{
    width:48px;
    height:48px;
    fill:none;
    stroke:#d4002a;
    stroke-width:2;
}


/* 3 BENEFITS */

.oc-benefits{
    max-width:1040px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.oc-benefit{
    min-height:116px;
    padding:17px 18px;
    display:flex;
    align-items:center;
    gap:13px;
    border-radius:15px;
    background:#fff;
    color:#171717;
    box-shadow:0 8px 22px rgba(0,0,0,.18);
}

.oc-benefit-icon{
    flex:0 0 54px;
}

.oc-benefit-icon svg{
    width:50px;
    height:50px;
    fill:none;
    stroke:#e0002b;
    stroke-width:1.8;
}

.oc-benefit strong{
    display:block;
    color:#161616;
    font-size:15px;
    line-height:1.2;
    font-weight:900;
}

.oc-benefit span{
    display:block;
    margin-top:5px;
    color:#333;
    font-size:12px;
    line-height:1.4;
    font-weight:500;
}


/* HEADER PHONE + WHATSAPP */

.obacars-header-search{
    transform:none !important;
    margin-left:auto !important;
    margin-right:0 !important;
}

.obacars-header-whatsapp{
    width:52px;
    height:52px;
    margin-left:10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 52px;
    border-radius:14px;
    color:#fff !important;
    background:#20b85a;
    box-shadow:0 6px 18px rgba(32,184,90,.2);
}

.obacars-header-whatsapp svg{
    width:30px;
    height:30px;
    fill:#fff;
}

.menu-toggle{
    margin-left:10px !important;
}


/* =====================================================
   MOBILE
   ===================================================== */

@media(max-width:760px){

    .site-header .container{
        min-height:74px !important;
        padding-inline:15px !important;
        gap:0 !important;
    }

    .site-header .brand{
        font-size:1.22rem !important;
        gap:7px !important;
    }

    .site-header .brand img{
        width:42px !important;
        height:42px !important;
    }

    .obacars-header-search{
        width:48px !important;
        height:48px !important;
        min-width:48px !important;
        flex:0 0 48px !important;
        margin-left:auto !important;
        margin-right:0 !important;
        padding:0 !important;
        border-radius:13px !important;
        transform:none !important;
    }

    .obacars-header-search span{
        display:none !important;
    }

    .obacars-header-search svg{
        width:25px !important;
        height:25px !important;
    }

    .obacars-header-whatsapp{
        width:48px;
        height:48px;
        flex-basis:48px;
        margin-left:8px;
        border-radius:13px;
    }

    .obacars-header-whatsapp svg{
        width:28px;
        height:28px;
    }

    .menu-toggle{
        width:48px !important;
        height:48px !important;
        margin-left:8px !important;
        border-radius:13px !important;
    }


    .oc-hero-shell{
        width:100%;
        padding:30px 16px 26px;
    }

    .oc-hero-top{
        grid-template-columns:minmax(0,1.2fr) minmax(128px,.8fr);
        gap:8px;
    }

    .oc-hero-copy{
        padding-top:18px;
    }

    .oc-hero-copy h1{
        font-size:clamp(27px,7.2vw,38px) !important;
        line-height:1.12 !important;
        letter-spacing:-.035em !important;
    }

    .oc-red-line{
        width:45px;
        height:4px;
        margin:22px 0 15px;
    }

    .oc-hero-copy p{
        max-width:100%;
        font-size:14px !important;
        line-height:1.65 !important;
    }

    .oc-promo-area{
        min-height:285px;
    }

    .oc-year-badge{
        width:100px;
        height:100px;
        border-width:2px;
    }

    .oc-year-star{
        top:-13px;
        font-size:21px;
    }

    .oc-year-badge strong{
        font-size:38px;
    }

    .oc-year-badge span{
        margin-top:4px;
        font-size:12px;
    }

    .oc-year-badge::before,
    .oc-year-badge::after{
        font-size:11px;
    }

    .oc-year-badge::before{left:7px}
    .oc-year-badge::after{right:7px}

    .oc-discount{
        width:145px;
        margin-top:8px;
        padding:10px 5px 14px;
        border-radius:7px;
    }

    .oc-discount-main span{
        font-size:31px;
    }

    .oc-discount-main strong{
        font-size:69px;
    }

    .oc-discount b{
        margin-top:7px;
        font-size:27px;
    }

    .oc-limited{
        margin-top:-2px;
        padding:7px 7px;
        font-size:8px;
        border-radius:6px;
    }

    .oc-limited svg{
        width:13px;
        height:13px;
        margin-right:2px;
        vertical-align:-3px;
    }

    .oc-car-stage{
        width:108%;
        max-width:none;
        margin:-72px -4% -8px;
    }

    .oc-car-stage img{
        max-width:none !important;
        width:100% !important;
    }

    .oc-hero-stats{
        width:100%;
        padding:17px 0 13px;
    }

    .oc-stat{
        min-height:60px;
        gap:7px;
        padding:0 6px;
    }

    .oc-stat svg{
        width:28px;
        height:28px;
    }

    .oc-stat strong{
        font-size:21px;
    }

    .oc-stat span{
        margin-top:4px;
        font-size:8px;
        white-space:nowrap;
    }

    .oc-reservation-big{
        width:100%;
        min-height:96px;
        margin:16px auto 12px;
        padding:14px 14px;
        grid-template-columns:56px minmax(0,1fr) 34px;
        gap:10px;
        border-radius:16px;
    }

    .oc-reservation-icon svg{
        width:50px;
        height:50px;
    }

    .oc-reservation-text strong{
        font-size:19px;
        white-space:nowrap;
    }

    .oc-reservation-text span{
        margin-top:5px;
        font-size:12px;
    }

    .oc-reservation-arrow svg{
        width:31px;
        height:31px;
    }

    .oc-benefits{
        grid-template-columns:repeat(3,1fr);
        gap:6px;
    }

    .oc-benefit{
        min-width:0;
        min-height:94px;
        padding:10px 7px;
        align-items:flex-start;
        gap:5px;
        border-radius:10px;
    }

    .oc-benefit-icon{
        flex:0 0 32px;
    }

    .oc-benefit-icon svg{
        width:31px;
        height:31px;
    }

    .oc-benefit strong{
        font-size:9.5px;
        white-space:nowrap;
    }

    .oc-benefit span{
        margin-top:4px;
        font-size:7.5px;
        line-height:1.35;
    }
}


@media(max-width:390px){

    .site-header .brand{
        font-size:1.08rem !important;
    }

    .site-header .brand img{
        width:38px !important;
        height:38px !important;
    }

    .obacars-header-search,
    .obacars-header-whatsapp,
    .menu-toggle{
        width:44px !important;
        height:44px !important;
        min-width:44px !important;
        flex-basis:44px !important;
    }

    .oc-hero-shell{
        padding-left:13px;
        padding-right:13px;
    }

    .oc-hero-top{
        grid-template-columns:minmax(0,1.22fr) 122px;
        gap:4px;
    }

    .oc-hero-copy h1{
        font-size:25px !important;
    }

    .oc-hero-copy p{
        font-size:12.5px !important;
    }

    .oc-discount{
        width:128px;
    }

    .oc-discount-main strong{
        font-size:61px;
    }

    .oc-discount b{
        font-size:24px;
    }

    .oc-reservation-text strong{
        font-size:17px;
    }

}


/* =====================================================
   MOBIL UST ALAN SIKILASTIRMA
   Rezervasyon butonunu ilk ekrana yaklastir
   ===================================================== */

@media(max-width:760px){

    /* SIYAH UST BAR - TEK SATIR */
    .topbar{
        min-height:0 !important;
        height:auto !important;
    }

    .topbar .container{
        min-height:40px !important;
        padding-top:7px !important;
        padding-bottom:7px !important;

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

        gap:8px !important;

        white-space:nowrap !important;
        overflow:hidden !important;
    }

    /* Bos kalan elemanlar ikinci satir acmasin */
    .topbar .container > :empty{
        display:none !important;
    }

    .topbar .dot{
        flex:0 0 3px !important;
        width:3px !important;
        height:3px !important;
    }


    /* BEYAZ HEADER */
    .site-header .container{
        min-height:64px !important;
        height:64px !important;

        padding-top:5px !important;
        padding-bottom:5px !important;

        padding-left:14px !important;
        padding-right:14px !important;
    }

    .site-header .brand{
        font-size:1.08rem !important;
    }

    .site-header .brand img{
        width:38px !important;
        height:38px !important;
    }

    .obacars-header-search{
        width:44px !important;
        height:44px !important;
        min-width:44px !important;
        flex-basis:44px !important;

        border-radius:12px !important;
    }

    .obacars-header-search svg{
        width:23px !important;
        height:23px !important;
    }

    .menu-toggle{
        width:44px !important;
        height:44px !important;

        min-width:44px !important;

        margin-left:7px !important;

        border-radius:12px !important;
    }


    /* HERO UST BOSLUGUNU DA BIRAZ AZALT */
    .oc-hero-shell{
        padding-top:18px !important;
    }

    .oc-hero-copy{
        padding-top:8px !important;
    }

    .oc-red-line{
        margin-top:16px !important;
        margin-bottom:12px !important;
    }

}


/* MOBIL HERO COK HAFIF KUCULTME */
@media(max-width:760px){

    .oc-hero-shell{
        padding-top:10px !important;
        padding-bottom:20px !important;
    }

    .oc-hero-copy{
        padding-top:2px !important;
    }

    .oc-hero-copy h1{
        font-size:clamp(25px,6.7vw,34px) !important;
    }

    .oc-hero-copy p{
        font-size:13px !important;
        line-height:1.55 !important;
    }

    .oc-red-line{
        margin-top:12px !important;
        margin-bottom:10px !important;
    }

    .oc-promo-area{
        min-height:260px !important;
    }

    .oc-year-badge{
        width:92px !important;
        height:92px !important;
    }

    .oc-discount{
        width:136px !important;
    }

    .oc-discount-main strong{
        font-size:64px !important;
    }

    .oc-discount b{
        font-size:25px !important;
    }

    .oc-car-stage{
        width:102% !important;
        margin:-62px -1% -4px !important;
    }

    .oc-hero-stats{
        padding-top:12px !important;
        padding-bottom:10px !important;
    }

    .oc-reservation-big{
        margin-top:10px !important;
    }
}

/* HERO YENI ALT SIRALAMA */
.oc-benefits{
    margin-top:12px !important;
}

.oc-hero-stats{
    margin-top:18px !important;
    margin-bottom:0 !important;
}


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

    /* Rezervasyon butonu arabaya daha yakın */
    .oc-reservation-big{
        margin-top:8px !important;
        margin-bottom:10px !important;
    }

    /* Tam kasko / vale / destek */
    .oc-benefits{
        margin-top:0 !important;
        margin-bottom:10px !important;
    }

    /* 4.9 / 500+ / 7/24 artık en altta */
    .oc-hero-stats{
        margin-top:8px !important;
        padding-top:14px !important;
        padding-bottom:8px !important;
        border-top:1px solid rgba(255,255,255,.55) !important;
    }

}