/* =========================================
   MARKALARIMIZ SECTION
========================================= */

.markalarlogo-section{
    width:100%;
    padding:90px 5%;

    position:relative;
    overflow:hidden;

    background:
    linear-gradient(
        180deg,
        #f7f5f3 0%,
        #efebe8 100%
    );
}

/* ARKA PLAN EFEKT */

.markalarlogo-section::before{
    content:"";

    position:absolute;
    left:-200px;
    top:-100px;

    width:700px;
    height:700px;

    background:
    radial-gradient(
        circle,
        rgba(255,255,255,.9),
        transparent 70%
    );

    z-index:0;
}

.markalarlogo-section::after{
    content:"";

    position:absolute;
    right:-120px;
    bottom:-120px;

    width:500px;
    height:500px;

    background:
    radial-gradient(
        circle,
        rgba(255,255,255,.75),
        transparent 72%
    );

    z-index:0;
}

/* =========================================
   BAŞLIK
========================================= */

.markalarlogo-title-area{
    position:relative;
    z-index:2;

    text-align:center;
    margin-bottom:60px;
}

.markalarlogo-subtitle{
    display:block;

    font-size:12px;
    font-weight:600;

    letter-spacing:5px;

    color:#1f2f6d;

    margin-bottom:16px;
}

.markalarlogo-title{
    margin:0;

    font-size:72px;
    line-height:1;

    color:#1f2f6d;

    font-weight:700;

    font-family:'Cormorant Garamond',serif;
}

/* =========================================
   GRID
========================================= */

.markalarlogo-wrapper{
    position:relative;
    z-index:2;

    width:100%;
    max-width:1450px;

    margin:0 auto;

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

    gap:28px;
}

/* =========================================
   CARD
========================================= */

.markalarlogo-card{
    position:relative;

    width:100%;
    height:250px;

    background:#fff;

    border-radius:28px;

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

    overflow:hidden;

    text-decoration:none;

    transition:.4s ease;

    border:1px solid rgba(20,20,20,.04);

    box-shadow:
    0 12px 40px rgba(0,0,0,.06);
}

/* PARLAKLIK */

.markalarlogo-card::before{
    content:"";

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.85),
        rgba(255,255,255,0)
    );

    opacity:0;

    transition:.4s ease;
}

/* HOVER */

.markalarlogo-card:hover{
    transform:
    translateY(-10px);

    box-shadow:
    0 24px 60px rgba(0,0,0,.12);
}

.markalarlogo-card:hover::before{
    opacity:1;
}

/* LOGO */

.markalarlogo-card img{
    width:72%;
    height:72%;

    object-fit:contain;

    display:block;

    transition:.4s ease;

    filter:
    drop-shadow(0 8px 18px rgba(0,0,0,.08));
}

.markalarlogo-card:hover img{
    transform:scale(1.04);
}

/* =========================================
   TABLET
========================================= */

@media(max-width:992px){

    .markalarlogo-wrapper{
        grid-template-columns:repeat(2,1fr);
    }

    .markalarlogo-title{
        font-size:54px;
    }

    .markalarlogo-card{
        height:220px;
    }
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:600px){

    .markalarlogo-section{
        padding:60px 20px;
    }

    .markalarlogo-title-area{
        margin-bottom:35px;
    }

    .markalarlogo-subtitle{
        font-size:10px;
        letter-spacing:3px;
    }

    .markalarlogo-title{
        font-size:40px;
    }

    .markalarlogo-wrapper{
        grid-template-columns:1fr;
        gap:18px;
    }

    .markalarlogo-card{
        height:180px;
        border-radius:22px;
    }

    .markalarlogo-card img{
        width:68%;
        height:68%;
    }
}