*{ 
    margin: 0px; 
    padding: 0px; 
    border: 0px; 
    outline: none;
    box-sizing: border-box;  
    }
    button:hover{
        cursor: pointer;
    }
    html {
        scroll-behavior: smooth;
      }
    #navbar{
       
        width: 100%;    
        height: 5vw;
        background-color:rgb(0, 0, 0);
        position: fixed;
        top: 0px;
        z-index: 5;
        box-shadow: 0px 0px 1vw white;
    
    }
    #navbtn{
        width: 20%;
        background: 
        linear-gradient(to right,rgb(9, 90, 211) 10%,#4512a5 60%,rgb(9, 90, 211) 90%);
        height: 4vw;
        line-height: 100%;
        text-align: center;
        float: right;
        margin-top: 0.5vw;        
        font-size: 1vw;
        color: white;
        border-radius: 2.5vw;    
        background-size: 200% 200%;
        animation: gradientShift 5s infinite linear;
        transition: box-shadow 0.4s;
        position: fixed;
        top: 0px;
        right: 2%;
        z-index: 6;

        border-radius: 10vw;       
        margin-top: 1.2vw;
        top: auto;
        box-shadow: 0px 0px 0.5vw white;
        bottom: 2%;
    }#navbtn:hover{
        box-shadow: 0px 0px 1vw white;
    }
    .img{
        height: 100%;          
        
        margin-left: 4%;        
        object-fit: fill;
        display: inline;
        float: left;  
      }
    
    @keyframes gradientShift {
        0% {
          background-position: 0% 50%;
        }
        100% {
          background-position: 200% 50%;
        }
      }
    
    #bl{
        width: 98%;
        height: 95%;
        margin-left: 1%;
        border-radius: 2.5vw;       
        background-color: transparent;
        color: white;
        font-size: 1vw;
        font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }
    
    #divv{
       width: 120%; margin-left: -10%; 
       overflow: hidden;
       background: rgb(0, 0, 0);
       transition: 0.1s;
    
       z-index: 150;
       transform-origin: center;
    }
    
    #container{
        perspective: 1500px;
        background-color: rgb(0, 0, 0);
        width: 100%; 
        transform-origin: center;
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
    #p1{
        color: white;
        margin-left: 20%; margin-top: 10vw; font-size: 6vw;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS',sans-serif;
        width: 50%;
    }
    #main{
        background-color: rgb(0, 0, 0);
        overflow: hidden;
    }
    .con{
        display: grid;
        grid-template-columns: 50% 50%;
        width: 90%;
        
        height: 40vw;
        border-radius: 2vw;
        margin-top: 5%;
        margin-left: 5%;
    }
    .con:last-child{
        margin-bottom: 5%;
    }
    .dmain{
         height: 90%;
         border-radius: 2vw;
         margin-top: 5%;
         width: 90%;
         margin-left: 5%;
         display: block;  
    }
    .imain{
        width: 80%;
        height: 80%;
        margin-left: 5%;
        margin-top: 10%;
        display: flex;
        justify-self: center;
        object-fit: cover;        
    }
    .pmain{
        height: 100%;
        font-size: 1.5vw;
        margin-top: 10vw;
        width: 80%;
        margin-left: 10%;
        color: rgb(255, 255, 255);
        text-align: center;
    }
    .pmain2{
        height: 100%;
        font-size: 1.5vw;
        margin-top: 10vw;
        width: 80%;
        margin-left: 10%;
        color: rgb(255, 255, 255);
        text-align: center;
    }
    
    .b1{
        border-top-left-radius: 2vw;
        border-top-right-radius: 1.3vw;
        border-bottom-right-radius: 12vw;
        border-bottom-left-radius: 6vw;    
    }
    .b2{
        border-top-right-radius: 2vw;
        border-top-left-radius: 1.3vw;
        border-bottom-left-radius: 12vw;
        border-bottom-right-radius: 6vw;    
    }
    
    #main2{
        display: none;
        overflow: hidden;
        background-color: white;
    }
    
    /* Flip Card */
    .con1 img{
        object-fit: cover;
        width: 100%;
        border-radius: 2vw;
    }
    
    .con1 {
        display: flex;  
        width: 90%;
        margin-left: 5%;
        margin-top: 10%;
        margin-bottom: 10%;
        
        
      }
      .con2{
        perspective: 1500px;
        width: 100%;
         /* 📌 Derinlik efekti için perspektif */
      }
      .con3{
        width: 100%;
        aspect-ratio: 1;
        transform-style: preserve-3d;
        transform-origin: center;
        transition: transform 1s;
      }
      .front ,.back{
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
      }
      .front{
        display: flex;
        transform: rotateY(0deg);
      }
      .back{
        display: flex;
        border-radius: 2vw;
        background-color: black;
        transform: rotateY(180deg);
        opacity: 0.5; background-size: cover; background-position: center;
      }
      /* .con2:hover .con3{
        transform: rotateY(180deg);
      } */
    
    
    
    /* Flip Card */
    
    
    #form{
        width: 100%;
           
    }
    
    /* #bg{
        width: 100%;
        height: 2vw;
        position: absolute;
        background: linear-gradient(to right,rgb(255, 106, 0) 50%,rgb(255, 55, 0) 80%);
    } */
    
    
    #menu{
        background: rgba(0, 0, 0);
        height: 100vh;
        width: 100%;
        position: fixed;
        top: 100vh;
        transition: 0.5s;
        z-index: 50;
    }
    .input{    
        font-size: 1.5vw;    
        color: rgb(255, 255, 255);      
        width: 60%;     
        border: 0.1vw solid rgb(255, 255, 255); 
        background-color: transparent;
        padding: 1.5%;    
        margin: 1.5%;
        margin-top: 2%;
        display: inline;  
        transition: box-shadow 0.3s;    
        border-radius: 2vw;    
    }
    .input1{
        margin-left: -100%;
        transition: 0.4s;
        width: 100%;
    }
    .input:focus{
        box-shadow: 0px 0px 1vw 0.1vw rgba(255, 255, 255);
    }
    .input::placeholder{
        color: rgb(168, 168, 168);
        opacity: 1;    
        text-align: center;
    }
    
    #basvurbtn{
        width: 63.2%; 
        font-size: 1.5vw; 
        padding: 1.5%;    
        margin: 1.5%;
        border-radius: 2vw;
        margin-top: 2%;
        border: 0.1vw solid grey; 
        background: linear-gradient(to right,rgb(9, 90, 211) 50%,#4000ff 80%);
        background-size: 0% 100%;
        text-align: center;
        background-repeat: no-repeat;
        color: rgb(213, 213, 213);
        opacity: 0.9;
        transition: 0.7s ease-in-out;
        box-shadow: 0px 0px 1vw white;       
    }
    #basvurbtn:hover {
        background-size: 100% 100%;
        color: white
    }
    
    #infos{
        display: inline-block; width: 45%; margin-top: 3%; padding-bottom: 3%;  
    }
    #infos2{
        width: 45%; float: right; height: 50vh; margin-top: 3%;
    }
    .contact{
        color: white;
        font-size: 2vw;
        margin-right: 5vw;
        margin-top: 2vw;
        text-align: right;
    }
    #clos{
        position: fixed;
        top: -12vw;
        right: 1vw;    
        /* width: 10vw;     */
        width: 4vw;    
        /* border: 0.5vw solid white; */
        border: 0.2vw solid white;
        border-radius: 100%;
        transition: 1s;    
        color: white;
        aspect-ratio: 1;
        font-size: 2vw;
        background-color: transparent;
        z-index: 51;
    }
    #tu{
        float: right;
        margin-right: 5vw;
        font-size: 1.5vw;
        border-radius: 2vw;
        padding: 1vw;
        width: 50%;
        margin-top: 2vw;
        color: white;
        background-color: rgb(4, 176, 27);
    }
    
    .chart1{
        width: 100%;
        height: 100%;
        background-color: white;
        border-radius: 1vw;
        overflow: hidden;
    }
    .header{
        width: 100%; font-size: 1.5vw; color: black; text-align: center; display: block;
        color: white;
        line-height: 6vw;
        text-align: center;
    }
    #chart1{
        background: linear-gradient(to right,rgb(9, 90, 211) 50%, #1a3ee1 100%);       
    }
    #chart2{
        background: linear-gradient(to right,#1a3ee1 50%,#3019f3 100%);
    }
    #chart3{
        background: linear-gradient(to right,#3019f3 50%,#4000ff 100%);
    }
    #chart4{
        background: linear-gradient(to right,#3019f3 50%,#2200ff 100%);
    }
    
    .inner{
        color: white;
    }
    
    #footer{
        width: 100%; height: 100vw; margin-top: 5vw; 
        background-color: rgb(31, 31, 31); overflow: hidden;
        margin-bottom: 18.5vw;
    }
    #flogo{
        width: 20%;
        object-fit: fill;
        margin-left: 40%;
        margin-top: -2%;
    }
    .scene {
      width: 80%;
      perspective: 2000px; /* 3D efekti için gerekli */
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 10%;
      margin-top: 15vw;
      margin-bottom: 15vw;
    }
    #iltex{
        color: white; font-size: 3vw; text-decoration: underline; margin-top: 2vw;
    }
    .cube {
        width: 18vw;
        height: 18vw;
        position: relative;
        transform-style: preserve-3d;
        animation: rotateCube 34s infinite linear;
        perspective: 100000px;
      }
      
      .face {
        width: 100%;
        height: 100%;
        position: absolute;
        transform-style: preserve-3d;
      }
      
      .on, .arka {        
        width: 100%;
        height: 100%;
        position: absolute;
        backface-visibility: hidden;
        border-radius: 1vw;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }
      
      .on {
        background-color: white;
        transform: rotateY(0deg);
      }
      
      .arka {
        background-color: white;
        transform: rotateY(180deg);
      }
    
      
      .fimg {
        width: 100%;
        height: 100%;
        object-fit: fill;
        pointer-events: none;
      }
      
   
    #iletisim{
        width: 95%;
        margin-left: 2.5%;        
        height: 14vw;
        border: 0.1vw solid rgb(153, 153, 153);
        display: flex; justify-content: space-around;
    }
    #idiv{
        width: 20%;    
        margin-top: 5vw;
        border-bottom: 0.1vw solid rgb(153, 153, 153);
    }
    #ilinput{
        background-color: black; color: white; border: 0.1vw solid white; padding: 0.5vw;
    }

    .ciletisim{
        font-size: 2vw;
        margin-top: 1vw;
        color: rgb(153, 153, 153);
        width: 100%;
        
    }
      
      /* Küpün yüzeylerini yerleştiriyoruz */
      .f1 { transform: rotateY(  0deg)   translateZ(23vw); }
      .f2 { transform: rotateY(45deg)    translateZ(23vw); }
      .f3 { transform: rotateY(90deg)    translateZ(23vw); }      
      .f4 { transform: rotateY(135deg)   translateZ(23vw); }
      .f5 { transform: rotateY(180deg)   translateZ(23vw); }
      .f6 { transform: rotateY(225deg)   translateZ(23vw); }
      .f7 { transform: rotateY(270deg)   translateZ(23vw); }      
      .f8 { transform: rotateY(315deg)   translateZ(23vw); }      
      
      
      /* Animasyon */
      @keyframes rotateCube {
        0%   { transform: rotateX(-20deg) rotateY(0deg) }
        100% { transform: rotateX(-20deg) rotateY(360deg) }
      }
    
    
    
    /* ANIMATION */
    
    .span {
        position: fixed;	
        height: 2vw;   
        width: 2vw;
        z-index: -1;
        background-color: #1b1f33;
        box-shadow: 0px 0px 5vw 2vw #4000ff;	
    }
    #s1{
        left: 1vw;
        bottom: -2vw;
    }
    #s2 {
        left: 10%;
        width: 3vw;
        height: 3vw;
        bottom: -4vw;
    }
    #s3{
        left: 20%;
        width: 4vw;
        height: 4vw;
        bottom: -5vw;
    }
    #s4 {
        width: 7vw;
        height: 7vw;
        bottom: -8vw;
    }
    #s5 {
        left: 40%;
        width: 3vw;
        height: 3vw;
        bottom: -4vw;
    }
    #s6 {
        left: 50%;
        width: 3vw;
        height: 3vw;
        bottom: -4vw;
    }
    #s7 {
        left: 60%;
        width: 8vw;
        height: 8vw;
        bottom: -9vw;
    }
    #s8 {
        left: 70%;
        width: 6vw;
        height: 6vw;
        bottom: -7vw;    
    }
    #s9{
        left: 80%;
        width: 3vw;
        height: 3vw;
        bottom: -4vw;
    }
    #s10{
        left: 90%;
        width: 3vw;
        height: 3vw;
        bottom: -4vw;    
    }
    /* ANIMATION */
    
    @media screen and (max-width:600px) {
        ::-webkit-scrollbar {
            display: none;
          }
        .dmain{
            width: 100%;
        }
        #navbar{
            height: 15vw;
            /* background-color: red; */
        }
        #navbtn{
            border-radius: 10vw;       
            width: 45%;
            margin-top: 1.2vw;
            height: 10vw;
            top: auto;
            box-shadow: 0px 0px 3vw white;
            bottom: 2%;
        }
        #bl{        
            font-size: 3vw;
        }
        .img{
            margin-top: 0%;
        }
        .pmain{
            font-size: 4vw;
        }
        .pmain{
           color: black;       
        }
        .input{
            font-size: 5vw;
        }
        #basvurbtn{
            font-size: 5vw;
        }
        #infos{
            width: 100%;
            margin-top: 10%;
        }
        #infos2{
            margin-top: 20vh;
            width: 100%;
        }
        .contact{
           
            font-size: 5vw;
            margin-right: 5vw;
            margin-top: 2vw;
            text-align: right;
        }
        #tu{
            float: right;
            margin-right: 5vw;
            font-size: 5vw;
            border-radius: 2vw;
            padding: 1vw;
            width: 50%;
            color: white;
            background-color: rgb(4, 176, 27);
        }
        #clos{
            width: 10vw;      
            border: 0.5vw solid white;  
            font-size: 3vw;
        }
        #phonediv{
            margin-top: 100vw;
        }
       
        .cube {
            width:  24vw;
            height: 24vw;
          }
          
          .face {    
            width: 24vw;
            height:24vw;
          }

        /* .f1 { transform: rotateY(  0deg)   translateZ(27vw); }
        .f2 { transform: rotateY(-90deg)   translateZ(27vw); }
        .f3 { transform: rotateY(180deg)   translateZ(27vw); }      
        .f4 { transform: rotateY( 90deg)   translateZ(27vw); } */
        .f1 { transform: rotateY(  0deg)   translateZ(33vw); }
        .f2 { transform: rotateY(45deg)    translateZ(33vw); }
        .f3 { transform: rotateY(90deg)    translateZ(33vw); }      
        .f4 { transform: rotateY(135deg)   translateZ(33vw); }
        .f5 { transform: rotateY(180deg)   translateZ(33vw); }
        .f6 { transform: rotateY(225deg)   translateZ(33vw); }
        .f7 { transform: rotateY(270deg)   translateZ(33vw); }      
        .f8 { transform: rotateY(315deg)   translateZ(33vw); }      
        #idiv{
            width: 40%;
            margin-left: 30%;
        }
        #iletisim{
            display: block;
        }
        .ciletisim{
            font-size: 4vw;
            margin-top: 2vw;
            margin-bottom: 2vw;
        }
        #iletisim{
                 
            height: 74vw;
            
        }
        #iltex{
            margin-left: 3vw;
        }
         
    }