/* ==========================================================
   RESET
========================================================== */

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


/* ==========================================================
   VARIABLES
========================================================== */

:root {

    --black: #080808;
    --black-soft: #0e0e0f;

    --white: #ffffff;
    --off-white: #f2f1ed;

    --text-dark: #0d0d0d;
    --text-gray: #777777;

    --red: #df1f28;

    --discord: #5865f2;

    --line-light: rgba(255, 255, 255, 0.14);
    --line-dark: rgba(0, 0, 0, 0.14);

    --container: 1360px;

}


/* ==========================================================
   GLOBAL
========================================================== */

html {
    scroll-behavior: smooth;
}

body {

    background: var(--black);

    color: white;

    font-family: Arial, Helvetica, sans-serif;

    overflow-x: hidden;

}

a {
    color: inherit;
    text-decoration: none;
}

img,
video {
    display: block;
}

.container {

    width: min(
        var(--container),
        calc(100% - 72px)
    );

    margin: 0 auto;

}


/* ==========================================================
   HEADER
========================================================== */

.site-header {

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    z-index: 20;

    border-bottom: 1px solid var(--line-light);

}

.header-inner {

    height: 92px;

    display: flex;

    align-items: center;
    justify-content: space-between;

}


/* LOGO */

.brand {

    display: flex;

    align-items: center;

    gap: 14px;

}

.brand-logo {

    width: 58px;
    height: 58px;

    object-fit: contain;

    flex-shrink: 0;

}

.brand-text {

    display: flex;

    flex-direction: column;

    gap: 4px;

}

.brand-text strong {

    font-size: 15px;

    letter-spacing: 2px;

}

.brand-text span {

    font-size: 10px;

    letter-spacing: 2.2px;

    color: #aaaaaa;

}


/* HEADER RIGHT */

.header-actions {

    display: flex;

    align-items: center;

    gap: 28px;

}


/* MENU */

.main-nav {

    display: flex;

    align-items: center;

    gap: 38px;

}

.main-nav a {

    position: relative;

    padding: 10px 0;

    color: #dddddd;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.8px;

    transition:
        color .2s ease;

}

.main-nav a::after {

    content: "";

    position: absolute;

    left: 0;
    right: 100%;

    bottom: 4px;

    height: 1px;

    background: white;

    transition:
        right .2s ease;

}

.main-nav a:hover {

    color: white;

}

.main-nav a:hover::after {

    right: 0;

}


/* DISCORD */

.discord-btn {

    min-height: 43px;

    padding: 0 17px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    background: var(--discord);

    border: 1px solid rgba(255, 255, 255, .14);

    color: white;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.4px;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;

    box-shadow:
        0 8px 25px rgba(88, 101, 242, .20);

}

.discord-btn svg {

    width: 17px;
    height: 17px;

    fill: currentColor;

    flex-shrink: 0;

}

.discord-btn:hover {

    background: #6874f5;

    transform: translateY(-2px);

    box-shadow:
        0 10px 32px rgba(88, 101, 242, .30);

}


/* ==========================================================
   HERO
========================================================== */

.hero {

    position: relative;

    min-height: 100vh;

    overflow: hidden;

    background: black;

}


/* LOCAL VIDEO */

.hero-video {

    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 0;

    width: 100%;
    height: 100%;

    min-width: 100%;
    min-height: 100%;

    object-fit: cover;

    object-position: center center;

    transform:
        translate(-50%, -50%);

}


/* VIDEO FILTER / DARKNESS */

.hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,
            rgba(0, 0, 0, .62) 0%,
            rgba(0, 0, 0, .38) 45%,
            rgba(0, 0, 0, .24) 100%
        ),

        linear-gradient(
            180deg,
            rgba(0, 0, 0, .42) 0%,
            rgba(0, 0, 0, .08) 45%,
            rgba(0, 0, 0, .64) 100%
        );

}


/* CONTENT */

.hero-content {

    position: relative;

    z-index: 2;

    min-height: 100vh;

    padding-top: 135px;
    padding-bottom: 40px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}


/* HERO TOP */

.hero-top {

    display: flex;

    justify-content: space-between;

    color: #dddddd;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2.3px;

}


/* HERO TITLE */

.hero-title {

    margin-top: auto;

    margin-bottom: 60px;

}

.hero-title .small {

    display: block;

    margin-bottom: 18px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2.4px;

}

.hero h1 {

    max-width: 1000px;

    font-size:
        clamp(
            100px,
            12vw,
            185px
        );

    line-height: .92;

    letter-spacing: -.045em;

    font-weight: 900;

}

.hero h1 > span {

    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.3px
        rgba(
            255,
            255,
            255,
            .80
        );

}


/* HERO FOOTER */

.hero-footer {

    padding-top: 28px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            .34
        );

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 60px;

}

.hero-footer p {

    width:
        min(
            680px,
            70%
        );

    color: #dddddd;

    font-size: 16px;

    line-height: 1.9;

}

.hero-link {

    display: flex;

    align-items: center;

    gap: 28px;

    white-space: nowrap;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.8px;

}

.hero-link span {

    color: var(--red);

    font-size: 20px;

}


/* ==========================================================
   COMMON SECTION ELEMENTS
========================================================== */

.section-top {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 70px;

    color: #777777;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

}

.section-number {

    color: var(--red);

    font-size: 13px;

}

.section-top .line {

    height: 1px;

    background: var(--line-dark);

    flex: 1;

}

.section-top.dark .line {

    background: var(--line-light);

}

.mini-title {

    display: block;

    margin-bottom: 15px;

    color: #777777;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2.2px;

}


/* ==========================================================
   ABOUT
========================================================== */

.about {

    background: var(--off-white);

    color: var(--text-dark);

    padding: 135px 0 150px;

}

.about-grid {

    display: grid;

    grid-template-columns:
        .95fr
        1.05fr;

    gap: 120px;

}

.about-heading h2 {

    font-size:
        clamp(
            58px,
            6vw,
            94px
        );

    line-height: .98;

    letter-spacing: -.04em;

    font-weight: 900;

}

.about-copy {

    padding-top: 28px;

}

.about-copy p {

    max-width: 680px;

    margin-bottom: 24px;

    color: #666666;

    font-size: 16px;

    line-height: 1.9;

}

.about-copy .lead {

    color: #202020;

    font-size: 20px;

    line-height: 1.65;

}


/* ==========================================================
   STATEMENT
========================================================== */

.statement {

    min-height: 620px;

    position: relative;

    display: flex;

    align-items: flex-end;

    overflow: hidden;

    padding: 90px 0;

    background: #0d0d0f;

}

.statement::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size:
        75px 75px;

}

.statement .container {

    position: relative;

    z-index: 2;

}

.statement-index {

    display: block;

    margin-bottom: 16px;

    color: var(--red);

    font-size: 13px;

}

.statement-label {

    display: block;

    margin-bottom: 14px;

    color: #aaaaaa;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2.2px;

}

.statement h2 {

    font-size:
        clamp(
            62px,
            7vw,
            110px
        );

    line-height: .96;

    letter-spacing: -.04em;

    font-weight: 900;

}

.statement h2 span {

    color: transparent;

    -webkit-text-stroke:
        1px
        rgba(
            255,
            255,
            255,
            .50
        );

}


/* ==========================================================
   CULTURE
========================================================== */

.culture {

    background: var(--black-soft);

    padding: 135px 0 150px;

}

.culture-heading {

    margin-bottom: 70px;

}

.culture-heading h2 {

    font-size:
        clamp(
            60px,
            7vw,
            108px
        );

    line-height: .96;

    letter-spacing: -.04em;

    font-weight: 900;

}

.culture-heading h2 span {

    color: var(--red);

}

.principles {

    border-top:
        1px solid
        var(--line-light);

}

.principles article {

    padding: 32px 0;

    border-bottom:
        1px solid
        var(--line-light);

    display: grid;

    grid-template-columns:
        80px
        .55fr
        1fr;

    gap: 35px;

}

.principle-number {

    color: var(--red);

    font-size: 13px;

}

.principles h3 {

    font-size: 27px;

}

.principles p {

    max-width: 650px;

    color: #8d8d8d;

    font-size: 15px;

    line-height: 1.8;

}


/* ==========================================================
   MULTIROLE
   PURE WHITE SECTION
========================================================== */

.multirole {
    background: #ffffff;
    color: #0b0b0b;

    padding: 110px 0 120px;
}

.multirole-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 110px;

    align-items: center;
}

.multirole-title h2 {
    font-size: clamp(72px, 7vw, 112px);

    line-height: .95;

    letter-spacing: -.04em;

    font-weight: 900;
}

.multirole-copy {
    padding: 0;
}

.multirole-copy p {
    max-width: 650px;

    margin-bottom: 28px;

    color: #4d4d4d;

    font-size: 17px;

    line-height: 1.8;
}

.multirole-copy p:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   BMS
========================================================== */

.bms {

    background: var(--off-white);

    color: var(--text-dark);

    padding: 140px 0 150px;

}

.bms-grid {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 120px;

}

.bms-heading h2 {

    font-size:
        clamp(
            75px,
            8vw,
            130px
        );

    line-height: .94;

    letter-spacing: -.045em;

    font-weight: 900;

}

.bms-heading h2 span {

    display: block;

    color: var(--red);

}

.bms-copy {

    padding-top: 20px;

}

.bms-copy p {
    max-width: 760px;
    margin-bottom: 26px;

    color: #5f5f5f;

    font-size: 16px;
    line-height: 1.8;
}

.bms-copy .lead {
    color: #1c1c1c;

    font-size: 22px;
    line-height: 1.55;
}

.tags {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 38px;
}

.tags span {
    padding: 12px 16px;

    border: 1px solid rgba(0, 0, 0, .20);

    color: #444444;

    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1.4px;
}


/* ==========================================================
   CLOSING
========================================================== */

.closing {

    min-height: 680px;

    display: grid;

    place-items: center;

    background:

        radial-gradient(
            circle at 50% 105%,
            rgba(223,31,40,.17),
            transparent 40%
        ),

        #080808;

    text-align: center;

}

.closing-content {

    padding: 100px 0;

}

.closing-label {

    display: block;

    margin-bottom: 22px;

    color: #888888;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2.4px;

}

.closing h2 {

    font-size:
        clamp(
            72px,
            9vw,
            140px
        );

    line-height: .94;

    letter-spacing: -.045em;

    font-weight: 900;

}

.closing h2 span {

    color: transparent;

    -webkit-text-stroke:
        1px
        rgba(
            255,
            255,
            255,
            .45
        );

}

.red-line {

    width: 70px;

    height: 2px;

    margin:
        40px
        auto
        24px;

    background: var(--red);

}

.closing-small {

    color: #777777;

    font-size: 9px;

    letter-spacing: 2px;

}


/* ==========================================================
   FOOTER
========================================================== */

footer {

    background: #050505;

    border-top:
        1px solid
        var(--line-light);

}

.footer-inner {

    height: 82px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: #666666;

    font-size: 9px;

    letter-spacing: 1.6px;

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 950px) {

    .container {

        width:
            min(
                var(--container),
                calc(100% - 40px)
            );

    }

    .header-actions {

        gap: 16px;

    }

    .main-nav {

        gap: 18px;

    }

    .discord-btn {

        padding:
            0
            13px;

    }

    .hero h1 {

        font-size:
            clamp(
                80px,
                17vw,
                145px
            );

    }

    .about-grid,
    .multirole-grid,
    .bms-grid {

        grid-template-columns:
            1fr;

        gap: 55px;

    }

    .principles article {

        grid-template-columns:
            55px
            .55fr
            1fr;

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 650px) {

    .container {

        width:
            min(
                var(--container),
                calc(100% - 28px)
            );

    }


    /* HEADER */

    .header-inner {

        height: 78px;

    }

    .brand-logo {

        width: 49px;
        height: 49px;

    }

    .brand-text strong {

        font-size: 13px;

    }

    .brand-text span {

        display: none;

    }

    .main-nav {

        display: none;

    }

    .header-actions {

        margin-left: auto;

    }

    .discord-btn {

        min-height: 39px;

        width: 42px;

        padding: 0;

    }

    .discord-btn span {

        display: none;

    }

    .discord-btn svg {

        width: 18px;
        height: 18px;

    }


    /* HERO */

    .hero-content {

        padding-top: 110px;

    }

    .hero-video {

        object-position:
            center
            center;

    }

    .hero-top span:last-child {

        display: none;

    }

    .hero h1 {

        font-size:
            clamp(
                67px,
                23vw,
                110px
            );

    }

    .hero-footer {

        display: block;

    }

    .hero-footer p {

        width: 100%;

        font-size: 11px;

    }

    .hero-link {

        width: fit-content;

        margin-top: 25px;

    }


    /* SPACING */

    .about,
    .culture,
    .multirole,
    .bms {

        padding:
            90px
            0
            100px;

    }


    /* HEADINGS */

    .about-heading h2,
    .culture-heading h2,
    .multirole-title h2,
    .bms-heading h2 {

        font-size: 54px;

    }

    .about-copy .lead,
    .bms-copy .lead {

        font-size: 16px;

    }


    /* STATEMENT */

    .statement {

        min-height: 540px;

    }

    .statement h2 {

        font-size: 54px;

    }


    /* PRINCIPLES */

    .principles article {

        grid-template-columns:
            35px
            1fr;

        gap: 15px;

    }

    .principles h3 {

        font-size: 23px;

    }

    .principles p {

        grid-column: 2;

    }


    /* CLOSING */

    .closing {

        min-height: 560px;

    }

    .closing h2 {

        font-size: 60px;

    }


    /* FOOTER */

    .footer-inner {

        height: 100px;

        flex-direction: column;

        justify-content: center;
        align-items: flex-start;

        gap: 10px;

    }

}

/* ==========================================================
   READABILITY / ANTI-OVERLAP FIX
   Küçük metinler büyütüldü, büyük başlıklara dokunulmadı.
========================================================== */

.brand {
    flex-shrink: 0;
}

.brand-text strong,
.brand-text span,
.main-nav a,
.discord-btn,
.hero-top,
.hero-title .small,
.hero-link,
.section-top,
.mini-title,
.statement-label,
.closing-label,
.closing-small,
.footer-inner {
    line-height: 1.45;
}

.brand-text strong,
.brand-text span,
.main-nav a,
.discord-btn,
.hero-link {
    white-space: nowrap;
}

.header-inner {
    gap: 24px;
}

.header-actions {
    min-width: 0;
}

.hero-top {
    gap: 24px;
    flex-wrap: wrap;
}

.hero-footer {
    flex-wrap: wrap;
}

.hero-footer p {
    min-width: 0;
}

.about-copy p,
.multirole-copy p,
.bms-copy p,
.principles p {
    overflow-wrap: break-word;
    word-break: normal;
}

.principles article {
    align-items: start;
}

.principles article > * {
    min-width: 0;
}

.principles h3 {
    line-height: 1.25;
}

.tags span {
    line-height: 1.35;
    white-space: nowrap;
}

@media (max-width: 1120px) {
    .header-actions {
        gap: 18px;
    }

    .main-nav {
        gap: 22px;
    }

    .main-nav a {
        letter-spacing: 1.4px;
    }

    .discord-btn {
        padding-left: 14px;
        padding-right: 14px;
    }
}

@media (max-width: 950px) {
    .hero-footer {
        gap: 28px;
    }

    .hero-footer p {
        width: min(720px, 74%);
    }

    .principles article {
        gap: 24px;
    }
}

@media (max-width: 760px) {
    .main-nav {
        display: none;
    }

    .hero-footer {
        display: block;
    }

    .hero-footer p {
        width: 100%;
    }

    .hero-link {
        margin-top: 24px;
        width: fit-content;
    }
}

@media (max-width: 650px) {
    .section-top,
    .mini-title,
    .statement-label,
    .closing-label {
        letter-spacing: 1.5px;
    }

    .principles p {
        font-size: 14px;
        line-height: 1.75;
    }

    .about-copy p,
    .bms-copy p {
        font-size: 15px;
        line-height: 1.8;
    }

    .footer-inner {
        font-size: 9px;
        line-height: 1.5;
    }
}

/* ==========================================================
   LARGE HEADING / ANTI-OVERLAP FIX
   Büyük başlıklarda satırlar hiçbir çözünürlükte üst üste binmez.
========================================================== */

.hero h1,
.about-heading h2,
.statement h2,
.culture-heading h2,
.multirole-title h2,
.bms-heading h2,
.closing h2 {
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
}

.hero h1 > span,
.statement h2 > span,
.culture-heading h2 > span,
.multirole-title h2 > span,
.bms-heading h2 > span,
.closing h2 > span {
    display: block;
}

.statement h2 > span,
.culture-heading h2 > span,
.multirole-title h2 > span,
.bms-heading h2 > span,
.closing h2 > span {
    margin-top: 0.06em;
}

@media (max-width: 950px) {
    .hero h1,
    .about-heading h2,
    .statement h2,
    .culture-heading h2,
    .multirole-title h2,
    .bms-heading h2,
    .closing h2 {
        line-height: 1;
        letter-spacing: -0.035em;
    }
}

@media (max-width: 650px) {
    .hero h1,
    .about-heading h2,
    .statement h2,
    .culture-heading h2,
    .multirole-title h2,
    .bms-heading h2,
    .closing h2 {
        line-height: 1.02;
        letter-spacing: -0.025em;
    }

    .statement h2 > span,
    .culture-heading h2 > span,
    .multirole-title h2 > span,
    .bms-heading h2 > span,
    .closing h2 > span {
        margin-top: 0.08em;
    }
}