@charset "utf-8";

/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');@font-face {	font-family: 'Nexa';	src: url('../fonts/Nexa-Black.woff2') format('woff2');	font-weight: 900;}@font-face {	font-family: 'Nexa';	src: url('../fonts/Nexa-Heavy.woff2') format('woff2');	font-weight: 800;}@font-face {	font-family: 'Nexa';	src: url('../fonts/Nexa-Bold.woff2') format('woff2');	font-weight: 600;}@font-face {	font-family: 'Nexa';	src: url('../fonts/Nexa-Light.woff2') format('woff2');	font-weight: 300;	font-style: normal;	font-display: swap;}@font-face {	font-family: 'Nexa';	src: url('../fonts/Nexa-Regular.ttf') format('ttf');	font-weight: 400;	font-style: normal;	font-display: swap;}





:root {

    --navbar-height: 60px;

}





/* H1 altındaki çizgi */

.banner-inner .banner-line {

    display: inline-block;

    width: 110%; /* başlıktan biraz geniş */

    max-width: 300px;

	height: 1px;

    background: #fff;

	transform: translateZ(0);

	opacity: 1 !important;

}



/* =======================================================

   📚 BİLGİ MERKEZİ - GENEL YAPI

======================================================= */
.bilgi-merkezi {
    background: #f5f5f5;
    font-family: 'Quicksand', sans-serif;
    background-image: url("../images/bg-ANASAYFA-bilMrk.webp");
    background-repeat: repeat;
    background-attachment: fixed;
}

.bilgi-merkezi .container {
    max-width: 1200px;
}

/* =======================================================

   🎯 ÜST GRİ ALAN (FULL WIDTH)

======================================================= */
.bilgi-merkezi .bm-top-area {
    width: 100%;
    background: transparent;
    padding: 0 0 50px;
}

/* =======================================================

   📦 İÇERİK SINIRLAMA (1288px)

======================================================= */
.bilgi-merkezi .bm-inner {

    max-width: 1288px;

    margin: 0 auto;

    padding: 0 15px; 



}





/* =======================================================

   🟨 STICKY ETİKET BUTONLAR

======================================================= */



/*.bilgi-merkezi .bm-tabs-sticky-wrapper {

    position: sticky;

    top: var(--navbar-height);

    z-index: 1050;

    padding: 10px 0;

    will-change: transform;

	padding: 25px 0 10px;

    transition: all 0.3s ease;

}*/

/* SCROLL OLDUĞUNDA GÖRÜNÜMÜ NETLEŞTİR */

/*.bilgi-merkezi .bm-tabs-sticky-wrapper.scrolled {*/

     /* background: rgba(255, 255, 255, 0.05);  Modern bir görünüm için */

    /*backdrop-filter: blur(10px); 

    box-shadow: 0 4px 12px rgba(0,0,0,0.1);*/ /* Sayfadan ayrıştığını belli eder */

/*}*/





/* İç hizalama */

.bilgi-merkezi .product-tabs-wrapper {

    display: flex;

    justify-content: center; /* İçerideki butonları yatayda ortalar */

    flex-wrap: wrap;

    gap: 12px;

    width: 100%; /* Alanın tamamını kaplamasını sağla */

    margin: 0 auto; /* Dış garantör olarak ortala */

}







/* Buton container hizası */

.bilgi-merkezi .product-tabs-wrapper {

    gap: 12px;

}



/* Buton */

    .bilgi-merkezi .btn-product-tab {
        background-color: #ffffff;
        border: 1px solid #dadada;
        border-bottom: 2px solid #b99b24;
        border-radius: 5px;
        color: #333;
        padding: 6px 14px;
        font-family: 'Quicksand', sans-serif;
        font-size: 0.7rem;
        font-weight: 800;
        transition: all 0.3s ease;
        min-width: 130px;
        max-width: 150px;
        height: 50px;
        line-height: 0.8rem;
    }

/* Hover */
.bilgi-merkezi .btn-product-tab:hover {
    background: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

/* Active */
.bilgi-merkezi .btn-product-tab.active {
    background: #d4af37;
    color: #fff;
    border-color: #d4af37;
}

/* SCROLL OLUNCA ZEMİN EKLE */

/*.bilgi-merkezi .bm-tabs-sticky-wrapper.scrolled {

    background: rgba(250, 250, 250, 0.20);  hafif opak 

    backdrop-filter: blur(18px);

    box-shadow: 0 10px 30px rgba(0,0,0,0.08);

    border-radius: 5px;

    padding: 1px 15px;

}*/

.bilgi-merkezi .bm-tabs-sticky-wrapper.scrolled .product-tabs-wrapper {

    background: rgba(250, 250, 250, 0.01);

    backdrop-filter: blur(48px);



    border-radius: 5px 8px;

	padding: 0 5px;

}



/* =======================================================

   ⭐ BAŞLIK ALANI (ÇOK OKUNANLAR)

======================================================= */



.bilgi-merkezi .section-title {

    text-align: center;

    font-weight: 700;

	color: #3a3b3c;

    margin: 20px 0 30px;

    position: relative;

}



.bilgi-merkezi .section-title:before,

.bilgi-merkezi .section-title:after {

    content: "";

    position: absolute;

    top: 50%;

    width: 30%;

    height: 1px;

    background: #3a3b3c;

}



.bilgi-merkezi .section-title:before {

    left: 0;

}



.bilgi-merkezi .section-title:after {

    right: 0;

}





/* =======================================================

   📰 BLOG / İÇERİK KARTLARI

======================================================= */



.bilgi-merkezi .bm-card {

    background: #fff;

    border-radius: 8px;

    overflow: hidden;

    transition: all 0.3s ease;

    height: 100%;

    box-shadow: 0 5px 20px rgba(0,0,0,0.05);

}



.bilgi-merkezi .bm-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 30px rgba(0,0,0,0.1);

}



/* Görsel */

.bilgi-merkezi .bm-card-img {

    position: relative;

    overflow: hidden;

	flex: none;

}



.bilgi-merkezi .bm-card-img img {

	width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.4s ease;

	

}



.bilgi-merkezi .bm-card:hover img {

    transform: scale(1.05);

}



/* İçerik */

.bilgi-merkezi .bm-card-body {

    padding: 15px 20px 7px;

}



.bilgi-merkezi .bm-card-title {

    font-weight: 700;

    font-size: 0.95rem;

}



.bilgi-merkezi .bm-card-text {	

	font-size: 1rem;

    color: #666;

	text-align: justify;

	text-justify: inter-word;

    line-height: 1.3;

	padding: 0 0 10px;

	margin-bottom: 0 !important;	
    height: 80px;
}





/* --------- DEVAMINI OKU ------- */

.bilgi-merkezi .bm-read-more {

	position: relative;

    overflow: hidden;

	

    display: inline-block;

    padding: 6px 14px;

    border-radius: 20px;

	background-color: #d4af37 ;

	text-decoration: none;

	color: #fff;

	font-weight: 600;

	will-change: transform;

	transition: 

        transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1),

        box-shadow 0.25s ease;

}



.bilgi-merkezi .bm-read-more::after {

    content: "";

    position: absolute;

    top: 0;

    left: -100%;

    width: 50%;

    height: 100%;

    background: linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,0.4),

        transparent

    );

    transition: 0.5s;

}



.bilgi-merkezi .bm-read-more:hover::after {

    left: 120%;

}

/* Sağ kartların Devamını Oku butonu */

.bilgi-merkezi .bm-card-vertical .bm-card-body {

    display: flex;

    flex-direction: column;

}

.bilgi-merkezi .bm-card-vertical .bm-read-more {

        display: flex;

        align-items: center;

        justify-content: center;



        width: 165px;

        height: 33px;



        font-size: 0.75rem;

        border-radius: 20px;

        padding: 0;



        margin: auto auto 0 ;

 }



/*Büyük kartın Devamını Oku butonu */

.bilgi-merkezi .bm-card-large .bm-read-more {

        display: block;

        margin: 0  auto  10px;



        width: 400px;

        height: 37px;



        text-align: center;

        line-height: 28px;



        font-size: 0.9rem;

        border-radius: 20px;

	    

    }



/* --------- İLGİLİ ÜRÜNLER KISMI ------- */

/* ÇİZGİ */

.bilgi-merkezi .bm-divider {

    height: 1px;

    background: #e5e5e5;

    margin: 15px 0;

}



/* ANA YAPI */

.bilgi-merkezi .bm-related {

    display: flex;

    align-items: center;

    gap: 20px;

	margin: 15px 0 10px;

}



/* SOL BAŞLIK */

.bilgi-merkezi .bm-related-title {

    font-size: 1.1rem;

    font-weight: 700;

    color: #666;

    min-width: 90px;

    line-height: 1.2;

	margin-right: 25px;

}



/* ÜRÜNLER */

.bilgi-merkezi .bm-related-items {

    display: flex;

    gap: 12px;

}



/* KART */

.bilgi-merkezi .bm-related-item {

    background: #fff;

    border: 1px solid #eee;

    border-radius: 6px;

    padding: 10px 8px;

    text-align: center;

    width: 100px;

	min-height: 90px;

    transition: all 0.25s ease;

	height: auto;

	

	display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start; /* 🔥 önemli */



    text-align: center;

}



/* GÖRSEL */

.bilgi-merkezi .bm-related-item img {

    width: 100%;

    height: 55px;

    object-fit: contain;

    margin-bottom: 6px;

}



/* YAZI ALANI */

.bilgi-merkezi .bm-related-info {

    display: flex;

    flex-direction: column;

    line-height: 1.1;

	align-items: center;

}



/* MARKA */

.bilgi-merkezi .bm-related-info .brand {

    font-size: 0.65rem;

    color: #555;

    font-weight: 500;

}



/* MODEL */

.bilgi-merkezi .bm-related-info .model {

    font-size: 0.65rem;

    color: #333;

    font-weight: 700;

}



/* HOVER */

.bilgi-merkezi .bm-related-item:hover {

    transform: translateY(-3px);

    box-shadow: 0 6px 18px rgba(0,0,0,0.1);

}

.bilgi-merkezi .bm-related-item:hover .model {

    color: #b99b24;

}



/* =======================================================

   ⭐ ÇOK OKUNANLAR GRID

======================================================= */



.bilgi-merkezi .bm-featured-grid {

    display: grid;

    grid-template-columns: 1.05fr 1fr;

    gap: 52px;

	align-items: start;

}



/* Sağ taraf dikey */

.bilgi-merkezi .bm-featured-side {

    display: grid;

    grid-template-rows: auto auto;

    gap: 20px;

	align-content: start;

}





/* =======================================================

   🟦 BÜYÜK KART

======================================================= */

.bilgi-merkezi .bm-card-large .bm-card-body {

    display: flex;

    flex-direction: column;

    height: 100%;

}



.bilgi-merkezi .bm-card-large .bm-read-more {

    margin-top: auto;

}

.bilgi-merkezi .bm-card-large .bm-card-img {

    height: 280px;

}

.bilgi-merkezi .bm-featured-big {

    height: 100%;

}



.bilgi-merkezi .bm-card-large {

    height: 100%;

    display: flex;

    flex-direction: column;

}

.bilgi-merkezi .bm-card-large img {

    height: 100%;

    object-fit: cover;

    transform: scale(1.03);

    transition: transform 0.6s ease;

}

.bilgi-merkezi .bm-card-large:hover img {

    transform: scale(1.06);

}

/* Overlay */

.bilgi-merkezi .bm-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    justify-content: center;

    align-items: flex-end; /* 🔥 alta yakın */

    padding: 60px 30px;

    background: linear-gradient(to right, rgba(0,0,0,0.7), transparent);

    color: #fff;

}



.bilgi-merkezi .bm-overlay h2 {

	font-family: 'Nexa';

    font-size: 2.5rem;

    font-weight: 800;

	line-height: 1.2;

	text-align: center;

}

.bilgi-merkezi .bm-overlay-content {

    text-align: center;

    width: 100%;

}

.bilgi-merkezi .bm-line {

    width: 60%;

    height: 2px;

    background: #fff;

    margin: 0  auto 15px ;

}





/* META SATIRI - Kategori + Tarih */

.bilgi-merkezi .bm-meta {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 12px;

}



/* KATEGORİ */

.bilgi-merkezi .bm-category {

	background: #f3f3f3;

    font-size: 0.8rem;

    color: #888;

    font-weight: 500;

	padding: 4px 8px;

    border-radius: 4px;

}



/* TARİH */

.bilgi-merkezi .bm-date {

    font-size: 0.9rem;

    color: #b99b24;

    font-weight: 700;

    display: flex;

    align-items: center;

    gap: 5px;

}



/* İKON */

.bilgi-merkezi .bm-date-icon {

    font-size: 0.9rem;

}





/* =======================================================

   🟦 DİKEY KART (SAĞ TARAF)

======================================================= */



.bilgi-merkezi .bm-card-vertical {

    display: flex;

    flex-direction: column;

	flex: 1;

}



/* Görsel */

.bilgi-merkezi .bm-card-vertical .bm-card-img {

	width: 100%;

    aspect-ratio: 59 / 13 !important; /* İstediğiniz 590x130 tam oranı */

    overflow: hidden;

    position: relative;

    flex-shrink: 0; /* Flexbox'ın görseli uzatmasını engeller */



}



.bilgi-merkezi .bm-card-vertical .bm-card-img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

	transform: scale(1.08); /* 🔥 hafif zoom */

    transition: transform 0.5s ease;

}



/* Meta */

.bilgi-merkezi .bm-meta {

    display: flex;

    justify-content: space-between;

    font-size: 0.7rem;

    margin-bottom: 8px;

}



.bilgi-merkezi .bm-date {

    color: #b99b24;

    font-weight: 700;

}



/* Başlık */

.bilgi-merkezi .bm-card-title {

    font-size: 1rem;

    font-weight: 700;

    margin-bottom: 6px;
    height: 44px;
}





.bilgi-merkezi .bm-card-vertical:hover img {

    transform: scale(1.12);

}



.bilgi-merkezi .bm-card-vertical:hover {

    transform: translateY(-4px);

}



/* =======================================================

   📱 KART GRID BÖLÜMÜ

======================================================= */

.bilgi-merkezi .bm-grid {

    background: #fff;

    padding: 50px 0;

    margin-top: 30px;

}



.bilgi-merkezi .bm-grid-card {

    display: block;

    text-decoration: none;

    color: inherit;

	max-width: 400px;

}



.bilgi-merkezi .bm-grid-inner {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

	margin-top: 10px;

}



.bilgi-merkezi .bm-grid-card .bm-card {

    border-radius: 12px;

    box-shadow: 0 4px 20px rgba(0,0,0,0.15);

    transition: all 0.3s ease;

	height: auto;

}



.bilgi-merkezi .bm-grid-card .bm-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 15px 40px rgba(0,0,0,0.1);

}



.bilgi-merkezi .bm-grid-card .bm-card-img {

    width: 100%;

    aspect-ratio: 27 / 10; 

    overflow: hidden;

    border-top-left-radius: 12px;

    border-top-right-radius: 12px;

	object-position: center;

}



.bilgi-merkezi .bm-grid-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

	transform: scale(1.05); 

    transition: transform 0.5s ease;

	display: block;

}

.bilgi-merkezi .bm-grid-card:hover img {

    transform: scale(1.1);

}

.bilgi-merkezi .bm-grid-card:hover .bm-card {

    transform: translateY(-6px);

}



.bilgi-merkezi .bm-grid-card .bm-category {

    font-size: 0.75rem;

    color: #747474;

    font-weight: 600;

	

    background: #f3f3f3;

    padding: 1px 8px;

    border-radius: 6px;

	margin-bottom: 15px;

}

.bilgi-merkezi .bm-grid-card .bm-meta {

    margin-bottom: 8px;

}



.bilgi-merkezi .bm-grid-card .bm-card-title {

    font-size: 1.0rem;

	font-weight: 800;

	margin-bottom: 6px !important;

	text-rendering: optimizeLegibility;

	-webkit-font-smoothing: antialiased;

}



.bilgi-merkezi .bm-grid-card .bm-card-text {

    font-size: 0.85rem;

    line-height: 1.5;

	text-rendering: optimizeLegibility;

	-webkit-font-smoothing: antialiased;

	letter-spacing: -0.3px;

	display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;
    
}





/* =======================================================

   📱 RESPONSIVE

======================================================= */



@media (max-width: 992px) {



}





@media (max-width: 768px) {

	/* STICKY BUTONLAR - Tek satr kaydırmalı yapı ------------------- */

	.bilgi-merkezi .product-tabs-wrapper {

        display: flex !important;

        flex-wrap: nowrap !important; /* Alt satıra geçişi kesin olarak kapatır */

        overflow-x: auto !important;  /* Yatay kaydırmayı zorunlu yapar */

        

        justify-content: flex-start !important;

        padding: 10px 15px !important;

        gap: 10px !important;

        

        /* Kaydırma hissiyatını iyileştirir */

        -webkit-overflow-scrolling: touch;

        scroll-snap-type: x proximity;

		

		/* Animasyon */

        animation: bounce-scroll 1.5s ease-in-out 2;

		

    }





    /* Butonların genişliklerini özgür bırakıyoruz */

    .bilgi-merkezi .btn-product-tab {

        flex: 0 0 auto !important; /* Sıkışmayı ve küçülmeyi engeller */

        width: auto !important;    /* Sabit genişliği iptal eder */

        min-width: max-content !important; /* İçindeki metne göre genişletir */

        

        white-space: nowrap !important; /* Metnin alt satıra geçmesini engeller */

        

        height: 40px !important;

        padding: 0 20px !important;

		

		font-size: 0.7rem;    

	    font-weight: 600;

		line-height: 0.7rem;

    }



    /* Scrollbar'ı gizlemek için */

    .bilgi-merkezi .product-tabs-wrapper::-webkit-scrollbar {

        display: none !important;

    }

	

	

	

	/* ÇOK OKUNAN KISMI - Ana Grid'i tek kolona çekiyoruz -------------------------- */

    .bilgi-merkezi .bm-featured-grid {

        display: flex;

        flex-direction: column;

        gap: 30px;

        width: 100%;

        overflow: hidden; /* Dışarı taşmayı engeller */

    }



    /* Büyük kartın butonunu ve genişliğini mobilde daraltıyoruz */

    .bilgi-merkezi .bm-card-large .bm-read-more {

        width: 100%; /* Mobilde tam genişlik daha şık durur */

        max-width: 280px; 

        margin: 20px auto;

    }

	.bilgi-merkezi .bm-related {

        flex-direction: column; /* "İLGİLİ ÜRÜNLER" yazısı üste, ürünler alta */

        align-items: flex-start;

        gap: 15px;

    }



    .bilgi-merkezi .bm-related-items {

        display: grid;

        grid-template-columns: repeat(2, 1fr); /* 2'li sıra halinde dizilsinler */

        width: 100%;

        gap: 10px;

    }



    .bilgi-merkezi .bm-related-item {

        width: 100%; /* Grid içinde tam genişlik */

        min-width: 0;

    }

	.bilgi-merkezi .bm-grid-card, 

    .bilgi-merkezi .bm-card {

        max-width: 100% !important;

        width: 100%;

    }

    

    /* İç paddingleri biraz daraltarak nefes aldırın */

    .bilgi-merkezi .bm-inner {

        padding: 0 10px;

    }

	

	/* Başlığın yanındaki çizgileri mobilde gizle */

    .bilgi-merkezi .section-title:before,

    .bilgi-merkezi .section-title:after {

        display: none !important;

    }



    /* Başlığı mobilde daha temiz göstermek için isteğe bağlı hizalama */

    .bilgi-merkezi .section-title {

        margin: 15px 0 20px;

        font-size: 1.8rem; /* Metin çok büyükse biraz küçültebilirsiniz */

    }



	/* ÇOK OKUNAN KISMI BİTTİ -------------------------------------------- */

	/* ---------------------- -------------------------------------------- */

	

	

	.h1-wrapper { padding-top: 180px;}

	.bm-card-text { font-size: 0.7rem; height: 60px;}

	.bm-card-title { font-size: 0.8rem;}

	

	

	/* GRID KISMI BAŞLIYOR -------------------------------------------- */

	/* ---------------------- -------------------------------------------- */

	   

	/* Kartların mobilde dışarı taşmaması için genişliğini sıfırlayalım */

    .bilgi-merkezi .bm-grid-card {

        max-width: 100% !important;

        margin: 0 !important;

    }

	/* Ana grid yapısını 2 sütuna zorluyoruz */

    .bilgi-merkezi .bm-grid-inner {

        display: grid !important;

        grid-template-columns: repeat(2, 1fr) !important; /* 3 yerine 2 kolon */

        gap: 12px !important; /* Aradaki boşluğu mobilde daraltmak daha iyi olur */

        width: 100% !important;

		padding: 6px;

    }





	.bilgi-merkezi .bm-grid-card .bm-card {

		box-shadow: 0 4px 10px rgba(0,0,0,0.10);

		margin-bottom: 15px;

	}



	.bm-grid-card .bm-card-body { padding: 10px;}



	/* Görselin kapsayıcısını mobilde yükseltiyoruz */

    .bilgi-merkezi .bm-grid-card .bm-card-img {

        aspect-ratio: 16 / 7 !important; /* 27/10 yerine daha yüksek bir oran */

        height: auto !important;

    }



    /* Görselin kendi davranışını kontrol altına alıyoruz */

    .bilgi-merkezi .bm-grid-card img {

        height: 100% !important;

        object-fit: cover !important; /* Görselin sünmesini engeller, kırparak doldurur */

        transform: scale(1) !important; /* Mobilde zoom'u sıfırlamak taşmaları önler */

		width: 130px;

    }

       

	.bilgi-merkezi .bm-meta {

		margin-bottom: 6px;

	}

	.bilgi-merkezi .bm-grid-card .bm-category {

		font-size: 0.65rem;

		margin-bottom: 0px;

	}

	

	/* MARKA */

	.bilgi-merkezi .bm-related-info .brand {

		font-size: 0.85rem;

	}



	/* MODEL */

	.bilgi-merkezi .bm-related-info .model {

		font-size: 0.85rem;

	}

	

	

	

	.bilgi-merkezi .bm-grid-card .bm-card-title {

		line-height: 1.1 !important;

		font-size: 0.85rem !important;

        -webkit-line-clamp: 2; /* Başlığı 2 satırda keser, tasarımı korur */

	}



    .bilgi-merkezi .bm-grid-card .bm-card-text {
        font-size: 0.7rem;
        line-height: 1.1;
        height: 60px;
    }

	

	

	



    .bilgi-merkezi .product-tabs-wrapper {

        flex-wrap: nowrap;

        top: 320px;

        gap: 10px;

        padding-bottom: 5px;

    }



    .bilgi-merkezi .product-tabs-wrapper::-webkit-scrollbar {

        display: none;

    }



    .bilgi-merkezi .btn-product-tab {

        flex: 0 0 auto;

        min-width: 110px;

    }

	





    /* Kartın altındaki metinlerin de görselle uyumlu olması için */

    .bilgi-merkezi .bm-grid-card .bm-card-body {

        padding: 15px 15px 5px !important;

    }



	/* GRID KISMI BİTTİ -------------------------------------------- */

	/* ---------------------- -------------------------------------------- */

}



@media (max-width: 360px) {

	.bilgi-merkezi .bm-tabs-sticky-wrapper {

		

		top: 120px;

		z-index: 1050;

		padding: 10px 0;



	} 

	.bm-grid-inner {

        grid-template-columns: 1fr;

    }

}





/* KATEGORİ BUTONLARI HAFİF SAĞA SOLA KAYSIN -------------------------------------------- -*/

/* ---------------------- -------------------------------------------- */

@keyframes bounce-scroll {

    0% { transform: translateX(0); }

    20% { transform: translateX(-40px); } /* Sola kayış */

    40% { transform: translateX(10px); }   /* Geri sekme */

    60% { transform: translateX(-15px); }  /* Hafif sola */

    80% { transform: translateX(5px); }    /* Yerine oturma */

    100% { transform: translateX(0); }

}





.animate-bounce {

    animation: bounce-scroll 1s ease-in-out !important;

}