/* =========================================================
   Konya Oto LPG - Hero Slider Oran Fix v27
   Amaç: Canva/Figma 1920x700 desktop tasarımı sitede kırpmadan
   birebir göstermek. Mobil slider 1080x1350 oranında çalışır.
   ========================================================= */

.hero-kb{
  position:relative!important;
  padding:0 0 22px!important;
  margin:0 0 24px!important;
  background:linear-gradient(180deg,#f8fafc 0%,#ffffff 100%)!important;
  overflow:visible!important;
}

.hero-kb .kb-wrapper{
  position:relative!important;
  display:block!important;
  width:100%!important;
  aspect-ratio:1920 / 700!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
  border-radius:16px!important;
  background:#f8fbff!important;
  box-shadow:0 16px 44px rgba(15,23,42,.10)!important;
  isolation:isolate!important;
}

.hero-kb .kb-wrapper::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.08)!important;
}

.hero-kb .kb-slide{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  margin:0!important;
  width:100%!important;
  height:100%!important;
  opacity:0;
  visibility:hidden;
  transition:opacity .55s ease;
}

.hero-kb .kb-slide.is-active{
  opacity:1!important;
  visibility:visible!important;
  z-index:1!important;
}

.hero-kb .kb-slide picture,
.hero-kb .kb-slide img{
  display:block!important;
  width:100%!important;
  height:100%!important;
}

.hero-kb .kb-slide img{
  object-fit:contain!important;
  object-position:center center!important;
  background:#f8fbff!important;
}

.hero-kb .kb-nav{
  position:absolute!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  z-index:5!important;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:999px;
  background:rgba(255,255,255,.78);
  color:#0f172a;
  backdrop-filter:blur(10px);
  box-shadow:0 10px 26px rgba(15,23,42,.14);
}
.hero-kb .kb-nav.prev{left:14px!important;}
.hero-kb .kb-nav.next{right:14px!important;}

.hero-kb .kb-dots{
  position:absolute!important;
  left:50%!important;
  bottom:16px!important;
  transform:translateX(-50%)!important;
  z-index:5!important;
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(15,23,42,.35);
  backdrop-filter:blur(8px);
}
.hero-kb .kb-dot{
  appearance:none;
  -webkit-appearance:none;
  width:10px;
  height:10px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.62);
}
.hero-kb .kb-dot.is-active,
.hero-kb .kb-dot[aria-selected="true"]{
  width:28px;
  background:#fff;
}
.hero-kb .kb-nav[hidden],
.hero-kb .kb-dots[hidden]{display:none!important;}

@media (min-width:992px){
  .hero-kb .kb-wrapper{aspect-ratio:1920 / 700!important;}
}

@media (max-width:767.98px){
  .hero-kb{
    padding:0 0 16px!important;
    margin-bottom:18px!important;
  }
  .hero-kb .kb-wrapper{
    aspect-ratio:1080 / 1350!important;
    max-height:78vh!important;
    border-radius:16px!important;
  }
  .hero-kb .kb-nav{
    width:38px;
    height:38px;
  }
  .hero-kb .kb-nav.prev{left:10px!important;}
  .hero-kb .kb-nav.next{right:10px!important;}
  .hero-kb .kb-dots{
    bottom:10px!important;
    gap:6px;
    padding:6px 9px;
  }
}

/* v28-slider-title-gap-fix: Slider ile H1 arasındaki fazla boşluğu premium orana indirir. */
@media (min-width: 992px){
  .hero-kb{
    padding-bottom: 10px!important;
    margin-bottom: 8px!important;
  }
}
@media (max-width: 991.98px){
  .hero-kb{
    padding-bottom: 10px!important;
    margin-bottom: 10px!important;
  }
}
/* end-v28-slider-title-gap-fix */

/* v29-slider-title-gap-tight: ufuk-hero-kb.css tarafında da boşluğu kilitler. */
@media (min-width: 992px){
  .hero-kb{
    padding-bottom: 0!important;
    margin-bottom: 0!important;
  }
}
@media (max-width: 991.98px){
  .hero-kb{
    padding-bottom: 4px!important;
    margin-bottom: 0!important;
  }
}
/* end-v29-slider-title-gap-tight */

/* v30-h1-compact-premium: Hero alt boşluğu H1 kartı için net sıfırlanır. */
@media (min-width: 992px){
  .hero-kb{
    padding-bottom: 0!important;
    margin-bottom: 0!important;
  }
}
@media (max-width: 991.98px){
  .hero-kb{
    padding-bottom: 0!important;
    margin-bottom: 0!important;
  }
}
/* end-v30-h1-compact-premium */

/* v31-h1-elegant-ribbon: Slider alt boşluğu korunur, H1 şeridi daha nefesli gelir. */
@media (min-width: 992px){
  .hero-kb{padding-bottom:0!important;margin-bottom:0!important;}
}
@media (max-width: 991.98px){
  .hero-kb{padding-bottom:0!important;margin-bottom:0!important;}
}
/* end-v31-h1-elegant-ribbon */

/* v32-h1-softer-lift: Hero ile H1 arasında ekstra boşluğu sıfıra yakınlar. */
@media (min-width: 992px){
  .hero-kb{padding-bottom:0!important;margin-bottom:0!important;}
}
@media (max-width: 991.98px){
  .hero-kb{padding-bottom:0!important;margin-bottom:0!important;}
}
/* end-v32-h1-softer-lift */


/* v33-h1-centered-premium: Slider altı doğal boşluk; H1 sliderla birleşmez. */
@media (min-width: 992px){
  .hero-kb{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}
@media (max-width: 991.98px){
  .hero-kb{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}
/* end-v33-h1-centered-premium */