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

BRANDS PAGE

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

.brands-hero{


    padding:110px 0;


    background:#f7f9fc;

}

.brands-hero-grid{


    display:grid;


    grid-template-columns:1fr 1fr;


    gap:80px;


    align-items:center;

}

.brands-left h1{


    font-size:60px;


    margin:20px 0;

}

.brands-left p{


    font-size:18px;


    line-height:1.9;


    max-width:600px;

}

.brands-right{


    display:flex;


    justify-content:center;

}

.brands-right img{


    max-width:560px;


    width:100%;


    border-radius:30px;

}

.brand-search{


    padding:70px 0;

}

.brands-list{


    padding:100px 0;

}

.brands-grid{


    display:grid;


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


    gap:30px;


    margin-top:60px;

}

.brand-card{


    background:#fff;


    padding:45px;


    border-radius:24px;


    font-size:24px;


    font-weight:700;


    text-align:center;


    transition:.3s;


    border:1px solid #e9edf5;

}

.brand-card:hover{


    transform:translateY(-8px);


    box-shadow:0 20px 60px rgba(0,0,0,.08);

}
/*=========================================
MARKA KATEGORİLERİ
=========================================*/

.brand-categories{


    padding:100px 0;


    background:#f8fafc;

}

.brand-category-grid{


    display:grid;


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


    gap:30px;


    margin-top:60px;

}

.category-card{


    background:#fff;


    border-radius:20px;


    padding:40px 30px;


    text-align:center;


    text-decoration:none;


    border:1px solid #ececec;


    transition:.35s;

}

.category-card:hover{


    transform:translateY(-8px);


    box-shadow:0 20px 50px rgba(0,0,0,.08);


    border-color:#191970;

}

.category-card i{


    font-size:42px;


    color:#191970;


    margin-bottom:25px;

}

.category-card h3{


    font-size:24px;


    margin-bottom:15px;


    color:#222;

}

.category-card p{


    font-size:15px;


    line-height:1.7;


    color:#666;

}
/*==================================
BRANDS SHOWCASE
==================================*/

.brands-showcase{


    padding:110px 0;

}

.brand-row{


    display:grid;


    grid-template-columns:420px 1fr;


    gap:70px;


    align-items:center;


    margin-bottom:90px;

}

.brand-row.reverse{


    grid-template-columns:1fr 420px;

}

.brand-row.reverse .brand-image{


    order:2;

}

.brand-row.reverse .brand-info{


    order:1;

}

.brand-image{


    background:#fff;


    padding:45px;


    border-radius:24px;


    border:1px solid #eceff5;


    display:flex;


    justify-content:center;


    align-items:center;

}

.brand-image img{


    max-width:100%;


    height:auto;

}

.brand-badge{


    display:inline-block;


    padding:8px 18px;


    background:#edf4ff;


    color:#191970;


    font-weight:700;


    border-radius:40px;


    margin-bottom:18px;

}

.brand-info h2{


    font-size:40px;


    margin-bottom:20px;

}

.brand-info p{


    font-size:17px;


    line-height:1.9;


    color:#666;


    margin-bottom:25px;

}

.brand-info ul{


    display:grid;


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


    gap:14px;


    margin-bottom:35px;


    padding:0;


    list-style:none;

}

.brand-info li{


    position:relative;


    padding-left:28px;

}

.brand-info li::before{


    content:"✓";


    position:absolute;


    left:0;


    top:0;


    font-weight:700;


    color:#16a34a;

}

.brand-actions{


    display:flex;


    gap:18px;


    flex-wrap:wrap;

}
/*==================================
WHY BRANDS
==================================*/

.why-brands{


    padding:120px 0;


    background:#f8fafc;

}

.why-grid{


    display:grid;


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


    gap:30px;


    margin-top:60px;

}

.why-card{


    background:#fff;


    padding:40px 30px;


    border-radius:22px;


    text-align:center;


    border:1px solid #edf1f5;


    transition:.35s;

}

.why-card:hover{


    transform:translateY(-8px);


    box-shadow:0 20px 50px rgba(0,0,0,.08);

}

.why-icon{


    width:80px;


    height:80px;


    border-radius:50%;


    background:#191970;


    color:#fff;


    display:flex;


    align-items:center;


    justify-content:center;


    font-size:34px;


    margin:auto;


    margin-bottom:25px;

}

.why-card h3{


    font-size:24px;


    margin-bottom:15px;

}

.why-card p{


    line-height:1.8;


    color:#666;

}

/*==================================
FAQ
==================================*/

.faq-section{


    padding:120px 0;

}

.faq-list{


    max-width:900px;


    margin:70px auto 0;

}

.faq-item{


    background:#fff;


    border:1px solid #eceff5;


    border-radius:18px;


    margin-bottom:20px;


    overflow:hidden;

}

.faq-question{


    width:100%;


    padding:28px 35px;


    background:none;


    border:none;


    cursor:pointer;


    display:flex;


    justify-content:space-between;


    align-items:center;


    font-size:20px;


    font-weight:700;


    text-align:left;

}

.faq-question span{


    font-size:32px;


    color:#191970;


    transition:.3s;

}

.faq-answer{


    display:none;


    padding:0 35px 30px;

}

.faq-answer p{


    line-height:1.9;


    color:#666;

}

.faq-item.active .faq-answer{


    display:block;

}

.faq-item.active .faq-question span{


    transform:rotate(45deg);


}
/*==================================
CTA
==================================*/

.brand-cta{


    padding:120px 0;

}

.brand-cta-box{


    background:linear-gradient(135deg,#191970,#2e4ba8);


    border-radius:30px;


    padding:70px;


    display:grid;


    grid-template-columns:1.4fr .9fr;


    gap:60px;


    color:#fff;


    overflow:hidden;


    position:relative;

}

.brand-cta-box::before{


    content:"";


    position:absolute;


    width:350px;


    height:350px;


    border-radius:50%;


    background:rgba(255,255,255,.06);


    right:-100px;


    top:-120px;

}

.brand-cta-box::after{


    content:"";


    position:absolute;


    width:250px;


    height:250px;


    border-radius:50%;


    background:rgba(255,255,255,.05);


    left:-80px;


    bottom:-80px;

}

.brand-cta-box>*{


    position:relative;


    z-index:2;

}

.brand-cta h2{


    font-size:46px;


    margin:20px 0;


    line-height:1.25;


    color:#fff;

}

.brand-cta p{


    font-size:18px;


    line-height:1.9;


    opacity:.92;


    margin-bottom:35px;

}

.cta-features{


    display:grid;


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


    gap:18px;

}

.feature{


    background:rgba(255,255,255,.10);


    padding:18px 20px;


    border-radius:14px;


    backdrop-filter:blur(8px);

}

.cta-right{


    display:flex;


    flex-direction:column;


    justify-content:center;


    gap:22px;

}

.cta-btn{


    display:flex;


    align-items:center;


    gap:18px;


    padding:24px 28px;


    background:#fff;


    color:#191970;


    text-decoration:none;


    border-radius:18px;


    font-size:24px;


    font-weight:700;


    transition:.35s;

}

.cta-btn strong{


    display:block;


    font-size:18px;

}

.cta-btn small{


    display:block;


    font-size:14px;


    color:#666;


    margin-top:4px;

}

.cta-btn:hover{


    transform:translateX(10px);


    box-shadow:0 20px 45px rgba(0,0,0,.18);

}

.whatsapp{


    background:#25D366;


    color:#fff;

}

.whatsapp small{


    color:#eafcf0;

}