/* =========================================================
   KPSS LANDING PAGE
   Yediiklim Akademi İzmir
   ========================================================= */

.kpss-page {
    --navy: #0d2d55;
    --navy-dark: #081f3b;
    --red: #e3212b;
    --ink: #102c49;
    --muted: #6f7d8b;
    --line: #e4e8ec;
    --paper: #f5f6f7;

    overflow: hidden;
    background: #fff;
    color: var(--ink);
}


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

.kpss-hero {
    position: relative;
    background: var(--navy);
    color: #fff;
}

.kpss-hero::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: 52px 52px;

    pointer-events: none;
}

.kpss-hero__grid {
    position: relative;
    z-index: 1;

    min-height: 560px;

    display: grid;
    grid-template-columns: 1.08fr .92fr;
    align-items: center;

    gap: 65px;

    padding-top: 68px;
    padding-bottom: 68px;
}


/* eyebrow */

.kpss-eyebrow {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 24px;

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

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
}

.kpss-eyebrow span {
    width: 27px;
    height: 2px;

    background: var(--red);
}


/* title */

.kpss-hero h1 {
    max-width: 660px;

    margin: 0;

    color: #fff;

    font-size: clamp(43px, 4.4vw, 68px);
    line-height: .98;
    font-weight: 500;
    letter-spacing: -.055em;
}

.kpss-hero h1 strong {
    color: #fff;
    font-weight: 800;
}


/* lead */

.kpss-hero__lead {
    max-width: 510px;

    margin: 26px 0 0;

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

    font-size: 15px;
    line-height: 1.7;
}


/* buttons */

.kpss-hero__actions {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-top: 34px;
}

.kpss-btn {
    min-height: 47px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 25px;

    padding: 0 19px;

    border: 1px solid rgba(255,255,255,.18);
    border-radius: 4px;

    color: #fff;

    font-size: 11px;
    font-weight: 750;

    text-decoration: none;

    transition: .2s ease;
}

.kpss-btn--primary {
    border-color: var(--red);
    background: var(--red);
}

.kpss-btn--primary:hover {
    background: #c91821;
    border-color: #c91821;
}

.kpss-btn--ghost:hover {
    background: #fff;
    border-color: #fff;
    color: var(--navy);
}


/* HERO GRAPHIC */

.kpss-hero__visual {
    position: relative;

    min-height: 385px;

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

.kpss-hero__word {
    position: absolute;

    top: 28px;
    right: -8px;

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

    font-size: clamp(105px, 11vw, 180px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -.08em;
}

.kpss-hero__year {
    position: absolute;

    top: 96px;
    left: 52px;

    display: flex;
    flex-direction: column;
}

.kpss-hero__year small {
    margin-bottom: 5px;

    color: var(--red);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .22em;
}

.kpss-hero__year strong {
    color: #fff;

    font-size: 64px;
    line-height: .9;
    font-weight: 800;
    letter-spacing: -.06em;
}

.kpss-hero__line {
    position: absolute;

    top: 198px;
    left: 52px;

    width: 185px;
    height: 1px;

    background: rgba(255,255,255,.18);
}

.kpss-hero__note {
    position: absolute;

    left: 52px;
    top: 225px;

    display: flex;
    gap: 18px;
}

.kpss-hero__note > span {
    color: var(--red);

    font-size: 10px;
    font-weight: 800;
}

.kpss-hero__note p {
    margin: 0;

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

    font-size: 12px;
    line-height: 1.75;
}

.kpss-hero__circle {
    position: absolute;

    width: 130px;
    height: 130px;

    right: 20px;
    bottom: 15px;

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 50%;
}

.kpss-hero__circle::after {
    content: "";

    position: absolute;

    width: 8px;
    height: 8px;

    top: 26px;
    left: -4px;

    border-radius: 50%;

    background: var(--red);
}


/* =========================================================
   PROGRAMS
   ========================================================= */

.kpss-programs {
    padding: 92px 0 105px;
}

.kpss-section-head {
    display: grid;
    grid-template-columns: .65fr 1.4fr .75fr;
    align-items: end;

    gap: 45px;

    padding-bottom: 31px;

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

.kpss-section-head > div {
    align-self: start;
}

.kpss-section-no {
    display: block;

    margin-bottom: 9px;

    color: var(--red);

    font-size: 10px;
    font-weight: 800;
}

.kpss-section-head > div p {
    margin: 0;

    color: #87929d;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .15em;
}

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

    color: var(--navy);

    font-size: clamp(30px, 3vw, 43px);
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: -.04em;
}

.kpss-section-head h2 strong {
    font-weight: 800;
}

.kpss-section-description {
    margin: 0;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.65;
}


/* choices */

.kpss-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;

    margin-top: 35px;

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

.kpss-choice__item {
    min-height: 365px;

    display: flex;
    flex-direction: column;

    padding: 28px 30px;

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

    background: #fff;
    color: var(--navy);

    text-decoration: none;

    transition:
        background .22s ease,
        color .22s ease;
}

a.kpss-choice__item:hover {
    background: #f7f8f9;
}

.kpss-choice__item--dark {
    background: var(--navy);
    color: #fff;
}

.kpss-choice__top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    color: #8b97a2;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
}

.kpss-choice__top b {
    color: #b1bac3;

    font-size: 10px;
}

.kpss-choice__item--dark .kpss-choice__top {
    color: rgba(255,255,255,.5);
}

.kpss-choice__item--dark .kpss-choice__top b {
    color: var(--red);
}

.kpss-choice__body {
    margin-top: 65px;
}

.kpss-choice__body h3 {
    margin: 0;

    color: inherit;

    font-size: 48px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.055em;
}

.kpss-choice__body > p {
    max-width: 330px;

    margin: 17px 0 0;

    color: #788592;

    font-size: 12px;
    line-height: 1.65;
}

.kpss-choice__item--dark .kpss-choice__body > p {
    color: rgba(255,255,255,.57);
}

.kpss-choice__footer {
    display: flex;
    justify-content: space-between;

    margin-top: auto;
    padding-top: 20px;

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

    font-size: 11px;
    font-weight: 700;
}

.kpss-choice__footer b {
    color: var(--red);
}


/* B levels */

.kpss-levels {
    margin-top: 27px;

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

.kpss-levels a {
    min-height: 43px;

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

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

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

    font-size: 11px;
    font-weight: 650;

    text-decoration: none;

    transition: .18s ease;
}

.kpss-levels a b {
    color: var(--red);
}

.kpss-levels a:hover {
    padding-left: 7px;

    color: #fff;
}


/* =========================================================
   PROCESS
   ========================================================= */

.kpss-process {
    padding: 90px 0;

    background: var(--paper);
}

.kpss-process__heading {
    display: grid;
    grid-template-columns: .7fr 1.3fr;

    gap: 40px;

    margin-bottom: 57px;
}

.kpss-process__heading > span {
    color: #89949e;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
}

.kpss-process__heading h2 {
    margin: 0;

    color: var(--navy);

    font-size: 38px;
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: -.04em;
}

.kpss-process__heading h2 strong {
    font-weight: 800;
}

.kpss-process__steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    border-top: 1px solid #d9dee3;
}

.kpss-process__steps article {
    position: relative;

    min-height: 185px;

    padding: 25px 25px 20px 0;

    border-right: 1px solid #d9dee3;
}

.kpss-process__steps article:not(:first-child) {
    padding-left: 25px;
}

.kpss-process__steps article:last-child {
    border-right: 0;
}

.kpss-process__steps article > span {
    color: var(--red);

    font-size: 9px;
    font-weight: 800;
}

.kpss-process__steps h3 {
    margin: 31px 0 10px;

    color: var(--navy);

    font-size: 19px;
    font-weight: 800;
}

.kpss-process__steps p {
    max-width: 190px;

    margin: 0;

    color: #74818d;

    font-size: 11px;
    line-height: 1.65;
}


/* =========================================================
   TOOLS
   ========================================================= */

.kpss-tools {
    padding: 90px 0 100px;
}

.kpss-tools__head {
    display: flex;
    justify-content: space-between;
    align-items: end;

    gap: 40px;

    margin-bottom: 37px;
}

.kpss-tools__head > div {
    color: #89949e;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
}

.kpss-tools__head > div span {
    margin-right: 13px;

    color: var(--red);
}

.kpss-tools__head h2 {
    max-width: 500px;

    margin: 0;

    color: var(--navy);

    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -.04em;
}

.kpss-tools__grid {
    border-top: 1px solid var(--line);
}

.kpss-tool {
    min-height: 88px;

    display: grid;
    grid-template-columns: 65px 1fr auto;
    align-items: center;

    gap: 15px;

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

    color: var(--navy);

    text-decoration: none;

    transition:
        padding .18s ease,
        background .18s ease;
}

.kpss-tool:hover {
    padding: 0 13px;

    background: #f7f8f9;
}

.kpss-tool__number {
    color: #a2abb4;

    font-size: 10px;
    font-weight: 800;
}

.kpss-tool small {
    display: block;

    margin-bottom: 4px;

    color: #9aa4ad;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: .12em;
}

.kpss-tool h3 {
    margin: 0;

    color: var(--navy);

    font-size: 16px;
    font-weight: 750;
}

.kpss-tool > b {
    color: var(--red);

    font-size: 17px;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.kpss-final {
    background: var(--navy-dark);
    color: #fff;
}

.kpss-final__inner {
    min-height: 265px;

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

    gap: 50px;
}

.kpss-final__inner > div:first-child > span {
    display: block;

    margin-bottom: 15px;

    color: var(--red);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .15em;
}

.kpss-final h2 {
    margin: 0;

    color: #fff;

    font-size: 37px;
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: -.04em;
}

.kpss-final h2 strong {
    font-weight: 800;
}

.kpss-final__actions {
    display: flex;
    align-items: center;

    gap: 28px;
}

.kpss-final__actions > a:first-child {
    display: flex;
    flex-direction: column;

    color: #fff;

    text-decoration: none;
}

.kpss-final__actions small {
    margin-bottom: 4px;

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

    font-size: 8px;
    font-weight: 800;
    letter-spacing: .13em;
}

.kpss-final__actions strong {
    font-size: 15px;
}

.kpss-final__button {
    min-height: 48px;

    display: flex;
    align-items: center;

    gap: 28px;

    padding: 0 19px;

    background: var(--red);
    color: #fff;

    font-size: 11px;
    font-weight: 750;

    text-decoration: none;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .kpss-hero__grid {
        min-height: auto;

        grid-template-columns: 1fr;

        padding-top: 65px;
        padding-bottom: 65px;
    }

    .kpss-hero__visual {
        display: none;
    }

    .kpss-section-head {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .kpss-choice {
        grid-template-columns: 1fr;
    }

    .kpss-process__heading {
        grid-template-columns: 1fr;
    }

    .kpss-process__steps {
        grid-template-columns: 1fr 1fr;
    }

    .kpss-process__steps article:nth-child(2) {
        border-right: 0;
    }

    .kpss-tools__head {
        align-items: start;
        flex-direction: column;
    }

    .kpss-final__inner {
        align-items: flex-start;
        flex-direction: column;

        padding-top: 55px;
        padding-bottom: 55px;
    }

}


@media (max-width: 600px) {

    .kpss-hero h1 {
        font-size: 43px;
    }

    .kpss-hero__lead {
        font-size: 14px;
    }

    .kpss-hero__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .kpss-btn {
        justify-content: space-between;
    }

    .kpss-programs,
    .kpss-process,
    .kpss-tools {
        padding-top: 65px;
        padding-bottom: 70px;
    }

    .kpss-choice__item {
        min-height: 330px;

        padding: 24px 21px;
    }

    .kpss-choice__body {
        margin-top: 45px;
    }

    .kpss-choice__body h3 {
        font-size: 42px;
    }

    .kpss-process__steps {
        grid-template-columns: 1fr;
    }

    .kpss-process__steps article,
    .kpss-process__steps article:not(:first-child) {
        min-height: 150px;

        padding: 22px 0;

        border-right: 0;
        border-bottom: 1px solid #d9dee3;
    }

    .kpss-process__steps h3 {
        margin-top: 20px;
    }

    .kpss-tool {
        grid-template-columns: 38px 1fr auto;
    }

    .kpss-final__actions {
        width: 100%;

        align-items: flex-start;
        flex-direction: column;
    }

    .kpss-final__button {
        width: 100%;

        justify-content: space-between;
    }

}