@charset "utf-8";
/* CSS Document */


/*  BANNER LOGO ALANI   */
/* sayfada ortalar */
.hero-logo-area{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: -30px;
}

/* beyaz %70 opak kutu */
.hero-logo-box{
	/* background: rgba(255,255,255,.90); */


	padding: 15px 35px;

	border-radius: 25px;
	border: 2px solid #fff;

	display: flex;
	align-items: center;
	justify-content: center;

	box-sizing: border-box;
	
	box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.4);
	background: rgba(255,255,255,.90);

	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: all .4s ease;
}
.hero-logo-box:hover{
    transform: translateY(-6px);
    background: rgba(255,255,255,.100);
    border-color: #d7e7ff;
}

/*  HIGHLIGHT BÖLÜMÜ  */
.brand-highlight-box{
	background:#fff;
	border-radius:18px;
	padding:28px 22px;
	height:100%;

	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	margin-right: 20px;
}

.brand-highlight-title{
	font-size:.80rem;
	font-weight:600;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:#c49f29;
}

.brand-highlight-line{
	width:100px;
	height:2px;
	background:#c49f29;
	border-radius:2px;
	margin:12px 0;
}

.brand-highlight-text{
	font-size:.95rem;
	line-height:1.45;
	color:#2c2c2c;
}

/* HIGHLIGHT BÖLÜMÜ BİTTİ   */



/* logo ortalama */
.hero-logo-img{
	display: block;

	max-width: 100%;
	max-height: 70px;

	width: auto;
	height: auto;

	object-fit: contain;
 	/* transform: scale(1.1);*/
	
	  filter:
    drop-shadow(2px 0 0 #fff)
    drop-shadow(-1px 0 0 #fff)
    drop-shadow(0 2px 0 #fff)
    drop-shadow(0 -1px 0 #fff);
}
/* MARKA KARTI */

.brand-card{
    background: #fff;
    border: 1px solid #e9eef5;
    border-radius: 24px;
    padding: 35px 20px;
    transition: all .35s ease;
    position: relative;
    overflow: hidden;
	margin-bottom: 50px;
	
	max-height: 160px;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; 
    position: relative;
    padding-bottom: 50px !important;
	overflow: hidden;
}
.brand-card.is-expanded {
    max-height: 1000px; 
	overflow: visible;
}
/* Aşağı Doğru Hafifçe Kaybolma Efekti (Gradient) */
.brand-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
    pointer-events: none; 
    transition: opacity 0.3s ease, visibility 0.3s;
    z-index: 2;
}
.brand-card.is-expanded .brand-card-overlay {
    opacity: 0;
	visibility: hidden;
}

/* üst ışık efekti */
.brand-card::before{
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(0,115,255,.08) 0%, transparent 70%);
    transition: all .4s ease;
}

/* hover */
.brand-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    border-color: #d7e7ff;
}

.brand-card:hover::before{
    transform: scale(1.2);
}


/* Aşağı/Yukarı Ok Butonu */
.brand-card-toggle {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #d7e7ff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    z-index: 100;
}

.brand-card-toggle:hover {
    background: #f8fbff;
    border-color: #0073ff;
	box-shadow: 0 6px 15px rgba(0, 73, 255, 0.15);
}

/* CSS ile Ok İkonu Çizimi (Resme gerek kalmaz) */
.arrow-icon {
    width: 10px;
    height: 10px;
    border-right: 2px solid #6b7280;
    border-bottom: 2px solid #6b7280;
    transform: translateY(-2px) rotate(45deg); /* Aşağı bakan ok */
    transition: transform 0.4s ease;
}

/* Kart açıldığında ok yukarı dönsün */
.brand-card.is-expanded .arrow-icon {
    transform: translateY(2px) rotate(-135deg); /* Yukarı bakan ok */
}








/* logo alanı */
.brand-logo-wrap{
    background: #f8fbff;
    border-radius: 20px;
    padding: 20px;
	height: 70px;      
    min-height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
	
    transition: all .35s ease;
}

.brand-card:hover .brand-logo-wrap{
    background: #eef5ff;
    transform: scale(1.03);
}

.brand-logo{
    display: block;

    max-width: 100%;
    max-height: 70px;

    width: auto;
    height: auto;

    object-fit: contain;

    transition: all .35s ease;
}

.brand-card:hover .brand-logo{
    transform: scale(1.02);
}

/* yazı */

.brand-content p{
    margin: 0 0 0 11px;
    line-height: 1.9;
    color: #4b5563;
    font-size: 16px;
	display: block;
}

.brand-content b{
    color: #111827;
    font-weight: 700;
}


.mrk-title {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 25px;
	font-weight: 700;
	color: #333;
	margin-bottom: 20px;
	position: relative;
	gap: 20px; 
	margin-top: 50px;

}
.mrk-title::before,
.mrk-title::after {
  content: "";
  flex: 1;                 
  height: 1px;            
  background-color: #999;   

}



/* mobil */
@media(min-width:768px) and (max-width:992px){
.brand-highlight-box{
	margin-right: 40px;
	}
}
@media(max-width:992px){
	.brand-highlight-box {
        display: none !important;
    }
	.brand-content{
        text-align: center;
    }

}
@media(max-width:768px){

    .brand-card{
        padding: 24px;
        border-radius: 20px;
    }

    .brand-logo{
        max-width: 110px;
    }

    
	
}