/* =========================================================
   CAREER PAGE
========================================================= */

.career-page {
    min-height: 100vh;

    background: #0c0c0c;
    color: #fff;
}


.career-container {
    width:
        min(1250px, calc(100% - 80px));

    margin: 0 auto;
}


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

.career-hero {
    padding:
        165px 0
        95px;

    background:
        radial-gradient(
            circle at 80% 35%,
            rgba(201,168,76,.08),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #090909 0%,
            #0d0d0d 100%
        );

    border-bottom:
        1px solid rgba(255,255,255,.07);
}


.career-hero-content {
    max-width: 1050px;
}


.career-eyebrow {
    display: inline-block;

    margin-bottom: 20px;

    color: #c9a84c;

    font-size: .68rem;
    font-weight: 800;

    letter-spacing: .24em;

    text-transform: uppercase;
}


.career-hero h1 {
    margin: 0;

    color: #fff;

    font-size:
        clamp(3rem, 6vw, 6.5rem);

    font-weight: 600;

    line-height: .96;

    letter-spacing: -.045em;
}


.career-hero h1 span,
.career-hero h1 strong {
    display: block;
}


.career-hero h1 strong {
    color: #c9a84c;

    font-weight: inherit;
}


.career-description {
    max-width: 700px;

    margin-top: 28px;

    color:
        rgba(255,255,255,.52);

    font-size: .90rem;

    line-height: 1.85;
}


/* =========================================================
   INTRO
========================================================= */

.career-intro {
    padding:
        90px 0;

    border-bottom:
        1px solid rgba(255,255,255,.07);
}


.career-intro-grid {
    display: grid;

    grid-template-columns:
        minmax(0, .85fr)
        minmax(0, 1.15fr);

    gap: 90px;

    align-items: start;
}


.career-intro-left > span {
    display: block;

    margin-bottom: 16px;

    color: #c9a84c;

    font-size: .62rem;
    font-weight: 800;

    letter-spacing: .18em;
}


.career-intro-left h2 {
    max-width: 520px;

    margin: 0;

    color: #fff;

    font-size:
        clamp(2rem, 4vw, 4rem);

    font-weight: 500;

    line-height: 1.04;

    letter-spacing: -.035em;
}


.career-intro-left h2 strong {
    display: block;

    color: #c9a84c;
}


.career-intro-right {
    padding-top: 30px;
}


.career-intro-right p {
    max-width: 700px;

    margin: 0;

    color:
        rgba(255,255,255,.55);

    font-size: .94rem;

    line-height: 1.9;
}


/* =========================================================
   JOBS
========================================================= */

.career-jobs {
    padding:
        90px 0
        120px;
}


.career-section-head {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 40px;
}


.career-section-head > div:first-child > span {
    display: block;

    margin-bottom: 12px;

    color: #c9a84c;

    font-size: .62rem;
    font-weight: 800;

    letter-spacing: .18em;
}


.career-section-head h2 {
    margin: 0;

    color: #fff;

    font-size:
        clamp(2rem, 3.5vw, 3.8rem);

    font-weight: 500;

    line-height: 1.05;

    letter-spacing: -.035em;
}


.career-section-head h2 strong {
    color: #c9a84c;
}


.career-job-count {
    display: flex;

    align-items: baseline;

    gap: 10px;

    color: #c9a84c;

    font-size: 2rem;
    font-weight: 700;
}


.career-job-count span {
    color:
        rgba(255,255,255,.35);

    font-size: .64rem;
    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;
}


/* =========================================================
   JOB LIST
========================================================= */

.career-job-list {
    display: flex;

    flex-direction: column;

    gap: 12px;
}


.career-job-card {
    position: relative;

    display: grid;

    grid-template-columns:
        70px
        minmax(0, 1fr)
        minmax(260px, .65fr)
        50px;

    gap: 28px;

    align-items: center;

    padding:
        25px 28px;

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

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.012)
        );

    color: inherit;

    text-decoration: none;

    transition:
        transform .28s ease,
        border-color .28s ease,
        background .28s ease,
        box-shadow .28s ease;
}


.career-job-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(201,168,76,.32);

    background:
        linear-gradient(
            145deg,
            rgba(201,168,76,.05),
            rgba(255,255,255,.015)
        );

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.18);
}


.career-job-number {
    color:
        rgba(255,255,255,.25);

    font-size: .72rem;
    font-weight: 800;

    letter-spacing: .08em;
}


.career-job-department {
    display: block;

    margin-bottom: 7px;

    color: #c9a84c;

    font-size: .60rem;
    font-weight: 800;

    letter-spacing: .10em;

    text-transform: uppercase;
}


.career-job-main h3 {
    margin: 0;

    color: #fff;

    font-size:
        clamp(1.3rem, 2vw, 2rem);

    font-weight: 600;

    line-height: 1.2;
}


.career-job-main p {
    max-width: 650px;

    margin:
        10px 0
        0;

    color:
        rgba(255,255,255,.43);

    font-size: .76rem;

    line-height: 1.65;
}


.career-job-meta {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;

    padding-left: 28px;

    border-left:
        1px solid rgba(255,255,255,.07);
}


.career-job-meta div {
    min-width: 0;
}


.career-job-meta span {
    display: block;

    margin-bottom: 5px;

    color:
        rgba(255,255,255,.28);

    font-size: .56rem;
    font-weight: 700;

    letter-spacing: .07em;

    text-transform: uppercase;
}


.career-job-meta strong {
    display: block;

    overflow: hidden;

    color:
        rgba(255,255,255,.82);

    font-size: .78rem;

    font-weight: 600;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.career-job-arrow {
    display: flex;

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

    width: 40px;
    height: 40px;

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

    border-radius: 50%;

    color:
        rgba(255,255,255,.55);

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


.career-job-card:hover
.career-job-arrow {
    transform:
        translateX(3px);

    border-color: #c9a84c;

    background: #c9a84c;

    color: #111;
}


/* =========================================================
   EMPTY
========================================================= */

.career-empty {
    padding:
        55px 30px;

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

    border-radius: 14px;

    background:
        rgba(255,255,255,.02);

    text-align: center;
}


.career-empty span {
    display: block;

    margin-bottom: 10px;

    color: #fff;

    font-size: 1.05rem;
    font-weight: 600;
}


.career-empty p {
    max-width: 650px;

    margin:
        0 auto;

    color:
        rgba(255,255,255,.42);

    font-size: .80rem;

    line-height: 1.7;
}


/* =========================================================
   GENERAL APPLICATION
========================================================= */

.career-general {
    padding:
        0 0
        120px;
}


.career-general-box {
    display: flex;

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

    gap: 50px;

    padding:
        50px;

    border:
        1px solid rgba(201,168,76,.18);

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 85% 50%,
            rgba(201,168,76,.08),
            transparent 35%
        ),
        #111;
}


.career-general-box > div > span {
    display: block;

    margin-bottom: 12px;

    color: #c9a84c;

    font-size: .60rem;
    font-weight: 800;

    letter-spacing: .18em;
}


.career-general-box h2 {
    margin: 0;

    color: #fff;

    font-size:
        clamp(1.8rem, 3vw, 3rem);

    font-weight: 500;

    letter-spacing: -.03em;
}


.career-general-box h2 strong {
    color: #c9a84c;
}


.career-general-box p {
    max-width: 650px;

    margin:
        16px 0
        0;

    color:
        rgba(255,255,255,.48);

    font-size: .82rem;

    line-height: 1.75;
}


.career-general-button {
    flex-shrink: 0;

    display: inline-flex;

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

    gap: 14px;

    padding:
        14px 20px;

    border:
        1px solid #c9a84c;

    border-radius: 8px;

    background: #c9a84c;

    color: #111;

    font-size: .72rem;
    font-weight: 800;

    text-decoration: none;

    transition:
        background .25s ease,
        transform .25s ease;
}


.career-general-button:hover {
    transform:
        translateY(-2px);

    background: #dfc36d;
}


/* =========================================================
   LIGHT MODE
========================================================= */

body.light-mode
.career-page {
    background: #f4f4f2;

    color: #161616;
}


body.light-mode
.career-hero {
    background:
        radial-gradient(
            circle at 80% 35%,
            rgba(157,124,34,.08),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #f4f4f2,
            #ececea
        );

    border-bottom-color:
        rgba(0,0,0,.07);
}


body.light-mode
.career-hero h1,
body.light-mode
.career-intro-left h2,
body.light-mode
.career-section-head h2,
body.light-mode
.career-job-main h3,
body.light-mode
.career-empty span,
body.light-mode
.career-general-box h2 {
    color: #161616;
}


body.light-mode
.career-hero h1 strong,
body.light-mode
.career-eyebrow,
body.light-mode
.career-intro-left > span,
body.light-mode
.career-intro-left h2 strong,
body.light-mode
.career-section-head > div:first-child > span,
body.light-mode
.career-section-head h2 strong,
body.light-mode
.career-job-department,
body.light-mode
.career-general-box > div > span,
body.light-mode
.career-general-box h2 strong {
    color: #9d7c22;
}


body.light-mode
.career-description,
body.light-mode
.career-intro-right p,
body.light-mode
.career-job-main p,
body.light-mode
.career-empty p,
body.light-mode
.career-general-box p {
    color: #666;
}


body.light-mode
.career-intro {
    border-bottom-color:
        rgba(0,0,0,.07);
}


body.light-mode
.career-job-count {
    color: #9d7c22;
}


body.light-mode
.career-job-count span {
    color:
        rgba(0,0,0,.38);
}


body.light-mode
.career-job-card {
    border-color:
        rgba(0,0,0,.08);

    background: #fff;

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.035);
}


body.light-mode
.career-job-card:hover {
    border-color:
        rgba(157,124,34,.30);

    background: #fff;

    box-shadow:
        0 18px 42px
        rgba(0,0,0,.07);
}


body.light-mode
.career-job-number {
    color:
        rgba(0,0,0,.25);
}


body.light-mode
.career-job-meta {
    border-left-color:
        rgba(0,0,0,.08);
}


body.light-mode
.career-job-meta span {
    color:
        rgba(0,0,0,.38);
}


body.light-mode
.career-job-meta strong {
    color: #333;
}


body.light-mode
.career-job-arrow {
    border-color:
        rgba(0,0,0,.10);

    color: #555;
}


body.light-mode
.career-job-card:hover
.career-job-arrow {
    border-color: #9d7c22;

    background: #9d7c22;

    color: #fff;
}


body.light-mode
.career-empty {
    border-color:
        rgba(0,0,0,.08);

    background: #fff;
}


body.light-mode
.career-general-box {
    border-color:
        rgba(157,124,34,.18);

    background:
        radial-gradient(
            circle at 85% 50%,
            rgba(157,124,34,.07),
            transparent 35%
        ),
        #fff;
}


body.light-mode
.career-general-button {
    border-color: #9d7c22;

    background: #9d7c22;

    color: #fff;
}


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

@media (max-width: 1000px) {

    .career-container {
        width:
            calc(100% - 50px);
    }


    .career-intro-grid {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .career-intro-right {
        padding-top: 0;
    }


    .career-job-card {
        grid-template-columns:
            55px
            minmax(0, 1fr)
            44px;
    }


    .career-job-meta {
        grid-column:
            2 / 3;

        padding:
            18px 0
            0;

        border-left: 0;

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


    body.light-mode
    .career-job-meta {
        border-top-color:
            rgba(0,0,0,.08);
    }


    .career-job-arrow {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

}


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

@media (max-width: 700px) {

    .career-container {
        width:
            calc(100% - 32px);
    }


    .career-hero {
        padding:
            125px 0
            65px;
    }


    .career-intro {
        padding:
            60px 0;
    }


    .career-jobs {
        padding:
            60px 0
            85px;
    }


    .career-section-head {
        align-items: flex-start;

        flex-direction: column;
    }


    .career-job-card {
        grid-template-columns:
            1fr
            40px;

        gap: 18px;

        padding:
            22px;
    }


    .career-job-number {
        display: none;
    }


    .career-job-main {
        grid-column: 1;
    }


    .career-job-meta {
        grid-column:
            1 / -1;

        grid-template-columns: 1fr;

        gap: 14px;
    }


    .career-job-arrow {
        grid-column: 2;
        grid-row: 1;

        align-self: start;
    }


    .career-general {
        padding-bottom: 85px;
    }


    .career-general-box {
        align-items: flex-start;

        flex-direction: column;

        padding: 30px 24px;
    }


    .career-general-button {
        width: 100%;
    }

}


/* =========================================================
   CAREER JOB STATUS + PUBLISHED DATE
========================================================= */

.career-job-status-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.career-job-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border: 1px solid rgba(201,168,76,.28);
    border-radius: 999px;
    background: rgba(201,168,76,.08);
    color: #c9a84c;
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.career-job-date {
    color: rgba(255,255,255,.34);
    font-size: .60rem;
    font-weight: 600;
}

.career-job-status-expired .career-job-status-badge {
    border-color: rgba(255,255,255,.15);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.52);
}

.career-job-status-closed .career-job-status-badge {
    border-color: rgba(190,90,90,.28);
    background: rgba(190,90,90,.08);
    color: #d98989;
}

body.light-mode .career-job-status-badge {
    border-color: rgba(157,124,34,.28);
    background: rgba(157,124,34,.08);
    color: #9d7c22;
}

body.light-mode .career-job-date {
    color: rgba(0,0,0,.42);
}

body.light-mode .career-job-status-expired .career-job-status-badge {
    border-color: rgba(0,0,0,.12);
    background: rgba(0,0,0,.04);
    color: #777;
}

body.light-mode .career-job-status-closed .career-job-status-badge {
    border-color: rgba(150,60,60,.20);
    background: rgba(150,60,60,.06);
    color: #a14e4e;
}


/* =========================================================
   CAREER STATUS - DAHA BELİRGİN
========================================================= */

.career-job-status-active .career-job-status-badge {
    border-color: rgba(76, 175, 105, .30);
    background: rgba(76, 175, 105, .10);
    color: #8bd5a0;
}

.career-job-status-expired .career-job-status-badge {
    border-color: rgba(201, 168, 76, .28);
    background: rgba(201, 168, 76, .08);
    color: #d6b85d;
}

.career-job-status-closed .career-job-status-badge {
    border-color: rgba(196, 84, 84, .30);
    background: rgba(196, 84, 84, .10);
    color: #e09292;
}

body.light-mode .career-job-status-active .career-job-status-badge {
    border-color: rgba(46, 125, 67, .25);
    background: rgba(46, 125, 67, .08);
    color: #2f7d45;
}

body.light-mode .career-job-status-expired .career-job-status-badge {
    border-color: rgba(157, 124, 34, .28);
    background: rgba(157, 124, 34, .08);
    color: #8c6c18;
}

body.light-mode .career-job-status-closed .career-job-status-badge {
    border-color: rgba(150, 60, 60, .22);
    background: rgba(150, 60, 60, .07);
    color: #a14e4e;
}

@media (max-width: 1000px) {
    .career-job-meta {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .career-job-meta {
        grid-template-columns: 1fr;
    }
}