:root {
    color-scheme: light;
    --bg: #f5f7fa;
    --surface: #ffffff;
    --ink: #172033;
    --muted: #617089;
    --line: #d9e0ea;
    --primary: #0f766e;
    --primary-strong: #0b5f59;
    --accent: #c2410c;
    --danger: #b42318;
    --shadow: 0 20px 60px rgba(23, 32, 51, 0.12);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--ink);
    background: var(--bg);
}

a {
    color: var(--primary);
}

.account-body {
    min-height: 100vh;
    background:
        linear-gradient(135deg, rgba(15, 118, 110, 0.12), rgba(194, 65, 12, 0.08)),
        var(--bg);
}

.account-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.account-panel {
    width: min(100%, 420px);
    padding: 32px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 24px;
    border-radius: 8px;
    background: var(--primary);
    color: #ffffff;
    font-weight: 700;
}

h1 {
    margin: 0 0 8px;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: 0;
}

.muted {
    margin: 0 0 24px;
    color: var(--muted);
    line-height: 1.5;
}

.form-stack {
    display: grid;
    gap: 10px;
}

label {
    font-weight: 700;
    font-size: 14px;
}

input[type="text"],
input[type="password"] {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #ffffff;
    color: var(--ink);
    font: inherit;
}

input:focus {
    outline: 3px solid rgba(15, 118, 110, 0.18);
    border-color: var(--primary);
}

.checkbox-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 10px;
    font-weight: 400;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 6px;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.button-primary {
    background: var(--primary);
    color: #ffffff;
}

.button-primary:hover {
    background: var(--primary-strong);
}

.button-secondary {
    background: #ffffff;
    color: var(--primary);
    border-color: var(--line);
}

.validation-summary,
.field-validation {
    color: var(--danger);
    font-size: 14px;
}

.validation-summary ul {
    margin: 0 0 8px;
    padding-left: 20px;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 64px;
    padding: 0 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.topbar-brand {
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
}

.logout-form {
    margin: 0;
}

.page-shell {
    width: min(100%, 960px);
    margin: 0 auto;
    padding: 32px 24px;
}

.dashboard {
    display: grid;
    gap: 24px;
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.eyebrow {
    margin: 0 0 8px;
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}

.session-list {
    display: grid;
    gap: 12px;
    margin: 0;
}

.session-list div {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
}

.session-list dt {
    color: var(--muted);
    font-weight: 700;
}

.session-list dd {
    margin: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 560px) {
    .account-panel,
    .dashboard {
        padding: 22px;
    }

    .topbar {
        align-items: flex-start;
        flex-direction: column;
        padding: 16px;
    }

    .session-list div {
        grid-template-columns: 1fr;
    }
}

/* OtoArena login experience */
.account-body {
    background: #f7f8fb;
    font-family: Inter, Arial, Helvetica, sans-serif;
}

.account-shell {
    padding: 28px 16px;
}

.account-panel {
    width: min(100%, 430px);
    padding: 36px 31px 31px;
    border: 1px solid #e0e5ed;
    border-radius: 10px;
    box-shadow: 0 5px 22px rgba(26, 34, 50, .07);
}

.login-page { display: block; }
.login-home-link { display: inline-flex; align-items: center; gap: 6px; margin: -8px 0 22px; color: #526077; font-size: 12px; font-weight: 600; text-decoration: none; }
.login-home-link:hover { color: var(--brand-primary); text-decoration: underline; }
.login-home-link:focus-visible { border-radius: 4px; outline: 2px solid var(--brand-primary); outline-offset: 3px; }
.login-home-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.login-brand { display: flex; justify-content: center; align-items: center; margin: 0 0 30px; padding: 0; }
.login-brand a { display: block; }
.login-brand img { display: block; width: min(226px, 82%); max-height: 72px; object-fit: contain; }
.login-heading { margin: 0 0 27px; }
.login-heading h1 { margin: 0 0 7px; color: #141e30; font-family: "Hanken Grotesk", Inter, sans-serif; font-size: 27px; font-weight: 800; letter-spacing: -.03em; }
.login-heading p { margin: 0; color: #637084; font-size: 13px; line-height: 1.5; }
.login-form { display: grid; gap: 22px; }
.login-form .validation-summary { margin: -7px 0 -4px; }
.login-field { display: grid; gap: 8px; }
.login-field > label { color: #513541; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.login-input-wrap { position: relative; }
.login-input-wrap input { min-height: 50px; padding: 12px 44px 12px 40px; border: 1px solid #e8bdcd; border-radius: 7px; background: #fbfcfe; color: #26344a; font-size: 14px; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.login-input-wrap input::placeholder { color: #748197; opacity: 1; }
.login-input-wrap input:focus { border-color: var(--brand-primary); background: #fff; outline: 0; box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .11); }
.login-input-icon { position: absolute; top: 50%; left: 12px; width: 18px; height: 18px; fill: none; stroke: #6e5361; stroke-width: 1.7; transform: translateY(-50%); pointer-events: none; }
.password-toggle { position: absolute; top: 50%; right: 9px; display: grid; width: 31px; height: 31px; place-items: center; padding: 0; border: 0; color: #8b274f; background: transparent; transform: translateY(-50%); cursor: pointer; }
.password-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.login-remember { display: flex; align-items: center; gap: 9px; margin: -1px 0 0; color: #627084; font-size: 12px; font-weight: 400; cursor: pointer; }
.login-remember input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand-primary); }
.login-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; margin-top: -1px; border: 0; border-radius: 7px; color: #fff; background: var(--brand-primary); box-shadow: 0 7px 14px rgba(var(--brand-rgb), .18); font-family: "Hanken Grotesk", Inter, sans-serif; font-size: 18px; font-weight: 800; cursor: pointer; transition: background .16s ease, transform .16s ease, box-shadow .16s ease; }
.login-submit:hover { background: var(--brand-primary-hover); box-shadow: 0 9px 18px rgba(var(--brand-rgb), .26); }
.login-submit:active { transform: translateY(1px); }
.login-submit svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.login-help { display: grid; gap: 16px; margin-top: 3px; text-align: center; }
.login-help > a, .login-help p a { color: var(--brand-primary); font-size: 12px; font-weight: 700; text-decoration: none; }
.login-help > a:hover, .login-help p a:hover { text-decoration: underline; }
.login-help p { margin: 0; padding-top: 20px; border-top: 1px solid #ead9df; color: #617084; font-size: 12px; }
.field-validation { min-height: 14px; color: #b42347; font-size: 11px; }

@media (max-width: 420px) {
    .account-panel { padding: 29px 23px 25px; }
    .login-brand { margin-bottom: 25px; }
}

/* Public corporate membership application */
.registration-account-page.account-body { background: #fff; }
.registration-account-page .account-shell { display: block; min-height: 100vh; padding: 48px 24px 72px; }
.registration-account-page .account-panel { width: min(100%, 860px); margin: 0 auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.registration-flow { width: 100%; }
.registration-back { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 30px; color: #465369; font-size: 16px; text-decoration: none; }
.registration-back span { font-size: 25px; line-height: 1; }
.registration-choice-step { max-width: 670px; margin: 0 auto; padding-top: 2px; }
.registration-choice-step h1,
.registration-option-step h1,
.registration-form-heading h1,
.registration-complete h1 { margin: 0; color: #080e18; font-family: "Hanken Grotesk", Inter, sans-serif; font-size: 27px; line-height: 1.2; font-weight: 800; letter-spacing: -.035em; }
.registration-choice-step h1 { margin-bottom: 34px; text-align: center; }
.registration-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.registration-choice-card { display: grid; gap: 11px; min-height: 152px; padding: 34px 32px; border: 2px solid #d4dae4; border-radius: 8px; color: #101827; text-decoration: none; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.registration-choice-card:hover { border-color: var(--brand-primary); box-shadow: 0 10px 24px rgba(var(--brand-rgb), .09); transform: translateY(-2px); }
.registration-choice-card strong { font-size: 20px; font-weight: 800; letter-spacing: -.025em; }
.registration-choice-card span { color: #46536a; font-size: 16px; line-height: 1.45; }
.registration-login-link { margin: 36px 0 0; color: #364257; text-align: center; font-size: 14px; }
.registration-login-link a, .registration-consents a { color: var(--brand-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.registration-option-step { max-width: 672px; margin: 0 auto; }
.registration-option-step h1 { margin: 4px 0 33px; text-align: center; }
.registration-option-list { display: grid; gap: 16px; }
.registration-option { display: flex; align-items: center; min-height: 88px; padding: 25px; border: 2px solid #d4dae4; border-radius: 8px; color: #0c1524; font-size: 19px; font-weight: 800; letter-spacing: -.02em; text-decoration: none; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.registration-option:hover { border-color: var(--brand-primary); background: var(--brand-soft); box-shadow: 0 8px 20px rgba(var(--brand-rgb), .08); }
.registration-info-card { padding: 28px; border: 1px solid #e2e6ed; border-radius: 9px; background: #f8f9fb; }
.registration-info-card strong { font-size: 18px; }
.registration-info-card p { margin: 8px 0 0; color: #5c687b; }
.taxpayer-registration-flow { max-width: 720px; margin: 0 auto; }
.taxpayer-registration-flow .taxpayer-registration-form { max-width: 610px; }
.registration-info-card-success { margin: 0 0 22px; padding: 14px 17px; border-color: #a9e8c1; background: #eafbef; color: #176c3d; font-size: 13px; line-height: 1.5; text-align: center; }
.registration-form-step { max-width: 680px; margin: 0 auto; padding: 34px; border: 1px solid #eef0f4; border-radius: 9px; background: #fff; box-shadow: 0 8px 25px rgba(20, 30, 48, .055); }
.registration-form-heading { margin-bottom: 27px; }
.registration-form-heading > span { display: block; margin-bottom: 9px; color: var(--brand-primary); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.registration-form-heading h1 { font-size: 25px; }
.registration-form-heading-centered h1 { text-align: center; }
.registration-form-heading p { margin: 8px 0 0; color: #657187; font-size: 14px; }
.registration-form { display: grid; gap: 18px; }
.registration-field { display: grid; gap: 7px; }
.registration-field > label { color: #202d43; font-size: 14px; font-weight: 700; }
.registration-field label em { color: #d81d4d; font-style: normal; }
.registration-field input, .registration-field select, .registration-phone-field { width: 100%; min-height: 46px; border: 1px solid #d7dee8; border-radius: 7px; background: #fff; color: #26344a; font: inherit; font-size: 14px; }
.registration-field input, .registration-field select { padding: 11px 14px; }
.registration-field select { cursor: pointer; }
.registration-field input:focus, .registration-field select:focus, .registration-phone-field:focus-within { border-color: var(--brand-primary); outline: 0; box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .10); }
.registration-two-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; }
.registration-phone-field { display: flex; align-items: center; overflow: hidden; }
.registration-phone-field span { display: flex; align-items: center; align-self: stretch; padding: 0 13px; border-right: 1px solid #e1e5ec; color: #28364d; font-weight: 700; }
.registration-phone-field input { min-width: 0; border: 0; border-radius: 0; box-shadow: none !important; }
.registration-field input.is-invalid, .registration-field select.is-invalid, .registration-phone-field.is-invalid { border-color: #d92d4c; box-shadow: 0 0 0 3px rgba(217, 45, 76, .1); }
.registration-phone-field.is-invalid input { border-color: transparent; }
.field-validation-client { min-height: auto; margin: -2px 0 0; }
.registration-password-field { position: relative; }
.registration-password-field input { padding-right: 46px; }
.password-visibility-toggle { position: absolute; top: 50%; right: 1px; display: grid; width: 42px; height: calc(100% - 2px); place-items: center; transform: translateY(-50%); border: 0; border-radius: 0 6px 6px 0; background: transparent; color: #71819a; cursor: pointer; }
.password-visibility-toggle:hover, .password-visibility-toggle:focus { color: var(--brand-primary); outline: 0; }
.registration-summary-row { display: grid; grid-template-columns: max-content 1fr max-content 1fr; gap: 8px 12px; padding: 13px 15px; border-radius: 7px; background: #fbf3f8; color: #637084; font-size: 13px; }
.registration-summary-row strong { color: #243148; text-align: right; }
.registration-consents { display: grid; gap: 7px; padding-top: 1px; }
.registration-consents label { display: flex; align-items: flex-start; gap: 10px; color: #354157; font-size: 13px; font-weight: 400; line-height: 1.45; cursor: pointer; }
.registration-consents input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--brand-primary); }
.registration-submit { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 49px; margin-top: 4px; padding: 11px 21px; border: 0; border-radius: 7px; background: var(--brand-primary); color: #fff; font: inherit; font-size: 16px; font-weight: 800; text-decoration: none; cursor: pointer; transition: background .16s ease, box-shadow .16s ease; }
.registration-submit:hover { background: var(--brand-primary-hover); box-shadow: 0 8px 18px rgba(var(--brand-rgb), .22); }
/* Başvuru alındı ekranı: marka renginde üst şerit, arkada yumuşak parıltı,
   çizilerek beliren onay işareti ve "sonraki adımlar" zaman çizelgesi. */
.registration-complete { position: relative; max-width: 560px; margin: 56px auto 0; padding: 46px 40px 34px; overflow: hidden; border: 1px solid #eceef4; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(20, 30, 48, .04), 0 18px 48px rgba(20, 30, 48, .08); text-align: center; }
.registration-complete::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, #f76fb8 0%, var(--brand-primary) 100%); }
.registration-complete::after { content: ""; position: absolute; top: -150px; left: 50%; width: 460px; height: 300px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--brand-rgb), .11), transparent); pointer-events: none; }
.registration-complete > * { position: relative; z-index: 1; }
.registration-complete-badge { display: grid; width: 78px; height: 78px; margin: 0 auto 20px; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #f76fb8 0%, var(--brand-primary) 100%); box-shadow: 0 0 0 10px rgba(var(--brand-rgb), .10), 0 14px 30px rgba(var(--brand-rgb), .32); animation: reg-complete-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.registration-complete-badge svg { width: 42px; height: 42px; fill: none; stroke: #fff; stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; stroke-dashoffset: 36; animation: reg-complete-check .42s ease-out .34s forwards; }
.registration-complete-eyebrow { display: inline-block; margin-bottom: 10px; padding: 5px 12px; border-radius: 99px; background: #e8f8ef; color: #17834b; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.registration-complete h1 { font-size: 31px; }
.registration-complete .registration-complete-lead { max-width: 420px; margin: 12px auto 0; color: #526077; font-size: 16px; line-height: 1.6; }
.registration-complete .registration-complete-mail { display: flex; align-items: center; gap: 12px; margin: 22px 0 0; padding: 12px 15px; border: 1px solid #f9d3e8; border-radius: 12px; background: #fff6fb; color: #5b4452; font-size: 13.5px; line-height: 1.5; text-align: left; }
.registration-complete-mail svg { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: var(--brand-primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.registration-complete-mail strong { color: #101827; overflow-wrap: anywhere; }
.registration-complete-steps { margin: 24px 0 0; padding: 16px 20px; border: 1px solid #eef0f5; border-radius: 14px; background: #fafbfd; list-style: none; text-align: left; }
.registration-complete-steps li { position: relative; display: grid; grid-template-columns: 30px 1fr; align-items: start; gap: 14px; padding: 9px 0; }
.registration-complete-steps li:not(:last-child)::after { content: ""; position: absolute; top: 42px; bottom: -8px; left: 14px; width: 2px; border-radius: 2px; background: #e3e7ef; }
.registration-complete-steps li.is-done:not(:last-child)::after { background: var(--brand-primary); }
.registration-complete-steps__marker { display: grid; width: 30px; height: 30px; place-items: center; border: 2px solid #dde2ea; border-radius: 50%; background: #fff; color: #97a1b2; font-size: 12.5px; font-weight: 800; }
.registration-complete-steps li.is-done .registration-complete-steps__marker { border-color: var(--brand-primary); background: var(--brand-primary); color: #fff; }
.registration-complete-steps li.is-current .registration-complete-steps__marker { border-color: var(--brand-primary); color: var(--brand-primary); box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .12); }
.registration-complete-steps__marker svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.registration-complete-steps strong { display: block; padding-top: 4px; color: #101827; font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; }
.registration-complete-steps small { display: block; margin-top: 2px; color: #6b778b; font-size: 13px; line-height: 1.45; }
.registration-complete-actions { display: grid; justify-items: center; gap: 14px; margin-top: 26px; }
.registration-complete-button { width: 100%; }
.registration-complete-link { color: #465369; font-size: 14px; font-weight: 600; text-decoration: none; }
.registration-complete-link:hover { color: var(--brand-primary); }
@keyframes reg-complete-pop { from { opacity: 0; transform: scale(.6); } }
@keyframes reg-complete-check { to { stroke-dashoffset: 0; } }
@media (max-width: 700px) {
    .registration-complete { margin-top: 20px; padding: 40px 20px 26px; border-radius: 16px; }
    .registration-complete h1 { font-size: 26px; }
    .registration-complete-steps { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .registration-complete-badge { animation: none; }
    .registration-complete-badge svg { animation: none; stroke-dashoffset: 0; }
}
.registration-otp-dialog { width: min(100% - 32px, 430px); padding: 0; border: 0; border-radius: 12px; box-shadow: 0 20px 56px rgba(16, 24, 39, .28); }
.registration-otp-dialog::backdrop { background: rgba(10, 18, 32, .58); }
.registration-otp-form { position: relative; display: grid; gap: 17px; padding: 34px; }
.registration-otp-form h2 { margin: 0; color: #101827; font-family: "Hanken Grotesk", Inter, sans-serif; font-size: 23px; font-weight: 800; letter-spacing: -.025em; }
.registration-otp-form > p { margin: -8px 0 0; color: #657187; font-size: 14px; line-height: 1.5; }
.registration-submission-dialog .registration-otp-form { gap: 14px; text-align: center; }
.registration-submission-dialog-icon { display: grid; width: 44px; height: 44px; margin: 0 auto 2px; place-items: center; border-radius: 50%; color: #b42318; background: #fff0f0; font-size: 24px; font-weight: 900; }
.registration-submission-dialog-message { color: #5f3140; font-size: 14px; line-height: 1.55; }
.registration-submission-dialog-message p { margin: 0; }
.registration-submission-dialog-message p + p { margin-top: 6px; }
.registration-otp-form .registration-field > span { color: #202d43; font-size: 14px; font-weight: 700; }
.registration-otp-form .registration-field input { letter-spacing: .22em; text-align: center; font-size: 21px; font-weight: 800; }
.registration-otp-close { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%; color: #5b6678; background: transparent; font-size: 28px; line-height: 1; cursor: pointer; }
.registration-otp-close:hover { background: #f2f4f7; color: #111827; }
.registration-otp-timer { min-height: 20px; margin: -7px 0 0 !important; color: #667085 !important; font-size: 13px !important; text-align: center; }
.registration-otp-resend { border: 0; color: var(--brand-primary); background: transparent; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.registration-otp-resend:disabled, .registration-submit:disabled { opacity: .56; cursor: not-allowed; box-shadow: none; }
.registration-otosor-option { text-align: center; }
.registration-otosor-option__success { margin: 4px 0 18px; padding: 10px 12px; border: 1px solid #a8e2bd; border-radius: 7px; background: #eefaf1; color: #267642; font-size: 13px; font-weight: 700; }
.registration-otosor-option h2 { margin-bottom: 8px; }
.registration-otosor-option p { margin: 0 0 20px; text-align: left; }
.registration-otosor-option__button { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0 0 14px; padding: 14px; border-radius: 10px; background: #102d70; color: #fff; font-weight: 800; line-height: 1.3; text-decoration: none; }
.registration-otosor-option__button:hover { background: #0a2053; color: #fff; }
.registration-otosor-option__button > span:last-child > span { color: #f14b9e; }
.registration-otosor-option__logo { display: inline-grid; width: 22px; height: 22px; place-items: center; border: 2px solid #f14b9e; border-radius: 50%; }
.registration-otosor-option__logo::before, .registration-otosor-option__logo::after, .registration-otosor-option__logo i { display: block; grid-area: 1 / 1; content: ""; border-radius: 50%; }
.registration-otosor-option__logo::before { width: 11px; height: 11px; border: 2px solid #fff; }
.registration-otosor-option__logo::after { width: 4px; height: 4px; background: #f14b9e; }
.registration-otosor-option__logo i { width: 2px; height: 11px; background: #fff; transform: rotate(-38deg) translateY(7px); }
.registration-otp-success { padding: 10px 12px; border: 1px solid #a9e8c1; border-radius: 7px; background: #eafbef; color: #176c3d; font-size: 13px; line-height: 1.4; }

@media (max-width: 700px) {
    .registration-account-page .account-shell { padding: 28px 16px 48px; }
    .registration-back { margin-bottom: 25px; font-size: 15px; }
    .registration-choice-grid, .registration-two-columns { grid-template-columns: 1fr; }
    .registration-choice-card { min-height: 124px; padding: 27px 24px; }
    .registration-choice-card strong { font-size: 18px; }
    .registration-choice-card span { font-size: 15px; }
    .registration-option { min-height: 76px; padding: 21px; font-size: 17px; }
    .registration-form-step { padding: 25px 20px; }
    .registration-summary-row { grid-template-columns: max-content 1fr; }
    .registration-summary-row strong { text-align: right; }
    .registration-otp-form { padding: 29px 22px; }
}

/* ── Registration form refinements ─────────────────────────────────── */
/* Validation slots reserved 14px on every field even when empty, which
   is what made the form so tall. Collapse them until they carry text. */
.registration-form .field-validation { min-height: 0; margin: 0; line-height: 1.35; }
.registration-form .field-validation:empty,
.registration-form .field-validation[hidden] { display: none; }

.registration-form-step { padding: 30px 32px; border-radius: 14px; border-color: #e9ecf2; }
.registration-form-heading { margin-bottom: 22px; }
.registration-form-heading h1 { font-size: 23px; letter-spacing: -.02em; }
.registration-form-heading p { margin-top: 6px; font-size: 13px; }
.registration-form { gap: 14px; }
.registration-two-columns { gap: 14px; }
.registration-field { gap: 5px; }
.registration-field > label { font-size: 12.5px; font-weight: 600; color: #3a4459; letter-spacing: .005em; }
.registration-field label em { margin-left: 2px; }

/* Inputs: softer resting state, clear focus */
.registration-field input,
.registration-field select,
.registration-phone-field {
    min-height: 44px;
    border-color: #e2e6ee;
    border-radius: 10px;
    background: #fafbfc;
    font-size: 13.5px;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.registration-field input, .registration-field select { padding: 10px 13px; }
.registration-field input::placeholder { color: #a4adbd; }
.registration-field input:hover, .registration-field select:hover, .registration-phone-field:hover { border-color: #d2d8e3; background: #f6f7f9; }
.registration-field input:focus,
.registration-field select:focus,
.registration-phone-field:focus-within {
    background: #fff;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .09);
}
.registration-field select {
    appearance: none; -webkit-appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236b7688' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 17px 17px;
}
.registration-phone-field span { padding: 0 12px; border-right-color: #e6eaf1; color: #4a5568; font-size: 13.5px; }
.registration-phone-field input { background: transparent; }
.password-visibility-toggle { color: #9aa3b2; transition: color .18s ease; }
.password-visibility-toggle:hover { color: var(--brand-primary); }

/* ── Consents ──────────────────────────────────────────────────────── */
.registration-consents {
    display: grid; gap: 8px;
    margin-top: 4px; padding: 14px;
    border: 1px solid #eceff4; border-radius: 12px;
    background: #fafbfc;
}
.registration-consents > .field-validation { margin: -4px 0 0; padding-left: 34px; }
.consent-item {
    position: relative;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    padding: 10px 12px;
    border: 1px solid #e7eaf1;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.consent-item:hover { border-color: #d9dee8; }
.consent-item:has(input:checked) { border-color: var(--brand-border); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .06); }
.consent-item:has(input:focus-visible) { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12); }
/* Native box is kept for a11y and form posting, drawn by .consent-box */
.consent-item input {
    position: absolute; width: 1px; height: 1px; margin: 0;
    padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.consent-box {
    position: relative; top: 1px;
    width: 20px; height: 20px; flex: 0 0 20px;
    border: 1.6px solid #cbd2dd; border-radius: 6px;
    background: #fff;
    transition: border-color .18s ease, background .18s ease;
}
.consent-box::after {
    position: absolute; left: 6px; top: 2px;
    width: 5px; height: 10px;
    border: solid #fff; border-width: 0 2px 2px 0;
    content: "";
    transform: rotate(45deg) scale(.4);
    opacity: 0;
    transition: opacity .16s ease, transform .16s ease;
}
.consent-item:hover .consent-box { border-color: #b3bcca; }
.consent-item input:checked + .consent-box { border-color: var(--brand-primary); background: var(--brand-primary); }
.consent-item input:checked + .consent-box::after { opacity: 1; transform: rotate(45deg) scale(1); }
.consent-text { display: grid; gap: 2px; min-width: 0; }
.consent-text strong { color: #202d43; font-size: 12.5px; font-weight: 700; letter-spacing: -.005em; }
.consent-text small { color: #6b7688; font-size: 11.5px; font-weight: 400; line-height: 1.45; }
.consent-text a { color: var(--brand-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.consent-item--robot { background: var(--brand-soft); border-color: var(--brand-border); }
.consent-item--robot .consent-text strong { display: inline-flex; align-items: center; gap: 6px; }

.registration-submit { min-height: 47px; margin-top: 6px; border-radius: 10px; font-size: 15px; }

@media (max-width: 560px) {
    .registration-form-step { padding: 24px 18px; }
    .consent-item { padding: 9px 10px; gap: 9px; }
}

/* reCAPTCHA v2 checkbox widget */
.registration-captcha { display: grid; gap: 5px; justify-items: center; margin-top: 2px; }
.registration-captcha .g-recaptcha { display: inline-block; }
/* The widget is a fixed 304px iframe; scale it down rather than let it overflow. */
@media (max-width: 360px) {
    .registration-captcha .g-recaptcha { transform: scale(.88); transform-origin: center top; }
}

/* ── Login / password pages: same design language as the registration forms ── */
.login-form .field-validation { min-height: 0; margin: 0; line-height: 1.35; font-size: 11px; }
.login-form .field-validation:empty,
.login-form .field-validation[hidden] { display: none; }

.login-form { gap: 16px; }
.login-field { gap: 5px; }
.login-field > label {
    color: #3a4459;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .005em;
    text-transform: none;
}
.login-input-wrap input {
    min-height: 46px;
    padding: 11px 44px 11px 40px;
    border: 1px solid #e2e6ee;
    border-radius: 10px;
    background: #fafbfc;
    font-size: 13.5px;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.login-input-wrap input::placeholder { color: #a4adbd; }
.login-input-wrap input:hover { border-color: #d2d8e3; background: #f6f7f9; }
.login-input-wrap input:focus { border-color: var(--brand-primary); background: #fff; box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .09); }
/* Fields without a leading icon (ForgotPassword / ResetPassword) */
.login-input-wrap:not(:has(.login-input-icon)) input { padding-left: 13px; }
.login-input-wrap:not(:has(.password-toggle)) input { padding-right: 13px; }
.login-input-icon { stroke: #8b93a3; }
.login-input-wrap input:focus ~ .login-input-icon { stroke: var(--brand-primary); }
.password-toggle { color: #9aa3b2; transition: color .18s ease; }
.password-toggle:hover { color: var(--brand-primary); }

/* Remember-me reuses the custom consent checkbox treatment */
.login-remember { gap: 10px; font-size: 12.5px; color: #4a5568; }
.login-remember input {
    appearance: none; -webkit-appearance: none;
    position: relative;
    width: 19px; height: 19px; flex: 0 0 19px;
    border: 1.6px solid #cbd2dd; border-radius: 6px;
    background: #fff; cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}
.login-remember input::after {
    position: absolute; left: 6px; top: 2px;
    width: 5px; height: 9px;
    border: solid #fff; border-width: 0 2px 2px 0;
    content: "";
    transform: rotate(45deg) scale(.4);
    opacity: 0;
    transition: opacity .16s ease, transform .16s ease;
}
.login-remember:hover input { border-color: #b3bcca; }
.login-remember input:checked { border-color: var(--brand-primary); background: var(--brand-primary); }
.login-remember input:checked::after { opacity: 1; transform: rotate(45deg) scale(1); }
.login-remember input:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12); }

.login-submit { min-height: 47px; border-radius: 10px; font-size: 16px; }
.login-help { gap: 14px; }
.login-help p { padding-top: 18px; border-top-color: #eceff4; }

/* ── Activation page: align inputs and button with the same tokens ── */
.activation-field > label { color: #3a4459; font-size: 12.5px; font-weight: 600; letter-spacing: .005em; text-transform: none; }
.activation-input-wrap input {
    min-height: 46px;
    border: 1px solid #e2e6ee;
    border-radius: 10px;
    background: #fafbfc;
    font-size: 13.5px;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.activation-input-wrap input::placeholder { color: #a4adbd; }
.activation-input-wrap input:hover { border-color: #d2d8e3; background: #f6f7f9; }
.activation-input-wrap input:focus { border-color: var(--brand-primary); background: #fff; outline: 0; box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .09); }
.activation-submit { min-height: 47px; border-radius: 10px; }
.activation-form .field-validation { min-height: 0; margin: 0; line-height: 1.35; font-size: 11px; }
.activation-form .field-validation:empty,
.activation-form .field-validation[hidden] { display: none; }

/* ── Password recovery: Şifremi Unuttum / Şifre Yenile ───────────────── */
/* Aynı giriş kartı; üstte marka şeridi, adım göstergesi ve sonuç ekranları. */
.recovery-account .account-panel {
    position: relative;
    width: min(100%, 452px);
    padding: 34px 34px 28px;
    overflow: hidden;
    border-color: #e6eaf1;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(20, 30, 48, .04), 0 18px 48px rgba(20, 30, 48, .08);
}
.recovery-account .account-panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, #f76fb8 0%, var(--brand-primary) 100%); }
.recovery-page .login-brand { margin-bottom: 24px; text-decoration: none; }
.recovery-page .login-brand img { width: min(196px, 70%); }
.recovery-page .login-input-wrap input { width: 100%; box-sizing: border-box; }
.recovery-page .login-submit:disabled { opacity: .72; cursor: progress; box-shadow: none; }

.recovery-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 26px; padding: 0; list-style: none; }
.recovery-steps__item { position: relative; display: grid; justify-items: center; gap: 7px; color: #98a2b3; font-size: 11.5px; font-weight: 600; text-align: center; }
/* Bağlantı çizgisi: önceki adımın merkezinden bu adımın merkezine. */
.recovery-steps__item + .recovery-steps__item::before { content: ""; position: absolute; top: 13px; right: 50%; width: 100%; height: 2px; background: #e3e7ef; }
.recovery-steps__item.is-done::before, .recovery-steps__item.is-current::before { background: var(--brand-primary); }
.recovery-steps__marker { position: relative; z-index: 1; display: grid; width: 28px; height: 28px; place-items: center; box-sizing: border-box; border: 2px solid #dde2ea; border-radius: 50%; background: #fff; color: #98a2b3; font-size: 12px; font-weight: 800; }
.recovery-steps__marker svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.recovery-steps__item.is-done { color: #475467; }
.recovery-steps__item.is-done .recovery-steps__marker { border-color: var(--brand-primary); background: var(--brand-primary); color: #fff; }
.recovery-steps__item.is-current { color: #101827; }
.recovery-steps__item.is-current .recovery-steps__marker { border-color: var(--brand-primary); color: var(--brand-primary); box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .12); }

.recovery-heading { margin-bottom: 22px; }
.recovery-heading h1 { font-size: 25px; line-height: 1.2; }
.recovery-heading p { font-size: 13.5px; line-height: 1.55; }
.recovery-heading p strong { color: #101827; font-weight: 700; overflow-wrap: anywhere; }

.recovery-security { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 0; padding: 12px 14px; border: 1px solid #eef0f5; border-radius: 12px; background: #fafbfd; color: #5b6678; font-size: 12.5px; line-height: 1.5; }
.recovery-security svg, .recovery-notes svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: var(--brand-primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.recovery-security strong, .recovery-notes strong { color: #1f2a3d; }
.recovery-help { margin-top: 20px; }
.recovery-help > a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; }
.recovery-help > a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.recovery-result { display: grid; justify-items: center; text-align: center; }
.recovery-result__badge { display: grid; width: 64px; height: 64px; margin: 0 0 18px; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #f76fb8 0%, var(--brand-primary) 100%); box-shadow: 0 0 0 8px rgba(var(--brand-rgb), .10), 0 12px 26px rgba(var(--brand-rgb), .28); color: #fff; animation: reg-complete-pop .45s cubic-bezier(.34, 1.56, .64, 1) both; }
.recovery-result__badge svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.recovery-result--warning .recovery-result__badge { background: linear-gradient(145deg, #fbbf5a 0%, #e8900c 100%); box-shadow: 0 0 0 8px rgba(232, 144, 12, .12), 0 12px 26px rgba(232, 144, 12, .26); }
.recovery-result h1 { margin: 0; color: #101827; font-family: "Hanken Grotesk", Inter, sans-serif; font-size: 25px; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; }
.recovery-result__lead { max-width: 350px; margin: 9px 0 0; color: #5b6678; font-size: 14px; line-height: 1.55; }
.recovery-mail-chip { max-width: 100%; margin: 16px 0 0; padding: 8px 16px; box-sizing: border-box; border: 1px solid #f9d3e8; border-radius: 999px; background: #fff6fb; color: #101827; font-size: 13.5px; font-weight: 700; overflow-wrap: anywhere; }
.recovery-notes { display: grid; gap: 10px; width: 100%; margin: 20px 0 0; padding: 14px 16px; box-sizing: border-box; border: 1px solid #eef0f5; border-radius: 12px; background: #fafbfd; list-style: none; text-align: left; }
.recovery-notes li { display: flex; align-items: flex-start; gap: 10px; color: #5b6678; font-size: 12.5px; line-height: 1.5; }
.recovery-primary { width: 100%; margin-top: 22px; box-sizing: border-box; text-decoration: none; }
.recovery-resend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 16px 0 0; color: #5b6678; font-size: 13px; }
.recovery-resend button { padding: 0; border: 0; background: transparent; color: var(--brand-primary); font: inherit; font-weight: 700; cursor: pointer; }
.recovery-resend button:hover:not(:disabled) { text-decoration: underline; }
.recovery-resend button:disabled { color: #98a2b3; cursor: default; }
.recovery-resend__timer { color: #98a2b3; font-variant-numeric: tabular-nums; }
.recovery-resend__timer:empty { display: none; }
.recovery-link { margin-top: 12px; color: #465369; font-size: 13px; font-weight: 600; text-decoration: none; }
.recovery-link:hover { color: var(--brand-primary); }

.recovery-strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 4px; }
.recovery-strength span { height: 4px; border-radius: 99px; background: #e8ebf1; transition: background .2s ease; }
.recovery-strength[data-strength="1"] span:nth-child(-n+1) { background: #e5484d; }
.recovery-strength[data-strength="2"] span:nth-child(-n+2) { background: #f2994a; }
.recovery-strength[data-strength="3"] span:nth-child(-n+3) { background: #3fb67b; }
.recovery-strength[data-strength="4"] span { background: #15803d; }
.recovery-strength__label { color: #68738a; font-size: 11.5px; font-weight: 600; }
.recovery-strength__label:empty { display: none; }
.recovery-rules { display: grid; gap: 6px; margin: -2px 0 2px; padding: 0; list-style: none; }
.recovery-rules li { display: flex; align-items: center; gap: 8px; color: #68738a; font-size: 12.5px; transition: color .18s ease; }
.recovery-rules li::before { content: ""; width: 16px; height: 16px; flex: 0 0 16px; box-sizing: border-box; border: 1.5px solid #cbd2dd; border-radius: 50%; transition: background-color .18s ease, border-color .18s ease; }
.recovery-rules li.is-met { color: #15803d; }
.recovery-rules li.is-met::before { border-color: #15803d; background: #15803d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.4 8.3 13.8 15 6.6'/%3E%3C/svg%3E") center / 11px no-repeat; }

.login-notice { margin: -8px 0 18px; }
.login-notice svg { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 480px) {
    .recovery-account .account-panel { padding: 28px 20px 22px; border-radius: 14px; }
    .recovery-steps__label { font-size: 11px; }
    .recovery-heading h1, .recovery-result h1 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .recovery-result__badge { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   Shared application shell (_Layout)
   ══════════════════════════════════════════════════════════════════════ */
.app-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--surface-page);
    color: var(--text-primary);
    font-family: Inter, -apple-system, "Segoe UI", Arial, sans-serif;
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
}
.app-body a { color: inherit; text-decoration: none; }
/* Wrapped in :where() so this stays a zero-specificity reset. As a plain
   ".app-body button" rule it was (0,1,1) and outranked every component and
   utility class, silently stripping the background and border from any styled
   <button>: a primary CTA rendered white-on-transparent while the same styles
   on an <a> looked correct. Unstyled buttons still get the reset. */
:where(.app-body button) { font: inherit; border: 0; background: none; cursor: pointer; }

.skip-link {
    position: absolute; top: -60px; left: 12px; z-index: 200;
    padding: 10px 16px; border-radius: 0 0 10px 10px;
    background: var(--brand-primary); color: #fff; font-size: var(--fs-sm); font-weight: 700;
    transition: top var(--dur-base) var(--ease);
}
.skip-link:focus { top: 0; }

/* ── Header ────────────────────────────────────────────────────────── */
.app-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-default);
    transition: box-shadow var(--dur-base) var(--ease);
}
/* Toggled from _Layout once the page scrolls, so the sticky bar detaches
   from the content instead of floating over it edge-to-edge. */
.app-header.is-scrolled { box-shadow: 0 4px 16px rgba(13, 21, 38, .07); }

/* Header, footer, page shell and every home-page section resolve to the
   same centred column, so the logo, the nav and each section heading share
   one left edge. Width comes from .site-container's tokens. */
.app-header__inner {
    display: flex; align-items: center; gap: var(--space-6);
    width: 100%; max-width: calc(var(--container-max) + 2 * var(--container-gutter)); margin-inline: auto;
    min-height: 74px; padding: var(--space-2) var(--container-gutter);
}
.app-brand { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.app-brand img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 67px;
    object-fit: contain;
}
/* Logo remains clear without competing with the menu button on narrow screens. */
@media (max-width: 640px) {
    .app-header__inner { min-height: 64px; padding-block: var(--space-1); }
    .app-brand { max-width: calc(100vw - 100px); }
    .app-brand img { height: clamp(50px, 14vw, 58px); }
}

/* Menü dar masaüstünde taşarsa kesilmek yerine yatay kaydırılır
   (kaydırma çubuğu gizli). */
.app-nav { display: none; align-items: center; gap: var(--space-1); flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.app-nav::-webkit-scrollbar { display: none; }
.app-nav > * { flex: 0 0 auto; }
/* Hesap başlıkları link değil düğme (çekmece açar) ama görünümü aynıdır. */
.app-nav a,
.app-nav .app-nav__drawer {
    position: relative;
    display: inline-flex; align-items: center;
    height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-sm);
    color: var(--text-secondary); font-size: var(--fs-body); font-weight: 500; white-space: nowrap;
    background: transparent;
    transition: color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.app-nav a:hover,
.app-nav .app-nav__drawer:hover { color: var(--text-primary); background: var(--surface-subtle); }
.app-nav .app-nav__drawer:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.app-nav__drawer-icon { margin-left: 2px; font-size: 18px; color: var(--text-muted); transition: transform var(--dur-base) var(--ease); }
.app-nav .app-nav__drawer[aria-expanded="true"] .app-nav__drawer-icon { transform: rotate(180deg); color: var(--brand-primary); }
/* Active item: dark, heavier label with a thin brand underline. */
.app-nav a.is-active,
.app-nav .app-nav__drawer.is-active { color: var(--text-primary); font-weight: 700; }
.app-nav a.is-active::after,
.app-nav .app-nav__drawer.is-active::after {
    position: absolute; left: var(--space-3); right: var(--space-3); bottom: 4px;
    height: 2px; border-radius: 2px; background: var(--brand-primary); content: "";
}
@media (min-width: 1024px) { .app-nav { display: flex; } }

.app-header__actions { display: none; align-items: center; gap: var(--space-2); margin-left: auto; }
@media (min-width: 1024px) { .app-header__actions { display: flex; } }

/* ── OtoArena × OtoSor imzalı menü öğesi ───────────────────────────────
   Tüketici araç ihalesi menüde iki markanın imzasıyla duruyor. Her iki
   kelime işareti de metin olarak çiziliyor — logo dosyasını 20px'e
   küçültmek "OtoArena" yazısını okunmaz hâle getiriyordu; metin bu ölçüde
   keskin kalıyor ve iki marka aynı optik ağırlıkta duruyor. OtoSor'un
   yuvarlak işareti başvuru ekranındaki (otosor-installment.css) çizimin
   küçültülmüş hâli.

   Menü içinde durduğu için .app-nav a kurallarını ezmesi gerekiyor;
   seçiciler bu yüzden .app-nav ile birlikte yazıldı. */
.app-nav .app-cobrand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    background: var(--surface-subtle);
    white-space: nowrap;
    transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}

/* Rozet .app-nav'ın overflow-x'i yüzünden sığmadığı genişlikte yarım kesilip
   ulaşılamaz hâle geliyor; o yüzden gizleniyor. Eşik "Mali Veriler" üst menüden
   çıkınca 1240px'ten buraya indi: en kötü durumda (giriş yapmış kullanıcı,
   150px'lik ad sınırına dayanan unvan) üç başlık 1120px'lik pencerede sığıyor,
   pay bırakılarak 1140px'ten itibaren gösteriliyor. Daha darda sayfaya
   kullanıcı menüsünden ve mobil menüden ulaşılıyor. İki satırlı tüketici
   açık artırması adı için de 1240px'ten itibaren gösterilir. */
@media (max-width: 1239px) { .app-nav .app-cobrand { display: none; } }

.app-nav .app-cobrand:hover { border-color: var(--brand-border); background: var(--surface-card); box-shadow: var(--shadow-card); }
.app-nav .app-cobrand:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

/* Aktif durum, diğer başlıklardaki alt çizgi yerine çerçeveyle veriliyor:
   hap biçimli bir öğenin altına çizgi çekmek yamalı duruyordu. */
.app-nav .app-cobrand.is-active { border-color: var(--brand-primary); background: var(--brand-soft); }
.app-nav .app-cobrand.is-active::after { display: none; }

.app-cobrand__otoarena,
.app-cobrand__otosor {
    font-family: "Hanken Grotesk", Inter, sans-serif;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
}

.app-cobrand__otoarena { color: var(--text-primary); }
.app-cobrand__otoarena > span { color: var(--brand-primary); }

.app-cobrand__x { color: var(--text-muted); font-size: 10px; font-weight: 800; }

.app-cobrand__otosor {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #0f2b56;
}



.app-cobrand__mark {
    display: inline-grid;
    width: 16px;
    height: 16px;
    place-items: center;
    border: 1.5px solid #1268b3;
    border-radius: 50%;
}

.app-cobrand__mark::before,
.app-cobrand__mark::after,
.app-cobrand__mark i {
    display: block;
    grid-area: 1 / 1;
    border-radius: 50%;
    content: "";
}

.app-cobrand__mark::before { width: 9px; height: 9px; border: 1.5px solid #d81f26; }
.app-cobrand__mark::after { width: 3.5px; height: 3.5px; background: #1268b3; }
.app-cobrand__mark i { width: 2px; height: 8px; background: #1268b3; transform: rotate(-38deg) translateY(5px); }

/* Tüketici açık artırması adı, hapın içinde OtoSOR'un sağında iki satırda
   durur. Köşeye taşan bir etiket .app-nav'ın overflow-x: auto'su yüzünden
   kırpılıyordu. Üzerinden birkaç saniyede bir hafif bir parlama geçer;
   hareket azaltma tercihinde yok. */
.app-cobrand__consumer-auction {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    min-width: 80px;
    height: 28px;
    margin-left: 2px;
    padding: 2px 8px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: linear-gradient(145deg, #f76fb8 0%, var(--brand-primary) 100%);
    box-shadow: 0 2px 6px rgba(var(--brand-rgb), .28);
    color: #fff;
    font-family: "Hanken Grotesk", Inter, sans-serif;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: .02em;
    text-align: center;
    white-space: nowrap;
}

.app-cobrand__consumer-auction > span { position: relative; z-index: 1; }

.app-cobrand__consumer-auction::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: app-cobrand-consumer-auction-shine 4s ease-in-out 1s infinite;
    content: "";
}

@keyframes app-cobrand-consumer-auction-shine {
    0%, 70% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}

/* Diğer menü öğelerindeki tek satırlı "YENİ" rozetleri bu görünümü kullanır. */
.app-cobrand__new {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 18px;
    margin-left: 2px;
    padding: 0 7px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: linear-gradient(145deg, #f76fb8 0%, var(--brand-primary) 100%);
    box-shadow: 0 2px 6px rgba(var(--brand-rgb), .28);
    color: #fff;
    font-family: "Hanken Grotesk", Inter, sans-serif;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .06em;
}

.app-cobrand__new::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%);
    transform: translateX(-120%);
    animation: app-cobrand-new-shine 4s ease-in-out 1s infinite;
    content: "";
}

@keyframes app-cobrand-new-shine {
    0%, 70% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
    .app-cobrand__consumer-auction::after,
    .app-cobrand__new::after { display: none; }
}

.app-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-md);
    font-size: var(--fs-body); font-weight: 600; white-space: nowrap;
    transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease),
                border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.app-btn:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.app-btn--ghost { border: 1px solid var(--border-default); background: var(--surface-card); }
.app-btn--ghost:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.app-btn--primary { background: var(--brand-primary); }
.app-btn--primary:hover { background: var(--brand-primary-hover); box-shadow: 0 6px 16px var(--brand-glow); }

/* Yazı rengi .app-body ile birlikte yazılıyor: yukarıdaki `.app-body a`
   kuralı (tip + sınıf) tek sınıflı buton kuralından güçlü olduğu için
   bağlantı olarak basılan butonlar rengini kapsayıcısından alıyordu —
   "Kayıt Ol" başlıktaki koyu metin rengini miras alıp magenta zeminde
   siyah görünüyordu. */
.app-body .app-btn--primary { color: #fff; }
.app-body .app-btn--ghost { color: var(--text-primary); }

/* ── Signed-in user menu ───────────────────────────────────────────── */
.app-usermenu { position: relative; }
.app-user {
    display: flex; align-items: center; gap: var(--space-2);
    height: 44px; padding: 0 var(--space-2) 0 var(--space-1);
    border: 1px solid transparent; border-radius: var(--radius-pill);
    transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.app-user:hover, .app-user[aria-expanded="true"] { background: var(--surface-subtle); border-color: var(--border-default); }
.app-user:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.app-user__avatar {
    display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center;
    border-radius: 50%; background: var(--navy); color: #fff;
    font-size: var(--fs-sm); font-weight: 700;
}
.app-user__name {
    max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--text-primary); font-size: var(--fs-sm); font-weight: 600;
}
.app-user__caret { font-size: 18px; color: var(--text-muted); transition: transform var(--dur-base) var(--ease); }
.app-user[aria-expanded="true"] .app-user__caret { transform: rotate(180deg); }

.app-usermenu__panel {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 120;
    display: grid; width: 232px; padding: var(--space-2);
    border: 1px solid var(--border-default); border-radius: var(--radius-md);
    background: var(--surface-card); box-shadow: var(--shadow-raised);
}
.app-usermenu__panel[hidden] { display: none; }
.app-usermenu__head { padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-2); }
.app-usermenu__head strong { display: block; color: var(--text-primary); font-size: var(--fs-sm); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-usermenu__head span { display: block; margin-top: 2px; color: var(--text-muted); font-size: var(--fs-xs); }
.app-usermenu__panel a,
.app-usermenu__panel button {
    display: flex; align-items: center; gap: var(--space-2);
    width: 100%; height: 42px; padding: 0 var(--space-3); border-radius: var(--radius-sm);
    color: var(--text-secondary); font-size: var(--fs-sm); font-weight: 500; text-align: left;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.app-usermenu__panel a:hover, .app-usermenu__panel button:hover { background: var(--surface-subtle); color: var(--text-primary); }
.app-usermenu__panel .material-symbols-outlined { font-size: 19px; }
/* Sign-out is separated from the navigation items above it. */
.app-usermenu__logout { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); }
.app-usermenu__logout button { color: var(--danger); }
.app-usermenu__logout button:hover { background: var(--danger-bg); color: var(--danger); }
.logout-form { margin: 0; }

/* ── Profile drawer (soldan açılan profil menüsü) ──────────────────── */
.app-drawer-scrim {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(15, 23, 42, .60);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    opacity: 0; transition: opacity var(--dur-base) var(--ease), backdrop-filter var(--dur-base) var(--ease);
}
.app-drawer-scrim.is-open { opacity: 1; }
.app-drawer-scrim[hidden] { display: none; }

.app-drawer {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 210;
    display: flex; flex-direction: column;
    width: min(320px, 88vw);
    border-right: 1px solid #e7eaf0;
    background: #fff; box-shadow: 20px 0 48px rgba(15, 23, 42, .20);
    transform: translateX(-100%); transition: transform var(--dur-slow) var(--ease);
    overflow-y: auto;
}
.app-drawer.is-open { transform: translateX(0); }
.app-drawer[hidden] { display: none; }

.app-drawer__head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    min-height: 82px; padding: 0 24px;
    border-bottom: 1px solid #edf0f4;
}
.app-drawer__title {
    color: #1e293b; font-size: 13px; font-weight: 800; letter-spacing: .1em;
}
.app-drawer__close {
    display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center;
    border-radius: 50%; color: #64748b; background: transparent;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.app-drawer__close:hover { background: #f8fafc; color: #1e293b; }

.app-drawer__nav { display: grid; flex: 1 1 auto; align-content: start; grid-auto-rows: min-content; padding: 16px 0; }
.app-drawer__nav a {
    position: relative; display: flex; align-items: center; gap: 14px;
    min-height: 58px; padding: 0 24px;
    border-right: 4px solid transparent;
    color: #64748b; font-size: var(--fs-body); font-weight: 600;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.app-drawer__nav a .material-symbols-outlined { width: 24px; flex: 0 0 24px; color: #94a3b8; font-size: 21px; text-align: center; }
.app-drawer__nav a:hover { background: #f8fafc; color: #1e293b; border-right-color: #cbd5e1; }
.app-drawer__nav a:hover .material-symbols-outlined { color: #64748b; }
.app-drawer__nav a.is-active { color: var(--brand-primary); font-weight: 700; background: #fff1f7; border-right-color: var(--brand-primary); }
.app-drawer__nav a.is-active .material-symbols-outlined { color: var(--brand-primary); }
/* Menüdeki eş-marka bağlantısının "YENİ" rozeti çekmecede de kullanılıyor;
   satırın sonuna yaslanır ki bağlantı metinleri hizada kalsın. */
.app-drawer__nav a .app-cobrand__new { margin-left: auto; flex: 0 0 auto; }
.app-drawer__footer { display: flex; align-items: center; justify-content: center; gap: 3px; min-height: 68px; padding: 16px 24px; border-top: 1px solid #edf0f4; background: #f8fafc; color: #64748b; font-size: 12px; }
.app-drawer__footer strong { color: #1e293b; font-weight: 800; }
/* Logolu varyantta görselin kendi boşluğu zaten nefes payı bırakıyor. */
.app-drawer__footer--logo { padding-block: 8px; }
.app-drawer__footer--logo img { display: block; width: auto; max-width: 100%; height: 56px; object-fit: contain; }

/* Çekmece açıkken arka plandaki içerik kaymasın. */
body.has-drawer-open { overflow: hidden; }

/* Mobile menu */
.app-nav-toggle {
    display: grid; gap: 4px; width: 44px; height: 44px;
    margin-left: auto; place-content: center;
    border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-card);
}
.app-nav-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text-primary); transition: transform var(--dur-slow) var(--ease), opacity var(--dur-base) var(--ease); }
.app-nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.app-nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.app-nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (min-width: 1024px) { .app-nav-toggle { display: none; } }

.app-mobile-nav {
    display: grid; gap: 2px;
    width: 100%; max-width: calc(var(--container-max) + 2 * var(--container-gutter)); margin-inline: auto;
    padding: var(--space-2) var(--container-gutter) var(--space-4);
    border-top: 1px solid var(--border-subtle);
}
.app-mobile-nav a,
.app-mobile-nav button { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: var(--fs-body); font-weight: 500; text-align: left; background: transparent; }
.app-mobile-nav a:hover,
.app-mobile-nav button:hover { background: var(--surface-subtle); color: var(--text-primary); }
.app-mobile-nav__actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.app-mobile-nav__actions .app-btn { flex: 1 1 0; }
.app-mobile-nav .app-cobrand { gap: 6px; }
@media (min-width: 1024px) { .app-mobile-nav { display: none; } }

/* ── Main ──────────────────────────────────────────────────────────── */
.app-main { flex: 1 1 auto; }
.app-shell {
    width: 100%; max-width: calc(var(--container-max) + 2 * var(--container-gutter));
    margin-inline: auto; padding-inline: var(--container-gutter);
}
/* Alt değer, footer'ın kendi üst boşluğuyla toplanınca mobildeki eski
   --space-7 payını verir. */
@media (max-width: 640px) { .app-main { padding: var(--space-5) 0 var(--space-2); } }
/* The home page and the consumer-auction landing page draw their own
   full-bleed sections and own their rhythm. */
.page-home .app-main,
.page-consumer-auction .app-main { padding-block: 0; }
/* Araç listesi üst boşluğunu kabuğun kendi padding değeriyle verir; banner ve
   filtre kartı başlığın hemen altından başlar. */
.page-vehicle-list .app-main,
.page-online-auction-list .app-main { padding-top: var(--space-3); }

/* ── Breadcrumb ────────────────────────────────────────────────────────
   Görünür kırıntı yolu; head'deki BreadcrumbList yapılandırılmış verisinin
   sayfadaki karşılığıdır. Tam genişlikli sayfalarda da içerikle aynı
   kolona hizalanır. */
.app-breadcrumb {
    width: 100%; max-width: calc(var(--container-max) + 2 * var(--container-gutter));
    margin-inline: auto; padding: 0 var(--container-gutter) var(--space-4);
}
.app-breadcrumb__list {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
    margin: 0; padding: 0; list-style: none;
    font-size: 13px; line-height: 1.4; color: var(--text-muted, #64748b);
}
.app-breadcrumb__item + .app-breadcrumb__item::before {
    content: "/"; margin-right: var(--space-2); color: var(--border-default, #cbd5e1);
}
.app-breadcrumb__item a { color: inherit; text-decoration: none; }
.app-breadcrumb__item a:hover { color: var(--brand-primary, #ec3f9c); text-decoration: underline; }
.app-breadcrumb__item [aria-current="page"] { color: var(--text-primary, #0f172a); font-weight: 600; }

/* ── Footer ────────────────────────────────────────────────────────── */
/* Üstteki boşluk sayfa içeriğinin alt bilgiye yapışmasını önler. margin-top
   burada "auto" değil sabit bir değer: .app-main zaten flex-grow ile artan
   alanı doldurduğu için kısa sayfalarda footer yine ekranın dibinde kalır ve
   bu boşluk fazladan kaydırma çubuğu yaratmaz. */
.app-footer { margin-top: var(--space-6); background: var(--surface-card); border-top: 1px solid var(--border-default); }
.app-footer__inner {
    display: grid; gap: var(--space-6);
    width: 100%; max-width: calc(var(--container-max) + 2 * var(--container-gutter)); margin-inline: auto;
    padding: var(--space-7) var(--container-gutter) var(--space-6);
    grid-template-columns: 1fr;
}
@media (min-width: 900px) { .app-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--space-8); } }
.app-footer__brand img { display: block; width: auto; height: 40px; margin-bottom: var(--space-3); object-fit: contain; }
.app-footer__brand p { margin: 0; max-width: 340px; color: var(--text-secondary); font-size: var(--fs-sm); line-height: var(--lh-relaxed); }
.app-footer__links { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.app-footer__links > div { display: grid; gap: var(--space-2); align-content: start; }
.app-footer__links h2 { margin: 0 0 var(--space-1); color: var(--text-primary); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.app-footer__links a,
.app-footer__link-button {
    width: fit-content;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--fs-sm);
    text-align: left;
    cursor: pointer;
    transition: color var(--dur-base) var(--ease);
}
.app-footer__links a:hover,
.app-footer__link-button:hover { color: var(--brand-primary); }
.app-footer__link-button:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; }
.app-footer__bar { border-top: 1px solid var(--border-subtle); }
.app-footer__bar-inner {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
    width: 100%; max-width: calc(var(--container-max) + 2 * var(--container-gutter));
    margin-inline: auto; padding: var(--space-4) var(--container-gutter);
    color: var(--text-muted); font-size: var(--fs-sm);
}
.app-footer__contact { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-weight: 700; }
.app-footer__contact:hover { color: var(--brand-primary); }
.app-footer__contact .material-symbols-outlined { font-size: 17px; }
@media (max-width: 640px) { .app-footer__bar-inner { align-items: flex-start; flex-direction: column; } }

/* Legal document pages */
.legal-page { max-width: 1160px; margin-inline: auto; }
.legal-page__hero { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); padding: clamp(24px, 4vw, 42px); border: 1px solid #d9e1eb; border-radius: 20px; background: linear-gradient(120deg, #f9fbfe 0%, #eef4fa 100%); }
.legal-page__eyebrow { display: inline-flex; align-items: center; gap: 7px; color: var(--brand-primary); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.legal-page__eyebrow .material-symbols-outlined { font-size: 18px; }
.legal-page__hero h1 { margin: var(--space-3) 0 var(--space-2); color: #16253a; font-size: clamp(26px, 3vw, 38px); line-height: 1.15; letter-spacing: -.03em; }
.legal-page__hero p { margin: 0; color: var(--text-secondary); }
.legal-page__download { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 17px; border-radius: 10px; background: var(--brand-primary); color: #fff !important; font-size: var(--fs-sm); font-weight: 750; box-shadow: 0 6px 14px rgba(var(--brand-rgb), .18); transition: transform var(--dur-base) var(--ease), background var(--dur-base) var(--ease); }
.legal-page__download:hover { background: var(--brand-primary-dark); transform: translateY(-1px); }
.legal-page__download .material-symbols-outlined { font-size: 20px; }
.legal-page__layout { display: grid; gap: var(--space-6); margin-top: var(--space-6); }
.legal-page__nav { padding: 18px; border: 1px solid var(--border-default); border-radius: 14px; background: var(--surface-card); align-self: start; }
.legal-page__nav > p { margin: 0 0 12px; color: var(--text-primary); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.legal-page__nav nav { display: grid; gap: 3px; }
.legal-page__nav a { padding: 9px 10px; border-radius: 8px; color: var(--text-secondary); font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease); }
.legal-page__nav a:hover { background: #f1f5f9; color: var(--brand-primary); }
.legal-page__nav a.is-active { background: rgba(var(--brand-rgb), .1); color: var(--brand-primary); font-weight: 750; }
/* Footer sütunları yan menüde akordeon: bulunulan sayfanın grubu açık gelir */
.footer-page-nav { padding: 6px 10px; }
.footer-page-nav__group + .footer-page-nav__group { border-top: 1px solid var(--border-subtle); }
.footer-page-nav summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 8px; color: var(--text-primary); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; list-style: none; cursor: pointer; }
.footer-page-nav summary::-webkit-details-marker { display: none; }
.footer-page-nav summary:hover { color: var(--brand-primary); }
.footer-page-nav summary .material-symbols-outlined { color: var(--text-muted); font-size: 20px; transition: transform var(--dur-base) var(--ease); }
.footer-page-nav__group[open] > summary .material-symbols-outlined { transform: rotate(180deg); }
.footer-page-nav__group > nav { padding-bottom: 10px; }
@media (min-width: 960px) { .footer-page-nav { max-height: calc(100vh - 110px); overflow-y: auto; } }
/* Yan menülü sayfaların içerik sütunu (İletişim, SSS) */
.legal-page__main { display: grid; align-content: start; gap: var(--space-6); min-width: 0; }
.legal-page__main > .oa-page-head { margin-bottom: 0; }
/* İletişim: konum, iletişim bilgileri ve form alt alta */
.contact-page__map { overflow: hidden; border: 1px solid var(--border-default); border-radius: 16px; background: var(--surface-card); }
.contact-page__map iframe { display: block; width: 100%; height: clamp(240px, 30vw, 360px); border: 0; }
.contact-page__info-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.contact-page__info-heading .oa-h2 { margin: 0; }
.contact-page__info-heading .oa-btn.contact-page__form-link { flex: 0 0 auto; white-space: nowrap; background: #c3156e; color: #fff; border-color: #c3156e; font-weight: 800; }
.contact-page__info-heading .oa-btn.contact-page__form-link:hover { background: #9f0f57; color: #fff; border-color: #9f0f57; }
.contact-page__form { scroll-margin-top: 110px; }
.contact-page__info-list { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.legal-document { min-width: 0; padding: clamp(22px, 4vw, 46px); border: 1px solid var(--border-default); border-radius: 16px; background: var(--surface-card); box-shadow: 0 10px 30px rgba(21, 38, 62, .035); }
.legal-document__header { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--border-subtle); }
.legal-document__header > .material-symbols-outlined { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; background: rgba(var(--brand-rgb), .1); color: var(--brand-primary); font-size: 21px; }
.legal-document__header p { margin: 0 0 2px; color: var(--text-primary); font-size: var(--fs-sm); font-weight: 750; }
.legal-document__header span { color: var(--text-muted); font-size: var(--fs-xs); }
.legal-document__content { color: #38465a; font-size: 15px; line-height: 1.78; }
.legal-document__content p { margin: 0 0 18px; white-space: pre-line; }
.legal-document__content .legal-document__heading { margin-top: 32px; margin-bottom: 12px; color: #17263a; font-size: 17px; font-weight: 800; line-height: 1.45; }
.legal-document__content .legal-document__heading:first-child { margin-top: 0; }
@media (min-width: 960px) { .legal-page__layout { grid-template-columns: 275px minmax(0, 1fr); } .legal-page__nav { position: sticky; top: 94px; } }
@media (max-width: 680px) { .legal-page__hero { align-items: flex-start; flex-direction: column; } .legal-page__download { width: 100%; } .legal-document { padding: 22px; } .legal-document__content { font-size: 14px; line-height: 1.7; } .contact-page__info-heading { align-items: flex-start; flex-direction: column; } }