.video_popup{
    width: 100%;
    height: 100vh;
    position: fixed;
    background-color: rgba(0,0,0,0.5);
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 1000;
    display: none;
}

.video_popup .video_kapat{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
	background-color: rgba(0,0,0,0.2);
	z-index: 2;
}

.video_popup .side_buton{
    width: 40px;
    height: 40px;
    position: absolute;
    top: calc(50% - 20px);
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: all 200ms;
    user-select: none;
}

.video_popup .side_buton:before{ content:''; width: 14px; height: 14px; float: left; position: relative; background-color: #3d3d3d; mask: url(../images/o5.svg) no-repeat center / contain; -webkit-mask: url(../images/o5.svg) no-repeat center / contain; }
.video_popup .side_buton:hover{ transform: scale(1.1); }
.video_popup .side_buton:active{ transform: scale(0.9); }

.video_popup .left_buton{ left: 20px; }
.video_popup .left_buton:before{ transform: rotate(180deg); }
.video_popup .right_buton{ right: 20px; }

.video_popup iframe{
    width: calc(100% - 200px);
    height: calc(100% - 200px);
    position: absolute;
    margin: 100px;
    border: none;
    outline: none;
	z-index: 4;
}




.hakkimizda_col{
    width: 1800px;
    float: right;
    position: relative;
    margin: 200px 0px;
}

.hakkimizda_col .img1{
    width: 30%;
    float: left;
    position: relative;
    border-radius: 15px;
    margin-right: 100px;
    margin-bottom: 100px;
}

.hakkimizda_col .img1 .padding{
    width: 100%;
    padding-top: 150%;
    float: left;
    position: relative;
    border-radius: 15px;
}

.hakkimizda_col .img1 .padding::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    border:3px dashed #ff090e;
    top: 20px;
    left: -20px;
    border-radius: 15px;
}

.hakkimizda_col .img1 .padding img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    object-fit: cover;
    border-radius: 15px;
}

.hakkimizda_col .text{
    width: calc(70% - 100px);
    float: left;
    position: relative;
    margin-bottom: 100px;
}

.hakkimizda_col .text .title{
    width: 100%;
    line-height: 1.2;
    letter-spacing: 2px;
    font-size: 60px;
    font-weight: 900;
    float: left;
    position: relative;
    color: #fff;
    margin-bottom: 15px;
    text-shadow: -3px 3px 0px #ff090e;
}

.hakkimizda_col .text .des{
    width: 100%;
    line-height: 2;
    letter-spacing: 2px;
    font-size: 16px;
    float: left;
    position: relative;
    color: #fff;
}


.hakkimizda_col .video{
    width: calc(70% - 100px);
    float: left;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
}

.hakkimizda_col .video .padding{
    width: 100%;
    padding-top: 55%;
    float: left;
    position: relative;
}

.hakkimizda_col .video .padding:before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: rgba(0,0,0,0.6);
    z-index: 2;
    transition: all 300ms;
}

.hakkimizda_col .video .padding img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    object-fit: cover;
    z-index: 1;
}

.hakkimizda_col .video .padding:after{ 
    content:''; 
    width:80px; 
    height: 80px; 
    position: absolute; 
    z-index: 11;
    top: calc(50% - 40px);
    left: calc(50% - 40px);
    background-color: #fff; 
    transition: all 300ms;
    mask: url(../images/play_icon.svg) no-repeat center / contain; 
    -webkit-mask: url(../images/play_icon.svg) no-repeat center / contain; 
}


.hakkimizda_col .video:hover .padding:after{ 
    width:100px; 
    height: 100px; 
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}



.hakkimizda_col.giris .img1{
    animation: slideInLeft ease-out forwards; /* Animasyon */
    animation-duration: 0.4s;
    animation-delay: 0s;
    animation-fill-mode: both;
}
 
.hakkimizda_col.giris .text{
    animation: slideInRight ease-out forwards; /* Animasyon */
    animation-duration: 0.4s;
    animation-delay: 0.1s;
    animation-fill-mode: both;
}
  
.hakkimizda_col.giris .video{
    animation: slideInBottom ease-out forwards; /* Animasyon */
    animation-duration: 0.4s;
    animation-delay: 0.2s;
    animation-fill-mode: both;
}
 


@keyframes slideInLeft {
  0% { left: -1000px; }
  100% { left: 0px; }
}

@keyframes slideInRight {
  0% { right: -1000px; }
  100% { right: 0px; }
}

@keyframes slideInUp {
  0% { top: -1000px; }
  100% { top: 0px; }
}

@keyframes slideInBottom {
  0% { bottom: -1000px; }
  100% { bottom: 0px; }
}



.sss{
    width: 100%;
    float: left;
    position: relative;
    margin: 150px 0px;
}

.sss .title{
    width: 100%;
    line-height: 1.2;
    float: left;
    position: relative;
    font-size: 40px;
    letter-spacing: 2px;
    margin-bottom: 25px;
    color: #fff;
    font-weight: 900;
}

.sss .sss_img{
    width: 400px;
    float: left;
    position: relative;
    z-index: 1;
}

.sss .sss_img .ss_bg{
    width: 110%;
    height: 100%;
    position: relative;
    float: left;
    z-index: 4;
    right: -150px;
}

.sss .sss_img .ss_si1{
    width: 80px;
    position: absolute;
    z-index: 5;
    top: 20%;
    left: 80px;
}

.sss .sss_img .ss_si2{
    width: 80px;
    position: absolute;
    z-index: 5;
    top: 45%;
    left: 40px;
}

.sss .sss_img .ss_si3{
    height: 100%;
    position: absolute;
    top: 0;
    left: -30px;
    z-index: 1;
    opacity: 0.2;
}

.sss .sss_con{
    width: calc(100% - 500px);
    float: left;
    position: relative;
    margin-left: 100px;
    z-index: 3;
}


.sss .sss_con .sss_str{
    width: 100%;
    float: left;
    position: relative;
    padding: 12px 0px;
    cursor: pointer;
    margin-top: -1px;
}

.sss .sss_con .sss_str p{
    width: calc(100% - 40px);
    line-height: 1.4;
    font-size: 18px;
    letter-spacing: 1px;
    float: left;
    position: relative;
    font-weight: 600;
}

.sss .sss_con .sss_str:before{ 
    content: '';
    width: 24px;
    height: 24px;
    position: relative;
    float: right;
    background-color: #ff090e;
    transform: rotate(90deg);
    transition: all 300ms;
    mask: url(../images/arrow-right.svg) no-repeat center / contain;
    -webkit-mask: url(../images/arrow-right.svg) no-repeat center / contain;
}

.sss .sss_con .sss_str .cevap{
    width: calc(100% - 0px);
    line-height: 1.4;
    font-size: 15px;
    letter-spacing: 1px;
    float: left;
    position: relative;
    color: #fff;
    padding: 10px 0px 0px 10px;
    box-sizing: border-box;
    overflow: hidden;
    transition: all 300ms;
}

.sss .sss_con .sss_str.hide .cevap{
    height: 0px;
    padding: 0px;
}

.sss .sss_con .sss_str.hide:before{ transform: rotate(0deg); background-color: #fff; }

.sss.giris .sss_con .sss_str{
    animation: slideInRight ease-out forwards; /* Animasyon */
    animation-duration: 0.4s;
    animation-fill-mode: both;
}
 




.hizmetler_col{
    width: 100%;
    float: left;
    position: relative;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 200px 0px;
    overflow: hidden;
}

.hizmetler_col .title{
    width:100%;
    float: left;
    position: relative;
    font-size: 30px;
    text-align: center;
    margin-bottom: 100px;
    color: #fff;
    font-weight: 900;
    letter-spacing: 2px;
    z-index: 3;
}

.hizmetler_col::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: rgba(0,0,0,0.6);
    z-index: 1;
    transition: all 300ms;
}


.hizmet_list {
    display: flex;
    overflow: hidden; /* Taşan kısımları gizler */
    white-space: nowrap; /* Elemanların aynı satırda kalmasını sağlar */
    position: relative;
    float: left;
    z-index: 15;
}

.next_btn, .prev_btn {
    left: 50%;
    position: absolute;
    color: #fff;
    cursor: pointer;
    z-index: 44;
    bottom: 150px;
    transform: translateX(-50%);
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 1;
    padding: 8px 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border:1px solid #7d7d7d;
    border-radius: 15px;
}

.next_btn::before, .prev_btn::before{
    content: '';
    width: 24px;
    height: 14px;
    position: relative;
    float: left;
    background-color: #fff; 
    transition: all 300ms;
    mask: url(../images/arrow_2.svg) no-repeat center / contain; 
    -webkit-mask: url(../images/arrow_2.svg) no-repeat center / contain; 
}
  
.next_btn{ margin-left: -40px;  }
.prev_btn{ margin-left: 40px; flex-direction: row-reverse; }

.next_btn::before{  }
.prev_btn::before{ transform: rotate(180deg);  float: right; }

.hizmet_col{
    width: 430px;
    float: left;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    margin:0px 30px;
}

.hizmet_col .padding{
    width: 100%;
    float: left;
    position: relative;
    padding-top: 150%;
}

.hizmet_col .padding .cont{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

.hizmet_col .padding .cont span{
    width: 40px;
    height: 25px;
    line-height: 1;
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 25px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #fff;
    z-index: 5;
}

.hizmet_col .padding .cont::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: rgba(0,0,0,0.6);
    z-index: 2;
    transition: all 300ms;
}

.hizmet_col .padding .cont img{
    width: 100%;
    height: 100%;
    position: relative;
    top: 0px;
    left: 0px;
    object-fit: cover;
    z-index: 1;
}

.hizmet_col .padding .cont .info{
    width: 100%;
    position: absolute;
    padding: 20px;
    box-sizing: border-box;
    top: calc(100% - 130px);
    left: 0px;
    z-index: 5;
    transition: all 300ms;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 90px, rgba(0, 0, 0, 0) 110px);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 90px, rgba(0, 0, 0, 0) 110px);
}

.hizmet_col .padding .cont .info .title{
    width: 100%;
    line-height: 1.4;
    position: relative;
    float: left;
    margin-bottom: 10px;
    letter-spacing: 1.5px;
    font-weight: 900;
    color: #fff;
    font-size: 25px;
    white-space: normal;
    text-align: left;
}

.hizmet_col .padding .cont .info .des{
    width: 100%;
    line-height: 1.6;
    position: relative;
    float: left;
    letter-spacing: 1px;
    color: #fff;
    font-size: 16px;
    white-space: normal;
    text-align: left;
}


.hizmet_col:hover .padding .cont .info{
    padding: 20px;
    top: 60px;

    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 90px, rgba(0, 0, 0, 1) 110px);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 90px, rgba(0, 0, 0, 1) 110px);
}

.hizmet_col:hover .padding .cont::before{
    content: '';
    background-color: rgba(0,0,0,0.95);
}











.son_haberler{
    width: 100%;
    float: left;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.son_haberler .title{
    width: 100%;
    line-height: 1.2;
    float: left;
    position: relative;
    font-size: 40px;
    letter-spacing: 2px;
    margin-bottom: 25px;
    color: #fff;
    font-weight: 900;
}

.son_haberler .haber_col{
    width: calc(33.33% - 40px);
    float: left;
    position: relative;
}


.son_haberler .haber_col .img{
    width: 100%;
    float: left;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
}

.son_haberler .haber_col .img .padding{
    width: 100%;
    padding-top: 60%;
    float: left;
    position: relative;
}

.son_haberler .haber_col .img .padding img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    object-fit: cover;
}

.son_haberler .haber_col .cont{
    width: 100%;
    float: left;
    position: relative;
    margin-top: 15px;
}

.son_haberler .haber_col .cont .title{
    width: 100%;
    float: left;
    position: relative;
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: 1px;
    color: #fff;
    margin-bottom: 10px;
    font-weight: 600;
}

.son_haberler .haber_col .cont .des{
    width: 100%;
    float: left;
    position: relative;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: 1px;
    color: #fff;
    margin-bottom: 10px;
}

.son_haberler .haber_col .tarih{
    width: 100%;
    float: left;
    position: relative;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 1px;
    color: #fff;
    margin-bottom: 10px;
    font-weight: 600;
}

.son_haberler.giris .haber_col{
    animation: slideInBottom ease-out forwards; /* Animasyon */
    animation-duration: 0.4s;
    animation-fill-mode: both;
}
 










.sayaclar{
    width: 100%;
    float: left;
    position: relative;
    margin: 150px 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.sayaclar .sayac{
    width: calc(33.33% - 0px);
    float: left;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0px;
}

.sayaclar .sayac .sayi{
    width: 100%;
    height: 100px;
    float: left;
    position: relative;
    font-size: 100px;
    line-height: 1;
    letter-spacing: 1px;
    font-weight: 900;
    color: #616161;
    text-align: center;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sayaclar .sayac p{
    width: 100%;
    position: absolute;
    font-size: 20px;
    text-align: center;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.4;
    color: #fff;
    z-index: 3;
    text-shadow: 0 0 10px black;
}

.sayaclar .syc_1{ width:100%; }
.sayaclar .syc_2{ width:50%; }
.sayaclar .syc_3{ width:33.33%; }
.sayaclar .syc_4{ width:25%; }
.sayaclar .syc_5{ width:20%; }

.sayaclar .syc_6{ width:33.33%; }
.sayaclar .syc_7{ width:25%; }
.sayaclar .syc_8{ width:25%; }
.sayaclar .syc_9{ width:20%; }
.sayaclar .syc_10{ width:20%; }









.tuning_container{
    width: 100%;
    float: left;
    position: relative;
    background-color: #111111;
    padding: 40px 0px;
}

.tuning_container.red{background-color: #ff090e;}

.tuning_container .title{
    width: 100%;
    float: left;
    position: relative;
    line-height: 1.2;
    font-size: 45px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #fff;
    margin-bottom: 20px;
}

.tuning_col{
    width: 100%;
    float: left;
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0px 20px;
    -ms-flex-wrap: wrap;
    box-sizing: border-box;
}

.tuning_input{
    width: calc(25% - 30px);
    float: left;
    position: relative;
}

.tuning_input p{
    width: 100%;
    line-height: 1.4;
    float: left;
    position: relative;
    font-size: 13px;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 3px;
}

.tuning_select{
    width: 100%;
    height: 50px;
    float: left;
    position: relative;
    box-sizing: border-box;
    border-radius: 5px;
    border:none;
    outline:none;
    background-color: #7b0305;
    color: #fff;
    padding: 5px 10px;
}

.tuning_buton{
    width: calc(80px - 0px);
    height: 40px;
    float: left;
    position: relative;
    box-sizing: border-box;
    background-color: #fff;
    color: #ff090e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    letter-spacing: 1px;
    border-radius: 5px;
    border:none;
    outline:none;
    cursor: pointer;
    margin-top: 28px;
    font-weight: 600;
}



.tuning_degerler{
    width: 100%;
    float: left;
    position: relative;
    padding: 0px 20px;
    box-sizing: border-box;
}

.arac_bilgi_hdr{
    width: 100%;
    float: left;
    position: relative;
    margin: 20px 0px;
}

.arac_logo {
    width: 150px;
    height: 150px;
    float: left;
    position: relative;
    transform-style: preserve-3d;
    animation: rotate 15s infinite;
}

.arac_logo img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Derinlik katmanları */
.arac_logo .layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center;
}

.arac_logo .layer:nth-child(1) {
    transform: translateZ(0);
}

.arac_logo .layer:nth-child(2) {
    transform: translateZ(-5px);
    filter: grayscale(100%) brightness(0.8) contrast(1.2);
}

.arac_logo .layer:nth-child(3) {
    transform: translateZ(-10px);
    filter: grayscale(100%) brightness(0.8) contrast(1);
}

.arac_logo .layer:nth-child(4) {
    transform: translateZ(-15px);
    filter: grayscale(100%) brightness(0.9) contrast(1);
}

.arac_logo .layer:nth-child(5) {
    transform: translateZ(-20px);
    filter: grayscale(100%) brightness(1) contrast(1);
}

/* Animasyon */
@keyframes rotate {
    0% { transform: rotateY(-20deg) rotateX(-20deg); }
    50% { transform: rotateY(20deg) rotateX(20deg); }
    100% { transform: rotateY(-20deg) rotateX(-20deg); }
}

.arac_bilgi_hdr .arac_blg{
    width: calc(100% - 200px);
    float: left;
    position: relative;
    margin-left: 50px;
}

.arac_bilgi_hdr .arac_blg h2{
    width: 100%;
    float: left;
    position: relative;
    letter-spacing: 1.5px;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 10px;
}

.arac_bilgi_hdr .arac_blg b{
    width: 150px;
    float: left;
    position: relative;
    letter-spacing: 1.5px;
    line-height: 1;
    color: #fff;
    font-size: 13px;
    margin: 5px 0px;
}

.arac_bilgi_hdr .arac_blg p{
    width: calc(100% - 150px);
    float: left;
    position: relative;
    letter-spacing: 1.5px;
    line-height: 1;
    color: #fff;
    font-size: 13px;
    margin: 5px 0px;
}


.tabs{
    height: 40px;
    float: left;
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: none;
    outline: none;
    cursor: pointer;
    margin: 7px 5px;
    padding: 5px 15px;
    text-transform: uppercase;
    border: 1px solid #ff090e;
}

.tabs.aktif{ box-shadow: 0px 0px 9px 2px #ff090e; }
.tabs:hover{ box-shadow: 0px 0px 6px 0px #ff090e; }

.tabs p{
    width: 100%;
    float: left;
    position: relative;
    font-size: 13px;
    letter-spacing: 1px;
    color: #fff;
    font-weight: 600;
    z-index: 5;
}

.tabs:after{
    content: '';
    width: 100%;
    height: 0px;
    position: absolute;
    background-color: #ff090e;
    transition: all 300ms;
    top: 0px;
    left: 0px;
    z-index: 2;
}

.tabs.aktif:after{ 
    height: 100%;
}

.tabs:before{
    content: '';
    width: 0px;
    height: 0px;
    position: absolute;
    bottom: -5px;
    background-color: #ff090e;
    transform: rotate(45deg);
    transition: all 300ms;
    z-index: 1;
}

.tabs.aktif:before{ 
    width: 10px;
    height: 10px;
}


.stage_content{
    width: 100%;
    float: left;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    margin-top: 20px;
}

.stage_content .tuning_str{
    width: calc(100% - 110px);
    float: left;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
}

.stage_content .stun_isim{
    width: 165px;
    float: left;
    position: relative;
    padding: 45px 20px;
    box-sizing: border-box;
    font-size: 15px;
    color: #fff;
    font-weight: 600;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    margin: 2px 0px;
}

.stage_content .stun_tng{
    width: calc(33.33% - 66px);
    float: left;
    position: relative;
    padding: 35px 20px;
    box-sizing: border-box;
    margin: 5px 5px;
    border: 1px solid #535353;
    border-radius: 5px;
}

.stage_content .stun_tng b{ display: none; }

.stage_content .stun_tng p{
    width: 100%;
    float: left;
    position: relative;
    color: #fff;
    font-size: 40px;
    font-weight: 900;
    letter-spacing: 2px;
    line-height: 1;
}

.stage_content .stun_tng p span{
    font-size: 14px;
}

.stage_content .stun_grafik{
    width: 110px;
    float: left;
    position: relative;
    box-sizing: border-box;
    color: #fff;
    font-size: 40px;
    font-weight: 900;
    letter-spacing: 2px;
    line-height: 1;
    margin: 5px 0px;
    border: 1px solid #535353;
    border-radius: 5px;
}


.stage_content .title{ 
    font-size: 15px;
    color: #fff;
    padding: 20px 20px;
    text-transform: uppercase;
    font-weight: 600;
}

.stage_content .bg_red{ background-color: #ff090e; border:none; }



.go_videolar_cont{
    width: 100%;
    float: left;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    justify-content: space-around;
    margin: 0px 0px;
}

.stage_content .video_kapak.short{
    width: 400px;
    float: left;
    position: relative;
    cursor: pointer;
    margin: 40px;
}

.stage_content .video_kapak:before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: rgba(0,0,0,0.6);
    z-index: 2;
    transition: all 300ms;
    border-radius: 15px;
}

.stage_content .video_kapak:after{
    content:''; 
    width:80px; 
    height: 80px; 
    position: absolute; 
    z-index: 11;
    top: calc(50% - 40px);
    left: calc(50% - 40px);
    background-color: #fff; 
    transition: all 300ms;
    mask: url(../images/play_icon.svg) no-repeat center / contain; 
    -webkit-mask: url(../images/play_icon.svg) no-repeat center / contain; 
}

.stage_content .video_kapak.short .video_pdn{
    width: 100%;
    padding-top: 160%;
    float: left;
    position: relative;
    z-index: 1;
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
}

.stage_content .video_kapak.video{
    width: 550px;
    float: left;
    position: relative;
}

.stage_content .video_kapak.video .video_pdn{
    width: 100%;
    padding-top: 55%;
    float: left;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
}

.stage_content .video_kapak .video_pdn img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    object-fit: cover;
}

.stage_content .video_kapak .title{
    width: auto;
    font-size: 45px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 2px;
    line-height: 1;
    right: -10%;
    text-shadow: -5px 5px 10px #000, 0px 0px 20px #000;
    z-index: 3;
    position: absolute;
    bottom: 20px;
    transition: all 200ms;
    padding: 0px;
    margin: 0px;
}

.stage_content .video_kapak:hover .title{ bottom: -30px; }


.insta_reel{
    width: 400px;
    float: left;
    position: relative;
    margin: 40px;
}

.insta_reel .insta_reel_cnt{
    width: 100%;
    padding-top: 160%;
    float: left;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
}

.insta_reel .insta_reel_cnt .instagram-media{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    min-width: 0px!important;
}

.insta_reel .title{
    width: auto;
    font-size: 45px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 2px;
    line-height: 1;
    right: -20%;
    text-shadow: -5px 5px 10px #000, 0px 0px 20px #000;
    z-index: 3;
    position: absolute;
    bottom: 20px;
    transition: all 200ms;
    padding: 0px;
    margin: 0px;
}

.insta_reel:hover .title{ bottom: -30px; }


.go_metin{
    width: 100%;
    float: left;
    position: relative;
    margin-top: 50px;
    line-height: 2;
    letter-spacing: 2px;
    color: #fff;
}

.grafik {
    position: relative;
    width: 110px;
    height: 110px;
}

.chart {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.background {
    fill: none;
    stroke: #aaaaaa;
    stroke-width: 5;
}

.foreground {
    fill: none;
    stroke: #ff090e;
    stroke-width: 5;
    stroke-linecap: round;
}

.percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 26px;
    font-weight: 900;
    color: #ff090e;
}

.percentage span{ font-size: 13px; }









.bayilik_col{
    width: 100%;
    float: left;
    position: relative;
    border-radius: 15px;
    padding: 50px;
    box-sizing: border-box;
    margin-top: 150px;
    background: linear-gradient(162deg, rgba(255, 9, 14, 1), rgba(168, 0, 3, 1), rgba(204, 0, 0, 1));
    -webkit-background: linear-gradient(162deg, rgba(255, 9, 14, 1), rgba(168, 0, 3, 1), rgba(204, 0, 0, 1));
    -moz-background: linear-gradient(162deg, rgba(255, 9, 14, 1), rgba(168, 0, 3, 1), rgba(204, 0, 0, 1));
    box-shadow: 0px 0px 0px 0px #ff090e;
    transition: all 200ms;
}

.bayilik_col:hover{
    animation: shadow_anim 4s infinite;
}


@keyframes shadow_anim {
    0% { box-shadow: 0px 0px 10px 0px #ff090e; }
    50% { box-shadow: 0px 0px 25px 0px #ff090e; }
    100% { box-shadow: 0px 0px 10px 0px #ff090e; }
}



.bayilik_col .title{
    width: 100%;
    line-height: 1.2;
    letter-spacing: 2px;
    font-size: 40px;
    font-weight: 600;
    color: #fff;    
    float: left;
    position: relative;
    margin-bottom: 15px;
}

.bayilik_col p{
    width: 100%;
    line-height: 2;
    letter-spacing: 1.4px;
    font-size: 15px;
    color: #fff;
    float: left;
    position: relative;
}

.bayilik_col .btn{
    line-height: 1;
    letter-spacing: 1.4px;
    font-size: 14px;
    color: #fff;    
    float: left;
    position: relative;
    margin-top: 15px;
    padding: 10px 0px;
}

.bayilik_col .btn::before{
    content: '';
    width: 14px;
    height: 14px;
    position: relative;
    float: right;
    margin-left: 10px;
    background-color: #fff; 
    transition: all 300ms;
    mask: url(../images/arrow.svg) no-repeat center / contain; 
    -webkit-mask: url(../images/arrow.svg) no-repeat center / contain; 
    transform: rotate(180deg);
}
  





@media screen and (max-width: 1920px), screen and (max-device-width: 1920px) {

    .hakkimizda_col{ width: 1400px; }
    

    .hizmet_col{
        width: 380px;
        margin:0px 20px;
    }
    
}







@media screen and (max-width: 1440px), screen and (max-device-width: 1440px) {

    .hakkimizda_col{ width: 1200px; }
    

    .hakkimizda_col .text .title{
        font-size: 40px;
    }
    
}






@media screen and (max-width: 1366px), screen and (max-device-width: 1366px) {

    .hizmet_col{ width: 340px; }

    .sayaclar .sayac .sayi{font-size: 80px; }
    
    .stage_content .video_kapak.video{ width: 500px; }
}







@media screen and (max-width: 1280px), screen and (max-device-width: 1280px) {

    .hakkimizda_col{ width: 1000px; }
    

    .hakkimizda_col .text .title{
        letter-spacing: 2px;
        font-size: 30px;
        margin-bottom: 15px;
    }

    .hizmet_col{ width: 300px; margin: 0px 10px; }
    
    .sayaclar .syc_5{ width:33.33%; }

    .sss .sss_con{
        width: calc(100% - 450px);
        margin-left: 50px;
    }
    
    .stage_content .video_kapak.video{ width: 430px; margin: 25px; }
}







@media screen and (max-width: 1024px), screen and (max-device-width: 1024px) {

    .sss{ margin-bottom: 50px; }
    
    .hakkimizda_col{ width: 100%; }
    
    .hakkimizda_col .img1{
        width: 30%;
        margin-right: 50px;
    }
        
    .hakkimizda_col .text{
        width: calc(70% - 50px);
        margin-bottom: 50px;
    }

    .hakkimizda_col .text .des{
        line-height: 1.6;
        letter-spacing: 1.5px;
        font-size: 15px;
    }
    
    
    .hakkimizda_col .video{
        width: calc(70% - 50px);
    }
    
    .hizmet_col{ width: 250px; }
        
    .hizmet_col .padding .cont .info .title{ font-size: 20px; }
    .hizmet_col .padding .cont .info .des{ font-size: 14px; line-height: 1.4;}
       
        
    .stage_content .video_kapak.video{ width: 450px; margin: 25px; }

    .stage_content .video_kapak.short{ width: 300px; }
    .stage_content .video_kapak.short .video_pdn{ padding-top: 171%; }


    .insta_reel{ width: 300px; }
    .insta_reel .insta_reel_cnt{ padding-top:171%; }

    .sss .sss_img{
        width: 300px;
    }

    .sss .sss_con{
        width: calc(100% - 350px);
        margin-left: 50px;
    }
    .sss .title{ font-size: 30px; }

    .sss .sss_con .sss_str p{ font-size: 17px;}


        
    .son_haberler .haber_col{ width: calc(33.33% - 20px); }



    .sayaclar .syc_4{ width:50%; }


    
    .sayaclar .syc_6{ width:33.33%; }
    .sayaclar .syc_7{ width:50%; }
    .sayaclar .syc_8{ width:50%; }
    .sayaclar .syc_9{ width:50%; }
    .sayaclar .syc_10{ width:50%; }


    .bayilik_col{ width: calc(100% - 30px); left: 15px;}
}






@media screen and (max-width: 800px), screen and (max-device-width: 800px) {

    .tuning_container .title{ font-size: 40px; }

    .arac_bilgi_hdr .arac_blg{width: calc(100% - 170px); margin-left: 20px;}

    .tuning_input{ width: calc(50% - 15px); margin: 10px 0px; }

    .tuning_buton{
        width: calc(80px - 0px);
        height: 40px;
        margin-top: 0px;
    }

    .stage_content .title_str{ display: none;}
    .stage_content .title{ display: none;}

    .stage_content .tuning_str { width: calc(100% - 170px); }

    .stage_content .stun_tng b{ 
        display: block; 
        width: 100px;
        float: left;
        position: relative;
        color: #fff;
        font-size: 15px;
        margin-bottom: 3px;
    }
    
    .stage_content .stun_tng p{ 
        width: calc(100% - 100px);
        font-size: 30px;
    }

    .stage_content .stun_tng p span{ font-size: 12px;}

    .stage_content .stun_isim{
        width: 100%;
        padding: 0px;
        margin-bottom: 5px;
        margin-top: 30px;
        font-size: 20px;
    }

    .stage_content .stun_tng{
        width: 100%;
        padding: 10px;
        margin: 0px;
        margin-bottom: 5px;
    }

    .stage_content .stun_grafik{
        width: 170px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
    }

    
    .stage_content .video_kapak.short{ width: 250px; margin: 20px; }
    .stage_content .video_kapak.short .video_pdn{ padding-top: 180%; }
    
    .stage_content .video_kapak.video{ width: 90%; margin: 25px 0px; }

    .insta_reel{ width: 250px; margin: 20px; }
    .insta_reel .insta_reel_cnt{ padding-top:180%; }


    .insta_reel .title{ display: block; font-size: 30px; right: -40px; }
    .stage_content .video_kapak .title{ display: block; font-size: 30px; right: -40px; }

    .grafik {
        width: 160px;
        height: 160px;
        margin-top: 50px;
    }


    .hakkimizda_col .img1{
        width: 30%;
        margin-right: 30px;
    }
        
    .hakkimizda_col .text{
        width: calc(70% - 30px);
        margin-bottom: 30px;
    }

    .hakkimizda_col .text .des{
        line-height: 1.6;
        letter-spacing: 1.5px;
        font-size: 15px;
    }
    
    
    .hakkimizda_col .video{
        width: calc(70% - 30px);
    }


    .sss .sss_img .ss_bg{right: -110px; }

    .sss .title{ font-size: 25px; }

    .sss .sss_con{
        width: calc(100% - 300px);
        margin-left: 0px;
    }

    .sss .sss_con .sss_str p{ font-size: 16px; }

    
    .son_haberler .haber_col{ width: calc(50% - 20px); }

    
    .sayaclar .sayac .sayi{font-size: 70px; }

    .sayaclar .syc_3{ width:100%; }
    .sayaclar .syc_6{ width:50%; }
}











@media screen and (max-width: 640px), screen and (max-device-width: 640px) {

    
    .hakkimizda_col .img1{
        width: 70%;
        margin-right: 0px;
        margin-bottom: 40px;
    }
        
    .hakkimizda_col .text{
        width: calc(100% - 0px);
        margin-bottom: 50px;
    }

    .hakkimizda_col .text .des{
        line-height: 1.6;
        letter-spacing: 1.5px;
        font-size: 15px;
    }
    
    
    .hakkimizda_col .video{
        width: calc(100% - 0px);
    }
    
    .hizmet_col{ width: 220px; }

    .hizmet_col .padding .cont .info{ padding: 10px; }
    
    .hizmet_col .padding .cont .info .title{ font-size: 16px; }

    .sss{ margin-bottom: 0px; }

    .sss .img{ width: 80%; }
    .sss .img .padding{ padding-top: 120%; }

    .sss .sss_con{
        width: 100%;
        margin-left: 0px;
        margin-top: 40px;
    }



    .stage_content .video_kapak.short{ width: 220px; margin: 10px; }
    .stage_content .video_kapak.short .video_pdn{ padding-top: 190%; }
    

    .insta_reel{ width: 220px; margin: 10px; }
    .insta_reel .insta_reel_cnt{ padding-top:190%; }


    .insta_reel .title{ display: block; font-size: 26px; right: -30px; }
    .stage_content .video_kapak .title{ display: block; font-size: 26px; right: -30px; }

    .stage_content .video_kapak:after{width: 40px; height: 40px; top: calc(50% - 20px); left: calc(50% - 20px);}

    .sayaclar .syc_5{ width:50%; }
    
    .son_haberler .haber_col{ width: calc(100% - 0px); margin:25px 0px; }

    .bayilik_col{ padding: 30px;}
    .bayilik_col .title{ font-size: 35px; }
}













@media screen and (max-width: 533px), screen and (max-device-width: 533px) {
    
    .arac_bilgi_hdr .arac_blg{width: calc(100% - 0px); margin-left: 0px; margin-top: 20px;}

    .sayaclar .syc_4{ width:100%; }

    

    .stage_content .video_kapak.short{ width: 310px; margin:25px 0px; }
    .stage_content .video_kapak.short .video_pdn{ padding-top: 170%; }
    

    .insta_reel{ width: 310px; margin:25px 0px; }
    .insta_reel .insta_reel_cnt{ padding-top:170%; }

}









@media screen and (max-width: 460px), screen and (max-device-width: 460px) {
    
    .stage_content .stun_tng b{ 
        width: 100%;
        font-size: 13px;
    }
    
    .stage_content .stun_tng p{ 
        width: 100%;
        font-size: 24px;
    }

    .stage_content .stun_tng p span{ font-size: 11px;}

    .sayaclar .syc_5{ width:100%; }
}