/* =========================================================
   ROOT
========================================================= */

:root{
    --anko-white:#ffffff;
    --anko-black:#161416;

    /* KURUMSAL RENKLER */
    
    --anko-primary-dark:#2f315f;
    --anko-primary-soft:#f1f2f9;

    --anko-accent:#d98e2d;
    --anko-accent-dark:#b87520;
    --anko-accent-soft:#fff6ea;

    --anko-dark:#242024;
    --anko-dark-two:#36292a;

    --anko-text:#20222e;
    --anko-muted:#737582;

    --anko-border:rgba(61,63,121,.12);


 --anko-primary:#3d3f79;
    --anko-primary-dark:#30325f;
    --anko-orange:#d98e2d;
    --anko-bg:#f5f5f5;
    --anko-heading:#202126;
    --anko-text:#6f7078;

}





/* =========================================================
   RESET
========================================================= */

*{

    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    margin:0;

    padding:0;

    overflow-x:hidden;

    font-family:'Inter',sans-serif;

    background:#171416;

    color:#fff;

}


a{

    text-decoration:none;

}


img{

    display:block;

    max-width:100%;

}


button{

    font-family:inherit;

}


/* =========================================================
   BOOTSTRAP CONTAINER
========================================================= */

@media(min-width:1400px){

    .container{

        max-width:1320px;

    }

}



/* =========================================================
   HEADER
========================================================= */

.anko-header{

    position:absolute;

    top:0;

    left:0;

    z-index:100;

    width:100%;

    padding-top:18px;

}


.anko-header-bar{

    min-height:98px;

    width:100%;

    padding:7px 9px 7px 16px;


    display:flex;

    align-items:center;


  


    border-radius:36px;


    background:

        linear-gradient(

            100deg,

            rgba(31,29,34,.96) 0%,

            rgba(46,36,39,.94) 56%,

            rgba(68,47,43,.93) 100%

        );


    box-shadow:

        0 18px 50px rgba(0,0,0,.24),

        inset 0 1px 0 rgba(255,255,255,.05);


    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

}



/* =========================================================
   LOGO
========================================================= */

.anko-logo{

    flex-shrink:0;


    min-width:128px;

    height:44px;


    padding:

        0

        18px;


    display:flex;

    align-items:center;

    justify-content:center;


   

    border-radius:24px;


    color:#fff;


    font-size:17px;

    font-weight:800;

    line-height:1;


    letter-spacing:3px;


    transition:.3s ease;

}


.anko-logo:hover{

    color:#fff;

   

}



/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

.anko-navigation{

    flex:1;


    align-items:center;

    justify-content:center;


    gap:42px;


    padding:

        0

        30px;

}


.anko-navigation > a{

    position:relative;


    display:flex;

    align-items:center;

    justify-content:center;


    color:

        rgba(255,255,255,.70);


    font-size:13px;

    font-weight:600;

    line-height:1;


    white-space:nowrap;


    transition:

        color .25s ease;

}


.anko-navigation > a:not(.anko-navigation-home)::after{

    content:"";


    position:absolute;


    left:50%;

    bottom:-10px;


    width:0;

    height:1px;


    transform:

        translateX(-50%);


    background:#fff;


    transition:

        width .25s ease;

}


.anko-navigation > a:hover{

    color:#fff;

}


.anko-navigation > a:not(.anko-navigation-home):hover::after{

    width:100%;

}



/* =========================================================
   NAV HOME ICON
========================================================= */

.anko-navigation-home{

    width:46px;

    height:46px;


    flex:0 0 46px;

}


.anko-navigation-home svg{

    width:28px;

    height:28px;


    fill:#fff;


    transition:

        transform .3s ease;

}


.anko-navigation-home:hover svg{

    transform:

        translateY(-2px)

        scale(1.04);

}



/* =========================================================
   MENU BUTTON
========================================================= */

.anko-menu-button{

    width:46px;

    height:46px;


    flex:0 0 46px;


    padding:0;


    margin-left:auto;


    border:

        1px solid

        rgba(255,255,255,.14);


    border-radius:50%;


    background:

        rgba(10,10,10,.23);


    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;


    gap:5px;


    cursor:pointer;


    transition:.3s ease;

}


.anko-menu-button:hover{

    background:

        rgba(255,255,255,.08);

}


.anko-menu-button span{

    display:block;


    width:14px;

    height:1px;


    background:#fff;

}



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

.anko-mobile-menu{

    width:min(360px,90vw) !important;


    color:#fff;


    background:

        linear-gradient(

            145deg,

            #211e21,

            #382828

        );

}


.anko-mobile-menu .offcanvas-header{

    padding:

        25px

        25px

        20px;

}


.anko-mobile-menu .offcanvas-body{

    padding:

        10px

        25px

        30px;

}


.anko-mobile-logo{

    color:#fff;


    font-size:20px;

    font-weight:800;


    letter-spacing:3px;

}


.anko-mobile-navigation{

    display:flex;

    flex-direction:column;

}


.anko-mobile-navigation a{

    padding:

        18px

        0;


    border-bottom:

        1px solid

        rgba(255,255,255,.08);


    color:

        rgba(255,255,255,.84);


    font-size:17px;

    font-weight:600;


    transition:.25s ease;

}


.anko-mobile-navigation a:hover{

    color:#fff;


    padding-left:8px;

}



/* =========================================================
   HERO
========================================================= */

.anko-hero{

    position:relative;


    width:100%;


    min-height:900px;

    height:100vh;


    overflow:hidden;


    background:#181518;

}



/* =========================================================
   HERO BACKGROUND
========================================================= */

.anko-hero-background{

    position:absolute;

    inset:0;


    background-image:

        url('../uploads/bg.jpg');


    background-repeat:no-repeat;

    background-size:cover;

    background-position:center;


    transform:

        scale(1.02);

}



/* =========================================================
   HERO OVERLAY
========================================================= */

.anko-hero-overlay{

    position:absolute;

    inset:0;


    z-index:1;


    background:

        linear-gradient(

            90deg,

            rgba(19,18,22,.72) 0%,

            rgba(24,21,24,.55) 33%,

            rgba(34,25,24,.23) 62%,

            rgba(45,30,26,.06) 100%

        ),

        linear-gradient(

            180deg,

            rgba(10,10,10,.15),

            rgba(10,10,10,0) 45%,

            rgba(10,10,10,.17)

        );

}



/* =========================================================
   HERO LIGHT
========================================================= */

.anko-hero-light{

    position:absolute;


    z-index:2;


    top:-25%;

    right:-12%;


    width:72%;

    height:100%;


    pointer-events:none;


    background:

        radial-gradient(

            circle,

            rgba(255,186,128,.30) 0%,

            rgba(255,151,84,.08) 38%,

            rgba(255,151,84,0) 70%

        );


    filter:

        blur(35px);

}



/* =========================================================
   HERO CONTAINER
========================================================= */

.anko-hero-container{

    position:relative;


    z-index:5;


    min-height:900px;

    height:100vh;

}


.anko-hero-container > .row{

    min-height:900px;

    height:100%;

}



/* =========================================================
   HERO CONTENT
========================================================= */

.anko-hero-content{

    position:relative;


    z-index:5;


    max-width:610px;


    padding-top:75px;

}



/* =========================================================
   HERO TAG
========================================================= */

.anko-hero-tag{

    display:inline-flex;

    align-items:center;


    min-height:30px;


    padding:

        5px

        14px;


    margin-bottom:20px;


    border:

        1px solid

        rgba(255,255,255,.66);


    border-radius:30px;


    background:

        rgba(255,255,255,.09);


    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);


    color:#fff;


    font-size:18px;

    font-weight:600;

}



/* =========================================================
   HERO TITLE
========================================================= */

.anko-hero-content h1{

    margin:0;


    color:#fff;


    font-size:

        clamp(

            58px,

            5vw,

            82px

        );


    line-height:.98;


    font-weight:800;


    letter-spacing:-4.5px;


    text-shadow:

        0 7px 26px rgba(0,0,0,.16);

}



/* =========================================================
   HERO TEXT
========================================================= */

.anko-hero-content p{

    max-width:555px;


    margin:

        25px

        0

        0;


    color:

        rgba(255,255,255,.90);


    font-size:16px;

    font-weight:500;

    line-height:1.65;


    text-shadow:

        0 2px 9px rgba(0,0,0,.22);

}



/* =========================================================
   HERO BUTTONS
========================================================= */

.anko-hero-buttons{

    display:flex;

    align-items:center;


    flex-wrap:wrap;


    gap:14px;


    margin-top:30px;

}



/* =========================================================
   BUTTON BASE
========================================================= */

.anko-button{

    min-height:55px;


    padding:

        5px

        6px

        5px

        24px;


    display:inline-flex;

    align-items:center;

    justify-content:space-between;


    gap:20px;


    border-radius:30px;


    color:#fff;


    font-size:13px;

    font-weight:700;


    transition:

        transform .3s ease,

        background .3s ease,

        border-color .3s ease;

}


.anko-button:hover{

    color:#fff;


    transform:

        translateY(-3px);

}



/* =========================================================
   PRIMARY BUTTON
========================================================= */

.anko-button-primary{

    background:

        rgba(32,27,28,.96);


    box-shadow:

        0 16px 35px rgba(0,0,0,.19);

}


.anko-button-primary:hover{

    background:

        rgba(20,18,19,.98);

}



/* =========================================================
   BUTTON ROUND ICON
========================================================= */

.anko-button-icon{

    width:43px;

    height:43px;


    flex:0 0 43px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    background:#fff;

}


.anko-button-icon svg{

    width:18px;

    height:18px;


    fill:none;


    stroke:#111;


    stroke-width:1.8;


    stroke-linecap:round;

    stroke-linejoin:round;

}



/* =========================================================
   SECONDARY BUTTON
========================================================= */

.anko-button-secondary{

    padding-right:17px;


    border:

        1px solid

        rgba(255,255,255,.50);


    background:

        rgba(255,255,255,.11);


    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

}


.anko-button-secondary:hover{

    border-color:

        rgba(255,255,255,.80);


    background:

        rgba(255,255,255,.17);

}


.anko-button-down{

    width:24px;

    height:24px;


    display:flex;

    align-items:center;

    justify-content:center;

}


.anko-button-down svg{

    width:18px;

    height:18px;


    fill:none;


    stroke:#fff;


    stroke-width:1.7;


    stroke-linecap:round;

    stroke-linejoin:round;

}



/* =========================================================
   MEDIA AREA
========================================================= */

.anko-media-area{

    position:relative;


    width:100%;

    max-width:530px;


    height:700px;


    margin:

        95px

        0

        0

        auto;

}



/* =========================================================
   BACK GLASS
========================================================= */

.anko-media-glass{

    position:absolute;


    left:32px;

    right:32px;

    top:35px;

    bottom:30px;


    border:

        1px solid

        rgba(255,255,255,.07);


    border-radius:40px;


    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.07),

            rgba(255,255,255,.01)

        );


    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);

}



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

.anko-media-grid{

    position:relative;


    z-index:5;


    width:100%;

    height:100%;


    display:grid;


    grid-template-columns:

        repeat(2,minmax(0,1fr));


    gap:19px;

}



/* =========================================================
   COLUMN WINDOW
========================================================= */

.anko-media-column{

    position:relative;


    width:100%;

    height:700px;


    overflow:hidden;


    border-radius:24px;

}



/* =========================================================
   TOP + BOTTOM FADE
========================================================= */

.anko-media-column::before,
.anko-media-column::after{

    content:"";


    position:absolute;


    left:0;


    z-index:20;


    width:100%;

    height:80px;


    pointer-events:none;

}


.anko-media-column::before{

    top:0;


    background:

        linear-gradient(

            180deg,

            rgba(45,34,35,.40),

            rgba(45,34,35,0)

        );

}


.anko-media-column::after{

    bottom:0;


    background:

        linear-gradient(

            0deg,

            rgba(45,34,35,.32),

            rgba(45,34,35,0)

        );

}



/* =========================================================
   TRACK
========================================================= */

.anko-media-track{

    display:flex;

    flex-direction:column;


    width:100%;


    will-change:transform;

}



/* =========================================================
   GROUP
========================================================= */

.anko-media-group{

    width:100%;


    display:flex;

    flex-direction:column;


    gap:18px;


    padding:

        9px

        6px;

}



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

.anko-media-card{

    position:relative;


    width:100%;


    flex-shrink:0;


    overflow:hidden;


    border:

        1px solid

        rgba(255,255,255,.38);


    border-radius:22px;


    background:

        rgba(255,255,255,.08);


    box-shadow:

        0 24px 55px rgba(0,0,0,.22),

        0 0 0 6px rgba(255,255,255,.065);

}


.anko-media-card img{

    width:100%;

    height:100%;


    object-fit:cover;


    transition:

        transform .7s ease;

}


.anko-media-card:hover img{

    transform:

        scale(1.045);

}



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

.anko-media-card-sm{

    height:175px;

}


.anko-media-card-md{

    height:225px;

}


.anko-media-card-lg{

    height:280px;

}



/* =========================================================
   LEFT COLUMN START POSITION
========================================================= */

.anko-media-column-up{

    transform:

        translateY(28px);

}



/* =========================================================
   RIGHT COLUMN START POSITION
========================================================= */

.anko-media-column-down{

    transform:

        translateY(-25px);

}



/* =========================================================
   LEFT COLUMN
   CONTINUOUSLY UP
========================================================= */

.anko-media-column-up .anko-media-track{

    animation:

        ankoScrollUp

        26s

        linear

        infinite;

}


@keyframes ankoScrollUp{

    from{

        transform:

            translate3d(

                0,

                0,

                0

            );

    }


    to{

        transform:

            translate3d(

                0,

                -50%,

                0

            );

    }

}



/* =========================================================
   RIGHT COLUMN
   CONTINUOUSLY DOWN
========================================================= */

.anko-media-column-down .anko-media-track{

    animation:

        ankoScrollDown

        29s

        linear

        infinite;

}


@keyframes ankoScrollDown{

    from{

        transform:

            translate3d(

                0,

                -50%,

                0

            );

    }


    to{

        transform:

            translate3d(

                0,

                0,

                0

            );

    }

}



/* =========================================================
   XXL
========================================================= */

@media(max-width:1399.98px){

    .anko-navigation{

        gap:33px;

    }


    .anko-media-area{

        max-width:500px;

    }


    .anko-media-card-lg{

        height:265px;

    }


    .anko-media-card-md{

        height:215px;

    }


    .anko-media-card-sm{

        height:165px;

    }

}



/* =========================================================
   XL
========================================================= */

@media(max-width:1199.98px){

    .anko-header-bar{

        min-height:64px;

    }


    .anko-hero-content h1{

        font-size:68px;

    }


    .anko-media-area{

        max-width:455px;

        height:650px;


        margin-top:85px;

    }


    .anko-media-column{

        height:650px;

    }


    .anko-media-card-lg{

        height:235px;

    }


    .anko-media-card-md{

        height:195px;

    }


    .anko-media-card-sm{

        height:150px;

    }

}



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

@media(max-width:991.98px){

    .anko-header{

        padding-top:13px;

    }


    .anko-header-bar{

        min-height:62px;

    }


    .anko-hero{

        height:auto;

        min-height:1050px;

    }


    .anko-hero-container{

        height:auto;

        min-height:1050px;


        padding-top:125px;

        padding-bottom:70px;

    }


    .anko-hero-container > .row{

        height:auto;

        min-height:0;

    }


    .anko-hero-content{

        max-width:720px;


        padding-top:20px;

    }


    .anko-hero-content h1{

        max-width:700px;


        font-size:68px;

    }


    .anko-hero-content p{

        max-width:650px;

    }


    .anko-media-area{

        width:100%;

        max-width:650px;


        height:460px;


        margin:

            55px

            auto

            0;

    }


    .anko-media-grid{

        gap:15px;

    }


    .anko-media-column{

        height:460px;

    }


    .anko-media-card-lg{

        height:220px;

    }


    .anko-media-card-md{

        height:180px;

    }


    .anko-media-card-sm{

        height:140px;

    }


    .anko-media-column-up{

        transform:none;

    }


    .anko-media-column-down{

        transform:none;

    }

}



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

@media(max-width:767.98px){

    .anko-header{

        padding:

            10px

            4px

            0;

    }


    .anko-header-bar{

        min-height:58px;


        padding:

            6px

            7px

            6px

            11px;


        border-radius:30px;

    }


    .anko-logo{

        min-width:108px;

        height:39px;


        padding:

            0

            14px;


        font-size:14px;

    }


    .anko-menu-button{

        width:40px;

        height:40px;


        flex:0 0 40px;

    }


    .anko-hero{

        min-height:1000px;

    }


    .anko-hero-background{

        background-position:center;

    }


    .anko-hero-overlay{

        background:

            linear-gradient(

                90deg,

                rgba(17,16,19,.80),

                rgba(24,19,20,.43)

            ),

            linear-gradient(

                180deg,

                rgba(10,10,10,.15),

                rgba(10,10,10,.12)

            );

    }


    .anko-hero-container{

        min-height:1000px;


        padding-top:115px;

        padding-bottom:55px;

    }


    .anko-hero-content{

        padding-top:10px;

    }


    .anko-hero-tag{

        margin-bottom:16px;


        font-size:11px;

    }


    .anko-hero-content h1{

        font-size:

            clamp(

                47px,

                11vw,

                60px

            );


        line-height:1;


        letter-spacing:-3px;

    }


    .anko-hero-content p{

        margin-top:21px;


        font-size:15px;

        line-height:1.65;

    }


    .anko-hero-buttons{

        margin-top:25px;

    }


    .anko-media-area{

        height:400px;


        margin-top:45px;

    }


    .anko-media-column{

        height:400px;


        border-radius:18px;

    }


    .anko-media-grid{

        gap:10px;

    }


    .anko-media-group{

        gap:12px;


        padding:

            6px

            4px;

    }


    .anko-media-card{

        border-radius:16px;


        box-shadow:

            0 14px 35px rgba(0,0,0,.19),

            0 0 0 3px rgba(255,255,255,.055);

    }


    .anko-media-card-lg{

        height:190px;

    }


    .anko-media-card-md{

        height:155px;

    }


    .anko-media-card-sm{

        height:120px;

    }


    .anko-media-column::before,
    .anko-media-column::after{

        height:45px;

    }

}



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

@media(max-width:575.98px){

    .anko-header .container{

        padding:

            0

            8px;

    }


    .anko-hero-container{

        padding-left:18px;

        padding-right:18px;

    }


    .anko-hero-content h1{

        font-size:44px;


        letter-spacing:-2.4px;

    }


    .anko-hero-content p{

        font-size:14px;

    }


    .anko-hero-buttons{

        width:100%;


        flex-direction:column;

        align-items:stretch;

    }


    .anko-button{

        width:100%;

    }


    .anko-media-area{

        width:calc(100% + 12px);


        margin-left:-6px;


        height:365px;

    }


    .anko-media-column{

        height:365px;

    }


    .anko-media-card-lg{

        height:170px;

    }


    .anko-media-card-md{

        height:140px;

    }


    .anko-media-card-sm{

        height:110px;

    }

}



/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:390px){

    .anko-hero-content h1{

        font-size:39px;

    }


    .anko-hero-tag{

        padding:

            5px

            11px;

    }


    .anko-button{

        min-height:52px;


        padding-left:19px;


        font-size:12px;

    }


    .anko-button-icon{

        width:40px;

        height:40px;


        flex-basis:40px;

    }


    .anko-media-area{

        height:340px;

    }


    .anko-media-column{

        height:340px;

    }

}



/* =========================================================
   ACCESSIBILITY
========================================================= */

@media(prefers-reduced-motion:reduce){

    .anko-media-track{

        animation-duration:80s;

    }

}


/* =========================================================
   KURUMSAL RENKLER
========================================================= */



/* =========================================================
   BİZ KİMİZ
========================================================= */

.anko-about{
    position:relative;

    padding:10px;

    background:#f5f5f5;
}


/* =========================================================
   CONTENT
========================================================= */

.anko-about-content{
    width:100%;
    max-width:1000px;

    margin:0 auto;

    text-align:center;
}


/* =========================================================
   SMALL TAG
========================================================= */

.anko-section-tag{
    display:inline-flex;

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

    margin-bottom:13px;

    color:var(--anko-orange);

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

    letter-spacing:2px;

    text-transform:uppercase;
}


/* =========================================================
   TITLE
========================================================= */

.anko-about-content h2{
    margin:0;

    color:var(--anko-primary);

    font-size:clamp(38px,4vw,56px);

    line-height:1.05;

    font-weight:800;

    letter-spacing:-2.5px;
}


/* =========================================================
   SMALL LINE
========================================================= */

.anko-about-line{
    width:48px;
    height:3px;

    margin:20px auto 25px;

    border-radius:10px;

    background:var(--anko-orange);
}


/* =========================================================
   TEXT
========================================================= */

.anko-about-content p{
    max-width:950px;

    margin:0 auto;

    color:var(--anko-text);

    font-size:17px;
    line-height:1.9;

    font-weight:400;
}


.anko-about-content p strong{
    color:var(--anko-primary);

    font-weight:750;
}


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

@media(max-width:991.98px){

    .anko-about{
        padding:65px 0 70px;
    }

    .anko-about-content{
        max-width:850px;
    }

    .anko-about-content p{
        font-size:16px;
        line-height:1.8;
    }

}


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

@media(max-width:767.98px){

    .anko-about{
        padding:50px 0 55px;
    }

    .anko-about-content{
        padding:0 8px;
    }

    .anko-about-content h2{
        font-size:38px;

        letter-spacing:-1.7px;
    }

    .anko-about-line{
        margin:17px auto 21px;
    }

    .anko-about-content p{
        font-size:15px;

        line-height:1.8;
    }

}


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

@media(max-width:575.98px){

    .anko-about{
        padding:45px 0 50px;
    }

    .anko-about-content h2{
        font-size:34px;
    }

    .anko-about-content p{
        font-size:15px;

        line-height:1.75;
    }

}



/* =========================================================
   PRODUCT GROUPS
========================================================= */

.anko-product-section{
    padding:35px 0 90px;
    background:#f5f5f5;
}


/* =========================================================
   HEADER
========================================================= */

.anko-product-header{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    align-items:end;
    gap:70px;

    margin-bottom:32px;
    padding-top:42px;

    border-top:1px solid rgba(61,63,121,.12);
}


.anko-product-label{
    display:block;

    margin-bottom:10px;

    color:var(--anko-orange);

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

    letter-spacing:1.8px;
}


.anko-product-header h2{
    margin:0;

    color:#202126;

    font-size:clamp(42px,5vw,68px);

    line-height:.98;

    font-weight:800;

    letter-spacing:-3.5px;
}


.anko-product-header h2 span{
    color:var(--anko-primary);
}


.anko-product-header > p{
    max-width:500px;

    margin:0 0 5px auto;

    color:#74757d;

    font-size:16px;

    line-height:1.75;
}


/* =========================================================
   LAYOUT
========================================================= */

.anko-product-layout{
    display:grid;

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

    grid-template-rows:
        355px
        355px;

    gap:18px;
}


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

.anko-product-card-1{
    grid-column:1 / span 7;
    grid-row:1;
}


.anko-product-card-2{
    grid-column:8 / span 5;
    grid-row:1;
}


.anko-product-card-3{
    grid-column:1 / span 5;
    grid-row:2;
}


.anko-product-card-4{
    grid-column:6 / span 7;
    grid-row:2;
}


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

.anko-product-card{
    position:relative;

    overflow:hidden;

    display:block;

    border-radius:30px;

    background:#252525;

    color:#fff;

    isolation:isolate;

    box-shadow:
        0 18px 45px
        rgba(26,27,45,.06);
}


.anko-product-card > img{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .9s cubic-bezier(.2,.8,.2,1);
}


.anko-product-card:hover > img{
    transform:scale(1.065);
}


/* =========================================================
   OVERLAY
========================================================= */

.anko-product-overlay{
    position:absolute;

    inset:0;

    z-index:1;

    background:
        linear-gradient(
            180deg,
            rgba(20,20,25,.08) 0%,
            rgba(20,20,25,.04) 25%,
            rgba(20,20,25,.38) 60%,
            rgba(18,18,24,.90) 100%
        );
}


/* hafif kurumsal renk */

.anko-product-card::after{
    content:"";

    position:absolute;

    inset:0;

    z-index:2;

    background:
        linear-gradient(
            120deg,
            rgba(61,63,121,.18),
            transparent 48%,
            rgba(217,142,45,.06)
        );

    pointer-events:none;

    transition:.4s ease;
}


.anko-product-card:hover::after{
    background:
        linear-gradient(
            120deg,
            rgba(61,63,121,.30),
            transparent 50%,
            rgba(217,142,45,.11)
        );
}


/* =========================================================
   NUMBER
========================================================= */

.anko-product-no{
    position:absolute;

    z-index:5;

    top:25px;
    right:27px;

    color:rgba(255,255,255,.72);

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;
}


/* =========================================================
   CONTENT
========================================================= */

.anko-product-content{
    position:absolute;

    z-index:5;

    left:0;
    bottom:0;

    width:100%;

    padding:34px 34px 30px;
}


.anko-product-mini{
    display:block;

    margin-bottom:10px;

    color:#e6a64f;

    font-size:11px;

    font-weight:800;

    letter-spacing:1.5px;

    text-transform:uppercase;
}


.anko-product-content h3{
    margin:0;

    max-width:520px;

    color:#fff;

    font-size:clamp(29px,3vw,44px);

    line-height:1;

    font-weight:800;

    letter-spacing:-2px;
}


/* =========================================================
   BOTTOM
========================================================= */

.anko-product-bottom{
    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:25px;

    margin-top:18px;
}


.anko-product-bottom p{
    max-width:360px;

    margin:0;

    color:rgba(255,255,255,.74);

    font-size:13px;

    line-height:1.6;
}


/* =========================================================
   ARROW
========================================================= */

.anko-product-arrow{
    width:52px;
    height:52px;

    flex:0 0 52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.32);

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

    backdrop-filter:blur(8px);

    color:#fff;

    transition:
        background .35s ease,
        border-color .35s ease,
        transform .35s ease;
}


.anko-product-arrow svg{
    width:19px;
    height:19px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.8;

    stroke-linecap:round;

    stroke-linejoin:round;
}


.anko-product-card:hover
.anko-product-arrow{
    background:var(--anko-orange);

    border-color:var(--anko-orange);

    transform:
        rotate(45deg);
}


/* =========================================================
   HOVER TITLE
========================================================= */

.anko-product-content h3,
.anko-product-mini,
.anko-product-bottom{
    transition:
        transform .4s ease;
}


.anko-product-card:hover
.anko-product-content h3{
    transform:translateY(-3px);
}


.anko-product-card:hover
.anko-product-mini{
    transform:translateY(-3px);
}


.anko-product-card:hover
.anko-product-bottom{
    transform:translateY(-3px);
}


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

@media(max-width:991.98px){

    .anko-product-section{
        padding:
            25px
            0
            70px;
    }


    .anko-product-header{
        grid-template-columns:1fr;

        gap:15px;

        margin-bottom:27px;
    }


    .anko-product-header > p{
        max-width:650px;

        margin:0;
    }


    .anko-product-layout{
        grid-template-columns:
            repeat(2,1fr);

        grid-template-rows:auto;

        gap:15px;
    }


    .anko-product-card{
        grid-column:auto !important;
        grid-row:auto !important;

        min-height:350px;
    }

}


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

@media(max-width:767.98px){

    .anko-product-section{
        padding:
            18px
            0
            55px;
    }


    .anko-product-header{
        padding-top:28px;

        margin-bottom:22px;
    }


    .anko-product-header h2{
        font-size:42px;

        letter-spacing:-2.2px;
    }


    .anko-product-header > p{
        font-size:15px;

        line-height:1.65;
    }


    .anko-product-layout{
        grid-template-columns:1fr;

        gap:13px;
    }


    .anko-product-card{
        min-height:390px;

        border-radius:24px;
    }


    .anko-product-content{
        padding:
            27px
            24px
            24px;
    }


    .anko-product-content h3{
        font-size:34px;

        letter-spacing:-1.5px;
    }


    .anko-product-bottom{
        gap:15px;
    }


    .anko-product-bottom p{
        max-width:270px;
    }


    .anko-product-arrow{
        width:47px;
        height:47px;

        flex-basis:47px;
    }


    .anko-product-no{
        top:20px;
        right:22px;
    }

}


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

@media(max-width:420px){

    .anko-product-header h2{
        font-size:37px;
    }


    .anko-product-card{
        min-height:350px;
    }


    .anko-product-bottom p{
        font-size:12px;
    }

}





/* =========================================================
   ÜRÜN GRUPLARI - SECTION
========================================================= */

.anko-product-section{
    position:relative;

    padding:70px 0 90px;

    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(61,63,121,.07),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            #f1f2f7 0%,
            #f7f7f9 100%
        );

    box-shadow:
        inset 0 18px 45px rgba(61,63,121,.025),
        inset 0 -18px 45px rgba(20,20,20,.02);

    overflow:hidden;
}

.anko-product-header{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    align-items:end;
    gap:70px;

    margin-bottom:32px;

    padding-top:0;

    border-top:0;
}


.anko-product-card{
    box-shadow:
        0 18px 45px rgba(32,33,61,.09),
        0 2px 6px rgba(20,20,20,.035);
}

.anko-product-card:hover{
    box-shadow:
        0 30px 70px rgba(32,33,61,.16),
        0 5px 15px rgba(20,20,20,.05);
}

.anko-product-section::before{
    content:"";

    position:absolute;

    top:0;
    left:50%;

    width:min(1320px, calc(100% - 30px));
    height:1px;

    transform:translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(61,63,121,.14),
            transparent
        );
}

@media(max-width:767.98px){

    .anko-product-section{
        padding:50px 0 60px;
    }

}



/* =========================================================
   REFERENCE NETWORK SECTION
========================================================= */

.anko-reference-network{
    padding: 40px 0 90px;
    background: #f5f5f5;
}


/* =========================================================
   MAIN BOX
========================================================= */

.anko-reference-box{
    position: relative;
    overflow: hidden;

    padding: 25px;

    border-radius: 42px;
    border: 1px solid rgba(20,20,20,.055);

    background:
        radial-gradient(circle at 85% 12%, rgba(61,63,121,.08), transparent 26%),
        radial-gradient(circle at 12% 88%, rgba(217,142,45,.05), transparent 28%),
        linear-gradient(145deg, #ffffff 0%, #f7f7f5 100%);

    box-shadow:
        0 34px 90px rgba(20,20,20,.08),
        inset 0 1px 0 rgba(255,255,255,1);
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.anko-reference-content{
    max-width: 470px;
}

.anko-reference-eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 16px;

    color: #d98e2d;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.anko-reference-eyebrow::before{
    content: "";
    width: 22px;
    height: 1px;
    background: #d98e2d;
}

.anko-reference-content h2{
    margin: 0;

    color: #202126;
   font-size: clamp(37px, 3.5vw, 30px);
    line-height: .95;
    font-weight: 800;
    letter-spacing: -3px;
}

.anko-reference-content h2 span{
    display: block;
    color: #3d3f79;
}

.anko-reference-content p{
    margin: 24px 0 0;

    color: #6f717a;
    font-size: 16px;
    line-height: 1.85;
}

.anko-reference-tags{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 26px;
}

.anko-reference-tags span{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;
    padding: 7px 16px;

    border-radius: 999px;
    border: 1px solid rgba(61,63,121,.12);

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

    color: #5d6070;
    font-size: 13px;
    font-weight: 600;
}


/* =========================================================
   RIGHT NETWORK AREA
========================================================= */

.anko-network-area{
    position: relative;
    width: 100%;
    max-width: 620px;
    height: 620px;
    margin-left: auto;
}


/* =========================================================
   RINGS
========================================================= */

.anko-network-rings{
    position: absolute;
    inset: 0;
}

.anko-network-rings span{
    position: absolute;
    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(61,63,121,.12);
}

.anko-network-rings span:nth-child(1){
    width: 180px;
    height: 180px;
    border-color: rgba(217,142,45,.18);
}

.anko-network-rings span:nth-child(2){
    width: 310px;
    height: 310px;
    border-color: rgba(61,63,121,.12);
}

.anko-network-rings span:nth-child(3){
    width: 460px;
    height: 460px;
    border-color: rgba(217,142,45,.14);
}


/* =========================================================
   CENTER BOX
========================================================= */

.anko-network-center{
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;

    width: 170px;
    height: 170px;

    transform: translate(-50%, -50%);

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

    text-align: center;

    border-radius: 50%;

    background:
        radial-gradient(circle at 50% 35%, #ffffff 0%, #f7f7f5 100%);

    border: 1px solid rgba(61,63,121,.10);

    box-shadow:
        0 16px 40px rgba(20,20,20,.08),
        inset 0 1px 0 rgba(255,255,255,1);
}

.anko-network-center small{
    display: block;

    margin-bottom: 6px;

    color: #d98e2d;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.anko-network-center strong{
    color: #202126;
    font-size: 56px;
    line-height: 1;
    font-weight: 800;
}

.anko-network-center p{
    margin: 6px 0 0;

    color: #747780;
    font-size: 13px;
}


/* =========================================================
   ORBIT ANIMATION
========================================================= */

.anko-network-orbit{
    position: absolute;
    inset: 0;

    animation: ankoOrbitRotate 20s linear infinite;
}

@keyframes ankoOrbitRotate{
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); }
}


/* =========================================================
   ORBIT ITEMS
========================================================= */

.anko-network-item{
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: center center;
}

.anko-network-item .anko-network-card{
    animation: ankoCardCounterRotate 20s linear infinite;
}






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

.anko-network-card{
    width: 165px;
    height: 92px;

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

    position: relative;

    padding: 16px 18px;

    border-radius: 18px;
    border: 1px solid rgba(20,20,20,.05);

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

    box-shadow:
        0 18px 40px rgba(20,20,20,.10),
        inset 0 1px 0 rgba(255,255,255,1);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.anko-network-card img{
    max-width: 100%;
    max-height: 42px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.anko-network-card span{
    position: absolute;
    right: 12px;
    bottom: 12px;

    width: 7px;
    height: 7px;
    border-radius: 50%;

    background: #42d96b;
}


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

@media(max-width: 1199.98px){

    .anko-reference-box{
        padding: 50px 40px;
    }

    .anko-network-area{
        max-width: 560px;
        height: 560px;
    }

    .anko-network-rings span:nth-child(1){
        width: 170px;
        height: 170px;
    }

    .anko-network-rings span:nth-child(2){
        width: 285px;
        height: 285px;
    }

    .anko-network-rings span:nth-child(3){
        width: 420px;
        height: 420px;
    }

    .anko-network-center{
        width: 160px;
        height: 160px;
    }

    .anko-network-item-1,
    .anko-network-item-2,
    .anko-network-item-3,
    .anko-network-item-4,
    .anko-network-item-5{
        transform-origin: center center;
    }

    .anko-network-item-1{ transform: translate(-50%, -50%) rotate(0deg) translateY(-210px); }
    .anko-network-item-2{ transform: translate(-50%, -50%) rotate(72deg) translateY(-210px); }
    .anko-network-item-3{ transform: translate(-50%, -50%) rotate(144deg) translateY(-210px); }
    .anko-network-item-4{ transform: translate(-50%, -50%) rotate(216deg) translateY(-210px); }
    .anko-network-item-5{ transform: translate(-50%, -50%) rotate(288deg) translateY(-210px); }

    .anko-network-card{
        width: 150px;
        height: 86px;
    }

}


@media(max-width: 991.98px){

    .anko-reference-network{
        padding: 25px 0 70px;
    }

    .anko-reference-box{
        padding: 42px 28px;
        border-radius: 32px;
    }

    .anko-reference-content{
        max-width: 100%;
        text-align: center;
        margin: 0 auto;
    }

    .anko-reference-tags{
        justify-content: center;
    }

    .anko-network-area{
        margin: 15px auto 0;
        max-width: 520px;
        height: 520px;
    }

}


@media(max-width: 767.98px){

    .anko-reference-network{
        padding: 20px 0 55px;
    }

    .anko-reference-box{
        padding: 35px 18px 30px;
        border-radius: 26px;
    }

    .anko-reference-content h2{
        font-size: 42px;
        letter-spacing: -2px;
    }

    .anko-reference-content p{
        font-size: 15px;
        line-height: 1.75;
    }

    .anko-network-area{
        max-width: 350px;
        height: 350px;
    }

    .anko-network-rings span:nth-child(1){
        width: 110px;
        height: 110px;
    }

    .anko-network-rings span:nth-child(2){
        width: 190px;
        height: 190px;
    }

    .anko-network-rings span:nth-child(3){
        width: 280px;
        height: 280px;
    }

    .anko-network-center{
        width: 110px;
        height: 110px;
    }

    .anko-network-center small{
        font-size: 9px;
        letter-spacing: 1px;
    }

    .anko-network-center strong{
        font-size: 34px;
    }

    .anko-network-center p{
        font-size: 10px;
    }

    .anko-network-card{
        width: 105px;
        height: 62px;
        padding: 10px 12px;
        border-radius: 14px;
    }

    .anko-network-card img{
        max-height: 25px;
    }

    .anko-network-card span{
        width: 6px;
        height: 6px;
        right: 9px;
        bottom: 9px;
    }

    .anko-network-item-1{ transform: translate(-50%, -50%) rotate(0deg) translateY(-140px); }
    .anko-network-item-2{ transform: translate(-50%, -50%) rotate(72deg) translateY(-140px); }
    .anko-network-item-3{ transform: translate(-50%, -50%) rotate(144deg) translateY(-140px); }
    .anko-network-item-4{ transform: translate(-50%, -50%) rotate(216deg) translateY(-140px); }
    .anko-network-item-5{ transform: translate(-50%, -50%) rotate(288deg) translateY(-140px); }

}


@media(max-width: 420px){

    .anko-reference-content h2{
        font-size: 36px;
    }

    .anko-reference-tags{
        gap: 8px;
    }

    .anko-reference-tags span{
        font-size: 12px;
        min-height: 34px;
        padding: 6px 12px;
    }

    .anko-network-area{
        max-width: 310px;
        height: 310px;
    }

    .anko-network-rings span:nth-child(1){
        width: 96px;
        height: 96px;
    }

    .anko-network-rings span:nth-child(2){
        width: 165px;
        height: 165px;
    }

    .anko-network-rings span:nth-child(3){
        width: 245px;
        height: 245px;
    }

    .anko-network-center{
        width: 96px;
        height: 96px;
    }

    .anko-network-center strong{
        font-size: 28px;
    }

    .anko-network-card{
        width: 96px;
        height: 58px;
    }

    .anko-network-item-1{ transform: translate(-50%, -50%) rotate(0deg) translateY(-123px); }
    .anko-network-item-2{ transform: translate(-50%, -50%) rotate(72deg) translateY(-123px); }
    .anko-network-item-3{ transform: translate(-50%, -50%) rotate(144deg) translateY(-123px); }
    .anko-network-item-4{ transform: translate(-50%, -50%) rotate(216deg) translateY(-123px); }
    .anko-network-item-5{ transform: translate(-50%, -50%) rotate(288deg) translateY(-123px); }

}


/* =========================================================
   ORBIT
========================================================= */

.anko-network-orbit{
    position:absolute;
    inset:0;

    animation:
        ankoOrbitRotate
        20s
        linear
        infinite;
}

@keyframes ankoOrbitRotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


/* =========================================================
   ORBIT ITEM
========================================================= */

.anko-network-item{
    position:absolute;

    left:50%;
    top:50%;

    /*
        Desktop yörünge mesafesi
    */
    --orbit-radius:230px;

    transform:
        translate(-50%,-50%)
        rotate(var(--item-angle))
        translateY(calc(var(--orbit-radius) * -1));

    transform-origin:center center;
}


/* =========================================================
   HER KARTIN KONUM AÇISI
   VE ONU DÜZELTEN TERS AÇI
========================================================= */

.anko-network-item-1{
    --item-angle:0deg;
    --item-counter:0deg;
}

.anko-network-item-2{
    --item-angle:72deg;
    --item-counter:-72deg;
}

.anko-network-item-3{
    --item-angle:144deg;
    --item-counter:-144deg;
}

.anko-network-item-4{
    --item-angle:216deg;
    --item-counter:-216deg;
}

.anko-network-item-5{
    --item-angle:288deg;
    --item-counter:-288deg;
}


/* =========================================================
   KART HER ZAMAN DÜZ KALIR
========================================================= */

.anko-network-card{
    width:165px;
    height:92px;

    position:relative;

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

    padding:16px 18px;

    border-radius:18px;

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

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

    box-shadow:
        0 18px 40px rgba(20,20,20,.10),
        inset 0 1px 0 rgba(255,255,255,1);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    /*
        Kritik kısım:
        hem ana orbit dönüşünü
        hem kartın konum açısını tersliyoruz.
    */

    animation:
        ankoKeepCardStraight
        20s
        linear
        infinite;
}


/* =========================================================
   DÜZ TUTMA ANİMASYONU
========================================================= */

@keyframes ankoKeepCardStraight{

    from{
        transform:
            rotate(var(--item-counter));
    }

    to{
        transform:
            rotate(
                calc(
                    var(--item-counter) - 360deg
                )
            );
    }

}


/* =========================================================
   LOGO
========================================================= */

.anko-network-card img{
    display:block;

    width:auto;
    height:auto;

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

    object-fit:contain;

    /*
        img'e ayrıca transform verme.
        Kart zaten düz tutuluyor.
    */
}


/* yeşil aktif noktası */

.anko-network-card > span{
    position:absolute;

    right:12px;
    bottom:12px;

    width:7px;
    height:7px;

    border-radius:50%;

    background:#42d96b;

    box-shadow:
        0 0 0 3px
        rgba(66,217,107,.09);
}


/* =========================================================
   LAPTOP
========================================================= */

@media(max-width:1199.98px){

    .anko-network-item{
        --orbit-radius:210px;
    }

    .anko-network-card{
        width:150px;
        height:86px;
    }

}


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

@media(max-width:767.98px){

    .anko-network-item{
        --orbit-radius:140px;
    }

    .anko-network-card{
        width:105px;
        height:62px;

        padding:10px 12px;

        border-radius:14px;
    }

    .anko-network-card img{
        max-height:27px;
    }

    .anko-network-card > span{
        right:9px;
        bottom:9px;

        width:6px;
        height:6px;
    }

}


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

@media(max-width:420px){

    .anko-network-item{
        --orbit-radius:123px;
    }

    .anko-network-card{
        width:96px;
        height:58px;
    }

    .anko-network-card img{
        max-height:24px;
    }

}



/* =========================================================
   REFERANS LOGOLARI - HER ZAMAN DÜZ TUT
   BUNU CSS DOSYASININ EN ALTINA EKLE
========================================================= */

.anko-network-orbit{
    position:absolute;
    inset:0;

    animation:
        ankoReferenceOrbit
        20s
        linear
        infinite !important;
}


/* tüm sistem dönüyor */

@keyframes ankoReferenceOrbit{

    0%{
        transform:rotate(0deg);
    }

    100%{
        transform:rotate(360deg);
    }

}


/* =========================================================
   ORBIT ITEM
========================================================= */

.anko-network-item{
    position:absolute;

    left:50%;
    top:50%;

    --orbit-radius:230px;

    transform:
        translate(-50%,-50%)
        rotate(var(--anko-angle))
        translateY(calc(var(--orbit-radius) * -1)) !important;
}


/* =========================================================
   HER LOGONUN YÖRÜNGE KONUMU
========================================================= */

.anko-network-item-1{
    --anko-angle:0deg;
    --anko-fix:0deg;
}

.anko-network-item-2{
    --anko-angle:72deg;
    --anko-fix:-72deg;
}

.anko-network-item-3{
    --anko-angle:144deg;
    --anko-fix:-144deg;
}

.anko-network-item-4{
    --anko-angle:216deg;
    --anko-fix:-216deg;
}

.anko-network-item-5{
    --anko-angle:288deg;
    --anko-fix:-288deg;
}


/* =========================================================
   KARTLARIN TAMAMI EKRANA DÜZ BAKACAK
========================================================= */

.anko-network-item .anko-network-card{
    transform-origin:center center !important;

    animation:
        ankoReferenceCardStraight
        20s
        linear
        infinite !important;
}


/*
   ÖNEMLİ:
   Yörüngenin 360 derece dönüşünü tersine çeviriyoruz.
   Aynı zamanda kartın başlangıç pozisyon açısını da siliyoruz.
*/

@keyframes ankoReferenceCardStraight{

    0%{
        transform:
            rotate(var(--anko-fix)) !important;
    }

    100%{
        transform:
            rotate(
                calc(var(--anko-fix) - 360deg)
            ) !important;
    }

}


/* =========================================================
   LOGOLAR DA AYRICA DÖNMESİN
========================================================= */

.anko-network-card img{
    transform:none !important;

    rotate:0deg !important;

    width:auto;
    height:auto;

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

    object-fit:contain;
}


/* =========================================================
   LAPTOP
========================================================= */

@media(max-width:1199.98px){

    .anko-network-item{
        --orbit-radius:210px;
    }

}


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

@media(max-width:767.98px){

    .anko-network-item{
        --orbit-radius:140px;
    }

}


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

@media(max-width:420px){

    .anko-network-item{
        --orbit-radius:123px;
    }

}


/* =========================================================
   MOR LOGO ŞERİDİ
========================================================= */

.anko-logo-strip{
    position:relative;
    overflow:hidden;

    width:100%;

    padding:25px;

    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.08), transparent 28%),
        radial-gradient(circle at 80% 80%, rgba(217,142,45,.13), transparent 22%),
        linear-gradient(135deg, #32356b 0%, #3d3f79 45%, #4a4d93 100%);
}


/* =========================================================
   İÇERİK
========================================================= */

.anko-logo-strip-inner{
    width:100%;
}


.anko-logo-strip-head{
    text-align:center;
    margin-bottom:32px;
    padding:0 20px;
}


.anko-logo-strip-head span{
    display:inline-block;
    margin-bottom:10px;

    color:rgba(255,255,255,.75);

    font-size:12px;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;
}


.anko-logo-strip-head h2{
    margin:0;

    color:#fff;

    font-size:clamp(30px,4vw,52px);
    line-height:1.05;
    font-weight:800;
    letter-spacing:-1.8px;
}


/* =========================================================
   MARQUEE
========================================================= */

.anko-logo-marquee{
    position:relative;
    overflow:hidden;
    width:100%;
}


.anko-logo-marquee::before,
.anko-logo-marquee::after{
    content:"";
    position:absolute;
    top:0;
    z-index:3;
    width:120px;
    height:100%;
    pointer-events:none;
}

.anko-logo-marquee::before{
    left:0;
    background:linear-gradient(90deg, #3a3d75 0%, rgba(58,61,117,0) 100%);
}

.anko-logo-marquee::after{
    right:0;
    background:linear-gradient(270deg, #45488b 0%, rgba(69,72,139,0) 100%);
}


/* =========================================================
   TRACK
========================================================= */

.anko-logo-track{
    display:flex;
    align-items:center;
    gap:22px;
    width:max-content;

    animation:ankoLogoMarquee 28s linear infinite;
    will-change:transform;
}


@keyframes ankoLogoMarquee{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}


/* =========================================================
   LOGO KARTI
========================================================= */

.anko-logo-item{
    flex:0 0 auto;

    width:220px;
    height:110px;

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

    padding:18px 24px;

    border-radius:24px;
    border:1px solid rgba(255,255,255,.10);

    background: white;

    box-shadow:
        0 14px 35px rgba(12,12,20,.18),
        inset 0 1px 0 rgba(255,255,255,1);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.anko-logo-item:hover{
    transform:translateY(-6px);
    box-shadow:
        0 22px 45px rgba(12,12,20,.22),
        inset 0 1px 0 rgba(255,255,255,1);
}


.anko-logo-item img{
    max-width:100%;
    max-height:77px;

    width:auto;
    height:auto;

    object-fit:contain;
    display:block;
}


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

@media(max-width:991.98px){

    .anko-logo-strip{
        padding:60px 0 65px;
    }

    .anko-logo-track{
        gap:18px;
        animation-duration:24s;
    }

    .anko-logo-item{
        width:190px;
        height:98px;
        padding:16px 20px;
        border-radius:20px;
    }

    .anko-logo-item img{
        max-height:42px;
    }

}


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

@media(max-width:767.98px){

    .anko-logo-strip{
        padding:48px 0 52px;
    }

    .anko-logo-strip-head{
        margin-bottom:24px;
    }

    .anko-logo-strip-head span{
        font-size:11px;
        letter-spacing:1.6px;
    }

    .anko-logo-strip-head h2{
        font-size:34px;
        letter-spacing:-1px;
    }

    .anko-logo-marquee::before,
    .anko-logo-marquee::after{
        width:55px;
    }

    .anko-logo-track{
        gap:14px;
        animation-duration:20s;
    }

    .anko-logo-item{
        width:150px;
        height:82px;
        padding:14px 16px;
        border-radius:18px;
    }

    .anko-logo-item img{
        max-height:32px;
    }

}

/* =========================================================
   HABERLER
========================================================= */

.anko-news-section{
    position:relative;

    overflow:hidden;

    padding:85px 0 95px;

    background:#f5f5f5;
}


/* =========================================================
   HEADER
========================================================= */

.anko-news-heading{
    max-width:760px;

    margin:0 auto 42px;

    text-align:center;
}


.anko-news-label{
    display:block;

    margin-bottom:11px;

    color:#d98e2d;

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

    letter-spacing:1.8px;
}


.anko-news-heading h2{
    margin:0;

    color:#202126;

    font-size:clamp(42px,5vw,64px);

    line-height:1;

    font-weight:800;

    letter-spacing:-3px;
}


.anko-news-heading h2 span{
    color:#3d3f79;
}


.anko-news-heading p{
    max-width:620px;

    margin:18px auto 0;

    color:#757780;

    font-size:16px;

    line-height:1.7;
}


/* =========================================================
   SLIDER
========================================================= */

.anko-news-slider{
    position:relative;

    width:100%;

    height:610px;

    overflow:hidden;
}


/* =========================================================
   STAGE
========================================================= */

.anko-news-stage{
    position:relative;

    width:100%;
    height:555px;

    perspective:1400px;
}


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

.anko-news-card{
    position:absolute;

    left:50%;
    top:0;

    width:430px;

    overflow:hidden;

    border-radius:28px;

    border:1px solid rgba(61,63,121,.07);

    background:#fff;

    box-shadow:
        0 25px 60px rgba(32,33,61,.08);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:
        translateX(-50%)
        scale(.35);

    transition:
        transform .7s cubic-bezier(.2,.75,.2,1),
        opacity .55s ease,
        filter .55s ease;

    will-change:
        transform,
        opacity;
}


/* =========================================================
   ACTIVE
========================================================= */

.anko-news-card.is-active{
    z-index:10;

    opacity:1;
    visibility:visible;

    pointer-events:auto;

    transform:
        translateX(-50%)
        scale(1);

    filter:none;
}


/* =========================================================
   PREV
========================================================= */

.anko-news-card.is-prev{
    z-index:6;

    opacity:.68;
    visibility:visible;

    transform:
        translateX(calc(-50% - 470px))
        translateY(85px)
        scale(.66);

    filter:
        saturate(.65)
        brightness(.93);
}


/* =========================================================
   NEXT
========================================================= */

.anko-news-card.is-next{
    z-index:6;

    opacity:.68;
    visibility:visible;

    transform:
        translateX(calc(-50% + 470px))
        translateY(85px)
        scale(.66);

    filter:
        saturate(.65)
        brightness(.93);
}


/* =========================================================
   FAR LEFT
========================================================= */

.anko-news-card.is-far-prev{
    z-index:3;

    opacity:.20;
    visibility:visible;

    transform:
        translateX(calc(-50% - 745px))
        translateY(140px)
        scale(.39);

    filter:
        saturate(.35)
        blur(.3px);
}


/* =========================================================
   FAR RIGHT
========================================================= */

.anko-news-card.is-far-next{
    z-index:3;

    opacity:.20;
    visibility:visible;

    transform:
        translateX(calc(-50% + 745px))
        translateY(140px)
        scale(.39);

    filter:
        saturate(.35)
        blur(.3px);
}


/* =========================================================
   IMAGE
========================================================= */

.anko-news-image{
    position:relative;

    height:265px;

    overflow:hidden;
}


.anko-news-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .7s ease;
}


.anko-news-card.is-active:hover
.anko-news-image img{
    transform:scale(1.045);
}


/* =========================================================
   DATE
========================================================= */

.anko-news-date{
    position:absolute;

    left:20px;
    top:20px;

    padding:9px 14px;

    border-radius:30px;

    background:#d98e2d;

    color:#fff;

    font-size:11px;
    font-weight:800;

    letter-spacing:.3px;

    box-shadow:
        0 8px 22px rgba(217,142,45,.25);
}


/* =========================================================
   BODY
========================================================= */

.anko-news-body{
    min-height:285px;

    padding:
        28px
        30px
        30px;
}


/* category */

.anko-news-category{
    display:block;

    margin-bottom:9px;

    color:#d98e2d;

    font-size:11px;

    font-weight:800;

    letter-spacing:1.2px;

    text-transform:uppercase;
}


/* title */

.anko-news-body h3{
    margin:0;

    color:#3d3f79;

    font-size:25px;

    line-height:1.18;

    font-weight:800;

    letter-spacing:-1px;
}


/* description */

.anko-news-body p{
    margin:15px 0 0;

    color:#777982;

    font-size:14px;

    line-height:1.7;
}


/* =========================================================
   READ BUTTON
========================================================= */

.anko-news-link{
    display:inline-flex;

    align-items:center;

    gap:11px;

    margin-top:22px;

    color:#3d3f79;

    font-size:14px;

    font-weight:750;

    transition:
        color .25s ease,
        gap .25s ease;
}


.anko-news-link svg{
    width:18px;
    height:18px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.7;

    stroke-linecap:round;

    stroke-linejoin:round;
}


.anko-news-link:hover{
    color:#d98e2d;

    gap:16px;
}


/* =========================================================
   ARROWS
========================================================= */

.anko-news-arrow{
    position:absolute;

    z-index:20;

    top:245px;

    width:48px;
    height:48px;

    padding:0;

    display:flex;

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

    border-radius:50%;

    border:1px solid rgba(61,63,121,.10);

    background:#fff;

    color:#3d3f79;

    box-shadow:
        0 15px 35px rgba(32,33,61,.09);

    cursor:pointer;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}


.anko-news-arrow:hover{
    background:#3d3f79;

    color:#fff;

    transform:scale(1.07);
}


.anko-news-arrow svg{
    width:20px;
    height:20px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.8;

    stroke-linecap:round;

    stroke-linejoin:round;
}


.anko-news-prev{
    left:
        calc(
            50% - 280px
        );
}


.anko-news-next{
    right:
        calc(
            50% - 280px
        );
}


/* =========================================================
   DOTS
========================================================= */

.anko-news-dots{
    position:absolute;

    left:50%;
    bottom:8px;

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;
}


.anko-news-dot{
    width:8px;
    height:8px;

    padding:0;

    border:0;

    border-radius:50%;

    background:
        rgba(61,63,121,.25);

    cursor:pointer;

    transition:
        width .3s ease,
        background .3s ease;
}


.anko-news-dot.is-active{
    width:27px;

    border-radius:20px;

    background:#d98e2d;
}


/* =========================================================
   LAPTOP
========================================================= */

@media(max-width:1199.98px){

    .anko-news-card.is-prev{
        transform:
            translateX(calc(-50% - 390px))
            translateY(90px)
            scale(.60);
    }


    .anko-news-card.is-next{
        transform:
            translateX(calc(-50% + 390px))
            translateY(90px)
            scale(.60);
    }


    .anko-news-card.is-far-prev{
        opacity:0;
    }


    .anko-news-card.is-far-next{
        opacity:0;
    }

}


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

@media(max-width:991.98px){

    .anko-news-section{
        padding:
            70px
            0
            75px;
    }


    .anko-news-slider{
        height:590px;
    }


    .anko-news-card{
        width:400px;
    }


    .anko-news-card.is-prev{
        opacity:.28;

        transform:
            translateX(calc(-50% - 310px))
            translateY(105px)
            scale(.50);
    }


    .anko-news-card.is-next{
        opacity:.28;

        transform:
            translateX(calc(-50% + 310px))
            translateY(105px)
            scale(.50);
    }

}


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

@media(max-width:767.98px){

    .anko-news-section{
        padding:
            55px
            0
            60px;
    }


    .anko-news-heading{
        margin-bottom:30px;

        padding:
            0
            15px;
    }


    .anko-news-heading h2{
        font-size:42px;

        letter-spacing:-2px;
    }


    .anko-news-heading p{
        font-size:15px;
    }


    .anko-news-slider{
        height:575px;
    }


    .anko-news-stage{
        height:525px;
    }


    .anko-news-card{
        width:
            calc(
                100% - 42px
            );

        max-width:390px;

        border-radius:23px;
    }


    .anko-news-card.is-prev{
        transform:
            translateX(calc(-50% - 88%))
            translateY(75px)
            scale(.62);

        opacity:.17;
    }


    .anko-news-card.is-next{
        transform:
            translateX(calc(-50% + 88%))
            translateY(75px)
            scale(.62);

        opacity:.17;
    }


    .anko-news-image{
        height:225px;
    }


    .anko-news-body{
        min-height:275px;

        padding:
            24px
            23px;
    }


    .anko-news-body h3{
        font-size:22px;
    }


    .anko-news-arrow{
        top:230px;

        width:42px;
        height:42px;
    }


    .anko-news-prev{
        left:12px;
    }


    .anko-news-next{
        right:12px;
    }

}


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

@media(max-width:420px){

    .anko-news-heading h2{
        font-size:37px;
    }


    .anko-news-image{
        height:205px;
    }


    .anko-news-body h3{
        font-size:21px;
    }


    .anko-news-body p{
        font-size:13px;
    }

}


/* =========================================================
   FOOTER
========================================================= */

.anko-footer{
    position:relative;

    overflow:hidden;

    padding:70px 0 25px;

    background:
        radial-gradient(
            circle at 10% 5%,
            rgba(255,255,255,.06),
            transparent 25%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(217,142,45,.12),
            transparent 25%
        ),
        linear-gradient(
            145deg,
            #30325f 0%,
            #3d3f79 55%,
            #34366a 100%
        );

    color:#fff;
}


/* =========================================================
   TOP
========================================================= */

.anko-footer-top{
    position:relative;
    z-index:2;

    padding-bottom:50px;

    margin-bottom:52px;

    border-bottom:
        1px solid
        rgba(255,255,255,.10);
}


.anko-footer-eyebrow{
    display:block;

    margin-bottom:10px;

    color:#e7a54c;

    font-size:12px;

    font-weight:800;

    letter-spacing:2px;
}


.anko-footer-top-content h2{
    max-width:650px;

    margin:0;

    color:#fff;

    font-size:
        clamp(
            35px,
            4vw,
            55px
        );

    line-height:1;

    font-weight:800;

    letter-spacing:-2.4px;
}


.anko-footer-top-content h2 span{
    color:#e3a04a;
}


/* =========================================================
   CONTACT CARDS
========================================================= */

.anko-footer-contact-cards{
    display:grid;

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

    gap:12px;
}


.anko-footer-contact-card{
    min-height:85px;

    padding:17px;

    display:flex;

    align-items:center;

    gap:13px;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius:19px;

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

    color:#fff;

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

    transition:
        background .3s ease,
        transform .3s ease,
        border-color .3s ease;
}


a.anko-footer-contact-card:hover{
    color:#fff;

    transform:
        translateY(-3px);

    border-color:
        rgba(255,255,255,.22);

    background:
        rgba(255,255,255,.11);
}


.anko-footer-contact-icon{
    width:43px;
    height:43px;

    flex:0 0 43px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    background:
        #d98e2d;

    color:#fff;
}


.anko-footer-contact-icon svg{
    width:21px;
    height:21px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.7;

    stroke-linecap:round;

    stroke-linejoin:round;
}


.anko-footer-contact-card small{
    display:block;

    margin-bottom:4px;

    color:
        rgba(255,255,255,.55);

    font-size:10px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;
}


.anko-footer-contact-card strong{
    display:block;

    color:#fff;

    font-size:14px;

    line-height:1.35;

    font-weight:650;
}


/* =========================================================
   FOOTER MAIN
========================================================= */

.anko-footer-main{
    position:relative;

    z-index:2;

    padding-bottom:50px;
}


/* =========================================================
   BRAND
========================================================= */

.anko-footer-logo{
    min-width:120px;
    height:46px;

    padding:0 20px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-bottom:23px;

    border:
        1px solid
        rgba(255,255,255,.28);

    border-radius:25px;

    color:#fff;

    font-size:17px;

    font-weight:800;

    letter-spacing:3px;
}


.anko-footer-logo:hover{
    color:#fff;

    background:
        rgba(255,255,255,.07);
}


.anko-footer-brand > p{
    max-width:280px;

    margin:0;

    color:
        rgba(255,255,255,.64);

    font-size:14px;

    line-height:1.75;
}


/* address */

.anko-footer-address{
    margin-top:25px;

    padding-top:22px;

    border-top:
        1px solid
        rgba(255,255,255,.09);
}


.anko-footer-address > span{
    display:block;

    margin-bottom:7px;

    color:#d98e2d;

    font-size:11px;

    font-weight:800;

    letter-spacing:1.5px;

    text-transform:uppercase;
}


.anko-footer-address p{
    margin:0;

    color:
        rgba(255,255,255,.65);

    font-size:13px;

    line-height:1.7;
}


/* =========================================================
   MENU
========================================================= */

.anko-footer-menu h3{
    position:relative;

    margin:
        5px
        0
        22px;

    padding-bottom:13px;

    color:#fff;

    font-size:14px;

    line-height:1.35;

    font-weight:750;

    letter-spacing:.3px;

    text-transform:uppercase;
}


.anko-footer-menu h3::after{
    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:27px;
    height:2px;

    border-radius:5px;

    background:#d98e2d;
}


.anko-footer-menu ul{
    margin:0;

    padding:0;

    list-style:none;
}


.anko-footer-menu li{
    margin-bottom:11px;
}


.anko-footer-menu li:last-child{
    margin-bottom:0;
}


.anko-footer-menu li a{
    position:relative;

    display:inline-block;

    padding-left:0;

    color:
        rgba(255,255,255,.63);

    font-size:13px;

    line-height:1.5;

    transition:
        color .25s ease,
        padding-left .25s ease;
}


.anko-footer-menu li a::before{
    content:"";

    position:absolute;

    left:0;
    top:9px;

    width:0;
    height:1px;

    background:
        #d98e2d;

    transition:
        width .25s ease;
}


.anko-footer-menu li a:hover{
    padding-left:16px;

    color:#fff;
}


.anko-footer-menu li a:hover::before{
    width:9px;
}


.anko-footer-menu-title-second{
    margin-top:35px !important;
}


/* =========================================================
   QUICK MENU
========================================================= */

.anko-footer-quick{
    position:relative;

    z-index:2;

    padding:
        24px
        0;

    border-top:
        1px solid
        rgba(255,255,255,.09);

    border-bottom:
        1px solid
        rgba(255,255,255,.09);
}


.anko-footer-quick nav{
    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:10px 35px;
}


.anko-footer-quick a{
    color:
        rgba(255,255,255,.68);

    font-size:13px;

    font-weight:600;

    transition:
        color .25s ease;
}


.anko-footer-quick a:hover{
    color:
        #d98e2d;
}


/* =========================================================
   BOTTOM
========================================================= */

.anko-footer-bottom{
    position:relative;

    z-index:2;

    min-height:70px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;
}


.anko-footer-bottom p{
    margin:0;

    color:
        rgba(255,255,255,.45);

    font-size:12px;

    line-height:1.5;
}


.anko-footer-bottom-links{
    display:flex;

    align-items:center;

    gap:20px;
}


.anko-footer-bottom-links a{
    color:
        rgba(255,255,255,.45);

    font-size:12px;

    transition:.25s ease;
}


.anko-footer-bottom-links a:hover{
    color:#fff;
}


/* =========================================================
   DECORATIVE GLOW
========================================================= */

.anko-footer-glow{
    position:absolute;

    pointer-events:none;

    border-radius:50%;

    filter:blur(40px);
}


.anko-footer-glow-1{
    width:350px;
    height:350px;

    top:-180px;
    right:-100px;

    background:
        rgba(217,142,45,.08);
}


.anko-footer-glow-2{
    width:300px;
    height:300px;

    left:-150px;
    bottom:-180px;

    background:
        rgba(255,255,255,.035);
}


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

@media(max-width:1199.98px){

    .anko-footer{
        padding-top:60px;
    }


    .anko-footer-contact-cards{
        grid-template-columns:1fr;
    }


    .anko-footer-brand > p{
        max-width:340px;
    }

}


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

@media(max-width:991.98px){

    .anko-footer-top{
        padding-bottom:40px;

        margin-bottom:42px;
    }


    .anko-footer-contact-cards{
        grid-template-columns:
            repeat(2,1fr);
    }


    .anko-footer-menu{
        margin-top:5px;
    }

}


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

@media(max-width:767.98px){

    .anko-footer{
        padding:
            50px
            0
            18px;
    }


    .anko-footer-top{
        margin-bottom:38px;
    }


    .anko-footer-top-content h2{
        font-size:38px;

        letter-spacing:-1.8px;
    }


    .anko-footer-contact-cards{
        grid-template-columns:1fr;
    }


    .anko-footer-main{
        padding-bottom:35px;
    }


    .anko-footer-quick{
        padding:22px 0;
    }


    .anko-footer-quick nav{
        justify-content:flex-start;

        gap:
            12px
            25px;
    }


    .anko-footer-bottom{
        padding:
            22px
            0;

        flex-direction:column;

        align-items:flex-start;

        justify-content:center;
    }

}


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

@media(max-width:575.98px){

    .anko-footer-top-content h2{
        font-size:34px;
    }


    .anko-footer-contact-card{
        min-height:78px;
    }


    .anko-footer-bottom-links{
        flex-wrap:wrap;

        gap:
            8px
            18px;
    }

}

.anko-footer-menu-continuation{
    padding-top:44px;
}

@media(max-width:767.98px){

    .anko-footer-menu-continuation{
        padding-top:0;
    }

}




/* =========================================================
   KURUMSAL / İÇ SAYFA HERO
========================================================= */

.anko-page-hero{
    position:relative;
    overflow:hidden;

    /*
        Header absolute olduğu için üst boşluk bırakıyoruz.
        Böylece breadcrumb header'ın altında kalıyor.
    */
    padding:145px 0 0;

    color:var(--anko-white);

        background: radial-gradient(circle at 10% 5%, rgba(255, 255, 255, .06), transparent 25%), radial-gradient(circle at 90% 80%, rgba(217, 142, 45, .12), transparent 25%), linear-gradient(145deg, #30325f 0%, #3d3f79 55%, #34366a 100%);
}


/* hafif dekoratif ışık */

.anko-page-hero::before{
    content:"";

    position:absolute;
    top:-150px;
    right:-100px;

    width:500px;
    height:500px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(217,142,45,.12),
            rgba(217,142,45,0) 68%
        );

    pointer-events:none;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.anko-breadcrumb{
    position:relative;
    z-index:2;

    display:flex;
    align-items:center;
    gap:11px;

    padding:18px 0 22px;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

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


.anko-breadcrumb a{
    color:rgba(255,255,255,.55);

    transition:.25s ease;
}


.anko-breadcrumb a:hover{
    color:var(--anko-orange);
}


.anko-breadcrumb-arrow{
    color:rgba(255,255,255,.25);

    font-size:18px;
    font-weight:300;
}


.anko-breadcrumb > span:last-child{
    color:#fff;
}



/* =========================================================
   HERO CONTENT
========================================================= */

.anko-page-hero-content{
    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(0,.95fr);

    align-items:end;

    gap:80px;

    min-height:225px;

    padding:
        55px
        0
        42px;
}


/* SOL */

.anko-page-hero-left{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}


.anko-page-eyebrow{
    display:inline-flex;
    align-items:center;

    gap:12px;

    margin-bottom:16px;

    color:var(--anko-orange);

    font-size:11px;
    font-weight:800;

    letter-spacing:2.4px;

    text-transform:uppercase;
}


.anko-page-eyebrow::before{
    content:"";

    width:30px;
    height:2px;

    border-radius:10px;

    background:var(--anko-orange);
}


.anko-page-hero h1{
    margin:0;

    color:#fff;

   font-size: clamp(34px, 4.5vw, 38px)

    line-height:1;

    font-weight:800;

    letter-spacing:-3px;
}


/* SAĞ */

.anko-page-hero-right{
    max-width:530px;

    justify-self:end;

    padding-bottom:6px;
}


.anko-page-hero-right p{
    margin:0;

    color:rgba(255,255,255,.72);

    font-size:16px;

    font-weight:400;

    line-height:1.8;
}


/* sağ alt vurgu */

.anko-page-hero-line{
    position:absolute;

    right:max(
        calc((100% - 1320px) / 2),
        15px
    );

    bottom:0;

    width:160px;
    height:3px;

    border-radius:
        4px
        4px
        0
        0;

    background:var(--anko-orange);
}



/* =========================================================
   KURUMSAL İÇERİK
========================================================= */

.anko-corporate-about{
    position:relative;

    padding:
        100px
        0
        90px;

    background:var(--anko-bg);

    color:var(--anko-heading);
}


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

.anko-corporate-heading{
    max-width:520px;
}


.anko-corporate-label{
    display:inline-flex;
    align-items:center;

    gap:12px;

    margin-bottom:22px;

    color:var(--anko-orange);

    font-size:11px;
    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;
}


.anko-corporate-label::before{
    content:"";

    width:30px;
    height:2px;

    border-radius:5px;

    background:var(--anko-orange);
}


.anko-corporate-heading h2{
    margin:0;

    color:var(--anko-heading);

    font-size:
        clamp(
            42px,
            4.4vw,
            64px
        );

    line-height:1;

    font-weight:800;

    letter-spacing:-3px;
}


.anko-corporate-heading h2 span{
    display:block;

    margin-top:5px;

    color:var(--anko-primary);
}



/* =========================================================
   SAĞ METİN
========================================================= */

.anko-corporate-text{
    max-width:690px;

    margin-left:auto;

    padding-top:30px;
}


.anko-corporate-text p{
    margin:
        0
        0
        24px;

    color:var(--anko-text);

    font-size:16px;

    line-height:1.9;
}


.anko-corporate-text strong{
    color:var(--anko-primary);

    font-weight:750;
}



/* =========================================================
   ÖZELLİKLER
========================================================= */

.anko-corporate-features{
    padding:
        0
        0
        100px;

    background:var(--anko-bg);
}


.anko-corporate-feature-grid{
    display:grid;

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

    overflow:hidden;

    border:
        1px solid
        var(--anko-border);

    border-radius:28px;

    background:#fff;

    box-shadow:
        0 22px 60px
        rgba(32,33,61,.06);
}


.anko-corporate-feature{
    position:relative;

    min-height:295px;

    padding:
        38px
        38px
        42px;

    border-right:
        1px solid
        var(--anko-border);

    transition:
        transform .3s ease,
        background .3s ease;
}


.anko-corporate-feature:last-child{
    border-right:0;
}


.anko-corporate-feature::before{
    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:3px;

    background:transparent;

    transition:.3s ease;
}


.anko-corporate-feature:hover{
    background:
        linear-gradient(
            180deg,
            var(--anko-primary-soft),
            #fff
        );
}


.anko-corporate-feature:hover::before{
    background:var(--anko-orange);
}



/* NUMARA */

.anko-feature-number{
    display:block;

    margin-bottom:55px;

    color:var(--anko-orange);

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

    letter-spacing:1.5px;
}



/* BAŞLIK */

.anko-corporate-feature h3{
    margin:
        0
        0
        14px;

    color:var(--anko-primary);

    font-size:24px;

    line-height:1.15;

    font-weight:800;

    letter-spacing:-.8px;
}


/* METİN */

.anko-corporate-feature p{
    margin:0;

    color:var(--anko-text);

    font-size:14px;

    line-height:1.8;
}



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

@media(max-width:991.98px){

    .anko-page-hero{
        padding-top:120px;
    }


    .anko-page-hero-content{
        grid-template-columns:1fr;

        gap:25px;

        min-height:0;

        padding:
            45px
            0
            50px;
    }


    .anko-page-hero-right{
        max-width:650px;

        justify-self:start;

        padding-bottom:0;
    }


    .anko-corporate-about{
        padding:
            75px
            0
            65px;
    }


    .anko-corporate-text{
        max-width:100%;

        margin-left:0;

        padding-top:0;
    }


    .anko-corporate-feature-grid{
        grid-template-columns:1fr;

        border-radius:24px;
    }


    .anko-corporate-feature{
        min-height:0;

        border-right:0;

        border-bottom:
            1px solid
            var(--anko-border);
    }


    .anko-corporate-feature:last-child{
        border-bottom:0;
    }


    .anko-feature-number{
        margin-bottom:30px;
    }

}



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

@media(max-width:767.98px){

    .anko-page-hero{
        padding-top:100px;
    }


    .anko-breadcrumb{
        padding:
            15px
            0
            18px;
    }


    .anko-page-hero-content{
        padding:
            35px
            0
            42px;
    }


    .anko-page-hero h1{
        font-size:42px;

        letter-spacing:-2px;
    }


    .anko-page-hero-right p{
        font-size:14px;

        line-height:1.7;
    }


    .anko-page-hero-line{
        right:15px;

        width:90px;
    }


    .anko-corporate-about{
        padding:
            60px
            0
            50px;
    }


    .anko-corporate-heading h2{
        font-size:39px;

        letter-spacing:-2px;
    }


    .anko-corporate-text p{
        font-size:15px;

        line-height:1.8;
    }


    .anko-corporate-features{
        padding-bottom:65px;
    }


    .anko-corporate-feature{
        padding:
            30px
            25px
            34px;
    }


    .anko-feature-number{
        margin-bottom:24px;
    }

}


/* =========================================================
   CATEGORY PRODUCTS
========================================================= */

.anko-category-products{
    padding:75px 0 100px;

    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(61,63,121,.055),
            transparent 28%
        ),
        #f5f5f5;
}


.anko-category-layout{
    display:grid;

    grid-template-columns:
        280px
        minmax(0,1fr);

    gap:45px;

    align-items:start;
}



/* =========================================================
   SIDEBAR
========================================================= */

.anko-category-sidebar{
    position:relative;
}


.anko-category-sidebar-inner{
    position:relative;
    top:auto;

    overflow:hidden;

    border-radius:26px;

    border:
        1px solid
        rgba(61,63,121,.10);

    background:#fff;

    box-shadow:
        0 18px 55px
        rgba(32,33,61,.07);
        
            will-change:transform;

    transition:transform .08s linear;
}


.anko-category-sidebar-inner{
    transition:transform .18s ease-out;
}



/* HEADER */

.anko-category-sidebar-head{
    padding:
        30px
        27px
        26px;

    background:
        linear-gradient(
            135deg,
            var(--anko-primary-dark),
            var(--anko-primary)
        );

    color:#fff;
}


.anko-category-sidebar-head span{
    display:block;

    margin-bottom:7px;

    color:
        rgba(255,255,255,.55);

    font-size:10px;
    font-weight:700;

    letter-spacing:2px;
}


.anko-category-sidebar-head h2{
    margin:0;

    color:#fff;

    font-size:27px;
    font-weight:800;

    letter-spacing:-1px;
}



/* =========================================================
   CATEGORY MENU
========================================================= */

.anko-category-menu{
    padding:15px 15px 18px;
}


.anko-category-group{
    border-bottom:
        1px solid
        rgba(61,63,121,.08);
}


.anko-category-group:last-child{
    border-bottom:0;
}



/* MAIN CATEGORY */

.anko-category-main{
    display:flex;

    align-items:center;

    gap:11px;

    min-height:56px;

    padding:
        12px
        10px;

    color:var(--anko-heading);

    font-size:14px;
    font-weight:700;

    cursor:pointer;

    transition:.25s ease;
}


.anko-category-main:hover{
    color:var(--anko-primary);
}


.anko-category-main.is-active{
    color:var(--anko-primary);
}



/* DOT */

.anko-category-icon{
    width:8px;
    height:8px;

    flex:0 0 8px;

    border-radius:2px;

    background:var(--anko-orange);

    transform:rotate(45deg);
}



/* ARROW */

.anko-category-main svg{
    width:16px;
    height:16px;

    margin-left:auto;

    fill:none;

    stroke:currentColor;

    stroke-width:1.8;

    transition:.25s ease;
}


.anko-category-group.is-open
.anko-category-main svg{
    transform:rotate(180deg);
}



/* =========================================================
   SUB CATEGORY
========================================================= */

.anko-category-submenu{
    padding:
        0
        10px
        13px
        29px;
}


.anko-category-submenu a{
    position:relative;

    display:block;

    padding:
        9px
        12px;

    border-radius:9px;

    color:var(--anko-text);

    font-size:13px;
    font-weight:500;

    transition:.25s ease;
}


.anko-category-submenu a::before{
    content:"";

    position:absolute;

    left:0;
    top:50%;

    width:4px;
    height:4px;

    transform:
        translateY(-50%);

    border-radius:50%;

    background:
        rgba(61,63,121,.30);
}


.anko-category-submenu a:hover{
    padding-left:16px;

    color:var(--anko-primary);
}


.anko-category-submenu a.active{
    padding-left:16px;

    background:var(--anko-primary-soft);

    color:var(--anko-primary);

    font-weight:700;
}


.anko-category-submenu a.active::before{
    background:var(--anko-orange);
    margin-left: 5px;
}



/* =========================================================
   RIGHT CONTENT
========================================================= */

.anko-category-content{
    min-width:0;
}



/* HEADER */

.anko-category-content-head{
    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:30px;

    margin-bottom:30px;

    padding-bottom:25px;

    border-bottom:
        1px solid
        rgba(61,63,121,.12);
}


.anko-category-small-title{
    display:block;

    margin-bottom:7px;

    color:var(--anko-orange);

    font-size:11px;
    font-weight:800;

    letter-spacing:1.8px;
}


.anko-category-content-head h2{
    margin:0;

    color:var(--anko-heading);

    font-size:
        clamp(
            36px,
            4vw,
            52px
        );

    line-height:1;

    font-weight:800;

    letter-spacing:-2.5px;
}



/* COUNT */

.anko-product-count{
    display:flex;

    align-items:center;

    gap:8px;

    flex-shrink:0;

    padding:
        9px
        16px;

    border-radius:999px;

    border:
        1px solid
        var(--anko-border);

    background:#fff;

    color:var(--anko-text);

    font-size:12px;
}


.anko-product-count strong{
    color:var(--anko-primary);

    font-size:17px;
    font-weight:800;
}



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

.anko-category-product-grid{
    display:grid;

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

    gap:20px;
}



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

.anko-category-product-card{
    position:relative;

    overflow:hidden;

    border:
        1px solid
        rgba(61,63,121,.09);

    border-radius:24px;

    background:#fff;

    box-shadow:
        0 15px 40px
        rgba(32,33,61,.055);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.anko-category-product-card:hover{
    transform:
        translateY(-6px);

    box-shadow:
        0 28px 65px
        rgba(32,33,61,.12);
}



/* =========================================================
   PRODUCT IMAGE
========================================================= */

.anko-category-product-image{
    position:relative;

    overflow:hidden;

    aspect-ratio:1 / .82;

    margin:10px;

    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            #f8f8fa,
            #f1f2f6
        );
}


.anko-category-product-image img{
    width:100%;
    height:100%;

    padding:25px;

    object-fit:contain;

    transition:
        transform .5s ease;
}


.anko-category-product-card:hover
.anko-category-product-image img{
    transform:scale(1.045);
}



/* NUMBER */

.anko-product-card-number{
    position:absolute;

    top:14px;
    right:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    width:34px;
    height:34px;

    border-radius:50%;

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

    box-shadow:
        0 5px 15px
        rgba(20,20,20,.05);

    color:var(--anko-primary);

    font-size:10px;
    font-weight:800;
}



/* =========================================================
   PRODUCT BODY
========================================================= */

.anko-category-product-body{
    padding:
        13px
        22px
        22px;
}


.anko-category-product-type{
    display:block;

    margin-bottom:8px;

    color:var(--anko-orange);

    font-size:10px;
    font-weight:800;

    letter-spacing:1.2px;

    text-transform:uppercase;
}


.anko-category-product-body h3{
    margin:0;

    color:var(--anko-primary);

    font-size:21px;
    font-weight:800;

    letter-spacing:-.7px;
}


.anko-category-product-body p{
    min-height:42px;

    margin:
        8px
        0
        20px;

    color:var(--anko-text);

    font-size:13px;

    line-height:1.6;
}



/* =========================================================
   BUTTON
========================================================= */

.anko-category-product-button{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    min-height:48px;

    padding:
        8px
        8px
        8px
        17px;

    border-radius:14px;

    background:var(--anko-primary-soft);

    color:var(--anko-primary);

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

    transition:.3s ease;
}


.anko-category-product-button svg{
    width:34px;
    height:34px;

    padding:8px;

    border-radius:50%;

    background:#fff;

    fill:none;

    stroke:currentColor;

    stroke-width:1.7;

    stroke-linecap:round;

    stroke-linejoin:round;

    transition:.3s ease;
}


.anko-category-product-button:hover{
    background:var(--anko-primary);

    color:#fff;
}


.anko-category-product-button:hover svg{
    color:var(--anko-primary);

    transform:rotate(45deg);
}



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

@media(max-width:1199.98px){

    .anko-category-layout{
        grid-template-columns:
            250px
            minmax(0,1fr);

        gap:30px;
    }


    .anko-category-product-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}



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

@media(max-width:991.98px){

    .anko-category-products{
        padding:
            55px
            0
            75px;
    }


    .anko-category-layout{
        grid-template-columns:1fr;
    }


    .anko-category-sidebar-inner{
        position:relative;

        top:auto;
    }


    .anko-category-menu{
        display:grid;

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

        gap:0 15px;
    }


    .anko-category-group:first-child{
        grid-column:1 / -1;
    }

}



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

@media(max-width:767.98px){

    .anko-category-products{
        padding:
            45px
            0
            60px;
    }


    .anko-category-menu{
        display:block;
    }


    .anko-category-content-head{
        align-items:flex-start;

        flex-direction:column;

        gap:16px;
    }


    .anko-category-content-head h2{
        font-size:38px;

        letter-spacing:-2px;
    }


    .anko-category-product-grid{
        grid-template-columns:1fr;
    }


    .anko-category-product-image{
        aspect-ratio:1 / .75;
    }

}



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

@media(max-width:420px){

    .anko-category-sidebar-head{
        padding:
            25px
            22px;
    }


    .anko-category-product-body{
        padding:
            12px
            18px
            20px;
    }

}


/* =========================================================
   KOMPOZİT SAYFASI
========================================================= */

.anko-composite-section{
    position:relative;

    padding:
        90px
        0
        110px;

    background:
        radial-gradient(
            circle at 92% 10%,
            rgba(61,63,121,.055),
            transparent 27%
        ),
        var(--anko-bg);
}


.anko-composite-layout{
    display:grid;

    grid-template-columns:
        330px
        minmax(0,1fr);

    gap:80px;

    align-items:start;
}



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

.anko-composite-heading{
    position:sticky;

    top:35px;
}


.anko-composite-label{
    display:inline-flex;
    align-items:center;

    gap:12px;

    margin-bottom:18px;

    color:var(--anko-orange);

    font-size:11px;
    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;
}


.anko-composite-label::before{
    content:"";

    width:30px;
    height:2px;

    border-radius:5px;

    background:var(--anko-orange);
}


.anko-composite-heading h2{
    margin:0;

    color:var(--anko-heading);

    font-size:
        clamp(
            40px,
            4vw,
            58px
        );

    line-height:1;

    font-weight:800;

    letter-spacing:-3px;
}


.anko-composite-heading h2 span{
    display:block;

    margin-top:5px;

    color:var(--anko-primary);
}



/* =========================================================
   CONTENT
========================================================= */

.anko-composite-content{
    max-width:900px;
}


.anko-composite-content > p{
    margin:
        0
        0
        24px;

    color:var(--anko-text);

    font-size:16px;

    line-height:1.9;
}


.anko-composite-content > p strong{
    color:var(--anko-primary);

    font-weight:750;
}



/* LEAD */

.anko-composite-lead{
    position:relative;

    padding-left:27px;

    font-size:18px !important;

    color:var(--anko-heading) !important;
}


.anko-composite-lead::before{
    content:"";

    position:absolute;

    left:0;
    top:7px;

    width:3px;
    height:calc(100% - 14px);

    border-radius:5px;

    background:var(--anko-orange);
}



/* =========================================================
   CTP HIGHLIGHT
========================================================= */

.anko-composite-highlight{
    display:grid;

    grid-template-columns:
        120px
        minmax(0,1fr);

    gap:30px;

    align-items:center;

    margin:
        38px
        0;

    padding:
        30px
        35px;

    border:
        1px solid
        var(--anko-border);

    border-radius:24px;

    background:#fff;

    box-shadow:
        0 18px 50px
        rgba(32,33,61,.06);
}


.anko-composite-highlight-number{
    display:flex;

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

    width:105px;
    height:105px;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            var(--anko-primary-dark),
            var(--anko-primary)
        );

    color:#fff;

    font-size:26px;
    font-weight:800;

    letter-spacing:1px;

    box-shadow:
        0 15px 35px
        rgba(61,63,121,.20);
}


.anko-composite-highlight h3{
    margin:
        0
        0
        10px;

    color:var(--anko-primary);

    font-size:24px;

    font-weight:800;

    letter-spacing:-1px;
}


.anko-composite-highlight p{
    margin:0;

    color:var(--anko-text);

    font-size:15px;

    line-height:1.8;
}



/* =========================================================
   TABLE AREA
========================================================= */

.anko-composite-table-wrap{
    margin-top:45px;

    overflow:hidden;

    border:
        1px solid
        var(--anko-border);

    border-radius:26px;

    background:#fff;

    box-shadow:
        0 20px 55px
        rgba(32,33,61,.065);
}



/* TABLE HEADER */

.anko-composite-table-heading{
    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:30px;

    padding:
        30px
        32px
        25px;

    border-bottom:
        1px solid
        var(--anko-border);
}


.anko-composite-table-heading span{
    display:block;

    margin-bottom:7px;

    color:var(--anko-orange);

    font-size:10px;

    font-weight:800;

    letter-spacing:1.7px;
}


.anko-composite-table-heading h3{
    margin:0;

    color:var(--anko-primary);

    font-size:27px;

    font-weight:800;

    letter-spacing:-1px;
}


.anko-composite-table-heading p{
    max-width:330px;

    margin:0;

    color:var(--anko-text);

    font-size:13px;

    line-height:1.6;
}



/* =========================================================
   TABLE
========================================================= */

.anko-composite-table{
    width:100%;

    border-collapse:collapse;
}


.anko-composite-table th{
    padding:
        16px
        25px;

    background:
        var(--anko-primary-soft);

    color:var(--anko-primary);

    font-size:11px;
    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;
}


.anko-composite-table td{
    padding:
        18px
        25px;

    border-bottom:
        1px solid
        rgba(61,63,121,.08);

    color:var(--anko-text);

    font-size:14px;
}


.anko-composite-table tbody tr:last-child td{
    border-bottom:0;
}


.anko-composite-table tbody tr{
    transition:
        background .25s ease;
}


.anko-composite-table tbody tr:hover{
    background:
        rgba(61,63,121,.025);
}


.anko-composite-table td:first-child{
    color:var(--anko-heading);

    font-weight:700;
}


.anko-composite-table td span{
    display:inline-flex;

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

    min-width:58px;
    min-height:32px;

    padding:
        4px
        12px;

    border-radius:999px;

    background:
        var(--anko-accent-soft);

    color:
        var(--anko-orange);

    font-size:12px;

    font-weight:800;
}



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

@media(max-width:991.98px){

    .anko-composite-section{
        padding:
            70px
            0
            80px;
    }


    .anko-composite-layout{
        grid-template-columns:1fr;

        gap:40px;
    }


    .anko-composite-heading{
        position:relative;

        top:auto;

        max-width:600px;
    }

}



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

@media(max-width:767.98px){

    .anko-composite-section{
        padding:
            55px
            0
            65px;
    }


    .anko-composite-heading h2{
        font-size:40px;

        letter-spacing:-2px;
    }


    .anko-composite-content > p{
        font-size:15px;

        line-height:1.8;
    }


    .anko-composite-lead{
        padding-left:20px;

        font-size:16px !important;
    }


    .anko-composite-highlight{
        grid-template-columns:1fr;

        gap:20px;

        padding:
            25px
            22px;
    }


    .anko-composite-highlight-number{
        width:80px;
        height:80px;

        font-size:21px;
    }


    .anko-composite-table-heading{
        align-items:flex-start;

        flex-direction:column;

        gap:12px;

        padding:
            24px
            20px;
    }


    .anko-composite-table-heading p{
        max-width:100%;
    }


    .anko-composite-table{
        min-width:650px;
    }


    .anko-composite-table th,
    .anko-composite-table td{
        padding:
            15px
            18px;
    }

}



/* =========================================================
   VIDEOLAR
========================================================= */

.anko-videos-section{
    padding:80px 0 110px;

    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(61,63,121,.055),
            transparent 28%
        ),
        var(--anko-bg);
}


/* =========================================================
   HEADING
========================================================= */

.anko-videos-heading{
    display:grid;

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

    gap:60px;

    align-items:end;

    margin-bottom:40px;
}


.anko-videos-label{
    display:block;

    margin-bottom:10px;

    color:var(--anko-orange);

    font-size:11px;
    font-weight:800;

    letter-spacing:1.8px;
}


.anko-videos-heading h2{
    margin:0;

    color:var(--anko-heading);

    font-size:clamp(42px,5vw,64px);

    line-height:1;

    font-weight:800;

    letter-spacing:-3px;
}


.anko-videos-heading h2 span{
    color:var(--anko-primary);
}


.anko-videos-heading > p{
    max-width:500px;

    margin:0 0 5px auto;

    color:var(--anko-text);

    font-size:15px;

    line-height:1.8;
}


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

.anko-video-grid{
    display:grid;

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

    gap:22px;
}


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

.anko-video-card{
    overflow:hidden;

    border:
        1px solid
        var(--anko-border);

    border-radius:25px;

    background:#fff;

    box-shadow:
        0 15px 45px
        rgba(32,33,61,.06);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.anko-video-card:hover{
    transform:translateY(-6px);

    box-shadow:
        0 28px 65px
        rgba(32,33,61,.12);
}


/* =========================================================
   IFRAME
========================================================= */

.anko-video-frame{
    position:relative;

    width:100%;

    aspect-ratio:16 / 9;

    overflow:hidden;

    background:#171416;
}


.anko-video-frame iframe{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    border:0;
}


/* =========================================================
   CONTENT
========================================================= */

.anko-video-content{
    padding:
        23px
        25px
        27px;
}


.anko-video-content > span{
    display:block;

    margin-bottom:8px;

    color:var(--anko-orange);

    font-size:10px;
    font-weight:800;

    letter-spacing:1.5px;
}


.anko-video-content h3{
    margin:
        0
        0
        10px;

    color:var(--anko-primary);

    font-size:20px;
    font-weight:800;

    line-height:1.25;

    letter-spacing:-.6px;
}


.anko-video-content p{
    margin:0;

    color:var(--anko-text);

    font-size:13px;

    line-height:1.7;
}


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

@media(max-width:991.98px){

    .anko-videos-section{
        padding:
            65px
            0
            80px;
    }


    .anko-video-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


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

@media(max-width:767.98px){

    .anko-videos-section{
        padding:
            50px
            0
            65px;
    }


    .anko-videos-heading{
        grid-template-columns:1fr;

        gap:15px;

        margin-bottom:30px;
    }


    .anko-videos-heading h2{
        font-size:40px;

        letter-spacing:-2px;
    }


    .anko-videos-heading > p{
        max-width:100%;

        margin:0;
    }


    .anko-video-grid{
        grid-template-columns:1fr;
    }

}


/* =========================================================
   REFERANSLAR SAYFASI
========================================================= */

.anko-references-section{
    position:relative;

    padding:80px 0 110px;

    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(61,63,121,.06),
            transparent 28%
        ),
        var(--anko-bg);
}


/* =========================================================
   HEADING
========================================================= */

.anko-references-heading{
    display:grid;

    grid-template-columns:
        1.15fr
        .85fr;

    gap:70px;

    align-items:end;

    margin-bottom:42px;
}


.anko-references-label{
    display:block;

    margin-bottom:10px;

    color:var(--anko-orange);

    font-size:11px;

    font-weight:800;

    letter-spacing:1.8px;
}


.anko-references-heading h2{
    max-width:700px;

    margin:0;

    color:var(--anko-heading);

    font-size:
        clamp(
            40px,
            5vw,
            64px
        );

    line-height:1;

    font-weight:800;

    letter-spacing:-3px;
}


.anko-references-heading h2 span{
    display:block;

    color:var(--anko-primary);
}


.anko-references-heading > p{
    max-width:500px;

    margin:
        0
        0
        5px
        auto;

    color:var(--anko-text);

    font-size:15px;

    line-height:1.8;
}


/* =========================================================
   CATEGORY BAR
========================================================= */

.anko-reference-categories{
    display:flex;

    align-items:stretch;

    gap:10px;

    overflow-x:auto;

    margin-bottom:38px;

    padding:
        7px;

    border:
        1px solid
        var(--anko-border);

    border-radius:20px;

    background:#fff;

    box-shadow:
        0 15px 45px
        rgba(32,33,61,.05);

    scrollbar-width:none;
}


.anko-reference-categories::-webkit-scrollbar{
    display:none;
}


.anko-reference-category{
    position:relative;

    flex:
        1
        0
        230px;

    min-height:74px;

    display:flex;

    align-items:center;

    gap:15px;

    padding:
        12px
        20px;

    border:0;

    border-radius:15px;

    background:transparent;

    color:var(--anko-text);

    cursor:pointer;

    text-align:left;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}


.anko-reference-category:hover{
    background:var(--anko-primary-soft);

    color:var(--anko-primary);
}


.anko-reference-category.active{
    background:
        linear-gradient(
            135deg,
            var(--anko-primary-dark),
            var(--anko-primary)
        );

    color:#fff;

    box-shadow:
        0 14px 35px
        rgba(61,63,121,.18);
}


.anko-reference-category-number{
    display:flex;

    align-items:center;

    justify-content:center;

    width:38px;
    height:38px;

    flex:
        0
        0
        38px;

    border-radius:50%;

    background:
        rgba(61,63,121,.07);

    color:var(--anko-orange);

    font-size:10px;

    font-weight:800;

    letter-spacing:1px;
}


.anko-reference-category.active
.anko-reference-category-number{
    background:
        rgba(255,255,255,.12);

    color:#fff;
}


.anko-reference-category-name{
    font-size:13px;

    font-weight:800;

    line-height:1.35;
}


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

.anko-reference-list{
    display:grid;

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

    gap:20px;
}


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

.anko-reference-card{
    position:relative;

    overflow:hidden;

    min-width:0;

    border:
        1px solid
        var(--anko-border);

    border-radius:24px;

    background:#fff;

    box-shadow:
        0 15px 42px
        rgba(32,33,61,.055);

    transform:
        translateY(0);

    opacity:1;

    transition:
        opacity .25s ease,
        transform .35s ease,
        box-shadow .35s ease;
}


.anko-reference-card:hover{
    transform:
        translateY(-6px);

    box-shadow:
        0 28px 65px
        rgba(32,33,61,.12);
}


.anko-reference-card.is-hidden{
    display:none;
}


/* =========================================================
   LOGO
========================================================= */

.anko-reference-logo{
    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    height:220px;

    margin:10px;

    padding:35px;

    overflow:hidden;

    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f5f5f8
        );
}


.anko-reference-logo::before{
    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:170px;
    height:170px;

    transform:
        translate(
            -50%,
            -50%
        );

    border-radius:50%;

    background:
        rgba(61,63,121,.035);
}


.anko-reference-logo img{
    position:relative;

    z-index:2;

    max-width:80%;
    max-height:125px;

    width:auto;
    height:auto;

    object-fit:contain;

    filter:
        grayscale(10%);

    transition:
        transform .45s ease,
        filter .45s ease;
}


.anko-reference-card:hover
.anko-reference-logo img{
    transform:
        scale(1.06);

    filter:
        grayscale(0);
}


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

.anko-reference-card-footer{
    position:relative;

    padding:
        16px
        20px
        22px;

    border-top:
        1px solid
        rgba(61,63,121,.07);
}


.anko-reference-card-footer::before{
    content:"";

    position:absolute;

    top:-2px;
    left:20px;

    width:35px;
    height:3px;

    border-radius:5px;

    background:var(--anko-orange);
}


.anko-reference-card-footer span{
    display:block;

    margin-bottom:5px;

    color:var(--anko-orange);

    font-size:9px;

    font-weight:800;

    letter-spacing:1.3px;

    text-transform:uppercase;
}


.anko-reference-card-footer strong{
    display:block;

    color:var(--anko-primary);

    font-size:15px;

    font-weight:800;
}


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

@media(max-width:1199.98px){

    .anko-reference-list{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

}


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

@media(max-width:991.98px){

    .anko-references-section{
        padding:
            65px
            0
            80px;
    }


    .anko-references-heading{
        grid-template-columns:1fr;

        gap:18px;
    }


    .anko-references-heading > p{
        max-width:650px;

        margin:0;
    }


    .anko-reference-list{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


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

@media(max-width:767.98px){

    .anko-references-section{
        padding:
            50px
            0
            65px;
    }


    .anko-references-heading{
        margin-bottom:30px;
    }


    .anko-references-heading h2{
        font-size:40px;

        letter-spacing:-2px;
    }


    .anko-reference-categories{
        margin-bottom:28px;
    }


    .anko-reference-category{
        flex-basis:220px;

        min-height:66px;
    }


    .anko-reference-list{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:13px;
    }


    .anko-reference-logo{
        height:170px;

        margin:7px;

        padding:25px;
    }


    .anko-reference-logo img{
        max-height:95px;
    }


    .anko-reference-card-footer{
        padding:
            14px
            16px
            18px;
    }

}


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

@media(max-width:480px){

    .anko-reference-list{
        grid-template-columns:1fr;
    }


    .anko-reference-logo{
        height:210px;
    }


    .anko-reference-logo img{
        max-height:120px;
    }

}


/* =========================================================
   REFERANS LOGO GRID
========================================================= */

.anko-reference-list{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:18px;
}


/* =========================================================
   REFERANS LOGO CARD
========================================================= */

.anko-reference-card{
    position:relative;

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

    min-width:0;
    height:190px;

    padding:30px;

    overflow:hidden;

    border:1px solid rgba(61,63,121,.09);
    border-radius:22px;

    background:#fff;

    box-shadow:
        0 10px 35px rgba(32,33,61,.045);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


.anko-reference-card:hover{
    transform:translateY(-5px);

    border-color:rgba(217,142,45,.35);

    box-shadow:
        0 24px 55px rgba(32,33,61,.10);
}


/* küçük turuncu detay */

.anko-reference-card::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:0;

    width:34px;
    height:3px;

    transform:translateX(-50%);

    border-radius:5px 5px 0 0;

    background:var(--anko-orange);

    opacity:0;

    transition:.3s ease;
}


.anko-reference-card:hover::after{
    opacity:1;

    width:55px;
}


/* =========================================================
   LOGO
========================================================= */

.anko-reference-card img{
    position:relative;
    z-index:2;

    width:auto;
    height:auto;

    max-width:80%;
    max-height:105px;

    object-fit:contain;

    transition:
        transform .4s ease;
}


.anko-reference-card:hover img{
    transform:scale(1.06);
}


/* =========================================================
   FILTER
========================================================= */

.anko-reference-card.is-hidden{
    display:none;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1199.98px){

    .anko-reference-list{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }

}


@media(max-width:991.98px){

    .anko-reference-list{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

}


@media(max-width:767.98px){

    .anko-reference-list{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }

    .anko-reference-card{
        height:155px;
        padding:22px;
        border-radius:18px;
    }

    .anko-reference-card img{
        max-width:85%;
        max-height:85px;
    }

}


@media(max-width:420px){

    .anko-reference-card{
        height:135px;
        padding:18px;
    }

}


/* =========================================================
   CONTACT
========================================================= */

.anko-contact-section{
    position:relative;

    padding:85px 0 110px;

    background:
        radial-gradient(
            circle at 90% 8%,
            rgba(61,63,121,.055),
            transparent 28%
        ),
        var(--anko-bg);
}


.anko-contact-layout{
    display:grid;

    grid-template-columns:
        .85fr
        1.15fr;

    gap:70px;

    align-items:start;
}


/* =========================================================
   LEFT
========================================================= */

.anko-contact-info{
    min-width:0;
}


.anko-contact-heading{
    margin-bottom:35px;
}


.anko-contact-label{
    display:inline-flex;

    align-items:center;

    gap:11px;

    margin-bottom:17px;

    color:var(--anko-orange);

    font-size:11px;

    font-weight:800;

    letter-spacing:2px;
}


.anko-contact-label::before{
    content:"";

    width:28px;
    height:2px;

    border-radius:10px;

    background:var(--anko-orange);
}


.anko-contact-heading h2{
    margin:0;

    color:var(--anko-heading);

    font-size:
        clamp(
            40px,
            4vw,
            58px
        );

    line-height:1;

    font-weight:800;

    letter-spacing:-3px;
}


.anko-contact-heading h2 span{
    display:block;

    margin-top:5px;

    color:var(--anko-primary);
}


.anko-contact-heading p{
    max-width:500px;

    margin:22px 0 0;

    color:var(--anko-text);

    font-size:15px;

    line-height:1.8;
}


/* =========================================================
   CONTACT ITEMS
========================================================= */

.anko-contact-item{
    position:relative;

    display:flex;

    align-items:center;

    gap:18px;

    min-height:92px;

    margin-bottom:12px;

    padding:
        15px
        18px;

    border:
        1px solid
        var(--anko-border);

    border-radius:19px;

    background:#fff;

    color:inherit;

    box-shadow:
        0 10px 35px
        rgba(32,33,61,.04);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


a.anko-contact-item:hover{
    transform:translateX(5px);

    border-color:
        rgba(217,142,45,.30);

    box-shadow:
        0 18px 45px
        rgba(32,33,61,.08);
}


.anko-contact-icon{
    width:54px;
    height:54px;

    flex:0 0 54px;

    display:flex;

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

    border-radius:16px;

    background:
        var(--anko-primary-soft);
}


.anko-contact-icon svg{
    width:22px;
    height:22px;

    fill:none;

    stroke:var(--anko-primary);

    stroke-width:1.6;

    stroke-linecap:round;
    stroke-linejoin:round;
}


.anko-contact-item > div:nth-child(2){
    min-width:0;
}


.anko-contact-item span{
    display:block;

    margin-bottom:5px;

    color:var(--anko-orange);

    font-size:9px;

    font-weight:800;

    letter-spacing:1.4px;
}


.anko-contact-item strong{
    display:block;

    color:var(--anko-heading);

    font-size:14px;

    font-weight:700;

    line-height:1.5;
}


.anko-contact-arrow{
    margin-left:auto;

    color:var(--anko-primary);

    font-size:20px;
}


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

.anko-contact-form-wrap{
    padding:38px;

    border:
        1px solid
        var(--anko-border);

    border-radius:30px;

    background:#fff;

    box-shadow:
        0 25px 70px
        rgba(32,33,61,.08);
}


.anko-contact-form-head{
    margin-bottom:30px;
}


.anko-contact-form-head > span{
    display:block;

    margin-bottom:8px;

    color:var(--anko-orange);

    font-size:10px;

    font-weight:800;

    letter-spacing:1.7px;
}


.anko-contact-form-head h3{
    margin:0;

    color:var(--anko-primary);

    font-size:31px;

    font-weight:800;

    letter-spacing:-1.5px;
}


.anko-contact-form-head p{
    max-width:520px;

    margin:10px 0 0;

    color:var(--anko-text);

    font-size:14px;

    line-height:1.7;
}


/* =========================================================
   FORM
========================================================= */

.anko-form-row{
    display:grid;

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

    gap:17px;
}


.anko-form-group{
    margin-bottom:18px;
}


.anko-form-group label{
    display:block;

    margin-bottom:8px;

    color:var(--anko-heading);

    font-size:12px;

    font-weight:700;
}


.anko-form-group input,
.anko-form-group textarea{
    width:100%;

    outline:none;

    border:
        1px solid
        rgba(61,63,121,.12);

    border-radius:14px;

    background:#f8f8fa;

    color:var(--anko-heading);

    font-family:inherit;

    font-size:13px;

    transition:
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}


.anko-form-group input{
    height:54px;

    padding:
        0
        17px;
}


.anko-form-group textarea{
    min-height:150px;

    padding:16px 17px;

    resize:vertical;
}


.anko-form-group input::placeholder,
.anko-form-group textarea::placeholder{
    color:#a1a2aa;
}


.anko-form-group input:focus,
.anko-form-group textarea:focus{
    border-color:
        rgba(61,63,121,.35);

    background:#fff;

    box-shadow:
        0 0 0 4px
        rgba(61,63,121,.055);
}


/* =========================================================
   SUBMIT
========================================================= */

.anko-contact-submit{
    width:100%;

    min-height:60px;

    padding:
        7px
        8px
        7px
        22px;

    border:0;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    background:
        linear-gradient(
            135deg,
            var(--anko-primary-dark),
            var(--anko-primary)
        );

    color:#fff;

    font-size:13px;

    font-weight:800;

    cursor:pointer;

    box-shadow:
        0 16px 35px
        rgba(61,63,121,.18);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.anko-contact-submit:hover{
    transform:translateY(-2px);

    box-shadow:
        0 22px 45px
        rgba(61,63,121,.25);
}


.anko-contact-submit-icon{
    width:46px;
    height:46px;

    display:flex;

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

    border-radius:50%;

    background:#fff;
}


.anko-contact-submit-icon svg{
    width:19px;
    height:19px;

    fill:none;

    stroke:var(--anko-primary);

    stroke-width:1.8;

    stroke-linecap:round;
    stroke-linejoin:round;

    transition:.3s ease;
}


.anko-contact-submit:hover
.anko-contact-submit-icon svg{
    transform:rotate(45deg);
}


/* =========================================================
   MAP
========================================================= */

.anko-contact-map{
    position:relative;

    height:460px;

    margin-top:55px;

    overflow:hidden;

    border:
        1px solid
        var(--anko-border);

    border-radius:30px;

    background:#ddd;

    box-shadow:
        0 20px 60px
        rgba(32,33,61,.08);
}


.anko-contact-map iframe{
    width:100%;
    height:100%;

    border:0;

    filter:
        grayscale(15%);
}


.anko-contact-map-label{
    position:absolute;

    z-index:5;

    left:25px;
    top:25px;

    padding:
        15px
        20px;

    border:
        1px solid
        rgba(255,255,255,.55);

    border-radius:16px;

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

    box-shadow:
        0 15px 35px
        rgba(20,20,20,.12);

    backdrop-filter:blur(10px);
}


.anko-contact-map-label span{
    display:block;

    margin-bottom:3px;

    color:var(--anko-orange);

    font-size:9px;

    font-weight:800;

    letter-spacing:1.5px;
}


.anko-contact-map-label strong{
    color:var(--anko-primary);

    font-size:14px;

    font-weight:800;
}


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

@media(max-width:991.98px){

    .anko-contact-section{
        padding:
            65px
            0
            80px;
    }


    .anko-contact-layout{
        grid-template-columns:1fr;

        gap:45px;
    }


    .anko-contact-form-wrap{
        padding:32px;
    }

}


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

@media(max-width:767.98px){

    .anko-contact-section{
        padding:
            50px
            0
            65px;
    }


    .anko-contact-heading h2{
        font-size:39px;

        letter-spacing:-2px;
    }


    .anko-contact-form-wrap{
        padding:
            27px
            20px;

        border-radius:24px;
    }


    .anko-form-row{
        grid-template-columns:1fr;

        gap:0;
    }


    .anko-contact-map{
        height:360px;

        margin-top:40px;

        border-radius:23px;
    }


    .anko-contact-map-label{
        left:15px;
        top:15px;
    }

}