:root {
    color-scheme: dark;
    --bg: #020408;
    --panel: rgba(255, 255, 255, 0.065);
    --panel-strong: rgba(255, 255, 255, 0.11);
    --line: rgba(255, 255, 255, 0.12);
    --text: rgba(255, 255, 255, 0.92);
    --muted: rgba(255, 255, 255, 0.54);
    --cyan: #25d9ef;
    --orange: #ffae42;
    --red: #ff5a68;
    --green: #5ee18a;
    /* PredictionTabView: şehir / koşu cinsi — ekran görüntüsüne yakın parlak mavi tonu */
    --reg-accent: #4eb7ff;
}

* {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

img,
video,
canvas,
svg,
table {
    max-width: 100%;
}

a,
button,
input,
select,
textarea {
    min-width: 0;
}

body {
    min-height: 100dvh;
    margin: 0;
    background:
        radial-gradient(circle at top, rgba(37, 217, 239, 0.16), transparent 34rem),
        linear-gradient(180deg, #11151c 0%, var(--bg) 55%);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.drawer-open {
    overflow: hidden;
}

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

.matrix-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.12;
    background-image:
        linear-gradient(rgba(37, 217, 239, 0.22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 217, 239, 0.16) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: linear-gradient(to bottom, black, transparent);
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(16px);
}

.topbar-shell {
    width: min(1180px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 0.8rem 0 0.75rem;
}

.topbar-main-row {
    position: relative;
    z-index: 25;
    display: grid;
    grid-template-columns: 64px 1fr 64px;
    align-items: center;
    min-height: 64px;
}

.hamburger {
    display: inline-grid;
    gap: 4px;
    place-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    padding: 0;
    justify-self: start;
}

.hamburger span {
    display: block;
    width: 19px;
    height: 2px;
    border-radius: 999px;
    background: var(--cyan);
}

.brand {
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.brand span {
    color: rgba(255, 255, 255, 0.42);
}

.brand strong {
    color: var(--cyan);
}

.topbar-brand {
    justify-self: center;
    font-size: 1.5rem;
    grid-column: 2;
}

.topbar-logo {
    width: 58px;
    height: 58px;
    object-fit: contain;
    justify-self: end;
}

.tab-nav {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    margin-top: 0.25rem;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 999px;
    background: rgba(15, 15, 20, 0.97);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.7);
    padding: 7px;
}

.tab-nav-item {
    position: relative;
    display: grid;
    place-items: center;
    gap: 4px;
    min-width: 0;
    border-radius: 22px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 7px 4px;
    text-align: center;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.tab-nav-item.is-selected {
    background: var(--cyan);
    box-shadow: 0 2px 10px rgba(37, 217, 239, 0.45);
    color: #000;
    font-weight: 800;
}

.tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 31px;
}

.tab-icon-svg {
    display: block;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.tab-icon-svg--brain {
    width: 31px;
    height: 31px;
}

.tab-icon.tab-icon--stack {
    position: relative;
    width: 33px;
    height: 31px;
}

.tab-icon.tab-icon--stack .tz-tab-nav-lock {
    position: absolute;
    top: -2px;
    right: -3px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cyan);
    filter: drop-shadow(0 0 3px rgba(37, 217, 239, 0.45));
}

.tab-nav-item.is-selected .tab-icon.tab-icon--stack .tz-tab-nav-lock {
    color: rgba(0, 0, 0, 0.78);
    filter: none;
}

.drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.side-drawer {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 31;
    width: min(82vw, 320px);
    max-width: 100%;
    height: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #000;
    box-shadow: 12px 0 48px rgba(0, 0, 0, 0.6);
    transform: translateX(-102%);
    transition: transform 0.35s cubic-bezier(0.34, 1.02, 0.32, 1);
}

body.drawer-open .drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
}

body.drawer-open .side-drawer {
    transform: translateX(0);
}

/* Matrix: arka planda kalsın; üst metin (header) okunaklı olsun */
.drawer-matrix-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.7;
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 26%,
        rgba(0, 0, 0, 0.45) 38%,
        black 52%,
        black 78%,
        transparent 100%
    );
}

.drawer-matrix-canvas {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.85;
}

.drawer-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    min-width: 0;
}

.drawer-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
    padding: calc(1rem + env(safe-area-inset-top, 0px)) 1.15rem 1rem;
    padding-bottom: 1.1rem;
}

.drawer-logo {
    width: 38px;
    height: 38px;
    object-fit: contain;
    flex-shrink: 0;
}

.drawer-brand {
    font-size: 1.06rem;
}

.drawer-close {
    margin-left: auto;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.25);
    padding: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.drawer-close-icon {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.drawer-close-icon::before,
.drawer-close-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 2px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 1px;
}

.drawer-close-icon::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.drawer-close-icon::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.drawer-line {
    flex-shrink: 0;
    height: 1px;
    margin: 0 1rem;
    background: rgba(37, 217, 239, 0.2);
}

.drawer-line--soft {
    background: rgba(37, 217, 239, 0.12);
    margin: 0 1rem;
}

.drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 1.35rem 1rem 1rem;
}

.drawer-footer {
    flex-shrink: 0;
    padding: 0.65rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.drawer-profile-card {
    display: flex;
    align-items: center;
    gap: 0.88rem;
    width: 100%;
    padding: 1rem;
    margin-bottom: 0.85rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.drawer-profile-card--guest {
    border-color: rgba(37, 217, 239, 0.22);
}

.drawer-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-family: ui-rounded, system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 800;
    background: linear-gradient(135deg, #25d9ef, #5ee18a);
    color: #000;
}

.drawer-profile-card--guest .drawer-avatar {
    background: rgba(255, 255, 255, 0.06);
    color: transparent;
}

.drawer-avatar-glyph {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.22);
    position: relative;
}

.drawer-avatar-glyph::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
    width: 14px;
    height: 7px;
    border: 2px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px 8px 0 0;
    border-bottom: 0;
}

.drawer-profile-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.drawer-profile-name {
    font-size: 0.94rem;
    font-weight: 650;
    color: #fff;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drawer-profile-card--guest .drawer-profile-name {
    font-weight: 800;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.drawer-role-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.45rem;
    border-radius: 5px;
    font-size: 0.56rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    background: rgba(37, 217, 239, 0.15);
    color: var(--cyan);
}

.drawer-role-pill--admin {
    background: rgba(255, 90, 104, 0.2);
    color: #ff8a92;
}

.drawer-role-pill--registered {
    background: rgba(37, 217, 239, 0.15);
    color: var(--cyan);
}

.drawer-role-pill--guest {
    background: rgba(37, 217, 239, 0.12);
    color: rgba(37, 217, 239, 0.85);
}

.drawer-role-pill--tester {
    background: rgba(255, 90, 104, 0.18);
    color: #ff9aa2;
}

.drawer-role-pill--premium {
    background: rgba(94, 225, 138, 0.18);
    color: var(--green);
}

.drawer-kurgu-line {
    font-size: 0.62rem;
    font-weight: 650;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.42);
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
}

/* Kayıtlı kuponlar çekmede listelenmez; nav her zaman (üye) görünür, premium-only satırlar sunucuda + sınıf ile ayrılır */
.side-drawer [data-drawer-premium-rows] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.side-drawer:not(.drawer--premium-unlocked) [data-drawer-premium-only] {
    display: none !important;
}

.drawer-profile-chev {
    width: 7px;
    height: 7px;
    border-right: 2px solid rgba(255, 255, 255, 0.2);
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    transform: rotate(-45deg);
    flex-shrink: 0;
}

.drawer-profile-card--guest .drawer-profile-chev {
    border-color: rgba(37, 217, 239, 0.45);
}

.drawer-actions {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}


.drawer-row {
    display: flex;
    align-items: center;
    gap: 0.62rem;
    width: 100%;
    padding: 0.88rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.8);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 650;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    min-width: 0;
}

.drawer-row-chev {
    margin-left: auto;
    width: 6px;
    height: 6px;
    border-right: 2px solid rgba(255, 255, 255, 0.25);
    border-bottom: 2px solid rgba(255, 255, 255, 0.25);
    transform: rotate(-45deg);
    flex-shrink: 0;
}

.drawer-row-ico {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background: center / contain no-repeat;
    opacity: 0.9;
}

.drawer-row-label {
    flex: 1;
    min-width: 0;
}

.drawer-row-label--caps {
    font-weight: 900;
    letter-spacing: 0.16em;
}

.drawer-row--premium-lock {
    opacity: 0.93;
}

.drawer-row--premium-lock .drawer-row-chev {
    display: none;
}

.drawer-row-lock {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.42);
}

.drawer-row--six-ne-verir {
    background: rgba(255, 174, 66, 0.05);
    border-color: rgba(255, 174, 66, 0.16);
}

.drawer-row--cyan {
    background: rgba(37, 217, 239, 0.07);
    border-color: rgba(37, 217, 239, 0.18);
}

.drawer-row--yellow {
    background: rgba(255, 224, 102, 0.07);
    border-color: rgba(255, 209, 102, 0.22);
}

.drawer-row--orange {
    background: rgba(255, 174, 66, 0.08);
    border-color: rgba(255, 174, 66, 0.2);
}

.drawer-row--footer {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.48);
    text-transform: uppercase;
}

.drawer-row--footer-legal {
    color: rgba(255, 255, 255, 0.52);
}

.drawer-row--footer .drawer-row-chev {
    border-color: rgba(255, 255, 255, 0.14);
}

/* SVG-style ikonlar (SF Symbols yerine) */
.drawer-row-ico--sliders {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2325d9ef'%3E%3Cpath d='M4 15h4v2H4v-2zm0-8h8v2H4V7zm0 4h12v2H4v-2zm16 7.88V20h-2v-1.12a3 3 0 0 1-2.12-4.62l1.42-1.42.7.7-1.42 1.42a1 1 0 1 0 1.42 1.4zM18.29 4.7 19 4l1.42 1.42a3 3 0 1 1-4.24 4.24L15 8.83l.71-.71 1.41 1.41a1 1 0 1 0 1.42-1.41z'/%3E%3C/svg%3E");
}

.drawer-row-ico--ticket-org {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff9f0a'%3E%3Cpath d='M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v3.27a1.5 1.5 0 0 0 0 2.46V16.5A2.5 2.5 0 0 1 17.5 19h-11A2.5 2.5 0 0 1 4 16.5v-4.27a1.5 1.5 0 0 0 0-2.46V6.5zm3-1A1.5 1.5 0 0 0 5.5 7v2.09A2.5 2.5 0 0 1 5.5 14v2.5A1.5 1.5 0 0 0 7 18h10a1.5 1.5 0 0 0 1.5-1.5V14a2.5 2.5 0 0 1 0-4.91V7A1.5 1.5 0 0 0 17 5.5H7z'/%3E%3C/svg%3E");
}

.drawer-row-ico--spark {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2325d9ef'%3E%3Cpath d='m12 3 1.2 4.9L18 9l-4.8 1.1L12 15l-1.2-4.9L6 9l4.8-1.1L12 3zM6 14l.4 1.7 1.7.4-1.7.4-.4 1.7-.4-1.7-1.7-.4 1.7-.4.4-1.7z'/%3E%3C/svg%3E");
}

.drawer-row-ico--ticket-yel {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffe066'%3E%3Cpath d='M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v3.27a1.5 1.5 0 0 0 0 2.46V16.5A2.5 2.5 0 0 1 17.5 19h-11A2.5 2.5 0 0 1 4 16.5v-4.27a1.5 1.5 0 0 0 0-2.46V6.5zm3-1A1.5 1.5 0 0 0 5.5 7v2.09A2.5 2.5 0 0 1 5.5 14v2.5A1.5 1.5 0 0 0 7 18h10a1.5 1.5 0 0 0 1.5-1.5V14a2.5 2.5 0 0 1 0-4.91V7A1.5 1.5 0 0 0 17 5.5H7z'/%3E%3C/svg%3E");
}

.drawer-row-ico--chart {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff9f0a'%3E%3Cpath d='M4 19h16v2H4v-2zm2-4h2v3H6v-3zm3-5h2v8H9v-8zm3-3h2v11h-2V7zm3-2h2v13h-2V5z'/%3E%3C/svg%3E");
}

.drawer-row-ico--info {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,0.42)'%3E%3Cpath d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm-1 7h2v6h-2V11zm0-3h2v2h-2V8z'/%3E%3C/svg%3E");
}

.drawer-row-ico--doc {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,0.48)'%3E%3Cpath d='M6 3h9l4 4v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm8 1.5V8h3.5L14 4.5zM8 12h8v2H8v-2zm0 4h8v2H8v-2z'/%3E%3C/svg%3E");
}

.drawer-guest-premium {
    padding: 0.88rem;
    border-radius: 14px;
    background: rgba(37, 217, 239, 0.06);
    border: 1px solid rgba(37, 217, 239, 0.18);
}

.drawer-guest-features {
    list-style: none;
    margin: 0 0 0.85rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.62rem;
}

.drawer-guest-features li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}

.drawer-guest-ico {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.88;
    background: center / contain no-repeat;
}

.drawer-guest-ico--brain {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%2325d9ef'%3E%3Cpath d='M252 124a60 60 0 0 0-32-53 52 52 0 0 0-92-32A52 52 0 0 0 36 71a60 60 0 0 0 0 106 52 52 0 0 0 92 32 52 52 0 0 0 92-32 60 60 0 0 0 32-53z'/%3E%3C/svg%3E");
}

.drawer-guest-ico--ticket {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2325d9ef'%3E%3Cpath d='M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v3.27a1.5 1.5 0 0 0 0 2.46V16.5A2.5 2.5 0 0 1 17.5 19h-11A2.5 2.5 0 0 1 4 16.5v-4.27a1.5 1.5 0 0 0 0-2.46V6.5z'/%3E%3C/svg%3E");
}

.drawer-guest-ico--chart {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2325d9ef'%3E%3Cpath d='M4 19h16v2H4v-2zm3-6h2v4H7v-4zm4-4h2v8h-2V9zm4-3h2v11h-2V6zm4-2h2v13h-2V4z'/%3E%3C/svg%3E");
}

.drawer-guest-ico--cube {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2325d9ef'%3E%3Cpath d='M12 2l10 5v10l-10 5L2 17V7l10-5zm0 2.5L4.5 8 12 12l7.5-4L12 4.5zM4 9.5V15l7 3.5V11L4 9.5zm16 0L13 11v7.5l7-3.5V9.5z'/%3E%3C/svg%3E");
}

.drawer-uye-ol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    border-radius: 10px;
    background: var(--cyan);
    color: #001014;
    font-size: 0.8rem;
    font-weight: 900;
    font-family: ui-monospace, monospace;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
}

/* Drawer modalları (sözleşme) */
.tz-modal {
    position: fixed;
    inset: 0;
    z-index: 45;
    display: grid;
    place-items: center;
    padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
}

.tz-modal[hidden] {
    display: none !important;
}

.tz-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
}

.tz-modal__panel {
    position: relative;
    width: min(100%, 400px);
    max-height: min(80dvh, 520px);
    overflow-y: auto;
    padding: 1.35rem 1.25rem 1.25rem;
    border-radius: 16px;
    background: #0a0c10;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
}

.tz-modal__title {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
}

.tz-modal__p {
    margin: 0 0 0.65rem;
    font-size: 0.88rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
}

.tz-modal__muted {
    margin: 0 0 1rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
}

.tz-modal__btn {
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.65rem;
    border-radius: 10px;
    border: 1px solid rgba(37, 217, 239, 0.35);
    background: rgba(37, 217, 239, 0.14);
    color: var(--cyan);
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

/* About — orta/pop-over kart (drawer modal + isteğe bağlı /hakkinda/ rotası) */
.tz-modal--about.tz-modal {
    z-index: 46;
}

#tz-modal-about .tz-modal__backdrop,
.tz-about-route .tz-about-route__backdrop {
    cursor: pointer;
}

.tz-modal--about .tz-about-modal-panel,
.tz-about-route .tz-about-modal-panel {
    position: relative;
    width: min(92vw, min(460px, 50vw));
    max-width: 100%;
    max-height: min(50dvh, 440px);
    overflow-x: clip;
    overflow-y: auto;
    margin: 0;
    padding: 2rem 1rem 0.95rem;
    border-radius: 16px;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.75),
        inset 0 1px rgba(255, 255, 255, 0.04);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(37, 217, 239, 0.35) rgba(255, 255, 255, 0.06);
}

@media (max-width: 540px) {
    .tz-modal--about .tz-about-modal-panel,
    .tz-about-route .tz-about-modal-panel {
        width: min(92vw, 360px);
        max-height: min(56dvh, 480px);
    }
}

.tz-about-modal__close {
    position: absolute;
    top: max(10px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    z-index: 2;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    background: rgba(255, 255, 255, 0.06);
}

.tz-about-modal__close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.tz-about-modal__close:focus-visible {
    outline: 2px solid rgba(37, 217, 239, 0.55);
    outline-offset: 2px;
}

.tz-about-modal__close-x {
    position: relative;
    display: block;
    width: 14px;
    height: 14px;
}

.tz-about-modal__close-x::before,
.tz-about-modal__close-x::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.5);
}

.tz-about-modal__close-x::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.tz-about-modal__close-x::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.tz-about-route {
    position: fixed;
    inset: 0;
    z-index: 44;
    display: grid;
    place-items: center;
    padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
        max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}

.tz-about-route__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
}

.tz-about-route__backdrop:hover {
    background: rgba(0, 0, 0, 0.66);
}

.tz-about-route__wrap {
    position: relative;
    z-index: 1;
    width: auto;
}

.page.tz-about-page-route {
    width: min(1180px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 0;
    min-height: 0;
    overflow: visible;
    background: transparent;
}

.tz-about {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.tz-about.tz-about--compact {
    align-items: center;
    width: 100%;
}

.tz-about.tz-about--compact .tz-about__hero {
    padding-top: 0.15rem;
    flex-shrink: 0;
    width: 100%;
}

.tz-about__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.tz-about__logo {
    display: block;
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.tz-about.tz-about--compact .tz-about__brand {
    margin: 6px 0 0;
    font-size: clamp(1.15rem, 4.2vw, 1.4rem);
}

.tz-about__brand {
    margin: 10px 0 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.tz-about__brand-tay {
    color: rgba(255, 255, 255, 0.4);
}

.tz-about__brand-zeka {
    color: rgba(37, 217, 239, 0.9);
}

.tz-about.tz-about--compact .tz-about__tagline {
    margin: 4px auto 0;
    font-size: 0.6875rem;
    max-width: 18rem;
    text-align: center;
}

.tz-about__tagline {
    margin: 8px 0 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.35;
}

.tz-about.tz-about--compact .tz-about__version {
    font-size: 0.616rem;
    margin-top: 0.125rem;
}

.tz-about__version {
    margin: 0.25rem 0 0;
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: rgba(255, 255, 255, 0.25);
}

.tz-about.tz-about--compact .tz-about__spacer {
    flex: 0 0 auto;
    min-height: clamp(3px, 1.2vw, 8px);
}

.tz-about__spacer {
    flex: 0 0 auto;
}

.tz-about.tz-about--compact .tz-about__rows {
    gap: 0.45rem;
    padding: 0;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    align-items: center;
}

.tz-about__rows {
    list-style: none;
    margin: 0;
    padding: 0 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex-shrink: 0;
}

.tz-about.tz-about--compact .tz-about__row {
    gap: 0.45rem;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.tz-about__row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
}

.tz-about.tz-about--compact .tz-about__ico {
    width: 16px;
    justify-content: center;
}

.tz-about__ico {
    flex-shrink: 0;
    width: 18px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: rgba(37, 217, 239, 0.7);
}

.tz-about.tz-about--compact .tz-about__ico svg {
    width: 16px;
    height: 16px;
}

.tz-about__ico svg {
    display: block;
    width: 17px;
    height: 17px;
}

.tz-about.tz-about--compact .tz-about__row-text {
    font-size: 0.656rem;
    line-height: 1.32;
    text-align: center;
    flex: 0 1 auto;
}

.tz-about__row-text {
    font-size: 0.73rem;
    font-weight: 500;
    line-height: 1.38;
    color: rgba(255, 255, 255, 0.6);
    min-width: 0;
}

.tz-about.tz-about--compact .tz-about__copyright {
    padding-bottom: 0.25rem;
    margin-top: 0.35rem;
    font-size: 0.5625rem;
    width: 100%;
    max-width: 18rem;
    margin-inline: auto;
}

.tz-about__copyright {
    flex-shrink: 0;
    margin: 0;
    text-align: center;
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.2);
    padding-bottom: 0.5rem;
}

/* Kullanıcı sözleşmesi — UserAgreementView.swift */
.page.tz-legal-page {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: max(2rem, env(safe-area-inset-top))
        max(0.65rem, env(safe-area-inset-right))
        calc(3rem + env(safe-area-inset-bottom))
        max(0.65rem, env(safe-area-inset-left));
    overflow-x: clip;
    background: #000;
}

.tz-legal {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - 132px);
    width: min(100%, 640px);
    margin: 0 auto;
}

.tz-legal__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem clamp(1rem, 4vw, 1.35rem);
    flex-shrink: 0;
}

.tz-legal__title-block {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.tz-legal__title {
    margin: 0;
    padding: 0;
    font-size: 0.9375rem;
    font-weight: 900;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    letter-spacing: 0.04em;
    color: var(--cyan);
}

.tz-legal__pdf {
    font-size: 0.72rem;
    font-weight: 750;
    color: rgba(37, 217, 239, 0.78);
    text-decoration: underline;
    text-underline-offset: 2px;
    align-self: flex-start;
    -webkit-tap-highlight-color: transparent;
}

.tz-legal__pdf:hover {
    color: rgba(37, 217, 239, 0.95);
}

.tz-legal__close {
    position: relative;
    flex-shrink: 0;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tz-legal__close::before,
.tz-legal__close::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 2px;
    background: rgba(255, 255, 255, 0.42);
}

.tz-legal__close::before {
    transform: rotate(45deg);
}

.tz-legal__close::after {
    transform: rotate(-45deg);
}

.tz-legal__divider {
    height: 1px;
    background: rgba(37, 217, 239, 0.2);
    flex-shrink: 0;
}

.tz-legal__divider--muted {
    background: rgba(255, 255, 255, 0.08);
}

.tz-legal__scroll {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: min(56dvh, 460px);
    max-height: min(72dvh, 640px);
    overflow-x: clip;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: rgba(37, 217, 239, 0.35) rgba(255, 255, 255, 0.06);
}

.tz-legal-doc-shell {
    /* flex-grow: içerikten uzun “boş” kaydırma alanı oluşturmasın */
    flex: 0 1 auto;
    padding: 0.15rem clamp(0.75rem, 4vw, 1.25rem) 0.85rem;
}

.tz-legal-doc {
    max-width: min(42rem, 100%);
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.8125rem;
    line-height: 1.55;
}

.tz-legal-doc__top {
    margin-bottom: 1.15rem;
}

.tz-legal-doc__top p {
    margin: 0.45rem 0 0;
    color: rgba(255, 255, 255, 0.55);
}

.tz-legal-doc__title {
    margin: 0;
    padding: 0;
    font-size: clamp(1rem, 3.8vw, 1.125rem);
    font-weight: 900;
    line-height: 1.35;
}

.tz-legal-doc__title--main {
    color: rgba(255, 255, 255, 0.94);
}

.tz-legal-doc__title--block {
    margin-top: 1.85rem;
    margin-bottom: 0.85rem;
    font-size: 0.9375rem;
    color: rgba(37, 217, 239, 0.95);
}

.tz-legal-doc__block-head .tz-legal-doc__title--block {
    margin-bottom: 0.35rem;
}

.tz-legal-doc__h2 {
    margin: 1.15rem 0 0;
    padding: 0;
    font-size: 0.82rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.02em;
}

.tz-legal-doc__h3 {
    margin: 0.95rem 0 0;
    padding: 0;
    font-size: 0.8rem;
    font-weight: 750;
    color: rgba(255, 255, 255, 0.82);
}

.tz-legal-doc__section-wrap p {
    margin: 0.55rem 0 0;
}

.tz-legal-doc__list {
    margin: 0.45rem 0 0;
    padding-left: 1.2rem;
    color: rgba(255, 255, 255, 0.76);
}

.tz-legal-doc__list li {
    margin: 0.25rem 0;
}

.tz-legal-doc__tag {
    margin: 2rem 0 0;
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.5);
}

.tz-legal__server-hint {
    margin: 0;
    padding: 0 clamp(1rem, 4vw, 1.35rem);
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
}

.tz-legal__accept {
    flex-shrink: 0;
    background: #000;
    padding-top: 4px;
}

.tz-legal__explain {
    margin: 0;
    padding: 0 clamp(1rem, 5vw, 1.35rem);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
}

.tz-legal__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: calc(100% - 2 * clamp(1rem, 5vw, 1.35rem));
    margin: 0.85rem clamp(1rem, 5vw, 1.35rem) 1.875rem;
    height: 3.25rem;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    background: linear-gradient(90deg, #25d9ef, #1c9faa);
    color: #000;
}

.tz-legal__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.tz-legal__btn-ico svg {
    display: block;
}

.tz-legal__btn-spinner {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    border: 2px solid rgba(0, 16, 20, 0.25);
    border-top-color: #001014;
    animation: tz-leg-spin 0.75s linear infinite;
}

@keyframes tz-leg-spin {
    to {
        transform: rotate(360deg);
    }
}

.tz-legal__btn-label {
    font-size: 0.9375rem;
    font-weight: 900;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    letter-spacing: 0.04em;
}

.tz-legal__guest-hint {
    margin: -0.5rem clamp(1rem, 5vw, 1.35rem) 1rem;
    font-size: 0.75rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.45);
}

.tz-code-inline {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.88em;
    color: rgba(37, 217, 239, 0.85);
}

.tz-firebase-signin-errors {
    margin-top: 0.85rem;
    min-height: 1.35rem;
    color: #ffae42;
    font-weight: 600;
}

.button,
button {
    border: 1px solid rgba(37, 217, 239, 0.28);
    border-radius: 999px;
    background: rgba(37, 217, 239, 0.12);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 0.68rem 1rem;
}

.button.secondary {
    border-color: var(--line);
    background: rgba(255, 255, 255, 0.08);
}

.page {
    width: min(1180px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 2rem 0 5rem;
}

.page.program-track-surface {
    padding-top: 0.75rem;
}

.program-track-surface {
    position: relative;
    min-height: calc(100dvh - 132px);
    isolation: isolate;
}

.program-track-surface::before {
    content: "";
    position: absolute;
    inset: 0 -1rem 0;
    z-index: -1;
    border-radius: 24px 24px 0 0;
    background:
        radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(128, 128, 128, 0.18), rgba(0, 0, 0, 0.78) 58%, rgba(0, 0, 0, 0.92));
}

.program-track-surface.pist-cim::before {
    background:
        radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(41, 190, 90, 0.44), rgba(6, 22, 12, 0.82) 48%, rgba(0, 0, 0, 0.94));
}

.program-track-surface.pist-kum::before {
    background:
        radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(142, 91, 46, 0.56), rgba(30, 18, 9, 0.84) 48%, rgba(0, 0, 0, 0.94));
}

.program-track-surface.pist-sentetik::before {
    background:
        radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(145, 151, 160, 0.46), rgba(18, 20, 24, 0.84) 48%, rgba(0, 0, 0, 0.94));
}

.home-date-card {
    margin-bottom: 1rem;
}

.ios-date-form {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    justify-content: space-between;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.75rem 1rem;
}

.date-arrow {
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--cyan);
    font-size: 2.35rem;
    line-height: 1;
    padding: 0;
}

.date-arrow:disabled {
    opacity: 1;
    cursor: default;
}

.ios-date-picker {
    position: relative;
    display: grid;
    flex: 1;
    justify-items: center;
    min-width: 0;
}

.ios-date-display {
    width: min(100%, 360px);
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.25;
    padding: 0.3rem 0.2rem;
    text-align: center;
}

.ios-date-display span {
    display: block;
    overflow-wrap: anywhere;
}

.tz-calendar {
    position: absolute;
    top: calc(100% + 0.8rem);
    left: 50%;
    z-index: 20;
    width: min(92vw, 330px);
    border: 1px solid rgba(37, 217, 239, 0.22);
    border-radius: 18px;
    background: rgba(6, 8, 12, 0.98);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.62);
    padding: 0.85rem;
    transform: translateX(-50%);
}

.tz-calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.tz-calendar-head strong {
    color: #fff;
    font-size: 0.96rem;
}

.tz-calendar-head button,
.tz-calendar-today {
    border: 1px solid rgba(37, 217, 239, 0.22);
    background: rgba(37, 217, 239, 0.08);
    padding: 0.45rem 0.65rem;
}

.tz-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.25rem;
}

.tz-weekday {
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.68rem;
    font-weight: 900;
    padding: 0.35rem 0;
    text-align: center;
    text-transform: uppercase;
}

.tz-day {
    aspect-ratio: 1;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 750;
    padding: 0;
    text-align: center;
}

.tz-day.is-muted {
    color: rgba(255, 255, 255, 0.24);
}

.tz-day.is-today {
    color: var(--cyan);
}

.tz-day.is-selected {
    background: var(--cyan);
    color: #001014;
}

.tz-calendar-footer {
    display: flex;
    justify-content: center;
    margin-top: 0.75rem;
}

/* ——— Anasayfa mini promo (promoshowcase 1. sayfa özeti, kart boyutunda) ——— */
.home-promo-mini {
    position: relative;
    display: flex;
    align-items: stretch;
    min-height: 123px;
    margin: 0 0 1rem;
    padding: 0;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(37, 217, 239, 0.28);
    background:
        radial-gradient(135% 150% at 0% 0%, rgba(37, 217, 239, 0.16), transparent 58%),
        linear-gradient(135deg, #0b1822 0%, #0a0f16 55%, #0c0a14 100%);
    box-shadow: 0 4px 16px rgba(37, 217, 239, 0.18);
    color: #fff;
    isolation: isolate;
    /* Anasayfa açılışında ortadan sola+sağa doğru akordiyon gibi açılma (5 sn) */
    animation: hpm-open 5s cubic-bezier(0.65, 0, 0.35, 1) 0.12s both;
}

/* Ortadan dışa doğru açılan akordiyon efekti */
@keyframes hpm-open {
    0% {
        clip-path: inset(0 50% 0 50% round 20px);
        opacity: 0;
    }
    35% {
        opacity: 1;
    }
    100% {
        clip-path: inset(0 0 0 0 round 20px);
        opacity: 1;
    }
}

/* Sürekli hareket hissi için yavaş ışık süpürmesi */
.home-promo-mini::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
        115deg,
        transparent 32%,
        rgba(37, 217, 239, 0.10) 47%,
        rgba(255, 255, 255, 0.07) 52%,
        transparent 68%
    );
    transform: translateX(-130%);
    animation: hpm-sheen 4.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes hpm-sheen {
    0% { transform: translateX(-130%); }
    60%, 100% { transform: translateX(130%); }
}

.home-promo-mini__badge {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    align-self: stretch;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    background: linear-gradient(180deg, rgba(37, 217, 239, 0.16), rgba(37, 217, 239, 0.03));
    border-right: 1px solid rgba(37, 217, 239, 0.2);
}

.home-promo-mini__badge b {
    color: var(--cyan);
    font-weight: 900;
}

/* Sağdaki ikiz rail — solun aynası (kenarlık karşı tarafta, yazı 180° ters) */
.home-promo-mini__badge--right {
    border-right: none;
    border-left: 1px solid rgba(37, 217, 239, 0.2);
    background: linear-gradient(0deg, rgba(37, 217, 239, 0.16), rgba(37, 217, 239, 0.03));
    transform: none;
}

.home-promo-mini__viewport {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    align-self: stretch;
    overflow: hidden;
}

.home-promo-mini__reel {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-promo-mini__frame {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.75rem 1.15rem 0.75rem 1.05rem;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.55s ease, transform 0.55s ease;
    pointer-events: none;
}

.home-promo-mini__frame.is-active {
    opacity: 1;
    transform: translateY(0);
}

.home-promo-mini__frame.is-exit {
    opacity: 0;
    transform: translateY(-12px);
}

.home-promo-mini__kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-align: center;
    color: rgba(255, 255, 255, 0.48);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Kicker sol tarafında küçük yanıp sönen "canlı" noktası */
.home-promo-mini__kicker::before {
    content: "";
    flex: 0 0 auto;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 0 0 rgba(37, 217, 239, 0.5);
    animation: hpm-dot 2.4s ease-out infinite;
}

/* İstatistik çerçevesi: başlık hero kicker'ı ile aynı şekilde en üstte;
   istatistik şeridi altındaki alanı doldurup dikeyde ortalanır. */
.home-promo-mini__frame--stats {
    justify-content: flex-start;
}

.home-promo-mini__frame--stats .hpm-stats {
    flex: 1;
}

.home-promo-mini__kicker--hit {
    color: rgba(37, 217, 239, 0.9);
}

.home-promo-mini__kicker--hit::before {
    background: #34d399;
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5);
    animation-name: hpm-dot-green;
}

.home-promo-mini__kicker em {
    font-style: normal;
    font-weight: 900;
    color: #34d399;
}

@keyframes hpm-dot {
    0% { box-shadow: 0 0 0 0 rgba(37, 217, 239, 0.45); }
    70%, 100% { box-shadow: 0 0 0 0.32rem rgba(37, 217, 239, 0); }
}

@keyframes hpm-dot-green {
    0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.45); }
    70%, 100% { box-shadow: 0 0 0 0.32rem rgba(52, 211, 153, 0); }
}

.hpm-stats {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

.hpm-stat {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.16rem;
    line-height: 1;
    min-width: 0;
    text-align: center;
}

.hpm-stat + .hpm-stat {
    border-left: 1px solid rgba(255, 255, 255, 0.09);
}

.hpm-stat b {
    font-size: 1.65rem;
    font-weight: 950;
    letter-spacing: -0.01em;
}

.hpm-stat i {
    font-size: 0.62rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
    white-space: nowrap;
}

.hpm-stat--cyan b { color: var(--cyan); }
.hpm-stat--amber b { color: #ffb300; }
.hpm-stat--coral b { color: #ff7043; }
.hpm-stat--white b { color: rgba(255, 255, 255, 0.95); }

/* Hero çerçevesi: kicker üstte; altındaki satır iki sütun — GANYAN/AGF blokları
   kazanan atın adıyla aynı hizada başlar. Sol alt köşede yarış AGF'i. */
.home-promo-mini__frame--hero {
    justify-content: flex-start;
}

.hpm-hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    min-height: 0;
    text-align: center;
}

.hpm-hero__name {
    width: 100%;
    font-size: 1.05rem;
    font-weight: 900;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.hpm-hero__meta {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.hpm-hero__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    margin-top: 0.28rem;
    width: 100%;
}

/* Yarış AGF bloğu (sol alt): büyük % değeri + altında küçük "YARIŞ AGF" etiketi */
.hpm-hero__fav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
    min-width: 0;
}

.hpm-hero__fav b {
    font-size: 1.32rem;
    font-weight: 950;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.9);
}

.hpm-hero__fav i {
    margin-top: 0.12rem;
    font-size: 0.6rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
    white-space: nowrap;
}

.hpm-hero__r {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0.34rem;
    text-align: right;
}

/* GANYAN (cyan) ve AGF (turuncu) blokları: değer büyük, altında küçük etiket */
.hpm-hero__g,
.hpm-hero__agf {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    text-align: center;
}

.hpm-hero__g b {
    font-size: 1.1rem;
    font-weight: 950;
    color: var(--cyan);
}

.hpm-hero__agf b {
    font-size: 1.1rem;
    font-weight: 950;
    color: #ffb300;
}

.hpm-hero__g i,
.hpm-hero__agf i {
    margin-top: 0.12rem;
    font-size: 0.6rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hpm-hero__g i {
    color: rgba(255, 255, 255, 0.4);
}

.hpm-hero__agf i {
    color: rgba(255, 179, 0, 0.72);
}

@media (prefers-reduced-motion: reduce) {
    .home-promo-mini {
        animation: none;
        clip-path: none;
    }
    .home-promo-mini::before,
    .home-promo-mini__kicker::before {
        animation: none;
    }
    .home-promo-mini::before {
        opacity: 0;
    }
    .home-promo-mini__frame,
    .home-promo-mini__frame.is-active,
    .home-promo-mini__frame.is-exit {
        transition: opacity 0.2s ease;
        transform: none;
    }
}

/* Mobil: stats sayıları küçült, hero sütunlarını dikey ortala, kicker taşmasını önle */
@media (max-width: 820px) {
    .hpm-stat b {
        font-size: 1.15rem;
    }
    .hpm-stat i {
        font-size: 0.57rem;
    }
    .home-promo-mini__kicker {
        font-size: 0.62rem;
        letter-spacing: 0.06em;
    }
}

/* Çok küçük ekranlar (≤360 px) */
@media (max-width: 360px) {
    .hpm-stat b {
        font-size: 0.98rem;
    }
    .hpm-stat i {
        font-size: 0.52rem;
    }
}

.ios-card-stack {
    display: grid;
    gap: 1.25rem;
}

.ios-image-card {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 110px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0)),
        var(--card-img) center / cover no-repeat,
        rgba(128, 128, 128, 0.18);
    box-shadow: 0 4px 12px rgba(37, 217, 239, 0.25);
    padding: 0 25px;
    isolation: isolate;
    transition: transform 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease;
}

.ios-image-card:hover {
    transform: translateY(-1px) scale(1.006);
    box-shadow: 0 8px 18px rgba(37, 217, 239, 0.28);
}

.ios-image-card:active {
    transform: scale(0.96);
    opacity: 0.9;
}

.ios-image-card span {
    color: #fff;
    font-size: 1.35rem;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
}

.race-city-card {
    min-height: 110px;
}

.home-action-stack {
    margin-top: 1.25rem;
}

.home-action-card {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.ios-image-card.home-action-card--disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.52;
    filter: grayscale(0.4) brightness(0.88);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    transition: none;
}

.ios-image-card.home-action-card--disabled:hover,
.ios-image-card.home-action-card--disabled:active {
    transform: none;
    opacity: 0.52;
    filter: grayscale(0.4) brightness(0.88);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.race-program-empty {
    display: grid;
    justify-items: center;
    min-height: 200px;
    border-color: rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: none;
    padding: 2rem 1rem;
    text-align: center;
}

.race-program-empty .empty-icon {
    color: rgba(37, 217, 239, 0.32);
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 1rem;
}

.race-program-empty h2 {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.96rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    margin: 0 0 0.4rem;
}

.race-program-empty p {
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.8rem;
    font-weight: 700;
    margin: 0;
}

/* ── TayZeka Countdown Empty State ─────────────────────────────────── */

.tz-countdown-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 48px 20px 64px;
    min-height: 60vh;
    text-align: center;
}

/* Pulsing logo */
.tz-countdown-logo-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
}

.tz-countdown-pulse {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(6, 182, 212, 0.30);
    opacity: 0;
    animation: tz-cd-pulse 2.6s ease-out infinite;
}
.tz-countdown-pulse:nth-child(1) { width: 154px; height: 154px; animation-delay: 0s; }
.tz-countdown-pulse:nth-child(2) { width: 186px; height: 186px; animation-delay: 0.7s; }
.tz-countdown-pulse:nth-child(3) { width: 218px; height: 218px; animation-delay: 1.4s; }

@keyframes tz-cd-pulse {
    0%   { opacity: 0.45; transform: scale(0.85); }
    60%  { opacity: 0.14; transform: scale(1.00); }
    100% { opacity: 0;    transform: scale(1.10); }
}

.tz-countdown-logo-img {
    position: relative;
    z-index: 1;
    width: 120px;
    height: 120px;
    object-fit: contain;
}

/* Date message */
.tz-countdown-date-msg {
    font-size: 1.05rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.90);
    max-width: 320px;
    line-height: 1.45;
    margin: 0;
}

/* Countdown card */
.tz-countdown-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 22px 18px;
    background: rgba(255, 255, 255, 0.045);
    border-radius: 20px;
    border: 1.5px solid rgba(255, 255, 255, 0.09);
    max-width: 340px;
    width: 100%;
}

/* Phase-based card border accent */
.tz-countdown-empty[data-phase="morning"] .tz-countdown-card {
    border-color: rgba(249, 115, 22, 0.28);
}
.tz-countdown-empty[data-phase="noon"] .tz-countdown-card {
    border-color: rgba(234, 179, 8, 0.28);
}

.tz-countdown-hdr {
    display: flex;
    align-items: center;
    gap: 7px;
}

.tz-countdown-ico {
    font-size: 1.15rem;
    line-height: 1;
}

.tz-countdown-lbl {
    font-size: 0.93rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.90);
}

.tz-countdown-digits {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tz-cd-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 74px;
    height: 74px;
    border-radius: 12px;
    background: rgba(249, 115, 22, 0.14);
    border: 1px solid rgba(249, 115, 22, 0.26);
    transition: background 0.4s, border-color 0.4s;
}

.tz-countdown-empty[data-phase="noon"] .tz-cd-box {
    background: rgba(234, 179, 8, 0.14);
    border-color: rgba(234, 179, 8, 0.26);
}

.tz-cd-num {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -1px;
}

.tz-cd-unit {
    font-size: 0.56rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.40);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tz-cd-sep {
    font-size: 1.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1;
    margin-bottom: 14px;
}

/* Mobile compact */
@media (max-width: 400px) {
    .tz-cd-box   { width: 66px; height: 66px; }
    .tz-cd-num   { font-size: 1.75rem; }
    .tz-countdown-date-msg { font-size: 0.95rem; }
}

/* ── end TayZeka Countdown ───────────────────────────────────────── */

.program-shell {
    margin-bottom: 0.8rem;
}

.program-city-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 65px;
}

.city-picker {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: min(42vw, 210px);
    min-height: 26px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 900;
    padding: 0.12rem 0.45rem;
}

.city-picker select {
    min-width: 0;
    max-width: 100%;
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    outline: 0;
    text-overflow: ellipsis;
}

.city-picker option {
    color: #111;
}

.program-date-weather {
    display: grid;
    justify-items: end;
    gap: 0.2rem;
    min-width: 0;
    margin-left: auto;
    text-align: right;
}

.program-date-weather strong,
.program-date-weather span {
    overflow-wrap: anywhere;
}

.program-date-weather strong {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.82rem;
    font-weight: 800;
}

.program-date-weather span {
    color: rgba(255, 255, 255, 0.56);
    font-size: 0.7rem;
    font-weight: 650;
}

.program-race-header {
    position: relative;
    display: grid;
    gap: 0.45rem;
    min-height: 80px;
    color: #fff;
    overflow: visible;
    border-radius: 18px;
    isolation: isolate;
    padding: 0.85rem;
    z-index: 25;
}

.program-race-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(128, 128, 128, 0.18), rgba(0, 0, 0, 0.18));
    opacity: 0.82;
}

.program-race-header.pist-cim::before {
    background: linear-gradient(180deg, rgba(41, 190, 90, 0.3), rgba(0, 0, 0, 0.28));
}

.program-race-header.pist-kum::before {
    background: linear-gradient(180deg, rgba(142, 91, 46, 0.42), rgba(0, 0, 0, 0.3));
}

.program-race-header.pist-sentetik::before {
    background: linear-gradient(180deg, rgba(145, 151, 160, 0.34), rgba(0, 0, 0, 0.28));
}

.program-race-title,
.program-race-title-trailing {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.program-race-title {
    justify-content: space-between;
}

.program-race-title > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
}

.program-race-title strong {
    font-size: 0.95rem;
}

/* Tay Zeka: sol | ortada cyan kapsül | saat */
.tz-program-race-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.35rem 0.5rem;
    width: 100%;
}

.tz-race-title-start {
    justify-self: start;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
}

.tz-program-race-title > .tz-prediction-type {
    justify-self: center;
    text-align: center;
    max-width: 100%;
}

.tz-program-race-title > time {
    justify-self: end;
}

.program-race-title > div > span,
.program-race-title time {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.2rem 0.55rem;
}

.program-race-subtitle p {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.86rem;
    font-weight: 800;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.race-info-popover {
    position: relative;
    z-index: 1001;
}

.race-info-popover summary {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 950;
    line-height: 1;
    list-style: none;
}

.race-info-popover summary::-webkit-details-marker {
    display: none;
}

.odds-popover summary {
    color: var(--cyan);
}

.earnings-popover summary {
    color: var(--orange);
}

.race-info-popover[open] summary {
    color: #001014;
}

.odds-popover[open] summary {
    background: var(--cyan);
}

.earnings-popover[open] summary {
    background: var(--orange);
}

.race-popover-panel {
    position: fixed;
    top: var(--popover-top, 0);
    left: var(--popover-left, 0);
    z-index: 1002;
    width: min(82vw, 280px);
    border: 1px solid rgba(37, 217, 239, 0.2);
    border-radius: 12px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.72);
    overflow: hidden;
}

.odds-panel {
    background: rgb(18, 18, 18);
    padding: 0.35rem 0;
}

.odds-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    justify-content: space-between;
    border-bottom: 1px solid rgba(37, 217, 239, 0.12);
    color: rgba(37, 217, 239, 0.72);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.8rem;
    font-weight: 950;
    padding: 0.28rem 0.85rem;
}

.odds-row:last-child {
    border-bottom: 0;
}

.odds-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.odds-row strong {
    color: var(--orange);
    white-space: nowrap;
}

.earnings-panel {
    width: max-content;
    min-width: 190px;
    background: #000;
    padding: 0.75rem 0 0.85rem;
}

.earnings-panel h3 {
    color: rgba(37, 217, 239, 0.62);
    font-size: 0.75rem;
    font-weight: 950;
    margin: 0 0 0.35rem;
    padding: 0 1rem;
}

.earnings-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid rgba(37, 217, 239, 0.15);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    padding: 0.38rem 1rem;
}

.earnings-row:last-child {
    border-bottom: 0;
}

.earnings-row span {
    color: rgba(37, 217, 239, 0.72);
    font-size: 0.82rem;
    font-weight: 900;
}

.earnings-row strong {
    color: var(--orange);
    font-size: 0.82rem;
    font-weight: 900;
    white-space: nowrap;
}

.race-tab-strip {
    /* Match AGF odds-run-strip behavior: fill width, scroll if needed */
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.5rem 0 0.65rem;
    margin-bottom: 0.9rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
}

.race-tab-strip::-webkit-scrollbar {
    height: 6px;
}

.race-tab {
    display: grid;
    place-items: center;
    flex: 1 0 auto;
    min-width: 2.35rem;
    height: 2.35rem;
    border-radius: 8px;
    background: rgba(128, 128, 128, 0.1);
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.85rem;
    font-weight: 900;
    text-decoration: none;
}

.race-tab.is-selected {
    background: linear-gradient(180deg, rgba(37, 217, 239, 0.9), rgba(46, 167, 255, 0.84));
    color: #001014;
}

.race-tab.is-selected.pist-cim {
    background: linear-gradient(180deg, rgba(41, 190, 90, 0.3), rgba(41, 190, 90, 0.9));
}

.race-tab.is-selected.pist-kum {
    background: linear-gradient(180deg, rgba(142, 91, 46, 0.34), rgba(142, 91, 46, 0.9));
}

.race-tab.is-selected.pist-sentetik {
    background: linear-gradient(180deg, rgba(145, 151, 160, 0.34), rgba(145, 151, 160, 0.92));
}

.program-list {
    display: grid;
    gap: 0.35rem;
}

.program-result-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.program-result-toolbar button,
.program-result-toolbar a {
    border: 0;
    border-radius: 999px;
    background: rgba(37, 217, 239, 0.85);
    color: #001014;
    cursor: pointer;
    min-width: 104px;
    font-size: 0.78rem;
    font-weight: 900;
    padding: 0.4rem 0.75rem;
    text-align: center;
    white-space: nowrap;
}

.program-result-toolbar button {
    font-family: inherit;
}

.program-result-toolbar a {
    background: rgba(255, 174, 66, 0.9);
}

.result-toggle-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.result-toggle-icon {
    display: inline-flex;
    align-items: center;
    align-self: center;
    font-size: 1.08rem;
    line-height: 0.8;
    transform: translateY(-0.02em);
}

.photo-finish {
    width: 100%;
    max-height: 360px;
    object-fit: contain;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}

.program-horse-row {
    overflow: hidden;
    border-radius: 8px;
    background: rgba(245, 245, 245, 0.96);
    color: #111;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    margin: 0.12rem 0.25rem;
    content-visibility: auto;
    contain-intrinsic-size: auto 52px;
}

/* Swipe actions for Program horse rows (iOS-style right action). */
.tz-swipe-row {
    position: relative;
    touch-action: pan-y;
}

.tz-swipe-actions {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    padding: 0;
    background: rgba(0, 0, 0, 0.06);
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease;
}

.tz-swipe-action {
    width: 86px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.28rem;
    text-decoration: none;
    font-weight: 950;
    letter-spacing: 0.2px;
    color: #001014;
    background: linear-gradient(135deg, rgba(37, 217, 239, 0.92), rgba(0, 122, 255, 0.72));
    border-left: 1px solid rgba(0, 0, 0, 0.08);
}

.tz-swipe-action-ico {
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001014' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Ccircle cx='11' cy='13' r='2.75'/%3E%3Cpath d='M13.2 15.2 15.5 17.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0.92;
}

.tz-swipe-action-label {
    font-size: 0.74rem;
    line-height: 1;
}

.tz-swipe-action--disabled {
    color: rgba(0, 0, 0, 0.45);
    background: rgba(255, 255, 255, 0.45);
}

.tz-swipe-front {
    will-change: transform;
    transform: translateX(0);
    transition: transform 180ms ease;
    background: rgba(245, 245, 245, 0.96);
}

.tz-swipe-row.is-open .tz-swipe-front {
    transform: translateX(-86px);
}

.tz-swipe-row.is-open .tz-swipe-actions {
    opacity: 1;
    pointer-events: auto;
}

@media (pointer: fine) {
    .tz-swipe-actions {
        background: rgba(0, 0, 0, 0.04);
    }
}

/* Desktop: in-card detail button (no swipe needed). */
.program-horse-detail-btn {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.26rem 0.5rem;
    margin-top: 0.35rem;
    margin-left: auto;
    border-radius: 8px;
    background: rgba(37, 217, 239, 0.22);
    border: 1px solid rgba(37, 217, 239, 0.38);
    color: rgba(0, 0, 0, 0.74);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.2px;
    text-decoration: none;
    white-space: nowrap;
}

.program-horse-detail-btn::before {
    content: "";
    width: 16px;
    height: 16px;
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(0,0,0,0.74)' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Ccircle cx='11' cy='13' r='2.75'/%3E%3Cpath d='M13.2 15.2 15.5 17.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0.9;
}

@media (max-width: 820px) {
    .program-horse-detail-btn {
        display: none;
    }
}

.tz-agf-detail-line {
    align-items: center;
}

.tz-agf-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.tz-agf-detail-line .program-horse-detail-btn {
    margin-top: 0;
    margin-left: auto;
    align-self: center;
}

.program-horse-card-header {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) minmax(88px, auto) auto;
    align-items: center;
    min-height: 38px;
    gap: 0.25rem;
    overflow: hidden;
    list-style: none;
    padding: 0 0.55rem 0 0;
}

/* Program list rows: reserve space for in-card Detay button on desktop. */
@media (pointer: fine) {
    .list-item-row .program-horse-card-header {
        /* forma (absolute) + no + name + right meta */
        grid-template-columns: 38px minmax(0, 1fr) minmax(160px, auto);
        padding-right: 0.25rem;
    }

    .list-item-row .horse-right-meta {
        justify-self: end;
        max-width: 160px;
    }

    .list-item-row .program-horse-detail-btn {
        justify-self: end;
    }
}

.program-horse-row summary {
    cursor: pointer;
}

.program-horse-row summary::-webkit-details-marker,
.program-horse-card-header::-webkit-details-marker {
    display: none;
}

.horse-forma {
    position: absolute;
    inset: 0 auto 0 0;
    width: 38%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), transparent), var(--forma-img) center / cover no-repeat;
    opacity: 0.92;
    -webkit-mask-image: linear-gradient(90deg, #000 48%, transparent);
    mask-image: linear-gradient(90deg, #000 48%, transparent);
}

.program-horse-row .horse-no,
.horse-name-line strong {
    position: relative;
    z-index: 1;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}

.program-horse-row .horse-no {
    display: block;
    justify-self: center;
    min-width: 0;
    height: auto;
    border-radius: 0;
    background: transparent;
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 950;
}

.horse-name-line {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.horse-name-line strong {
    overflow: hidden;
    font-size: 0.78rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.horse-name-line img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.horse-right-meta {
    display: grid;
    justify-items: end;
    gap: 0.1rem;
    min-width: 0;
    justify-self: end;
    margin-left: auto;
}

.horse-right-meta > span:first-child {
    overflow: hidden;
    color: #111;
    font-size: 0.72rem;
    font-weight: 850;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.horse-right-meta em {
    color: #d71920;
    font-size: 0.58rem;
    font-style: normal;
    font-weight: 950;
    margin-right: 0.2rem;
}

.last-races {
    display: flex;
    gap: 1px;
    justify-content: flex-end;
}

.last-races i {
    min-width: 0.7rem;
    border-radius: 3px;
    color: #fff;
    font-size: 0.52rem;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    padding: 0.12rem 0.16rem;
}

.surface-cim {
    background: #249447;
}

.surface-kum {
    background: #8e5b2e;
}

.surface-sentetik {
    background: #7d858f;
}

.surface-default {
    background: #777;
}

.result-rank,
.program-horse-card-header > b {
    border-radius: 5px;
    background: rgba(37, 217, 239, 0.92);
    color: #001014;
    font-size: 0.68rem;
    padding: 0.18rem 0.35rem;
}

.program-horse-row.scratched .horse-name-line strong {
    color: #ff5a68;
    text-decoration: line-through;
}

.horse-row-body {
    display: grid;
    gap: 0.3rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    color: #444;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.55rem 0.75rem;
}

.horse-body-line {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    min-width: 0;
}

.horse-body-line .dot {
    color: #9a9a9a;
}

.age-badge {
    border-radius: 3px;
    background: rgba(142, 91, 46, 0.82);
    color: #fff;
    font-weight: 850;
    padding: 0.08rem 0.28rem;
}

.equipment {
    color: #218c45;
    font-weight: 850;
}

.pedigree-line {
    overflow: hidden;
    color: #777;
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.owner-name,
.owner-trainer {
    overflow: hidden;
    min-width: 0;
    margin-left: auto;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.owner-trainer {
    display: grid;
    gap: 0.05rem;
    margin-left: 0;
    text-align: left;
}

.owner-trainer-right {
    margin-left: auto;
    text-align: right;
}

.owner-trainer strong {
    overflow: hidden;
    color: #666;
    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.owner-trainer small {
    overflow: hidden;
    color: #777;
    font-size: 0.65rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ────────────────────────────────────────────────────────────────────────── */
/* Horse detail (iOS HorseDetailView port) */
/* ────────────────────────────────────────────────────────────────────────── */

.tz-horse-detail-page {
    background: #000;
    color: #fff;
}

.tz-horse-detail {
    width: 100%;
    max-width: 100%;
}

.tz-horse-hero {
    position: relative;
    height: 180px;
    overflow: hidden;
    border-radius: 14px;
    margin: 0.35rem 0.5rem 0;
    background: #07121a;
}

.tz-horse-hero-img {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(37, 217, 239, 0.25), rgba(0, 122, 255, 0.35)),
        var(--hero-img) center / cover no-repeat;
    opacity: 0.96;
}

.tz-horse-hero-img--placeholder {
    background: linear-gradient(135deg, rgba(37, 217, 239, 0.25), rgba(0, 122, 255, 0.35));
}

.tz-horse-hero-grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.7),
        rgba(0, 0, 0, 0.38),
        rgba(0, 0, 0, 0.0),
        rgba(0, 0, 0, 0.62),
        rgba(0, 0, 0, 0.92)
    );
}

.tz-horse-hero-inner {
    position: relative;
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
    padding: 0.6rem 0.8rem 0.8rem;
}

.tz-horse-hero-close {
    justify-self: end;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(0, 0, 0, 0.25);
    text-decoration: none;
    font-size: 1.55rem;
    line-height: 1;
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
}

.tz-horse-hero-title {
    align-self: end;
    display: grid;
    gap: 0.55rem;
    text-align: center;
}

.tz-horse-hero-name {
    font-size: 1.4rem;
    font-weight: 950;
    letter-spacing: 0.2px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.tz-horse-hero-badges {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.35rem 0.55rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.68);
    border: 1.5px solid rgba(37, 217, 239, 0.35);
}

.tz-horse-badge {
    display: grid;
    gap: 0.18rem;
}

.tz-horse-badge span {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.55rem;
    font-weight: 900;
    letter-spacing: 1px;
}

.tz-horse-badge b {
    color: rgba(37, 217, 239, 0.95);
    font-size: 0.86rem;
    font-weight: 950;
}

.tz-horse-detail-body {
    padding: 0.9rem 0.7rem 2rem;
}

.tz-horse-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.tz-horse-card {
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(37, 217, 239, 0.22);
    box-shadow: 0 4px 14px rgba(37, 217, 239, 0.08);
    overflow: hidden;
}

.tz-horse-kv {
    display: grid;
    gap: 0.2rem;
    padding: 0.6rem 0.7rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.tz-horse-kv:first-child {
    border-top: 0;
}

.tz-horse-kv span {
    color: rgba(37, 217, 239, 0.9);
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.6px;
}

.tz-horse-kv b {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1.2;
}

.tz-horse-card-title {
    padding: 0.75rem 0.85rem 0.6rem;
    color: rgba(37, 217, 239, 0.95);
    font-size: 0.62rem;
    font-weight: 950;
    letter-spacing: 1.4px;
}

.tz-horse-stats,
.tz-horse-history {
    margin-top: 0.75rem;
}

.tz-horse-stats {
    overflow: hidden;
}

.tz-horse-stats-scroll,
.tz-horse-history-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 0.35rem 0.65rem;
}

/* Subtle edge fade hint for horizontal scroll */
.tz-horse-stats-scroll {
    position: relative;
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}

.tz-horse-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.72rem;
}

.tz-horse-table--stats {
    table-layout: fixed;
    min-width: 640px;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.tz-col-kategori {
    width: 12.5%;
}

.tz-col-small {
    width: 12.5%;
}

.tz-col-earn {
    width: 12.5%;
    min-width: 0;
}

.tz-horse-table--wide {
    min-width: 1200px;
}

.tz-horse-table--history {
    table-layout: fixed;
    min-width: 1180px;
}

/* History column widths (keeps header/data perfectly aligned) */
.tz-col-sira {
    width: 58px; /* "SIRA" fits */
}
.tz-col-tarih {
    width: 94px;
}
.tz-col-sehir {
    width: 84px;
}
.tz-col-mesafe {
    width: 68px;
}
.tz-col-kilo {
    width: 56px;
}
.tz-col-derece {
    width: 86px;
}
.tz-col-jokey {
    width: 110px;
}
.tz-col-g {
    width: 56px;
}
.tz-col-grup {
    width: 52px;
}
.tz-col-kosu {
    width: 96px;
}
.tz-col-taki {
    width: 86px;
}
.tz-col-antrenor {
    width: 110px;
}
.tz-col-sahip {
    width: 128px;
}
.tz-col-hp {
    width: 56px;
}
.tz-col-ikramiye {
    width: 96px;
}
.tz-col-s20 {
    width: 56px;
}
.tz-col-izle {
    width: 52px;
}
.tz-col-foto {
    width: 52px;
}

.tz-horse-table--history th,
.tz-horse-table--history td {
    overflow: hidden;
    text-overflow: clip;
}

.tz-horse-table--history th {
    cursor: pointer;
    user-select: none;
}

.tz-horse-table--history th[data-hsort]::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 0.25rem;
    transform: translateY(1px);
    opacity: 0.0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(37,217,239,0.85)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5-5 5 5'/%3E%3Cpath d='m7 14 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.tz-horse-table--history th.is-sort-active {
    color: rgba(37, 217, 239, 0.95);
}

.tz-horse-table--history th.is-sort-active::after {
    opacity: 0.95;
}

.tz-horse-table--history th.is-sort-desc::after {
    transform: translateY(1px) rotate(180deg);
}

.tz-h-freeze {
    position: sticky;
    left: 0;
    z-index: 3;
    background: rgba(0, 0, 0, 0.38);
}

.tz-horse-table--history td.tz-h-freeze {
    z-index: 2;
    background: rgba(0, 0, 0, 0.32);
}

.tz-h-sira.is-podium {
    color: rgba(255, 159, 10, 0.96);
    font-weight: 950;
}

.tz-horse-table th {
    position: sticky;
    top: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.52));
    color: rgba(255, 255, 255, 0.48);
    font-weight: 900;
    font-size: 0.68rem;
    letter-spacing: 0.3px;
    text-align: left;
    padding: 0.5rem 0.55rem;
    border-bottom: 1px solid rgba(37, 217, 239, 0.18);
    white-space: nowrap;
    backdrop-filter: blur(10px);
}

.tz-horse-table td {
    padding: 0.5rem 0.55rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    white-space: nowrap;
}

.tz-horse-table--stats th,
.tz-horse-table--stats td {
    font-variant-numeric: tabular-nums;
}

.tz-horse-table--stats th {
    text-transform: uppercase;
    letter-spacing: 0.55px;
}

.tz-horse-table--stats td {
    color: rgba(255, 255, 255, 0.86);
}

.tz-horse-table tbody tr:nth-child(odd) td {
    background: rgba(255, 255, 255, 0.02);
}

.tz-horse-table--stats tbody tr td {
    background: rgba(255, 255, 255, 0.015);
}

.tz-horse-table--stats tbody tr:nth-child(odd) td {
    background: rgba(255, 255, 255, 0.03);
}

.tz-horse-table--stats tbody tr:hover td {
    background: rgba(37, 217, 239, 0.08);
}

.tz-horse-table--stats tbody tr.is-total td {
    background: linear-gradient(90deg, rgba(37, 217, 239, 0.12), rgba(0, 122, 255, 0.06));
    border-top-color: rgba(37, 217, 239, 0.18);
}

.tz-horse-table--stats tbody tr.is-total td:first-child {
    color: rgba(37, 217, 239, 0.98);
    font-weight: 950;
    letter-spacing: 0.2px;
}

.tz-horse-table--stats tbody tr.is-total td.t-right {
    color: rgba(255, 159, 10, 0.95);
    font-weight: 950;
}

.tz-horse-table--stats td:first-child {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 800;
}

.tz-horse-table--stats td.t-center {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 900;
}

.tz-horse-table--stats td.t-right {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 900;
}

/* Stats: numeric columns (KOSU + 1..5) left-aligned as requested */
.tz-horse-table--stats th:nth-child(2),
.tz-horse-table--stats th:nth-child(3),
.tz-horse-table--stats th:nth-child(4),
.tz-horse-table--stats th:nth-child(5),
.tz-horse-table--stats th:nth-child(6),
.tz-horse-table--stats th:nth-child(7),
.tz-horse-table--stats td:nth-child(2),
.tz-horse-table--stats td:nth-child(3),
.tz-horse-table--stats td:nth-child(4),
.tz-horse-table--stats td:nth-child(5),
.tz-horse-table--stats td:nth-child(6),
.tz-horse-table--stats td:nth-child(7) {
    text-align: left;
}

.tz-horse-table--stats td.t-right {
    padding-right: 0.75rem;
}

.tz-horse-table--stats th.t-right {
    padding-right: 0.75rem;
    text-align: right;
}

.tz-horse-table--history tbody tr:nth-child(odd) td.tz-h-freeze {
    background: rgba(0, 0, 0, 0.36);
}

.tz-horse-table--history th.tz-h-freeze {
    text-align: center;
}

.tz-horse-table tbody tr.is-total td:first-child {
    color: rgba(37, 217, 239, 0.95);
    font-weight: 950;
}

.tz-horse-table tbody tr.is-scratched td {
    opacity: 0.42;
}

.tz-horse-cell-cyan {
    color: rgba(37, 217, 239, 0.9);
    font-weight: 850;
}

.tz-horse-cell-orange {
    color: rgba(255, 159, 10, 0.92);
    font-weight: 900;
}

.tz-horse-link {
    color: rgba(37, 217, 239, 0.95);
    text-decoration: none;
    font-weight: 950;
}

.tz-horse-link--orange {
    color: rgba(255, 159, 10, 0.95);
}

.t-center {
    text-align: center;
}

.t-right {
    text-align: right;
}

@media (max-width: 720px) {
    .tz-horse-two-col {
        grid-template-columns: 1fr;
    }
    .tz-horse-hero {
        margin: 0.35rem 0.35rem 0;
        border-radius: 12px;
    }
    .tz-horse-detail-body {
        padding: 0.85rem 0.45rem 2rem;
    }
}


.ganyan-pill,
.finish-gap,
.finish-time {
    border-radius: 4px;
    font-size: 0.72rem;
    padding: 0.14rem 0.38rem;
}

.ganyan-pill {
    margin-left: auto;
    background: rgba(41, 190, 90, 0.15);
    color: #1c8a3d;
}

.finish-gap {
    margin-left: auto;
    background: rgba(255, 174, 66, 0.12);
    color: #d6891c;
}

.finish-time {
    background: rgba(37, 217, 239, 0.12);
    color: #058ea0;
}

.agf-line {
    gap: 0.35rem;
}

.agf-bar {
    position: relative;
    width: 55px;
    height: 14px;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.68);
}

.agf-bar > span {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(90deg, var(--cyan), #2e7dff);
}

.agf-bar b {
    position: relative;
    z-index: 1;
    display: block;
    color: #fff;
    font-size: 0.5rem;
    font-weight: 950;
    line-height: 14px;
    padding-left: 0.22rem;
    text-shadow: 0 1px 2px #000;
}

/* Desktop: larger AGF bar for readability */
@media (pointer: fine) {
    .agf-bar {
        width: 80px;
        height: 20px;
        border-radius: 6px;
    }

    .agf-bar b {
        font-size: 0.66rem;
        line-height: 20px;
        padding-left: 0;
        text-align: center;
    }
}

.tz-prediction-shell {
    display: grid;
    gap: 0.85rem;
    width: 100%;
    margin: 0 auto;
}

/* Tay Zeka: Program ile aynı içerik genişliği (masaüstü); telefonda iOS’a yakın dar sütun */
@media (max-width: 599px) {
    .tz-prediction-shell {
        width: min(100%, 430px);
    }
}

/* Premium kapısı: içerik yüksek olsa bile kilit mesajını section alanında (görünür viewport) ortala */
.tz-prediction-shell--premium-gated {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: calc(100svh - 148px - 5rem); /* sticky üst blok + ana sayfa üst-alt dolgu yaklaşımı */
    min-height: calc(100dvh - 148px - 5rem);
}

@media (max-width: 820px) {
    .tz-prediction-shell--premium-gated {
        /* Sabit alt tab + .page mobil alt dolgusu — mesajı görünür alanın ortasına yaklaştır */
        min-height: calc(100svh - 124px - 7.8rem - env(safe-area-inset-bottom, 0px));
        min-height: calc(100dvh - 124px - 7.8rem - env(safe-area-inset-bottom, 0px));
    }
}

.tz-premium-gate-stack {
    position: relative;
    width: 100%;
    min-width: 0;
}

.tz-prediction-shell--premium-gated .tz-premium-gate-stack {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.tz-prediction-shell--premium-gated .tz-premium-gate-underlay {
    filter: blur(12px);
    -webkit-filter: blur(12px);
    opacity: 0.48;
    pointer-events: none;
    user-select: none;
}

.tz-premium-gate-overlay {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    /* Uzun (kaydırılabilir) içerikte dikey ortalama kiliti ekranın altına itiyordu;
       viewport'a göre üst kısma alındı — hem mobil hem desktop yukarıda görünür. */
    padding: min(20vh, 190px) clamp(12px, 4vw, 28px) clamp(12px, 4vw, 28px);
    text-align: center;
    pointer-events: auto;
    width: 100%;
    box-sizing: border-box;
}

.tz-premium-gate-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse 90% 70% at 50% 32%, rgba(15, 25, 32, 0.18), transparent 62%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.92) 100%);
}

.tz-premium-gate-inner {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    align-content: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    max-width: min(26rem, 100%);
    margin-inline: auto;
    min-width: 0;
}

.tz-premium-gate-lock {
    color: var(--cyan);
    filter: drop-shadow(0 0 16px rgba(37, 217, 239, 0.38));
}

.tz-premium-gate-msg {
    margin: 0;
    color: var(--cyan);
    font-size: clamp(0.92rem, 3.8vw, 1.06rem);
    font-weight: 750;
    line-height: 1.35;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.tz-premium-gate-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 1.5rem;
    max-width: min(100%, 320px);
    border-radius: 999px;
    background: var(--cyan);
    color: rgba(0, 0, 0, 0.88);
    font-size: 0.74rem;
    font-weight: 950;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-align: center;
    line-height: 1.2;
    box-shadow: 0 4px 18px rgba(37, 217, 239, 0.35);
    -webkit-tap-highlight-color: transparent;
}

.tz-premium-gate-cta:focus-visible {
    outline: 2px solid rgba(37, 217, 239, 0.85);
    outline-offset: 3px;
}

.tz-premium-gate-cta:active {
    transform: scale(0.985);
}

.tz-prediction-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cyan);
    border-radius: 999px;
    background: transparent;
    color: var(--cyan);
    font-size: 0.68rem;
    font-weight: 850;
    padding: 0.28rem 0.65rem;
    white-space: nowrap;
    box-shadow: 0 0 0 1px rgba(37, 217, 239, 0.12);
    letter-spacing: 0.02em;
}

.tz-toolbar {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 6px;
    width: 100%;
    min-width: 0;
    padding: 8px 0 12px;
}

.tz-cap {
    flex: 1 1 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    margin: 0;
    padding: 8px 5px;
    border: none;
    border-radius: 999px;
    font-family: inherit;
    font-size: clamp(7.5px, 2.05vw, 11px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: rgba(0, 0, 0, 0.82);
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.tz-cap:focus-visible {
    outline: 2px solid rgba(37, 217, 239, 0.65);
    outline-offset: 2px;
}

.tz-cap-detail {
    background: rgba(37, 217, 239, 0.88);
    box-shadow: 0 2px 8px rgba(37, 217, 239, 0.2);
}

.tz-cap-kurgu {
    background: rgba(248, 248, 248, 0.9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.tz-cap-weights {
    background: rgba(255, 135, 48, 0.92);
    box-shadow: 0 2px 8px rgba(255, 135, 48, 0.2);
    justify-content: space-between;
    padding-left: 8px;
    padding-right: 8px;
}

.tz-cap-weights .tz-cap-label {
    flex: 1 1 auto;
    text-align: center;
    padding: 0 2px;
}

.tz-cap:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.tz-cap-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
}

.tz-cap-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.tz-cap-trail {
    width: 12px;
    height: 12px;
    opacity: 0.85;
}

.tz-cap-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* —— Tay Zeka toolbar: koşu ağırlıkları paneli (PredictionTabView) —— */
.tz-toolbar-wrap {
    width: 100%;
    min-width: 0;
}

.tz-weights-panel {
    margin-top: 0.4rem;
    padding: 0 0 0.35rem;
    min-width: 0;
}

.tz-weights-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    min-height: 9rem;
    max-width: 100%;
}

.tz-w-caps {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.28rem;
    min-width: 0;
    margin: 0;
    padding: 0.45rem 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(9px, 2.4vw, 13px);
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

.tz-w-caps:focus-visible {
    outline: 2px solid rgba(37, 217, 239, 0.65);
    outline-offset: 2px;
}

.tz-w-caps-ico {
    flex-shrink: 0;
    font-size: 1em;
    line-height: 1;
}

.tz-w-caps-t {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.tz-w-caps-p {
    flex-shrink: 0;
    font-family: ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

.tz-weight-slider-layer {
    position: relative;
    margin-top: 0.5rem;
    padding: 0.55rem 0 0.25rem;
}

.tz-weight-slider-dismiss {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    cursor: default;
    z-index: 0;
}

/* iOS Pill Slider — alttaki faktör slider'ı */
.tz-glass-slider-wrap {
    position: relative;
    z-index: 1;
    height: 54px;
    border-radius: 27px;
    overflow: hidden;
}

.tz-glass-slider-head {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 0.38rem;
    font-size: 0.78rem;
    font-weight: 900;
    font-family: ui-monospace, monospace;
    letter-spacing: 0.05em;
    color: #0d1919;
    text-transform: uppercase;
    margin-bottom: 0;
}

.tz-glass-range-label {
    position: absolute;
    inset: 0;
    display: block;
    margin: 0;
}

.tz-glass-range {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 54px;
    border-radius: 27px;
    border: none;
    outline: none;
    cursor: pointer;
    background: linear-gradient(
        to right,
        #25d9ef var(--v, 50%),
        #2e2b2b var(--v, 50%)
    );
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.tz-glass-range::-webkit-slider-runnable-track {
    height: 54px;
    border-radius: 27px;
    background: transparent;
}

.tz-glass-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.38);
    cursor: grab;
    margin-top: 4px;
}

.tz-glass-range:active::-webkit-slider-thumb {
    cursor: grabbing;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.5);
}

.tz-glass-range::-moz-range-track {
    height: 54px;
    border-radius: 27px;
    background: transparent;
}

.tz-glass-range::-moz-range-thumb {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.38);
    border: none;
    cursor: grab;
}

.tz-glass-range-val {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
    font-family: ui-monospace, monospace;
    font-size: 0.92rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.85);
    mix-blend-mode: normal;
    filter: none;
    text-shadow: none;
}

.tz-glass-slider-wrap .tz-glass-range-val {
    color: rgba(255, 255, 255, 0.85);
    mix-blend-mode: normal;
    filter: none;
    text-shadow: none;
}

.tz-kurgu-toast {
    display: block;
    margin-top: 0.5rem;
    padding: 0.65rem 0.75rem;
    max-width: min(560px, 100%);
    margin-left: auto;
    margin-right: auto;
    font-size: 0.68rem;
    font-weight: 650;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.92);
    text-align: center;
    background: rgba(0, 0, 0, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.65rem;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.42);
}

.tz-kurgu-toast--ephemeral {
    margin-bottom: 0;
}

.tz-cap-trail.is-open svg {
    transform: rotate(180deg);
}

.tz-cap-trail svg {
    transition: transform 0.2s ease;
}

/* ─── iOS-Style Weight Sliders ─────────────────────────────────────────── */
.tz-kw-sliders {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.tz-ios-slider-row {
    position: relative;
    width: 100%;
}

.tz-ios-range {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 54px;
    border-radius: 27px;
    border: none;
    outline: none;
    cursor: pointer;
    background: linear-gradient(
        to right,
        #25d9ef var(--v, 50%),
        #2e2b2b var(--v, 50%)
    );
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.tz-ios-range::-webkit-slider-runnable-track {
    height: 54px;
    border-radius: 27px;
    background: transparent;
}

.tz-ios-range::-moz-range-track {
    height: 54px;
    border-radius: 27px;
    background: transparent;
}

.tz-ios-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.38);
    cursor: grab;
    transition: box-shadow 0.15s;
    margin-top: 4px;
}

.tz-ios-range:active::-webkit-slider-thumb {
    cursor: grabbing;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.5);
}

.tz-ios-range::-moz-range-thumb {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.38);
    border: none;
    cursor: grab;
}

.tz-ios-overlay {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.38rem;
    color: #0d1919;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tz-ios-left {
    left: 14px;
}

.tz-ios-ico {
    font-size: 1.05em;
    line-height: 1;
}

.tz-ios-name {
    font-family: ui-monospace, monospace;
}

.tz-ios-pct {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
    font-family: ui-monospace, monospace;
    font-size: 0.92rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.82);
}

/* Kurgu ağırlıkları (`main.page` genişliği — masaüstü ≈1180px proje standardı; mobil aşağıda) */

.tz-kw-page {
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    background: #000;
    min-height: 100dvh;
}

.tz-kw-inner {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0 1rem 2rem;
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.tz-kw-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.1rem 0 1.25rem;
}

.tz-kw-header-logo {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tz-kw-header-text {
    flex: 1;
    min-width: 0;
}

.tz-kw-brand {
    display: block;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: #fff;
    line-height: 1.1;
}

.tz-kw-brand strong {
    color: #25d9ef;
}

.tz-kw-heading {
    flex: 1;
    margin: 0;
    padding: 0;
    font-size: 1rem;
    font-weight: 900;
    font-family: ui-monospace, monospace;
    letter-spacing: 0.1em;
    color: #25d9ef;
    line-height: 1.2;
}

.tz-kw-header-close {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
}

.tz-kw-lead {
    display: none;
}

.tz-kw-row {
    margin-bottom: 0.85rem;
}

.tz-kw-row-h {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.28rem;
    font-size: 0.7rem;
    font-weight: 900;
    font-family: ui-monospace, monospace;
    color: rgba(255, 255, 255, 0.82);
}

.tz-kw-slider-line {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.tz-kw-range-cell {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.tz-kw-range {
    flex: 1;
    min-width: 0;
    accent-color: rgb(37, 217, 239);
    height: 0.4rem;
}

.tz-kw-pct {
    flex-shrink: 0;
    width: 2.4rem;
    font-family: ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 900;
    color: rgba(37, 217, 239, 0.95);
    text-align: right;
}

.tz-kw-footer {
    display: flex;
    gap: 0.65rem;
    margin-top: 1.75rem;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.tz-kw-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.1rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 900;
    font-family: ui-monospace, monospace;
    letter-spacing: 0.08em;
    text-decoration: none;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.tz-kw-btn--ghost {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.88);
}

.tz-kw-btn--save {
    background: #34c759;
    color: #fff;
    font-weight: 950;
}

/* ─── 10. Onboarding Sihirbazı ─────────────────────────────────────────── */
.tz-kw-wizard {
    border: 1px solid rgba(37, 217, 239, 0.28);
    border-radius: 20px;
    background: #07090f;
    color: #fff;
    padding: 0;
    width: min(92vw, 480px);
    max-width: 92vw;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.72);
}

.tz-kw-wizard::backdrop {
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.tz-kw-wiz-inner {
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.35rem 1.5rem;
    gap: 0.85rem;
}

.tz-kw-wiz-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.42rem;
    text-align: center;
}

.tz-kw-wiz-steps {
    display: flex;
    gap: 0.45rem;
    margin-bottom: 0.25rem;
}

.tz-kw-wiz-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    transition: background 0.2s ease;
}

.tz-kw-wiz-dot.is-active {
    background: var(--cyan);
}

.tz-kw-wiz-dot.is-done {
    background: rgba(37, 217, 239, 0.45);
}

.tz-kw-wiz-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 900;
    font-family: ui-monospace, monospace;
    color: #fff;
    letter-spacing: 0.02em;
}

.tz-kw-wiz-sub {
    margin: 0;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.45;
}

.tz-kw-wiz-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tz-kw-wiz-row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.tz-kw-wiz-row-h {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.tz-kw-sym {
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
}

.tz-kw-wiz-row-text {
    display: flex;
    flex-direction: column;
    gap: 0.06rem;
    min-width: 0;
}

.tz-kw-wiz-row-title {
    font-size: 0.8rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.9);
}

.tz-kw-wiz-row-hint {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.42);
}

.tz-kw-wiz-footer {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.tz-horse-list {
    --tz-horse-card-gap: 0.55rem;
    display: grid;
    gap: var(--tz-horse-card-gap);
}

.tz-horse-card {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: rgba(18, 18, 18, 0.96);
    box-shadow: 0 7px 22px rgba(0, 0, 0, 0.34);
}

.tz-horse-card.tier-banko {
    border-color: rgba(255, 56, 56, 0.72);
    box-shadow: 0 0 18px rgba(255, 56, 56, 0.18), 0 10px 28px rgba(0, 0, 0, 0.28);
}

.tz-horse-card.tier-guclu {
    border-color: rgba(255, 214, 40, 0.62);
    box-shadow: 0 0 16px rgba(255, 214, 40, 0.12);
}

.tz-standard-header {
    display: flex;
    flex-direction: column;
    padding: 0;
    cursor: pointer;
    list-style: none;
    min-width: 0;
    overflow: hidden;
}

.tz-horse-card summary::-webkit-details-marker {
    display: none;
}

.tz-header-top {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) minmax(92px, auto);
    align-items: center;
    gap: 0.25rem;
    min-height: 38px;
    min-width: 0;
    overflow: hidden;
    padding: 0 0.55rem 0 0;
    background: rgba(255, 255, 255, 0.96);
}

.tz-header-earnings {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem 0.75rem;
    min-height: 38px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.62rem;
    font-weight: 850;
    padding: 0.4rem 0.75rem;
}

.tz-earn-group {
    display: inline-flex;
    align-items: baseline;
    gap: 0.22rem;
    white-space: nowrap;
}

.tz-earn-group b,
.tz-header-earnings .tz-erl {
    color: rgba(37, 217, 239, 0.75);
    font-weight: 850;
}

.tz-earn-val,
.tz-header-earnings .tz-erv {
    color: #ffb833;
}

.tz-earn-placeholder {
    opacity: 0.45;
}

.tz-agf-stack {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding-left: 0.4rem;
    margin-left: 0.1rem;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.tz-agf-line {
    display: flex;
    align-items: baseline;
    gap: 0.28rem;
    line-height: 1.2;
    white-space: nowrap;
}

.tz-forma {
    position: absolute;
    inset: 0 auto 0 0;
    width: 38%;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.84), transparent),
        var(--forma-img) center / cover no-repeat,
        linear-gradient(90deg, rgba(20, 50, 80, 0.9), rgba(20, 20, 20, 0));
    -webkit-mask-image: linear-gradient(90deg, #000 50%, transparent);
    mask-image: linear-gradient(90deg, #000 50%, transparent);
}

.tz-saddle {
    position: relative;
    z-index: 1;
    justify-self: center;
    color: #fff;
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 950;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.82);
}

.tz-name-line {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.tz-name-line strong {
    overflow: hidden;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 900;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.82);
    white-space: nowrap;
}

.tz-name-line img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.tz-jockey-line {
    overflow: hidden;
    color: #111;
    font-size: 0.68rem;
    font-weight: 900;
    text-align: right;
    white-space: nowrap;
}

.tz-jockey-line em {
    color: #d71920;
    font-size: 0.58rem;
    font-style: normal;
    margin-right: 0.2rem;
}

.tz-jockey-line i {
    color: rgba(255, 255, 255, 0.4);
    font-style: normal;
    margin-left: 0.35rem;
}

.tz-card-side {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
}

.tz-power-bars {
    display: flex;
    align-items: end;
    gap: 2px;
    height: 22px;
}

.tz-power-bars span {
    width: 5px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.12);
}

.tz-power-bars span:nth-child(1) { height: 7px; }
.tz-power-bars span:nth-child(2) { height: 10px; }
.tz-power-bars span:nth-child(3) { height: 13px; }
.tz-power-bars span:nth-child(4) { height: 16px; }
.tz-power-bars span:nth-child(5) { height: 19px; }

.tz-power-bars .is-filled {
    background: var(--cyan);
    box-shadow: 0 0 6px rgba(37, 217, 239, 0.5);
}

.tier-banko .tz-power-bars .is-filled {
    background: #ff3838;
}

.tier-guclu .tz-power-bars .is-filled {
    background: #ffd628;
}

.tz-score {
    color: var(--cyan);
    font-size: 1.35rem;
    font-weight: 950;
    line-height: 1;
}

.tier-banko .tz-score,
.tier-guclu .tz-score {
    background: transparent;
}

.tier-banko .tz-score {
    color: #ff3838;
}

.tier-guclu .tz-score {
    color: #ffd628;
}

.tz-tier-badge {
    border: 1px solid rgba(37, 217, 239, 0.25);
    border-radius: 999px;
    color: rgba(37, 217, 239, 0.82);
    font-size: 0.7rem;
    font-weight: 950;
    padding: 0.28rem 0.55rem;
}

.tier-banko .tz-tier-badge {
    border-color: rgba(255, 56, 56, 0.35);
    color: #ff3838;
}

.tier-guclu .tz-tier-badge {
    border-color: rgba(255, 214, 40, 0.35);
    color: #ffd628;
}

.tz-score-body {
    display: grid;
    gap: 0.65rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgb(18, 18, 18);
    padding: 0.65rem 0.75rem 0.75rem;
}

.tz-score-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    width: 100%;
    min-width: 0;
    column-gap: 1.25rem;
    row-gap: 0.35rem;
}

.tz-score-metrics > span {
    border-right: none;
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.56);
    font-size: 0.7rem;
    font-weight: 850;
    padding: 0.4rem 0.15rem;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.25rem 0.4rem;
}

.tz-score-metrics > span:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding-right: 1.25rem;
    margin-right: 0;
}

.tz-score-metrics > span.tz-metric-oran {
    justify-content: flex-end;
    text-align: right;
    justify-self: end;
    padding-right: 0;
}

.tz-score-metrics > span:first-child {
    justify-content: flex-start;
    text-align: left;
    justify-self: start;
}

.tz-score-metrics .tz-tier-badge {
    margin: 0;
}

.tz-score-metrics strong {
    color: var(--cyan);
    font-size: 0.9rem;
}

.tz-score-detail-title {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.62rem;
    font-weight: 950;
    letter-spacing: 0.18em;
}

.tz-factor-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
}

.tz-factor-grid div {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
    padding: 0.4rem 0.45rem;
}

.tz-factor-grid span {
    display: flex;
    justify-content: space-between;
    gap: 0.25rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.67rem;
    font-weight: 850;
}

.tz-factor-grid b {
    display: block;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
    font-weight: 950;
    text-align: right;
}

.tz-factor-grid em {
    display: block;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    margin-top: 0.35rem;
}

.tz-factor-grid em small {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: rgba(255, 110, 90, 0.9);
}

.tz-factor-grid .is-good em small,
.tz-factor-grid .is-high em small {
    background: rgba(37, 217, 239, 0.9);
}

.tz-factor-grid .is-high b,
.tz-factor-grid .is-high span {
    color: rgba(37, 217, 239, 0.95);
}

.tz-factor-grid .is-low b,
.tz-factor-grid .is-low span {
    color: rgba(255, 110, 90, 0.92);
}

.tz-signal-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.tz-signal-list span {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.68rem;
    font-weight: 850;
    padding: 0.26rem 0.5rem;
}

.tz-signal-list .signal-cyan { color: var(--cyan); background: rgba(37, 217, 239, 0.1); }
.tz-signal-list .signal-green { color: #41c96f; background: rgba(65, 201, 111, 0.1); }
.tz-signal-list .signal-gold { color: #ffd628; background: rgba(255, 214, 40, 0.1); }
.tz-signal-list .signal-orange { color: var(--orange); background: rgba(255, 174, 66, 0.1); }
.tz-signal-list .signal-pink { color: #ff4f98; background: rgba(255, 79, 152, 0.1); }
.tz-signal-list .signal-muted { color: rgba(255, 255, 255, 0.72); }

.tz-regulation-block {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.65rem 0.75rem 0.72rem;
    background: #121212;
    border-radius: 14px;
    max-width: 100%;
    min-width: 0;
}

.tz-regulation-line {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
}

.tz-reg-base {
    color: rgba(255, 255, 255, 0.95);
}

.tz-reg-mono {
    font-family: ui-monospace, "SFMono-Regular", "Menlo", Consolas, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.tz-regulation-line .tz-reg-accent {
    color: var(--reg-accent);
    font-weight: 800;
    font-family: inherit;
    letter-spacing: 0.02em;
}

@media (max-width: 420px) {
    .tz-factor-grid {
        gap: 0.35rem;
    }

    .tz-factor-grid div {
        padding: 0.38rem;
    }

    .tz-header-earnings {
        gap: 0.45rem;
        font-size: 0.58rem;
    }
}

.card {
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--panel);
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.24);
    padding: clamp(1rem, 2vw, 1.4rem);
}

.hero,
.page-header,
.weather-card,
.filter-bar,
.race-card-header,
.coupon-layout,
.saved-coupon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

h1,
h2,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 0.4rem;
    font-size: clamp(2rem, 5vw, 4rem);
    letter-spacing: -0.06em;
}

h2 {
    margin-bottom: 0.35rem;
}

.eyebrow {
    margin-bottom: 0.45rem;
    color: var(--cyan);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

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

.accent {
    color: var(--orange);
}

input,
select {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.28);
    color: var(--text);
    font: inherit;
    padding: 0.75rem 0.85rem;
}

label {
    display: grid;
    gap: 0.4rem;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
}

.date-form,
.filter-bar {
    flex-wrap: wrap;
}

.date-form {
    display: flex;
    gap: 0.75rem;
    align-items: end;
}

.grid {
    display: grid;
    gap: 1rem;
}

.city-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-top: 1rem;
}

.city-card,
.feature-card {
    min-height: 140px;
    border: 1px solid rgba(37, 217, 239, 0.18);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(37, 217, 239, 0.16), rgba(255, 255, 255, 0.05));
    display: grid;
    align-content: end;
    gap: 0.35rem;
    padding: 1rem;
}

.city-card strong,
.feature-card strong {
    font-size: 1.4rem;
}

.flag {
    width: fit-content;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.34);
    color: var(--cyan);
    font-size: 0.72rem;
    font-weight: 900;
    padding: 0.25rem 0.55rem;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.alert,
.message {
    border: 1px solid rgba(255, 174, 66, 0.36);
    border-radius: 16px;
    background: rgba(255, 174, 66, 0.1);
    margin: 1rem 0;
    padding: 1rem;
}

.message.success {
    border-color: rgba(94, 225, 138, 0.36);
    background: rgba(94, 225, 138, 0.1);
}

.message.error {
    border-color: rgba(255, 90, 104, 0.36);
    background: rgba(255, 90, 104, 0.1);
}

.race-list,
.coupon-races,
.coupon-list {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.race-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.race-meta span,
.result-banner,
.summary-total,
.status-list div,
.saved-lines span {
    border-radius: 999px;
    background: var(--panel-strong);
    padding: 0.45rem 0.75rem;
}

.result-banner {
    display: flex;
    justify-content: space-between;
    margin: 1rem 0;
    color: var(--green);
}

.horse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.horse-card {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.22);
    padding: 0.75rem;
}

.horse-card input {
    width: auto;
}

.horse-no {
    display: grid;
    place-items: center;
    min-width: 2.25rem;
    height: 2.25rem;
    border-radius: 12px;
    background: var(--cyan);
    color: #001014;
    font-weight: 900;
}

.scratched {
    opacity: 0.45;
}

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    border-bottom: 1px solid var(--line);
    padding: 0.72rem;
    text-align: left;
}

td span,
td small {
    display: block;
}

tr.favorite td:first-child {
    color: var(--orange);
}

.coupon-layout {
    align-items: flex-start;
    margin-top: 1rem;
}

.coupon-summary {
    position: sticky;
    top: 5.6rem;
    min-width: min(340px, 100%);
}

.summary-lines,
.status-list,
.saved-lines {
    display: grid;
    gap: 0.55rem;
    margin: 1rem 0;
}

.summary-total,
.status-list div {
    display: flex;
    justify-content: space-between;
}

.saved-coupon {
    flex-wrap: wrap;
    position: relative;
    padding-right: 2.5rem;
    align-items: flex-start;
}

.saved-lines {
    flex-basis: 100%;
}

.saved-coupon--winning {
    border: 2px solid rgba(34, 197, 94, 0.55);
}

.saved-coupon--losing {
    border: 2px solid rgba(239, 68, 68, 0.55);
}

.saved-coupon--neutral {
    border: 1px solid var(--line);
}

.saved-coupon-del {
    position: absolute;
    top: 0.55rem;
    right: 0.45rem;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.35);
    color: rgba(255, 180, 120, 0.95);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
}

.saved-coupon-del:hover {
    border-color: rgba(239, 68, 68, 0.45);
    color: rgb(248, 113, 113);
}

.saved-coupon-body {
    flex: 1;
    min-width: min(100%, 220px);
}

.saved-coupon-payout {
    margin: 0.4rem 0 0;
    font-weight: 800;
    color: var(--orange);
    font-size: 0.92rem;
}

.tz-saved-quota-line {
    margin: 0.35rem 0 0;
    font-size: 0.88rem;
    color: var(--muted);
}

.drawer-saved-wrap {
    margin-bottom: 0.9rem;
    padding: 0.65rem 0.45rem 0.75rem;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(37, 217, 239, 0.12);
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.drawer-saved-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0 0.15rem;
}

.drawer-saved-title {
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    color: rgba(37, 217, 239, 0.75);
}

.drawer-saved-quota {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
}

.drawer-saved-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    max-height: min(38vh, 300px);
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
}

.drawer-saved-card {
    position: relative;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(12, 14, 18, 0.88);
    max-width: 100%;
    min-width: 0;
}

.drawer-saved-card-hit {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: inherit;
}

.drawer-saved-card.is-winning {
    border: 2px solid rgba(34, 197, 94, 0.55);
}

.drawer-saved-card.is-losing {
    border: 2px solid rgba(239, 68, 68, 0.55);
}

.drawer-saved-card-main {
    display: flex;
    gap: 0.45rem;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.5rem 0.55rem;
}

.drawer-saved-city {
    font-size: 0.82rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    word-break: break-word;
}

.drawer-saved-bet {
    margin-top: 0.15rem;
    font-size: 0.68rem;
    font-weight: 750;
    color: rgba(37, 217, 239, 0.9);
    line-height: 1.25;
}

.drawer-saved-meta {
    margin-top: 0.2rem;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.38);
}

.drawer-saved-payout {
    margin-top: 0.25rem;
    font-size: 0.72rem;
    font-weight: 750;
    color: rgba(255, 180, 120, 0.95);
}

.drawer-saved-card-side {
    flex-shrink: 0;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
}

.drawer-saved-amt {
    font-size: 0.82rem;
    font-weight: 800;
    color: rgba(255, 180, 120, 0.96);
}

.drawer-saved-misli {
    font-size: 0.65rem;
    color: rgba(37, 217, 239, 0.85);
    font-weight: 650;
}

.drawer-saved-del {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    z-index: 2;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(248, 113, 113, 0.95);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
}

.drawer-saved-del:hover {
    background: rgba(239, 68, 68, 0.2);
}

.drawer-saved-all {
    display: block;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 650;
    color: var(--cyan);
    text-decoration: none;
    padding: 0.35rem 0.25rem 0.15rem;
}

.drawer-saved-empty {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
    margin: 0;
    padding: 0 0.2rem;
    line-height: 1.4;
}

@media (max-width: 820px) {
    .hero,
    .page-header,
    .weather-card,
    .filter-bar,
    .coupon-layout {
        align-items: stretch;
        flex-direction: column;
    }

    .coupon-summary {
        position: static;
        width: 100%;
    }

    .topbar-shell {
        width: min(100% - 1.25rem, 720px);
        padding: 0.45rem 0 0.6rem;
    }

    .topbar-main-row {
        grid-template-columns: 54px 1fr 54px;
        min-height: 58px;
    }

    .topbar-logo {
        width: 54px;
        height: 54px;
    }

    .topbar-brand {
        font-size: 1.38rem;
    }

    .tab-nav {
        gap: 2px;
        padding: 5px;
    }

    .tab-nav-item {
        gap: 4px;
        font-size: 10px;
        padding: 6px 2px;
    }

    .tab-icon {
        height: 28px;
    }

    .tab-icon-svg {
        width: 27px;
        height: 27px;
    }

    .tab-icon-svg--brain {
        width: 28px;
        height: 28px;
    }

    .page {
        width: min(100% - 1.25rem, 720px);
        padding-top: 0.85rem;
    }

    .ios-card-stack {
        gap: 1.05rem;
    }

    .program-city-bar {
        align-items: flex-start;
        gap: 0.55rem;
    }

    .city-picker {
        max-width: 48vw;
    }

    .program-date-weather strong {
        font-size: 0.76rem;
    }

    .program-race-subtitle p {
        white-space: normal;
    }
}

@media (max-width: 420px) {
    .topbar-main-row {
        grid-template-columns: 46px 1fr 46px;
    }

    .hamburger {
        width: 34px;
        height: 34px;
    }

    .topbar-logo {
        width: 46px;
        height: 46px;
    }

    .topbar-brand {
        font-size: 1.2rem;
    }

    .tab-nav {
        padding: 4px;
    }

    .tab-nav-item {
        font-size: 9.5px;
        padding-inline: 1px;
    }

    .tab-icon {
        height: 26px;
    }

    .tab-icon-svg {
        width: 25px;
        height: 25px;
    }

    .tab-icon-svg--brain {
        width: 26px;
        height: 26px;
    }

    .ios-image-card {
        min-height: 102px;
        padding-inline: 18px;
    }

    .ios-image-card span {
        font-size: 1.12rem;
    }

    .program-horse-card-header {
        grid-template-columns: 32px minmax(0, 1fr) minmax(58px, auto) auto;
        gap: 0.25rem;
    }

    .horse-right-meta > span:first-child {
        font-size: 0.62rem;
    }

    .result-rank,
    .program-horse-card-header > b {
        font-size: 0.6rem;
        padding-inline: 0.24rem;
    }
}

/* —— AGF / Muhtemeller (iOS OddsView) —— */
.odds-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 auto;
    padding-bottom: 1rem;
}

@media (max-width: 599px) {
    .odds-shell {
        width: min(100%, 430px);
    }
}

.odds-top-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0 0.65rem;
    min-height: 3.6rem;
}

.odds-city-picker {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
}

.odds-pin {
    color: var(--cyan);
    font-size: 0.85rem;
}

.odds-city-select {
    appearance: none;
    background: transparent;
    border: none;
    color: #fff;
    font-weight: 800;
    font-size: 0.95rem;
    max-width: min(42vw, 160px);
    cursor: pointer;
    padding-right: 1rem;
}

.odds-date-weather {
    text-align: right;
    min-width: 0;
}

.odds-date-weather strong {
    display: block;
    font-size: 0.78rem;
    font-weight: 750;
    color: rgba(255, 255, 255, 0.78);
}

.odds-weather-line {
    display: block;
    font-size: 0.68rem;
    font-weight: 650;
    color: rgba(255, 255, 255, 0.58);
    margin-top: 0.2rem;
}

.odds-run-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    padding: 0.5rem 0 0.65rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.odds-run-tab {
    flex: 1 0 auto;
    min-width: 2.35rem;
    height: 2.35rem;
    display: grid;
    place-items: center;
    border-radius: 6px;
    font-size: 0.88rem;
    font-weight: 850;
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.1));
}

.odds-run-tab.is-selected {
    color: #0a0a0a;
    font-weight: 950;
}

.odds-run-tab.pist-cim.is-selected {
    background: linear-gradient(180deg, rgba(60, 200, 110, 0.85), rgba(30, 120, 65, 0.95));
}

.odds-run-tab.pist-kum.is-selected {
    background: linear-gradient(180deg, rgba(180, 130, 80, 0.95), rgba(110, 70, 35, 0.95));
}

.odds-run-tab.pist-sentetik.is-selected {
    background: linear-gradient(180deg, rgba(150, 155, 165, 0.92), rgba(80, 85, 92, 0.95));
}

.odds-run-tab.pist-default.is-selected {
    background: linear-gradient(180deg, rgba(220, 170, 110, 0.95), rgba(140, 100, 60, 0.98));
}

.odds-subtabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.odds-subtab {
    appearance: none;
    border: none;
    background: transparent;
    font-size: 0.92rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.4);
    padding: 0.65rem 0.25rem;
    cursor: pointer;
    position: relative;
}

.odds-subtab[aria-selected="true"] {
    color: var(--orange);
}

.odds-subtab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--orange);
}

.odds-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2.15rem;
    padding: 0 0.65rem;
    background: rgba(245, 245, 245, 0.94);
    color: #111;
    font-size: 0.78rem;
    font-weight: 750;
}

.odds-info-row--secondary {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.odds-info-clock,
.odds-info-race-top,
.odds-info-dist,
.odds-info-refresh {
    min-width: 0;
}

.odds-info-race-top,
.odds-info-dist {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}

.odds-info-clock {
    flex-shrink: 0;
}

.odds-info-refresh {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.odds-panels {
    margin-top: 0;
}

.odds-panel-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.85rem;
}

.odds-table {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border: 1px solid rgba(0, 0, 0, 0.22);
    background: #fff;
    color: #111;
}

.odds-table-head,
.odds-table-row {
    display: grid;
    gap: 0;
    align-items: stretch;
}

.odds-table--muhtemeller .odds-table-head,
.odds-table--muhtemeller .odds-table-row {
    grid-template-columns: repeat(var(--odds-cols, 4), minmax(0, 1fr));
}

.odds-table--agf .odds-table-head,
.odds-table--agf .odds-table-row {
    grid-template-columns: 40px minmax(0, 2fr) minmax(0, 1.75fr) minmax(0, 1.25fr);
}

.odds-th {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 900;
    padding: 0.45rem 0.2rem;
    background: rgba(250, 250, 250, 0.98);
    border-right: 1px solid rgba(0, 0, 0, 0.18);
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}

.odds-th:last-child {
    border-right: none;
}

.odds-table-row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.14);
}

.odds-table-row:last-child {
    border-bottom: none;
}

.odds-td {
    border-right: 1px solid rgba(0, 0, 0, 0.16);
    padding: 0.2rem 0.25rem;
    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    font-size: 0.8rem;
}

.odds-td:last-child {
    border-right: none;
}

.odds-td.is-td-kosmaz {
    background: rgba(140, 140, 140, 0.38);
}

.odds-table--agf .odds-table-row.is-kosmaz .odds-td {
    background: rgba(140, 140, 140, 0.38);
}

.odds-td-inner {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: 0.2rem;
}

.odds-spacer {
    flex: 1;
    min-width: 2px;
}

.odds-label,
.odds-odds {
    font-size: 0.82rem;
}

.odds-odds {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-weight: 600;
    text-align: right;
}

.odds-label.is-highlight,
.odds-odds.is-highlight,
.odds-agf-line.is-highlight,
.odds-label-agf.is-highlight,
.odds-label-agf.at-name.is-highlight {
    color: var(--orange);
    font-weight: 850;
    animation: odds-pulse 1.6s ease-in-out infinite alternate;
}

@keyframes odds-pulse {
    from { opacity: 1; }
    to { opacity: 0.55; }
}

.odds-ekuri {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    object-fit: contain;
}

.odds-kosmaz-pill,
.odds-agf-kosmaz {
    font-size: 0.75rem;
    font-weight: 750;
}

.odds-agf-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    text-align: center;
}

.odds-agf-line {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.82rem;
}

.odds-td-inner--agf {
    justify-content: center;
}

.odds-label-agf {
    font-weight: 750;
    text-align: center;
    max-width: 100%;
}

.odds-label-agf.at-name {
    font-weight: 900;
    letter-spacing: 0.02em;
}

.odds-label-agf.is-clamp {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 650;
    max-width: 100%;
}

.odds-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 80px 40px;
    min-height: 50vh;
    text-align: center;
}

.odds-empty-ico {
    width: 72px;
    height: 72px;
    color: rgba(255, 255, 255, 0.20);
}

.odds-empty-ico-badge {
    color: rgba(255, 255, 255, 0.20);
}

.odds-empty-msg {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.38);
    font-weight: 500;
    max-width: 280px;
    line-height: 1.5;
    margin: 0;
}

.odds-alert {
    margin: 0.5rem 0;
}

/* AGF sekmesi: tab-nav parlak seçim ile uyum */
.tab-nav-item.is-selected[href*="/agf/"] {
    box-shadow: 0 0 0 2px rgba(37, 217, 239, 0.35), 0 0 18px rgba(37, 217, 239, 0.22);
}

.tab-nav-item.is-selected[href*="/kupon/"] {
    box-shadow: 0 0 0 2px rgba(37, 217, 239, 0.35), 0 0 18px rgba(37, 217, 239, 0.22);
}

/* —— Kupon (iOS TicketSetupView — ekran görüntüsü ile hizalı) —— */
.tz-coupon-page.page {
    position: relative;
    isolation: isolate;
    min-height: calc(100dvh - 132px);
    background: #000;
}

/* Bilet: pist sınıfları ana sayfada Program ile aynı ::before yüzeyi */
.tz-coupon-page.page.tz-coupon-pist-surface {
    background: transparent;
}

.tz-coupon-page.page.tz-coupon-pist-surface::before {
    content: "";
    position: absolute;
    inset: 0 -1rem 0;
    z-index: -1;
    border-radius: 24px 24px 0 0;
    background:
        radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(128, 128, 128, 0.18), rgba(0, 0, 0, 0.78) 58%, rgba(0, 0, 0, 0.92));
}

.tz-coupon-page.page.tz-coupon-pist-surface.pist-cim::before {
    background:
        radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(41, 190, 90, 0.44), rgba(6, 22, 12, 0.82) 48%, rgba(0, 0, 0, 0.94));
}

.tz-coupon-page.page.tz-coupon-pist-surface.pist-kum::before {
    background:
        radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(142, 91, 46, 0.56), rgba(30, 18, 9, 0.84) 48%, rgba(0, 0, 0, 0.94));
}

.tz-coupon-page.page.tz-coupon-pist-surface.pist-sentetik::before {
    background:
        radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(145, 151, 160, 0.46), rgba(18, 20, 24, 0.84) 48%, rgba(0, 0, 0, 0.94));
}

.tz-coupon-page.page.tz-coupon-pist-surface.pist-default::before {
    background:
        radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(128, 128, 128, 0.18), rgba(0, 0, 0, 0.78) 58%, rgba(0, 0, 0, 0.92));
}

.tz-coupon-screen--hub {
    --tz-coupon-bronze: rgb(212 175 110);
    --tz-coupon-bronze-dim: rgb(201 168 106 / 55%);
    --tz-coupon-bronze-border: rgb(184 152 95 / 42%);
    --tz-coupon-bronze-cell: rgb(48 42 36 / 96%);
    --tz-coupon-bronze-cell-edge: rgb(155 128 78 / 38%);
    --tz-coupon-panel: rgb(30 30 32 / 96%);
}

.tz-coupon-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 auto;
    padding: 0 clamp(0.75rem, 4vw, 1.15rem) 5rem;
    box-sizing: border-box;
}

@media (max-width: 599px) {
    .tz-coupon-shell {
        width: min(100%, 430px);
        margin-left: auto;
        margin-right: auto;
    }
}

.tz-coupon-banner-stack {
    display: flex;
    flex-direction: column;
    gap: 0.78rem;
    margin-top: 0;
}

a.tz-prediction-tayzeka-cta {
    margin-top: 0.75rem;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}

.tz-prediction-shell .tz-prediction-tayzeka-cta {
    margin-top: 0;
}

.tz-prediction-shell .tz-tayzeka-inline-shell,
.tz-prediction-shell .tz-tayzeka-ganyan-closed {
    margin-top: 0;
    margin-bottom: 0;
}

/* Kupon hub sayfasındaki 5rem alt iç boşluk — Tay Zeka inline’da at listesinin üstünde çizgi boşluğu yaratmasın */
.tz-prediction-shell .tz-coupon-shell.tz-tayzeka-inline-shell {
    padding: 0;
    margin-left: 0;
    margin-right: 0;
}

.tz-prediction-shell .tz-horse-list {
    margin-top: var(--tz-horse-card-gap);
}

.tz-prediction-shell .tz-toolbar {
    padding-top: 6px;
    padding-bottom: 6px;
}

.tz-tayzeka-inline-shell {
    width: 100%;
    max-width: 100%;
}

.tz-tayzeka-edit-again {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    margin-top: 0.65rem;
    padding: 0.55rem 0.75rem;
    border: none;
    border-radius: 0.75rem;
    background: transparent;
    color: rgb(37 217 239 / 92%);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
}

.tz-tayzeka-edit-again:hover {
    color: rgb(56 229 248);
}

/* Inline Tay Zeka: full hub ticket stage (below prediction toolbar) */
.tz-tayzeka-full-stage {
    margin-top: 0.5rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.tz-tayzeka-full-stage[data-vis="hide"] {
    display: none;
}

.tz-tayzeka-full-stage .tz-ticket-body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.tz-tayzeka-back-summary {
    display: inline-flex;
    align-items: center;
    margin: 0 0 0.5rem 0;
    padding: 0.28rem 0.65rem;
    border-radius: 0.65rem;
    border: 1px solid rgb(37 217 239 / 28%);
    background: rgb(10 14 22 / 68%);
    color: rgb(37 217 239 / 92%);
    font-size: 0.8rem;
    font-weight: 750;
    letter-spacing: 0.02em;
    cursor: pointer;
    font-family: inherit;
}

.tz-tayzeka-back-summary:hover {
    border-color: rgb(56 229 248 / 45%);
    color: rgb(56 229 248);
}

.tz-tayzeka-inline-err {
    margin: 0.5rem 0;
    font-size: 0.85rem;
    color: rgb(255 180 120 / 90%);
}

.tz-preset-card--tayzeka-inline {
    margin-bottom: 0;
    cursor: pointer;
}

.tz-preset-card--tayzeka-inline:focus:not(:focus-visible) {
    outline: none;
}

.tz-preset-card--tayzeka-inline:focus-visible {
    outline: 2px solid rgb(56 229 248 / 65%);
    outline-offset: 3px;
}

.tz-tayzeka-ganyan-closed {
    margin-top: 0;
    width: 100%;
    max-width: 100%;
    padding: 0.55rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgb(190 145 55 / 45%);
    background: rgb(16 12 9 / 96%);
    box-sizing: border-box;
    text-align: center;
}

.tz-tayzeka-ganyan-closed-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.6rem 0;
    font-size: 0.84rem;
    line-height: 1.3;
    color: rgb(185 179 170);
}

.tz-tayzeka-ganyan-closed-row + .tz-tayzeka-ganyan-closed-row {
    border-top: 1px solid rgb(255 255 255 / 7%);
}

.tz-tayzeka-ganyan-closed-label {
    font-weight: 500;
    white-space: nowrap;
}

.tz-tayzeka-ganyan-closed-clock {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 1;
}

.tz-tayzeka-ganyan-closed-hm {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: 1.05rem;
    color: rgb(56 182 245);
    letter-spacing: 0.05em;
}

.tz-coupon-banner {
    position: relative;
    display: block;
    width: 100%;
    min-height: 7.1rem;
    max-height: 9rem;
    border: none;
    border-radius: 1.125rem;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    box-shadow:
        0 6px 20px rgb(0 0 0 / 50%),
        inset 0 0 0 1px rgb(255 255 255 / 5%);
}

.tz-coupon-banner:focus-visible {
    outline: 2px solid rgba(37, 217, 239, 0.8);
    outline-offset: 2px;
}

.tz-coupon-banner-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.tz-coupon-banner-scrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

.tz-coupon-banner-title {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 7.1rem;
    font-size: clamp(0.96rem, 4.6vw, 1.38rem);
    font-weight: 900;
    letter-spacing: 0.07em;
    color: #fff;
    text-shadow: 0 1px 10px rgb(0 0 0 / 65%);
}

.tz-coupon-divider {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 1.5rem clamp(0.85rem, 3vw, 1rem) 0.85rem;
    color: rgb(37 217 239 / 78%);
    font-size: 0.66rem;
    font-weight: 900;
    font-family: ui-monospace, monospace;
    letter-spacing: 0.1em;
}

.tz-coupon-divider span:first-child,
.tz-coupon-divider span:last-child {
    flex: 1;
    height: 1px;
    background: rgb(37 217 239 / 32%);
}

.tz-coupon-presets {
    margin-top: 0.5rem;
}

.tz-preset-fetch-banner {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0 0.35rem 0.5rem;
    font-size: 0.62rem;
    font-weight: 600;
    font-family: ui-monospace, monospace;
    color: rgba(26, 128, 138, 0.55);
}

.tz-preset-fetch-spin {
    width: 0.78rem;
    height: 0.78rem;
    border-width: 2px;
    flex-shrink: 0;
}

.tz-preset-fetch-msg {
    letter-spacing: 0.02em;
}

.tz-coupon-presets--busy .tz-preset-card--skeleton {
    opacity: 0.92;
}

.tz-coupon-presets-loading,
.tz-coupon-presets-empty {
    text-align: center;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.35);
    padding: 1rem;
}

@media (min-width: 900px) {
    .tz-coupon-presets--busy,
    .tz-coupon-presets--has-cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.95rem;
        align-items: start;
    }

    .tz-coupon-presets--has-cards .tz-preset-card,
    .tz-coupon-presets--busy .tz-preset-card {
        margin-bottom: 0;
    }
}

@media (min-width: 1200px) {
    .tz-coupon-presets--busy,
    .tz-coupon-presets--has-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Slot kilidi — dış çerçeve ekran görüntüsündeki bronz kart ile aynı dil */
.tz-preset-lock-wrap {
    grid-column: 1 / -1;
    padding: 0 clamp(0.45rem, 2vw, 0.65rem);
}

@media (min-width: 900px) {
    .tz-preset-lock-card {
        max-width: min(420px, 100%);
        margin-left: auto;
        margin-right: auto;
    }

    .tz-preset-ts-wait-wrap {
        max-width: min(420px, 100%);
    }
}

.tz-preset-lock-card {
    border-radius: 1.05rem;
    padding: 1.35rem 1.2rem 1.5rem;
    background: var(--tz-coupon-panel, rgb(30 30 32 / 96%));
    border: 1px solid var(--tz-coupon-bronze-border, rgb(184 152 95 / 42%));
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 4%),
        0 10px 36px rgb(0 0 0 / 48%);
}

.tz-preset-lock-kicker {
    margin: 0 0 0.55rem;
    font-size: 0.66rem;
    font-weight: 900;
    font-family: ui-monospace, monospace;
    letter-spacing: 0.14em;
    color: var(--tz-coupon-bronze-dim, rgb(201 168 106 / 72%));
}

.tz-preset-lock-lead {
    margin: 0 0 0.75rem;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.35;
    color: rgb(249 249 249 / 90%);
}

.tz-preset-lock-lead time {
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
    color: var(--tz-coupon-bronze, rgb(212 175 110));
}

.tz-preset-lock-rest {
    font-weight: 500;
    color: rgb(249 249 249 / 48%);
}

.tz-preset-lock-slot {
    margin: 0 0 1rem;
    font-size: 0.8rem;
    font-weight: 650;
    color: rgb(255 255 255 / 68%);
}

.tz-preset-lock-ico {
    margin-right: 0.35rem;
    opacity: 0.9;
}

.tz-preset-lock-cd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.42rem 0.5rem;
}

.tz-preset-cd-seg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-width: min(3.75rem, 20vw);
    padding: 0.45rem 0.45rem 0.5rem;
    border-radius: 0.72rem;
    background: var(--tz-coupon-bronze-cell, rgb(48 42 36 / 96%));
    border: 1px solid var(--tz-coupon-bronze-cell-edge, rgb(155 128 78 / 38%));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
}

.tz-preset-cd-num {
    font-size: clamp(1.25rem, 5.5vw, 1.82rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    line-height: 1;
    color: #fff;
}

.tz-preset-cd-lbl {
    font-size: 0.5rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tz-coupon-bronze-dim, rgb(201 168 106 / 88%));
}

.tz-preset-cd-sep {
    font-weight: 800;
    font-size: 1.38rem;
    line-height: 1;
    color: rgb(255 255 255 / 58%);
    padding: 0 0.05rem;
}

.tz-preset-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 1px, 1px);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* TicketSetupView.presetCountdownSection — bronz kutu (iOS görüntüsü) */
.tz-preset-ts-wait-wrap {
    grid-column: 1 / -1;
    padding: 0.15rem clamp(0.45rem, 2vw, 0.65rem) 0.75rem;
    max-width: min(560px, 100%);
    margin-left: auto;
    margin-right: auto;
}

.tz-preset-ts-wait-box {
    padding: 1.65rem 1.1rem 1.85rem;
    border-radius: 1.05rem;
    background: var(--tz-coupon-panel, rgb(30 30 32 / 96%));
    border: 1px solid var(--tz-coupon-bronze-border, rgb(184 152 95 / 42%));
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 4%),
        0 10px 36px rgb(0 0 0 / 48%);
}

.tz-preset-ts-wait-cd {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.42rem 0.48rem;
}

.tz-preset-ts-wait-seg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.tz-preset-ts-wait-num {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(3.72rem, 18vw);
    height: min(3.72rem, 18vw);
    min-width: 3rem;
    min-height: 3rem;
    border-radius: 0.72rem;
    font-size: clamp(1.35rem, 6vw, 1.92rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    line-height: 1;
    color: #fff;
    background: var(--tz-coupon-bronze-cell, rgb(48 42 36 / 96%));
    border: 1px solid var(--tz-coupon-bronze-cell-edge, rgb(155 128 78 / 38%));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
}

.tz-preset-ts-wait-u {
    font-size: 0.5rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tz-coupon-bronze-dim, rgb(201 168 106 / 88%));
}

.tz-preset-ts-wait-sep {
    font-size: 1.38rem;
    font-weight: 800;
    line-height: 1;
    color: rgb(255 255 255 / 58%);
    padding: 0 0.08rem;
}

/* Yer tutucular — CouponTicketCard isLoading */
.tz-preset-card--skeleton {
    cursor: default;
}

.tz-preset-card--skeleton:active {
    transform: none;
}

.tz-preset-skel-pulse {
    background: rgb(145 148 156 / 16%);
    animation: tz-preset-skel-glow 1.55s ease-in-out infinite alternate;
}

@keyframes tz-preset-skel-glow {
    from {
        background: rgb(145 148 156 / 10%);
    }

    to {
        background: rgb(145 148 156 / 22%);
    }
}

.tz-preset-skel-ring {
    color: rgb(145 148 156 / 12%);
    border: 1px solid rgb(145 148 156 / 25%);
}

.tz-preset-skel-tag {
    display: inline-block;
    height: 0.38rem;
    width: 2.85rem;
    border-radius: 0.06rem;
}

.tz-preset-skel-pill {
    height: 0.5rem;
    width: 2.85rem;
    border-radius: 0.35rem;
}

.tz-preset-skel-line {
    height: 0.38rem;
    width: min(92%, 7.5rem);
    border-radius: 0.1rem;
    margin-top: 0.42rem;
}

.tz-preset-skel-line--narrow {
    width: 4.85rem;
    margin-bottom: 0;
}

.tz-preset-skel-city {
    width: 3.85rem;
    height: 0.92rem;
    border-radius: 0.28rem;
    flex-shrink: 0;
}

.tz-preset-skel-num {
    display: inline-block;
    width: min(92%, 1.72rem);
    height: 0.68rem;
    border-radius: 0.08rem;
    margin-top: 0.5rem;
}

.tz-preset-skel-price {
    width: 3.95rem;
    height: 0.92rem;
    border-radius: 0.08rem;
    margin-left: auto;
}

.tz-preset-skel-col-head {
    height: 0.92rem;
    margin: 0.16rem auto;
    width: 78%;
    border-radius: 0.1rem;
}

.tz-preset-skel-col-body {
    display: grid;
    place-items: center;
    padding: 0.25rem;
    min-height: 7.5rem;
}

.tz-preset-skel-col {
    min-width: 0;
}

/* Hazır kupon kartı — CouponTicketCard */
.tz-preset-card {
    margin-bottom: 0.85rem;
    cursor: pointer;
    border-radius: 0.45rem;
    transition: transform 0.12s ease;
}

.tz-preset-card:active {
    transform: scale(0.985);
}

.tz-preset-inner {
    position: relative;
    background: rgb(245, 232, 201);
    border-radius: 0.45rem;
    border: 1.5px solid rgba(26, 128, 138, 0.65);
    box-shadow: 2px 5px 12px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.tz-preset-inner::before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        135deg,
        rgba(101, 67, 33, 0.07) 0%,
        transparent 42%,
        rgba(101, 67, 33, 0.05) 100%
    );
}

.tz-preset-inner > * {
    position: relative;
    z-index: 1;
}

.tz-preset-card--premium-locked {
    cursor: pointer;
}

.tz-preset-grid-shell {
    position: relative;
    margin-left: 0.15rem;
    margin-right: 0.15rem;
}

.tz-preset-grid-shell--locked .tz-preset-grid {
    filter: blur(7px);
    pointer-events: none;
    user-select: none;
}

.tz-preset-premium-badge {
    position: absolute;
    top: 0.35rem;
    right: 0.45rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.25rem 0.55rem;
    font-size: 0.48rem;
    font-weight: 900;
    font-family: ui-monospace, monospace;
    letter-spacing: 0.03em;
    color: #000;
    background: #19d9ef;
    border-radius: 0.38rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.tz-preset-premium-lock {
    flex-shrink: 0;
    display: block;
}

.tz-preset-price-wrap {
    display: inline-flex;
    align-items: baseline;
    gap: 0.12rem;
    flex-shrink: 0;
}

.tz-preset-price-tl {
    font-size: 0.42rem;
    font-weight: 800;
    font-family: ui-monospace, monospace;
    color: rgba(26, 128, 138, 1);
}

.tz-preset-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.65rem;
    color: rgba(26, 128, 138, 1);
}

.tz-preset-6 {
    font-size: 0.95rem;
    font-weight: 950;
    width: 1.38rem;
    height: 1.38rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid currentColor;
}

.tz-preset-head-mid {
    flex: 1;
    min-width: 0;
}

.tz-preset-tagline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.tz-preset-tag {
    font-size: 0.45rem;
    font-weight: 800;
    font-family: ui-monospace, monospace;
}

.tz-preset-date {
    font-size: 0.42rem;
    font-weight: 950;
    font-family: ui-monospace, monospace;
    color: #fff;
    background: rgba(26, 128, 138, 0.88);
    padding: 0.1rem 0.28rem;
    border-radius: 0.2rem;
}

.tz-preset-bet {
    font-size: 0.48rem;
    font-weight: 800;
    font-family: ui-monospace, monospace;
    margin-top: 0.08rem;
}

.tz-preset-city {
    font-size: 0.85rem;
    font-weight: 950;
    font-family: ui-monospace, monospace;
}

.tz-preset-grid {
    display: flex;
    border-top: 0.75px solid rgba(26, 128, 138, 0.45);
}

.tz-preset-col {
    flex: 1;
    min-width: 0;
    border-right: 0.75px solid rgba(26, 128, 138, 0.35);
}

.tz-preset-col:last-child {
    border-right: none;
}

.tz-preset-col-head {
    font-size: 0.48rem;
    font-weight: 800;
    font-family: ui-monospace, monospace;
    text-align: center;
    padding: 0.2rem;
    background: rgba(26, 128, 138, 0.12);
    color: rgba(26, 128, 138, 1);
}

.tz-preset-col-nums {
    padding: 0.28rem 0.12rem 0.45rem;
    min-height: 7.5rem;
}

.tz-preset-leg-num {
    box-sizing: border-box;
    min-height: 1.15rem;
    font-size: 0.68rem;
    font-weight: 900;
    font-family: ui-monospace, monospace;
    text-align: center;
    margin: 0.1rem 0;
    padding: 0.12rem;
    background: rgba(26, 128, 138, 0.88);
    color: #f2e8d2;
}

.tz-preset-footer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.35rem 0.65rem;
    border-top: 0.75px solid rgba(26, 128, 138, 0.35);
    font-family: ui-monospace, monospace;
    font-size: 0.48rem;
    color: rgba(26, 128, 138, 0.55);
}

.tz-preset-combos {
    min-width: 0;
}

.tz-preset-price {
    font-size: 0.85rem;
    font-weight: 950;
    color: rgba(217, 90, 26, 1);
}

/* AI kartı */
.tz-coupon-screen--ai {
    padding-top: 0.5rem;
}

.tz-coupon-ai-card {
    background: rgba(28, 28, 30, 0.96);
    border-radius: 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin: 0 0.35rem;
    overflow: hidden;
}

.tz-coupon-ai-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    cursor: pointer;
    margin: 0;
}

.tz-coupon-ai-icon {
    color: rgba(37, 217, 239, 0.9);
    font-size: 1rem;
    width: 1.5rem;
    text-align: center;
}

.tz-coupon-ai-labels {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.tz-coupon-ai-k {
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    color: rgba(37, 217, 239, 0.75);
}

.tz-coupon-ai-select {
    width: 100%;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 750;
    appearance: none;
    padding: 0.1rem 0;
}

.tz-coupon-ai-chev {
    color: rgba(255, 255, 255, 0.22);
    font-size: 0.75rem;
}

.tz-coupon-ai-hr {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 0 0.85rem;
}

.tz-coupon-ai-budget {
    padding: 1rem 1.1rem 0.85rem;
}

.tz-coupon-ai-budget-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.tz-coupon-ai-lira {
    font-size: 1.55rem;
    font-weight: 800;
    color: #ff9f0a;
}

.tz-coupon-ai-budget-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    font-size: 1.55rem;
    font-weight: 900;
    color: #ff9f0a;
}

.tz-coupon-ai-go {
    border: none;
    border-radius: 0.65rem;
    padding: 0.55rem 1rem;
    font-weight: 900;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    background: linear-gradient(135deg, #25d9ef, #1ab3c8);
    color: #000;
    box-shadow: 0 6px 18px rgba(37, 217, 239, 0.35);
    cursor: pointer;
    white-space: nowrap;
}

.tz-coupon-ai-go[disabled],
.tz-coupon-ai-go.tz-coupon-ai-go--locked {
    background: #3f3f46;
    color: rgba(255, 255, 255, 0.48);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1;
}

.tz-coupon-ai-go[disabled]:active,
.tz-coupon-ai-go.tz-coupon-ai-go--locked:active {
    transform: none;
}

.tz-coupon-ai-go-spark {
    margin-right: 0.2rem;
}

.tz-coupon-ai-go-spark--lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.28rem;
    color: rgba(255, 255, 255, 0.55);
}

.tz-coupon-ai-go-spark--lock svg {
    display: block;
}

.tz-coupon-ai-cancel {
    display: block;
    width: 100%;
    margin: 0.5rem 0 1rem;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.28);
    font-size: 0.82rem;
    cursor: pointer;
}

/* Bilet — iOS bileşen renkleri (görsel referans) */
.tz-ticket-body {
    --tz-leg-orange: #f28b2c;
    --tz-leg-bg: #1a1a1a;
    --tz-leg-active-bl: #2a4d59;
    --tz-leg-cyan: #4cc9f0;
    --tz-ios-cyan: #4cc9f0;
    --tz-ios-orange: #f28b2c;
}

.tz-ticket-pickers {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.15rem;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.tz-ticket-picker {
    padding: 0.45rem 0.45rem 0.45rem 0.55rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.2rem;
    min-width: 0;
}

.tz-ticket-picker-inner {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.tz-ticket-picker-chev {
    flex-shrink: 0;
    align-self: center;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
    color: rgba(255, 255, 255, 0.38);
    -webkit-text-stroke: 0.45px rgba(255, 255, 255, 0.35);
    margin-top: 0.12rem;
    pointer-events: none;
    user-select: none;
}

.tz-ticket-picker-k {
    font-size: 0.58rem;
    font-weight: 850;
    color: var(--tz-leg-cyan, #4cc9f0);
    letter-spacing: 0.04em;
}

.tz-ticket-picker select {
    width: 100%;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 750;
    appearance: none;
    padding: 0;
}

.tz-ticket-picker-gap {
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.tz-ticket-legs-wrap {
    overflow: hidden;
    margin: 0.45rem 0 0.2rem;
    width: 100%;
    box-sizing: border-box;
    /* Tüm koşu sekmeleri yatay sığsın; font/yükseklik cqw ile ölçeklenir — scroll yok. */
    container-type: inline-size;
    container-name: ticket-legs-bar;
}

.tz-ticket-legs {
    display: flex;
    width: 100%;
    gap: clamp(2px, 1.15vw, 7px);
    padding: 0;
    box-sizing: border-box;
    min-width: 0;
}

/* Koşu sekmeleri: sol üst → sağ alt diagonal; sağ üst üçgen turuncu; pist türü = sekme dolgu gradient */
.tz-ticket-leg {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: clamp(2.75rem, calc(9vw + 1.45rem), 4.65rem);
    border-radius: clamp(0.55rem, 1.8vw, 0.85rem);
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: var(--tz-leg-bg, #1a1a1a);
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    padding: clamp(0.12rem, calc(1.1vw + 0.08rem), 0.38rem);
    box-sizing: border-box;
}

.tz-ticket-leg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--tz-leg-orange, #f28b2c);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    pointer-events: none;
    border-radius: inherit;
}

.tz-ticket-leg.is-active {
    border: 2px solid var(--tz-leg-cyan, #4cc9f0);
    box-shadow: 0 0 12px rgba(76, 201, 240, 0.22);
}

/* Pist türü — sekme dolgusu (üst-sağ turuncu ::before ile aynı; seçilide daha güçlü ton) */
.tz-ticket-leg.pist-cim:not(.is-active) {
    background: linear-gradient(145deg, rgba(34, 160, 80, 0.16) 0%, #171a17 48%, #141414 100%);
}

.tz-ticket-leg.pist-kum:not(.is-active) {
    background: linear-gradient(145deg, rgba(139, 90, 43, 0.18) 0%, #1a1714 48%, #141414 100%);
}

.tz-ticket-leg.pist-sentetik:not(.is-active) {
    background: linear-gradient(145deg, rgba(120, 120, 128, 0.15) 0%, #171719 48%, #141414 100%);
}

.tz-ticket-leg.pist-cim.is-active {
    background: linear-gradient(150deg, rgba(46, 175, 98, 0.48) 0%, #1a4a30 36%, #0c1610 100%);
}

.tz-ticket-leg.pist-kum.is-active {
    background: linear-gradient(150deg, rgba(165, 108, 58, 0.5) 0%, #4d331c 36%, #100c08 100%);
}

.tz-ticket-leg.pist-sentetik.is-active {
    background: linear-gradient(150deg, rgba(124, 126, 134, 0.46) 0%, #34363e 36%, #0c0e12 100%);
}

.tz-ticket-leg.pist-default.is-active {
    background: var(--tz-leg-active-bl, #2a4d59);
}

.tz-ticket-leg > span {
    position: relative;
    z-index: 1;
}

.tz-ticket-leg-count {
    align-self: flex-end;
    font-size: clamp(0.42rem, calc(0.4vw + 0.34rem), 0.62rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}

.tz-ticket-leg-label {
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.02rem;
    line-height: 1.05;
    min-width: 0;
}

.tz-ticket-leg-num {
    font-size: clamp(0.46rem, calc(0.52vw + 0.32rem), 0.72rem);
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}

.tz-ticket-leg-kosu {
    font-size: clamp(0.42rem, calc(0.46vw + 0.28rem), 0.66rem);
    font-weight: 900;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}

/* Dar alanda 6 sekme: bar genişliğine göre (cqw) ince ayar; scroll yok. */
@supports (container-type: inline-size) {
    .tz-ticket-legs {
        gap: clamp(2px, 0.85cqw, 7px);
    }

    .tz-ticket-leg {
        height: clamp(2.8rem, calc(5.5cqw + 2.15rem), 4.65rem);
        border-radius: clamp(0.55rem, 1.2cqw, 0.85rem);
        padding: clamp(0.12rem, calc(0.9cqw + 0.08rem), 0.38rem);
    }

    .tz-ticket-leg-count {
        font-size: clamp(0.42rem, calc(0.35cqw + 0.32rem), 0.62rem);
    }

    .tz-ticket-leg-num {
        font-size: clamp(0.48rem, calc(0.42cqw + 0.32rem), 0.72rem);
    }

    .tz-ticket-leg-kosu {
        font-size: clamp(0.44rem, calc(0.38cqw + 0.28rem), 0.66rem);
    }
}

.tz-ticket-race-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
    font-size: 0.62rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    padding: 0.35rem 0.25rem;
    box-sizing: border-box;
}

.tz-ticket-meta-text {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tz-ticket-meta-time {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-weight: 750;
    color: rgba(255, 255, 255, 0.82);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tz-ticket-meta-clock {
    opacity: 0.9;
    font-size: 0.72em;
}

.tz-ticket-main {
    /* HEPSİ + ~10 at satırı — iOS’taki görünür liste yüksekliği */
    --tz-horse-all-h: 2.8rem;
    --tz-horse-row-h: 2.5rem;
    --tz-horse-visible-rows: 10;
    --tz-ticket-pane-height: calc(var(--tz-horse-all-h) + var(--tz-horse-row-h) * var(--tz-horse-visible-rows));

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(0.3rem, 1.8vw, 0.75rem);
    align-items: stretch;
    margin-top: 0.25rem;
    min-height: var(--tz-ticket-pane-height);
    min-width: 0;
}

@media (min-width: 640px) {
    .tz-ticket-main {
        min-height: clamp(var(--tz-ticket-pane-height), 38vh, 520px);
    }
}

.tz-ticket-list-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    align-self: stretch;
}

.tz-ticket-horses {
    flex: 0 0 auto;
    width: 100%;
    height: var(--tz-ticket-pane-height);
    max-height: var(--tz-ticket-pane-height);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.tz-ticket-kupon {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.45rem 0.35rem 0.65rem;
    min-width: 0;
    min-height: var(--tz-ticket-pane-height);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.tz-kupon-title {
    text-align: center;
    font-size: 0.78rem;
    font-weight: 800;
    color: rgba(37, 217, 239, 0.85);
    margin-bottom: 0.35rem;
    flex-shrink: 0;
}

.tz-kupon-legs {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 0.45rem;
}

.tz-kupon-misli {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 0.45rem;
    flex-shrink: 0;
}

.tz-kupon-sum {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.78rem;
    flex-shrink: 0;
}

.tz-horse-all {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 0.65rem;
    margin-bottom: 0.35rem;
    border-radius: 0.45rem;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-weight: 800;
    font-size: 0.72rem;
    cursor: pointer;
}

.tz-horse-row {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1.85rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.45rem 0.45rem 0.35rem;
    margin-bottom: 0.25rem;
    border-radius: 0.45rem;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    box-sizing: border-box;
}

.tz-horse-row.is-selected {
    background: rgba(37, 217, 239, 0.12);
    border-color: rgba(37, 217, 239, 0.65);
}

.tz-horse-row.is-selected .tz-horse-agf {
    margin-right: 1.55rem;
}

.tz-horse-row.is-kosmaz {
    opacity: 0.38;
    cursor: not-allowed;
}

.tz-horse-forma {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 42%;
    background-image: var(--forma);
    background-size: cover;
    background-position: left center;
    pointer-events: none;
    opacity: 0.45;
    mask-image: linear-gradient(90deg, #000 25%, transparent 100%);
}

.tz-horse-no {
    position: relative;
    font-weight: 950;
    font-size: 0.95rem;
    text-shadow: 0 1px 4px #000;
}

.tz-horse-mid {
    position: relative;
    min-width: 0;
}

.tz-horse-name {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.68rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tz-horse-ekuri {
    flex-shrink: 0;
}

.tz-horse-jock {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tz-horse-agf {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.05rem;
    font-size: 0.58rem;
    font-weight: 800;
    margin-right: 0.35rem;
}

.tz-horse-agf1 {
    color: rgba(255, 255, 255, 0.38);
}

.tz-horse-agf2 {
    color: #ff9f0a;
}

.tz-horse-check {
    position: absolute;
    right: 0.42rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(37, 217, 239, 0.95);
    font-size: 0.9rem;
}

/* ── Position-based bets (Sıralı Beşli, Tabela, etc.) ── */
.tz-pos-tabs {
    display: flex;
    gap: 6px;
    padding: 6px 0 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tz-pos-tab {
    flex: 1 0 auto;
    min-width: 3rem;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    text-align: center;
}

.tz-pos-tab.is-active {
    background: rgba(37, 217, 239, 0.9);
    border-color: rgba(37, 217, 239, 0.9);
    color: #000;
}

.tz-pos-tab.is-filled {
    border-color: rgba(37, 217, 239, 0.5);
    color: rgba(37, 217, 239, 0.7);
}

/* Horse selected in a different position */
.tz-horse-row.is-pos-any {
    background: rgba(37, 217, 239, 0.05);
    border-color: rgba(37, 217, 239, 0.2);
}

.tz-horse-pos-dot {
    position: absolute;
    right: 0.42rem;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(37, 217, 239, 0.45);
    display: block;
}

/* SIRALAMA panel — position label prefix */
.tz-kupon-leg-lbl {
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    margin-right: 4px;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* ── end position-based ── */

.tz-kupon-leg {
    width: 100%;
    text-align: left;
    border: none;
    border-radius: 0.35rem;
    padding: 0.35rem 0.45rem;
    background: rgba(0, 0, 0, 0.22);
    cursor: pointer;
}

.tz-kupon-leg.is-active {
    background: rgba(37, 217, 239, 0.16);
}

.tz-kupon-leg-txt {
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(37, 217, 239, 0.88);
}

.tz-kupon-misli button {
    border: none;
    background: none;
    color: rgba(37, 217, 239, 0.85);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 0.2rem;
}

.tz-kupon-sum span {
    display: block;
    color: rgba(255, 255, 255, 0.38);
}

.tz-kupon-sum strong {
    display: block;
    font-size: 0.95rem;
    color: #fff;
}

.tz-kupon-tutar {
    color: #ff9f0a !important;
}

.tz-ticket-save {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.65rem;
}

.tz-ticket-save-btn {
    border: none;
    border-radius: 0.55rem;
    padding: 0.65rem;
    font-weight: 950;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    background: linear-gradient(135deg, #25d9ef, #1ab3c8);
    color: #000;
    box-shadow: 0 6px 16px rgba(37, 217, 239, 0.28);
    cursor: pointer;
}

.tz-ticket-save-btn--locked:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    filter: grayscale(0.5);
    box-shadow: none;
}

.tz-ticket-loading,
.tz-ticket-error {
    text-align: center;
    padding: 2rem 1rem;
    color: rgba(255, 255, 255, 0.45);
}

.tz-ticket-error {
    color: #ff6b6b;
}

.tz-coupon-spinner {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 3px solid rgba(37, 217, 239, 0.25);
    border-top-color: rgba(37, 217, 239, 0.9);
    border-radius: 50%;
    animation: tz-spin 0.85s linear infinite;
}

@keyframes tz-spin {
    to {
        transform: rotate(360deg);
    }
}

/* —— /kupon/ masaüstü (≥821px): hub + bilet daha kompakt; 640px’teki büyük pane clamp’ini devre dışı bırakır —— */
@media (min-width: 821px) {
    .tz-coupon-page.page {
        min-height: 0;
    }

    body.tz-coupon-ticket-mode .tz-coupon-page.page {
        padding-bottom: 0.35rem;
        padding-top: 0.5rem;
    }

    .tz-coupon-page .tz-coupon-shell {
        padding: 0 clamp(0.45rem, 1.8vw, 0.85rem) 1.2rem;
    }

    .tz-coupon-page .tz-coupon-banner-stack {
        gap: 0.5rem;
    }

    .tz-coupon-page .tz-coupon-banner {
        min-height: 5rem;
        max-height: 6rem;
    }

    .tz-coupon-page .tz-coupon-banner-title {
        min-height: 5rem;
        font-size: clamp(0.78rem, 1.35vw, 1.08rem);
    }

    .tz-coupon-page .tz-coupon-divider {
        margin: 0.72rem 0.45rem 0.48rem;
        font-size: 0.56rem;
    }

    .tz-coupon-page .tz-coupon-presets {
        margin-top: 0.22rem;
    }

    .tz-coupon-page .tz-preset-card {
        margin-bottom: 0.55rem;
    }

    .tz-coupon-page .tz-ticket-pickers {
        border-radius: 0.52rem;
    }

    .tz-coupon-page .tz-ticket-picker {
        padding: 0.32rem 0.36rem 0.32rem 0.42rem;
    }

    .tz-coupon-page .tz-ticket-picker-k {
        font-size: 0.5rem;
    }

    .tz-coupon-page .tz-ticket-picker select {
        font-size: 0.62rem;
    }

    .tz-coupon-page .tz-ticket-picker-chev {
        font-size: 0.88rem;
    }

    .tz-coupon-page .tz-ticket-legs-wrap {
        margin: 0.26rem 0 0.1rem;
    }

    /* Desktop: koşu sekmeleri tam genişliğe yayılmak yerine kare kutu;
       satır yatay olarak ortalanır. */
    .tz-coupon-page .tz-ticket-legs {
        justify-content: center;
        gap: clamp(4px, 0.9vw, 10px);
    }

    .tz-coupon-page .tz-ticket-leg {
        flex: 0 0 auto;
        width: auto;
        aspect-ratio: 1 / 1;
        height: clamp(2.6rem, 3.4vw + 1.32rem, 3.6rem);
        border-radius: clamp(0.4rem, 0.85vw, 0.68rem);
        padding: clamp(0.1rem, 0.48vw + 0.08rem, 0.3rem);
    }

    .tz-coupon-page .tz-ticket-leg-count {
        font-size: clamp(0.36rem, 0.32vw + 0.26rem, 0.52rem);
    }

    .tz-coupon-page .tz-ticket-leg-num {
        font-size: clamp(0.38rem, 0.38vw + 0.26rem, 0.58rem);
    }

    .tz-coupon-page .tz-ticket-leg-kosu {
        font-size: clamp(0.36rem, 0.34vw + 0.22rem, 0.54rem);
    }

    .tz-coupon-page .tz-ticket-race-meta {
        padding: 0.18rem 0.16rem;
        font-size: 0.52rem;
        gap: 0.32rem;
    }

    .tz-coupon-page .tz-ticket-main {
        --tz-horse-all-h: 2.3rem;
        --tz-horse-row-h: 2rem;
        --tz-horse-visible-rows: 9;
        margin-top: 0.12rem;
        gap: 0.38rem;
        min-height: var(--tz-ticket-pane-height);
    }

    .tz-coupon-page .tz-ticket-horses {
        height: var(--tz-ticket-pane-height);
        max-height: var(--tz-ticket-pane-height);
        /* Kaydırma çubuğu için yer ayır; aksi halde sağdaki AGF oranları ve
           at seçimi (✓) çubuğun altında kalıp görünmüyor. */
        scrollbar-gutter: stable;
        padding-right: 0.3rem;
    }

    .tz-coupon-page .tz-ticket-kupon {
        min-height: var(--tz-ticket-pane-height);
        max-height: var(--tz-ticket-pane-height);
        padding: 0.34rem 0.28rem 0.42rem;
    }

    .tz-coupon-page .tz-horse-all {
        padding: 0.38rem 0.48rem;
        margin-bottom: 0.24rem;
        font-size: 0.62rem;
    }

    .tz-coupon-page .tz-horse-row {
        grid-template-columns: 1.58rem minmax(0, 1fr) auto;
        gap: 0.24rem;
        padding: 0.3rem 0.32rem 0.3rem 0.26rem;
        margin-bottom: 0.16rem;
    }

    .tz-coupon-page .tz-horse-no {
        font-size: 0.8rem;
    }

    .tz-coupon-page .tz-horse-name {
        font-size: 0.58rem;
    }

    .tz-coupon-page .tz-horse-jock {
        font-size: 0.48rem;
    }

    .tz-coupon-page .tz-horse-agf {
        font-size: 0.5rem;
        margin-right: 0.26rem;
    }

    .tz-coupon-page .tz-horse-row.is-selected .tz-horse-agf {
        margin-right: 1.28rem;
    }

    .tz-coupon-page .tz-horse-check {
        right: 0.3rem;
        font-size: 0.74rem;
    }

    .tz-coupon-page .tz-kupon-title {
        font-size: 0.66rem;
        margin-bottom: 0.24rem;
    }

    .tz-coupon-page .tz-kupon-legs {
        gap: 0.16rem;
        margin-bottom: 0.28rem;
    }

    .tz-coupon-page .tz-kupon-leg {
        padding: 0.26rem 0.34rem;
    }

    .tz-coupon-page .tz-kupon-leg-txt {
        font-size: 0.64rem;
    }

    .tz-coupon-page .tz-kupon-misli {
        font-size: 0.68rem;
        margin-bottom: 0.28rem;
        gap: 0.24rem;
    }

    .tz-coupon-page .tz-kupon-misli button {
        font-size: 0.95rem;
    }

    .tz-coupon-page .tz-kupon-sum {
        font-size: 0.64rem;
    }

    .tz-coupon-page .tz-kupon-sum strong {
        font-size: 0.8rem;
    }

    /* Masaüstü: KAYDET butonu sağdaki KUPON sütununun altında hizalanır
       (tz-ticket-main gap'i 0.38rem → yarısı 0.19rem). */
    .tz-coupon-page .tz-ticket-save {
        margin-top: 0.4rem;
        gap: 0.26rem;
        align-items: flex-end;
    }

    .tz-coupon-page .tz-ticket-save-btn {
        width: calc(50% - 0.19rem);
        padding: 0.46rem;
        font-size: 0.72rem;
    }

    /* —— Anasayfa (Yarış Programı) + AGF: masaüstü kompakt —— */
    .tz-home-page.page {
        min-height: 0;
        padding-top: 0.65rem;
        padding-bottom: 1.5rem;
    }

    .tz-home-page .home-date-card {
        margin-bottom: 0.65rem;
    }

    .tz-home-page .ios-date-form {
        padding: 0.52rem 0.75rem;
        gap: 0.55rem;
        border-radius: 14px;
    }

    .tz-home-page .date-arrow {
        width: 44px;
        height: 44px;
        font-size: 1.85rem;
    }

    .tz-home-page .ios-date-display {
        font-size: 0.82rem;
        padding: 0.22rem 0.15rem;
    }

    .tz-home-page .home-promo-mini {
        min-height: 112px;
        margin-bottom: 0.72rem;
        border-radius: 16px;
    }

    .tz-home-page .home-promo-mini__badge {
        width: 2.35rem;
        font-size: 0.64rem;
        letter-spacing: 0.14em;
    }

    .tz-home-page .home-promo-mini__frame {
        padding: 0.65rem 1.05rem 0.65rem 0.95rem;
        gap: 0.5rem;
    }

    .tz-home-page .home-promo-mini__kicker {
        font-size: 0.66rem;
    }

    .tz-home-page .hpm-stat b {
        font-size: 1.55rem;
    }

    .tz-home-page .hpm-stat i {
        font-size: 0.6rem;
    }

    .tz-home-page .hpm-hero__name {
        font-size: 1.05rem;
    }

    .tz-home-page .hpm-hero__meta {
        font-size: 0.64rem;
    }

    .tz-home-page .hpm-hero__g b,
    .tz-home-page .hpm-hero__agf b,
    .tz-home-page .hpm-hero__fav b {
        font-size: 1.1rem;
    }

    .tz-home-page .hpm-hero__g i,
    .tz-home-page .hpm-hero__agf i,
    .tz-home-page .hpm-hero__fav i {
        font-size: 0.58rem;
    }

    .tz-home-page .hpm-hero {
        max-width: 520px;
        width: 100%;
        margin: 0 auto;
    }

    .tz-home-page .hpm-stats {
        max-width: 480px;
        width: 100%;
        margin: 0 auto;
    }

    .tz-home-page .ios-card-stack {
        gap: 0.72rem;
    }

    .tz-home-page .ios-image-card,
    .tz-home-page .race-city-card {
        min-height: 82px;
        padding: 0 18px;
        border-radius: 14px;
    }

    .tz-home-page .ios-image-card span {
        font-size: 1.05rem;
    }

    .tz-home-page .home-action-stack {
        margin-top: 0.72rem;
    }

    .tz-home-page .race-program-empty {
        min-height: 140px;
        padding: 1.25rem 1rem;
    }

    .tz-home-page .race-program-empty .empty-icon {
        font-size: 2.35rem;
        margin-bottom: 0.65rem;
    }

    .tz-home-page .race-program-empty h2 {
        font-size: 0.88rem;
    }

    .tz-home-page .race-program-empty p {
        font-size: 0.72rem;
    }

    .tz-agf-page.program-track-surface.page {
        min-height: 0;
        padding-top: 0.65rem;
        padding-bottom: 1.5rem;
    }

    .tz-agf-page .odds-shell {
        padding-bottom: 0.5rem;
    }

    .tz-agf-page .odds-top-bar {
        padding: 0.28rem 0 0.42rem;
        min-height: 2.85rem;
        gap: 0.5rem;
    }

    .tz-agf-page .odds-city-picker {
        padding: 0.28rem 0.5rem;
    }

    .tz-agf-page .odds-pin {
        font-size: 0.72rem;
    }

    .tz-agf-page .odds-city-select {
        font-size: 0.82rem;
        padding-right: 0.75rem;
    }

    .tz-agf-page .odds-date-weather strong {
        font-size: 0.68rem;
    }

    .tz-agf-page .odds-weather-line {
        font-size: 0.58rem;
        margin-top: 0.12rem;
    }

    .tz-agf-page .odds-run-strip {
        padding: 0.35rem 0 0.45rem;
        gap: 3px;
    }

    .tz-agf-page .odds-run-tab {
        min-width: 2rem;
        height: 2rem;
        font-size: 0.76rem;
        border-radius: 5px;
    }

    .tz-agf-page .odds-subtab {
        padding: 0.45rem 0.2rem;
        font-size: 0.78rem;
    }

    .tz-agf-page .odds-info-row {
        min-height: 1.75rem;
        padding: 0 0.5rem;
        font-size: 0.68rem;
    }

    .tz-agf-page .odds-panel-empty {
        padding: 1.25rem 0.85rem;
        font-size: 0.76rem;
    }

    .tz-agf-page .odds-th {
        font-size: 0.58rem;
        padding: 0.32rem 0.14rem;
    }

    .tz-agf-page .odds-td {
        min-height: 2.35rem;
        padding: 0.14rem 0.18rem;
        font-size: 0.7rem;
    }

    .tz-agf-page .odds-label,
    .tz-agf-page .odds-odds {
        font-size: 0.72rem;
    }

    .tz-agf-page .odds-agf-line {
        font-size: 0.72rem;
    }

    .tz-agf-page .odds-kosmaz-pill,
    .tz-agf-page .odds-agf-kosmaz {
        font-size: 0.65rem;
    }

    /* —— Simülasyon kurulum /simulasyon/ —— */
    .page.tz-simulation-setup {
        min-height: 0;
        padding-top: 0.65rem;
        padding-bottom: 1.5rem;
    }

    .page.tz-simulation-setup .tz-simulation {
        min-height: 0;
        padding: 0.45rem 0 0.9rem;
    }

    .page.tz-simulation-setup .tz-simulation__horse-grid {
        max-height: min(380px, 36vh);
        padding: 0 0.35rem;
    }

    .page.tz-simulation-setup .tz-simulation__horses-head {
        margin-top: 0;
        padding: 0 0.35rem 0.32rem;
    }

    .page.tz-simulation-setup .tz-simulation__city-row {
        padding: 0.28rem 0.35rem 0.65rem;
    }

    .page.tz-simulation-setup .tz-simulation__race-scroll {
        padding: 0.22rem 0.35rem 0.62rem;
    }

    .page.tz-simulation-setup .tz-simulation__cta {
        margin: 0.82rem auto 1.2rem;
    }

    /* —— Simülasyon 3D /simulasyon/3d/ —— */
    body.tz-sim-3d-immersive main.page.tz-sim-3d {
        padding-top: 0.65rem;
        padding-bottom: 1.25rem;
        min-height: 0;
    }

    /* —— 6'lı Ne Verir /sixli-ne-verir/ —— */
    .tz-sixbet-page.page {
        min-height: 0;
        padding-top: 0.65rem;
        padding-bottom: 1.5rem;
        max-width: none;
    }

    .tz-sixbet-page .tz-sixbet-root {
        max-width: 100%;
        min-height: 0;
    }

    .tz-sixbet-page .tz-sixbet-main {
        padding-bottom: 0.45rem;
    }

    .tz-sixbet-page .tz-sixbet-pickers {
        margin: 0 0.08rem 0.12rem;
    }

    .tz-sixbet-page .tz-sixbet-legs {
        padding: 0.38rem 0.5rem 0.28rem;
    }

    .tz-sixbet-page .tz-sixbet-divider {
        margin: 0 0.45rem;
    }

    .tz-sixbet-page .tz-sixbet-split {
        min-height: min(42vh, 440px);
        max-height: 62vh;
    }

    .tz-sixbet-page .tz-sixbet-horse-list {
        --tz-sixbet-horse-rows-visible: 9;
        --tz-sixbet-horse-row-est: 2.52rem;
    }

    .tz-sixbet-page .tz-sixbet-results {
        max-height: min(38vh, 13rem);
    }

    .tz-sixbet-page .tz-sixbet-panel-h {
        padding: 0.38rem 0.5rem;
        margin: 0.35rem 0.42rem 0.18rem;
        font-size: 0.64rem;
    }

    .tz-sixbet-page .tz-sixbet-tevzi {
        margin: 0.12rem 0.42rem 0.35rem;
    }

    .tz-sixbet-page .tz-sixbet-bottom {
        margin-top: 0.28rem;
        padding: 0.42rem 0.5rem 0.52rem;
    }

    /* Premium kapalı alt panel: gate overlay için konum bağlamı (mobilde zaten fixed) */
    .tz-sixbet-page .tz-sixbet-bottom--premium-locked {
        position: relative;
    }

    .tz-sixbet-page .tz-sixbet-bottom-inner {
        padding: 0.48rem;
    }

    .tz-sixbet-page .tz-sixbet-loading,
    .tz-sixbet-page .tz-sixbet-error {
        padding: 2.5rem 1.5rem;
        min-height: 30vh;
    }

    /* —— Kayıtlı kuponlar listesi /kupon/kayitli/ (detay sayfası hariç) —— */
    .page.tz-saved-ios-page:not(.tz-saved-detail-page) {
        min-height: 0;
        padding-top: 0.65rem;
        padding-bottom: 1.25rem;
    }

    .page.tz-saved-ios-page:not(.tz-saved-detail-page) .tz-saved-ios-wrap {
        padding-bottom: 1.2rem;
    }

    .page.tz-saved-ios-page:not(.tz-saved-detail-page) .tz-saved-ios-head {
        padding: 0;
        margin-bottom: 0.55rem;
    }

    .page.tz-saved-ios-page:not(.tz-saved-detail-page) .tz-saved-ios-divider {
        padding: 0.28rem 0 0.05rem;
        gap: 0.38rem;
    }

    .page.tz-saved-ios-page:not(.tz-saved-detail-page) .tz-saved-ios-divider-text {
        font-size: 0.66rem;
        letter-spacing: 0.13em;
    }

    .page.tz-saved-ios-page:not(.tz-saved-detail-page) .tz-saved-ios-list {
        gap: 0.42rem;
    }

    .page.tz-saved-ios-page:not(.tz-saved-detail-page) .tz-saved-ios-card,
    .page.tz-saved-ios-page:not(.tz-saved-detail-page) .tz-saved-ios-card-main {
        min-height: 76px;
    }

    .page.tz-saved-ios-page:not(.tz-saved-detail-page) .tz-saved-ios-card-main {
        padding: 0.38rem 0.58rem 0.38rem 0.52rem;
        gap: 0.42rem;
    }

    .page.tz-saved-ios-page:not(.tz-saved-detail-page) .tz-saved-ios-city {
        font-size: 0.86rem;
    }

    .page.tz-saved-ios-page:not(.tz-saved-detail-page) .tz-saved-ios-bet {
        font-size: 0.58rem;
    }

    .page.tz-saved-ios-page:not(.tz-saved-detail-page) .tz-saved-ios-time,
    .page.tz-saved-ios-page:not(.tz-saved-detail-page) .tz-saved-ios-misli {
        font-size: 0.54rem;
    }

    .page.tz-saved-ios-page:not(.tz-saved-detail-page) .tz-saved-ios-payout {
        font-size: 0.62rem;
    }

    .page.tz-saved-ios-page:not(.tz-saved-detail-page) .tz-saved-ios-amt {
        font-size: 0.86rem;
    }

    .page.tz-saved-ios-page:not(.tz-saved-detail-page) .tz-saved-ios-chev {
        font-size: 0.9rem;
    }

    .page.tz-saved-ios-page:not(.tz-saved-detail-page) .tz-saved-ios-empty.card {
        margin: 0.55rem 0.2rem;
        padding: 0.85rem 0.72rem;
    }

    /* —— Kurgu ağırlıkları /tay-zeka/kurgu-agirliklari/ —— */
    .page.tz-kurgu-weights-page {
        min-height: 0;
        width: min(1180px, calc(100% - 2rem));
        max-width: min(1180px, calc(100% - 2rem));
        padding-top: 0.65rem;
        padding-bottom: 1.25rem;
    }

    .page.tz-kurgu-weights-page .tz-kw-page {
        padding: 0.48rem clamp(0.55rem, 2.2vw, 1rem) 0.95rem;
        max-width: 100%;
    }

    .page.tz-kurgu-weights-page .tz-kw-inner {
        padding: 0.72rem clamp(0.8rem, 2.5vw, 1.65rem) 0.92rem;
        border-radius: 0.82rem;
    }

    .page.tz-kurgu-weights-page .tz-kw-header {
        justify-content: center;
        gap: 0.52rem;
        margin-bottom: 0.52rem;
    }

    .page.tz-kurgu-weights-page .tz-kw-heading {
        font-size: 0.82rem;
        letter-spacing: 0.16em;
    }

    .page.tz-kurgu-weights-page .tz-kw-lead {
        margin: 0 0 0.68rem;
        padding: 0.5rem 0.55rem;
        font-size: 0.65rem;
    }

    /* Masaüstü: tablo hizası — sabit etiket sütunu, eşit slider genişliği, sabit % sütunu */
    .page.tz-kurgu-weights-page .tz-kw-row {
        display: grid;
        grid-template-columns: minmax(6.5rem, 7.25rem) minmax(0, 1fr) 4rem;
        column-gap: 0.95rem;
        align-items: center;
        margin-bottom: 0.48rem;
    }

    .page.tz-kurgu-weights-page .tz-kw-slider-line {
        display: contents;
    }

    .page.tz-kurgu-weights-page .tz-kw-row-h {
        margin-bottom: 0;
        gap: 0.42rem;
        font-size: 0.82rem;
        white-space: nowrap;
        min-width: 0;
        letter-spacing: 0.04em;
    }

    .page.tz-kurgu-weights-page .tz-kw-sym {
        font-size: 1.18em;
        line-height: 1;
    }

    .page.tz-kurgu-weights-page .tz-kw-range-cell {
        min-width: 0;
        width: 100%;
    }

    .page.tz-kurgu-weights-page .tz-kw-range {
        width: 100%;
        height: 0.36rem;
    }

    .page.tz-kurgu-weights-page .tz-kw-pct {
        width: 100%;
        min-width: 0;
        font-size: 0.82rem;
        font-variant-numeric: tabular-nums;
        text-align: right;
        box-sizing: border-box;
        padding-inline-start: 0.25rem;
    }

    .page.tz-kurgu-weights-page .tz-kw-footer {
        margin-top: 0.82rem;
        gap: 0.42rem;
    }

    .page.tz-kurgu-weights-page .tz-kw-btn {
        min-height: 2.32rem;
        border-radius: 0.54rem;
        font-size: 0.69rem;
    }

    /* —— Kullanıcı sözleşmesi /hesap/kullanici-sozlesmesi/ + Gizlilik /gizlilik/ (aynı .tz-legal-page) —— */
    html:has(main.page.tz-legal-page) {
        height: 100dvh;
        max-height: 100dvh;
        overflow-y: clip;
    }

    body:has(main.page.tz-legal-page) {
        min-height: 0;
        max-height: 100dvh;
        overflow-y: clip;
    }

    .page.tz-legal-page {
        width: min(1180px, calc(100% - 2rem));
        max-width: min(1180px, calc(100% - 2rem));
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0;
        padding-top: max(0.45rem, env(safe-area-inset-top, 0px));
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
        padding-left: max(0.65rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.65rem, env(safe-area-inset-right, 0px));
        min-height: 0;
        /* Kullanılabilir yüksekliğin ~%90’u (bir önceki tavandan ~%10 küçültme) */
        max-height: calc(
            0.9 *
                (
                    100dvh -
                    env(safe-area-inset-top, 0px) -
                    env(safe-area-inset-bottom, 0px) -
                    8.85rem
                )
        );
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .page.tz-legal-page .tz-legal {
        flex: 1 1 auto;
        min-height: 0;
        max-height: 100%;
        width: min(100%, clamp(520px, 88vw, 780px));
        max-width: 100%;
        margin-inline: auto;
        display: flex;
        flex-direction: column;
    }

    .page.tz-legal-page .tz-legal__header {
        gap: 0.5rem;
        padding: 0.48rem 0.85rem;
    }

    .page.tz-legal-page .tz-legal__title-block {
        gap: 0.22rem;
    }

    .page.tz-legal-page .tz-legal__title {
        font-size: 0.78rem;
    }

    .page.tz-legal-page .tz-legal__pdf {
        font-size: 0.64rem;
    }

    .page.tz-legal-page .tz-legal__close {
        width: 1.95rem;
        height: 1.95rem;
    }

    .page.tz-legal-page .tz-legal__scroll {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
    }

    .page.tz-legal-page .tz-legal-doc-shell {
        padding: 0.05rem clamp(0.5rem, 2.5vw, 1rem) 0.55rem;
        max-width: 100%;
    }

    .page.tz-legal-page .tz-legal-doc {
        max-width: min(42rem, 100%);
        width: 100%;
        font-size: clamp(0.74rem, 0.42vw + 0.72rem, 0.8125rem);
        line-height: 1.55;
    }

    .page.tz-legal-page .tz-legal-doc__top {
        margin-bottom: 0.88rem;
    }

    .page.tz-legal-page .tz-legal-doc__title {
        font-size: clamp(0.94rem, 2.2vw, 1.02rem);
    }

    .page.tz-legal-page .tz-legal-doc__title--block {
        margin-top: 1.35rem;
        margin-bottom: 0.55rem;
        font-size: 0.82rem;
    }

    .page.tz-legal-page .tz-legal-doc__h2 {
        margin-top: 0.88rem;
        font-size: 0.74rem;
    }

    .page.tz-legal-page .tz-legal-doc__h3 {
        margin-top: 0.65rem;
        font-size: 0.71rem;
    }

    .page.tz-legal-page .tz-legal-doc__section-wrap p {
        margin-top: 0.42rem;
    }

    .page.tz-legal-page .tz-legal-doc__list {
        margin-top: 0.32rem;
    }

    .page.tz-legal-page .tz-legal-doc__list li {
        margin: 0.18rem 0;
    }

    .page.tz-legal-page .tz-legal-doc__tag {
        margin-top: 1.45rem;
        font-size: 0.68rem;
    }

    .page.tz-legal-page .tz-legal__server-hint {
        padding-inline: clamp(0.75rem, 4vw, 1.05rem);
        font-size: 0.68rem;
    }

    .page.tz-legal-page .tz-legal__explain {
        padding-inline: clamp(0.85rem, 4vw, 1.15rem);
        font-size: 0.69rem;
    }

    .page.tz-legal-page .tz-legal__btn {
        width: calc(100% - 2 * clamp(0.85rem, 4vw, 1.15rem));
        margin: 0.58rem clamp(0.85rem, 4vw, 1.15rem) 0.62rem;
        height: 2.72rem;
        border-radius: 12px;
    }

    .page.tz-legal-page .tz-legal__btn-label {
        font-size: 0.82rem;
    }

    .page.tz-legal-page .tz-legal__guest-hint {
        margin: -0.42rem clamp(0.85rem, 4vw, 1.15rem) 0.85rem;
        font-size: 0.7rem;
    }
}

body.tz-coupon-ticket-mode .page {
    padding-bottom: 0.5rem;
}

/* Mobil / dar pencere: alt tab bar — .topbar backdrop-filter fixed içeriği viewport’a hapsettiği için burada kapatılır */
@media (max-width: 820px) {
    .topbar {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(0, 0, 0, 0.88);
    }

    .tab-nav {
        position: fixed;
        z-index: 18;
        left: max(0.65rem, env(safe-area-inset-left, 0px));
        right: max(0.65rem, env(safe-area-inset-right, 0px));
        bottom: max(0.5rem, env(safe-area-inset-bottom, 0px));
        width: auto;
        max-width: min(430px, 100%);
        margin: 0 auto;
        margin-top: 0;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
        /* URL cubugu gizlenince viewport degisimi sirasinda ziplamayi onle */
        will-change: transform;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        /* CustomBottomBar (Android) — scroll'da sağdan/soldan daralma animasyonu */
        transition: max-width 0.3s ease;
    }

    /* —— CustomBottomBar collapse: scroll edilince etiketleri gizle, çubuğu daralt —— */
    .tab-nav-item > span:not(.tab-icon) {
        overflow: hidden;
        max-height: 1.5em;
        opacity: 1;
        transition: max-height 0.25s ease, opacity 0.2s ease;
    }

    .tab-nav-item {
        transition:
            background 0.2s ease,
            color 0.2s ease,
            box-shadow 0.2s ease,
            padding 0.25s ease;
    }

    .tab-nav--collapsed {
        max-width: 16.5rem;
        padding: 4px 10px;
        gap: 6px;
    }

    /* Simgeleri tek hatta diz; üst/alt padding'i azalt */
    .tab-nav--collapsed .tab-nav-item {
        gap: 0;
        padding: 5px 0;
    }

    /* Tüm simge kutularını (primary Tay Zeka dahil) aynı yüksekliğe getir → ortak merkez hattı */
    .tab-nav--collapsed .tab-icon,
    .tab-nav--collapsed .tab-icon.tab-icon--stack,
    .tab-nav--collapsed .tab-nav-item--primary .tab-icon,
    .tab-nav--collapsed .tab-nav-item--primary .tab-icon.tab-icon--stack {
        height: 30px;
        width: 100%;
    }

    .tab-nav--collapsed .tab-icon-svg,
    .tab-nav--collapsed .tab-nav-item--primary .tab-icon-svg {
        width: 25px;
        height: 25px;
    }

    /* Tay Zeka beyni: kutusuna tam sığacak şekilde, hafif daha büyük ve ortalı */
    .tab-nav--collapsed .tab-icon-svg--brain,
    .tab-nav--collapsed .tab-nav-item--primary .tab-icon-svg--brain {
        width: 29px;
        height: 29px;
    }

    .tab-nav--collapsed .tab-nav-item > span:not(.tab-icon) {
        max-height: 0;
        opacity: 0;
    }

    /* Seçili kapsül: simgeyi rahatça saran yumuşak hap */
    .tab-nav--collapsed .tab-nav-item.is-selected {
        border-radius: 16px;
    }

    .topbar-shell {
        padding-bottom: 0.35rem;
    }

    .page {
        padding-bottom: calc(6.75rem + env(safe-area-inset-bottom, 0px));
    }

    body.tz-coupon-ticket-mode .page {
        padding-bottom: calc(6.75rem + env(safe-area-inset-bottom, 0px));
    }

    /* Kurgu ağırlıkları — mobil: sıkı kenarlar; slider’lar kayar; İPTAL/KAYDET alt tab’a yakın */
    .page.tz-kurgu-weights-page {
        box-sizing: border-box;
        width: 100%;
        max-width: min(720px, 100%);
        margin-left: auto;
        margin-right: auto;
        padding-top: max(0.2rem, env(safe-area-inset-top, 0px));
        padding-bottom: calc(5.05rem + env(safe-area-inset-bottom, 0px));
        padding-left: max(0.28rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.28rem, env(safe-area-inset-right, 0px));
    }

    .page.tz-kurgu-weights-page .tz-kw-page {
        padding: 0.08rem 0.12rem 0.15rem;
        margin: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .page.tz-kurgu-weights-page .tz-kw-inner {
        display: flex;
        flex-direction: column;
        min-height: 0;
        max-height: calc(
            100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 10.42rem
        );
        padding: 0.38rem 0.4rem 0.42rem;
        border-radius: 0.72rem;
    }

    .page.tz-kurgu-weights-page .tz-kw-header {
        flex-shrink: 0;
        margin-bottom: 0.38rem;
        gap: 0.4rem;
    }

    .page.tz-kurgu-weights-page .tz-kw-heading {
        font-size: 0.6rem;
        letter-spacing: 0.12em;
    }

    .page.tz-kurgu-weights-page .tz-kw-lead {
        flex-shrink: 0;
        margin: 0 0 0.42rem;
        padding: 0.4rem 0.42rem;
        font-size: 0.64rem;
        line-height: 1.4;
        border-radius: 0.55rem;
    }

    .page.tz-kurgu-weights-page .tz-kw-sliders {
        flex: 1 1 auto;
        min-height: min(180px, 28dvh);
        overflow-x: clip;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
        padding-right: 0.1rem;
    }

    /*
     * CHECKPOINT: kurgu ağırlıkları mobil — iki satır (etiket üstte, slider+% altta)
     * Geri almak için: aşağıdaki mobil grid kurallarını silip bu bloğu yorum dışına alın.
     * Kayıt tarihi: 2026-05-05
     *
     *     .page.tz-kurgu-weights-page .tz-kw-row {
     *         margin-bottom: 0.45rem;
     *     }
     *     .page.tz-kurgu-weights-page .tz-kw-row-h {
     *         margin-bottom: 0.16rem;
     *         font-size: 0.63rem;
     *     }
     *     .page.tz-kurgu-weights-page .tz-kw-range {
     *         height: 0.34rem;
     *     }
     * (mobilde .tz-kw-slider-line display:flex — global; tz-kw-slider-line display:contents kuralı yok.)
     */

    /* Mobil: masaüstü ile aynı 3 sütunlu grid (dar sütunlar) */
    .page.tz-kurgu-weights-page .tz-kw-row {
        display: grid;
        grid-template-columns: minmax(6rem, 6.85rem) minmax(0, 1fr) 3.1rem;
        column-gap: 0.42rem;
        align-items: center;
        margin-bottom: 0.4rem;
    }

    .page.tz-kurgu-weights-page .tz-kw-slider-line {
        display: contents;
    }

    .page.tz-kurgu-weights-page .tz-kw-row-h {
        margin-bottom: 0;
        gap: 0.26rem;
        font-size: 0.63rem;
        white-space: nowrap;
        min-width: 0;
        letter-spacing: 0.03em;
    }

    .page.tz-kurgu-weights-page .tz-kw-sym {
        font-size: 1.1em;
        line-height: 1;
    }

    .page.tz-kurgu-weights-page .tz-kw-range-cell {
        min-width: 0;
        width: 100%;
    }

    .page.tz-kurgu-weights-page .tz-kw-range {
        width: 100%;
        height: 0.34rem;
    }

    .page.tz-kurgu-weights-page .tz-kw-pct {
        width: 100%;
        min-width: 0;
        font-size: 0.7rem;
        font-variant-numeric: tabular-nums;
        text-align: right;
        box-sizing: border-box;
        padding-inline-start: 0.12rem;
    }

    .page.tz-kurgu-weights-page .tz-kw-footer {
        flex-shrink: 0;
        margin-top: 0.38rem;
        gap: 0.32rem;
    }

    .page.tz-kurgu-weights-page .tz-kw-btn {
        min-height: 2.22rem;
        border-radius: 0.52rem;
        font-size: 0.66rem;
    }
}

/* —— 6'lı Ne Verir (SixBetPredictionView web) —— */
.tz-sixbet-page.page {
    max-width: min(100%, 1100px);
}

.tz-sixbet-root {
    max-width: min(100%, 1100px);
    margin: 0 auto;
    min-height: 50vh;
}

.tz-sixbet-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 4rem 1rem;
    min-height: 40vh;
    color: rgba(255, 255, 255, 0.40);
    font-size: 0.82rem;
    text-align: center;
}

.tz-sixbet-spinner {
    display: inline-block;
    width: 2.25rem;
    height: 2.25rem;
    border: 3px solid rgba(37, 217, 239, 0.2);
    border-top-color: rgba(37, 217, 239, 0.95);
    border-radius: 50%;
    animation: tz-spin 0.85s linear infinite;
}

.tz-sixbet-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 4rem 2.5rem;
    min-height: 40vh;
    text-align: center;
}

.tz-sixbet-error-ico {
    width: 44px;
    height: 44px;
    color: #facc15;
    flex-shrink: 0;
}

.tz-sixbet-error-msg {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.50);
    max-width: 280px;
    line-height: 1.55;
    margin: 0;
}

.tz-sixbet-retry {
    margin-top: 0;
    border: none;
    background: none;
    padding: 0.2rem 0;
    color: #25d9ef;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: opacity 0.15s;
}
.tz-sixbet-retry:hover { opacity: 0.75; }

.tz-sixbet-main {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: 0.5rem;
}

/* Yazar display:flex kuralı UA [hidden]{display:none}'ı ezerdi; yükleniyor/
   hata/ana durumları JS .hidden ile geçiş yapabilsin diye geri getir. */
.tz-sixbet-loading[hidden],
.tz-sixbet-error[hidden],
.tz-sixbet-main[hidden] {
    display: none !important;
}

.tz-sixbet-pickers {
    display: flex;
    align-items: stretch;
    margin: 0 0.35rem 0.15rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.tz-sixbet-picker-wrap {
    flex: 1;
    min-width: 0;
}

.tz-sixbet-picker {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.5rem;
    cursor: pointer;
    margin: 0;
    min-height: 3.1rem;
}

.tz-sixbet-picker-icon {
    flex-shrink: 0;
    width: 1.35rem;
    text-align: center;
    color: rgba(37, 217, 239, 0.75);
    font-size: 1rem;
}

.tz-sixbet-picker-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.tz-sixbet-picker-label {
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: rgba(37, 217, 239, 0.75);
}

.tz-sixbet-picker select {
    width: 100%;
    min-width: 0;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 0;
    margin: 0;
    cursor: pointer;
    appearance: none;
    font-family: inherit;
}

.tz-sixbet-picker select option {
    color: #111;
    background: #fff;
}

.tz-sixbet-chevron {
    flex-shrink: 0;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.28);
    margin-right: 0.15rem;
}

.tz-sixbet-picker-divider {
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
    align-self: stretch;
    margin: 0.45rem 0;
}

.tz-sixbet-legs {
    --tz-sixbet-leg-n: 6;
    display: grid;
    grid-template-columns: repeat(var(--tz-sixbet-leg-n, 6), minmax(0, 1fr));
    gap: 6px;
    padding: 0.5rem 0.65rem 0.35rem;
}

.tz-sixbet-leg {
    aspect-ratio: 1;
    border: none;
    border-radius: 8px;
    padding: 0;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.03);
    position: relative;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.tz-sixbet-leg--active {
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 -3px 0 rgba(37, 217, 239, 0.85);
}

.tz-sixbet-leg--picked {
    background: rgba(37, 217, 239, 0.1);
}

.tz-sixbet-leg--done {
    background: transparent;
    box-shadow: inset 0 0 0 2px rgba(48, 209, 88, 0.75);
}

.tz-sixbet-leg-kosu {
    font-size: clamp(0.62rem, 2.4vw, 0.8rem);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.32);
}

.tz-sixbet-leg--active .tz-sixbet-leg-kosu {
    color: rgba(37, 217, 239, 0.92);
}

.tz-sixbet-leg-no {
    font-size: clamp(1rem, 4.2vw, 1.35rem);
    font-weight: 950;
    color: #ff9f0a;
}

.tz-sixbet-leg-no--pick {
    color: rgba(37, 217, 239, 0.95);
}

/* Masaüstü: ayak kutuları 1fr + aspect-ratio ile devleşmesin */
@media (min-width: 768px) {
    .tz-sixbet-legs {
        grid-template-columns: repeat(var(--tz-sixbet-leg-n, 6), minmax(0, 2.65rem));
        justify-content: center;
        gap: 8px;
        padding: 0.35rem 0.65rem 0.3rem;
    }

    .tz-sixbet-leg {
        aspect-ratio: unset;
        width: 100%;
        max-width: 2.65rem;
        height: 2.65rem;
        box-sizing: border-box;
    }

    .tz-sixbet-leg-kosu {
        font-size: 0.68rem;
    }

    .tz-sixbet-leg-no {
        font-size: 1.05rem;
    }
}

@media (min-width: 1100px) {
    .tz-sixbet-legs {
        grid-template-columns: repeat(var(--tz-sixbet-leg-n, 6), minmax(0, 2.85rem));
    }

    .tz-sixbet-leg {
        max-width: 2.85rem;
        height: 2.85rem;
    }
}

.tz-sixbet-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 0 0.65rem;
}

.tz-sixbet-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    gap: 0;
    margin-top: 0.15rem;
    flex: 1;
    min-height: min(52vh, 520px);
    max-height: 70vh;
}

.tz-sixbet-split--solo-right {
    grid-template-columns: 1fr;
}

.tz-sixbet-split--solo-right .tz-sixbet-left,
.tz-sixbet-split--solo-right .tz-sixbet-col-gap {
    display: none !important;
}

.tz-sixbet-col-gap {
    background: rgba(255, 255, 255, 0.06);
}

.tz-sixbet-left,
.tz-sixbet-right {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.tz-sixbet-left--hidden {
    display: none !important;
}

.tz-sixbet-panel-h {
    text-align: center;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 0.68rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.52);
    padding: 0.45rem 0.65rem;
    margin: 0.45rem 0.5rem 0.25rem;
    background: rgb(43, 43, 43);
    border-radius: 8px;
}

.tz-sixbet-horse-list {
    --tz-sixbet-horse-rows-visible: 8;
    --tz-sixbet-horse-row-est: 2.65rem;
    flex: 1;
    flex-shrink: 1;
    min-height: 0;
    max-height: calc(var(--tz-sixbet-horse-row-est) * var(--tz-sixbet-horse-rows-visible));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.35rem;
}

.tz-sixbet-empty-col {
    padding: 1.5rem 0.75rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.32);
    font-size: 0.78rem;
}

.tz-sixbet-horse-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    padding: 0.52rem 0.55rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: inherit;
    font: inherit;
}

.tz-sixbet-horse-row--sel {
    background: rgba(37, 217, 239, 0.16);
}

.tz-sixbet-hno {
    flex-shrink: 0;
    width: 1.65rem;
    height: 1.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.07);
    font-size: 0.74rem;
    font-weight: 950;
}

.tz-sixbet-horse-row--sel .tz-sixbet-hno {
    background: rgba(37, 217, 239, 0.85);
    color: #000;
}

.tz-sixbet-hname {
    flex: 1;
    min-width: 0;
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tz-sixbet-hagf {
    flex-shrink: 0;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 0.68rem;
    font-weight: 800;
    color: #ff9f0a;
}

.tz-sixbet-results {
    flex: 0 0 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: min(45vh, 14rem);
    padding-bottom: 0.2rem;
}

.tz-sixbet-result-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0.45rem 0.65rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font: inherit;
    color: inherit;
}

.tz-sixbet-result-row--active {
    background: rgba(37, 217, 239, 0.1);
}

.tz-sixbet-res-left {
    flex: 1;
    min-width: 0;
    text-align: left;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 0.65rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.58);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tz-sixbet-res-g {
    flex-shrink: 0;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 0.58rem;
    font-weight: 900;
    color: #ff9f0a;
}

.tz-sixbet-res-dash {
    color: rgba(255, 255, 255, 0.18);
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 0.68rem;
}

.tz-sixbet-tevzi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex: 0 0 auto;
    margin: 0.15rem 0.5rem 0.45rem;
    padding: 0.45rem 0.65rem;
    border-radius: 7px;
    background: rgba(37, 217, 239, 0.06);
    border: 1px solid rgba(37, 217, 239, 0.18);
}

.tz-sixbet-tevzi-label {
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 0.65rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.45);
}

.tz-sixbet-tevzi-value {
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 0.68rem;
    font-weight: 950;
    color: rgba(37, 217, 239, 0.92);
}

.tz-sixbet-bottom {
    margin-top: 0.35rem;
    padding: 0.5rem 0.65rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
    background: rgba(10, 10, 14, 0.92);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.tz-sixbet-bottom-inner {
    border-radius: 10px;
    padding: 0.55rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* 6’lı özet premium — alt panel bulanık + ÜYE OL (ünlocked’da kapı DOM’da yok) */
.tz-sixbet-bottom--premium-locked {
    overflow: hidden;
}

/* İçerik normal çizilir; flu etki gate üzerinde backdrop-filter ile (kalın siyah maske yok) */
.tz-sixbet-bottom--premium-locked .tz-sixbet-bottom-inner {
    pointer-events: none;
    user-select: none;
}

.tz-sixbet-bottom-gate {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0.35rem, 2.5vw, 0.55rem);
    box-sizing: border-box;
    pointer-events: none;
    border-radius: 12px;
    /* Hafif cam + arkadaki gerçek satırları bulanıklaştır */
    background: rgba(12, 14, 20, 0.14);
    backdrop-filter: blur(12px) saturate(1.02);
    -webkit-backdrop-filter: blur(12px) saturate(1.02);
    /* Çok hafif merkez vinyet — ÜYE OL okunabilirliği için, siyaha gömülmez */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    /* backdrop yoksa: eski iç filter blur’a düş (hafif) */
    .tz-sixbet-bottom--premium-locked .tz-sixbet-bottom-inner {
        filter: blur(8px);
        -webkit-filter: blur(8px);
        opacity: 0.78;
    }

    .tz-sixbet-bottom-gate {
        background: rgba(10, 10, 14, 0.28);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

.tz-sixbet-bottom-gate__cta {
    pointer-events: auto;
    flex-shrink: 0;
    min-height: 40px;
    padding: 0 1rem;
    font-size: 0.7rem;
    max-width: min(100%, 220px);
    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.08);
}

.tz-sixbet-calc-nos {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.45rem;
}

.tz-sixbet-calc-no {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 0.65rem;
    font-weight: 950;
    color: #ff9f0a;
    padding: 0.35rem 0.12rem;
    border-radius: 6px;
    background: rgba(37, 217, 239, 0.12);
}

.tz-sixbet-calc-no--locked {
    color: rgba(255, 255, 255, 0.48);
    background: rgba(255, 255, 255, 0.06);
}

.tz-sixbet-prize-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    background: rgba(255, 159, 10, 0.07);
    border: 1px solid rgba(255, 159, 10, 0.18);
}

.tz-sixbet-prize-label {
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 0.58rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.42);
    max-width: 58%;
}

.tz-sixbet-prize {
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 1.1rem;
    font-weight: 950;
    color: #ff9f0a;
}

/* Mobil: özet tab üstünde sabit; yalnızca sol at listesi kayar, sayfa gövdesi kaymaz */
@media (max-width: 820px) {
    html:has(main.tz-sixbet-page) {
        overflow: hidden;
        height: 100%;
    }

    body:has(main.tz-sixbet-page) {
        overflow: hidden;
        min-height: 100dvh;
    }

    .tz-sixbet-page.page {
        display: flex;
        flex-direction: column;
        width: min(100% - 1.25rem, 720px);
        margin-inline: auto;
        padding-top: 0.85rem;
        padding-bottom: 0;
        /* Sticky üst şerit (logo + tab-nav) — alt tab ile çakışmasın */
        height: calc(100dvh - env(safe-area-inset-top, 0px) - var(--tz-sixbet-sticky-header, 12rem));
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - var(--tz-sixbet-sticky-header, 12rem));
        min-height: 0;
        overflow: hidden;
    }

    .tz-sixbet-root {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }

    .tz-sixbet-main {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        padding-bottom: 0.35rem;
    }

    .tz-sixbet-main.tz-sixbet-main--sticky-bottom {
        padding-bottom: calc(9.75rem + env(safe-area-inset-bottom, 0px));
    }

    .tz-sixbet-pickers,
    .tz-sixbet-legs,
    .tz-sixbet-divider {
        flex-shrink: 0;
    }

    .tz-sixbet-split {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        align-self: stretch;
        overflow: hidden;
    }

    .tz-sixbet-left {
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .tz-sixbet-right {
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .tz-sixbet-left .tz-sixbet-panel-h {
        flex-shrink: 0;
    }

    .tz-sixbet-right > .tz-sixbet-panel-h {
        flex-shrink: 0;
    }

    .tz-sixbet-right > .tz-sixbet-tevzi {
        flex-shrink: 0;
        margin-top: 0;
    }

    /* ~10 at sabit görünür (Dolce Mare civarı), sonrası yalnız bu panelde scroll */
    .tz-sixbet-horse-list {
        --tz-sixbet-horse-rows-visible: 10;
        --tz-sixbet-horse-row-est: 2.65rem;
        flex: 1 1 auto;
        min-height: 0;
        max-height: calc(var(--tz-sixbet-horse-row-est) * var(--tz-sixbet-horse-rows-visible));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }

    /* Sonuç listesi içerik kadar yüksek olsun; flex-grow boşluk yaratıp TEVZİ'yi aşağı itmesin */
    .tz-sixbet-results {
        flex: 0 0 auto;
        min-height: 0;
        max-height: min(48vh, 15rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding-bottom: 0.1rem;
    }

    .tz-sixbet-bottom {
        position: fixed;
        z-index: 17;
        left: max(0.65rem, env(safe-area-inset-left, 0px));
        right: max(0.65rem, env(safe-area-inset-right, 0px));
        bottom: calc(max(0.5rem, env(safe-area-inset-bottom, 0px)) + 5.2rem);
        margin-top: 0;
        margin-bottom: 0;
        padding: 0.45rem 0.6rem 0.5rem;
        border-radius: 12px;
        box-shadow: 0 -8px 26px rgba(0, 0, 0, 0.55);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(10, 10, 14, 0.96);
    }
}

/* —— AuthView.swift parity: /hesap/ giriş ekranı —— */
.page.tz-auth-page {
    width: min(520px, calc(100% - 2rem));
    padding-top: clamp(0.85rem, 3vw, 1.65rem);
    padding-bottom: 3rem;
}

/* Paywall giriş ekranı (iOS) — ikili arka plan biraz daha belirgin */
body.tz-body-ios-auth-sheet .matrix-bg {
    opacity: 0.26;
}

body.tz-body-ios-auth-sheet .page.tz-auth-page {
    width: min(424px, calc(100% - 2rem));
}

.tz-auth-shell--ios {
    position: relative;
    max-width: min(392px, 100%);
    margin-left: auto;
    margin-right: auto;
    gap: clamp(1rem, 3.2vw, 1.35rem);
}

.tz-auth-guest--ios {
    position: relative;
    padding-top: clamp(0.85rem, 3vw, 1.35rem);
    text-align: center;
}

/* Avatar ortada, Kapat üç sütun ızgaranın sağında (iOS paywall sırası) */
.tz-ios-auth-hero {
    display: grid;
    grid-template-columns: minmax(2rem, 1fr) auto minmax(2rem, 1fr);
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.15rem 0 0.5rem;
}

.tz-ios-auth-hero-pad {
    display: block;
    grid-column: 1;
    min-height: 1px;
    pointer-events: none;
}

.tz-ios-auth-avatar-ring {
    grid-column: 2;
    justify-self: center;
    width: clamp(104px, 28vw, 118px);
    height: clamp(104px, 28vw, 118px);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 40%, rgb(37 217 239 / 0.35), rgb(37 217 239 / 0.08) 52%, rgb(255 255 255 / 0.04));
    border: 2px solid rgb(37 217 239 / 0.45);
    box-shadow:
        0 0 0 1px rgb(0 0 0 / 0.35),
        0 0 28px rgb(37 217 239 / 0.35),
        inset 0 0 24px rgb(37 217 239 / 0.12);
}

.tz-ios-auth-close {
    grid-column: 3;
    justify-self: end;
    align-self: center;
    position: relative;
    top: unset;
    right: unset;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgb(255 255 255 / 0.4);
    z-index: 2;
    text-decoration: none;
}

.tz-ios-auth-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: rgb(255 255 255 / 0.55);
}

.tz-ios-auth-close-x {
    display: block;
    width: 12px;
    height: 12px;
    background:
        linear-gradient(45deg, transparent 43%, currentColor 43%, currentColor 57%, transparent 57%),
        linear-gradient(-45deg, transparent 43%, currentColor 43%, currentColor 57%, transparent 57%);
}

.tz-ios-auth-avatar-glyph {
    display: block;
    width: 46%;
    height: 46%;
    background: center / contain no-repeat;
    opacity: 0.88;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2325d9ef' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='3.25'/%3E%3Cpath d='M6.5 19.2c.8-2.6 2.9-4.2 5.5-4.2s4.7 1.6 5.5 4.2'/%3E%3C/svg%3E");
}

.tz-ios-auth-tier {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1rem 1rem 0.95rem;
    border-radius: 16px;
    text-align: left;
    background: rgb(255 255 255 / 0.045);
    border: 1px solid rgb(255 255 255 / 0.09);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 32px rgb(0 0 0 / 0.32);
}

.tz-ios-auth-tier-lock {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,0.35)'%3E%3Cpath d='M18 10h-1V8a5 5 0 0 0-10 0v2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2zm-9-2a3 3 0 0 1 6 0v2H9V8zm4 11h-2v-2h-2v2H9v2h6v-2z'/%3E%3C/svg%3E")
        center / 22px 22px no-repeat;
}

.tz-ios-auth-tier-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.tz-ios-auth-tier-title {
    font-size: 0.94rem;
    font-weight: 750;
    color: rgb(255 255 255 / 0.94);
}

.tz-ios-auth-tier-desc {
    font-size: 0.78rem;
    line-height: 1.38;
    color: rgb(255 255 255 / 0.46);
}

.tz-ios-auth-tier-badge {
    flex-shrink: 0;
    margin-left: 0.15rem;
    padding: 0.25rem 0.45rem;
    border-radius: 7px;
    font-size: 0.54rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    color: rgb(255 255 255 / 0.55);
    background: rgb(0 0 0 / 0.35);
    border: 1px solid rgb(255 255 255 / 0.1);
}

.tz-ios-auth-providers {
    margin-top: 1.5rem;
    gap: 0.82rem !important;
}

.tz-ios-auth-providers .tz-auth-provider--apple {
    border-radius: 999px !important;
    min-height: 52px !important;
    box-shadow: 0 10px 24px rgb(0 0 0 / 0.35);
}

.tz-ios-auth-providers .tz-auth-provider--google {
    border-radius: 999px !important;
    min-height: 52px !important;
    background: rgb(255 255 255 / 0.05);
    border: 1px solid rgb(255 255 255 / 0.16);
}

.tz-ios-auth-providers .tz-auth-provider-g {
    font-family:
        ui-sans-serif,
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        sans-serif;
}

.tz-ios-auth-legal {
    padding-top: 1.15rem !important;
    padding-bottom: 0.5rem !important;
    font-size: 0.58rem !important;
    line-height: 1.48 !important;
}

.tz-auth-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(1.4rem, 4vw, 2rem);
    min-width: 0;
}

.tz-auth-shell.is-loading .tz-auth-provider {
    opacity: 0.55;
    pointer-events: none;
}

.tz-auth-busy-layer {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.55);
}

/* `display: grid` üstte [hidden] ile çakışmasın — katman sayfa açılışında takılı kalmasın */
.tz-auth-busy-layer[hidden] {
    display: none !important;
    pointer-events: none;
}

.tz-auth-spinner {
    width: 2.85rem;
    height: 2.85rem;
    border-radius: 50%;
    border: 3px solid rgba(37, 217, 239, 0.18);
    border-top-color: var(--cyan);
    animation: tz-auth-spin 0.75s linear infinite;
}

@keyframes tz-auth-spin {
    to {
        transform: rotate(360deg);
    }
}

.tz-auth-header {
    text-align: center;
    padding-top: clamp(0.25rem, 2vw, 1.85rem);
}

.tz-auth-logo {
    filter: drop-shadow(0 0 1.65rem rgba(37, 217, 239, 0.55));
    display: inline-block;
    vertical-align: bottom;
}

.tz-auth-brand {
    margin: 0.62rem 0 0;
    letter-spacing: 0.06em;
    font-weight: 900;
    font-size: clamp(1.55rem, 5.4vw, 1.74rem);
    font-family:
        ui-monospace,
        "SF Mono",
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
}

.tz-auth-brand-dim {
    color: rgba(255, 255, 255, 0.45);
}

.tz-auth-brand-accent {
    margin-left: 0.06em;
    color: var(--cyan);
}

.tz-auth-tagline {
    margin: 0.45rem 0 0;
    font-size: 0.815rem;
    font-family:
        ui-monospace,
        "SF Mono",
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
}

.tz-auth-cards {
    display: grid;
    gap: 0.62rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tz-auth-card {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem 0.8rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    min-width: 0;
}

.tz-auth-card-ico {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-top: 0.06rem;
}

.tz-auth-card-ico--brain {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%2325d9ef'%3E%3Cpath d='M252 124a60 60 0 0 0-32-53 52 52 0 0 0-92-32A52 52 0 0 0 36 71a60 60 0 0 0 0 106 52 52 0 0 0 92 32 52 52 0 0 0 92-32 60 60 0 0 0 32-53z'/%3E%3C/svg%3E");
}

.tz-auth-card-ico--ticket {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2325d9ef'%3E%3Cpath d='M4 6.5A2.5 2.5 0 0 1 6.5 4h11A2.5 2.5 0 0 1 20 6.5v3.27a1.5 1.5 0 0 0 0 2.46V16.5A2.5 2.5 0 0 1 17.5 19h-11A2.5 2.5 0 0 1 4 16.5v-4.27a1.5 1.5 0 0 0 0-2.46V6.5z'/%3E%3C/svg%3E");
}

.tz-auth-card-ico--chart {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2325d9ef'%3E%3Cpath d='M4 19h16v2H4v-2zm3-6h2v4H7v-4zm4-4h2v8h-2V9zm4-3h2v11h-2V6zm4-2h2v13h-2V4z'/%3E%3C/svg%3E");
}

.tz-auth-card-ico--cube {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2325d9ef'%3E%3Cpath d='M12 2l10 5v10l-10 5L2 17V7l10-5zm0 2.5L4.5 8 12 12l7.5-4L12 4.5zM4 9.5V15l7 3.5V11L4 9.5zm16 0L13 11v7.5l7-3.5V9.5z'/%3E%3C/svg%3E");
}

.tz-auth-card-text {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
    text-align: left;
}

.tz-auth-card-title {
    font-size: 0.78rem;
    font-weight: 800;
}

.tz-auth-card-desc {
    font-size: 0.66rem;
    line-height: 1.33;
}

.tz-auth-providers {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.tz-auth-provider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    width: 100%;
    border: none;
    border-radius: 14px;
    min-height: 54px;
    font-size: 1rem;
    font-weight: 650;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.12s ease;
}

.tz-auth-provider:active:not(:disabled) {
    transform: scale(0.99);
}

.tz-auth-provider--apple {
    background: #ffffff;
    color: #07090d;
}

.tz-auth-provider-apple-ico svg {
    display: block;
}

.tz-auth-provider--google {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.tz-auth-provider-g {
    font-weight: 900;
    font-size: 1.16rem;
    line-height: 1;
}

.tz-auth-error {
    min-height: 1.35rem;
    margin: 0;
    padding: 0 0.35rem;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 650;
    color: rgba(255, 138, 160, 0.95);
}

.tz-auth-foot-msg {
    font-size: 0.74rem;
    line-height: 1.42;
}

.tz-auth-legal {
    margin: 0;
    padding: 0 0.5rem clamp(2rem, 6vw, 2.85rem);
    font-size: 0.625rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.22);
    line-height: 1.45;
}

.tz-auth-legal a {
    color: rgba(37, 217, 239, 0.55);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tz-auth-legal a:hover {
    color: var(--cyan);
}

.tz-auth-signed-card {
    border-radius: 18px;
    padding: clamp(1.35rem, 4vw, 1.85rem);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.tz-auth-signed-badge {
    font-size: 0.76rem;
    font-weight: 800;
    color: rgba(94, 225, 138, 0.95);
}

.tz-auth-signed-display {
    margin: 0.65rem 0 0;
    font-weight: 800;
}

.tz-auth-signed-email {
    margin: 0.28rem 0 0;
    font-size: 0.94rem;
    word-break: break-word;
}

.tz-auth-signed-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
    margin-top: 1.25rem;
}

.tz-auth-btn-secondary,
.tz-auth-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 1.1rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.9rem;
}

.tz-auth-btn-secondary {
    background: rgba(37, 217, 239, 0.15);
    color: var(--text);
    border: 1px solid rgba(37, 217, 239, 0.35);
}

.tz-auth-btn-outline {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--line);
    cursor: pointer;
    font: inherit;
}

.tz-auth-btn-outline:focus-visible {
    outline: 2px solid rgba(37, 217, 239, 0.45);
    outline-offset: 2px;
}

.tz-auth-signed-foot {
    margin-top: 1rem;
    font-size: 0.75rem;
}

.tz-auth-setup-card {
    text-align: left;
}

.tz-auth-setup-title {
    margin-top: 0;
}



/* === Promo showcase — Üye Ol (/uye-ol/) — main.page genişliği = .page (tz-home-page ile) === */
body.tz-promo-page .matrix-bg {
    opacity: 0.055;
}

/* Mobil: .page varsayılan padding-bottom 6.75rem alt tab-nav clearance + buffer içerir.
   Promo sayfasında footer (dots+CTA) alt tab-nav'ın HEMEN üstüne otursun istiyoruz —
   bu yüzden .page padding-bottom'ını sadece tab-nav clearance kadar bırakıyoruz. */
@media (max-width: 820px) {
    body.tz-promo-page main.page {
        padding-bottom: calc(4.3rem + env(safe-area-inset-bottom, 0px));
        padding-top: 0.5rem;
    }
}

.tz-promo-shell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    /* Masaüstü: topbar (marka + büyütülmüş tab-nav) + .page üst/alt payı.
       Shell ekrana sığsın — yükseklik viewport'a sabitlenir, içerik kendi içinde scroll olur. */
    height: calc(100dvh - 10.5rem);
    max-height: calc(100dvh - 10.5rem);
    padding: 0;
    background: transparent;
    box-sizing: border-box;
    overflow: hidden;
}

.tz-promo-stage-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    align-self: stretch;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    background:
        linear-gradient(
            168deg,
            rgba(255, 255, 255, 0.056) 0%,
            rgba(255, 255, 255, 0.02) 40%,
            transparent 62%
        ),
        linear-gradient(180deg, rgb(20 22 29 / 97%), rgb(8 9 13 / 99%));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 26px 60px rgb(0 0 0 / 44%),
        0 10px 28px rgb(0 0 0 / 28%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
}

.tz-promo-stage-card .tz-promo-carousel-stage {
    flex: 1 1 auto;
    min-height: 0;
}

/* Tablet (dar genişlik): promo biraz daha geniş his — masaüstü ayrı blokta sıkılır */
@media (min-width: 768px) and (max-width: 820px) {
    .tz-promo-shell {
        max-width: 100%;
    }
}

.tz-promo-carousel-stage {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.tz-promo-carousel {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    outline: none;
    touch-action: pan-y pinch-zoom;
    cursor: grab;
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) and (max-width: 820px) {
    .tz-promo-carousel {
        min-height: min(280px, 42vh);
    }
}

.tz-promo-carousel:active {
    cursor: grabbing;
}

.tz-promo-carousel.tz-promo-carousel--dragging {
    cursor: grabbing;
    touch-action: none;
    user-select: none;
}

.tz-promo-carousel.tz-promo-carousel--dragging .tz-promo-slide-scroll {
    overscroll-behavior: none;
}

/* Pager içinde dikey sığdırma: track sabit carousel yüksekliğinde; taşma slayt içinde (ör. slide 2 .tz-promo-real-card) scroll ile alınır. */
.tz-promo-track {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    will-change: transform;
}

.tz-promo-slide {
    min-height: 0;
    box-sizing: border-box;
    height: 100%;
    display: flex;
}

.tz-promo-slide-scroll {
    /* Pager içeriklerini dikeyde ortala (iOS). İçerik taşarsa kaydırılabilir kalsın. */
    flex: 1;
	align-items: center;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.55rem 0.55rem 0.7rem;
    -webkit-overflow-scrolling: touch;
}

/* Uzun içerikli pagerlar: ortalama yerine üstten başlasın (listeler taşmasın) */
.tz-promo-slide[data-slide-index="0"] .tz-promo-slide-scroll,
.tz-promo-slide[data-slide-index="2"] .tz-promo-slide-scroll,
.tz-promo-slide[data-slide-index="4"] .tz-promo-slide-scroll,
.tz-promo-slide[data-slide-index="5"] .tz-promo-slide-scroll,
.tz-promo-slide[data-slide-index="6"] .tz-promo-slide-scroll {
    justify-content: flex-start;
}

@media (max-width: 440px) {
    .tz-promo-slide-scroll {
        max-height: none;
    }
}

@media (min-width: 768px) and (max-width: 820px) {
    .tz-promo-slide-scroll {
        padding-left: 0.42rem;
        padding-right: 0.42rem;
    }

    .tz-promo-shell .tz-promo-slide-scroll > * {
        max-width: min(960px, 100%);
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        box-sizing: border-box;
    }
}

/* Slayt 0: başlık + başarı oranı + hero — tek sütun, mobil tam genişlik / masaüstü ortalı */
.tz-promo-slide[data-slide-index="0"] .tz-promo-slide-scroll {
    align-items: stretch;
}

.tz-promo-slide0-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
}

.tz-promo-slide0-stack .tz-promo-success-card,
.tz-promo-slide0-stack .tz-promo-hero-grid {
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    box-sizing: border-box;
}

.tz-promo-perf-title {
    text-align: center;
    font-size: clamp(0.78rem, 2.9vw, 1.05rem);
    font-weight: 900;
    margin: 0.25rem 0 0.55rem;
	padding-top: 3%;
}

.tz-promo-success-card {
    width: 100%;
    max-width: 100%;
    padding: 0.55rem 0.5rem 0.58rem;
    margin: 0 0 0.55rem;
    min-height: 4.35rem;
    box-sizing: border-box;
    border-radius: 16px;
    background:
        radial-gradient(120% 120% at 12% 0%, rgba(37, 217, 239, 0.2) 0%, rgba(0, 0, 0, 0) 55%),
        linear-gradient(180deg, rgba(37, 217, 239, 0.1) 0%, rgba(37, 217, 239, 0.02) 100%);
    border: 1px solid rgba(37, 217, 239, 0.16);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(10px);
}

.tz-promo-success-row {
    width: 100%;
    min-height: 2.85rem;
}

.tz-promo-success-row--4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    width: 100%;
}

.tz-promo-success-row--4 .tz-promo-stat {
    position: relative;
    min-width: 0;
    padding: 0.15rem 0.28rem;
}

.tz-promo-success-row--4 .tz-promo-stat + .tz-promo-stat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14%;
    height: 72%;
    width: 1px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 255, 255, 0.14) 45%,
        rgba(255, 255, 255, 0.14) 55%,
        transparent 100%
    );
    pointer-events: none;
}

.tz-promo-success-row--4 .tz-promo-stat-tag {
    font-size: clamp(0.46rem, 2.4vw, 0.56rem);
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.tz-promo-success-row--4 .tz-promo-stat-big {
    font-size: clamp(0.88rem, 3.8vw, 1.22rem);
}

.tz-promo-success-row--4 .tz-promo-stat-detail {
    font-size: clamp(0.42rem, 2.2vw, 0.54rem);
}

/* Mobil: başarı oranı kutusu tam genişlik */
@media (max-width: 820px) {
    .tz-promo-slide0-stack {
        width: 100%;
        max-width: 100%;
    }

    .tz-promo-success-card {
        padding: 0.48rem 0.28rem 0.52rem;
        border-radius: 14px;
    }

    .tz-promo-success-row--4 .tz-promo-stat {
        padding: 0.12rem 0.12rem;
    }

    .tz-promo-success-row--4 .tz-promo-stat-tag {
        font-size: clamp(0.48rem, 2.85vw, 0.56rem);
    }

    .tz-promo-success-row--4 .tz-promo-stat-big {
        font-size: clamp(0.92rem, 4.5vw, 1.08rem);
    }

    .tz-promo-success-row--4 .tz-promo-stat-detail {
        font-size: clamp(0.44rem, 2.55vw, 0.52rem);
    }
}

/* Masaüstü: slayt 0 içeriği ortalı tek kolon — başarı kutusu hero grid ile aynı genişlik */
@media (min-width: 821px) {
    .tz-promo-slide[data-slide-index="0"] .tz-promo-slide0-stack {
        width: 100%;
        max-width: min(900px, 100%);
        margin-inline: auto;
    }

    .tz-promo-slide[data-slide-index="0"] .tz-promo-success-card {
        padding: 0.52rem 0.85rem 0.58rem;
        border-radius: 16px;
    }

    .tz-promo-slide[data-slide-index="0"] .tz-promo-success-row--4 .tz-promo-stat {
        padding: 0.18rem 0.45rem;
    }

    .tz-promo-slide[data-slide-index="0"] .tz-promo-success-row--4 .tz-promo-stat-tag {
        font-size: 0.58rem;
    }

    .tz-promo-slide[data-slide-index="0"] .tz-promo-success-row--4 .tz-promo-stat-big {
        font-size: clamp(1.05rem, 1.35vw, 1.42rem);
    }

    .tz-promo-slide[data-slide-index="0"] .tz-promo-success-row--4 .tz-promo-stat-detail {
        font-size: 0.56rem;
    }
}

.tz-promo-success-div {
    display: none;
}

.tz-promo-stat {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.1rem;
    padding: 0 0.2rem;
    text-align: center;
}

.tz-promo-stat-tag {
    font-size: clamp(0.44rem, 2vw, 0.56rem);
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
    line-height: 1.2;
}

.tz-promo-stat-big {
    font-size: clamp(0.92rem, 3.8vw, 1.35rem);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
}

.tz-promo-stat-cyan {
    color: var(--cyan);
}

.tz-promo-stat-amber {
    color: #ffb300;
}

.tz-promo-stat-coral {
    color: #ff7043;
}

.tz-promo-stat-white {
    color: rgba(255, 255, 255, 0.95);
}

.tz-promo-stat-detail {
    font-size: clamp(0.42rem, 1.9vw, 0.54rem);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.38);
    line-height: 1.2;
}

.tz-promo-section-h {
    text-align: center;
    font-size: clamp(0.62rem, 3vw, 0.82rem);
    font-weight: 900;
    margin: 0.45rem 0 0.25rem;
	padding-top: 5%;
}

.tz-promo-section-h-soft {
    color: rgba(255, 255, 255, 0.85);
}

/* Slide 0: hero satırları grid wrapper — mobilde tek sütun, desktop'ta 2 sütun */
.tz-promo-hero-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    min-width: 0;
}

.tz-promo-hero-grid--after-stats {
    margin-top: 0.4rem;
}

.tz-promo-hero,
.tz-promo-hero-empty {
    padding: 0.5rem 0.9rem;
    border-radius: 16px;
    margin-bottom: 0.45rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.tz-promo-hero-l {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.tz-promo-hero--cyan {
    background: linear-gradient(90deg, rgba(37, 217, 239, 0.12), rgba(37, 217, 239, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.tz-promo-hero--gold {
    background: linear-gradient(90deg, rgba(255, 179, 0, 0.14), rgba(255, 179, 0, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.tz-promo-hero--gold .tz-promo-hero-g {
    color: #ffb300;
}

.tz-promo-hero--gold .tz-promo-hero-gl {
    color: rgba(255, 179, 0, 0.75);
}

.tz-promo-hero--coral {
    background: linear-gradient(90deg, rgba(255, 112, 67, 0.14), rgba(255, 112, 67, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.tz-promo-hero--coral .tz-promo-hero-g {
    color: #ff7043;
}

.tz-promo-hero--coral .tz-promo-hero-gl {
    color: rgba(255, 112, 67, 0.76);
}

.tz-promo-hero--teal {
    background: linear-gradient(90deg, rgba(45, 212, 191, 0.14), rgba(45, 212, 191, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.tz-promo-hero--teal .tz-promo-hero-g {
    color: #2dd4bf;
}

.tz-promo-hero--teal .tz-promo-hero-gl {
    color: rgba(45, 212, 191, 0.76);
}

.tz-promo-hero--violet {
    background: linear-gradient(90deg, rgba(167, 139, 250, 0.16), rgba(167, 139, 250, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.tz-promo-hero--violet .tz-promo-hero-g {
    color: #a78bfa;
}

.tz-promo-hero--violet .tz-promo-hero-gl {
    color: rgba(167, 139, 250, 0.76);
}

.tz-promo-hero--lime {
    background: linear-gradient(90deg, rgba(163, 230, 53, 0.14), rgba(163, 230, 53, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.tz-promo-hero--lime .tz-promo-hero-g {
    color: #a3e635;
}

.tz-promo-hero--lime .tz-promo-hero-gl {
    color: rgba(163, 230, 53, 0.78);
}

.tz-promo-hero--pink {
    background: linear-gradient(90deg, rgba(244, 114, 182, 0.14), rgba(244, 114, 182, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.tz-promo-hero--pink .tz-promo-hero-g {
    color: #f472b6;
}

.tz-promo-hero--pink .tz-promo-hero-gl {
    color: rgba(244, 114, 182, 0.76);
}

.tz-promo-hero-name {
    font-size: clamp(0.74rem, 3vw, 0.94rem);
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.tz-promo-hero-meta {
    font-size: clamp(0.5rem, 2.4vw, 0.65rem);
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
}

.tz-promo-hero-r {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0.65rem;
    text-align: right;
    flex: 0 0 auto;
}

.tz-promo-hero-gwrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.05;
}

.tz-promo-hero-agf2 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    line-height: 1.05;
}

.tz-promo-hero-agf2-v {
    font-size: clamp(1rem, 4vw, 1.55rem);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.92);
}

.tz-promo-hero-agf2-l {
    font-size: clamp(0.46rem, 2.2vw, 0.62rem);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.38);
}

/* Yarış AGF alt satırı yokken % değeri kartta dikey ortada */
.tz-promo-hero-agf2--solo {
    align-self: center;
    justify-content: center;
}

.tz-promo-hero-div {
    width: 1px;
    height: calc(clamp(1rem, 4vw, 1.55rem) + clamp(0.46rem, 2.2vw, 0.62rem) + 4px);
    background: rgba(255, 255, 255, 0.15);
}

.tz-promo-hero-g {
    font-size: clamp(1rem, 4vw, 1.55rem);
    font-weight: 900;
}

.tz-promo-hero-gl {
    font-size: clamp(0.46rem, 2.2vw, 0.62rem);
    color: rgba(255, 255, 255, 0.4);
}

/* Accent renklerini AGF + ganyan için iOS ile aynı bağla */
.tz-promo-hero--cyan .tz-promo-hero-g,
.tz-promo-hero--cyan .tz-promo-hero-agf2-v {
    color: var(--cyan);
}

.tz-promo-hero--gold .tz-promo-hero-agf2-v {
    color: #ffb300;
}

.tz-promo-hero--coral .tz-promo-hero-agf2-v {
    color: #ff7043;
}

.tz-promo-hero--teal .tz-promo-hero-agf2-v {
    color: #2dd4bf;
}

.tz-promo-hero--violet .tz-promo-hero-agf2-v {
    color: #a78bfa;
}

.tz-promo-hero--lime .tz-promo-hero-agf2-v {
    color: #a3e635;
}

.tz-promo-hero--pink .tz-promo-hero-agf2-v {
    color: #f472b6;
}

.tz-promo-hero-gpulse {
    animation: tz-promo-ganyan-pop 1.85s ease-in-out infinite alternate;
}

@keyframes tz-promo-ganyan-pop {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.05);
    }
}

.tz-promo-hero-empty {
    justify-content: flex-start;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.66rem;
}

.tz-promo-empty-card {
    text-align: center;
    padding: 1rem 1rem 1.1rem;
    margin: 0.75rem auto;
    max-width: 22rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tz-promo-empty-ico {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 0.35rem;
}

.tz-promo-empty-t {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.74);
}

.tz-promo-empty-sub {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    margin: 0.35rem 0 0;
}

.tz-promo-coupon-visual {
    border-radius: 12px;
    overflow: hidden;
    margin: 0.45rem auto 0.25rem;
    border: 1px dashed rgba(37, 217, 239, 0.35);
    background: repeating-linear-gradient(
        -8deg,
        rgba(255, 255, 255, 0.05) 0,
        rgba(255, 255, 255, 0.05) 14px,
        rgba(255, 255, 255, 0.02) 14px,
        rgba(255, 255, 255, 0.02) 28px
    );
}

.tz-promo-coupon-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 0.55rem auto 0.2rem;
}

/* Slide-1: 3 örnek kupon görseli (ortalanmış) */
.tz-promo-coupon-img {
    width: min(920px, 100%);
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.55);
}

/* Slide-1: iOS "Kazandırdığımız Altılı Kuponları" kartları */
.tz-promo-section-h-coupons {
    color: #ff9e1a;
    font-size: clamp(0.9rem, 4vw, 1.05rem);
    margin-bottom: 0.6rem;
    padding-top: 0;
}

.tz-promo-coupon-card {
    position: relative;
    width: min(920px, 100%);
    max-width: 100%;
    border-radius: 14px;
    overflow: hidden;
    background: #050505;
    border: 3px solid rgba(74, 222, 128, 0.78);
    box-shadow:
        0 18px 55px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(0, 0, 0, 0.35) inset;
    min-height: clamp(72px, 20vw, 96px);
}

.tz-promo-coupon-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--promo-coupon-bg) center / cover no-repeat;
    opacity: 0.7;
    filter: saturate(0.95) contrast(1.05);
}

.tz-promo-coupon-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
}

.tz-promo-coupon-card-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.85rem;
    min-height: clamp(72px, 20vw, 96px);
    box-sizing: border-box;
}

.tz-promo-coupon-left {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.tz-promo-coupon-city {
    font-size: clamp(0.8rem, 4vw, 1.05rem);
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.08;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tz-promo-coupon-bet {
    font-size: clamp(0.54rem, 2.8vw, 0.7rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgba(34, 211, 238, 0.92);
}

.tz-promo-coupon-meta {
    font-size: clamp(0.48rem, 2.4vw, 0.64rem);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.42);
}

.tz-promo-coupon-payout {
    margin-top: 0.05rem;
    font-size: clamp(0.56rem, 2.8vw, 0.74rem);
    color: rgba(255, 165, 0, 0.95);
    font-weight: 700;
    font-family: ui-monospace, monospace;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tz-promo-coupon-payout strong {
    font-weight: 800;
    color: rgba(255, 165, 0, 0.95);
    font-variant-numeric: tabular-nums;
}

.tz-promo-coupon-ico {
    width: 14px;
    height: 11px;
    flex-shrink: 0;
    display: inline-block;
    border-radius: 2px;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.22), rgba(0, 0, 0, 0) 60%),
        rgba(255, 165, 0, 0.22);
    border: 1px solid rgba(255, 165, 0, 0.55);
}

.tz-promo-coupon-right {
    flex: 0 0 auto;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.16rem;
}

.tz-promo-coupon-amt-row {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
}

.tz-promo-coupon-amt {
    font-size: clamp(0.8rem, 4vw, 1.05rem);
    font-weight: 700;
    color: rgba(255, 165, 0, 0.96);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tz-promo-coupon-misli {
    font-size: clamp(0.54rem, 2.8vw, 0.7rem);
    font-weight: 600;
    color: rgba(34, 211, 238, 0.88);
}

.tz-promo-coupon-chev {
    font-size: 1rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.32);
    font-weight: 600;
}

.tz-promo-coupon-pulse--d2 {
    animation-delay: 0.3s;
}

.tz-promo-coupon-pulse--d3 {
    animation-delay: 0.6s;
}

.tz-promo-coupon-bar {
    height: 14px;
    background: rgba(255, 152, 0, 0.45);
}

.tz-promo-coupon-body {
    padding: 0.55rem 0.85rem;
    display: grid;
    gap: 0.25rem;
}

.tz-promo-coupon-tag {
    font-size: 0.6rem;
    font-weight: 800;
    color: rgba(37, 217, 239, 0.86);
}

.tz-promo-coupon-t {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.6);
}

.tz-promo-coupon-pulse {
    animation: tz-promo-coupon-key 2.65s ease-in-out infinite alternate;
}

@keyframes tz-promo-coupon-key {
    from {
        transform: scale(0.985);
    }

    to {
        transform: scale(1.02);
    }
}

.tz-promo-algo-banner {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.85rem;
    border-radius: 12px;
    margin-bottom: 0.65rem;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
}

.tz-promo-algo-ico {
    flex-shrink: 0;
}

.tz-promo-algo-t {
    font-weight: 900;
    font-size: clamp(0.68rem, 2.9vw, 0.82rem);
}

.tz-promo-algo-s {
    font-weight: 600;
    font-size: clamp(0.58rem, 2.4vw, 0.72rem);
}

.tz-promo-accent-orange {
    background: rgba(255, 152, 0, 0.1);
    border-color: rgba(255, 152, 0, 0.45);
}

.tz-promo-accent-orange .tz-promo-algo-t {
    color: #ff9800;
}

.tz-promo-accent-orange .tz-promo-algo-s {
    color: rgba(255, 152, 0, 0.78);
}

/* Slide-3: gerçek TayZeka at kartı (promo içinde) */
.tz-promo-real-card {
    margin-top: 0.35rem;
}

.tz-promo-real-card .tz-horse-card {
    margin: 0;
}

/* Slide 2 (Kurgu): banner sabit — at listesi carousel yüksekliğinde iç scroll (ÜYE OL üstünde kalır). */
body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-promo-slide-scroll {
    align-items: stretch;
    overflow-x: clip;
    overflow-y: hidden;
}

body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-promo-algo-banner {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    gap: 0.46rem;
    padding: 0.42rem 0.58rem;
    margin-bottom: 0.48rem;
    border-radius: 11px;
}

body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-promo-algo-banner .tz-promo-algo-ico {
    font-size: 1.05rem;
    line-height: 1;
}

body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-promo-algo-banner .tz-promo-algo-t {
    font-size: clamp(0.7rem, 0.92vw + 0.28rem, 0.88rem);
    line-height: 1.2;
}

body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-promo-algo-banner .tz-promo-algo-s {
    font-size: clamp(0.58rem, 0.78vw + 0.22rem, 0.74rem);
    line-height: 1.28;
}

body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-promo-real-card {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    overflow-x: clip;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* Son satır (regulation / sinyaller) kaydırılınca stage–footer çizgisinde kesilmesin */
    padding-bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
}

/* Üye Ol (/uye-ol/) — Slayt 2 (Kurgu): küçük ekranlarda içerik CTA altına sarkmasın */
@media (max-width: 440px) {
    body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-promo-algo-banner {
        gap: 0.38rem;
        padding: 0.34rem 0.48rem;
        margin-bottom: 0.42rem;
        border-radius: 10px;
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-promo-algo-banner .tz-promo-algo-ico {
        font-size: 0.98rem;
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-promo-algo-banner .tz-promo-algo-t {
        font-size: clamp(0.56rem, 3vw, 0.72rem);
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-promo-algo-banner .tz-promo-algo-s {
        font-size: clamp(0.48rem, 2.62vw, 0.62rem);
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-promo-real-card {
        margin-top: 0.22rem;
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-horse-card {
        border-radius: 12px;
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-header-top {
        grid-template-columns: 34px minmax(0, 1fr) minmax(86px, auto);
        min-height: 34px;
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-saddle {
        font-size: 1.08rem;
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-name-line strong {
        font-size: 0.72rem;
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-jockey-line {
        font-size: 0.62rem;
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-header-earnings {
        gap: 0.4rem 0.55rem;
        min-height: 34px;
        font-size: 0.58rem;
        padding: 0.32rem 0.62rem;
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-power-bars {
        height: 18px;
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-power-bars span {
        width: 4px;
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-score {
        font-size: 1.12rem;
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-score-body {
        padding: 0.5rem 0.62rem 0.62rem;
        gap: 0.55rem;
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-score-metrics {
        column-gap: 0.65rem;
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-score-metrics > span {
        font-size: 0.64rem;
        padding: 0.32rem 0.12rem;
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-score-metrics strong {
        font-size: 0.84rem;
    }
}

/* Slide 2: skor gövdesi + regulation + pills sıkı — tüm genişlikler (masaüstü dahil); taşma .tz-promo-real-card içi scroll ile. */
body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-score-body {
    gap: 0.38rem;
    padding: 0.4rem 0.52rem 0.62rem;
}

body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-score-metrics {
    column-gap: 0.5rem;
    row-gap: 0.22rem;
}

body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-score-metrics > span {
    padding: 0.24rem 0.08rem;
}

body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-score-detail-title {
    font-size: 0.5rem;
    letter-spacing: 0.14em;
}

body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-tier-badge {
    font-size: 0.6rem;
    padding: 0.18rem 0.42rem;
}

body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-factor-grid {
    gap: 0.22rem;
}

body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-factor-grid div {
    padding: 0.22rem 0.3rem;
    border-radius: 8px;
}

body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-factor-grid span {
    font-size: 0.56rem;
    line-height: 1.15;
}

body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-factor-grid b {
    font-size: 0.66rem;
}

body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-factor-grid em {
    margin-top: 0.16rem;
    height: 3px;
}

body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-signal-list {
    gap: 0.22rem;
}

body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-signal-list span {
    font-size: 0.54rem;
    padding: 0.14rem 0.34rem;
}

body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-regulation-block {
    margin-top: 0.32rem;
    padding: 0.38rem 0.46rem 0.46rem;
    gap: 0.28rem;
    border-radius: 11px;
}

body.tz-promo-page .tz-promo-slide[data-slide-index="2"] .tz-regulation-line {
    font-size: 0.58rem;
    line-height: 1.32;
}

.tz-promo-accent-cyan {
    background: rgba(37, 217, 239, 0.1);
    border-color: rgba(37, 217, 239, 0.45);
}

.tz-promo-accent-cyan .tz-promo-algo-t,
.tz-promo-accent-cyan .tz-promo-algo-s {
    color: var(--cyan);
}

.tz-promo-accent-cyan .tz-promo-algo-s {
    opacity: 0.78;
}

.tz-promo-accent-teal {
    background: rgba(38, 166, 154, 0.1);
    border-color: rgba(38, 166, 154, 0.45);
}

.tz-promo-accent-teal .tz-promo-algo-t,
.tz-promo-accent-teal .tz-promo-algo-s {
    color: #26a69a;
}

.tz-promo-accent-violet {
    background: rgba(156, 111, 228, 0.08);
    border-color: rgba(156, 111, 228, 0.45);
}

.tz-promo-accent-violet .tz-promo-algo-t {
    color: #9c6fe4;
}

.tz-promo-accent-violet .tz-promo-algo-s {
    color: rgba(156, 111, 228, 0.78);
}

.tz-promo-accent-orange2 {
    background: rgba(255, 158, 26, 0.1);
    border-color: rgba(255, 158, 26, 0.45);
}

.tz-promo-accent-orange2 .tz-promo-algo-t {
    color: #ff9e1a;
}

.tz-promo-accent-orange2 .tz-promo-algo-s {
    color: rgba(255, 158, 26, 0.78);
}

.tz-promo-banner-narrow {
    margin-bottom: 0.45rem;
}

.tz-promo-mock-sheet {
    background: #191919;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07);
    margin-bottom: 0.5rem;
}

.tz-promo-ms-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.56rem 0.95rem;
}

.tz-promo-ms-ico {
    width: clamp(26px, 8vw, 34px);
    height: clamp(26px, 8vw, 34px);
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: clamp(0.6rem, 3vw, 0.78rem);
    background: rgba(37, 217, 239, 0.1);
    color: var(--cyan);
}

.tz-promo-ms-ico-fill {
    font-size: 0.5rem;
}

.tz-promo-ms-label {
    font-size: 0.44rem;
    font-weight: 900;
    color: var(--cyan);
}

.tz-promo-ms-val {
    font-weight: 800;
    font-size: clamp(0.62rem, 2.9vw, 0.74rem);
}

.tz-promo-ms-chev {
    margin-left: auto;
    opacity: 0.25;
    font-weight: bold;
}

.tz-promo-ms-rule {
    height: 1px;
    background: rgba(255, 255, 255, 0.07);
}

.tz-promo-budget-row {
    padding: 0.62rem 0.95rem;
}

.tz-promo-budget-amt {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-weight: 900;
}

.tz-promo-budget-lira {
    color: #ff9800;
    font-size: clamp(0.6rem, 2.9vw, 0.78rem);
}

.tz-promo-budget-num {
    color: #ff9800;
    font-size: clamp(1.05rem, 4vw, 1.55rem);
}

.tz-promo-dynabox {
    margin-top: 0.65rem;
    padding: 0.45rem 0.95rem;
    border-radius: 10px;
    background: rgba(37, 217, 239, 0.06);
    border: 1px solid rgba(37, 217, 239, 0.18);
    text-align: center;
}

.tz-promo-dynabox-t {
    font-size: clamp(0.62rem, 2.9vw, 0.74rem);
    font-weight: 900;
    color: rgba(37, 217, 239, 0.95);
    margin-bottom: 0.3rem;
}

.tz-promo-slot-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.15rem 0;
}

.tz-promo-slot-dot {
    color: rgba(37, 217, 239, 0.3);
    padding: 0 0.2rem;
    font-weight: bold;
}

.tz-promo-slot-l {
    display: block;
    font-size: clamp(0.42rem, 2.1vw, 0.56rem);
    color: rgba(255, 255, 255, 0.45);
}

.tz-promo-slot-v {
    font-size: clamp(0.54rem, 2.4vw, 0.62rem);
    font-weight: 700;
    color: var(--cyan);
}

.tz-promo-sim-mock {
    margin: 0.25rem auto 0.55rem;
    width: 100%;
    height: auto;
    max-height: 44vh;
    aspect-ratio: 2400 / 1080;
    border-radius: 12px;
    border: 1px solid rgba(38, 166, 154, 0.25);
    background: rgba(255, 255, 255, 0.04);
    display: block;
    /* Görsel doğal en-boy oranıyla genişliğe sığar; kırpma yok, boşluk yok */
    object-fit: contain;
    position: relative;
    overflow: hidden;
}

.tz-promo-sim-mock::after {
    content: "";
    position: absolute;
    inset: auto 8% -40% -20%;
    height: 80%;
    background: radial-gradient(ellipse at center, rgba(37, 217, 239, 0.18), transparent 65%);
}

.tz-promo-sim-pulse {
    animation: tz-promo-sim-shift 9s linear infinite alternate;
}

@keyframes tz-promo-sim-shift {
    from {
        filter: saturate(1) hue-rotate(0deg);
    }

    to {
        filter: saturate(1.15) hue-rotate(18deg);
    }
}

.tz-promo-lil-ticket {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 0.55rem;
}

/* Promo page: make lil-ticket match preset coupon card proportions */
.tz-preset-card--promo {
    margin: 0.35rem auto 0.55rem;
    cursor: default;
    width: min(920px, 100%);
    max-width: 100%;
}

.tz-preset-card--promo:active {
    transform: none;
}

/* iOS CouponTicketCard birebir port — Slayt 4 simulasyon kuponu */
.tz-pmcpn-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.42rem 0.65rem;
    color: rgba(26, 128, 138, 1);
}

.tz-pmcpn-badge {
    width: clamp(1.1rem, 4.2vw, 1.42rem);
    height: clamp(1.1rem, 4.2vw, 1.42rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Times New Roman", ui-serif, Georgia, serif;
    font-size: clamp(0.78rem, 3.2vw, 1.02rem);
    font-weight: 900;
    color: rgba(26, 128, 138, 1);
    border: 1.5px solid currentColor;
    flex-shrink: 0;
}

.tz-pmcpn-head-mid {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.tz-pmcpn-tagrow {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    flex-wrap: wrap;
}

.tz-pmcpn-tag {
    font-family: ui-monospace, monospace;
    font-size: clamp(0.38rem, 1.8vw, 0.48rem);
    font-weight: 800;
    color: rgba(26, 128, 138, 1);
}

.tz-pmcpn-date {
    font-family: ui-monospace, monospace;
    font-size: clamp(0.36rem, 1.6vw, 0.44rem);
    font-weight: 900;
    color: rgb(245, 232, 201);
    background: rgba(26, 128, 138, 0.88);
    padding: 0.08rem 0.28rem;
    border-radius: 0.2rem;
}

.tz-pmcpn-bet {
    font-family: ui-monospace, monospace;
    font-size: clamp(0.4rem, 1.8vw, 0.5rem);
    font-weight: 800;
    color: rgba(26, 128, 138, 1);
}

.tz-pmcpn-city {
    font-family: ui-monospace, monospace;
    font-size: clamp(0.72rem, 3.6vw, 0.92rem);
    font-weight: 900;
    color: rgba(26, 128, 138, 1);
    flex-shrink: 0;
}

.tz-pmcpn-divider {
    height: 0.75px;
    background: rgba(26, 128, 138, 0.55);
}

.tz-pmcpn-legs {
    display: flex;
    margin: 0 0.4rem;
    border: 0.75px solid rgba(26, 128, 138, 0.55);
}

.tz-pmcpn-col {
    flex: 1;
    min-width: 0;
    border-right: 0.75px solid rgba(26, 128, 138, 0.55);
    display: flex;
    flex-direction: column;
}

.tz-pmcpn-col:last-child {
    border-right: none;
}

.tz-pmcpn-col-head {
    font-family: ui-monospace, monospace;
    font-size: clamp(0.42rem, 2vw, 0.54rem);
    font-weight: 800;
    color: rgba(26, 128, 138, 1);
    text-align: center;
    padding: 0.2rem 0.1rem;
    background: rgba(26, 128, 138, 0.12);
    border-bottom: 0.75px solid rgba(26, 128, 138, 0.55);
}

.tz-pmcpn-col-nums {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    padding: 0.34rem 0.14rem;
    min-height: clamp(5.5rem, 22vw, 7.5rem);
}

.tz-pmcpn-num {
    display: block;
    text-align: center;
    font-family: ui-monospace, monospace;
    font-size: clamp(0.62rem, 3.1vw, 0.8rem);
    font-weight: 900;
    color: rgb(245, 232, 201);
    background: rgba(26, 128, 138, 0.88);
    padding: 0.2rem 0;
    line-height: 1;
}

.tz-pmcpn-footer {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.32rem 0.65rem;
}

.tz-pmcpn-combos {
    font-family: ui-monospace, monospace;
    font-size: clamp(0.38rem, 1.8vw, 0.48rem);
    font-weight: 500;
    color: rgba(26, 128, 138, 0.6);
}

.tz-pmcpn-price-wrap {
    display: inline-flex;
    align-items: baseline;
    gap: 0.22rem;
}

.tz-pmcpn-price {
    font-family: ui-monospace, monospace;
    font-size: clamp(0.72rem, 3.6vw, 0.94rem);
    font-weight: 900;
    color: rgb(217, 89, 25);
}

.tz-pmcpn-price-tl {
    font-family: ui-monospace, monospace;
    font-size: clamp(0.4rem, 2vw, 0.52rem);
    font-weight: 800;
    color: rgba(26, 128, 138, 1);
}

/* Slide 6: preset bilet görseli (iOS gibi daha büyük ve ortalı) */
.tz-promo-slide[data-slide-index="6"] .tz-preset-card--promo {
    transform-origin: top center;
}

@media (max-width: 430px) {
    .tz-promo-slide[data-slide-index="6"] .tz-preset-card--promo {
        width: min(900px, 100%);
    }
}

.tz-promo-lil-ticket-hdr {
    font-size: clamp(0.46rem, 2.2vw, 0.6rem);
    font-weight: 900;
    color: rgba(255, 255, 255, 0.5);
}

.tz-promo-lil-legs {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.2rem;
    margin: 0.45rem 0 0;
    font-size: clamp(0.46rem, 2.2vw, 0.6rem);
    font-weight: 800;
}

.tz-promo-lil-legs span {
    text-align: center;
    padding: 0.2rem;
    border-radius: 6px;
    border: 1px solid rgba(37, 217, 239, 0.25);
    background: rgba(37, 217, 239, 0.07);
}

.tz-promo-lil-legs .sep {
    display: inline;
    border: none;
    padding: 0;
}

.tz-promo-lil-foot {
    font-size: clamp(0.44rem, 2.1vw, 0.57rem);
}

.tz-promo-six-sheet {
    background: #0a0a0a;
    border-radius: 12px;
    border: 1px solid rgba(255, 158, 26, 0.2);
    overflow: hidden;
    padding-bottom: 0.4rem;
}

.tz-promo-six-pickers {
    display: flex;
    gap: 0.4rem;
    padding: 0.45rem 0.65rem;
}

.tz-promo-six-pbox {
    flex: 1;
    min-width: 0;
    padding: 0.42rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tz-promo-six-pl {
    font-size: clamp(0.42rem, 2vw, 0.54rem);
    color: rgba(255, 255, 255, 0.4);
}

.tz-promo-six-pv {
    font-size: clamp(0.62rem, 2.9vw, 0.74rem);
    font-weight: 900;
}

.tz-promo-six-nums {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.35rem;
    padding: 0 0.65rem 0.55rem;
}

.tz-promo-six-nums span {
    text-align: center;
    padding: 0.45rem;
    border-radius: 8px;
    font-weight: 900;
    color: #4caf50;
    background: #0d2b10;
    border: 1.5px solid #4caf50;
}

.tz-promo-six-res-h {
    text-align: center;
    letter-spacing: 0.06em;
    font-size: clamp(0.5rem, 2.4vw, 0.64rem);
    font-weight: 900;
    color: rgba(255, 255, 255, 0.54);
    padding: 0.45rem;
    background: rgba(255, 255, 255, 0.06);
}

.tz-promo-six-res-rule {
    height: 1px;
    background: rgba(255, 255, 255, 0.07);
}

.tz-promo-six-res-row {
    display: grid;
    grid-template-columns: 1.05rem minmax(0, 1fr) auto;
    gap: 0.35rem;
    align-items: center;
    padding: 0.4rem 0.65rem;
    font-size: clamp(0.58rem, 2.9vw, 0.74rem);
}

.tz-promo-six-n {
    color: rgba(255, 255, 255, 0.5);
}

.tz-promo-six-nm {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    overflow: hidden;
    text-overflow: ellipsis;
}

.tz-promo-six-g {
    font-weight: 800;
    color: #ff9e1a;
}

.tz-promo-six-tevzi {
    display: flex;
    justify-content: space-between;
    padding: 0.45rem 0.85rem;
    background: rgba(37, 217, 239, 0.18);
    font-weight: 900;
}

.tz-promo-six-tevzi span:last-child {
    font-size: clamp(0.68rem, 3vw, 0.92rem);
}

.tz-promo-six-chips {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.35rem;
    padding: 0.45rem 0.65rem;
}

.tz-promo-six-chips span {
    text-align: center;
    padding: 0.4rem;
    border-radius: 8px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
}

.tz-promo-six-win {
    display: flex;
    justify-content: space-between;
    margin: 0.45rem 0.85rem;
    padding: 0.5rem;
    border-radius: 12px;
    background: rgba(255, 158, 26, 0.12);
    border: 1px solid rgba(255, 158, 26, 0.45);
    font-weight: 900;
}

.tz-promo-six-win-amt {
    color: #ff9e1a;
    font-size: clamp(0.78rem, 3.8vw, 1.05rem);
}

/* Slayt 5 (6'lı Kuponun Tutarsa) — başlık ve içerik fontları biraz büyütülür */
.tz-promo-slide[data-slide-index="5"] .tz-promo-slide-scroll {
    padding-left: 0.18rem;
    padding-right: 0.18rem;
}
.tz-promo-slide[data-slide-index="5"] .tz-promo-six-pickers {
    padding: 0.45rem 0.42rem;
    gap: 0.32rem;
}
.tz-promo-slide[data-slide-index="5"] .tz-promo-six-nums {
    gap: 0.28rem;
    padding: 0 0.42rem 0.55rem;
}
.tz-promo-slide[data-slide-index="5"] .tz-promo-six-res-row {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.tz-promo-slide[data-slide-index="5"] .tz-promo-six-tevzi {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
}
.tz-promo-slide[data-slide-index="5"] .tz-promo-six-chips {
    gap: 0.28rem;
    padding-left: 0.42rem;
    padding-right: 0.42rem;
}
.tz-promo-slide[data-slide-index="5"] .tz-promo-six-win {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
.tz-promo-slide[data-slide-index="5"] .tz-promo-algo-banner {
    padding: 0.7rem 1rem;
    margin-bottom: 0.75rem;
}
.tz-promo-slide[data-slide-index="5"] .tz-promo-algo-t {
    font-size: clamp(0.82rem, 3.4vw, 0.98rem);
}
.tz-promo-slide[data-slide-index="5"] .tz-promo-algo-s {
    font-size: clamp(0.7rem, 2.9vw, 0.84rem);
}
.tz-promo-slide[data-slide-index="5"] .tz-promo-algo-ico {
    font-size: 1.25rem;
}
.tz-promo-slide[data-slide-index="5"] .tz-promo-six-pl {
    font-size: 0.62rem;
}
.tz-promo-slide[data-slide-index="5"] .tz-promo-six-pv {
    font-size: clamp(0.76rem, 3.4vw, 0.92rem);
}
.tz-promo-slide[data-slide-index="5"] .tz-promo-six-nums span {
    font-size: clamp(0.78rem, 3.4vw, 0.96rem);
    padding: 0.55rem 0.45rem;
}
.tz-promo-slide[data-slide-index="5"] .tz-promo-six-res-h {
    font-size: 0.72rem;
    padding: 0.55rem;
}
.tz-promo-slide[data-slide-index="5"] .tz-promo-six-res-row {
    font-size: clamp(0.72rem, 3.3vw, 0.9rem);
    padding: 0.5rem 0.75rem;
}
.tz-promo-slide[data-slide-index="5"] .tz-promo-six-tevzi {
    padding: 0.55rem 0.95rem;
    font-size: clamp(0.78rem, 3.4vw, 0.94rem);
}
.tz-promo-slide[data-slide-index="5"] .tz-promo-six-tevzi span:last-child {
    font-size: clamp(0.84rem, 3.6vw, 1.05rem);
}
.tz-promo-slide[data-slide-index="5"] .tz-promo-six-chips span {
    font-size: clamp(0.74rem, 3.2vw, 0.92rem);
    padding: 0.5rem 0.4rem;
}
.tz-promo-slide[data-slide-index="5"] .tz-promo-six-win {
    padding: 0.65rem 0.85rem;
    font-size: clamp(0.78rem, 3.2vw, 0.92rem);
}
.tz-promo-slide[data-slide-index="5"] .tz-promo-six-win-amt {
    font-size: clamp(0.96rem, 4.4vw, 1.25rem);
}

/* Üye Ol (/uye-ol/) — Slayt 5: ≤820px kartı yatayda genişlet + tipografi bir kademe küçük */
@media (max-width: 820px) {
    body.tz-promo-page .tz-promo-slide[data-slide-index="5"] .tz-promo-slide-scroll {
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="5"] .tz-promo-algo-banner {
        padding: 0.52rem 0.5rem;
        margin-bottom: 0.52rem;
        gap: 0.5rem;
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="5"] .tz-promo-algo-ico {
        font-size: 1.12rem;
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="5"] .tz-promo-six-pickers {
        padding: 0.38rem 0.28rem;
        gap: 0.26rem;
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="5"] .tz-promo-six-pbox {
        padding: 0.34rem;
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="5"] .tz-promo-six-nums {
        gap: 0.22rem;
        padding: 0 0.28rem 0.42rem;
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="5"] .tz-promo-six-tevzi {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="5"] .tz-promo-six-win {
        margin-left: 0.45rem;
        margin-right: 0.45rem;
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="5"] .tz-promo-six-sheet {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        min-height: 0;
        border-radius: 10px;
    }

    /* Orta alan (Sonuçlar) gerektiğinde kendi içinde scroll olsun;
       tevzi + kazanç her zaman görünür kalsın. */
    body.tz-promo-page .tz-promo-slide[data-slide-index="5"] .tz-promo-six-res {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="5"] .tz-promo-algo-t {
        font-size: clamp(0.7rem, 3vw, 0.86rem);
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="5"] .tz-promo-algo-s {
        font-size: clamp(0.58rem, 2.55vw, 0.74rem);
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="5"] .tz-promo-six-pl {
        font-size: 0.52rem;
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="5"] .tz-promo-six-pv {
        font-size: clamp(0.66rem, 3vw, 0.82rem);
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="5"] .tz-promo-six-nums span {
        font-size: clamp(0.68rem, 3vw, 0.84rem);
        padding: 0.38rem 0.3rem;
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="5"] .tz-promo-six-res-h {
        font-size: 0.6rem;
        padding: 0.36rem;
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="5"] .tz-promo-six-res-row {
        font-size: clamp(0.64rem, 3vw, 0.82rem);
        padding: 0.36rem 0.52rem;
        line-height: 1.14;
        gap: 0.28rem;
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="5"] .tz-promo-six-nm {
        white-space: nowrap;
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="5"] .tz-promo-six-g,
    body.tz-promo-page .tz-promo-slide[data-slide-index="5"] .tz-promo-six-tevzi span:last-child,
    body.tz-promo-page .tz-promo-slide[data-slide-index="5"] .tz-promo-six-win-amt {
        font-variant-numeric: tabular-nums;
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="5"] .tz-promo-six-g {
        font-size: clamp(0.68rem, 3vw, 0.84rem);
        letter-spacing: 0.01em;
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="5"] .tz-promo-six-tevzi {
        font-size: clamp(0.66rem, 2.95vw, 0.8rem);
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="5"] .tz-promo-six-tevzi span:last-child {
        font-size: clamp(0.76rem, 3.2vw, 0.94rem);
    }

    /* Chips alt satır (tekrar) — mobilde yer kazandırmak için kapat */
    body.tz-promo-page .tz-promo-slide[data-slide-index="5"] .tz-promo-six-chips {
        display: none;
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="5"] .tz-promo-six-win {
        font-size: clamp(0.66rem, 2.85vw, 0.8rem);
        padding: 0.48rem 0.62rem;
        margin-top: 0.38rem;
        margin-bottom: 0.38rem;
    }

    body.tz-promo-page .tz-promo-slide[data-slide-index="5"] .tz-promo-six-win-amt {
        font-size: clamp(0.88rem, 3.95vw, 1.06rem);
    }
}

.tz-promo-horse-sheet {
    margin-top: 0.25rem;
    border-radius: 14px;
    overflow: hidden;
    border: 1.85px solid rgba(255, 90, 90, 0.55);
    background: #0e0e0e;
}

.tz-promo-hh {
    position: relative;
    height: 44px;
    display: grid;
    grid-template-columns: 38% minmax(0, 62%);
}

.tz-promo-hh-img {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    height: 44px;
    object-fit: cover;
    object-position: left center;
}

.tz-promo-hh-grad {
    grid-column: 2;
    grid-row: 1;
    height: 44px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.45), transparent);
}

.tz-promo-hh-flare {
    grid-column: 2;
    grid-row: 1;
    background: rgba(255, 0, 0, 0.12);
    animation: tz-promo-hh-pulse 2.35s ease-in-out infinite alternate;
}

@keyframes tz-promo-hh-pulse {
    from {
        background: rgba(255, 0, 0, 0.1);
    }

    to {
        background: rgba(255, 0, 0, 0.22);
    }
}

.tz-promo-hh-meta {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0 0.65rem;
    font-weight: 900;
}

.tz-promo-hh-sn {
    font-size: clamp(1.2rem, 5vw, 1.42rem);
    font-style: italic;
    color: #fff;
    text-shadow: 0 3px 4px rgb(0 0 0 / 55%);
}

.tz-promo-hh-n {
    font-size: clamp(0.72rem, 3.2vw, 0.86rem);
    color: #fff;
    text-shadow: 0 3px 4px rgb(0 0 0 / 55%);
}

.tz-promo-hh-j {
    margin-left: auto;
    font-size: clamp(0.44rem, 2.1vw, 0.57rem);
    color: rgb(0 0 0 / 85%);
    background: rgb(255 255 255 / 40%);
    padding: 2px 4px;
    border-radius: 4px;
    max-width: 38%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tz-promo-metrics {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    padding: 0.45rem 0.95rem;
    background: rgb(255 255 255 / 3%);
}

.tz-promo-metrics-mini strong {
    color: rgb(37 217 239 / 75%);
}

.tz-promo-metrics-mini span {
    display: inline-block;
    font-size: clamp(0.43rem, 2vw, 0.55rem);
    font-weight: 600;
}

.tz-promo-meter {
    display: flex;
    align-items: flex-end;
    gap: 0.3rem;
}

.tz-promo-meter-bars {
    display: flex;
    gap: 0.15rem;
    align-items: flex-end;
}

.tz-promo-meter-bars span {
    width: 5px;
    border-radius: 2px;
    background: rgb(255 255 255 / 12%);
}

.tz-promo-meter-bars span:nth-child(1) {
    height: 11px;
    background: #ff3232;
}

.tz-promo-meter-bars span:nth-child(2) {
    height: 13px;
    background: #ff3232;
}

.tz-promo-meter-bars span:nth-child(3) {
    height: 16px;
    background: #ff3232;
}

.tz-promo-meter-bars span:nth-child(4) {
    height: 17px;
    background: #ff3232;
}

.tz-promo-meter-bars span:nth-child(5) {
    height: 20px;
    background: #ff3232;
}

.tz-promo-meter-bars span:nth-child(6) {
    height: 23px;
    background: #ff3232;
}

.tz-promo-meter-score {
    font-size: clamp(1rem, 5.5vw, 1.42rem);
    font-weight: 900;
    color: #ff3232;
    line-height: 1;
}

.tz-promo-metrics2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.95rem;
    border-bottom: 1px solid rgb(255 255 255 / 5.5%);
}

.tz-promo-mid {
    flex: 1 1 auto;
    min-width: min(120px, 40%);
    padding-left: 0.65rem;
    border-left: 1px solid rgb(255 255 255 / 10%);
}

.tz-promo-pill-hot {
    display: inline-block;
    font-size: clamp(0.5rem, 2.4vw, 0.64rem);
    font-weight: 800;
    color: rgb(211 71 71);
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    background: rgb(211 71 71 / 13%);
    border: 0.08rem solid rgb(211 71 71 / 32%);
}

.tz-promo-mid strong {
    color: rgb(37 217 239);
    font-size: clamp(0.85rem, 4vw, 1.05rem);
}

.tz-promo-mid small {
    color: rgb(37 217 239 / 55%);
}

.tz-promo-factors-wrap {
    background: #131313;
}

.tz-promo-factors-h {
    font-size: clamp(0.5rem, 2.4vw, 0.64rem);
    font-weight: 700;
    color: rgb(255 255 255 / 30%);
    letter-spacing: 0.06em;
    padding: 0.55rem 0.95rem 0;
}

.tz-promo-factors-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    padding: 0.45rem;
}

@media (max-width: 360px) {
    .tz-promo-factors-grid {
        gap: 0.32rem;
    }
}

.tz-promo-ft {
    font-size: clamp(0.58rem, 2.9vw, 0.76rem);
    font-weight: 700;
}

.tz-promo-fs {
    font-size: clamp(0.58rem, 2.9vw, 0.76rem);
    font-weight: 900;
}

.tz-promo-fbar {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: rgb(255 255 255 / 7%);
    overflow: hidden;
    margin-top: 0.3rem;
}

.tz-promo-fbar > i {
    display: block;
    height: 100%;
}

.tz-promo-fc {
    padding: 0.52rem;
    border-radius: 11px;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%);
    min-height: 0;
}

.tz-promo-fc-g .tz-promo-fs {
    color: #3edf9f;
}

.tz-promo-fc-lg .tz-promo-fs {
    color: #62e099;
}

.tz-promo-fc-m .tz-promo-fs {
    color: #939393;
}

.tz-promo-fc-o .tz-promo-fs {
    color: #ff795a;
}

.tz-promo-cap-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.45rem 0.95rem;
    border-bottom: 1px solid rgb(255 255 255 / 4%);
}

.tz-promo-cap {
    padding: 0.25rem 0.62rem;
    border-radius: 999px;
    font-size: clamp(0.5rem, 2.4vw, 0.64rem);
    font-weight: 600;
}

.tz-cap-fire {
    color: rgb(255 112 67);
    background: rgb(245 94 71 / 18%);
}

.tz-cap-cyan {
    color: rgb(76 217 239);
    background: rgb(37 217 239 / 12%);
}

.tz-cap-amber {
    color: rgb(252 226 138);
    background: rgb(255 211 71 / 15%);
}

.tz-cap-brown {
    color: rgb(188 170 164);
    background: rgb(121 85 72 / 20%);
}

.tz-promo-rstr {
    background: #0d0d0d;
    padding: 0.55rem;
    border-top: 1px solid rgb(255 255 255 / 4%);
}

.tz-promo-rstr p {
    margin: 0 0 0.45rem;
    font-size: clamp(0.62rem, 2.9vw, 0.78rem);
    line-height: 1.52;
}

.tz-promo-rstr p:last-child {
    margin-bottom: 0;
}

.tz-promo-rstr .muted {
    color: rgb(209 209 209);
}

.tz-promo-rstr .cy {
    color: var(--cyan);
}

/* Desktop (≥821): /uye-ol/ promo — flex-bazlı yerleşim; sabit calc yerine kalan alanı doldurur */
@media (min-width: 821px) {
    /* Tüm sayfa yüksekliği viewport’a kilitlenir; topbar sabit, geri kalan alan page’e verilir. */
    body.tz-promo-page {
        height: 100dvh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    body.tz-promo-page header.topbar {
        flex: 0 0 auto;
    }

    body.tz-promo-page main.page {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .tz-promo-shell {
        max-width: 100%;
        margin-inline: 0;
        padding-left: 0;
        padding-right: 0;
        /* Flex ile otomatik doldurma — magic number kaldırıldı */
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        max-height: none;
    }

    .tz-promo-carousel {
        min-height: min(320px, 44vh);
    }

    .tz-promo-slide-scroll {
        padding-left: 0.45rem;
        padding-right: 0.45rem;
    }

    .tz-promo-shell .tz-promo-slide-scroll > * {
        max-width: min(1000px, 100%);
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        box-sizing: border-box;
    }

    .tz-promo-slide[data-slide-index="0"] .tz-promo-slide0-stack {
        max-width: min(900px, 100%);
    }

    .tz-promo-perf-title {
        font-size: clamp(0.74rem, 1.05vw, 0.92rem);
        margin: 0.12rem 0 0.38rem;
    }

    .tz-promo-success-card {
        padding: 0.38rem 0.68rem 0.44rem;
        margin: 0 0 0.4rem;
        border-radius: 14px;
        box-shadow:
            0 12px 34px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    .tz-promo-success-h {
        font-size: 0.62rem;
    }

    .tz-promo-success-row {
        gap: 0.26rem;
        margin-top: 0.18rem;
    }

    .tz-promo-stat-big {
        font-size: clamp(0.82rem, 1.05vw, 1.09rem);
    }

    .tz-promo-stat-tag {
        font-size: 0.48rem;
    }

    .tz-promo-stat-detail {
        font-size: 0.46rem;
    }

    .tz-promo-success-div {
        height: 2rem;
    }

    .tz-promo-section-h {
		font-size: clamp(0.74rem, 1.05vw, 0.92rem);
		margin: 0.12rem 0 0.38rem;
    }

    .tz-promo-section-h-soft {
        font-size: 0.62rem;
    }

    .tz-promo-hero,
    .tz-promo-hero-empty {
        padding: 0.38rem 0.62rem;
        margin-bottom: 0.32rem;
        border-radius: 12px;
        gap: 0.48rem;
    }

    .tz-promo-hero-name {
        font-size: clamp(0.68rem, 0.85vw, 0.82rem);
    }

    .tz-promo-hero-meta {
        font-size: 0.55rem;
    }

    .tz-promo-hero-agf2-v,
    .tz-promo-hero-g {
        font-size: clamp(0.82rem, 1vw, 1.08rem);
    }

    .tz-promo-hero-agf2-l,
    .tz-promo-hero-gl {
        font-size: 0.52rem;
    }

    .tz-promo-hero-div {
        height: calc(clamp(0.82rem, 1vw, 1.08rem) + 0.52rem + 3px);
    }

    .tz-promo-coupon-stack {
        gap: 12px;
        margin: 0.4rem auto 0.12rem;
    }

    .tz-promo-coupon-img.tz-promo-coupon-pulse {
        max-height: 20vh;
        height: auto;
        width: auto;
        max-width: min(920px, 100%);
        border-radius: 11px;
        box-shadow: 0 12px 38px rgba(0, 0, 0, 0.45);
        object-fit: contain;
    }

    /* Slayt 1 — RecordedCoupon-style kartlar (desktop tipografi) */
    .tz-promo-section-h-coupons {
        font-size: clamp(1.1rem, 1.4vw, 1.35rem);
        margin-bottom: 0.85rem;
    }
    .tz-promo-coupon-card {
        min-height: 108px;
    }
    .tz-promo-coupon-card-inner {
        gap: 1rem;
        padding: 0.7rem 1.1rem;
        min-height: 108px;
    }
    .tz-promo-coupon-city {
        font-size: clamp(1.15rem, 1.4vw, 1.4rem);
    }
    .tz-promo-coupon-bet {
        font-size: clamp(0.78rem, 0.9vw, 0.92rem);
    }
    .tz-promo-coupon-meta {
        font-size: clamp(0.7rem, 0.78vw, 0.8rem);
    }
    .tz-promo-coupon-payout {
        font-size: clamp(0.84rem, 0.95vw, 0.98rem);
    }
    .tz-promo-coupon-ico {
        width: 18px;
        height: 14px;
    }
    .tz-promo-coupon-amt {
        font-size: clamp(1.2rem, 1.4vw, 1.45rem);
    }
    .tz-promo-coupon-misli {
        font-size: clamp(0.78rem, 0.9vw, 0.92rem);
    }
    .tz-promo-coupon-chev {
        font-size: 1.4rem;
    }

    .tz-promo-algo-banner {
        gap: 0.48rem;
        padding: 0.42rem 0.65rem;
        border-radius: 10px;
        margin-bottom: 0.46rem;
    }

    .tz-promo-algo-t {
        font-size: clamp(0.62rem, 0.72vw, 0.74rem);
    }

    .tz-promo-algo-s {
        font-size: clamp(0.54rem, 0.62vw, 0.64rem);
    }

    .tz-promo-algo-ico {
        font-size: 1rem;
        line-height: 1;
    }

    .tz-promo-real-card .tz-horse-card-title {
        padding: 0.56rem 0.65rem 0.46rem;
        font-size: 0.54rem;
    }

    .tz-promo-real-card .tz-horse-kv {
        padding: 0.42rem 0.55rem;
    }

    .tz-promo-real-card .tz-horse-kv span {
        font-size: 0.5rem;
    }

    .tz-promo-real-card .tz-horse-kv b {
        font-size: 0.68rem;
    }

    .tz-promo-mock-sheet {
        border-radius: 11px;
        margin-bottom: 0.42rem;
    }

    .tz-promo-ms-row {
        gap: 0.55rem;
        padding: 0.46rem 0.75rem;
    }

    .tz-promo-ms-ico {
        width: 29px;
        height: 29px;
        font-size: 0.65rem;
    }

    .tz-promo-ms-val {
        font-size: clamp(0.54rem, 0.62vw, 0.66rem);
    }

    .tz-promo-budget-row {
        padding: 0.46rem 0.75rem;
    }

    .tz-promo-budget-lira {
        font-size: 0.68rem;
    }

    .tz-promo-budget-num {
        font-size: clamp(0.92rem, 1.05vw, 1.12rem);
    }

    .tz-promo-dynabox {
        margin-top: 0.48rem;
        padding: 0.38rem 0.72rem;
        border-radius: 9px;
    }

    .tz-promo-dynabox-t {
        font-size: clamp(0.56rem, 0.62vw, 0.66rem);
        margin-bottom: 0.22rem;
    }

    .tz-promo-slot-l {
        font-size: 0.48rem;
    }

    .tz-promo-slot-v {
        font-size: clamp(0.48rem, 0.54vw, 0.54rem);
    }

    .tz-promo-sim-mock {
        height: auto;
        max-height: 38vh;
        margin: 0.18rem auto 0.42rem;
        border-radius: 10px;
    }

    .tz-preset-card--promo {
        width: min(920px, 100%);
        margin-top: 0.28rem;
        margin-bottom: 0.42rem;
    }

    /* Slayt 0 (Gerçek Performans) — desktop tipografi (sadece bu slayt) */
    .tz-promo-slide[data-slide-index="0"] .tz-promo-perf-title {
        font-size: clamp(1.05rem, 1.4vw, 1.3rem);
        margin: 0.35rem 0 0.6rem;
    }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-success-card {
        padding: 0.65rem 1rem 0.72rem;
        margin: 0 0 0.6rem;
        border-radius: 16px;
    }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-success-h {
        font-size: 0.84rem;
    }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-success-row--4 {
        margin-top: 0;
    }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-success-row--4 .tz-promo-stat-big {
        font-size: clamp(0.95rem, 1.22vw, 1.32rem);
    }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-success-row--4 .tz-promo-stat-tag {
        font-size: 0.62rem;
    }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-success-row--4 .tz-promo-stat-detail {
        font-size: 0.58rem;
    }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-success-row--4 .tz-promo-success-div {
        height: 2.35rem;
    }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-section-h {
        font-size: 0.92rem;
        margin: 0.5rem 0 0.3rem;
        padding-top: 1.5%;
    }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-hero,
    .tz-promo-slide[data-slide-index="0"] .tz-promo-hero-empty {
        padding: 0.58rem 0.88rem;
        margin-bottom: 0.46rem;
        border-radius: 13px;
        gap: 0.68rem;
    }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-hero-name {
        font-size: clamp(0.92rem, 1.1vw, 1.08rem);
    }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-hero-meta {
        font-size: 0.72rem;
    }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-hero-agf2-v,
    .tz-promo-slide[data-slide-index="0"] .tz-promo-hero-g {
        font-size: clamp(1rem, 1.2vw, 1.25rem);
    }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-hero-agf2-l,
    .tz-promo-slide[data-slide-index="0"] .tz-promo-hero-gl {
        font-size: 0.66rem;
    }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-hero-div {
        height: calc(clamp(1rem, 1.2vw, 1.25rem) + 0.66rem + 4px);
    }

    /* Slayt 3 (Bütçeli Kupon) — desktop tipografi (sadece bu slayt) */
    .tz-promo-shell .tz-promo-slide[data-slide-index="3"] .tz-promo-algo-banner {
        gap: 0.7rem;
        padding: 0.65rem 0.95rem;
        margin-bottom: 0.55rem;
    }
    .tz-promo-slide[data-slide-index="3"] .tz-promo-algo-t {
        font-size: clamp(0.9rem, 1.05vw, 1.05rem);
    }
    .tz-promo-slide[data-slide-index="3"] .tz-promo-algo-s {
        font-size: clamp(0.74rem, 0.86vw, 0.88rem);
    }
    .tz-promo-slide[data-slide-index="3"] .tz-promo-algo-ico {
        font-size: 1.4rem;
    }
    .tz-promo-slide[data-slide-index="3"] .tz-promo-mock-sheet {
        margin-bottom: 0.55rem;
    }
    .tz-promo-slide[data-slide-index="3"] .tz-promo-ms-row {
        gap: 0.78rem;
        padding: 0.6rem 1rem;
    }
    .tz-promo-slide[data-slide-index="3"] .tz-promo-ms-ico {
        width: 36px;
        height: 36px;
        font-size: 0.86rem;
    }
    .tz-promo-slide[data-slide-index="3"] .tz-promo-ms-val {
        font-size: clamp(0.78rem, 0.92vw, 0.94rem);
    }
    .tz-promo-slide[data-slide-index="3"] .tz-promo-budget-row {
        padding: 0.62rem 1rem;
    }
    .tz-promo-slide[data-slide-index="3"] .tz-promo-budget-lira {
        font-size: 0.92rem;
    }
    .tz-promo-slide[data-slide-index="3"] .tz-promo-budget-num {
        font-size: clamp(1.18rem, 1.4vw, 1.5rem);
    }
    .tz-promo-slide[data-slide-index="3"] .tz-promo-dynabox {
        margin-top: 0.6rem;
        padding: 0.58rem 1rem;
    }
    .tz-promo-slide[data-slide-index="3"] .tz-promo-dynabox-t {
        font-size: clamp(0.8rem, 0.9vw, 0.92rem);
        margin-bottom: 0.32rem;
    }
    .tz-promo-slide[data-slide-index="3"] .tz-promo-slot-l {
        font-size: 0.68rem;
    }
    .tz-promo-slide[data-slide-index="3"] .tz-promo-slot-v {
        font-size: clamp(0.76rem, 0.86vw, 0.88rem);
    }

    /* Slayt 4 (Simülasyon) — sadece teal banner; sim image kendi kuralları kullanır */
    .tz-promo-shell .tz-promo-slide[data-slide-index="4"] .tz-promo-algo-banner {
        gap: 0.7rem;
        padding: 0.65rem 0.95rem;
        margin-bottom: 0.55rem;
    }
    .tz-promo-slide[data-slide-index="4"] .tz-promo-algo-t {
        font-size: clamp(0.92rem, 1.05vw, 1.08rem);
    }
    .tz-promo-slide[data-slide-index="4"] .tz-promo-algo-s {
        font-size: clamp(0.76rem, 0.88vw, 0.9rem);
    }
    .tz-promo-slide[data-slide-index="4"] .tz-promo-algo-ico {
        font-size: 1.4rem;
    }

    /* Slayt 6 (Hazır Kupon) — violet banner ve iOS CouponTicketCard tipografisi */
    .tz-promo-shell .tz-promo-slide[data-slide-index="6"] .tz-promo-algo-banner {
        gap: 0.7rem;
        padding: 0.65rem 0.95rem;
        margin-bottom: 0.55rem;
    }
    .tz-promo-slide[data-slide-index="6"] .tz-promo-algo-t {
        font-size: clamp(0.92rem, 1.05vw, 1.08rem);
    }
    .tz-promo-slide[data-slide-index="6"] .tz-promo-algo-s {
        font-size: clamp(0.76rem, 0.88vw, 0.9rem);
    }
    .tz-promo-slide[data-slide-index="6"] .tz-promo-algo-ico {
        font-size: 1.4rem;
    }
    .tz-promo-slide[data-slide-index="6"] .tz-pmcpn-header {
        gap: 0.7rem;
        padding: 0.55rem 0.9rem;
    }
    .tz-promo-slide[data-slide-index="6"] .tz-pmcpn-badge {
        width: 1.85rem;
        height: 1.85rem;
        font-size: 1.3rem;
    }
    .tz-promo-slide[data-slide-index="6"] .tz-pmcpn-tag {
        font-size: 0.6rem;
    }
    .tz-promo-slide[data-slide-index="6"] .tz-pmcpn-date {
        font-size: 0.55rem;
        padding: 0.12rem 0.36rem;
    }
    .tz-promo-slide[data-slide-index="6"] .tz-pmcpn-bet {
        font-size: 0.62rem;
    }
    .tz-promo-slide[data-slide-index="6"] .tz-pmcpn-city {
        font-size: 1.18rem;
    }
    .tz-promo-slide[data-slide-index="6"] .tz-pmcpn-col-head {
        font-size: 0.66rem;
        padding: 0.28rem 0.1rem;
    }
    .tz-promo-slide[data-slide-index="6"] .tz-pmcpn-col-nums {
        min-height: 8.5rem;
        padding: 0.42rem 0.18rem;
    }
    .tz-promo-slide[data-slide-index="6"] .tz-pmcpn-num {
        font-size: 0.95rem;
        padding: 0.26rem 0;
    }
    .tz-promo-slide[data-slide-index="6"] .tz-pmcpn-combos {
        font-size: 0.6rem;
    }
    .tz-promo-slide[data-slide-index="6"] .tz-pmcpn-price {
        font-size: 1.2rem;
    }
    .tz-promo-slide[data-slide-index="6"] .tz-pmcpn-price-tl {
        font-size: 0.62rem;
    }

    /* Slayt 5 (6'lı Kuponun Tutarsa) — desktop'ta okunaklı tipografi */
    .tz-promo-shell .tz-promo-slide[data-slide-index="5"] .tz-promo-algo-banner {
        gap: 0.7rem;
        padding: 0.7rem 1rem;
        margin-bottom: 0.65rem;
    }
    .tz-promo-slide[data-slide-index="5"] .tz-promo-algo-t {
        font-size: clamp(0.94rem, 1.1vw, 1.1rem);
    }
    .tz-promo-slide[data-slide-index="5"] .tz-promo-algo-s {
        font-size: clamp(0.78rem, 0.9vw, 0.92rem);
    }
    .tz-promo-slide[data-slide-index="5"] .tz-promo-algo-ico {
        font-size: 1.4rem;
    }
    .tz-promo-slide[data-slide-index="5"] .tz-promo-six-pl {
        font-size: 0.66rem;
    }
    .tz-promo-slide[data-slide-index="5"] .tz-promo-six-pv {
        font-size: clamp(0.86rem, 1vw, 1.02rem);
    }
    .tz-promo-slide[data-slide-index="5"] .tz-promo-six-nums span {
        font-size: clamp(0.92rem, 1.05vw, 1.1rem);
        padding: 0.6rem 0.45rem;
    }
    .tz-promo-slide[data-slide-index="5"] .tz-promo-six-res-h {
        font-size: 0.78rem;
        padding: 0.6rem;
    }
    .tz-promo-slide[data-slide-index="5"] .tz-promo-six-res-row {
        font-size: clamp(0.86rem, 1vw, 1rem);
        padding: 0.55rem 0.85rem;
    }
    .tz-promo-slide[data-slide-index="5"] .tz-promo-six-tevzi {
        padding: 0.6rem 0.95rem;
        font-size: clamp(0.9rem, 1.05vw, 1.05rem);
    }
    .tz-promo-slide[data-slide-index="5"] .tz-promo-six-tevzi span:last-child {
        font-size: clamp(1rem, 1.1vw, 1.18rem);
    }
    .tz-promo-slide[data-slide-index="5"] .tz-promo-six-chips span {
        font-size: clamp(0.88rem, 1.02vw, 1.05rem);
        padding: 0.55rem 0.4rem;
    }
    .tz-promo-slide[data-slide-index="5"] .tz-promo-six-win {
        padding: 0.7rem 0.95rem;
        font-size: clamp(0.88rem, 1vw, 1.02rem);
    }
    .tz-promo-slide[data-slide-index="5"] .tz-promo-six-win-amt {
        font-size: clamp(1.15rem, 1.3vw, 1.4rem);
    }

    .tz-promo-banner-narrow {
        margin-bottom: 0.35rem;
    }

    .tz-promo-lil-ticket {
        padding: 0.42rem;
        border-radius: 10px;
    }

    .tz-promo-lil-legs {
        margin-top: 0.35rem;
        gap: 0.14rem;
        font-size: clamp(0.42rem, 0.52vw, 0.54rem);
    }

    .tz-promo-six-sheet {
        border-radius: 10px;
    }

    .tz-promo-six-pickers {
        gap: 0.3rem;
        padding: 0.38rem 0.52rem;
    }

    .tz-promo-six-pbox {
        padding: 0.34rem;
    }

    .tz-promo-six-pl {
        font-size: 0.48rem;
    }

    .tz-promo-six-pv {
        font-size: clamp(0.54rem, 0.62vw, 0.66rem);
    }

    .tz-promo-six-nums {
        gap: 0.26rem;
        padding: 0 0.52rem 0.42rem;
    }

    .tz-promo-six-nums span {
        padding: 0.34rem;
    }

    .tz-promo-six-res-h {
        font-size: 0.55rem;
        padding: 0.38rem;
    }

    .tz-promo-six-res-row {
        padding: 0.32rem 0.52rem;
        gap: 0.28rem;
        font-size: clamp(0.52rem, 0.58vw, 0.64rem);
    }

    .tz-promo-six-tevzi {
        padding: 0.38rem 0.68rem;
    }

    .tz-promo-six-tevzi span:last-child {
        font-size: clamp(0.6rem, 0.82vw, 0.82rem);
    }

    .tz-promo-six-chips {
        gap: 0.26rem;
        padding: 0.38rem 0.52rem;
    }

    .tz-promo-six-chips span {
        padding: 0.32rem;
    }

    .tz-promo-six-win {
        margin: 0.38rem 0.68rem;
        padding: 0.42rem;
        border-radius: 10px;
    }

    .tz-promo-six-win-amt {
        font-size: clamp(0.68rem, 0.88vw, 0.88rem);
    }
}

/* Footer artık stage-card'ın akışı içinde (flex sırasının sonu) — sabit konumlama yok.
   Bu sayede shell yüksekliği = 100dvh − topbar; carousel flex:1 ile büyür; footer doğal
   olarak alt tab navigasyonunun hemen üstüne yerleşir. */
.tz-promo-footer {
    position: static;
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.95rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgb(255 255 255 / 7%);
    background:
        linear-gradient(180deg, rgb(255 255 255 / 3.5%) 0%, transparent 52%),
        rgb(14 15 18 / 96%);
}

.tz-promo-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.6rem;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    margin-top: 0;
    padding: 0.1rem 0.5rem 0.05rem;
    position: relative;
    z-index: 2;
}

body.tz-promo-page .tz-promo-footer .tz-promo-dots {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    padding: 0.26rem 0.72rem;
    border-radius: 999px;
    background: rgb(0 0 0 / 38%);
    border: 1px solid rgb(255 255 255 / 7%);
    gap: 0.2rem 0.52rem;
}

.tz-promo-dot {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
    background: transparent;
    box-sizing: border-box;
    display: inline-grid;
    place-items: center;
}

.tz-promo-dot:focus-visible {
    outline: 2px solid rgb(37 217 239 / 80%);
    outline-offset: 2px;
}

.tz-promo-dot::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgb(255 255 255 / 30%);
    transition:
        width 0.32s cubic-bezier(0.2, 0.7, 0.3, 1),
        height 0.32s cubic-bezier(0.2, 0.7, 0.3, 1),
        background 0.22s ease,
        box-shadow 0.22s ease;
}

.tz-promo-dot:hover::before {
    background: rgb(255 255 255 / 55%);
}

.tz-promo-dot.is-active::before {
    width: 26px;
    height: 8px;
    background: var(--cyan);
    box-shadow: 0 0 14px rgb(37 217 239 / 50%);
}

.tz-promo-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 56px;
    margin: 0.45rem auto 0;
    width: 100%;
    max-width: min(420px, 100%);
    padding: 0.5rem 1rem;
    border-radius: 14px;
    color: #030708;
    background: linear-gradient(92deg, var(--cyan), rgb(52 224 246 / 88%));
    border: 1px solid rgb(110 239 255 / 45%);
    text-decoration: none;
    text-align: center;
    box-shadow:
        0 1px 0 rgb(255 255 255 / 28%) inset,
        0 14px 36px rgb(0 0 0 / 38%);
    transition:
        transform 0.15s ease,
        filter 0.15s ease,
        box-shadow 0.2s ease;
}

.tz-promo-cta-title {
    font-size: clamp(0.92rem, 3vw, 1.05rem);
    font-weight: 900;
    letter-spacing: 0.1em;
    line-height: 1.05;
}

.tz-promo-cta-sub {
    font-size: clamp(0.62rem, 2.4vw, 0.74rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    opacity: 0.78;
    line-height: 1.05;
    text-transform: uppercase;
}

/* Slide 1 (kupon görselleri): sabit sayfa, içerik scroll olmasın */
.tz-promo-slide[data-slide-index="1"] .tz-promo-slide-scroll {
    overflow: hidden;
    max-height: none;
    padding-bottom: 0.25rem;
}

@media (min-width: 768px) and (max-width: 820px) {
    .tz-promo-cta {
        margin-left: auto;
        margin-right: auto;
        max-width: min(760px, calc(100% - 2rem));
    }
}

.tz-promo-cta:hover {
    filter: brightness(1.045);
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgb(255 255 255 / 32%) inset,
        0 18px 44px rgb(0 0 0 / 44%);
}

.tz-promo-cta:active {
    filter: brightness(0.93);
    transform: translateY(0);
}

/* Üye Ol — promo gömülü Firebase giriş (Google / Apple) */
body.tz-promo-has-auth .tz-promo-auth-wrap {
    width: 100%;
    max-width: min(440px, calc(100% - 2rem));
    margin: 1.1rem auto 0;
    padding-bottom: 0.25rem;
    scroll-margin-top: 6rem;
}

body.tz-promo-has-auth .tz-promo-auth-wrap .tz-auth-shell {
    gap: 1rem;
}

.tz-auth-shell--compact .tz-promo-auth-embed-heading {
    margin: 0 0 0.45rem;
    text-align: center;
    font-size: 1.02rem;
    font-weight: 900;
    font-family:
        ui-monospace,
        "SF Mono",
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
    letter-spacing: 0.04em;
    color: rgb(255 255 255 / 92%);
}

.tz-auth-shell--compact .tz-promo-auth-embed-lead {
    margin: 0 0 0.95rem;
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.38;
}

.tz-auth-shell--compact .tz-auth-guest {
    display: flex;
    flex-direction: column;
    gap: inherit;
}

.tz-auth-shell--compact .tz-auth-legal {
    font-size: 0.71rem;
    line-height: 1.42;
    text-align: center;
    margin-bottom: 0;
}

@media (min-width: 768px) and (max-width: 820px) {
    body.tz-promo-has-auth .tz-promo-auth-wrap {
        max-width: min(480px, calc(100% - 3rem));
    }
}

/* Promo alt şerit + gömülü auth: taban .tz-promo-footer / .tz-auth-* sonrası — ≥821 sıkılık */
@media (min-width: 821px) {
    body.tz-promo-page .tz-promo-stage-card .tz-promo-footer {
        padding: 0.5rem calc(0.95rem + env(safe-area-inset-left, 0px)) calc(0.78rem + env(safe-area-inset-bottom, 0px)) calc(0.95rem + env(safe-area-inset-right, 0px));
    }

    body.tz-promo-page .tz-promo-stage-card .tz-promo-footer .tz-promo-dots {
        gap: 0.16rem 0.44rem;
        padding: 0.2rem 0.52rem;
    }

    body.tz-promo-page .tz-promo-dot {
        width: 1.7rem;
        height: 1.7rem;
        min-width: 1.7rem;
        min-height: 1.7rem;
    }

    body.tz-promo-page .tz-promo-dot::before {
        width: 7px;
        height: 7px;
    }

    body.tz-promo-page .tz-promo-dot.is-active::before {
        width: 22px;
        height: 7px;
    }

    body.tz-promo-page .tz-promo-stage-card .tz-promo-footer .tz-promo-cta {
        min-height: 52px;
        margin-top: 0.32rem;
        padding: 0.45rem 1.1rem;
        border-radius: 12px;
        max-width: min(380px, calc(100% - 2rem));
    }

    body.tz-promo-page .tz-promo-stage-card .tz-promo-footer .tz-promo-cta-title {
        font-size: clamp(0.86rem, 1vw, 0.98rem);
    }

    body.tz-promo-page .tz-promo-stage-card .tz-promo-footer .tz-promo-cta-sub {
        font-size: clamp(0.6rem, 0.72vw, 0.7rem);
    }

    body.tz-promo-has-auth .tz-promo-auth-wrap {
        max-width: min(380px, calc(100% - 2rem));
    }

    body.tz-promo-page .tz-auth-shell--compact .tz-promo-auth-embed-heading {
        font-size: 0.9rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS — /uye-ol/ promo sayfası
   Cihaz sınıfları:
     ≤ 360px               — 4-5 inç küçük telefon (320–360px genişlik)
     max-height ≤ 600px    — yatay mod / kısa görünüm
     ≥ 1280px              — 14 inç laptop/masaüstü
     ≥ 1600px              — 17 inç büyük masaüstü
   ═══════════════════════════════════════════════════════════════════ */

/* ── Küçük telefon: 4-5 inç (≤360px genişlik) ── */
@media (max-width: 360px) {
    body.tz-promo-page main.page {
        padding-top: 0.25rem;
    }
    .tz-promo-shell {
        height: calc(100dvh - 9rem);
        max-height: calc(100dvh - 9rem);
    }
    .tz-promo-slide-scroll {
        padding: 0.38rem 0.42rem 0.52rem;
    }
    .tz-promo-perf-title {
        font-size: clamp(0.7rem, 5.5vw, 0.82rem);
        padding-top: 1.5%;
        margin-bottom: 0.42rem;
    }
    .tz-promo-success-card {
        padding: 0.42rem 0.7rem 0.48rem;
        border-radius: 14px;
    }
    .tz-promo-success-h { font-size: 0.62rem; }
    .tz-promo-stat-big { font-size: clamp(0.85rem, 7.5vw, 1.12rem); }
    .tz-promo-stat-tag { font-size: 0.46rem; }
    .tz-promo-stat-detail { font-size: 0.44rem; }
    .tz-promo-success-div { height: 1.85rem; }
    .tz-promo-section-h {
        font-size: clamp(0.65rem, 5vw, 0.72rem);
        padding-top: 3%;
        margin-bottom: 0.18rem;
    }
    .tz-promo-hero,
    .tz-promo-hero-empty {
        padding: 0.38rem 0.65rem;
        margin-bottom: 0.32rem;
        gap: 0.5rem;
    }
    .tz-promo-hero-name { font-size: clamp(0.68rem, 5.5vw, 0.84rem); }
    .tz-promo-hero-meta { font-size: 0.52rem; }
    .tz-promo-hero-agf2-v,
    .tz-promo-hero-g { font-size: clamp(0.78rem, 6.5vw, 1rem); }
    .tz-promo-hero-agf2-l,
    .tz-promo-hero-gl { font-size: 0.48rem; }
    .tz-promo-coupon-card-inner {
        padding: 0.45rem 0.65rem;
        gap: 0.5rem;
    }
    .tz-promo-coupon-city { font-size: clamp(0.88rem, 7.5vw, 1rem); }
    .tz-promo-coupon-bet { font-size: 0.58rem; }
    .tz-promo-coupon-meta { font-size: 0.52rem; }
    .tz-promo-coupon-payout { font-size: clamp(0.62rem, 5.5vw, 0.74rem); }
    .tz-promo-coupon-amt { font-size: clamp(0.9rem, 7.5vw, 1.05rem); }
    .tz-promo-coupon-misli { font-size: 0.54rem; }
    .tz-promo-algo-banner {
        padding: 0.44rem 0.62rem;
        gap: 0.52rem;
        margin-bottom: 0.44rem;
    }
    .tz-promo-algo-t { font-size: clamp(0.76rem, 5.5vw, 0.9rem); }
    .tz-promo-algo-s { font-size: clamp(0.64rem, 4.5vw, 0.76rem); }
    .tz-promo-algo-ico { font-size: 1.1rem; }
    .tz-promo-footer {
        padding: 0.38rem 0.72rem calc(0.48rem + env(safe-area-inset-bottom, 0px));
    }
    .tz-promo-cta {
        min-height: 50px;
        border-radius: 12px;
    }
    .tz-promo-cta-title { font-size: clamp(0.86rem, 7vw, 0.96rem); }
    .tz-promo-cta-sub { font-size: clamp(0.58rem, 4.5vw, 0.68rem); }
}

/* ── Kısa görünüm: yatay mod / eski kısa telefon (≤820px genişlik, ≤600px yükseklik) ── */
@media (max-height: 600px) and (max-width: 820px) {
    body.tz-promo-page main.page {
        padding-top: 0.25rem;
        padding-bottom: calc(3.6rem + env(safe-area-inset-bottom, 0px));
    }
    .tz-promo-shell {
        height: calc(100dvh - 8rem);
        max-height: calc(100dvh - 8rem);
    }
    .tz-promo-slide-scroll {
        padding: 0.28rem 0.52rem 0.38rem;
    }
    .tz-promo-footer {
        padding-top: 0.28rem;
        padding-bottom: calc(0.28rem + env(safe-area-inset-bottom, 0px));
    }
    .tz-promo-dot {
        width: 1.85rem;
        height: 1.85rem;
        min-width: 1.85rem;
        min-height: 1.85rem;
    }
    .tz-promo-cta {
        min-height: 44px;
        margin-top: 0.22rem;
    }
}

/* ── Büyük masaüstü / laptop (≥1280px — 14 inç ve üstü) ── */
@media (min-width: 1280px) {
    /* Sayfa kenar boşluklarını daha da azalt — kart yüksekliği artar */
    body.tz-promo-page main.page {
        padding-top: 0.75rem;
        padding-bottom: 1rem;
    }
    /* topbar (~9rem) + page padding (0.75rem + 1rem = 1.75rem) = 10.75rem */
    .tz-promo-shell {
        height: calc(100dvh - 10.75rem);
        max-height: calc(100dvh - 10.75rem);
    }
    .tz-promo-shell .tz-promo-slide-scroll > * {
        max-width: min(860px, 100%);
    }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-slide0-stack {
        max-width: min(860px, 100%);
    }
    /* section-h padding-top 5% geniş ekranda çok büyür — kapat */
    .tz-promo-section-h { padding-top: min(5%, 1.1rem); }

    /* Slayt 0: Gerçek Performans */
    .tz-promo-slide[data-slide-index="0"] .tz-promo-perf-title {
        font-size: clamp(1.05rem, 1.3vw, 1.35rem);
        margin: 0.28rem 0 0.45rem;
        padding-top: 1%;
    }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-success-card {
        padding: 0.55rem 1rem 0.62rem;
        margin: 0 0 0.48rem;
        border-radius: 16px;
    }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-success-h { font-size: 0.82rem; }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-success-row--4 .tz-promo-stat-big {
        font-size: clamp(1rem, 1.28vw, 1.38rem);
    }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-success-row--4 .tz-promo-stat-tag {
        font-size: 0.68rem;
    }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-success-row--4 .tz-promo-stat-detail {
        font-size: 0.64rem;
    }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-section-h {
        font-size: clamp(0.88rem, 1.05vw, 1.05rem);
        margin: 0.32rem 0 0.28rem;
        padding-top: 1%;
    }
    /* 2-sütun hero grid: 7 satır → 4 satır, içerik taşmaz */
    .tz-promo-slide[data-slide-index="0"] .tz-promo-hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.42rem 0.65rem;
        width: 100%;
    }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-hero,
    .tz-promo-slide[data-slide-index="0"] .tz-promo-hero-empty {
        padding: 0.52rem 0.85rem;
        margin-bottom: 0;
        border-radius: 13px;
        gap: 0.72rem;
    }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-hero-name {
        font-size: clamp(0.88rem, 1.05vw, 1.12rem);
    }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-hero-meta { font-size: 0.72rem; }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-hero-agf2-v,
    .tz-promo-slide[data-slide-index="0"] .tz-promo-hero-g {
        font-size: clamp(0.98rem, 1.18vw, 1.28rem);
    }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-hero-agf2-l,
    .tz-promo-slide[data-slide-index="0"] .tz-promo-hero-gl { font-size: 0.68rem; }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-hero-div {
        height: calc(clamp(0.98rem, 1.18vw, 1.28rem) + 0.68rem + 4px);
    }

    /* Slayt 1: Kazanılan Kuponlar — 14″ de sığsın */
    .tz-promo-section-h-coupons {
        font-size: clamp(1.05rem, 1.25vw, 1.35rem);
        margin-bottom: 0.52rem;
    }
    .tz-promo-coupon-stack { gap: 10px; }
    .tz-promo-coupon-card { min-height: 88px; }
    .tz-promo-coupon-card-inner {
        padding: 0.52rem 0.92rem;
        min-height: 88px;
        gap: 0.82rem;
    }
    .tz-promo-coupon-city { font-size: clamp(1.02rem, 1.22vw, 1.32rem); }
    .tz-promo-coupon-bet { font-size: clamp(0.68rem, 0.8vw, 0.86rem); }
    .tz-promo-coupon-meta { font-size: clamp(0.6rem, 0.7vw, 0.74rem); }
    .tz-promo-coupon-payout { font-size: clamp(0.72rem, 0.84vw, 0.9rem); }
    .tz-promo-coupon-amt { font-size: clamp(1.02rem, 1.22vw, 1.32rem); }
    .tz-promo-coupon-misli { font-size: clamp(0.66rem, 0.78vw, 0.84rem); }
    .tz-promo-coupon-chev { font-size: 1.25rem; }

    /* Slayt 2-6: algo banner ortak */
    .tz-promo-algo-banner {
        gap: 0.72rem;
        padding: 0.58rem 0.92rem;
        border-radius: 13px;
        margin-bottom: 0.58rem;
    }
    .tz-promo-algo-ico { font-size: 1.55rem; }
    .tz-promo-slide[data-slide-index="2"] .tz-promo-algo-t {
        font-size: clamp(1rem, 1.18vw, 1.28rem);
    }
    .tz-promo-slide[data-slide-index="2"] .tz-promo-algo-s {
        font-size: clamp(0.84rem, 0.98vw, 1.05rem);
    }
    /* Slayt 2: at kartı score-body sıkıştırma (14″ de taşmasın) */
    .tz-promo-real-card .tz-score-body {
        padding: 0.5rem 0.65rem 0.6rem;
        gap: 0.5rem;
    }
    .tz-promo-real-card .tz-factor-grid {
        gap: 0.28rem;
    }
    .tz-promo-real-card .tz-factor-grid div {
        padding: 0.3rem 0.4rem;
    }

    /* Slayt 3: Bütçeli Kupon — 14″ de sığsın */
    .tz-promo-shell .tz-promo-slide[data-slide-index="3"] .tz-promo-algo-banner {
        gap: 0.72rem;
        padding: 0.55rem 0.88rem;
        margin-bottom: 0.48rem;
    }
    .tz-promo-slide[data-slide-index="3"] .tz-promo-algo-t {
        font-size: clamp(0.92rem, 1.08vw, 1.18rem);
    }
    .tz-promo-slide[data-slide-index="3"] .tz-promo-algo-s {
        font-size: clamp(0.76rem, 0.88vw, 0.96rem);
    }
    .tz-promo-slide[data-slide-index="3"] .tz-promo-algo-ico { font-size: 1.45rem; }
    .tz-promo-slide[data-slide-index="3"] .tz-promo-ms-row {
        gap: 0.72rem;
        padding: 0.52rem 0.88rem;
    }
    .tz-promo-slide[data-slide-index="3"] .tz-promo-ms-ico {
        width: 34px;
        height: 34px;
        font-size: 0.82rem;
    }
    .tz-promo-slide[data-slide-index="3"] .tz-promo-ms-val {
        font-size: clamp(0.78rem, 0.92vw, 1rem);
    }
    .tz-promo-slide[data-slide-index="3"] .tz-promo-budget-row { padding: 0.52rem 0.88rem; }
    .tz-promo-slide[data-slide-index="3"] .tz-promo-budget-lira { font-size: 0.9rem; }
    .tz-promo-slide[data-slide-index="3"] .tz-promo-budget-num {
        font-size: clamp(1.18rem, 1.38vw, 1.58rem);
    }
    .tz-promo-slide[data-slide-index="3"] .tz-promo-dynabox {
        padding: 0.48rem 0.88rem;
        margin-top: 0.42rem;
    }
    .tz-promo-slide[data-slide-index="3"] .tz-promo-dynabox-t {
        font-size: clamp(0.8rem, 0.92vw, 1rem);
        margin-bottom: 0.28rem;
    }
    .tz-promo-slide[data-slide-index="3"] .tz-promo-slot-l { font-size: 0.7rem; }
    .tz-promo-slide[data-slide-index="3"] .tz-promo-slot-v {
        font-size: clamp(0.78rem, 0.9vw, 0.96rem);
    }

    /* Slayt 4: Simülasyon */
    .tz-promo-shell .tz-promo-slide[data-slide-index="4"] .tz-promo-algo-banner {
        gap: 0.82rem;
        padding: 0.75rem 1.1rem;
        margin-bottom: 0.65rem;
    }
    .tz-promo-slide[data-slide-index="4"] .tz-promo-algo-t {
        font-size: clamp(1.08rem, 1.25vw, 1.35rem);
    }
    .tz-promo-slide[data-slide-index="4"] .tz-promo-algo-s {
        font-size: clamp(0.92rem, 1.08vw, 1.15rem);
    }
    .tz-promo-slide[data-slide-index="4"] .tz-promo-algo-ico { font-size: 1.65rem; }
    .tz-promo-sim-mock {
        max-height: 44vh;
        border-radius: 12px;
    }

    /* Slayt 5: 6'lı Ganyan — 14″ sığdırma */
    .tz-promo-shell .tz-promo-slide[data-slide-index="5"] .tz-promo-algo-banner {
        gap: 0.58rem;
        padding: 0.42rem 0.82rem;
        margin-bottom: 0.28rem;
    }
    .tz-promo-slide[data-slide-index="5"] .tz-promo-algo-t {
        font-size: clamp(0.92rem, 1.08vw, 1.18rem);
    }
    .tz-promo-slide[data-slide-index="5"] .tz-promo-algo-s {
        font-size: clamp(0.76rem, 0.88vw, 0.96rem);
    }
    .tz-promo-slide[data-slide-index="5"] .tz-promo-algo-ico { font-size: 1.3rem; }
    .tz-promo-slide[data-slide-index="5"] .tz-promo-six-pickers {
        padding: 0.22rem 0.38rem;
    }
    .tz-promo-slide[data-slide-index="5"] .tz-promo-six-pl { font-size: 0.62rem; }
    .tz-promo-slide[data-slide-index="5"] .tz-promo-six-pv {
        font-size: clamp(0.8rem, 0.94vw, 1.02rem);
    }
    .tz-promo-slide[data-slide-index="5"] .tz-promo-six-nums {
        padding-bottom: 0.22rem;
    }
    .tz-promo-slide[data-slide-index="5"] .tz-promo-six-nums span {
        font-size: clamp(0.9rem, 1.05vw, 1.14rem);
        padding: 0.3rem 0.35rem;
    }
    .tz-promo-slide[data-slide-index="5"] .tz-promo-six-res-h {
        font-size: 0.72rem;
        padding: 0.2rem;
    }
    .tz-promo-slide[data-slide-index="5"] .tz-promo-six-res-row {
        font-size: clamp(0.78rem, 0.9vw, 0.98rem);
        padding: 0.1rem 0.65rem;
    }
    .tz-promo-slide[data-slide-index="5"] .tz-promo-six-tevzi {
        padding: 0.22rem 0.78rem;
        font-size: clamp(0.84rem, 0.98vw, 1.06rem);
    }
    .tz-promo-slide[data-slide-index="5"] .tz-promo-six-tevzi span:last-child {
        font-size: clamp(0.92rem, 1.06vw, 1.16rem);
    }
    /* chips redundant at desktop — number row already shown above */
    .tz-promo-slide[data-slide-index="5"] .tz-promo-six-chips { display: none; }
    .tz-promo-slide[data-slide-index="5"] .tz-promo-six-win {
        padding: 0.3rem 0.75rem;
        font-size: clamp(0.84rem, 0.96vw, 1.04rem);
    }
    .tz-promo-slide[data-slide-index="5"] .tz-promo-six-win-amt {
        font-size: clamp(1.12rem, 1.3vw, 1.45rem);
    }

    /* Slayt 6: Hazır Kupon */
    .tz-promo-shell .tz-promo-slide[data-slide-index="6"] .tz-promo-algo-banner {
        gap: 0.82rem;
        padding: 0.75rem 1.1rem;
        margin-bottom: 0.65rem;
    }
    .tz-promo-slide[data-slide-index="6"] .tz-promo-algo-t {
        font-size: clamp(1.08rem, 1.25vw, 1.35rem);
    }
    .tz-promo-slide[data-slide-index="6"] .tz-promo-algo-s {
        font-size: clamp(0.9rem, 1.05vw, 1.12rem);
    }
    .tz-promo-slide[data-slide-index="6"] .tz-promo-algo-ico { font-size: 1.65rem; }
    .tz-promo-slide[data-slide-index="6"] .tz-pmcpn-header {
        gap: 0.88rem;
        padding: 0.65rem 1.1rem;
    }
    .tz-promo-slide[data-slide-index="6"] .tz-pmcpn-badge {
        width: 2.2rem;
        height: 2.2rem;
        font-size: 1.55rem;
    }
    .tz-promo-slide[data-slide-index="6"] .tz-pmcpn-tag { font-size: 0.72rem; }
    .tz-promo-slide[data-slide-index="6"] .tz-pmcpn-date {
        font-size: 0.65rem;
        padding: 0.14rem 0.42rem;
    }
    .tz-promo-slide[data-slide-index="6"] .tz-pmcpn-bet { font-size: 0.74rem; }
    .tz-promo-slide[data-slide-index="6"] .tz-pmcpn-city { font-size: 1.42rem; }
    .tz-promo-slide[data-slide-index="6"] .tz-pmcpn-col-head {
        font-size: 0.78rem;
        padding: 0.32rem 0.12rem;
    }
    .tz-promo-slide[data-slide-index="6"] .tz-pmcpn-col-nums {
        min-height: 10rem;
        padding: 0.5rem 0.22rem;
    }
    .tz-promo-slide[data-slide-index="6"] .tz-pmcpn-num {
        font-size: 1.12rem;
        padding: 0.3rem 0;
    }
    .tz-promo-slide[data-slide-index="6"] .tz-pmcpn-combos { font-size: 0.7rem; }
    .tz-promo-slide[data-slide-index="6"] .tz-pmcpn-price { font-size: 1.42rem; }
    .tz-promo-slide[data-slide-index="6"] .tz-pmcpn-price-tl { font-size: 0.74rem; }

    /* Alt alan: dots ve CTA */
    body.tz-promo-page .tz-promo-stage-card .tz-promo-footer {
        padding: 0.58rem calc(1.1rem + env(safe-area-inset-left, 0px)) calc(0.88rem + env(safe-area-inset-bottom, 0px)) calc(1.1rem + env(safe-area-inset-right, 0px));
    }
    body.tz-promo-page .tz-promo-stage-card .tz-promo-footer .tz-promo-dots {
        gap: 0.2rem 0.52rem;
        padding: 0.25rem 0.65rem;
    }
    body.tz-promo-page .tz-promo-dot {
        width: 2rem;
        height: 2rem;
        min-width: 2rem;
        min-height: 2rem;
    }
    body.tz-promo-page .tz-promo-dot::before {
        width: 8px;
        height: 8px;
    }
    body.tz-promo-page .tz-promo-dot.is-active::before {
        width: 26px;
        height: 8px;
    }
    body.tz-promo-page .tz-promo-stage-card .tz-promo-footer .tz-promo-cta {
        min-height: 62px;
        margin-top: 0.42rem;
        padding: 0.55rem 1.3rem;
        border-radius: 14px;
        max-width: min(440px, calc(100% - 2rem));
    }
    body.tz-promo-page .tz-promo-stage-card .tz-promo-footer .tz-promo-cta-title {
        font-size: clamp(1.05rem, 1.2vw, 1.22rem);
    }
    body.tz-promo-page .tz-promo-stage-card .tz-promo-footer .tz-promo-cta-sub {
        font-size: clamp(0.74rem, 0.84vw, 0.88rem);
    }
}

/* ── Çok büyük masaüstü (≥1600px — 17 inç ve üstü) ── */
@media (min-width: 1600px) {
    body.tz-promo-page main.page {
        padding-top: 0.5rem;
        padding-bottom: 0.75rem;
    }
    /* topbar (~9rem) + page padding (0.5rem + 0.75rem = 1.25rem) = 10.25rem */
    .tz-promo-shell {
        height: calc(100dvh - 10.25rem);
        max-height: calc(100dvh - 10.25rem);
    }
    .tz-promo-shell .tz-promo-slide-scroll > * {
        max-width: min(980px, 100%);
    }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-slide0-stack {
        max-width: min(980px, 100%);
    }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-success-row--4 .tz-promo-stat-big {
        font-size: clamp(1.08rem, 1.35vw, 1.45rem);
    }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-success-row--4 .tz-promo-stat-tag { font-size: 0.74rem; }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-success-row--4 .tz-promo-stat-detail { font-size: 0.7rem; }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-hero-grid {
        gap: 0.52rem 0.85rem;
    }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-hero,
    .tz-promo-slide[data-slide-index="0"] .tz-promo-hero-empty {
        padding: 0.62rem 1rem;
        gap: 0.88rem;
    }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-hero-name {
        font-size: clamp(0.98rem, 1.15vw, 1.28rem);
    }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-hero-meta { font-size: 0.8rem; }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-hero-agf2-v,
    .tz-promo-slide[data-slide-index="0"] .tz-promo-hero-g {
        font-size: clamp(1.05rem, 1.25vw, 1.42rem);
    }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-hero-agf2-l,
    .tz-promo-slide[data-slide-index="0"] .tz-promo-hero-gl { font-size: 0.74rem; }
    .tz-promo-slide[data-slide-index="0"] .tz-promo-hero-div {
        height: calc(clamp(1.05rem, 1.25vw, 1.42rem) + 0.74rem + 4px);
    }
    .tz-promo-coupon-city { font-size: clamp(1.55rem, 1.78vw, 2rem); }
    .tz-promo-coupon-amt { font-size: clamp(1.58rem, 1.78vw, 2rem); }
    .tz-promo-coupon-payout { font-size: clamp(1.05rem, 1.2vw, 1.32rem); }
    .tz-promo-slide[data-slide-index="5"] .tz-promo-six-win-amt {
        font-size: clamp(1.62rem, 1.85vw, 2.1rem);
    }
    body.tz-promo-page .tz-promo-stage-card .tz-promo-footer .tz-promo-cta {
        min-height: 68px;
        max-width: min(480px, calc(100% - 2rem));
    }
    body.tz-promo-page .tz-promo-stage-card .tz-promo-footer .tz-promo-cta-title {
        font-size: clamp(1.15rem, 1.28vw, 1.38rem);
    }
    body.tz-promo-page .tz-promo-stage-card .tz-promo-footer .tz-promo-cta-sub {
        font-size: clamp(0.78rem, 0.88vw, 0.94rem);
    }
}

/* iOS Account / Paywall ara ekranına yakın — Django oturum özeti (/hesap/) */
.tz-account-hub {
    position: relative;
    width: min(400px, calc(100% - 2rem));
    margin: 0 auto 1.5rem;
    padding: 2.4rem 1.25rem 1.25rem;
    border-radius: 18px;
    border: 1px solid rgb(255 255 255 / 0.1);
    background: rgb(255 255 255 / 0.04);
}

.tz-account-hub-dismiss {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.06);
    color: rgb(255 255 255 / 0.38);
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 0;
}

.tz-account-hub-dismiss:hover {
    background: rgb(255 255 255 / 0.09);
    color: rgb(255 255 255 / 0.52);
}

.tz-account-hub-dismiss-ico {
    display: block;
    width: 12px;
    height: 12px;
    background: linear-gradient(45deg, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%),
        linear-gradient(-45deg, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%);
}

.tz-account-hub-profile {
    text-align: center;
    margin-bottom: 1.25rem;
}

.tz-account-hub-avatar {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    margin: 0 auto 0.85rem;
    border-radius: 50%;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #111;
    background: #f5d547;
    box-shadow: 0 10px 36px rgb(0 0 0 / 0.42);
}

.tz-account-hub-user {
    margin: 0 0 0.35rem;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.tz-account-hub-email {
    margin: 0 0 0.55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-size: 0.84rem;
    flex-wrap: wrap;
}

.tz-account-hub-prov--google {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: rgb(255 255 255 / 0.94);
    font-size: 0.65rem;
    font-weight: 900;
    color: #111;
}

.tz-account-hub-prov--apple {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: rgb(255 255 255 / 0.92);
}

.tz-account-hub-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.15rem;
    padding: 0.25rem 0.55rem;
    border-radius: 6px;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.tz-account-hub-badge--admin {
    background: rgb(255 90 104 / 0.25);
    color: #ff939a;
}

.tz-account-hub-badge--tester {
    background: rgb(255 90 104 / 0.22);
    color: #ff9ea5;
}

.tz-account-hub-badge--premium {
    background: rgb(94 225 138 / 0.2);
    color: var(--green);
}

.tz-account-hub-badge--registered {
    background: rgb(37 217 239 / 0.16);
    color: var(--cyan);
}

.tz-account-hub-kurgu {
    margin: 0.42rem 0 0;
    font-size: 0.72rem;
    line-height: 1.45;
    max-width: 100%;
}

.tz-account-hub-tier {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 14px;
    border: 1px solid rgb(255 255 255 / 0.1);
}

.tz-account-hub-tier--admin,
.tz-account-hub-tier--tester {
    background: linear-gradient(165deg, rgb(91 26 34 / 0.55), rgb(42 14 18 / 0.4));
    border-color: rgb(255 90 104 / 0.45);
}

.tz-account-hub-tier--premium {
    background: linear-gradient(165deg, rgb(26 71 41 / 0.45), rgb(12 32 22 / 0.35));
    border-color: rgb(94 225 138 / 0.32);
}

.tz-account-hub-tier--registered {
    background: rgb(37 217 239 / 0.06);
    border-color: rgb(37 217 239 / 0.2);
}

.tz-account-hub-tier-ico {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgb(255 255 255 / 0.08) center / 20px 20px no-repeat;
}

.tz-account-hub-tier--admin .tz-account-hub-tier-ico,
.tz-account-hub-tier--tester .tz-account-hub-tier-ico {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff5a68'%3E%3Cpath d='M12 1 3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11 7 3.11v5.7h-7v4.93z'/%3E%3C/svg%3E");
}

.tz-account-hub-tier--premium .tz-account-hub-tier-ico {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235ee18a'%3E%3Cpath d='M7 15V9l5-3 5 3v6l-5 3-5-3zm8-6.18-3 1.8-3-1.8 3-1.81 3 1.81z'/%3E%3C/svg%3E");
}

.tz-account-hub-tier--registered .tz-account-hub-tier-ico {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2325d9ef'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-7-2c0-1.1.9-2 2s2 .9 2 2v2H9V6zm3 13.5c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm3.5-2.5h-7v-1h7v1z'/%3E%3C/svg%3E");
}

.tz-account-hub-tier-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.tz-account-hub-tier-title {
    font-size: 0.95rem;
}

.tz-account-hub-tier-sub {
    font-size: 0.78rem;
    line-height: 1.35;
}

.tz-account-hub-tier-pill {
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 0.05rem;
    padding: 0.2rem 0.42rem;
    border-radius: 5px;
    font-size: 0.54rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    background: rgb(255 90 104 / 0.28);
    color: #ffaeb4;
}

.tz-account-hub-tier--admin .tz-account-hub-tier-pill {
    align-self: center;
    margin-top: 0;
}

.tz-account-hub-tier-pill--green {
    background: rgb(94 225 138 / 0.25);
    color: var(--green);
}

.tz-account-hub-restore {
    margin: 0 0 0.95rem;
    text-align: center;
    font-size: 0.8rem;
}

.tz-account-hub-restore a {
    color: rgb(255 255 255 / 0.4);
}

.tz-account-hub-restore a:hover {
    color: rgb(255 255 255 / 0.55);
}

.tz-account-hub-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem;
    border-radius: 14px;
    border: 1px solid rgb(255 90 104 / 0.45);
    background: rgb(71 22 26 / 0.35);
    color: rgb(255 140 146 / 0.92);
    font-weight: 800;
    font-size: 0.88rem;
    text-decoration: none;
}

.tz-account-hub-logout:hover {
    background: rgb(91 30 38 / 0.45);
    color: #ffc6ca;
}

.tz-account-hub-logout-ico {
    width: 18px;
    height: 18px;
    background: center / contain no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23ff8c94' stroke-width='2' d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'%3E%3C/path%3E%3Cpath stroke='%23ff8c94' stroke-width='2' d='M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E");
}

.details-tz-tech > summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 0.82rem;
    color: rgb(255 255 255 / 0.5);
}

.details-tz-tech {
    margin: 1.25rem auto;
    width: min(520px, calc(100% - 2rem));
}

.details-tz-tech .tz-django-fs-detail {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgb(255 255 255 / 0.08);
}

/* ——— 3D Simülasyon (iOS SimulationSetupView / Simulation3DView) ——— */
.page.tz-sim-3d {
    /* .page ile aynı yatay genişlik; immersive blok aşağıda width sıfırlaması yapmaz */
    padding-left: 0;
    padding-right: 0;
}

/* Masaüstü padding ≥821 blokta; mobilde sıkı dikey dolgu */
@media (max-width: 820px) {
    body.tz-sim-3d-immersive main.page.tz-sim-3d {
        padding-top: 0.75rem;
        padding-bottom: 0.5rem;
    }
}

.tz-simulation {
    position: relative;
    min-height: calc(100dvh - 120px);
    padding: 0.75rem 0 1.25rem;
    overflow-x: hidden;
}

.tz-simulation__gradient {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(20, 20, 20, 0.55), rgba(0, 0, 0, 0.9));
}

.tz-simulation__alert {
    margin: 0.5rem 1rem;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    background: rgb(180 40 50 / 0.2);
    color: rgb(255 180 180 / 0.95);
    font-size: 0.82rem;
}

.tz-simulation__empty {
    text-align: center;
    color: rgb(255 255 255 / 0.4);
    padding: 2rem 1rem;
    font-size: 0.9rem;
}

/* Şehir chip’leri: ortada, satır kırarak — yatay scroll yok */
.tz-simulation__city-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 0.5rem 0.65rem;
    padding: 0.35rem 1rem 0.75rem;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.tz-simulation__race-scroll {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    justify-content: safe center;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 0.25rem 0.75rem 0.75rem;
    max-width: 100%;
    margin: 0 auto;
    min-height: 52px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.tz-sim-chip {
    flex: 0 0 auto;
    border: none;
    border-radius: 10px;
    padding: 0.55rem 1.05rem;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    background: rgb(255 255 255 / 0.1);
    color: #fff;
}

.tz-sim-chip.is-selected {
    background: rgb(34 211 238 / 0.95);
    color: #0a0a0a;
}

.tz-sim-race-pill {
    flex: 0 0 auto;
    border: none;
    border-radius: 10px;
    padding: 0.45rem 0.8rem;
    cursor: pointer;
    text-align: center;
}

.tz-sim-race-pill__line1 {
    font-size: 0.82rem;
    font-weight: 800;
}

.tz-sim-race-pill__line2 {
    font-size: 0.62rem;
    font-weight: 600;
    opacity: 0.85;
}

.tz-simulation__loading {
    text-align: center;
    color: rgb(255 255 255 / 0.45);
    font-size: 0.75rem;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.tz-simulation__spinner {
    width: 36px;
    height: 36px;
    margin: 0.5rem auto;
    border-radius: 50%;
    border: 3px solid rgb(34 211 238 / 0.2);
    border-top-color: rgb(34 211 238);
    animation: tz-sim-spin 0.8s linear infinite;
}

@keyframes tz-sim-spin {
    to {
        transform: rotate(360deg);
    }
}

.tz-simulation__main {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    transition: opacity 0.2s ease;
    box-sizing: border-box;
}

@media (min-width: 900px) {
    .tz-simulation__horse-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.tz-simulation__horses-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0 0.75rem 0.35rem;
    margin-top: 0.25rem;
}

.tz-simulation__horses-label {
    font-size: 0.65rem;
    font-weight: 800;
    color: rgb(255 255 255 / 0.38);
    letter-spacing: 0.06em;
}

.tz-simulation__horses-count {
    font-size: 0.62rem;
    font-weight: 800;
    color: rgb(34 211 238 / 0.9);
}

.tz-simulation__horse-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    padding: 0 0.75rem;
    max-height: min(600px, 52vh);
    overflow-y: auto;
    overflow-x: hidden;
}

.tz-sim-horse-card {
    position: relative;
    height: 65px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 0.2);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.tz-sim-horse-card__media {
    position: absolute;
    inset: 0;
    background: rgb(30 30 35 / 0.5);
}

.tz-sim-horse-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tz-sim-horse-card__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgb(0 0 0 / 0.95), rgb(0 0 0 / 0.7), transparent);
}

.tz-sim-horse-card__body {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    height: 100%;
    padding: 0 0.55rem;
}

.tz-sim-horse-card__no {
    width: 42px;
    text-align: center;
    font-size: 1.45rem;
    font-weight: 950;
    font-style: italic;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
}

.tz-sim-horse-card__text {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.tz-sim-horse-card__name {
    font-size: 0.56rem;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tz-sim-horse-card__jock {
    font-size: 0.55rem;
    font-weight: 600;
    color: rgb(255 255 255 / 0.72);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tz-simulation__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: calc(100% - 1.5rem);
    max-width: 520px;
    margin: 1.35rem auto 2.5rem;
    padding: 0.85rem 1rem;
    border: none;
    border-radius: 15px;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    color: rgb(34 211 238 / 0.85);
    background: rgb(255 255 255 / 0.08);
    backdrop-filter: blur(12px);
    box-shadow: 0 0 12px rgb(34 211 238 / 0.6);
}

.tz-simulation__cta:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    box-shadow: none;
}

.tz-simulation__cta--locked,
.tz-simulation__cta--locked:disabled {
    opacity: 1;
    color: rgb(168 168 176 / 0.95);
    background: rgb(48 50 58 / 0.92);
    border: 1px solid rgb(255 255 255 / 0.08);
    box-shadow: none;
    backdrop-filter: none;
    cursor: not-allowed;
}

.tz-simulation__cta--locked .tz-simulation__cta-ico {
    opacity: 0.92;
}

.tz-simulation__cta--pulse {
    animation: tz-sim-pulse 1s ease-in-out infinite alternate;
}

@keyframes tz-sim-pulse {
    from {
        transform: scale(1);
        box-shadow: 0 0 8px rgb(34 211 238 / 0.6);
    }
    to {
        transform: scale(1.03);
        box-shadow: 0 0 20px rgb(34 211 238 / 0.75);
    }
}

/* 3D sahne — Simulation3DView.swift (SceneKit HUD) */
.tz-sim3d {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    background: #0d0d1a;
    /* Canvas absolute inset:0 ile aynı kutu — altta boş siyah şerit kalmasın */
    height: clamp(280px, min(76vh, 680px), 820px);
    min-height: clamp(280px, min(76vh, 680px), 820px);
}

.tz-sim3d__canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    z-index: 1;
}

@media (min-width: 821px) {
    .tz-sim3d {
        height: clamp(260px, min(54vh, 520px), 640px);
        min-height: clamp(260px, min(54vh, 520px), 640px);
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 16px 36px rgb(0 0 0 / 0.4);
        box-sizing: border-box;
    }

    .tz-sim3d__header {
        padding: 10px 22px;
    }

    .tz-sim3d__top-board {
        padding: 0 18px 8px;
    }

    .tz-sim3d__bottom {
        padding: 0 22px 16px;
    }

    .tz-sim3d__top-board .tz-sim3d__board-wrap {
        max-height: min(240px, 34vh);
    }

    .tz-sim3d__board {
        max-height: min(240px, 34vh);
    }
}

.tz-sim3d__hud {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

.tz-sim3d__hud * {
    pointer-events: auto;
}

.tz-sim3d__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 12px 24px;
    background: linear-gradient(to bottom, rgb(0 0 0 / 0.72), rgb(0 0 0 / 0));
    position: relative;
    z-index: 52;
}

.tz-sim3d__head-block {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 0;
}

.tz-sim3d__bar {
    width: 4px;
    height: 24px;
    border-radius: 4px;
    background: rgb(34 211 238);
    flex-shrink: 0;
}

.tz-sim3d__titles {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.tz-sim3d__city {
    font-size: 0.875rem;
    font-weight: 950;
    line-height: 1.15;
    color: rgb(34 211 238);
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tz-sim3d__raceinfo {
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.2;
    color: rgb(255 255 255 / 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* HStack spacing 16: sıcaklık grubu | hava metni — iOS */
.tz-sim3d__weather {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    flex: 0 1 auto;
    font-size: 0.75rem;
    font-weight: 800;
    color: rgb(34 211 238);
    white-space: nowrap;
}

.tz-sim3d__temp-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tz-sim3d__ico-thermo {
    flex-shrink: 0;
    opacity: 0.95;
    color: rgb(34 211 238);
}

.tz-sim3d__hava-tr {
    font-size: 0.75rem;
    font-weight: 800;
    color: rgb(34 211 238);
    max-width: min(42vw, 220px);
    overflow: hidden;
    text-overflow: ellipsis;
}

.tz-sim3d__hud-center {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex: 0 1 auto;
    pointer-events: none;
}

.tz-sim3d__hud-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-width: 3.5rem;
}

.tz-sim3d__hud-pill-label {
    font-size: 0.4375rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: rgb(255 255 255 / 0.5);
    text-transform: uppercase;
}

.tz-sim3d__hud-pill-value {
    font-size: 0.8125rem;
    font-weight: 950;
    line-height: 1.2;
}

.tz-sim3d__hud-pill--derece .tz-sim3d__hud-pill-value {
    color: rgb(34 211 238);
}

.tz-sim3d__hud-pill--kalan .tz-sim3d__hud-pill-value {
    color: rgb(255 178 58);
}

.tz-sim3d__countdown {
    position: absolute;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    background: transparent;
    font-size: clamp(4rem, 18vw, 8rem);
    font-weight: 950;
    color: rgb(34 211 238);
    text-shadow:
        0 0 24px rgb(34 211 238 / 0.55),
        0 2px 12px rgb(0 0 0 / 0.85);
    pointer-events: none;
    user-select: none;
}

.tz-sim3d__countdown[hidden] {
    display: none !important;
}

.tz-sim3d__wrow-derece {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    color: rgb(34 211 238);
    margin-top: 2px;
}

.tz-sim3d__close {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.1);
    color: #fff;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.tz-sim3d__close:hover {
    background: rgb(255 255 255 / 0.16);
}

.tz-sim3d__close svg {
    display: block;
}

/* Üst: canlı sıra — şerit gölgesi yok; kartların dışı şeffaf */
.tz-sim3d__top-board {
    position: relative;
    z-index: 52;
    width: 100%;
    padding: 0 16px 10px;
    box-sizing: border-box;
    flex-shrink: 0;
    background: transparent;
}

.tz-sim3d__top-board .tz-sim3d__board-wrap {
    flex: 1 1 auto;
    min-width: 0;
    max-height: min(280px, 42vh);
    overflow: hidden;
}

.tz-sim3d__hud-spacer {
    flex: 1 1 auto;
    min-height: 0;
    pointer-events: none;
}

/* Alt: START VER / TEKRARLA + simülasyondan çıkış (kurulum) */
.tz-sim3d__bottom {
    margin-top: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 28px 24px 20px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 52;
    flex-wrap: wrap;
    /* Yalnızca kontrol şeridi — tüm sahneyi karartmaz */
    background: linear-gradient(to top, rgb(0 0 0 / 0.78) 0%, rgb(0 0 0 / 0.35) 55%, transparent 100%);
}

@media (max-width: 520px) {
    .tz-sim3d__header {
        padding: 10px 14px;
    }

    .tz-sim3d__top-board {
        padding: 0 12px 8px;
    }

    .tz-sim3d__bottom {
        padding: 0 14px 16px;
    }

    .tz-sim3d__play {
        flex: 1 1 auto;
        min-width: 0;
    }
}

.tz-sim3d__board {
    max-height: min(280px, 42vh);
    overflow-y: auto;
    overflow-x: hidden;
    padding-left: 8px;
    padding-right: 4px;
    -webkit-overflow-scrolling: touch;
}

.tz-sim3d__board--gap-loose .tz-sim3d-row {
    margin-bottom: 4px;
}

.tz-sim3d__board--gap-mid .tz-sim3d-row {
    margin-bottom: 2px;
}

.tz-sim3d__board--gap-tight .tz-sim3d-row {
    margin-bottom: 1px;
}

.tz-sim3d__board .tz-sim3d-row:last-child {
    margin-bottom: 0;
}

.tz-sim3d-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 180px;
    height: 40px;
    margin-bottom: 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 0.2);
    background: rgb(0 0 0 / 0.38);
    box-shadow: 0 2px 10px rgb(0 0 0 / 0.35);
}

.tz-sim3d-row--sm {
    height: 30px;
    margin-bottom: 0;
}

.tz-sim3d-row--xs {
    height: 22px;
    margin-bottom: 0;
    border-radius: 4px;
}

.tz-sim3d-row__bg {
    position: absolute;
    inset: 0;
}

.tz-sim3d-row__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tz-sim3d-row__coat {
    display: block;
    width: 100%;
    height: 100%;
    background: #444;
}

.tz-sim3d-row__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgb(0 0 0 / 0.95), rgb(0 0 0 / 0.65), transparent);
}

.tz-sim3d-row__rn {
    position: relative;
    z-index: 1;
    width: 14px;
    padding-left: 4px;
    font-size: 0.62rem;
    font-weight: 800;
    color: rgb(34 211 238);
}

.tz-sim3d-row--sm .tz-sim3d-row__rn {
    font-size: 0.55rem;
}

.tz-sim3d-row--xs .tz-sim3d-row__rn {
    font-size: 0.45rem;
    width: 10px;
}

.tz-sim3d-row__no {
    position: relative;
    z-index: 1;
    width: 26px;
    text-align: center;
    font-weight: 950;
    font-style: italic;
    color: #fff;
    font-size: 1.1rem;
    text-shadow: 1px 1px 1px #000;
}

.tz-sim3d-row--xs .tz-sim3d-row__no {
    font-size: 0.72rem;
    width: 18px;
}

.tz-sim3d-row__tx {
    position: relative;
    z-index: 1;
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.tz-sim3d-row__name {
    font-size: 0.72rem;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tz-sim3d-row--sm .tz-sim3d-row__name {
    font-size: 0.62rem;
}

.tz-sim3d-row--xs .tz-sim3d-row__name {
    font-size: 0.52rem;
}

.tz-sim3d-row__j {
    font-size: 0.55rem;
    color: rgb(255 255 255 / 0.65);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tz-sim3d__play {
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 180px;
    min-width: 180px;
    height: 44px;
    padding: 0 14px;
    border: none;
    border-radius: 999px;
    background: rgb(34 211 238);
    color: #000;
    font-weight: 950;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 4px 6px rgb(0 0 0 / 0.6);
    box-sizing: border-box;
}

.tz-sim3d__play--repeat {
    background: #fff !important;
    color: #000 !important;
    box-shadow: 0 4px 6px rgb(0 0 0 / 0.6);
}

.tz-sim3d__tamam {
    flex: 0 0 auto;
    min-width: 118px;
    height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgb(255 255 255 / 0.2);
    background: rgb(255 255 255 / 0.1);
    color: rgb(255 255 255 / 0.92);
    font-weight: 800;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-sizing: border-box;
}

.tz-sim3d__tamam:hover {
    background: rgb(255 255 255 / 0.16);
}

.tz-sim3d__tamam:focus-visible {
    outline: 2px solid rgb(34 211 238);
    outline-offset: 2px;
}

.tz-sim3d__gate {
    position: absolute;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1.5rem;
    background: #0d0d1a;
    color: rgb(255 255 255 / 0.75);
}

.tz-sim3d__gate[hidden] {
    display: none !important;
}

.tz-sim3d__gate-title {
    font-weight: 900;
    margin: 0 0 0.5rem;
}

.tz-sim3d__gate-msg {
    margin: 0 0 1rem;
    font-size: 0.88rem;
    color: rgb(255 255 255 / 0.45);
}

.tz-sim3d__gate-btn {
    display: inline-flex;
    padding: 0.6rem 1rem;
    border-radius: 12px;
    background: rgb(34 211 238);
    color: #111;
    font-weight: 900;
    text-decoration: none;
}

/* ——— Mobil portrait-mode engel katmanı — landscape zorunlu ——— */
.tz-sim3d__orient-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #0d0d1a;
    color: #fff;
    text-align: center;
    padding: 2rem;
    gap: 0.5rem;
}

.tz-sim3d__orient-overlay[hidden] { display: none !important; }

.tz-sim3d__orient-ico {
    width: 72px;
    height: 72px;
    color: rgb(34 211 238);
    margin-bottom: 1rem;
    animation: tz-orient-spin 2.8s ease-in-out infinite;
}

@keyframes tz-orient-spin {
    0%        { transform: rotate(0deg)   scale(1);    }
    30%, 60%  { transform: rotate(-90deg) scale(1.05); }
    90%, 100% { transform: rotate(0deg)   scale(1);    }
}

.tz-sim3d__orient-title {
    font-size: 1.25rem;
    font-weight: 950;
    color: rgb(34 211 238);
    margin: 0 0 0.25rem;
    letter-spacing: 0.02em;
}

.tz-sim3d__orient-msg {
    font-size: 0.875rem;
    color: rgb(255 255 255 / 0.6);
    margin: 0;
    max-width: 280px;
}

/* ——— Photo Finish overlay — iOS winnerOverlay portu ——— */
.tz-sim3d__winner {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgb(0 0 0 / 0.93);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.tz-sim3d__winner[hidden] { display: none !important; }

.tz-sim3d__winner-inner {
    width: 100%;
    max-width: 480px;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding: 28px 0 36px;
    box-sizing: border-box;
}

.tz-sim3d__winner-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding-bottom: 20px;
}

.tz-sim3d__winner-label {
    font-size: 0.75rem;
    font-weight: 950;
    color: rgb(34 211 238);
    letter-spacing: 4px;
}

.tz-sim3d__winner-sub {
    font-size: 0.625rem;
    font-weight: 600;
    color: rgb(255 255 255 / 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    padding: 0 1rem;
}

.tz-sim3d__winner-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 20px;
    flex: 1 1 auto;
}

/* Sıra kartı */
.tz-sim3d__wrow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 24px;
    background: rgb(255 255 255 / 0.04);
    border-radius: 12px;
}

.tz-sim3d__wrow--first {
    padding: 10px 24px;
    background: rgb(34 211 238 / 0.12);
    border: 1px solid rgb(34 211 238 / 0.4);
}

.tz-sim3d__wrow-medal {
    font-size: 1.125rem;
    width: 36px;
    flex-shrink: 0;
    text-align: center;
}

.tz-sim3d__wrow--first .tz-sim3d__wrow-medal {
    font-size: 1.75rem;
}

/* Jersey daire (iOS jerseyImageView) */
.tz-sim3d__wrow-jersey {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgb(128 128 128 / 0.5);
    flex-shrink: 0;
    background: #333;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tz-sim3d__wrow--first .tz-sim3d__wrow-jersey {
    width: 52px;
    height: 52px;
}

.tz-sim3d__wrow-jersey img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tz-sim3d__wrow-jersey-ph {
    display: block;
    width: 100%;
    height: 100%;
    background: #444;
}

.tz-sim3d__wrow-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    gap: 2px;
}

.tz-sim3d__wrow-noname {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.tz-sim3d__wrow-no {
    font-size: 0.9375rem;
    font-weight: 950;
    font-style: italic;
    color: #fff;
    flex-shrink: 0;
}

.tz-sim3d__wrow--first .tz-sim3d__wrow-no {
    font-size: 1.375rem;
    color: rgb(34 211 238);
}

.tz-sim3d__wrow-name {
    font-size: 0.75rem;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.tz-sim3d__wrow--first .tz-sim3d__wrow-name {
    font-size: 1rem;
}

.tz-sim3d__wrow-jockey {
    font-size: 0.5625rem;
    font-weight: 500;
    color: rgb(255 255 255 / 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tz-sim3d__wrow--first .tz-sim3d__wrow-jockey {
    font-size: 0.6875rem;
}

.tz-sim3d__winner-tamam {
    display: block;
    width: calc(100% - 80px);
    margin: 24px auto 0;
    padding: 16px;
    border: none;
    border-radius: 999px;
    background: #fff;
    color: #000;
    font-weight: 950;
    font-size: 0.9375rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    flex-shrink: 0;
}

.tz-sim3d__winner-tamam:hover {
    background: rgb(230 230 230);
}

/* Kompakt layout — küçük ekran (portrait mobil) */
@media (max-width: 520px) {
    .tz-sim3d__winner-inner {
        padding: 16px 0 20px;
    }

    .tz-sim3d__winner-head {
        padding-bottom: 12px;
    }

    .tz-sim3d__winner-list {
        gap: 6px;
        padding: 0 10px;
    }

    .tz-sim3d__wrow {
        padding: 5px 14px;
        border-radius: 10px;
        gap: 8px;
    }

    .tz-sim3d__wrow--first {
        padding: 8px 14px;
    }

    .tz-sim3d__wrow-medal {
        font-size: 0.875rem;
        width: 26px;
    }

    .tz-sim3d__wrow--first .tz-sim3d__wrow-medal {
        font-size: 1.35rem;
    }

    .tz-sim3d__wrow-jersey {
        width: 30px;
        height: 30px;
    }

    .tz-sim3d__wrow--first .tz-sim3d__wrow-jersey {
        width: 42px;
        height: 42px;
    }

    .tz-sim3d__winner-tamam {
        width: calc(100% - 40px);
        padding: 13px;
        margin-top: 14px;
        font-size: 0.875rem;
    }
}

/* ——— Mobil landscape simülasyon: alt tab gizle, sahneyi büyüt ——— */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
    body.tz-sim-3d-immersive .tab-nav {
        display: none !important;
    }

    body.tz-sim-3d-immersive main.page.tz-sim-3d {
        padding-top: 0;
        padding-bottom: 0;
    }

    body.tz-sim-3d-immersive .tz-sim3d {
        height: calc(100dvh - 76px);
        min-height: calc(100dvh - 76px);
        max-height: none;
        border-radius: 0;
        box-shadow: none;
    }
}

/* ——— Landscape mobil: canlı sıra + FOTO FİNİŞ kartlarını ekrana tam sıgdır ——— */
/* Telefon landscape → yükseklik ≤520px, genişlik >yükseklik */
@media (orientation: landscape) and (max-height: 520px) {

    /* Canlı sıra (leaderboard) — 5 kart görünür, scroll olmadan */
    .tz-sim3d-row {
        height: 27px;
        border-radius: 5px;
    }

    .tz-sim3d-row--sm {
        height: 24px;
    }

    .tz-sim3d-row--xs {
        height: 20px;
        border-radius: 3px;
    }

    .tz-sim3d-row__no {
        font-size: 0.92rem;
    }

    .tz-sim3d-row__name {
        font-size: 0.58rem;
    }

    .tz-sim3d-row__j {
        font-size: 0.42rem;
    }

    /* Top-board: flex-shrink: 1 — sıkıştığında küçülebilsin, iç board scroll eder */
    .tz-sim3d__top-board {
        flex: 0 1 auto;
        min-height: 0;
        padding: 0 10px 4px;
        overflow: hidden;
    }

    .tz-sim3d__top-board .tz-sim3d__board-wrap {
        max-height: none;
        min-height: 0;
        overflow: hidden;
    }

    /* Board: header (≈46px) + controls (≈60px) + header-top-pad (≈24px) = ~130px sabit */
    .tz-sim3d__board {
        max-height: clamp(80px, calc(100dvh - 240px), 130px);
    }

    /* Bottom kontroller her zaman görünür — flex sona dayasın */
    .tz-sim3d__bottom {
        flex-shrink: 0;
    }

    /* FOTO FİNİŞ overlay — tüm 5 satır tek ekrana sığsın */
    .tz-sim3d__winner-inner {
        padding: 8px 0 10px;
        justify-content: space-between;
    }

    .tz-sim3d__winner-head {
        padding-bottom: 6px;
    }

    .tz-sim3d__winner-label {
        font-size: 0.6rem;
        letter-spacing: 3px;
    }

    .tz-sim3d__winner-sub {
        font-size: 0.48rem;
    }

    .tz-sim3d__winner-list {
        gap: 3px;
        padding: 0 8px;
    }

    .tz-sim3d__wrow {
        padding: 3px 10px;
        border-radius: 7px;
        gap: 7px;
    }

    .tz-sim3d__wrow--first {
        padding: 5px 10px;
    }

    .tz-sim3d__wrow-medal {
        font-size: 0.72rem;
        width: 22px;
    }

    .tz-sim3d__wrow--first .tz-sim3d__wrow-medal {
        font-size: 1.1rem;
        width: 28px;
    }

    .tz-sim3d__wrow-jersey {
        width: 26px;
        height: 26px;
    }

    .tz-sim3d__wrow--first .tz-sim3d__wrow-jersey {
        width: 36px;
        height: 36px;
    }

    .tz-sim3d__wrow-no {
        font-size: 0.78rem;
    }

    .tz-sim3d__wrow--first .tz-sim3d__wrow-no {
        font-size: 1.05rem;
    }

    .tz-sim3d__wrow-name {
        font-size: 0.62rem;
    }

    .tz-sim3d__wrow--first .tz-sim3d__wrow-name {
        font-size: 0.78rem;
    }

    .tz-sim3d__wrow-jockey {
        font-size: 0.46rem;
    }

    .tz-sim3d__wrow--first .tz-sim3d__wrow-jockey {
        font-size: 0.52rem;
    }

    .tz-sim3d__winner-tamam {
        width: calc(100% - 32px);
        padding: 9px;
        margin-top: 8px;
        font-size: 0.78rem;
    }
}

/* --- Kayıtlı kuponlar (liste + detay — site üst çubuğu kullanılır; duble topbar yok) --- */
.tz-saved-ios-page.page {
    /* Genişlik: standart `.page` (min(1180px, calc(100% - 2rem))). */
    background: #000;
    color: #fff;
    min-height: 60vh;
}

.tz-saved-ios-wrap {
    padding-bottom: 2rem;
}

.tz-saved-ios-head {
    padding: 0.05rem 0 0;
    max-width: 100%;
    box-sizing: border-box;
}

.tz-saved-ios-divider {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0 0.1rem;
    max-width: 100%;
    box-sizing: border-box;
}

.tz-saved-ios-divider-line {
    flex: 1;
    height: 1px;
    background: rgba(34, 211, 238, 0.28);
    min-width: 0;
}

.tz-saved-ios-divider-text {
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    color: rgba(34, 211, 238, 0.72);
    white-space: nowrap;
}

.tz-saved-ios-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    max-width: 100%;
    box-sizing: border-box;
}

.tz-saved-ios-item {
    list-style: none;
    max-width: 100%;
    min-width: 0;
}

/* iOS List: sola kaydırınca kırmızı Sil (RecordedCoupon swipe). */
.tz-saved-swipe-row {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    max-width: 100%;
    min-width: 0;
    isolation: isolate;
}

.tz-saved-swipe-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    background: transparent;
}

.tz-saved-trash-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    color: rgb(248 113 113);
    background: rgba(0, 0, 0, 0.55);
    box-sizing: border-box;
}

.tz-saved-trash-btn:hover {
    color: rgb(252 165 165);
    background: rgba(0, 0, 0, 0.62);
}

.tz-saved-trash-btn:focus-visible {
    outline: 2px solid rgb(34 211 238);
    outline-offset: 2px;
}

.tz-saved-trash-ico {
    display: block;
    flex-shrink: 0;
}

.tz-saved-swipe-del {
    width: 72px;
    flex-shrink: 0;
}

.tz-saved-desktop-trash {
    display: none;
}

.tz-saved-swipe-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    touch-action: pan-y pinch-zoom;
    transition: transform 0.22s ease;
    will-change: transform;
}

.tz-saved-ios-card {
    position: relative;
    display: block;
    width: 100%;
    min-height: 90px;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.14);
    max-width: 100%;
    isolation: isolate;
    background: #060606;
    box-shadow: 0 4px 12px rgba(37, 217, 239, 0.18);
}

.tz-saved-ios-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--card-img) center / cover no-repeat;
    opacity: 0.92;
    pointer-events: none;
}

.tz-saved-ios-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.45) 42%, rgba(0, 0, 0, 0.16) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.52) 100%);
}

.tz-saved-ios-card--winning {
    border-width: 3px;
    border-color: rgba(34, 197, 94, 0.72);
}

.tz-saved-ios-card--losing {
    border-width: 3px;
    border-color: rgba(239, 68, 68, 0.75);
}

/* Sonuç bekleniyor — Android SavedCouponsListView cyan pulse (700ms reverse) */
@keyframes tz-saved-pending-pulse {
    0%, 100% { border-color: rgba(37, 217, 239, 0.28); }
    50% { border-color: rgba(37, 217, 239, 0.88); }
}
.tz-saved-ios-card--pending {
    border-width: 3px;
    border-color: rgba(37, 217, 239, 0.55);
    animation: tz-saved-pending-pulse 1.4s ease-in-out infinite;
}

.tz-saved-ios-card-main {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    min-height: 90px;
    padding: 0.45rem 0.75rem 0.45rem 0.7rem;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.22) 55%,
        transparent 92%
    );
    max-width: 100%;
    box-sizing: border-box;
}

.tz-saved-ios-card-left {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.tz-saved-ios-city {
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tz-saved-ios-bet {
    font-size: 0.62rem;
    font-weight: 700;
    color: rgba(34, 211, 238, 0.92);
    letter-spacing: 0.04em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tz-saved-ios-time {
    font-size: 0.62rem;
    font-weight: 700;
    color: rgba(255, 152, 0, 0.8);
}

.tz-saved-ios-payout {
    margin-top: 0.15rem;
    font-size: 0.68rem;
    font-weight: 800;
    color: rgba(255, 174, 66, 0.96);
}

.tz-saved-ios-card-right {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.08rem;
    text-align: right;
}

.tz-saved-ios-amt {
    font-size: 0.95rem;
    font-weight: 800;
    color: rgba(255, 174, 66, 0.97);
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.tz-saved-ios-misli {
    font-size: 0.6rem;
    font-weight: 700;
    color: rgba(34, 211, 238, 0.9);
}

.tz-saved-ios-chev {
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.32);
    line-height: 1;
}

.tz-saved-ios-empty.card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin: 2rem 0.35rem;
    padding: 2.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    border-radius: 16px;
}

.tz-saved-empty-icon {
    color: rgba(255, 255, 255, 0.2);
    margin-bottom: 0.25rem;
}

.tz-saved-empty-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.tz-saved-empty-desc {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.6;
    max-width: 320px;
    margin: 0;
}

.tz-saved-empty-desc strong {
    color: rgba(255, 255, 255, 0.7);
}

.tz-saved-empty-btn {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.6rem 1.5rem;
    background: #00e5ff;
    color: #000;
    font-weight: 700;
    font-size: 0.875rem;
    border-radius: 999px;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: opacity 0.15s;
}

.tz-saved-empty-btn:hover {
    opacity: 0.85;
}

@media (min-width: 900px) {
    /* Liste: masaüstü satır düzeni — üst boşluk 821px kompakt hizasında */
    .page.tz-saved-ios-page:not(.tz-saved-detail-page) .tz-saved-ios-head {
        margin-bottom: 0.58rem;
    }

    .tz-saved-swipe-row {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        border-radius: 14px;
    }

    /* Kalın yeşil/kırmızı çerçeve tüm satırı (çöp sütunu dahil) sarar; sağ köşeler sol ile aynı yuvarlak. */
    .tz-saved-swipe-row:has(.tz-saved-ios-card--winning),
    .tz-saved-swipe-row:has(.tz-saved-ios-card--losing),
    .tz-saved-swipe-row:has(.tz-saved-ios-card--pending) {
        border-style: solid;
        border-width: 3px;
    }

    .tz-saved-swipe-row:has(.tz-saved-ios-card--winning) {
        border-color: rgba(34, 197, 94, 0.72);
    }

    .tz-saved-swipe-row:has(.tz-saved-ios-card--losing) {
        border-color: rgba(239, 68, 68, 0.75);
    }

    .tz-saved-swipe-row:has(.tz-saved-ios-card--pending) {
        border-color: rgba(37, 217, 239, 0.55);
        animation: tz-saved-pending-pulse 1.4s ease-in-out infinite;
    }

    .tz-saved-swipe-row:has(.tz-saved-ios-card--winning) .tz-saved-ios-card,
    .tz-saved-swipe-row:has(.tz-saved-ios-card--losing) .tz-saved-ios-card,
    .tz-saved-swipe-row:has(.tz-saved-ios-card--pending) .tz-saved-ios-card {
        border: none;
        box-shadow: none;
        border-radius: 0;
    }

    .tz-saved-swipe-bg {
        display: none !important;
    }

    .tz-saved-swipe-panel {
        flex: 1 1 auto;
        min-width: 0;
        transform: none !important;
        touch-action: auto;
        will-change: auto;
    }

    .tz-saved-desktop-trash {
        display: inline-flex !important;
        flex: 0 0 58px;
        width: 58px;
        align-self: stretch;
        border-radius: 0;
        border-left: 1px solid rgba(255, 255, 255, 0.12);
    }

    .tz-saved-ios-card {
        min-height: 102px;
        border-radius: 0;
    }

    .tz-saved-ios-card-main {
        min-height: 102px;
        padding: 0.55rem 0.9rem 0.55rem 0.82rem;
    }

    .tz-saved-ios-city {
        font-size: 1.05rem;
    }

    .tz-saved-ios-bet {
        font-size: 0.68rem;
    }

    .tz-saved-ios-time {
        font-size: 0.62rem;
    }

    .tz-saved-ios-amt {
        font-size: 1.08rem;
    }

    .tz-saved-ios-misli {
        font-size: 0.64rem;
    }

    .tz-saved-ios-divider-text {
        font-size: 0.82rem;
    }
}

.tz-sd-page {
    max-width: min(1200px, 100%);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.tz-sd-head {
    padding: 0.1rem 0.45rem 0.35rem;
    max-width: 100%;
    box-sizing: border-box;
}

.tz-sd-crumb {
    display: inline-flex;
    align-items: center;
    font-size: 0.86rem;
    font-weight: 750;
    color: rgb(34 211 238);
    text-decoration: none;
    opacity: 0.95;
}

.tz-sd-crumb:hover {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tz-sd-meta2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.65rem;
    padding: 0.4rem 0.55rem 0.55rem;
    max-width: 100%;
    box-sizing: border-box;
}

.tz-sd-meta2 > div {
    min-width: 0;
}

.tz-sd-meta-k {
    display: block;
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.38);
    text-transform: uppercase;
    margin-bottom: 0.12rem;
}

.tz-sd-meta-v {
    font-size: 0.74rem;
    font-weight: 750;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.3;
}

.tz-sd-split {
    /* Mobil: iki kolon %50-%50 (gap sonrası eşit 1fr). ≥721px: KUPON sütunu genişler. */
    --tz-sd-pane-h: min(52dvh, 400px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto var(--tz-sd-pane-h);
    gap: 0.48rem;
    align-items: stretch;
    padding: 0.2rem 0.38rem 1.35rem;
    max-width: 100%;
    box-sizing: border-box;
}

/* Yarış özeti: üst satır tam genişlik — bilgi en sola, saat en sağa; alt satır atlar | KUPON */
.tz-sd-split > .tz-sd-cell--race-hd.tz-sd-race-hd {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 0;
    justify-self: stretch;
    box-sizing: border-box;
}

.tz-sd-split > .tz-sd-cell--spacer-top {
    display: none;
}

.tz-sd-split > .tz-sd-cell--horses.tz-sd-horses {
    grid-column: 1;
    grid-row: 2;
    height: 100%;
    min-height: 0;
    max-height: none;
    align-self: stretch;
}

.tz-sd-split > .tz-sd-cell--kupon.tz-sd-kupon {
    grid-column: 2;
    grid-row: 2;
    height: 100%;
    min-height: 0;
    max-height: none;
    align-self: stretch;
}

/* Kayıtlı kupon detay: sayfa/split dolgu ve sol listede sabit 9 at yüksekliği (aşağıda) */
.page.tz-saved-ios-page.tz-saved-detail-page {
    display: flex;
    flex-direction: column;
}

.page.tz-saved-detail-page .tz-sd-page {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
}

.page.tz-saved-detail-page .tz-sd-head {
    flex-shrink: 0;
}

.page.tz-saved-detail-page [data-tz-saved-detail-mount] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    width: 100%;
}

.page.tz-saved-detail-page [data-tz-saved-detail-mount] > .tz-sd-meta2,
.page.tz-saved-detail-page [data-tz-saved-detail-mount] > .tz-ticket-legs-wrap {
    flex-shrink: 0;
}

.page.tz-saved-detail-page [data-tz-saved-detail-mount] > .tz-sd-split {
    --tz-sd-slot: 3.12rem;
    --tz-sd-list-gap: 0.38rem;
    flex: 1 1 auto;
    min-height: 0;
    align-self: stretch;
    grid-template-rows: auto minmax(0, 1fr);
    padding-bottom: 0.35rem;
    overflow: hidden;
}

/* Kayıtlı detay — sol 9 at ile aynı yükseklikte KUPON; tz-sd-kpon-foot 9. satır altıyla hizalı; ayak sıraları taşarsa .tz-sd-kpon-legs kayar */
.page.tz-saved-detail-page .tz-sd-horses {
    box-sizing: border-box;
    height: auto;
    align-self: start;
    justify-self: stretch;
    width: 100%;
    min-height: 0;
    max-height: min(
        100%,
        calc(9 * (var(--tz-sd-slot) + 2px) + 8 * var(--tz-sd-list-gap))
    );
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
}

.page.tz-saved-detail-page .tz-sd-kupon {
    position: relative;
    top: auto;
    align-self: start;
    justify-self: stretch;
    width: 100%;
    box-sizing: border-box;
    height: min(
        100%,
        calc(9 * (var(--tz-sd-slot) + 2px) + 8 * var(--tz-sd-list-gap))
    );
    max-height: min(
        100%,
        calc(9 * (var(--tz-sd-slot) + 2px) + 8 * var(--tz-sd-list-gap))
    );
    min-height: 0;
}

@media (min-width: 821px) {
    .page.tz-saved-ios-page.tz-saved-detail-page {
        min-height: calc(100vh - 9.85rem - env(safe-area-inset-top, 0px));
        min-height: calc(100dvh - 9.85rem - env(safe-area-inset-top, 0px));
    }
}

@media (max-width: 820px) {
    .page.tz-saved-detail-page [data-tz-saved-detail-mount] > .tz-sd-split {
        --tz-sd-slot: 3.35rem;
        --tz-sd-list-gap: 0.42rem;
    }

    .page.tz-saved-ios-page.tz-saved-detail-page {
        min-height: calc(100vh - 4.6rem - env(safe-area-inset-top, 0px));
        min-height: calc(100svh - 4.6rem - env(safe-area-inset-top, 0px));
        min-height: calc(100dvh - 4.6rem - env(safe-area-inset-top, 0px));
    }
}

@media (max-width: 400px) {
    .page.tz-saved-detail-page [data-tz-saved-detail-mount] > .tz-sd-split {
        --tz-sd-slot: 3.2rem;
    }
}

.tz-sd-cell {
    min-width: 0;
}

.tz-sd-race-hd {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    margin-bottom: 0.45rem;
}

.tz-sd-race-bilgi {
    margin: 0;
    padding: 0;
    font-size: 0.72rem;
    font-weight: 650;
    color: rgba(255, 255, 255, 0.78);
    flex: 1 1 0;
    min-width: 0;
    line-height: 1.25;
    text-align: start;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tz-sd-race-saat {
    flex: 0 0 auto;
    text-align: end;
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}

.tz-sd-horses {
    display: flex;
    flex-direction: column;
    gap: 0.38rem;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 2px;
}

.tz-sd-horse {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto 22px;
    align-items: center;
    gap: 0.35rem;
    padding: 0.38rem 0.45rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.28);
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Program program-horse-row / .horse-forma ile aynı mantık: forma sol blok arka plan + maske */
.tz-sd-horse-forma {
    position: absolute;
    inset: 0 auto 0 0;
    width: 42%;
    max-width: 8.75rem;
    z-index: 0;
    pointer-events: none;
    border-radius: 11px 0 0 11px;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.4) 55%, transparent 98%),
        var(--forma-img, none) center / cover no-repeat;
    opacity: 0.9;
    -webkit-mask-image: linear-gradient(90deg, #000 50%, transparent);
    mask-image: linear-gradient(90deg, #000 50%, transparent);
}

.tz-sd-horse-forma--missing {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, transparent 75%),
        linear-gradient(140deg, #2c2c36 0%, #141418 55%, #101014 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent);
    mask-image: linear-gradient(90deg, #000 40%, transparent);
    opacity: 0.65;
}

.tz-sd-horse.is-selected {
    border: 2px solid rgba(34, 211, 238, 0.65);
    background: rgba(34, 211, 238, 0.06);
}

.tz-sd-horse-no,
.tz-sd-horse-mid,
.tz-sd-agf,
.tz-sd-check {
    position: relative;
    z-index: 1;
}

.tz-sd-horse-no {
    font-size: 1rem;
    font-weight: 900;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}

.tz-sd-horse-mid {
    min-width: 0;
}

.tz-sd-horse-ad {
    font-size: 0.72rem;
    font-weight: 800;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.88);
}

.tz-sd-jk {
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.48);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.tz-sd-agf {
    font-size: 0.72rem;
    font-weight: 800;
    color: rgba(255, 174, 66, 0.95);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

.tz-sd-check {
    color: rgb(34 211 238);
    font-weight: 900;
    font-size: 0.85rem;
}

.tz-sd-kupon {
    position: sticky;
    top: 5.5rem;
    border-radius: 14px;
    border: 1px solid rgba(34, 211, 238, 0.15);
    background: rgba(0, 0, 0, 0.35);
    padding: 0.62rem 0.58rem 0.72rem;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tz-sd-kupon-title {
    font-size: 0.88rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    color: rgba(34, 211, 238, 0.85);
    margin: 0 auto 0.48rem;
    flex-shrink: 0;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.tz-sd-kpon-legs {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.tz-sd-kleg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    flex-wrap: wrap;
    padding: 0.35rem 0.45rem;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.2);
    font-weight: 800;
    font-size: 0.78rem;
}

button.tz-sd-kleg {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    margin: 0;
    cursor: pointer;
    width: 100%;
    text-align: start;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease;
}

button.tz-sd-kleg:active {
    filter: brightness(1.06);
}

.tz-sd-kleg:focus-visible {
    outline: 2px solid rgb(34 211 238);
    outline-offset: 2px;
}

.tz-sd-kleg.is-won {
    border-color: rgba(34, 197, 94, 0.65);
}

.tz-sd-kleg.is-lost {
    border-color: rgba(239, 68, 68, 0.65);
}

.tz-sd-kleg.is-pending {
    border-color: rgba(255, 255, 255, 0.15);
    border-width: 1px;
}

/* Seçili koşu satırı (üst sekme seçimi ile senkron). */
.tz-sd-kleg.is-sd-leg-active {
    background-color: rgb(34 211 238 / 0.5);
    border-color: rgb(34 211 238 / 0.55);
}

.tz-sd-kleg.is-sd-leg-active.is-won {
    border-color: rgba(34, 197, 94, 0.85);
}

.tz-sd-kleg.is-sd-leg-active.is-lost {
    border-color: rgba(239, 68, 68, 0.88);
}

.tz-sd-kleg-nums {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.08rem;
    min-width: 0;
}

.tz-sd-kleg-no {
    color: rgba(255, 255, 255, 0.88);
}

.tz-sd-kleg-no--hit {
    color: rgba(255, 174, 66, 0.98);
}

.tz-sd-kleg-sep {
    color: rgba(255, 255, 255, 0.35);
    font-weight: 700;
}

.tz-sd-kleg-actual {
    color: rgba(239, 68, 68, 0.95);
    font-weight: 900;
    flex-shrink: 0;
}

.tz-sd-kpon-foot {
    margin-top: 0.55rem;
    padding-top: 0.45rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: grid;
    gap: 0.35rem;
    font-size: 0.74rem;
    flex-shrink: 0;
}

.tz-sd-kpon-foot > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.tz-sd-kpon-foot span {
    color: rgba(255, 255, 255, 0.52);
}

.tz-sd-kpon-foot strong {
    color: rgba(255, 255, 255, 0.92);
}

.tz-sd-tutar {
    color: rgba(255, 174, 66, 0.98) !important;
    font-size: 1rem !important;
}

.tz-sd-fallback {
    margin: 0.65rem 0.35rem;
}

.tz-sd-fallback-city {
    font-size: 1.25rem;
    font-weight: 900;
    margin: 0 0 0.35rem;
}

.tz-sd-fallback-bet {
    color: rgb(34 211 238);
    font-weight: 800;
    margin: 0 0 0.5rem;
}

.tz-sd-fallback-note {
    margin: 1rem 0 0.45rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
}

.tz-sd-fallback-legs {
    margin: 0;
    padding: 0 0 0 1rem;
}

.tz-sd-fallback-legs li {
    margin: 0.25rem 0;
}

.tz-sd-fallback-ix {
    color: rgba(255, 255, 255, 0.45);
    font-weight: 700;
}

.tz-sd-fallback-sum {
    margin-top: 1rem;
    display: grid;
    gap: 0.35rem;
}

.tz-sd-fallback-sum > div {
    display: flex;
    justify-content: space-between;
}

@media (min-width: 480px) {
    .tz-sd-split {
        --tz-sd-pane-h: min(53dvh, 440px);
        gap: 0.62rem;
        padding-left: 0.45rem;
        padding-right: 0.45rem;
    }
}

@media (min-width: 721px) {
    .tz-sd-split {
        --tz-sd-pane-h: min(53vh, 470px);
        grid-template-rows: auto var(--tz-sd-pane-h);
        grid-template-columns: minmax(0, 1fr) minmax(260px, 350px);
        gap: 0.85rem;
        padding: 0.25rem 0.45rem 1.5rem;
    }
}

@media (min-width: 1000px) {
    .tz-sd-split {
        --tz-sd-pane-h: min(55vh, 530px);
        grid-template-rows: auto var(--tz-sd-pane-h);
        grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
        gap: 1.15rem;
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }

    .tz-sd-meta2 {
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }

    .tz-sd-meta-v {
        font-size: 0.84rem;
    }

    .tz-sd-race-bilgi {
        font-size: 0.8rem;
    }

    .tz-sd-kupon {
        padding: 0.78rem 0.72rem 0.88rem;
    }

    .tz-sd-kupon-title {
        font-size: 0.98rem;
        letter-spacing: 0.22em;
        margin-bottom: 0.52rem;
    }

    .page.tz-saved-detail-page [data-tz-saved-detail-mount] > .tz-sd-split {
        --tz-sd-slot: 3.55rem;
    }

    .tz-sd-horse {
        padding: 0.6rem 0.58rem;
        gap: 0.48rem;
        min-height: 3.55rem;
    }

    .tz-ticket-legs-wrap {
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }
}

@media (max-width: 720px) {
    .tz-sd-kleg {
        font-size: 0.65rem;
        padding: 0.3rem 0.34rem;
        gap: 0.28rem;
    }

    button.tz-sd-kleg {
        font-size: inherit;
    }

    .tz-sd-kupon {
        padding: 0.42rem 0.36rem 0.54rem;
    }

    .tz-sd-kupon-title {
        font-size: 0.78rem;
        letter-spacing: 0.2em;
        margin-bottom: 0.4rem;
    }

    .tz-sd-kpon-foot {
        font-size: 0.62rem;
        gap: 0.28rem;
        margin-top: 0.45rem;
        padding-top: 0.38rem;
    }

    .tz-sd-tutar {
        font-size: 0.88rem !important;
    }

    .tz-sd-horses {
        gap: 0.42rem;
    }

    .tz-sd-horse {
        padding: 0.56rem 0.45rem;
        gap: 0.4rem;
        min-height: 3.35rem;
        grid-template-columns: 42px minmax(0, 1fr) auto 22px;
    }

    .tz-sd-horse-no {
        font-size: 1.05rem;
    }

    .tz-sd-horse-ad {
        font-size: 0.76rem;
    }

    .tz-sd-jk {
        font-size: 0.62rem;
    }

    .tz-sd-agf {
        font-size: 0.78rem;
    }

    .tz-sd-check {
        font-size: 0.92rem;
    }
}

@media (max-width: 400px) {
    .tz-sd-horse {
        gap: 0.3rem;
        padding: 0.52rem 0.34rem;
        min-height: 3.2rem;
        grid-template-columns: 36px minmax(0, 1fr) auto 20px;
    }

    .tz-sd-horse-forma {
        max-width: 6.25rem;
        width: 48%;
    }

    .tz-sd-horse-no {
        font-size: 0.98rem;
    }

    .tz-sd-horse-ad {
        font-size: 0.7rem;
    }

    .tz-sd-jk {
        font-size: 0.58rem;
    }

    .tz-sd-agf {
        font-size: 0.72rem;
    }

    .tz-sd-check {
        font-size: 0.86rem;
    }
}

/* ─── 7.4 BANKO / GÜÇLÜ Tier Animasyonları ─────────────────────────────── */
@keyframes tz-banko-pulse {
    0%, 100% {
        box-shadow: 0 0 18px rgba(255, 56, 56, 0.18), 0 10px 28px rgba(0, 0, 0, 0.28);
    }
    50% {
        box-shadow: 0 0 28px rgba(255, 56, 56, 0.55), 0 0 10px rgba(255, 56, 56, 0.3),
                    0 10px 28px rgba(0, 0, 0, 0.28);
    }
}

@keyframes tz-guclu-shimmer {
    0%, 100% {
        border-color: rgba(255, 214, 40, 0.62);
        box-shadow: 0 0 16px rgba(255, 214, 40, 0.12);
    }
    50% {
        border-color: rgba(255, 174, 66, 0.88);
        box-shadow: 0 0 22px rgba(255, 174, 66, 0.26);
    }
}

.tz-horse-card.tier-banko {
    animation: tz-banko-pulse 2.4s ease-in-out infinite;
}

.tz-horse-card.tier-guclu {
    animation: tz-guclu-shimmer 3.2s ease-in-out infinite;
}

/* ─── 7.2 AGF/Muhtemeller Satır Sweep (auto-refresh) ───────────────────── */
@keyframes tz-odds-sweep-anim {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.tz-odds-flash {
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 214, 40, 0.32) 40%,
        rgba(255, 255, 255, 0.18) 50%,
        rgba(255, 214, 40, 0.32) 60%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: tz-odds-sweep-anim 0.75s ease-in-out forwards;
}

/* ─── 7.5 At Detayı Inline Video Player ────────────────────────────────── */
.tz-horse-video {
    display: block;
    width: 100%;
    max-width: 280px;
    border-radius: 8px;
    background: #000;
    margin: 0 auto;
}

.tz-video-cell {
    min-width: 96px;
    text-align: center;
}

/* ─── 12. Fotofinish Inline Dialog ─────────────────────────────────────── */
.tz-foto-btn {
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
}

.tz-foto-dialog {
    border: 1px solid rgba(37, 217, 239, 0.25);
    border-radius: 16px;
    background: #07090f;
    color: #fff;
    padding: 0;
    width: min(92vw, 680px);
    max-width: 92vw;
    max-height: 90dvh;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.72);
}

.tz-foto-dialog::backdrop {
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.tz-foto-dialog-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 90dvh;
}

.tz-foto-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.tz-foto-dialog-label {
    font-size: 0.8rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.72);
    letter-spacing: 0.02em;
}

.tz-foto-dialog-close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tz-foto-dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.tz-foto-frame {
    display: block;
    width: 100%;
    height: min(56dvh, 520px);
    border: none;
    background: #000;
}

.tz-foto-dialog-foot {
    padding: 0.55rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    text-align: right;
}

.tz-foto-extlink {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(37, 217, 239, 0.82);
    text-decoration: none;
}

.tz-foto-extlink:hover {
    color: var(--cyan);
}

/* ===========================================================================
   Kupon Sihirbazı — MagicView portu (/kupon/sihirbaz/)
   =========================================================================== */
.tz-magic-page.page {
    max-width: 560px;
    margin: 0 auto;
    padding: 0.75rem 0.9rem 5.5rem;
}

.tz-magic {
    position: relative;
    color: var(--text);
}

/* `hidden` attribute, display:flex/grid tanımlı öğelerde de gizlesin
   (yazar display kuralı UA [hidden]{display:none}'ı ezerdi) */
.tz-magic [hidden],
.tz-magic[hidden] { display: none !important; }

/* ── Progress ── */
.tz-magic-progress {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.4rem 0.2rem 0.9rem;
}
.tz-magic-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
    min-width: 3.1rem;
}
.tz-magic-step-dot {
    width: 1.5rem;
    height: 1.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    font-weight: 900;
    font-size: 0.72rem;
    transition: all 0.2s ease;
}
.tz-magic-step.is-active .tz-magic-step-dot {
    background: var(--cyan);
    color: #001218;
    box-shadow: 0 0 0 3px rgba(37, 217, 239, 0.25);
}
.tz-magic-step.is-done .tz-magic-step-dot {
    background: rgba(37, 217, 239, 0.35);
    color: var(--cyan);
}
.tz-magic-step-lbl {
    font-size: 0.6rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
}
.tz-magic-step.is-active .tz-magic-step-lbl { color: var(--cyan); }
.tz-magic-step.is-done .tz-magic-step-lbl { color: rgba(255, 255, 255, 0.6); }
.tz-magic-step-bar {
    flex: 1 1 auto;
    height: 2px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin-bottom: 1rem;
}
.tz-magic-step-bar.is-done { background: rgba(37, 217, 239, 0.45); }

/* ── Loading / error / empty ── */
.tz-magic-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 3rem 1rem;
    color: var(--muted);
}
.tz-magic-spinner {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    border: 3px solid rgba(37, 217, 239, 0.25);
    border-top-color: var(--cyan);
    animation: tz-magic-spin 0.8s linear infinite;
}
@keyframes tz-magic-spin { to { transform: rotate(360deg); } }
.tz-magic-error {
    margin: 1rem 0;
    padding: 0.9rem 1rem;
    border-radius: 0.6rem;
    background: rgba(255, 90, 104, 0.1);
    border: 1px solid rgba(255, 90, 104, 0.3);
    color: var(--red);
    font-size: 0.85rem;
}
.tz-magic-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--muted);
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 0.6rem;
}

/* ── Intro ── */
.tz-magic-intro { margin-bottom: 0.7rem; }
.tz-magic-intro-t { font-size: 1.05rem; font-weight: 800; color: #fff; }
.tz-magic-intro-h { font-size: 0.76rem; color: var(--muted); margin-top: 0.15rem; line-height: 1.35; }

/* ── Section head ── */
.tz-magic-section-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.85rem 0 0.5rem;
}
.tz-magic-section-head > span:first-child {
    width: 3px;
    height: 0.85rem;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--cyan), #00b8d4);
}
.tz-magic-section-head b {
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    color: rgba(37, 217, 239, 0.85);
    flex: 1 1 auto;
}
.tz-magic-hepsi {
    border: 1px solid rgba(37, 217, 239, 0.5);
    background: transparent;
    color: var(--cyan);
    font-weight: 900;
    font-size: 0.62rem;
    padding: 0.2rem 0.55rem;
    border-radius: 0.4rem;
    cursor: pointer;
}
.tz-magic-hepsi.is-on { background: rgba(37, 217, 239, 0.18); }

/* ── Step 1: hipodrom kartları — görselli (Android MagicHipodromCard, aspectRatio 3.05) ── */
.tz-magic-hipodroms { display: flex; flex-direction: column; gap: 0.7rem; }
.tz-magic-hipo {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    aspect-ratio: 3.05 / 1;
    padding: 0 1rem 0 1.25rem;
    border-radius: 1rem;
    border: 2.5px solid transparent;
    background-color: #000;
    background-image: var(--hipo-img);
    background-size: cover;
    background-position: center;
    color: #fff;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
}
/* Soldan sağa koyu scrim + alttan hafif gölge — şehir adı okunaklı kalsın */
.tz-magic-hipo-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.42) 100%),
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.92) 0%,
            rgba(0, 0, 0, 0.55) 35%,
            rgba(0, 0, 0, 0.18) 65%,
            transparent 100%);
}
.tz-magic-hipo.is-selected { border-color: var(--cyan); }
.tz-magic-hipo.is-selected .tz-magic-hipo-scrim::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(37, 217, 239, 0.12);
}
.tz-magic-hipo-title {
    position: relative;
    flex: 1 1 auto;
    font-weight: 900;
    font-size: 1.15rem;
    letter-spacing: 0.03em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
}
.tz-magic-hipo-check {
    position: relative;
    flex: 0 0 auto;
    width: 2rem; height: 2rem;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--cyan);
    color: #001218;
    font-weight: 900;
    font-size: 1.05rem;
    box-shadow: 0 2px 8px rgba(37, 217, 239, 0.5);
}

/* ── Completed step summary card (Android MagicCompletedStepCard) ── */
.tz-magic-done {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 4.6rem;
    padding: 0.7rem 0.9rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(37, 217, 239, 0.28);
    background-color: #0a1a10;
    background-image: var(--hipo-img);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    margin-bottom: 0.6rem;
}
.tz-magic-done.has-bet { align-items: flex-start; }
.tz-magic-done-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(0deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.92) 0%,
            rgba(0, 0, 0, 0.68) 50%,
            rgba(0, 0, 0, 0.74) 100%);
}
/* üst ince cyan çizgi */
.tz-magic-done::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(37, 217, 239, 0.75), transparent);
}
.tz-magic-done-check {
    position: relative;
    width: 2.25rem; height: 2.25rem; flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1.5px solid rgba(37, 217, 239, 0.55);
    background: rgba(37, 217, 239, 0.14);
    color: var(--cyan); font-weight: 900; font-size: 1.05rem;
}
.tz-magic-done-main { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; gap: 0.25rem; }
.tz-magic-done-city { font-weight: 900; font-size: 1.05rem; color: #fff; }
.tz-magic-done-bet { font-weight: 900; font-size: 0.85rem; color: var(--cyan); }
.tz-magic-done-right { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; text-align: right; }
.tz-magic-done-date { font-size: 0.74rem; font-weight: 800; color: #ffb74d; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); }
.tz-magic-done-sub { font-size: 0.72rem; font-weight: 800; color: #ffb74d; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); }

/* ── Özel açılır menü (MagicBetTypePicker / MagicDropdown) ── */
.tz-magic-dd {
    position: relative;
    margin-top: 0.75rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, #141414, #0c0c0c);
    overflow: hidden;
}
.tz-magic-dd.has-sel,
.tz-magic-dd.is-open {
    border: 1.5px solid rgba(37, 217, 239, 0.5);
    background: linear-gradient(180deg, #0e2535, #071218);
}
.tz-magic-dd.is-disabled { opacity: 0.6; }
.tz-magic-dd-accent {
    display: block;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(37, 217, 239, 0.7), transparent);
}
.tz-magic-dd-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.85rem 0.9rem;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    text-align: left;
}
.tz-magic-dd-ph { flex: 1 1 auto; color: rgba(255, 255, 255, 0.45); font-size: 0.92rem; }
.tz-magic-dd-arrow { flex: 0 0 auto; color: var(--cyan); font-size: 0.85rem; transition: transform 0.2s ease; }
.tz-magic-dd.is-open .tz-magic-dd-arrow { transform: rotate(180deg); }
.tz-magic-dd:not(.has-sel):not(.is-open) .tz-magic-dd-arrow { color: rgba(255, 255, 255, 0.4); }
/* Bahis özeti (seçili, kapalı) */
.tz-magic-dd-sum { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.1rem; }
.tz-magic-dd-sum-name { font-weight: 900; font-size: 1.05rem; color: var(--cyan); }
.tz-magic-dd-sum-unit { font-weight: 700; font-size: 0.78rem; color: #ff9800; }
/* Koşu özeti (seçili, kapalı) */
.tz-magic-dd-rsum { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.1rem; }
.tz-magic-dd-rmain { font-weight: 900; font-size: 1.05rem; color: var(--cyan); }
.tz-magic-dd-rsub { font-weight: 700; font-size: 0.78rem; color: #ff9800; }

.tz-magic-dd-panel {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.5rem 0.6rem 0.6rem;
}

/* Grup başlığı */
.tz-magic-grp { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.15rem 0.3rem; }
.tz-magic-grp-bar { width: 3px; height: 0.8rem; border-radius: 2px; background: linear-gradient(180deg, var(--cyan), #00b8d4); }
.tz-magic-grp b { font-size: 0.62rem; font-weight: 900; letter-spacing: 0.08em; color: rgba(37, 217, 239, 0.8); }
.tz-magic-grp-line { flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, rgba(37, 217, 239, 0.28), transparent); }
.tz-magic-grp-cnt { font-size: 0.62rem; color: rgba(255, 255, 255, 0.3); }

/* Çoklu bahis hızlı kart grid (2 sütun) */
.tz-magic-qc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin-bottom: 0.3rem; }
.tz-magic-qc {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.6rem;
    border-radius: 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, #161616, #0d0d0d);
    color: #fff;
    cursor: pointer;
    text-align: left;
}
.tz-magic-qc.is-sel { border: 1.5px solid rgba(37, 217, 239, 0.7); box-shadow: 0 0 0 1px rgba(37, 217, 239, 0.2); }
.tz-magic-qc-chip {
    flex: 0 0 auto;
    width: 2.7rem; height: 2.7rem;
    display: grid; place-items: center;
    border-radius: 0.6rem;
    border: 1px solid rgba(37, 217, 239, 0.35);
    background: linear-gradient(135deg, rgba(37, 217, 239, 0.18), rgba(37, 217, 239, 0.06));
    color: var(--cyan);
    font-weight: 900; font-size: 0.95rem;
}
.tz-magic-qc.is-sel .tz-magic-qc-chip { background: linear-gradient(135deg, var(--cyan), #00b8d4); color: #001218; border-color: transparent; }
.tz-magic-qc-mid { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.tz-magic-qc-suffix { font-weight: 900; font-size: 0.78rem; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.9); }
.tz-magic-qc-unit { font-weight: 700; font-size: 0.66rem; color: #ff9800; }
.tz-magic-qc-check {
    position: absolute; top: 0.4rem; right: 0.4rem;
    width: 1.3rem; height: 1.3rem; display: grid; place-items: center;
    border-radius: 50%; background: var(--cyan); color: #001218; font-size: 0.7rem; font-weight: 900;
}

/* Tekli/ikili option satırı (MagicBetOptionCard) */
.tz-magic-opt {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.6rem 0.7rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: linear-gradient(180deg, #141414, #0d0d0d);
    color: #fff;
    cursor: pointer;
    text-align: left;
}
.tz-magic-opt.is-sel {
    border: 1.5px solid rgba(37, 217, 239, 0.65);
    background: linear-gradient(180deg, #0c2233, #060e15);
    padding-left: 0.9rem;
}
.tz-magic-opt.is-sel::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, var(--cyan), #00b8d4);
}
.tz-magic-opt-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.tz-magic-opt-name { font-weight: 900; font-size: 1.05rem; color: #fff; }
.tz-magic-opt.is-sel .tz-magic-opt-name { color: var(--cyan); }
.tz-magic-opt-unit { font-weight: 700; font-size: 0.78rem; color: #ff9800; }
.tz-magic-opt-check {
    flex: 0 0 auto; width: 1.75rem; height: 1.75rem;
    display: grid; place-items: center; border-radius: 50%;
    background: linear-gradient(135deg, var(--cyan), #00b8d4); color: #001218; font-weight: 900; font-size: 0.85rem;
}

/* Koşu/ayak option satırı (MagicDropdown items) */
.tz-magic-ropt {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.6rem 0.6rem;
    border: none;
    border-top: 0.5px solid rgba(255, 255, 255, 0.06);
    background: transparent;
    color: #fff;
    cursor: pointer;
    text-align: left;
}
.tz-magic-ropt:first-child { border-top: none; }
.tz-magic-ropt.is-sel { background: linear-gradient(90deg, rgba(37, 217, 239, 0.13), rgba(37, 217, 239, 0.05)); }
.tz-magic-ropt-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.tz-magic-ropt-name { font-weight: 900; font-size: 1.05rem; color: #fff; }
.tz-magic-ropt.is-sel .tz-magic-ropt-name { color: var(--cyan); }
.tz-magic-ropt-sub { font-weight: 600; font-size: 0.78rem; color: rgba(255, 255, 255, 0.4); }
.tz-magic-ropt.is-sel .tz-magic-ropt-sub { color: #ff9800; font-weight: 700; }
.tz-magic-ropt-check {
    flex: 0 0 auto; width: 1.5rem; height: 1.5rem;
    display: grid; place-items: center; border-radius: 50%;
    border: 1px solid rgba(37, 217, 239, 0.5); background: rgba(37, 217, 239, 0.18);
    color: var(--cyan); font-weight: 900; font-size: 0.75rem;
}

/* ── Bütçe kartı (BudgetCard) — collapse/expand ── */
.tz-magic-bc {
    position: relative;
    margin: 0.6rem 0;
    border-radius: 1rem;
    border: 1.5px solid rgba(37, 217, 239, 0.22);
    background: linear-gradient(180deg, #0c1b2a 0%, #060d14 100%);
    overflow: hidden;
}
.tz-magic-bc.is-exp { border-color: rgba(37, 217, 239, 0.4); }
.tz-magic-bc-accent {
    display: block; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(37, 217, 239, 0.8), transparent);
}
.tz-magic-bc-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1rem; }
.tz-magic-bc-head.is-exp { gap: 0.75rem; }
.tz-magic-bc-col { display: flex; flex-direction: column; flex: 1 1 0; gap: 0.1rem; background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
.tz-magic-bc-col--r { align-items: flex-end; text-align: right; }
.tz-magic-bc-k { font-size: 0.62rem; font-weight: 700; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.02em; }
.tz-magic-bc-budget { color: var(--cyan); font-weight: 900; font-size: 1.3rem; }
.tz-magic-bc-budget--lg { font-size: 1.75rem; }
.tz-magic-bc-edit { font-size: 0.85rem; color: rgba(37, 217, 239, 0.7); }
.tz-magic-bc-total { color: #ff9800; font-weight: 900; font-size: 1.3rem; }
.tz-magic-bc-div { width: 1px; height: 2.2rem; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.18), transparent); }
.tz-magic-bc-arrow { flex: 0 0 auto; color: rgba(37, 217, 239, 0.75); font-size: 0.8rem; cursor: pointer; transition: transform 0.2s ease; padding: 0.2rem; }
.tz-magic-bc.is-exp .tz-magic-bc-arrow { transform: rotate(180deg); }
.tz-magic-bc-ai {
    flex: 0 0 auto; width: 2.1rem; height: 2.1rem;
    display: grid; place-items: center; border-radius: 0.55rem;
    border: 1px solid rgba(37, 217, 239, 0.25); background: rgba(37, 217, 239, 0.1);
    color: var(--cyan); font-size: 0.9rem; cursor: pointer;
}
.tz-magic-bc-title { flex: 1 1 auto; color: rgba(37, 217, 239, 0.9); font-weight: 700; font-size: 0.9rem; }
.tz-magic-bc-body { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 0.9rem 1rem; }
.tz-magic-bc-vals { display: flex; align-items: flex-end; margin-bottom: 0.85rem; }
.tz-magic-bc-misli { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.tz-magic-bc-mult { color: #fff; font-weight: 900; font-size: 1.3rem; }
.tz-magic-misli-step { display: flex; align-items: center; gap: 0.45rem; }
.tz-magic-misli-step button {
    width: 2.6rem; height: 2.6rem; border-radius: 0.7rem;
    border: 1px solid rgba(37, 217, 239, 0.3); background: rgba(37, 217, 239, 0.12);
    color: var(--cyan); font-weight: 900; font-size: 1.2rem; cursor: pointer; line-height: 1;
}
.tz-magic-misli-step b {
    width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
    border-radius: 0.7rem; border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06); color: #fff; font-weight: 900; font-size: 1.1rem;
}
/* pill slider (BudgetPillSlider) */
.tz-magic-pill {
    position: relative;
    height: 3rem;
    border-radius: 999px;
    background: #111a24;
    overflow: hidden;
}
.tz-magic-pill-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: rgba(37, 217, 239, 0.8);
    pointer-events: none;
}
.tz-magic-pill-thumb {
    position: absolute; top: 50%; width: 3rem; height: 3rem;
    transform: translate(-50%, -50%);
    border-radius: 50%; background: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}
.tz-magic-pill-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }

/* ── Koşu sekmeleri — diagonal split (RaceLegCell) ── */
.tz-magic-legs { display: flex; gap: 0.4rem; justify-content: center; flex-wrap: nowrap; }
.tz-magic-cell {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 1 / 1;
    max-width: 4.6rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: #0d0d0d;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
}
.tz-magic-cell::before {
    content: ""; position: absolute; inset: 0;
    background: rgba(128, 128, 128, 0.2);
    clip-path: polygon(0 0, 0 100%, 100% 100%);
}
.tz-magic-cell::after {
    content: ""; position: absolute; inset: 0;
    background: rgba(128, 128, 128, 0.1);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.tz-magic-cell.has-sel::after { background: rgba(255, 152, 0, 0.9); }
.tz-magic-cell.is-active { border: 2px solid var(--cyan); }
.tz-magic-cell.is-active::before { background: rgba(37, 217, 239, 0.25); }
.tz-magic-cell-tr {
    position: absolute; z-index: 2; top: 0.22rem; right: 0.3rem;
    color: #fff; font-weight: 900; font-size: clamp(0.68rem, 2.9vw, 0.95rem); line-height: 1; text-align: right;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.8);
}
.tz-magic-cell-tr.is-hepsi { font-size: clamp(0.52rem, 2.1vw, 0.7rem); }
.tz-magic-cell-bl {
    position: absolute; z-index: 2; bottom: 0.2rem; left: 0.28rem; right: 0.28rem;
    color: #fff; font-weight: 900; font-size: clamp(0.6rem, 2.5vw, 0.78rem); line-height: 1.05;
    text-align: left;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.8);
}

/* Pozisyon sekmeleri (PositionTabsRow) */
.tz-magic-postabs { display: flex; gap: 0.35rem; }
.tz-magic-postab {
    flex: 1 1 0;
    display: flex; align-items: center; justify-content: center; gap: 0.3rem;
    height: 2.4rem; border-radius: 0.6rem;
    border: 0.75px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.6); font-weight: 600; font-size: 0.72rem; cursor: pointer;
}
.tz-magic-postab.is-active { border: 1.5px solid var(--cyan); background: rgba(37, 217, 239, 0.18); color: var(--cyan); font-weight: 900; }
.tz-magic-postab-cnt {
    min-width: 1.1rem; height: 1.1rem; padding: 0 0.2rem;
    display: grid; place-items: center; border-radius: 999px;
    background: rgba(255, 152, 0, 0.9); color: #fff; font-size: 0.6rem; font-weight: 900;
}

/* ── Zengin at satırı (TicketHorseRow) ── */
.tz-magic-horses { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.3rem; }
.tz-mh {
    position: relative;
    display: block;
    width: 100%;
    height: 3.5rem;
    border-radius: 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    overflow: hidden;
    cursor: pointer;
    padding: 0;
}
.tz-mh.is-sel { background: rgba(10, 44, 58, 0.9); border-color: rgba(37, 217, 239, 0.9); }
.tz-mh-forma {
    position: absolute; left: 0; top: 0; bottom: 0; width: 58%;
    background-size: cover; background-position: center;
    opacity: 0.5;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 65%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 65%, transparent 100%);
    pointer-events: none;
}
.tz-mh-scrim {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent 30%, rgba(0, 0, 0, 0.4) 48%, rgba(0, 0, 0, 0.1) 60%, transparent 100%);
}
.tz-mh-row {
    position: relative;
    display: flex; align-items: center; gap: 0.6rem;
    height: 100%; padding: 0 0.6rem 0 0.75rem;
}
.tz-mh-no { flex: 0 0 auto; color: #fff; font-style: italic; font-weight: 900; font-size: 1.05rem; text-shadow: 0 1px 4px #000; min-width: 1.1rem; }
.tz-mh-mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.1rem; }
.tz-mh-name { display: flex; align-items: center; gap: 0.25rem; width: 100%; color: #fff; font-weight: 900; font-size: 0.82rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 4px #000; }
.tz-mh-ekuri { flex: 0 0 auto; }
.tz-mh-jock { display: block; width: 100%; text-align: left; color: rgba(255, 255, 255, 0.7); font-size: 0.62rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px #000; }
.tz-mh-right { flex: 0 0 auto; display: flex; align-items: center; gap: 0.5rem; }
.tz-mh-score-wrap { display: flex; align-items: flex-end; gap: 0.25rem; }
.tz-mh-bars, .tz-magic-bars { display: flex; align-items: flex-end; gap: 2px; }
.tz-magic-bar { width: 4px; border-radius: 2px; }
.tz-magic-score-wrap { display: flex; align-items: flex-end; gap: 0.25rem; }
.tz-magic-score-num { font-weight: 900; font-size: 0.95rem; line-height: 1; }
.tz-mh-agf { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.tz-mh-agf1 { color: rgba(255, 255, 255, 0.8); font-weight: 900; font-size: 0.66rem; }
.tz-mh-agf2 { color: rgba(255, 152, 0, 0.9); font-weight: 900; font-size: 0.66rem; }
.tz-mh-check { color: var(--cyan); font-weight: 900; font-size: 1rem; width: 1.1rem; text-align: center; }
.tz-mh:not(.is-sel) .tz-mh-check { color: rgba(255, 255, 255, 0.7); }

/* ── Mini budget bar (MiniBudgetBar) — scroll'da beliren ── */
.tz-magic-mini {
    position: fixed;
    left: 0; right: 0;
    z-index: 19;
    max-width: 560px;
    margin: 0 auto;
    border-radius: 0 0 1rem 1rem;
    border: 1px solid rgba(37, 217, 239, 0.3);
    border-top: none;
    background: linear-gradient(180deg, #0c1b2a, #060d14);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.55);
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.22s ease, opacity 0.22s ease;
}
.tz-magic-mini.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.tz-magic-mini-budget { display: flex; align-items: center; padding: 0.5rem 1.1rem; }
.tz-magic-mini-col { display: flex; flex-direction: column; flex: 1 1 0; gap: 0.05rem; }
.tz-magic-mini-col--r { align-items: flex-end; }
.tz-magic-mini-k { font-size: 0.55rem; font-weight: 700; color: rgba(255, 255, 255, 0.42); letter-spacing: 0.04em; }
.tz-magic-mini-b { color: var(--cyan); font-weight: 900; font-size: 1.05rem; }
.tz-magic-mini-t { color: #ff9800; font-weight: 900; font-size: 1.05rem; }
.tz-magic-mini-div { width: 1px; height: 1.9rem; margin: 0 0.9rem; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.18), transparent); }
.tz-magic-mini-chips { display: flex; gap: 0.3rem; padding: 0 0.7rem 0.5rem; border-top: 0.75px solid rgba(255, 255, 255, 0.08); padding-top: 0.45rem; }
.tz-magic-mini-chip {
    flex: 1 1 0;
    display: flex; align-items: center; justify-content: center; gap: 0.2rem;
    height: 1.85rem; border-radius: 0.5rem;
    border: 0.75px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.6); font-weight: 600; font-size: 0.6rem; cursor: pointer; white-space: nowrap;
}
.tz-magic-mini-chip.is-active { border: 1.5px solid var(--cyan); background: rgba(37, 217, 239, 0.18); color: var(--cyan); font-weight: 900; }
.tz-magic-mini-cnt {
    min-width: 0.95rem; height: 0.95rem; padding: 0 0.15rem;
    display: grid; place-items: center; border-radius: 999px;
    background: rgba(255, 152, 0, 0.9); color: #fff; font-size: 0.52rem; font-weight: 900;
}

/* ── Kağıt bilet (CouponTicketCard) — özet + kayıtlı kuponlar ── */
.tz-ct {
    --paper: #f5e8c9;
    --ink: #1a8089;
    --ink-dim: rgba(26, 128, 137, 0.55);
    border-radius: 6px;
    border: 1.5px solid rgba(26, 128, 137, 0.7);
    background:
        linear-gradient(135deg, rgba(109, 76, 65, 0.06), transparent 50%, rgba(109, 76, 65, 0.04)),
        var(--paper);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}
.tz-ct-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem; border-bottom: 0.75px solid var(--ink-dim); }
.tz-ct-head-l { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tz-ct-brand { color: var(--ink); font-weight: 700; font-size: 0.82rem; line-height: 1.1; }
.tz-ct-bet { color: var(--ink); font-weight: 700; font-size: 0.82rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tz-ct-city { color: var(--ink); font-weight: 900; font-size: 1rem; white-space: nowrap; }
.tz-ct-grid {
    display: grid;
    grid-template-columns: repeat(var(--ct-cols, 6), 1fr);
    margin: 0.4rem;
    border: 0.75px solid var(--ink-dim);
}
.tz-ct-col { display: flex; flex-direction: column; border-right: 0.75px solid var(--ink-dim); }
.tz-ct-col:last-child { border-right: none; }
.tz-ct-colhead {
    background: rgba(26, 128, 137, 0.12);
    border-bottom: 0.75px solid var(--ink-dim);
    color: var(--ink); font-weight: 700; font-size: 0.62rem; line-height: 1;
    text-align: center; padding: 0.22rem 0.1rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tz-ct-cells { display: flex; flex-direction: column; gap: 2px; padding: 0.25rem 0.15rem; }
.tz-ct-cell {
    display: flex; align-items: center; justify-content: center;
    height: 1.3rem;
    background: rgba(26, 128, 137, 0.88);
    color: var(--paper); font-weight: 900; font-size: 0.82rem;
}
.tz-ct-foot { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.7rem; border-top: 0.75px solid var(--ink-dim); }
.tz-ct-foot-l { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; }
.tz-ct-combos { color: var(--ink); font-weight: 900; font-size: 0.85rem; line-height: 1.1; }
.tz-ct-misli { color: var(--ink-dim); font-weight: 600; font-size: 0.8rem; }
.tz-ct-cost { color: #d95a1a; font-weight: 900; font-size: 1.75rem; line-height: 1; white-space: nowrap; }
/* Kayıtlı kupon — kazanma/kaybetme bilet teması */
.tz-ct--won { border-color: rgba(34, 197, 94, 0.8); }
.tz-ct--lost { border-color: rgba(239, 68, 68, 0.8); }
.tz-ct-banner {
    text-align: center; font-weight: 900; font-size: 0.78rem; letter-spacing: 0.08em;
    padding: 0.35rem; color: #fff;
}
.tz-ct-banner.is-won { background: rgba(34, 197, 94, 0.92); }
.tz-ct-banner.is-lost { background: rgba(239, 68, 68, 0.92); }
.tz-ct-banner.is-pending { background: rgba(26, 128, 137, 0.5); }
.tz-ct-cell--win { background: #2e9e4b; color: #fff; box-shadow: inset 0 0 0 2px #ffd54a; }
.tz-ct-cell--lost { background: #c0392b; color: #fff; }

.tz-magic-live-notice {
    margin-top: 0.7rem; padding: 0.7rem 0.85rem;
    border-radius: 0.6rem;
    border: 1px solid rgba(255, 152, 0, 0.18);
    background: rgba(255, 152, 0, 0.06);
    color: rgba(255, 152, 0, 0.8);
    font-size: 0.68rem; line-height: 1.4;
}

/* ── Footer ── */
.tz-magic-footer {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    padding: 0.6rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
    background: rgba(8, 8, 10, 0.94);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
}
.tz-magic-footer-hint { text-align: center; font-size: 0.66rem; color: var(--muted); margin: 0 0 0.4rem; }
.tz-magic-footer-row { display: flex; gap: 0.5rem; max-width: 560px; margin: 0 auto; }
.tz-magic-btn {
    flex: 1 1 auto;
    height: 3rem;
    border-radius: 0.8rem;
    border: none;
    font-weight: 900;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    cursor: pointer;
}
.tz-magic-btn--ghost {
    flex: 0 0 30%;
    background: linear-gradient(180deg, #181e22, #0e1316);
    border: 1px solid rgba(37, 217, 239, 0.35);
    color: #fff;
}
.tz-magic-btn--solid {
    flex: 1.5 1 auto;
    background: linear-gradient(90deg, var(--cyan), #00b8d4);
    color: #001218;
    box-shadow: 0 6px 18px rgba(37, 217, 239, 0.35);
}
.tz-magic-btn.is-disabled,
.tz-magic-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.tz-magic-btn--locked { background: linear-gradient(90deg, #555, #333); color: #fff; }

/* Mobil: alt CustomBottomBar (tab-nav) sabit kaldığından, wizard footer'ı onun
   üstünde yüzen bir bar olarak konumlanır — çakışma olmaz. */
@media (max-width: 820px) {
    .tz-magic-footer {
        left: max(0.65rem, env(safe-area-inset-left, 0px));
        right: max(0.65rem, env(safe-area-inset-right, 0px));
        bottom: calc(5.85rem + env(safe-area-inset-bottom, 0px));
        padding: 0.55rem 0.6rem;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 1.1rem;
        background: rgba(15, 15, 20, 0.97);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
    }
    .tz-magic-footer-row { max-width: 100%; }
    .tz-magic-page.page {
        padding-bottom: calc(11.5rem + env(safe-area-inset-bottom, 0px));
    }
}

/* ===========================================================================
   SideDrawer: SİHİRBAZ satırı (Hazır Kuponlar yerine) — sarı AutoAwesome
   =========================================================================== */
.drawer-row-ico--spark-yel {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffeb3b'%3E%3Cpath d='m12 3 1.2 4.9L18 9l-4.8 1.1L12 15l-1.2-4.9L6 9l4.8-1.1L12 3zM6 14l.4 1.7 1.7.4-1.7.4-.4 1.7-.4-1.7-1.7-.4 1.7-.4.4-1.7z'/%3E%3C/svg%3E");
}

/* ===========================================================================
   CustomBottomBar: Tay Zeka birincil (primary) sekme — diğerlerinden büyük
   ve belirgin (PrimaryTabIndex = 2). Seçili değilken cyan + kalın + büyük ikon.
   =========================================================================== */
.tab-nav-item--primary {
    color: var(--cyan);
    font-weight: 800;
    font-size: 12px;
}
.tab-nav-item--primary .tab-icon,
.tab-nav-item--primary .tab-icon.tab-icon--stack {
    height: 46px;
    width: 50px;
}
.tab-nav-item--primary .tab-icon-svg,
.tab-nav-item--primary .tab-icon-svg--brain {
    width: 46px;
    height: 46px;
    filter: drop-shadow(0 0 7px rgba(37, 217, 239, 0.5));
}
.tab-nav-item--primary .tab-icon.tab-icon--stack .tz-tab-nav-lock {
    top: -1px;
    right: -4px;
}
/* Seçiliyken kapsül cyan + içerik siyah (is-selected'tan miras), glow kapalı */
.tab-nav-item--primary.is-selected {
    color: #000;
}
.tab-nav-item--primary.is-selected .tab-icon-svg,
.tab-nav-item--primary.is-selected .tab-icon-svg--brain {
    filter: none;
}

/* ===========================================================================
   Kayıtlı kupon detayı — Android TicketView (read-only) düzeni
   =========================================================================== */
.tz-sd2 { max-width: 860px; margin: 0 auto; }
/* Header — Android HeaderPickers (iki kutulu hücre: HİPODROM | BAHİS) */
.tz-sd2-pickers {
    display: flex; align-items: stretch;
    margin: 0.2rem 0 0.55rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}
.tz-sd2-cell { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0.18rem; padding: 0.55rem 0.75rem; }
.tz-sd2-cell-k { font-size: 0.62rem; font-weight: 700; color: rgba(37, 217, 239, 0.8); letter-spacing: 0.03em; }
.tz-sd2-cell-v { font-size: 0.95rem; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tz-sd2-cell-div { width: 1px; align-self: center; height: 64%; background: rgba(255, 255, 255, 0.1); }

/* diagonal koşu hücreleri — .tz-magic-cell yeniden kullanılır */
.tz-sd2-legs { display: flex; gap: 0.4rem; justify-content: center; flex-wrap: nowrap; margin-bottom: 0.45rem; }

.tz-sd2-info {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.1rem 0.3rem 0.55rem; min-height: 1rem;
}
.tz-sd2-info span { color: #fff; font-size: 0.74rem; font-weight: 700; }
.tz-sd2-info span:last-child { color: rgba(255, 255, 255, 0.7); white-space: nowrap; }

.tz-sd2-body { display: flex; gap: 0.5rem; align-items: stretch; }
.tz-sd2-horses { flex: 0.54 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.tz-sd2-horses .tz-mh { height: 3.4rem; }
.tz-sd2-horses .tz-mh-no { font-size: 1.15rem; }

/* KUPON paneli (CouponSidePanel) */
.tz-sd2-kupon {
    flex: 0.46 1 0; min-width: 0;
    display: flex; flex-direction: column; gap: 0.45rem;
    padding: 0.7rem 0.6rem;
    border-radius: 0.85rem;
    background: rgba(20, 22, 26, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.tz-sd2-kupon-title { font-weight: 900; font-size: 0.95rem; color: var(--cyan); letter-spacing: 0.04em; }
.tz-sd2-kupon-legs { display: flex; flex-direction: column; gap: 0.4rem; }
.tz-sd2-kleg {
    display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap;
    width: 100%; text-align: left;
    padding: 0.5rem 0.65rem; border-radius: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
}
.tz-sd2-kleg.is-active { border-color: rgba(37, 217, 239, 0.6); background: rgba(37, 217, 239, 0.14); }
.tz-sd2-kleg.is-won { background: rgba(27, 94, 32, 0.3); border-color: #4caf50; }
.tz-sd2-kleg.is-lost { background: rgba(183, 28, 28, 0.3); border-color: #e53935; }
.tz-sd2-kleg-nums { display: flex; align-items: center; flex-wrap: wrap; font-weight: 900; font-size: 0.95rem; letter-spacing: 0.02em; }
.tz-sd2-no { color: var(--cyan); }
.tz-sd2-no.is-hit { color: #ffb300; }
.tz-sd2-sep { color: rgba(37, 217, 239, 0.55); margin: 0 1px; }
.tz-sd2-actual { font-weight: 900; font-size: 0.78rem; color: #ff8a80; margin-left: 0.3rem; }
.tz-sd2-kupon-foot { margin-top: auto; padding-top: 0.65rem; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; gap: 0.55rem; }
.tz-sd2-kf-misli { display: flex; align-items: center; justify-content: space-between; }
.tz-sd2-kf-misli span { font-size: 0.82rem; color: rgba(255, 255, 255, 0.75); }
.tz-sd2-kf-misli b { font-size: 1rem; font-weight: 900; color: #fff; }
.tz-sd2-kf-totals { display: flex; align-items: flex-end; justify-content: space-between; }
.tz-sd2-kf-col { display: flex; flex-direction: column; gap: 0.12rem; }
.tz-sd2-kf-col--r { align-items: flex-end; text-align: right; }
.tz-sd2-kf-col span { font-size: 0.78rem; color: rgba(255, 255, 255, 0.7); }
.tz-sd2-kf-col b { font-size: 1.1rem; font-weight: 900; color: #fff; }
.tz-sd2-kf-col .tz-sd2-tutar { color: #ff9800; }

@media (max-width: 480px) {
    .tz-sd2-horses .tz-mh { height: 2.7rem; }
    .tz-sd2-kupon { padding: 0.5rem 0.4rem; }
    .tz-sd2-kleg-nums { font-size: 0.74rem; }
}

/* Kayıtlı kupon detayı — pist-renkli zemin (Android TicketView pistColors) */
.tz-sd2 { border-radius: 1rem; padding: 0.6rem 0.5rem 1rem; transition: background 0.3s ease; }
.tz-sd2.pist-cim { background: linear-gradient(180deg, rgba(27, 94, 32, 0.5) 0%, transparent 45%); }
.tz-sd2.pist-kum { background: linear-gradient(180deg, rgba(93, 64, 55, 0.5) 0%, transparent 45%); }
.tz-sd2.pist-sentetik { background: linear-gradient(180deg, rgba(120, 120, 120, 0.45) 0%, transparent 45%); }
.tz-sd2.pist-default { background: linear-gradient(180deg, rgba(13, 30, 40, 0.55) 0%, transparent 45%); }

/* ===========================================================================
   Yeni Android TicketView (.tz-sd2) detay düzeni — eski viewport-yükseklik
   kilidini kaldır (at listesi sayfa ile doğal scroll olur) + desktop'ta geniş alan
   =========================================================================== */
.page.tz-saved-detail-page { display: block; }
.page.tz-saved-detail-page .tz-sd-page,
.page.tz-saved-detail-page [data-tz-saved-detail-mount] {
    display: block;
    flex: none;
    min-height: 0;
    overflow: visible;
}
.tz-sd2 { max-width: min(1120px, 100%); }

/* ===========================================================================
   14″ dizüstü (≥1280px) — kenar boşluğunu hafif azalt + kupon bilet
   tipografisini okunur seviyeye çıkar.
   ≥1600px bloğu (aşağıda) içerik genişliğini 1360px'e çıkararak bunu artırır;
   buradaki font/satır değerleri 1600px'te de geçerlidir.
   Promo (/uye-ol/) kendi 1280/1600 bloklarıyla yönetilir; üst bar promo'da hariç.
   NOT: Bazı temel kaplar (.tz-magic-*, .tz-sd2) dosyada geç tanımlandığı için
   bu bloklar dosya SONUNDA durur (eşit özgüllükte kaynak sırası override eder).
   =========================================================================== */
@media (min-width: 1280px) {
    body:not(.tz-promo-page) .topbar-shell {
        width: min(1280px, calc(100% - 4rem));
    }
    .page.program-track-surface,
    .tz-coupon-page.page,
    .page.tz-horse-detail-page,
    .page.tz-saved-ios-page,
    .page.tz-home-page:not(.tz-promo-showcase-page) {
        width: min(1280px, calc(100% - 4rem));
        max-width: min(1280px, calc(100% - 4rem));
    }
    /* Tay Zeka at kartları tek sütun — okunabilir satır uzunluğu için sınırla */
    .tz-prediction-shell {
        max-width: 1180px;
    }
    .tz-sixbet-page.page,
    .tz-sixbet-root {
        max-width: min(100%, 1280px);
    }

    /* —— Kupon bilet: ~8–10px fontları okunur seviyeye çıkar —— */
    /* Satır yüksekliğini biraz aç ki büyüyen fontlar taşmasın */
    .tz-coupon-page .tz-ticket-main {
        --tz-horse-all-h: 2.45rem;
        --tz-horse-row-h: 2.2rem;
    }
    .tz-coupon-page .tz-ticket-picker-k { font-size: 0.62rem; }
    .tz-coupon-page .tz-ticket-picker select { font-size: 0.74rem; }
    .tz-coupon-page .tz-ticket-race-meta { font-size: 0.62rem; }
    .tz-coupon-page .tz-horse-all { font-size: 0.74rem; }
    .tz-coupon-page .tz-horse-name { font-size: 0.74rem; }
    .tz-coupon-page .tz-horse-jock { font-size: 0.62rem; }
    .tz-coupon-page .tz-horse-agf { font-size: 0.62rem; }
    .tz-coupon-page .tz-kupon-title { font-size: 0.78rem; }
    .tz-coupon-page .tz-kupon-leg-txt { font-size: 0.76rem; }
    .tz-coupon-page .tz-kupon-sum { font-size: 0.76rem; }
    .tz-coupon-page .tz-kupon-sum strong { font-size: 0.92rem; }
}

/* ===========================================================================
   Geniş masaüstü (≥1600px) — atıl kenar boşluğunu azalt (≥1280 bloğunu artırır)
   Üst bar + ana uygulama sayfaları 1360px'e genişler. Tay Zeka at kartları ve
   sözleşme (kendi kuralı) okunabilirlik için ~1180px'te kalır; Sihirbaz/Kurgu
   kendi dar formlarıyla ayrı ayarlanır.
   =========================================================================== */
@media (min-width: 1600px) {
    body:not(.tz-promo-page) .topbar-shell {
        width: min(1360px, calc(100% - 4rem));
    }
    .page.program-track-surface,
    .tz-coupon-page.page,
    .page.tz-horse-detail-page,
    .page.tz-saved-ios-page,
    .page.tz-home-page:not(.tz-promo-showcase-page) {
        width: min(1360px, calc(100% - 4rem));
        max-width: min(1360px, calc(100% - 4rem));
    }
    .tz-prediction-shell {
        max-width: 1180px;
    }
    .tz-sixbet-page.page,
    .tz-sixbet-root {
        max-width: min(100%, 1360px);
    }
    .page.tz-saved-detail-page .tz-sd-page {
        max-width: min(1360px, 100%);
    }
    .tz-sd2 {
        max-width: min(1360px, 100%);
    }

    /* Sihirbaz — 560px şerit geniş ekranda fazla dardı */
    .tz-magic-page.page,
    .tz-magic-mini,
    .tz-magic-footer-row {
        max-width: 760px;
    }
    /* Kurgu ağırlıkları — slider tablosu 540px'te ortada sıkışıyordu */
    .page.tz-kurgu-weights-page .tz-kw-inner {
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ===========================================================================
   Mobil dokunma hedefleri (≤820px) — yoğun in-page sekmeleri 44px'e yaklaştır.
   Base değerleri masaüstünde (fare) olduğu gibi kalır; bu blok dosya sonunda
   olduğu için kaynak sırasıyla mobil değerleri override eder.
   =========================================================================== */
@media (max-width: 820px) {
    .race-tab {
        height: 2.75rem;
    }
    .odds-run-tab {
        height: 2.75rem;
    }
    .city-picker {
        min-height: 38px;
    }
    .race-info-popover summary {
        width: 34px;
        height: 34px;
    }
}

/* =========================================================================
   Hint / İpucu sistemi — Android HintBoxView (CardWithHint) + AppGuideView portu
   ========================================================================= */

/* —— CardWithHint —— */
.tz-hint-host {
    position: relative;
    display: block;
    width: 100%;
}

.tz-hint-info {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.tz-hint-info-glyph {
    width: 15px;
    height: 15px;
    background: rgba(37, 217, 239, 0.55);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm-1 7h2v6h-2V11zm0-3h2v2h-2V8z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm-1 7h2v6h-2V11zm0-3h2v2h-2V8z'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: background 0.15s ease;
}

.tz-hint-info:hover .tz-hint-info-glyph {
    background: rgba(37, 217, 239, 0.85);
}

.tz-hint-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    border-radius: 18px;
    background: rgba(13, 13, 13, 0.96);
    animation: tzHintFade 0.18s ease;
}

.tz-hint-overlay[hidden] {
    display: none;
}

@keyframes tzHintFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.tz-hint-accent {
    flex-shrink: 0;
    width: 3px;
    margin: 4px 0;
    border-radius: 1.5px;
    background: rgba(37, 217, 239, 0.8);
}

.tz-hint-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 10px 10px 14px;
}

.tz-hint-head {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tz-hint-head-ico {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    background: var(--cyan);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm-1 7h2v6h-2V11zm0-3h2v2h-2V8z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16zm-1 7h2v6h-2V11zm0-3h2v2h-2V8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.tz-hint-title {
    flex: 1;
    min-width: 0;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
}

.tz-hint-close {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.4);
}

.tz-hint-close-x {
    width: 13px;
    height: 13px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.3 5.71 12 12.01l-6.3-6.3-1.41 1.41L10.59 13.4l-6.3 6.3 1.41 1.41 6.3-6.3 6.3 6.3 1.41-1.41-6.3-6.3 6.3-6.29z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.3 5.71 12 12.01l-6.3-6.3-1.41 1.41L10.59 13.4l-6.3 6.3 1.41 1.41 6.3-6.3 6.3 6.3 1.41-1.41-6.3-6.3 6.3-6.29z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.tz-hint-msg {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
    line-height: 16px;
    white-space: pre-line;
}

/* —— Drawer "REHBER" satırı —— */
.drawer-row--footer-guide {
    color: rgba(255, 255, 255, 0.62);
}

.drawer-row-ico--guide {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2325d9ef'%3E%3Cpath d='M21 5c-1.1-.35-2.3-.5-3.5-.5-2 0-4.15.4-5.5 1.5-1.35-1.1-3.5-1.5-5.5-1.5S2.85 4.4 1.5 5.5v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.6 19.85 5.05 19.5 6.5 19.5c2 0 4.15.4 5.5 1.5 1.25-.8 3.5-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5V5.5c-.6-.45-1.25-.75-2-1zM21 18.5c-1.1-.35-2.3-.5-3.5-.5-2 0-4.15.4-5.5 1.5V8c1.35-1.1 3.5-1.5 5.5-1.5 1.2 0 2.4.15 3.5.5v11.5z'/%3E%3C/svg%3E");
}

/* —— AppGuideView modalı —— */
.tz-modal--guide.tz-modal {
    z-index: 46;
}

#tz-modal-guide .tz-modal__backdrop {
    cursor: pointer;
}

.tz-guide-panel {
    position: relative;
    width: min(92vw, 460px);
    max-width: 100%;
    max-height: min(84dvh, 660px);
    overflow-x: clip;
    overflow-y: auto;
    margin: 0;
    padding: 1.5rem 1rem 1.25rem;
    border-radius: 16px;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.75),
        inset 0 1px rgba(255, 255, 255, 0.04);
    scrollbar-width: thin;
    scrollbar-color: rgba(37, 217, 239, 0.35) rgba(255, 255, 255, 0.06);
}

.tz-guide__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-right: 2.25rem;
}

.tz-guide__head-ico {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background: var(--cyan);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 5c-1.1-.35-2.3-.5-3.5-.5-2 0-4.15.4-5.5 1.5-1.35-1.1-3.5-1.5-5.5-1.5S2.85 4.4 1.5 5.5v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.6 19.85 5.05 19.5 6.5 19.5c2 0 4.15.4 5.5 1.5 1.25-.8 3.5-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5V5.5c-.6-.45-1.25-.75-2-1zM21 18.5c-1.1-.35-2.3-.5-3.5-.5-2 0-4.15.4-5.5 1.5V8c1.35-1.1 3.5-1.5 5.5-1.5 1.2 0 2.4.15 3.5.5v11.5z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 5c-1.1-.35-2.3-.5-3.5-.5-2 0-4.15.4-5.5 1.5-1.35-1.1-3.5-1.5-5.5-1.5S2.85 4.4 1.5 5.5v14.65c0 .25.25.5.5.5.1 0 .15-.05.25-.05C3.6 19.85 5.05 19.5 6.5 19.5c2 0 4.15.4 5.5 1.5 1.25-.8 3.5-1.5 5.5-1.5 1.65 0 3.35.3 4.75 1.05.1.05.15.05.25.05.25 0 .5-.25.5-.5V5.5c-.6-.45-1.25-.75-2-1zM21 18.5c-1.1-.35-2.3-.5-3.5-.5-2 0-4.15.4-5.5 1.5V8c1.35-1.1 3.5-1.5 5.5-1.5 1.2 0 2.4.15 3.5.5v11.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.tz-guide__title {
    margin: 0;
    color: #fff;
    font-weight: 900;
    font-size: 17px;
}

.tz-guide__line {
    height: 1px;
    margin-bottom: 12px;
    background: rgba(37, 217, 239, 0.15);
}

.tz-guide__sections {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tz-guide-sec {
    border-radius: 14px;
    background: #1a1a1a;
    border: 1px solid color-mix(in srgb, var(--sec) 20%, transparent);
    overflow: hidden;
}

.tz-guide-sec__head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.tz-guide-sec__dot {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--sec);
}

.tz-guide-sec__title {
    flex: 1;
    min-width: 0;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}

.tz-guide-sec__chev {
    flex-shrink: 0;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid rgba(255, 255, 255, 0.35);
    transition: transform 0.2s ease;
}

.tz-guide-sec--open .tz-guide-sec__chev {
    transform: rotate(180deg);
}

.tz-guide-sec__body {
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border-top: 1px solid color-mix(in srgb, var(--sec) 20%, transparent);
}

.tz-guide-sec--open .tz-guide-sec__body {
    display: flex;
}

.tz-guide-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.tz-guide-row__dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--c);
}

.tz-guide-row__txt {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    line-height: 17px;
}

.tz-guide-row__hr {
    height: 1px;
    margin: 4px 0;
    background: rgba(255, 255, 255, 0.1);
}

.tz-guide-subhead {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: 700;
}

.tz-guide-tier {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tz-guide-tier__badge {
    flex-shrink: 0;
    min-width: 72px;
    padding: 3px 8px;
    border-radius: 6px;
    text-align: center;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 15%, transparent);
    font-weight: 900;
    font-size: 10px;
}

.tz-guide-tier__note {
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
}

.tz-guide-reset-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.tz-guide-reset {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    border-radius: 12px;
    background: rgba(37, 217, 239, 0.1);
    border: 1px solid rgba(37, 217, 239, 0.3);
    color: var(--cyan);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

.tz-guide-reset--done {
    background: rgba(102, 187, 106, 0.1);
    border-color: rgba(102, 187, 106, 0.3);
    color: #66bb6a;
}

.tz-guide-reset__ico {
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35A7.96 7.96 0 0 0 12 4a8 8 0 1 0 7.74 10h-2.08A6 6 0 1 1 12 6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.65 6.35A7.96 7.96 0 0 0 12 4a8 8 0 1 0 7.74 10h-2.08A6 6 0 1 1 12 6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.tz-guide-reset__note {
    margin: 0;
    color: rgba(255, 255, 255, 0.3);
    font-size: 11px;
    line-height: 15px;
}