/* Apex Masters — ticket.apexmasters.com
   Brand: kırmızı #ef4444 üzerine koyu zemin, sade ve mobil öncelikli */

:root {
    --bg: #0b0b0d;
    --surface: #141418;
    --surface-2: #1c1c22;
    --border: #25252c;
    --text: #f4f4f7;
    --muted: #9a9aa3;
    --dim: #6e6e76;
    --primary: #ef4444;
    --primary-hover: #dc2626;
    --primary-press: #b91c1c;
    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow: 0 12px 40px -12px rgba(0, 0, 0, .6);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

body {
    font-family: var(--font);
    background:
        radial-gradient(900px 600px at 18% 8%, rgba(185, 28, 28, .26), transparent 60%),
        radial-gradient(900px 600px at 82% 92%, rgba(127, 29, 29, .22), transparent 60%),
        radial-gradient(700px 500px at 50% 50%, rgba(220, 38, 38, .08), transparent 70%),
        var(--bg);
    color: var(--text);
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
    position: relative;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    inset: -10%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(700px 500px at 30% 20%, rgba(239, 68, 68, .18), transparent 65%),
        radial-gradient(800px 600px at 70% 80%, rgba(153, 27, 27, .22), transparent 65%);
    animation: bg-pulse 7s ease-in-out infinite;
    will-change: opacity, transform;
}

@keyframes bg-pulse {
    0%, 100% { opacity: .55; transform: scale(1) translate(0, 0); }
    50%      { opacity: 1;   transform: scale(1.08) translate(1%, -1%); }
}

@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; opacity: .7; }
}

main, .topbar, .admin, .modal { position: relative; z-index: 1; }

/* ---------- Background video (form sayfası) ---------- */

.bg-video {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    object-fit: cover;
    z-index: -2;
    opacity: .35;
    pointer-events: none;
    background: var(--bg);
}

@media (prefers-reduced-motion: reduce) {
    .bg-video { display: none; }
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }

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

/* ---------- Layout: card ---------- */

.page-form, .page-success, .page-login, .page-verify {
    display: grid;
    place-items: center;
    padding: 24px 16px;
    min-height: 100vh;
    min-height: 100dvh;
}
.page-form { padding: 16px; }

.card {
    width: 100%;
    max-width: 480px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow);
}

/* Wrapper that places the form card between the TDŞ (left) and TDK
   (right) championship logos. Logos sit OUTSIDE the card and are hidden
   on mobile to keep the form unchanged on small screens. */
.card-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 4vw, 56px);
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}
.stage-logo {
    flex: 0 0 auto;
    width: clamp(110px, 14vw, 180px);
    height: auto;
    object-fit: contain;
    opacity: 0.92;
    filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.55));
    user-select: none;
    pointer-events: none;
}
@media (max-width: 767px) {
    .stage-logo { display: none; }
    .card-stage { gap: 0; }
}
.card--narrow { max-width: 380px; }
.card--success { max-width: 520px; }

.page-form .card {
    padding: 22px 24px;
    max-width: 460px;
    background: rgba(18, 18, 22, 0.48);
    backdrop-filter: blur(11px) saturate(135%);
    -webkit-backdrop-filter: blur(11px) saturate(135%);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 60px -12px rgba(0, 0, 0, .55);
}

/* backdrop-filter desteklenmeyen tarayıcılarda daha opak fallback */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .page-form .card {
        background: rgba(18, 18, 22, 0.88);
    }
}

.card__head {
    border-bottom: 1px solid var(--border);
    padding-bottom: 20px;
    margin-bottom: 24px;
}

.brand {
    font-size: 11px;
    letter-spacing: .22em;
    color: var(--primary);
    font-weight: 800;
    margin-bottom: 6px;
}

h1 {
    margin: 0 0 8px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.lede {
    margin: 0;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.55;
}

.card__foot {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    color: var(--dim);
    text-align: center;
    font-size: 12px;
}

/* ---------- Race header (Anton outline) + Logo footer ---------- */

.card__head--race {
    text-align: center;
    border-bottom: 0;
    padding-bottom: 14px;
    margin-bottom: 16px;
}

.race-title {
    font-family: 'Anton', 'Arial Black', Impact, sans-serif;
    font-size: clamp(54px, 13vw, 96px);
    line-height: .92;
    letter-spacing: .015em;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--text);
    text-stroke: 1.5px var(--text);
    text-transform: uppercase;
    margin: 4px 0 10px;
    font-weight: 400;
    text-shadow: 0 0 40px rgba(239, 68, 68, .15);
}

.race-meta {
    font-family: 'Anton', 'Arial Black', sans-serif;
    font-size: clamp(15px, 2.4vw, 19px);
    letter-spacing: .14em;
    color: var(--primary);
    text-transform: uppercase;
    font-weight: 400;
    margin-bottom: 6px;
    text-shadow: 0 0 24px rgba(239, 68, 68, .45);
}

.race-date {
    font-family: 'Anton', 'Arial Black', sans-serif;
    font-size: clamp(13px, 2vw, 16px);
    letter-spacing: .18em;
    color: var(--text);
    text-transform: uppercase;
    font-weight: 400;
    margin-bottom: 14px;
    opacity: .92;
}

.race-divider {
    width: 44px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    margin: 0 auto 14px;
    opacity: .6;
}

.race-subtitle {
    font-family: 'Anton', 'Arial Black', sans-serif;
    font-size: clamp(15px, 2.2vw, 18px);
    letter-spacing: .1em;
    color: var(--text);
    text-transform: uppercase;
    font-weight: 400;
}

.card__foot--logo {
    border-top: 1px solid var(--border);
    margin-top: 18px;
    padding: 14px 0 4px;
    text-align: center;
}

.brand-logo {
    display: block;
    margin: 0 auto;
    width: clamp(120px, 32%, 150px);
    height: auto;
    opacity: .55;
    transition: opacity .2s;
}
.brand-logo:hover { opacity: .85; }

.sponsor-logos {
    margin-top: 16px;
    text-align: center;
}
.sponsor-logos img {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    opacity: .7;
}

/* Success page header — apex logo + site link + TDŞ/Biletiniz hazır/TDK */
.card__head--success { text-align: center; }
.success-logo-link {
    display: block;
    text-decoration: none;
    border: 0;
    outline: 0;
}
.success-apex-logo {
    display: block;
    margin: 0 auto 12px;
    width: 100%;
    max-width: 420px;
    height: auto;
}
.success-site-link {
    display: inline-block;
    color: #ef4444;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    margin-bottom: 14px;
}
.success-site-link:hover { text-decoration: underline; }
.success-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 6px 0 14px;
    flex-wrap: nowrap;
}
.success-title-row h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}
.success-sidekick-logo {
    display: block;
    height: 52px;
    width: auto;
    flex: 0 0 auto;
}
@media (max-width: 480px) {
    .success-sidekick-logo { height: 40px; }
    .success-title-row h1 { font-size: 18px; }
    .success-title-row { gap: 12px; }
}

/* ---------- Form ---------- */

.form { display: flex; flex-direction: column; gap: 11px; }
.page-form .form { gap: 10px; }

.row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.field > span {
    color: var(--muted);
    font-weight: 500;
    letter-spacing: .02em;
}

.field input,
.field textarea,
.field select {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    padding: 10px 13px;
    font: inherit;
    font-size: 14.5px;
    transition: border-color .15s, box-shadow .15s, background .15s;
    width: 100%;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
    outline: none;
    border-color: var(--primary);
    background: #1f1f26;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .18);
}
.field input::placeholder { color: var(--dim); }

.field .err {
    font-style: normal;
    color: var(--danger);
    font-size: 12px;
}

.check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
    cursor: pointer;
}
.check input {
    margin-top: 3px;
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
}

/* ---------- KVKK link + Modal ---------- */

.kvkk-link {
    background: none;
    border: 0;
    padding: 0;
    margin-left: 4px;
    color: var(--primary);
    font: inherit;
    font-size: 12.5px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    display: inline;
}
.kvkk-link:hover { color: var(--primary-hover); }
.kvkk-link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: 2px;
}

body.modal-open { overflow: hidden; }

.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.modal[aria-hidden="false"] { display: flex; }

.modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 8, .78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: modal-fade .15s ease-out;
}

.modal__dialog {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 100%;
    max-width: 640px;
    max-height: min(85vh, 760px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .7);
    animation: modal-scale .2s cubic-bezier(.2, .9, .3, 1.1);
    overflow: hidden;
}

.modal__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
}
.modal__head h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.005em;
    color: #fff;
    line-height: 1.3;
}

.modal__close {
    background: transparent;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 22px;
    line-height: 1;
    display: grid;
    place-items: center;
    transition: background .15s, color .15s;
    flex: 0 0 auto;
}
.modal__close:hover { background: var(--surface-2); color: var(--text); }
.modal__close:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.modal__body {
    overflow-y: auto;
    padding: 22px;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--muted);
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
}
.modal__body::-webkit-scrollbar { width: 8px; }
.modal__body::-webkit-scrollbar-track { background: transparent; }
.modal__body::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}
.modal__body::-webkit-scrollbar-thumb:hover { background: var(--dim); }

.modal__lede {
    margin: 0 0 18px;
    color: var(--text);
    font-size: 13.5px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
}

.modal__body h3 {
    font-size: 13px;
    margin: 22px 0 8px;
    color: #fff;
    letter-spacing: -.005em;
    font-weight: 700;
}
.modal__body h3:first-of-type { margin-top: 0; }

.modal__body p { margin: 8px 0 12px; }
.modal__body p:last-child { margin-bottom: 0; }

.modal__body ul {
    padding-left: 20px;
    margin: 4px 0 14px;
}
.modal__body li { margin: 4px 0; }

.modal__body a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.modal__body a:hover { color: var(--primary-hover); }

.modal__body strong { color: var(--text); font-weight: 600; }

.modal__sig {
    margin-top: 24px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dim);
}

.modal__foot {
    padding: 14px 22px;
    border-top: 1px solid var(--border);
    text-align: right;
    flex: 0 0 auto;
    background: var(--surface);
}

@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-scale {
    from { opacity: 0; transform: translateY(8px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 480px) {
    .modal { padding: 8px; }
    .modal__dialog { max-height: 92vh; border-radius: 12px; }
    .modal__head, .modal__foot { padding: 14px 16px; }
    .modal__body { padding: 16px; font-size: 13px; }
    .modal__head h2 { font-size: 14px; }
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .04em;
    cursor: pointer;
    text-decoration: none;
    transition: transform .08s, background .15s, border-color .15s, color .15s;
    user-select: none;
    position: relative;
}
.btn:active { transform: translateY(1px); }
.btn--sm { padding: 8px 14px; font-size: 12px; }

.btn--primary {
    background: var(--primary);
    color: #fff;
}
.btn--primary:hover { background: var(--primary-hover); color: #fff; }
.btn--primary:active { background: var(--primary-press); }

.btn--ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
}
.btn--ghost:hover { border-color: var(--muted); color: var(--text); }

.btn[disabled] { opacity: .7; cursor: not-allowed; }

.btn__spin {
    display: none;
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
.btn.is-loading .btn__spin { display: inline-block; }
.btn.is-loading .btn__label { opacity: .7; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Alert ---------- */

.alert {
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-size: 13px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    background: var(--surface-2);
}
.alert--error {
    border-color: rgba(239, 68, 68, .35);
    background: rgba(239, 68, 68, .08);
    color: #fca5a5;
}

/* ---------- Event card (success + future use) ---------- */

.event-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    margin: 4px 0 22px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.event-card__season {
    font-size: 11px;
    letter-spacing: .2em;
    color: var(--primary);
    font-weight: 700;
    text-transform: uppercase;
}
.event-card__title {
    font-family: 'Anton', 'Arial Black', sans-serif;
    font-size: 26px;
    font-weight: 400;
    color: #fff;
    margin: 2px 0 6px;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.1;
}
.event-card__date {
    font-size: 15px;
    font-weight: 600;
    color: #e8e8ec;
    letter-spacing: .05em;
}

/* ---------- Success / QR ---------- */

.qr-box {
    background: #fff;
    border-radius: var(--radius-sm);
    padding: 18px;
    margin: 6px 0 22px;
    text-align: center;
}
.qr-box img { margin: 0 auto; width: min(320px, 100%); height: auto; }

.qr-box--composite {
    background: transparent;
    padding: 0;
    margin: 6px 0 22px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    line-height: 0;
}
.qr-box--composite img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

.ticket-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 18px;
}
.ticket-meta > div {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
}
.ticket-meta span {
    display: block;
    color: var(--dim);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.ticket-meta code {
    font-size: 11px;
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    word-break: break-all;
}
.ticket-meta strong { font-size: 13px; color: var(--text); }

.actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.hint {
    margin-top: 18px;
    color: var(--dim);
    font-size: 12px;
    line-height: 1.55;
    text-align: center;
}

/* ---------- Verify ---------- */

.card--ok { border-color: rgba(34, 197, 94, .4); }
.card--bad { border-color: rgba(239, 68, 68, .45); }

.status {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}
.status__icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 22px; font-weight: 800;
    flex: 0 0 auto;
}
.status--ok .status__icon { background: rgba(34, 197, 94, .15); color: var(--success); }
.status--bad .status__icon { background: rgba(239, 68, 68, .15); color: var(--danger); }
.status__name { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.status__meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.status__meta code { font-family: ui-monospace, monospace; font-size: 11px; }

/* ---------- Admin layout ---------- */

.page-admin { background: var(--bg); }

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    position: sticky; top: 0; z-index: 10;
}
.topbar__brand {
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .2em;
    color: var(--primary);
}
.topbar__nav { display: flex; align-items: center; gap: 12px; }
.topbar__user { color: var(--muted); font-size: 13px; }

.admin {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 18px 20px;
}
.stat__num { font-size: 28px; font-weight: 700; }
.stat__label {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: .15em;
    text-transform: uppercase;
    margin-top: 4px;
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    align-items: center;
}
.filters input[type="search"],
.filters input[type="date"] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    padding: 9px 12px;
    font: inherit;
    font-size: 13px;
}
.filters input[type="search"] { flex: 1 1 220px; min-width: 180px; }
.filters input[type="search"]:focus,
.filters input[type="date"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .18);
}

.table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: auto;
}
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 720px;
}
.table th, .table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.table thead th {
    background: var(--surface-2);
    color: var(--muted);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    position: sticky; top: 0;
}
.table tbody tr:hover { background: rgba(255,255,255,.02); }
.table .empty { text-align: center; color: var(--muted); padding: 28px; }
.table .nowrap { white-space: nowrap; }

.pill {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
}
.pill--ok { background: rgba(34, 197, 94, .12); color: var(--success); }
.pill--warn { background: rgba(245, 158, 11, .12); color: var(--warning); }

.qr-link {
    display: inline-block;
    margin-right: 10px;
    font-size: 12px;
    color: var(--primary);
}

/* ---------- Mobile ---------- */

@media (max-width: 480px) {
    .card { padding: 22px 18px; }
    h1 { font-size: 20px; }
    .row { grid-template-columns: 1fr; }
    .actions { grid-template-columns: 1fr; }
    .ticket-meta { grid-template-columns: 1fr; }
    .topbar { padding: 12px 16px; }
    .admin { padding: 16px; }
}

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

/* Mobile-only date label inside form (desktop'ta gizli, mobile'da
   form üstünde sarı tarih başlığı) */
.form-mobile-date { display: none; }

/* ============================================================
   Mobile form sayfası — Gaziantep bilet görseli arka planı
   Telefon (≤767px) için tüm header/footer/video gizlenir, sadece
   form input'ları image'in boş alanına yerleşir.
   ============================================================ */

@media (max-width: 767px) {
    /* Date label form'un flex akışından çıkartılır (absolute) — form
       öğelerinin pozisyonunu hiç değiştirmesin diye. Form parent
       zaten position:absolute, dolayısıyla bu element form'a göre
       konumlanır. */
    body.page-form .form-mobile-date {
        display: block;
        position: absolute;
        top: -32px;
        left: 0;
        right: 0;
        text-align: center;
        font-family: 'Anton', 'Arial Black', sans-serif;
        font-size: 18px;
        font-weight: 800;
        color: #ffd400;
        letter-spacing: .06em;
        text-shadow: 0 2px 8px rgba(0,0,0,.7);
        line-height: 1.1;
        pointer-events: none;
    }

    body.page-form {
        background: #000;
        padding: 0;
        margin: 0;
        min-height: 100vh;
        min-height: 100dvh;
        display: block;
    }

    body.page-form .bg-video { display: none !important; }

    /* Poster modu: yalnızca body.has-poster (EVENT_MOBILE_BG ayarlı) iken.
       Poster yoksa mobilde standart kart gösterilir (aşağıdaki kurallar uygulanmaz). */
    body.page-form.has-poster .card {
        position: relative;
        max-width: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        background: var(--mobile-poster, #000) top center / 100% auto no-repeat #000;
        border: none;
        border-radius: 0;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        aspect-ratio: 902 / 1600;
        overflow: visible;
    }

    /* aspect-ratio fallback for older Safari */
    @supports not (aspect-ratio: 1) {
        body.page-form.has-poster .card {
            height: 0;
            padding-bottom: 177.4%;
        }
    }

    body.page-form.has-poster .card__head,
    body.page-form.has-poster .card__foot,
    body.page-form.has-poster .card__head--race {
        display: none !important;
    }

    /* Error alert image üstünde, form bölgesinin hemen üzerinde (poster modu) */
    body.page-form.has-poster .alert--error {
        position: absolute;
        top: 39%;
        left: 5%;
        right: 5%;
        margin: 0;
        z-index: 2;
        font-size: 12px;
        padding: 8px 12px;
    }

    /* Form image'in boş alanına yerleşir (y: ~%44-%75 image içinde),
       30px yukarı kaydırılır — date label form içinde olduğu için
       o da otomatik birlikte hareket eder */
    body.page-form.has-poster .form {
        position: absolute;
        top: 44%;
        left: 4.5%;
        right: 4.5%;
        bottom: 25%;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 7px;
        justify-content: space-between;
        z-index: 1;
        transform: translateY(-30px);
    }

    /* Ad + Soyad tek satırda kalsın yer kazanmak için */
    body.page-form .form .row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    body.page-form .field {
        margin: 0;
    }

    body.page-form .field span {
        font-size: 11px;
        margin-bottom: 2px;
        font-weight: 600;
        color: #fff;
        letter-spacing: .02em;
    }

    body.page-form .field input {
        padding: 7px 10px;
        font-size: 14px;
        background: rgba(0, 0, 0, .55);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, .35);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    body.page-form .field input:focus {
        background: rgba(0, 0, 0, .7);
        border-color: var(--primary);
    }

    body.page-form .field input::placeholder { color: rgba(255,255,255,.45); }

    body.page-form .check {
        font-size: 11px;
        line-height: 1.35;
        color: #fff;
        background: rgba(0, 0, 0, .45);
        padding: 6px 10px;
        border-radius: 6px;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    body.page-form .check input[type=checkbox] {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    body.page-form .kvkk-link {
        color: var(--primary);
        text-decoration: underline;
        font-size: 11px;
    }

    body.page-form .btn--primary {
        padding: 11px;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: .08em;
        margin-top: 2px;
    }

    /* Eğer telefon image'den uzunsa, image'in altı siyah; o boşlukta ek
       içerik gözükmesin diye .card height aspect-ratio ile sabit kaldı.
       Body bg siyah olduğundan boşluk doğal görünür. */
}