@font-face {
    font-family: "Bahnschrift";
    src: url("../fonts/bahnschrift.ttf") format("truetype-variations");
    font-weight: 300 700;
    font-style: normal;
    /*font-variation-settings: 'wght' 700;*/
}

/* style webkit scrollbar */
::-webkit-scrollbar { width: 2px; height: 2px; }
::-webkit-scrollbar-button { width: 0; height: 0; }
::-webkit-scrollbar-thumb { width: 2px; height: 2px; background-color: #646464; }
::-webkit-scrollbar-track { width: 2px; height: 2px; background-color: #181818; }

html, body {
    overscroll-behavior: none;
}

* { box-sizing: border-box; }
html {
    width: 100%; height: 100vh; background: #181818; font-family: "Montserrat", sans-serif;
}

body {
    padding: 0; margin: 0; width: 100%; height: 100vh; overflow-x: hidden;
}

section { width: 100%; height: 100vh; position: relative; overflow: hidden; }
section img { width:100%; height: 100%; object-fit: cover; object-position: center; transform: translateY(0); position: absolute; left:0; top:0; }

.fg {
    position: fixed; top: 0; left: 0; width: 100%; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3em; color: white; text-align: center; padding: 2rem;
}
.fg::before {
    content:''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;z-index: 9999; transform: scale(var(--vign-scale, -1));
    background: radial-gradient(
            ellipse at center,
            rgba(0, 0, 0, 0) 50%,   /* ortası şeffaf */
            rgba(0, 0, 0, 0.5) 100% /* kenarlara doğru koyulaşır */
    );
}
.fg h1 {
    font-size: 3vmin; font-weight: 100; font-family: "Roboto Condensed"; font-stretch: condensed; margin:0;
}
.fg nav { pointer-events: none; }
.fg nav a { text-decoration: none; transition: margin .2s ease-in-out, background-color .18s linear, filter .18s ease-in-out!important; pointer-events: auto; }
.fg nav a:hover { margin:0 .2em; }
.fg nav:hover a { filter: opacity(.7) !important; }
.fg nav:hover a:hover { filter: opacity(1) !important; }


.sosyaller { display: flex; gap: .5em; flex-wrap: wrap; align-items: center; justify-content: center; }

.sosyaller .sosyal {
    --color: #fff; --bg: #000;
    display: flex; align-items: center; justify-content: center; font-size: 2.2vmin; width: 2em; height: 2em; color: #000; position: relative; isolation: isolate; border-radius: 50%; overflow: hidden; transition: background-color .18s linear;
}
.sosyaller .sosyal i { font-size: .9em; line-height: 1; }
.sosyaller .sosyal svg { font-size: .9em; height: 1em; width: 1em; line-height: 1; }
.sosyaller .sosyal::before {
    content:''; position: absolute; left:0;top:0;right:0;bottom:0; background: #fff; transition: .18s linear; border-radius: inherit; z-index: -2;
}
.sosyaller .sosyal::after {
    content:''; position: absolute; left:0;top:0;right:0;bottom:0; background: var(--bg, #000); transition: .18s linear; opacity: 0; border-radius: inherit; z-index: -1;
}
.sosyaller .sosyal:hover { color: var(--color, #fff); }
.sosyaller .sosyal:hover::before { opacity: 0; }
.sosyaller .sosyal:hover::after { opacity: 1; }

.sosyaller .sosyal-facebook { --bg: #1877F2; }

.sosyaller .sosyal-instagram { --bg: linear-gradient(45deg, #feda75, #d62976, #962fbf, #4f5bd5); }

.sosyaller .sosyal-x { --bg: #000; border-color: #fff; }

.sosyaller .sosyal-twitter { --bg: #1DA1F2; }

.sosyaller .sosyal-linkedin { --bg: #0077B5; }

.sosyaller .sosyal-youtube { --bg: #FF0000; }

.sosyaller .sosyal-apple-music { --bg: #f74c68; }

.sosyaller .sosyal-deezer {
    --bg: #0f0d13;
    svg { font-size: .75em!important; }
    &:hover {
        svg { color: #a238ff!important; }
    }
}

.sosyaller .sosyal-tiktok { --bg: linear-gradient(135deg, #69C9D0, #EE1D52); }

.sosyaller .sosyal-snapchat { --bg: #FFFC00; --color: #000; }

.sosyaller .sosyal-pinterest { --bg: #E60023; }

.sosyaller .sosyal-threads { --bg: #000; }

.sosyaller .sosyal-whatsapp { --bg: #25D366; }

.sosyaller .sosyal-telegram { --bg: #0088cc; }

.sosyaller .sosyal-discord { --bg: #5865F2; }

.sosyaller .sosyal-reddit { --bg: #FF4500; }

.sosyaller .sosyal-tumblr { --bg: #36465D; }

.sosyaller .sosyal-vimeo { --bg: #1ab7ea; }

.sosyaller .sosyal-behance { --bg: #1769ff; }

.sosyaller .sosyal-dribbble { --bg: #ea4c89; }

.sosyaller .sosyal-skype { --bg: #00AFF0; }

.sosyaller .sosyal-slack { --bg: #4A154B; }

.sosyaller .sosyal-github { --bg: #333; }

.sosyaller .sosyal-gitlab { --bg: #FC6D26; }

.sosyaller .sosyal-medium { --bg: #00ab6c; }

.sosyaller .sosyal-vk { --bg: #4c75a3; }

.sosyaller .sosyal-wechat { --bg: #7BB32E; }

.sosyaller .sosyal-line { --bg: #00c300; }

.sosyaller .sosyal-spotify { --bg: #1DB954; }


@media screen and (max-width: 768px) {
    .fg h1 { font-size: 2rem; }
    .sosyaller .sosyal { font-size: 1.4rem; }
}