body {
    position: relative;
    min-height: 100vh;
    margin: 0;

    overflow-x: hidden;

    background: #ffffff;
}


/* =========================================================
   WAVES WRAPPER
   ========================================================= */

.epcl-waves-wrapper {
    position: fixed;
    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: -5;
}


/* =========================================================
   WAVES PAGE
   ========================================================= */

.epcl-waves-page {
    /*
     * 400px yüksekliğindeki dalga bandı ekranın ortasına oturur ve
     * köşegen açısında döner: sağ üstten başlayıp sol altta biter.
     * Açı = -atan(ekran yüksekliği / ekran genişliği); destekleyen
     * tarayıcılarda CSS ile hesaplanır, diğerlerinde ~-28°.
     */
    position: absolute;

    left: 50%;
    top: 50%;

    z-index: -5;

    width: 320vmax;
    height: 400px;

    -webkit-transform: translate(-50%, -50%) rotate(-28deg);
    transform: translate(-50%, -50%) rotate(-28deg);
}

@supports (transform: rotate(atan2(1px, 1px))) {
    .epcl-waves-page {
        transform: translate(-50%, -50%) rotate(atan2(-100vh, 100vw));
    }
}


/* =========================================================
   WAVES
   ========================================================= */

.epcl-waves-page .wave {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    -webkit-animation: slide 15s linear infinite;
    animation: slide 15s linear infinite;

    will-change: transform;

    z-index: 3;
}


/* =========================================================
   WAVE 2
   ========================================================= */

.epcl-waves-page .wave-2 {
    left: -160px;

    -webkit-animation: swell 15s linear infinite;
    animation: swell 15s linear infinite;

    z-index: -1;
}


/* =========================================================
   WAVE 3
   ========================================================= */

.epcl-waves-page .wave-3 {
    left: -60px;
}


/* =========================================================
   SLIDE
   ========================================================= */

@-webkit-keyframes slide {

    0% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }

    100% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
    }

}

@keyframes slide {

    0% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }

    100% {
        -webkit-transform: translateX(-1000px);
        transform: translateX(-1000px);
    }

}


/* =========================================================
   SWELL
   ========================================================= */

@-webkit-keyframes swell {

    0% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }

    50% {
        -webkit-transform: translate(-500px, 50px);
        transform: translate(-500px, 50px);
    }

    100% {
        -webkit-transform: translate(-1000px, 0px);
        transform: translate(-1000px, 0px);
    }

}

@keyframes swell {

    0% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }

    50% {
        -webkit-transform: translate(-500px, 50px);
        transform: translate(-500px, 50px);
    }

    100% {
        -webkit-transform: translate(-1000px, 0px);
        transform: translate(-1000px, 0px);
    }

}


/* =========================================================
   SVG PATTERN
   ========================================================= */

.epcl-wave-pattern,
#epcl-wave-pattern {
    position: absolute;

    width: 0;
    height: 0;

    overflow: hidden;

    z-index: -10;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .epcl-waves-page .wave {
        -webkit-animation: none;
        animation: none;
    }

}