#grid-flash-cells-custom {
    --ag-value-change-value-highlight-background-color: #ffe396;
  }

#cell-rendering-show-change-cell-grid.alt-colors {
    --ag-value-change-delta-down-color: #ffe396;
    --ag-value-change-delta-up-color: #ffe396;
    --ag-value-change-delta-color: #ffe396;
    --ag-value-change-value-highlight-background-color: #ffe396;
}

.center-aligned-group-header .ag-header-group-cell-label {
    justify-content: center;
}

.center-aligned-header .ag-header-cell-label {
    justify-content: center;
    text-align: center;
}

#spec-gop-table {
    --ag-header-background-color: #f8fafc;
}

#spec-gop-table .ag-header-cell-label {
    font-size: 12px;
    color: #334155;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.right-aligned-header .ag-header-cell-label {
    justify-content: flex-end;
    text-align: right;
}

/* Kolon grupları arasında belirgin separator */
#spec-gop-table .group-sep {
    border-right: 2px solid #CBD2DA !important;
}

#spec-gop-table .group-sep-header {
    border-right: 2px solid #CBD2DA !important;
}

#gpt-table {
    --ag-header-background-color: #f8fafc;
}

#gpt-table .ag-header-cell-label {
    font-size: var(--gpt-header-font, 12px);
    color: #334155;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Satır yüksekliği büyüdükçe hücre fontu da ölçeklenir (clientside ayarlanır).
   Hücre cellStyle inline 18px verdiği için !important ile ezilir. */
#gpt-table .ag-cell {
    font-size: var(--gpt-cell-font, 18px) !important;
}

#gpt-table .group-sep {
    border-right: 2px solid #CBD2DA !important;
}

#gpt-table .group-sep-header {
    border-right: 2px solid #CBD2DA !important;
}

#organization-track-table {
    --ag-header-background-color: #f8fafc;
}

#organization-track-table .ag-header-cell-label {
    font-size: 12px;
    color: #334155;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.show-hide {
    display: none;
}

html, body {
    overflow-y: hidden !important;
}

/* KPI bar segment premium hover tooltip */
.kpi-bar-seg { position: relative; }

.kpi-bar-tip {
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 9999;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(16,24,40,.14), 0 2px 6px rgba(16,24,40,.08);
    padding: 8px 11px;
    white-space: nowrap;
    transition: opacity .14s ease, transform .14s ease;
}
.kpi-bar-seg:hover .kpi-bar-tip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
/* yukarı bakan ok (beyaz üçgen + ince border kenarı) */
.kpi-bar-tip::before,
.kpi-bar-tip::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
}
.kpi-bar-tip::after  { top: 100%; border-top-color: #ffffff; }
.kpi-bar-tip::before { top: calc(100% + 1px); border-top-color: #e2e8f0; }

/* Hamburger butonu: desktopta gizli */
.gd-burger-fab {
    display: none !important;
}

/* Login sayfasında her boyutta gizli (2 sınıf = mobil tek-sınıf kuralını ezer) */
.gd-burger-fab.gd-force-hide {
    display: none !important;
}

/* Yalnızca mobilde görünen elementler */
.gd-mobile-only {
    display: none !important;
}

/* KPI kartlari: desktop esit genislik */
.gd-kpi-card {
    flex: 1 1 0 !important;
    min-width: 155px;
}

/* Mobil (≤768px): sidebar gizle, burger göster */
@media (max-width: 768px) {
    .gd-sidebar-desktop {
        display: none !important;
    }
    .gd-burger-fab {
        display: flex !important;
    }
    .gd-mobile-only {
        display: flex !important;
    }

    /* KPI kartları: 2x2 grid */
    .gd-kpi-row {
        flex-wrap: wrap !important;
    }
    .gd-kpi-card {
        flex: 0 0 calc(50% - 4px) !important;
        max-width: calc(50% - 4px) !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    /* Barlar, divider'lar ve kirilim detaylari: gizle */
    .gd-kpi-mobile-hide {
        display: none !important;
    }

    /* KPI kart deger font kucultme */
    .gd-kpi-value {
        font-size: 16px !important;
    }

    /* Sayfa basligi kucultme + hamburger'a yer acma.
       Burger FAB sabit konumda (top/left 12px, 34px kutu) ve sayfa basligi da
       sol ustte basliyor; ikisi ust uste biniyordu. Baslik burger'in sag
       kenarini (46px) 8px bosluk birakarak gecsin diye icerik kenarindan
       (20px) 36px daha iceri alinir. Tum sayfalar icin gecerli olsun diye
       kural bu paylasilan sinifta durur. */
    .gd-page-title {
        font-size: 20px !important;
        padding-left: 36px;
    }

    /* NOT: .gd-card / .gd-chart mobil kurallari burada DEGIL — o siniflarin
       masaustu tanimi dosyanin sonunda ve esit ozgullukte sonraki kural
       kazandigi icin buradaki override ezilirdi. Ilgili media query blogu
       tanimlarin hemen ardinda, dosyanin sonunda. */

    /* Kontrol satiri: sol grup tam genislige uzansin, button saga dayali */
    .gd-ctrl-left {
        flex: 1 !important;
        justify-content: space-between !important;
    }

    /* Basla butonu kucultme */
    .gd-run-btn {
        --button-height: 30px !important;
        --button-padding-x: 10px !important;
        font-size: 12px !important;
    }

    /* AG-Grid tablo font kucultme */
    #gpt-table {
        font-size: 12px !important;
    }
    #gpt-table .ag-cell {
        font-size: 12px !important;
    }
    #gpt-table .ag-header-cell-label {
        font-size: 11px !important;
    }
    #gpt-table .ag-header-cell-comp-wrapper span {
        font-size: 11px !important;
    }
    #gpt-table .ag-header-cell-comp-wrapper span + span {
        font-size: 9px !important;
    }
}

.kontrat-kart:hover {
    border-color: #cbd5e1 !important;
    background-color: #fafbfc !important;
}

.gd-position-panel-heading,
.gd-position-source-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.gd-position-panel-heading {
    margin-bottom: 6px;
    flex-shrink: 0;
}

.gd-position-panel-title,
.gd-position-source-title {
    color: #1e293b;
    font-size: 13px;
    font-weight: 700;
}

.gd-position-panel-contract,
.gd-position-panel-time {
    color: #94a3b8;
    font-size: 11px;
}

.gd-position-panel-contract {
    color: #285a84;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin-top: 2px;
}

.gd-position-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    flex: 1;
}

/* Üst iki sütun: Pozisyon | PnL — grid ile satır yükseklikleri iki kolonda eşitlenir */
.gd-position-cols {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    grid-template-areas:
        "lh dv rh"
        "lc dv rc"
        "lf dv rf";
    column-gap: 16px;
    row-gap: 8px;
    min-height: 0;
}

.gd-area-lhero { grid-area: lh; }
.gd-area-rhero { grid-area: rh; }
.gd-area-lcards { grid-area: lc; display: flex; }
.gd-area-rcards { grid-area: rc; display: flex; }
.gd-area-lfooter { grid-area: lf; display: flex; }
.gd-area-rfooter { grid-area: rf; display: flex; }
.gd-area-lfooter > *, .gd-area-rfooter > * { flex: 1; min-width: 0; }

/* Kart grupları satır yüksekliğini doldursun → 4 kart da eşit boy */
.gd-area-lcards > *, .gd-area-rcards > * { flex: 1; min-width: 0; }
.gd-position-sides, .gd-position-pnl-pair { height: 100%; }

.gd-position-coldiv {
    grid-area: dv;
    width: 1px;
    align-self: stretch;
    background: #eef2f6;
}

/* Ortak hero eyebrow (Net Pozisyon / Anlık PnL) */
.gd-hero-eyebrow {
    color: #94a3b8;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.gd-position-panel-empty,
.gd-position-error {
    color: #94a3b8;
    font-size: 11px;
}

.gd-position-panel-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 56px;
}

.gd-position-error {
    color: #b45309;
    margin-top: 6px;
}

/* dcc.Loading yükseklik zincirini geçir → pozisyon kartı flex alanını doldursun */
#aktif-kontrat-position-loading {
    height: 100%;
    min-height: 0;
}
#aktif-kontrat-position-loading > div {
    height: 100%;
    min-height: 0;
}

/* Net hero */
.gd-position-hero {
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
}

.gd-position-hero-net {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.7px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* B — yüksek güven */
/* A / eşleşme — orta */

/* Anında çıkan özel tooltip (native title yerine) */
/* Tooltip oku */
/* Ortak birim etiketi — tek tip: gri italik */
.gd-unit {
    color: #94a3b8;
    font-size: 13px;
    font-weight: 500;
    font-style: italic;
}

.gd-position-badge {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

/* Alış / Satış mini-kartları */
.gd-position-sides {
    display: flex;
    gap: 8px;
}

.gd-position-side-card {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    padding: 6px 10px;
}

.gd-position-side-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 2px;
}

.gd-position-side-name {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.gd-position-side-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.gd-position-side-total {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.3px;
    font-variant-numeric: tabular-nums;
}

.gd-position-side-unit {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 500;
    font-style: italic;
    margin-left: 2px;
}

/* Bacaklar — etiket | hacim | AOF, sütunlar satırlar arası hizalı */
.gd-position-side-legs {
    display: grid;
    grid-template-columns: 1fr auto auto;
    column-gap: 10px;
    row-gap: 1px;
    font-size: 13px;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}

.gd-leg-label {
    color: #64748b;
}

.gd-leg-vol {
    text-align: right;
    color: #1e293b;
    font-weight: 600;
}

.gd-leg-aof {
    text-align: right;
    color: #94a3b8;
}

/* Kırılım tablosu (eski emphasis satırı için korunur) */
.gd-position-breakdown {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gd-position-brow {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 6px;
    padding: 4px 2px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: #1e293b;
}

.gd-position-brow-head {
    padding: 0 2px 2px 2px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #94a3b8;
}

.gd-position-brow-label {
    color: #64748b;
    font-weight: 600;
}

.gd-position-brow-emphasis {
    margin-top: 2px;
    padding-top: 6px;
    border-top: 1px solid #e2e8f0;
    font-weight: 700;
}

.gd-position-brow-emphasis .gd-position-brow-label {
    color: #1e293b;
    font-weight: 700;
}

/* PnL kutucukları */
/* Anlık PnL hero — soldaki Net hero gibi, kartsız */
.gd-position-pnl-hero {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gd-position-pnl-hero-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.gd-position-pnl-hero-value {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.7px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.gd-position-pnl-hero-sub {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Anlık PnL — Kötümser ↔ İyimser aralık çubuğu */
.gd-pnl-range {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.gd-pnl-range-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.gd-pnl-range-val {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.gd-pnl-range-bar {
    display: flex;
    height: 5px;
    border-radius: 3px;
    overflow: hidden;
    background: #e2e8f0;
}

.gd-pnl-range-bar-loss { background: #dc2626; }
.gd-pnl-range-bar-profit { background: #16a34a; }

.gd-pnl-range-caps {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #94a3b8;
}

/* Açık Pozisyonlar — senaryo satırları */
.gd-pnl-scn-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    padding: 1px 0;
}

.gd-pnl-scn-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #64748b;
}

.gd-pnl-scn-val {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Gerçekleşen / Potansiyel ikilisi */
.gd-position-pnl-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.gd-position-pnl-tile {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    padding: 6px 10px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gd-position-pnl-tile-emphasis {
    background: rgba(40, 90, 132, 0.06);
    border-color: rgba(40, 90, 132, 0.28);
}

.gd-position-pnl-tile-label {
    color: #94a3b8;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* Değer + birim PnL bloğu — kart içinde dikey ortalı */
.gd-position-pnl-tile-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.gd-position-pnl-tile-value {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.4px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.gd-position-pnl-tile-sub {
    color: #94a3b8;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.gd-position-pnl-warn {
    color: #b45309;
    font-size: 11px;
    line-height: 1.25;
    margin-top: 2px;
}

/* Tam genişlik stat footer (4 hücre) */
/* Footer ikilileri — üstteki kartlarla aynı kolon ölçüsünde hizalı */
.gd-position-footer-sides {
    display: flex;
    gap: 8px;
    width: 100%;
}
.gd-position-footer-sides > * { flex: 1 1 0; }

.gd-position-footer-pnl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

.gd-position-pnl-stat {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    padding: 5px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

/* Üst bilgi barı — 3 metrik grubu, aralarında boşluk */
.gd-info-groups {
    flex: 1;
    display: flex;
    gap: 10px;
    min-width: 0;
}

/* Her grup kendi ızgara kutusu */
.gd-info-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(124px, 1fr);
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    overflow: hidden;
}

/* Hücreler arası net dikey çizgi (gap yerine kenarlık — alt-piksel kaybı olmaz) */
.gd-info-strip .gd-info-stat + .gd-info-stat {
    border-left: 1px solid #cbd5e1;
}

/* Üst bar metrik hücresi — dikey: başlık / büyük değer / birim */
.gd-info-stat {
    background: #fcfdfe;
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
}

.gd-info-stat-label {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
}

.gd-info-stat-value {
    color: #1e293b;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.4px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.gd-info-stat-unit {
    color: #94a3b8;
    font-size: 10px;
    font-weight: 500;
    font-style: italic;
    line-height: 1.2;
}

.gd-info-time {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 11px;
    color: #94a3b8;
}

/* Kontrat kapanış sayacı */
.gd-countdown {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 6px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
}

.gd-countdown-urgent {
    background: rgba(220, 38, 38, 0.10);
    border-color: rgba(220, 38, 38, 0.30);
    color: #dc2626;
}

.gd-countdown-urgent .iconify {
    color: #dc2626 !important;
}

.gd-countdown-closed {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #94a3b8;
}

.gd-position-pnl-stat-label {
    color: #94a3b8;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.gd-position-pnl-stat-value {
    color: #1e293b;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.3px;
    font-variant-numeric: tabular-nums;
}

.gd-position-loading-state {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
    text-align: center;
}

.gd-position-loading-title {
    color: #285a84;
    font-size: 13px;
    font-weight: 700;
}

.gd-position-loading-help {
    color: #94a3b8;
    font-size: 10px;
}

.gd-system-console {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}

.gd-system-console-top,
.gd-system-health,
.gd-system-metric {
    align-items: center;
    display: flex;
}

.gd-system-console-top {
    justify-content: space-between;
    width: 100%;
}

.gd-system-health {
    gap: 7px;
    min-width: 0;
}

.gd-system-health-dot {
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.12);
    flex-shrink: 0;
    height: 8px;
    width: 8px;
}

.gd-system-eyebrow,
.gd-system-metric-label,
.gd-system-clock-date {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.gd-system-health-label {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.2px;
}

.gd-system-clock {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
}

.gd-system-clock-time {
    color: #1e293b;
    font-size: 22px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: -0.4px;
    line-height: 1.05;
}

.gd-system-clock-date {
    margin-top: 2px;
}

.gd-system-metrics {
    border-top: 1px solid #e2e8f0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 8px;
    padding-top: 8px;
    width: 100%;
}

.gd-system-metric {
    gap: 5px;
    min-width: 0;
    padding: 0 7px;
}

.gd-system-metric:first-child {
    padding-left: 0;
}

.gd-system-metric + .gd-system-metric {
    border-left: 1px solid #e2e8f0;
}

.gd-system-metric-value {
    color: #334155;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1.2;
}

@media (max-width: 1100px) {
    .gd-position-cols {
        grid-template-columns: 1fr;
        grid-template-areas:
            "lh"
            "lc"
            "lf"
            "rh"
            "rc"
            "rf";
    }
    .gd-position-coldiv {
        display: none;
    }
}

/* ── Kontrat Filtre Popup ──────────────────────────────────────────────── */
.gd-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 8px 12px;
    border-bottom: 1px solid #eef2f6;
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: 0.2px;
}

.gd-filter-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.1s;
}

.gd-filter-close:hover {
    background-color: #f1f5f9;
}

.gd-filter-section {
    padding: 8px 10px;
}

.gd-filter-section-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 4px;
}

.gd-filter-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 7px;
    font-size: 12px;
    color: #334155;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.1s;
    margin-bottom: 2px;
}

.gd-filter-opt:hover {
    background-color: #f1f5f9;
}

.gd-filter-opt-active {
    background-color: rgba(40, 90, 132, 0.09);
    color: #285A84;
    font-weight: 600;
}

.gd-filter-check-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    color: #334155;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.1s;
}

.gd-filter-check-row:hover {
    background-color: #f1f5f9;
}

.gd-filter-checklist {
    max-height: 180px;
    overflow-y: auto;
    padding: 2px 0;
    border: 1px solid #eef2f6;
    border-radius: 8px;
    margin-top: 4px;
    background: #fafafa;
}

@media (max-width: 768px) {
    .gd-position-pnl-pair {
        grid-template-columns: 1fr;
    }
    .gd-position-hero-net {
        font-size: 24px;
    }
    .gd-position-panel-time {
        display: none;
    }
}

/* GİP Eşleşme — kontrat matrisi kartı */
.gd-contract-cell {
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.10), 0 4px 12px rgba(16, 24, 40, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.gd-contract-cell:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(16, 24, 40, 0.10), 0 18px 36px rgba(16, 24, 40, 0.12);
}

/* Alış/Satış satırı — hover'da hafif vurgu */
.gd-contract-row {
    transition: background-color 0.12s ease;
}
.gd-contract-row:hover {
    background-color: rgba(15, 23, 42, 0.04);
}

/* Kontrat kartı PK isimleri — kırpılmış (ellipsis), tam ad tooltip'te */
.gd-org-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* GİP Eşleşme — üst özet kartları (premium hover-lift) */
.gd-stat-card {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.gd-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(16, 24, 40, 0.08), 0 18px 38px rgba(16, 24, 40, 0.10);
}

/* Kart genişletme (modal aç) ikonu */
.gd-contract-expand {
    opacity: 0.75;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}
.gd-contract-expand:hover {
    opacity: 1 !important;
    background-color: rgba(255, 255, 255, 0.18) !important;
}

/* ── Sayfa ölçekleme (gd-fit-page) ──────────────────────────────────────────
   assets/fit-zoom.js içerik alanına göre --gd-fit-zoom değişkenini günceller.
   İçerik 1980px referans genişlikte dizilir ve her monitörde aynı oranla
   ölçeklenir; komponentler kaymaz, üst bar metrikleri kırpılmaz. */
.gd-fit-page {
    /* zoom yerine transform:scale — görsel sonuç ve dizilim birebir aynı
       (içerik parent/zoom genişlikte dizilip ölçekle ebeveyni tam doldurur),
       AMA Plotly hover koordinatları doğru hizalanır. CSS `zoom` altında Plotly
       imleci ölçeksiz layout pikseline eşleyip tooltip'i kaydırıyordu; transform
       ölçeğini getBoundingClientRect'ten okuyup düzeltiyor. */
    transform: scale(var(--gd-fit-zoom, 1));
    transform-origin: top left;
    width: calc(100% / var(--gd-fit-zoom, 1));
    height: calc(100% / var(--gd-fit-zoom, 1));
}

/* ── İnce / minimal scrollbar (Kontrat Trendi listesi vb.) ───────────────────
   6px genişlik, şeffaf ray, yuvarlak açık gri thumb; hover'da bir tık koyu. */
.gd-slim-scroll {
    scrollbar-width: thin;                     /* Firefox */
    scrollbar-color: #cbd5e1 transparent;
}
.gd-slim-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.gd-slim-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.gd-slim-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}
.gd-slim-scroll::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ── Arıza satırı (Ekran 2 · Arızalar kartı) ─────────────────────────────────
   Sabit yükseklikli satır; imleç satırın herhangi bir yerindeyken TÜM satır tek
   parça olarak vurgulanır. Hücrelerin kendi hover'ı yok — pointer-events satır
   kabında toplanır, native title tooltip'i de oradan gelir. */
.gd-ariza-row {
    cursor: default;
    transition: background-color 0.12s ease;
}
.gd-ariza-row > * {
    pointer-events: none;
}
.gd-ariza-row:hover {
    background-color: #f6f9fc;
}

/* ── Derinlik (order book) satırı ────────────────────────────────────────────
   Bu satırlar saniyede bir, 16 tane birden yeniden basılıyor. Statik stiller
   inline kalırsa aynı sözlük her tikte 16 kez serileşip React'e diff'letiliyordu
   (ölçüm: cevap 15,6 KB, render 147 ms). Yalnız GERÇEKTEN değişenler — bar
   dolgusu ve kendi emrimizin kenarlığı — inline kalır. */
.gd-depth-row {
    display: grid;
    align-items: center;
    flex: 1 1 0;
    min-height: 22px;
    padding: 0 8px;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    border-left: 5px solid transparent;
}
.gd-depth-row.gd-own {
    border-left-color: #f97316;
    background-color: rgba(249, 115, 22, 0.08);
}
.gd-depth-price {
    display: flex;
    align-items: center;
    font-weight: 600;
}
.gd-depth-row.gd-own .gd-depth-price { font-weight: 700; }
.gd-depth-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #f97316;
    margin-right: 5px;
    flex-shrink: 0;
}
.gd-depth-qty { text-align: right; color: #475569; }
.gd-depth-cum { text-align: right; color: #94a3b8; }
.gd-depth-empty {
    padding: 12px 8px;
    font-size: 11px;
    color: #cbd5e1;
    text-align: center;
}

/* ── SMF senaryo merdiveni satırı (Ekran 2 · SMF Senaryosu kartı) ────────────
   Arıza satırıyla aynı davranış, tek fark vurgunun tekniği: bu satırların zemini
   PTF sapmasına göre zaten ısı tonlu olduğundan düz bir background hover tonu
   ezerdi. İçe doğru yayılan gölge, altındaki tonun üstüne şeffaf bir kat bindirip
   tonu korur. */
.gd-smf-row {
    cursor: default;
    transition: box-shadow 0.12s ease;
}
.gd-smf-row > * {
    pointer-events: none;
}
.gd-smf-row:hover {
    box-shadow: inset 0 0 0 9999px rgba(15, 23, 42, 0.05);
}

/* ── Grafik / Ekran 2 sekme çubuğu (dmc.Tabs · gd-view-tabs) ─────────────────
   Referans "tabs anatomy" gibi: geniş/okunaklı sekmeler, altta ince ayraç,
   aktif sekmede marka renginde alt-gösterge. */
.gd-view-tabs [role="tablist"] {
    border-bottom: 1px solid #eef2f6;
    gap: 4px;
}
.gd-view-tabs [role="tab"] {
    font-size: 15px;
    font-weight: 600;
    color: #94a3b8;
    padding: 9px 22px;
    letter-spacing: 0.2px;
    border-bottom-width: 2.5px;
    transition: color 0.12s, background-color 0.12s;
}
.gd-view-tabs [role="tab"]:hover {
    background-color: #f8fafc;
    color: #64748b;
}
.gd-view-tabs [role="tab"][data-active] {
    color: #1e293b;
    border-color: #285A84;
}

/* ── Panel yenileme göstergesi (.gd-busy / .gd-fresh) ────────────────────────
   Kontrat değişince paneller anında "meşgul"e alınır: içerik DOM'da kalır ama
   buzlu camın ardında okunamaz hâle gelir. Sebep: iki kontratın
   sayıları birbirine benzediğinde eski veri sessizce duruyor ve yenilenip
   yenilenmediği anlaşılmıyordu — soluk içerik yanlışlıkla okunamaz.

   Sınıfı aktif_kontratlar.py'deki clientside callback'ler ekler/kaldırır
   (bkz. "Panel yenileme göstergesi" bölümü): her panel KENDİ çıktısı geldiğinde
   temizlenir, yani beklemenin süresi panel başına gerçektir.

   Kart başlıkları (.gd-card-head) solmaz — hangi kartın beklediği görünür kalır. */
.gd-busy {
    position: relative;
}
/* Gösterge = STATİK buzlu cam + spinner. Panel boyunda dönen bir shimmer/nabız
   yok: eski shimmer `background-position` animasyonuydu, yani her karede panel
   boyunda repaint — takılma hissinin sebebi buydu. Şimdi kare başına iş yapan
   tek şey spinner'ın `transform` dönüşü (compositor thread'inde koşar).

   Bulanıklık İÇERİĞE değil üstteki tek katmana uygulanır (`backdrop-filter`):
   `filter: blur()` panelin tüm alt ağacını (Plotly tuvalleri, AG-Grid satırları
   dahil) CPU'da yeniden rasterize ettiriyordu; backdrop-filter aynı görüntüyü
   GPU'da tek geçişte verir ve statik olduğu için bir kez hesaplanır. */
.gd-busy > *:not(.gd-card-head) {
    opacity: 0.45;
    transition: opacity 0.12s ease;
}
/* Kart başlığı buzlu camın üstünde kalır — hangi kartın beklediği okunur olsun. */
.gd-busy > .gd-card-head {
    position: relative;
    z-index: 22;
}
.gd-busy::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;
    border-radius: inherit;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.45);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
/* backdrop-filter yoksa bulanıklık da yok → eski değerler okunabilir kalmasın
   diye içerik çok daha soluk, perde daha kalın. */
@supports not ((backdrop-filter: blur(3px)) or (-webkit-backdrop-filter: blur(3px))) {
    .gd-busy > *:not(.gd-card-head) {
        opacity: 0.14;
    }
    .gd-busy::after {
        background: rgba(255, 255, 255, 0.55);
    }
}
/* Spinner yalnızca bekleme uzarsa görünür: 0,55 sn gecikmeli fade-in sayesinde
   bir turda dönen panellerde (derinlik, eşleşmeler) hiç ortaya çıkmaz, DB'ye
   giden Analiz kartlarında çıkar. */
.gd-busy::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    z-index: 21;
    pointer-events: none;
    border-radius: 50%;
    border: 2.5px solid rgba(40, 90, 132, 0.16);
    border-top-color: #285A84;
    will-change: transform, opacity;
    animation: gd-busy-spin 0.7s linear infinite,
               gd-busy-appear 0.18s ease-out 0.55s both;
}
@keyframes gd-busy-spin {
    to { transform: rotate(360deg); }
}
@keyframes gd-busy-appear {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Yeni içerik yerleşti — kısa onay parıltısı. Zemin rengi yerine ayrı bir
   katman kullanılır: kartların kendi beyaz zemini ve gölgesi bozulmasın.
   Sönme `background-color` değil `opacity` üzerinden: renk animasyonu her
   karede repaint isterdi, opacity compositor'da koşar. */
.gd-fresh {
    position: relative;
}
.gd-fresh::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;
    border-radius: inherit;
    pointer-events: none;
    background-color: rgba(40, 90, 132, 0.10);
    will-change: opacity;
    animation: gd-fresh-fade 0.5s ease-out forwards;
}
@keyframes gd-fresh-fade {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* ── Kart başlığından detay sayfasına geçiş (.gd-card-link) ──────────────────
   Aktif Kontratlar · Analiz sekmesindeki kartların başlıkları ilgili detay
   sayfasına bağlanır. Dinginlikte görünüm bağlantısız başlıkla birebir aynı
   kalır; niyet yalnızca hover/odakta belli olur: başlık marka rengine döner,
   ikon rozeti belirginleşir ve sağda küçük bir ok içeri kayar. */
.gd-card-head-title {
    color: #334155;
    transition: color 0.15s ease;
}
.gd-card-head-icon {
    background-color: rgba(40, 90, 132, 0.08);
    transition: background-color 0.15s ease;
}
.gd-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    cursor: pointer;
}
.gd-card-link:hover .gd-card-head-title,
.gd-card-link:focus-visible .gd-card-head-title {
    color: #285A84;
}
.gd-card-link:hover .gd-card-head-icon,
.gd-card-link:focus-visible .gd-card-head-icon {
    background-color: rgba(40, 90, 132, 0.16);
}
.gd-card-link-arrow {
    display: inline-flex;
    align-items: center;
    opacity: 0;
    transform: translate(-3px, 2px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.gd-card-link:hover .gd-card-link-arrow,
.gd-card-link:focus-visible .gd-card-link-arrow {
    opacity: 1;
    transform: translate(0, 0);
}
.gd-card-link:focus-visible {
    outline: 2px solid rgba(40, 90, 132, 0.35);
    outline-offset: 2px;
}

/* ── SMF Senaryoları · Özet matrisi satır vurgusu (.gd-ozet-table) ───────────
   İki sorunu birlikte çözer:
   1) Sol bilgi kolonları (Saat / PTF / SMF / Net Talimat) sticky olduğu için
      kendi opak zeminlerini taşır; DMC'nin tr:hover boyaması onların altında
      kalır ve vurgu bu dört kolonda görünmezdi. Inline stili ancak
      `!important` yener — vurgu bu yüzden burada tanımlı.
   2) Varsayılan hover fazla silikti; marka mavisi yıkamayla belirginleşir.
   Bilgi paneli bir tık koyu tonda kalır ki hover'da da panel gibi okunsun.
   Senaryo hücrelerinin ısı tonu ve turuncu "gerçekleşen" halkası çip üzerinde
   durduğundan bu boyamadan etkilenmez. */
.gd-ozet-table tbody td {
    transition: background-color 120ms ease;
}
.gd-ozet-table tbody tr:hover > td {
    background-color: #e9f1f9 !important;
}
.gd-ozet-table tbody tr:hover > td.gd-ozet-info {
    background-color: #d6e5f3 !important;
}

/* ── Kova detay kartı: üzerine gelince değil, TIKLAYINCA açılır ─────────────
   Mantine Tooltip burada kullanılamıyor: odak tetiği floating-ui'ın
   `visibleOnly` kapısından geçtiği için yalnız :focus-visible durumunda
   (klavye Tab) açılıyor — fare tıklaması :focus verir ama :focus-visible
   vermez, yani tıklamayla hiç açılmazdı. Kart bu yüzden çipin kardeşi olarak
   basılır ve burada :focus ile gösterilir; tıklama çipi odaklar (açılır),
   dışarı tıklamak odağı düşürür (kapanır), Esc de aynı işi görür.

   Konum JS'siz: yön hücrenin satır/kolon indeksinden Python'da seçilip
   data-y / data-x ile gelir (bkz. `_card_dir`), böylece kart tablonun
   `overflow:auto` sarmalayıcısından taşıp kırpılmaz. */
.gd-ozet-chip:hover {
    outline: 1px solid rgba(40, 90, 132, 0.25);
    outline-offset: -1px;
}
.gd-ozet-chip:focus,
.gd-ozet-chip:focus-visible {
    outline: 2px solid rgba(40, 90, 132, 0.55);
    outline-offset: -1px;
}
.gd-ozet-card {
    display: none;
    position: absolute;
    z-index: 60;               /* sticky bilgi kolonları (2) ve başlık (4-5) üstünde */
    width: 232px;
    max-width: calc(100vw - 32px);
    padding: 13px 16px;
    background-color: #ffffff;
    border: 1px solid #e6ebf1;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
    text-align: left;
    white-space: normal;
    cursor: default;
}
.gd-ozet-chip:focus + .gd-ozet-card {
    display: block;
}
.gd-ozet-card[data-y="down"]   { top: calc(100% - 2px); }
.gd-ozet-card[data-y="up"]     { bottom: calc(100% - 2px); }
.gd-ozet-card[data-x="left"]   { left: 0; }
.gd-ozet-card[data-x="right"]  { right: 0; }
.gd-ozet-card[data-x="center"] { left: 50%; transform: translateX(-50%); }

/* ── SMF Senaryoları · kart yüzeyi ve grafik kabı ───────────────────────────
   Bu iki ölçü eskiden Python'da inline sözlüktü; media query ile ezilemediği
   için mobil düzenlemenin önünde engeldi. Artık burada.

   `.gd-chart` yüksekliğini bir CSS değişkeninden alır ve `!important` ile
   uygular: `dcc.Graph` kendi inline `height: 100%`'ini bastığı için sınıfa
   yazılan düz bir `height` ezilirdi. Ölçü grafik başına Python'dan gelir
   (`_chart(...)` → `--gd-chart-h`, mobil için `--gd-chart-h-m`); mobil
   override yukarıdaki 768px bloğunda. */
.gd-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px 24px;
    background-color: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.gd-chart {
    height: var(--gd-chart-h) !important;
}

@media (max-width: 768px) {
    /* Kart yüzeyi: dar ekranda dolgu küçültülür — 24px yatay dolgu 350px'lik
       bir ekranda içeriğe kalan alanı 302px'e düşürüyordu. */
    .gd-card {
        padding: 14px 12px;
        border-radius: 10px;
    }
    /* Grafik: mobil ölçü varsa ona, yoksa masaüstü ölçüsüne düşer. */
    .gd-chart {
        height: var(--gd-chart-h-m, var(--gd-chart-h)) !important;
    }
}

/* ── SMF Senaryoları · sekme şeridi (mobil) ─────────────────────────────────
   Dört sekme + ikonlar 503px istiyor, 390px'lik telefonda 350px alan var;
   Mantine'ın varsayılan `flex-wrap: wrap`'i şeridi iki ragged satıra kırıp
   76px dikey yer yiyordu. Mobilde ikonlar gizlenip yazı ve dolgu küçültülünce
   dördü tek satıra sığar. `nowrap` + `overflow-x: auto` emniyet supabıdır:
   çok dar ekranda (≤330px) sarmak yerine kaydırılır — son sekmenin yarısı
   görünür kalacağı için kaydırılabilirlik de kendini belli eder. */
@media (max-width: 768px) {
    .gd-tabs-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;              /* Firefox */
        -webkit-overflow-scrolling: touch;
    }
    .gd-tabs-list::-webkit-scrollbar {
        display: none;                      /* WebKit: çubuk yer kaplamasın */
    }
    .gd-tabs-list [role="tab"] {
        flex: 0 0 auto;
        padding-left: 8px;
        padding-right: 8px;
        font-size: 12px;
        /* Tek satıra inince yükseklik 34px'e düşüyordu; dokunma hedefi için
           44px'e çıkarılır (iki satırlı eski hâl 76px yiyordu, yine de kazanç). */
        min-height: 44px;
    }
    /* İkon bölümü: yazı zaten ayırt edici, 23px/sekme yer açar */
    .gd-tabs-list .mantine-Tabs-tabSection {
        display: none;
    }
}

/* ── SMF Senaryoları · Özet matrisi: kolon ölçüleri ve mobil düzen ──────────
   Bilgi kolonlarının GENİŞLİĞİ ve sticky SOL OFFSET'i burada birlikte durur:
   offset genişliklerden `calc()` ile türediği için ikisi ayrışamaz (eskiden
   Python'da iki ayrı yerde hesaplanıyordu) ve mobilde tek yerden daraltılır. */
/* Sarmalayıcı hem yatay hem DİKEY kaydırma kabıdır. Yükseklik sınırı şart:
   `overflow-x: auto` zaten kabı kaydırma bağlamı yapıyor, ama yükseklik
   sınırsızken dikeyde hiç kaydırmıyordu — başlık da bu yüzden "donmuyor",
   sayfayla birlikte yukarı kayıyordu. Sınır konunca tablo kendi içinde
   kayıyor ve `thead th` sticky'si işlevine kavuşuyor. */
.gd-ozet-wrap {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - 260px);
    min-height: 320px;
}

/* Başlık satırı dikey kaydırmada donar; sol bilgi başlıkları `.gd-ozet-c*`
   sayesinde ayrıca yatayda da donar, yani "köşe" hücrelerdir.

   Katman sırası (büyükten küçüğe): köşe başlıkları 5 → senaryo başlıkları 3 →
   gövdedeki sticky bilgi hücreleri 2 → sıradan hücreler. Köşe ve gövde
   değerleri Python'dan inline geliyor (`_sticky(z=…)`) ve inline stil
   stylesheet'i yendiği için burada yalnız senaryo başlıklarınınki verilir. */
.gd-ozet-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    /* Emniyet tabanı: hücrelerin kendi zemini Python'dan opak geliyor, ama
       zemini olmayan bir başlık eklenirse saydam kalmasın. */
    background-color: #f8fafc;
}
.gd-ozet-table {
    --oz-w0: 42px;   /* Saat */
    --oz-w1: 72px;   /* PTF */
    --oz-w2: 72px;   /* SMF */
    --oz-w3: 92px;   /* Net Talimat */
}
.gd-ozet-c0, .gd-ozet-c1, .gd-ozet-c2, .gd-ozet-c3 { position: sticky; }
.gd-ozet-c0 { left: 0;                                             width: var(--oz-w0); }
.gd-ozet-c1 { left: var(--oz-w0);                                  width: var(--oz-w1); }
.gd-ozet-c2 { left: calc(var(--oz-w0) + var(--oz-w1));             width: var(--oz-w2); }
.gd-ozet-c3 { left: calc(var(--oz-w0) + var(--oz-w1) + var(--oz-w2)); width: var(--oz-w3); }

@media (max-width: 768px) {
    /* Bilgi paneli daraltılır ve YALNIZ Saat sabit kalır. 4 kolonu birden
       sabitlemek 326px'lik bir ekranın %59'unu donduruyordu; Saat tek başına
       30px yer kaplayıp geriye ~6 kova kolonu bırakıyor. PTF/SMF/Net Talimat
       kaybolmuyor, sadece diğerleriyle birlikte kayıyor (üstelik her kovanın
       detay kartında PTF sapması zaten yazılı). */
    .gd-ozet-table {
        --oz-w0: 30px;
        --oz-w1: 52px;
        --oz-w2: 52px;
        --oz-w3: 58px;
        --oz-info: 192px;   /* dördünün toplamı — min-width hesabı için */
    }
    .gd-ozet-c1, .gd-ozet-c2, .gd-ozet-c3 {
        position: static;
    }
    /* Gövdede yatay dondurma kalksa da BAŞLIK dikeyde donmaya devam etmeli;
       `left` temizlenir, yoksa başlık yatayda yerinde kalıp gövdeyle hizası
       kayardı. Yükseklik sınırı da mobilde daha dar. */
    .gd-ozet-table thead .gd-ozet-c1,
    .gd-ozet-table thead .gd-ozet-c2,
    .gd-ozet-table thead .gd-ozet-c3 {
        position: sticky;
        left: auto;
    }
    .gd-ozet-wrap {
        max-height: calc(100vh - 330px);
        min-height: 260px;
    }
    /* Kova kolonlarına okunur bir taban genişlik: tablo artık kartı taşar ve
       gerçekten kaydırılır. Daraltma açıkken 9, kapalıyken 17 kolon sayılır —
       aksi halde `table-layout: fixed` kalan 9 kolonu 17'lik genişliğe
       yayardı. */
    .gd-ozet-table {
        min-width: calc(var(--oz-info) + 17 * 48px);
    }
    .gd-ozet-dar .gd-ozet-table {
        min-width: calc(var(--oz-info) + 9 * 48px);
    }
    .gd-ozet-dar .gd-ozet-far {
        display: none;
    }
    /* Dokunma hedefi: satır 35 → 40px (tr yüksekliği inline geldiği için
       !important gerekiyor). */
    .gd-ozet-table tbody tr {
        height: 40px !important;
    }
}

/* Satır vurgusu yalnız gerçek imleçli cihazlarda — dokunmatikte `:hover`
   dokunduktan sonra yapışıp kalıyor. */
@media (hover: none) {
    .gd-ozet-table tbody tr:hover > td,
    .gd-ozet-table tbody tr:hover > td.gd-ozet-info {
        background-color: revert !important;
    }
    .gd-ozet-chip:hover {
        outline: none;
    }
}

/* Kova detay kartı mobilde alt sayfa (bottom sheet): 232px'lik bir kart
   326px'lik ekranda yüzüyordu; tam genişlikte ve alta sabit çok daha okunur.
   `position: fixed` sarmalayıcının `overflow`undan da kaçırır. Yön kuralları
   (data-x/data-y) burada nötrlenir — aynı özgüllükle yazılmalılar. */
@media (max-width: 768px) {
    .gd-ozet-card {
        position: fixed;
        width: auto;
        max-width: none;
        z-index: 400;
        box-shadow: 0 -6px 28px rgba(15, 23, 42, 0.22);
    }
    .gd-ozet-card[data-y="up"],
    .gd-ozet-card[data-y="down"] {
        top: auto;
        bottom: 12px;
    }
    .gd-ozet-card[data-x="left"],
    .gd-ozet-card[data-x="right"],
    .gd-ozet-card[data-x="center"] {
        left: 12px;
        right: 12px;
        transform: none;
    }
}

/* ── SMF Senaryoları · Senaryolar sekmesi (mobil) ───────────────────────────
   Senaryo tablosunun iki düzeni de basılır, 768px eşiğinde biri gizlenir.
   Masaüstü düzeni 17 kovayı yan yana kolon olarak veriyor; telefonda kolon
   başına ~7px düşüyordu. Mobil düzen bunun transpozesi: 17 satır × 4 kolon,
   yatay kaydırma yok. */
.gd-senaryo-mobil {
    display: none;
}

/* Nokta tahmin çipleri (PTF / Net Talimat / SMF / Beklenen SMF): masaüstünde
   başlığın sağında tek satır, mobilde 2×2. Çipin inline `min-width: 128px`i
   `!important` ile açılır — dördü yan yana 550px istiyordu. */
@media (max-width: 768px) {
    .gd-senaryo-masaustu {
        display: none;
    }
    .gd-senaryo-mobil {
        display: block;
    }
    /* Grid, flex-basis aritmetiği yerine: `calc(50% - 4px)` Mantine'ın 10px'lik
       `gap="xs"`i ile toplanınca kabı 2px aşıp her çipi ayrı satıra düşürüyordu.
       Grid'de kolon sayısı doğrudan yazılır, boşluk hesabı grid'e kalır. */
    .gd-stat-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px !important;
        width: 100%;
    }
    .gd-stat-row > * {
        min-width: 0 !important;
    }
}

/* ── SMF Senaryoları · Isı haritası kart başlığı (mobil) ────────────────────
   Başlık satırında "Günlük Isı Haritası" + metrik anahtarı + 3'lü lejant yan
   yana duruyor ve dar ekranda taşıyordu. Mobilde: anahtar başlığın altına
   inip tam genişliğe yayılır, lejant gizlenir — yatay renk çubuğu (grafiğin
   altında) aynı bilgiyi zaten veriyor. */
@media (max-width: 768px) {
    .gd-heat-controls {
        width: 100%;
        margin-top: 10px;
    }
    .gd-heat-seg {
        width: 100%;
    }
}

/* ── SMF Senaryoları · filtre satırı (mobil) ────────────────────────────────
   Tarih / model / kolon anahtarı + rozet dar ekranda dört ayrı satıra dağılıp
   152px yer kaplıyordu. Mobilde satır tek bir blok olarak toplanır: kendi
   beyaz yüzeyi (kart diliyle aynı), daraltılmış boşluklar ve kısaltılmış
   seçiciler. Masaüstünde kural yok — orada zaten tek satıra sığıyor. */
@media (max-width: 768px) {
    .gd-filter-bar {
        gap: 6px !important;
        row-gap: 8px !important;
        width: 100%;
        padding: 8px;
        background-color: #ffffff;
        border: 1px solid #e9eef2;
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
        margin-bottom: 14px !important;
    }
    /* Sol grup kendi kutusunu bırakır (`display: contents`) — aksi halde tüm
       genişliği kaplayıp rozeti ayrı satıra itiyordu. Dört kontrol tek akışta
       sarınca boşluk kalmıyor: [tarih + model] / [kolon anahtarı + rozet]. */
    .gd-filter-left {
        display: contents;
    }
    .gd-filter-bar {
        justify-content: flex-start !important;
    }

    /* Yazı ölçüsü küçülünce aynı metin daha dar kutuya sığıyor; genişlikler
       aşağıda buna göre seçildi (ölçülerek: tek tarih ~70px, aralık ~144px,
       "Harman 1.2" ~64px metin). */
    .gd-filter-bar .mantine-Input-input {
        font-size: 12.5px !important;
    }
    .gd-filter-bar .gd-badge .mantine-Text-root {
        font-size: 12px !important;
    }

    /* Seçiciler: satıra tarih + yenile + model birlikte sığsın */
    .gd-filter-bar .gd-date-picker-wrap,
    .gd-filter-bar .gd-date-picker-wrap .mantine-Input-input {
        width: 104px !important;
        min-width: 104px !important;
    }
    /* Aralık seçicide iki tarih yan yana yazılıyor; tek güne göre daha geniş. */
    .gd-filter-bar .gd-filter-range .gd-date-picker-wrap,
    .gd-filter-bar .gd-filter-range .gd-date-picker-wrap .mantine-Input-input {
        width: 172px !important;
        min-width: 172px !important;
    }
    /* Mantine'ın `w` prop'u KÖK'e yazılıyor; yalnız input'u daraltmak dış
       kutuyu 140px'te bırakıyordu — üçü birden hedeflenmeli. */
    /* 116px: metnin kendisi ~58px ama Select'in sağ bölümü (chevron) ~36px
       yer ayırıyor; 104'te "Harman 1.2" kırpılıyordu. */
    .gd-filter-bar .mantine-Select-root,
    .gd-filter-bar .mantine-Select-wrapper,
    .gd-filter-bar .mantine-Select-input {
        width: 116px !important;
        min-width: 116px !important;
    }

    /* Hazır pencere düğmeleri (7G/30G/90G) — aralık seçiciyle aynı satırda kalsın */
    .gd-filter-bar .mantine-Button-root {
        --button-padding-x: 6px !important;
    }

    /* DateControl'ün kendi iç boşluğu (gap="sm" = 12px) blok boşluğuyla
       eşitlenir; aksi halde seçici + düğmeler satıra sığmayıp kırılıyordu. */
    .gd-filter-bar .mantine-Flex-root {
        gap: 6px !important;
    }
    /* İç boşluklar (ör. hazır pencere düğmelerinin ml="xs"i) blok boşluğuna
       eklenip satırı 7px aşıyordu — mobilde sıfırlanır. */
    .gd-filter-bar .mantine-Flex-root > * {
        margin-left: 0 !important;
    }
    .gd-filter-bar .gd-latest-btn {
        --ai-size: 32px !important;
    }

    /* Rozet: tek satır (etiket ve alt bilgi gd-kpi-mobile-hide ile gizli) */
    .gd-badge {
        padding: 5px 10px 5px 11px !important;
        gap: 7px !important;
    }
}

/* Özet matrisi mobilde bir tık küçük punto: 48px'lik kova kolonunda 14px'lik
   rakam kenarlara dayanıyordu. Başlıktaki iki kademe (0'a yakın sınır silik/
   küçük, dış sınır kalın/büyük) korunur, ikisi de orantılı küçülür. */
@media (max-width: 768px) {
    .gd-ozet-table td .mantine-Text-root,
    .gd-ozet-table thead th .mantine-Text-root {
        font-size: 12px !important;
    }
    .gd-ozet-table thead th .mantine-Stack-root .mantine-Text-root:first-child {
        font-size: 9.5px !important;
    }
}