@import url('https://fonts.googleapis.com/css2?family=Elms+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

:root {
    --main: #010e21;
    --bg: #02132B;

    --elms: "Elms Sans", sans-serif;
    --plyf: "Playfair Display", serif;

}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

body {
    font-family: var(--elms) !important;
    font-weight: 400;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    background-color: #fff;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

a {
    text-decoration: none !important;
}

.home-body {
    background-color: var(--main);
}

.navbar {
    position: fixed !important;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    width: 1640px;
    max-width: 100%;
    background: transparent;
    border-radius: 16px;
    padding: .9rem 48px !important;
    backdrop-filter: blur(45px);
}

.navbar-brand {
    margin-left: 2.5rem;
    width: 175px;
}

.nav-link {
    color: #fff !important;
    font-size: 16px;
}

.navbar-nav.extras {
    gap: 1rem;
}

.form-select.lang-select {
    border: 1px solid #8DCEDD !important;
    background: transparent !important;
    color: #fff !important;
    padding: .25rem .55rem !important;
    box-shadow: none !important;
    cursor: pointer !important;
    border-radius: 9px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-align: center !important;
}

option {
    color: var(--bg) !important;
}

.menu-btn {
    background: none !important;
    outline: none;
    border: none;
    box-shadow: none !important;
}

#navbarNav .nav-item .nav-link {
    margin-right: 1.2rem;
    font-weight: normal;
    font-size: 16px;
}

.hero-area {
    max-width: 1920px !important;
    max-height: 1080px !important;
    width: 100%;
    height: 100%;
}

.hero-content {
    position: absolute;
    top: 22rem;
    left: 50%;
    transform: translate(-50%);
    width: 1622px;
}

.hero-content .main-text {
    color: #fff;
    font-size: 140px;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;

    -webkit-mask-image: linear-gradient(to top right,
            rgba(255, 255, 255, 0.05) 15%,
            rgba(255, 255, 255, 0.4) 40%,
            rgba(255, 255, 255, 0.849) 75%,
            rgba(255, 255, 255, 1) 100%);
    mask-image: linear-gradient(to top right,
            rgba(255, 255, 255, 0.05) 15%,
            rgba(255, 255, 255, 0.4) 40%,
            rgba(255, 255, 255, 0.849) 75%,
            rgba(255, 255, 255, 1) 100%);
}

.hero-content .top-title {
    font-size: 30px;
    font-family: var(--plyf);
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 0px;
}

.flexed {
    display: flex;
    align-items: center;
}

.hero-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 7rem;
}

.hf-left {
    border: 1px solid #003353;
    padding: 24px;
    border-radius: 24px;
    backdrop-filter: blur(45px);
}

.hf-left h4 {
    font-size: 16px;
    color: #fff;
    margin-left: 1rem;
    margin-bottom: 0;
}

.hf-left h4 span {
    font-size: 18px;
    font-weight: bold;
}

.hf-center {
    text-align: center;
}

.hf-center h2 {
    font-size: 25px;
    color: #C3C3C3;
}

.hf-center img {
    width: 20px;
    margin-right: .6rem;
}

.hf-center a {
    font-size: 16px;
    color: #C3C3C3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hf-right h2 {
    font-size: 18px;
    color: #fff;
    margin-bottom: 1rem;
}

.hf-right img {
    width: 260px;
    height: 167px;
    object-fit: cover;
    border-radius: 14px;
}

.relative-area {
    position: relative;
}

.absolute-hf-title {
    position: absolute;
    top: 1rem;
    left: 1.5rem;
    width: 204px;
    font-weight: 300;
}

.absolute-hf-title h3 {
    font-size: 18px;
    color: #fff;
}

.absolute-exp {
    position: absolute;
    display: flex;
    align-items: center;
    bottom: 1rem;
    left: 1.5rem;
}

.absolute-exp a {
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    z-index: 2000;
}

/* Bu alan animasyonun “scroll mesafesi” */
.home-one-spacer {
    height: 90vh;
    /* istersen 80vh/150vh oynarsın */
}

.home-one.pinned .home-one-text {
    z-index: 9999;
    pointer-events: none;
    /* üstte dururken tıklamayı engellemesin */
}

/* Section’u sticky yapıyoruz: geldiğinde ekranda kalacak */
.home-one {
    position: sticky;
    top: 0;
    z-index: 999;
    height: 100vh;
    /* başlangıç */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    --shrink: 0;
    /* 0..1 (js dolduracak) */
}

/* Yazıyı da sticky/pinned gibi üstte tutacağız */
.home-one-text {
    position: sticky;
    top: 5rem;
    /* senin istediğin sabit nokta */
    text-align: center;
    transform-origin: top center;
    will-change: transform;
}

/* Section küçülme (100vh -> 100px) */
.home-one.is-active {
    height: calc(100vh - ((100vh - 100px) * var(--shrink)));
}

/* Yazı küçülme */
.home-one.is-active .home-one-text {
    transform: scale(calc(1 - (1.7 * var(--shrink))));
}

/* 1.7 oranı kullanıyoruz ama scale'in negatife düşmemesi için clamp */
.home-one.is-active .home-one-text {
    transform:
        translateY(calc(-30px * var(--shrink))) scale(clamp(0.10, calc(1 - (1.7 * var(--shrink))), 1));
}

.home-one h2 {
    max-width: 1127px;
    font-size: 10rem;
    text-align: center;
    margin-bottom: 0;
    text-transform: uppercase;
    font-weight: bold;
    color: #fff;

    -webkit-mask-image: linear-gradient(to right,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.4) 20%,
            rgba(255, 255, 255, 1) 50%,
            rgba(255, 255, 255, 0.4) 80%,
            rgba(255, 255, 255, 0.05) 100%);
    mask-image: linear-gradient(to right,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.4) 20%,
            rgba(255, 255, 255, 1) 50%,
            rgba(255, 255, 255, 0.4) 80%,
            rgba(255, 255, 255, 0.05) 100%);
}


.home-one h3 {
    line-height: 3.8rem;
    font-size: 5rem;
    margin-bottom: 0;
    text-transform: uppercase;
    font-weight: bold;
    color: #fff;

    -webkit-mask-image: linear-gradient(to right,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.4) 20%,
            rgba(255, 255, 255, 1) 50%,
            rgba(255, 255, 255, 0.4) 80%,
            rgba(255, 255, 255, 0.05) 100%);
    mask-image: linear-gradient(to right,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.4) 20%,
            rgba(255, 255, 255, 1) 50%,
            rgba(255, 255, 255, 0.4) 80%,
            rgba(255, 255, 255, 0.05) 100%);
}




















.wrecks-section {
    height: 100vh;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Splide alanı: üst/alt slide biraz görünsün */
#wreckSplide {
    height: 100vh;
    padding: 80px 0;
    margin-top: 15rem;
}

#wreckSplide .splide__track {
    height: 100%;
}

/* slide'lar arası boşluk */
#wreckSplide .splide__list {
    gap: 26px;
}

#wreckSplide .splide__slide .wreck-card {
    opacity: .2;
    transition: all .25s ease;

}

#wreckSplide .splide__slide.is-active .wreck-card {
    opacity: 1;
}

/* aktif slide */
#wreckSplide .splide__slide.is-active {
    opacity: 1;
    transform: scale(1);
}

/* kart */
.wreck-card {
    width: 1365px;
    height: 600px;
    margin: 0 auto;
    margin-left: 26rem;
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid #003353;
    display: grid;
    position: relative;
    grid-template-columns: 1fr 1fr;
    z-index: 1;
}

.wreck-left {
    padding: 10rem 0.5rem 1rem 6rem;
    color: #fff;
}

.wreck-title {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 2rem;
}

.wreck-meta {
    font-size: 12px;
    margin-bottom: 14px;
}

.wreck-desc {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
}

.wreck-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    text-decoration: none;
    margin-top: 14px;
    font-size: 18px;
    font-weight: bold;
    line-height: 2rem;
}

.wreck-thumbs {
    margin-top: 2.5rem;
    display: flex;
    gap: 5px;
}

.wreck-thumbs img {
    width: 65px;
    height: 65px;
    object-fit: cover;
    border-radius: 8px;
}

.wreck-right {
    position: relative;
}

.wreck-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Sol büyük depth */
.depth-big {
    max-width: 523px;
    width: 100%;
    position: absolute;
    left: -3.4rem;
    top: 37rem;
    z-index: 0;
    font-weight: 700;
    letter-spacing: -2px;
    color: #09598D;
    user-select: none;
    text-align: end;
}

.depth-big span {
    font-size: 30rem;
    line-height: 0;
    -webkit-mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0) 12%,
            rgba(0, 0, 0, .8) 30%,
            rgba(0, 0, 0, .8) 70%,
            rgba(0, 0, 0, 0) 88%,
            rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0) 12%,
            rgba(0, 0, 0, .8) 30%,
            rgba(0, 0, 0, .8) 70%,
            rgba(0, 0, 0, 0) 88%,
            rgba(0, 0, 0, 0) 100%);
}

.depth-big small {
    font-size: 13.5rem;
    margin-right: 1.5rem;
    line-height: 7rem;
    -webkit-mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0) 12%,
            rgba(0, 0, 0, .8) 30%,
            rgba(0, 0, 0, .8) 70%,
            rgba(0, 0, 0, 0) 88%,
            rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0) 12%,
            rgba(0, 0, 0, .8) 30%,
            rgba(0, 0, 0, .8) 70%,
            rgba(0, 0, 0, 0) 88%,
            rgba(0, 0, 0, 0) 100%);
}

/* Sağ alt oklar */
.wreck-controls {
    position: absolute;
    right: 24px;
    bottom: 28px;
    z-index: 30;
    display: grid;
    gap: 10px;
    align-items: center;
    justify-items: center;
}

.ctrl-btn {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid #052B4B;
    background: #021229;
    color: #fff;
    display: grid;
    place-items: center;
    transition: opacity .2s ease, transform .2s ease, background .2s ease;
}

.ctrl-btn.is-disabled {
    opacity: .3;
    pointer-events: none;
}

.ctrl-label {
    margin-top: 4px;
    font-size: 11px;
    opacity: .8;
    text-align: center;
}

/* peek için track/list overflow görünür olmalı */
#wreckSplide,
#wreckSplide .splide__track {
    overflow: visible !important;
}

/* üst-alt boşluk = peek alanı */
#wreckSplide {
    height: 100vh;
    padding: 90px 0;
    /* peek miktarı: artırırsan daha çok görünür */
    box-sizing: border-box;
    z-index: 2 !important;
}

/* slide yüksekliği viewport'tan küçük olmalı ki üst/alt görünsün */
#wreckSplide .splide__slide {
    display: flex;
    align-items: center;
    justify-content: center;
    filter: none !important;

}

.depth-blur-patch {
    position: absolute;
    top: 0;
    left: 26rem;
    width: 600px;
    height: 600px;
    border-radius: 25px;

    /* XD: Fill görünmesin ama blur çalışsın */
    background: transparent;
    opacity: .95;
    /* 0 yaparsan bazı durumlarda blur zayıflar */
    /* istersen tamamen görünmez fill denersin: rgba(244,244,244,0) */

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    /* sen 4 yazmışsın, 45 olmalı */

    pointer-events: none;
    overflow: hidden;
}

.mobile-none,
.hero-foot-mobile {
    display: none;
}

.one-card {
    margin-top: 4rem;
}

.one-card h2 {
    color: #fff;
    font-size: 16px;
    text-align: center;
}

#hf-splide .splide__arrow {
    opacity: 1;
    background-color: #ffffff57;
    border: 1px solid #fff;
    padding: 1rem;
}

#hf-splide .splide__arrow i {
    color: #fff;
    font-size: .9rem;
}

#hf-splide .splide__arrow--next {
    right: -.75rem;
    top: 72%;
}

#hf-splide .splide__arrow--prev {
    left: -.75rem;
    top: 72%;
}

#hf-splide .splide__arrow:disabled {
    opacity: .35;
    cursor: not-allowed;
}