@charset "utf-8";
@media screen and (max-width: 769px){
    body{
        color: #fff;
        font-family: Roboto;
        background: #450b32;
        background: linear-gradient(21deg, rgb(79, 13, 57) 0%, #6b0056 38%, rgb(48, 1, 90) 100%);
        background-position: center center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
        margin: 0px;
        padding: 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    body h1, h2, h3, h4, h5{
        font-size: xx-large;
        text-align: center;
    }

    header{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .logo {
        margin-top: 100px;
        width: 50%;
    }

    .logo img{
        filter: drop-shadow(0px 5px 5px #000000);
    }

    .slogan{
        font-size: small;
        margin: 10px;
        filter: drop-shadow(0px 5px 5px #000000);
    }

    nav{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-top: 20px;
    }

    nav ul{
        width: 80%;
        list-style: none;
        margin: 0px;
        padding: 0px;
    }

    nav ul li a{
        font-size: large;
        color: #000000;
        background: #a3a3a3;
        background: linear-gradient(60deg, rgba(163, 163, 163, 1) 0%, rgba(224, 224, 224, 1) 38%, rgba(156, 156, 156, 1) 100%);
        text-decoration: none;
        display: block;
        text-align: center;
        padding: 10px;
        margin-top: 5px;
        border-radius: 5px;
    }

    nav ul li a:hover{
        color: rgb(0, 0, 0);
        background: #ff5900;
        filter: drop-shadow(0px 3px 10px #000000);
    }

    main{
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 80%;
    }

    .hero{
        color: rgb(0, 0, 0);
        background: #ff5900;
        padding: 20px;
        margin-top: 20px;
        text-align: center;
        border-radius: 5px;
    }

    section .kart{
        color: rgb(255, 255, 255);
        background: #090136;
        background: linear-gradient(60deg, rgba(9, 1, 54, 1) 0%, rgba(0, 0, 56, 1) 38%, rgba(28, 0, 48, 1) 100%);
        border-radius: 5px;
        padding: 20px;
        margin-top: 20px;
    }

    section .kart h3{
        margin: 0px;
        padding: 0px;
    }

    section .kart figure{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    section .kart figure img, .hero figure img{
        width: 50%;
        margin: 10px;
    }

    .hero a {
        display: block;
        padding: 3px;
        color: #fff;
        font-size: xx-large;
        text-decoration: none;
        background-color: #090136;
        border-radius: 20px;
    }

    .hero a:hover{
        background-color: #fff;
        color: #090136;
    }

    section .kart p a, section .referanslarim p a{
        color: #ff5900;
        font-weight: bold;
        text-decoration: none;
    }

    section .kart a{
        color: #ff5900;
        font-weight: bold;
        text-decoration: none;
    }

    .referanslarim{
        font-size: large;
        color: #000000;
        background: #a3a3a3;
        background: linear-gradient(60deg, rgba(163, 163, 163, 1) 0%, rgba(224, 224, 224, 1) 38%, rgba(156, 156, 156, 1) 100%);
        text-decoration: none;
        display: block;
        text-align: center;
        padding: 10px;
        margin-top: 20px;
        border-radius: 5px;
    }

    section header h1{
        color: #090136;
        background: #ff5900;
        padding: 20px;
        margin-top: 20px;
        text-align: center;
        border-radius: 5px;
    }

    main .hizmet-kart{
        color: rgb(255, 255, 255);
        background: #090136;
        background: linear-gradient(60deg, rgba(9, 1, 54, 1) 0%, rgba(0, 0, 56, 1) 38%, rgba(28, 0, 48, 1) 100%);
        border-radius: 5px;
        padding: 20px;
        margin-top: 20px;
    }

    main .hizmet-kart figure{
        width: 100%;
        margin: 0px;
    }

    main .hizmet-kart figure img{
        width: 100%;
        height: auto;
        border-radius: 10px;
    }

    footer{
        width: 80%;
        margin-top: 20px;
        border-radius: 5px;
        background: #a3a3a3;
        background: linear-gradient(60deg, rgba(163, 163, 163, 1) 0%, rgba(224, 224, 224, 1) 38%, rgba(156, 156, 156, 1) 100%);
    }

    footer .social{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top:10px ;
    }

    footer .social ul{
        list-style: none;
        margin: 0px;
        padding: 0px;
    }

    footer .social ul li{
        display: inline-block;
    }

    footer .social ul li a{
        text-decoration: none;
        color: #450b32;
    }

    footer .linkler{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top:10px ;
    }

    footer .linkler h2{
        color: #090136;
        margin: 0px;
        padding: 0px;
    }

    footer .linkler ul{
        list-style: none;
        margin: 0px;
        padding: 0px;
    }

    footer .linkler ul li{
        display: block;
        text-align: center;
    }

    footer .linkler ul li a{
        display: block;
        height: 10px;
        font-size:medium;
        text-decoration: none;
        background-color: #090136;
        line-height: 10px;
        color: #ff5900;
        padding: 15px;
        margin-top: 5px;
        border-radius: 5px;
    }

    footer .linkler ul li a:hover{
        background-color: #6b0056;
    }

    footer .copyright{
        color: #000000;
        margin: 15px;
        font-size: small;
        text-align: center;
    }

    figure img{
        width: 100%;
    }

    figcaption{
        text-align: center;
    }

    .iletisim-kart{
        margin-top: 50px;
    }

    .iletisim-kart a{
        color: #ff5900;
    }

    .kutu{
        width: 100%;
        max-width: 1000px;
        min-height: 30px;
    }
    
    .textkutu{
        width: 100%;
        max-width: 1000px;
        min-height: 100px;
    }

    .gonder{
        font-size: xx-large;
    }

    .whatsapp a{
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    position: fixed;
    width: 50px;
    height: 50px;
    bottom: 80px;
    left: 20px;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    z-index: 100;
    }

    .whatsapp img{
    width: 50px;
    height: 50px;
    }

    .telegram a{
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    position: fixed;
    width: 50px;
    height: 50px;
    bottom: 20px;
    left: 20px;
    background-color: #00abee;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    z-index: 100;
    }

    .telegram img{
    width: 50px;
    height: 50px;
    }



    


}

@media screen and (min-width: 769px){

body{
        color: #fff;
        font-family: Roboto;
        background: #450b32;
        background: linear-gradient(21deg, rgb(79, 13, 57) 0%, #6b0056 38%, rgb(48, 1, 90) 100%);
        background-position: center center;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
        margin: 0px;
        padding: 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    body h1, h2, h3, h4, h5{
        font-size: xx-large;
        text-align: center;
    }

    header{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .logo {
        margin-top: 50px;
        width: 20%;
    }

    .logo img{
        filter: drop-shadow(0px 5px 5px #000000);
    }

    .slogan{
        font-size: small;
        margin: 10px;
        filter: drop-shadow(0px 5px 5px #000000);
    }

    nav {
        display: flex;
        justify-content: center; /* Menüyü sayfada ortalar */
        width: 100%;
        margin-top: 20px;
    }

    nav ul {
        display: flex;           /* Maddeleri yan yana dizer */
        flex-direction: row;     /* Yatay dizilim */
        list-style: none;
        margin: 0;
        padding: 0;
        width: 80%;
        justify-content: center; /* Linkleri ul içinde ortalar */
        gap: 10px;               /* Butonlar arasındaki boşluk */
    }

    nav ul li {
        flex: 1;                /* Butonların eşit genişlikte olması için (isteğe bağlı) */
        max-width: 200px;       /* Butonların çok fazla uzamaması için */
    }

    nav ul li a {
        font-size: large;
        color: #000000;
        background: linear-gradient(60deg, rgba(163, 163, 163, 1) 0%, rgba(224, 224, 224, 1) 38%, rgba(156, 156, 156, 1) 100%);
        text-decoration: none;
        display: block;
        text-align: center;
        padding: 10px;
        border-radius: 5px;
        /* margin-top: 5px; silindi, çünkü artık yan yanalar */
    }

    nav ul li a:hover {
        color: rgb(0, 0, 0);
        background: #ff5900;
        filter: drop-shadow(0px 3px 10px #000000);
    }

    main{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        width: 80%;
    }

    section{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    article{
        width: 28%;
        margin: 0px;
        padding: 0px;
    }

    .hero {
    width: 100%;
    
    height: auto;
    color: rgb(0, 0, 0);
    background: #ff5900;
    padding: 40px 20px; /* İç boşluğu artırarak elemanları rahatlattık */
    margin: 20px auto; /* Sayfayı ortaladık */
    text-align: center;
    border-radius: 15px; /* Daha modern yuvarlak köşeler */
    display: flex;
    flex-direction: column;
    align-items: center; /* Tüm elemanları yatayda ortalar */
    gap: 20px; /* Elemanlar arasına otomatik boşluk bırakır (ÖNEMLİ) */
    box-sizing: border-box;
    }

    .hero figure {
    width: auto; /* Sabit % yerine içeriğe göre bırakıldı */
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    }

    /* Görseldeki küçük ikonun ayarı */
    .hero figure img {
        width: 60px; /* İkonun boyutunu sabitledik */
        height: auto;
        margin-bottom: 10px;
    }

    .hero h2 {
        font-size: 1.8rem;
        margin: 0;
        font-weight: bold;
    }

    /* Butonun Düzenlenmesi */
    .hero a {
        display: inline-block; /* Genişliği kontrol etmek için */
        color: #fff;
        text-decoration: none;
        background-color: #090136;
        padding: 15px 40px; /* İç boşluk vererek butonu büyüttük */
        width: fit-content; /* %80 yerine içeriği kadar genişlik */
        min-width: 200px;
        border-radius: 50px; /* Oval buton tasarımı */
        font-weight: bold;
        font-size: 1.2rem;
        transition: all 0.3s ease; /* Hover efekti için geçiş */
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }

    .hero a:hover {
        color: #090136;
        background-color: #ffffff;
        transform: translateY(-3px); /* Hafif yukarı kalkma efekti */
    }

    section .kart{
        width: 28%;
        gap: 15px;
        color: rgb(255, 255, 255);
        background: #090136;
        background: linear-gradient(60deg, rgba(9, 1, 54, 1) 0%, rgba(0, 0, 56, 1) 38%, rgba(28, 0, 48, 1) 100%);
        border-radius: 5px;
        padding: 20px;
        margin-top: 15px;
    }

    section .hakkimda-kart{
        width: 100%;
        gap: 15px;
        color: rgb(255, 255, 255);
        background: #090136;
        background: linear-gradient(60deg, rgba(9, 1, 54, 1) 0%, rgba(0, 0, 56, 1) 38%, rgba(28, 0, 48, 1) 100%);
        border-radius: 5px;
        padding: 20px;
        margin-top: 15px;
        display: flex;
        flex-direction: column;
        align-content: center;
    }

    section .hakkimda-kart figure img{
        width: 50%;
    }

    .hakkimda-kart figure{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hakkimda-kart ul{
        margin-left:100px;
    }

    main section .hakkimda-kart p{
        width: 100%;
        max-width: 1000px;
        text-align: center;
    }

    .hakkimda-kart a{
        color: #ff5900;
    }

    figcaption{
        padding: 15px;
    }

    section .kart h3{
        margin: 0px;
        padding: 0px;
    }

    section .kart figure{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    section .kart figure img, .hero figure img{
        width: 30%;
        height: auto;
        margin: 10px;
    }

    .hero a {
        display: block;
        padding: 3px;
        color: #fff;
        font-size: xx-large;
        text-decoration: none;
        background-color: #090136;
        border-radius: 20px;
    }

    .hero a:hover{
        background-color: #fff;
        color: #090136;
    }

    section .kart p a, section .referanslarim p a{
        color: #ff5900;
        font-weight: bold;
        text-decoration: none;
    }

    section .kart a{
        color: #ff5900;
        font-weight: bold;
        text-decoration: none;
    }

    .referanslarim{
        font-size: large;
        color: #000000;
        background: #a3a3a3;
        background: linear-gradient(60deg, rgba(163, 163, 163, 1) 0%, rgba(224, 224, 224, 1) 38%, rgba(156, 156, 156, 1) 100%);
        text-decoration: none;
        display: block;
        text-align: center;
        padding: 10px;
        margin-top: 20px;
        border-radius: 5px;
    }

    section header h1{
        width: 100%;
        color: #090136;
        background: #ff5900;
        padding-top: 15px;
        padding-bottom:15px;
        border-radius: 5px;
    }

    main .hizmet-kart{
        color: rgb(255, 255, 255);
        background: #090136;
        background: linear-gradient(60deg, rgba(9, 1, 54, 1) 0%, rgba(0, 0, 56, 1) 38%, rgba(28, 0, 48, 1) 100%);
        border-radius: 5px;
        padding: 20px;
        margin-top: 20px;
    }

    main .hizmet-kart figure{
        width: 100%;
        margin: 0px;
    }

    main .hizmet-kart figure img{
        width: 100%;
        height: auto;
        border-radius: 10px;
    }

    .iletisim-kart{
        width: 100%;
        color: rgb(255, 255, 255);
        background: #090136;
        background: linear-gradient(60deg, rgba(9, 1, 54, 1) 0%, rgba(0, 0, 56, 1) 38%, rgba(28, 0, 48, 1) 100%);
        border-radius: 5px;
        padding: 20px;
        padding-left: 50px;
        margin-top: 20px;
    }

    .kutu{
        width: 100%;
        max-width: 1000px;
        min-height: 30px;
    }
    
    .textkutu{
        width: 100%;
        max-width: 1000px;
        min-height: 100px;
    }

    footer{
        width: 80%;
        margin-top: 20px;
        border-radius: 5px;
        background: #a3a3a3;
        background: linear-gradient(60deg, rgba(163, 163, 163, 1) 0%, rgba(224, 224, 224, 1) 38%, rgba(156, 156, 156, 1) 100%);
    }

    footer .social{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top:10px ;
    }

    footer .social ul{
        list-style: none;
        margin: 0px;
        padding: 0px;
    }

    footer .social ul li{
        display: inline-block;
    }

    footer .social ul li a{
        text-decoration: none;
        color: #450b32;
    }

    footer .linkler{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top:10px ;
    }

    footer .linkler h2{
        color: #090136;
        margin: 0px;
        padding: 0px;
    }

    footer .linkler ul{
        list-style: none;
        margin: 0px;
        padding: 0px;
    }

    footer .linkler ul li{
        display: block;
        text-align: center;
    }

    footer .linkler ul li a{
        display: block;
        height: 10px;
        font-size:medium;
        text-decoration: none;
        background-color: #090136;
        line-height: 10px;
        color: #ff5900;
        padding: 15px;
        margin-top: 5px;
        border-radius: 5px;
    }

    footer .linkler ul li a:hover{
        background-color: #6b0056;
    }

    footer .copyright{
        color: #000000;
        margin: 15px;
        font-size: small;
        text-align: center;
    }

    .whatsapp a{
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  position: fixed;
  width: 50px;
  height: 50px;
  bottom: 80px;
  left: 20px;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  z-index: 100;
}

.whatsapp img{
  width: 50px;
  height: 50px;
}

.telegram a{
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  position: fixed;
  width: 50px;
  height: 50px;
  bottom: 20px;
  left: 20px;
  background-color: #00abee;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  z-index: 100;
}

.telegram img{
  width: 50px;
  height: 50px;
}

}