/* =========================
   RESPONSIVE.CSS
   ========================= */

/* --------- GENEL --------- */
@media (max-width: 1400px) {
    .mainheader {
        width: 70%;
    }

    section .text {
        width: 70%;
    }
}

/* --------- TABLET --------- */
@media (max-width: 1024px) {
    body {
        background-position: top;
        background-size: auto;
    }

    .mainheader {
        height: auto;
        padding: 15px 0;
    }

    .mainnav ul {
        word-spacing: 25px;
    }

    .mainnav ul li a {
        font-size: 18px;
    }

    section .text {
        width: 90%;
        padding: 80px 20px;
    }

    section .boxes {
        flex-wrap: wrap;
        gap: 40px;
        padding-bottom: 80px;
    }

    section .boxes .box1,
    section .boxes .box2,
    section .boxes .box3 {
        width: 350px;
        height: auto;
        margin: 0;
        padding-bottom: 30px;
    }

    section .formbox {
        width: 90%;
        padding: 120px 10px;
    }

    section .iletisimform {
        width: 90%;
    }

    section .iletisimform #ad,
    section .iletisimform #soyad,
    section .iletisimform #mail {
        width: 70%;
    }

    section .iletisimform #ileti {
        width: 80%;
    }

    section .iletisimform .buttons button {
        width: 35%;
    }
}

/* --------- MOBİL --------- */
@media (max-width: 768px) {

    body{
        background-size: auto;
    }

    .mainheader {
        border-radius: 0 0 20px 20px;
        margin-top: 0;
    }

    .mainnav ul {
        word-spacing: 0;
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .mainnav ul li a {
        font-size: 16px;
    }

    section .text {
        width: 95%;
        padding: 60px 10px;
    }

    .text .maintext {
        font-size: 18px;
    }

    section .boxes {
        flex-direction: column;
        padding-bottom: 60px;
    }

    section .boxes .box1,
    section .boxes .box2,
    section .boxes .box3 {
        width: 90%;
    }

    .boxes p {
        font-size: 16px;
        line-height: 1.8;
    }

    section .formbox {
        padding: 80px 5px;
    }

    .mainsection .formbox h2 {
        font-size: 22px;
    }

    section .iletisimform {
        width: 95%;
        height: auto;
        padding: 30px 0;
    }

    section .iletisimform #ad,
    section .iletisimform #soyad,
    section .iletisimform #mail,
    section .iletisimform #ileti {
        width: 85%;
    }

    section .iletisimform .buttons button {
        width: 50%;
        height: 55px;
    }

    .mainfooter {
        flex-direction: column;
        align-items: center;
    }

    .mainfooter .icons {
        padding: 25px 0;
        align-items: center;
    }

    .mainfooter .icons a {
        justify-content: center;
    }

    .mainfooter .copyright {
        padding-bottom: 15px;
        text-align: center;
    }
}

/* --------- KÜÇÜK MOBİL --------- */
@media (max-width: 480px) {
    
    body{
        background-size: auto;
    }

    .mainnav ul {
        gap: 12px;
    }

    .mainnav ul li a {
        font-size: 14px;
    }

    .text .maintext {
        font-size: 16px;
    }

    section .boxes .box1,
    section .boxes .box2,
    section .boxes .box3 {
        border-radius: 25px;
    }

    section .iletisimform .buttons button {
        width: 70%;
    }

    .mainfooter .icons .instagramlabel,
    .mainfooter .icons .githublabel,
    .mainfooter .icons .youtubelabel,
    .mainfooter .icons .linkedinlabel,
    .mainfooter .icons .userlabel {
        font-size: 18px;
    }
}

/* ---------- KEYFRAMES ---------- */
/* LARGE DESKTOP (1400px ve üstü) */
@keyframes myhover-large {
    0%{
        border-radius: 50px;
        width: 50%;
    }
    50%{
        border-radius: 0;
        margin-top: 0;
        width: 100%;
    }
    100%{
        border-radius: 50px;
        width: 50%;
    }
}

/* MEDIUM DESKTOP / TABLET (1024px - 1400px) */
@keyframes myhover-medium {
    0%{
        border-radius: 50px;
        width: 70%;
    }
    50%{
        border-radius: 0;
        margin-top: 0;
        width: 100%;
    }
    100%{
        border-radius: 50px;
        width: 70%;
    }
}

/* MOBILE (768px - 1024px) */
@keyframes myhover-mobile {
    0%{
        border-radius: 50px;
        width: 60%;
    }
    50%{
        border-radius: 0;
        margin-top: 0;
        width: 100%;
    }
    100%{
        border-radius: 50px;
        width: 60%;
    }
}

/* SMALL MOBILE (480px - 768px) */
@keyframes myhover-smallmobile {
    0%{
        border-radius: 0 0 20px 20px;
        width: 95%;
    }
    50%{
        border-radius: 0;
        margin-top: 0;
        width: 100%;
    }
    100%{
        border-radius: 0 0 20px 20px;
        width: 95%;
    }
}

/* EXTRA SMALL MOBILE (<480px) */
@keyframes myhover-xsmall {
    0%{
        border-radius: 0 0 15px 15px;
        width: 100%;
    }
    50%{
        border-radius: 0;
        margin-top: 0;
        width: 100%;
    }
    100%{
        border-radius: 0 0 15px 15px;
        width: 100%;
    }
}

/* --------- RESPONSIVE ANİMASYONLARI UYGULA --------- */

/* LARGE DESKTOP: 1400px+ */
@media (min-width: 1401px) {
    .mainheader {
        animation: myhover-large 700ms ease-out;
    }
}

/* MEDIUM DESKTOP / TABLET: 1024px - 1400px */
@media (max-width: 1400px) and (min-width: 1025px) {
    .mainheader {
        animation: myhover-medium 700ms ease-out;
    }
}

/* MOBILE: 768px - 1024px */
@media (max-width: 1024px) and (min-width: 769px) {
    .mainheader {
        animation: myhover-mobile 700ms ease-out;
        width: 60%;
    }
}

/* SMALL MOBILE: 480px - 768px */
@media (max-width: 768px) and (min-width: 481px) {
    .mainheader {
        animation: myhover-smallmobile 700ms ease-out;
        width: 95%;
    }
}

/* EXTRA SMALL MOBILE: <480px */
@media (max-width: 480px) {
    .mainheader {
        animation: myhover-xsmall 700ms ease-out;
        width: 100%;
    }
}