:root {
    --bg: #0B0F14;
    --panel: #111823;
    --panel-2: #0E141D;
    --line: rgba(200,160,90,.16);
    --line-soft: rgba(143,163,184,.12);
    --copper: #E39A3B;
    --copper-hot: #F0B45C;
    --copper-dim: rgba(227,154,59,.55);
    --steel: #8FA3B8;
    --ink: #EAF0F6;
    --ink-dim: #A9B8C7;
    --ok: #3DD68C;
    --mono: 'IBM Plex Mono',monospace;
    --sans: 'IBM Plex Sans',sans-serif;
    --disp: 'Chakra Petch',sans-serif;
}

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

html {
    scroll-behavior: smooth
}

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased
}

::selection {
    background: var(--copper);
    color: #181004
}

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

img, svg {
    display: block;
    max-width: 100%
}

.wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 32px
}

.eyebrow {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--copper);
    display: flex;
    align-items: center;
    gap: 12px
}

    .eyebrow::before {
        content: "";
        width: 28px;
        height: 1px;
        background: var(--copper)
    }

h1, h2, h3 {
    font-family: var(--disp);
    font-weight: 600;
    line-height: 1.12
}

h2 {
    font-size: clamp(30px,4vw,44px);
    letter-spacing: -.01em
}

.sub {
    color: var(--ink-dim);
    max-width: 620px;
    margin-top: 18px;
    font-size: 17px
}

button, input {
    font-family: inherit;
    font-size: inherit
}

:focus-visible {
    outline: 2px solid var(--copper);
    outline-offset: 3px;
    border-radius: 2px
}

/* ---------- NAV ---------- */
nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    backdrop-filter: blur(14px);
    background: rgba(11,15,20,.72);
    border-bottom: 1px solid var(--line-soft)
}

.nav-in {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 32px;
    height: 68px;
    display: flex;
    align-items: center;
    gap: 36px
}

.logo {
    font-family: 'Trebuchet MS','Segoe UI',Tahoma,Verdana,sans-serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -.01em;
    white-space: nowrap
}

    .logo b {
        color: var(--copper);
        font-weight: 700
    }

    .logo .dot {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--ok);
        margin-left: 8px;
        vertical-align: 2px;
        animation: pulse 2.4s infinite
    }

@keyframes pulse {
    0%,100% {
        opacity: 1
    }

    50% {
        opacity: .35
    }
}

.nav-links {
    display: flex;
    gap: 26px;
    margin-left: auto;
    font-size: 14.5px;
    color: var(--ink-dim)
}

    .nav-links a {
        transition: color .2s;
        white-space: nowrap
    }

        .nav-links a:hover {
            color: var(--ink)
        }

.nav-cta {
    margin-left: 8px;
    font-family: var(--mono);
    font-size: 13px;
    padding: 10px 20px;
    border: 1px solid var(--copper);
    color: var(--copper);
    border-radius: 4px;
    transition: .2s;
    white-space: nowrap
}

    .nav-cta:hover {
        background: var(--copper);
        color: #181004
    }

/* ---------- HERO ---------- */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 140px 0 90px
}

.traces {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .9
}

    .traces path {
        fill: none;
        stroke: var(--line);
        stroke-width: 1.5
    }

    .traces .glow {
        stroke: var(--copper-dim);
        stroke-width: 1.5;
        stroke-dasharray: 1600;
        stroke-dashoffset: 1600;
        animation: draw 3.2s cubic-bezier(.6,.05,.3,1) forwards
    }

        .traces .glow.d2 {
            animation-delay: .5s
        }

        .traces .glow.d3 {
            animation-delay: 1s
        }

        .traces .glow.d4 {
            animation-delay: 1.5s
        }

@keyframes draw {
    to {
        stroke-dashoffset: 0
    }
}

.traces circle {
    fill: var(--bg);
    stroke: var(--copper-dim);
    stroke-width: 1.5
}
/* hero photo slideshow */
.hero-photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 52%;
    z-index: 0;
    overflow: hidden
}

    .hero-photo .slide {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-repeat: no-repeat;
        opacity: 0;
        transition: opacity 2.4s ease-in-out;
        z-index: 0;
        will-change: transform,opacity;
        backface-visibility: hidden;
        animation: kb 22s ease-in-out infinite alternate
    }

        .hero-photo .slide:nth-child(2) {
            animation-delay: -5.5s
        }

        .hero-photo .slide:nth-child(3) {
            animation-delay: -11s
        }

        .hero-photo .slide:nth-child(4) {
            animation-delay: -16.5s
        }

        .hero-photo .slide.active {
            opacity: 1
        }

@keyframes kb {
    from {
        transform: scale(1.06) translate(0,0)
    }

    to {
        transform: scale(1.16) translate(-1.6%,1.2%)
    }
}

.hero-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to right,var(--bg) 0%,rgba(11,15,20,.72) 26%,rgba(11,15,20,.18) 58%,rgba(11,15,20,.28) 100%), linear-gradient(to top,var(--bg) 0%,rgba(11,15,20,0) 26%), linear-gradient(to bottom,var(--bg) 0%,rgba(11,15,20,0) 20%)
}

.hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 60px;
    align-items: center;
    width: 100%;
    z-index: 1
}

.hero h1 {
    font-size: clamp(40px,5.6vw,68px);
    letter-spacing: -.015em
}

    .hero h1 .cu {
        color: var(--copper)
    }

.hero .lede {
    margin-top: 24px;
    font-size: 18px;
    color: var(--ink-dim);
    max-width: 520px
}

.brand-chips {
    margin-top: 34px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.chip {
    font-family: var(--disp);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .06em;
    padding: 10px 18px;
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--ink-dim);
    position: relative;
    background: rgba(17,24,35,.6);
    transition: .25s
}

    .chip::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 2px;
        background: linear-gradient(90deg,transparent,var(--copper),transparent);
        opacity: 0;
        transition: .25s
    }

    .chip:hover {
        color: var(--ink);
        border-color: var(--copper-dim)
    }

        .chip:hover::after {
            opacity: 1
        }

    .chip small {
        display: block;
        font-family: var(--mono);
        font-weight: 400;
        font-size: 10px;
        letter-spacing: .14em;
        color: var(--copper);
        margin-top: 2px
    }

/* tracker card */
.tracker {
    background: rgba(17,24,35,.82);
    backdrop-filter: blur(10px);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,.6)
}

.tracker-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--line-soft);
    font-family: var(--mono);
    font-size: 12px;
    color: var(--steel)
}

    .tracker-bar .led {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--ok);
        animation: pulse 2s infinite
    }

.tracker-body {
    padding: 24px 22px 26px
}

.tracker label {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--steel)
}

.tracker .row {
    display: flex;
    gap: 10px;
    margin-top: 12px
}

.tracker input {
    flex: 1;
    background: var(--panel-2);
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    padding: 13px 16px;
    color: var(--ink);
    font-family: var(--mono);
    font-size: 14px;
    transition: .2s;
    min-width: 0
}

    .tracker input::placeholder {
        color: #5B6B7C
    }

    .tracker input:focus {
        border-color: var(--copper-dim);
        outline: none
    }

.tracker .go {
    background: var(--copper);
    border: none;
    color: #181004;
    font-family: var(--disp);
    font-weight: 600;
    font-size: 14.5px;
    padding: 0 26px;
    border-radius: 6px;
    cursor: pointer;
    transition: .2s
}

    .tracker .go:hover {
        background: var(--copper-hot)
    }

.tracker .ext {
    display: block;
    margin-top: 14px;
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--steel);
    letter-spacing: .04em
}

    .tracker .ext a {
        color: var(--copper)
    }

.t-status {
    margin-top: 20px;
    border-top: 1px dashed var(--line-soft);
    padding-top: 18px;
    display: none
}

    .t-status.show {
        display: block;
        animation: fadeUp .5s ease
    }

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.t-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-top: 14px
}

    .t-steps::before {
        content: "";
        position: absolute;
        top: 7px;
        left: 8px;
        right: 8px;
        height: 2px;
        background: var(--line-soft)
    }

    .t-steps::after {
        content: "";
        position: absolute;
        top: 7px;
        left: 8px;
        width: 62%;
        height: 2px;
        background: var(--copper)
    }

.t-step {
    position: relative;
    text-align: center;
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--steel);
    width: 25%
}

    .t-step i {
        display: block;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--panel);
        border: 2px solid var(--line-soft);
        margin: 0 auto 8px;
        position: relative;
        z-index: 1
    }

    .t-step.on {
        color: var(--ink)
    }

        .t-step.on i {
            border-color: var(--copper);
            background: var(--copper)
        }

    .t-step.now i {
        border-color: var(--copper);
        background: var(--panel);
        box-shadow: 0 0 0 4px rgba(227,154,59,.18)
    }

.t-meta {
    margin-top: 16px;
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--ink-dim);
    display: flex;
    justify-content: space-between
}

    .t-meta b {
        color: var(--ok);
        font-weight: 500
    }

/* ---------- TELEMETRY TICKER ---------- */
.ticker {
    border-block: 1px solid var(--line-soft);
    background: var(--panel-2);
    overflow: hidden
}

.ticker-in {
    display: flex;
    gap: 0;
    animation: slide 40s linear infinite;
    width: max-content
}

@keyframes slide {
    to {
        transform: translateX(-50%)
    }
}

.tick {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 18px 44px;
    border-right: 1px solid var(--line-soft);
    font-family: var(--mono);
    white-space: nowrap
}

    .tick b {
        font-family: var(--disp);
        font-size: 22px;
        font-weight: 600;
        color: var(--copper)
    }

    .tick span {
        font-size: 12.5px;
        color: var(--steel);
        letter-spacing: .04em
    }

/* ---------- SECTIONS ---------- */
section {
    padding: 110px 0
}

.sec-head {
    margin-bottom: 56px
}

/* service labels */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 22px
}

.svc {
    background: var(--panel);
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    padding: 30px 28px 0;
    position: relative;
    overflow: hidden;
    transition: .3s;
    display: flex;
    flex-direction: column
}

    .svc:hover {
        transform: translateY(-5px);
        border-color: var(--copper-dim)
    }

    .svc .sn {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--steel);
        letter-spacing: .12em;
        display: flex;
        justify-content: space-between;
        margin-bottom: 22px
    }

        .svc .sn .soon {
            color: var(--ok)
        }

    .svc .ic {
        width: 52px;
        height: 52px;
        border: 1px solid var(--line);
        border-radius: 8px;
        display: grid;
        place-items: center;
        margin-bottom: 20px;
        color: var(--copper)
    }

    .svc h3 {
        font-size: 21px;
        margin-bottom: 12px
    }

    .svc p {
        font-size: 14.5px;
        color: var(--ink-dim);
        flex: 1
    }

    .svc ul {
        list-style: none;
        margin: 18px 0 24px;
        font-family: var(--mono);
        font-size: 12.5px;
        color: var(--steel)
    }

    .svc li {
        padding: 7px 0;
        border-top: 1px dashed var(--line-soft);
        display: flex;
        gap: 10px
    }

        .svc li::before {
            content: "›";
            color: var(--copper)
        }

.barcode {
    height: 34px;
    margin: 0 -28px;
    background: repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 5px,var(--ink) 5px 6px,transparent 6px 11px,var(--ink) 11px 14px,transparent 14px 17px);
    opacity: .14
}

/* ---------- BRANDS ---------- */
.brand-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 12px
}

.brand-card {
    font-family: var(--disp);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .05em;
    padding: 18px 16px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    background: var(--panel);
    color: var(--ink-dim);
    cursor: pointer;
    text-align: left;
    transition: .22s;
    position: relative
}

    .brand-card small {
        display: block;
        font-family: var(--mono);
        font-weight: 400;
        font-size: 10.5px;
        letter-spacing: .12em;
        color: var(--steel);
        margin-top: 4px
    }

    .brand-card:hover {
        border-color: var(--copper-dim);
        color: var(--ink)
    }

    .brand-card.active {
        border-color: var(--copper);
        color: var(--ink);
        background: var(--panel-2)
    }

        .brand-card.active::after {
            content: "";
            position: absolute;
            left: 16px;
            right: 16px;
            bottom: -1px;
            height: 2px;
            background: var(--copper)
        }

.brand-detail {
    margin-top: 26px;
    background: var(--panel-2);
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    padding: 32px 34px;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 34px;
    align-items: start
}

    .brand-detail .bd-name {
        font-family: var(--disp);
        font-weight: 700;
        font-size: 26px
    }

    .brand-detail .bd-tag {
        font-family: var(--mono);
        font-size: 11.5px;
        letter-spacing: .14em;
        color: var(--copper);
        margin-top: 8px;
        line-height: 1.7
    }

    .brand-detail .bd-text {
        font-size: 15px;
        color: var(--ink-dim)
    }

        .brand-detail .bd-text p + p {
            margin-top: 12px
        }

.bd-note {
    margin-top: 14px;
    padding: 12px 16px;
    border-left: 2px solid var(--copper);
    background: rgba(227,154,59,.06);
    font-size: 13.5px;
    color: var(--ink-dim)
}

/* ---------- LAB / BOARD ---------- */
.lab {
    background: var(--panel-2);
    border-block: 1px solid var(--line-soft)
}

.lab-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center
}

.board-wrap {
    position: relative
}

    .board-wrap svg {
        width: 100%;
        height: auto
    }

.callout {
    font-family: var(--mono);
    font-size: 12px;
    fill: var(--ink-dim)
}

    .callout tspan {
        fill: var(--copper);
        font-size: 10px;
        letter-spacing: .15em
    }

.lab-list {
    margin-top: 34px;
    display: flex;
    flex-direction: column;
    gap: 0
}

.cap {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 20px;
    padding: 22px 0;
    border-top: 1px solid var(--line-soft)
}

    .cap:last-child {
        border-bottom: 1px solid var(--line-soft)
    }

    .cap .no {
        font-family: var(--mono);
        font-size: 12px;
        color: var(--copper);
        padding-top: 4px
    }

    .cap h3 {
        font-size: 17.5px;
        margin-bottom: 6px;
        font-weight: 500
    }

    .cap p {
        font-size: 14px;
        color: var(--ink-dim)
    }

/* ---------- PROCESS ---------- */
.proc-rail {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 0;
    position: relative;
    margin-top: 20px
}

    .proc-rail::before {
        content: "";
        position: absolute;
        top: 26px;
        left: 6%;
        right: 6%;
        height: 2px;
        background: linear-gradient(90deg,var(--copper-dim),var(--line) 60%,var(--line-soft))
    }

.pstep {
    text-align: center;
    padding: 0 14px;
    position: relative
}

    .pstep .node {
        width: 52px;
        height: 52px;
        margin: 0 auto 18px;
        border-radius: 50%;
        background: var(--panel);
        border: 1.5px solid var(--copper-dim);
        display: grid;
        place-items: center;
        color: var(--copper);
        position: relative;
        z-index: 1
    }

    .pstep h3 {
        font-size: 15.5px;
        font-weight: 500
    }

    .pstep p {
        font-size: 13px;
        color: var(--steel);
        margin-top: 6px
    }

    .pstep .t {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--copper);
        margin-top: 10px;
        letter-spacing: .1em
    }

.proc-note {
    margin-top: 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px
}

.pn {
    background: var(--panel);
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    padding: 24px 26px
}

    .pn h3 {
        font-size: 15px;
        font-weight: 500;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--ink)
    }

        .pn h3 svg {
            color: var(--copper);
            flex: none
        }

    .pn ul {
        list-style: none;
        font-size: 13.5px;
        color: var(--ink-dim)
    }

    .pn li {
        padding: 5px 0 5px 16px;
        position: relative
    }

        .pn li::before {
            content: "›";
            position: absolute;
            left: 0;
            color: var(--copper)
        }

    .pn p {
        font-size: 13.5px;
        color: var(--ink-dim)
    }

/* ---------- KURUMSAL ---------- */
.corp-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 70px;
    align-items: start
}

.corp p.big {
    font-size: 16.5px;
    color: var(--ink-dim);
    margin-top: 18px
}

.corp .cta2 {
    display: inline-block;
    margin-top: 30px;
    font-family: var(--disp);
    font-weight: 600;
    font-size: 15px;
    color: #181004;
    background: var(--copper);
    padding: 15px 32px;
    border-radius: 6px;
    transition: .2s
}

    .corp .cta2:hover {
        background: var(--copper-hot)
    }

.cert-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line-soft);
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    overflow: hidden
}

.cert {
    background: var(--panel);
    padding: 26px 26px
}

    .cert .cn {
        font-family: var(--mono);
        font-size: 10.5px;
        letter-spacing: .16em;
        color: var(--copper);
        margin-bottom: 10px
    }

    .cert b {
        font-family: var(--disp);
        font-size: 16.5px;
        font-weight: 600;
        color: var(--ink);
        display: block;
        line-height: 1.3
    }

    .cert span {
        display: block;
        font-size: 12.5px;
        color: var(--steel);
        margin-top: 8px
    }

.vm-grid {
    margin-top: 56px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px
}

.vm {
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    padding: 26px 28px;
    background: var(--panel-2)
}

    .vm h3 {
        font-size: 16px;
        font-weight: 500;
        color: var(--copper);
        margin-bottom: 10px;
        font-family: var(--mono);
        letter-spacing: .14em;
        text-transform: uppercase;
        font-size: 12px
    }

    .vm p {
        font-size: 14.5px;
        color: var(--ink-dim)
    }

/* ---------- TIMELINE ---------- */
.timeline {
    margin-top: 20px;
    position: relative;
    padding-left: 120px
}

    .timeline::before {
        content: "";
        position: absolute;
        left: 88px;
        top: 6px;
        bottom: 6px;
        width: 1.5px;
        background: linear-gradient(var(--copper-dim),var(--line-soft))
    }

.tl {
    position: relative;
    padding: 0 0 26px 34px
}

    .tl::before {
        content: "";
        position: absolute;
        left: -7.5px;
        top: 7px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--bg);
        border: 2px solid var(--copper-dim)
    }

    .tl.major::before {
        background: var(--copper);
        border-color: var(--copper)
    }

    .tl .yr {
        position: absolute;
        left: -120px;
        top: 2px;
        width: 70px;
        text-align: right;
        font-family: var(--mono);
        font-size: 13px;
        color: var(--copper)
    }

    .tl h3 {
        font-size: 15.5px;
        font-weight: 500
    }

    .tl p {
        font-size: 13.5px;
        color: var(--steel);
        margin-top: 3px
    }

/* ---------- FAQ ---------- */
.faq {
    max-width: 840px
}

    .faq details {
        border-bottom: 1px solid var(--line-soft)
    }

        .faq details:first-of-type {
            border-top: 1px solid var(--line-soft)
        }

    .faq summary {
        cursor: pointer;
        list-style: none;
        padding: 22px 44px 22px 0;
        font-family: var(--disp);
        font-weight: 500;
        font-size: 16.5px;
        position: relative;
        transition: color .2s
    }

        .faq summary::-webkit-details-marker {
            display: none
        }

        .faq summary::after {
            content: "+";
            position: absolute;
            right: 6px;
            top: 50%;
            transform: translateY(-50%);
            font-family: var(--mono);
            font-size: 20px;
            color: var(--copper);
            transition: transform .25s
        }

    .faq details[open] summary::after {
        transform: translateY(-50%) rotate(45deg)
    }

    .faq summary:hover {
        color: var(--copper-hot)
    }

    .faq .a {
        padding: 0 24px 24px 0;
        font-size: 14.5px;
        color: var(--ink-dim)
    }

        .faq .a p + p {
            margin-top: 10px
        }

/* ---------- KARİYER ---------- */
.career-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start
}

.career h3 {
    font-size: 18px;
    font-weight: 500;
    margin: 26px 0 10px;
    color: var(--ink)
}

.career p {
    font-size: 14.5px;
    color: var(--ink-dim)
}

    .career p + p {
        margin-top: 12px
    }

.apply {
    background: var(--panel);
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    padding: 32px 34px;
    position: sticky;
    top: 100px
}

    .apply .sn {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--steel);
        letter-spacing: .12em;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px
    }

    .apply h3 {
        font-size: 20px;
        margin-bottom: 12px
    }

    .apply p {
        font-size: 14px;
        color: var(--ink-dim);
        margin-bottom: 22px
    }

    .apply a {
        display: inline-block;
        font-family: var(--disp);
        font-weight: 600;
        font-size: 14.5px;
        color: #181004;
        background: var(--copper);
        padding: 13px 26px;
        border-radius: 6px;
        transition: .2s
    }

        .apply a:hover {
            background: var(--copper-hot)
        }

    .apply .mail {
        display: block;
        margin-top: 16px;
        font-family: var(--mono);
        font-size: 12.5px;
        color: var(--steel)
    }

/* ---------- İLETİŞİM ---------- */
.contact-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 60px;
    align-items: start
}

.c-item {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 18px;
    padding: 20px 0;
    border-top: 1px solid var(--line-soft)
}

    .c-item:last-child {
        border-bottom: 1px solid var(--line-soft)
    }

    .c-item .ci {
        width: 44px;
        height: 44px;
        border: 1px solid var(--line);
        border-radius: 8px;
        display: grid;
        place-items: center;
        color: var(--copper)
    }

    .c-item h3 {
        font-size: 13px;
        font-weight: 500;
        font-family: var(--mono);
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--steel);
        margin-bottom: 4px
    }

    .c-item p {
        font-size: 15px;
        color: var(--ink)
    }

        .c-item p small {
            display: block;
            font-size: 12.5px;
            color: var(--steel);
            margin-top: 2px
        }

.hours {
    background: var(--panel);
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    padding: 30px 32px
}

    .hours .sn {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--steel);
        letter-spacing: .12em;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between
    }

    .hours dl {
        display: grid;
        grid-template-columns: 1fr auto;
        row-gap: 12px;
        font-size: 14px
    }

    .hours dt {
        color: var(--ink-dim)
    }

    .hours dd {
        font-family: var(--mono);
        color: var(--ink);
        font-size: 13px
    }

    .hours .wsp {
        margin-top: 22px;
        padding-top: 18px;
        border-top: 1px dashed var(--line-soft);
        font-size: 13.5px;
        color: var(--ink-dim)
    }

        .hours .wsp b {
            color: var(--ok);
            font-weight: 500;
            font-family: var(--mono);
            font-size: 12px;
            letter-spacing: .08em
        }

/* ---------- FOOTER ---------- */
footer {
    border-top: 1px solid var(--line-soft);
    padding: 60px 0 40px;
    background: var(--panel-2)
}

.f-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.2fr;
    gap: 40px;
    margin-bottom: 50px
}

footer h4 {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--steel);
    margin-bottom: 18px
}

footer a, footer button.link {
    display: block;
    font-size: 14px;
    color: var(--ink-dim);
    padding: 5px 0;
    transition: .2s;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    width: 100%
}

    footer a:hover, footer button.link:hover {
        color: var(--copper)
    }

.f-bottom {
    border-top: 1px solid var(--line-soft);
    padding-top: 26px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--steel)
}

/* ---------- DIALOG (yasal metinler) ---------- */
dialog {
    background: var(--panel);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 12px;
    max-width: 760px;
    width: calc(100% - 40px);
    max-height: 82vh;
    padding: 0
}

    dialog::backdrop {
        background: rgba(5,8,12,.78);
        backdrop-filter: blur(4px)
    }

.dlg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    border-bottom: 1px solid var(--line-soft);
    position: sticky;
    top: 0;
    background: var(--panel)
}

    .dlg-head h3 {
        font-size: 18px
    }

.dlg-close {
    background: none;
    border: 1px solid var(--line-soft);
    color: var(--ink-dim);
    border-radius: 6px;
    width: 34px;
    height: 34px;
    cursor: pointer;
    font-size: 16px;
    transition: .2s
}

    .dlg-close:hover {
        border-color: var(--copper);
        color: var(--copper)
    }

.dlg-body {
    padding: 26px 28px;
    overflow-y: auto;
    font-size: 14px;
    color: var(--ink-dim)
}

    .dlg-body h4 {
        font-family: var(--disp);
        color: var(--ink);
        font-size: 15px;
        margin: 20px 0 8px
    }

    .dlg-body p {
        margin-bottom: 10px
    }

    .dlg-body ul {
        margin: 0 0 12px 20px
    }

    .dlg-body li {
        margin-bottom: 4px
    }

    .dlg-body .co {
        margin-top: 18px;
        padding: 14px 18px;
        border-left: 2px solid var(--copper);
        background: rgba(227,154,59,.06);
        font-size: 13px
    }

/* ---------- COOKIE BAR ---------- */
.cookiebar {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 80;
    max-width: 680px;
    margin: 0 auto;
    background: rgba(17,24,35,.96);
    backdrop-filter: blur(12px);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px 24px;
    display: none;
    gap: 20px;
    align-items: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.5)
}

    .cookiebar.show {
        display: flex
    }

    .cookiebar p {
        font-size: 13px;
        color: var(--ink-dim);
        flex: 1
    }

        .cookiebar p button.link {
            background: none;
            border: none;
            color: var(--copper);
            cursor: pointer;
            font-size: 13px;
            padding: 0;
            text-decoration: underline
        }

    .cookiebar .btns {
        display: flex;
        gap: 10px;
        flex: none
    }

    .cookiebar .accept {
        background: var(--copper);
        border: none;
        color: #181004;
        font-family: var(--disp);
        font-weight: 600;
        font-size: 13.5px;
        padding: 11px 20px;
        border-radius: 6px;
        cursor: pointer
    }

        .cookiebar .accept:hover {
            background: var(--copper-hot)
        }

    .cookiebar .essential {
        background: none;
        border: 1px solid var(--line-soft);
        color: var(--ink-dim);
        font-size: 13.5px;
        padding: 11px 18px;
        border-radius: 6px;
        cursor: pointer;
        transition: .2s
    }

        .cookiebar .essential:hover {
            border-color: var(--copper-dim);
            color: var(--ink)
        }

/* ---------- SERVİSE GÖNDER / WIZARD ---------- */
.nav-send {
    font-family: var(--disp);
    font-weight: 600;
    font-size: 13.5px;
    padding: 10px 20px;
    background: var(--copper);
    color: #181004;
    border: 1px solid var(--copper);
    border-radius: 4px;
    cursor: pointer;
    transition: .2s;
    white-space: nowrap
}

    .nav-send:hover {
        background: var(--copper-hot);
        border-color: var(--copper-hot)
    }

dialog.wiz {
    max-width: 660px
}

.wiz-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 22px 34px 0
}

    .wiz-steps::before {
        content: "";
        position: absolute;
        top: 29px;
        left: 60px;
        right: 60px;
        height: 2px;
        background: var(--line-soft)
    }

.ws {
    position: relative;
    text-align: center;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .08em;
    color: var(--steel);
    width: 25%
}

    .ws i {
        display: block;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--panel);
        border: 2px solid var(--line-soft);
        margin: 0 auto 8px;
        position: relative;
        z-index: 1
    }

    .ws.on {
        color: var(--ink)
    }

        .ws.on i {
            border-color: var(--copper);
            background: var(--copper)
        }

    .ws.now {
        color: var(--copper)
    }

        .ws.now i {
            border-color: var(--copper);
            background: var(--panel);
            box-shadow: 0 0 0 4px rgba(227,154,59,.18)
        }

.wiz-body {
    padding: 26px 34px 8px
}

    .wiz-body h4 {
        font-family: var(--disp);
        font-size: 17px;
        color: var(--ink);
        margin-bottom: 18px
    }

.field {
    margin-bottom: 16px
}

    .field label {
        display: block;
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--steel);
        margin-bottom: 8px
    }

    .field input, .field select, .field textarea {
        width: 100%;
        background: var(--panel-2);
        border: 1px solid var(--line-soft);
        border-radius: 6px;
        padding: 12px 14px;
        color: var(--ink);
        font-family: var(--sans);
        font-size: 14px;
        transition: .2s
    }

    .field textarea {
        min-height: 96px;
        resize: vertical;
        font-family: var(--sans)
    }

        .field input:focus, .field select:focus, .field textarea:focus {
            border-color: var(--copper-dim);
            outline: none
        }

    .field select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238FA3B8' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 14px center
    }

.f-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.rchips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.rchip {
    font-family: var(--mono);
    font-size: 12.5px;
    padding: 10px 16px;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    color: var(--ink-dim);
    cursor: pointer;
    background: var(--panel-2);
    transition: .2s
}

    .rchip:hover {
        border-color: var(--copper-dim)
    }

    .rchip.sel {
        border-color: var(--copper);
        color: var(--copper);
        background: rgba(227,154,59,.08)
    }

.wiz-warn {
    margin: 4px 0 16px;
    padding: 14px 16px;
    border-left: 2px solid var(--copper);
    background: rgba(227,154,59,.07);
    font-size: 13.5px;
    color: var(--ink-dim);
    border-radius: 0 6px 6px 0;
    display: none
}

    .wiz-warn b {
        color: var(--copper);
        font-weight: 600
    }

    .wiz-warn.block {
        border-left-color: #E36A3B;
        background: rgba(227,106,59,.08)
    }

.chk {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 13px 0;
    border-top: 1px dashed var(--line-soft);
    font-size: 13.5px;
    color: var(--ink-dim);
    cursor: pointer
}

    .chk input {
        width: 17px;
        height: 17px;
        margin-top: 2px;
        accent-color: var(--copper);
        flex: none;
        cursor: pointer
    }

    .chk button.link {
        background: none;
        border: none;
        padding: 0;
        color: var(--copper);
        cursor: pointer;
        font-size: 13.5px;
        text-decoration: underline
    }

.wiz-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 18px 34px 26px
}

    .wiz-foot .err {
        font-family: var(--mono);
        font-size: 11.5px;
        color: #E36A3B;
        flex: 1
    }

.wbtn {
    font-family: var(--disp);
    font-weight: 600;
    font-size: 14px;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    transition: .2s
}

    .wbtn.next {
        background: var(--copper);
        border: 1px solid var(--copper);
        color: #181004
    }

        .wbtn.next:hover {
            background: var(--copper-hot)
        }

    .wbtn.back {
        background: none;
        border: 1px solid var(--line-soft);
        color: var(--ink-dim)
    }

        .wbtn.back:hover {
            border-color: var(--copper-dim);
            color: var(--ink)
        }

.wiz-res {
    text-align: center;
    padding: 14px 0 6px
}

    .wiz-res .ok-ic {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 2px solid var(--ok);
        display: grid;
        place-items: center;
        margin: 0 auto 18px;
        color: var(--ok)
    }

    .wiz-res .ref {
        font-family: var(--mono);
        font-size: 24px;
        color: var(--copper);
        letter-spacing: .06em;
        margin: 14px 0 4px
    }

    .wiz-res .rl {
        font-family: var(--mono);
        font-size: 10.5px;
        letter-spacing: .18em;
        color: var(--steel);
        text-transform: uppercase
    }

    .wiz-res .sum {
        text-align: left;
        margin-top: 24px;
        border: 1px dashed var(--line-soft);
        border-radius: 8px;
        padding: 18px 20px;
        font-size: 13.5px;
        color: var(--ink-dim)
    }

        .wiz-res .sum b {
            color: var(--ink);
            font-weight: 500
        }

        .wiz-res .sum .row2 {
            display: grid;
            grid-template-columns: 130px 1fr;
            gap: 4px 14px;
            font-family: var(--mono);
            font-size: 12.5px
        }

    .wiz-res .pack {
        text-align: left;
        margin-top: 14px;
        padding: 16px 20px;
        border-left: 2px solid var(--copper);
        background: rgba(227,154,59,.06);
        font-size: 13px;
        color: var(--ink-dim);
        border-radius: 0 6px 6px 0
    }

@media (max-width:640px) {
    .f-grid2 {
        grid-template-columns: 1fr
    }

    .wiz-body, .wiz-foot {
        padding-left: 22px;
        padding-right: 22px
    }

    .wiz-steps {
        padding: 18px 18px 0
    }

    .nav-cta {
        display: none
    }
}

/* ---------- YUKARI ÇIK ---------- */
.totop {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 70;
    width: 46px;
    height: 46px;
    border-radius: 8px;
    background: rgba(17,24,35,.85);
    backdrop-filter: blur(8px);
    border: 1px solid var(--line);
    color: var(--copper);
    display: grid;
    place-items: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .3s,transform .3s,visibility .3s,background .2s,border-color .2s
}

    .totop.show {
        opacity: 1;
        visibility: visible;
        transform: none
    }

    .totop:hover {
        background: var(--copper);
        color: #FFFFFF;
        border-color: var(--copper)
    }

@media (max-width:960px) {
    .totop {
        right: 16px;
        bottom: 16px
    }
}

/* reveal on scroll */
.rv {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s ease,transform .7s ease
}

    .rv.in {
        opacity: 1;
        transform: none
    }

@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important
    }

    .rv {
        opacity: 1;
        transform: none
    }
}

@media (max-width:1080px) {
    .nav-links {
        display: none
    }

    .brand-grid {
        grid-template-columns: repeat(3,1fr)
    }
}

@media (max-width:960px) {
    .hero-grid, .lab-grid, .corp-grid, .career-grid, .contact-grid {
        grid-template-columns: 1fr;
        gap: 44px
    }

    .svc-grid, .proc-note, .vm-grid, .cert-grid {
        grid-template-columns: 1fr
    }

    .proc-rail {
        grid-template-columns: 1fr;
        gap: 26px
    }

        .proc-rail::before {
            display: none
        }

    .hero-photo {
        width: 100%;
        opacity: .3
    }

    .f-grid {
        grid-template-columns: 1fr 1fr
    }

    section {
        padding: 80px 0
    }

    .brand-detail {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 26px
    }

    .timeline {
        padding-left: 86px
    }

        .timeline::before {
            left: 60px
        }

    .tl .yr {
        left: -86px;
        width: 48px
    }

    .apply {
        position: static
    }

    .cookiebar {
        flex-direction: column;
        align-items: stretch;
        text-align: left
    }
}

@media (max-width:560px) {
    .brand-grid {
        grid-template-columns: repeat(2,1fr)
    }
}