:root{
    --present-blue:#083f78;
    --present-dark:#062f5c;
    --present-orange:#ff7a3d;
    --present-sea:#8fd3df;
    --present-text:#5f7188;
    --present-soft:#f6f9fd;
}

html,
body{
    margin:0;
    padding:0;
    overflow-x:hidden;
    background:#fff;
}

.present-page{
    overflow:hidden;
    background:
        radial-gradient(circle at top right, rgba(255,122,61,.09), transparent 28%),
        linear-gradient(135deg,#ffffff 0%,#f6fbff 48%,#eef6fb 100%);
}

.present-container{
    width:min(1180px, calc(100% - 40px));
    margin:0 auto;
}

.present-hero{
    position:relative;
    padding:115px 0 75px;
}

.present-hero::before{
    content:"";
    position:absolute;
    top:-180px;
    right:-160px;
    width:560px;
    height:560px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(143,211,223,.32), transparent 68%);
    pointer-events:none;
}

.present-header{
    position:relative;
    z-index:2;
    max-width:760px;
    margin:0 auto 42px;
    text-align:center;
}

.present-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:0 18px;
    margin-bottom:20px;
    border-radius:999px;
    color:var(--present-orange);
    background:rgba(255,122,61,.10);
    border:1px solid rgba(255,122,61,.18);
    letter-spacing:2.4px;
    text-transform:uppercase;
}

.present-header h1{
    margin:0 auto;
    max-width:760px;
    color:var(--present-blue);
    font-size:clamp(var(--fs-xl),2.2vw,var(--fs-3xl));
    line-height:1.15;
    letter-spacing:-.03em;
}

.present-header p{
    max-width:620px;
    margin:16px auto 0;
    color:var(--present-text);
    line-height:var(--lh-relaxed);
}

.present-grid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.present-card{
    position:relative;
    min-height:245px;
    overflow:hidden;
    border-radius:24px;
    background:#fff;
    border:1px solid rgba(255,255,255,.48);
    box-shadow:0 14px 34px rgba(8,63,120,.08);
    transition:.38s cubic-bezier(.16,1,.3,1);
}

.present-card::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:
        linear-gradient(
            180deg,
            rgba(8,63,120,.08) 0%,
            rgba(8,63,120,.48) 52%,
            rgba(8,63,120,.92) 100%
        );
    transition:.38s ease;
}

.present-card::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    z-index:3;
    width:0;
    height:5px;
    background:var(--present-orange);
    transition:.42s ease;
}

.present-card:hover{
    transform:translateY(-7px);
    box-shadow:0 22px 48px rgba(8,63,120,.14);
}

.present-card:hover::before{
    background:
        linear-gradient(
            180deg,
            rgba(255,122,61,.12) 0%,
            rgba(8,63,120,.86) 100%
        );
}

.present-card:hover::after{
    width:100%;
}

.present-card-blue{
    background:
        linear-gradient(135deg, rgba(8,63,120,.14), rgba(8,63,120,.06)),
        url("/assets/img/Degerlerimiz/b9d90c55-187d-4d45-a072-464e6c01bedf.jfif")
        center/cover no-repeat;
}

.present-card-orange{
    background:
        linear-gradient(135deg, rgba(255,122,61,.18), rgba(8,63,120,.08)),
        url("/assets/img/Degerlerimiz/3b844407-b61a-4d19-b850-db269c322389.png")
        center/cover no-repeat;
}

.present-card-sea{
    background:
        linear-gradient(135deg, rgba(143,211,223,.18), rgba(8,63,120,.10)),
        url("/assets/img/Degerlerimiz/1770556934283.jfif")
        center/cover no-repeat;
}

.present-card-dark{
    background:
        linear-gradient(135deg, rgba(6,47,92,.22), rgba(8,63,120,.10)),
        url("/assets/img/Degerlerimiz/8f86277e-c366-4a94-ab46-78041b7cd878.png")
        center/cover no-repeat;
}

.present-overlay{
    position:absolute;
    inset:0;
    z-index:2;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:22px;
    color:#fff;
}

.present-overlay > i{
    width:46px;
    height:46px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-bottom:16px;
    border-radius:14px;
    color:#fff;
    background:linear-gradient(135deg,var(--present-orange),#ff9b66);
    box-shadow:0 10px 22px rgba(255,122,61,.22);
    transition:.34s ease;
}

.present-card:hover .present-overlay > i{
    transform:translateY(-5px) scale(1.05);
    background:#fff;
    color:var(--present-orange);
}

.present-overlay h3{
    margin:0;
    color:#fff;
    font-size:var(--fs-lg);
    line-height:1.22;
    letter-spacing:-.02em;
}

.present-overlay p{
    margin:10px 0 18px;
    color:rgba(255,255,255,.84);
    font-size:var(--fs-sm);
    line-height:1.55;
}

.present-overlay a{
    width:max-content;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 16px;
    border-radius:999px;
    color:var(--present-blue);
    background:#fff;
    text-decoration:none;
    font-size:var(--fs-xs);
    transition:.28s ease;
}

.present-overlay a:hover{
    transform:translateY(-3px);
    color:#fff;
    background:var(--present-orange);
}

@media(max-width:1100px){
    .present-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:700px){
    .present-container{
        width:min(100% - 28px,1180px);
    }

    .present-hero{
        padding:90px 0 55px;
    }

    .present-header{
        margin-bottom:34px;
    }

    .present-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .present-card{
        min-height:230px;
        border-radius:20px;
    }

    .present-overlay{
        padding:20px;
    }

    .present-overlay h3{
        font-size:var(--fs-md);
    }

    .present-overlay p{
        font-size:var(--fs-xs);
    }
}