body { font-family: 'SF Pro Display', sans-serif;
}

.form-check-input {
    width: 1em;
    height: 1em;
    margin-top: 0.25em;
    vertical-align: top;
    background-color: #fff;
    background-image: url("data:image/svg+xml,..."); /* Varsayılan Bootstrap check simgesi */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid #ced4da;
    appearance: none;
  
}

.form-check {
    padding-left:0px !important;
}

.form-check-input {
    all: revert !important;
}

html, body {
    overflow-x: hidden;
}


.fs-6 {
    font-size: 0.7rem !important;
}

#extra-fields {padding-top: 50px;}
#success-message {padding-top: 100px;}

/* Menü Sonu */

.owl-carousel .item {
    height: 500px; /* Slider öğelerinin yüksekliğini 700px olarak ayarlayın */
    display: flex;
    align-items: center;
    justify-content: center;
    background-size:cover ;
}

.owl-carousel .item img {
    max-height: 100%; /* Resmin yüksekliğini kapsayıcıya göre ayarlayın */
    max-width: 100%;
    object-fit: cover; /* Resmi kapsayıcıya göre kesme veya sığdırma */
}

/* Pagination noktalarının görünümünü özelleştirin */
.owl-dots {
    /* Dots'ları ortalar */
    position: absolute; /* Slider'ın üstünde konumlandırır */
    bottom: 20px; /* Slider'ın altına yerleştirir */
    width: 80%;
    padding-left: 10%; /* Slider'ın genişliği kadar */
    z-index: 10; /* Diğer elemanların üstünde görünür */
}

.owl-dots .owl-dot {
    background: rgba(255, 0, 0, 0.5); /* Pasif dot'ların arka plan rengi kırmızı */
    border-radius: 0; /* Dots'ların köşelerini yuvarlatmaz */
    width: 100px; /* Dots'ların genişliği */
    height: 3px; /* Dots'ların yüksekliği */
    margin: 0 10px; /* Aralarındaki boşluk */
    display: inline-block; /* Dots'ların yan yana durmasını sağlar */
    transition: background 0.3s, transform 0.3s; /* Renk ve boyut geçişi */
}

.owl-dots .owl-dot.active {
    background: black; /* Aktif dot'un arka plan rengi daha belirgin kırmızı */
    transform: scale(1); /* Aktif dot'un boyutunu büyütür */
}

.owl-carousel button.owl-dot {
    background: #b5b5b5;
    color: inherit;
    border: none;
    padding: 0 !important;
    font: inherit;
}

/* Navigasyon butonlarının görünümünü ve konumlandırmasını özelleştirin */
.owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    font-size: 2rem;
    }

.owl-nav .owl-prev,
.owl-nav .owl-next {
    background-color: rgba(0, 0, 0, 0.5); /* Çubuğun arka plan rengi */
    color: #fff; /* Çubuğun rengi */
    border: none; /* Kenarlık yok */
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    margin: 0 20px; /* Ok butonlarını biraz daha içeride konumlandır */
}

.owl-prev {
    left: -50px; /* Sol ok butonunu biraz daha içeri al */
}

.owl-next {
    right: -50px; /* Sağ ok butonunu biraz daha içeri al */
}


/* Slider Sonu */


.giris {padding-top: 100px; padding-bottom: 0px}
.giris .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1520px;
}
.giris .tab-content {padding-top: 20px; padding-bottom: 20px; padding-left:20px; padding-right:20px;   background: white; border-radius: 30px}
.giris .tab-pane {padding: 20px;}
.giris .nav-pills .nav-link {
    border-radius:0px
}
.giris .nav-pills {padding-left: 25px; padding-right: 25px}
.giris .nav-pills .nav-link {
    color: black;
    font-size: 1rem;

}
.giris .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: black;
    border-bottom: solid;
    background: none;
}
.giris .card-body {padding: 0px; background:#f8f9fa; border: none; border-radius: 20px }
.giris .card-body img {border-radius: 20px}
.giris .card {border: none}

.giris h3 {font-size: 1.2rem}
.giris h4 {font-size: 1rem}

.katcard .btn {
    display: none;
}

.katcard:hover .btn {
    display: block;
    width: 50%;
    margin: auto;
}

.katcard:hover p {
    display: none;
}


.iccard {padding-top: 70px; padding-bottom: 50px}
.iccard span {display: block; margin-top: 10px; margin-bottom: 20px}
.iccard img {width: 20%}
.iccardd {padding-top: 10px; padding-bottom: 20px}
.iccardkucuk {background:#f8f9fa; text-align: center}
.kucukimg {width: 65%; display: block; margin: auto}

footer {min-height: 500px}


/* Header için temel stiller */


/* Responsive davranış için medya sorguları */
@media (max-width: 767px) {
    .d-none.d-md-inline-block {
        display: none !important;
    }
    .d-md-none {
        display: inline-block !important;
    }
}

@media (min-width: 768px) {
    .d-none.d-md-inline-block {
        display: inline-block !important;
    }
    .d-md-none {
        display: none !important;
    }
}



.tab-pane .card-body a {

    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    background: none;
    color:black;
    border:solid 1px #000000;
}



.card-body a ion-icon {
    margin-left: 8px;
}



.tabs-container {
    overflow: hidden;
    width: 100%;
    margin: auto;
    margin-top: 10px;

}

.tabs {
    display: flex;
    background: none;
    justify-content: space-between;
    overflow-x: auto;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin; /* Firefox için ince scrollbar */
    scrollbar-color: #888 #f1f1f1; /* Firefox için renk ayarları */
    background-color: #ffffff;
    border-radius: 20px;

}

.tab-button {
    background-color: #ffffff;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: background-color 0.3s;
    font-size: 17px;
    flex: none;
    scroll-snap-align: start;
}

.tab-button:hover {

}

.tab-button.active {
    border-bottom: solid 1px; /* Alt çizgiyi kaldırmak için */
}

.tab-content {
    margin-top: 20px;
    display: none;
    padding: 20px;
    border-top: none;
}



/* Modern Scrollbar Stili (WebKit tabanlı tarayıcılar için) */
.tabs::-webkit-scrollbar {
    height: 8px; /* Yatay scrollbar için yükseklik */
}

.tabs::-webkit-scrollbar-track {
    background: #f1f1f1; /* Scrollbar arkası */
    border-radius: 10px;
}

.tabs::-webkit-scrollbar-thumb {
    background-color: #888; /* Scrollbar rengi */
    border-radius: 10px;
    border: 2px solid #f1f1f1; /* İç kenar boşluğu */
}

.tabs::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Scrollbar hover rengi */
}

.parallax-section {
    background-image: url('https://xenonsmart.com/img/Xenon-Smart-Home-Banner.jpg');
    height: 500px; /* Parallax yüksekliğini 800px yap */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: flex;
    flex-direction: column; /* İçerikleri dikey hizalamak için */
    justify-content: center; /* İçerikleri merkezde hizalamak için */
    align-items: center;
    color: white;
    text-align: center;
    overflow: hidden;
    width: 98%;
    border-radius: 20px;
    margin: auto;/* Taşmaları önlemek için */
    margin-top: 50px;
    margin-bottom:50px;
}

.parallax-section .content {
    position: relative;
    z-index: 2; /* İçeriği ön planda tut */
    transition: opacity 0.5s ease; /* Opaklık geçişi */
}

.parallax-section:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.parallax-section .applogo {z-index: 1}
.parallax-section .applogo img {border-radius: 20px; margin-bottom: 50px}
.magazaikonalr  {z-index: 3; position: relative; margin-top: 50px}
.phone-image {
    width: 500px; /* Telefon boyutunu ayarladık */
    position: absolute; /* Telefonu ayrı katmanda konumlandır */
    top: 40%; /* Başlangıç konumu yukarıda */
    left: 50%; /* Yatay merkezleme */
    transform: translate(-50%, -50%) scale(1); /* Konum ve başlangıç boyutu */
    z-index: 3; /* İçeriği ve arka planı önünde tut */
    transition: transform 0.6s ease; /* Daha akıcı büyüme ve hareket efekti */
}

.card-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
    opacity: 0; /* Başlangıçta gizli */
    transform: translateY(50px); /* Başlangıçta aşağıda */
    transition: opacity 1s ease, transform 1s ease; /* Animasyon efektleri */
    margin-top: 20px; /* Kartların parallax içinde yerleşimi için üst marjin */
}

.custom-card {
    width: 620px; /* Kart genişliği */
    height: 320px; /* Kart yüksekliği */
    margin: 0 30px; /* Kartlar arasındaki boşluğu artırdık */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2em;
    border-radius: 10px;
    transition: transform 0.8s ease, opacity 0.8s ease; /* Kart animasyonlarını ayarla */
}

.custom-card img {width: 50%}

.red-card {

    color: white;
}

.blue-card {

    color: white;
}

#map {
    height: 500px;
    width: 100%;
}

/*Satış Noktaları*/
.satisnokta h5 span {font-size: 0.8rem; display: block}
.satisnokta .card {min-height: 250px; border: none; padding: 30px; margin-bottom: 20px}
.satisnokta img {width: 80%}
.satisnokta ul {margin: 0px; padding: 0px}
.satisnokta ul li {margin: 0px; padding: 0px; list-style: none; font-size: 0.9rem}
.satisnokta ul li span {font-weight:bold }
.satisnokta h2 {margin-top: 50px; margin-bottom: 50px}

/*Satış Noktaları*/

/*iletisim*/
.iletisim h2 {margin-top: 50px; margin-bottom: 50px}
.iletisim .card {border: none; min-height: 200px; padding: 30px; margin-bottom: 20px}
.iletisim .adres {display: block; font-weight: bold}

.magazabuton {
    display: flex;
    justify-content: center; /* Yatayda ortalamak için */
    align-items: center; /* Dikeyde ortalamak için */
    /* Div'in yüksekliğini tüm ekran yüksekliği yapar, isteğe bağlı */
}

.anakatacik  { width: 80%;  margin: auto; margin-bottom: 10px; margin-top: 10px;}

.whatsappfooter {display: none;}
.whatsappfooter a {width: 100%; height:100hv;   padding: 10px; display:block;  background: #25d366; text-decoration:none; font-size:1.5rem; color:white}
.whatsappfooter {
    position: fixed;
bottom: 0px;
z-index: 2222;
background: black;
left: 0px;
width: 100%;

text-align: center;
}

.grecaptcha-badge { 
   margin-bottom: 100px;
}

.magazabuton a {color: black; font-size: 1.2rem;  text-decoration: none; }
.magazabuton i {color: black; font-size: 2rem; text-align: center; text-decoration: none; display: block;}
.iletisim .arabuton a {font-size: 1rem; border-radius: 30px; margin-top: 10px; margin-bottom: 30px}
/*iletisim*/

/* Medya sorguları */
@media only screen and (max-width: 768px) {
    .phone-image {
        width: 150px; /* Küçük ekranlar için telefon boyutunu küçült */
    }

    .custom-card {
        width: 150px; /* Küçük ekranlar için kart boyutunu küçült */
        height: 220px;
    }
}

footer{background: black;  padding-top: 100px; color:white}
.altfooter {padding-top: 50px}
.altfooter p {font-size: 0.7rem}

footer .veya {margin-top: 50px; color: #b5b5b5; font-weight: 300}
footer h6 {font-size: 0.9rem; padding-top: 10px}
footer h3 {font-size:1.2rem}

.callcenter {margin-top: 150px}
.callcenter i {font-size: 40px; display: block;  }
.callcenter a {font-size: 2rem; color: white; text-decoration: none}
.callcenter p {color: #b5b5b5;}

footer  ul {margin: 0px; padding: 0px; margin-top: -5px}
footer  ul li {list-style: none;  margin-right:30px }
footer  ul li i {font-size: 1.3rem }

footer .sosyal ul {margin: 0px; padding: 0px; margin-top: -5px}
footer .sosyal ul li {list-style: none; float: left; margin-right:30px }
footer .sosyal ul li i {font-size: 1.3rem }

footer .kurum ul {margin: 0px; padding: 0px; margin-top: -5px}
footer .kurum ul li {list-style: none; float: left; margin-right:30px }
footer .kurum ul li i {font-size: 1.3rem }

.newsletter-signup form {
    max-width: 500px;
    margin: 0 auto;
    margin-top: 55px;
}

footer .input-group {
    position: relative;
    margin-top: 10px;
    display: flex; /* Flexbox ile yan yana yerleşim */
    align-items: center; /* Dikeyde ortalama */
}

footer .icon-inside-input {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #888; /* İkon rengi */
    pointer-events: none; /* İkona tıklanamaz yap */
}

footer .input-group input {
    flex-grow: 1; /* Input alanını genişlet */
    padding: 10px 10px 10px 30px; /* Sol tarafa boşluk bırak, ikon için */
    border: none;
    border-bottom: 1px solid #888; /* Gri alt çizgi */
    background-color: transparent; /* İç rengi boş */
    color: #fff;
    font-size: 16px;
    outline: none;
    border-radius: 0; /* Köşeleri düzleştir */
}

footer .icon-button {
    background-color: transparent; /* Arka planı saydam */
    border: none;
    cursor: pointer;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888; /* İkon rengi */
    transition: color 0.3s; /* Hover efekti için geçiş */
}

.icon-button {margin-left: -40px;}

footer .icon-button:hover {
    color: #fff; /* Hover durumunda ikon rengi */
}

footer .input-icon {
    font-size: 20px; /* Input içindeki ikon boyutu */
}

footer .icon {
    font-size: 20px; /* Sağ taraftaki ikon boyutu */
}

footer a {color: #e0e0e0; text-decoration: none}

.appslogan {margin-bottom: 50px; padding-left: 50px; border-left:solid 1px #b5b5b5; font-weight: normal}

.appslogan span {font-weight: bold; font-size: 1rem; margin-top: 20px; display: block}

.appicon img {width: 70%; }

.tanit .card {border-radius: 30px}
.tanit .card-body {border-radius: 30px;  padding: 65px 50px 75px 100px;}



.alan {background-position: center;}

.urunbanner {position: relative}
.urunbanner .videoinceleme {position: absolute; right: 60px; bottom:50px; }
.urunbanner .alisveris {position: absolute; left: 100px; bottom:50px; }
.urunbanner .btn {
    transition: transform 0.3s ease, background-color 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
}
.urunbanner:hover .btn {
    opacity: 1;
    transform: translateY(0);
}




.kategori { padding-top: 50px}
.kategori .card {border-radius:30px; border: none; padding: 50px  }

.kategori .card-body {
    background: #ffffff;
    border-radius: 0px;
    border:none;

}





.ozeliconlar {margin-left:-30px; margin-top: 50px }

.ozeliconlar img {width: 35%;  margin: auto; margin-bottom: 10px}




.infobuton {margin-right: 20px}
.katu a {text-decoration: none}

.offcanvas-body {position: relative;}

.mobildil {position: absolute; bottom:10px; left:20px }

.mobildil ul {margin: 0px; padding: 0px;}
.mobildil ul li {margin: 0px; padding: 0px; list-style: none; float:left; display: block; width: 50px; height: 30px; margin-right:10px ;}

/* Mobil Sorguları */
@media only screen and (max-width: 768px) {
    .giris {padding-top: 50px}
    .owl-carousel .item {
        height: 600px; /* Slider öğelerinin yüksekliğini 700px olarak ayarlayın */
        display: flex;
        align-items: center;


        background-position:center ;
    }

    .owl-carousel .item .alan {margin-top: -300px; text-align: center}

    .owl-dots { width: 100%; text-align: center; padding-left:0px }

    .owl-dots .owl-dot {
       width: 20px;

    }


}

.asside a {text-decoration: none; color: black}

.ilan .card {background: #f4f4f4}
.ilan .card-title {font-size: 1rem}

.baskul .card {height: 400px}
.baskul .card p {width: 35%; color:white}
.baskul .card a {color: rgb(255, 255, 255); text-decoration: none}
.baskul .card .btn:hover {color:black}
.baskul .card .card-body {background: url('https://xenonsmart.com/panel/uploads/dosyalar_v/resimler/baskultr.jpg')}
.baskul .urunbanner .videoinceleme {left: 300px}




.elo .card {height: 700px}
.elo .card p {width: 50%; color: white;}
.elo .card .card-body {background: url('https://xenonsmart.com/panel/uploads/dosyalar_v/resimler/elo-web.jpg'); background-size: cover;}
.elo .urunbanner .videoinceleme {left: 300px}
.elo img {width: 200px;}
.elo .card a {color: white; text-decoration: none}
.elo .card .btn:hover {color:black}
.elo .urunbanner .btn-outline-dark {border: solid 1px #ffffff; color: white}

.smarttag {text-align: right}
.smarttag .card {height: 400px; text-align: right}
.smarttag .card p {width: 30%; margin-left: 70%; color: white;}
.smarttag .card a {color: white; text-decoration: none}
.smarttag .card .btn:hover {color:black}
.smarttag .card .card-body {background: url('https://xenonsmart.com/panel/uploads/dosyalar_v/resimler/smart-tag.jpg')}
.smarttag .urunbanner .videoinceleme {right: 50px}
.smarttag .urunbanner .alisveris {right: 200px}
.smarttag .urunbanner .btn-outline-dark {border: solid 1px #ffffff; color: white}

.elodetay .wall {background: url('https://xenonsmart.com/panel/uploads/dosyalar_v/resimler/elo-web--2.jpg'); background-size: cover;  height: 700px}
.wall .logo {width: 70%; margin-top: 200px}
.wall h2 {color: #ffffff; margin-top: 50px}
.wall p {color: #ffffff; margin-top: 20px}

.wall .btn-white  {
    border: solid 1px #ffffff;
    color: white;
}

.wall .btn-white:hover  {
    border: solid 1px #ffffff;
    color: black;
    background: white;
}

.elodetay .icerik {padding: 100px}
.elodetay .icerik p {font-size: 2rem; text-align: center;}
.elodetay .imaj {padding: 100px}
.elodetay .imaj p {font-size: 1.2rem;}

.el-im-1 {background: black;}
.el-im-2 {background: #10171f;}


.sorgucard {padding: 50px; background-color:#f8f9fa; border:none; border-radius: 30px;}


@media screen and (max-width: 468px) {

    .whatsappfooter {display: block;} 

    .tab-button.active {
        border-top: none; /* Alt çizgiyi kaldırmak için */
        border-bottom: none;
        font-weight: bold/* Alt çizgiyi kaldırmak için */
    }

    .eloiconlar {padding: 40px}
    .wall {text-align: center;}
    .elodetay .icerik {padding: 20px}
    .elodetay .icerik p {font-size: 1.4rem}
    .elodetay .wall {background: url('https://xenonsmart.com/panel/uploads/dosyalar_v/resimler/elo-mobil-web.jpg'); background-size: cover;  height: 700px}
    .wall h2 {text-align: center; margin-top: 15px; margin-bottom: 470px}
    .wall p {display: none}

    .iccardd {height: 100px}

    .wall .logo {
        width: 30%;
        margin: auto;
        display: block;
        margin-top: 20px;
    }

    .parallax-section .applogo img {width: 50%}

    .baskul .card {min-height: 500px;  text-align: center}
    .baskul .card p {width: 100%}
    .baskul img {width: 50%}
    .baskul .card .card-body {background: url('https://xenonsmart.com/panel/uploads/dosyalar_v/resimler/baskul-mobil-rev.jpg'); padding: 0px;padding-top: 20px; background-size: cover;}
    .baskul .urunbanner .videoinceleme {position: absolute; bottom:50px; left:0px; text-align: center; width: 100%; }
    .baskul .urunbanner .alisveris {position: absolute; left: 0px; bottom:20px; text-align: center; width: 100%;}

    .smarttag .card {min-height: 500px;  text-align: center}
    .smarttag .card p {width: 100%}
    .smarttag .card .card-body {background: url('https://xenonsmart.com/panel/uploads/dosyalar_v/resimler/tag-mobil.jpg'); padding: 0px;padding-top: 20px; background-size: cover;}
    .smarttag .urunbanner .videoinceleme {position: absolute; bottom:50px; left:0px; text-align: center; width: 100%; }
    .smarttag .urunbanner .alisveris {position: absolute; left: 0px; bottom:20px; text-align: center; width: 100%;}

    .elo .card {min-height: 500px;  text-align: center}
    .elo .card p {width: 100%}
    .elo img {width: 50%}
    .elo .card .card-body {background: url('https://xenonsmart.com/panel/uploads/dosyalar_v/resimler/elo-mobil-web.jpg'); padding: 0px;padding-top: 20px; background-size: cover;}
    .elo .urunbanner .videoinceleme {position: absolute; bottom:50px; left:0px; text-align: center; width: 100%; }
    .elo .urunbanner .alisveris {position: absolute; left: 0px; bottom:20px; text-align: center; width: 100%;}


    .ozeliconlar {display: none}
    .callcenter {margin-bottom: 50px; margin-top:20px }
    .newsletter-signup {margin-bottom: 50px}
    .appicon img {width: 100%}
    footer .veya {margin-top: 0px}
    .appslogan {margin-bottom: 0px}
    .kurum {padding-top: 20px; padding-bottom: 20px; float: left; display: block}
    .sosyal {padding-top: 20px; padding-bottom: 20px}
    .footerlogo {text-align: center; display: block; margin: auto;}

    .kucukimg {width: 90%; display:}
    .giris h3 {font-size: 1rem}
    .giris .card {margin-bottom: 10px}
    .tabs {
        justify-content: flex-start;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tab-button {
        width: calc(100% / 3);
        font-size: 15px;
    }

    .header-container {height: 70px}
    .kategori .card {
        padding: 0px;
    }


    .ozeliconlar {margin-bottom: 20px}

 
}

footer {margin-top: -20px;}


@media (max-width: 1280px) and (max-height: 832px) {
    /* Bu alana ilgili CSS kodlarınızı ekleyin */
    .alan {
     padding-left:10%
    }

   
}


@media only screen and (max-width: 1919px) and (min-width: 1366px) and (min-height: 768px) {
    /* 1920x1080 olmayan, özellikle 15 inç laptop ekranları için geçerli olan stil */

    .alan {
       
        padding-left:0
       }
}


@media only screen and (min-width: 1920px) and (max-width: 1920px) and (min-height: 1080px) and (max-height: 1080px) {
    /* 1920x1080 px çözünürlüğe sahip laptoplar için geçerli olan stil */

    .alan {
        padding-left:5%
       }
}



@media screen and (max-width: 468px) {

    .alan {
        padding-left:0;
        padding:10px;
       }
}