/*
|--------------------------------------------------------------------------
| DEMIRAY TECH - GLOBAL RESPONSIVE
|--------------------------------------------------------------------------
|
| Site genelindeki responsive güvenlik katmanı.
| Sayfaya özel tasarımlar ilgili pages/*.css dosyalarında bulunur.
|
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| Large desktop
|--------------------------------------------------------------------------
*/

@media (
    min-width: 1600px
) {

    .site-container {
        max-width:
            var(
                --site-container,
                1380px
            );
    }

}


/*
|--------------------------------------------------------------------------
| Laptop
|--------------------------------------------------------------------------
*/

@media (
    max-width: 1280px
) {

    .site-container {
        width:
            min(
                calc(100% - 40px),
                var(
                    --site-container,
                    1380px
                )
            );
    }

}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (
    max-width: 1024px
) {

    /*
    |--------------------------------------------------------------------------
    | Prevent overflow
    |--------------------------------------------------------------------------
    */

    html,
    body {
        overflow-x: hidden;
    }


    /*
    |--------------------------------------------------------------------------
    | Header
    |--------------------------------------------------------------------------
    */

    .site-header__nav,
    .site-navigation {
        display: none;
    }


    .site-header__menu-toggle,
    .site-menu-toggle {
        display: inline-flex;
    }


    /*
    |--------------------------------------------------------------------------
    | Images
    |--------------------------------------------------------------------------
    */

    img {
        max-width: 100%;
        height: auto;
    }


    /*
    |--------------------------------------------------------------------------
    | Footer
    |--------------------------------------------------------------------------
    */

    .site-footer__grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .site-footer__brand {
        grid-column:
            1 / -1;
    }


    .site-footer-cta__inner {
        grid-template-columns:
            1fr;

        gap: 32px;
    }


    .site-footer-cta__actions {
        align-items: flex-start;

        min-width: 0;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (
    max-width: 767px
) {

    /*
    |--------------------------------------------------------------------------
    | Container
    |--------------------------------------------------------------------------
    */

    .site-container {
        width:
            calc(100% - 28px);
    }


    /*
    |--------------------------------------------------------------------------
    | Header
    |--------------------------------------------------------------------------
    */

    .site-header__inner,
    .site-header__main,
    .site-header__main-inner {
        min-height:
            var(
                --header-height,
                72px
            );
    }


    .site-header__topbar,
    .site-topbar {
        display: none;
    }


    .site-header__actions {
        gap: 8px;
    }


    .site-header__phone {
        display: none;
    }


    .site-header__cta {
        display: none;
    }


    /*
    |--------------------------------------------------------------------------
    | Logo
    |--------------------------------------------------------------------------
    */

    .site-header__logo img,
    .site-logo img {
        max-width: 180px;
        height: 38px;
    }


    /*
    |--------------------------------------------------------------------------
    | Mobile menu
    |--------------------------------------------------------------------------
    */

    .site-mobile-menu {
        width:
            min(
                420px,
                92vw
            );
    }


    /*
    |--------------------------------------------------------------------------
    | Footer
    |--------------------------------------------------------------------------
    */

    .site-footer__grid {
        grid-template-columns:
            1fr;

        gap: 34px;
    }


    .site-footer__brand,
    .site-footer__column--contact {
        grid-column: auto;
    }


    .site-footer__bottom-inner {
        align-items: flex-start;
        flex-direction: column;

        min-height: 0;

        padding:
            22px 0;

        gap: 14px;
    }


    .site-footer__legal {
        gap:
            10px 16px;
    }


    /*
    |--------------------------------------------------------------------------
    | Footer CTA
    |--------------------------------------------------------------------------
    */

    .site-footer-cta__actions {
        width: 100%;
    }


    .site-footer-cta__button,
    .site-footer-cta__phone {
        width: 100%;
    }


    /*
    |--------------------------------------------------------------------------
    | Long text
    |--------------------------------------------------------------------------
    */

    h1,
    h2,
    h3,
    p,
    a,
    strong,
    span {
        overflow-wrap: break-word;
    }


    /*
    |--------------------------------------------------------------------------
    | Forms
    |--------------------------------------------------------------------------
    */

    input,
    select,
    textarea {
        max-width: 100%;
    }

}


/*
|--------------------------------------------------------------------------
| Small mobile
|--------------------------------------------------------------------------
*/

@media (
    max-width: 480px
) {

    .site-container {
        width:
            calc(100% - 24px);
    }


    .site-mobile-menu {
        width:
            94vw;
    }


    .site-footer__legal {
        flex-direction: column;

        gap: 8px;
    }

}


/*
|--------------------------------------------------------------------------
| Touch devices
|--------------------------------------------------------------------------
*/

@media (
    hover: none
) {

    a:hover,
    button:hover {
        transform: none;
    }

}


/*
|--------------------------------------------------------------------------
| Reduced motion
|--------------------------------------------------------------------------
*/

@media (
    prefers-reduced-motion: reduce
) {

    html {
        scroll-behavior: auto;
    }

}