html {
    scroll-behavior: smooth;
}
img{max-width: 100%;}
*{box-sizing: border-box;}
html, body {
    padding: 0;
    margin: 0;
    width: 100%;
    font-size: 16px;
    max-width: 100%;
    /* overflow-x: hidden; */
    font-weight: 500;    
    font-family: "Manrope", sans-serif;
    line-height: 1.4;
    letter-spacing: 0.24px;
    color: #24292E;
    background-color: #FCFCFC;  
    margin: auto;  
}
body{background-image: url(../images/page-bg.png);background-size: cover;}
a{
    text-decoration: none;
    color: inherit;
}
.link{color: inherit;transition: color 250ms ease;}
.link:hover{color: #E60E2F;}
.f-16{font-size: 16px;}
.f-14{font-size: 14px;}
.f-13{font-size: 13px;}
.bold{font-weight: 800;}
.bolder{font-weight: 900;}
.light{font-weight: 300;}
.fw-normal{font-weight: 400;}
.color-grey{color: #8C8C8C;}
.color-dgrey{color: #595959;}
.color-lgrey{color: #D9D9D9;}
.color-black{color: #24292E;}
.color-gold{color: #E0B55C;}
.color-gradient{
    background: linear-gradient(90.00deg, rgb(169, 197, 81),rgb(0, 156, 224));
    -webkit-background-clip:
    text;
    -webkit-text-fill-color:
    transparent;
    background-clip:
    text;
}
.position-relative{position: relative;}
.gradient-bg{background-image: url(../images/gradient.png);background-size: cover;background-position: center;background-color: #000101;}
.black-bgg{background-image: url(../images/black-bg.jpg);background-size: cover;background-position: center;}
.box-shadow{box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.15);}
.line-14{line-height: 1.4;}
.line-15{line-height: 1.5;}
.line-20{line-height: 1.8;}
ul{margin: 0;padding: 0;}
li{list-style: none}
h1{font-size: 88px;}
h2{font-size: 60px;}
h3{font-size: 40px;}
h4{font-size: 36px;}
h5{font-size: 24px;}
h6{font-size: 18px;}
.responsive-img{min-width: 100%;min-height: 100%;max-height: 80svh;object-fit: cover;transition: all 500ms ease;}
.padding-x{padding-left: 100px;padding-right: 100px;}
.padding-y{padding-top: 120px;padding-bottom: 120px;}
.padding-y-big{padding-top: 240px;padding-bottom: 240px;}
.padding-y-small{padding-top: 80px;padding-bottom: 80px;}
.p-36{padding: 36px;}
.burger-menu-icon{cursor: pointer;}
.beyaz-bg.alt{
    border-top: 1px solid #DEDFE0;
}
.beyaz-bg{
    background-color: #FCFCFCCC;
    backdrop-filter: blur(5px);
}
.header-main{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 24px 40px;
    border-bottom: 1px solid #DEDFE0;
    background-color: #FCFCFCCC;
    backdrop-filter: blur(5px);
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
    transition: all 500ms ease;
}
.header-main ul{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}
.header-main .link{padding: 4px 8px;}
.header-main ul li img{filter: brightness(0);transition: all 500ms ease;width: 24px;}
.header-main ul li.burger-menu-icon img{transform: scaleY(1.2);}
.header-main ul li.burger-menu-icon:hover img{transform: scaleY(1);}
.header-main.home{background-color: transparent;color: #FCFCFC;backdrop-filter: blur(0);}
.header-main.home ul li img{filter: brightness(0) invert(1);}
.header-main.home .logo img{filter: brightness(0) invert(1);transition: all 500ms ease;}
.header-scroll.home .logo img{filter: none;}
.header-scroll.home ul li img{filter: brightness(0);}
.header-scroll.home{padding: 8px 12px;background-color: #FCFCFCCC;color: #24292E;backdrop-filter: blur(5px);}
.header-scroll ul li img{filter: brightness(0);}
.header-scroll{padding: 8px 12px;background-color: #FCFCFCCC;color: #24292E;backdrop-filter: blur(5px);}
.header-main ul li:hover img{filter: none;}
.header-main.dont-scroll{position: relative;}
.banner{
    width: 100%;
    height: 100svh;
    position: relative;
}
.banner-layer{
    background-image: url(../images/svg/banner-layer.svg);
    background-size: 150%;
    width: 100%;
    height: 100%;
    background-position: 50% 50%;
    position: absolute;
    z-index: 4;
    pointer-events: none;
    user-select: none;
    transition: all 500ms ease;
}
.banner:has(.slide-0.active) .banner-layer{background-position: 45% 50%;}
.banner:has(.slide-1.active) .banner-layer{background-position: 50% 50%;}
.banner:has(.slide-2.active) .banner-layer{background-position: 55% 50%;}

.slide{
    display: flex;
    align-items: center;
}
.slider-textbox{
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 40px;
    color: #fff;
}
.--btn-1{
    backdrop-filter: blur(5px);
    background: #24292E05;
    padding: 15px 30px;
    border: 1px solid #FCFCFC;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    transition: all 500ms ease;
    width: fit-content;
}
.--btn-1:hover{background: #24292E4D;}
.--btn-2{
    background: #24292E;
    color: #E9EAEA;
    padding: 15px 30px;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    transition: all 500ms ease;
    width: fit-content;
}
.--btn-2:hover{background: #E60E2F;}

.--btn-3{
    display: inline-block;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding-left: 0;
    transition: all 500ms ease;
}
.--btn-3 span{
    white-space: nowrap;
}
.--btn-3 img{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -32px;
    transition: all 500ms ease;
}
.--btn-3:hover{padding-left: 32px;}
.--btn-3:hover img{left: 0;}
.scroll-text-wrap{
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 16px;
    font-size: 40px;
    font-weight: 300;
    height: 454px;
    overflow: hidden;
}
.scroll-text-wrap::after{
    content: '';
    width: 100%;
    height: 100%;
    inset: 0;
    position: absolute;
    z-index: 1;
    background: linear-gradient(180deg, #FCFCFC 0%, rgba(252, 252, 252, 0) 20%, rgba(252, 252, 252, 0.6) 80%, #FCFCFC 85%);
    pointer-events: none;
}
.scroll-text-wrap b{font-weight: 500;}
.scroll-text-heading{
    font-weight: 500;
    margin-top: 128px;
    text-align: right;
}
.scroll-text-slider{margin-top: 128px;}
.scroll-text-slider .slick-list{overflow: unset;}
.scroll-text-wrap .--btn-2{
    position: absolute;
    left: 180px;
    bottom: 0;
    font-size: 16px;
    z-index: 3;
}
.video-wrap{
    width: 100%;
    height: 680px;
    position: relative;
}
.video-wrap video{
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}
.video-cover{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;    
    background-size: cover;
    z-index: 2;
    position: absolute;
    inset: 0;
    cursor: pointer;
    opacity: 1;
    transition: all 500ms ease;
}
.video-cover.in-active{opacity: 0;pointer-events: none;}

.video-cover .--btn-1{padding: 16px 24px;border-radius: 40px;color: #FCFCFC;}

.proje-card{
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
}
.proje-card-img-wrap{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 408px;
}
.proje-card-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: all 500ms ease;
}
.proje-card:hover .proje-card-img{transform: scale(1.02);}

.proje-card .proje-card-img-wrap .--btn-2{
    position: absolute;
    padding: 16px;
    right: 16px;
    bottom: -60px;
}
.proje-card:hover .proje-card-img-wrap .--btn-2{bottom: 16px;}

.katalog-card{
    display: block;
    overflow: hidden;
    width: 100%;
    height: 480px;
    position: relative;
    background: #F5F5F5;
    padding: 24px;
}
.katalog-card .--btn-2{
    position: absolute;
    right: 16px;
    bottom: 16px;
    padding: 16px;
}
.katalog-card:hover .--btn-2{padding: 20px;background-color: #E60E2F;}

.katalog-card.katalog{
    background: url(../images/katalog.jpg);
    background-size: 100%;
    background-position: bottom;
    background-repeat: no-repeat;
    transition: all 500ms ease;
}
.katalog-card.katalog:hover{background-size: 102%;}
.katalog-icon{
    width: 48px;
    position: absolute;
    right: 16px;
    bottom: 16px;
}
.katalog-number{
    position: absolute;
    left: -16px;
    bottom: -20px;
    font-size: 160px;
    font-weight: 200;
    line-height: 1;
    letter-spacing: -16px;
    color: #DEDFE0;
}

.home-blog-inner{
    background: linear-gradient(90deg, rgba(36, 41, 46, 0) 43.02%, #24292E 75.38%),
                linear-gradient(0deg, rgba(36, 41, 46, 0) 42.05%, #24292E 100%);
    width: 100%;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: #E9EAEA;
}
.home-blog-right{
    width: 408px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 48px 24px;
}
.home-blog-right .line{
    width: 100%;
    height: 1px;
    background-color: #BBBDBE;
}
.home-blog-left{
    width: 408px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 48px;
}
.home-blog-left .--btn-1{color: #E9EAEA;}
.home-blog-sec{padding: 100px;background-color: #24292E;margin-bottom: 108px;}

.home-blog-wrap{position: relative;}

.home-blog-img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    inset: 0;
    z-index: 1;
    transition: all 500ms ease;
    opacity: 0;
}

.home-blog-img.active {
    opacity: 1;
    z-index: 1;
}
footer{background-color: #FCFCFC;}
.footer-main{
    padding: 120px 108px;
    border-top: 1px solid #DEDFE0
}
.footer-main .--btn-3{display: block;margin-bottom: 16px;}

.footer-main form .user-input-wrp input::placeholder{color: #8C8C8C;font-weight: 500;}
.footer-main form .user-input-wrp input:active , .user-input-wrp input:focus{outline: none;}

.footer-main form .user-input-wrp {
	position: relative;
}
.footer-main form .user-input-wrp .inputText{
	position: relative;
    background-color: #FCFCFC;
    border: none;
    padding: 24px 0px 7px;
    width: 100%;
    font-size: 16px;
    color: #8C8C8C;
    border-bottom: 1px solid #BBBDBE;
}
.footer-main form .user-input-wrp .floating-label {
	display: flex;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #FCFCFC;
    font-size: 24px;
    font-weight: 300;
    z-index: 2;
    width: 100%;
    height: 52px;
    padding: 0 0px;
    color: #8C8C8C;
    pointer-events: none;
    user-select: none;
	transition: all 500ms ease;
}
.footer-main form .user-input-wrp input:focus ~ .floating-label,
.footer-main form .user-input-wrp input:not(:focus):valid ~ .floating-label{
	font-size: 11px;
    height: 24px;
}
.footer-main form .user-input-wrp button{
    border: none;
    background: none;
    outline: none;
    position: absolute;
    right: 10px;
    bottom: 8px;
}
.copyright{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 32px 108px;
    border-top: 1px solid #DEDFE0
}
.copyright ul{
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: center;
}
.footer-bottom{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background-color: #E60E2F;
}
.footer-bottom img{height: 32px;}
.alt-banner{padding-top: 170px;padding-bottom: 80px;border-bottom: 1px solid #DEDFE0}
.alt-banner h1{font-weight: 200;}
.kurumsal-banner{padding-top: 136px;padding-bottom: 80px;border-bottom: 1px solid #DEDFE0}
.kurumsal-banner h1{font-weight: 200;}

.scollbar{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 9;
    top: 90px;
    width: 100%;
    background-color: #FCFCFCCC;
    border-bottom: 1px solid #D9D9D9;
    gap: 48px;
    backdrop-filter: blur(5px);
}
.scollbar-scroll{position: fixed;top: 0;}
.scollbar a{
    padding: 16px 0;
    font-weight: 500;
    border-bottom: 0px solid #E60E2F;
    margin-bottom: 2px;
    transition: all 250ms ease;
}
.scollbar a:hover{border-bottom: 2px solid #24292E;margin-bottom: 0px;}

#myBtnContainer{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 9;
    top: 90px;
    width: 100%;
    background-color: #FCFCFCCC;
    border-bottom: 1px solid #D9D9D9;
    gap: 48px;
    backdrop-filter: blur(5px);
}
#myBtnContainer.myBtnContainer-scroll{position: fixed;top: 0;}
#myBtnContainer button{
    display: inline;
    padding: 16px 0;
    font-weight: 500;
    background: none;
    outline: none;
    border: none;
    border-bottom: 0px solid #E60E2F;
    margin-bottom: 2px;
    transition: all 250ms ease;
}
#myBtnContainer button:hover{border-bottom: 2px solid #24292E;margin-bottom: 0px;}

.kurumsal-table th{
    text-align: right;
    white-space: nowrap;
    font-size: 40px;
    font-weight: 300;
    vertical-align: top;
}
.kurumsal-table td{
    padding-left: 8px;
    padding-bottom: 16px;
    font-size: 40px;
    font-weight: 300;
}
.mesaj-sec{padding: 0 12%;}

.marka-sec{padding: 160px 0;border-top: 1px solid #D9D9D9}
.marka-box-wrap{
    max-width: 840px;
    margin: auto;
}
.marka-wrap{
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.proje-card.medya{margin-bottom: 64px;}
.proje-card.medya .proje-card-img-wrap{height: 460px;}
.proje-card.blog .proje-card-img-wrap{height: 460px;}
.proje-card.medya .--btn-1{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% , -50%);
    border-radius: 40px;
    color: #FCFCFC;
    white-space: nowrap;
}
.medya-card-desc{max-width: 816px;}
.proje-card.medya .video-wrap{height: 460px;}
.medya-detay-sec{
    padding: 170px 0 80px;
}
.proje-card.blog{margin-bottom: 80px;}
.proje-card.blog .--btn-2{background-color: #E60E2F;}
.blog-desc{display: block;width: 85%;max-width: 700px;}
.alt-banner.blog-detay{padding: 89px 0 0;}
.proje-card.blog.filterDiv{margin-bottom: 40px;}
.filterDiv {
    display: none;
  }
  
  .show {
    display: flex;
  }

.proje-detail-wrap{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 40px 0;
    border-bottom: 1px solid #DEDFE0;
}
.proje-detail-wrap th{padding-right: 24px;}

.lokasyon-wrap{
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
}
.lokasyon-tag{
    display: flex;
    flex-direction: row;
    white-space: nowrap;
    align-items: center;
    font-size: 14px;
    gap: 8px;
    cursor: pointer;
}
.lokasyon-tag .link:hover{color: #E0B55C;}
.lokasyon-tag:hover .link{color: #E0B55C;}
.galeri-sec{position: relative;margin: 80px 0;}
.galeri-buttons{
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 16px;
    font-size: 14px;
}
.galeri-buttons button{
    border: none;
    color: #262626;
    padding: 6px 12px;
    border-radius: 4px;
    background-color: transparent;
    transition: all 500ms ease;
}
.galeri-buttons button.is-checked , .galeri-buttons button:hover{
    color: #E0B55C;
}
.gallery-top{border-bottom: 1px solid #DEDFE0;}
.nak-gallery{padding-top: 40px;margin: -12px;}

.revGallery-anchor{padding: 12px;}
.revGallery-anchor img{height: 460px;width: 100%;object-fit: cover;}
.revGallery-anchor.half-width{width: 50%;}
.revGallery-anchor.full-width{width: 100%;}


.kat-sec{
    display: flex;
    flex-direction: column;
    padding: 40px;
    background-color: #FCFCFC;
    margin: 80px 0 40px;
}
.popup{
	position: fixed;
	left: 0;
	top: 0;
    right: 0;
    bottom: 0;
	height: 100vh;
    width: 100vw;
    background-color: #000c;
	z-index: 9999;
	opacity: 0;
	user-select: none;
	pointer-events: none;
	transition: opacity 500ms ease;
    display: flex;
    justify-content: center;
    align-items: center;
}
.closepopup{
	position: absolute;
	right: 50px;
	top: 30px;
}
.popup.active{
	opacity: 1;
	pointer-events: unset;
}

.popup img{
    height: 85%;
}

.kat-btn2-wrap{
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.kat-btn2{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    transition: all 500ms ease;
}
.kat-left{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
    width: 100%;
    margin-top: 32px;
}
.kat-left span{font-size: 16px;}
.kat-right span{font-size: 16px;}
.kat-right{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    order: 3;
    background-color: #24292E;
    width: calc((100% / 3) - 32px);
    color: #fff;
    text-align: center;
    border-radius: 4px;
    padding: 16px 32px;
    transition: all 500ms ease;
}
.kat-right:hover{background-color: #E60E2F;}
.kat-left select#game{display: none;}

.kat-left select{
    background-color: #FCFCFC;
    color: #24292E;
    border: 1px solid #E9EAEA;
    border-radius: 4px;
    font-weight: 400;
    padding: 16px;
    outline: none;
    width: calc((100% / 3) - 32px);
    appearance: none;
    background-image: url(../images/svg/chevron-down.svg);
    background-size: 24px;
    background-position: 95% 50%;
    background-repeat: no-repeat;
    transition: all 500ms ease;
    cursor: pointer;
}
.kat-left select:focus , .kat-left select:active{
    background-image: url(../images/svg/chevron-up.svg);
    background-color: #E9EAEA;
}
.kat-left select:hover{
    background-color: #E9EAEA;
}
.kat-left select *{
    height: 37px;
    color: #4C4647;
    background-color: #F9F9F9;
    border: none !important;
    outline: none !important;
}
.kat-left select *:hover{
    color: #4F7A76;
    background-color: #fff;
}

.proje-detay-form-sec{
    background-color: #24292E;
    color: #FCFCFC;
    padding: 40px;
    border-radius: 8px;
}
.proje-detay-form-sec form .input-wrap{position: relative;}
.proje-detay-form-sec form .input-wrap::after{
    content: url(../images/svg/edit-03.svg);
    position: absolute;
    right: 16px;
    top: 14px;
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    transition: all 500ms ease;
}
.proje-detay-form-sec form .input-wrap:hover::after{opacity: 1;}
.proje-detay-form-sec form input{
    background-color: #202529;
    border: 1px solid #202529;
    width: 100%;
    padding: 16px;
    font-size: 14px;
    border-radius: 4px;
    color: #FCFCFC;
    margin-bottom: 8px;
    transition: all 500ms ease;
}
.proje-detay-form-sec form input::placeholder{color: #8C8C8C;}
.custom-checkbox {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #8C8C8C;
    position: relative;
    padding-left: 36px;
    cursor: pointer;
    font-size: 16px;
    user-select: none;
  }

  /* Hide the default checkbox */
  .custom-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
  }

  /* Create a custom box */
  .checkmark {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    height: 24px;
    width: 24px;
    background-color: #eee;
    border-radius: 8px;
    transition: 0.2s;
  }

  /* On hover */
  .custom-checkbox:hover input ~ .checkmark {
    background-color: #ccc;
  }

  /* When checkbox is checked */
  /* .custom-checkbox input:checked ~ .checkmark {
    background-color: #4CAF50;
  } */

  /* Checkmark indicator */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }

  /* Show the checkmark when checked */
  .custom-checkbox input:checked ~ .checkmark:after {
    display: block;
  }

  /* Style the checkmark (tick) */
  .custom-checkbox .checkmark:after {
    left: 9px;
    top: 5px;
    width: 6px;
    height: 12px;
    border: solid #24292E;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

.proje-detay-form-sec form button{
    padding: 16px 32px;
    width: 160px;
    background-color: #FCFCFC;
    color: #24292E;
    border-radius: 4px;
    border: none;
    outline: none;
    transition: all 500ms ease;
}
.proje-detay-form-sec form button:hover{
    color: #E60E2F;
    background-color: #F7B4BF;
}

.beyaz-form input{
    width: 100%;
    padding: 16px;
    border: 1px solid #E9EAEA;
    border-radius: 4px;
    margin-bottom: 16px;
    color: #595959;
    font-size: 14px;
    background-color: #FCFCFC;
    outline: none;
    transition: all 500ms ease;
}
.beyaz-form input:hover , .beyaz-form input:active , .beyaz-form input:focus{border: 1px solid #595959;}
.beyaz-form button{
    background-color: #BBBDBE;
    color: #E9EAEA;
    padding: 16px 32px;
    width: 120px;
    border: none;
    outline: none;
    border-radius: 4px;
    transition: all 500ms ease;
}
.beyaz-form button:hover{background-color: #24292E;}

.close{cursor: pointer;}

.menu-right{
    position: fixed;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #FCFCFC;
    height: 100vh;
    width: 50vw;
    right: -50vw;
    top: 0;
    padding: 24px 40px;
    border-left: 1px solid #BFBFBF;
    transition: all 1500ms ease;
}

.menu-left{
    position: fixed;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #FCFCFC;
    background-image: url(../images/svg/alimoglu-logo-half.svg);
    background-size: 342px;
    background-position: center left;
    background-repeat: no-repeat;
    height: 100vh;
    width: calc(50vw + 4px);
    right: -51vw;
    top: 0;
    padding: 24px 280px 24px 40px;
    border-right: 1px solid #BFBFBF;
    transition: all 1500ms ease;
}
.me-nav.active .menu-right{right: 0;}
.me-nav.active .menu-left{right: calc(50vw - 2px);}
.right-header, .right-footer{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.right-header ul, .right-footer ul{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}
.right-header .link.active{color: #8C8C8C !important;pointer-events: none;user-select: none;}

.accordion {
    background: none;
    color: #24292E;
    cursor: pointer;
    padding: 16px 0;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 40px;
    font-weight: 300;
    transition: 0.4s;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
  
  
  
  .accordion:after {
    content: url(../images/svg/chevron-down-r.svg);
    filter: brightness(0);
    transition: all 500ms ease;
    height: 24px;
    width: 24px;
  }
  .accordion:hover{color: #E60E2F;}
  .accordion:hover::after{filter: none;}
  .accordion.active {color: #8C8C8C;}
  .accordion.active:hover {color: #8C8C8C;}
  .accordion.active:after {
    content: url(../images/svg/chevron-up.svg);
    filter: none !important;
  }
  
  .panel {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 0 40px 0 0;
    background: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
  }
.main-nav-link{
    color: #24292E;
    padding: 16px 0;
    width: 100%;
    text-align: left;
    font-size: 40px;
    font-weight: 300;
    transition: 0.4s;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}
.main-nav-link:hover{color: #E60E2F;}
.main-nav-link.small{font-size: 16px;font-weight: 500;}
.menu-slider-wrap{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 40px;
    z-index: 1;
    width: 200px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.menu-slider-item{padding: 20px 0;}
.menu-slider-item img{width: 200px; height: 320px;object-fit: cover;}
.menu-slider .slick-list{overflow: unset;}

.loader-screen{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    position: fixed;
    inset: 0;
    z-index: 12;
}
.logo-wrapper {
    position: relative;
    width: 30px;
    height: 30px;
    transition: all 1500ms ease;
    opacity: 1;
  }

  .logor {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: 2;
    position: relative;
    animation: pulse 2s infinite ease-in-out;
  }

  .ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border: 4px solid rgba(179, 62, 62, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(2.8);
    z-index: 1;
    opacity: 0;
    animation: ringPulse 2s infinite ease-in-out;
    pointer-events: none;
  }
  /* Logo grows and shrinks */
  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    40% {
      transform: scale(1.3);
    }
    70% {
      transform: scale(1);
    }
    100% {
      transform: scale(1);
    }
  }

  /* Ring appears during shrink */
  @keyframes ringPulse {
    0%, 39% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(2.8);
    }
    40% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(3.4);
    }
    70% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(3.8);
    }
    100% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(5.2);
    }
  }
.topload , .botload{
    width: 100vw;
    height: 50vh;
    background-color: #FCFCFC;
    position: absolute;
    left: 0;
    right: 0;
    transition: all 1500ms ease;
}
.topload{top: 0;}
.botload{bottom: 0;}
.loader-screen.inactive .topload{top: -50vh;}
.loader-screen.inactive .botload{bottom: -50vh;}
.loader-screen.inactive .logo-wrapper{opacity: 0;}
.loader-screen.inactive{pointer-events: none;user-select: none;}
.ilet-col-1{order: 1;}
.ilet-col-2{order: 2;}
.ilet-col-3{order: 3;}
.scollbar-btn{display: none;}
.contact-bar{
    position: fixed;
    z-index: 9;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
    background-color: #FCFCFC;
    border: 1px solid #D9D9D9;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    width: 552px;
}
.contact-bar.active{opacity: 1;pointer-events: all;}
.contact-bar-btn-wrap{
    display: flex;
    flex-direction: row;
}
.contact-bar-btn{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 16px;
    width: calc(100% / 3);
    background-color: #FCFCFC;
    color: #595959;
    transition: all 500ms ease;
    cursor: pointer;
}
.contact-bar-btn img{filter: none;transition: all 500ms ease;}
.contact-bar-btn:hover , .contact-bar-btn:active , .contact-bar-btn:focus{color: #262626;background-color: #F0F0F0;}
.contact-bar-btn:hover img , .contact-bar-btn:active img , .contact-bar-btn:focus img{filter: brightness(0.2);}
.contact-form{
    width: 100%;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    border-bottom: 1px solid transparent;
    height: 0;
    transition: all 500ms ease;
    overflow: hidden;
}
.contact-form .custom-checkbox{font-size: 11px;}
.contact-form.active{height: 491px;padding: 40px;border-bottom: 1px solid #D9D9D9;}
@media screen and (max-width:1600px) {
    h1{font-size: 72px;}
    h2{font-size: 60px;}
    h3{font-size: 40px;}
    h4{font-size: 36px;}
    h5{font-size: 24px;}
    h6{font-size: 18px;}
    .padding-y-big{padding-top: 160px;padding-bottom: 160px;}
    .accordion , .main-nav-link{padding: 8px 0;font-size: 36px;}
}
@media screen and (max-width:1400px) {
    h1{font-size: 62px;}
    h5{font-size: 18px;}
    .katalog-number{font-size: 80px;letter-spacing: -8px;left: -5px;bottom: -5px;}
    .scroll-text-wrap{font-size: 24px;height: 300px;}
    .scroll-text-heading{min-width: 164px;margin-top: 48px;}
    .scroll-text-slider{margin-top: 48px;}
    .scroll-text-wrap .--btn-2{padding: 8px 16px;}
    .padding-x{padding-left: 80px;padding-right: 80px;}
    .padding-y{padding-top: 60px;padding-bottom: 60px;}
    .padding-y-big{padding-top: 120px;padding-bottom: 120px;}
    .padding-y-small{padding-top: 40px;padding-bottom: 40px;}
    .proje-card-img-wrap{height: 300px;}
    .accordion , .main-nav-link{padding: 8px 0;font-size: 24px;}
    .panel{gap: 6px 16px;}
    .scollbar{gap: 16px;font-size: 14px;}
}
@media screen and (max-width:1200px) {
    h1{font-size: 50px;}
    h2{font-size: 40px;}
    h3{font-size: 32px;}
    h4{font-size: 24px;}
    h5{font-size: 18px;}
    h6{font-size: 16px;}
    .padding-x{padding-left: 60px;padding-right: 60px;}
    .padding-y{padding-top: 40px;padding-bottom: 40px;}
    .padding-y-big{padding-top: 60px;padding-bottom: 60px;}
    .padding-y-small{padding-top: 20px;padding-bottom: 20px;}
    .container.padding-x{padding: 20px;}
    .video-wrap{height: 400px;}
    .katalog-card{height: 300px;margin-bottom: 16px;}
    .katalog-card.katalog{background-image:linear-gradient(to bottom, white 0%, white 50%, transparent 100%),url(../images/katalog.jpg);}
    .home-blog-sec{padding: 20px;margin-bottom: 20px;}
    .footer-main{padding: 20px;}
    .copyright{padding: 16px 20px;}
    .kurumsal-banner{padding: 80px 0 40px;}
    .alt-banner{padding: 100px 0 30px;}
    .kurumsal-table th,.kurumsal-table td{font-size: 32px;}
    .mesaj-sec{padding: 20px;}
    .marka-sec{padding: 60px 0;}
    .proje-card.blog .proje-card-img-wrap , .revGallery-anchor img{height: 300px;}
    .galeri-sec{margin: 20px 0;}
    .ilet-text{font-size: 12px;}
}
@media screen and (max-width:991px) {
    h1{font-size: 40px;}
    h2{font-size: 32px;}
    h3 , .kurumsal-table th,.kurumsal-table td{font-size: 24px;}
    h4{font-size: 18px;}
    h5{font-size: 16px;}
    h6{font-size: 16px;}
    .padding-x{padding-left: 40px;padding-right: 40px;}
    .padding-y{padding-top: 16px;padding-bottom: 16px;}
    .padding-y-big{padding-top: 40px;padding-bottom: 40px;}
    .padding-y-small{padding-top: 16px;padding-bottom: 16px;}
    .container.padding-x{padding: 0 16px;}
    .slider-textbox{padding: 16px;}
    .home-blog-left{margin: 0;width: 50%;padding: 16px;}
    .home-blog-right{padding: 16px;width: 50%;}
    .copyright{flex-direction: column;gap: 16px;}
    .menu-right{padding: 16px;}
    .menu-left{padding: 16px 150px 16px 16px;}
    .menu-slider-wrap{width: 120px;right: 16px;}
    .right-footer{flex-direction: column;align-items: start;gap: 16px;}
    .katalog-card{height: 200px;}
    .marka-box-wrap{width: 100%;padding: 0 16px;}
    .scollbar.proje{font-size: 10px;}
    .medya-detay-sec{padding: 100px 0 20px;}
    .ilet-text{font-size: 16px;margin-bottom: 12px !important;}
    .ilet-col-1{order: 1;}
    .ilet-col-2{order: 3;display: flex;flex-direction: row;justify-content: space-between;}
    .ilet-col-3{order: 2;}
}
@media screen and (max-width:768px) {
    h1{font-size: 32px;}
    h2{font-size: 24px;}
    h3 , .kurumsal-table th,.kurumsal-table td{font-size: 21px;}
    h4{font-size: 18px;}
    h5{font-size: 16px;}
    h6{font-size: 14px;}
    html , body{font-size: 14px;overflow-x: hidden;max-width: 100vw;}
    .padding-x{padding-left: 16px;padding-right: 16px;}
    .padding-y{padding-top: 16px;padding-bottom: 16px;}
    .padding-y-big{padding-top: 16px;padding-bottom: 16px;}
    .padding-y-small{padding-top: 16px;padding-bottom: 16px;}
    .desktop{display: none;}
    .copyright ul{flex-direction: column;}
    .home-blog-inner{flex-direction: column;}
    .header-main{padding: 12px 16px;}
    .header-scroll{padding: 6px 12px;}
    .header-main .logo img{height: 26px;}
    .header-main ul{gap: 16px;}
    .banner-layer{background-size: 300%;}
    .slider-textbox{flex-direction: column;gap: 16px;align-items: center;text-align: center;}
    .slider-textbox .--btn-1{padding: 8px 12px;width: 100%;justify-content: center;}
    .slider-textbox h1{font-size: 24px;}
    .scroll-text-heading{width: fit-content;min-width: unset;}
    .scroll-text-wrap .--btn-2{left: unset;right: 16px;}
    .scroll-text-wrap{font-size: 18px;}
    .scroll-text-heading , .scroll-text-slider{margin-top: 36px;}
    .katalog-card{padding: 16px;}
    .katalog-card .--btn-2{padding: 12px;}
    .home-blog-left , .home-blog-right{width: 100%;}
    .footer-main{text-align: center;}
    .copyright ul{gap: 12px;}
    .menu-left{display: none;}
    .menu-right{width: 100vw;right: -100vw;}
    .right-footer{flex-direction: row;justify-content: space-between;gap: 0;}
    .scollbar{position: fixed;height: 105vh;top: -2px;bottom: -2px;left: -200px;width: 200px;flex-direction: column;transition: all 750ms ease;align-items: start;padding: 0 16px;}
    .scollbar-btn{display: flex;justify-content: center;align-items: center;position: absolute;right: -12px;width: 12px;top: 0;bottom: 0;background-color: #24292E;overflow: hidden;}
    .scollbar.active{left: 0;}
    .scollbar .scollbar-btn img{transform: scaleX(1);transition: all 750ms ease;min-width: 24px;}
    .scollbar.active .scollbar-btn img{transform: scaleX(-1);}
    body.kurumsal{padding-left: 12px;}
    .kurumsal-table th, .kurumsal-table td{font-size: 16px;}
    .header-main.dont-scroll{position: fixed;padding-left: 28px;}
    .header-main.dont-scroll.header-scroll{padding-left: 24px;}
    .header-main.dont-scroll.projeler{position: relative;padding-left: 16px;}
    .header-main.dont-scroll.header-scroll.projeler{padding-left: 12px;}
    #myBtnContainer{gap: 0;justify-content: space-between;padding: 0 12px;top: 51px;}
    #myBtnContainer button{font-size: 10px;}
    .scollbar.proje{font-size: 14px;}
    .proje-detail-wrap{flex-direction: column;gap: 0;padding: 16px 0;}
    .proje-detail-wrap td{text-align: right;padding-bottom: 12px;}
    .lokasyon-tag{width: 100%;}
    .galeri-buttons{gap: 8px;margin-top: 12px;}
    .revGallery-anchor img{height: 200px;}
    .kat-sec{margin-top: 16px;padding: 0px;}
    .kat-left{flex-direction: column;gap: 8px;}
    .kat-left select , .kat-right{width: 100%;}
    .proje-detay-form-sec{padding: 16px;}
    .proje-detay-form-sec form button{width: 100%;}
    .kurumsal .row{margin: 0 !important;}
    .kurumsal .row > div{padding-left: 0;padding-right: 0;}
    .proje-card.medya .proje-card-img-wrap{height: 300px;}
    .proje-card.medya .--btn-1{padding: 8px 12px;}
    .medya-detay-sec{padding: 70px 0 20px;}
    .proje-card.blog{margin-bottom: 16px;}
    .ilet-text{font-size: 12px;display: flex;flex-direction: column;}
    .ilet-text span{margin: 0 !important;}
    .ilet-col-2 p:last-of-type{text-align: right;}
    .beyaz-bg{padding: 16px 0;}
    .beyaz-form button{width: 100%;}
    .contact-bar{width: 100%;bottom: 0;left: 0;right: 0;transform: none;border-radius: 0;}
    .contact-bar-btn{width: fit-content;padding: 8px 16px;}
    .contact-bar-btn.contact-form-btn{flex-grow: 1;border-left: 1px solid #D9D9D9;border-right: 1px solid #D9D9D9;}
    .contact-bar-btn span{display: none;}
    .contact-form{padding: 0 16px;gap: 16px;}
    .contact-form.active{padding: 16px;height: 458px;}
    .contact-form h5{font-size: 24px;}
    body{margin-bottom: 43px;}
    body.kurumsal .contact-bar{width: calc(100% - 12px);left: 12px;}
}









































































































