/* OtoKontak V237770 - Temiz profesyonel mobil arayuz */

@media (max-width:700px){

  :root{
    --ok70-header-h:106px!important;
  }

  html,
  body{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding-top:0!important;
    overflow-x:hidden!important;
    background:#071725!important;
  }

  body{
    padding-bottom:70px!important;
  }

  /* ========== HEADER ========== */

  body>header{
    position:sticky!important;
    inset:auto!important;
    top:0!important;
    z-index:10000!important;

    display:grid!important;
    grid-template-columns:128px minmax(0,1fr)!important;
    grid-template-rows:54px 44px!important;
    gap:4px 8px!important;

    width:100%!important;
    height:106px!important;
    min-height:106px!important;
    max-height:106px!important;

    margin:0!important;
    padding:4px 10px!important;

    background:#071725!important;
    border-bottom:1px solid #183a53!important;

    transform:none!important;
    box-sizing:border-box!important;
  }

  body>header .logo{
    grid-column:1!important;
    grid-row:1!important;

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

    width:128px!important;
    height:50px!important;

    margin:0!important;
    padding:0!important;
  }

  body>header .logo img{
    display:block!important;
    width:auto!important;
    height:auto!important;
    max-width:124px!important;
    max-height:42px!important;
  }

  body>header .header-actions{
    grid-column:2!important;
    grid-row:1!important;

    display:flex!important;
    justify-content:flex-end!important;
    align-items:center!important;
    gap:5px!important;

    width:100%!important;
    min-width:0!important;
    height:46px!important;

    margin:0!important;
    padding:0!important;

    overflow:hidden!important;
  }

  /* Alt menude zaten bulunanlari header'dan kaldir */
  body>header .header-actions>a[href="/favoriler"],
  body>header #auth-action,
  body>header .mobile-install{
    display:none!important;
  }

  body>header .header-actions>a,
  body>header .header-actions>button,
  #catalog-admin-launch{
    flex:0 0 auto!important;

    min-width:38px!important;
    width:auto!important;
    height:36px!important;
    min-height:36px!important;

    margin:0!important;
    padding:0 8px!important;

    border-radius:8px!important;

    font-size:10px!important;
    line-height:1!important;
  }

  #catalog-admin-launch{
    width:38px!important;
    min-width:38px!important;
    padding:0!important;
    font-size:0!important;
  }

  #catalog-admin-launch::after{
    content:"K"!important;
    color:#fff!important;
    font-size:13px!important;
    font-weight:800!important;
  }

  body>header a[aria-label="Bildirimler"]{
    width:38px!important;
    padding:0!important;
    font-size:15px!important;
  }

  #dealer-network-toggle{
    width:44px!important;
    padding:0!important;
    font-size:0!important;
  }

  #dealer-network-toggle::after{
    content:"Bayi"!important;
    color:#fff!important;
    font-size:10px!important;
    font-weight:700!important;
  }

  /* ========== ARAMA ========== */

  body>header .v22354-header-search{
    position:static!important;

    grid-column:1/-1!important;
    grid-row:2!important;

    display:grid!important;
    grid-template-columns:minmax(0,1fr) 58px!important;

    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:42px!important;

    margin:0!important;
    padding:0!important;
  }

  body>header .v22354-header-search-field{
    width:100%!important;
    min-width:0!important;
  }

  body>header .v22354-header-search input{
    display:block!important;

    width:100%!important;
    min-width:0!important;
    height:42px!important;

    padding:0 12px 0 33px!important;

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

    font-size:14px!important;
    line-height:42px!important;
  }

  body>header .v22354-header-search button{
    width:58px!important;
    min-width:58px!important;
    height:42px!important;

    padding:0!important;

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

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

  /* ========== SOL PANEL ========== */

  #brand-sidebar{
    display:none!important;
  }

  /* ========== ANA ICERIK ========== */

  body main#app,
  body.has-brand-sidebar main#app,
  body.has-dealer-sidebar main#app,
  body.has-brand-sidebar.has-dealer-sidebar main#app{
    position:relative!important;
    inset:auto!important;

    display:block!important;

    width:100%!important;
    max-width:100%!important;
    min-width:0!important;

    min-height:calc(100dvh - 176px)!important;

    margin:0!important;
    margin-left:0!important;
    margin-right:0!important;
    margin-top:0!important;

    padding:16px 12px 90px!important;

    background:
      radial-gradient(circle at 90% 10%,rgba(26,104,191,.20),transparent 34%),
      linear-gradient(145deg,#08213a,#0a315a 55%,#08213a)!important;

    box-sizing:border-box!important;

    transform:none!important;
    overflow:visible!important;
  }

  /* ========== ANA SAYFA ========== */

  #app .v2235-home-features{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;

    width:100%!important;
    margin:0 0 22px!important;
  }

  #app .v2235-home-features>a{
    min-width:0!important;
    min-height:104px!important;

    padding:12px!important;

    border-radius:14px!important;
  }

  #app .v2235-home-features .ok-feature-icon{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
  }

  #app .v2235-home-features strong{
    font-size:13px!important;
  }

  #app .v2235-home-features small{
    font-size:10px!important;
    line-height:1.4!important;
  }

  body:has(#brand-section) .brand-grid{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }

  /* ========== MARKA / MODEL ========== */

  #app .model-grid,
  #app .v215-model-grid,
  #app .moto-model-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  #app .model-grid>*,
  #app .v215-model-card{
    width:100%!important;
    min-width:0!important;
  }

  #app .v210-model-page{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  #app .v210-model-page h1{
    font-size:25px!important;
    line-height:1.2!important;
  }

  #app .v210-info-grid{
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }

  #app .v210-package-panel{
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
  }

  #app .v210-package-panel .table-wrap{
    width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }

  #app .v210-price-table{
    min-width:680px!important;
  }

  /* ========== MOBIL MARKALAR ========== */

  #app .v216-mobile-brands{
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }

  #app .v216-mobile-brands-head{
    margin:0 0 12px!important;
    padding:16px!important;

    border:1px solid #21445e!important;
    border-radius:15px!important;

    background:#09243a!important;
  }

  #app .v216-mobile-brands-head h1{
    margin:5px 0!important;

    color:#fff!important;

    font-size:25px!important;
    line-height:1.2!important;
  }

  #app .v216-mobile-brands-head p{
    color:#adc2d3!important;
    font-size:12px!important;
    line-height:1.55!important;
  }

  #app .v216-mobile-brand-list{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
  }

  #app .v216-mobile-brand-list a{
    min-height:54px!important;
    border-radius:10px!important;
  }

  /* ========== BAYI DRAWER ========== */

  #dealer-sidebar{
    display:none!important;
  }

  body.dealer-drawer-open{
    overflow:hidden!important;
  }

  body.dealer-drawer-open #dealer-sidebar{
    display:flex!important;

    position:fixed!important;
    z-index:12000!important;

    top:0!important;
    right:0!important;
    bottom:0!important;
    left:auto!important;

    width:min(88vw,340px)!important;
    height:100dvh!important;

    background:#071725!important;

    box-shadow:-16px 0 45px rgba(0,0,0,.42)!important;
  }

  body.dealer-drawer-open .dealer-sidebar-nav{
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }

  /* ========== ALT NAV ========== */

  .mobile-bottom-nav{
    position:fixed!important;
    z-index:10000!important;

    left:0!important;
    right:0!important;
    bottom:0!important;

    display:grid!important;
    grid-template-columns:repeat(5,1fr)!important;

    width:100%!important;
    height:68px!important;

    margin:0!important;
    padding:5px 3px max(5px,env(safe-area-inset-bottom))!important;

    background:#fff!important;
    border-top:1px solid #d7e1e9!important;

    box-shadow:0 -5px 20px rgba(0,0,0,.12)!important;
  }

  .mobile-bottom-nav a{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;

    min-width:0!important;

    color:#61758a!important;
    text-decoration:none!important;
  }

  .mobile-bottom-nav a span{
    font-size:19px!important;
  }

  .mobile-bottom-nav a small{
    margin-top:2px!important;
    font-size:9px!important;
    font-weight:600!important;
  }

  /* ========== MARKA SOHBETI ========== */

  #brand-chat-launcher{
    position:fixed!important;
    z-index:9000!important;

    right:10px!important;
    bottom:77px!important;
    left:auto!important;

    width:auto!important;
    max-width:180px!important;
    min-height:44px!important;

    padding:8px 11px!important;

    border-radius:13px!important;
  }

  /* Mobilde PWA pet ana sayfayi kapatmasin */
  #otokontak-pwa-install{
    display:none!important;
  }

  .site-footer{
    width:100%!important;

    margin-left:0!important;
    margin-right:0!important;

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

@media(max-width:390px){

  body>header{
    grid-template-columns:112px minmax(0,1fr)!important;
  }

  body>header .logo{
    width:112px!important;
  }

  body>header .logo img{
    max-width:108px!important;
  }

  #app .v2235-home-features{
    grid-template-columns:1fr!important;
  }

  body:has(#brand-section) .brand-grid{
    grid-template-columns:1fr!important;
  }
}

/* V237771 - Mobil marka listesini netlestir */

@media(max-width:700px){

  #app .v216-mobile-brand-list{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }

  #app .v216-mobile-brand-list a{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto 20px!important;
    align-items:center!important;
    gap:10px!important;

    width:100%!important;
    min-height:58px!important;

    padding:12px 14px!important;

    background:#0a2236!important;
    border:1px solid #1b405b!important;
    border-radius:11px!important;

    opacity:1!important;
    text-decoration:none!important;

    box-shadow:none!important;
  }

  /* Marka adi */
  #app .v216-mobile-brand-list a > span{
    color:#f3f8fc!important;
    opacity:1!important;

    font-size:15px!important;
    font-weight:650!important;
    line-height:1.3!important;

    text-shadow:none!important;
  }

  /* Model adedi */
  #app .v216-mobile-brand-list a > small{
    color:#adc1d1!important;
    opacity:1!important;

    font-size:11px!important;
    font-weight:500!important;
    line-height:1.3!important;

    white-space:nowrap!important;
  }

  /* Sag ok */
  #app .v216-mobile-brand-list a > b{
    color:#63baff!important;
    opacity:1!important;

    font-size:20px!important;
    font-weight:500!important;
    line-height:1!important;
  }

  /* Dokunma / hover */
  #app .v216-mobile-brand-list a:active,
  #app .v216-mobile-brand-list a:hover{
    background:#0d2b43!important;
    border-color:#2b6287!important;
  }

  /* Marka arama etiketi */
  #app .v216-mobile-brand-search > span{
    color:#ff7628!important;
    opacity:1!important;

    font-size:11px!important;
    font-weight:800!important;
    letter-spacing:.08em!important;
  }

  #app .v216-mobile-brand-search input{
    color:#eef6fc!important;
    opacity:1!important;
  }

  #app .v216-mobile-brand-search input::placeholder{
    color:#8299ac!important;
    opacity:1!important;
  }
}

/* V237772 - Mobil Hesap / Uyelik okunurluk */

@media(max-width:700px){

  /* Koyu tanitim paneli */
  #app .auth-experience .auth-welcome,
  #app .auth-welcome{
    color:#ffffff!important;
  }

  #app .auth-welcome h1,
  #app .auth-welcome h2,
  #app .auth-welcome h3,
  #app .auth-welcome-content h1,
  #app .auth-welcome-content h2{
    color:#ffffff!important;
    opacity:1!important;
    text-shadow:none!important;

    font-weight:750!important;
    line-height:1.15!important;
  }

  #app .auth-welcome h1{
    font-size:31px!important;
  }

  #app .auth-welcome p,
  #app .auth-welcome-content p{
    color:#d7e5f1!important;
    opacity:1!important;

    font-size:15px!important;
    line-height:1.55!important;
  }

  /* Avantaj listesi */
  #app .auth-welcome li,
  #app .auth-welcome ul li,
  #app .auth-welcome-content li{
    color:#f4f8fc!important;
    opacity:1!important;

    font-size:14px!important;
    font-weight:600!important;
    line-height:1.4!important;
  }

  #app .auth-welcome li strong,
  #app .auth-welcome-content li strong{
    color:#ffffff!important;
    opacity:1!important;
  }

  /* Ucretsiz hesap rozeti */
  #app .auth-security-badge{
    color:#ffffff!important;
    opacity:1!important;

    border-color:rgba(255,255,255,.28)!important;
    background:rgba(255,255,255,.09)!important;
  }

  #app .auth-security-badge *{
    color:inherit!important;
    opacity:1!important;
  }


  /* Beyaz giris / uye ol paneli */
  #app .auth-form{
    background:#ffffff!important;
    color:#17324a!important;
  }

  #app .auth-form h1,
  #app .auth-form h2,
  #app .auth-form h3{
    color:#102a41!important;
    opacity:1!important;
  }

  #app .auth-form p,
  #app .auth-form small{
    color:#60768a!important;
    opacity:1!important;
    line-height:1.55!important;
  }

  #app .auth-form label{
    color:#29465f!important;
    opacity:1!important;
    font-weight:600!important;
  }

  #app .auth-form input{
    color:#17324a!important;
    background:#ffffff!important;
    opacity:1!important;
  }

  #app .auth-form input::placeholder{
    color:#8598a8!important;
    opacity:1!important;
  }

}