:root{
    /*--dis_cerceve: .2px solid #f0ecec; */
    --sema_ust_cizgi: 5px solid  #04c5c5;
    --sema_sol_cizgi: 3px solid #04c5c5;
    --sema_sag_cizgi: 3px solid #04c5c5;
    --dis_cerceve: .2px solid #f0ecec;
    --font_size:16px;
    --font_size_hover:16px;
    --border-radius: 4px;
    --padding: 10px;
    --arka_plan_rengi_hover:  #ffffff;
    --text_color_hover:rgb(26, 13, 13);
    --img_border:1.5px solid #ffffff83;
    --img_border_hover:1px solid #ffffff;
    --dis_cerceve_hover: 1.7px solid rgb(239, 243, 243);
    --dis_cerceve_hover_shadow: 0px 15px 22px -4px #9e9c9c;
    --img_shadow: 0px 10px 15px 0px #0e1a1a;
    --tree_a_box_shadow: 0px 10px 15px -5px #878888;
    --tree_a_img_shadow:  0px 10px 15px -5px #96323a;
    --tree_a_img_shadow_hover:  0px 10px 15px -5px #96323a;
    --tree_img_hover_shadow: 0px 5px 15px -5px #447780;
    --tree_a_img_border: 1.5px solid #f3eeee;
    --tree_a_span_background-color: #f0f0f0; /*detay metnin arka plan rengi*/
    --tree_a_span_box-shadow: 0px 15px 20px -6px #bbbbbb;
    --tree_a_span_text-shadow: 2.5px 0.2px 0.2px rgb(255, 255, 255), 0 0 1em #bbbbbb, 0 0 0.2em rgb(240, 245, 245);
    --tree_a_span_border:1px solid rgb(219, 214, 214);

}
body
{
    zoom: 70%;
    height: 100vh;
    display: grid;
    align-items: center;
background-color:transparent;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
white-space: nowrap;
}
.tree
{
    zoom: 100%;
  width: 50%;
  height: auto;  
  text-align: center;

}
.tree ul
{
    padding-top: 15px;
    position: relative;
    transition: .5s;
    
}
.tree li
{
display:inline-table;
text-align: center;
list-style-type: none;
position: relative;
padding: 15px;
transition: .5s;
background-color: transparent;
}
.tree li:before, .tree li:after
{
content: '';
position: absolute;
top:0;
right: 50%;
border-top: var(--sema_ust_cizgi);
width: 51%;
height: 15px;

}
.tree li:after
{
right: auto;
left: 50%;
border-left: var(--sema_sol_cizgi);

}
.tree li:only-child:after, .tree li:only-child:before
{
display: none;

}
.tree li:only-child
{
padding-top: 0;

}
.tree li:first-child:before, .tree li:last-child:after
{
border:0 none;
}
.tree li:last-child:before
{
    border-right: var(--sema_sag_cizgi);
    border-radius: 0px 5px 0px 0px;


}
.tree li:first-child:after
{
    border-radius: 5px 0px 0px 0px;
}
.tree ul ul:before
{
    content: '';
    position: absolute;
    top: 0;
    left:50%;
    border-left:  var(--sema_sol_cizgi);
    width: 0;
    height: 0.5%; 
}
.tree a
{
    border: var(--dis_cerceve); 
    padding:  10px;
    display:inline-grid;
    border-radius: 5px;
    text-decoration-line:none;
    transition: .7s;
    box-shadow: var(--tree_a_box_shadow);
    filter:saturate(.5);
    border-top-right-radius: 100%;
 border-top-left-radius: 100%;
}
.tree a img
{
width: 80px;  
height: 80px; 
margin-bottom: 10px !important;
border-radius: 50%;
margin: auto;
border: var(--tree_a_img_border);
box-shadow: var(--tree_a_img_shadow);
padding: 0px;
}
.tree img
{
width: 80px;  
height: 80px;
margin-bottom: 10px !important;
border-radius: 100px;
margin: auto;
border: var(--img_border);
box-shadow: var(--img_shadow);
padding: 0px;
}
.tree img:hover
{
    background: #ffffff;
    color:#ffffff;
    border:var(--img_border_hover);
    box-shadow: var(--tree_img_hover_shadow);
    font-size: 14px;
}

a{
    text-decoration:none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size:14px;
    color: rgb(240, 245, 243);
    background-color: #fffaff;
}
.tree a span
{        
 border: var(--tree_a_span_border);
 border-radius: var(--border-radius);
 color: var(--text_color_hover);
 padding: var(--padding);
 font-size: var(--font_size);
 text-transform: uppercase;
 font-weight: 400;
 background-color: var(--tree_a_span_background-color);
 box-shadow: var(--tree_a_span_box-shadow);
 text-shadow: var(--tree_a_span_text-shadow);
 
}
.tree li span{
 
    background-color: rgba(255,255,255,0.1);
    padding: 0px;
    border-radius: 5px;
    backdrop-filter: blur(30px);
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow: 10px 10px 10px rgba(45,55,68,0.0.3);
    line-height: 1.5;
    
   }
.tree a iframe{
    border: var(--tree_a_span_border);
 border-radius: var(--border-radius);
 color: var(--text_color_hover);
 padding: var(--padding);
 font-size: var(--font_size);
 text-transform: uppercase;
 font-weight: 400;
 background-color: var(--tree_a_span_background-color);
 box-shadow: var(--tree_a_span_box-shadow);
 text-shadow: var(--tree_a_span_text-shadow);
}

.tree li a:hover, .tree li a:hover img, .tree li a:hover span,  .tree li a:hover+ul li a
{
    background: var(--arka_plan_rengi_hover);
    color:rgb(26, 13, 13);
    border: var(--dis_cerceve_hover);
    box-shadow:var(--dis_cerceve_hover_shadow);
    font-size: var(--font_size_hover);
    filter:saturate(1);
}
.tree li a:hover+ul li:after, .tree li a:hover+ul li:before, .tree li a:hover+ul:before, .tree li a:hover+ul ul:before
{
   border-color: #94a0b4; 
}
.intro
{
background-color:#ffffff;
position:relative;
display:inline-table;
padding-left: -40px;
padding-top:50px;
padding-bottom:20px;
border-bottom-left-radius: 0%;
border-top-left-radius: 0%;
border-top-right-radius: 0%;
border-bottom-right-radius: 0%;
width:100%;
height:80%;
justify-content: center;
font-family: verdana;
margin-left: 2px;
color:#000000;
font-size: 14px;
transition: .5s;
box-shadow: 0px -5px 50px 5px #fffdfd;
top:40px;
display: none;
}
.intro p:hover
{
    background: #ffffff;
    color:#000;
    border:0px solid #16a4bd;
    box-shadow: 0px -5px 5px -5px #c0bbbb;
    font-size: 14px;
    padding-left: 2px;
    padding-top:2px;
    cursor:help;    
}
.desen1 
{
background-color: #ffffff;
position:relative;
display:inline-table;
padding-left: 2px;
    padding-top:15px;
    padding-bottom:0px;
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
width:6vw;
height:30px;
justify-content: center;
font-family: verdana;
margin-left: 2px;
margin-right: 2px;
border:1px solid #000000;
color:#333131;
font-size: 12px;
top:-690px;

box-shadow: 0px -5px 5px -5px #656b6b;
transform: rotate(0deg);
    transition:.5s;
}
.desen1:hover
{   transform: rotate(5deg);
    transition: .5s;
    background: #e7edee;
    color:#000;
    border:0px solid #16a4bd;
    box-shadow: 0px 10px 30px 0px #5f5f5f;
    font-size: 14px;
    padding-left: 15px;
    padding-top:15px;
    padding-right: 15px;
    font-weight: 100;
   
}
.desen2 
{
background-color: #ffffff;
position:relative;
display:inline-table;
padding-left: 2px;
padding-top:15px;
padding-bottom:0px;
border-bottom-left-radius: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
width:6vw;
height:30px;
justify-content: center;
font-family: verdana;
margin-left: 2px;
margin-right: 2px;

border:1px solid #000000;
color:#333131;
font-size: 12px;
top:-690px;
box-shadow: 0px -4px 5px -4px #0e6860;
transform: rotate(0deg);
transition:.5s;
}
.desen2:hover
{
    transform: rotate(5deg);
    transition: .5s;
    background: #e7edee;
    color:#000;
    border:0px solid #16a4bd;
    box-shadow: 0px 20px 30px 0px #5f5f5f;
    font-size: 14px;
    padding-left: 15px;
    padding-top:15px;
    padding-right: 15px;
    font-weight: 100;
}
.desen3
{
background-color: #ffffff;
background-image: url(kaynaklar/BulentAtabek-Temurhan/jakeliflamahd.png);
background-size: cover;
position:relative;
top: -676.5px;
display:inline-flex;
justify-content: center;
align-items: center;
padding-left: 2px;
padding-top:15px;
padding-bottom:0px;
border-radius: 50%;
width:30px;
height:19px;
justify-content: center;
font-family: verdana;
margin-left: 8px;
margin-right: 6px;
border:0px solid #000000;
color:#333131;
font-size: 14px;
box-shadow: 0px -4px 5px -4px #0e6860;
transform: rotate(0deg);
transition:30s;
animation: desen3 5s infinite;
transform-style: preserve-3d;
cursor:default;
}

.chat a{
    text-decoration:none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size:14px;
    color: black;
}
.chat{
    padding: 15px;
    border:1px solid #c0bbbb;
    display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transform: translate(20%, 0%);
    width:900px;
    overflow: hidden;
    border-top-left-radius: 6px;
border-top-right-radius: 6px;
background-color: bisque;
}
@keyframes desen3{
    50%{
        transform:translate(0px);
        box-shadow: 0px 0px 6px 6px #f08282;
        width:30px;
        height:19px;
        background-image: url(kaynaklar/Turkiye/turk\ bayragi.jpg);
        background-color:#000000;
        cursor:default;
        filter:blur(1px);
    }
}

.caret {
  cursor: pointer;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
}

.caret::before {
  content: "\25B6";
  color: red;
  display: inline-block;
  margin-right: 6px;
  transition:.5s;
  box-shadow: 0px 0px 0px 0px red;
font-size: xx-large;
}

.caret-down::before {
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Safari */
  transform: rotate(90deg);  
    color: rgb(6, 207, 180);
    transition:.5s;
    box-shadow: 0px 0px 0px 0px rgb(0, 128, 111);
    padding-right:10px;
    font-size: xx-large;

}

.nested {
  display: none;
 transition:.5s;
}

.active {
  display:block;
  transition:.5s;
}
.faydalilink {
    text-decoration: none;
    color:rgb(255, 255, 255);
    background-color: #bb0000;
    font-weight: bolder;
    display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transform: translate(13%, 0%);
    
}
#myVideo {
position: fixed;
top:0;
right: 0;
bottom: 0;
min-width: 20%; 
min-height: 100%;
filter:saturate(530%) sepia(110%) contrast(1.05) grayscale(2) brightness(105%);
}