.diagram{
    width:800px;
    height:650px;
    margin:auto;
    position:relative;
}

/* ORTA */

.center{

    position:absolute;

    width:170px;
    height:170px;

    left:50%;
    top:50%;

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

    border-radius:50%;

    background:linear-gradient(135deg,#547ed3,#3f66b7);

    color:white;

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

    text-align:center;

    font-size:22px;
    font-weight:bold;

    z-index:5;

    box-shadow:0 10px 25px rgba(0,0,0,.20);

}

/* DIŞ DAİRELER */

.circle{

    position:absolute;

    width:150px;
    height:150px;

    border-radius:50%;

    background:linear-gradient(180deg,#1fb5ee,#129fdb);

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:20px;

    font-size:17px;

    line-height:1.25;

    border:3px solid white;

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

    transition:.35s;

}

.circle:hover{

    transform:scale(1.07);

    box-shadow:0 15px 35px rgba(0,0,0,.25);

}

/* KONUMLAR */

.top{
left:325px;
top:0;
}

.topleft{
left:110px;
top:80px;
}

.topright{
right:110px;
top:80px;
}

.right{
right:30px;
top:275px;
font-size:15px;
}

.bottomright{
right:140px;
bottom:0;
}

.bottomleft{
left:140px;
bottom:0;
font-size:15px;
}

.left{
left:30px;
top:275px;
}

/* OKLAR */

svg{

position:absolute;

left:0;
top:0;

pointer-events:none;

}

.arrow{

stroke:#b7bfdc;

stroke-width:8;

fill:none;

marker-end:url(#arrow);

}
.ekipnet-layout{

display:flex;
gap:35px;
align-items:flex-start;
margin-top:25px;

}

.ekipnet-left{

width:42%;
display:flex;
justify-content:center;

}

.ekipnet-right{

width:58%;
display:flex;
flex-direction:column;
gap:18px;

}

/********************/
/* DİYAGRAM */
/********************/

.diagram{

position:relative;
width:520px;
height:520px;

}

.center{

position:absolute;

width:150px;
height:150px;

left:50%;
top:50%;

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

border-radius:50%;

background:linear-gradient(135deg,#5d7dd6,#4267b9);

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

color:#fff;
font-size:22px;
font-weight:bold;
text-align:center;

box-shadow:0 8px 20px rgba(0,0,0,.2);

z-index:5;

}

.circle{

position:absolute;

width:125px;
height:125px;

border-radius:50%;

background:linear-gradient(#20b3ec,#159cd7);

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

text-align:center;

padding:14px;

color:white;

font-size:15px;
line-height:1.25;

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

transition:.3s;

}

.circle:hover{

transform:scale(1.06);

}

.top{

left:198px;
top:0;

}

.topleft{

left:20px;
top:70px;

}

.topright{

right:20px;
top:70px;

}

.left{

left:0;
top:210px;

}

.right{

right:0;
top:210px;
font-size:13px;

}

.bottomleft{

left:70px;
bottom:0;
font-size:13px;

}

.bottomright{

right:70px;
bottom:0;

}

.arrow{

stroke:#bfc6dc;
stroke-width:7;
fill:none;
marker-end:url(#arrow);

}

@media(max-width:950px){

.ekipnet-layout{

flex-direction:column;

}

.ekipnet-left,
.ekipnet-right{

width:100%;

}

.diagram{

margin:auto;

}

}