@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
*{ margin: 0;
    padding: 0;
    box-sizing: border-box;
    }body{ font-family: 'Poppins', sans-serif;}

body{
   
 
    background-color: black; /* Arka plan siyah */
    
    margin: 0;
    padding: 0;
}


  /*------------------- NAVBAR -------------------- */

       .collapse ul li a{
        text-decoration: none;
        color: #000000;
        text-transform: uppercase;
    }
    .container-fluid{
        background-color: #ffffff;
    }
    .collapse ul li{
        margin: 0 20px;
        position: relative;
        display: inline-block;
        list-style: none;
    }
    
    .collapse ul li::after{
        content: '';
        height: 3px;
        width: 0;
        background: #000000;
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .collapse ul li:hover::after{
        width: 100%;
    }
    .navbar{
        width: 100%;
        display: none;
        background-color: #ffffff;
        border-bottom: rgb(185, 185, 185) 1px solid;
    }
    .navbar ul{
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        align-content: flex-end;
    }
    @media (max-width: 600px){
        .navbar {
            /* Mobilde navigasyonu gizle veya basitleştir */
           opacity: 1;
           background-color: #fff;
         }
         .navbar ul {
             background-color: rgb(255, 255, 255);
             opacity: 1;
           }
           .navbar ul a {
             color: #000000;
           }
           .container-fluid{
             opacity: 1;
 
           }
    }


    /*------------------- NAVBAR SON ---------------- */
    
    
    

    /*----------------------------------------------------------------- TEAM --------------------------------------------------------------*/
    .arkaplan{
        width: 100%;
        height: 1100px;
        background-color: rgb(255, 255, 255);
        justify-content: center;
        align-items: center;
        display: flex;
    }
    .büyükdiv{
        width: 95%;
        height: 90%;
        background-color: rgb(255, 255, 255);
        position: relative;
    }
    .people{
        position: absolute;
        top: 0px;
        right: 10px;
        bottom: 10px;
        left: 10px;
        background-color: rgb(255, 255, 255);
        display: grid;
        place-items: center;
        grid-template-columns: repeat(2, 900px); /* 3 sütun, her biri 100px genişliğinde */
        grid-gap: 10px; /* Elemanlar arasında boşluk */
 

    }
    .bir{
        background-color: rgb(245, 245, 245);
        width: 600px;
        height:300px;
        display: flex;
        gap: 5px;
        transition: transform 0.3s ease;
        border-radius: 6px;
    }.foto1:hover{ transition: transform 0.3s ease;box-shadow: 0 8px 15px rgba(185, 185, 185, 0.5); /* Gölgeli bir efekt */transform: scale(1.05); /* Div biraz büyüsün */                               }          
    .bir:hover{    box-shadow: 0 8px 15px rgba(185, 185, 185, 0.5); 
    transform: scale(1.05);}        .foto1      { height: 290px; width: 200px; background-color: #303030; margin-top: 5px; margin-left: 5px; background-image: url(./FOTO/MUHARREM\ PEKEMEN.png);  border-radius: 6px;}
             .biryazı h1 { margin-left: 10PX; margin-top: 25px; line-height: 10px; font-family: 'Roboto'; font-size: 25px;                               }
             .biryazı p  { margin-left: 20px; margin-top: 25px;font-size: 13px;                                                                          }
             .biryazı    { width: 350px; height: 290px;                                                                                                  }
             .biryazı h2 { font-size: 15px;margin-left: 10px; margin-top: 40px; line-height: 0%;color: #000000;                                        }
             .biryazı h6 { font-size: 13px;margin-left: 10px;font-weight: 400; color: #303030;}
             


    .iki{
        background-color: rgb(245, 245, 245); 
        width: 600px;
        height: 300px;
        display: flex;
        gap: 5px;
        transition: transform 0.3s ease;
        border-radius: 6px;

    }
               .iki:hover{    box-shadow: 0 8px 15px rgb( 185, 185, 185, 0.5); 
                              transform: scale(1.05);}

               .foto2      { transition: transform 0.3s ease;height: 290px; width: 200px; background-color: #303030; margin-top: 5px; margin-left: 5px; background-image: url(./FOTO/ABDULLAH\ PEKEMEN.png); border-radius: 6px;}
               .foto2:hover{ box-shadow: 0 8px 15px rgba(185, 185, 185, 0.5); /* Gölgeli bir efekt */transform: scale(1.05); /* Div biraz büyüsün */                               }
               .ikiyazı h1 { margin-left: 10PX; margin-top: 25px; line-height: 10px; font-family: 'Roboto'; font-size: 25px;                                                   }
               .ikiyazı p  { margin-left: 20px; margin-top: 25px;font-size: 13px;                                                                                              }
               .ikiyazı    { width: 350px; height: 290px;                                                                                                                      }
               .ikiyazı h2 { font-size: 15px;margin-left: 10px; margin-top: 40px; line-height: 0%;color: #000000;                                                            }
               .ikiyazı h6 { font-size: 13px;margin-left: 10px;font-weight: 400; color: #303030;}

    
    .üc{
        background-color: rgb(245, 245, 245);
        width: 600px;
        height: 300px;
        display: flex;
        gap: 5px;
        transition: transform 0.3s ease;
        border-radius: 6px;
    }          
                .üc:hover{    box-shadow: 0 8px 15px rgb(185, 185, 185, 0.5); 
                transform: scale(1.05);}
                .foto3:hover{ box-shadow: 0 8px 15px rgba(185, 185, 185, 0.5); /* Gölgeli bir efekt */transform: scale(1.05); /* Div biraz büyüsün */                               }
               .foto3     { transition: transform 0.3s ease;height: 290px; width: 200px; background-color: #303030; margin-top: 5px; margin-left: 5px; background-image: url(./FOTO/SABRİ\ ÇIKRIKÇI.png);        border-radius: 6px;}
               .ücyazı h1 { margin-left: 10PX; margin-top: 25px; line-height: 10px; font-family: 'Roboto'; font-size: 25px;}
               .ücyazı p  { margin-left: 20px; margin-top: 25px;font-size: 13px;}
               .ücyazı    { width: 350px; height: 290px;}
               .ücyazı h2 { font-size: 15px;margin-left: 10px; margin-top: 40px; line-height: 0%;color: #000000;}
               .ücyazı h6 { font-size: 13px;margin-left: 10px;font-weight: 400; color: #303030;}
               

    .dort{
        background-color: rgb(245, 245, 245);
        width: 600px;
        height: 300px;
        display: flex;
        gap: 5px;
        transition: transform 0.3s ease;
        border-radius: 6px;
    }          
    .dort:hover{    box-shadow: 0 8px 15px rgb( 185, 185, 185, 0.5); 
    transform: scale(1.05);}            .foto4       { transition: transform 0.3s ease;height: 290px; width: 200px; background-color: #303030; margin-top: 5px; margin-left: 5px; background-image: url(./FOTO/EMRE\ CIKRIKCI.png);        border-radius: 6px;}
    .foto4:hover{ box-shadow: 0 8px 15px rgba(185, 185, 185, 0.5); /* Gölgeli bir efekt */transform: scale(1.05); /* Div biraz büyüsün */                               }
                 .dortyazı h1 { margin-left: 10PX; margin-top: 25px; line-height: 10px; font-family: 'Roboto'; font-size: 25px;}
                 .dortyazı p  { margin-left: 20px; margin-top: 25px;font-size: 13px;}
                 .dortyazı    { width: 350px; height: 290px;}
                 .dortyazı h2 { font-size: 15px;margin-left: 10px; margin-top: 40px; line-height: 0%;color: #000000;}
                 .dortyazı h6 { font-size: 13px;margin-left: 10px;font-weight: 400; color: #303030;}


    .bes{
        background-color: rgb(245, 245, 245);
        width: 600px;
        height: 300px;
        display: flex;
        gap: 5px;
        transition: transform 0.3s ease;
        border-radius: 6px;
    }          
    .bes:hover{    box-shadow: 0 8px 15px rgb( 185, 185, 185, 0.5); 
    transform: scale(1.05);}            .foto5      { transition: transform 0.3s ease;height: 290px; width: 200px; background-color: #303030; margin-top: 5px; margin-left: 5px; background-image: url(./FOTO/ESRA\ ÇOBAN.png);        border-radius: 6px;}
    .foto5:hover{ box-shadow: 0 8px 15px rgba(185, 185, 185, 0.5); /* Gölgeli bir efekt */transform: scale(1.05); /* Div biraz büyüsün */                               }
                 .besyazı h1 { margin-left: 10PX; margin-top: 25px; line-height: 10px; font-family: 'Roboto'; font-size: 25px;}
                 .besyazı p  { margin-left: 20px; margin-top: 25px;font-size: 13px;}
                 .besyazı    { width: 350px; height: 290px;}
                 .besyazı h2 { font-size: 15px;margin-left: 10px; margin-top: 40px; line-height: 0%;color: #000000;}
                 .besyazı h6 { font-size: 13px;margin-left: 10px;font-weight: 400; color: #303030;}


    .altı{
        background-color: rgb(245, 245, 245);
        width: 600px;
        height: 300px;
        display: flex;
        gap: 5px;
        transition: transform 0.3s ease;
        border-radius: 6px;
    }          
    .altı:hover{    box-shadow: 0 8px 15px rgb( 185, 185, 185, 0.5); 
    transform: scale(1.05);}             .foto6       { transition: transform 0.3s ease;height: 290px; width: 200px; background-color: #303030; margin-top: 5px; margin-left: 5px; background-image: url(./FOTO/NGR.jpg);        border-radius: 6px;}
    .foto6:hover{ box-shadow: 0 8px 15px rgba(185, 185, 185, 0.5); /* Gölgeli bir efekt */transform: scale(1.05); /* Div biraz büyüsün */                               }
                  .altıyazı h1 { margin-left: 10PX; margin-top: 25px; line-height: 10px; font-family: 'Roboto'; font-size: 25px;}
                  .altıyazı p  { margin-left: 20px; margin-top: 25px;font-size: 13px;}
                  .altıyazı    { width: 350px; height: 290px;}
                  .altıyazı h2 { font-size: 15px;margin-left: 10px; margin-top: 40px; line-height: 0%;color: #000000;}
                  .altıyazı h6 { font-size: 13px;margin-left: 10px;font-weight: 400; color: #303030;} 


    .yedi{
        background-color: rgb(245, 245, 245);
        width: 600px;
        height: 300px;
        display: flex;
        gap: 5px;
        transition: transform 0.3s ease;
        border-radius: 6px;
    }          
    .yedi:hover{    box-shadow: 0px 0px 20px rgb(185, 185, 185, 0.5); 
    transform: scale(1.05);}            .foto7       { transition: transform 0.3s ease;height: 290px; width: 200px; background-color: #303030; margin-top: 5px; margin-left: 5px; background-image: url(./FOTO/FURKAN\ CEVHER.png);        border-radius: 6px; }
                 .yediyazı h1 { margin-left: 10PX; margin-top: 25px; line-height: 10px; font-family: 'Roboto'; font-size: 25px;                              }
                 .foto7:hover{ box-shadow: 0px 0px 15px rgb(185, 185, 185, 0.5); /* Gölgeli bir efekt */transform: scale(1.05); /* Div biraz büyüsün */    }
                 .yediyazı p  { margin-left: 20px; margin-top: 25px;font-size: 13px;                                                                         }
                 .yediyazı    { width: 350px; height: 290px;                                                                                                 }
                 .yediyazı h2 { font-size: 15px;margin-left: 10px; margin-top: 40px; line-height: 0%;color: #000000;                                       }
                 .yediyazı h6 { font-size: 13px;margin-left: 10px;font-weight: 400; color: #303030;                                                        }
                 .yediyazı a  { text-decoration: none; color: #000000; line-height: 0%; margin-top: 0%;                                                    }



                 .sekiz{
                    background-color: rgb(245, 245, 245);
                    width: 600px;
                    height: 300px;
                    display: flex;
                    gap: 5px;
                    transition: transform 0.3s ease;
                    border-radius: 6px;
                }          
                .sekiz:hover{    box-shadow: 0px 0px 20px rgb(185, 185, 185, 0.5); 
                transform: scale(1.05);}            .foto8       { transition: transform 0.3s ease;height: 290px; width: 200px; background-color: #303030; margin-top: 5px; margin-left: 5px; background-image: url(./FOTO/);        border-radius: 6px; }
                             .sekizyazı h1 { margin-left: 10PX; margin-top: 25px; line-height: 10px; font-family: 'Roboto'; font-size: 25px;                              }
                             .foto8:hover{ box-shadow: 0px 0px 15px rgb(185, 185, 185, 0.5); /* Gölgeli bir efekt */transform: scale(1.05); /* Div biraz büyüsün */                               }
                             .sekizyazı p  { margin-left: 20px; margin-top: 25px;font-size: 13px;                                                                         }
                             .sekizyazı    { width: 350px; height: 290px;                                                                                                 }
                             .sekizyazı h2 { font-size: 15px;margin-left: 10px; margin-top: 40px; line-height: 0%;color: #000000;                                       }
                             .sekizyazı h6 { font-size: 13px;margin-left: 10px;font-weight: 400; color: #303030;                                                        }
                             .sekizyazı a  { text-decoration: none; color: #000000; line-height: 0%; margin-top: 0%;                                                                                               }
            
            

                 @media (max-width: 820px) {
                    .people {
                        display: block;
                        position: relative;
                    }
                    .box {
                        width: 100%;
                        margin: 10px 0;
                    }

                    
            /*-----------BİR------------*/
					 
                    .bir{width: 385px; height: 230px;}.biryazı{width: 220px;height: 220px; }
                         .biryazı p{font-size: 11px;margin-top: 0%; }.biryazı h1{font-size: 17px;}
                    .biryazı h2{font-size: 11px; width: 100%;height: 10px;margin-top: 0%;}
                         .foto1{ height: 220px;width: 150px;background-image: url(./FOTO/M.p.png);}
                    .biryazı h6{ font-size:  12px;} 
					 
            /*-----------BİR------------*/



            /*-----------İKİ------------*/
					 
                    .iki{width: 385px; height: 230px;}.ikiyazı{width: 220px;height: 220px;}
                          .ikiyazı p{font-size: 11px;margin-top: 0%; }.ikiyazı h1{font-size: 17px;}
                    .ikiyazı h2{font-size: 11px; width: 100%;height: 10px;margin-top: 0%;}
                          .foto2{ height: 220px;width: 150px; background-image: url(./FOTO/A.p.png);}
                    .ikiyazı h6{ font-size:  12px;}
					 
            /*-----------İKİ------------*/



            /*-----------ÜC------------*/
					 
                    .üc{width: 385px; height: 230px;}.ücyazı{width: 220px;height: 220px;}
                          .ücyazı p{font-size: 11px;margin-top: 0%; }.ücyazı h1{font-size: 17px;}
                    .ücyazı h2{font-size: 11px; width: 100%;height: 10px;margin-top: 0%;}
                         .foto3{ height: 220px;width: 150px; background-image: url(./FOTO/S.ç.png);}
                    .ücyazı h6{ font-size:  12px;}
					 
            /*-----------ÜC------------*/        



            /*-----------DORT------------*/
					 
                    .dort{width: 385px; height: 230px;}.dortyazı{width: 220px;height: 220px;}
                         .dortyazı p{font-size: 11px;margin-top: 0%; }.dortyazı h1{font-size: 17px;}
                    .dortyazı h2{font-size: 11px; width: 100%;height: 10px;margin-top: 0%;}
                         .foto4{ height: 220px;width: 150px; background-image: url(./FOTO/E.Ç.Ç.png);}
                    .dortyazı h6{ font-size:  12px;}
					 
            /*-----------DORT------------*/        



            /*-----------BES------------*/
                    .bes{width: 385px; height: 230px;}.besyazı{width: 220px;height: 220px;}
                         .besyazı p{font-size: 11px;margin-top: 0%; }.besyazı h1{font-size: 17px;}
                    .besyazı h2{font-size: 11px; width: 100%;height: 10px;margin-top: 0%;}
                         .foto5{ height: 220px;width: 150px; background-image: url(./FOTO/E.Ç.png);}
                    .besyazı h6{ font-size:  12px;}
            /*-----------BES------------*/ 
            

            
            /*-----------ALTI------------*/
					 
                    .altı{width: 385px; height: 230px;}.altıyazı{width: 220px;height: 220px;}
                         .altıyazı p{font-size: 11px;margin-top: 0%; }.altıyazı h1{font-size: 17px;}
                    .altıyazı h2{font-size: 11px; width: 100%;height: 10px;margin-top: 0%;}
                         .foto6{ height: 220px;width: 150px; background-image: url(./FOTO/N.a.png);}
                    .altıyazı h6{ font-size:  12px;}
					 
            /*-----------ALTI------------*/ 
            
            

            /*-----------YEDİ------------*/
					 
                    .yedi{width: 385px; height: 230px;}.yediyazı{width: 220px;height: 220px;}
                         .yediyazı p{font-size: 11px;margin-top: 0%; }.yediyazı h1{font-size: 17px;}
                    .yediyazı h2{font-size: 11px; width: 100%;height: 10px;margin-top: 0%;}
                         .foto7{ height: 220px;width: 150px; background-image: url(./FOTO/F.c.png);}
                    .yediyazı h6{ font-size:  12px;}
					 
            /*-----------YEDİ------------*/    
        

            
            /*-----------SEKİZ------------*/
					 
                    .sekiz{width: 385px; height: 230px;}.sekizyazı{width: 220px;height: 220px;}
                         .sekizyazı p{font-size: 11px;margin-top: 0%; }.sekizyazı h1{font-size: 17px;}
                    .sekizyazı h2{font-size: 11px; width: 100%;height: 10px;margin-top: 0%;}
                         .foto8{ height: 220px;width: 150px; background-image: url(./FOTO/);}
                    .sekizyazı h6{ font-size:  12px;}
					 
            /*-----------SEKİZ------------*/ 
            
            

                
        }