:root {
    --ink: #142226;
    --muted: #607477;

    --teal-950: #0b5e5a;
    --teal-800: #087b76;
    --teal-600: #1ca299;

    --paper: #f5f7f7;
    --card: #fff;
    --line: #dce7e6;

    --shadow:
        0 18px 46px rgba(19, 49, 49, 0.12);
}


* {
    box-sizing: border-box;
}


body {
    margin: 0;

    color:
        var(--ink);

    background:
        var(--paper);

    font:
        16px/1.55 Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        "Segoe UI",
        sans-serif;
}


button,
select {
    font: inherit;
}


button {
    cursor: pointer;
}


button:focus-visible,
select:focus-visible {
    outline:
        3px solid #70d8ce;

    outline-offset:
        4px;
}


.wrap {
    max-width:
        1120px;

    margin:
        auto;
}


/* --------------------------------------------------
   HERO
-------------------------------------------------- */

.hero {
    color:
        #fff;

    background:
        linear-gradient(116deg,
            var(--teal-950),
            var(--teal-800) 62%,
            var(--teal-600));

    padding:
        28px 24px 104px;
}


.top {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
}


.brand {
    display:
        flex;

    gap:
        13px;

    align-items:
        center;

    font-weight:
        800;

    font-size:
        20px;
}


.mark {
    width:
        50px;

    height:
        50px;

    display:
        grid;

    place-items:
        center;

    color:
        var(--teal-950);

    background:
        #fff;

    border-radius:
        16px;

    font-weight:
        900;
}


.brand small {
    display:
        block;

    font-size:
        14px;

    opacity:
        0.75;

    font-weight:
        500;
}


.language {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    font-size:
        14px;
}


.language select {
    border:
        1px solid #ffffff66;

    background:
        #ffffff18;

    color:
        #fff;

    border-radius:
        12px;

    padding:
        10px 14px;
}


.language option {
    color:
        var(--ink);

    background:
        white;
}


.copy {
    margin-top:
        38px;
}


.eyebrow {
    letter-spacing:
        0.14em;

    color:
        #bfe9e5;

    font-size:
        13px;

    font-weight:
        800;

    margin:
        0 0 14px;
}


h1 {
    font-size:
        clamp(32px,
            5vw,
            56px);

    line-height:
        1.12;

    letter-spacing:
        -0.04em;

    margin:
        0;
}


header p {
    color:
        #d9f1ee;

    max-width:
        700px;

    margin:
        16px 0 0;

    font-size:
        18px;
}


/* --------------------------------------------------
   MAIN
-------------------------------------------------- */

main {
    margin-top:
        -54px;

    padding:
        0 24px 64px;
}


/* --------------------------------------------------
   STEPS
-------------------------------------------------- */

.steps {
    background:
        white;

    border-radius:
        24px;

    box-shadow:
        var(--shadow);

    display:
        grid;

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

    padding:
        25px 30px;

    gap:
        24px;
}


.step {
    display:
        flex;

    gap:
        12px;

    align-items:
        center;
}


.number {
    display:
        grid;

    place-items:
        center;

    background:
        #dff5f2;

    color:
        var(--teal-950);

    width:
        38px;

    height:
        38px;

    border-radius:
        12px;

    font-weight:
        800;

    flex-shrink:
        0;
}


.step strong {
    display:
        block;
}


.step small {
    color:
        var(--muted);

    font-size:
        14px;
}


/* --------------------------------------------------
   SECTION HEADING
-------------------------------------------------- */

.heading {
    margin:
        32px 0 18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;
}


h2 {
    font-size:
        26px;

    letter-spacing:
        -0.03em;

    margin:
        0;
}


.tag {
    border-radius:
        30px;

    background:
        #e0f3ef;

    padding:
        7px 12px;

    color:
        var(--teal-950);

    font-size:
        14px;

    font-weight:
        700;
}


/*
 * Tag + Yeni simülasyon butonu
 */

.heading-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    flex-wrap:
        wrap;

    justify-content:
        flex-end;
}


.heading-actions .compact {
    padding:
        8px 12px;

    border-radius:
        12px;

    font-size:
        14px;
}


/* --------------------------------------------------
   SCENARIO GRID
-------------------------------------------------- */

.grid {
    display:
        grid;

    grid-template-columns:
        repeat(4,
            1fr);

    gap:
        16px;
}


.scenario {
    text-align:
        left;

    background:
        white;

    border:
        2px solid transparent;

    border-radius:
        22px;

    padding:
        22px;

    box-shadow:
        0 5px 24px #13313109;

    transition:
        transform 0.15s,
        border-color 0.15s;

    min-width:
        0;

    color:
        var(--ink);
}


.scenario:hover {
    transform:
        translateY(-3px);
}


.scenario[aria-pressed=true] {
    border-color:
        var(--teal-800);

    background:
        #f0faf8;
}


.icon {
    font-size:
        30px;

    display:
        block;

    margin-bottom:
        18px;
}


.scenario strong {
    font-size:
        18px;

    display:
        block;
}


.scenario small {
    display:
        block;

    font-size:
        14px;

    color:
        var(--muted);

    margin-top:
        8px;
}


/* --------------------------------------------------
   WORKSPACE
-------------------------------------------------- */

.workspace {
    display:
        grid;

    grid-template-columns:
        1.35fr 1fr;

    gap:
        24px;

    margin-top:
        24px;
}


.card {
    background:
        white;

    border-radius:
        27px;

    box-shadow:
        var(--shadow);

    overflow:
        hidden;
}


.cardhead {
    padding:
        22px 28px;

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

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;
}


.cardhead h2 {
    font-size:
        21px;
}


.body {
    padding:
        26px 28px;
}


.muted {
    color:
        var(--muted);
}


.body p {
    margin-top:
        0;
}


/* --------------------------------------------------
   EVENTS
-------------------------------------------------- */

.events {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        12px;
}


.event {
    padding:
        15px 14px;

    border:
        1px solid #d3e5e3;

    border-radius:
        14px;

    background:
        #f3faf8;

    color:
        var(--teal-950);

    font-weight:
        700;
}


.event:hover {
    background:
        #dff5f2;
}


.event:disabled:hover {
    background:
        #f3faf8;
}


/* --------------------------------------------------
   SCORE
-------------------------------------------------- */

.score {
    padding:
        18px;

    background:
        #f5f7f7;

    border-radius:
        18px;

    margin-bottom:
        18px;

    text-align:
        center;
}


.score strong {
    font-size:
        34px;

    display:
        block;

    letter-spacing:
        0.05em;
}


.score small {
    font-size:
        14px;
}


/* --------------------------------------------------
   PHONE PREVIEW
-------------------------------------------------- */

.phone {
    background:
        #eaf3f2;

    padding:
        32px 24px;

    border-radius:
        22px;

    min-height:
        250px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;
}


.phone-time {
    text-align:
        center;

    color:
        #395c60;

    font-size:
        40px;

    font-weight:
        300;

    margin-bottom:
        20px;

    line-height:
        1;
}


.notification {
    background:
        #ffffffed;

    padding:
        18px;

    border:
        1px solid #fff;

    border-radius:
        19px;

    box-shadow:
        0 10px 24px #183d3a12;

    animation:
        appear 0.25s ease;
}


.appname {
    font-size:
        13px;

    color:
        var(--teal-950);

    font-weight:
        800;

    letter-spacing:
        0.04em;

    display:
        flex;

    justify-content:
        space-between;

    margin-bottom:
        10px;
}


.notification strong {
    display:
        block;
}


.notification p {
    font-size:
        15px;

    margin:
        6px 0 0;

    color:
        #385154;
}


/* --------------------------------------------------
   NOTICE
-------------------------------------------------- */

.notice {
    padding:
        15px 18px;

    background:
        #edf8f7;

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

    border-radius:
        15px;

    font-size:
        14px;

    color:
        #355054;

    margin-top:
        18px;
}


/* --------------------------------------------------
   JOIN
-------------------------------------------------- */

.join {
    margin-top:
        24px;

    display:
        grid;

    grid-template-columns:
        90px 1fr;

    gap:
        24px;

    align-items:
        center;
}


.qrslot {
    width:
        90px;

    height:
        90px;

    border:
        2px dashed #bdcfcd;

    border-radius:
        14px;

    display:
        grid;

    place-items:
        center;

    font-size:
        28px;

    color:
        var(--muted);

    background:
        #f5f7f7;
}


.join h3 {
    margin:
        0 0 6px;

    font-size:
        18px;
}


.join p {
    margin:
        0;

    font-size:
        14px;
}


/* --------------------------------------------------
   FOOTER
-------------------------------------------------- */

.footer {
    margin-top:
        30px;

    display:
        flex;

    justify-content:
        space-between;

    color:
        var(--muted);

    font-size:
        14px;

    gap:
        15px;
}


/* --------------------------------------------------
   EVENT STATUS
-------------------------------------------------- */

#eventStatus {
    font-size:
        14px;

    color:
        var(--teal-950);

    min-height:
        24px;

    margin:
        18px 0 0;
}


/* --------------------------------------------------
   BUTTONS / ACTIONS
-------------------------------------------------- */

.actions {
    display:
        flex;

    gap:
        12px;

    flex-wrap:
        wrap;

    margin:
        18px 0;
}


.primary {
    padding:
        13px 20px;

    border:
        0;

    border-radius:
        13px;

    background:
        var(--teal-800);

    color:
        white;

    font-weight:
        750;
}


.secondary {
    padding:
        11px 16px;

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

    border-radius:
        12px;

    background:
        white;

    color:
        var(--teal-950);

    font-weight:
        700;
}


button:disabled {
    opacity:
        0.45;

    cursor:
        not-allowed;

    transform:
        none;
}


.actions a {
    text-decoration:
        none;

    display:
        inline-block;
}


/* --------------------------------------------------
   JOIN PANEL
-------------------------------------------------- */

.joinpanel {
    border:
        1px solid var(--line);

    border-radius:
        20px;

    background:
        #f6fbfa;

    padding:
        20px;

    margin:
        20px 0;
}


.qrrow {
    display:
        flex;

    gap:
        20px;

    align-items:
        center;
}


.qrrow canvas {
    width:
        160px;

    height:
        160px;

    max-width:
        100%;

    background:
        white;

    border-radius:
        12px;
}


.qrrow h3 {
    margin:
        0 0 8px;
}


.qrrow p {
    font-size:
        14px;

    margin:
        8px 0;
}


.countdown {
    font-weight:
        750;

    color:
        var(--teal-950);
}


.error {
    color:
        #b52b30;

    min-height:
        25px;

    margin-top:
        12px;
}


input.link {
    width:
        100%;

    padding:
        10px;

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

    border-radius:
        9px;

    background:
        white;

    font:
        14px/1.5 inherit;

    color:
        var(--muted);
}


/* --------------------------------------------------
   HEADER ACTIONS
-------------------------------------------------- */

.header-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    flex-wrap:
        wrap;

    justify-content:
        flex-end;
}


.home-link {
    color:
        #fff;

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        700;

    padding:
        10px 12px;

    border:
        1px solid #ffffff66;

    border-radius:
        12px;
}


.home-link:hover {
    background:
        #ffffff20;
}


.home-link:focus-visible {
    outline:
        3px solid #70d8ce;

    outline-offset:
        3px;
}


/* --------------------------------------------------
   ANIMATION
-------------------------------------------------- */

@keyframes appear {

    from {
        opacity:
            0;

        transform:
            translateY(7px);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }
}


@media (prefers-reduced-motion: reduce) {

    * {
        animation:
            none !important;

        transition:
            none !important;
    }
}


/* --------------------------------------------------
   TABLET
-------------------------------------------------- */

@media (max-width: 900px) {

    .grid {
        grid-template-columns:
            repeat(2,
                1fr);
    }


    .workspace {
        grid-template-columns:
            1fr 1fr;
    }
}


/* --------------------------------------------------
   MOBILE
-------------------------------------------------- */

@media (max-width: 650px) {

    .hero {
        padding:
            22px 18px 84px;
    }


    .top {
        align-items:
            flex-start;
    }


    .language {
        flex-direction:
            column;

        align-items:
            flex-end;

        gap:
            4px;
    }


    .brand small {
        font-size:
            12px;
    }


    main {
        padding:
            0 16px 40px;

        margin-top:
            -44px;
    }


    .copy {
        margin-top:
            30px;
    }


    .steps {
        padding:
            20px;

        gap:
            18px;

        grid-template-columns:
            1fr;
    }


    .workspace {
        grid-template-columns:
            1fr;
    }


    .scenario {
        padding:
            17px;
    }


    .scenario strong {
        font-size:
            16px;
    }


    .cardhead,
    .body {
        padding:
            21px;
    }


    .heading {
        align-items:
            flex-start;
    }


    .heading .tag {
        font-size:
            12px;
    }


    .heading-actions {
        gap:
            8px;

        justify-content:
            flex-end;
    }


    .heading-actions .compact {
        padding:
            7px 10px;

        font-size:
            12px;
    }


    .footer {
        flex-direction:
            column;
    }


    .join {
        gap:
            16px;
    }


    .qrrow {
        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .qrrow canvas {
        align-self:
            center;

        width:
            200px;

        height:
            200px;
    }


    .header-actions {
        gap:
            8px;
    }


    .home-link {
        padding:
            9px 10px;
    }
}


[hidden] {
    display:
        none !important;
}