@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');

html {
    scroll-padding-top: 120px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body,
input,
select,
textarea,
button {
    font-family: "Poppins", sans-serif;
}

#anasayfa {
    position: relative;
    background-color: transparent;
    height: 730px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    color: white;
}

#center-content .btn-container {
    display: flex;
    justify-content: center;
    gap: 20px;
}

#center-content h1 {
    font-size: 70px;
    font-weight: 600;
    line-height: 80px;
}

#center-content p {
    font-weight: lighter;
    font-size: 23px;
    margin-bottom: 20px;
}

#center-content .btn {
    display: inline-block;
    padding: 12px 55px;
    background-color: rgb(3, 3, 33);
    color: white;
    text-decoration: none;
    font-size: 16px;
    border-radius: 50px;
    transition: background-color 0.3s ease;
    margin: 10px;
    /* Butonlar arasında boşluk bırakır */
    width: auto;
    /* Genişliği içeriğe göre ayarlamak için */
    text-align: center;
    white-space: nowrap;
    /* Metin taşmasını önler */
}


#center-content .btn:hover {
    background-color: rgb(9, 9, 99);
}

.btn {
    display: inline-block;
    box-shadow: 0 0 5px white;
    width: 48%;
    /* Butonların her biri %48 genişliğinde olacak, böylece birbirine yakın olacak */
    text-align: center;
    padding: 15px 0;
    /* İçerideki boşluğu ayarlıyoruz */
    font-size: 18px;
    background-color: rgb(6, 6, 66);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    margin: 10px 1%;
    /* Aralarındaki boşluğu ayarlıyoruz */
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: rgb(6, 6, 66);
    /* Hover rengini değiştir */
}

.button-container {
    display: flex;
    justify-content: center;
    /* Yatayda ortalar */
    align-items: center;
    /* Dikeyde ortalar */
    gap: 10px;
    /* Butonlar arasında mesafe */
    margin-top: 20px;
}

#video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    /* Video diğer içeriklerin arkasında olsun */
}

#background-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Video ekranın tamamını kaplar, kesme yapabilir */
    position: absolute;
    top: 0;
    left: 0;
}


#hakkimizda {
    background-color: white;
    padding: 0px;
    text-align: center;
    text-transform: capitalize;
    font: weight 600px;

}

#sol {
    float: left;
    font-size: 50px;
    width: 400px;

}

#h5border {
    border-right: 5px solid rgb(6, 6, 66);
    height: 310px;
    margin-top: -385px;
}

#h5sol,
#sag {
    margin: 0;
    padding: 0;
    margin-top: 20px;
    color: rgb(4, 4, 44);
    margin-right: 20px;
    transform: translateY(-70px);
}

#sag {
    float: right;
    width: 750px;
    color: rgb(4, 4, 44);
    text-align: center;
    letter-spacing: 1px;
    font-size: 15px;
    line-height: 1.8;
    font-weight: 100;
}


.mt100 {


    margin-top: 100px;

}

#psag {
    font-weight: lighter;
    font-weight: 500;
    font-size: 23px;

}

.hizmetlerimiz {
    background-color: rgb(1, 1, 30);
    text-align: center;
}


/* Hizmetler kartları düzenleme */
.hizmetbaslık {
    transform: translateY(180px);
    margin-right: 980px;
    font-size: 20px;
    font-weight: lighter;
    color: #23a0ff;
    text-shadow: 0 0 1px rgb(9, 9, 99);
}

.hizmetlersoz {
    transform: translateY(150px);
    margin-right: 205px;
    padding-left: middle;
    font-size: 55px;
    color: white;
    white-space: nowrap;
    text-shadow: 0 0 1px rgb(9, 9, 99);
    letter-spacing: 5px;

}

.card {
    width: 350px;
    height: 480px;
    /* Kutu boyu uzatıldı */
    border: 1px solid #ddd;
    border-radius: 11px;
    /* Kartlara köşe yuvarlama eklendi */
    display: inline-block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Hover animasyonu */
    margin: 10px;
    margin-top: 130px;
}

.hizmetfoto {
    width: 100%;
    /* Resmin genişliğini kart genişliğine ayarla */
    height: 100%;
    /* Resmin yüksekliğini kart yüksekliğine ayarla */
    object-fit: cover;
    /* Görüntüyü kart boyutuna sığdırırken oranı koru */
    border-radius: 10px;
    /* Kartla uyumlu köşe yuvarlama */
    opacity: 0.35;

}


.card:hover {
    border: 2px solid rgb(87, 82, 82);
    transform: scale(1.05);
    /* Hoverda hafif büyüme efekti */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    /* Gölge derinleşti */
}


.baslikcard {
    font-size: 20px;
    /* Orijinal başlık boyutu */
    color: #23a0ff;
    font-weight: bold;
    /* Başlıklar kalın yapıldı */
    transform: translateY(-325px);
    padding: 8px;
    text-align: left;
    /* Ortalandı */
}

.cardp {
    color: #ffffff;
    /* Orijinal renk */
    font-size: 25px;
    line-height: 1.6;
    /* Yazılar daha okunabilir */
    transform: translateY(-350px);
    padding: 8px;
    word-spacing: 5px;
    text-align: left;
    /* Ortalandı */
}

/* Yeni buton stili */
.card .read-button {
    transform: translateY(-360px);
    display: block;
    width: 40%;
    margin: 10px;
    padding: 15px 20px;
    background-color: rgb(9, 9, 99);
    /* Kırmızı buton */
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.card .read-button:hover {
    background-color: rgb(12, 12, 120);
    /* Hover rengi daha koyu kırmızı */
}






/* KAYAN REFERANS */
/* Ana kapsayıcı için stil */
.slider-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: rgb(1, 1, 30);
    padding: 30px 0px;
    margin: auto;
}

/* Slider Container */
.slider-container {
    width: 90%;
    max-width: 1800px;
    overflow: hidden;
    position: relative;
    background: transparent;
    padding: 20px 0;
    border-radius: 20px;
}

/* Slider Track */
.slider-track {
    display: flex;
    animation: scroll 20s linear infinite;
    gap: 50px;
}

/* Tek bir logo slide alanı */
.slide {
    min-width: 200px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Sonsuz kaydırma animasyonu */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* Footer ana stil */
.custom-footer {
    background-color: black;
    padding: 40px;
    color: #ffffff;
}

.custom-footer .footer-container {
    display: flex;
    justify-content: space-between;
    max-width: 1100px;
    margin: 0 auto;
}

.custom-footer .footer-left {
    max-width: 50%;
}

.custom-footer .footer-left h2 {
    font-size: 2rem;
    font-weight: bold;
    margin: 0 0 15px 0;
}

.custom-footer .footer-left p {
    line-height: 1.5;
    margin-bottom: 20px;
}

.custom-footer .project-button {
    background-color: #00c774;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 5px;
}

.custom-footer .project-button:hover {
    background-color: #00b166;
}

.custom-footer .footer-right {
    text-align: left;
}

.custom-footer .footer-right p {
    margin: 10px 0;
}

.custom-footer .footer-right a {
    color: #29a5ff;
    text-decoration: none;
}

.custom-footer .footer-right a:hover {
    text-decoration: underline;
}

.custom-footer .social-icons {
    margin-top: 20px;
}

.custom-footer .social-icons img {
    width: 30px;
    margin-right: 10px;
    cursor: pointer;
}

.whatsapp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: green;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.whatsapp-button img {

    height: 65px;
    width: 150px;
}

.whatsapp-button:hover {
    background-color: rgb(6, 6, 66);
    /* Daha koyu yeşil hover efekti */
    transform: scale(1.05);
    /* Hafif büyütme efekti */
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 15px;

}

.social-icons .social {
    color: white;
    /* Set the icon color to white */
    font-size: 36px;
    /* Increase the size of the icons */
    transition: color 0.3s ease;
    /* Add a transition effect */
}

.social-icons .social:hover {
    color: #00c774;
    /* Optional: Change color on hover */
}

/** global */

.custom-header {
    display: flex;
    flex-direction: column;
}

.custom-header .sub-header {
    color: #23a0ff;
    font-size: 20px;
    font-weight: lighter;
    margin-bottom: 10px;
}

.custom-header h2 {
    font-size: 55px;
    color: #fff;
    margin-bottom: 25px;
}

/** global */

/** about-me */

.about-me {
    background-color: rgb(1, 1, 30);
    padding: 100px 0;
}

.about-me .custom-container .inner {
    display: flex;
}

.about-me .custom-container .inner .thumb {
    width: 600px;
    height: 450px;
    margin-right: 50px;
    border-radius: 15px;
}

.about-me.reverse .custom-container .inner .thumb {
    width: 600px;
    height: 450px;
    margin-left: 50px;
    border-radius: 15px;
}

.about-me .custom-container .inner .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.about-me .custom-container .inner .content {
    width: calc(100% - 650px);
    display: flex;
    flex-direction: column;
}

.about-me .custom-container .inner .content .sub-header {
    color: #23a0ff;
    font-size: 20px;
    font-weight: lighter;
    margin-bottom: 0;
}

.about-me .custom-container .inner .content h2 {
    font-size: 55px;
    color: #fff;
    margin-bottom: 20px;
    line-height: 60px;
}

.about-me .custom-container .inner .content p {
    font-size: 18px;
    color: rgb(168, 168, 168);
    line-height: 1.6;
    margin-bottom: 25px;
}

.about-me .custom-container .inner .content .custom-btn {
    display: inline-block;
    padding: 15px 25px;
    font-size: 16px;
    font-weight: bold;
    width: fit-content;
    color: rgb(255, 255, 255);
    background-color: transparent;
    border: 2px solid #23a0ff;
    border-radius: 25px;
    text-decoration: none;
    transition: all 0.3s ease;
}

/** about-me */

/** our-services */
.our-services {
    background-color: rgb(1, 1, 30);
    padding: 100px 0;
}

.our-services .inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.our-services .inner .custom-card {
    margin-right: 30px;
    position: relative;
    border: 1px solid #ddd;
    border-radius: 11px;
    height: 430px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    transition: transform 0.3s, box-shadow 0.3s;
}

.our-services .inner .custom-card:hover {
    border: 2px solid rgb(87, 82, 82);
    transform: scale(1.05);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

.our-services .inner .custom-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 11px;
    z-index: 1;
    filter: brightness(35%);
}

.our-services .inner .custom-card h3 {
    font-size: 20px;
    color: #23a0ff;
    font-weight: bold;
    position: relative;
    z-index: 2;
    margin-bottom: 10px;
}

.our-services .inner .custom-card p {
    color: #ffffff;
    font-size: 18px;
    line-height: 1.6;
    position: relative;
    z-index: 2;
    margin-bottom: 15px;
}

.our-services .inner .custom-card .custom-btn {
    display: block;
    width: fit-content;
    padding: 15px 20px;
    background-color: rgb(9, 9, 99);
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 8px;
    position: relative;
    z-index: 2;
    transition: background-color 0.3s ease;
}

.our-services .inner .custom-card:last-child {
    margin-right: 0;
}

/** our-services */



/* Ana Container */
.bizvarken-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 50px;
    gap: 20px;
    background-color: transparent;
    animation: fadeInUp 2s ease-out;
    background-color: rgb(1, 1, 30);

}

.bizvarken-content {
    transform: translateY(-160px);
    max-width: 50%;
}

.bizvarken-content h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #ffffff;
    letter-spacing: 3px;
}


.bizvarken-content p {
    font-size: 1rem;
    line-height: 1.8;
    color: rgb(168, 168, 168);
    margin-bottom: 20px;
}

/* Buton Tasarımı */
.bizvarken-button {
    background-color: rgb(9, 9, 99);
    color: #fff;
    border: none;
    padding: 15px 20px;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.bizvarken-button:hover {
    background-color: rgb(12, 12, 120);
}

/* Görsel Alanı */
.bizvarken-image img {
    transform: translateY(-150px);
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.bizvarkenh1 {
    color: #003366;
}

/** MENU */
#menu {
    background-color: transparent;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0px 10px;
    color: white;
    text-align: center;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    height: 100px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s, height 0.3s;
    font-size: 17px;
}

#menu.scrolled {
    background-color: rgb(4, 4, 44) !important;
    height: 65px;
}

#menu.scrolled #logo img {
    margin-top: 8px;
    height: 65px;
}

#menu #logo {
    font-size: 40px;
    line-height: 80px;
    color: white;
    float: left;
}

#menu #logo img {
    height: 80px;
    width: auto;
}

#menu nav {
    float: right;
    line-height: 80px;
    text-decoration: none;
}

#menu nav a {
    text-decoration: none;
    margin-right: 25px;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#menu nav a:hover {
    color: #23a0ff;
    text-decoration: none;
}

#menu nav a.active {
    background-color: rgba(35, 160, 255, 0.8);
    color: white;
    border-radius: 20px;
    text-decoration: none;
}

#menu #hamburger-menu {
    display: none;
    font-size: 30px;
    cursor: pointer;
    color: white;
}

/** MENU */

/** PRELOADER */

#preloader {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgb(6, 6, 66), rgb(3, 3, 125));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.5s ease-out;
    transform: translateX(-50%) translateY(-50%);
}

.loader {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #23a0ff;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#preloader.hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-out, visibility 0s 0.5s;
}

/** PRELOADER */

/** hakkimizda.php */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


.timeline {
    position: relative;
    margin: 40px auto;
    padding: 0;
    width: 90%;
    max-width: 1200px;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background: black;
}

.timeline-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100%;
    padding: 20px 0;
    box-sizing: border-box;
    animation: fadeInUp 1.5s ease-out;
}

.timeline-item:nth-child(odd) {
    flex-direction: row-reverse;
}

.timeline-item::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: rgb(3, 3, 117);
    border-radius: 50%;
    z-index: 1;
}

.timeline-content {
    background: rgb(6, 6, 66);
    color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 45%;
    animation: slideInLeft 1.5s ease-out;
}

.timeline-content h2 {
    margin: 0 0 10px;
    font-size: 1.8rem;
    color: inherit;
}

.timeline-content p {
    font-size: 1rem;
    line-height: 1.6;
    color: inherit;
}

.timeline-content img {
    width: 300px;
    height: 400px;
    object-fit: cover;
    border-radius: 8px;
    animation: slideInRight 1.5s ease-out;
}

.timeline-image {
    width: 300px;
    height: 400px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.h1hakkinda,
.h4hakkinda {
    text-align: center;
    margin: 20px 0;
}

.h1hakkinda {
    margin-top: 125px;
    font-size: 2.5rem;
    color: #2a2a2a;
    animation: fadeInUp 1.5s ease-out;
}

.h4hakkinda {
    animation: fadeInUp 2s ease-out;
    font-size: 1.2rem;
    color: #666;
}

.photo-area {
    margin: 40px auto;
    padding: 0;
    text-align: center;
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    width: 90%;
    max-width: 1200px;
    position: relative;
    height: 300px;
}

.photo-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.photo-area .text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    transform: translateY(10px);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 2rem;
    text-align: center;
    font-family: "Bebas Neue", serif;
    font-weight: 400;
    font-style: normal
}

.hakkimizdah3 {
    font-size: 1.2rem;
    color: #003366;
    margin: 10px 0;
}

.hakkımızdah2 {
    transform: translateY(0px);
}

/** hakkimizda.php */

/** referans.php */
#referanslar .h2ref {
    text-align: center;
    margin: 20px 0;
    padding: 0 10px;
    color: #333;
    font-size: 1.2em;
    font-size: 42px;
    line-height: 43px;
    color: white;
    padding-top: 90px;
    transform: translateY(80px);
}

#referanslar .referans-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 0 auto;
    padding-top: 30px;
    transform: translateY(130px);
}

#referanslar .referans-card {
    background-color: #c4daff;
    border-radius: 10px;
    text-align: center;
    width: 300px;
    padding: 20px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

#referanslar .referans-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(10deg, rgb(6, 6, 66), #3333ff, #23a0ffcc, white);
    background-size: 300% 300%;
    border-radius: 10px;
    padding: 3px;
    box-sizing: border-box;
    z-index: -1;
    animation: rotate-border 5s linear infinite;
}

#referanslar .referans-card::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    background-color: #c4daff;
    border-radius: 8px;
    z-index: 1;
}

#referanslar .referans-card>* {
    position: relative;
    z-index: 2;
}

#referanslar .referans-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

#referanslar .referans-card img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    position: relative;
    z-index: 2;
}

#referanslar .referans-card h3,
#referanslar .h3referans {
    margin: 15px 0 5px;
    font-size: 1.2em;
    color: #222;
    position: relative;
    z-index: 2;
}

#referanslar .referans-card p {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
}

#referanslar .btnref {
    display: inline-block;
    text-decoration: none;
    background-color: black;
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    position: relative;
    z-index: 2;
}

#referanslar .btnref:hover {
    background-color: #153bb1;
}

@keyframes rotate-border {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.containerilet {
    display: flex;
    max-width: 1000px;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    transform: translateY(100px);
    margin: 100px auto;
    padding: 20px;
    margin-top: 150px;
    margin-bottom: 250px;
}


.contact-info {
    background: linear-gradient(to bottom, rgba(4, 4, 44, 0.9), rgba(6, 6, 66, 0.9));
    padding: 30px;
    flex: 1;
    color: white;
}



.contact-info h2 {
    margin: 0 0 20px;
    color: white;
}

.contact-info p {
    margin: 10px 0;
    font-size: 14px;
    color: white;
}

.contact-info a {
    color: #fff;
    text-decoration: none;
}

.contact-info .icon {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.contact-info .icon img {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

.form {
    background-color: #181818;
    padding: 30px;
    flex: 1;
}

.form h2 {
    margin-bottom: 20px;
    color: #fff;
}

.form input,
.form textarea {
    width: 100%;
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #444;
    background-color: #222;
    color: #fff;
}

.form textarea {
    resize: none;
    height: 100px;
    color: white;
}

.form button {
    background-color: rgb(8, 0, 126);
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.form button:hover {
    background-color: rgb(0, 68, 255);
}

.form input,
.form textarea {
    color: #fff;
}

.form input::placeholder,
.form textarea::placeholder {
    color: #fff;
    opacity: 1;
}

.containerilet .formselect {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
    border: 1px solid #444;
    background-color: #222;
    color: white;
    font-size: 14px;
}

.containerilet .formselect option {
    background-color: #222;
    color: white;
}

.containerilet .formselect option[disabled] {
    color: #999;
}

/** referans.php */

/** ekip.php */
.ekipcontainer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px;
    margin: 40px auto;
    min-height: calc(100vh - 80px);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.ekipcontainer.visible {
    opacity: 1;
    transform: translateY(0);
}

.ekipleft-section {
    max-width: none;
    width: calc(100% - 730px);
}

.ekipcubuk {
    border-left: 3px solid #23a0ff;
    height: 100px;
    margin-top: -390px;
    margin-right: 10px;
}

.ekipleft-section h1 {
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 400;
    margin-left: 20px;
    margin-bottom: 20px;
}

.ekipleft-section h1 span {
    display: block;
    color: #23a0ff;
    font-weight: 700;
    margin-top: 200px;
    margin-bottom: -40px;
}

.ekipleft-section p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 30px;
    color: white;
}

.ekipleft-section button {
    padding: 10px 30px;
    border: 1px solid #fff;
    background: transparent;
    color: #fff;
    font-size: 1rem;
    border-radius: 25px;
    cursor: pointer;
    transition: background 0.3s, border 0.3s;
}

.ekipleft-section button:hover {
    background: #23a0ff;
    border-color: #23a0ff;
}

.ekipright-section {
    display: flex;
    overflow: hidden;
    margin-left: 100px;
    width: 630px;
    position: relative;
}

.ekipcard-slider {
    display: flex;
    gap: 50px;
    margin-top: 150px;
    padding-bottom: 10px;
    transform: translateX(0);
    transition: transform 1s ease-in-out;
    /* Akıcı geçiş için */
    will-change: transform;
}

.ekipcard {
    background-color: rgb(6, 6, 66);
    border-radius: 8px;
    height: 450px !important;
    width: 280px !important;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.ekipcard:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.8);
}


.ekip::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    background-color: #c4daff;
    border-radius: 8px;
    z-index: 1;
}

.ekipcard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 5px solid transparent;
    border-image: linear-gradient(45deg, #3333ff, #23a0ff, white, #23a0ff, #3333ff);
    border-image-slice: 1;
    border-radius: 8px;
    z-index: 1;
    pointer-events: none;
    background-size: 200% 200%;
}

.ekipcard h3 {
    font-size: 1.4rem;
    margin: 10px 0;
    color: #fff;
    font-weight: 600;
    transform: translateY(10px)
}

.ekipcard p {
    font-size: 1rem;
    margin-bottom: 15px;
    color: #ddd;
    line-height: 1.5;
    transform: translateY(-8px)
}

.ekipsocial-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
    transform: translateY(-25px)
}

.ekipsocial-icons i {
    font-size: 1.5rem;
    margin: 4px;
    color: white;
    cursor: pointer;
    transition: color 0.3s, transform 0.3s;
}

.ekipsocial-icons i:hover {
    color: #23a0ff;
    transform: scale(1.2);
}

.ekipimage-placeholder img {
    position: relative;
    width: 97%;
    height: 97%;
    object-fit: cover;
    transform: translateY(5px)
}

/** ekip.php */


.custom-footer .contact-info {
    background: transparent !important;
    padding: 0 !important;
    flex: 1;
}

.custom-footer .contact-info p {
    font-size: 16px;
}























/*! our-services */

.rotateme {
    -webkit-animation-name: rotateme;
    animation-name: rotateme;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

@-webkit-keyframes rotateme {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotateme {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.__our-services {
    padding: 0 0 100px 0;
    background-color: rgb(1, 1, 30);
}

.__our-services .box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.__our-services .box .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 0;
    user-select: none;
    pointer-events: none;
}

.__our-services .box .item {
    width: calc(100% / 3);
    display: flex;
    flex-direction: column;
    position: relative;
}

.__our-services .box .item.center {
    padding: 0 30px;
    min-height: 700px;
    justify-content: center;
}

.__our-services .header-section {
    text-align: center;
    position: relative;
    z-index: 2;
}

.__our-services .header-section .header {
    font-size: 40px;
    color: #fff;
}

.__our-services .header-section .sub-header {
    font-size: 18px;
    color: #d6d6d6;
}

.__our-services .box .item.left .child:not(:last-child),
.__our-services .box .item.right .child:not(:last-child) {
    margin-bottom: 40px;
}

.__our-services .box .item.left .child {
    text-align: right;
    align-items: flex-end;
}

.__our-services .box .item .child img {
    position: absolute;
    width: 60px;
    height: 60px;
    object-fit: contain;
    opacity: .4;
    user-select: none;
    pointer-events: none;
}

.__our-services .box .item.left .child img {
    top: 10px;
    left: 5px;
}

.__our-services .box .item.right .child img {
    top: 10px;
    right: 5px;
}

.__our-services .box .item .child::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 10px;
    width: 100%;
    background-color: #4CAFFF;
    z-index: 1;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.__our-services .box .item .child {
    border: 1px solid #4CAFFF;
    background-color: #C4DAFF;
    padding: 10px 20px 20px;
    display: flex;
    border-radius: 10px;
    position: relative;
    flex-direction: column;
}

.__our-services .box .item.left .child .header::before {
    border-bottom-left-radius: 10px;
}

.__our-services .box .item.right .child .header::before {
    border-bottom-right-radius: 10px;
}

.__our-services .box .item .child .header::before {
    content: "";
    background-color: #4CAFFF;
    width: calc(100% + 40px);
    height: calc(100% + 10px);
    position: absolute;
    top: -5px;
    left: -20px;
    z-index: -1;
}

.__our-services .box .item .child .header {
    font-size: 1.2em;
    position: relative;
    z-index: 2;
    width: fit-content;
    color: #fff;
    text-shadow: 0px 2px 3px rgb(0 0 0 / 40%), 0px 2px 5px rgb(0 0 0 / 10%), 0px 18px 23px rgb(0 0 0 / 10%);
    margin-bottom: 20px;
}

.__our-services .box .item .child .text {
    font-size: 16px;
    font-weight: 500;
    margin-top: 15px;
}

.__our-services .box .item.center img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 15px;
    border: 1px solid #C4DAFF;
}

/*! our-services */





















/*! cv.php */
.cv-main-container {
    display: flex;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    background: white;
}

.cv-main-container .main-image {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    object-fit: cover;
    height: 100%;
    z-index: 0;
    filter: brightness(50%);
}

.cv-form-section {
    width: 30%;
    padding: 30px;
    background-color: rgba(255, 255, 255, .5);
    backdrop-filter: blur(6px);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.cv-form-section h2 {
    color: rgb(1, 1, 30);
    margin-bottom: 20px;
}

.cv-form-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.cv-form-container input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
}

.cv-form-container input:focus {
    outline: none;
    border-color: rgb(1, 1, 30);
}

.cv-submit-btn {
    padding: 12px;
    background: rgb(1, 1, 30);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background 0.3s ease;
}

.cv-submit-btn:hover {
    background: #1d4ed8;
}

.file-upload-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.file-upload-label {
    font-size: 16px;
    color: #3498db;
    cursor: pointer;
    padding: 12px 20px;
    background-color: #fff;
    border: 2px dashed #3498db;
    border-radius: 5px;
    transition: all 0.3s ease;
    font-weight: bold;
    text-transform: uppercase;
}

.file-upload-label:hover {
    background-color: #3498db;
    color: white;
}

.file-upload-label input[type="file"] {
    display: none;
}

.file-name-display {
    font-size: 14px;
    color: #555;
    margin-top: 5px;
}

.file-upload-button {
    padding: 12px 20px;
    background-color: rgb(1, 1, 30);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: background 0.3s ease;
}

.file-upload-button:hover {
    background-color: #1d4ed8;
}

.status-message {
    margin-top: 20px;
    font-size: 14px;
    font-weight: bold;
}

.status-message.success {
    color: green;
}

.status-message.error {
    color: red;
}

.cv-info-section {
    position: relative;
    background-image: url('görseller/cvarkaplan.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    padding: 0 10%;
    z-index: 0;
}

.cv-info-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.5;
    z-index: 0;
}

.blue-bar {
    width: 5px;
    height: 80px;
    background-color: #3498db;
    margin-right: 20px;
    flex-shrink: 0;
    z-index: 1;
}

.cv-info-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    z-index: 2;
    position: relative;
}

.cv-info-h1 {
    font-size: 50px;
    margin: 0;
    color: white;
}

.cv-info-p {
    font-size: 16px;
    margin-top: 10px;
    color: white;
}

/*! cv.php */
























/*! information-boxes */

.information-boxes {
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .information-boxes {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }
}

.information-boxes .inner {
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr;
}

.information-boxes .inner .item {
    margin-right: 0px;
    margin-bottom: 20px;
}

.information-boxes .inner .item:last-child {
    margin-right: 0;
}

@media (min-width: 1280px) {
    .information-boxes .inner {
        grid-template-columns: repeat(3, 1fr);
    }

    .information-boxes .inner .item {
        margin-right: 40px;
    }

    .information-boxes .inner .item:last-child {
        margin-right: 0;
    }
}

.information-boxes .item {
    position: relative;
    overflow: hidden;
    border-radius: 0.375rem;
    border-width: 1px;
    border-color: rgb(0 0 0 / 0.2);
    --tw-bg-opacity: 1;
    background-color: #040437;
    padding: 2px;
}

.information-boxes .item .glow {
    position: absolute;
    inset: 0px;
    height: 100px;
    width: 100px;
    --tw-rotate: 45deg;
    transform: translate(0, 0) rotate(45deg) scaleX(1) scaleY(1);
}

.information-boxes .item .item-inner {
    position: relative;
    z-index: 10;
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* .information-boxes .item .item-inner> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
} */

.glow {
    animation: move 5s linear infinite;
    offset-path: rect(0% auto 100% auto);
    background: radial-gradient(#C4DAFF, #C4DAFF, transparent);
}


@keyframes move {
    0% {
        offset-distance: 0%;
    }

    100% {
        offset-distance: 100%;
    }
}


.information-boxes .item .item-inner {
    overflow: hidden;
    border-radius: 0.375rem;
    --tw-bg-opacity: 1;
    background-color: #040437;
    padding: 1.25rem;
}

.information-boxes .item .item-inner .title {
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: #fff;
    text-shadow: 0px 2px 3px rgb(0 0 0 / 40%), 0px 2px 5px rgb(0 0 0 / 10%), 0px 18px 23px rgb(0 0 0 / 10%);
}

@media (min-width: 640px) {
    .information-boxes .item .item-inner .title {
        font-size: 1.5rem;
        line-height: 2rem;
    }
}

@media (min-width: 768px) {
    .information-boxes .item .item-inner .title {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
}

.information-boxes .item .item-inner .text {
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #d8d8d8;
}

@media (min-width: 640px) {
    .information-boxes .item .item-inner .text {
        font-size: 1rem;
        line-height: 1.5rem;
    }
}

.middle-field {
    margin-top: 50px;
    height: 200px;
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: center;
    text-align: center;
}

.typing-animation {
    font-size: 42px;
    line-height: 52px;
    color: #fff;
    font-weight: 500;
    display: inline-block;
    position: relative;
}

.typing-animation .text {
    display: inline;
}

.typing-animation .typed-cursor {
    display: inline;
    vertical-align: baseline;
    font-size: 50px;
    width: 1px;
    font-weight: 300;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    -ms-animation: blink 0.7s infinite;
    -o-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/*! /information-boxes */



















.custom-container {
    width: 100%;
    padding-right: 20px;
    padding-left: 20px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .custom-container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .custom-container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .custom-container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .custom-container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .custom-container {
        max-width: 1320px;
    }
}

@media (min-width: 1024px) and (max-width: 1200px) {
    .ekipcubuk {
        display: none;
    }

    .ekipleft-section button {
        font-size: 0.8rem;
        padding: 8px 20px;
    }

    .ekipcard-slider {
        flex-wrap: nowrap;
        gap: 50px;
    }

    .ekipcard {
        width: 10%;
        /* Kart genişliği ayarlanır */
        margin: 0 auto;
    }

    .ekipright-section {
        width: 100%;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {

    /** ekip.php */

    .ekipcard {
        width: 10%;
        margin: 0 auto;
    }

    /** ekip.php */

    .hizmetlerimiz {
        height: 1700px;
    }

    .hizmetlerimiz .hizmetbaslık {
        transform: translateY(25px);
        margin-left: 18%;
    }

    .hizmetlerimiz .hizmetlersoz {
        transform: translateY(10px);
        font-size: 2.6rem;
        margin-left: 18%;
        letter-spacing: 0px;
    }

    .hizmetlerimiz .card {
        display: block;
        /* Kartları tam genişlikte alt alta sıralar */

        margin: 25px 9%;
        /* Üst ve alt boşluk ayarı */
    }
}

@media screen and (max-width: 1280px) {
    .__our-services .box .background {
        top: -100px;
        height: calc(100% + 200px);
    }

    .__our-services .box .item {
        width: calc(100% / 2 - 20px);
    }

    .__our-services .header-section {
        margin-bottom: 50px;
    }

    .__our-services .box .item.center {
        display: none;
    }

    .__our-services .box {
        overflow: inherit;
    }

    .__our-services .box .item.left {
        margin-right: 40px;
    }

    .__our-services {
        overflow: hidden;
    }

    .__our-services .box .item .child {
        min-height: 144px;
    }

}

@media screen and (max-width: 1500px) {
    .cv-form-section {
        width: 400px;
        min-width: 400px;
    }
}

@media screen and (max-width: 1200px) {
    .cv-main-container {
        flex-direction: column;
        align-items: center;
    }

    .cv-form-section {
        width: 100%;
        min-width: auto;
        max-width: 500px;
    }

    .typing-animation {
        font-size: 32px;
        line-height: 42px;
    }

    .typing-animation .typed-cursor {
        font-size: 32px;
    }

    .ekipright-section {
        width: 100%;
    }

    .ekipcubuk {
        display: none !important;
    }

    .ekipleft-section h1 {
        font-size: 2.5rem !important;
        margin-left: 0;
    }

    .ekipleft-section h1 span {
        font-size: 2.5rem;
    }

    .ekipleft-section p {
        font-size: 1.3rem !important;
        margin-left: 0;
    }

    .ekipleft-section {
        max-width: none;
        text-align: left;
        width: 100%;
    }

    .ekipcontainer {
        flex-direction: column;
        align-items: center;
        margin-top: 7rem;
    }

    .ekipcontainer {
        padding: 0 20px;
    }

    .ekipleft-section h1 span {
        margin-top: 50px;
    }

    .ekipcard-slider {
        margin-top: 50px;
    }

    .ekipright-section {
        margin-left: 0;
    }

    .about-me.reverse .custom-container .inner {
        flex-direction: column-reverse;
    }

    .about-me.reverse .custom-container .inner .thumb {
        width: 100%;
        height: 400px;
        margin-bottom: 50px;
        margin-left: 0;
    }

    .about-me.reverse .custom-container .inner .content {
        width: 100%;
    }

    .about-me .custom-container .inner .thumb {
        width: 400px;
        height: 400px;
    }

    .about-me .custom-container .inner .content {
        width: calc(100% - 450px);
    }
}

@media screen and (max-width: 991px) {
    .file-name-display {
        color: #000;
    }

    .cv-main-container {
        justify-content: center;
        padding: 20px;
    }

    .cv-main-container .main-image {
        display: block;
    }

    .cv-info-section {
        display: none;
    }

    #referanslar .h2ref {
        font-size: 33px;
        line-height: 39px;
    }

    .custom-header h2 {
        font-size: 45px;
        line-height: 50px;
    }

    .about-me .custom-container .inner .content h2 {
        font-size: 45px;
    }

    .our-services .inner {
        grid-template-columns: repeat(1, 1fr);
    }

    .our-services .inner .custom-card {
        margin-right: 0;
        margin-bottom: 30px;
    }

    .our-services .inner .custom-card:last-child {
        margin-bottom: 0;
    }

    .about-me .custom-container .inner {
        flex-direction: column;
    }

    .about-me .custom-container .inner .thumb {
        width: 100%;
        height: 400px;
        margin-right: 0;
        margin-bottom: 50px;
    }

    .about-me .custom-container .inner .content {
        width: 100%;
    }

    .custom-footer .footer-container {
        flex-direction: column;
    }

    .custom-footer .footer-left {
        max-width: 100%;
    }

    .custom-footer .footer-container .footer-right {
        margin-top: 50px;
    }

    .custom-footer .footer-container .footer-right .social-icons {
        justify-content: start;
    }

    /* MENU */
    #menu #hamburger-menu {
        display: block;
        margin-right: 15px;
    }

    #menu #logo img {
        margin-left: -35px;
    }

    #menu #nav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: rgb(4, 4, 44);
        position: absolute;
        top: 100px;
        /* Menü yüksekliği kadar */
        left: 0;
        z-index: 999;
    }

    #menu #nav-menu.active {
        display: flex;
    }

    #menu #nav-menu a {
        padding: 10px 0;
        text-align: center;
        width: 100%;

    }

    #menu nav a.active {
        background-color: rgba(35, 160, 255, 0.8);
        /* Aktif kalan arka plan */
        color: white;
        border-radius: 0px;
        text-decoration: none;
    }

    /* MENU */
}

@media screen and (max-width: 768px) {
    .typing-animation {
        font-size: 27px;
        line-height: 37px;
    }

    .typing-animation .typed-cursor {
        font-size: 27px;
    }

    .__our-services .box .item .child img {
        display: none;
    }

    .__our-services .box .item .child {
        min-height: auto;
        overflow: hidden;
    }

    .__our-services .box .item {
        width: 100%;
    }

    .__our-services .box .item.left {
        margin-right: 0;
        margin-bottom: 40px;
    }

    .__our-services .box .item .child .header::before {
        width: 1500px;
        left: -400px;
        height: calc(100% + 15px);
    }

    .__our-services .box .item.right .child,
    .__our-services .box .item.left .child {
        text-align: left;
        align-items: center;
    }

    .__our-services .box .background {
        display: none;
    }

    #referanslar .referans-container {
        padding-top: 0;
    }

    /** ekip.php */
    .ekipcontainer {
        flex-direction: column;
        align-items: center;
    }

    .ekipcubuk {
        display: none;

    }

    .ekipleft-section {
        max-width: 100%;
        text-align: left;
    }

    .ekipleft-section h1 {
        font-size: 2rem !important;
    }

    .ekipleft-section h1 span {
        font-size: 2rem;
    }

    .ekipleft-section p {
        font-size: 1rem !important;
    }

    .ekipleft-section button {
        font-size: 0.8rem;
        padding: 8px 20px;
    }

    .ekipright-section {
        margin: 0;
        width: 100%;
    }

    .ekipcard-slider {
        flex-wrap: nowrap;
        gap: 50px;
    }

    .ekipcard {
        width: 10%;
        /* Kart genişliği ayarlanır */
        margin: 0 auto;
    }

    /** ekip.php */

    /** referans.php */
    #referanslar .h2ref {
        font-size: 40px;
        margin: auto;
        padding-top: 60px;
        transform: translateY(50px);
    }

    #referanslar .referans-container {
        flex-direction: column;
        transform: translateY(100px);
        gap: 10px;
    }

    #referanslar .referans-card {
        width: 90%;
        margin: 5% 5%;
    }

    .containerilet {
        flex-direction: column;
        padding: 10px;
    }

    .containerilet .contact-info,
    .containerilet .form {
        flex: 1 1 100%;
        padding: 15px;
    }

    /** referans.php */

    /** hakkimizda.php */
    .timeline {
        width: 90%;
        margin-left: -38%;
    }

    .timeline-item {
        flex-direction: column;
    }

    .timeline-content {
        width: 85%;
        /* İçeriğin genişliği %90 olacak şekilde ayarlanır */
        text-align: center;
        /* İçeriği ortalar */
        margin: 0 auto;
        /* Ortada hizalamayı sağlar */
        margin-right: -40%;
    }

    .timeline-content img {
        width: 100%;
        height: auto;
    }

    .photo-area {
        height: auto;
    }

    .photo-area img {
        height: 100%;
        weight: 100%;
    }

    .h1hakkinda {
        font-size: 2rem;
    }

    .h4hakkinda {
        font-size: 1rem;
    }

    .hakkimizdah3 {
        font-size: 1rem;
    }

    .hakfotoları {
        display: none;
    }

    /** hakkimizda.php */

    #video-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: -1;
        /* Video diğer içeriklerin arkasında olsun */

    }

    #background-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Video ekranın tamamını kaplar, kesme yapabilir */
        position: absolute;
        top: 0;
        left: 0;
    }


    #anasayfa {
        height: 43rem;
    }

    #center-content .btn-container {
        gap: 0;
    }

    #center-content h1 {
        font-size: 42px;
        line-height: 53px;
    }

    #center-content p {
        font-size: 18px;
        /* Paragraf yazı boyutunu küçült */
    }

    #center-content .btn {
        padding: 10px 30px;
        /* Buton boyutunu ayarla */
        font-size: 14px;
    }

    .btn {
        width: 100%;
        /* Butonları tam genişlik yap */
        font-size: 16px;
        /* Buton yazı boyutunu ayarla */
        margin: 5px 0;
        /* Aralıkları daralt */
    }

    .hizmetlerimiz {
        height: 1700px;
    }

    .hizmetlerimiz .hizmetbaslık {
        transform: translateY(25px);
        margin-left: 20px;
    }

    .hizmetlerimiz .hizmetlersoz {
        transform: translateY(10px);
        font-size: 28px;
        margin-left: 20px;
        letter-spacing: 0px;
    }

    .hizmetlerimiz .card {
        display: block;
        /* Kartları tam genişlikte alt alta sıralar */

        margin: 25px 8%;
        /* Üst ve alt boşluk ayarı */
        width: 85%;
    }

    .bizvarken-image img {
        display: none;
    }

    .anahak {
        transform: translateY(-100px) !important;
        text-align: left;
        padding: 20px;
        margin-left: -520px;
    }

    .inner-box {
        display: none;

    }

    .anahak .hakbaslık {

        font-size: 18px;
        /* Smaller font size on mobile */
        width: 78%;
    }

    .anahak h1 {

        font-size: 40px;
        /* Adjust font size for smaller screens */
        letter-spacing: 3px;
        /* Adjust letter spacing */
        width: 78%;
    }

    .anahak .hakcumle {

        font-size: 16px;
        /* Smaller font size */
        margin-bottom: 10px;
        width: 76%;
    }

    .bizvarken-container {
        padding: 20px;
        /* Daha kompakt padding */
        margin-top: -10px;
        margin-bottom: -150px;
        height: 800px;
    }

    .bizvarken-content {
        transform: translateY(-80px);
        /* Daha az yukarı kaydır */
    }

    .bizvarken-content h1 {
        font-size: 1.8rem;
        /* Daha küçük başlık */
        transform: translateY(60px);
        width: 200%;
        letter-spacing: 2px;
    }

    .bizvarken-content p {
        transform: translateY(60px);
        font-size: 1rem;
        /* Daha küçük metin */
        width: 200%;
    }

    .bizvarken-button {
        padding: 10px 15px;
        /* Daha küçük padding */
        font-size: 0.8rem;
        /* Daha küçük yazı boyutu */
        transform: translateY(50px);
    }
}

@media screen and (max-width: 500px) {
    .ekipcard-slider { 
        gap: 40px;
    }

    .ekipcard:first-child {
        margin-left: 25px !important;
    }

    .ekipcard {
        margin-left: 11px !important;
    }

    .typing-animation {
        font-size: 24px;
        line-height: 34px;
    }

    .typing-animation .typed-cursor {
        font-size: 24px;
    }

    .containerilet {
        margin-top: 50px;
        margin-bottom: 150px;
    }

    #referanslar .h2ref {
        font-size: 30px;
        line-height: 36px;
    }

    .about-me,
    .our-services {
        padding: 50px 0;
    }

    #anasayfa {
        height: 100dvh;
    }

    .custom-header h2,
    .about-me .custom-container .inner .content h2 {
        font-size: 38px;
        line-height: 44px;
    }

    .about-me .custom-container .inner .thumb,
    .about-me.reverse .custom-container .inner .thumb {
        height: 250px;
    }
}

@media (max-width: 480px) {
    .h1hakkinda {
        font-size: 1.8rem;
    }

    .h4hakkinda {
        font-size: 0.9rem;
    }

    .hakkimizdah3 {
        font-size: 0.9rem;
    }
}