/* Ana görseldeki teknelere doğal ve dikkat dağıtmayan su hareketi verir. */
.hd-hero-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    animation: hdHero 14s ease-out both;
}

.hd-hero-media .hd-hero-image,
.hd-hero-media .hd-boat-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 56%;
}

.hd-hero-media .hd-hero-image {
    animation: none;
    transform: none;
}

.hd-hero-media .hd-boat-layer {
    z-index: 1;
    pointer-events: none;
    transform-origin: 56% 73%;
    -webkit-mask-image: radial-gradient(
        ellipse 28% 46% at 56% 72%,
        #000 0%,
        #000 44%,
        rgba(0, 0, 0, .72) 58%,
        transparent 76%
    );
    mask-image: radial-gradient(
        ellipse 28% 46% at 56% 72%,
        #000 0%,
        #000 44%,
        rgba(0, 0, 0, .72) 58%,
        transparent 76%
    );
    animation: hd-boats-float 6.6s ease-in-out infinite;
    will-change: transform;
}

.hd-boat-ripple {
    position: absolute;
    z-index: 2;
    width: 9.5%;
    height: 2.4%;
    border: 1px solid rgba(181, 238, 226, .34);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    filter: blur(.2px);
    animation: hd-boat-ripple 4.8s ease-out infinite;
}

.hd-boat-ripple-one {
    left: 49.5%;
    top: 74%;
}

.hd-boat-ripple-two {
    left: 59.2%;
    top: 77%;
    animation-delay: 2.35s;
}

@keyframes hd-boats-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(-.025deg);
    }

    34% {
        transform: translate3d(1px, -2px, 0) rotate(.04deg);
    }

    68% {
        transform: translate3d(-1px, 1px, 0) rotate(-.035deg);
    }
}

@keyframes hd-boat-ripple {
    0% {
        opacity: 0;
        transform: scale(.55);
    }

    24% {
        opacity: .46;
    }

    100% {
        opacity: 0;
        transform: scale(1.42);
    }
}

@media (max-width: 760px) {
    .hd-hero-media .hd-hero-image,
    .hd-hero-media .hd-boat-layer {
        object-position: 58% center;
    }

    .hd-hero-media .hd-boat-layer {
        transform-origin: 50% 72%;
        -webkit-mask-image: radial-gradient(ellipse 43% 38% at 50% 71%, #000 0%, #000 42%, transparent 76%);
        mask-image: radial-gradient(ellipse 43% 38% at 50% 71%, #000 0%, #000 42%, transparent 76%);
    }

    .hd-boat-ripple {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hd-hero-media {
        animation: none;
        transform: scale(1.02);
    }

    .hd-hero-media .hd-boat-layer,
    .hd-boat-ripple {
        display: none;
        animation: none;
    }
}