/* ============================================================
   Ganyan — kmp tasarım sistemi (ERP Standardı)
   - Self-hosted Inter Variable
   - Token ölçeği: spacing / radius / gölge / hareket / palet
   - Kmp.Blazor'ın TÜKETTİĞİ --kmp-* değişkenlerinin tamamı burada tanımlıdır;
     paketin :root bloğu yalnız makul VARSAYILANDIR, host ezmezse grid/modal
     kendi paletiyle kalır ve sayfayla uyumsuz görünür.
   - Bootstrap YÜKLENMİYOR: bu uygulamanın işaretlemesi gy-* sınıflarını kullanır,
     kmp token'ları --bs-* üzerinden değil doğrudan değerle tanımlanır.
   - Tema üç durumlu: sistem (öznitelik yok) / light / dark (data-bs-theme).
   ============================================================ */

@font-face {
    font-family: "InterVariable";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/InterVariable.woff2") format("woff2");
}

@font-face {
    font-family: "InterVariable";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/InterVariable-Italic.woff2") format("woff2");
}

/* ============================================================
   TOKEN'LAR — açık tema (taban)
   ============================================================ */
:root {
    /* Tipografi */
    --kmp-font-sans: "InterVariable", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --kmp-font: var(--kmp-font-sans);
    --kmp-font-feature: "cv02", "cv03", "cv04", "cv11", "ss01";
    --kmp-font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;

    /* Boşluk ölçeği (4 / 8 / 12 / 16 / 24 / 32) */
    --kmp-sp-1: .25rem;
    --kmp-sp-2: .5rem;
    --kmp-sp-3: .75rem;
    --kmp-sp-4: 1rem;
    --kmp-sp-6: 1.5rem;
    --kmp-sp-8: 2rem;

    /* Yoğunluk ölçeği — dikey bütçe TEK yerden ayarlanır.
       Ölçüm (1440x900, canlı, v0.6.17): ilk veri satırına kadar harcanan krom panoda
       528px, /kosular'da 306px, /kuponlar'da 473px, /karne'de 535px idi; satır yüksekliği
       panoda ve ızgarada 56px. İlk ekranda pano 6/16, koşular 9/18 satır gösteriyordu.
       Kayıp yatay değil DİKEY: pano satırı zaten 1.137px'in tamamını kullanıyor (sağ ray
       denenirse kolonlar daralır, satır UZAR), 56px'in 15,4px'i dolgu, gerisi 1,5 satır
       yüksekliğiyle iki satıra sarılan alt kutular.
       Değerler burada durur: ekran ekran ayarlanırsa bir sonraki ekran yeniden dağılır. */
    --gy-satir-y: .3rem;      /* liste/ızgara satırının dikey dolgusu (eskiden .55rem) */
    --gy-serit-y: .22rem;     /* şerit / araç çubuğu / katlanır başlık dikey dolgusu */
    --gy-satir-lh: 1.35;      /* VERİ satırında satır yüksekliği — gövde nesri 1.5 kalır */

    /* Köşe yarıçapı */
    --kmp-radius-sm: .375rem;
    --kmp-radius-md: .625rem;
    --kmp-radius-lg: .875rem;
    --kmp-radius-pill: 999px;
    --kmp-radius: var(--kmp-radius-md);

    /* Kabuk ölçüleri */
    --kmp-sidebar-width: 258px;
    --kmp-sidebar-collapsed-width: 66px;
    --kmp-topbar-height: 58px;

    /* Hareket */
    --kmp-ease: cubic-bezier(.4, 0, .2, 1);
    --kmp-transition: .18s var(--kmp-ease);
    --kmp-transition-slow: .3s var(--kmp-ease);

    /* Marka — kararlı indigo */
    --kmp-primary: #4f46e5;
    --kmp-primary-rgb: 79, 70, 229;
    --kmp-primary-hover: #4338ca;
    --kmp-primary-subtle: #eef0fe;
    --kmp-primary-border-subtle: #c9cdf9;
    --kmp-primary-text: #3730a3;

    /* Yüzeyler ve metin */
    --kmp-surface: #ffffff;
    --kmp-surface-muted: #f1f3f7;
    --kmp-tertiary-bg: #f8fafc;
    --kmp-secondary-bg: #eceff4;
    --kmp-body: #1f2733;
    --kmp-secondary: #5b6675;
    --kmp-border: #e3e6ec;
    --kmp-page-bg: #f6f7f9;

    /* Durum renkleri */
    --kmp-success: #15803d;
    --kmp-success-subtle: #eafaf0;
    --kmp-danger: #dc2626;
    --kmp-danger-subtle: #fef2f2;
    --kmp-warning: #b45309;
    --kmp-warning-subtle: #fff8ec;

    /* Katmanlı yumuşak gölgeler */
    --kmp-shadow-xs: 0 1px 2px rgb(16 24 40 / 5%);
    --kmp-shadow-sm: 0 1px 3px rgb(16 24 40 / 7%), 0 1px 2px rgb(16 24 40 / 4%);
    --kmp-shadow-md: 0 4px 8px -2px rgb(16 24 40 / 8%), 0 2px 4px -2px rgb(16 24 40 / 5%);
    --kmp-shadow-lg: 0 12px 24px -6px rgb(16 24 40 / 12%), 0 4px 8px -4px rgb(16 24 40 / 6%);
    --kmp-shadow-xl: 0 24px 48px -12px rgb(16 24 40 / 18%);

    --kmp-focus-ring: 0 0 0 .2rem rgb(var(--kmp-primary-rgb) / 28%);
    --kmp-scrim-bg: rgb(15 23 42 / 42%);

    /* Kenar çubuğu — derin nötr, marka tonlu */
    --kmp-sidebar-bg: #0f1729;
    --kmp-sidebar-bg-2: #131c30;
    --kmp-sidebar-text: rgb(226 232 240 / 82%);
    --kmp-sidebar-muted: rgb(148 163 184 / 62%);
    --kmp-sidebar-hairline: rgb(148 163 184 / 14%);

    --kmp-topbar-bg: rgb(255 255 255 / 82%);

    /* gy-* eşlemesi: eski işaretleme token ölçeğini izler (tek palet, iki ad değil) */
    --gy-bg: var(--kmp-page-bg);
    --gy-surface: var(--kmp-surface);
    --gy-text: var(--kmp-body);
    --gy-muted: var(--kmp-secondary);
    --gy-border: var(--kmp-border);
    --gy-accent: var(--kmp-primary);
    --gy-ok: var(--kmp-success);
    --gy-warn: var(--kmp-warning);
    --gy-radius: var(--kmp-radius-lg);
    --gy-shadow: var(--kmp-shadow-sm);
    --gy-ease: var(--kmp-ease);
}

/* ============================================================
   TOKEN'LAR — koyu tema
   İki blok bilerek AYRI: biri sistem tercihini (öznitelik yokken), diğeri
   kullanıcının açık seçimini karşılar. Tek blokla yazılırsa üçüncü durum
   ("sistem koyu ama kullanıcı açık istedi") sessizce kaybolur.
   ============================================================ */
@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme="light"]) {
        --kmp-primary: #6366f1;
        --kmp-primary-rgb: 99, 102, 241;
        --kmp-primary-hover: #818cf8;
        --kmp-primary-subtle: #1e1f3d;
        --kmp-primary-border-subtle: #38397a;
        --kmp-primary-text: #c7c9fb;

        --kmp-surface: #161b25;
        --kmp-surface-muted: #1b212d;
        --kmp-tertiary-bg: #1a202b;
        --kmp-secondary-bg: #222937;
        --kmp-body: #e8eaf0;
        --kmp-secondary: #9aa3b4;
        --kmp-border: #2a313e;
        --kmp-page-bg: #0f131b;

        --kmp-success: #4ade80;
        --kmp-success-subtle: #10251a;
        --kmp-danger: #f87171;
        --kmp-danger-subtle: #2a1618;
        --kmp-warning: #fbbf24;
        --kmp-warning-subtle: #2a2011;

        --kmp-shadow-xs: 0 1px 2px rgb(0 0 0 / 30%);
        --kmp-shadow-sm: 0 1px 3px rgb(0 0 0 / 34%);
        --kmp-shadow-md: 0 4px 10px -3px rgb(0 0 0 / 40%);
        --kmp-shadow-lg: 0 12px 26px -8px rgb(0 0 0 / 48%);
        --kmp-shadow-xl: 0 24px 48px -14px rgb(0 0 0 / 58%);

        --kmp-scrim-bg: rgb(3 6 12 / 62%);
        --kmp-sidebar-bg: #0b0f18;
        --kmp-sidebar-bg-2: #10151f;
        --kmp-topbar-bg: rgb(22 27 37 / 82%);
    }
}

[data-bs-theme="dark"] {
    --kmp-primary: #6366f1;
    --kmp-primary-rgb: 99, 102, 241;
    --kmp-primary-hover: #818cf8;
    --kmp-primary-subtle: #1e1f3d;
    --kmp-primary-border-subtle: #38397a;
    --kmp-primary-text: #c7c9fb;

    --kmp-surface: #161b25;
    --kmp-surface-muted: #1b212d;
    --kmp-tertiary-bg: #1a202b;
    --kmp-secondary-bg: #222937;
    --kmp-body: #e8eaf0;
    --kmp-secondary: #9aa3b4;
    --kmp-border: #2a313e;
    --kmp-page-bg: #0f131b;

    --kmp-success: #4ade80;
    --kmp-success-subtle: #10251a;
    --kmp-danger: #f87171;
    --kmp-danger-subtle: #2a1618;
    --kmp-warning: #fbbf24;
    --kmp-warning-subtle: #2a2011;

    --kmp-shadow-xs: 0 1px 2px rgb(0 0 0 / 30%);
    --kmp-shadow-sm: 0 1px 3px rgb(0 0 0 / 34%);
    --kmp-shadow-md: 0 4px 10px -3px rgb(0 0 0 / 40%);
    --kmp-shadow-lg: 0 12px 26px -8px rgb(0 0 0 / 48%);
    --kmp-shadow-xl: 0 24px 48px -14px rgb(0 0 0 / 58%);

    --kmp-scrim-bg: rgb(3 6 12 / 62%);
    --kmp-sidebar-bg: #0b0f18;
    --kmp-sidebar-bg-2: #10151f;
    --kmp-topbar-bg: rgb(22 27 37 / 82%);
}

/* ============================================================
   TABAN
   ============================================================ */
* { box-sizing: border-box; }

/* Kök ölçek 16px → 14px (-%12,5): rem'e bağlı TÜM tipografi ve iç boşluk birlikte küçülür.
   Kabuk ölçüleri (topbar 58px, kenar çubuğu 258px) ve tüm medya sorguları px cinsindendir —
   kök ölçek değişince kırılma noktaları kaymaz. Başlıklar ayrıca elle kısılır (aşağıda),
   mikro etiketler ise .72rem tabanında tutulur: 9 px'in altı okunmuyor. */
html { color-scheme: light dark; font-size: 87.5%; }
[data-bs-theme="light"] { color-scheme: light; }
[data-bs-theme="dark"] { color-scheme: dark; }

body {
    margin: 0;
    background: var(--kmp-page-bg);
    color: var(--kmp-body);
    font-family: var(--kmp-font-sans);
    font-feature-settings: var(--kmp-font-feature);
    font-size: .95rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { font-weight: 600; letter-spacing: -0.02em; }
h1 { font-size: 1.3rem; margin: 0 0 .35rem; }
h2 { font-size: .98rem; letter-spacing: -0.01em; margin: var(--kmp-sp-4) 0 var(--kmp-sp-2); }
a { color: var(--kmp-primary); }

.gy-lead { color: var(--kmp-secondary); margin: 0 0 var(--kmp-sp-6); }
.gy-muted { color: var(--kmp-secondary); }
.gy-mono { font-family: var(--kmp-font-mono); font-size: .85rem; font-variant-numeric: tabular-nums; }
.gy-num { font-variant-numeric: tabular-nums; }

:focus:not(:focus-visible) { outline: none; }
/* Y-395: Blazor FocusOnNavigate'in betikle odakladığı öğe (tabindex=-1, klavyeyle ulaşılamaz) çerçeve çizmez —
   Chromium sayfa açılışındaki betik odağını :focus-visible sayıyor, üstteki kural tek başına yetmiyor. */
[tabindex="-1"]:focus { outline: none; }

/* ============================================================
   KABUK — kenar çubuğu (drawer) + üst çubuk + içerik
   Dock-fill zinciri: .gy-shell → .gy-main → .gy-dock → içerik
   Her halkada flex + min-height:0 olmalı; biri atlanırsa grid yüksekliği
   çöker ve Virtualize satırları hiç render edilmez.
   ============================================================ */
.gy-shell {
    display: grid;
    grid-template-columns: var(--kmp-sidebar-width) 1fr;
    height: 100vh;
    transition: grid-template-columns var(--kmp-transition-slow);
}

.gy-sidebar {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    color: var(--kmp-sidebar-text);
    background: linear-gradient(180deg, var(--kmp-sidebar-bg) 0%, var(--kmp-sidebar-bg-2) 100%);
    border-right: 1px solid var(--kmp-sidebar-hairline);
}

/* Marka rozeti üstte — kenar çubuğu boş başlamaz */
.gy-sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--kmp-sp-2);
    height: var(--kmp-topbar-height);
    padding: 0 var(--kmp-sp-4);
    flex: 0 0 auto;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid var(--kmp-sidebar-hairline);
}
.gy-sidebar__chip {
    display: grid;
    place-items: center;
    width: 1.9rem; height: 1.9rem;
    flex: 0 0 auto;
    font-size: .8rem; font-weight: 700; letter-spacing: -0.02em;
    color: #fff;
    background: linear-gradient(135deg, var(--kmp-primary) 0%, #7c3aed 100%);
    border-radius: var(--kmp-radius-sm);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 10%), 0 6px 16px -6px rgb(var(--kmp-primary-rgb) / 70%);
}
.gy-sidebar__name { font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }

.gy-sidebar__search { flex: 0 0 auto; padding: var(--kmp-sp-3) var(--kmp-sp-3) var(--kmp-sp-2); }
.gy-sidebar__search input {
    width: 100%;
    padding: .4rem .65rem;
    font: inherit; font-size: .82rem;
    color: var(--kmp-sidebar-text);
    background: rgb(255 255 255 / 6%);
    border: 1px solid var(--kmp-sidebar-hairline);
    border-radius: var(--kmp-radius-sm);
    transition: border-color var(--kmp-transition), background var(--kmp-transition);
}
.gy-sidebar__search input::placeholder { color: var(--kmp-sidebar-muted); }
.gy-sidebar__search input:focus-visible {
    outline: none;
    background: rgb(255 255 255 / 10%);
    border-color: rgb(var(--kmp-primary-rgb) / 70%);
}

.gy-sidebar__nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 var(--kmp-sp-2) var(--kmp-sp-4); }

/* Treeview: katlanır gruplar */
.gy-tree { display: flex; flex-direction: column; gap: .15rem; }
.gy-tree__group { border: 0; }
.gy-tree__group > summary {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .65rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--kmp-sidebar-muted);
    cursor: pointer; list-style: none;
    border-radius: var(--kmp-radius-sm);
    transition: color var(--kmp-transition), background var(--kmp-transition);
}
.gy-tree__group > summary::-webkit-details-marker { display: none; }
.gy-tree__group > summary:hover { color: var(--kmp-sidebar-text); background: rgb(255 255 255 / 5%); }
.gy-tree__group > summary:focus-visible { outline: none; box-shadow: var(--kmp-focus-ring); }
.gy-tree__chev {
    width: .7rem; height: .7rem; flex: 0 0 auto;
    transition: transform var(--kmp-transition);
}
.gy-tree__group[open] > summary .gy-tree__chev { transform: rotate(90deg); }
.gy-tree__items { display: flex; flex-direction: column; gap: .1rem; padding: .1rem 0 .35rem; }

.gy-tree__link {
    position: relative;
    display: flex; align-items: center; gap: .6rem;
    padding: .48rem .65rem;
    font-size: .875rem;
    color: var(--kmp-sidebar-text);
    text-decoration: none;
    border-radius: var(--kmp-radius-sm);
    transition: color var(--kmp-transition), background var(--kmp-transition), transform var(--kmp-transition);
}
.gy-tree__link:hover { color: #fff; background: rgb(255 255 255 / 7%); }
.gy-tree__link:focus-visible { outline: none; box-shadow: var(--kmp-focus-ring); }
.gy-tree__link.is-active {
    color: #fff;
    background: linear-gradient(90deg, rgb(var(--kmp-primary-rgb) / 30%) 0%, rgb(var(--kmp-primary-rgb) / 8%) 100%);
}
/* Aktif öğede accent çubuğu */
.gy-tree__link.is-active::before {
    content: "";
    position: absolute; left: -.5rem; top: .35rem; bottom: .35rem;
    width: 3px; border-radius: 0 3px 3px 0;
    background: var(--kmp-primary);
    box-shadow: 0 0 12px 1px rgb(var(--kmp-primary-rgb) / 70%);
}
.gy-tree__link svg { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; opacity: .85; }
.gy-tree__link.is-active svg { opacity: 1; }
.gy-tree__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Menü araması hiçbir şey bulamazsa: boş liste değil, cevap */
.gy-tree__empty { padding: .6rem .65rem; font-size: .8rem; color: var(--kmp-sidebar-muted); }

/* Üst çubuk */
.gy-topbar {
    display: flex; align-items: center; gap: var(--kmp-sp-3);
    height: var(--kmp-topbar-height);
    flex: 0 0 auto;
    padding: 0 var(--kmp-sp-6);
    background: var(--kmp-topbar-bg);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--kmp-border);
}
/* Sayfanın TEK başlığı: üst çubuktaki bu satır. Sayfa gövdesinde ayrıca <h1> yazmak
   aynı sözcüğü iki kez gösterip dikeyde bir blok yer yiyordu. */
.gy-topbar__title { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.gy-topbar__end { margin-left: auto; display: flex; align-items: center; gap: var(--kmp-sp-2); }
.gy-badge-btn { position: relative; text-decoration: none; }
.gy-badge-btn span {
    position: absolute; inset: -.3rem -.35rem auto auto;
    min-width: 1.05rem; height: 1.05rem; padding: 0 .25rem;
    display: grid; place-items: center;
    font-size: .65rem; font-weight: 700; line-height: 1;
    color: #fff; background: var(--kmp-danger);
    border: 1px solid var(--kmp-topbar-bg);
    border-radius: var(--kmp-radius-pill);
}

.gy-hamburger {
    display: grid; place-items: center;
    width: 2.1rem; height: 2.1rem; padding: 0;
    color: var(--kmp-secondary);
    background: transparent; border: 1px solid transparent; border-radius: var(--kmp-radius-sm);
    cursor: pointer;
    transition: color var(--kmp-transition), background var(--kmp-transition), border-color var(--kmp-transition);
}
.gy-hamburger:hover { color: var(--kmp-body); background: var(--kmp-surface-muted); border-color: var(--kmp-border); }
.gy-hamburger:focus-visible { outline: none; box-shadow: var(--kmp-focus-ring); }
.gy-hamburger svg { width: 1.15rem; height: 1.15rem; }
.gy-hamburger .gy-ico-close { display: none; }

.gy-user-chip {
    display: flex; align-items: center; gap: .5rem;
    padding: .25rem .5rem .25rem .3rem;
    border: 1px solid var(--kmp-border); border-radius: var(--kmp-radius-pill);
    background: var(--kmp-surface);
}
.gy-user-chip__badge {
    display: grid; place-items: center;
    width: 1.6rem; height: 1.6rem;
    font-size: .7rem; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--kmp-primary) 0%, #7c3aed 100%);
    border-radius: var(--kmp-radius-pill);
}
.gy-user-chip__name { font-size: .82rem; font-weight: 500; }
.gy-user-chip__name em { font-style: normal; display: block; font-size: .72rem; color: var(--kmp-secondary); }

.gy-main {
    display: flex; flex-direction: column;
    min-width: 0; min-height: 0;
    /* NOT: burada overflow:auto KULLANMA — iç içe kaydırma bağlamı Blazor Virtualize'ın
       görünür pencere ölçümünü bozuyor, grid satırları hiç render edilmiyor. */
    overflow: hidden;
}
.gy-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: var(--kmp-sp-3) var(--kmp-sp-6) var(--kmp-sp-4); overflow-y: auto; }
.gy-content--dock { overflow: hidden; }

.gy-scrim { display: none; }

/* --- Daraltılmış kenar çubuğu (masaüstü) --- */
.gy-drawer-collapsed .gy-shell { grid-template-columns: var(--kmp-sidebar-collapsed-width) 1fr; }
.gy-drawer-collapsed .gy-sidebar__name,
.gy-drawer-collapsed .gy-sidebar__search,
.gy-drawer-collapsed .gy-tree__label,
.gy-drawer-collapsed .gy-tree__chev { display: none; }
.gy-drawer-collapsed .gy-tree__group > summary { justify-content: center; padding: .35rem 0; }
.gy-drawer-collapsed .gy-tree__link { justify-content: center; padding: .55rem 0; }
.gy-drawer-collapsed .gy-sidebar__brand { justify-content: center; padding: 0; }

/* --- Mobil: soldan overlay drawer + blur scrim --- */
@media (max-width: 991.98px) {
    .gy-shell { grid-template-columns: 1fr; }
    .gy-sidebar {
        position: fixed; inset: 0 auto 0 0; z-index: 60;
        width: var(--kmp-sidebar-width);
        transform: translateX(-100%);
        transition: transform var(--kmp-transition-slow);
        box-shadow: var(--kmp-shadow-xl);
    }
    .gy-drawer-open .gy-sidebar { transform: translateX(0); }
    .gy-drawer-open .gy-scrim {
        display: block;
        position: fixed; inset: 0; z-index: 50;
        background: var(--kmp-scrim-bg);
        backdrop-filter: blur(3px);
    }
    /* Masaüstü daraltması mobilde geçerli değil — iki durum birbirine karışmamalı */
    .gy-drawer-collapsed .gy-sidebar__name,
    .gy-drawer-collapsed .gy-sidebar__search,
    .gy-drawer-collapsed .gy-tree__label,
    .gy-drawer-collapsed .gy-tree__chev { display: revert; }
    .gy-drawer-collapsed .gy-tree__link,
    .gy-drawer-collapsed .gy-tree__group > summary { justify-content: flex-start; padding: .48rem .65rem; }
    .gy-drawer-collapsed .gy-sidebar__brand { justify-content: flex-start; padding: 0 var(--kmp-sp-4); }
    .gy-drawer-open .gy-hamburger .gy-ico-menu { display: none; }
    .gy-drawer-open .gy-hamburger .gy-ico-close { display: block; }
    .gy-grid.gy-grid--2 { grid-template-columns: 1fr; }
    .gy-content { padding: var(--kmp-sp-4); }
    .gy-user-chip__name { display: none; }
}

/* ============================================================
   PANO
   ============================================================ */
/* Sayfa başı artık yalnız araç çubuğu taşıyor (başlık üst çubukta). Tek çocuklu bir
   flex satırında space-between soldan yaslar; araçlar sağda kalsın diye flex-end. */
.gy-page-head {
    display: flex; flex-wrap: wrap; gap: var(--kmp-sp-3);
    align-items: center; justify-content: flex-end;
    margin-bottom: var(--kmp-sp-2);
    flex: 0 0 auto;
}
.gy-page-head > :first-child:not(:only-child) { margin-right: auto; }
.gy-page-head h1 { margin-bottom: .15rem; }
.gy-page-head .gy-lead { margin: 0; }
.gy-toolbar { display: flex; gap: var(--kmp-sp-2); align-items: center; flex-wrap: wrap; }
.gy-grid.gy-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.gy-panel {
    padding: var(--kmp-sp-4);
    background: var(--kmp-surface);
    border: 1px solid var(--kmp-border);
    border-radius: var(--kmp-radius-md);
    box-shadow: var(--kmp-shadow-xs);
}
.gy-panel h2 { margin: 0 0 var(--kmp-sp-2); font-size: 1rem; font-weight: 650; }
.gy-panel p { margin: 0; color: var(--kmp-secondary); }

.gy-daybar { display: flex; align-items: center; gap: var(--kmp-sp-2); }
.gy-daybar__date { min-width: 8.5rem; text-align: center; font-variant-numeric: tabular-nums; }

.gy-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: var(--kmp-sp-4); }
.gy-chip {
    padding: .2rem .65rem;
    font-size: .78rem; font-weight: 500;
    color: var(--kmp-primary-text);
    background: var(--kmp-primary-subtle);
    border: 1px solid var(--kmp-primary-border-subtle);
    border-radius: var(--kmp-radius-pill);
}

/* Piyasa çıpası rozeti: künyedeki diğer çiplerden AYRI okunmalı — bir künye bilgisi değil,
   "bu ekrandaki olasılıklar hangi cetvelden" uyarısıdır. */
.gy-chip--cipa {
    color: var(--kmp-warning-text, #92400e);
    background: var(--kmp-warning-subtle, rgba(245, 158, 11, .14));
    border-color: var(--kmp-warning-border-subtle, rgba(245, 158, 11, .35));
    cursor: help;
}

.gy-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--kmp-sp-3); }

.gy-card {
    position: relative;
    display: flex; flex-direction: column; gap: .05rem;
    padding: .4rem .8rem;
    background: var(--kmp-surface);
    border: 1px solid var(--kmp-border);
    border-radius: var(--kmp-radius-md);
    box-shadow: var(--kmp-shadow-xs);
    overflow: hidden;
    transition: transform var(--kmp-transition), box-shadow var(--kmp-transition);
}
/* Accent şeridi — kart yığını tek renk bir blok gibi görünmesin */
.gy-card::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
    background: linear-gradient(90deg, var(--kmp-primary), transparent 85%);
    opacity: .55;
}
.gy-card:hover { transform: translateY(-1px); box-shadow: var(--kmp-shadow-sm); }
/* Uyarı kartı (bütçe borcu): kart yığınında GÖZLE ayrılmalı — borç, kasa gibi nötr bir sayı
   değil. Şerit + kenarlık danger'a döner, zemin hafif tint; renk tek başına taşımasın diye
   etiket de danger. (Bu ad Butce.razor'da bir süre CSS'siz kullanıldı: kart normal görünüyordu.) */
.gy-card--uyari {
    border-color: color-mix(in srgb, var(--kmp-danger) 38%, transparent);
    background: var(--kmp-danger-subtle);
}
.gy-card--uyari::before { background: linear-gradient(90deg, var(--kmp-danger), transparent 85%); opacity: .85; }
.gy-card--uyari .gy-card__label { color: var(--kmp-danger); }
.gy-card__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--kmp-secondary); }
.gy-card__value { font-size: 1.05rem; font-weight: 650; line-height: 1.2; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.gy-card__value.ok { color: var(--kmp-success); }
.gy-card__value.warn { color: var(--kmp-warning); }
.gy-card__value.bad { color: var(--kmp-danger); }
.gy-card__hint { font-size: .72rem; color: var(--kmp-secondary); }
.gy-card__hint--break { word-break: break-all; }
.gy-card__value--sm { font-size: .92rem; font-weight: 600; letter-spacing: 0; }

/* Koşu detayı (modal içi): künye → kartlar → kadro ızgarası → lejant → not.
   Dock düzeni: künye ve kartlar ÜSTTE, lejant ve not ALTTA demirler; ızgara aradaki
   bütün yüksekliği kapar. Zincir: .kmp-modal(Height) → .kmp-modal-body--fill → .gy-detay. */
.gy-detay { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--kmp-sp-3); min-height: 0; }
.gy-detay > * { flex: 0 0 auto; }
.gy-detay .gy-chips { margin-bottom: 0; }
.gy-detay h3 { margin: 0; font-size: .95rem; font-weight: 600; }
.gy-detay .gy-note { margin: 0; }
/* Izgara <Virtualize> kullanıyor: yüksekliği SINIRLI bir kapsayıcı ister, yoksa modal
   içinde sonsuz uzayıp kaydırma çubuğunu kaybeder. Sınır artık sabit bir sayı değil,
   modalden arta kalan yükseklik. Seçici `.gy-detay > .gy-tabstack` — yukarıdaki `> *`
   kuralıyla aynı özgüllükte yazılırsa hangisinin kazandığı kaynak sırasına kalırdı.
   (Önce `.gy-kadro` idi; kadro sekme yığınına taşınınca demir de yığına geçti.) */
.gy-detay > .gy-tabstack { flex: 1 1 auto; min-height: 9rem; }

/* Koşu şeridi */
.gy-races {
    /* Satır arası boşluk ÜÇ yerde birden geçiyor: buradaki flex gap, yapışkan kolon
       başlığının o boşluğu sayfa rengiyle boyayan gölgesi ve pist başlığının `top`
       hesabı. Üçü elle yazılırsa biri değişince başlık kayar ya da boşluktan satır
       görünür — bu yüzden tek değişken. */
    --gy-satir-gap: .25rem;
    display: flex; flex-direction: column; gap: var(--gy-satir-gap);
    /* Kolon sablonu TEK yerde durur: baslik satiri ile veri satirlari AYNI izgarayi
       kullanmazsa baslik kaymis olur ve YANLIS kolonu adlandirir — bu, basligin hic
       olmamasindan kotudur. Son kolon `auto` DEGIL sabit: `auto` her izgarada kendi
       icerigine gore cozulur (baslikta "Durum" genisligi, satirlarda rozet genisligi)
       ve aradaki fark butun fr kolonlarini kaydirirdi. 7,6rem en uzun rozeti alir
       ("tahmin yok" / "no prediction"). */
    /* 3. kolon 4,4 -> 5,4rem: kimlik hucresi artik zeminin YANINDA pist durumunu da tasiyor
       ("Kum · Agir"), 4,4rem'de ikinci satir kirpiliyordu. Genislik SABIT kalmali (fr degil):
       icerige gore cozulseydi baslik ile satirlar farkli genisliklere duser, hiza kacardi. */
    /* 2. kolon 5 -> 5,9rem: KOSU hucresi artik ucuncu bir sey tasiyor (altili rozeti +
       para hapi). 5rem'de rozet buyuyunce hap ucuncu satira dusuyor, satir 46 -> 58px
       cikiyordu. Genislik TEK BASINA cozum degildi: ayni sonuc icin 7rem gerekiyordu ve
       o 32px'i at adlari kolonundan calardi. Onun yerine hucre icindeki sira degisti
       (sabit hap ustte, degisken rozet kendi satirinda) ve 5,9rem yetti — 14px. */
    --gy-kosu-kolonlari: 3.7rem 5.9rem 5.4rem minmax(12rem, 1.6fr) minmax(8.5rem, 1fr) minmax(8rem, 1fr) 7.6rem;
    --gy-kolon-h: 1.5rem;
}

/* Yapiskan kolon basligi. Pist basliginin USTUNDE durur (z-index 3 > 2), pist basligi da
   onun altina yapisir. Aradaki .4rem'lik flex bosluguna bulaniksiz golge ile sayfa rengi
   boyanir; boyanmazsa kaydirirken satirlar o seritten gecerken gorunur. */
.gy-race-head {
    position: sticky; top: 0; z-index: 3;
    display: grid; grid-template-columns: var(--gy-kosu-kolonlari);
    align-items: end; gap: var(--kmp-sp-3);
    height: var(--gy-kolon-h);
    /* +1px: satirlarin 1px kenarligi var, basligin yok — hizalama icin telafi edilir. */
    padding: 0 calc(.9rem + 1px) .25rem;
    background: var(--kmp-page-bg);
    box-shadow: 0 var(--gy-satir-gap) 0 0 var(--kmp-page-bg);
    font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
    color: var(--kmp-secondary);
}
.gy-race-head > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* PIYASA basliginin yanindaki fiyat saati. Oranlar gunde TEK TUR (~11:00) cekiliyor;
   saat yazilmazsa ogleden sonraki bir kosuya bakan kisi sabahin fiyatini "su anki oran"
   sanir. Rozet basligin KENDI hucresinin icinde akar — ayri bir kolon (ya da hucreye
   border-left) --gy-kosu-kolonlari izgarasini kaydirir, yapiskan baslik satirlarla
   hizasini kaybeder (v0.5.7 dersi). */
.gy-race-head__saat {
    margin-left: .3rem;
    font-weight: 500; letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    color: var(--kmp-secondary); opacity: .8;
}

/* Panoda şerit dock-fill'in dolduran halkasıdır: kalan yüksekliği kapar ve KENDİ içinde
   kayar. Sayfa kaydırmasına bırakılırsa ölçü şeridi ile alt not ekrandan çıkıyordu. */
.gy-races--fill { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: .2rem; }

/* Yapışkan pist başlığı — kaydırırken "hangi hipodrom?" sorusu ekranda kalır.
   Zemin SAYFA rengiyle dolu olmalı: saydam bırakılırsa satırlar altından geçerken
   yazıya karışır (aradaki boşluk da başlığın altında görünür kalırdı). */
.gy-races__pist {
    /* Kolon basliginin ALTINA yapisir: `top: 0` birakilirsa ikisi ayni yerde ust uste biner. */
    position: sticky; top: calc(var(--gy-kolon-h) + var(--gy-satir-gap)); z-index: 2;
    display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .6rem;
    padding: .2rem .15rem .18rem;
    background: var(--kmp-page-bg);
    border-bottom: 1px solid var(--kmp-border);
}
.gy-races__pist + .gy-race { margin-top: .1rem; }
.gy-races__pist-ad { font-size: .82rem; font-weight: 650; letter-spacing: -0.01em; }
.gy-races__pist-olcu { font-size: .74rem; color: var(--kmp-secondary); font-variant-numeric: tabular-nums; }
.gy-races__pist-olcu .gy-mark { margin-right: .2rem; }

/* Lejant + not: listenin altına demirli tek satır, şeritle birlikte kaymaz. */
.gy-races__alt-serit { flex: 0 0 auto; padding-top: var(--kmp-sp-2); }

.gy-race {
    display: grid;
    /* Yedi kolon: saat, kosu no, mesafe, BIZIM secim, PIYASA favorisi, sonuc, rozet.
       Hipodrom kolonu KALKTI (yapiskan pist basliginda yazili) — bosalan genislik at
       adlarina gitti; adlar eskiden uc noktaya donuyordu.
       Uc gorus ayni sirada durur; serit soldan saga taranarak okunabilsin diye. */
    grid-template-columns: var(--gy-kosu-kolonlari);
    align-items: center; gap: var(--kmp-sp-3);
    /* Yoğunluk: dolgu ve satır yüksekliği ölçekten gelir. `line-height` SAYI olarak
       verilir — çocuklar kendi punto'larından hesaplasın diye; piksel yazılsaydı .62rem'lik
       rozet de 13,3px'lik metinle aynı yüksekliği kaplardı. */
    padding: var(--gy-satir-y) .9rem;
    line-height: var(--gy-satir-lh);
    background: var(--kmp-surface);
    border: 1px solid var(--kmp-border);
    border-radius: var(--kmp-radius-md);
    box-shadow: var(--kmp-shadow-xs);
    text-decoration: none; color: inherit;
    transition: transform var(--kmp-transition), box-shadow var(--kmp-transition), border-color var(--kmp-transition);
}
.gy-race:hover { transform: translateY(-1px); box-shadow: var(--kmp-shadow-md); border-color: var(--kmp-primary-border-subtle); }
.gy-race__time { font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.gy-race__track { font-weight: 550; }
.gy-race__no { font-size: .8rem; font-weight: 550; color: var(--kmp-secondary); font-variant-numeric: tabular-nums; }
.gy-race__meta { font-size: .78rem; color: var(--kmp-secondary); }
/* Kosu kimligi: genis ekranda alt alta (mesafe / zemin), dar ekranda yan yana tek satir.
   Ayrac ikinci parcanin ::before'undadir; markup'a "·" yazilsaydi hucre dikeyken de
   gorunur, alt satirin basinda oksuz bir nokta dururdu. */
.gy-race__kimlik { display: flex; flex-direction: column; line-height: 1.25; }
.gy-race__pick { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
/* At satiri: isaret + ad + taki kodlari. Flex, cunku ucu tek bir metin akisi olsaydi
   `text-overflow: ellipsis` ADI degil satirin SONUNU (taki rozetlerini) kirpardi —
   ellipsis yalnizca tasan kutunun sonunda calisir. Simdi ad kendi kutusunda esner ve
   uc noktaya doner, rozetler kirpilmaz. */
.gy-race__horse { display: flex; align-items: baseline; gap: .3rem; min-width: 0; font-size: .88rem; }
.gy-race__horse b { font-weight: 600; }
/* Ad kolonun tamamini alir ama sifira kadar buzulebilir (min-width:0 olmadan flex
   ogesi icerigi kadar genis kalir ve rozetleri disari iter). */
.gy-race__ad { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gy-race__none { font-size: .82rem; color: var(--kmp-secondary); font-style: italic; }
.gy-race__horse .gy-mark { flex: 0 0 auto; vertical-align: baseline; }
/* Rozetler daralmaz (`flex: 0 0 auto`) ama panoda kadrodakinden bir tik kucuktur:
   burada adin yanindaki bir ek isarettir, kendi kolonu degil. */
.gy-race__horse .gy-taki { flex: 0 0 auto; }
.gy-race__horse .gy-taki__x { min-width: 1.15rem; height: 1.05rem; font-size: .62rem; }
.gy-race__alt { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.gy-race__alt .gy-bar { flex: 1 1 auto; min-width: 4rem; }
/* Rozet kolonu artik SABIT genislikte (baslikla hizalanabilmesi icin). Izgara ogesi
   varsayilan olarak esnedigi icin hap kolonun tamamina yayilirdi; `auto` kolonda kolon
   zaten hap kadar oldugundan bu gorunmuyordu. */
.gy-race > .gy-pill { justify-self: start; }

/* ═══ ALTILI RENK DİLİ (GENEL: /pano · /kosular · /kuponlar) ═══════════════════
   PİST = renk ailesi, ALTILI SIRASI = ton. Sarılar Kocaeli, kırmızılar Ankara;
   koyu olan 1. altılı, açık olan 2. Aynı gün üç ekranda birden görünüyorlar; renk
   her ekranda kendi başına dağıtılsaydı Ankara birinde kırmızı ötekinde sarı olurdu.
   Dağıtımı yapan tek kural C# tarafında: `AltiliRenkleri`.

   Renk ÜÇ girdiden bileşir — `--gy-pist-h` (ton açısı), `--gy-pist-l0` (taban
   parlaklık), `--gy-pist-ton-*` (ton kayması). Bileşim `.gy-renk` taşıyan ELEMANDA
   yapılır, kapsayıcıda değil: özel değişkenler HESAPLANMIŞ değerle miras alınır, yani
   nihai renk üstte çözülürse alttaki `.gy-ton--2` artık hiçbir şeyi değiştirmez.
   Bu yüzden girdilerin varsayılanı `:root`'ta, bileşim ise renklenen her elemanda.

   Renk tek başına iddia taşımaz: pistin adı ve "1. Altılı" rozeti ekranda yazılı
   kalır (renk körlüğü tabanı). */
:root {
    --gy-pist-h: 232;
    --gy-pist-l0: 52%;
    --gy-pist-ton-l: 0%;
    --gy-pist-ton-s: 0%;
}
.gy-renk {
    --gy-pist-renk: hsl(var(--gy-pist-h)
                        calc(64% + var(--gy-pist-ton-s))
                        calc(var(--gy-pist-l0) + var(--gy-pist-ton-l)));
}
/* Sekiz renk: dokuzuncu pist başa döner. Sarı ve yeşil gözde daha AÇIK okunduğu için
   taban parlaklıkları düşürüldü — renkler eşit ağırlıkta görünsün diye. */
.gy-pist--1 { --gy-pist-h: 358; }                        /* kırmızı  */
.gy-pist--2 { --gy-pist-h: 44;  --gy-pist-l0: 42%; }     /* sarı     */
.gy-pist--3 { --gy-pist-h: 208; }                        /* mavi     */
.gy-pist--4 { --gy-pist-h: 152; --gy-pist-l0: 40%; }     /* yeşil    */
.gy-pist--5 { --gy-pist-h: 278; }                        /* mor      */
.gy-pist--6 { --gy-pist-h: 24;  --gy-pist-l0: 48%; }     /* turuncu  */
.gy-pist--7 { --gy-pist-h: 328; }                        /* pembe    */
.gy-pist--8 { --gy-pist-h: 182; --gy-pist-l0: 38%; }     /* turkuaz  */
/* Ton SIRA ile artar: 1. altılı koyu, 2. açık, 3. daha açık. Aynı pistin iki altılısı
   aynı renk ailesinde kalır ama birbirine karışmaz. */
.gy-ton--2 { --gy-pist-ton-l: 15%; --gy-pist-ton-s: 20%; }
.gy-ton--3 { --gy-pist-ton-l: 27%; --gy-pist-ton-s: 30%; }

/* 6'li ganyana dahil kosu: solda vurgu cubugu + KOSU hucresinde rozet.
   Cubuk `border-left` DEGIL `inset box-shadow`: kenarlik satirin ic genisligini 3px
   daraltir ve altili satirlari yapiskan kolon basligindan kaydirirdi (baslik ile satir
   ayni --gy-kosu-kolonlari degiskenini paylasiyor, hiza piksel piksel tutmali).
   Hover'da golge YENIDEN yazilmali: tek `box-shadow` ozelligi var, `.gy-race:hover`
   cubugu silerdi. */
.gy-race--altili {
    box-shadow: inset .18rem 0 0 0 var(--gy-pist-renk, var(--kmp-primary)), var(--kmp-shadow-xs);
    border-color: color-mix(in srgb, var(--gy-pist-renk, var(--kmp-primary)) 38%, transparent);
}
.gy-race--altili:hover {
    box-shadow: inset .18rem 0 0 0 var(--gy-pist-renk, var(--kmp-primary)), var(--kmp-shadow-md);
}
/* İKİ altılının birden ayağı olan koşu (11.08.2026: 1–6 ve 4–9 → 4/5/6 ikisinde).
   Cubuk tek renk olsaydi satir hangi altiliya ait gorunurdu; oysa ikisine birden ait.
   Ust yarisi satirin kendi tonu, alt yarisi BIR SONRAKI ton — ikinci ton satirin
   degiskenlerinden hesaplanir, sabit yazilmaz (2. ve 3. altilida da dogru cikar).
   Inset golge gradyan olamadigi icin cubuk arka plan goruntusu: yerlesimi etkilemez,
   yani yapiskan kolon basligiyla hiza bozulmaz — `border-left`in bozdugu sey buydu. */
.gy-race--cift {
    box-shadow: var(--kmp-shadow-xs);
    background-image: linear-gradient(180deg,
        var(--gy-pist-renk) 0 50%,
        hsl(var(--gy-pist-h)
            calc(84% + var(--gy-pist-ton-s))
            calc(var(--gy-pist-l0) + var(--gy-pist-ton-l) + 15%)) 50% 100%);
    background-size: .18rem 100%;
    background-repeat: no-repeat;
    background-position: left top;
}
.gy-race--cift:hover { box-shadow: var(--kmp-shadow-md); }

/* Rozetin rengi de satirin rengidir: cubuk ile rozet ayri renkte dururlarsa
   goz ikisini iki ayri olgu sanar. Kaynak ayrimi (resmi/kupon) rengi DEGIL
   cizgi bicimini kullanmaya devam eder — bkz. `.gy-altili--kupon`. */
.gy-altili.gy-renk {
    color: var(--gy-pist-renk);
    background: color-mix(in srgb, var(--gy-pist-renk) 14%, transparent);
    border-color: color-mix(in srgb, var(--gy-pist-renk) 42%, transparent);
}
.gy-altili__ayak.gy-renk { color: var(--gy-pist-renk); opacity: 1; }

/* Ayak rozeti. Bilginin KAYNAGI rengi belirler: odeme kartindan gelen resmi bilgi dolu
   (primary), kendi kuponumuzdan gelen ise kesik cizgili ve notr — "resmi" ile "bizim
   oynadigimiz" ayni renkte gorunurse kullanici ikisini ayni sanir. */
.gy-altili {
    display: inline-flex; align-items: center; gap: .2rem;
    margin-left: .3rem; padding: .02rem .3rem;
    font-size: .68rem; font-weight: 700; white-space: nowrap;
    color: var(--kmp-primary-text); background: var(--kmp-primary-subtle);
    border: 1px solid var(--kmp-primary-border-subtle);
    border-radius: var(--kmp-radius-sm);
}
.gy-altili__ayak { font-variant-numeric: tabular-nums; opacity: .85; }

/* Altilinin TJK'daki sira numarasi ("1." / "2."). Ayak numarasindan daha SONIK: rozette iki
   sayi yan yana duruyor ve okunmasi gereken sira degil ayaktir — "1.4" gozle once "4" olarak
   okunmali, "1." onu yalnizca hangi altiliya ait oldugunu soylemeli. */
.gy-altili__sira { opacity: .62; font-weight: 600; letter-spacing: -.02em; }
.gy-altili--kupon {
    color: var(--kmp-secondary); background: transparent;
    border-style: dashed; border-color: var(--kmp-border);
}
/* Kaynak ile pist AYRI iki bilgidir ve rozet ikisini birden tasir: KESIK CIZGI
   "bu bilgi bizim kuponumuzdan" der, RENK "bu Ankara'nin 2. altilisi" der. Renk
   kesik cizgiyi ezmemeli — bu kural sonra geldigi ve esit ozgullukte oldugu icin
   `.gy-altili.gy-renk`in dolgusunu geri alir, rengini korur. */
.gy-altili--kupon.gy-renk {
    color: color-mix(in srgb, var(--gy-pist-renk) 65%, var(--kmp-secondary));
    background: transparent;
    border-style: dashed;
    border-color: color-mix(in srgb, var(--gy-pist-renk) 40%, transparent);
}

/* Rozet TIKLANABILIR oldugunda (pano basligi): ekrani o altilinin kosularina suzer.
   Tiklanabilirligi RENK degil DAVRANIS anlatir — imlec, hover'da hafif kalkma ve focus
   halkasi. Renk zaten pisti soyluyor; tiklanabilirligi de renge yuklemek iki bilgiyi tek
   kanala sikistirirdi. `text-decoration:none` sart: <a> varsayilan altcizgisi rozetin
   cercevesiyle carpisir. */
.gy-altili--link {
    text-decoration: none; cursor: pointer;
    transition: var(--kmp-transition);
}
.gy-altili--link:hover { transform: translateY(-1px); box-shadow: var(--kmp-shadow-xs); }
/* --kmp-focus-ring bir BOX-SHADOW degeridir (`0 0 0 .2rem rgb(...)`); `outline:` olarak
   yazilirsa gecersiz kalir ve halka HIC cizilmez — sessizce. */
.gy-altili--link:focus-visible { outline: none; box-shadow: var(--kmp-focus-ring); }
/* href yoksa (kok kosu bulunamadi) Blazor <a>'yi bagsiz cizer: imlec de dusmeli, yoksa
   tiklanabilir gorunup hicbir sey yapmaz. */
.gy-altili--link:not([href]) { cursor: default; }
.gy-altili--link:not([href]):hover { transform: none; box-shadow: none; }

/* Secili altili. Ayirt edici isaret DOLGU + kalin cerceve: pistin rengi korunur (hangi
   pist oldugu hala okunur) ama rozet "basili dugme" gibi durur. Ton karartmasi tek basina
   yetmezdi — iki altili zaten koyu/acik ton farkiyla ayriliyor, uzerine ucuncu bir ton
   koymak ikisini birbirine karistirirdi. */
.gy-altili--link.is-secili {
    font-weight: 800;
    box-shadow: inset 0 0 0 1px currentColor;
}
.gy-altili--link.is-secili.gy-renk {
    background: color-mix(in srgb, var(--gy-pist-renk) 26%, transparent);
    border-color: var(--gy-pist-renk);
}
/* Kesik cizgi (kupondan okunmus altili) secilince de KALIR: secim, bilginin kaynagini
   degistirmez. */
.gy-altili--kupon.is-secili { background: color-mix(in srgb, var(--kmp-secondary) 14%, transparent); }
.gy-altili--kupon.is-secili.gy-renk { background: color-mix(in srgb, var(--gy-pist-renk) 18%, transparent); }

/* ------------------------------------------------------------
   SUZGEC SERIDI (.gy-suzgec) — ekran nesnesi DARALDIGINDA yazar
   ------------------------------------------------------------
   Olcu seridinin USTUNDE durur, cunku altindaki her sayinin kapsamini o belirler. Dock
   cocugu olarak sikistirilir (flex: 0 0 auto) — kosu listesinden yukseklik calmaz. */
.gy-suzgec {
    flex: 0 0 auto;
    display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .6rem;
    margin-top: var(--kmp-sp-2);
    padding: .3rem .6rem;
    background: var(--kmp-primary-subtle);
    border: 1px solid var(--kmp-primary-border-subtle);
    border-radius: var(--kmp-radius-pill);
    font-size: .76rem;
}
.gy-suzgec__etiket {
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--kmp-primary-text);
}
.gy-suzgec__pist { font-weight: 650; letter-spacing: -0.01em; }
.gy-suzgec__olcu { color: var(--kmp-secondary); font-variant-numeric: tabular-nums; }
/* "Tumunu goster" saga demirlenir: cikis her zaman ayni yerde durur. */
.gy-suzgec__temiz { margin-left: auto; font-weight: 600; }

/* ------------------------------------------------------------
   KAPSAMA SERIDI (.gy-uyari) — "kosu geliyor ama tahmin yok"
   ------------------------------------------------------------
   28.08.2026: pano bombos acildi ve bunu soyleyen tek sey her satirdaki soluk "tahmin yok"
   ibaresiydi. Serit gun cubugunun ALTINDA, listenin USTUNDE durur; dock cocugu olarak
   sikistirilir (flex: 0 0 auto) — kosu listesinden yukseklik calmaz.

   Renk `danger` DEGIL `warning`: veri yanlis degil EKSIK, ve eksiklik saat basi kosan turla
   kendiliginden kapanabilir. Kirmizi bir serit, duzelmesi beklenen bir hali arizayla ayni
   tonda gosterirdi. */
.gy-dock > .gy-uyari { flex: 0 0 auto; }
.gy-uyari {
    display: flex; align-items: flex-start; gap: .5rem;
    margin-top: var(--kmp-sp-2);
    padding: .5rem .7rem;
    background: var(--kmp-warning-subtle);
    /* Cerceve `--kmp-warning`den TURETILIR. `--kmp-warning-text` / `--kmp-warning-border-subtle`
       bu depoda hicbir yerde TANIMLI DEGIL — oteki kullanim yerleri hep yedek deger veriyor
       (`var(--kmp-warning-text, #92400e)`). Yedeksiz yazilsaydi kural sessizce duserdi: sinif
       dururdu, rengi olmazdi. */
    border: 1px solid color-mix(in srgb, var(--kmp-warning) 35%, transparent);
    border-left: 3px solid var(--kmp-warning);
    border-radius: var(--kmp-radius-md);
    /* 22.09.2026: .8rem -> .875rem (kullanici: «font 1 tik daha buyuk olmali»). Serit para
       soyleyen tek yer; panonun en kucuk yazisi olmasi icin bir sebep yoktu. */
    font-size: .875rem;
}
.gy-uyari > svg { flex: 0 0 auto; margin-top: .15rem; color: var(--kmp-warning); }
/* Metinler alt alta sarar: dar ekranda kirpmak, uyarinin tam da eylem soyleyen yarisini
   goturur. */
.gy-uyari__govde { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .45rem; min-width: 0; }
.gy-uyari__govde strong { color: var(--kmp-warning); font-weight: 650; }
.gy-uyari__eylem { color: var(--kmp-secondary); }

/* KAPSAMA seridi ve HESAP-GECIKTI seridi warning tonunu `.gy-uyari` tabanindan miras alir --
   ama adin CSS'te bir KARSILIGI olmak ZORUNDADIR (StilSiniflariTests): "simdilik stilsiz
   kanca" tam da sessiz kusurun kiligidir. Kural tonu ACIKCA yeniden yazar; taban ile
   modifikator boylece ayni seyi soyler, ve bir gun ayrilirlarsa fark burada gorunur.
   Ikisi ayni tonda konusur cunku ayni seyi soylerler: gunun tahmini eksik ve yapilacak is
   ayni (turu elle kostur). Fark yalniz ne zaman konustuklaridir - kapsama kosuya 60 dk
   kala, hesap-gecikti saatler once. */
.gy-uyari--kapsama,
.gy-uyari--hesap-gec {
    background: var(--kmp-warning-subtle);
    border-color: color-mix(in srgb, var(--kmp-warning) 35%, transparent);
    border-left-color: var(--kmp-warning);
}
.gy-uyari--kapsama > svg,
.gy-uyari--hesap-gec > svg,
.gy-uyari--kapsama .gy-uyari__govde strong,
.gy-uyari--hesap-gec .gy-uyari__govde strong { color: var(--kmp-warning); }

/* GUN KAYMASI seridi. Kapsama uyarisiyla ayni bicim ailesinde ama BASKA renkte (primary,
   warning degil): "bugunun tahminleri eksik" bir EYLEM cagrisidir, "baktigin gun bugun degil"
   ise bir DURUM bildirimidir. Ikisi ayni sari tonda dururlarsa, ust uste dustukleri gun
   kullanici hangisinin ne dedigini ayirt edemez -- ve ust seridin cumlesi alttakini gecersiz
   kilar (bugunun karti yoksa "bugunun tahminleri eksik" zaten yanlis soruyu sorar).
   Kullanilan iki jeton da bu dosyada TANIMLI (--kmp-primary, --kmp-primary-subtle; ucu de
   light/dark bloklarinda) -- tanimsiz jetonla yazilsaydi kural sessizce duserdi. */
.gy-uyari--gun {
    background: var(--kmp-primary-subtle);
    border-color: color-mix(in srgb, var(--kmp-primary) 30%, transparent);
    border-left-color: var(--kmp-primary);
}
.gy-uyari--gun > svg,
.gy-uyari--gun .gy-uyari__govde strong { color: var(--kmp-primary); }

/* DEGER seridi. Ucuncu renk (success) cunku ucuncu bir sey soyluyor: kapsama = eksik veri
   (warning), gun kaymasi = baktigin gun degisti (primary), deger = ELINDE BIR FIRSAT VAR.
   Ucu de ust uste dusebilir; ayni tonda dururlarsa serit yiginin okunmaz.
   Jetonlar bu dosyada TANIMLI (--kmp-success / --kmp-success-subtle; light + dark).

   `__olcu` satiri KASTEN tam genislikte ve daha sonik: "kar degil" cumlesi seridin icinde
   durur ama basligi bastirmaz. Title'a saklanamaz -- fareyle uzerine gelinmeyen bir uyari,
   yazilmamis uyaridir (mobilde hover diye bir sey de yoktur). */
.gy-uyari--deger {
    background: var(--kmp-success-subtle);
    border-color: color-mix(in srgb, var(--kmp-success) 30%, transparent);
    border-left-color: var(--kmp-success);
}
.gy-uyari--deger > svg,
.gy-uyari--deger .gy-uyari__govde strong { color: var(--kmp-success); }
/* SATIR DUZENI (22.09.2026). Serit tek cumleden SATIRLARA ayrildi: her satir tam
   genislikte (`flex: 1 0 100%`) ki govde flex-wrap ile ikisini yan yana sikistirmasin.
   Govde satir arasi burada acilir — dort satir bitisik dizildiginde yine tek blok gibi
   okunuyordu. */
.gy-uyari__baslik { flex: 1 0 100%; font-size: .94rem; }
.gy-uyari__satir  { flex: 1 0 100%; line-height: 1.45; }
/* Yer satiri: hipodrom/kosu/at — goz once buraya duser, o yuzden biraz daha koyu. */
.gy-uyari__nerede { font-weight: 600; }
/* Vaat satiri tek basina TASINABILIR bir cumledir ("1 TL koy, ~5,01 TL al"); seridin
   sebebi odur, bir tik buyuk ve kalin yazilir. */
.gy-uyari__vaat   { font-size: .95rem; font-weight: 650; }
/* Dayanak satirlari: gerekce, bagirmaz. */
.gy-uyari__not    { color: var(--kmp-secondary); }

/* `__olcu` satiri KASTEN tam genislikte ve daha sonik. Tek dev paragraf yerine MADDELER:
   her maddesi ayri bir olcumdur, ayri ayri yanlislanabilir ve ayri ayri okunabilir. */
.gy-uyari__olcu {
    flex: 1 0 100%;
    margin-top: .45rem;
    padding-top: .4rem;
    border-top: 1px dashed color-mix(in srgb, var(--kmp-success) 30%, transparent);
    color: var(--kmp-secondary);
    font-size: .8rem; line-height: 1.5;
}
.gy-uyari__olcu-baslik { display: block; margin-bottom: .2rem; color: var(--kmp-secondary); font-weight: 650; }
.gy-uyari__olcu-liste { margin: 0; padding-left: 1.05rem; }
.gy-uyari__olcu-liste > li { margin-bottom: .22rem; }
.gy-uyari__olcu-liste > li:last-child { margin-bottom: 0; }

/* HESAP seridi (02.09.2026). Dorduncu bir renk DEGIL: notr griler. Cunku "bugunun hesabi
   henuz kosmadi" bir ariza da bir firsat da degildir -- yapilacak tek sey beklemektir.
   Warning tonunda yazilsaydi, gercekten gec kalinan gunde ayirt edilemezdi.
   Kullanilan uc jeton da bu dosyada TANIMLI (--kmp-secondary-bg / --kmp-secondary /
   --kmp-border; light + dark) -- tanimsiz jetonla yazilsaydi sinif durur, rengi olmazdi.

   GECIKTI hali bu notr tonu KULLANMAZ: kurali yukarida, kapsama seridiyle AYNI kuralin
   icinde durur (`.gy-uyari--kapsama, .gy-uyari--hesap-gec`). Cunku gecikme gercek bir
   arizadir -- notr gri ile yazilsaydi, tam da bagirmasi gereken gunde fisildardi. */
.gy-uyari--hesap {
    background: var(--kmp-secondary-bg);
    border-color: var(--kmp-border);
    border-left-color: var(--kmp-secondary);
}
.gy-uyari--hesap > svg,
.gy-uyari--hesap .gy-uyari__govde strong { color: var(--kmp-secondary); }

/* Olcu seridinde kapsam isareti: o hucrenin sayisi suzgecten ETKILENMIYOR demek.
   Etiketin yaninda ve daha sonik — hucrenin adini bastirmamali. */
.gy-stat__kapsam {
    margin-left: .3rem; padding: 0 .3rem;
    font-size: .62rem; font-weight: 600; text-transform: none; letter-spacing: 0;
    color: var(--kmp-secondary);
    border: 1px dashed var(--kmp-border);
    border-radius: var(--kmp-radius-sm);
}

/* "Paramiz bu kosuda" isareti. Altili rozetiyle ayni bicim ailesinde ama BASKA renkte
   (success): biri kosunun altiliya ait olup olmadigini, digeri kasadan para cikip
   cikmadigini soyler — ayni tonda dururlarsa iki farkli olgu tek olgu sanilir. */
.gy-para {
    display: inline-flex; align-items: center; gap: .12rem;
    margin-left: .3rem; padding: .02rem .3rem;
    font-size: .68rem; font-weight: 700; white-space: nowrap;
    color: var(--kmp-success); background: var(--kmp-success-subtle);
    border: 1px solid color-mix(in srgb, var(--kmp-success) 30%, transparent);
    border-radius: var(--kmp-radius-sm);
}
.gy-para__adet { font-variant-numeric: tabular-nums; }

/* Dar ekranda yedi kolon sigmaz: saat + icerik + rozet duzenine dusulur, uc gorus
   alt alta yigilir. Yatay kaydirma birakmak seridi okunmaz kilardi. */
@media (max-width: 991.98px) {
    .gy-race { grid-template-columns: 3.6rem 1fr auto; row-gap: .45rem; }
    /* Kimlik hucresi eskiden `display:none` idi: telefonda kosunun mesafesi de zemini de
       hic gorunmuyordu — degeri olmayan kolon gizlenir, degeri olan kolon KUCULTULUR.
       Satirin tamamini kaplayip tek satira dizilir (mesafe · zemin · pist durumu). */
    .gy-race__kimlik {
        grid-column: 2 / -1; flex-direction: row; gap: .35rem;
        font-size: .72rem;
    }
    .gy-race__kimlik > span + span::before { content: "·"; margin-right: .35rem; opacity: .6; }
    .gy-race__pick { grid-column: 2 / -1; }
    /* Satirlar yigildigi icin adlandiracak kolon kalmaz: baslik YANLIS olurdu, kaldirilir.
       Kimlik burada satir icindeki isaretlerde (MODEL/FAVORİ/KAZANDI) ve lejantta durur. */
    .gy-race-head { display: none; }
    .gy-races__pist { top: 0; }
}

/* Telefon — satır altı satırdan BEŞ satıra iner.
   Ölçüm (canlı v0.6.18, 390x844): satır 193px, on altı koşunun BİRİ ekrana sığıyordu.
   Boy üç yerden geliyordu: (1) durum rozeti kendi başına altıncı satırdaydı, (2) üç
   seçim hücresinin her biri "ad" + "alt bilgi" diye iki satıra yığılıyordu, (3) satır
   arası .45rem. Üçü de bilgi KAYBETMEDEN düzeltilebilir — aşağıdaki hiçbir kural bir
   veriyi ekrandan kaldırmıyor, hepsi aynı veriyi daha az mürekkeple yazıyor. */
@media (max-width: 767.98px) {
    .gy-race { row-gap: .3rem; padding-left: .7rem; padding-right: .7rem; }
    /* Rozet ilk satırın üçüncü kolonuna taşınır: orası zaten boştu (saat + koşu no
       ikilisi satırın yarısını doldurmuyor), rozet ise kendi satırında 20px + boşluk
       yiyordu. */
    .gy-race > .gy-pill { grid-row: 1; grid-column: 3; justify-self: end; }
    /* Seçim hücresi yatar: ad ile alt bilgi (form, olasılık, oran, finiş) yan yana.
       Sarma AÇIK kalır — uzun bir ad + dört takı kodu sığmazsa o hücre iki satıra
       döner; kırpmak yerine tek satırın büyümesi tercih edilir. */
    .gy-race__pick { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: .1rem .4rem; }
    .gy-race__alt { flex: 0 1 auto; gap: .35rem; }
    /* Çubuk, sayının görsel tekrarıdır (aynı olasılık iki kez yazılı): dar ekranda sayı
       kalır, çubuk gider. Sayının 2,9rem'lik sabit genişliği de burada gereksiz —
       kolon hizası diye tutuluyordu, telefonda kolon yok. */
    .gy-race__alt .gy-bar { flex: 0 0 auto; min-width: 0; }
    .gy-race__alt .gy-bar__track { display: none; }
    .gy-race__alt .gy-bar__value { min-width: 0; }
    /* Son 6 kutuları METNE döner: aynı altı koşu, yarı yer (6x19px yerine ~6x9px).
       Kutunun taşıdığı anlam RENGE geçer — 1 ve 2 yeşil, 3 marka rengi, tabela dışı
       soluk; en yeni koşu altı çizili (geniş ekranda halka ile vurguluydu). */
    .gy-race__pick .gy-form6 { gap: .2rem; }
    .gy-race__pick .gy-form6__x {
        width: auto; height: auto; min-width: .5rem; padding: 0;
        background: transparent; border-color: transparent; box-shadow: none;
        font-size: .72rem;
    }
    .gy-race__pick .gy-form6__x--1 { color: var(--kmp-success); }
    .gy-race__pick .gy-form6__x--2 { color: var(--kmp-success); opacity: .85; }
    .gy-race__pick .gy-form6__x--3 { color: var(--kmp-primary-text); }
    .gy-race__pick .gy-form6__x--yeni { text-decoration: underline; text-underline-offset: .12rem; }
}

/* Sonuç rozeti */
.gy-pill {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .15rem .6rem;
    font-size: .74rem; font-weight: 600; white-space: nowrap;
    border-radius: var(--kmp-radius-pill);
    border: 1px solid transparent;
}
.gy-pill--wait { color: var(--kmp-secondary); background: var(--kmp-secondary-bg); border-color: var(--kmp-border); }
.gy-pill--hit { color: var(--kmp-success); background: var(--kmp-success-subtle); border-color: color-mix(in srgb, var(--kmp-success) 32%, transparent); }
.gy-pill--miss { color: var(--kmp-danger); background: var(--kmp-danger-subtle); border-color: color-mix(in srgb, var(--kmp-danger) 30%, transparent); }
.gy-pill--none { color: var(--kmp-warning); background: var(--kmp-warning-subtle); border-color: color-mix(in srgb, var(--kmp-warning) 30%, transparent); }
/* Gayri resmî sonuç: koşu bitti, sıralama belli, ÖDEMELER ilan edilmedi.
   Rozetin RENGİ değişmez — tuttu yeşil kalır, tutmadı kırmızı. Değişen tek şey
   çerçevenin kesikli olması ve sonuna düşen yıldız: "bu satır henüz mühürlenmedi".
   Neden renk değil kenar: renk sonucun NE olduğunu söyler, kesinlik ayrı bir eksen;
   ikisini aynı kanala bindirmek "tuttu mu?" sorusunu okunmaz hâle getirirdi.
   Ödemeler açıklanınca resmî tur bayrağı sıfırlar ve işaret kendiliğinden kalkar. */
.gy-pill--gecici { border-style: dashed; }
.gy-pill--gecici .gy-pill__yazi::after {
    content: "*";
    margin-left: .12em;
    font-weight: 700;
    opacity: .75;
}
/* Koşulmamış satırın iki hâli. Rozet artık kelime değil SAAT yazdığı için renk tek
   ayırt edici işaret: eşiğin altındaki koşu (15 dk) uyarı rengine geçer, saati geçmiş
   koşu markaya. Durum ADI title'da kalır — rengi okuyamayan da öğrenebilsin. */
.gy-pill--yakin {
    color: var(--kmp-warning); background: var(--kmp-warning-subtle);
    border-color: color-mix(in srgb, var(--kmp-warning) 34%, transparent);
}
.gy-pill--basladi {
    color: var(--kmp-primary-text); background: var(--kmp-primary-subtle);
    border-color: var(--kmp-primary-border-subtle);
}
/* Rozetin yazısı kendi öğesinde: sayacı tazeleyen betik yalnız BU düğümün metnini
   değiştirir — hapın tamamına yazsaydı yanındaki nabız noktasını silerdi.
   Rakamlar tablo genişlikli: "1 sa 53 dk" → "1 sa 52 dk" geçişinde rozet zıplamaz. */
.gy-pill__yazi { font-variant-numeric: tabular-nums; white-space: nowrap; }
.gy-pill__dot { width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.gy-pill--wait .gy-pill__dot { animation: gy-pulse 2s var(--kmp-ease) infinite; }
/* Yaklaşan koşuda nabız HIZLANIR: aciliyet renkle birlikte tempoyla da anlatılır. */
.gy-pill--yakin .gy-pill__dot { animation: gy-pulse 1s var(--kmp-ease) infinite; }
.gy-pill--basladi .gy-pill__dot { animation: gy-pulse 1.4s var(--kmp-ease) infinite; }
@keyframes gy-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ── Koşan at ──────────────────────────────────────────────────────────────────
   "Başladı" bir DURUM adıydı ve kıpırdamayan bir kelimeydi: on yedi satırlık bir
   listede, saati gelmiş koşuyu henüz sırasını bekleyenden ayırt ettirmiyordu.
   Saati geçmiş koşu artık dörtnala bir at çizer — hareket, gözün listede ilk
   yakaladığı şeydir. Kelimenin kendisi kaybolmaz, rozetin `title`ında durur:
   rengi ve hareketi okuyamayan da neye baktığını öğrenebilsin.

   NOT: "koşuyor" DEMİYORUZ. Canlı yayın verimiz yok; at, koşunun SAATİNİN geldiğini
   söyler — koşu ya koşuluyordur ya bitmiş ama sonucu henüz gelmemiştir. */
/* ⚠️ IKONUN adi `gy-ikon-at`; kadro ızgarasındaki AT HÜCRESİ ise `gy-at` (bkz. aşağıda,
   "Kadro" bölümü). v0.6.41'de koşan at ikonu `gy-at` adıyla eklendi ve hücrenin ölçüsünü
   1em × 1em'e düşürdü — at adı ekrandan tamamen kayboldu. Aynı ad iki ayrı şeyi
   adlandırırsa sonraki kural öncekini "düzeltmez", ikisi ÜST ÜSTE biner. */
.gy-ikon-at { width: 1em; height: 1em; }
/* Nabız noktası ile at rozetin içinde YAN YANA durur; hangisinin görüneceğine hâl
   sınıfı karar verir. Neden CSS: hâli tarayıcıdaki sayaç da değiştirebiliyor
   (gy-shell.js `haliIsle`) — seçimi CSS yapmazsa JS'in SVG çizmesi gerekirdi. */
.gy-pill .gy-ikon-at, .gy-siradaki__cip .gy-ikon-at { display: none; }
.gy-pill--basladi .gy-ikon-at, .gy-siradaki__cip--basladi .gy-ikon-at { display: inline-block; }
.gy-pill--basladi .gy-pill__dot { display: none; }
.gy-ikon-at--kosar { animation: gy-dortnala 1.05s var(--kmp-ease) infinite; transform-origin: 62% 82%; }
@keyframes gy-dortnala {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    22%      { transform: translate(.07em, -.15em) rotate(-7deg); }
    48%      { transform: translate(0, .02em) rotate(1deg); }
    72%      { transform: translate(-.07em, -.09em) rotate(5deg); }
}
/* Hareket sonuç DEĞİL bir işarettir: hareketi kapatan kullanıcı bilgiyi kaybetmez,
   at yerinde durur ve nabız noktası ile rengi anlatmayı sürdürür. */
@media (prefers-reduced-motion: reduce) {
    .gy-ikon-at--kosar { animation: none; }
}

/* ── "Sırada" şeridi ───────────────────────────────────────────────────────────
   Ekranın ilk sorusu "şimdi ne var?" idi ve pano bunu cevaplamıyordu. Şerit pist
   pist SIRADAKİ koşuyu, saatini ve kalan süreyi yazar; iddiası saattir, tahmin değil.
   Dar ekranda KENDİ İÇİNDE yatay kayar — sayfa gövdesi asla yatay kaymaz. */
.gy-siradaki {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: var(--kmp-sp-2);
    min-width: 0;
    margin-bottom: .25rem;
}
.gy-siradaki__baslik {
    flex: 0 0 auto;
    font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--kmp-secondary);
}
.gy-siradaki__seride {
    flex: 1 1 auto; min-width: 0;
    display: flex; gap: .4rem;
    overflow-x: auto; scrollbar-width: thin;
    padding-bottom: .1rem;
}
.gy-siradaki__cip {
    flex: 0 0 auto; min-width: 8.5rem;
    display: grid; gap: 0;
    padding: .2rem .5rem;
    line-height: var(--gy-satir-lh);
    background: var(--kmp-surface);
    border: 1px solid var(--kmp-border);
    /* Sol vurgu çubuğu: burada `border-left` GÜVENLİ — .gy-race'in aksine bu şerit
       yapışkan kolon başlığıyla ızgara paylaşmıyor, 3px hizayı kaydırmıyor. */
    border-left: .18rem solid var(--kmp-border);
    border-radius: var(--kmp-radius-md);
    box-shadow: var(--kmp-shadow-xs);
    text-decoration: none; color: inherit;
    transition: transform var(--kmp-transition), box-shadow var(--kmp-transition), border-color var(--kmp-transition);
}
.gy-siradaki__cip:hover {
    transform: translateY(-1px);
    box-shadow: var(--kmp-shadow-md);
    border-color: var(--kmp-primary-border-subtle);
}
.gy-siradaki__pist { font-size: .74rem; font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; }
.gy-siradaki__satir { display: flex; align-items: baseline; gap: .3rem; white-space: nowrap; }
.gy-siradaki__no { font-size: .66rem; color: var(--kmp-secondary); }
.gy-siradaki__saat { font-size: .7rem; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Sayaç KENDİ düğümünde (içteki span): tazeleyen betik yalnız o düğümün metnini
   değiştirir — kabuğa yazsaydı yanındaki koşan atı silerdi. Kabuk yalnız hizalar. */
.gy-siradaki__kalan {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .84rem; font-weight: 700; letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums; white-space: nowrap;
    color: var(--kmp-secondary);
}
/* Cipin secim satiri: isaret + at + olasilik. Cip `flex: 0 0 auto` oldugu icin genisligini
   ICERIK belirler — uzun bir at adi tek cipi digerlerinin iki kati yapardi; ad kirpilir ki
   serit esit ritimde kalsin. Olasilik saga demirlenir (1fr bosluk ortada). */
.gy-siradaki__secim {
    display: flex; align-items: baseline; gap: .25rem;
    max-width: 12rem; margin-top: .08rem;
    font-size: .7rem;
}
.gy-siradaki__at { flex: 1 1 auto; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gy-siradaki__olasilik { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--kmp-primary-text); }
/* Tahminsiz kosu: sayinin yerini bos birakmak "tahmin var ama yuklenemedi" gibi okunur. */
.gy-siradaki__yok { font-size: .68rem; font-style: italic; color: var(--kmp-secondary); }
.gy-siradaki__secim .gy-mark { flex: 0 0 auto; padding: 0 .26rem; font-size: .62rem; }
.gy-siradaki__meta { font-size: .64rem; color: var(--kmp-secondary); white-space: nowrap; }
.gy-siradaki__cip--yakin {
    border-left-color: var(--kmp-warning);
    background: var(--kmp-warning-subtle);
}
.gy-siradaki__cip--yakin .gy-siradaki__kalan { color: var(--kmp-warning); }
.gy-siradaki__cip--basladi { border-left-color: var(--kmp-primary); }
.gy-siradaki__cip--basladi .gy-siradaki__kalan { color: var(--kmp-primary-text); }
/* Kadrosu acilan cip: panel hangi cipin altinda acildigini kendisi soylesin. */
.gy-siradaki__cip--kadrolu { box-shadow: var(--kmp-shadow-md); border-color: var(--kmp-primary-border-subtle); }

/* ============================================================
   SIRADAKI KOSUNUN KADROSU (.gy-kadroluk) — seridin altinda, tek kosu icin
   Gunun EN YAKIN kosusunun atlari; koleksiyon degil KARAR yuzeyi: model
   olasiligina gore sirali, secimimiz vurgulu. Liste cok-kolonlu izgaraya
   yayilir — 12 atlik bir kadro alt alta yazilsaydi asil icerik olan gun
   listesini ekrandan iterdi.
   ============================================================ */
.gy-siradaki-blok { flex: 0 0 auto; display: flex; flex-direction: column; min-width: 0; }
.gy-kadroluk {
    flex: 0 0 auto;
    margin-bottom: .25rem;
    background: var(--kmp-surface);
    border: 1px solid var(--kmp-border);
    border-radius: var(--kmp-radius-md);
    box-shadow: var(--kmp-shadow-xs);
    overflow: hidden;
}
.gy-kadroluk__baslik {
    display: flex; align-items: baseline; gap: .45rem;
    padding: var(--gy-serit-y) .55rem;
    cursor: pointer; user-select: none;
    list-style: none;
}
.gy-kadroluk__baslik::-webkit-details-marker { display: none; }
/* Ok markup'a degil ::before'a yazilir: <details> acik/kapali durumunu zaten biliyor,
   ikinci bir isaret elle senkron tutulmasi gereken bir yalan kaynagi olurdu. */
.gy-kadroluk__baslik::before {
    content: "\203A";
    flex: 0 0 auto;
    font-size: .95rem; line-height: 1; color: var(--kmp-secondary);
    transition: transform var(--kmp-transition);
}
.gy-kadroluk[open] > .gy-kadroluk__baslik::before { transform: rotate(90deg); }
.gy-kadroluk__baslik:hover { background: var(--kmp-primary-subtle); }
/* Halka box-shadow'dur, outline degil (bkz. .gy-altili--link) — `outline:` yazimi gecersizdi
   ve bu ozet basligi klavyeyle gezilirken HIC isaretlenmiyordu. */
.gy-kadroluk__baslik:focus-visible { outline: none; box-shadow: inset var(--kmp-focus-ring); }
.gy-kadroluk__ad { flex: 0 0 auto; font-size: .74rem; font-weight: 650; white-space: nowrap; }
.gy-kadroluk__meta {
    flex: 1 1 auto; min-width: 0;
    font-size: .64rem; color: var(--kmp-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gy-kadroluk__ac {
    flex: 0 0 auto;
    font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--kmp-secondary);
}
.gy-kadroluk__liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: 0 .6rem;
    padding: .1rem .5rem .15rem;
    border-top: 1px solid var(--kmp-border);
    /* Dar ekranda kadro tek kolona duser; 20 atlik bir liste dock'u yerdi. Kirpma DEGIL
       kaydirma: gizlenen bir sey yok, panel kendi icinde kayiyor.
       42vh -> 26vh: 42vh, 900px'lik bir ekranda TEK kosuya 378px demekti; gunun geri
       kalan on bes kosusu asagi itiliyordu. 26vh iki kolonda ~14 ati birden gosterir. */
    max-height: 26vh; overflow-y: auto; scrollbar-width: thin;
}
/* KISA EKRAN (yukseklik <= 820px). `vh` ile olculen bir pencere, YANINDA yarisdigi
   kromun `vh` ile kuculdugunu varsayar -- panoda oyle degil: ust cubuk + gun cubugu +
   "Sirada" seridi 299px ve ekran kisaldikca AYNI kaliyor. Yani orantili pencere tam da
   yerin kit oldugu yerde en comert davranan kuraldir.
   Olcum (canli, 26.08.2026): 1280x720'de panel ACIKKEN krom 527px (ekranin %73'u) ve
   gun listesinden geriye 3 kosu satiri kaliyordu -- 4.'nun dibi 720,52px, yani yarim
   piksel farkla ekran disinda. Ayni kural 900px'lik ekranda 8 satir birakiyor: kusur
   26vh sayisinda degil, sabit kroma korlugunde.
   20vh = 720'de 144px, iki kolonda ~10 at; liste kendi icinde kaymaya devam eder --
   kirpma degil pencere daraltma. Telefon kurali (17vh) DAHA dar ve bu bloktan SONRA
   geldigi icin dar+kisa ekranda o kazanir; niyet budur. */
@media (max-height: 820px) {
    .gy-kadroluk__liste { max-height: 20vh; }
}
.gy-kadroluk__at {
    display: flex; align-items: center; gap: .4rem;
    min-width: 0;
    padding: .06rem .28rem;
    line-height: var(--gy-satir-lh);
    border-radius: var(--kmp-radius-sm);
}
.gy-kadroluk__at--secim { background: var(--kmp-primary-subtle); }
.gy-kadroluk__no {
    flex: 0 0 1.4rem; text-align: center;
    font-size: .68rem; font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--kmp-secondary);
}
.gy-kadroluk__govde { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
/* Ad ile takı rozetleri AYRI esnek kutularda: tek metin akisi olsaydi tasmada ellipsis
   adi degil rozetleri kirpardi (v0.6.15 dersi). */
.gy-kadroluk__ust { display: flex; align-items: baseline; gap: .28rem; min-width: 0; }
/* Rozetler kadro cipinde SARILMAZ. Olcum (1440x900, v0.6.18): cipin kendi icerigi 36px,
   ama `gy-taki` genel kuralda `flex-wrap: wrap` — dar `__ust` kutusunda tek bir rozet
   alt satira dusunce cip 53px oluyor ve grid satiri esit yukseklik verdigi icin YANINDAKI
   uc cip de 55px'e geriliyordu (10 atlik kadro 169px). Sarma kapatilinca yerini `__ad2`
   verir: v0.6.15 kurali zaten "kirpilan ad olsun, rozet degil" diyor — rozet esnemez. */
.gy-kadroluk__ust .gy-taki { flex: 0 0 auto; flex-wrap: nowrap; }
.gy-kadroluk__ad2 {
    flex: 0 1 auto; min-width: 0;
    font-size: .74rem; font-weight: 600; letter-spacing: -0.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gy-kadroluk__alt {
    display: flex; align-items: center; gap: .35rem; min-width: 0;
    font-size: .62rem; color: var(--kmp-secondary);
}
.gy-kadroluk__jokey { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gy-kadroluk__sayilar { flex: 0 0 auto; display: flex; align-items: center; gap: .45rem; }
.gy-kadroluk__sayilar .gy-bar { width: 5.4rem; }
.gy-kadroluk__sayilar .gy-bar__value { font-size: .7rem; min-width: 2.6rem; }
.gy-kadroluk__oran {
    min-width: 2.5rem; text-align: right;
    font-size: .72rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.gy-kadroluk__tumu {
    display: block; padding: .05rem .55rem .18rem;
    font-size: .64rem; text-decoration: none; color: var(--kmp-primary-text);
}
.gy-kadroluk__tumu:hover { text-decoration: underline; }
.gy-kadroluk__alt .gy-form6__x { font-size: .56rem; }

@media (max-width: 991.98px) {
    /* Dar ekranda başlık düşer: çipler kendini zaten anlatıyor, etiket yer yiyor. */
    .gy-siradaki__baslik { display: none; }
    .gy-siradaki__cip { min-width: 7.6rem; }
}

/* Boş durum: ekran boş kalmaz, NEDEN boş olduğu yazar */
.gy-empty {
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    padding: var(--kmp-sp-8);
    text-align: center;
    color: var(--kmp-secondary);
    background: var(--kmp-surface);
    border: 1px dashed var(--kmp-border);
    border-radius: var(--kmp-radius-lg);
}
.gy-empty strong { color: var(--kmp-body); font-weight: 600; }
.gy-empty code { font-family: var(--kmp-font-mono); font-size: .82rem; padding: .1rem .35rem; background: var(--kmp-surface-muted); border-radius: var(--kmp-radius-sm); }

/* Bekleme durumu boş-durumun İKİZİ DEĞİL (GyYukleniyor): kesikli çerçeve "burada bir şey yok"
   demektir, veri yoldayken bunu söylemek yalandır. Düz çerçeve + dönen halka "geliyor" der. */
.gy-empty--yukleniyor {
    border-style: solid;
    background: var(--kmp-surface-muted);
    flex-direction: row;
    justify-content: center;
}
.gy-spinner {
    width: 1.05rem; height: 1.05rem;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--kmp-primary) 26%, transparent);
    border-top-color: var(--kmp-primary);
    animation: gy-spin .7s linear infinite;
}
@keyframes gy-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .gy-spinner { animation: none; opacity: .55; }
}

/* Hata yüzeyi (GyHataSayfasi) — 404 / 403 / 500 tek iskelet.
   Ekranın ortasında durur: hata sayfasında gösterilecek başka bir şey yoktur, sola
   yaslanmış bir paragraf "sayfa yarım yüklendi" izlenimi verir. */
.gy-hata {
    max-width: 32rem;
    margin: auto;
    padding: var(--kmp-sp-6) var(--kmp-sp-4);
    display: flex; flex-direction: column; align-items: center;
    text-align: center; gap: .4rem;
}
.gy-hata__ikon {
    display: grid; place-items: center;
    width: 3rem; height: 3rem; margin-bottom: .3rem;
    border-radius: var(--kmp-radius-lg);
}
.gy-hata__ikon .gy-ikon { width: 1.5rem; height: 1.5rem; }
.gy-hata__ikon--warn { background: var(--kmp-warning-subtle); color: var(--kmp-warning); }
.gy-hata__ikon--bad { background: var(--kmp-danger-subtle); color: var(--kmp-danger); }
.gy-hata__kod {
    font-family: var(--kmp-font-mono); font-size: .78rem; font-weight: 600;
    letter-spacing: .08em; color: var(--kmp-secondary);
}
.gy-hata__baslik { margin: 0; font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
.gy-hata__metin { margin: 0; color: var(--kmp-secondary); line-height: 1.55; }
.gy-hata__iz { margin: .5rem 0 0; font-size: .82rem; color: var(--kmp-secondary); }
.gy-hata__iz code {
    font-family: var(--kmp-font-mono); padding: .1rem .35rem; margin-left: .25rem;
    background: var(--kmp-surface-muted); border-radius: var(--kmp-radius-sm);
    color: var(--kmp-body); user-select: all;
}
.gy-hata__ipucu { margin: .15rem 0 0; font-size: .76rem; color: var(--kmp-secondary); max-width: 26rem; }
.gy-hata .gy-btn { margin-top: var(--kmp-sp-4); }

/* Dürüstlük notu — vaadin yanındaki küçük yazı, ekranın en önemli parçası */
.gy-note {
    display: flex; gap: .55rem; align-items: flex-start;
    padding: .6rem .8rem; margin-top: var(--kmp-sp-4);
    font-size: .8rem; line-height: 1.5; color: var(--kmp-secondary);
    background: var(--kmp-surface-muted);
    border: 1px solid var(--kmp-border);
    border-left: 3px solid var(--kmp-warning);
    border-radius: var(--kmp-radius-sm);
}

/* ============================================================
   FORMLAR / BUTONLAR / UYARILAR
   ============================================================ */
.gy-form { display: flex; flex-direction: column; gap: var(--kmp-sp-4); max-width: 46rem; }
.gy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--kmp-sp-4); align-items: end; }
.gy-field { display: flex; flex-direction: column; gap: .3rem; }
.gy-field--narrow { max-width: 9rem; }
.gy-field--actions { flex-direction: row; gap: .5rem; align-items: end; }
.gy-field__label { font-size: .74rem; font-weight: 600; letter-spacing: .04em; color: var(--kmp-secondary); text-transform: uppercase; }
.gy-field__label em { font-weight: 400; text-transform: none; letter-spacing: 0; }
.gy-hint { font-size: .78rem; color: var(--kmp-secondary); }

/* Karar verilecek kaydin kimligi (kim / ne zaman / ne kadar). Etiket-deger cifti
   <dl> ile kurulur cunku yapisi budur; tarayicinin varsayilan girintisi yerine
   iki kolonlu izgara: rakamlar alt alta hizali okunur. Dar ekranda tek kolona duser. */
.gy-kv { display: grid; grid-template-columns: max-content 1fr; gap: .2rem var(--kmp-sp-3); margin: 0; }
.gy-kv dt { font-size: .74rem; font-weight: 600; letter-spacing: .04em; color: var(--kmp-secondary); text-transform: uppercase; align-self: center; }
.gy-kv dd { margin: 0; font-size: .9rem; color: var(--kmp-body); }
@media (max-width: 480px) { .gy-kv { grid-template-columns: 1fr; gap: .05rem; } .gy-kv dd { margin-bottom: .35rem; } }

.gy-input {
    width: 100%;
    padding: .5rem .7rem;
    font: inherit;
    color: var(--kmp-body);
    background: var(--kmp-surface);
    border: 1px solid var(--kmp-border);
    border-radius: var(--kmp-radius-sm);
    transition: border-color var(--kmp-transition), box-shadow var(--kmp-transition);
}
.gy-input:focus-visible { outline: none; border-color: var(--kmp-primary); box-shadow: var(--kmp-focus-ring); }
.gy-input--area { resize: vertical; font-family: var(--kmp-font-mono); font-size: .82rem; }
.gy-input--search { min-width: 15rem; }

.gy-fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.gy-checks { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.gy-check { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; }
.gy-check input { accent-color: var(--kmp-primary); }
.gy-check--row { align-items: flex-start; padding: .2rem 0; }
.gy-check--row span { display: flex; flex-direction: column; gap: .1rem; }
.gy-check--row em { font-style: normal; font-size: .8rem; }

.gy-details summary { cursor: pointer; font-size: .85rem; color: var(--kmp-secondary); }
.gy-details[open] summary { margin-bottom: var(--kmp-sp-3); }

.gy-preview { display: flex; flex-direction: column; gap: .3rem; }
.gy-preview code {
    display: block; padding: .6rem .7rem; font-size: .8rem; word-break: break-all;
    font-family: var(--kmp-font-mono);
    background: var(--kmp-primary-subtle);
    border: 1px solid var(--kmp-border); border-radius: var(--kmp-radius-sm);
}

.gy-actions { display: flex; gap: .6rem; }
.gy-inline-form { display: inline; }

.gy-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .48rem .9rem;
    font: inherit; font-weight: 500;
    color: var(--kmp-body); background: var(--kmp-surface);
    border: 1px solid var(--kmp-border); border-radius: var(--kmp-radius-sm);
    cursor: pointer;
    transition: transform var(--kmp-transition), box-shadow var(--kmp-transition), background var(--kmp-transition), border-color var(--kmp-transition);
}
.gy-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--kmp-shadow-sm); border-color: var(--kmp-primary-border-subtle); }
.gy-btn:disabled { opacity: .5; cursor: not-allowed; }
.gy-btn:focus-visible { outline: none; box-shadow: var(--kmp-focus-ring); }
.gy-btn--primary { background: var(--kmp-primary); border-color: var(--kmp-primary); color: #fff; }
.gy-btn--primary:hover:not(:disabled) { background: var(--kmp-primary-hover); border-color: var(--kmp-primary-hover); }
.gy-btn--ghost { border-color: transparent; background: transparent; color: var(--kmp-secondary); }
.gy-btn--ghost:hover:not(:disabled) { color: var(--kmp-body); background: var(--kmp-surface-muted); }
.gy-btn--block { width: 100%; justify-content: center; }
.gy-btn--sm { padding: .3rem .6rem; font-size: .82rem; }

.gy-icon-btn {
    display: grid; place-items: center;
    width: 2rem; height: 2rem; padding: 0;
    font-size: .95rem; line-height: 1; color: var(--kmp-secondary);
    background: transparent; border: 1px solid transparent; border-radius: var(--kmp-radius-sm);
    cursor: pointer;
    transition: color var(--kmp-transition), background var(--kmp-transition), border-color var(--kmp-transition);
}
.gy-icon-btn:hover { color: var(--kmp-body); background: var(--kmp-surface-muted); border-color: var(--kmp-border); }
.gy-icon-btn--danger:hover { color: var(--kmp-danger); border-color: color-mix(in srgb, var(--kmp-danger) 40%, transparent); }
.gy-icon-btn:focus-visible { outline: none; box-shadow: var(--kmp-focus-ring); }
.gy-icon-btn svg { width: 1.05rem; height: 1.05rem; }

.gy-lang { display: inline-flex; border: 1px solid var(--kmp-border); border-radius: var(--kmp-radius-pill); overflow: hidden; background: var(--kmp-surface); }
.gy-lang a { padding: .18rem .6rem; font-size: .72rem; font-weight: 600; letter-spacing: .04em; color: var(--kmp-secondary); text-decoration: none; transition: background var(--kmp-transition), color var(--kmp-transition); }
.gy-lang a:hover { color: var(--kmp-body); background: var(--kmp-surface-muted); }
.gy-lang a.is-active { background: var(--kmp-primary); color: #fff; }

.gy-alert { padding: .65rem .85rem; border-radius: var(--kmp-radius-sm); font-size: .88rem; border: 1px solid; }
.gy-alert--ok { color: var(--kmp-success); border-color: color-mix(in srgb, var(--kmp-success) 35%, transparent); background: var(--kmp-success-subtle); }
.gy-alert--error { color: var(--kmp-danger); border-color: color-mix(in srgb, var(--kmp-danger) 35%, transparent); background: var(--kmp-danger-subtle); }

.gy-list { color: var(--kmp-secondary); padding-left: 1.1rem; }
.gy-list li { margin-bottom: .35rem; }
.gy-error-list { margin: 0; padding-left: 1.1rem; }

/* ============================================================
   SÜRÜM KÜNYESİ + GİRİŞ EKRANI
   ============================================================ */
.gy-footer {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .5rem 1rem; border-top: 1px solid var(--kmp-border);
    font-size: .74rem; color: var(--kmp-secondary); font-variant-numeric: tabular-nums;
    background: var(--kmp-surface);
}
.gy-footer__brand { font-weight: 600; }
.gy-footer__sep { opacity: .6; }

.gy-bare-shell { min-height: 100vh; display: flex; flex-direction: column; }
.gy-bare-shell > .gy-bare { flex: 1 1 auto; min-height: 0; }
.gy-bare-shell > .gy-footer { border-top: none; background: transparent; }
.gy-bare {
    min-height: 100vh; display: grid; place-items: center; padding: var(--kmp-sp-8) var(--kmp-sp-4);
    /* Radyal parıltı + maskeli ızgara: giriş ekranı çıplak bir form olmasın */
    background:
        radial-gradient(60rem 30rem at 50% -10%, rgb(var(--kmp-primary-rgb) / 14%), transparent 70%),
        var(--kmp-page-bg);
}
.gy-auth { width: 100%; max-width: 24rem; }
.gy-auth__card {
    background: var(--kmp-surface); border: 1px solid var(--kmp-border);
    border-radius: var(--kmp-radius-lg); box-shadow: var(--kmp-shadow-lg);
    padding: 1.75rem; display: flex; flex-direction: column; gap: var(--kmp-sp-4);
}
.gy-auth__brand { display: flex; flex-direction: column; gap: .15rem; }
.gy-auth__brand .gy-brand { font-size: 1.15rem; font-weight: 600; }
.gy-auth__title { font-size: 1.15rem; margin: 0; }
.gy-auth__foot { display: flex; gap: .5rem; justify-content: center; font-size: .8rem; color: var(--kmp-secondary); }
.gy-auth .gy-form { gap: .85rem; }
.gy-brand { text-decoration: none; color: inherit; font-weight: 600; letter-spacing: -0.01em; }
.gy-tag { color: var(--kmp-secondary); font-size: .8rem; }

/* ============================================================
   SEKMELER (ERP Standardı: sekme değişince zıplama YOK)
   Tüm pane'ler aynı grid hücresinde üst üste; pasif olan yerini korur,
   yükseklik en uzun pane'e sabitlenir.
   ============================================================ */
.gy-tabs { display: flex; gap: .25rem; margin: var(--kmp-sp-3) 0 0; border-bottom: 1px solid var(--kmp-border); flex: 0 0 auto; }
/* Sayfa başlığının hemen altındaki sekme şeridi: iki kenar boşluğu üst üste biner
   (flex kapsayıcıda margin ÇAKIŞMAZ) ve 28px'lik ölü bir bant bırakırdı. */
.gy-page-head + .gy-tabs { margin-top: 0; }
.gy-tab {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .4rem .9rem; margin-bottom: -1px;
    font: inherit; font-weight: 500; color: var(--kmp-secondary);
    background: transparent; border: 0; border-bottom: 2px solid transparent;
    cursor: pointer; transition: color var(--kmp-transition), border-color var(--kmp-transition);
}
.gy-tab:hover { color: var(--kmp-body); }
.gy-tab.is-active { color: var(--kmp-body); border-bottom-color: var(--kmp-primary); }
.gy-tab__count {
    padding: 0 .4rem; font-size: .72rem; font-weight: 600; border-radius: var(--kmp-radius-pill);
    color: var(--kmp-secondary); background: var(--kmp-secondary-bg);
}
.gy-tab.is-active .gy-tab__count { color: var(--kmp-primary-text); background: var(--kmp-primary-subtle); }
.gy-tab:focus-visible { outline: none; box-shadow: var(--kmp-focus-ring); }

.gy-tabstack { display: grid; margin-top: var(--kmp-sp-2); }
.gy-tabpane { grid-area: 1 / 1; }
.gy-tabpane--off { visibility: hidden; pointer-events: none; }

/* Dock-fill: içerik mevcut yüksekliği doldurur, altta ölü boşluk kalmaz */
.gy-dock { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.gy-dock > .gy-tabstack { flex: 1 1 auto; min-height: 0; }
.gy-tabstack > .gy-tabpane { display: flex; flex-direction: column; min-height: 0; }

/* YATAY dock — dikey `min-height: 0` zincirinin ikizi; uzun süre YAZILMAMIŞTI.
   Izgara/flex öğesinin örtük `min-width: auto`'su, öğeyi İÇERİĞİNİN en geniş hâlinden
   (burada: onlarca kolonlu kmpGrid) daha dar olmaya bırakmaz. Kapsayıcı da
   `.gy-content--dock` ile `overflow: hidden` olduğu için taşan kısım kaydırılamaz,
   doğrudan KAYBOLUR: 22.08 canlı ölçümünde /karne'nin sekme paneli 1.983 px iken
   kapsayıcı 1.161 px'di — özet cümleleri, LOG KAYIP kartı ve alt not ekranın dışında
   kalıyordu (390 px'de metin kelimenin ortasından kesiliyordu).
   Kural: kaydırma İÇERİDE (ızgaranın kendi kutusunda) olur; dış kapsayıcı içeriğe göre
   şişmez. Bunun için zincirdeki her halka min-width: 0 olmalı. */
.gy-tabstack,
.gy-tabstack > .gy-tabpane,
.gy-pane,
.gy-pane > *,
.gy-dock,
.gy-analiz,
.gy-analiz > * { min-width: 0; }

/* Sekme içi düzen: üst blok (ayarlar, kartlar, notlar) kendi boyunda kalır, .gy-fill
   kalan yüksekliği kapar. Izgaranın kendi kaydırması olması gerekir — sayfa kaydırıp
   ızgara başlığını gözden kaçırmak dock-fill kuralını bozar. */
/* Şerit yığınının arası: /kuponlar'da üst blok altı parçadan oluşuyor (uyarı, ayar,
   ölçü, eylem, lejant, sekme) — 12px'lik beş boşluk tek başına 60px, yani iki veri
   satırı. 8px'e inince yığın hâlâ ayrışıyor ama ızgaraya iki satır daha kalıyor. */
.gy-pane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--kmp-sp-2); }
.gy-pane > .gy-fill { flex: 1 1 auto; min-height: 12rem; display: flex; flex-direction: column; }
.gy-pane > .gy-cards,
.gy-pane > .gy-ozet,
.gy-pane > .gy-stats,
.gy-pane > .gy-fold,
.gy-pane > .gy-actionbar,
.gy-pane > .gy-legend,
.gy-pane > .gy-grid,
.gy-pane > .gy-toolbar,
.gy-pane > .gy-note,
.gy-pane > .gy-esek,
.gy-pane > .gy-alert { flex: 0 0 auto; margin: 0; }

/* Gün çubuğundaki ekrana özel seçim (strateji): tarih kutusuyla aynı yükseklikte
   dursun, çubuğu bir satır daha uzatmasın. */
.gy-daybar__select { width: auto; min-width: 11rem; }

/* ============================================================
   IZGARA YOĞUNLUĞU — Kmp.Blazor'ın kendi dolgusunun ÜSTÜNE
   Paketin css'i site.css'ten ÖNCE yükleniyor (App.razor), bu yüzden aynı
   özgüllükteki kural buradan kazanır; !important gerekmez.
   Ölçüm (canlı, v0.6.17): th 5,6px + td 7,7px dikey dolgu ve 1,5 satır
   yüksekliği ile veri satırı 56px'ti. Satırın boyunu SARILAN TEK hücre
   belirliyor — o hücre iki satıra çıkınca on sekiz kolonun hepsi uzuyordu.
   ============================================================ */
.kmp-grid-table th,
.kmp-grid-table td {
    padding-top: var(--gy-satir-y);
    padding-bottom: var(--gy-satir-y);
    line-height: var(--gy-satir-lh);
}

/* HİÇBİR VERİ HÜCRESİ SARMAZ.
   Ölçüm (canlı v0.6.22, 1280x720, /kosular): tablo 1565px, kap 980px. Genişliği
   BELİRTİLMEMİŞ üç kolon (MODEL SEÇİMİ / PİYASA FAVORİSİ / KAZANAN) `table-layout:
   fixed` altında sıfır piksele indi; "SANCAR EFESİ" harf harf dört satıra sardı ve
   on sekiz kolonun hepsi 81px oldu (bütçe 50). Kolon genişliği vermek TEK BAŞINA
   yetmez: bir gün yeni bir kolon eklenip toplam yine kabı aşarsa aynı arıza geri
   gelir. Bu kural o kapıyı kapatır — sığmayan hücre sarmaz, üç noktayla kırpılır;
   tablo zaten kendi kabında yatay kayıyor, yani kolon gizlenmiyor.
   `th` DIŞARIDA: filtre/menü açılır kutusu (.kmp-grid-pop) başlık hücresinin
   çocuğudur, `overflow: hidden` onu görünmez ederdi (telefon şeridinde öğrenilmişti).
   Aynı hastalık dar ekran bölümünde de yazılıydı; kural artık genel. */
.kmp-grid-table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Araç ve gruplama şeritleri: ızgaranın kendisi değil çerçevesi. Alt dolguları
   (10,5px / 7,7px) ızgarayla arasında zaten flex boşluğu varken iki kez boşluk
   üretiyordu. */
.kmp-grid-toolbar,
.kmp-grid-groupbar {
    padding-top: var(--gy-serit-y);
    padding-bottom: var(--gy-serit-y);
}

/* ============================================================
   HAREKET AZALTMA — tek anahtar
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .gy-btn:hover:not(:disabled),
    .gy-card:hover,
    .gy-race:hover { transform: none; }
}

/* ============================================================
   SİMGELER + TEMA DÜĞMESİ
   Tema düğmesi üç simgeyi de basar; hangisinin görüneceğine <html data-gy-tema>
   karar verir. Böylece tema değişimi tek DOM özniteliğiyle olur, Blazor devresi
   veya yeniden çizim gerekmez (giriş/kurulum gibi etkileşimsiz sayfalarda da çalışır).
   ============================================================ */
.gy-ikon { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }

.gy-tema-btn .gy-ikon { display: none; }
.gy-tema-btn .gy-tema-ico-monitor { display: block; }
:root[data-gy-tema="light"] .gy-tema-btn .gy-tema-ico-monitor,
:root[data-gy-tema="dark"] .gy-tema-btn .gy-tema-ico-monitor { display: none; }
:root[data-gy-tema="light"] .gy-tema-btn .gy-tema-ico-sun { display: block; }
:root[data-gy-tema="dark"] .gy-tema-btn .gy-tema-ico-moon { display: block; }

/* Devre disi gezinme bagi: <a> etiketi olarak kalir ama tiklanamaz.
   Bos href birakmak "ayni sayfaya git" demek olurdu — kullanici tiklar, hicbir sey olmaz. */
.gy-icon-btn.is-disabled,
.gy-btn.is-disabled { pointer-events: none; opacity: .38; }

.gy-daybar__date { width: 8.5rem; flex: 0 0 auto; }
.gy-daybar .gy-icon-btn { border-color: var(--kmp-border); background: var(--kmp-surface); }

/* ============================================================
   EGRI (SVG grafik) — kalibrasyon + kumulatif kar/zarar
   Renkler CSS degiskenlerinden gelir: tema degisince grafik de doner,
   ayrica bir "koyu tema paleti" tutmak gerekmez.
   ============================================================ */
.gy-egri {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--kmp-sp-2);
    padding: var(--kmp-sp-4);
    border: 1px solid var(--kmp-border);
    border-radius: var(--kmp-radius-md);
    background: var(--kmp-surface);
    box-shadow: var(--kmp-shadow-xs);
    min-height: 0;
}

.gy-egri__svg { width: 100%; height: auto; max-height: 22rem; display: block; overflow: visible; }

/* --- Grafigi buyut / eski boyuta dondur -------------------------------------
   Modal basliginda oldugu gibi burada da tek dugme iki durumu tasir: buyuk
   degilse buyutur, buyukse normale dondurur (aria-pressed durumu soyler).
   Kalibrasyon egrisi 22rem'e sigdiginda dilim noktalari ust uste biniyordu;
   grafik "sus" degil OLCUM aleti -- okunamiyorsa isini yapmiyor demektir. */
.gy-egri { position: relative; }

.gy-egri__buyut {
    position: absolute;
    top: var(--kmp-sp-2);
    right: var(--kmp-sp-2);
    z-index: 2;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--kmp-border);
    border-radius: var(--kmp-radius-sm);
    background: var(--kmp-surface);
    color: var(--kmp-secondary);
    opacity: 0;
    transition: opacity var(--kmp-transition), color var(--kmp-transition), border-color var(--kmp-transition);
}

/* Dugme grafigin USTUNDE durur; her zaman gorunur olsaydi kucuk grafiklerde
   veriyle yarisirdi. Klavye kullanicisi icin :focus-visible ile de acilir. */
.gy-egri:hover .gy-egri__buyut,
.gy-egri__buyut:focus-visible { opacity: 1; }

.gy-egri__buyut:hover { color: var(--kmp-primary); border-color: var(--kmp-primary); }
.gy-egri__buyut svg { width: .9rem; height: .9rem; }

.gy-egri--tam {
    position: fixed;
    inset: var(--kmp-sp-4);
    z-index: 1080;
    margin: 0;
    overflow: auto;
    box-shadow: var(--kmp-shadow-xl);
}

.gy-egri--tam .gy-egri__buyut { opacity: 1; }
.gy-egri--tam .gy-egri__svg { max-height: none; height: calc(100vh - 12rem); }

/* Buyutulmus grafigin ARKASI: altta kalan sayfa okunur kalirsa goz kayar. */
.gy-egri-perde {
    position: fixed;
    inset: 0;
    z-index: 1070;
    background: rgb(0 0 0 / .45);
    backdrop-filter: blur(2px);
}

@media (prefers-reduced-motion: reduce) {
    .gy-egri__buyut { transition: none; }
}

.gy-egri__eksen { stroke: var(--kmp-border); stroke-width: 1.5; }
.gy-egri__izgara { stroke: var(--kmp-border); stroke-width: 1; stroke-dasharray: 3 5; opacity: .7; }
.gy-egri__kosegen { stroke: var(--kmp-secondary); stroke-width: 1.5; stroke-dasharray: 6 5; opacity: .75; }
.gy-egri__sifir { stroke: var(--kmp-secondary); stroke-width: 1.5; opacity: .55; }

.gy-egri__etiket {
    fill: var(--kmp-secondary);
    font-size: 12px;
    font-family: var(--kmp-font-sans);
    font-variant-numeric: tabular-nums;
    text-anchor: middle;
}
.gy-egri__etiket--y { text-anchor: end; }

.gy-egri__cizgi { stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.gy-egri__nokta { stroke: var(--kmp-surface); stroke-width: 1.5; }

/* Renk sinifi HEM cizgiye HEM noktaya biner ve "fill" tanimlar; ayni ozgullukte
   yazilan "fill: none" kaybediyordu -> egri kendi altini boyayip grafigi okunamaz
   bir leke haline getiriyordu. Eleman secicisi ozgullugu artirir: <path> asla
   dolmaz, <circle> dolar. */
path.gy-egri__cizgi { fill: none; }

/* Eksen ADI (dikey/yatay): sayilardan bir tik daha silik, cunku sabit metindir. */
.gy-egri__eksen-adi--svg { fill: var(--kmp-secondary); font-size: 11px; font-family: var(--kmp-font-sans); text-anchor: middle; opacity: .85; }

.gy-egri__baslik { font-size: .8rem; font-weight: 600; color: var(--kmp-body); letter-spacing: -0.01em; }

/* Paletin ilk rengi daima "bizim" egrimiz (model / birincil strateji). */
/* `color` DA yazilir: lejant kutusu bir <i>, yani HTML -- `background: currentColor`
   `color`'dan okunur, `fill`'den DEGIL. Yalnizca stroke/fill yazildigi surece her
   lejant kutusu basligin gri metin rengini aliyordu: uc seri, uc ayni renk kutu.
   Grafik dogru boyaniyordu, LEJANT yalan soyluyordu -- ve okuyucu hangi cizginin
   model hangisinin piyasa oldugunu ancak tahmin edebiliyordu. */
.gy-egri__renk--0 { color: var(--kmp-primary); stroke: var(--kmp-primary); fill: var(--kmp-primary); }
.gy-egri__renk--1 { color: var(--kmp-warning); stroke: var(--kmp-warning); fill: var(--kmp-warning); }
.gy-egri__renk--2 { color: var(--kmp-success); stroke: var(--kmp-success); fill: var(--kmp-success); }
.gy-egri__renk--3 { color: var(--kmp-danger); stroke: var(--kmp-danger); fill: var(--kmp-danger); }

.gy-egri__alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--kmp-sp-3);
    font-size: .78rem;
    color: var(--kmp-secondary);
}
.gy-egri__lejant { display: flex; flex-wrap: wrap; gap: var(--kmp-sp-3); }
.gy-egri__lejant-oge { display: inline-flex; align-items: center; gap: .35rem; }
.gy-egri__kutu { width: .85rem; height: .2rem; border-radius: 1px; background: currentColor; }
.gy-egri__kutu--kesik {
    background: repeating-linear-gradient(90deg, var(--kmp-secondary) 0 4px, transparent 4px 7px);
}
.gy-egri__bos { padding: var(--kmp-sp-6) 0; text-align: center; color: var(--kmp-secondary); font-size: .88rem; }

/* Karne hukum rozeti — "model piyasayi gecti mi". Kendi seridi YOK: ozet panelinin
   baslik satirinda durur (bkz. .gy-ozet__ust); ayri bir serit izgaradan satir goturuyordu. */
.gy-rozet {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .65rem;
    border-radius: var(--kmp-radius-pill);
    font-size: .74rem;
    font-weight: 650;
    letter-spacing: .03em;
    text-transform: uppercase;
    border: 1px solid transparent;
}
.gy-rozet--ok { color: var(--kmp-success); background: var(--kmp-success-subtle); border-color: color-mix(in srgb, var(--kmp-success) 35%, transparent); }
.gy-rozet--bad { color: var(--kmp-danger); background: var(--kmp-danger-subtle); border-color: color-mix(in srgb, var(--kmp-danger) 35%, transparent); }
.gy-rozet--notr { color: var(--kmp-secondary); background: var(--kmp-surface-muted); border-color: var(--kmp-border); }

/* Iki grafik yan yana; dar ekranda alt alta. */
.gy-egriler { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--kmp-sp-4); }
.gy-pane > .gy-egriler, .gy-pane > .gy-egri { flex: 0 0 auto; margin: 0; }

/* ============================================================
   "GUNU HESAPLA" TETIGI + BILDIRIM (toast)
   Tetik gun cubugunun icinde durur; durum rozeti ancak bir hesap
   calistiktan sonra belirir, bos ekranda yer kaplamaz.
   ============================================================ */
.gy-hesapla { display: inline-flex; align-items: center; gap: var(--kmp-sp-2); flex-wrap: wrap; }

.gy-hesapla__durum {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .6rem;
    border-radius: var(--kmp-radius-pill);
    border: 1px solid var(--kmp-border);
    background: var(--kmp-surface-muted);
    color: var(--kmp-secondary);
    font-size: .76rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.gy-hesapla__durum--calisiyor { color: var(--kmp-primary); background: var(--kmp-primary-subtle); border-color: var(--kmp-primary-border-subtle); }
.gy-hesapla__durum--bitti { color: var(--kmp-success); background: var(--kmp-success-subtle); border-color: color-mix(in srgb, var(--kmp-success) 35%, transparent); }
.gy-hesapla__durum--hata { color: var(--kmp-danger); background: var(--kmp-danger-subtle); border-color: color-mix(in srgb, var(--kmp-danger) 35%, transparent); }

/* Donen halka: sunucu hala calisiyor isareti. Metin zaten asamayi yaziyor,
   bu yuzden hareket azaltmada halka durur; bilgi kaybi olmaz. */
.gy-hesapla__donen {
    width: .8rem;
    height: .8rem;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
    border-top-color: currentColor;
    animation: gy-doner .7s linear infinite;
}
@keyframes gy-doner { to { transform: rotate(360deg); } }

/* "Yenile": artik rozetin icinde satir-ici bag DEGIL, tetigin yanindaki kucuk hayalet
   dugme (bkz. GyGunHesapla.razor). Kutu modelini `.gy-btn` verir — boylece dokunma
   hedefi telefon kuralindan (`.gy-hesapla .gy-btn { min-height: 2.5rem }`) kendiliginden
   pay alir; burada yalnizca RENK, hesabin bittigini soyleyen yesile baglanir. */
.gy-hesapla__yenile { color: var(--kmp-success); font-weight: 600; }
.gy-hesapla__yenile:hover:not(:disabled) { color: var(--kmp-success); background: var(--kmp-success-subtle); }
.gy-hesapla__yenile .gy-ikon { width: .95rem; height: .95rem; }

/* --- Bildirimler: sag altta yigin; yenisi altta belirir --- */
.gy-toastlar {
    position: fixed;
    right: var(--kmp-sp-4);
    bottom: var(--kmp-sp-4);
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: var(--kmp-sp-2);
    pointer-events: none;   /* altindaki ekrani kilitlemesin */
    max-width: min(26rem, calc(100vw - 2 * var(--kmp-sp-4)));
}

.gy-toast {
    position: relative;
    overflow: hidden;
    pointer-events: auto;   /* ustune gelinince duraklasin, kapatilabilsin */
    display: flex;
    align-items: flex-start;
    gap: var(--kmp-sp-2);
    padding: var(--kmp-sp-3) var(--kmp-sp-3) calc(var(--kmp-sp-3) + 2px);
    border: 1px solid var(--kmp-border);
    border-left: 3px solid var(--kmp-secondary);
    border-radius: var(--kmp-radius-md);
    background: var(--kmp-surface);
    box-shadow: var(--kmp-shadow-lg);
    animation: gy-toast-gir .22s var(--kmp-ease);
}
@keyframes gy-toast-gir { from { opacity: 0; transform: translateY(.5rem); } }

.gy-toast--bilgi { border-left-color: var(--kmp-primary); }
.gy-toast--basari { border-left-color: var(--kmp-success); }
.gy-toast--uyari { border-left-color: var(--kmp-warning); }
.gy-toast--hata { border-left-color: var(--kmp-danger); }

.gy-toast__ikon { margin-top: .1rem; }
.gy-toast--bilgi .gy-toast__ikon { color: var(--kmp-primary); }
.gy-toast--basari .gy-toast__ikon { color: var(--kmp-success); }
.gy-toast--uyari .gy-toast__ikon { color: var(--kmp-warning); }
.gy-toast--hata .gy-toast__ikon { color: var(--kmp-danger); }

.gy-toast__govde { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1 1 auto; }
.gy-toast__baslik { font-size: .84rem; font-weight: 650; letter-spacing: -0.01em; }
.gy-toast__metin { font-size: .82rem; color: var(--kmp-secondary); overflow-wrap: anywhere; }

.gy-toast__kapat {
    flex: 0 0 auto;
    padding: .1rem;
    border: 0;
    background: none;
    color: var(--kmp-secondary);
    line-height: 0;
    cursor: pointer;
    border-radius: var(--kmp-radius-sm);
    transition: color var(--kmp-transition), background var(--kmp-transition);
}
.gy-toast__kapat:hover { color: var(--kmp-body); background: var(--kmp-surface-muted); }
.gy-toast__kapat:focus-visible { outline: none; box-shadow: var(--kmp-focus-ring); }

/* Geri sayim sunucudan degil CSS ile akar: suresi bilesende satir ici yazilir,
   fare ustundeyken hem cubuk hem C# sayaci birlikte durur. */
.gy-toast__sure {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    opacity: .45;
    transform-origin: left center;
    animation-name: gy-toast-sure;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
.gy-toast:hover .gy-toast__sure { animation-play-state: paused; }
@keyframes gy-toast-sure { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.gy-toast--bilgi .gy-toast__sure { color: var(--kmp-primary); }
.gy-toast--basari .gy-toast__sure { color: var(--kmp-success); }
.gy-toast--uyari .gy-toast__sure { color: var(--kmp-warning); }
.gy-toast--hata .gy-toast__sure { color: var(--kmp-danger); }

/* Hareket azaltmada global kural tum animasyonlari .001ms sureye cekiyor: geri sayim
   cubugu aninda bosalir ve yalan soylerdi; gostermemek dogrusu. */
@media (prefers-reduced-motion: reduce) {
    .gy-toast__sure { display: none; }
    .gy-hesapla__donen { border-top-color: color-mix(in srgb, currentColor 30%, transparent); }
}

/* ============================================================
   OLCU SERIDI (.gy-stats) — KPI kartlarinin yerini tutan ince satir
   Kartlar dikeyde yer yiyordu; izgara satirlari ekranin altina kaciyordu.
   Ayni sayilar tek bir seritte: dikeyde ~4 kat daha az yer.

   KUTU VE HUCRE CIZGILERI KALDIRILDI (22.08). Kutulu hali tam genislige yayilan,
   `border-left` ile bolunmus, buyuk-harf etiketli bir bant idi — yani bir TABLO BASLIGI
   gorunumu. Hemen altindaki kosu listesiyle kabaca ayni kolon hizasina dusunce kullanici
   onu listenin basligi saniyordu (liste ise gercekten basliksizdi). Cozum iki yonlu:
   listeye gercek baslik (.gy-race-head), serite ise duz metin gorunumu — etiket ve deger
   AYNI satirda, cerceve yok, hucre bolucusu yok. Boylece serit "olculer" gibi, baslik da
   "baslik" gibi okunur.
   ============================================================ */
.gy-stats {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: .1rem 1.1rem;
    padding: 0 .15rem var(--gy-serit-y);
}
.gy-stat {
    display: flex; flex-direction: row; align-items: baseline; gap: .3rem;
    flex: 0 1 auto; min-width: 0;
}
.gy-stat__label {
    font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
    color: var(--kmp-secondary); white-space: nowrap;
}
.gy-stat__value {
    font-size: .95rem; font-weight: 650; line-height: 1.25; letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.gy-stat__value.ok { color: var(--kmp-success); }
.gy-stat__value.warn { color: var(--kmp-warning); }
.gy-stat__value.bad { color: var(--kmp-danger); }
.gy-stat__value--sm { font-size: .85rem; font-weight: 600; letter-spacing: 0; }
.gy-stat__hint { font-size: .72rem; color: var(--kmp-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Vurgulu olcu (ana hukum sayisi) — serit icinde goz once buraya gitsin. Zemin artik hucre
   degil hap: dortgen zemin hucre izlenimi verip serite yeniden tablo goruntusu katiyordu. */
.gy-stat--one {
    background: var(--kmp-primary-subtle);
    border-radius: var(--kmp-radius-pill);
    padding: .05rem .6rem;
}
.gy-stat--one .gy-stat__label { color: var(--kmp-primary-text); }

/* ============================================================
   KATLANIR AYAR BLOGU (.gy-fold) — parametreler acik durmak zorunda degil
   ============================================================ */
.gy-fold {
    border: 1px solid var(--kmp-border);
    border-radius: var(--kmp-radius-md);
    background: var(--kmp-surface);
}
.gy-fold > summary {
    display: flex; align-items: center; gap: .5rem;
    padding: var(--gy-serit-y) .8rem; cursor: pointer; list-style: none;
    font-size: .8rem; font-weight: 600; color: var(--kmp-secondary);
    border-radius: inherit;
}
.gy-fold > summary::-webkit-details-marker { display: none; }
.gy-fold > summary::before {
    content: "\203A"; display: inline-block; font-size: 1.05rem; line-height: 1;
    transition: transform var(--kmp-transition);
}
.gy-fold[open] > summary::before { transform: rotate(90deg); }
.gy-fold > summary:focus-visible { outline: none; box-shadow: var(--kmp-focus-ring); }
.gy-fold__ozet {
    margin-left: auto; font-weight: 500; font-size: .76rem;
    font-variant-numeric: tabular-nums; color: var(--kmp-secondary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gy-fold__body { padding: 0 .8rem .8rem; }
.gy-fold__body .gy-grid { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--kmp-sp-3); }

/* ============================================================
   EYLEM SATIRI (.gy-actionbar) — aciklama notu + dugme ayni satirda
   ============================================================ */
.gy-actionbar { display: flex; align-items: center; gap: var(--kmp-sp-3); flex-wrap: wrap; }
.gy-actionbar__note { flex: 1 1 16rem; min-width: 0; font-size: .78rem; line-height: 1.35; color: var(--kmp-secondary); }
.gy-actionbar__note b { color: var(--kmp-body); font-weight: 600; }

.gy-gerekce {
    flex: 0 0 auto;
    display: grid;
    gap: var(--kmp-sp-2);
    padding: .55rem .7rem;
    border: 1px solid var(--kmp-border);
    border-radius: var(--kmp-radius-sm);
    background: var(--kmp-tertiary-bg);
}

.gy-gerekce__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--kmp-sp-3);
    min-width: 0;
}

.gy-gerekce__head strong { font-size: .86rem; font-weight: 650; color: var(--kmp-body); }
.gy-gerekce__head span { font-size: .75rem; color: var(--kmp-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.gy-gerekce__rows {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .35rem .75rem;
}

.gy-gerekce__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(4rem, auto);
    align-items: center;
    gap: .45rem;
    min-width: 0;
    font-size: .76rem;
}

.gy-gerekce__row span,
.gy-gerekce__row small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gy-gerekce__row small { color: var(--kmp-secondary); }
.gy-gerekce__katki { font-variant-numeric: tabular-nums; font-weight: 650; }
.gy-gerekce__katki--iyi { color: var(--kmp-success); }
.gy-gerekce__katki--ters { color: var(--kmp-warning); }

/* ============================================================
   HUCRE ICI OLASILIK CUBUGU (.gy-bar) — izgarada sayi + cubuk
   Yuzde tek basina siralamayi anlatmiyor; cubuk farki goz kararyla okutur.
   ============================================================ */
.gy-bar { display: flex; align-items: center; gap: .4rem; }
.gy-bar__track {
    flex: 1 1 auto; min-width: 2rem; height: .3rem;
    background: var(--kmp-secondary-bg); border-radius: var(--kmp-radius-pill); overflow: hidden;
}
.gy-bar__fill { height: 100%; background: linear-gradient(90deg, var(--kmp-primary), #7c3aed); border-radius: inherit; }
.gy-bar--piyasa .gy-bar__fill { background: linear-gradient(90deg, var(--kmp-secondary), color-mix(in srgb, var(--kmp-secondary) 55%, transparent)); }
/* Durum ekranindaki doluluk cubugu: isleme gunlugu dolarken cubuk marka rengiyle
   "her sey yolunda" gibi durmamali — dolan gunluk yazma islemlerini DURDURUR. */
.gy-bar--kritik .gy-bar__fill { background: linear-gradient(90deg, var(--kmp-danger), color-mix(in srgb, var(--kmp-danger) 60%, transparent)); }
.gy-bar__value {
    font-size: .76rem; font-weight: 600; font-variant-numeric: tabular-nums;
    min-width: 2.9rem; text-align: right;
}

/* ============================================================
   SON 6 KOSU (.gy-form6) — bultendeki "Son 6 Y." dizesi
   En YENI kosu SOLDA. 1-2-3 tabela, 0 tabela disi (10+), "-" sezon ayraci.
   ============================================================ */
.gy-form6 { display: inline-flex; align-items: center; gap: .15rem; }
.gy-form6__x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.2rem; height: 1.2rem; border-radius: var(--kmp-radius-sm);
    font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--kmp-secondary); background: var(--kmp-secondary-bg);
    border: 1px solid transparent;
}
.gy-form6__x--1 { color: #fff; background: var(--kmp-success); }
.gy-form6__x--2 { color: var(--kmp-success); background: var(--kmp-success-subtle); border-color: color-mix(in srgb, var(--kmp-success) 32%, transparent); }
.gy-form6__x--3 { color: var(--kmp-primary-text); background: var(--kmp-primary-subtle); border-color: var(--kmp-primary-border-subtle); }
.gy-form6__x--out { color: var(--kmp-secondary); background: var(--kmp-secondary-bg); }
/* En yeni kosu vurgulu: form okunurken ilk bakilacak kutu odur */
.gy-form6__x--yeni { box-shadow: 0 0 0 1px var(--kmp-body); }
.gy-form6__yok { font-size: .74rem; color: var(--kmp-secondary); }

/* ============================================================
   TAKI (.gy-taki) — bultendeki ekipman kodlari: KG, K, DB, SK…
   IKI anlam sinifi IKI ton: yaris boyunca takili olan (notr, koyu metin) ile
   yalniz ring–start arasi muamele (soluk cerceve). Ayni tonda gosterilirse
   "kulaklikla KOSUYOR" ile "starta kulaklikla GOTURULUYOR" ayirt edilemez.
   ============================================================ */
.gy-taki { display: inline-flex; align-items: center; gap: .2rem; flex-wrap: wrap; }
.gy-taki__x {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.35rem; height: 1.2rem; padding: 0 .25rem;
    border-radius: var(--kmp-radius-sm);
    font-size: .68rem; font-weight: 700; letter-spacing: .02em;
    color: var(--kmp-body); background: var(--kmp-secondary-bg);
    border: 1px solid transparent; cursor: help;
}
/* Ring–start muamelesi: yarista takili DEGIL — ici bos, kenari cizili. */
.gy-taki__x--start {
    color: var(--kmp-secondary); background: transparent;
    border-color: var(--kmp-border); border-style: dashed;
}
/* Sozlukte olmayan jeton GIZLENMEZ: bultende yazan bir isaret kullanicidan
   saklanamaz. Arsivde tek ornek `%` (163 satir, 22.08.2026 sayimi). */
.gy-taki__x--bilinmez {
    color: var(--kmp-warning-text, var(--kmp-secondary));
    background: var(--kmp-warning-subtle, var(--kmp-secondary-bg));
    border-color: var(--kmp-border);
}
.gy-taki__yok { font-size: .74rem; color: var(--kmp-secondary); }

/* ============================================================
   EKURI (.gy-ekuri) — ayni ahirin ayni kosudaki atlari.
   Bahiste TEK BIRIM sayilirlar: (6)'ya oynayan (11)'i de oynamis olur.
   Rozet sus degil UYARIDIR — iki ekuri atini iki ayri sans sanmak,
   kupon kurucusunda ayni bahsi iki kez satin almak demektir.
   Kesikli kenar "bunlar bagli" der; MODEL/FAVORI rozetleri dolu ve
   yazili oldugu icin karismaz.
   ============================================================ */
.gy-ekuri {
    display: inline-flex; align-items: center; gap: .18rem;
    padding: .02rem .3rem; white-space: nowrap; cursor: help;
    border-radius: var(--kmp-radius-sm);
    background: color-mix(in srgb, var(--kmp-primary) 9%, transparent);
    border: 1px dashed color-mix(in srgb, var(--kmp-primary) 34%, transparent);
}
.gy-ekuri__kod {
    font-size: .68rem; font-weight: 700; letter-spacing: .02em;
    color: var(--kmp-primary-text, var(--kmp-primary));
}
/* Ortaklar: BU atin disindaki grup uyeleri — "kiminle?" sorusu satirda cevaplanir. */
.gy-ekuri__ortak { font-size: .68rem; font-weight: 600; color: var(--kmp-secondary); }
.gy-ekuri__ortak::before { content: "·"; margin-right: .18rem; color: var(--kmp-border); }
.gy-ekuri__yok { font-size: .74rem; color: var(--kmp-secondary); }

/* ============================================================
   ISARETLER (.gy-mark) — model secimi / piyasa favorisi / sonuc
   Kim ne diyor sorusunun cevabi satirin kendisinde gorunur olmali.
   ============================================================ */
.gy-mark {
    display: inline-flex; align-items: center; gap: .22rem;
    padding: .02rem .36rem; font-size: .72rem; font-weight: 700; white-space: nowrap;
    border-radius: var(--kmp-radius-sm); border: 1px solid transparent;
}
.gy-mark--model { color: var(--kmp-primary-text); background: var(--kmp-primary-subtle); border-color: var(--kmp-primary-border-subtle); }
.gy-mark--favori { color: var(--kmp-warning); background: var(--kmp-warning-subtle); border-color: color-mix(in srgb, var(--kmp-warning) 32%, transparent); }
.gy-mark--kazandi { color: var(--kmp-success); background: var(--kmp-success-subtle); border-color: color-mix(in srgb, var(--kmp-success) 32%, transparent); }
.gy-mark--kosmaz { color: var(--kmp-danger); background: var(--kmp-danger-subtle); border-color: color-mix(in srgb, var(--kmp-danger) 30%, transparent); }
/* Hazir kupon: ne yayin ne simulasyon — hicbir yere yazilmadi. Notr/kesikli cerceve
   "bu bir kayit degil" der; dolu bir rozet kaydedilmis izlenimi verirdi. */
.gy-mark--hazir {
    color: var(--kmp-secondary); background: var(--kmp-surface-muted);
    border-style: dashed; border-color: var(--kmp-border);
}
/* Bedeli odule gore kisilmis basamak. Uyari rengi DEGIL: bu bir kusur degil, kurala
   uyulmasi — "Genis" yazan kuponun neden anma tavaninin altinda kaldigini soyler. */
.gy-mark--kisik {
    color: var(--kmp-warning); background: var(--kmp-warning-subtle);
    border-color: color-mix(in srgb, var(--kmp-warning) 28%, transparent);
}
/* A11: 01.09.2026'dan itibaren butce disi genislik basamagi. Tehlike rengi DEGIL — kupon
   bozuk degil, olculmus bicimde para kaybettiriyor. Kesikli cerceve "bu bir plan kalemi
   degil" der; dolu kirmizi rozet kartin kendisini hatali gosterirdi. */
.gy-mark--butcedisi {
    color: var(--kmp-danger); background: var(--kmp-danger-subtle);
    border-style: dashed; border-color: color-mix(in srgb, var(--kmp-danger) 34%, transparent);
}
.gy-marks { display: inline-flex; gap: .2rem; align-items: center; }

/* Kazananin IKI cetveldeki sirasi (M2. · F1.). Isabet "tuttu/iskaladi" der; sira
   YAKINLIGI soyler — 2. sirada iskalamakla 9. sirada iskalamak ayni sey degildir. */
.gy-sira { display: inline-flex; gap: .18rem; align-items: center; white-space: nowrap; }
.gy-sira__oge {
    padding: .02rem .28rem; font-size: .68rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
    border-radius: var(--kmp-radius-sm); border: 1px solid transparent;
    color: var(--kmp-secondary); background: var(--kmp-secondary-bg);
}
.gy-sira__oge--iyi { color: var(--kmp-success); background: var(--kmp-success-subtle); border-color: color-mix(in srgb, var(--kmp-success) 30%, transparent); }
.gy-sira__oge--orta { color: var(--kmp-warning); background: var(--kmp-warning-subtle); border-color: color-mix(in srgb, var(--kmp-warning) 28%, transparent); }
.gy-sira__oge--kotu { color: var(--kmp-danger); background: var(--kmp-danger-subtle); border-color: color-mix(in srgb, var(--kmp-danger) 26%, transparent); }
.gy-sira__oge--yok { opacity: .7; }

/* Izgara hucresinde at adi + isaretler */
.gy-at { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.gy-at__ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gy-at__no {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.3rem; height: 1.3rem; padding: 0 .2rem;
    font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--kmp-body); background: var(--kmp-secondary-bg);
    border: 1px solid var(--kmp-border); border-radius: var(--kmp-radius-sm);
}
.gy-at--kosmaz .gy-at__ad { text-decoration: line-through; color: var(--kmp-secondary); }

/* ============================================================
   ISARET SOZLUGU (.gy-legend) — ekrandaki rozetler ne demek
   ============================================================ */
.gy-legend {
    display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem;
    font-size: .74rem; color: var(--kmp-secondary);
}
.gy-legend > span { display: inline-flex; align-items: center; gap: .3rem; }

/* Katlanir sozluk: kapaliyken YALNIZ rozetler (tek satir), acikken tam aciklama.
   Rozeti taniyan kullanici her ekranda ayni cumleyi yeniden okumasin, satir listeye kalsin. */
.gy-legend-fold > summary {
    display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .5rem;
    padding: .1rem 0; cursor: pointer; list-style: none;
}
.gy-legend-fold > summary::-webkit-details-marker { display: none; }
.gy-legend-fold > summary:focus-visible { outline: none; box-shadow: var(--kmp-focus-ring); border-radius: var(--kmp-radius-sm); }
.gy-legend-fold__ipucu {
    font-size: .72rem; color: var(--kmp-secondary); text-decoration: underline dotted;
    text-underline-offset: .2em;
}
.gy-legend-fold[open] > summary > .gy-mark,
.gy-legend-fold[open] > summary > .gy-form6 { display: none; }
.gy-legend-fold > .gy-legend { padding-top: .3rem; }

@media (prefers-reduced-motion: reduce) {
    .gy-fold > summary::before { transition: none; }
}

/* ============================================================
   SIKISTIRMA — "bir bakista hepsi" (tum sayfalar)
   Izgaranin ustundeki her serit (uyari, olcu, eylem notu) listeden satir goturur.
   Bilgi silinmez, YUKSEKLIGI kisilir: notlar tek satira sikisir, tasan kisim
   title'da okunur. Kullanici sayfayi kaydirmadan tabloyu butun gormeli.
   ============================================================ */
.gy-pane { gap: var(--kmp-sp-2); }
.gy-tabstack { margin-top: var(--kmp-sp-2); }
.gy-alert { padding: .4rem .7rem; font-size: .8rem; line-height: 1.35; }
.gy-stat__value { font-size: .92rem; }
.gy-stat__hint { font-size: .7rem; }
.gy-actionbar__note { font-size: .75rem; line-height: 1.35; }
/* Tek satirlik not: tasan kisim uc noktaya doner, tamami title'da durur. */
.gy-actionbar__note--tek { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 991.98px) {
    /* Dar ekranda tek satir okunmaz hale gelirdi: burada sarmasina izin verilir. */
    .gy-actionbar__note--tek { white-space: normal; }
}

/* Sayfa basindaki serit notu (ornek: butce beklenti uyarisi) HER ZAMAN ekranda kalir
   ama izgaradan satir goturmemeli: dock cocugu olarak sikistirilir. */
.gy-dock > .gy-note { flex: 0 0 auto; margin: var(--kmp-sp-2) 0 0; padding: .45rem .7rem; font-size: .78rem; }
.gy-dock > .gy-ozet,
.gy-dock > .gy-cards,
.gy-dock > .gy-tabs { flex: 0 0 auto; }
/* Uyari tonu: kirmizi kenar, "bilgi" notundan ayirt edilsin. */
.gy-note--uyari { border-left-color: var(--kmp-danger); }

/* ------------------------------------------------------------
   EGRI + IZGARA YAN YANA (.gy-analiz)
   Karne/butce sekmelerinde egri tam genislikte dururken izgaranin
   satirlari ekranin altina dusuyordu. Genis ekranda egri SOLDA sabit
   bir sutun, izgara kalan genisligi ve TUM yuksekligi kapar.
   Dar ekranda kural TERSINE doner (bkz. modal dock-fill dersi): ikisi
   alt alta iner ve tasan kisim .gy-analiz'in KENDI icinde kayar —
   sayfa govdesi kaymaz (dock-fill bozulmaz), icerik de kesilmez.
   ------------------------------------------------------------ */
.gy-pane > .gy-analiz { flex: 1 1 auto; min-height: 0; }
.gy-analiz {
    display: flex; flex-direction: column; gap: var(--kmp-sp-3);
    min-height: 0; overflow-y: auto;
}
.gy-analiz > .gy-egriler { flex: 0 0 auto; }
.gy-analiz > .gy-fill { flex: 1 1 auto; min-height: 12rem; display: flex; flex-direction: column; }
@media (min-width: 1200px) {
    .gy-analiz { flex-direction: row; align-items: stretch; overflow: hidden; }
    /* align-content:start — satir yuksekligi buyudukce egri karti uzayip
       SVG'yi tepede yalniz birakmasin. */
    .gy-analiz > .gy-egriler { flex: 0 0 24rem; min-width: 0; align-content: start; }
    .gy-analiz > .gy-fill { min-width: 0; }
}

/* Kosu kimligi (hipodrom + kosu no) At hucresinin ALTINDA. Genis ekranda gizli — bilgi
   kendi kolonlarinda duruyor. Dar ekranda (gyEkran.dar esigi 767.98) o kolonlar kapaniyor
   ve satir "hangi kosu?" sorusunu cevapsiz birakiyordu; kimlik hucreye iner. */
.gy-at__nerede { display: none; }
@media (max-width: 767.98px) {
    .gy-at { flex-wrap: wrap; }
    /* Kimlik ARTIK kendi satirini zorlamiyor (eski hali `flex: 0 0 100%` idi). O kural,
       AT kolonunun `table-layout: fixed` yuzunden 0 genislige dustugu duzende dogruydu:
       hucre zaten daralmisti, kimlik ancak alt satira sigardi. Kolon kendi genisligini
       alinca (bkz. telefon bloğundaki `table-layout: auto`) "Istanbul · 1. kosu" adin
       yanina rahat siginca satir 65px'ten ~35px'e iniyor — ayni bilgi, yarim boy.
       `flex-wrap` acik kaldigi icin uzun bir at adi kimligi yine alt satira iter:
       sigmadiginda buyur, kirpma. */
    .gy-at__nerede {
        display: block; flex: 0 1 auto;
        font-size: .7rem; color: var(--kmp-secondary); line-height: 1.2;
    }
}

/* ============================================================
   DONEM CUBUGU (.gy-toolbar--donem) — hazir donemler + ozel aralik
   Donem TEK seciciyle yonetilir; secili olan cip GORULEBILIR olmali,
   yoksa ekrandaki sayinin hangi pencereye ait oldugu okunmaz.
   ============================================================ */
.gy-toolbar--donem { gap: var(--kmp-sp-3); }
.gy-toolbar--donem .gy-chips { margin-bottom: 0; }

/* .gy-chip duragan bir etiket olarak da kullaniliyor (kosu detayi kunyesi):
   imlec/hover/aktiflik yalnizca button'a verilir. */
button.gy-chip {
    cursor: pointer;
    color: var(--kmp-secondary);
    background: var(--kmp-surface);
    border-color: var(--kmp-border);
    transition: color var(--kmp-transition), background var(--kmp-transition), border-color var(--kmp-transition);
}
button.gy-chip:hover { color: var(--kmp-body); background: var(--kmp-secondary-bg); }
button.gy-chip:focus-visible { outline: none; box-shadow: var(--kmp-focus-ring); }
button.gy-chip.is-active {
    color: var(--kmp-primary-text);
    background: var(--kmp-primary-subtle);
    border-color: var(--kmp-primary-border-subtle);
    font-weight: 600;
}

.gy-daterange { display: inline-flex; align-items: center; gap: .4rem; }
.gy-daterange__ok { color: var(--kmp-secondary); }
/* flatpickr girisi salt-okunur: yazi imleci degil isaretci imlec dogru sinyaldir. */
.gy-tarih { width: 7.6rem; text-align: center; font-variant-numeric: tabular-nums; cursor: pointer; }

/* ============================================================
   DUZ ANLATIM PANELI (.gy-ozet) — sayilarin yanina TURKCE hukum
   Karne sayilarla dolu; "0,347 / 0,332 / +-0,021" ucusu okuyan herkesin
   ayni sonuca varmasini saglamaz. Panel ayni sayilardan cumle kurar;
   yeniden hesap YOK, yalnizca sozcuk secimi. Ton +-2sigma bandindan gelir:
   rozet ile cumle asla celismez.
   ============================================================ */
.gy-ozet {
    padding: .45rem .95rem .5rem;
    background: var(--kmp-surface);
    border: 1px solid var(--kmp-border);
    border-left: 3px solid var(--kmp-primary);
    border-radius: var(--kmp-radius-md);
    box-shadow: var(--kmp-shadow-xs);
}
.gy-ozet__baslik {
    margin: 0 0 .4rem; font-size: .72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .07em; color: var(--kmp-secondary);
}
/* Baslik satiri: hukum rozeti basligin YANINDA durur (ayri serit degil) —
   rozet ile altindaki cumleler ayni panelde, tek bakista okunur. */
.gy-ozet__ust { display: flex; align-items: center; gap: var(--kmp-sp-3); flex-wrap: wrap; margin-bottom: .25rem; }
.gy-ozet__ust > .gy-ozet__baslik { margin: 0; }
.gy-ozet__liste {
    margin: 0; padding: 0; list-style: none;
    display: flex; flex-direction: column; gap: .16rem;
}
/* Cümleler KISALMAZ, satır aralığı sıkışır: burası ekranın tek gerçek nesri ve
   hükmü o cümleler veriyor. 1,55 -> 1,42 beş satırda bir veri satırı kazandırır. */
.gy-ozet__satir {
    position: relative; padding-left: 1.05rem;
    font-size: .87rem; line-height: 1.42; color: var(--kmp-body);
    max-width: 78ch;
}
.gy-ozet__satir::before {
    content: ""; position: absolute; left: .1rem; top: .55em;
    width: .4rem; height: .4rem; border-radius: 50%;
    background: var(--kmp-secondary); opacity: .5;
}
/* Renk YALNIZ isarette: cumlenin tamamini yesile boyamak okunabilirligi
   dusurur ve "hukum" ile "kapsam" satirlarini ayni agirlikta gosterirdi. */
.gy-ozet__satir--iyi::before { background: var(--kmp-success); opacity: 1; }
.gy-ozet__satir--kotu::before { background: var(--kmp-danger); opacity: 1; }
.gy-ozet__satir--belirsiz::before { background: var(--kmp-warning); opacity: 1; }
.gy-ozet__satir--iyi,
.gy-ozet__satir--kotu,
.gy-ozet__satir--belirsiz { font-weight: 500; }

/* ============================================================
   KALIBRASYON KUNYESI (.gy-kunye) — "bu tahminler neyle uretildi"
   Karne bir ARALIK olcer; o aralikta onlarca tur kosmustur ve her tur
   sicakligi yeniden cozer. Serit, olculen sayilarin yanina onlari URETEN
   kalibrasyonu koyar. Olcume girmez: yalnizca yazar.

   Uyari tonu (.gy-kunye--uyari) kunye ile turlar celistiginde yanar —
   ekran "taze" demez, "SOYLENEMEZ" der; bilinmeyen iyi haber degildir.
   ============================================================ */
.gy-kunye {
    display: flex; align-items: baseline; flex-wrap: wrap;
    gap: .3rem .6rem;
    padding: .38rem .8rem .42rem;
    background: var(--kmp-surface);
    border: 1px solid var(--kmp-border);
    border-left: 3px solid var(--kmp-secondary);
    border-radius: var(--kmp-radius-md);
    font-size: .8rem; line-height: 1.4;
}
.gy-kunye--uyari { border-left-color: var(--kmp-warning); }
.gy-kunye__etiket {
    font-size: .68rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .07em; color: var(--kmp-secondary);
}
/* Sayilar tabular: sicaklik bandi (1,0198 - 1,3923) hizali okunmali. */
.gy-kunye__deger { color: var(--kmp-body); font-variant-numeric: tabular-nums; }
/* Uyari kendi satirina duser: kunyenin yanina sikistirilirsa, "bayat" hukmu
   olcunun bir parcasi gibi okunur. */
.gy-kunye__uyari {
    flex: 1 0 100%;
    color: var(--kmp-warning);   /* tanimli jeton: --kmp-warning-text bu dosyada YOK */
    font-weight: 500;
}

/* ============================================================
   ESEK KARNESI (.gy-esek) — "hangi esegin kazanacagini kim bildi"
   Kunye seridiyle ayni dil: etiket + rozet + tabular sayilar, tek satirda
   akar, dar ekranda sarar. Sol kenar rengi HUKMUN tonudur (Application
   karar verir, CSS yalniz boyar): iyi = basari, kotu = tehlike, belirsiz /
   notr = ikincil. Kapsamda kosu yokken de cizilir — yokluk da bilgidir.
   ============================================================ */
.gy-esek {
    display: flex; align-items: baseline; flex-wrap: wrap;
    gap: .3rem .7rem;
    padding: .38rem .8rem .42rem;
    background: var(--kmp-surface);
    border: 1px solid var(--kmp-border);
    border-left: 3px solid var(--kmp-secondary);
    border-radius: var(--kmp-radius-md);
    font-size: .8rem; line-height: 1.4;
}
.gy-esek--iyi { border-left-color: var(--kmp-success); }
.gy-esek--kotu { border-left-color: var(--kmp-danger); }
.gy-esek__etiket {
    font-size: .68rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .07em; color: var(--kmp-secondary);
}
.gy-esek__deger { color: var(--kmp-body); font-variant-numeric: tabular-nums; }
/* On-tescil damgasi: yalniz esik gecilince cizilir, o zaman da SATIRIN
   BASINA degil sayilarin yanina — kagit kolu izni sayidan sonra okunur. */
.gy-esek__tescil { color: var(--kmp-success); font-weight: 600; letter-spacing: .02em; }
/* Hukum cumlesi kendi satirina duser: sayilarin arasina sikisirsa hangi
   sayinin yorumu oldugu belirsizlesir. */
.gy-esek__cumle { flex: 1 0 100%; color: var(--kmp-body); }
.gy-esek__not { flex: 1 0 100%; color: var(--kmp-secondary); font-size: .72rem; }

/* ============================================================
   FIS (.gy-bilet) — kuponu KAGIT FIS gibi cizen yuzey
   Izgara satiri kuponu duzlestirir: alti ayakli bir kupon orada birbirine
   benzeyen alti satir olur. Fis, kuponu YAZILDIGI haliyle gosterir — ayak
   ayak, numarasiyla, sonucuyla.

   Renk YALNIZ ayak seridinde: her satiri boyamak, tutan ayagi degil ekranin
   tamamini vurgular. Bekleyen ayak notr kalir — henuz bir hukum yok.
   ============================================================ */
.gy-bilet {
    flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--kmp-sp-3); min-height: 0;
    font-size: .88rem;
}

/* Kunye: tur + kupon no + gun/hipodrom/saat + yayin-mi-simulasyon + durum. */
.gy-bilet__ust {
    flex: 0 0 auto;
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--kmp-sp-2) var(--kmp-sp-3);
    padding-bottom: var(--kmp-sp-2);
    border-bottom: 1px dashed var(--kmp-border);
}
.gy-bilet__kimlik { display: flex; align-items: baseline; gap: var(--kmp-sp-2); }
.gy-bilet__tur { font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; }
.gy-bilet__no {
    font-family: var(--kmp-font-mono); font-size: .78rem; color: var(--kmp-secondary);
    font-variant-numeric: tabular-nums;
}
.gy-bilet__nerede {
    display: flex; flex-wrap: wrap; align-items: center; gap: .1rem var(--kmp-sp-2);
    color: var(--kmp-secondary); font-size: .82rem;
}
.gy-bilet__rozetler { display: flex; align-items: center; gap: var(--kmp-sp-2); margin-left: auto; }

/* Ayaklar: fisin govdesi, tek kaydirma burada olur. */
.gy-bilet__ayaklar {
    flex: 1 1 auto; min-height: 0; overflow: auto;
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: var(--kmp-sp-2);
}
.gy-bilet__ayak {
    border: 1px solid var(--kmp-border); border-radius: var(--kmp-radius-md);
    background: var(--kmp-surface);
    padding: var(--kmp-sp-2) var(--kmp-sp-3);
}
/* Serit `border-left` DEGIL `inset box-shadow`: kenarlik ic genisligi degistirir,
   ayaklar sonuca gore birbirine gore kayardi (bkz. kosu seridi dersi). */
.gy-bilet__ayak--tuttu { box-shadow: inset 3px 0 0 0 var(--kmp-success); background: var(--kmp-success-subtle); }
.gy-bilet__ayak--yatti { box-shadow: inset 3px 0 0 0 var(--kmp-danger); }
.gy-bilet__ayak--bekliyor { box-shadow: inset 3px 0 0 0 var(--kmp-border); }

.gy-bilet__ayak-ust {
    display: flex; align-items: baseline; gap: var(--kmp-sp-2);
    margin-bottom: var(--kmp-sp-2);
}
.gy-bilet__ayakno {
    font-family: var(--kmp-font-mono); font-weight: 600; font-size: .82rem;
    color: var(--kmp-primary-text);
}
.gy-bilet__kosu { font-weight: 500; display: inline-flex; align-items: baseline; gap: .35rem; }
.gy-bilet__kosu .gy-num { color: var(--kmp-secondary); font-weight: 400; font-size: .82rem; }
.gy-bilet__sans { margin-left: auto; color: var(--kmp-secondary); font-size: .82rem; }

/* At satirlari: numara sabit, ad esner, jokey/oran/derece sagda hizali —
   fis boyunca kolonlar ayni yerde durmali, goz asagi kayarken satir aramasin. */
.gy-bilet__atlar { display: flex; flex-direction: column; gap: .15rem; }
.gy-bilet__at {
    display: grid; align-items: baseline;
    grid-template-columns: 1.6rem minmax(0, 1fr) minmax(0, 9rem) 3.4rem 2.2rem;
    gap: var(--kmp-sp-2);
    padding: .15rem 0;
}
.gy-bilet__at-no {
    font-family: var(--kmp-font-mono); font-variant-numeric: tabular-nums;
    text-align: center; font-size: .8rem;
    border: 1px solid var(--kmp-border); border-radius: var(--kmp-radius-sm);
    background: var(--kmp-surface-muted); color: var(--kmp-body);
}
.gy-bilet__at-ad { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gy-bilet__at-jokey {
    color: var(--kmp-secondary); font-size: .8rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gy-bilet__at-oran { text-align: right; font-variant-numeric: tabular-nums; }
/* Kapanis fiyati GORSEL olarak ayrilir: sabah yazilmis bir fisi aksam fiyatiyla
   okumak kahinlik olurdu; noktali alt cizgi "bu sayi sonradan olcuLdu" der. */
.gy-bilet__at-oran--kapanis { color: var(--kmp-secondary); border-bottom: 1px dotted currentColor; }
.gy-bilet__at-derece {
    text-align: right; font-variant-numeric: tabular-nums;
    color: var(--kmp-secondary); font-size: .8rem;
}
.gy-bilet__at--kazandi .gy-bilet__at-ad { color: var(--kmp-success); font-weight: 600; }
.gy-bilet__at--kazandi .gy-bilet__at-no {
    color: var(--kmp-success); border-color: color-mix(in srgb, var(--kmp-success) 40%, transparent);
    background: var(--kmp-success-subtle);
}

/* "Tutmadi" tek basina neyi kacirdigimizi soylemez: kazanan yazilir. */
.gy-bilet__kazanan {
    display: flex; align-items: center; gap: var(--kmp-sp-2);
    margin-top: var(--kmp-sp-2); padding-top: var(--kmp-sp-2);
    border-top: 1px dashed var(--kmp-border);
    font-size: .82rem; color: var(--kmp-secondary);
}

/* SIRALAMA: kosunun tum kadrosu. Kolonlar at satirlariyla AYNI hizada baslar
   (1.6rem + 1.6rem) -- goz yukaridaki secim listesinden asagiya inerken numara
   kolonunu kaybetmesin. Satir daha kucuk ve daha soluk: bu bir DOKUM, kuponun
   kendisi degil. */
.gy-bilet__saha {
    list-style: none; margin: var(--kmp-sp-2) 0 0; padding: var(--kmp-sp-2) 0 0;
    border-top: 1px dashed var(--kmp-border);
    display: flex; flex-direction: column; gap: 1px;
}
.gy-bilet__saha-at {
    display: grid; align-items: baseline;
    grid-template-columns: 1.6rem 1.6rem minmax(0, 1fr) minmax(0, 7rem) 2.6rem 3.2rem;
    gap: var(--kmp-sp-2);
    padding: .1rem .25rem; border-radius: var(--kmp-radius-sm);
    font-size: .78rem; color: var(--kmp-secondary);
}
.gy-bilet__saha-derece {
    text-align: center; font-family: var(--kmp-font-mono);
    font-variant-numeric: tabular-nums; font-weight: 600;
}
.gy-bilet__saha-no { text-align: center; font-family: var(--kmp-font-mono); font-variant-numeric: tabular-nums; }
.gy-bilet__saha-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gy-bilet__saha-jokey { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .8; }
.gy-bilet__saha-olasilik, .gy-bilet__saha-oran { text-align: right; font-variant-numeric: tabular-nums; }

\* Baslik satiri: iki sayi kolonu ("#" varis sirasi, "No" at numarasi) yan yana duruyor ve
   ikisi de sayi. Etiketsiz birakilinca "4. FERAT" cumlesi iki turlu okunuyordu -- 4 numarali
   at mi, dorduncu biten at mi. Baslik ucuz bir cozum degil, TEK dogru cozum: sayiyi degil
   sayinin NE oldugunu yaziyor. aria-hidden, cunku ekran okuyucu zaten hucre title'larini okur. */
.gy-bilet__saha-at--baslik {
    font-size: .68rem; letter-spacing: .04em; text-transform: uppercase;
    color: var(--kmp-secondary); font-weight: 600;
    padding-bottom: 2px; border-bottom: 1px solid var(--kmp-border);
}
.gy-bilet__saha-at--baslik:hover { background: none; }

/* OYNADIGIMIZ at: dolgu + sol serit. "Hangileri bizimdi" sorusu tek bakista
   yanitlanmali; oynamadiklarimiz zaten soluk kalir. */
.gy-bilet__saha-at--bizim {
    background: var(--kmp-surface-muted); color: var(--kmp-body); font-weight: 500;
    box-shadow: inset 2px 0 0 0 var(--kmp-primary);
}
.gy-bilet__saha-at--kazandi { color: var(--kmp-success); }
.gy-bilet__saha-at--kazandi .gy-bilet__saha-derece,
.gy-bilet__saha-at--kazandi .gy-bilet__saha-ad { font-weight: 700; }
/* Kosmayan at kadroda KALIR ama gecmis zamanda durur: bultende vardi, kosmadi. */
.gy-bilet__saha-at--kosmadi { opacity: .55; text-decoration-line: line-through; text-decoration-thickness: 1px; }

.gy-bilet__saha-anahtar {
    display: inline-flex; align-items: center; gap: .3rem;
    border: 1px solid var(--kmp-border); border-radius: var(--kmp-radius-pill);
    background: transparent; color: var(--kmp-secondary);
    padding: .1rem .55rem; font-size: .74rem; line-height: 1.6;
    cursor: pointer; transition: var(--kmp-transition);
}
.gy-bilet__saha-anahtar:hover { border-color: var(--kmp-primary); color: var(--kmp-primary-text); }
.gy-bilet__saha-anahtar--acik {
    background: var(--kmp-primary-subtle); border-color: color-mix(in srgb, var(--kmp-primary) 40%, transparent);
    color: var(--kmp-primary-text);
}

/* ODUL SERIDI -- kunyenin hemen altinda, ayaklardan ONCE. Fis acilinca ilk okunan sayi.
   Havuz/temettu/donen zaten en altta yaziliydi ve GORULMUYORDU (12.09.2026 "oduller????").
   Sans seridiyle ayni kabuk dili; deger bir kademe daha iri, cunku bu fisin tek "para" sayisi.
   Tutan kuponda deger yesil (.ok); tutsaydi/havuz hallerinde govde renginde -- kazanilmamis
   para yesil yazilmaz. */
.gy-bilet__odulband {
    flex: 0 0 auto;
    margin-top: var(--kmp-sp-2);
    padding: var(--kmp-sp-2) var(--kmp-sp-3);
    border: 1px solid var(--kmp-border);
    border-left: 3px solid var(--kmp-primary);
    border-radius: var(--kmp-radius-md);
    background: var(--kmp-surface-muted);
    display: flex; flex-direction: column; gap: .15rem;
}
.gy-bilet__odulband-etiket {
    color: var(--kmp-secondary); font-size: .74rem;
    text-transform: uppercase; letter-spacing: .04em;
}
.gy-bilet__odulband-govde {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: var(--kmp-sp-1) var(--kmp-sp-3);
}
.gy-bilet__odulband-deger {
    font-size: 1.5rem; font-weight: 700; line-height: 1.1;
    color: var(--kmp-body);
}
.gy-bilet__odulband-deger.ok { color: var(--bs-success); }
.gy-bilet__odulband-not { color: var(--kmp-secondary); font-size: .86rem; }
/* Ayrinti satiri: temettu . kazanan . havuz -- kucuk, noktali, sarilabilir. */
.gy-bilet__odulband-detay {
    display: flex; flex-wrap: wrap; gap: .2rem var(--kmp-sp-3);
    color: var(--kmp-secondary); font-size: .8rem;
}
.gy-bilet__odulband-detay > span + span::before { content: "·"; opacity: .55; margin-right: var(--kmp-sp-3); }

/* CANLI SERIT -- kosular surerken: yasayan yol sayaci + kalan sans + tutarsa odeme kestirimi.
   Odul seridiyle ayni cerceve; ayirt edici tek sey sol cizginin rengi (bilgi, para degil). */
.gy-bilet__odulband--canli { border-left-color: var(--bs-info); }
.gy-bilet__canli-yollar {
    list-style: none; margin: .2rem 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .15rem var(--kmp-sp-3); font-size: .84rem;
}
.gy-bilet__canli-yol {
    display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) 3.6rem 6.5rem;
    align-items: baseline; gap: var(--kmp-sp-2);
}
.gy-bilet__canli-no { font-weight: 700; text-align: right; }
.gy-bilet__canli-at { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gy-bilet__canli-donen { text-align: right; color: var(--kmp-body); font-weight: 600; }
.gy-bilet__canli-yol > .gy-num:nth-child(3) { text-align: right; color: var(--kmp-secondary); }
.gy-gunserit {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem var(--kmp-sp-3);
    padding: var(--kmp-sp-2) var(--kmp-sp-3); margin-bottom: var(--kmp-sp-2);
    border: 1px solid var(--kmp-border); border-left: 3px solid var(--bs-info);
    border-radius: var(--kmp-radius-md); background: var(--kmp-surface-muted); font-size: .9rem;
}
.gy-gunserit__deger { font-weight: 700; font-size: 1.1rem; }
.gy-gunserit__not { color: var(--kmp-secondary); font-size: .82rem; }

/* SANS SERIDI -- ayaklarin hemen altinda, kuponun tutma sansi + carpimin kendisi.
   Sayi eskiden alt kunyede kucuk bir satirdi ve GORULMUYORDU; ayak yuzdeleri her ayagin
   basliginda ise iri duruyordu. Serit ikisini ayni dile getirir: burasi ayak seridinin
   TOPLAMIDIR, o yuzden ayni cerceve dilini (kesikli ust cizgi + hafif zemin) kullanir ama
   sonucu bir kademe daha buyuk yazar.
   Carpim satiri kasten okunakli: "%50,2 x %58,1 x ... = %1,45" cumlesi, alti ayagin neden
   hizla eridigini ipucu balonu acmadan anlatir. */
.gy-bilet__sansband {
    flex: 0 0 auto;
    margin-top: var(--kmp-sp-2);
    padding: var(--kmp-sp-2) var(--kmp-sp-3);
    border: 1px solid var(--kmp-border);
    border-radius: var(--kmp-radius-md);
    background: var(--kmp-surface-muted);
    display: flex; flex-direction: column; gap: .15rem;
}
.gy-bilet__sansband-etiket {
    color: var(--kmp-secondary); font-size: .74rem;
    text-transform: uppercase; letter-spacing: .04em;
}
/* Carpim ile sonuc AYRI kutular: dar ekranda satir once buradan kirilsin, sonucu
   "= %1,45"ten koparmasin. */
.gy-bilet__sansband-hesap {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: var(--kmp-sp-2) var(--kmp-sp-3);
}
.gy-bilet__sansband-carpim {
    display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .3rem;
    color: var(--kmp-secondary); font-size: .82rem;
}
/* Carpanlar SAYIDIR, "x" ve "=" noktalama. Ayni tonda yazilsalardi zincir gri bir
   bulanikliga donerdi; ayak yuzdeleri govde renginde, isaretler soluk durur. Tonlar
   ayaklarin kendi rozetiyle (.gy-bilet__sans) ayni olcekte kalir: goz yukaridaki
   yuzdeyi asagida ayni sayi olarak taniyabilmeli. */
.gy-bilet__sansband-ayak { color: var(--kmp-body); font-weight: 500; }
.gy-bilet__sansband-op { opacity: .55; }
.gy-bilet__sansband-sonuc { display: inline-flex; align-items: baseline; gap: var(--kmp-sp-2); }
.gy-bilet__sansband-deger {
    font-size: 1.35rem; font-weight: 700; line-height: 1.1;
    color: var(--kmp-primary-text);
}
/* "69 kuponda 1" yuzdenin YERINE gecmez, yaninda durur -> bir kademe silik ve kucuk. */
.gy-bilet__sansband-kac { color: var(--kmp-secondary); font-size: .86rem; }

/* NEREDE BITER seridi -- sans seridinin ikizi, ayni kabuk dili.
   Sans seridi "altisi da tutar mi" sorusunu yanitlar; bu serit "tutmazsa nerede kopar"
   sorusunu. Ikincisi oynayanin gercekte yasadigi sorudur.
   Cubuk bir SEKILDIR: mesaji "ilk ayak kuponun yarisini yiyor". Kesin sayilar ipucu
   balonunda ve ozet satirinda durur -- cubugun uzerinde degil, cunku dar dilime sigmayan
   sayi kirpilip gurultuye doner. */
.gy-bilet__riskband {
    flex: 0 0 auto;
    margin-top: var(--kmp-sp-2);
    padding: var(--kmp-sp-2) var(--kmp-sp-3);
    border: 1px solid var(--kmp-border);
    border-radius: var(--kmp-radius-md);
    background: var(--kmp-surface-muted);
    display: flex; flex-direction: column; gap: .3rem;
}
.gy-bilet__risk { display: flex; flex-direction: column; gap: .35rem; }
/* 2px'lik bosluklar dilim SINIRINI gosterir: bitisik iki kirmizi dilim tek blok gibi
   okunurdu. Zemin cerceve rengi -> bosluklar cizgi gibi gorunur. */
.gy-bilet__risk-bar {
    display: flex; align-items: stretch; gap: 2px;
    height: 1.15rem;
    border-radius: var(--kmp-radius-sm);
    overflow: hidden;
    background: var(--kmp-border);
}
/* flex-basis:0 -> genislik TAMAMEN flex-grow'dan, yani veriden gelir. min-width sifir
   payli ayagi da gorunur kilar (dilim sayisi ayak sayisini tutmali) ama 2px, ~320px'lik
   bir cubukta %0,6 -- orani bozmayacak kadar kucuk. */
.gy-bilet__risk-dilim {
    flex-basis: 0; min-width: 2px;
    display: flex; align-items: center; justify-content: center;
    background: var(--kmp-danger);
    color: var(--kmp-surface);
    font-size: .62rem; font-weight: 700; line-height: 1;
    overflow: hidden;
}
/* Komsu dilimler ton degistirir. Renk SIRAYA anlam yuklemez (koyu = tehlikeli degil):
   ayirt etmek icindir, cunku ayagin tehlikesi zaten dilimin ENIDIR. */
.gy-bilet__risk-dilim:nth-child(2n) {
    background: color-mix(in srgb, var(--kmp-danger) 72%, var(--kmp-surface));
}
/* "Butun ayaklar tutar" dilimi: tek yesil.
   ⚠️ Secici KASTEN iki sinifli: ustteki nth-child kuralinin ozgullugu (0,2,0) tek basina
   `.gy-bilet__risk-dilim--tuttu`yu (0,1,0) YENER. Cift sirada duran yesil dilim -- yani
   tek/uc/bes ayakli kuponlarin hepsi -- sessizce kirmiziya donerdi ve "hepsi tuttu" dilimi
   bir olum dilimi gibi okunurdu. Sonrada yazilmis olmak yetmez; ozgulluk esitlenmeli. */
.gy-bilet__risk-bar .gy-bilet__risk-dilim--tuttu { background: var(--kmp-success); }
/* Kuponun GERCEKTE bittigi ayak. Ic cerceve her genislikte gorunur -- 2px'lik dilimde bile
   dolu bir isaret olur; disariya buyuyen bir cerceve ise komsu dilimi kirpardi. */
.gy-bilet__risk-dilim--gercek {
    box-shadow: inset 0 0 0 2px var(--kmp-body);
}
.gy-bilet__risk-ozet {
    margin: 0; color: var(--kmp-secondary); font-size: .8rem;
    display: flex; flex-wrap: wrap; gap: .3rem;
}
.gy-bilet__risk-zayif { color: var(--kmp-warning); }
.gy-bilet__risk-gercek-not { color: var(--kmp-danger); font-weight: 600; }

/* OLUM RAPORU -- kaybedilen ayagin anatomisi. Ustteki iki serit kosu ONCESI profildir; bu
   serit kosu SONRASI gercektir. Ayni kabuk dilini kullanir (kesikli cerceve + hafif zemin)
   ama her ayagi sol kenardan bir cizgiyle isaretler: alt alta duran iki raporda kuponu
   OLDUREN ayak ile ondan sonra kosan ayaklar ayirt edilebilmeli -- ikincisi zaten olmus bir
   bilette kostu ve ayni tonda yazilsaydi kuponun nerede bittigi yeniden aranirdi. */
.gy-bilet__kirilma {
    flex: 0 0 auto;
    margin-top: var(--kmp-sp-2);
    padding: var(--kmp-sp-2) var(--kmp-sp-3);
    border: 1px solid var(--kmp-border);
    border-radius: var(--kmp-radius-md);
    background: var(--kmp-surface-muted);
    display: flex; flex-direction: column; gap: var(--kmp-sp-2);
}
.gy-bilet__kirilma-ayak {
    display: flex; flex-direction: column; gap: .3rem;
    padding-left: var(--kmp-sp-2);
    border-left: 3px solid var(--kmp-border);
}
.gy-bilet__kirilma-ayak--kirdi { border-left-color: var(--kmp-danger); }
.gy-bilet__kirilma-ust { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem var(--kmp-sp-2); }
.gy-bilet__kirilma-yer {
    display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .3rem var(--kmp-sp-2);
    color: var(--kmp-body); font-size: .84rem;
}
.gy-bilet__kirilma-genislik { color: var(--kmp-secondary); font-size: .78rem; }
.gy-bilet__kirilma-kirdi { color: var(--kmp-danger); font-size: .78rem; font-weight: 600; }
/* Hukum rozeti saga yaslanir: solda YER (degisken uzunlukta), sagda HUKUM (dort sabit
   degerden biri) -- goz raporlari alt alta tararken hukum kolonu hizali kalir. */
.gy-bilet__kirilma-hukum {
    margin-left: auto;
    padding: .1rem .5rem;
    border: 1px solid var(--kmp-border);
    border-radius: var(--kmp-radius-pill, 999px);
    font-size: .74rem; font-weight: 700; white-space: nowrap;
}
/* Renk MUHATABI soyler, siddeti degil: bizde olan eksik uyaridir (sari), piyasada olup
   bizde olmayan bilgi tehlikedir (kirmizi), gercek surpriz kimsenin kusuru degildir (notr).
   "Olcemedik" de notrdur -- bir kusur iddiasi degildir. */
.gy-bilet__kirilma-hukum--gorduk {
    border-color: color-mix(in srgb, var(--kmp-warning) 45%, transparent);
    background: var(--kmp-warning-subtle); color: var(--kmp-warning);
}
.gy-bilet__kirilma-hukum--piyasa {
    border-color: color-mix(in srgb, var(--kmp-danger) 45%, transparent);
    background: var(--kmp-danger-subtle); color: var(--kmp-danger);
}
.gy-bilet__kirilma-hukum--surpriz,
.gy-bilet__kirilma-hukum--olculemedi { color: var(--kmp-secondary); }
/* Etiket kolonu SABIT genislikte: uc satirin degerleri ayni hizada baslamazsa "Kazanan /
   Bizde / Fiyat" uc ayri cumle gibi okunur, oysa tek bir raporun uc kolonudur. */
.gy-bilet__kirilma-satirlar { display: flex; flex-direction: column; gap: .2rem; }
.gy-bilet__kirilma-satir {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: .3rem var(--kmp-sp-2); font-size: .82rem;
}
.gy-bilet__kirilma-etiket {
    flex: 0 0 5.5rem;
    color: var(--kmp-secondary); font-size: .74rem;
    text-transform: uppercase; letter-spacing: .04em;
}
.gy-bilet__kirilma-deger {
    display: inline-flex; flex-wrap: wrap; align-items: baseline;
    gap: .3rem var(--kmp-sp-2); color: var(--kmp-body);
}
/* Saf cetvel cipalinin YANINDA durur, YERINE degil -> bir kademe silik. */
.gy-bilet__kirilma-saf { color: var(--kmp-secondary); }
.gy-bilet__kirilma-kisaldi { color: var(--kmp-danger); font-weight: 600; }
.gy-bilet__kirilma-acildi { color: var(--kmp-success); font-weight: 600; }
.gy-bilet__kirilma-kayma { color: var(--kmp-secondary); font-size: .78rem; }
/* Olculemeyen alan BOS BIRAKILMAZ: bos hucre "sifir" diye okunur, bu ise "bilinmiyor". */
.gy-bilet__kirilma-yok { color: var(--kmp-secondary); font-style: italic; }
.gy-bilet__kirilma-not { margin: 0; color: var(--kmp-secondary); font-size: .8rem; line-height: 1.45; }

/* DISIPLIN NOTU -- tutarin yaninda duran kucuk cetvel. Normalde SESSIZ (rozet degil, silik
   bir not): her kupon icin bagirsaydi uyari gurultuye doner ve asim gunu ayirt edilemezdi.
   Asimda rozete doner -- renk degil, ZEMIN degisir; renkle vurgu tek basina renk korlugunde
   kaybolur, zemin+cerceve kaybolmaz. */
.gy-bilet__disiplin {
    display: inline-flex; align-items: center;
    color: var(--kmp-secondary); font-size: .76rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.gy-bilet__disiplin--asim {
    padding: .1rem .45rem;
    border: 1px solid color-mix(in srgb, var(--kmp-danger) 45%, transparent);
    border-radius: var(--kmp-radius-pill, 999px);
    background: var(--kmp-danger-subtle);
    color: var(--kmp-danger);
    font-weight: 700;
}

/* Alt kunye: kombinasyon/misli/tutar + odeme/net/strateji. */
.gy-bilet__alt {
    flex: 0 0 auto;
    padding-top: var(--kmp-sp-2);
    border-top: 1px dashed var(--kmp-border);
    display: flex; flex-direction: column; gap: var(--kmp-sp-2);
}
.gy-bilet__ozet { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--kmp-sp-1) var(--kmp-sp-3); }
.gy-bilet__ozet-ana { color: var(--kmp-secondary); font-size: .82rem; }
.gy-bilet__tutar { margin-left: auto; font-size: 1.05rem; font-weight: 600; }
/* Tutarin HESABI: "486 x 1,25 TL =". Sonuctan kucuk ve soluk -- goz once odenecek sayiyi
   bulsun, sonra nereden ciktigini okusun. Birim degistigi gun fark edilebilir olmasinin
   bedeli bu yarim satirdir (26.08.2026: ekranda 486,00 TL, e-bayi'de 607,50 TL). */
.gy-bilet__carpim {
    font-size: .74rem; font-weight: 500; color: var(--kmp-secondary);
    margin-inline-end: var(--kmp-sp-1);
}
/* BIRIM KUNYESI: carpanin altinda, KENDI satirinda (flex-basis 100%). Ozet satiri zaten uc
   parcali (kombinasyon/misli - tutar - disiplin); dordunculer 52rem'lik pencerede tasardi.
   Iki hal, iki agirlik: "olculmedi" bir BILGISIZLIK bildirir (soluk, soru isareti), "celiski"
   bir KUSUR bildirir (uyari rengi, ucgen). Olculup tutmus birimde hicbir sey cizilmez --
   her dogru sayinin yanina onay rozeti koymak uyariyi da gurultuye cevirirdi. */
.gy-bilet__birim-uyari {
    flex: 1 0 100%;
    display: inline-flex; align-items: center; gap: var(--kmp-sp-1);
    color: var(--kmp-secondary); font-size: .74rem;
    font-variant-numeric: tabular-nums;
}
.gy-bilet__birim-uyari .bi { font-size: .8rem; line-height: 1; }
.gy-bilet__birim-uyari--celiski {
    color: var(--kmp-warning);   /* iki temada da tanimli: acikta #b45309, koyuda #fbbf24 */
    font-weight: 600;
}
.gy-bilet__birim-tutar { font-weight: 700; }
.gy-bilet__satirlar { display: flex; flex-wrap: wrap; gap: var(--kmp-sp-2) var(--kmp-sp-6); }
.gy-bilet__satir { display: inline-flex; align-items: baseline; gap: var(--kmp-sp-2); }
.gy-bilet__satir-etiket {
    color: var(--kmp-secondary); font-size: .74rem;
    text-transform: uppercase; letter-spacing: .04em;
}
.gy-bilet__satir-deger { font-weight: 600; }
.gy-bilet__satir-deger.ok { color: var(--kmp-success); }
.gy-bilet__satir-deger.bad { color: var(--kmp-danger); }
/* Resmi karttan HESAPLANMIS para: kasadan cikmadi/girmedi. Kesikli alt cizgi "bu bir
   karsilik, tahsil edilmis para degil" der; ok/bad rengi korunur, yoksa sonucun kendisi
   okunamaz. Ayrintiyi ustundeki title ve altindaki not yazar. */
.gy-bilet__satir-deger--kart {
    border-bottom: 1px dashed var(--kmp-border);
    padding-bottom: 1px;
}
/* "henuz ilan edilmedi": bir OLCUM YOKLUGUdur, sifir degil. Sayi agirliginda yazilirsa
   deger gibi okunur; soluk ve normal agirlikta durur ki hucre dolu ama SAYI YOK desin. */
.gy-bilet__satir-deger--yok { font-weight: 500; color: var(--kmp-secondary); }
.gy-bilet__not { margin: 0; font-size: .8rem; color: var(--kmp-secondary); }

/* ============================================================
   Hazir kuponlar — ayni altiliya uc butce
   Kartlar ayni satirda durur ki dar/normal/genis TEK bakista karsilastirilabilsin;
   alt alta dizilseydi "hangisi ne kadar" sorusu kaydirma gerektirirdi.
   ============================================================ */
.gy-hazir {
    display: flex; flex-direction: column; gap: var(--kmp-sp-3);
    overflow: auto; min-height: 0;
}
/* ── Altılı çerçevesi ─────────────────────────────────────────────────────────
   Beş altılı yan yana dizildiğinde hepsi aynı gri çerçeveye sahipti; hangi kartın
   hangi pistin hangi altılısı olduğu ancak başlığı OKUYARAK anlaşılıyordu. Renk
   dili yukarıda (`.gy-renk`); burası yalnız o rengin çerçeveye uygulanışı. */
.gy-hazir__grup {
    border: 2px solid color-mix(in srgb, var(--gy-pist-renk) 60%, transparent);
    border-radius: var(--kmp-radius-md);
    background: var(--kmp-surface); padding: var(--kmp-sp-3);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gy-pist-renk) 12%, transparent);
    display: flex; flex-direction: column; gap: var(--kmp-sp-2);
}
/* Başlıktaki pist adı ve altılı rozeti de çerçeveyle aynı rengi alır: çerçeve ile ad
   arasındaki bağ kurulmazsa renk yalnız süs olur. */
.gy-hazir__grup .gy-hazir__pist { color: var(--gy-pist-renk); }
.gy-hazir__grup .gy-hazir__altili {
    color: var(--gy-pist-renk);
    background: color-mix(in srgb, var(--gy-pist-renk) 15%, transparent);
    border-color: color-mix(in srgb, var(--gy-pist-renk) 45%, transparent);
}
.gy-hazir__ust {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--kmp-sp-2);
}
.gy-hazir__pist { font-weight: 600; }
/* Altilinin TJK'daki adi ("2. Altili"). Pist adi kadar bagirmaz ama aralik kadar da sonmez:
   ayni pistte iki grup varsa birbirinden AYIRAN sey budur. */
.gy-hazir__altili {
    font-size: .74rem; font-weight: 700; white-space: nowrap;
    padding: .04rem .34rem; border-radius: var(--kmp-radius-pill);
    color: var(--kmp-primary-text); background: var(--kmp-primary-subtle);
    border: 1px solid var(--kmp-primary-border-subtle);
}
.gy-hazir__aralik { color: var(--kmp-secondary); font-size: .82rem; }
.gy-hazir__saat { color: var(--kmp-secondary); font-size: .82rem; margin-left: auto; }
.gy-hazir__not { margin: 0; font-size: .82rem; color: var(--kmp-secondary); }
/* Gosterilmeyen basamagin GEREKCESI. Kartlarin ALTINDA ve daha sonik durur: bir aciklama,
   acikladigi seyin onune gecmemeli. Kart sayisi gunden gune degisir; sebebi yazilmayan
   eksiklik ariza gibi okunur (29.08.2026 kullanici sorusu). */
.gy-hazir__eksik {
    margin: .4rem 0 0; font-size: .78rem; line-height: 1.45;
    color: var(--kmp-secondary);
}

.gy-hazir__kartlar {
    display: grid; gap: var(--kmp-sp-2);
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
/* Kart bir DUGME: tiklaninca fis penceresi acilir. Gorunumu kart, davranisi dugme. */
.gy-hazir__kart {
    display: flex; flex-direction: column; gap: .28rem;
    text-align: left; cursor: pointer;
    padding: var(--kmp-sp-2) var(--kmp-sp-3);
    border: 1px solid var(--kmp-border); border-radius: var(--kmp-radius-sm);
    background: var(--kmp-surface-muted); color: inherit;
    transition: var(--kmp-transition);
}
.gy-hazir__kart:hover {
    border-color: var(--kmp-primary-border-subtle);
    background: var(--kmp-primary-subtle);
    transform: translateY(-1px);
}
.gy-hazir__kart:focus-visible { outline: var(--kmp-focus-ring); outline-offset: 2px; }
.gy-hazir__ad { font-weight: 600; font-size: .9rem; }
.gy-hazir__tutar { font-size: 1.1rem; font-weight: 700; }
/* Dagilim kuponun kendisi: 1x2x3x1x2x1 hem kombinasyonu hem parayi nereye koydugumuzu yazar. */
/* Kap `inline` KALIR (v0.6.31 dersi). Carpanlar ayri <span>'ler oldugu icin once `display:flex`
   denendi -- kaynak bosluklari cizilmesin diye; ama flex ogeleri BLOK'a cevrilir ve `innerText`
   blok kutulari arasina satir sonu koyar: dizi ekranda "1x1x1" gorunurken metin olarak
   "1\n×\n1\n×\n1" okundu ve iki kapi birden dustu (hazir-kupon deseni + kurucu ile BIREBIR
   karsilastirma). Bosluk zaten dert degil: Blazor yalniz-bosluk dugumlerini derlerken atar.
   Yani satir ici akis hem sikisik cizilir hem "1x1x1" olarak okunur. */
.gy-hazir__dagilim {
    font-family: var(--kmp-font-mono); font-size: .82rem; color: var(--kmp-primary-text);
}
/* Her carpan kendi ayaginin halini boyar: yesil = kazanani isaretlemisiz, kirmizi = kacirmisiz,
   notr = kosu daha yapilmadi. Boylece "altida kacini bildik" sayi okumadan gorunur.
   Vurgu `text-decoration` ile verilir, `border`/`padding` ile DEGIL: kenarlik satir kutusunu
   buyutur, kart yukselir ve yogunluk kapisi (1280x720) ates ederdi - v0.6.27 dersi. */
.gy-dag { padding: 0 .18em; border-radius: var(--kmp-radius-sm); }
.gy-dag--tuttu {
    color: var(--kmp-success); background: var(--kmp-success-subtle); font-weight: 700;
    text-decoration: underline solid; text-underline-offset: 2px; text-decoration-thickness: 2px;
}
.gy-dag--yatti {
    color: var(--kmp-danger);
    text-decoration: underline dashed; text-underline-offset: 2px; text-decoration-thickness: 2px;
}
.gy-dag--bekliyor { color: var(--kmp-secondary); }
.gy-dag__x { color: var(--kmp-secondary); opacity: .6; }
.gy-hazir__olcu { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem var(--kmp-sp-2); }
.gy-hazir__olcu-etiket {
    color: var(--kmp-secondary); font-size: .72rem;
    text-transform: uppercase; letter-spacing: .04em;
}
.gy-hazir__olcu-deger { margin-left: auto; font-weight: 600; font-size: .82rem; }
/* Sansin okunakli ikizi ("~69 kuponda 1"): degerin sagi, bir kademe silik. margin-left:auto
   BURADA DA gerekli -- dar kartta kendi satirina kirildiginda sola yapismasin. */
.gy-hazir__olcu-yan {
    margin-left: auto; color: var(--kmp-secondary); font-size: .74rem; white-space: nowrap;
}

/* ============================================================
   Kupon kurucusu — ayak yuvali ray (salt-okur hesap makinesi)
   Ayaklar YAN YANA durur: kuponu kuran kisi "hangi ayakta kac at var" sorusunu kaydirmadan
   gormeli — dagilim (1x3x2...) kuponun kendisidir. Alt alta dizilseydi ancak scroll ile
   okunurdu. Hesap seridi altta SABIT: at isaretlerken tutar gozden kaybolmaz.
   ============================================================ */
.gy-kurucu { display: flex; min-height: 0; }
.gy-kurucu__ray {
    flex: 1 1 auto; min-height: 0;
    display: grid; grid-auto-flow: column;
    grid-auto-columns: minmax(10.5rem, 1fr);
    gap: var(--kmp-sp-2);
    overflow: auto;
}
.gy-kurucu__ayak {
    display: flex; flex-direction: column; min-height: 0;
    border: 1px solid var(--kmp-border); border-radius: var(--kmp-radius-md);
    background: var(--kmp-surface);
}
/* Bos ayak butun kuponu dusurur (kombinasyon "—" olur): kenari uyari rengine cevirmek,
   hesabin NEDEN sayi yazmadigini rayin kendisinde gosterir. */
.gy-kurucu__ayak.is-bos { border-color: color-mix(in srgb, var(--kmp-warning) 40%, var(--kmp-border)); }

.gy-kurucu__ust {
    position: sticky; top: 0; z-index: 1;
    display: flex; align-items: baseline; gap: .3rem; flex-wrap: wrap;
    padding: .35rem .45rem;
    background: var(--kmp-surface-muted);
    border-bottom: 1px solid var(--kmp-border);
    border-radius: var(--kmp-radius-md) var(--kmp-radius-md) 0 0;
}
.gy-kurucu__ayakno { font-weight: 600; font-size: .78rem; }
.gy-kurucu__kosu, .gy-kurucu__saat { color: var(--kmp-secondary); font-size: .7rem; }
.gy-kurucu__saat { margin-left: auto; }
.gy-kurucu__tumu {
    flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: .25rem;
    padding: .08rem .35rem; font-size: .68rem;
    color: var(--kmp-primary-text); background: transparent;
    border: 1px solid var(--kmp-primary-border-subtle); border-radius: var(--kmp-radius-pill);
    cursor: pointer; transition: var(--kmp-transition);
}
.gy-kurucu__tumu:hover { background: var(--kmp-primary-subtle); }
.gy-kurucu__tumu:focus-visible { outline: var(--kmp-focus-ring); outline-offset: 1px; }

.gy-kurucu__atlar {
    flex: 1 1 auto; min-height: 0; overflow: auto;
    list-style: none; margin: 0; padding: .2rem;
}
/* Satir FLEX, grid degil: taki rozeti bos oldugunda hic render EDILMEZ (GyTaki.BosGizle) —
   grid olsaydi rozetsiz satirlarda olasilik/oran bir kolon kayar, sutunlar hizalanmazdi. */
.gy-kurucu__satir {
    display: flex; align-items: center; gap: .3rem;
    padding: .16rem .25rem; border-radius: var(--kmp-radius-sm);
    font-size: .76rem; cursor: pointer;
}
.gy-kurucu__satir:hover { background: var(--kmp-surface-muted); }
.gy-kurucu__satir input[type="checkbox"] { flex: 0 0 auto; margin: 0; cursor: pointer; }
.gy-kurucu__at.is-secili > .gy-kurucu__satir { background: var(--kmp-primary-subtle); }
.gy-kurucu__no { flex: 0 0 1.2rem; text-align: right; color: var(--kmp-secondary); }
/* Ad kendi kutusunda esner ve ucnokta ADI yer: sabit genislikli sayilar kirpilmaz. */
.gy-kurucu__ad { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gy-kurucu__olasilik { flex: 0 0 2.1rem; margin-left: auto; text-align: right; font-weight: 600; }
.gy-kurucu__oran { flex: 0 0 2.4rem; text-align: right; color: var(--kmp-secondary); }
.gy-kurucu__kosmayan { margin: 0; padding: .15rem .45rem .35rem; font-size: .68rem; color: var(--kmp-secondary); }

.gy-kurucu__hesap {
    flex: 0 0 auto;
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--kmp-sp-3);
    padding: var(--kmp-sp-2) var(--kmp-sp-3);
    border: 1px solid var(--kmp-border); border-radius: var(--kmp-radius-md);
    background: var(--kmp-surface);
}
.gy-kurucu__olculer { display: flex; flex-wrap: wrap; gap: var(--kmp-sp-3); }
.gy-kurucu__olcu { display: flex; flex-direction: column; }
.gy-kurucu__olcu-etiket {
    color: var(--kmp-secondary); font-size: .66rem;
    text-transform: uppercase; letter-spacing: .04em;
}
.gy-kurucu__olcu-deger { font-weight: 600; font-size: .88rem; }
.gy-kurucu__tutar { font-size: 1.05rem; font-weight: 700; }
/* Tutarin CARPANI: "48 x 1,25 TL". Sonucun ALTINDA, ondan kucuk ve soluk -- goz once
   odenecek sayiyi bulsun, sonra nereden ciktigini okusun. Fisteki .gy-bilet__carpim ile
   ayni dil, ayni gerekce (26.08.2026: ekranda 486,00 TL, e-bayi'de 607,50 TL). */
.gy-kurucu__olcu-carpim {
    font-size: .68rem; font-weight: 500; color: var(--kmp-secondary); line-height: 1.3;
}
.gy-kurucu__uyarilar { display: flex; flex-direction: column; gap: .1rem; flex: 1 1 12rem; min-width: 0; }
.gy-kurucu__uyari { font-size: .7rem; color: var(--kmp-secondary); }
.gy-kurucu__uyari--eksik { color: var(--kmp-warning); }
.gy-kurucu__aksiyon { display: flex; gap: var(--kmp-sp-2); margin-left: auto; }

.gy-kurucu__gruplar { margin-bottom: 0; }
.gy-kurucu__grupsec { display: inline-flex; align-items: baseline; gap: .3rem; cursor: pointer; }
.gy-kurucu__grupsec.is-active { color: #fff; background: var(--kmp-primary); border-color: var(--kmp-primary); }
.gy-kurucu__grupsec:focus-visible { outline: var(--kmp-focus-ring); outline-offset: 2px; }

/* ============================================================
   Dar ekran (telefon) — grid sıkıştırma
   Kolon SAYISI C# tarafında düşürülür (GyGrid.MobilGizli, esik gy-shell.js DAR = 767.98).
   Burada yalnız kalan kolonların hücre dolgusu/yazısı küçültülür ve yatay kaydırma
   TABLONUN KENDİ kapsayıcısında tutulur — sayfa gövdesi yana kaymasın.
   ============================================================ */
@media (max-width: 767.98px) {
    .gy-content { padding: var(--kmp-sp-2) var(--kmp-sp-3) var(--kmp-sp-3); }

    .kmp-grid-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    .kmp-grid-table th,
    .kmp-grid-table td { padding-left: .4rem; padding-right: .4rem; }

    .kmp-grid-table { font-size: .88rem; }

    /* Kolon genişlikleri kalan alana sığmayınca `table-layout: fixed` genişliği
       BELİRTİLMEMİŞ kolonu sıfıra indirir. Ölçüm (/kuponlar, 390px): tablo 480px,
       kolonlar 80/0/80/100/110/110 — AT kolonu 0 genişlikte kalıp adı harf harf
       sarıyordu ve satır 110px oluyordu (dokuz satırın BİRİ görünür). Telefonda
       düzen içerikten kurulur, tablo kendi kapsayıcısında yatay kayar: her kolon
       kendi genişliğini alır, satır tek satıra iner. Yatay kaydırma zaten bu
       bölümün kuralı — kaydırma TABLONUN kendi kabında, sayfa gövdesi yana kaymaz. */
    .kmp-grid-table { table-layout: auto; width: max-content; min-width: 100%; }
    .kmp-grid-table th, .kmp-grid-table td { white-space: nowrap; }

    /* Ölçü şeridi SARMAZ, yatay kayar. Ölçüm (390x844): yedi ölçü beş satıra sarıyor
       ve 94px yer yiyordu — ekranın %11'i, yani iki koşu satırı. Ray hâlinde tek satır
       ~19px. Hiçbir ölçü kaldırılmadı; sıra da değişmedi (telefonda başka sıra görmek
       "başka ölçü" izlenimi verirdi), kaydırma çubuğu devamının olduğunu söyler.
       `flex: 0 0 auto` ŞART: `overflow` görünür olmaktan çıkınca öğenin kendiliğinden
       gelen en küçük boyu (min-height:auto) sıfıra düşer, şerit de bir `.gy-dock`
       çocuğu olduğu için kalan yer paylaştırılırken 6px'e EZİLDİ (ölçüldü: çipler
       17-19px iken kap 6px) — yani ölçüler ekranda görünmez oldu. Aynı ders dock'un
       diğer çocuklarında zaten yazılıydı (.gy-note/.gy-ozet/.gy-cards/.gy-tabs). */
    .gy-stats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; gap: 0 .9rem; flex: 0 0 auto; }
    .gy-stat { flex: 0 0 auto; }

    /* Sekme etiketi sarmaz. Ölçüm (/kuponlar, 390px): "Günün fişi" + sayı çipi alt alta
       düşünce sekme şeridi 53px oluyordu; tek satırda 33px. Şerit zaten yatay kayıyor,
       yani sığmayan sekme gizlenmiyor — kaydırılıyor. */
    .gy-tabs { overflow-x: auto; scrollbar-width: thin; flex: 0 0 auto; }
    .gy-tab { white-space: nowrap; flex: 0 0 auto; }

    /* Eylem notu kendi satırına, TAM genişliğe geçer.
       ⚠️ DÜZELTME (ölçüldü, önceki iddia YANLIŞTI): burada önce "tam genişlikte üç
       satır ≈ 50px" yazıyordu. Ölçüm bunu çürüttü — not yine 68px (beş satır) ve
       `.gy-actionbar` toplamı iki düzende de ~114px. Yani tam genişliğe geçmek
       YÜKSEKLİK KAZANDIRMIYOR; kalma gerekçesi başka: düğme kendi satırında tam
       dokunma boyunu alıyor ve not daha uzun/az sayıda satıra yayılıyor.

       Not KIRPILMADI. `--tek` varyantı geniş ekranda tek satır + üç nokta, tamamı
       `title`'da; dokunmatikte `title` HİÇ açılmaz, dolayısıyla kırpmak burada
       "gizlemek" olurdu — portalin dürüstlük kuralı buna izin vermiyor (dışarıda
       kalan kupon sayısı, kalibrasyon uyarısı gibi cümleler bu şeritte duruyor).
       114px'in bedeli ~1,5 fiş satırı; bilinçli ve burada yazılı. */
    .gy-actionbar__note { flex: 1 1 100%; font-size: .72rem; }

    /* Gün çubuğu tek satırda kalsın. Ölçüm (390): ok + tarih + ok + "Bugün" + hesapla =
       361px, 366px'lik gövdeye boşluklarla birlikte sığmayıp İKİ satıra çıkıyordu (71px).
       Tarih kutusu 8,5rem yerine 6,6rem — "23.08.2026" on karakter, rahat sığar.
       `flex-wrap` KAPATILMAZ: sığmayan bir dil/çeviri sarsın, taşıp kesilmesin. */
    .gy-daybar { gap: .35rem; }
    .gy-daybar__date { min-width: 0; width: 6.6rem; }
    .gy-daybar__select { min-width: 0; flex: 1 1 6rem; }

    /* Sıradaki koşunun kadrosu telefonda ekranın %31'ini yiyordu (260px): panel AÇIK
       geldiğinde (koşuya 15 dk kala sunucu açıyor) gün listesinden geriye tek satır
       kalıyordu. Liste kendi içinde zaten kayıyor — 26vh yerine 17vh. Kırpma değil
       pencere daraltma: aynı kadro, daha küçük bakış deliği. */
    .gy-kadroluk__liste { max-height: 17vh; }

    /* Dokunma hedefi: çekmece bağlantıları 32px, grup başlıkları 29px ölçüldü — parmak
       için düşük (AA tabanı 24px'in üstünde ama hedef 44px'in altında). Çekmece SERBEST
       kayan bir yüzey, burada boy büyütmek veri yoğunluğundan çalmaz. Veri satırlarına
       ve gün çubuğu girdisine DOKUNULMAZ: orada her piksel bir koşu satırı demek —
       bilinçli bir denge, sessiz bir seçim değil. */
    .gy-tree__link { min-height: 2.75rem; }
    .gy-tree__group > summary { min-height: 2.5rem; }

    /* ⚠️ DOKUNMA HEDEFİ ÖLÇÜSÜ rem DEĞİL px ile düşünülür: bu sitede kök ölçek
       `html { font-size: 87.5% }`, yani 1rem = 14px. İlk yazışta hedefleri 2.25rem
       yaptım ve "36px" sandım — ölçünce 31,5px çıktı, eşiğin ALTINDA. Aynı satır,
       aynı sayı, farklı gerçek. 2.5rem = 35px; hedef bu. Her hedef ölçümle
       doğrulanır (`tests/e2e/specs/mobil.spec.ts`, 390x844'e çivili), göz kararıyla
       değil. — Burada önce `hedef-olc.mjs` yazıyordu: depoda ÖYLE BİR DOSYA YOK.
       Var olmayan bir aleti gösteren yorum, ölçümü kanıtlamak yerine kanıtlanmış
       gibi gösterir; gerçek kapı E2E takımıdır.

       Gün oku ve dil düğmesi BEDAVA büyür: ikisi de kendi satırındaki en uzun öğeden
       (tarih kutusu 36px, üst çubuk 58px) kısa — hedefi büyütmek satır boyunu
       DEĞİŞTİRMİYOR, yani hiçbir koşu satırı kaybedilmiyor. Ölçüm: ok 28px, TR/EN 20px. */
    .gy-daybar .gy-icon-btn { min-width: 2.5rem; min-height: 2.5rem; }
    /* `<a>` satır-içi: min-height inline kutuya İŞLEMEZ — kutu modelini değiştirmeden
       yalnız dolgu büyütmek 29px'te tıkanıyordu. inline-flex + min-height ölçülür. */
    .gy-lang a { display: inline-flex; align-items: center; min-height: 2.5rem; padding: .2rem .7rem; }
    /* Üst çubuk 58px; içindeki hedefler (hamburger 29, tema 28, çıkış 28) onun altında
       kaldığı sürece büyümek çubuğun boyunu değiştirmez. Gün çubuğu da öyle: satır
       zaten tarih kutusunun 36px'i kadar. */
    .gy-hamburger,
    .gy-topbar__end .gy-icon-btn,
    .gy-inline-form button { min-width: 2.5rem; min-height: 2.5rem; }
    .gy-daybar .gy-btn--sm,
    .gy-hesapla .gy-btn { min-height: 2.5rem; }
    /* Çekmece arama kutusu 30px ölçüldü; çekmece serbest kayan yüzey, maliyeti yok. */
    .gy-sidebar__search input { min-height: 2.5rem; }

    /* "Sırada" bloğunda hedefler gerçekten yer istiyor: kadro başlığı 22px, "Koşunun
       tamamı →" bağlantısı 17px ölçüldü — ikisi de panonun telefondaki ana iki
       dokunuşu. Maliyeti ölçtüm: blok ~25px uzuyor ama görünen koşu satırı sayısı
       DEĞİŞMİYOR (390x844'te 3, 360x740'ta 2 — büyütmeden önce de sonra da) — bu
       yüzden kadro penceresi ayrıca kısılmadı. Efsane katlanırı da aynı gerekçeyle. */
    .gy-kadroluk__baslik { min-height: 2.5rem; }
    .gy-kadroluk__tumu { min-height: 2.5rem; display: flex; align-items: center; }
    .gy-legend-fold > summary { min-height: 2.5rem; }

    /* Altili rozetleri v0.6.49'da SUZGEC oldu: <span> iken tiklanmiyorlardi, artik <a>.
       Bir sey tiklanabilir hale gelince dokunma tabanina da girer -- olcum 17px dedi.
       `.gy-lang a` ile ayni tuzak: satir-ici <a>'ya min-height ISLEMEZ, inline-flex sart.

       MALIYET (390x844 canliya kural enjekte edilerek olculdu, tahmin degil):
         rozet 17 -> 35 · pist basligi (.gy-races__pist) 24 -> 41 · suzgec seridi 27 -> 45.
       Yani basliklar GERCEKTEN uzuyor (~+17px/pist). Buna ragmen TAM gorunen kosu satiri
       sayisi degismedi: suzgecsiz 4 -> 4, suzgecli 3 -> 3. Ilk yazista "baslik zaten
       35px, maliyet sifir" demistim; olcum bunu CURUTTU (baslik 24px'ti), sonuc ayni
       kaldi ama gerekce yanlisti.

       GEREKCE IKINCI KEZ DUZELTILDI (olcum 26.08.2026, 390x844, canli): burada
       "sebep kosu satirinin ~193px olmasi" yaziyordu -- satir bugun 127,8px (bir
       tanesi 110,8). 17px, bir satirin ~%13'u demektir; yani kayma bir satir sinirini
       "gecemeyecek kadar kucuk" DEGILDI, o gun katlamanin nereye dustuguyle kurtardi.
       Sonuc yine ayni kaldi, gerekcesi yine yanlisti: bir sonucu dogru sanmak, onu
       aciklayan sayinin da dogru oldugunu GOSTERMEZ. */
    .gy-altili--link {
        display: inline-flex;
        align-items: center;
        min-height: 2.5rem;
        padding: .1rem .5rem;
    }
    /* Suzgec seridindeki "Tumunu goster" cikisidir: kapali kalan bir suzgec ekrandaki
       HER sayiyi daraltir, cikisi kucuk birakmak kullaniciyi yanlis cetvelde tutar. */
    .gy-suzgec__temiz {
        display: inline-flex;
        align-items: center;
        min-height: 2.5rem;
    }

    /* Karne dönem çipleri (Son 7/30/90 gün, Tümü) 20px'ti ve İKİ satıra sarıyordu:
       kap 45px. Tek satıra alıp kaydırılabilir yapınca çipler 34px OLUYOR ve kap
       yine ~36px — yani hedef büyürken şerit KISALDI. Sarma yerine kaydırma seçildi
       çünkü aynı desen ekranın başka iki şeridinde zaten var (.gy-stats, .gy-tabs);
       kaydırma çubuğu devamı olduğunu söyler, sarma ise ikinci satırı zorunlu kılar.
       Yalnız dönem araç çubuğundaki çipler: `.gy-chip` koşu künyesinde duragan
       ETİKET olarak da kullanılıyor, orada sarmak doğru. */
    .gy-toolbar--donem .gy-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
    .gy-toolbar--donem button.gy-chip { flex: 0 0 auto; min-height: 2.5rem; padding: .2rem .8rem; }

    /* Izgara araç çubuğu (arama, Grupla, Kolonlar, Excel, Yazdır) 19px ölçüldü —
       ekrandaki en küçük hedefler ve AA tabanı 24px'in bile altında, yani parmakla
       kullanılamaz. Büyütmenin bedeli ÖLÇÜLDÜ: şerit 53→83px (iki satıra sarıyor,
       2×35 + dolgu) ⇒ /kuponlar'da ~1 fiş satırı. Beş kontrolün tamamının
       kullanılabilir olması bir satıra değer; bedel gizlenmiyor, burada yazılı.

       ⚠️ ŞERİT/RAY DESENİ BURADA UYGULANAMAZ (.gy-stats, .gy-tabs, dönem çipleri gibi
       tek satıra alıp kaydırmak 83→35px yapardı): `.kmp-grid-pop` mutlak konumlu ve
       `.kmp-dd`'ye demirli (kmp-blazor.css: `position:absolute; top:calc(100%+4px);
       max-height:340px`). Şeride `overflow-x:auto` verilince taşma bağlamı oluşur ve
       340px'lik açılır panel 35px'lik şeride KIRPILIR — Grupla/Kolonlar/Excel
       menüleri çalışmaz olur. Yüksekliği kazanmak için işlevi kırmak takas değildir.

       Kolon başlığındaki süzgeç kutuları BİLEREK küçük bırakıldı: her biri büyürse
       başlık satırı 28→40px olur ve karnede bir veri satırı gider; süzgeç ileri
       kullanım, arama kutusu ise ana giriş. Sessiz seçim değil, ölçülmüş denge. */
    .kmp-grid-toolbar .kmp-btn--sm,
    .kmp-grid-toolbar .kmp-input--sm { min-height: 2.5rem; }

    /* Araç çubuğu tek satıra sığmıyor: sarsın, taşıp kesilmesin. */
    .gy-page-head, .gy-toolbar { flex-wrap: wrap; }

    /* Dar ekranda dock-fill modal gövdesi yeniden KAYAR ve ızgara sabit boya döner:
       künye çipleri üç-dört satıra sarınca üst blok tek başına modalin boyunu yiyor,
       kalan yükseklik ızgaraya yetmiyor ve overflow:hidden içeriği keserdi. */
    .kmp-modal-body--fill { overflow: auto; }
    .gy-detay > .gy-tabstack { flex: 0 0 auto; height: min(26rem, 55vh); }

    /* Fiste de ayni ders: dar ekranda IC kaydirici birakmak, modalin kendi
       kaydirmasiyla yarisir ve ayaklar 4-5 satirlik bir pencereye sikisirdi.
       Kaydirma tek yerde (modal govdesi) toplanir. */
    .gy-bilet__ayaklar { overflow: visible; min-height: auto; }
    /* Jokey ve derece dar ekranda kolon olmaktan cikar: at adi kesilmesin. */
    .gy-bilet__at { grid-template-columns: 1.5rem minmax(0, 1fr) 3.2rem; }
    /* Dar ekranda jokey kolonu DUSER: ad + derece + fiyat, sirali okunmasi gereken
       uc sayidir; jokeyi sikistirmak ucunu birden okunmaz yapardi. */
    .gy-bilet__saha-at { grid-template-columns: 1.5rem 1.5rem minmax(0, 1fr) 2.4rem 3rem; }
    .gy-bilet__saha-jokey { display: none; }
    .gy-bilet__at-jokey, .gy-bilet__at-derece { display: none; }

    /* Kurucu rayi telefonda YAN YANA kalmaz: 6 ayak x 10,5rem yatay kaydirma demektir ve
       kullanici sagdaki ayaklarin varligini goremezdi. Iki kolonluk izgaraya dokulur,
       kaydirma dikeye ceker. Ayak yuksekligi sinirli ki ray tek ekranda gezilsin. */
    .gy-kurucu__ray {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-columns: auto;
    }
    .gy-kurucu__ayak { max-height: 16rem; }
    /* Hesap seridi dar ekranda alt alta: olculer, uyarilar, dugmeler tam genislikte. */
    .gy-kurucu__hesap { align-items: stretch; flex-direction: column; gap: var(--kmp-sp-2); }
    .gy-kurucu__aksiyon { margin-left: 0; }
}


/* ── Modal başlık düğmeleri ────────────────────────────────────────────────────
   ⚠️ Kapatma düğmesi Bootstrap'in `.btn-close` sınıfını taşır ama bu projede
   Bootstrap CSS'i YÜKLENMEZ (App.razor: kmp-blazor.css + site.css, hepsi bu).
   Sınıfın hiçbir kuralı olmayınca ekranda X değil, tarayıcının çıplak <button>
   kutusu kalıyordu — kullanıcı bunu haklı olarak "minimize simgesi" sandı.
   X'i kendimiz çiziyoruz: `mask-image` + `currentColor` ⇒ açık/koyu temada da okunur,
   Bootstrap'in `filter: invert()` numarasına gerek kalmaz.

   TAM EKRAN düğmesi başlığa JS'ten takılır (gy-shell.js). Çok kolonlu ızgaralarda
   (kadro, kuponlar) 720 px'lik varsayılan genişlik yetmiyor; büyütmek yatay kaydırmaya
   tek alternatif. Sürükleme başlıktan yapılır ama kmp-modal.js `button` hedeflerini
   yok sayar — düğmeye basmak modali kaydırmaz. */
.kmp-modal-head .btn-close,
.gy-modal-dugme {
    flex: 0 0 auto;
    width: 1.75rem; height: 1.75rem;
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--kmp-radius-sm);
    color: var(--kmp-secondary);
    cursor: pointer;
    transition: background var(--kmp-transition), color var(--kmp-transition);
}
.kmp-modal-head .btn-close::before,
.gy-modal-dugme::before {
    content: "";
    width: 1rem; height: 1rem;
    background: currentColor;
    -webkit-mask: var(--gy-simge) center / 1rem 1rem no-repeat;
    mask: var(--gy-simge) center / 1rem 1rem no-repeat;
}
.kmp-modal-head .btn-close:hover,
.gy-modal-dugme:hover {
    background: var(--kmp-secondary-bg);
    color: var(--bs-body-color);
    border-color: var(--kmp-border);
}
.kmp-modal-head .btn-close:focus-visible,
.gy-modal-dugme:focus-visible { outline: none; box-shadow: var(--kmp-focus-ring); }

/* X — kapat */
.kmp-modal-head .btn-close {
    --gy-simge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23000' stroke-width='1.7' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}
/* ⚠️ `.kmp-modal-head` (Kmp.Blazor) `justify-content: space-between` kullanıyor. İki
   çocukla bu doğru davranır — başlık solda, kapat sağda. ÜÇÜNCÜ çocuk eklenince aradaki
   boşluk EŞİT bölünür ve yeni düğme başlığın tam ORTASINA düşer. Düğmeyi kapatmanın
   soluna koymak SIRAYI düzeltir, KONUMU düzeltmez.
   `margin-left:auto` serbest boşluğun tamamını düğmenin SOLUNDA toplar (otomatik kenar
   boşlukları justify-content'ten ÖNCE uygulanır) ⇒ iki düğme sağ üstte yan yana durur.
   Başlığın bir eleman mı yoksa düz metin mi olduğundan bağımsız çalışır — paketin iç
   yapısına bahse girmez. */
.gy-modal-dugme--buyut { margin-left: auto; }
/* Düğmeler arası .75rem çok açıktı: ikisi tek bir küme gibi okunmalı. */
.kmp-modal-head { gap: .3rem; }

/* Dört köşe dışa — tam ekran */
.gy-modal-dugme--buyut {
    --gy-simge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2.5h-4v4M9.5 2.5h4v4M6.5 13.5h-4v-4M9.5 13.5h4v-4' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}
/* Dört köşe içe — eski boyuta dön */
.gy-modal-dugme--buyut[aria-pressed="true"] {
    color: var(--kmp-primary-text);
    --gy-simge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 6.5h4v-4M13.5 6.5h-4v-4M2.5 9.5h4v4M13.5 9.5h-4v4' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

/* Tam ekran hâli. `.kmp-modal--drag` ile AYNI özgüllükte (0,2,0) — site.css
   kmp-blazor.css'ten SONRA yüklendiği için bu kural kazanır. Satır içi ölçüler
   (sürükleme/boyutlandırmadan kalanlar) JS tarafında saklanıp temizlenir; kapatınca
   geri yazılır: büyütmek kullanıcının ayarladığı boyutu YOK ETMEZ. */
.kmp-modal.gy-modal--tam {
    top: .75rem; left: .75rem;
    width: calc(100vw - 1.5rem);
    height: calc(100vh - 1.5rem);
    max-width: none; max-height: none;
    transform: none; margin: 0;
}
/* Tam ekranda köşe tutamağı anlamsız: pencere zaten ekranı kaplıyor. */
.kmp-modal.gy-modal--tam .kmp-modal-resize { display: none; }


/* ============================================================
   OYUN DEFTERI — «Oyna» seridi + tehlike dugmesi
   ------------------------------------------------------------
   Bu siniflar iki modalin ALT seridinde yasar (GyBiletModal «Oyna»,
   GyOyunModal «Iptal et»). Serit uc hal alir: soru → yazildi → hata;
   ucu de AYNI satirda durur ki pencere hal degistirirken ziplamasin.
   ============================================================ */

/* Tehlike tonu: geri donusu olmayan aksiyon (iptal). Ayri bir renk degil,
   ayni dugme govdesinin kirmizi hali — bicim disi bir sey yaratmiyoruz. */
.gy-btn--tehlike {
    background: var(--kmp-danger);
    border-color: var(--kmp-danger);
    color: #fff;
}

.gy-btn--tehlike:hover:not(:disabled) {
    filter: brightness(.93);
    border-color: var(--kmp-danger);
}

/* Serit: solda gerekce/tutar metni, sagda dugmeler. Modal altligi zaten
   flex oldugu icin buradaki ogeler yalnizca kendi hizalarini soyler. */
.gy-oyna {
    display: inline-flex; align-items: center; gap: var(--kmp-sp-2);
    margin-right: auto;
    min-width: 0;
}

/* Yazilacak para: fisin en onemli sayisi, seridin solunda tabular okunur. */
.gy-oyna__tutar {
    font-weight: 600; font-variant-numeric: tabular-nums;
    color: var(--kmp-body);
}

/* «Deftere yazildi» rozeti — basari tonu, kutu degil satir ici damga. */
.gy-oyna__yazildi {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .84rem; font-weight: 600;
    color: var(--kmp-success);
    min-width: 0;
}

.gy-oyna__tik {
    display: grid; place-items: center;
    width: 1.15rem; height: 1.15rem; flex: 0 0 auto;
    border-radius: 999px;
    background: var(--kmp-success-subtle); color: var(--kmp-success);
    font-size: .7rem;
}

/* Hata: gorunur olmali ama pencereyi kirmamali — tek satir, tasarsa kirpilir,
   tamami tooltip'te (title) durur. */
.gy-oyna__hata {
    margin-right: auto;
    font-size: .82rem; color: var(--kmp-danger);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}

/* Onay sorusu: seridin ikinci hali. Ayri pencere acmiyoruz (odak/yigin sirasi),
   o yuzden soru metni dugmelerin solunda oturur. */
.gy-oyna__soru {
    margin-right: auto;
    font-size: .84rem; font-weight: 500; color: var(--kmp-body);
    min-width: 0;
}

/* Gri dugmenin NEDENI. Kapali bir dugmeyi sebep yazmadan birakmak, kullanicinin
   ekrani bozuk sanmasina yol acar. */
.gy-oyna__neden {
    font-size: .8rem; color: var(--kmp-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}

/* «e-bayi'de ac» — seridin KARSI ucu. `.gy-oyna` sola yapisiyor (margin-right:auto),
   bu da saga (margin-left:auto): ikisi bilerek birbirinden uzak durur, cunku ayni
   sey degiller — biri bizim olcum defterimize yazar, digeri kullaniciyi gercek
   parasinin oldugu yere gonderir. Yan yana ve ayni tonda dursalardi, "oynadim"
   sozcugu iki farkli seyi anlatmaya baslardi.

   Ikincil ton (varsayilan .gy-btn) bilincli: bu ekrandaki BIRINCIL eylem «Oyna».
   Kucuk disari-ok simgesi yeni sekmede acildigini soyler; :after ile veriliyor ki
   ceviri metnine karismasin (resx'te ok yok, iki dilde de ayni isaret cikar). */
.gy-ebayi {
    margin-left: auto;
    gap: .35rem;
}

.gy-ebayi::after {
    content: "\2197";           /* kuzeydogu oku: "yeni sekmede acilir" */
    font-size: .9em; line-height: 1;
    opacity: .7;
}

/* Dar ekran: serit alt alta gecer, metinler kirpilmak yerine sarar. */
@media (max-width: 575.98px) {
    .gy-oyna { width: 100%; flex-wrap: wrap; }
    .gy-oyna__hata,
    .gy-oyna__soru,
    .gy-oyna__neden { white-space: normal; }
}

/* Fis altligi: eylemler daralip kelime kelime bolunmez; yer yoksa tum dugme alta gecer. */
.gy-bilet-eylemleri {
    display: flex; align-items: center; flex-wrap: wrap;
    justify-content: flex-end;
    gap: .45rem; width: 100%; min-width: 0;
}
.gy-bilet-eylemleri > .gy-btn {
    flex: 0 0 auto; width: auto; min-height: 2.05rem;
    gap: .55rem; padding: .34rem .64rem; font-size: .76rem; line-height: 1;
    white-space: nowrap; flex-wrap: nowrap; text-decoration: none;
    max-width: 9.75rem;
}
.gy-bilet-eylemleri > .gy-btn.gy-oyna { min-width: 8.25rem; justify-content: center; }
.gy-bilet-eylemleri > .gy-btn.gy-ebayi { min-width: 4.35rem; justify-content: center; }
.gy-bilet-eylemleri .gy-ikon { width: .95rem; height: .95rem; flex: 0 0 auto; }
.gy-bilet-eylemleri .gy-oyna__tutar {
    white-space: nowrap; padding-left: .45rem;
    border-left: 1px solid var(--kmp-border);
}
.gy-bilet-eylemleri > .gy-ebayi { margin-left: 0; }
.gy-bilet-eylemleri > .gy-oyna__neden,
.gy-bilet-eylemleri > .gy-oyna__soru,
.gy-bilet-eylemleri > .gy-oyna__hata {
    flex: 1 1 auto; font-size: .75rem;
}
.gy-bilet-eylemleri__not {
    display: inline-flex; align-items: center; gap: .35rem;
    max-width: 9rem; margin-right: auto;
    cursor: help;
}
.gy-bilet-eylemleri__not > .gy-ikon { color: var(--kmp-warning); }
.gy-bilet-eylemleri__not:focus-visible { outline: 2px solid var(--kmp-primary); outline-offset: 3px; }
@media (max-width: 575.98px) {
    .kmp-modal:has(.gy-bilet-eylemleri) {
        min-width: 0; max-width: calc(100vw - 1rem);
        max-height: calc(100dvh - 1rem);
        left: .5rem !important; top: 50% !important;
        transform: translateY(-50%) !important;
    }
    .gy-bilet-eylemleri > .gy-oyna__neden,
    .gy-bilet-eylemleri > .gy-oyna__soru,
    .gy-bilet-eylemleri > .gy-oyna__hata { flex-basis: 100%; }
}

/* Defter ekrani: not/kart bloklari kendi boyunda kalir, grid geri kalani doldurur.
   `.gy-dock > .gy-note` kurali zaten var; `.gy-empty` icin de ayni sey gerekiyor,
   yoksa bos defter dikeyde gerilip kartlari asagi itiyor. */
.gy-dock > .gy-empty { flex: 0 0 auto; }

/* --- Kirpilan metnin ipucu balonu (gy-shell.js) ---------------------------
   Tarayicinin kendi `title` kutusu metni tek paragrafa duzlestiriyordu: alan
   listesi tasiyan bir hucrede ("At No=11 | At Adi=... | Derece=...") sonuc
   okunamaz bir kelime yiginiydi. Balonu kendimiz cizince ayni metin ETIKET /
   DEGER izgarasi olur. `pointer-events:none` sart -- balon imlecin altina
   girerse `mouseout` atesler, ipucu titrer. */
.gy-ipucu {
    position: fixed; z-index: 2100; pointer-events: none;
    max-width: min(30rem, calc(100vw - 2rem));
    padding: var(--kmp-sp-2) var(--kmp-sp-3);
    background: var(--kmp-surface); color: var(--kmp-body);
    border: 1px solid var(--kmp-border); border-radius: var(--kmp-radius-md);
    box-shadow: var(--kmp-shadow-lg);
    font-size: .8rem; line-height: 1.45;
    font-variant-numeric: tabular-nums;
}

.gy-ipucu[hidden] { display: none; }

/* Kolon basligi: hangi kolonun ipucuna baktigini soyler. */
.gy-ipucu__baslik {
    font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--kmp-secondary);
    padding-bottom: var(--kmp-sp-1); margin-bottom: var(--kmp-sp-2);
    border-bottom: 1px solid var(--kmp-border);
}

.gy-ipucu__metin { margin: 0; }

/* Etiket/deger izgarasi. `auto 1fr`: etiket kendi boyunda, deger kalani alir. */
.gy-ipucu__grid {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: .15rem var(--kmp-sp-3); margin: 0;
}

.gy-ipucu__grid dt {
    color: var(--kmp-secondary); font-weight: 500; white-space: nowrap;
}

.gy-ipucu__grid dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* Etiketsiz satir (serbest metin) iki kolonu birden kaplar, yoksa deger
   sutununa sikisip yalanci bir etiket hizasi olusturur. */
.gy-ipucu__grid dd.gy-ipucu__tam {
    grid-column: 1 / -1; font-weight: 500; color: var(--kmp-secondary);
}

/* ============================================================
   ADRES ÇUBUĞU — ekranın ADI üst çubukta, ADRESİ burada
   Ölçüm: docs/olcumler/2026-08-26-arayuz-iskelet-emsal.md (bulgu 1-3).
   Altı ekranın hepsi aynı iskeleti kuruyordu, ama üst şerit İKİ FARKLI
   şeyi adresliyordu — /pano · /kosular · /kuponlar bir GÜNÜ,
   /oyun · /butce · /karne bir ARALIĞI — ve ikisi tıpatıp aynı çiziliyordu.
   Aynı görünen iki adresleme modeli, "dağınık" hissinin ölçülen kaynağıydı.
   Çözüm yeni bir tasarım dili değil: çubuk artık (a) kendini bir kutu olarak
   çevreliyor, (b) solunda TÜRÜNÜ söyleyen bir rozet taşıyor (takvim/aralık),
   (c) sağında adresin kendisini yazıyor (haftanın günü / tarih aralığı).
   ============================================================ */
.gy-adresbar {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--kmp-sp-2);
    padding: .3rem .6rem .3rem .35rem;
    background: var(--kmp-surface);
    border: 1px solid var(--kmp-border);
    border-radius: var(--kmp-radius-md);
    box-shadow: var(--kmp-shadow-xs);
}

/* Çubuğun içindeki çip şeridi kendi alt boşluğunu taşımaz: kutunun içinde
   dikey olarak ortalanmalı (.gy-chips dışarıda blok olarak da kullanılıyor). */
.gy-adresbar .gy-chips { margin-bottom: 0; }

.gy-adresbar__tur {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .18rem .5rem;
    font-size: .7rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: var(--kmp-radius-sm);
    white-space: nowrap;
}
.gy-adresbar__tur svg { width: .95rem; height: .95rem; }

/* GÜN = birincil renk ailesi (ekranın canlı tarafı: bugün ne oluyor).
   DÖNEM = nötr (geriye bakan ölçüm ekranları). Renk tek başına ayırt edici
   DEĞİL — simge ve sözcük de değişir (renk körlüğü). */
.gy-adresbar--gun .gy-adresbar__tur {
    color: var(--kmp-primary-text);
    background: var(--kmp-primary-subtle);
    border: 1px solid var(--kmp-primary-border-subtle);
}
.gy-adresbar--donem .gy-adresbar__tur {
    color: var(--kmp-secondary);
    background: var(--kmp-surface-muted);
    border: 1px solid var(--kmp-border);
}

.gy-adresbar__adres {
    font-size: .82rem; font-weight: 600; color: var(--kmp-body);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Dar ekranda rozetin SÖZCÜĞÜ düşer, simgesi kalır: /kosular'ın gün çubuğu
   ayrıca strateji çiplerini de taşıyor ve 1280 px'lik yoğunluk kapısında
   satırın sarması ölçümü bozardı (v0.6.32 dersi: yatay bütçe gerçek bir
   kısıt). Simge kaldığı için tür bilgisi kaybolmaz. */
@media (max-width: 1200px) {
    .gy-adresbar__tur-txt { display: none; }
}

/* ─── Tutma şansı pili (v0.7.0) ────────────────────────────────────────────────
   Kuponun şansını dört kademeye boyar: yeşil ≥ %50 · sarı %20–50 · turuncu %5–20 ·
   gri < %5. Eşikler SansKademeleri'nde; burada yalnız renk. Üç yüzey (hazır kart,
   kurucu altlığı, fiş şeridi) aynı pili kullanır ki aynı kupon iki ekranda iki renk
   almasın. Kademe rengi MODİFİYE sınıfa yazılır (.gy-sans--yuksek …) — hedef şans
   çipleri de aynı sınıfları giyer: %80 çipi ile %80'lik kuponun pili aynı yeşildir.

   Renk tek başına taşıyıcı değil: nokta + metin her zaman birlikte (renk körlüğü). */
.gy-sans {
    --gy-sans-renk: var(--kmp-secondary);
    display: inline-flex; align-items: center; gap: .32rem;
    padding: .08rem .55rem .08rem .42rem;
    font-size: .74rem; font-weight: 600; line-height: 1.4; white-space: nowrap;
    color: var(--gy-sans-renk);
    background: color-mix(in srgb, var(--gy-sans-renk) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--gy-sans-renk) 30%, transparent);
    border-radius: var(--kmp-radius-pill);
    cursor: help;
}
.gy-sans--kucuk { font-size: .68rem; padding: .02rem .45rem .02rem .36rem; gap: .26rem; }
.gy-sans__nokta {
    width: .5em; height: .5em; border-radius: 50%; flex: none;
    background: var(--gy-sans-renk);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--gy-sans-renk) 22%, transparent);
}
.gy-sans__deger { font-weight: 700; opacity: .85; }

/* Kademe renkleri — pil VE hedef çipi aynı sınıfı taşır. */
.gy-sans--yuksek { --gy-sans-renk: var(--kmp-success); }
.gy-sans--orta   { --gy-sans-renk: var(--kmp-warning); }
.gy-sans--dusuk  { --gy-sans-renk: color-mix(in srgb, var(--kmp-warning) 45%, var(--kmp-danger)); }
.gy-sans--uzak   { --gy-sans-renk: var(--kmp-secondary); }
.gy-sans--yok    { --gy-sans-renk: var(--kmp-secondary); border-style: dashed; }
.gy-sans--yok .gy-sans__nokta { background: transparent; border: 1px solid var(--gy-sans-renk); box-shadow: none; }

/* Fiş şeridinde pil sonucun yanına, kac-kuponda ikizinin ardına oturur. */
.gy-bilet__sansband-sonuc .gy-sans { margin-left: .35rem; vertical-align: middle; }

/* ─── Hedef şans çipleri (kurucu) ───────────────────────────────────────────────
   «%25 · %50 · %80»: ayakları olasılığa göre doldurur, maliyet ve kombinasyon anında
   görünür; oynamak KULLANICININ kararıdır — çip para koluna bağlı değildir. */
.gy-hedef {
    display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap;
}
.gy-hedef__etiket {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .74rem; font-weight: 600; color: var(--kmp-secondary);
    text-transform: uppercase; letter-spacing: .03em;
    cursor: help;
}
.gy-hedef__etiket .gy-ikon { width: .95em; height: .95em; }
.gy-hedef__chip {
    --gy-sans-renk: var(--kmp-secondary);
    display: inline-flex; align-items: center; gap: .32rem;
    padding: .18rem .6rem .18rem .48rem;
    color: var(--gy-sans-renk);
    background: color-mix(in srgb, var(--gy-sans-renk) 10%, transparent);
    border-color: color-mix(in srgb, var(--gy-sans-renk) 32%, transparent);
    cursor: pointer;
    transition: transform var(--kmp-transition), background-color var(--kmp-transition), box-shadow var(--kmp-transition);
}
.gy-hedef__chip .gy-sans__nokta { width: .55em; height: .55em; }
.gy-hedef__chip:hover {
    background: color-mix(in srgb, var(--gy-sans-renk) 20%, transparent);
    transform: translateY(-1px);
    box-shadow: var(--kmp-shadow-sm);
}
.gy-hedef__chip:focus-visible { outline: none; box-shadow: var(--kmp-focus-ring); }
.gy-hedef__chip:active { transform: none; }

/* ─── «Eşek» etiketi ─────────────────────────────────────────────────────────────
   Modelin 7.+ sırası (kullanıcının sözlüğü; sınır karneyle aynı). Gri ve sessiz: bir
   hüküm değil bir konumdur. Fiş ölüm raporundaki ROZET ise kazananın eşek olduğunu
   söyler — bizde N., piyasada M.; iki cetvelde de eşekse (herkes) daha koyu. */
.gy-mark--esek {
    color: var(--kmp-secondary); background: var(--kmp-surface-muted);
    border-color: var(--kmp-border);
    font-weight: 600; letter-spacing: .02em; cursor: help;
}
.gy-mark--esek-rozet {
    font-size: .74rem; padding: .06rem .5rem;
    border-style: dashed;
}
.gy-mark--esek-herkes {
    color: var(--bs-body-color, inherit);
    border-style: solid; border-color: color-mix(in srgb, var(--kmp-secondary) 55%, transparent);
}
.gy-bilet__saha-ad .gy-mark--esek { margin-left: .3rem; vertical-align: 1px; font-size: .64rem; }

@media (prefers-reduced-motion: reduce) {
    .gy-hedef__chip { transition: none; }
    .gy-hedef__chip:hover { transform: none; }
}

/* ── Dar kupon ekranı ───────────────────────────────────────────── */
.gy-dar__belge { margin-top: .35rem; font-size: .8125rem; opacity: .75; }
.gy-dar__cipler { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 .25rem; }
.gy-dar__kollar { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1rem; }
.gy-dar__tutar { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.gy-dar__kayip { font-size: .8125rem; opacity: .8; font-variant-numeric: tabular-nums; }
.gy-dar__pist { font-weight: 600; }
.gy-dar__kosu { opacity: .8; }
.gy-dar__gerekce { flex: 1 1 14rem; font-size: .8125rem; opacity: .8; }
.gy-dar__sans, .gy-dar__bedel { font-variant-numeric: tabular-nums; }
.gy-dar__yazmaz { margin-top: 1rem; }
@media (max-width: 640px) {
  .gy-dar__gerekce { flex-basis: 100%; }
}

/* `.gy-ozet__satir` tek cümlelik nesir satırı için tasarlandı (position:relative +
   padding-left + ::before nokta, display block/inline akışı) — dar kupon satırı beş
   sütunlu ve flex akış ister. Kural YALNIZ dar listesine bağlanır (`.gy-dar__kuponlar`
   ata seçicisiyle) — Karne/Butce ekranlarının aynı sınıfı tek cümlelik nesir için
   kullanan satırları olduğu gibi kalır.
   Sağa hizalama: `.gy-dar__gerekce`'nin `flex:1 1 14rem` büyümesi masaüstünde zaten
   sans/bedel'i satırın sonuna iter (tek büyüyen öge o olduğundan boş alanın tamamını
   yutar); ama ≤640px'te gerekce kendi `flex-basis:100%`'ü ile TEK BAŞINA satıra düşer
   ve sans+bedel kendi satırlarında büyüyen bir öge olmadan kalır — `.gy-dar__sans`'ın
   `margin-left:auto` tek auto margin'i (mobil) satırda ikinciyi sağa iter ve bedel
   yanında durur; masaüstünde zararsız (boş alan zaten gerekce tarafından tüketildiği
   için auto margin'in alacak payı kalmaz). */
.gy-dar__kuponlar .gy-ozet__satir {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: .5rem; max-width: none;
}
.gy-dar__kuponlar .gy-dar__sans { margin-left: auto; }

/* Brief'in Adım 4 bloğu yalnız `gy-dar__*` görünüm ayrıntılarını verir; aşağıdakiler
   Dar.razor'da kullanılan ama hiçbir yerde CSS karşılığı olmayan beş sınıf için
   StilSiniflariTests'in gerektirdiği minimum karşılıktır (bkz. görev-6 raporu "Sapmalar"):
   `.gy-uyari--notr` (nötr-gri uyarı tonu, `.gy-uyari--hesap` deseniyle aynı),
   `.gy-dock-fill` (`.gy-dock`'un düz-akış dolgu çocuğu — kendi scroll'u yok, dış
   `.gy-content` zaten sayfa kaydırmasını taşıyor), `.gy-dar__karsilastirma` ve
   `.gy-dar__kuponlar`/`.gy-dar__atlananlar` (üstteki bölümlerle aynı dikey boşluk). */
.gy-dock > .gy-dock-fill { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--kmp-sp-4); }
.gy-uyari--notr {
    background: var(--kmp-secondary-bg);
    border-color: var(--kmp-border);
    border-left-color: var(--kmp-secondary);
}
.gy-uyari--notr > svg,
.gy-uyari--notr .gy-uyari__govde strong { color: var(--kmp-secondary); }
.gy-dar__karsilastirma { margin-top: var(--kmp-sp-2); }
.gy-dar__kuponlar,
.gy-dar__atlananlar { margin-top: var(--kmp-sp-2); }

/* ------------------------------------------------------------
   DEGER DEFTERI (22.09.2026) — "tavsiye ettik, kazandik, kaybettik"
   ------------------------------------------------------------
   Iki yerde gorunur: panoda KOMPAKT bir karne (deger seridinin hemen altinda), ve
   /deger-defteri sayfasinda tam tablo + altinda kumule satiri.

   Neden seridin ALTINDA: serit "su an bir firsat var" der; karne "gecen sefer ne oldu" der.
   Ayrildiklarinda serit, kendi gecmisi gorunmeden para ister. */

/* Kumule satiri — kullanicinin "altta goster" dedigi sayi. Kartlardan AYRI ve tablonun
   ALTINDA: kartlar sayimdir, bu satir PARADIR. Notr tonda baslar; isaret rengini yalniz
   gercekten olculmus bir kar/zarar varken alir (hic oynanmamissa "—" yazar, renk almaz). */
.gy-kumule {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .75rem;
    flex: 0 0 auto;
    margin-top: var(--kmp-sp-2);
    padding: .65rem .9rem;
    background: var(--kmp-secondary-bg);
    border: 1px solid var(--kmp-border);
    border-left: 3px solid var(--kmp-secondary);
    border-radius: var(--kmp-radius-md);
}
.gy-kumule--arti { border-left-color: var(--kmp-success); }
.gy-kumule--eksi { border-left-color: var(--kmp-danger); }
.gy-kumule__etiket { font-weight: 650; text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; color: var(--kmp-secondary); }
.gy-kumule__deger { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.gy-kumule--arti .gy-kumule__deger { color: var(--kmp-success); }
.gy-kumule--eksi .gy-kumule__deger { color: var(--kmp-danger); }
/* Gerekce satiri tam genislikte ve sonik: sayinin neyden kuruldugu, sayiyi bastirmadan. */
.gy-kumule__alt { flex: 1 0 100%; color: var(--kmp-secondary); font-size: .78rem; line-height: 1.45; }

/* Pano karnesi. Deger seridiyle AYNI aileden ama serit DEGIL: renk notr, cunku bir eylem
   cagrisi degil bir KAYITtir. Seridin success tonunu tasisaydi, gecmisin karnesi yeni bir
   firsat gibi okunurdu. */
.gy-degerkarne {
    flex: 0 0 auto;
    margin-top: var(--kmp-sp-2);
    padding: .6rem .8rem;
    background: var(--kmp-surface);
    border: 1px solid var(--kmp-border);
    border-radius: var(--kmp-radius-md);
    box-shadow: var(--kmp-shadow-xs);
    font-size: .8rem;
}
.gy-degerkarne__bas { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; }
.gy-degerkarne__bas strong { font-size: .88rem; font-weight: 650; }
.gy-degerkarne__aralik { color: var(--kmp-secondary); font-size: .75rem; }
.gy-degerkarne__link { margin-left: auto; font-size: .78rem; }

.gy-degerkarne__ozet { display: flex; flex-wrap: wrap; gap: .3rem .6rem; margin-top: .45rem; }
.gy-degerkarne__hucre {
    display: inline-flex; align-items: baseline; gap: .3rem;
    padding: .2rem .5rem;
    background: var(--kmp-secondary-bg);
    border-radius: var(--kmp-radius-sm);
}
.gy-degerkarne__hucre em { font-style: normal; color: var(--kmp-secondary); font-size: .72rem; }
.gy-degerkarne__hucre b { font-weight: 700; font-variant-numeric: tabular-nums; }
.gy-degerkarne__hucre--ok b { color: var(--kmp-success); }
.gy-degerkarne__hucre--bad b { color: var(--kmp-danger); }
/* Kumule hucresi son sirada ve cizgiyle ayrilir: sayim biter, para baslar. */
.gy-degerkarne__hucre--kumule { margin-left: auto; border: 1px solid var(--kmp-border); }
.gy-degerkarne__hucre--kumule b.ok  { color: var(--kmp-success); }
.gy-degerkarne__hucre--kumule b.bad { color: var(--kmp-danger); }

.gy-degerkarne__liste { list-style: none; margin: .5rem 0 0; padding: 0; }
.gy-degerkarne__satir {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem;
    padding: .28rem 0;
    border-top: 1px solid var(--kmp-border);
}
.gy-degerkarne__gun   { min-width: 3.2rem; color: var(--kmp-secondary); font-variant-numeric: tabular-nums; }
.gy-degerkarne__yer   { min-width: 8rem; color: var(--kmp-secondary); }
.gy-degerkarne__at    { font-weight: 600; }
.gy-degerkarne__fiyat { font-variant-numeric: tabular-nums; color: var(--kmp-secondary); }
.gy-degerkarne__hal {
    padding: .05rem .4rem;
    border-radius: var(--kmp-radius-pill, 999px);
    font-size: .7rem; font-weight: 650;
    background: var(--kmp-secondary-bg); color: var(--kmp-secondary);
}
.gy-degerkarne__hal--kazandi  { background: var(--kmp-success-subtle); color: var(--kmp-success); }
.gy-degerkarne__hal--kaybetti { background: var(--kmp-danger-subtle);  color: var(--kmp-danger); }
/* "Bekliyor" notr kalir: cevapsiz bir soru, kayip DEGILDIR. */
.gy-degerkarne__hal--bekliyor { background: var(--kmp-secondary-bg); color: var(--kmp-secondary); }
.gy-degerkarne__para { margin-left: auto; font-variant-numeric: tabular-nums; }
.gy-degerkarne__para.ok  { color: var(--kmp-success); }
.gy-degerkarne__para.bad { color: var(--kmp-danger); }

/* Durustluk notu: kumulenin neyden kuruldugu ekranda DURUR, title'a saklanmaz. */
.gy-degerkarne__not { margin: .5rem 0 0; color: var(--kmp-secondary); font-size: .74rem; line-height: 1.45; }