/* =========================================================================
   MİNİ-REBOOT — bootstrap.min.css kaldırıldı (233KB; markup'ta hiç Bootstrap
   sınıfı kullanılmıyordu). Bootstrap 5.3.3 Reboot'un bu uygulamayı BUGÜN
   gerçekten etkileyen eleman-düzeyi kuralları buraya AYNI DEĞERLERLE taşındı
   (sıfırlama değil birebir taşıma → görsel-nötr). CSS değişkenleri çözülmüş
   literal (light tema): border-width=1px, code=#d63384, kbd=#fff/#212529.
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) {
    :root { scroll-behavior: smooth; }
}
body {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: .5rem; font-weight: 500; line-height: 1.2; }
h1 { font-size: calc(1.375rem + 1.5vw); }
h2 { font-size: calc(1.325rem + .9vw); }
h3 { font-size: calc(1.3rem + .6vw); }
h4 { font-size: calc(1.275rem + .3vw); }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }
@media (min-width: 1200px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.75rem; }
    h4 { font-size: 1.5rem; }
}
p { margin-top: 0; margin-bottom: 1rem; }
ol, ul { padding-left: 2rem; }
dl, ol, ul { margin-top: 0; margin-bottom: 1rem; }
ol ol, ol ul, ul ol, ul ul { margin-bottom: 0; }
dt { font-weight: 700; }
dd { margin-bottom: .5rem; margin-left: 0; }
hr { margin: 1rem 0; color: inherit; border: 0; border-top: 1px solid; opacity: .25; }
small { font-size: .875em; }
sub, sup { position: relative; font-size: .75em; line-height: 0; vertical-align: baseline; }
sub { bottom: -.25em; }
sup { top: -.5em; }
a:not([href]):not([class]), a:not([href]):not([class]):hover { color: inherit; text-decoration: none; }
code, kbd, pre, samp { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em; }
pre { display: block; margin-top: 0; margin-bottom: 1rem; overflow: auto; font-size: .875em; }
pre code { font-size: inherit; color: inherit; word-break: normal; }
code { font-size: .875em; color: #d63384; word-wrap: break-word; }
kbd { padding: .1875rem .375rem; font-size: .875em; color: #fff; background-color: #212529; border-radius: .25rem; }
img, svg { vertical-align: middle; }
table { caption-side: bottom; border-collapse: collapse; }
th { text-align: inherit; text-align: -webkit-match-parent; }
thead, tbody, tfoot, tr, td, th { border-color: inherit; border-style: solid; border-width: 0; }
label { display: inline-block; }
button { border-radius: 0; }
button:focus:not(:focus-visible) { outline: 0; }
button, input, optgroup, select, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
button, select { text-transform: none; }
select { word-wrap: normal; }
select:disabled { opacity: 1; }
[type="button"], [type="reset"], [type="submit"], button { -webkit-appearance: button; }
[type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled), button:not(:disabled) { cursor: pointer; }
textarea { resize: vertical; }
::-webkit-datetime-edit-fields-wrapper, ::-webkit-datetime-edit-text, ::-webkit-datetime-edit-minute, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-year-field { padding: 0; }
::-webkit-inner-spin-button { height: auto; }
::-webkit-file-upload-button { font: inherit; -webkit-appearance: button; }
::file-selector-button { font: inherit; -webkit-appearance: button; }
iframe { border: 0; }
summary { display: list-item; cursor: pointer; }
[hidden] { display: none !important; }

/* =====================================================
   BELEDIYESPOR — DARK GLASSMORPHISM THEME
   ===================================================== */

:root {
    /* Koyu tema: native denetimler (açılır <select> listesi, kaydırma çubuğu,
       tarih seçici vb.) koyu zeminde doğru render olsun. Bu olmadan açılır
       liste beyaz zeminde beyaz yazı kalıyordu, sadece hover'da okunuyordu. */
    color-scheme: dark;

    /* ==================================================================
       TEK OTORİTER TOKEN SETİ — eski v1 + v3 "Saha" + v4 "Volt Red" +
       cila-pini :root bloklarının cascade KAZANANLARI (her token için
       dosyadaki EN SON tanım) buraya konsolide edildi. Önce/sonra kanıtı:
       design/token-audit.md
       ================================================================== */

    /* — Marka / vurgu (cila pini kazandı: kurumsal kırmızı — tek kaynak) — */
    --bs-brand:        #e63946;
    --bs-brand-dark:   #D81B2E;
    --bs-brand-mid:    #F02438;
    --bs-brand-light:  rgba(255,46,67,0.16);
    --bs-brand-light2: rgba(255,46,67,0.09);
    --bs-accent:   #e63946;
    --bs-accent-2: #FF6675;

    /* — Zemin gradyanları (v4 Volt Red: kömür + neon kırmızı kor) — */
    --bs-bg-app:  radial-gradient(120% 90% at 86% -10%, rgba(255,46,67,0.13) 0%, transparent 44%), linear-gradient(180deg, #101014 0%, #08080A 100%);
    --bs-bg-home: radial-gradient(95% 60% at 10% 2%, rgba(255,46,67,0.20) 0%, transparent 52%), linear-gradient(180deg, #101014 0%, #08080A 100%);
    --bs-bg-auth: radial-gradient(85% 55% at 16% 6%, rgba(255,46,67,0.28) 0%, transparent 54%), linear-gradient(180deg, #121116 0%, #08080A 100%);

    /* — Yüzeyler: kömür kademeleri (v4) — */
    --bs-surface:      #08080A;
    --bs-surface-alt:  #101014;
    --bs-surface-card: rgba(255,255,255,0.05);
    --bs-surface-card2:rgba(255,255,255,0.035);
    --bs-surface-elevated: #1F1F27;
    --bs-surf-1: #16161C;
    --bs-surf-2: #1F1F27;
    --bs-surf-3: #282830;
    --bs-surf-hover: #282830;

    /* — Çizgiler + üst-kenar parlaması (v4) — */
    --bs-stroke:        rgba(255,255,255,0.09);
    --bs-stroke-soft:   rgba(255,255,255,0.06);
    --bs-stroke-strong: rgba(255,255,255,0.16);
    --bs-border:        rgba(255,255,255,0.09);
    --bs-border-light:  rgba(255,255,255,0.06);
    --bs-edge: inset 0 1px 0 rgba(255,255,255,0.06);

    /* — Metin (v4 beyaz; text-light cila pini: AA kontrast 0.52) — */
    --bs-text:       #FFFFFF;
    --bs-text-muted: rgba(255,255,255,0.62);
    --bs-text-light: rgba(255,255,255,0.52);

    /* — Durum renkleri (cila pinleri: tehlike/sil ≠ marka) — */
    --bs-error:   #ef4444;
    --bs-success: #22C55E;
    --bs-warning: #FBBF24;
    --bs-info:    #3B82F6;
    --bs-ok:   #22c55e;  --bs-ok-soft:   rgba(34,197,94,0.15);
    --bs-warn: #f59e0b;  --bs-warn-soft: rgba(251,191,36,0.15);
    --bs-bad:  #ef4444;  --bs-bad-soft:  rgba(255,46,67,0.16);
    --bs-blue: #3b82f6;  --bs-blue-soft: rgba(59,130,246,0.15);

    /* — Yarıçap (v4) — */
    --bs-radius:    14px;
    --bs-radius-lg: 18px;
    --bs-radius-sm: 11px;
    --bs-radius-xl: 20px;
    --bs-radius-pill: 999px;

    /* — Derinlik / gölge + neon parlama (v4) — */
    --bs-shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
    --bs-shadow-md: 0 10px 28px rgba(0,0,0,0.55);
    --bs-shadow-lg: 0 20px 50px rgba(0,0,0,0.66);
    --bs-elev-1: 0 1px 2px rgba(0,0,0,0.5);
    --bs-elev-2: 0 10px 28px rgba(0,0,0,0.55);
    --bs-glow-accent: 0 0 24px rgba(255,46,67,0.45);

    /* — Tipografi ölçeği — */
    --bs-font: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --bs-fs-xs:  0.6875rem;
    --bs-fs-sm:  0.8125rem;
    --bs-fs-md:  0.9375rem;
    --bs-fs-lg:  1.0625rem;
    --bs-fs-xl:  1.25rem;
    --bs-fs-2xl: 1.5rem;
    --bs-fs-3xl: 1.875rem;

    /* — Spacing ölçeği — */
    --bs-sp-1: 4px;
    --bs-sp-2: 8px;
    --bs-sp-3: 12px;
    --bs-sp-4: 16px;
    --bs-sp-5: 20px;
    --bs-sp-6: 24px;
    --bs-sp-8: 32px;

    /* — Geçiş — */
    --bs-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --bs-tr-fast: 0.15s var(--bs-ease);
    --bs-tr: 0.25s var(--bs-ease);

    /* — Lacivert (navy) paleti (yalnız v1'de tanımlıydı; drawer vb. kullanır) — */
    --bs-navy-950: #070b14;
    --bs-navy-900: #0a1020;
    --bs-navy-800: #0d1b30;
    --bs-navy-700: #122340;
    --bs-navy-600: #173058;
    --bs-navy-500: #1e3a64;

    /* — Kategori aksan renkleri (v4) — */
    --bs-cat-sekretarya: #FF6675;
    --bs-cat-antrenor:   #FBBF24;
    --bs-cat-finans:     #22C55E;
    --bs-cat-yonetim:    #FF8A97;

    /* — Düzen sabitleri — */
    --bs-nav-h: 64px;
    --bs-content-max: 920px;
    --bs-touch: 44px;
}

/* =====================================================
   BASE
   ===================================================== */

/* html,body taban tanımı dosya sonundaki "TASARIM CİLASI 1)" bölümünde —
   TEK OTORİTER BLOK (dört mükerrer tanımın cascade kazananları) */


/* =====================================================
   APP SHELL
   ===================================================== */

.bs-app {
    min-height: 100vh;
    position: relative;
}

/* Hamburger — hidden on home page, visible on inner pages */
.bs-menu-toggle {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1001;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    background: rgba(230,57,70,0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: 1.15rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.bs-app:has(.bs-home) .bs-menu-toggle {
    display: none;
}

.bs-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 1000;
}

/* Drawer — dark panel */
.bs-drawer {
    position: fixed;
    top: 0; left: 0;
    width: min(300px,85vw);
    height: 100%;
    z-index: 1002;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
}

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

.bs-drawer-inner {
    height: 100%;
    background: linear-gradient(160deg, #1e2a3a 0%, #16213e 50%, #0f3460 100%);
    border-right: 1px solid rgba(255,255,255,0.08);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 16px 0;
}

.bs-drawer-header  { padding: 24px 20px 16px; }
.bs-brand-block    { display: flex; flex-direction: column; }

.bs-brand-mark {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: rgba(230,57,70,0.25);
    border: 1px solid rgba(230,57,70,0.5);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1rem; color: #fff;
    margin-bottom: 12px;
}

.bs-brand-title { font-size: 1.125rem; font-weight: 700; color: #fff; }
.bs-brand-sub   { font-size: 0.8125rem; color: rgba(255,255,255,0.55); margin-top: 4px; }
.bs-brand-user  { margin: 8px 0 0; font-size: 0.9375rem; font-weight: 600; color: #fff; }

.bs-drawer-nav {
    display: flex; flex-direction: column;
    padding: 0 12px; gap: 4px; overflow-y: auto; flex: 1;
}

.bs-nav-item {
    display: block; padding: 12px 16px;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    text-align: left; font-size: 1rem; cursor: pointer; width: 100%;
    font-family: inherit;
}

.bs-nav-item:hover,
.bs-nav-item.active {
    background: rgba(230,57,70,0.2);
    border-color: rgba(230,57,70,0.3);
    color: #fff;
}

.bs-nav-logout   { color: rgba(255,180,180,0.85); }
.bs-drawer-divider { border: none; border-top: 1px solid rgba(255,255,255,0.08); margin: 8px 0; }

/* =====================================================
   MAIN & BOTTOM NAV
   ===================================================== */

.bs-main {
    min-height: 100vh;
    padding-bottom: calc(var(--bs-nav-h) + env(safe-area-inset-bottom));
}

.bs-bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 900;
    height: calc(var(--bs-nav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(22,8,20,0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
    display: flex; align-items: center; justify-content: space-around;
}

.bs-bnav-item {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 4px;
    text-decoration: none; color: rgba(255,255,255,0.45);
    font-size: 0.625rem; font-weight: 600;
    min-height: var(--bs-nav-h);
    border: none; background: transparent; cursor: pointer;
    font-family: inherit; transition: color 0.15s;
}

.bs-bnav-item.active { color: var(--bs-brand); }

.bs-bnav-icon { font-size: 1.25rem; line-height: 1; }
.bs-bnav-lbl  { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.01em; }

.bs-bnav-fab-slot {
    flex: 1; display: flex; align-items: center; justify-content: center;
}

.bs-bnav-fab {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bs-brand) 0%, var(--bs-brand-dark) 100%);
    color: #fff; font-size: 1.75rem; font-weight: 300; line-height: 1;
    border: none; cursor: pointer;
    box-shadow: 0 4px 16px rgba(230,57,70,0.5);
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; flex-shrink: 0; margin-bottom: 4px;
    font-family: inherit;
}

/* Veli alt navigasyonunda sadece dekoratif, tıklanamaz kırmızı yuvarlak */
.bs-bnav-fab--static {
    pointer-events: none;
    cursor: default;
}

/* =====================================================
   LOGIN PAGE
   ===================================================== */

.bs-login-page {
    position: relative; min-height: 100vh;
    background: linear-gradient(135deg, #1a0a0a 0%, #2d1030 50%, #1e0d3d 100%);
    color: #fff; overflow: hidden;
}

.bs-login-bg-pattern {
    position: absolute; inset: 0; opacity: 0.12; pointer-events: none;
    background-image: radial-gradient(circle at 20% 20%, #e63946 0%, transparent 45%),
                      radial-gradient(circle at 80% 70%, #7c3aed 0%, transparent 40%);
}

.bs-login-scroll {
    position: relative; z-index: 1;
    padding: max(32px,env(safe-area-inset-top)) 24px 32px;
    max-width: 440px; margin: 0 auto;
}

.bs-login-hero { text-align: center; margin-bottom: 28px; }

.bs-login-logo {
    width: 72px; height: 72px; margin: 0 auto 20px;
    border-radius: 18px;
    background: rgba(230,57,70,0.2);
    border: 2px solid rgba(230,57,70,0.5);
    box-shadow: 0 0 24px rgba(230,57,70,0.3);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 800; color: #fff;
}

.bs-auth-logo {
    margin-bottom: 12px; width: 56px; height: 56px; font-size: 1.125rem;
    background: rgba(230,57,70,0.15); color: var(--bs-brand);
    border: 1px solid rgba(230,57,70,0.3);
}

.bs-login-slogan  { font-size: 0.9375rem; line-height: 1.45; color: rgba(255,255,255,0.7); margin: 0 0 12px; font-weight: 600; }
.bs-login-brand   { font-size: 1.75rem; font-weight: 700; margin: 0 0 6px; line-height: 1.2; color: #fff; }
.bs-login-tagline { margin: 0; font-size: 0.875rem; color: rgba(255,255,255,0.5); }

.bs-login-card {
    background: rgba(60,15,20,0.65);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    color: #fff; border-radius: var(--bs-radius-lg); padding: 28px 24px;
    box-shadow: var(--bs-shadow-md), inset 0 1px 0 rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
}

.bs-login-card h2 { color: #fff; margin: 0 0 6px; font-size: 1.375rem; }
.bs-login-hint    { margin: 0 0 20px; font-size: 0.875rem; color: rgba(255,255,255,0.55); }

.bs-field         { display: block; margin-bottom: 14px; }
.bs-field-label   { display: block; font-size: 0.8125rem; font-weight: 600; color: rgba(255,255,255,0.7); margin-bottom: 6px; }
.bs-input-login   { margin-bottom: 0; }

.bs-password-wrap { position: relative; }
.bs-password-wrap .bs-input { padding-right: 48px; margin-bottom: 0; }
.bs-password-toggle {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    border: none; background: transparent; cursor: pointer;
    font-size: 1.125rem; padding: 4px 8px; line-height: 1; color: rgba(255,255,255,0.55);
}

.bs-login-error {
    background: rgba(230,57,70,0.15); color: #ff8a93;
    border: 1px solid rgba(230,57,70,0.3); border-radius: 10px;
    padding: 10px 12px; font-size: 0.875rem; margin-bottom: 12px;
}

.bs-btn-login  { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 4px; }
.bs-btn-spinner {
    width: 18px; height: 18px;
    border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;
    border-radius: 50%; animation: bs-spin 0.7s linear infinite;
}
.bs-login-forgot {
    display: block; margin: 12px auto 0;
    background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,0.55); font-family: inherit;
    font-size: 0.8125rem; text-decoration: underline;
}
.bs-login-forgot:hover { color: rgba(255,255,255,0.8); }

.bs-login-api-hint { margin: 16px 0 0; font-size: 0.6875rem; color: rgba(255,255,255,0.3); text-align: center; word-break: break-all; }

/* =====================================================
   INPUTS (global dark)
   ===================================================== */

.bs-input {
    width: 100%; box-sizing: border-box;
    padding: 12px 14px; margin-bottom: 12px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px; font-size: 1rem;
    background: rgba(255,255,255,0.08); color: #fff;
    font-family: inherit;
}

.bs-input::placeholder { color: rgba(255,255,255,0.35); }

/* Native <select> açılır listesi: option'lar koyu zemin + açık yazı olsun.
   color-scheme:dark (:root) açılır listeyi koyu render eder; aşağıdaki
   açık renkler de yedek olarak her option'ı okunur tutar. */
select.bs-input { color-scheme: dark; }
.bs-input option,
select.bs-input option,
.bs-select option,
.bs-form-field option { background-color: #17213a; color: #ffffff; }

/* Sayı seçici çipleri — Ay/Kredi'yi yazmak yerine seçtirmek için */
.bs-numchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
/* Çok seçenek olduğunda (örn. 50 kredi) sayfayı uzatmasın: sabit yükseklikli,
   kendi içinde aşağı kaydırılabilen bir kutu. */
.bs-numchips-scroll {
    max-height: 188px; overflow-y: auto;
    padding: 10px; margin: 6px 0 12px;
    border: 1px solid var(--bs-stroke);
    border-radius: 12px; background: rgba(255,255,255,0.03);
    -webkit-overflow-scrolling: touch;
}
.bs-numchip {
    min-width: 46px; padding: 9px 12px; border-radius: 10px;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
    color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-align: center;
}
.bs-numchip:hover { border-color: var(--bs-stroke-strong); }
.bs-numchip-on { background: var(--bs-brand); border-color: var(--bs-brand); color: #fff; }

.bs-input:focus {
    border-color: var(--bs-brand);
    box-shadow: 0 0 0 3px rgba(230,57,70,0.25);
    outline: none;
}

.bs-select, .bs-textarea {
    width: 100%; box-sizing: border-box; padding: 10px 12px;
    border: 1px solid rgba(255,255,255,0.15); border-radius: 10px;
    font-size: 1rem; font-family: inherit;
    background: rgba(255,255,255,0.08); color: #fff;
}

.bs-select:focus, .bs-textarea:focus {
    border-color: var(--bs-brand);
    box-shadow: 0 0 0 3px rgba(230,57,70,0.2);
    outline: none;
}

.bs-textarea { min-height: 100px; resize: vertical; }

/* =====================================================
   BUTTONS
   ===================================================== */

/* .bs-btn-primary taban tanımı v4 "VOLT karakteri" bölümünde — TEK OTORİTER BLOK */
.bs-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.bs-btn-secondary {
    display: inline-block; padding: 10px 18px;
    background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.85);
    border-radius: 8px; text-decoration: none; margin-top: 12px;
    border: 1px solid rgba(255,255,255,0.15); font-family: inherit; cursor: pointer;
}

.bs-btn-sm { padding: 8px 14px; border: none; border-radius: 8px; font-size: 0.875rem; cursor: pointer; font-weight: 600; font-family: inherit; }
.bs-btn-small { padding: 6px 12px; font-size: 0.8125rem; border-radius: 8px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); cursor: pointer; font-family: inherit; }
.bs-btn-outline { color: var(--bs-brand); border-color: var(--bs-brand); background: var(--bs-brand-light); }
.bs-btn-danger, .bs-btn-danger-sm { background: var(--bs-brand); color: #fff; border: none; box-shadow: 0 2px 8px rgba(230,57,70,0.35); font-family: inherit; cursor: pointer; }
.bs-btn-danger-sm { padding: 6px 10px; border-radius: 6px; }
.bs-btn-success, .bs-btn-active { background: #059669 !important; color: #fff !important; }
.bs-btn-warning { background: var(--bs-warning); color: #fff; }
.bs-btn-link { background: transparent; border: none; color: var(--bs-brand); font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; font-family: inherit; }
.bs-btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }

/* =====================================================
   HOME PAGE
   ===================================================== */

.bs-home {
    min-height: 100vh;
    background: linear-gradient(160deg, #1a0a0a 0%, #2d0a14 35%, #1e0d3d 100%);
    background-attachment: fixed;
    color: #fff;
    padding-top: env(safe-area-inset-top);
    padding-bottom: calc(var(--bs-nav-h) + env(safe-area-inset-bottom) + 24px);
}

/* ── App Bar ── */
.bs-appbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px 10px;
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.bs-appbar-left  { display: flex; align-items: center; gap: 12px; }
.bs-appbar-right { display: flex; align-items: center; gap: 10px; }

.bs-appbar-logo {
    width: 44px; height: 44px; border-radius: 12px;
    background: linear-gradient(135deg, var(--bs-brand) 0%, var(--bs-brand-dark) 100%);
    color: #fff; font-weight: 800; font-size: 0.9375rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 10px rgba(230,57,70,0.5); flex-shrink: 0;
}

.bs-appbar-brand { display: flex; flex-direction: column; }
.bs-appbar-title { font-size: 1.125rem; font-weight: 800; color: #fff; line-height: 1.2; letter-spacing: -0.01em; }
.bs-appbar-sub   { font-size: 0.75rem; color: rgba(255,255,255,0.6); font-weight: 400; }

.bs-notif-btn {
    position: relative; width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; text-decoration: none; font-size: 1.1rem; color: rgba(255,255,255,0.85);
}

.bs-notif-badge {
    position: absolute; top: 2px; right: 2px;
    width: 16px; height: 16px;
    background: var(--bs-brand); color: #fff;
    border-radius: 50%; font-size: 0.625rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #1a0a0a;
}

.bs-avatar-wrap  { position: relative; cursor: pointer; }

.bs-profile-img {
    width: 40px; height: 40px; border-radius: 50%;
    object-fit: cover; border: 2px solid rgba(230,57,70,0.5); display: block;
}

.bs-profile-fallback {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(230,57,70,0.2); border: 2px solid rgba(230,57,70,0.4);
    display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
}

.bs-avatar-dot {
    position: absolute; bottom: 1px; right: 1px;
    width: 10px; height: 10px;
    background: #10b981; border-radius: 50%;
    border: 2px solid #1a0a0a;
}

/* ── Chip Row ── */
.bs-chip-row {
    display: flex; gap: 8px; padding: 10px 20px; flex-wrap: wrap;
    background: rgba(0,0,0,0.15);
}

.bs-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 20px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    font-size: 0.8125rem; font-weight: 600; color: rgba(255,255,255,0.9);
    text-decoration: none; white-space: nowrap;
}

.bs-chip-icon  { font-size: 0.875rem; }

.bs-chip-link {
    color: rgba(255,160,160,0.95);
    border-color: rgba(230,57,70,0.3);
    background: rgba(230,57,70,0.12);
}

.bs-chip-badge {
    background: var(--bs-brand); color: #fff;
    border-radius: 10px; font-size: 0.625rem; font-weight: 700;
    padding: 1px 6px; min-width: 16px; text-align: center;
}

.bs-chip-arrow { font-size: 1rem; opacity: 0.6; margin-left: 2px; }

/* ── Club Summary (Kulüp Özeti) ── */
.bs-club-summary {
    margin: 14px 16px 0;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--bs-radius-lg);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: var(--bs-shadow-md);
    overflow: hidden;
}

.bs-club-summary-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.bs-club-summary-title {
    font-size: 1rem; font-weight: 700; color: #fff;
}

.bs-stats-scroll {
    display: flex; gap: 0; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.bs-stats-scroll::-webkit-scrollbar { display: none; }

.bs-stat-chip {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 16px 14px;
    min-width: 90px; flex-shrink: 0;
    scroll-snap-align: start;
    border-right: 1px solid rgba(255,255,255,0.06);
    text-align: center;
}

.bs-stat-chip:last-child { border-right: none; }

.bs-stat-chip-icon {
    font-size: 1.5rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    background: rgba(255,255,255,0.07);
    border-radius: 10px;
}

.bs-stat-chip-val {
    font-size: 1.375rem; font-weight: 800; color: #fff; line-height: 1;
}

.bs-stat-chip-lbl {
    font-size: 0.625rem; font-weight: 600;
    color: rgba(255,255,255,0.5); line-height: 1.35; text-align: center;
    max-width: 80px;
}

/* Scroll dots indicator */
.bs-scroll-dots {
    display: flex; justify-content: center; gap: 4px; padding: 8px 0;
}
.bs-scroll-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,0.2);
}
.bs-scroll-dot.active { background: var(--bs-brand); width: 16px; border-radius: 3px; }

/* ── Category Sections ── */
.bs-cat-section {
    margin: 14px 16px 0;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--bs-radius-lg);
    border: 1px solid rgba(255,255,255,0.09);
    box-shadow: var(--bs-shadow-sm);
    overflow: hidden;
}

.bs-cat-header {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.bs-cat-icon-wrap {
    width: 28px; height: 28px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.875rem; flex-shrink: 0;
}

.bs-cat-icon-sekretarya { background: rgba(244,63,94,0.2);  color: var(--bs-cat-sekretarya); }
.bs-cat-icon-antrenor   { background: rgba(245,158,11,0.2); color: var(--bs-cat-antrenor);   }
.bs-cat-icon-finans     { background: rgba(16,185,129,0.2); color: var(--bs-cat-finans);     }
.bs-cat-icon-yonetim    { background: rgba(139,92,246,0.2); color: var(--bs-cat-yonetim);    }

.bs-cat-title {
    font-size: 0.9375rem; font-weight: 700; color: #fff;
}

.bs-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.06);
}

.bs-cat-grid-3 { grid-template-columns: repeat(3, 1fr); }
.bs-cat-grid-2 { grid-template-columns: repeat(2, 1fr); }

.bs-cat-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 16px 8px;
    background: rgba(255,255,255,0.03);
    text-decoration: none; color: #fff;
    cursor: pointer; border: none; font-family: inherit;
    transition: background 0.15s;
    min-height: 90px;
}

.bs-cat-btn:hover,
.bs-cat-btn:active {
    background: rgba(255,255,255,0.08);
}

.bs-cat-btn-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; flex-shrink: 0;
}

/* Icon backgrounds per category */
.bs-cat-btn-icon-sekretarya { background: rgba(244,63,94,0.18);  color: var(--bs-cat-sekretarya); }
.bs-cat-btn-icon-antrenor   { background: rgba(245,158,11,0.18); color: var(--bs-cat-antrenor);   }
.bs-cat-btn-icon-finans     { background: rgba(16,185,129,0.18); color: var(--bs-cat-finans);     }
.bs-cat-btn-icon-yonetim    { background: rgba(139,92,246,0.18); color: var(--bs-cat-yonetim);    }

.bs-cat-btn-lbl {
    font-size: 0.6875rem; font-weight: 600;
    color: rgba(255,255,255,0.8);
    text-align: center; line-height: 1.3;
}

/* ── Account Bottom Row ── */
.bs-acct-row {
    display: flex; justify-content: center;
    margin: 14px 16px 0;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-radius: var(--bs-radius-lg);
    border: 1px solid rgba(255,255,255,0.09);
    overflow: hidden;
}

.bs-acct-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 14px 8px; text-decoration: none;
    color: rgba(255,255,255,0.65); font-size: 0.75rem; font-weight: 600;
    border: none; background: transparent; cursor: pointer; font-family: inherit;
    border-right: 1px solid rgba(255,255,255,0.07);
}

.bs-acct-item:last-child { border-right: none; }
.bs-acct-item:hover      { background: rgba(255,255,255,0.06); color: #fff; }
.bs-acct-icon            { font-size: 1.25rem; }
.bs-acct-logout          { color: rgba(255,160,160,0.85); }

/* =====================================================
   MODULE / INNER PAGES
   ===================================================== */

.bs-module-page {
    padding: 60px 20px 24px;
    min-height: 100vh;
    background: linear-gradient(135deg, #1a0a0a 0%, #2d1b3d 100%);
    color: #fff;
}

.bs-module-page h1 { color: var(--bs-brand); margin-top: 0; }

.bs-submenu-page {
    min-height: 100vh;
    padding: 60px 20px 24px;
    background: linear-gradient(135deg, #1a0a0a 0%, #2d1b3d 100%);
    color: #fff;
}

.bs-submenu-page .bs-page-title      { color: #fff; }
.bs-submenu-page .bs-page-header-sub { color: rgba(255,255,255,0.55); }

.bs-submenu-page .bs-back-btn {
    background: rgba(230,57,70,0.15);
    border: 1px solid rgba(230,57,70,0.35);
    color: #fff;
}

.bs-submenu-lead {
    margin: -8px 0 16px; font-size: 0.9rem;
    color: rgba(255,255,255,0.55); line-height: 1.4;
}

.bs-submenu-list { display: flex; flex-direction: column; gap: 10px; }

a.bs-submenu-row {
    display: flex; align-items: center; gap: 16px; padding: 18px 16px;
    background: rgba(80,20,20,0.5);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-radius: 14px; color: #fff !important; text-decoration: none;
    font-weight: 600; font-size: 1rem; line-height: 1.35;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

a.bs-submenu-row:hover {
    background: rgba(100,25,25,0.7);
    box-shadow: 0 4px 20px rgba(230,57,70,0.15);
}

.bs-submenu-row-icon { font-size: 1.5rem; flex-shrink: 0; width: 28px; text-align: center; color: var(--bs-brand); }

.bs-submenu-page .bs-tile     { background: rgba(80,20,20,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; border: 1px solid rgba(255,255,255,0.1); }
.bs-submenu-page .bs-menu-card{ background: rgba(80,20,20,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
.bs-submenu-page .bs-dl dt    { color: rgba(255,255,255,0.55); }
.bs-submenu-page .bs-dl dd    { color: #fff; }
.bs-submenu-page .bs-error    { color: #ff8a93; background: rgba(230,57,70,0.12); padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(230,57,70,0.3); }

/* =====================================================
   SHARED COMPONENTS
   ===================================================== */

.bs-muted     { color: rgba(255,255,255,0.55); }
.bs-success   { color: #34d399; font-size: 0.875rem; }
.bs-error     { color: #ff8a93; font-size: 0.875rem; }

.bs-list { list-style: none; padding: 0; margin: 16px 0; }

.bs-list-item {
    padding: 14px;
    background: rgba(80,20,20,0.5);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-radius: 10px; margin-bottom: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25); color: #fff;
}

.bs-list-item a { color: var(--bs-brand); text-decoration: none; font-weight: 600; }

.bs-stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }

.bs-stat-card {
    background: rgba(80,20,20,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    padding: 16px; border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.bs-stat-label { display: block; font-size: 0.8125rem; color: rgba(255,255,255,0.55); }
.bs-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--bs-brand); }

/* Page header */
.bs-page-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }

.bs-back-btn {
    width: 40px; height: 40px;
    border: 1px solid rgba(230,57,70,0.35); border-radius: 10px;
    background: rgba(230,57,70,0.15); color: var(--bs-brand);
    font-size: 1.25rem; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: inherit;
}

.bs-page-title         { margin: 0; color: #fff; font-size: 1.375rem; }
.bs-back-link          { display: inline-block; color: rgba(255,255,255,0.65); text-decoration: none; font-weight: 600; margin-bottom: 8px; }
.bs-page-header-title  { margin: 0; color: #fff; font-size: 1.5rem; }
.bs-page-header-sub    { margin: 6px 0 0; color: rgba(255,255,255,0.55); font-size: 0.9375rem; }
.bs-page-lead          { margin: 0 0 16px; line-height: 1.45; color: rgba(255,255,255,0.65); }

/* Forms */
.bs-form-section, .bs-filter-section, .bs-list-section { margin-bottom: 24px; }

.bs-label { display: block; font-size: 0.875rem; font-weight: 600; color: rgba(255,255,255,0.7); margin: 12px 0 6px; }

.bs-form-group { margin-bottom: 14px; }
.bs-form-group label { display: block; font-weight: 600; font-size: 0.875rem; color: rgba(255,255,255,0.7); margin-bottom: 6px; }

.bs-form-label    { display: block; margin: 4px 0 2px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.75); }
.bs-form-input-box{ padding: 12px 14px; margin: 4px 0 8px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; }
.bs-form-field    { width: 100%; border: none; background: transparent; font-size: 15px; color: #fff; font-family: inherit; box-sizing: border-box; }
.bs-form-field:focus { outline: none; }
.bs-form-input-box select.bs-form-field { cursor: pointer; }

.bs-switch-label { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: 0.9375rem; color: rgba(255,255,255,0.85); }

/* Cards — zemin/kenar/gölge/cam "KART YÜZEY SİSTEMİ" bloğunda (tek otoriter);
   burada yalnız .bs-card'a özgü kutu ölçüleri kalır */
.bs-card {
    border-radius: 12px; padding: 16px; margin-bottom: 12px; color: #fff;
}

.bs-card-muted   { background: rgba(217,119,6,0.12);  border: 1px solid rgba(217,119,6,0.3); }
.bs-card-success { background: rgba(5,150,105,0.12); border: 1px solid rgba(5,150,105,0.3); }

/* Antrenman ataması — gün kartı başlığı + "bu günü iptal et" */
.bs-gun-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bs-gun-iptal-btn {
    flex-shrink: 0; padding: 4px 10px; font-size: 12px; font-weight: 600; font-family: inherit;
    color: #fca5a5; background: rgba(220,38,38,0.12); border: 1px solid rgba(220,38,38,0.35);
    border-radius: 8px; cursor: pointer;
}
.bs-gun-iptal-btn.geri { color: #6ee7b7; background: rgba(5,150,105,0.15); border-color: rgba(5,150,105,0.4); }
.bs-gun-iptal-not { margin: 6px 0 2px; font-size: 13px; font-style: italic; color: rgba(255,255,255,0.55); }
/* İptal edilmiş gün: gri, sönük, etkileşime kapalı görünüm */
.bs-card.bs-gun-iptal,
.bs-card.bs-gun-iptal:hover {
    background: rgba(120,120,120,0.10);
    border-color: rgba(255,255,255,0.08);
    box-shadow: none;
    transform: none;
}
.bs-card.bs-gun-iptal strong,
.bs-card.bs-gun-iptal .bs-label,
.bs-card.bs-gun-iptal .bs-input { opacity: 0.45; }
.bs-card.bs-gun-iptal .bs-input { pointer-events: none; }

.bs-menu-form-card {
    background: rgba(60,15,15,0.65);
    border-radius: 12px; padding: 16px 14px; margin-bottom: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: var(--bs-elev-1), var(--bs-edge);
    -webkit-backdrop-filter: none; backdrop-filter: none;
}

.bs-menu-form-card-title { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: #fff; }

/* Tiles */
.bs-tile-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }

.bs-tile {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    padding: 18px 16px;
    background: rgba(80,20,20,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-radius: 14px; border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
    color: #fff; text-decoration: none; position: relative; min-height: 72px;
}

.bs-tile-wide { grid-column: 1 / -1; }
.bs-tile-icon { font-size: 1.5rem; color: var(--bs-brand); }
.bs-tile-grid-page { margin-top: 8px; }

.bs-tile-action {
    border: 1px solid rgba(255,255,255,0.1); cursor: pointer;
    font: inherit; text-align: left;
    background: rgba(80,20,20,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.bs-tile-action .bs-tile-icon { color: var(--bs-brand); }

.bs-module-page .bs-tile:not(.bs-tile-action),
.bs-submenu-page .bs-tile {
    background: rgba(80,20,20,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    color: #fff; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.bs-module-page .bs-tile:not(.bs-tile-action) .bs-tile-icon { color: var(--bs-brand); }

/* Menu rows */
.bs-menu-row {
    display: flex; align-items: center; gap: 14px; padding: 18px 16px;
    background: rgba(80,20,20,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 4px 16px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05);
    border-radius: 14px; color: #fff; text-decoration: none;
    width: 100%; text-align: left; font-size: 1rem; font-weight: 600; cursor: pointer; font-family: inherit;
}

.bs-menu-row-icon { font-size: 1.25rem; width: 28px; text-align: center; color: var(--bs-brand); }
.bs-menu-logout   { background: rgba(100,10,10,0.4); border-color: rgba(230,57,70,0.2); color: rgba(255,200,200,0.85); }

.bs-menu-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

.bs-menu-card {
    display: block; padding: 18px 16px;
    background: rgba(80,20,20,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-radius: 12px; color: #fff; font-weight: 600; text-decoration: none;
    border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.bs-hatirlatma-btn {
    margin-left: auto; padding: 10px 14px;
    background: rgba(230,57,70,0.25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(230,57,70,0.4); color: #fff;
    border-radius: 10px; text-decoration: none; font-size: 0.8125rem; font-weight: 600;
    position: relative; display: inline-flex; align-items: center; gap: 6px;
}

.bs-badge {
    background: var(--bs-brand); color: #fff; font-size: 0.6875rem; padding: 2px 8px;
    border-radius: 10px; box-shadow: 0 2px 8px rgba(230,57,70,0.5);
}

/* =====================================================
   SECTION TITLE
   ===================================================== */

.bs-section-title { font-size: 1.0625rem; font-weight: 700; color: var(--bs-brand); margin: 20px 0 10px; }
.bs-date-header   { color: var(--bs-brand); margin: 16px 0 8px; font-size: 1rem; font-weight: 700; }

/* =====================================================
   SPINNER & AUTH LOADING
   ===================================================== */

.bs-spinner {
    width: 28px; height: 28px;
    border: 3px solid rgba(255,255,255,0.12);
    border-top-color: var(--bs-brand);
    border-radius: 50%; animation: bs-spin 0.8s linear infinite; margin: 12px auto;
}

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

.bs-auth-loading {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 100vh; gap: 14px; color: var(--bs-brand);
    background: linear-gradient(135deg, #1a0a0a 0%, #2d1b3d 100%);
}

/* =====================================================
   ALERTS & BANNERS
   ===================================================== */

.bs-alert         { padding: 12px 14px; border-radius: 10px; margin-bottom: 12px; font-size: 0.9375rem; }
.bs-alert-info    { background: rgba(59,130,246,0.12);  color: #93c5fd; border: 1px solid rgba(59,130,246,0.3); }
.bs-alert-warn    { background: rgba(217,119,6,0.12);   color: #fbbf24; border: 1px solid rgba(217,119,6,0.3); }
.bs-alert-error   { background: rgba(230,57,70,0.12);   color: #ff8a93; border: 1px solid rgba(230,57,70,0.3); }
.bs-alert-success { background: rgba(5,150,105,0.12);   color: #34d399; border: 1px solid rgba(5,150,105,0.3); }
.bs-warn-banner   { background: rgba(217,119,6,0.15); color: #fbbf24; padding: 10px 12px; border-radius: 8px; font-size: 0.875rem; border: 1px solid rgba(217,119,6,0.3); }

/* =====================================================
   MODALS
   ===================================================== */

.bs-modal-backdrop,
.bs-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 2000;
    display: flex; align-items: center; justify-content: center; padding: 16px;
}

.bs-modal-overlay { align-items: flex-end; }

.bs-modal {
    background: rgba(40,10,15,0.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-radius: 14px; padding: 20px; max-width: 480px; width: 100%;
    max-height: 90vh; overflow-y: auto; color: #fff;
    border: 1px solid rgba(255,255,255,0.1); box-shadow: var(--bs-shadow-lg);
}

.bs-modal-overlay .bs-modal { border-radius: 16px 16px 0 0; max-width: 520px; }
.bs-modal-lg   { max-width: 640px; }
.bs-modal-sm   { max-width: 360px; }
.bs-modal-wide { max-width: 560px; }

.bs-modal-title  { margin: 0 0 12px; color: #fff; font-size: 1.25rem; font-weight: 700; }
.bs-modal h2     { margin: 0 0 16px; color: var(--bs-brand); font-size: 1.25rem; }
.bs-modal-body   { margin: 0 0 16px; white-space: pre-wrap; color: rgba(255,255,255,0.85); }
.bs-modal-actions, .bs-modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.bs-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.bs-modal-close  { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: rgba(255,255,255,0.65); font-family: inherit; }

.bs-modal-panel {
    background: rgba(40,10,15,0.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-radius: 14px; padding: 20px; max-width: 480px; width: 100%;
    max-height: 90vh; overflow-y: auto;
    border: 1px solid rgba(255,255,255,0.1); color: #fff; box-shadow: var(--bs-shadow-lg);
}

/* =====================================================
   SPORCU CARDS
   ===================================================== */

.bs-sporcu-card {
    background: rgba(80,20,20,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-radius: 12px; padding: 14px; margin-bottom: 10px;
    border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 4px 16px rgba(0,0,0,0.3); color: #fff;
}

.bs-sporcu-gelmeyen       { background: rgba(230,57,70,0.2); border-color: rgba(230,57,70,0.35); }
.bs-sporcu-card-main      { display: flex; gap: 12px; align-items: flex-start; }
.bs-sporcu-thumb          { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.bs-sporcu-thumb-fallback { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.1); border-radius: 50%; }
.bs-sporcu-info           { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.bs-sporcu-bilgi-row, .bs-sporcu-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.bs-check-label           { display: flex; align-items: center; gap: 6px; font-size: 0.875rem; color: rgba(255,255,255,0.85); }
.bs-bilgi-verildi         { color: #ff8a93; font-weight: 700; font-size: 0.8125rem; }
.bs-bilgi-verildi-inline  { color: #ff8a93; font-weight: 700; }
.bs-kalan-green  { color: #34d399; font-weight: 600; }
.bs-kalan-orange { color: #fbbf24; font-weight: 600; }
.bs-kalan-red    { color: #f87171; font-weight: 600; }
.bs-kalan-muted  { color: rgba(255,255,255,0.45); }

/* =====================================================
   SPORCULARIM
   ===================================================== */

.bs-sporcularim-page                 { padding-bottom: 32px; }
.bs-sporcularim-page .bs-page-header { margin-bottom: 8px; }
.bs-sporcularim-loading              { display: flex; justify-content: center; padding: 48px 0; }

.bs-sporcularim-yonetici-msg { margin: 0 0 12px; font-size: 15px; color: rgba(255,255,255,0.55); line-height: 1.45; }

a.bs-btn-sporcularim-yonetici-git {
    display: block; width: 100%; padding: 14px 18px; margin-bottom: 12px;
    background: rgba(255,255,255,0.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    color: #fff !important; border: 1px solid rgba(255,255,255,0.2); border-radius: 12px;
    font-weight: 600; font-size: 1rem; text-align: center; text-decoration: none; box-sizing: border-box;
}

.bs-sporcularim-title-row   { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.bs-sporcularim-page-title  { margin: 0; font-size: 22px; font-weight: 600; color: #fff; }
.bs-sporcularim-toplam      { font-size: 15px; color: rgba(255,255,255,0.55); white-space: nowrap; }

.bs-sporcularim-card {
    background: rgba(80,20,20,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 14px; margin-bottom: 8px; color: #fff;
}

.bs-sporcularim-card-gelmeyen { background: rgba(230,57,70,0.2); border-color: rgba(230,57,70,0.4); }
.bs-sporcularim-card-inner    { display: flex; flex-direction: column; gap: 10px; }
.bs-sporcularim-card-head     { display: flex; align-items: center; gap: 12px; }
.bs-sporcularim-thumb         { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.bs-sporcularim-name          { font-size: 16px; font-weight: 600; color: #fff; line-height: 1.35; word-break: break-word; }
.bs-sporcularim-kalan         { margin: 0; font-size: 13px; color: rgba(255,255,255,0.85); }
.bs-sporcularim-meta          { margin: 0; font-size: 12px; color: rgba(255,255,255,0.5); }
.bs-sporcularim-field         { margin: 0; font-size: 13px; color: rgba(255,255,255,0.85); }
.bs-sporcularim-info          { margin: 12px 0 8px; color: #ff8a93; font-size: 14px; }
.bs-sporcularim-liste-baslik  { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: #fff; }

.bs-sporcularim-switch-row    { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-size: 14px; color: rgba(255,255,255,0.85); cursor: pointer; }
.bs-sporcularim-switch-row input { width: 18px; height: 18px; }

.bs-sporcularim-card-actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.bs-btn-sporcularim-outline {
    min-height: 44px; padding: 8px 10px; font-size: 12px; font-weight: 600;
    color: var(--bs-brand); background: rgba(230,57,70,0.1);
    border: 2px solid var(--bs-brand); border-radius: 10px; cursor: pointer; line-height: 1.25; font-family: inherit;
}

.bs-sporcularim-bilgi-check { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,0.85); cursor: pointer; }
.bs-sporcularim-kaydet      { width: auto; min-width: 120px; margin-top: 0; }
.bs-sporcularim-sil-row     { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

.bs-btn-kaydi-sil { padding: 10px 14px; background: #e63946; color: #fff; border: none; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.bs-btn-kayit-uzat { padding: 10px 14px; background: #059669; color: #fff; border: none; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }

.bs-btn-kaydi-silinen-list {
    display: block; width: 100%; margin-top: 14px; padding: 14px 18px;
    background: linear-gradient(135deg, var(--bs-brand) 0%, var(--bs-brand-dark) 100%);
    color: #fff; border: none; border-radius: 12px; font-size: 15px; font-weight: 600;
    cursor: pointer; box-shadow: 0 4px 16px rgba(230,57,70,0.4); font-family: inherit;
}

/* =====================================================
   YOKLAMA
   ===================================================== */

.bs-yoklama-durum-btns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; width: 100%; }

.bs-btn-yoklama-durum {
    min-height: 42px; padding: 10px 8px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7); font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s; font-family: inherit;
}

.bs-btn-yoklama-durum:disabled { opacity: 0.55; cursor: not-allowed; }
.bs-btn-yoklama-katildi.bs-active  { background: #059669; border-color: #047857; color: #fff; box-shadow: 0 2px 8px rgba(5,150,105,0.4); }
.bs-btn-yoklama-izinli.bs-active   { background: #d97706; border-color: #b45309; color: #fff; box-shadow: 0 2px 8px rgba(217,119,6,0.4); }
.bs-btn-yoklama-katilmadi.bs-active{ background: var(--bs-brand); border-color: var(--bs-brand-dark); color: #fff; box-shadow: 0 2px 8px rgba(230,57,70,0.4); }

.bs-yoklama-row      { margin-bottom: 10px; }
.bs-yoklama-row-main { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }

.bs-attendance-row          { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.bs-attendance-row:last-child { border-bottom: none; }
.bs-attendance-photo          { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,0.1); flex-shrink: 0; }
.bs-attendance-photo-fallback { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* =====================================================
   FILTERS & SEGMENTS
   ===================================================== */

.bs-filter-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }

.bs-filter-btn {
    padding: 14px; border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85); font-weight: 600; cursor: pointer; font-size: 0.9375rem; font-family: inherit;
}

.bs-filter-btn.active { background: #059669; color: #fff; border-color: #047857; box-shadow: 0 2px 8px rgba(5,150,105,0.35); }
.bs-filter-panel      { margin-bottom: 16px; }

.bs-segment-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }

.bs-segment {
    padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.08); cursor: pointer; font-weight: 600; font-size: 0.875rem;
    text-decoration: none; color: rgba(255,255,255,0.85); font-family: inherit;
}

.bs-segment-link   { display: inline-flex; align-items: center; }

.bs-alinabilir-card { border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 14px; margin-bottom: 10px; background: rgba(80,20,20,0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; cursor: pointer; }
.bs-alinabilir-card.selected { border-color: var(--bs-brand); background: rgba(230,57,70,0.2); box-shadow: 0 0 0 1px var(--bs-brand); }
.bs-alinabilir-card.taken    { border-color: #059669; background: rgba(5,150,105,0.15); }

/* =====================================================
   MISC
   ===================================================== */

.bs-dl dt    { font-weight: 600; margin-top: 12px; color: rgba(255,255,255,0.6); }
.bs-dl dd    { margin: 4px 0 0; color: #fff; }
.bs-pre-muted{ white-space: pre-wrap; font-size: 0.875rem; color: rgba(255,255,255,0.5); margin: 8px 0; }
.bs-lead     { white-space: pre-wrap; font-weight: 600; margin: 12px 0; color: #fff; }

.bs-inline-row   { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.bs-list-item-row{ display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bs-card-row     { display: flex; gap: 12px; align-items: center; }

.bs-file-label    { display: block; margin: 12px 0; font-weight: 600; color: rgba(255,255,255,0.85); }
.bs-file-input    { display: block; margin-top: 6px; }
.bs-profile-preview { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin: 12px 0; }
.bs-avatar-sm     { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.bs-stat-card-wide{ margin: 12px 0; }
.bs-link-btn      { background: none; border: none; text-align: left; width: 100%; cursor: pointer; padding: 0; color: var(--bs-brand); font-family: inherit; }
.bs-list-urgent   { border-left: 4px solid var(--bs-brand); }
.bs-date-header   { color: var(--bs-brand); margin: 16px 0 8px; font-size: 1rem; }

.bs-gun-baslik { font-weight: 700; color: var(--bs-brand); padding: 10px 0 4px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-top: 8px; }
.bs-time-input { padding: 8px; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; font-size: 0.9375rem; background: rgba(255,255,255,0.08); color: #fff; font-family: inherit; }

.bs-callout            { padding: 14px 16px; border-radius: 12px; margin-bottom: 16px; line-height: 1.45; font-size: 0.9rem; }
.bs-callout-info       { background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.3); color: #93c5fd; }
.bs-callout-info .bs-muted  { color: #60a5fa; margin: 8px 0 0; }
.bs-callout-steps      { margin: 8px 0 0; padding-left: 1.25rem; }
.bs-callout-steps li   { margin-bottom: 6px; }
.bs-callout .bs-btn-secondary { margin-top: 12px; display: inline-block; }

.bs-hesap-foto-row     { display: flex; align-items: center; gap: 14px; margin: 12px 0 16px; flex-wrap: wrap; }
.bs-hesap-foto-actions { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 160px; }

/* Hesap Oluştur — Kayıtlı Hesaplar sekmesi */
.bs-hesap-sekmeler   { margin-bottom: 14px; }
.bs-hesap-filtre-row { display: flex; gap: 10px; flex-wrap: wrap; }
.bs-hesap-filtre-row .bs-input { flex: 1; min-width: 150px; }
.bs-hesap-sayi       { margin: 4px 0 10px; font-size: 0.78rem; }
.bs-hesap-liste      { display: flex; flex-direction: column; gap: 10px; }
.bs-hesap-karti      { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 0; }
.bs-hesap-foto       { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid var(--bs-stroke); }
.bs-hesap-foto-bos   { display: flex; align-items: center; justify-content: center; background: var(--bs-surf-1); color: var(--bs-text-muted); }
.bs-hesap-karti-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.bs-hesap-karti-body strong { font-size: 0.9rem; }
.bs-hesap-karti-body .bs-muted { font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-hesap-karti-sag  { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.bs-hesap-tarih      { font-size: 0.7rem; }
.bs-hesap-rozet      { font-size: 0.66rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.bs-hesap-rozet.aktif { background: rgba(5,150,105,0.15); border: 1px solid rgba(5,150,105,0.4); color: #6ee7b7; }
.bs-hesap-rozet.pasif { background: rgba(255,255,255,0.06); border: 1px solid var(--bs-stroke); color: var(--bs-text-muted); }
/* ── Kayıtlı Hesap yönetimi (yalnız Süper Yönetici) ── */
.bs-hesap-karti-wrap { display: flex; flex-direction: column; }
.bs-hesap-yonet-btn  { padding: 4px 12px; font-size: 0.72rem; border-radius: 8px; margin-top: 2px; }
.bs-hesap-yonet-panel { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; padding: 14px; border: 1px dashed var(--bs-stroke-strong, var(--bs-stroke)); }
.bs-hesap-yonet-panel .bs-btn-secondary { align-self: flex-start; }
.bs-hesap-sil-onay { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 8px; background: rgba(230,57,70,0.08); border: 1px solid rgba(230,57,70,0.35); }
.bs-hesap-sil-onay-btns { display: flex; gap: 8px; }
.bs-btn-danger-outline { align-self: flex-start; background: transparent; color: var(--bs-brand); border: 1px solid var(--bs-brand); padding: 8px 14px; border-radius: 10px; font-family: inherit; font-weight: 700; cursor: pointer; }
.bs-btn-danger-outline:hover { background: rgba(230,57,70,0.1); }
.bs-brans-ekle-kaldir-panel .bs-label { margin-top: 8px; }
.bs-brans-ekle-kaldir-panel .bs-btn-primary { margin-top: 12px; }

.bs-chat-page            { display: flex; flex-direction: column; min-height: calc(100vh - 80px); }
.bs-chat-messages        { flex: 1; overflow-y: auto; padding: 12px 0; max-height: 60vh; }
.bs-chat-bubble          { max-width: 85%; padding: 12px 14px; border-radius: 14px; margin-bottom: 10px; }
.bs-chat-bubble.user     { margin-left: auto; background: rgba(230,57,70,0.22); border: 1px solid rgba(230,57,70,0.3); color: #fff; }
.bs-chat-bubble.assistant{ margin-right: auto; background: rgba(124,58,237,0.18); border: 1px solid rgba(124,58,237,0.3); color: #fff; }
.bs-chat-input-row       { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; }
.bs-chat-input-row .bs-input { flex: 1; margin-bottom: 0; }

.bs-home-profile-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.bs-home-welcome h1  { margin: 0; font-size: 1.25rem; color: #fff; }
.bs-role             { margin: 4px 0 0; font-size: 0.8125rem; color: rgba(255,255,255,0.55); }

/* =========================================================================
   ============================  DESIGN SYSTEM v2  ===========================
   Premium kurumsal tema katmanı. Bu blok dosyanın SONUNDA olduğu için
   eşit özgüllükteki eski kuralları güvenle "override" eder; hiçbir eski
   sınıf SİLİNMEZ. Sadece görünüm modernize edilir.
   ========================================================================= */

/* ---- 1. BASE / ZEMIN — html,body tek otoriter blokta (dosya sonu, CİLA 1) ---- */

/* İnce, premium scrollbar (web/Windows) */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.18) transparent;
}
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.16);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.28); background-clip: padding-box; }

/* Erişilebilir, yumuşak odak halkası */
*:focus-visible {
    outline: 2px solid var(--bs-accent-2);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ---- 2. SAYFA ZEMINLERI (lacivert/siyah premium) --------------------- */
.bs-home {
    background: var(--bs-bg-home);
    background-attachment: fixed;
}
.bs-module-page,
.bs-submenu-page,
.bs-auth-loading {
    background: var(--bs-bg-app);
    background-attachment: fixed;
}

/* İç sayfalarda içerik üst boşluğunu hamburger ile çakışmayacak şekilde koru,
   geniş ekranlarda içeriği ortala (aşırı gerilmeyi engelle). */
.bs-module-page,
.bs-submenu-page {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
}

/* ---- 3. PREMIUM YÜZEY / KART SİSTEMİ — TEK OTORİTER BLOK -------------- */
/* v1 kırmızı-cam, v2 lacivert-cam, v3 katı-gölge(+üst-kenar parlaması) ve
   PERF blur-kapama katmanlarının EFEKTİF sonucu burada birleştirildi
   (bkz. design/token-audit.md §3). Cam (backdrop-filter) çoğalan içerik
   kartlarında KAPALI — yalnız sabit "chrome" katmanlarında (appbar/nav/
   modal/drawer/login) yaşar. */
.bs-card,
.bs-list-item,
.bs-stat-card,
.bs-tile,
.bs-tile-action,
.bs-menu-row,
.bs-menu-card,
.bs-sporcu-card,
.bs-sporcularim-card,
.bs-alinabilir-card,
a.bs-submenu-row {
    background: var(--bs-surf-2);
    border: 1px solid var(--bs-stroke);
    box-shadow: var(--bs-elev-1), var(--bs-edge);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: transform var(--bs-tr-fast), background var(--bs-tr-fast), box-shadow var(--bs-tr-fast), border-color var(--bs-tr-fast);
}
/* Sayfa-kapsamlı (0,2,0) eski varyantlar: aynı yüzey; efektif gölgede
   üst-kenar parlaması YOK (bugünkü kazanan sonuç birebir korunur) */
.bs-submenu-page .bs-tile,
.bs-submenu-page .bs-menu-card,
.bs-module-page .bs-tile:not(.bs-tile-action) {
    background: var(--bs-surf-2);
    border: 1px solid var(--bs-stroke);
    box-shadow: var(--bs-elev-1);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: transform var(--bs-tr-fast), background var(--bs-tr-fast), box-shadow var(--bs-tr-fast), border-color var(--bs-tr-fast);
}

a.bs-submenu-row:hover,
.bs-menu-row:hover,
.bs-menu-card:hover,
.bs-card:hover,
.bs-tile:hover {
    background: var(--bs-surf-3);
    border-color: var(--bs-stroke-strong);
    box-shadow: var(--bs-elev-2);
    transform: translateY(-1px);
}

/* "İç içe" yüzeyler (özet / kategori / hesap satırı) */
.bs-club-summary,
.bs-cat-section,
.bs-acct-row {
    background: var(--bs-surf-1);
    border: 1px solid var(--bs-stroke);
    box-shadow: var(--bs-elev-1), var(--bs-edge);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Sporcu "gelmeyen / kırmızı" vurgu kartları kırmızı kalsın (durum bilgisi) */
.bs-sporcu-gelmeyen,
.bs-sporcularim-card-gelmeyen {
    background: rgba(230,57,70,0.16);
    border-color: rgba(230,57,70,0.38);
}

/* ---- 4. BUTON SİSTEMİ ------------------------------------------------- */
.bs-btn-primary,
.bs-btn-secondary,
.bs-btn-sm,
.bs-btn-small,
.bs-filter-btn,
.bs-segment {
    transition: transform var(--bs-tr-fast), box-shadow var(--bs-tr-fast), background var(--bs-tr-fast), border-color var(--bs-tr-fast), opacity var(--bs-tr-fast);
    -webkit-tap-highlight-color: transparent;
}

.bs-btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(230,57,70,0.50); }
.bs-btn-primary:active:not(:disabled) { transform: translateY(0); }

.bs-btn-secondary:hover { background: rgba(255,255,255,0.16); border-color: var(--bs-stroke-strong); }

/* Min dokunma alanı (parmakla rahat basım) */
.bs-btn-primary,
.bs-btn-secondary,
.bs-btn-sm,
.bs-filter-btn,
.bs-segment,
.bs-back-btn,
.bs-notif-btn,
.bs-nav-item,
.bs-bnav-item {
    min-height: var(--bs-touch);
}

/* ---- 5. INPUT / FORM SİSTEMİ ----------------------------------------- */
.bs-input,
.bs-select,
.bs-textarea,
.bs-form-input-box,
.bs-time-input {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--bs-stroke-strong);
    border-radius: var(--bs-radius);
    transition: border-color var(--bs-tr-fast), box-shadow var(--bs-tr-fast), background var(--bs-tr-fast);
}
.bs-input { min-height: var(--bs-touch); }

.bs-input:hover,
.bs-select:hover,
.bs-textarea:hover,
.bs-form-input-box:hover { border-color: rgba(255,255,255,0.24); }

.bs-input:focus,
.bs-select:focus,
.bs-textarea:focus,
.bs-form-input-box:focus-within {
    border-color: var(--bs-accent);
    box-shadow: 0 0 0 3px rgba(230,57,70,0.25);
    background: rgba(255,255,255,0.09);
    outline: none;
}

/* ---- 6. BADGE / DURUM ETİKETLERİ ------------------------------------- */
.bs-status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: var(--bs-radius-pill);
    font-size: var(--bs-fs-xs); font-weight: 700; line-height: 1.4;
    letter-spacing: 0.02em; white-space: nowrap;
    border: 1px solid transparent;
}
.bs-status::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; flex-shrink: 0;
}
.bs-status--ok      { color: #4ade80; background: var(--bs-ok-soft);   border-color: rgba(34,197,94,0.30); }
.bs-status--warn    { color: #fbbf24; background: var(--bs-warn-soft); border-color: rgba(245,158,11,0.30); }
.bs-status--bad     { color: #f87171; background: var(--bs-bad-soft);  border-color: rgba(239,68,68,0.30); }
.bs-status--info    { color: #93c5fd; background: var(--bs-blue-soft); border-color: rgba(59,130,246,0.30); }
.bs-status--neutral { color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.08); border-color: var(--bs-stroke); }

/* ---- 7. EMPTY STATE --------------------------------------------------- */
.bs-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 6px;
    padding: 48px 24px; margin: 12px 0;
    color: rgba(255,255,255,0.6);
}
.bs-empty-icon {
    width: 72px; height: 72px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
    background: var(--bs-surf-2);
    border: 1px solid var(--bs-stroke);
    box-shadow: var(--bs-elev-1);
    margin-bottom: 8px;
}
.bs-empty-title { font-size: var(--bs-fs-lg); font-weight: 700; color: #fff; margin: 0; }
.bs-empty-text  { font-size: var(--bs-fs-md); color: rgba(255,255,255,0.55); margin: 0; max-width: 320px; line-height: 1.5; }

/* ---- 8. LOADING / SKELETON ------------------------------------------- */
.bs-loading {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 48px 0; color: rgba(255,255,255,0.6);
}
.bs-skeleton {
    position: relative; overflow: hidden;
    background: rgba(255,255,255,0.06);
    border-radius: var(--bs-radius);
}
.bs-skeleton::after {
    content: ""; position: absolute; inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.10) 50%, transparent 100%);
    animation: bs-shimmer 1.3s infinite;
}
@keyframes bs-shimmer { 100% { transform: translateX(100%); } }
.bs-skeleton-line  { height: 12px; margin-bottom: 8px; }
.bs-skeleton-line.sm { width: 40%; }
.bs-skeleton-line.md { width: 70%; }
.bs-skeleton-card  { height: 84px; margin-bottom: 12px; }

/* ---- 9. ERROR STATE --------------------------------------------------- */
.bs-error-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 8px; padding: 40px 24px;
}
.bs-error-state-icon {
    width: 72px; height: 72px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 2rem;
    background: var(--bs-bad-soft); color: #f87171;
    border: 1px solid rgba(239,68,68,0.35);
}

/* ---- 10. İÇERİK GENİŞLİK SINIRI + RESPONSIVE GRID -------------------- */
/* Geniş ekran (web/Windows): içerik bloklarını ortala, aşırı gerilmeyi önle */
@media (min-width: 768px) {
    .bs-home > .bs-appbar,
    .bs-home > .bs-chip-row,
    .bs-home > .bs-club-summary,
    .bs-home > .bs-cat-section,
    .bs-home > .bs-acct-row {
        max-width: var(--bs-content-max);
        margin-left: auto;
        margin-right: auto;
    }
    .bs-submenu-list,
    .bs-menu-list,
    .bs-tile-grid {
        max-width: var(--bs-content-max);
        margin-left: auto;
        margin-right: auto;
    }
    /* Menü/işlem kartlarını orta ekranda 2 kolona aç */
    .bs-submenu-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .bs-menu-list    { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* Çok geniş ekran: kategori butonlarını ferahlat */
@media (min-width: 1100px) {
    .bs-cat-grid,
    .bs-cat-grid-2,
    .bs-cat-grid-3 { gap: 1px; }
}

/* Küçük telefon: kategori ızgarasını 4 yerine taşmadan 3'e indir */
@media (max-width: 360px) {
    .bs-cat-grid { grid-template-columns: repeat(3, 1fr); }
    .bs-stat-chip { min-width: 82px; }
}

/* Geniş ekranda içerik bloğu yardımcı sınıfı (yeni markup için hazır) */
.bs-container {
    width: 100%;
    max-width: var(--bs-content-max);
    margin-left: auto;
    margin-right: auto;
}

/* Yeni responsive grid yardımcıları (Aşama 3-5'te kullanılacak) */
.bs-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 480px) { .bs-grid-sm-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .bs-grid-md-2 { grid-template-columns: repeat(2, 1fr); } .bs-grid-md-3 { grid-template-columns: repeat(3, 1fr); } }

/* ---- 11. AKTIF NAV DURUMU (daha net) --------------------------------- */
.bs-bnav-item.active .bs-bnav-icon { transform: translateY(-1px); }
.bs-nav-item.active { font-weight: 700; }

/* ---- 12. HAREKET AZALTMA TERCİHİ ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* =========================================================================
   ============================  AŞAMA 2 — LAYOUT  ===========================
   İkon sistemi, drawer, bottom navigation, header, FAB ve premium login.
   ========================================================================= */

/* ---- İNLİNE İKON SİSTEMİ (emoji yerine kurumsal SVG) ----------------- */
.bs-ico {
    width: 1em; height: 1em;
    display: inline-block; vertical-align: middle;
    flex-shrink: 0; stroke-width: 1.8;
}

/* ---- HAMBURGER (premium) --------------------------------------------- */
.bs-menu-toggle {
    top: max(12px, env(safe-area-inset-top));
    background: rgba(13,27,48,0.65);
    border: 1px solid var(--bs-stroke-strong);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: var(--bs-elev-1);
    transition: background var(--bs-tr-fast), transform var(--bs-tr-fast);
}
.bs-menu-toggle:hover { background: rgba(30,58,100,0.75); }
.bs-menu-toggle:active { transform: scale(0.95); }
.bs-menu-icon { display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }

/* ---- DRAWER (premium lacivert) --------------------------------------- */
.bs-drawer-backdrop { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }

.bs-drawer-inner {
    background: linear-gradient(168deg, #0c1a2e 0%, #0a1322 55%, #070b14 100%);
    border-right: 1px solid var(--bs-stroke);
    box-shadow: 8px 0 40px rgba(0,0,0,0.5);
}

.bs-drawer-header {
    padding: max(24px, calc(env(safe-area-inset-top) + 16px)) 20px 16px;
    border-bottom: 1px solid var(--bs-stroke-soft);
    margin-bottom: 8px;
}

.bs-brand-mark {
    background: linear-gradient(135deg, var(--bs-brand) 0%, var(--bs-brand-dark) 100%);
    border: none;
    box-shadow: 0 6px 18px rgba(230,57,70,0.45);
    letter-spacing: 0.02em;
}

/* Drawer öğeleri: ikon + etiket, net aktif durum */
.bs-nav-item {
    display: flex; align-items: center; gap: 12px;
    font-size: var(--bs-fs-md); font-weight: 600;
    position: relative;
    transition: background var(--bs-tr-fast), color var(--bs-tr-fast), border-color var(--bs-tr-fast);
}
.bs-nav-ico {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; color: rgba(255,255,255,0.7);
    flex-shrink: 0;
}
.bs-nav-lbl { flex: 1; }

.bs-nav-item:hover,
.bs-nav-item.active {
    background: rgba(230,57,70,0.16);
    border-color: rgba(230,57,70,0.28);
}
.bs-nav-item.active { color: #fff; }
.bs-nav-item.active .bs-nav-ico { color: var(--bs-accent-2); }
.bs-nav-item.active::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 60%; border-radius: 0 3px 3px 0;
    background: var(--bs-accent-2);
}
.bs-nav-logout .bs-nav-ico { color: rgba(255,150,150,0.85); }

/* ---- BOTTOM NAVIGATION (premium) ------------------------------------- */
.bs-bottom-nav {
    background: rgba(8,12,22,0.88);
    border-top: 1px solid var(--bs-stroke);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    box-shadow: 0 -8px 32px rgba(0,0,0,0.5);
}

.bs-bnav-item {
    position: relative; gap: 4px;
    transition: color var(--bs-tr-fast);
}
.bs-bnav-icon {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.3rem; line-height: 1;
    transition: transform var(--bs-tr-fast);
}
.bs-bnav-item.active { color: var(--bs-accent-2); }
.bs-bnav-item.active::before {
    content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
    width: 22px; height: 3px; border-radius: 3px;
    background: var(--bs-accent-2);
    box-shadow: 0 0 10px rgba(255,88,100,0.7);
}
.bs-bnav-item.active .bs-bnav-icon { transform: translateY(1px) scale(1.06); }

/* Ortadaki yükseltilmiş işlem butonu (FAB) */
.bs-bnav-fab {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, var(--bs-accent-2) 0%, var(--bs-brand) 45%, var(--bs-brand-dark) 100%);
    box-shadow: 0 8px 24px rgba(230,57,70,0.55), 0 0 0 4px rgba(8,12,22,0.9);
    margin-top: -22px; margin-bottom: 0;
    transition: transform var(--bs-tr-fast), box-shadow var(--bs-tr-fast);
}
.bs-bnav-fab .bs-ico { width: 26px; height: 26px; }
.bs-bnav-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(230,57,70,0.6), 0 0 0 4px rgba(8,12,22,0.9); }
.bs-bnav-fab:active { transform: translateY(0) scale(0.96); }

/* Geniş ekranda bottom-nav'ı ortalı bir bar gibi göster */
@media (min-width: 768px) {
    .bs-bottom-nav {
        left: 50%; right: auto; transform: translateX(-50%);
        width: min(620px, 96vw);
        margin-bottom: 12px;
        border-radius: var(--bs-radius-lg);
        border: 1px solid var(--bs-stroke);
        height: var(--bs-nav-h);
        padding-bottom: 0;
    }
}

/* ---- HOME APP BAR (header) ------------------------------------------- */
.bs-appbar {
    padding-top: max(14px, calc(env(safe-area-inset-top) + 10px));
    background: linear-gradient(180deg, rgba(8,12,22,0.55) 0%, rgba(8,12,22,0) 100%);
    border-bottom: none;
}
.bs-appbar-logo {
    background: linear-gradient(135deg, var(--bs-accent-2) 0%, var(--bs-brand-dark) 100%);
    box-shadow: 0 6px 18px rgba(230,57,70,0.5);
    border-radius: 14px;
}
.bs-notif-btn {
    background: var(--bs-surf-2);
    border: 1px solid var(--bs-stroke);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transition: background var(--bs-tr-fast), transform var(--bs-tr-fast);
}
.bs-notif-btn:hover { background: var(--bs-surf-3); transform: translateY(-1px); }

/* ---- LOGIN (premium kurumsal) ---------------------------------------- */
.bs-login-page {
    background: var(--bs-bg-auth);
}
.bs-login-bg-pattern {
    opacity: 0.16;
    background-image:
        radial-gradient(circle at 18% 16%, var(--bs-brand) 0%, transparent 42%),
        radial-gradient(circle at 82% 72%, var(--bs-navy-500) 0%, transparent 46%),
        radial-gradient(circle at 50% 110%, var(--bs-blue) 0%, transparent 40%);
}
.bs-login-scroll {
    min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    padding-top: max(40px, env(safe-area-inset-top));
    padding-bottom: max(40px, env(safe-area-inset-bottom));
}
.bs-login-logo {
    background: linear-gradient(135deg, var(--bs-accent-2) 0%, var(--bs-brand-dark) 100%);
    border: none;
    box-shadow: 0 10px 36px rgba(230,57,70,0.5);
}
.bs-login-brand { letter-spacing: -0.02em; }
.bs-login-card {
    background: rgba(13,24,42,0.7);
    border: 1px solid var(--bs-stroke);
    box-shadow: var(--bs-elev-2), inset 0 1px 0 rgba(255,255,255,0.06);
}
.bs-login-card h2 { letter-spacing: -0.01em; }
.bs-btn-login { width: 100%; }

/* =========================================================================
   ===========================  AŞAMA 3 — DASHBOARD  =========================
   App bar ikonları, kulüp özeti kart grid'i, premium kategori kartları.
   ========================================================================= */

/* ---- İkon boyutları (kapsayıcıya göre) ------------------------------- */
.bs-chip-icon .bs-ico        { width: 15px; height: 15px; }
.bs-notif-btn .bs-ico        { width: 20px; height: 20px; }
.bs-profile-fallback .bs-ico { width: 22px; height: 22px; color: var(--bs-accent-2); }
.bs-stat-chip-icon .bs-ico   { width: 22px; height: 22px; }
.bs-cat-icon-wrap .bs-ico    { width: 16px; height: 16px; }
.bs-cat-btn-icon .bs-ico     { width: 24px; height: 24px; }
.bs-acct-icon .bs-ico        { width: 22px; height: 22px; }

/* ---- KULÜP ÖZETİ başlığı --------------------------------------------- */
.bs-club-summary-hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 4px;
}
.bs-club-summary-title { font-size: var(--bs-fs-lg); font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.bs-club-summary-date  { font-size: var(--bs-fs-sm); font-weight: 600; color: rgba(255,255,255,0.5); }

/* ---- İSTATİSTİK KARTLARI (yatay scroll → responsive grid) ------------ */
.bs-club-summary .bs-stats-scroll {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    overflow: visible;
    padding: 8px 14px 16px;
}
@media (min-width: 560px) {
    .bs-club-summary .bs-stats-scroll { grid-template-columns: repeat(4, 1fr); }
}
.bs-club-summary .bs-stat-chip {
    min-width: 0; flex-shrink: 1;
    border-right: none;
    background: var(--bs-surf-2);
    border: 1px solid var(--bs-stroke-soft);
    border-radius: var(--bs-radius);
    padding: 14px 8px 12px;
    gap: 8px;
    transition: transform var(--bs-tr-fast), border-color var(--bs-tr-fast);
}
.bs-club-summary .bs-stat-chip:hover { transform: translateY(-1px); border-color: var(--bs-stroke); }

.bs-stat-chip-icon { width: 38px; height: 38px; border-radius: 11px; color: rgba(255,255,255,0.85); }
.bs-stat-chip-val  { font-size: 1.5rem; letter-spacing: -0.02em; }
.bs-stat-chip-lbl  { font-size: var(--bs-fs-xs); max-width: none; }

/* İstatistik ikon renk varyantları */
.bs-stat-ico-blue   { background: var(--bs-blue-soft); color: #93c5fd; }
.bs-stat-ico-ok     { background: var(--bs-ok-soft);   color: #4ade80; }
.bs-stat-ico-bad    { background: var(--bs-bad-soft);  color: #f87171; }
.bs-stat-ico-warn   { background: var(--bs-warn-soft); color: #fbbf24; }
.bs-stat-ico-accent { background: rgba(230,57,70,0.18); color: var(--bs-accent-2); }

/* ---- KATEGORİ BÖLÜMLERİ (premium kartlar) ---------------------------- */
.bs-cat-header { border-bottom: none; padding: 16px 16px 6px; }
.bs-cat-header > span { font-size: var(--bs-fs-md); font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.bs-cat-icon-wrap { width: 30px; height: 30px; border-radius: 9px; }

.bs-cat-section .bs-cat-grid,
.bs-cat-section .bs-cat-grid-2,
.bs-cat-section .bs-cat-grid-3 {
    gap: 8px;
    padding: 6px 12px 14px;
    background: transparent;
}

.bs-cat-btn {
    background: var(--bs-surf-2);
    border: 1px solid var(--bs-stroke-soft);
    border-radius: var(--bs-radius);
    min-height: 96px;
    gap: 10px;
    transition: transform var(--bs-tr-fast), background var(--bs-tr-fast), border-color var(--bs-tr-fast), box-shadow var(--bs-tr-fast);
}
.bs-cat-btn:hover,
.bs-cat-btn:active {
    background: var(--bs-surf-3);
    border-color: var(--bs-stroke-strong);
    transform: translateY(-2px);
    box-shadow: var(--bs-elev-1);
}
.bs-cat-btn-icon { border-radius: 13px; }
.bs-cat-btn-lbl  { font-size: 0.75rem; color: rgba(255,255,255,0.85); }

/* ---- HESAP SATIRI ---------------------------------------------------- */
.bs-acct-item { transition: background var(--bs-tr-fast), color var(--bs-tr-fast); }
.bs-acct-icon { display: inline-flex; align-items: center; justify-content: center; }
.bs-acct-logout .bs-acct-icon { color: rgba(255,150,150,0.85); }

/* =========================================================================
   =========================  AŞAMA 4 — MENÜ SAYFALARI  ======================
   Düz link listeleri → premium kategori kartları (ikon + başlık + açıklama).
   ========================================================================= */

/* ---- SUBMENU KARTLARI ------------------------------------------------ */
a.bs-submenu-row {
    align-items: center;
    gap: 14px;
    padding: 16px 14px;
}
.bs-submenu-row-icon {
    width: 46px; height: 46px;
    border-radius: 13px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(230,57,70,0.14);
    color: var(--bs-accent-2);
    border: 1px solid rgba(230,57,70,0.22);
    flex: 0 0 auto;
    font-size: 1rem;
    transition: background var(--bs-tr-fast), transform var(--bs-tr-fast);
}
.bs-submenu-row-icon .bs-ico { width: 22px; height: 22px; }

.bs-submenu-row-text {
    display: flex; flex-direction: column; gap: 3px;
    flex: 1; min-width: 0;
}
.bs-submenu-row-title {
    font-size: var(--bs-fs-md); font-weight: 700; color: #fff;
    line-height: 1.3; letter-spacing: -0.01em;
}
.bs-submenu-row-desc {
    font-size: var(--bs-fs-sm); font-weight: 500;
    color: rgba(255,255,255,0.5); line-height: 1.35;
}
.bs-submenu-row-arrow {
    flex: 0 0 auto; display: inline-flex; align-items: center;
    color: rgba(255,255,255,0.32);
    transition: transform var(--bs-tr-fast), color var(--bs-tr-fast);
}
.bs-submenu-row-arrow .bs-ico { width: 18px; height: 18px; }

a.bs-submenu-row:hover .bs-submenu-row-icon { background: rgba(230,57,70,0.22); transform: scale(1.04); }
a.bs-submenu-row:hover .bs-submenu-row-arrow { transform: translateX(3px); color: var(--bs-accent-2); }

.bs-submenu-lead { color: rgba(255,255,255,0.55); }

/* ---- TILE KARTLARI (Sporcu Kayıt Merkezi) ---------------------------- */
.bs-tile-grid-page .bs-tile-action {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    min-height: 86px;
    padding: 16px 14px;
}
.bs-tile-grid-page .bs-tile-icon {
    width: 50px; height: 50px;
    border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(230,57,70,0.14);
    color: var(--bs-accent-2);
    border: 1px solid rgba(230,57,70,0.22);
    flex: 0 0 auto;
}
.bs-tile-grid-page .bs-tile-icon .bs-ico { width: 26px; height: 26px; }

.bs-tile-text  { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bs-tile-title { font-size: var(--bs-fs-md); font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.bs-tile-desc  { font-size: var(--bs-fs-sm); font-weight: 500; color: rgba(255,255,255,0.5); line-height: 1.35; }

.bs-tile-grid-page .bs-tile-action:hover {
    transform: translateY(-2px);
    border-color: var(--bs-stroke-strong);
    box-shadow: var(--bs-elev-2);
}

/* =========================================================================
   ====================  AŞAMA 5 — LİSTE / FORM / DETAY / DURUM  =============
   Empty / hata / yetkisiz ekranları ve ortak durum eylem butonu.
   ========================================================================= */

/* Ortalanmış durum bloğu (404, yetkisiz, yönlendirme) */
.bs-state-block {
    max-width: 460px;
    margin: 24px auto;
}

/* Durum ekranı birincil eylem butonu */
.bs-state-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 18px; padding: 12px 22px; min-height: var(--bs-touch);
    background: linear-gradient(135deg, var(--bs-accent-2) 0%, var(--bs-brand-dark) 100%);
    color: #fff; text-decoration: none; font-weight: 700; font-size: var(--bs-fs-md);
    border-radius: var(--bs-radius); box-shadow: var(--bs-glow-accent);
    border: none; cursor: pointer; font-family: inherit;
    transition: transform var(--bs-tr-fast), box-shadow var(--bs-tr-fast);
}
.bs-state-btn .bs-ico { width: 18px; height: 18px; }
.bs-state-btn:hover  { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(230,57,70,0.5); }
.bs-state-btn:active { transform: translateY(0); }

.bs-state-block .bs-btn-sporcularim-yonetici-git { margin-top: 14px; }
.bs-state-block .bs-sporcularim-yonetici-msg { text-align: center; }

/* Liste filtre alanlarını ferahlat (Sporcular sayfası) */
.bs-filter-section { display: flex; flex-direction: column; gap: 4px; }
.bs-filter-section .bs-switch-label { margin: 4px 0; }

/* Tek başına spinner'ı dikey ortala */
.bs-module-page > .bs-spinner,
.bs-submenu-page > .bs-spinner { margin: 48px auto; }

/* =========================================================================
   =============================  MUHASEBE PANELİ  ===========================
   Segment pill kontrolü + gelir/gider/bekleyen renk kodlu premium kartlar.
   ========================================================================= */

/* Segment "pill" kontrolü */
.bs-muh-segments {
    background: var(--bs-surf-1);
    border: 1px solid var(--bs-stroke);
    border-radius: var(--bs-radius-lg);
    padding: 4px;
    gap: 3px;
    flex-wrap: nowrap;
    margin-bottom: 16px;
}
.bs-muh-segments .bs-segment {
    border: none;
    background: transparent;
    border-radius: var(--bs-radius-sm);
    padding: 9px 4px;
    white-space: nowrap;
    color: rgba(255,255,255,0.6);
    box-shadow: none;
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bs-muh-segments .bs-segment:hover { color: #fff; background: rgba(255,255,255,0.06); }
.bs-muh-segments .bs-segment.active {
    background: linear-gradient(135deg, var(--bs-accent-2) 0%, var(--bs-brand-dark) 100%);
    color: #fff;
    border: none;
    box-shadow: 0 4px 14px rgba(230,57,70,0.4);
}
/* Planlı Ödemeler: Gelir = yeşil, Gider = kırmızı (pasif ipucu + aktif dolgu) */
.bs-muh-segments .bs-segment.bs-seg-gelir { color: rgba(52,211,153,0.80); }
.bs-muh-segments .bs-segment.bs-seg-gider { color: rgba(248,113,113,0.80); }
.bs-muh-segments .bs-segment.bs-seg-gelir.active {
    background: linear-gradient(135deg, #10b981 0%, #047857 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(16,185,129,0.40);
}
.bs-muh-segments .bs-segment.bs-seg-gider.active {
    background: linear-gradient(135deg, #e63946 0%, var(--bs-brand-dark) 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(230,57,70,0.40);
}

/* "Kasa": diğerleri sekme; bu bir gezinme aksiyonu → sağda ayrı, ikonlu pill */
.bs-muh-segments .bs-segment-link {
    flex: 0 0 auto;
    margin-left: 6px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 14px;
    overflow: visible;
    color: var(--bs-accent-2);
    background: rgba(230,57,70,0.12);
    border: 1px solid rgba(230,57,70,0.28);
    border-radius: var(--bs-radius-pill);
}
.bs-muh-segments .bs-segment-link .bs-ico { width: 16px; height: 16px; }
.bs-muh-segments .bs-segment-link:hover {
    color: #fff;
    background: rgba(230,57,70,0.24);
    border-color: rgba(230,57,70,0.45);
}

/* Premium muhasebe kartı */
.bs-muh-card { display: flex; flex-direction: column; gap: 12px; }
.bs-muh-row  { display: flex; align-items: flex-start; gap: 12px; }

.bs-muh-ico {
    width: 42px; height: 42px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
.bs-muh-ico .bs-ico { width: 22px; height: 22px; }
.bs-muh-ico-in   { background: var(--bs-ok-soft);   color: #4ade80; }
.bs-muh-ico-out  { background: var(--bs-bad-soft);  color: #f87171; }
.bs-muh-ico-wait { background: var(--bs-warn-soft); color: #fbbf24; }
.bs-muh-ico-done { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); }

.bs-muh-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.bs-muh-cat  { font-size: var(--bs-fs-md); font-weight: 700; color: #fff; line-height: 1.3; }
.bs-muh-desc { font-size: var(--bs-fs-sm); color: rgba(255,255,255,0.55); line-height: 1.35; word-break: break-word; }

.bs-muh-amount {
    flex: 0 0 auto; align-self: flex-start;
    font-size: var(--bs-fs-sm); font-weight: 700;
    padding: 5px 11px; border-radius: var(--bs-radius-pill);
    white-space: nowrap; border: 1px solid transparent;
}
.bs-muh-amount-in   { color: #4ade80; background: var(--bs-ok-soft);   border-color: rgba(34,197,94,0.30); }
.bs-muh-amount-out  { color: #f87171; background: var(--bs-bad-soft);  border-color: rgba(239,68,68,0.30); }
.bs-muh-amount-wait { color: #fbbf24; background: var(--bs-warn-soft); border-color: rgba(245,158,11,0.30); }
.bs-muh-amount-done { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.08); border-color: var(--bs-stroke); }

.bs-muh-meta {
    display: flex; flex-wrap: wrap; gap: 6px 16px;
    padding-top: 10px; border-top: 1px solid var(--bs-stroke-soft);
}
.bs-muh-meta-item { font-size: var(--bs-fs-sm); color: rgba(255,255,255,0.55); }

.bs-muh-dekont { margin-top: 0; align-self: flex-start; }

/* Talep formu */
.bs-muh-form { display: flex; flex-direction: column; }
.bs-muh-form .bs-label:first-child { margin-top: 0; }
.bs-muh-form .bs-btn-primary { margin-top: 14px; }

/* =========================================================================
   DESIGN SYSTEM v3 — Kurumsal iç sayfalar + AI Studio
   ========================================================================= */

/* İç sayfa düzeni: ortalanmış içerik, alt nav boşluğu */
.bs-module-page,
.bs-submenu-page {
    max-width: var(--bs-content-max);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
    padding-top: max(56px, calc(52px + env(safe-area-inset-top)));
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

/* ---- Kurumsal sayfa başlığı & geri tuşu ------------------------------- */
.bs-page-header {
    display: flex;
    align-items: center;
    gap: var(--bs-sp-3);
    margin: 0 0 var(--bs-sp-5);
    padding: var(--bs-sp-3) var(--bs-sp-4);
    border-radius: var(--bs-radius-lg);
    background: var(--bs-surf-2);
    border: 1px solid var(--bs-stroke);
    box-shadow: var(--bs-elev-1);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

/* Sticky yalnızca PageHeader Sticky="true" ile açılır; varsayılan kaydırılır */
.bs-page-header--sticky {
    position: sticky;
    top: max(8px, env(safe-area-inset-top));
    z-index: 40;
}

.bs-page-header::before {
    content: "";
    width: 3px;
    align-self: stretch;
    min-height: 36px;
    border-radius: var(--bs-radius-pill);
    background: linear-gradient(180deg, var(--bs-accent) 0%, var(--bs-navy-500) 100%);
    flex: 0 0 auto;
    margin-right: 2px;
}

.bs-page-header-text { flex: 1; min-width: 0; }

.bs-page-title {
    margin: 0;
    font-size: var(--bs-fs-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    line-height: 1.25;
}

.bs-page-header-sub {
    margin: 4px 0 0;
    font-size: var(--bs-fs-sm);
    color: rgba(255,255,255,0.58);
    line-height: 1.4;
}

.bs-page-header-actions {
    display: flex;
    align-items: center;
    gap: var(--bs-sp-2);
    flex-shrink: 0;
}

.bs-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    min-width: var(--bs-touch);
    height: var(--bs-touch);
    padding: 0 14px 0 12px;
    border-radius: var(--bs-radius);
    border: 1px solid var(--bs-stroke-strong);
    background: linear-gradient(145deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 100%);
    color: #fff;
    font-size: var(--bs-fs-sm);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: var(--bs-elev-1);
    transition: transform var(--bs-tr-fast), background var(--bs-tr-fast), border-color var(--bs-tr-fast), box-shadow var(--bs-tr-fast);
}

.bs-back-btn:hover {
    background: var(--bs-surf-hover);
    border-color: rgba(230,57,70,0.45);
    box-shadow: 0 4px 16px rgba(230,57,70,0.18);
}

.bs-back-btn:active { transform: scale(0.98); }

.bs-back-btn-icon {
    width: 20px;
    height: 20px;
    color: var(--bs-accent-2);
    flex-shrink: 0;
}

.bs-back-btn-label { line-height: 1; }

/* İç sayfa tipografi & bölümler */
.bs-module-page h1:not(.bs-page-title),
.bs-submenu-page h1:not(.bs-page-title) {
    color: #fff;
    font-size: var(--bs-fs-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-top: 0;
}

.bs-lead,
.bs-page-lead,
.bs-submenu-lead {
    margin: -8px 0 var(--bs-sp-5);
    font-size: var(--bs-fs-md);
    line-height: 1.5;
    color: rgba(255,255,255,0.62);
}

.bs-muted { color: rgba(255,255,255,0.55); font-size: var(--bs-fs-sm); line-height: 1.45; }
.bs-error { color: #fca5a5; font-size: var(--bs-fs-sm); font-weight: 600; }

.bs-form-section,
.bs-filter-section,
.bs-list-section {
    margin-bottom: var(--bs-sp-6);
    padding: var(--bs-sp-4);
    border-radius: var(--bs-radius-lg);
    background: var(--bs-surf-1);
    border: 1px solid var(--bs-stroke-soft);
}

.bs-filter-panel {
    padding: var(--bs-sp-4);
    border-radius: var(--bs-radius-lg);
    background: var(--bs-surf-1);
    border: 1px solid var(--bs-stroke);
    margin-bottom: var(--bs-sp-5);
}

.bs-inline-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bs-sp-4);
    align-items: flex-end;
    margin-bottom: var(--bs-sp-4);
}

.bs-inline-row label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: var(--bs-fs-sm);
    font-weight: 600;
    color: rgba(255,255,255,0.7);
}

.bs-segment-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bs-sp-2);
    padding: 4px;
    border-radius: var(--bs-radius-lg);
    background: var(--bs-surf-1);
    border: 1px solid var(--bs-stroke-soft);
    margin-bottom: var(--bs-sp-5);
}

.bs-segment {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border-radius: var(--bs-radius);
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255,255,255,0.65);
    font-weight: 600;
    font-size: var(--bs-fs-sm);
    cursor: pointer;
    font-family: inherit;
}

.bs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--bs-sp-3);
}

.bs-list-item { border-radius: var(--bs-radius-lg); overflow: hidden; }

.bs-link-btn {
    width: 100%;
    text-align: left;
    padding: var(--bs-sp-4);
    border: none;
    background: transparent;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
}

.bs-empty-state {
    text-align: center;
    padding: var(--bs-sp-8) var(--bs-sp-4);
    color: rgba(255,255,255,0.55);
    font-size: var(--bs-fs-md);
}

/* Alt menü listesi — kurumsal satırlar */
.bs-submenu-list {
    display: flex;
    flex-direction: column;
    gap: var(--bs-sp-3);
}

a.bs-submenu-row,
.bs-submenu-row {
    display: flex;
    align-items: center;
    gap: var(--bs-sp-4);
    padding: var(--bs-sp-4) var(--bs-sp-4);
    border-radius: var(--bs-radius-lg);
    text-decoration: none;
    color: #fff;
}

.bs-submenu-row-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--bs-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(230,57,70,0.12);
    border: 1px solid rgba(230,57,70,0.28);
    flex-shrink: 0;
}

.bs-submenu-row-icon .bs-ico,
.bs-submenu-row-icon svg { width: 22px; height: 22px; color: var(--bs-accent-2); }

.bs-submenu-row-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.bs-submenu-row-title { font-weight: 700; font-size: var(--bs-fs-md); }
.bs-submenu-row-desc  { font-size: var(--bs-fs-sm); color: rgba(255,255,255,0.55); line-height: 1.35; }

.bs-submenu-row-arrow {
    flex-shrink: 0;
    color: rgba(255,255,255,0.35);
}

.bs-submenu-row-arrow .bs-ico { width: 18px; height: 18px; }

/* =========================================================================
   AI STUDIO — ChatGPT / Cursor tarzı sohbet arayüzü
   ========================================================================= */

.bs-app:has(.bs-ai-studio-page) .bs-menu-toggle,
.bs-app--ai-studio .bs-menu-toggle,
body.bs-mode-ai-studio .bs-menu-toggle {
    display: none !important;
    pointer-events: none !important;
}

.bs-app:has(.bs-ai-studio-page) .bs-bottom-nav,
.bs-app--ai-studio .bs-bottom-nav,
body.bs-mode-ai-studio .bs-bottom-nav {
    display: none !important;
}

.bs-app:has(.bs-ai-studio-page) .bs-main,
body.bs-mode-ai-studio .bs-main {
    padding: 0;
    padding-bottom: 0;
    min-height: 100dvh;
}

/* iOS status-bar spacer üst barı kapatmasın */
body.bs-mode-ai-studio {
    --bs-safe-top: max(28px, env(safe-area-inset-top, 0px));
}

body.bs-mode-ai-studio .status-bar-safe-area {
    display: none !important;
    height: 0 !important;
    pointer-events: none !important;
}

.bs-app--ai-studio .bs-ai-studio-page {
    padding-top: 0;
}

.bs-ai-studio-page {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bs-navy-950);
    color: #fff;
    position: relative;
    margin: 0;
    max-width: none;
    padding: 0;
    isolation: isolate;
}

.bs-ai-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 80;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.bs-ai-sidebar {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--bs-navy-900) 0%, var(--bs-navy-950) 100%);
    border-right: 1px solid var(--bs-stroke);
    padding: max(12px, env(safe-area-inset-top)) 12px 16px;
    box-sizing: border-box;
    z-index: 90;
}

.bs-ai-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 16px;
    border-bottom: 1px solid var(--bs-stroke-soft);
    margin-bottom: 12px;
}

.bs-ai-brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bs-accent) 0%, var(--bs-navy-600) 100%);
    box-shadow: var(--bs-glow-accent);
}

.bs-ai-brand-mark .bs-ico { width: 22px; height: 22px; color: #fff; }

.bs-ai-brand-title { font-size: var(--bs-fs-md); font-weight: 700; letter-spacing: -0.02em; }
.bs-ai-brand-sub   { font-size: var(--bs-fs-xs); color: rgba(255,255,255,0.5); margin-top: 2px; }

.bs-ai-new-chat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 12px;
    border-radius: var(--bs-radius);
    border: 1px solid var(--bs-stroke-strong);
    background: rgba(255,255,255,0.08);
    color: #fff;
    font-weight: 600;
    font-size: var(--bs-fs-sm);
    cursor: pointer;
    font-family: inherit;
    transition: background var(--bs-tr-fast), border-color var(--bs-tr-fast);
}

.bs-ai-new-chat:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(230,57,70,0.4);
}

.bs-ai-new-chat .bs-ico { width: 18px; height: 18px; }

.bs-ai-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.bs-ai-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--bs-radius);
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    font-size: var(--bs-fs-sm);
    font-weight: 600;
    transition: background var(--bs-tr-fast), color var(--bs-tr-fast);
}

.bs-ai-nav-link:hover {
    background: var(--bs-surf-hover);
    color: #fff;
}

.bs-ai-nav-link .bs-ico { width: 18px; height: 18px; flex-shrink: 0; }

.bs-ai-history-label {
    font-size: var(--bs-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.38);
    padding: 8px 10px 6px;
}

.bs-ai-history-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
    padding-right: 2px;
}

.bs-ai-history-empty {
    padding: 12px 10px;
    font-size: var(--bs-fs-sm);
    color: rgba(255,255,255,0.45);
    line-height: 1.45;
}

.bs-ai-history-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: var(--bs-radius);
    background: transparent;
    color: rgba(255,255,255,0.82);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--bs-tr-fast);
}

.bs-ai-history-item:hover { background: var(--bs-surf-hover); }

.bs-ai-history-item.active {
    background: rgba(230,57,70,0.14);
    border: 1px solid rgba(230,57,70,0.28);
}

.bs-ai-history-title {
    font-size: var(--bs-fs-sm);
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.bs-ai-history-meta {
    font-size: var(--bs-fs-xs);
    color: rgba(255,255,255,0.42);
}

.bs-ai-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bs-bg-app);
    background-attachment: fixed;
}

.bs-ai-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    padding-top: calc(12px + var(--bs-safe-top, max(28px, env(safe-area-inset-top, 0px))));
    min-height: calc(56px + var(--bs-safe-top, max(28px, env(safe-area-inset-top, 0px))));
    border-bottom: 1px solid var(--bs-stroke);
    background: rgba(10,16,32,0.96);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    flex-shrink: 0;
    position: relative;
    z-index: 500;
    pointer-events: auto;
    box-sizing: border-box;
    touch-action: manipulation;
}

.bs-ai-topbar button {
    pointer-events: auto;
    touch-action: manipulation;
}

.bs-ai-pdf-toast {
    margin: 0 16px 8px;
    padding: 10px 14px;
    border-radius: var(--bs-radius);
    background: rgba(34,197,94,0.15);
    border: 1px solid rgba(34,197,94,0.35);
    color: #86efac;
    font-size: var(--bs-fs-sm);
    font-weight: 600;
    text-align: center;
    flex-shrink: 0;
}

/* ── Uygulama geneli bildirim (toast) katmanı (BsToastHost) ── */
.bs-toast-host {
    position: fixed;
    left: 50%;
    bottom: 80px;
    transform: translateX(-50%);
    z-index: 4000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(92vw, 420px);
    pointer-events: none;
}
.bs-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--bs-radius);
    background: #16161c;
    border: 1px solid rgba(255,255,255,0.12);
    border-left: 3px solid var(--bs-brand);
    color: #fff;
    font-size: var(--bs-fs-sm);
    font-weight: 600;
    box-shadow: 0 8px 28px rgba(0,0,0,0.45);
    animation: bs-toast-in 0.22s ease;
}
.bs-toast-text  { flex: 1; min-width: 0; }
.bs-toast-close {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.6);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
}
.bs-toast-close:hover { color: #fff; background: rgba(255,255,255,0.08); }
.bs-toast-success { border-left-color: var(--bs-ok); }
.bs-toast-error   { border-left-color: var(--bs-bad); }
.bs-toast-warning { border-left-color: var(--bs-warn); }
.bs-toast-info    { border-left-color: var(--bs-brand); }
.bs-toast-celebrate {
    border-left-color: #fbbf24;
    box-shadow: 0 8px 30px rgba(251,191,36,0.30);
    animation: bs-toast-celebrate-in 0.5s cubic-bezier(.18,.89,.32,1.28);
}
@keyframes bs-toast-celebrate-in {
    0%   { opacity: 0; transform: translateY(14px) scale(0.9); }
    60%  { transform: translateY(-3px) scale(1.03); }
    100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .bs-toast-celebrate { animation: none; }
}
@keyframes bs-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .bs-toast { animation: none; }
}

/* ── Komut Paleti (Cmd/Ctrl+K) ── */
.bs-cmdk-overlay {
    position: fixed; inset: 0; z-index: 5000;
    background: rgba(0,0,0,0.55);
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 12vh;
    animation: bs-cmdk-fade 0.12s ease;
}
.bs-cmdk {
    width: min(92vw, 560px); max-height: 62vh;
    display: flex; flex-direction: column;
    background: #16161c;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.6);
    overflow: hidden;
    animation: bs-cmdk-pop 0.14s ease;
}
.bs-cmdk-input {
    border: none; border-bottom: 1px solid rgba(255,255,255,0.10);
    background: transparent; color: #fff; font-size: 1rem;
    padding: 16px 18px; outline: none; font-family: inherit;
}
.bs-cmdk-input::placeholder { color: rgba(255,255,255,0.4); }
.bs-cmdk-list { overflow-y: auto; padding: 6px; }
.bs-cmdk-empty { padding: 18px; text-align: center; color: rgba(255,255,255,0.5); }
.bs-cmdk-item {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 11px 14px; border: none; background: transparent;
    color: #fff; border-radius: 9px; cursor: pointer; font-size: 0.95rem;
    font-family: inherit; text-align: left;
}
.bs-cmdk-item:hover, .bs-cmdk-item.active {
    background: rgba(230,57,70,0.16);
    box-shadow: inset 0 0 0 1px rgba(230,57,70,0.40);
}
.bs-cmdk-item-go { color: var(--bs-brand); font-weight: 700; opacity: 0; }
.bs-cmdk-item.active .bs-cmdk-item-go { opacity: 1; }
.bs-cmdk-hint {
    display: flex; gap: 12px; padding: 8px 14px;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 0.72rem; color: rgba(255,255,255,0.45);
}
.bs-cmdk-hint kbd { background: rgba(255,255,255,0.08); border-radius: 4px; padding: 1px 5px; font-family: inherit; }
@keyframes bs-cmdk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bs-cmdk-pop { from { opacity: 0; transform: translateY(-6px) scale(0.99); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .bs-cmdk-overlay, .bs-cmdk { animation: none; }
}

/* ── AI güven şeridi (güven rozeti + kaynak künyesi) ── */
.bs-ai-trust {
    margin-top: 14px; padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
    font-size: var(--bs-fs-xs); color: rgba(255,255,255,0.55);
}
.bs-ai-trust-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px;
    font-weight: 700; font-size: var(--bs-fs-xs);
    border: 1px solid transparent;
}
.bs-ai-trust-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.bs-ai-trust-high { color: #86efac; background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.35); }
.bs-ai-trust-high .bs-ai-trust-dot { background: var(--bs-ok); }
.bs-ai-trust-med  { color: #fcd34d; background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.35); }
.bs-ai-trust-med .bs-ai-trust-dot  { background: var(--bs-warn); }
.bs-ai-trust-low  { color: #fca5a5; background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.35); }
.bs-ai-trust-low .bs-ai-trust-dot  { background: var(--bs-bad); }
.bs-ai-source-chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bs-ai-source-label { opacity: 0.7; }
.bs-ai-source-chip {
    padding: 2px 8px; border-radius: 6px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10);
    font-size: var(--bs-fs-xs); color: rgba(255,255,255,0.75);
}

/* ── AI bağlamsal takip soruları ── */
.bs-ai-followups { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.bs-ai-followups-label { font-size: var(--bs-fs-xs); color: rgba(255,255,255,0.5); }
.bs-ai-followup-chip {
    padding: 6px 12px; border-radius: 999px;
    background: rgba(230,57,70,0.10); border: 1px solid rgba(230,57,70,0.30);
    color: #fff; font-size: var(--bs-fs-xs); font-weight: 600; cursor: pointer; font-family: inherit;
    transition: background 0.12s ease;
}
.bs-ai-followup-chip:hover { background: rgba(230,57,70,0.22); }

.bs-ai-topbar-title { flex: 1; min-width: 0; }

.bs-ai-topbar-name {
    display: block;
    font-size: var(--bs-fs-md);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bs-ai-topbar-sub {
    display: block;
    font-size: var(--bs-fs-xs);
    color: rgba(255,255,255,0.45);
    margin-top: 2px;
}

.bs-ai-icon-btn,
.bs-ai-back-home {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: var(--bs-radius);
    border: 1px solid var(--bs-stroke);
    background: rgba(255,255,255,0.06);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
}

.bs-ai-icon-btn .bs-ico,
.bs-ai-back-home .bs-back-btn-icon { width: 20px; height: 20px; }

.bs-ai-icon-btn:hover,
.bs-ai-back-home:hover { background: var(--bs-surf-hover); border-color: var(--bs-stroke-strong); }

.bs-ai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bs-ai-welcome {
    max-width: 560px;
    margin: auto;
    text-align: center;
    padding: 32px 16px;
}

.bs-ai-welcome-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(230,57,70,0.25) 0%, rgba(30,58,100,0.5) 100%);
    border: 1px solid var(--bs-stroke);
}

.bs-ai-welcome-icon .bs-ico { width: 32px; height: 32px; color: var(--bs-accent-2); }

.bs-ai-welcome h2 {
    margin: 0 0 10px;
    font-size: var(--bs-fs-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.bs-ai-welcome p {
    margin: 0 0 20px;
    color: rgba(255,255,255,0.58);
    font-size: var(--bs-fs-md);
    line-height: 1.5;
}

.bs-ai-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.bs-ai-suggestion {
    padding: 10px 14px;
    border-radius: var(--bs-radius-pill);
    border: 1px solid var(--bs-stroke);
    background: var(--bs-surf-1);
    color: rgba(255,255,255,0.85);
    font-size: var(--bs-fs-sm);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--bs-tr-fast), border-color var(--bs-tr-fast);
}

.bs-ai-suggestion:hover {
    background: var(--bs-surf-2);
    border-color: rgba(230,57,70,0.35);
}

.bs-ai-msg-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 720px;
    width: 100%;
}

.bs-ai-msg-row.user {
    margin-left: auto;
    flex-direction: row-reverse;
}

.bs-ai-avatar {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bs-ai-avatar .bs-ico { width: 18px; height: 18px; }

.bs-ai-avatar-bot {
    background: linear-gradient(135deg, var(--bs-navy-600) 0%, var(--bs-navy-800) 100%);
    border: 1px solid var(--bs-stroke);
    color: var(--bs-accent-2);
}

.bs-ai-avatar-user {
    background: rgba(230,57,70,0.2);
    border: 1px solid rgba(230,57,70,0.35);
    color: #fff;
}

.bs-ai-bubble {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    border-radius: var(--bs-radius-lg);
    border: 1px solid var(--bs-stroke);
    background: var(--bs-surf-2);
}

.bs-ai-msg-row.user .bs-ai-bubble {
    background: rgba(230,57,70,0.12);
    border-color: rgba(230,57,70,0.28);
}

.bs-ai-bubble-role {
    font-size: var(--bs-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.42);
    margin-bottom: 6px;
}

.bs-ai-bubble-text {
    margin: 0;
    font-size: var(--bs-fs-md);
    line-height: 1.55;
    color: rgba(255,255,255,0.92);
    white-space: pre-wrap;
    word-break: break-word;
}

.bs-ai-bubble-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    font-size: var(--bs-fs-xs);
    color: rgba(255,255,255,0.4);
}

.bs-ai-bubble-action {
    border: none;
    background: transparent;
    color: var(--bs-accent-2);
    font-size: var(--bs-fs-xs);
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
}

.bs-ai-bubble-typing {
    display: flex;
    gap: 6px;
    padding: 16px 18px;
    min-width: 64px;
}

.bs-ai-typing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.45);
    animation: bs-ai-pulse 1.2s ease-in-out infinite;
}

.bs-ai-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.bs-ai-typing-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes bs-ai-pulse {
    0%, 80%, 100% { opacity: 0.35; transform: scale(0.85); }
    40% { opacity: 1; transform: scale(1); }
}

.bs-ai-composer {
    flex-shrink: 0;
    padding: 12px 16px max(16px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--bs-stroke);
    background: rgba(10,16,32,0.92);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.bs-ai-composer-inner {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    max-width: 720px;
    margin: 0 auto;
    padding: 8px 10px 8px 14px;
    border-radius: var(--bs-radius-xl);
    border: 1px solid var(--bs-stroke-strong);
    background: var(--bs-surf-1);
    box-shadow: var(--bs-elev-2);
}

.bs-ai-input {
    flex: 1;
    min-height: 24px;
    max-height: 140px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: var(--bs-fs-md);
    font-family: inherit;
    resize: none;
    padding: 8px 0;
    outline: none;
}

.bs-ai-input::placeholder { color: rgba(255,255,255,0.38); }

.bs-ai-send {
    width: 40px;
    height: 40px;
    border-radius: var(--bs-radius);
    border: none;
    background: linear-gradient(135deg, var(--bs-accent) 0%, var(--bs-brand-dark) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: var(--bs-glow-accent);
    transition: transform var(--bs-tr-fast), opacity var(--bs-tr-fast);
}

.bs-ai-send:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

.bs-ai-send:not(:disabled):hover { transform: scale(1.04); }

.bs-ai-send .bs-ico { width: 18px; height: 18px; }

.bs-ai-composer-hint {
    max-width: 720px;
    margin: 8px auto 0;
    font-size: var(--bs-fs-xs);
    color: rgba(255,255,255,0.35);
    text-align: center;
    line-height: 1.4;
}

/* Mobil: sidebar overlay */
@media (max-width: 860px) {
    .bs-ai-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        transform: translateX(-100%);
        transition: transform var(--bs-tr);
        box-shadow: var(--bs-shadow-lg);
    }

    .bs-ai-sidebar.open { transform: translateX(0); }

    .bs-ai-sidebar-backdrop { display: block; }

    .bs-ai-sidebar:not(.open) + .bs-ai-sidebar-backdrop { display: none; }

    .bs-ai-sidebar.open ~ .bs-ai-sidebar-backdrop,
    .bs-ai-studio-page:has(.bs-ai-sidebar.open) .bs-ai-sidebar-backdrop {
        display: block;
    }
}

@media (min-width: 861px) {
    .bs-ai-icon-btn[aria-label="Sohbet listesi"] { display: none; }
    .bs-ai-sidebar-backdrop { display: none !important; }
}

/* Geniş ekran: mesajlar ortada */
@media (min-width: 900px) {
    .bs-ai-msg-row { margin-left: auto; margin-right: auto; }
    .bs-ai-msg-row.user { margin-left: auto; margin-right: 0; max-width: 85%; }
    .bs-ai-msg-row.assistant { margin-left: 0; margin-right: auto; }
}

/* Eski chat sınıfları (ai-raporlar vb.) uyum */
.bs-chat-page .bs-page-header { margin-bottom: var(--bs-sp-4); }

/* AI yapılandırılmış yanıt bileşenleri */
.bs-ai-structured { margin-top: var(--bs-sp-3); display: flex; flex-direction: column; gap: var(--bs-sp-3); }
.bs-ai-structured-title { font-size: 1.05rem; font-weight: 600; margin: 0; color: var(--bs-text); }
.bs-ai-structured-lead { margin: 0; color: var(--bs-text-muted); line-height: 1.45; }
.bs-ai-summary-list { margin: 0; padding-left: 1.1rem; color: var(--bs-text); }
.bs-ai-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--bs-sp-2); }
.bs-ai-kpi { background: var(--bs-surf-2); border-radius: var(--bs-radius); padding: var(--bs-sp-3); border-left: 3px solid var(--bs-border); }
.bs-ai-kpi.status-good { border-left-color: #2e7d4e; }
.bs-ai-kpi.status-warning { border-left-color: #c9a227; }
.bs-ai-kpi.status-danger { border-left-color: #c0392b; }
.bs-ai-kpi-label { font-size: 0.75rem; color: var(--bs-text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.bs-ai-kpi-value { font-size: 1.25rem; font-weight: 700; margin-top: 2px; }
.bs-ai-kpi-unit { font-size: 0.85rem; font-weight: 500; opacity: 0.8; }
.bs-ai-kpi-hint { font-size: 0.72rem; color: var(--bs-text-muted); margin-top: 4px; }
.bs-ai-athlete-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--bs-sp-2); }
.bs-ai-athlete-card { display: flex; gap: var(--bs-sp-3); background: var(--bs-surf-2); border-radius: var(--bs-radius); padding: var(--bs-sp-3); border: 1px solid var(--bs-border); }
.bs-ai-athlete-card.risk-high { border-color: rgba(192, 57, 43, 0.35); }
.bs-ai-athlete-card.risk-medium { border-color: rgba(201, 162, 39, 0.35); }
.bs-ai-athlete-photo img, .bs-ai-athlete-placeholder { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.bs-ai-athlete-placeholder { display: flex; align-items: center; justify-content: center; background: var(--bs-surf-3); color: var(--bs-text-muted); font-weight: 600; font-size: 0.9rem; }
.bs-ai-athlete-name { font-weight: 600; font-size: 0.95rem; }
.bs-ai-athlete-meta { font-size: 0.78rem; color: var(--bs-text-muted); }
.bs-ai-athlete-stats { display: flex; gap: var(--bs-sp-2); font-size: 0.78rem; margin-top: 4px; flex-wrap: wrap; }
.bs-ai-risk-tag { padding: 1px 6px; border-radius: 4px; background: var(--bs-surf-3); }
.bs-ai-athlete-note { font-size: 0.75rem; margin: 4px 0 0; color: var(--bs-text-muted); }
.bs-ai-chart-block, .bs-ai-table-block { background: var(--bs-surf-2); border-radius: var(--bs-radius); padding: var(--bs-sp-3); }
.bs-ai-block-title { margin: 0 0 var(--bs-sp-2); font-size: 0.95rem; }
.bs-ai-block-desc { margin: 0 0 var(--bs-sp-2); font-size: 0.8rem; color: var(--bs-text-muted); }
.bs-ai-bar-row { display: grid; grid-template-columns: minmax(72px, 28%) 1fr auto; gap: 8px; align-items: center; margin-bottom: 6px; font-size: 0.8rem; }
.bs-ai-bar-track { height: 8px; background: var(--bs-surf-3); border-radius: 4px; overflow: hidden; }
.bs-ai-bar-fill { height: 100%; background: var(--bs-blue); border-radius: 4px; min-width: 2px; }
.bs-ai-table-wrap { overflow-x: auto; }
.bs-ai-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.bs-ai-table th, .bs-ai-table td { padding: 6px 8px; border-bottom: 1px solid var(--bs-border); text-align: left; }
.bs-ai-risk-item, .bs-ai-rec-item { background: var(--bs-surf-2); border-radius: var(--bs-radius); padding: var(--bs-sp-2) var(--bs-sp-3); margin-bottom: var(--bs-sp-2); font-size: 0.85rem; }
.bs-ai-risk-item.level-high { border-left: 3px solid #c0392b; }
.bs-ai-risk-item.level-medium { border-left: 3px solid #c9a227; }
.bs-ai-missing-block { background: rgba(201, 162, 39, 0.12); border-radius: var(--bs-radius); padding: var(--bs-sp-3); font-size: 0.82rem; }
.bs-ai-missing-title { font-weight: 600; margin-bottom: 6px; }
.bs-ai-warnings .bs-ai-warning-line { font-size: 0.8rem; color: var(--bs-text-muted); margin-top: 4px; }
.bs-ai-source-info { font-size: 0.72rem; color: var(--bs-text-muted); }
.bs-ai-presentation { margin-top: var(--bs-sp-2); border: 1px solid var(--bs-border); border-radius: var(--bs-radius); overflow: hidden; }
.bs-ai-pres-header { display: flex; justify-content: space-between; padding: var(--bs-sp-2) var(--bs-sp-3); background: var(--bs-surf-3); font-size: 0.8rem; font-weight: 600; }
.bs-ai-slide { padding: var(--bs-sp-4); min-height: 120px; }
.bs-ai-slide-sub { color: var(--bs-text-muted); font-size: 0.85rem; }
.bs-ai-pres-nav { display: flex; gap: var(--bs-sp-2); padding: var(--bs-sp-2); border-top: 1px solid var(--bs-border); }
.bs-ai-pres-btn { flex: 1; padding: 8px; border: 1px solid var(--bs-border); border-radius: var(--bs-radius); background: var(--bs-surf-2); }
.bs-ai-bubble .bs-ai-structured { max-width: 100%; }

.bs-ai-sunum-download { margin-top: var(--bs-sp-3); }
.bs-ai-sunum-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-radius: var(--bs-radius);
    background: linear-gradient(135deg, #1B4F72 0%, #2980B9 100%);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(27, 79, 114, 0.25);
}
.bs-ai-sunum-download-btn:disabled {
    opacity: 0.65;
    cursor: wait;
}
.bs-ai-sunum-download-btn .bs-ico { width: 1.1rem; height: 1.1rem; }

/* AI Kulüp Raporu */
.bs-club-report-page .bs-club-report-hero {
    padding: 16px;
    margin: 0 16px 12px;
    border-radius: var(--bs-radius);
    background: var(--bs-surface-card);
    border: 1px solid var(--bs-border);
}
.bs-club-report-lead {
    margin: 0 0 14px;
    font-size: var(--bs-fs-sm);
    color: var(--bs-text-muted);
    line-height: 1.45;
}
.bs-club-report-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: var(--bs-fs-sm);
    color: var(--bs-text-muted);
}
.bs-club-report-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border: none;
    border-radius: var(--bs-radius);
    background: linear-gradient(135deg, var(--bs-brand) 0%, var(--bs-brand-dark) 100%);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
.bs-club-report-btn.secondary {
    background: linear-gradient(135deg, #1B4F72 0%, #2980B9 100%);
}
.bs-club-report-btn:disabled { opacity: 0.6; cursor: wait; }
.bs-club-report-progress {
    margin-top: 14px;
    height: 36px;
    border-radius: 8px;
    background: var(--bs-surface-card2);
    overflow: hidden;
    position: relative;
}
.bs-club-report-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--bs-brand), #2980B9);
    transition: width 0.35s ease;
}
.bs-club-report-progress-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--bs-fs-xs);
    font-weight: 600;
}
.bs-club-report-error {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(230,57,70,0.15);
    color: #ffb4b4;
    font-size: var(--bs-fs-sm);
}
.bs-club-report-status {
    margin-top: 12px;
    font-size: var(--bs-fs-sm);
    color: var(--bs-success);
}
.bs-club-report-preview {
    padding: 0 16px 24px;
}
.bs-club-report-preview-title {
    font-size: var(--bs-fs-md);
    margin: 0 0 12px;
}
.bs-club-report-actions { margin-top: 16px; }

/* =========================================================================
   =====================  DESIGN SYSTEM v3 — "SAHA"  =======================
   Sıfırdan koyu-premium dil (Mood A: derin lacivert / siyah / kırmızı),
   sektör araştırmasıyla kuruldu (bkz. DESIGN.md). Bu blok dosyanın EN
   SONUNDA olduğu için eşit özgüllükteki v1/v2 kurallarını cascade ile
   güvenle "override" eder. HİÇBİR bs- sınıfı silinmez; yalnız görünüm yenilenir.
   İlkeler: derinlik yüzey tonuyla (cam değil) · kırmızı = aksiyon ·
   kırık-beyaz metin · tek yeşil/mavi/amber durum · tabular sayı.
   ========================================================================= */

/* (v3 :root token bloğu dosya başındaki TEK otoriter :root'a taşındı — bkz. design/token-audit.md) */

/* (v3 kart katı-gölge/cam-kapama kuralları v2 "KART YÜZEY SİSTEMİ" ana bloğuna taşındı) */

/* Modallar: kırmızı-tonlu eski camdan lacivert premium yüzeye */
.bs-modal, .bs-modal-panel {
    background: var(--bs-surf-3);
    border-color: var(--bs-stroke);
    box-shadow: var(--bs-shadow-lg), var(--bs-edge);
}

/* Cam YALNIZCA üst-üste gelen katmanlarda kalır */
.bs-bottom-nav { background: rgba(10,17,32,0.82); }
.bs-drawer-inner { background: linear-gradient(168deg,#0e1a2e 0%,#0b1322 55%,#070b14 100%); }

/* Durum renkleri birleştirildi (eski başıboş #059669 / #2196F3 temizliği) */
.bs-btn-success, .bs-btn-active,
.bs-btn-yoklama-katildi.bs-active,
.bs-filter-btn.active {
    background: var(--bs-ok) !important; border-color: var(--bs-ok) !important;
    color: #04150c !important; box-shadow: 0 2px 10px rgba(34,197,94,0.30);
}
.bs-segment.active {
    background: var(--bs-brand); border-color: var(--bs-brand); color: #fff;
    box-shadow: 0 2px 10px rgba(230,57,70,0.30);
}
.bs-btn-yoklama-izinli.bs-active  { background: var(--bs-warn); border-color: var(--bs-warn); color: #1c1402; }
.bs-btn-yoklama-katilmadi.bs-active { background: var(--bs-bad); border-color: var(--bs-bad); color: #fff; }

/* Bölüm başlığı: kırmızı "forma şeridi" tab + kırık-beyaz metin (renk≠hiyerarşi) */
.bs-section-title { color: var(--bs-text); position: relative; padding-left: 13px; }
.bs-section-title::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 16px; border-radius: 3px; background: var(--bs-brand);
}
.bs-module-page h1 { color: var(--bs-text); }

/* Login: lacivert hero + premium kart (markup ayrıca güncellenir) */
.bs-login-page { background: var(--bs-bg-auth); }
.bs-login-card {
    background: rgba(15,26,46,0.80);
    border-color: var(--bs-stroke);
    box-shadow: var(--bs-shadow-md), inset 0 1px 0 rgba(255,255,255,0.05);
}
.bs-login-logo, .bs-login-mono {
    background: linear-gradient(150deg,#1d3458,#0e1a2e);
    border: 1px solid var(--bs-red-line, rgba(230,57,70,0.30));
    box-shadow: var(--bs-glow-accent), var(--bs-edge);
}
/* Login arka plan deseni: mor kaldırıldı → lacivert + sönük kırmızı kor */
.bs-login-bg-pattern {
    opacity: 1;
    background-image:
        radial-gradient(circle at 16% 12%, rgba(230,57,70,0.16) 0%, transparent 42%),
        radial-gradient(circle at 84% 78%, rgba(30,58,100,0.30) 0%, transparent 45%);
}
/* Login şifre-göster ikonu boyutu */
.bs-password-toggle .bs-ico { width: 1.25rem; height: 1.25rem; }

/* ── Ana Sayfa "Sana özel" aksiyon kartı ── */
.bs-needs-date { margin-left: auto; font-size: var(--bs-fs-xs); color: var(--bs-text-light); }
.bs-need-row {
    display: flex; align-items: center; gap: 13px;
    padding: 14px 16px; border-top: 1px solid var(--bs-stroke-soft);
    text-decoration: none; color: var(--bs-text); cursor: pointer;
    transition: background var(--bs-tr-fast);
}
.bs-need-row:hover { background: var(--bs-surf-2); }
.bs-need-ico {
    width: 38px; height: 38px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
}
.bs-need-ico .bs-ico { width: 1.15rem; height: 1.15rem; }
.bs-need-ico-red  { background: var(--bs-brand-light); color: #ff8a93; }
.bs-need-ico-blue { background: var(--bs-blue-soft);    color: #7fb0f5; }
.bs-need-ico-ok   { background: var(--bs-ok-soft);      color: #4ade80; }
.bs-need-tx { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bs-need-t  { font-weight: 700; font-size: var(--bs-fs-md); color: var(--bs-text); }
.bs-need-s  { font-size: var(--bs-fs-sm); color: var(--bs-text-muted); }
.bs-need-badge {
    min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--bs-radius-pill);
    background: var(--bs-brand); color: #fff; font-size: var(--bs-fs-xs); font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.bs-need-chev { color: var(--bs-text-light); display: flex; }
.bs-need-chev .bs-ico { width: 1.1rem; height: 1.1rem; }
.bs-need-empty { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-top: 1px solid var(--bs-stroke-soft); }

/* ── Sporcu kartı: avatar fallback + meta chip'leri ── */
.bs-sporcularim-thumb-fallback {
    display: flex; align-items: center; justify-content: center;
    background: var(--bs-surf-3); color: #bcd0ee;
    font-weight: 700; font-size: 0.95rem; flex-shrink: 0;
}
.bs-sporcularim-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; }
.bs-tag {
    display: inline-flex; align-items: center; padding: 3px 10px;
    border-radius: var(--bs-radius-pill); background: rgba(255,255,255,0.05);
    border: 1px solid var(--bs-stroke); font-size: var(--bs-fs-xs);
    font-weight: 600; color: var(--bs-text-muted); line-height: 1.5;
}
.bs-tag-tur { background: var(--bs-brand-light); border-color: rgba(230,57,70,0.3); color: #ff9aa2; }

/* ── Yoklama: 3-durum bağlı "segmented" kontrol (CSS-only) ── */
.bs-yoklama-durum-btns {
    gap: 4px; padding: 4px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--bs-stroke);
    border-radius: var(--bs-radius);
}
.bs-btn-yoklama-durum {
    border: none; background: transparent; border-radius: 10px;
    color: var(--bs-text-muted); min-height: 38px;
}
.bs-btn-yoklama-durum:not(:disabled):hover { background: rgba(255,255,255,0.05); color: var(--bs-text); }

/* ── Muhasebe: tabular tutarlar + tek-sıra segment ── */
.bs-muh-amount { font-variant-numeric: tabular-nums; }
.bs-muh-segments { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.bs-muh-segments::-webkit-scrollbar { display: none; }
.bs-muh-segments .bs-segment { white-space: nowrap; flex-shrink: 0; }

/* ── Muhasebe: bakiye KPI kartı (gelir/gider toplamından) ── */
.bs-muh-balance {
    background: linear-gradient(160deg, #13233c, #0e1a2e);
    border: 1px solid var(--bs-stroke); border-radius: var(--bs-radius-lg);
    box-shadow: var(--bs-elev-1), var(--bs-edge);
    padding: 18px; margin-bottom: 14px;
}
.bs-muh-balance-label { display: block; font-size: var(--bs-fs-sm); color: var(--bs-text-muted); font-weight: 600; }
.bs-muh-balance-value { display: block; margin-top: 2px; font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bs-muh-balance-split { display: flex; gap: 10px; margin-top: 14px; }
.bs-muh-split-item { flex: 1; background: rgba(255,255,255,0.03); border: 1px solid var(--bs-stroke); border-radius: var(--bs-radius); padding: 10px 12px; }
.bs-muh-split-l { display: block; font-size: var(--bs-fs-xs); color: var(--bs-text-muted); }
.bs-muh-split-n { display: block; margin-top: 2px; font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.bs-muh-split-in  { color: #4ade80; }
.bs-muh-split-out { color: #f87171; }

/* ── Ortak sayfa kabı (.bs-page tanımsızdı; 7 yeni sayfa kullanıyor) ── */
/* Alt-nav boşluğunu .bs-main zaten verir; burada hamburger için üst boşluk,
   başlık kenar hizası ve geniş ekran içerik sınırı sağlanır. */
.bs-page {
    min-height: 100vh;
    padding-top: max(56px, calc(env(safe-area-inset-top) + 12px));
    padding-bottom: 24px;
    color: var(--bs-text);
}
.bs-page > .bs-page-header { padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 768px) {
    .bs-page > * { max-width: var(--bs-content-max); margin-left: auto; margin-right: auto; }
}

/* ── Avatar fallback: emoji 👤 → SVG (metin gizlenir, ikon zemin olarak gelir) ── */
.bs-sporcu-thumb-fallback {
    font-size: 0 !important; color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bcd0ee' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5.5 20a6.5 6.5 0 0 1 13 0'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 58%;
}

/* =========================================================================
   ===================  DESIGN SYSTEM v4 — "VOLT RED"  =====================
   Kullanici yonu: Konsept B "Volt" enerjisi + KURUMSAL kirmizi/beyaz.
   Koyu notr komur + NEON kirmizi + beyaz; kalin/sportif/uppercase + neon
   parlama. EN SONDA oldugu icin Saha (v3) gorunumunu cascade ile override
   eder; hicbir bs- sinifi silinmez. Durum renkleri (yesil/amber) islevsel
   zorunluluk olarak korunur.
   ========================================================================= */
/* (v4 :root token bloğu dosya başındaki TEK otoriter :root'a taşındı — bkz. design/token-audit.md) */

/* Saha'nin lacivert-literal yuzeyleri -> komur/kirmizi */
.bs-bottom-nav  { background: rgba(12,12,16,0.88); }
.bs-drawer-inner{ background: linear-gradient(168deg, #16161C 0%, #101014 60%, #08080A 100%); }
.bs-modal, .bs-modal-panel { background: var(--bs-surf-3); }
.bs-login-card  { background: rgba(22,22,28,0.84); }
.bs-muh-balance { background: linear-gradient(160deg, #241016, #140E12); border-color: var(--bs-brand-light); }

/* Monogram/logo -> dolu neon kirmizi + parlama */
.bs-login-logo, .bs-appbar-logo, .bs-brand-mark {
    background: linear-gradient(150deg, #FF2E43, #D81B2E);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: var(--bs-glow-accent), var(--bs-edge);
    color: #fff;
}

/* VOLT karakteri — kalin, uppercase, neon kirmizi parlama.
   TEK OTORİTER .bs-btn-primary taban bloğu: v1 (ölçü/kutu) + v2 (yarıçap/parlama)
   + v3/v4 (zemin) katmanlarının cascade KAZANANLARI (bkz. design/token-audit.md §3). */
.bs-btn-primary {
    width: 100%; padding: 14px; margin-top: 8px;
    background: linear-gradient(135deg, #FF2E43, #D81B2E);
    color: #fff; border: none; border-radius: var(--bs-radius);
    font-size: 1rem; font-weight: 800; font-family: inherit;
    text-transform: uppercase; letter-spacing: 0.04em;
    cursor: pointer; box-shadow: var(--bs-glow-accent);
}
.bs-btn-primary:hover:not(:disabled) { box-shadow: 0 0 32px rgba(255,46,67,0.6); transform: translateY(-1px); }
.bs-bnav-fab { background: linear-gradient(135deg, #FF2E43, #D81B2E); box-shadow: 0 0 26px rgba(255,46,67,0.55); }
.bs-bnav-item.active { color: var(--bs-brand); }
.bs-bnav-item.active .bs-bnav-icon { filter: drop-shadow(0 0 8px rgba(255,46,67,0.6)); }

/* Sportif uppercase basliklar */
.bs-section-title { text-transform: uppercase; letter-spacing: 0.09em; font-weight: 800; }
.bs-cat-header > span, .bs-club-summary-title {
    text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; font-weight: 800; color: var(--bs-text-muted);
}
.bs-nav-section { text-transform: uppercase; letter-spacing: 0.12em; }

/* Iri sayilar + neon rozet */
.bs-stat-chip-val, .bs-need-t, .bs-muh-balance-value { font-weight: 900; }
.bs-need-badge, .bs-notif-badge, .bs-chip-badge { background: var(--bs-brand); box-shadow: 0 0 14px rgba(255,46,67,0.5); }

/* Drawer aktif ogesi — kirmizi vurgu */
.bs-nav-item.active { background: var(--bs-brand-light); border-color: var(--bs-brand); color: #fff; }

/* ── v4 Volt Red — Home/Login DUZENINI konsepte tasi ── */

/* Appbar: buyuk selam (rol cipi yerine) */
.bs-appbar-greet { display: flex; flex-direction: column; min-width: 0; }
.bs-appbar-greet-brand { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--bs-text-light); }
.bs-appbar-greet-hi { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1.12; color: #fff; }

/* KULUP OZETI: kucuk ikon-cipi yerine temiz iri KPI izgarasi (tum statlar korunur) */
.bs-club-summary .bs-stats-scroll {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    padding: 12px 14px 16px; overflow: visible;
}
.bs-club-summary .bs-stat-chip {
    align-items: flex-start; text-align: left; gap: 6px; min-width: 0; padding: 14px 15px;
    background: var(--bs-surf-2); border: 1px solid var(--bs-stroke); border-right: 1px solid var(--bs-stroke);
    border-radius: 14px; box-shadow: var(--bs-edge); scroll-snap-align: none;
}
.bs-club-summary .bs-stat-chip-icon { display: none; }
.bs-club-summary .bs-stat-chip-val { font-size: 1.9rem; font-weight: 900; line-height: 1; }
.bs-club-summary .bs-stat-chip-lbl {
    text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.6rem; font-weight: 800;
    color: var(--bs-text-light); max-width: none; text-align: left;
}

/* LOGIN: kartsiz, kalin baslik duzeni (konsept gibi) */
.bs-login-scroll { max-width: 460px; }
.bs-login-hero { text-align: left; margin-bottom: 22px; }
.bs-login-logo { margin: 0 0 18px; }
.bs-login-slogan { display: none; }
.bs-login-brand { font-size: 2.1rem; font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.04; }
.bs-login-tagline { text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; font-size: 0.72rem; margin-top: 8px; }
.bs-login-card { background: transparent; border: none; box-shadow: none; padding: 0; }
.bs-login-card h2, .bs-login-hint, .bs-login-api-hint { display: none; }
.bs-field-label { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.66rem; font-weight: 800; color: var(--bs-text-muted); }

/* ── Sade KPI: 4 hero (bugün) + 3 kompakt (toplam) satır ── */
.bs-club-summary .bs-stats-mini {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 14px 16px;
}
.bs-club-summary .bs-stats-mini .bs-stat-chip {
    flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 10px 12px;
    background: rgba(255,255,255,0.03); border: 1px solid var(--bs-stroke); border-radius: 12px;
}
.bs-club-summary .bs-stats-mini .bs-stat-chip-val { font-size: 1.15rem; font-weight: 800; }
.bs-club-summary .bs-stats-mini .bs-stat-chip-lbl { font-size: 0.55rem; }

/* =========================================================================
   ===============  v2 HOME — Hero + Ayrı Bölümler + Tile2  ================
   Referans harmanı (koşu-kulübü hero + kripto/fintech). Kurumsal kırmızı.
   ========================================================================= */
.bs-home { background: var(--bs-surface); }

/* ── Hero ── */
.bs-hero {
    position: relative; overflow: hidden;
    padding: max(22px, calc(env(safe-area-inset-top) + 14px)) 20px 22px;
    background: radial-gradient(120% 120% at 50% -12%, #5A0E1E 0%, #2A0912 40%, var(--bs-surface) 82%);
}
.bs-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(60% 42% at 50% 0%, rgba(255,46,67,0.22), transparent 70%); }
.bs-hero-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; }
.bs-hero-brand { display: flex; align-items: center; gap: 11px; }
.bs-hero-logo { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 0.85rem; color: #fff; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.28); }
.bs-hero-brand-tx { display: flex; flex-direction: column; }
.bs-hero-kicker { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.7); }
.bs-hero-name { font-size: 1.05rem; font-weight: 900; line-height: 1.1; color: #fff; }
.bs-hero-sub { position: relative; z-index: 1; margin: 16px 0 0; text-align: center; font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.82); }
.bs-hero-stats { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-around; margin-top: 14px; }
.bs-hstat { flex: 1; text-align: center; position: relative; }
.bs-hstat + .bs-hstat::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: rgba(255,255,255,0.14); }
.bs-hstat-v { display: block; font-size: 1.85rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; }
.bs-hstat-l { display: block; margin-top: 5px; font-size: 0.56rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: rgba(255,255,255,0.6); }

/* ── Ayrı bölümler (her birim kendi başlığı + renk aksanı) ── */
.bs-sec { margin: 18px 16px 0; }
.bs-sec-h { display: flex; align-items: center; gap: 10px; margin: 0 2px 10px; }
.bs-sec-chip { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.bs-sec-chip .bs-ico { width: 1rem; height: 1rem; }
.bs-sec-ttl { font-size: 0.72rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; }
.bs-sec-ln { flex: 1; height: 1px; background: var(--bs-stroke); }
.bs-sec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 360px) { .bs-sec-grid { grid-template-columns: 1fr; } }
@media (min-width: 768px) { .bs-sec { max-width: var(--bs-content-max); margin-left: auto; margin-right: auto; } .bs-sec-grid { grid-template-columns: repeat(3, 1fr); } }

.bs-sec-rose  .bs-sec-chip { background: rgba(251,113,133,0.16); color: #fb7185; } .bs-sec-rose  .bs-sec-ttl { color: #fb7185; }
.bs-sec-amber .bs-sec-chip { background: rgba(251,191,36,0.16);  color: #fbbf24; } .bs-sec-amber .bs-sec-ttl { color: #fbbf24; }
.bs-sec-green .bs-sec-chip { background: rgba(52,211,153,0.16);  color: #34d399; } .bs-sec-green .bs-sec-ttl { color: #34d399; }
.bs-sec-red   .bs-sec-chip { background: var(--bs-brand-light);  color: #ff8a93; } .bs-sec-red   .bs-sec-ttl { color: #ff8a93; }

/* ── Yeni kutucuk (tile2): sol renk aksanı + ikon chip + gradient kart ── */
.bs-tile2 {
    display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px;
    background: linear-gradient(160deg, var(--bs-surf-2), var(--bs-surf-1));
    border: 1px solid var(--bs-stroke); box-shadow: var(--bs-edge);
    position: relative; overflow: hidden; text-decoration: none; color: var(--bs-text);
    min-height: var(--bs-touch);
    transition: transform 0.14s var(--bs-ease), box-shadow 0.14s var(--bs-ease), border-color 0.14s var(--bs-ease);
}
.bs-tile2::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tile-ac, var(--bs-brand)); }
.bs-tile2:hover { transform: translateY(-2px); box-shadow: var(--bs-elev-2); border-color: var(--bs-stroke-strong); }
.bs-tile2-ic { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    background: rgba(255,255,255,0.05); color: var(--tile-ac, var(--bs-brand)); }
.bs-tile2-ic .bs-ico { width: 1.15rem; height: 1.15rem; }
.bs-tile2-l { font-size: 0.82rem; font-weight: 700; line-height: 1.2; }
.bs-tile2-rose  { --tile-ac: #fb7185; } .bs-tile2-amber { --tile-ac: #fbbf24; }
.bs-tile2-green { --tile-ac: #34d399; } .bs-tile2-red   { --tile-ac: var(--bs-brand); }

/* ── Muhasebe: aylık net trend grafiği (chart) ── */
.bs-muh-chart { margin-bottom: 14px; padding: 16px; border-radius: var(--bs-radius-lg); background: var(--bs-surf-1); border: 1px solid var(--bs-stroke); box-shadow: var(--bs-edge); }
.bs-muh-chart-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.bs-muh-chart-t { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bs-text-muted); }
.bs-muh-chart-net { font-size: 0.82rem; font-weight: 800; }
.bs-muh-chart-svg { display: block; width: 100%; height: 120px; }
.bs-muh-chart-x { display: flex; justify-content: space-between; margin-top: 4px; font-size: 0.58rem; font-weight: 700; color: var(--bs-text-light); }

/* ============================================================================
   TASARIM CİLASI (design-overhaul) — kaçak literalleri token'a çeker, dokunma
   hedeflerini düzeltir ve MASAÜSTÜ düzenini getirir. Dosya sonunda olduğu için
   cascade'i kazanır; kırılgan eski (v1/v3) kuralları silmeden güvenle override eder.
   ============================================================================ */

/* 1) html,body — TEK OTORİTER BLOK: v1 taban + v2 tipografi + v3/v4/cila zemin
   katmanlarının cascade KAZANANLARI (bkz. design/token-audit.md §3).
   NOT: background-attachment bilinçli YOK — en son kazanan bildirim shorthand
   olduğundan bugünkü efektif değer initial (scroll) idi; birebir korunur. */
html, body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--bs-font);
    color: var(--bs-text);
    background: var(--bs-bg-app);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.005em;
}

/* Zeminleri tek navy token'a topla — kaçak maroon→mor gradyanlar yerine v4 --bs-bg-app */
.bs-module-page,
.bs-submenu-page,
.bs-auth-loading { background: var(--bs-bg-app); }

/* 2) Drawer: mavi gradyan → koyu-premium navy (marka tutarlılığı) */
.bs-drawer-inner {
    background: linear-gradient(170deg, #0a1020 0%, #0d1b30 55%, #0a0a12 100%);
    border-right: 1px solid var(--bs-stroke);
}

/* 3) Hamburger dokunma hedefi 44px (--bs-touch token; ikon boyutu sabit kalır) */
.bs-menu-toggle { width: var(--bs-touch); height: var(--bs-touch); }

/* 4) Kritik token pinleri dosya başındaki TEK otoriter :root'a taşındı (kazanan değerler korunarak) — bkz. design/token-audit.md */

/* 5) ════ MASAÜSTÜ DÜZENİ (≥1024px) — "stretched-mobil" yerine kalıcı sidebar ════ */
@media (min-width: 1024px) {
    /* Mobil navigasyonu gizle */
    .bs-menu-toggle,
    .bs-bottom-nav,
    .bs-drawer-backdrop { display: none !important; }

    /* Drawer'ı kalıcı sol sidebar yap (her zaman görünür) */
    .bs-drawer {
        transform: none !important;
        width: 268px;
    }

    /* Ana içerik: sidebar için yer aç, alt-nav padding'ini kaldır */
    .bs-main {
        margin-left: 268px;
        padding-bottom: 32px;
    }

    /* İçeriği sınırla + ortala — geniş ekranda aşırı gerilmeyi önle */
    .bs-main > * {
        max-width: 1180px;
        margin-inline: auto;
    }
}

/* 6) ── Floating-label form alanı (.bs-field) — placeholder yerine kalıcı, animasyonlu etiket ── */
.bs-field { position: relative; margin-bottom: 12px; }
.bs-field > .bs-input {
    margin-bottom: 0;
    padding-top: 20px;
    padding-bottom: 6px;
    min-height: 52px;
}
.bs-field > label {
    position: absolute;
    left: 15px;
    top: 16px;
    color: rgba(255,255,255,0.45);
    font-size: 1rem;
    pointer-events: none;
    transition: top var(--bs-tr-fast), font-size var(--bs-tr-fast), color var(--bs-tr-fast);
}
.bs-field > .bs-input:focus + label,
.bs-field > .bs-input:not(:placeholder-shown) + label {
    top: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--bs-brand);
}
.bs-field > .bs-input:focus { border-color: var(--bs-brand); outline: none; }
@media (prefers-reduced-motion: reduce) {
    .bs-field > label { transition: none; }
}

/* 7) ── Mikro-etkileşimler — premium "canlı" his: hover-lift + dokunma geri-bildirimi ── */
.bs-cat-btn, .bs-tile2, .bs-card, .bs-tile, .bs-tile-action, .bs-sporcu-card, .bs-acct-item {
    transition: transform var(--bs-tr-fast), box-shadow var(--bs-tr-fast), border-color var(--bs-tr-fast);
    /* will-change kaldırıldı: statik kullanım çok-örnekli kartlarda kalıcı kompozit
       katman yaratıyordu (bellek + compositing yükü). Hover transform tek-seferlik,
       transition zaten yeterli — katman ihtiyaç anında oluşur. */
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    .bs-cat-btn:hover, .bs-tile2:hover, .bs-card:hover, .bs-tile:hover,
    .bs-tile-action:hover, .bs-sporcu-card:hover, .bs-acct-item:hover {
        transform: translateY(-2px);
        box-shadow: var(--bs-elev-2);
        border-color: var(--bs-stroke-strong);
    }
}
@media (prefers-reduced-motion: no-preference) {
    .bs-cat-btn:active, .bs-tile2:active, .bs-card:active, .bs-tile:active, .bs-tile-action:active,
    .bs-sporcu-card:active, .bs-acct-item:active, .bs-btn-primary:active, .bs-btn-secondary:active { transform: scale(0.985); }
}
.bs-btn-primary, .bs-btn-secondary { transition: filter var(--bs-tr-fast), transform var(--bs-tr-fast); }
@media (hover: hover) {
    .bs-btn-primary:hover, .bs-btn-secondary:hover { filter: brightness(1.07); }
}

/* (PERF blur-kapama kuralları v2 "KART YÜZEY SİSTEMİ" ana bloğuna gömüldü —
   çoğalan içerik kartlarında backdrop-filter kapalı; sabit chrome katmanları
   [appbar/bottom-nav/drawer-backdrop/modal/login] blur'unu korur.) */

/* ── Planlı Ödemeler (.bs-plan-*) ── */
.bs-plan-rapor {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    background: var(--bs-surf-1); border: 1px solid var(--bs-stroke);
    border-radius: var(--bs-radius-lg); padding: 16px; margin-bottom: 14px;
}
.bs-plan-donut { width: 132px; height: 132px; flex: 0 0 auto; }
.bs-plan-donut-pct { fill: #fff; font-size: 20px; font-weight: 800; }
.bs-plan-donut-sub { fill: rgba(255,255,255,0.55); font-size: 11px; font-weight: 600; }
.bs-plan-rapor-legend { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 160px; }
.bs-plan-leg { display: flex; align-items: center; gap: 8px; font-size: var(--bs-fs-sm); color: rgba(255,255,255,0.75); }
.bs-plan-leg strong { margin-left: auto; font-size: var(--bs-fs-md); }
.bs-plan-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.bs-plan-dot-in { background: #10b981; }
.bs-plan-dot-out { background: #e63946; }

.bs-plan-filter { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; margin-bottom: 12px; }
.bs-plan-filter-col { display: flex; flex-direction: column; gap: 3px; }
.bs-plan-filter-pair { display: flex; gap: 6px; }
.bs-plan-filter-pair .bs-input { min-width: 92px; }
.bs-plan-filter-reset { flex: 0 0 auto; }

.bs-plan-card-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.bs-btn-xs { padding: 4px 12px !important; font-size: var(--bs-fs-xs) !important; flex: 0 0 auto; }
.bs-plan-del { color: #fca5a5; border-color: rgba(239,68,68,0.35); }
.bs-plan-realize { margin-left: auto; color: #6ee7b7; border-color: rgba(16,185,129,0.4); font-weight: 700; letter-spacing: .02em; }
.bs-plan-done-badge { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: var(--bs-fs-xs); font-weight: 700; color: #6ee7b7; background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.35); border-radius: 999px; }

.bs-plan-fab {
    position: sticky; bottom: 16px; margin: 16px 0 6px auto; display: flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, var(--bs-brand) 0%, var(--bs-brand-dark) 100%);
    color: #fff; border: none; border-radius: var(--bs-radius-pill);
    padding: 12px 20px; font-weight: 700; font-size: var(--bs-fs-md);
    box-shadow: 0 8px 24px rgba(230,57,70,0.4); cursor: pointer;
}
.bs-plan-fab .bs-ico { width: 20px; height: 20px; }
.bs-plan-fab:active { transform: scale(0.97); }

.bs-plan-form { display: flex; flex-direction: column; gap: 4px; }
.bs-plan-switch { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; cursor: pointer; font-size: var(--bs-fs-md); color: rgba(255,255,255,0.9); }
.bs-plan-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.bs-plan-switch-track { position: relative; width: 44px; height: 24px; border-radius: 999px; background: rgba(255,255,255,0.16); transition: background 0.18s; flex: 0 0 auto; }
.bs-plan-switch-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.18s; }
.bs-plan-switch input:checked + .bs-plan-switch-track { background: var(--bs-brand); }
.bs-plan-switch input:checked + .bs-plan-switch-track .bs-plan-switch-thumb { transform: translateX(20px); }

.bs-plan-taksitler { margin-top: 8px; padding: 10px; border: 1px solid var(--bs-stroke); border-radius: var(--bs-radius); background: rgba(255,255,255,0.03); }
.bs-plan-taksit-row { display: grid; grid-template-columns: 28px 1fr 1fr; gap: 8px; align-items: center; margin-bottom: 8px; }
.bs-plan-taksit-no { font-weight: 700; color: rgba(255,255,255,0.6); font-size: var(--bs-fs-sm); }
.bs-plan-taksit-toplam { margin-top: 6px; font-size: var(--bs-fs-sm); color: var(--bs-ok); }
.bs-plan-taksit-uyari { color: var(--bs-bad); }

/* ── Kayıt dondurma / silinmiş ── */
.bs-dondurma-badge {
    display: inline-block; font-size: var(--bs-fs-xs); font-weight: 700;
    color: #7dd3fc; background: rgba(56,189,248,0.12);
    border: 1px solid rgba(56,189,248,0.30); border-radius: var(--bs-radius-pill);
    padding: 2px 10px; margin-top: 4px;
}
.bs-sporcu-dondurulmus { border-left: 3px solid #38bdf8; }
.bs-sporcularim-dondurma { margin: 6px 0 0; }
.bs-sporcu-silinmis { border-left: 3px solid var(--bs-bad); display: flex; flex-direction: column; gap: 8px; }

/* ── Gelişim Raporu ── */
.bs-gelisim-timeline { display: flex; flex-direction: column; gap: 12px; }
.bs-gelisim-card { display: flex; flex-direction: column; gap: 8px; }
.bs-gelisim-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bs-gelisim-tarih { font-weight: 700; color: var(--bs-brand); font-size: var(--bs-fs-md); }
.bs-gelisim-metin { margin: 0; white-space: pre-wrap; color: rgba(255,255,255,0.88); font-size: var(--bs-fs-md); line-height: 1.5; }
.bs-gelisim-card .bs-plan-del { align-self: flex-start; }

/* ── Renk kodlu antrenör rapor barları ── */
.bs-rapor-bar { position: relative; border-left: 4px solid transparent; }
.bs-rapor-bar .bs-bar-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.bs-bar-yesil { border-left-color: #22c55e; background: linear-gradient(135deg, rgba(34,197,94,0.14), rgba(34,197,94,0.02)); }
.bs-bar-turuncu { border-left-color: #f59e0b; background: linear-gradient(135deg, rgba(245,158,11,0.16), rgba(245,158,11,0.02)); }
.bs-bar-kirmizi { border-left-color: #ef4444; background: linear-gradient(135deg, rgba(239,68,68,0.16), rgba(239,68,68,0.02)); }
.bs-bar-uyari {
    display: inline-block; margin-bottom: 6px; font-weight: 800; font-size: var(--bs-fs-xs);
    letter-spacing: .03em; color: #fff; background: #ef4444;
    padding: 3px 10px; border-radius: var(--bs-radius-pill);
}

/* ── Sporcu kartı aksiyon butonları: birbirinden ayrıştırıcı renkler ── */
.bs-btn-bilgi    { color: #7dd3fc; background: rgba(56,189,248,0.12);  border: 1px solid rgba(56,189,248,0.38) !important; }
.bs-btn-gelisim  { color: #c4b5fd; background: rgba(167,139,250,0.12); border: 1px solid rgba(167,139,250,0.42) !important; }
.bs-btn-dondur   { color: #67e8f9; background: rgba(34,211,238,0.12);  border: 1px solid rgba(34,211,238,0.42) !important; }
.bs-btn-degistir { color: #fcd34d; background: rgba(245,158,11,0.12);  border: 1px solid rgba(245,158,11,0.42) !important; }
.bs-btn-uzat     { color: #34d399; background: rgba(16,185,129,0.12);  border: 1px solid rgba(16,185,129,0.42) !important; }
.bs-btn-bilgi:hover    { background: rgba(56,189,248,0.22); }
.bs-btn-gelisim:hover  { background: rgba(167,139,250,0.22); }
.bs-btn-dondur:hover   { background: rgba(34,211,238,0.22); }
.bs-btn-degistir:hover { background: rgba(245,158,11,0.22); }
.bs-btn-uzat:hover     { background: rgba(16,185,129,0.22); }

/* ======================================================================
   ÜYELİK / ONLINE KAYIT STOREFRONT (Uyelik.razor — PayTR akışı)
   ====================================================================== */
.bs-uyelik-page {
    position: fixed; inset: 0; overflow: hidden;
    background: var(--bs-bg-auth); color: var(--bs-text);
    font-family: var(--bs-font);
}
.bs-uyelik-bg {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(60% 45% at 80% -5%, rgba(230,57,70,0.18), transparent 60%),
        radial-gradient(55% 40% at 0% 8%, rgba(59,130,246,0.12), transparent 60%);
}
.bs-uyelik-scroll {
    position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: calc(env(safe-area-inset-top) + 8px) 0 40px;
}
.bs-uyelik-shell { max-width: 960px; margin: 0 auto; padding: 16px 18px 130px; }

/* Üst başlık */
.bs-uyelik-top { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.bs-uyelik-back {
    color: var(--bs-text-muted); text-decoration: none; font-size: var(--bs-fs-sm);
    font-weight: 600; padding: 6px 10px; border-radius: var(--bs-radius-sm);
    border: 1px solid var(--bs-stroke-soft); transition: var(--bs-tr-fast);
}
.bs-uyelik-back:hover { color: #fff; background: var(--bs-surf-hover); }
.bs-uyelik-brand { display: flex; align-items: center; gap: 12px; }
.bs-uyelik-logo {
    width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
    font-weight: 800; font-size: 1.15rem; letter-spacing: 0.04em; color: #fff;
    background: linear-gradient(135deg, var(--bs-brand) 0%, var(--bs-brand-dark) 100%);
    box-shadow: var(--bs-glow-accent);
}
.bs-uyelik-brandname { font-weight: 800; font-size: var(--bs-fs-lg); }
.bs-uyelik-brandsub { color: var(--bs-text-muted); font-size: var(--bs-fs-sm); }

/* Başlıklar */
.bs-uyelik-h { font-size: var(--bs-fs-2xl); font-weight: 800; margin: 4px 0 6px; line-height: 1.2; }
.bs-uyelik-sub { color: var(--bs-text-muted); margin: 0 0 20px; font-size: var(--bs-fs-md); }

/* Adım göstergesi */
.bs-stepper { display: flex; list-style: none; padding: 0; margin: 0 0 26px; counter-reset: step; }
.bs-stepper li {
    flex: 1; position: relative; text-align: center; padding-top: 30px;
    font-size: var(--bs-fs-xs); color: var(--bs-text-muted); font-weight: 600;
}
.bs-stepper li::before {
    counter-increment: step; content: counter(step);
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
    background: var(--bs-surf-1); border: 1px solid var(--bs-stroke); color: var(--bs-text-muted);
    font-weight: 700; font-size: 0.8rem; z-index: 1; transition: var(--bs-tr);
}
.bs-stepper li::after {
    content: ""; position: absolute; top: 13px; right: 50%; width: 100%; height: 2px;
    background: var(--bs-stroke-soft); transform: translateX(-14px);
}
.bs-stepper li:first-child::after { display: none; }
.bs-stepper li.is-active { color: var(--bs-text); }
.bs-stepper li.is-active::before {
    background: var(--bs-brand); border-color: var(--bs-brand); color: #fff;
    box-shadow: var(--bs-glow-accent);
}
.bs-stepper li.is-done { color: var(--bs-text); }
.bs-stepper li.is-done::before { content: "✓"; background: var(--bs-ok); border-color: var(--bs-ok); color: #06240f; }
.bs-stepper li.is-done::after { background: var(--bs-ok); }

/* Adım 1 — Kim için kartları */
.bs-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bs-choice-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    text-align: left; padding: 26px 22px; cursor: pointer; color: var(--bs-text);
    background: var(--bs-surf-2); border: 1px solid var(--bs-stroke);
    border-radius: var(--bs-radius-lg); box-shadow: var(--bs-elev-1);
    transition: var(--bs-tr); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.bs-choice-card:hover {
    transform: translateY(-3px); border-color: var(--bs-brand);
    box-shadow: var(--bs-elev-2), var(--bs-glow-accent);
}
.bs-choice-ico {
    width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center;
    font-size: 30px; background: var(--bs-brand-light);
}
.bs-choice-title { font-size: var(--bs-fs-xl); font-weight: 800; }
.bs-choice-sub { color: var(--bs-text-muted); font-size: var(--bs-fs-sm); line-height: 1.45; }

/* Adım 2 — Form */
.bs-uyelik-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.bs-uyelik-form label { display: flex; flex-direction: column; }
.bs-uyelik-form .bs-field-full { grid-column: 1 / -1; }
.bs-uyelik-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.bs-uyelik-actions-left { justify-content: flex-start; }
.bs-btn-auto { width: auto; padding-left: 30px; padding-right: 30px; }

/* Kişi özeti şeridi (branş adımı) */
.bs-uyelik-kisi {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; margin-bottom: 16px;
    background: var(--bs-surf-1); border: 1px solid var(--bs-stroke-soft); border-radius: var(--bs-radius);
}
.bs-uyelik-kisi-ad { font-weight: 700; margin-right: 8px; }
.bs-uyelik-kisi-meta { color: var(--bs-text-muted); font-size: var(--bs-fs-sm); }

/* Adım 3 — Branş kartları */
.bs-brans-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bs-brans-card {
    padding: 18px; border-radius: var(--bs-radius-lg);
    background: var(--bs-surf-2); border: 1px solid var(--bs-stroke);
    box-shadow: var(--bs-elev-1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    transition: var(--bs-tr);
}
.bs-brans-card.is-sel { border-color: var(--bs-brand); box-shadow: var(--bs-elev-2), var(--bs-glow-accent); }
.bs-brans-head { display: flex; align-items: center; gap: 12px; }
.bs-brans-ico {
    width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
    font-size: 24px; background: var(--bs-brand-light); flex: 0 0 auto;
}
.bs-brans-head-txt { flex: 1; min-width: 0; }
.bs-brans-name { font-weight: 700; font-size: var(--bs-fs-lg); }
.bs-brans-slogan { color: var(--bs-text-muted); font-size: var(--bs-fs-sm); }
.bs-badge-kadin {
    background: rgba(236,72,153,0.18); color: #f9a8d4; box-shadow: none;
    border: 1px solid rgba(236,72,153,0.4); font-size: var(--bs-fs-xs); padding: 3px 9px;
    border-radius: var(--bs-radius-pill); white-space: nowrap; align-self: flex-start;
}
.bs-brans-detaybtn {
    margin-top: 12px; background: transparent; border: none; cursor: pointer;
    color: var(--bs-brand); font-weight: 600; font-size: var(--bs-fs-sm); padding: 2px 0;
}
.bs-brans-detaybtn:hover { color: var(--bs-accent-2); }
.bs-brans-detay {
    margin-top: 10px; padding: 12px 14px; border-radius: var(--bs-radius);
    background: var(--bs-surf-1); border: 1px solid var(--bs-stroke-soft); font-size: var(--bs-fs-sm);
}
.bs-brans-detay-desc { margin: 0 0 10px; color: var(--bs-text); }
.bs-brans-detay-row { display: flex; gap: 10px; margin-bottom: 5px; }
.bs-brans-detay-row .k { color: var(--bs-text-muted); min-width: 84px; flex: 0 0 auto; }
.bs-brans-detay-row .v { color: var(--bs-text); }
.bs-paket-baslik { margin: 14px 0 8px; font-size: var(--bs-fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bs-text-muted); }
.bs-paket-row { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-paket-chip {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 9px 14px; min-width: 92px; cursor: pointer;
    background: var(--bs-surf-1); border: 1px solid var(--bs-stroke); border-radius: var(--bs-radius);
    color: var(--bs-text); transition: var(--bs-tr-fast);
}
.bs-paket-chip:hover { border-color: var(--bs-stroke-strong); }
.bs-paket-chip .m { font-weight: 700; font-size: var(--bs-fs-sm); }
.bs-paket-chip .t { font-size: var(--bs-fs-sm); color: var(--bs-text-muted); font-variant-numeric: tabular-nums; }
.bs-paket-chip.is-on { background: var(--bs-brand); border-color: var(--bs-brand); box-shadow: var(--bs-glow-accent); }
.bs-paket-chip.is-on .m, .bs-paket-chip.is-on .t { color: #fff; }

/* Sabit alt özet çubuğu */
.bs-uyelik-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--bs-surf-3); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-top: 1px solid var(--bs-stroke); box-shadow: 0 -8px 24px rgba(0,0,0,0.4);
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
}
.bs-uyelik-bar-inner { max-width: 960px; margin: 0 auto; display: flex; align-items: center; gap: 14px; }
.bs-uyelik-bar .ozet { flex: 1; min-width: 0; }
.bs-uyelik-bar-brans { font-weight: 700; }
.bs-uyelik-bar-paket { color: var(--bs-text-muted); font-size: var(--bs-fs-sm); }
.bs-uyelik-bar .tutar { font-size: var(--bs-fs-xl); font-weight: 800; font-variant-numeric: tabular-nums; }

/* Adım 4 — Ödeme */
.bs-odeme-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: start; }
.bs-ozet-card, .bs-paytr-card, .bs-ok-ozet { background: var(--bs-surf-2); border: 1px solid var(--bs-stroke); }
.bs-ozet-h { font-size: var(--bs-fs-lg); font-weight: 800; margin: 0 0 14px; }
.bs-ozet-line { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: var(--bs-fs-md); }
.bs-ozet-line span { color: var(--bs-text-muted); }
.bs-ozet-line strong { color: var(--bs-text); text-align: right; }
.bs-ozet-divider { height: 1px; background: var(--bs-stroke-soft); margin: 10px 0; }
.bs-ozet-total { display: flex; justify-content: space-between; align-items: baseline; }
.bs-ozet-total > span:first-child { color: var(--bs-text); font-weight: 700; }
.bs-ozet-tutar { font-size: var(--bs-fs-2xl); font-weight: 800; color: var(--bs-brand); font-variant-numeric: tabular-nums; }
.bs-ozet-kdv { margin: 6px 0 0; color: var(--bs-text-muted); font-size: var(--bs-fs-xs); }

.bs-paytr-badge { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--bs-stroke-soft); }
.bs-paytr-lock { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; background: var(--bs-ok-soft); flex: 0 0 auto; }
.bs-paytr-title { font-weight: 800; }
.bs-paytr-sub { color: var(--bs-text-muted); font-size: var(--bs-fs-xs); }
.bs-kart-form { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 14px; }
.bs-kart-form label { display: flex; flex-direction: column; }
.bs-kart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bs-kvkk { display: flex; align-items: flex-start; gap: 9px; font-size: var(--bs-fs-sm); color: var(--bs-text-muted); margin-bottom: 14px; cursor: pointer; }
.bs-kvkk input { margin-top: 2px; flex: 0 0 auto; }
.bs-kvkk a { color: var(--bs-brand); text-decoration: underline; }
.bs-paytr-foot { margin: 10px 0 0; color: var(--bs-text-muted); font-size: var(--bs-fs-xs); text-align: center; }

/* Adım 5 — Başarılı */
.bs-uyelik-ok { text-align: center; padding: 24px 12px; max-width: 480px; margin: 0 auto; }
.bs-uyelik-ok-ico {
    width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 18px;
    font-size: 44px; font-weight: 800; color: var(--bs-ok); background: var(--bs-ok-soft);
    border: 1px solid rgba(34,197,94,0.4);
}
.bs-ok-ozet { text-align: left; margin: 20px 0 22px; }
.bs-uyelik-ok-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.bs-uyelik-ok-actions .bs-btn-secondary { display: inline-flex; align-items: center; text-decoration: none; }

/* Responsive */
@media (max-width: 720px) {
    .bs-choice-grid, .bs-brans-grid, .bs-odeme-grid, .bs-uyelik-form { grid-template-columns: 1fr; }
    .bs-uyelik-h { font-size: var(--bs-fs-xl); }
    .bs-stepper li { font-size: 0; padding-top: 30px; }
    .bs-stepper li.is-active { font-size: var(--bs-fs-xs); }
}

/* ======================================================================
   YASAL / İÇERİK SAYFALARI (LegalSayfa — MSS, ÖBF, KVKK, İptal-İade, Hakkımızda)
   ====================================================================== */
.bs-legal-page {
    position: fixed; inset: 0; overflow: hidden;
    background: var(--bs-bg-auth); color: var(--bs-text); font-family: var(--bs-font);
}
.bs-legal-bg {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(55% 40% at 85% -5%, rgba(230,57,70,0.14), transparent 60%);
}
.bs-legal-scroll { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: calc(env(safe-area-inset-top) + 8px) 0 48px; }
.bs-legal-shell { max-width: 820px; margin: 0 auto; padding: 16px 18px 48px; }

.bs-legal-title { font-size: var(--bs-fs-2xl); font-weight: 800; margin: 8px 0 8px; line-height: 1.25; }
.bs-legal-lead { color: var(--bs-text-muted); margin: 0 0 18px; font-size: var(--bs-fs-md); }

/* Satıcı bilgileri tablosu */
.bs-legal-satici {
    background: var(--bs-surf-2); border: 1px solid var(--bs-stroke); border-radius: var(--bs-radius-lg);
    padding: 16px 18px; margin: 0 0 22px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.bs-legal-satici-h { font-size: var(--bs-fs-lg); font-weight: 800; margin: 0 0 12px; color: var(--bs-brand); }
.bs-legal-satici-grid { display: grid; grid-template-columns: 180px 1fr; gap: 8px 16px; font-size: var(--bs-fs-sm); }
.bs-legal-satici-grid .k { color: var(--bs-text-muted); font-weight: 600; }
.bs-legal-satici-grid .v { color: var(--bs-text); }

/* Belge içeriği tipografisi */
.bs-legal-content {
    background: var(--bs-surf-1); border: 1px solid var(--bs-stroke-soft); border-radius: var(--bs-radius-lg);
    padding: 22px 24px; font-size: var(--bs-fs-md); line-height: 1.7;
}
.bs-legal-content h2 {
    font-size: var(--bs-fs-lg); font-weight: 800; color: var(--bs-text); margin: 26px 0 10px;
    padding-bottom: 8px; border-bottom: 1px solid var(--bs-stroke-soft);
}
.bs-legal-content h2:first-child { margin-top: 0; }
.bs-legal-content h3 { font-size: var(--bs-fs-md); font-weight: 700; color: var(--bs-text); margin: 18px 0 8px; }
.bs-legal-content p { margin: 0 0 12px; color: #d7d9e0; }
.bs-legal-content ul, .bs-legal-content ol { margin: 0 0 14px; padding-left: 22px; color: #d7d9e0; }
.bs-legal-content li { margin-bottom: 6px; }
.bs-legal-content strong { color: var(--bs-text); }
.bs-legal-content a { color: var(--bs-brand); text-decoration: underline; }

/* Footer (LegalFooter — /uyelik ve yasal sayfalarda) */
.bs-legal-footer { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--bs-stroke-soft); }
.bs-legal-footer-links { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 12px; }
.bs-legal-footer-links a { color: var(--bs-text-muted); text-decoration: none; font-size: var(--bs-fs-sm); font-weight: 600; }
.bs-legal-footer-links a:hover { color: var(--bs-brand); text-decoration: underline; }
.bs-legal-footer-copy { color: var(--bs-text-light); font-size: var(--bs-fs-xs); margin: 0; }

@media (max-width: 600px) {
    .bs-legal-satici-grid { grid-template-columns: 1fr; gap: 2px 0; }
    .bs-legal-satici-grid .k { margin-top: 8px; }
    .bs-legal-content { padding: 18px 16px; }
}

/* ==== UTILITY (.bs-u-*) ====
   Inline style → class dönüşümü için birebir karşılıklar (dosya SONUNDA
   olduğundan eşit özgüllükteki sınıf kurallarını cascade ile kazanır —
   inline'ın bugünkü efektif sonucu korunur). */
.bs-u-text    { color: var(--bs-text); }
.bs-u-between { display: flex; justify-content: space-between; align-items: center; }
.bs-u-sb      { display: flex; justify-content: space-between; } /* align-items'sız birebir varyant */
.bs-u-prewrap { white-space: pre-wrap; }
.bs-u-strong  { font-weight: 600; color: var(--bs-text); }
.bs-u-meta    { color: var(--bs-text-muted); font-size: .85rem; }
.bs-u-none    { flex: none; }
.bs-u-stack   { display: flex; flex-direction: column; gap: .2rem; }
.bs-u-empty   { padding: 2rem; text-align: center; color: var(--bs-text-muted); }
.bs-u-full    { width: 100%; }

/* ============================================================================
   HAVUZ TAKİP SİSTEMİ — bölüm rengi (cyan) + haftalık kulvar programı grid'i
   ============================================================================ */
.bs-sec-cyan  .bs-sec-chip { background: rgba(34,211,238,0.16); color: #22d3ee; } .bs-sec-cyan  .bs-sec-ttl { color: #22d3ee; }
.bs-tile2-cyan { --tile-ac: #22d3ee; }

/* Özet şeridi (kulüp / saat / ödeme) */
.bs-havuz-stats { display: flex; gap: 10px; margin-bottom: 14px; }
.bs-havuz-stat { flex: 1; padding: 12px 10px; text-align: center; border-radius: var(--bs-radius-lg);
    background: var(--bs-surf-1); border: 1px solid var(--bs-stroke); box-shadow: var(--bs-edge); }
.bs-havuz-stat-v { display: block; font-size: 1.05rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--bs-text); }
.bs-havuz-stat-l { display: block; margin-top: 4px; font-size: 0.56rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.07em; color: var(--bs-text-muted); }

.bs-havuz-gun-filtre { margin-bottom: 12px; flex-wrap: wrap; }

/* Haftalık grid — yatay kaydırmalı, saat sütunu yapışkan */
.bs-havuz-scroll { overflow-x: auto; border-radius: var(--bs-radius-lg); border: 1px solid var(--bs-stroke);
    background: var(--bs-surf-1); box-shadow: var(--bs-edge); -webkit-overflow-scrolling: touch; }
.bs-havuz-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 640px; }
.bs-havuz-table th, .bs-havuz-table td { border-right: 1px solid var(--bs-stroke); border-bottom: 1px solid var(--bs-stroke); }
/* Günleri ayıran belirgin dikey çizgi — her günün son kulvar sütununun + gün başlığının sağ kenarı kalınlaştırılır */
.bs-havuz-table th.bs-havuz-gun-sinir, .bs-havuz-table td.bs-havuz-gun-sinir { border-right: 3px solid rgba(255,255,255,0.34); }

/* Zorunlu güncelleme bandı (BsVersionGuard) — yeni sürüm yayınlanınca üstte belirir */
.bs-version-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 5000;
    display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
    padding: 10px 16px; background: var(--bs-brand); color: #fff; text-align: center;
    box-shadow: 0 3px 16px rgba(0,0,0,0.45); animation: bs-version-in 0.25s var(--bs-ease, ease-out); }
.bs-version-banner .bs-ico { width: 18px; height: 18px; flex-shrink: 0; }
.bs-version-banner-txt { font-size: 0.82rem; font-weight: 800; }
.bs-version-banner-btn { background: #fff; color: var(--bs-brand); border: none; border-radius: 999px;
    padding: 6px 18px; font-size: 0.78rem; font-weight: 900; cursor: pointer; white-space: nowrap; }
.bs-version-banner-btn:hover { filter: brightness(0.95); }
@keyframes bs-version-in { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.bs-havuz-gun { padding: 8px 6px; text-align: center; font-size: 0.68rem; font-weight: 900; text-transform: uppercase;
    letter-spacing: 0.06em; color: #22d3ee; background: rgba(34,211,238,0.10); white-space: nowrap; }
.bs-havuz-kulvar-h { padding: 4px 2px; min-width: 58px; text-align: center; font-size: 0.62rem; font-weight: 800;
    color: var(--bs-text-muted); background: var(--bs-surf-2); }
.bs-havuz-saat { position: sticky; left: 0; z-index: 2; padding: 4px 8px; text-align: right; white-space: nowrap;
    font-size: 0.62rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--bs-text-muted);
    background: var(--bs-surf-2); border-right: 1px solid var(--bs-stroke-strong) !important; }
.bs-havuz-saat-h { z-index: 3; text-align: center; }
.bs-havuz-empty { min-width: 58px; height: 30px; background: transparent; }
.bs-havuz-blok { padding: 3px 4px; text-align: center; vertical-align: middle; cursor: pointer;
    font-size: 0.6rem; font-weight: 800; line-height: 1.15; }
.bs-havuz-blok:hover { filter: brightness(1.12); }
.bs-havuz-blok-tx { display: block; overflow: hidden; word-break: break-word; }

/* Lejant + kartlar + form parçaları */
.bs-havuz-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 12px 2px 0; }
.bs-havuz-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 700; color: var(--bs-text-muted); }
.bs-havuz-dot { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.25); }

.bs-havuz-cards { display: flex; flex-direction: column; gap: 10px; }
.bs-havuz-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.bs-havuz-card-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bs-havuz-card-kulup { font-size: 0.86rem; }
.bs-havuz-card-detay { font-size: 0.7rem; color: var(--bs-text-muted); }
.bs-havuz-card-odeme { font-size: 0.74rem; font-weight: 800; color: #34d399; font-variant-numeric: tabular-nums; }
.bs-havuz-card-actions { display: flex; flex-direction: column; gap: 6px; }

.bs-havuz-form { display: flex; flex-direction: column; gap: 6px; }
.bs-havuz-gunler { display: flex; flex-wrap: wrap; gap: 6px; }
.bs-havuz-chip { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--bs-stroke); background: var(--bs-surf-2);
    color: var(--bs-text-muted); font-size: 0.72rem; font-weight: 800; cursor: pointer;
    transition: background 0.12s var(--bs-ease), color 0.12s var(--bs-ease), border-color 0.12s var(--bs-ease); }
.bs-havuz-chip.sel { background: rgba(34,211,238,0.16); border-color: #22d3ee; color: #22d3ee; }
/* Kulvar seçimi: her kulvar bir sütun; 1 ve 5'in altında "Yarım" chip'i (tam ile karşılıklı dışlamalı) */
.bs-havuz-kulvar-secim { align-items: flex-start; }
.bs-havuz-kulvar-col { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.bs-havuz-chip-yarim { font-size: 0.66rem; padding: 5px 10px; }
.bs-havuz-chip-yarim.sel { background: rgba(251,192,45,0.16); border-color: #fbc02d; color: #fbc02d; }
.bs-havuz-saat-row { display: flex; align-items: center; gap: 8px; }
.bs-havuz-saat-ayrac { color: var(--bs-text-muted); font-weight: 800; }
.bs-havuz-pal { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bs-havuz-sw { width: 30px; height: 30px; border-radius: 9px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.bs-havuz-sw.sel { border-color: #fff; box-shadow: 0 0 0 2px #22d3ee; }
.bs-havuz-sw-custom { width: 30px; height: 30px; border-radius: 9px; border: 1px dashed var(--bs-stroke-strong);
    background: transparent; cursor: pointer; padding: 0; }
.bs-havuz-cakisma-liste { margin: 8px 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; }
.bs-havuz-detay { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--bs-stroke); }
.bs-havuz-detay:last-of-type { border-bottom: none; }
.bs-havuz-detay-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Havuz — muhasebe rozeti + ödeme yöntemi notu */
.bs-havuz-muh-rozet { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
    font-size: 0.6rem; font-weight: 800; color: #34d399; background: rgba(52,211,153,0.14);
    border: 1px solid rgba(52,211,153,0.35); }
.bs-havuz-yontem-not { margin: 2px 0 0; font-size: 0.7rem; }

/* Havuz — otomatik ödeme kutusu + muhasebe akış rozetleri/butonları */
.bs-havuz-otoodeme { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; padding: 12px 14px;
    border-radius: var(--bs-radius-lg); background: rgba(34,211,238,0.08); border: 1px solid rgba(34,211,238,0.35); }
.bs-havuz-otoodeme-l { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: #22d3ee; }
.bs-havuz-otoodeme-v { font-size: 1.15rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--bs-text); }
.bs-havuz-otoodeme-f { font-size: 0.68rem; color: var(--bs-text-muted); font-variant-numeric: tabular-nums; }
.bs-havuz-bekliyor-rozet { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
    font-size: 0.6rem; font-weight: 800; color: #fbbf24; background: rgba(251,191,36,0.14);
    border: 1px solid rgba(251,191,36,0.35); }
.bs-havuz-stat-bekleyen { color: #fbbf24; }
.bs-havuz-stat-gelen { color: #34d399; }
.bs-havuz-tutar-bekleyen { color: #fbbf24; }
.bs-havuz-odendi-btn { align-self: center; white-space: nowrap; }

/* Havuz — haftalık program navigasyonu + salt-görüntü overlay + ileriye dönük planlama */
.bs-havuz-hafta-baslik { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.bs-havuz-hafta-ttl { font-size: 0.92rem; font-weight: 900; color: #22d3ee; letter-spacing: -0.01em; }
.bs-havuz-hafta-nav { display: flex; gap: 8px; margin-bottom: 10px; }
.bs-havuz-hafta-btn { flex: 1; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--bs-stroke);
    background: var(--bs-surf-1); color: var(--bs-text); font-size: 0.74rem; font-weight: 800; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: border-color 0.12s var(--bs-ease), background 0.12s var(--bs-ease); }
.bs-havuz-hafta-btn.acik { border-color: #22d3ee; background: rgba(34,211,238,0.08); color: #22d3ee; }
.bs-havuz-hafta-ok { font-size: 0.6rem; }
.bs-havuz-hafta-liste { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; padding: 10px;
    border-radius: 12px; background: var(--bs-surf-2); border: 1px solid var(--bs-stroke); }
.bs-havuz-hafta-oge { text-align: left; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--bs-stroke);
    background: var(--bs-surf-1); color: var(--bs-text); font-size: 0.76rem; font-weight: 700; cursor: pointer; }
.bs-havuz-hafta-oge:hover { border-color: var(--bs-stroke-strong); }
.bs-havuz-hafta-oge.sel { border-color: #22d3ee; color: #22d3ee; background: rgba(34,211,238,0.10); }
.bs-havuz-hafta-bos { margin: 4px 2px; font-size: 0.74rem; }

/* Salt-görüntü: geçmiş/gelecek hafta tablosunun üzeri saydam gri + değiştirilemez rozeti */
.bs-havuz-tablo-wrap { position: relative; }
/* Soluk + gri ama blok detayı GÖRÜNTÜLENEBİLİR (düzenleme butonu modalda zaten gizli, salt-okunur belli). */
.bs-havuz-salt .bs-havuz-scroll { opacity: 0.6; filter: grayscale(0.35); }
.bs-havuz-salt::after { content: ""; position: absolute; inset: 0; background: rgba(120,130,150,0.18);
    border-radius: var(--bs-radius-lg); pointer-events: none; z-index: 1; }
.bs-havuz-salt-rozet { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 2;
    padding: 5px 14px; border-radius: 999px; font-size: 0.66rem; font-weight: 800; color: #cbd5e1;
    background: rgba(15,23,42,0.86); border: 1px solid rgba(203,213,225,0.35); white-space: nowrap; }

/* İleriye dönük planlama toggle + hafta rozetleri */
.bs-havuz-ileri-toggle { display: flex; align-items: center; gap: 9px; width: 100%; padding: 11px 14px; margin-bottom: 4px;
    border-radius: 12px; border: 1px dashed var(--bs-stroke-strong); background: var(--bs-surf-2); color: var(--bs-text);
    font-size: 0.8rem; font-weight: 800; cursor: pointer; text-align: left;
    transition: border-color 0.12s var(--bs-ease), background 0.12s var(--bs-ease); }
.bs-havuz-ileri-toggle.sel { border-style: solid; border-color: #22d3ee; background: rgba(34,211,238,0.10); color: #22d3ee; }
.bs-havuz-ileri-tik { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
    border-radius: 6px; border: 1.5px solid currentColor; font-size: 0.72rem; font-weight: 900; flex-shrink: 0; }
.bs-havuz-hafta-rozet { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
    font-size: 0.58rem; font-weight: 800; color: #22d3ee; background: rgba(34,211,238,0.14);
    border: 1px solid rgba(34,211,238,0.35); vertical-align: middle; }
.bs-havuz-hafta-rozet.bs-havuz-hafta-tekrar { color: var(--bs-text-muted); background: rgba(255,255,255,0.05); border-color: var(--bs-stroke); }

/* Genel çoklu-seçim çipleri (antrenör çoklu atama vb.) */
.bs-secim-chipler { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-secim-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px;
    border: 1px solid var(--bs-stroke); background: var(--bs-surf-2); color: var(--bs-text);
    font-size: 0.76rem; font-weight: 700; cursor: pointer;
    transition: background 0.12s var(--bs-ease), border-color 0.12s var(--bs-ease), color 0.12s var(--bs-ease); }
.bs-secim-chip:hover { border-color: var(--bs-stroke-strong); }
.bs-secim-chip.sel { background: rgba(52,211,153,0.14); border-color: #34d399; color: #34d399; }
.bs-secim-tik { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px;
    border-radius: 5px; border: 1.5px solid currentColor; font-size: 0.64rem; font-weight: 900; }
.bs-secim-not { margin: 6px 2px 0; font-size: 0.7rem; }

/* Kayıt süresi dolmuş sporcu: kutucuk KIRMIZI dolgulu + büyük "KAYIT SÜRESİ DOLMUŞ!" rozeti.
   Sistemden silinmez; atamaya/gruplara atanabilir kalır — yalnız görsel uyarı. */
.bs-sporcu-suresi-dolmus {
    background: rgba(220,38,38,0.22) !important;
    border-color: rgba(220,38,38,0.6) !important;
    border-left: 4px solid #dc2626 !important;
}
.bs-suresi-dolmus-badge {
    display: block; margin: 0 0 10px; padding: 8px 12px; border-radius: 10px;
    background: #dc2626; color: #fff; text-align: center;
    font-size: 0.9rem; font-weight: 900; letter-spacing: 0.04em;
    box-shadow: 0 2px 8px rgba(220,38,38,0.4);
}

/* =========================================================================
   ====================  KULÜP LOGOSU (resmi amblem)  ======================
   Eski "AB" metin placeholder kutuları resmi Alanya Belediyespor amblemiyle
   değiştirildi (bkz. ilgili .razor'larda <img>). Bu kutular artık şeffaf
   logo görselini taşır; dekoratif gradient/çerçeve/gölge sıfırlanır ki
   kalkan silueti temiz dursun. Tek otoriter blok — dosya sonunda, tüm
   önceki cascade katmanlarını ezer.
   ========================================================================= */
.bs-brand-mark,
.bs-login-logo,
.bs-auth-logo,
.bs-hero-logo,
.bs-uyelik-logo {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible;
    padding: 0;
}
.bs-brand-mark > img,
.bs-login-logo > img,
.bs-auth-logo > img,
.bs-hero-logo > img,
.bs-uyelik-logo > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,0.45));
}


/* ══════════════════════════════════════════════════════════════════════════
   SPORION — GİRİŞ EKRANI (Pages/Login.razor)
   Kendi "sp-" ad alanında: eski .bs-login-* kurallarıyla çakışmaz.
   Masaüstü: solda form, sağda kavisli fotoğraf paneli. ≤900px: fotoğraf üstte bant.
   Fotoğraf: wwwroot/login-hero.jpg (değiştirmek için aynı adla yeni görsel koyun).
   ══════════════════════════════════════════════════════════════════════════ */
.sp-login {
    --sp-orange: #ff5a1f;
    --sp-orange-dark: #e2480f;
    --sp-navy: #0f1b2a;
    --sp-ink: #1d2433;
    --sp-muted: #8a909c;
    --sp-field: #eef0f3;
    --sp-tabs: #f1f2f4;
    position: relative;
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    background: #f7f7f8;
    color: var(--sp-ink);
    font-family: var(--bs-font);
    overflow: hidden;
}

/* ── Sol: form tarafı ── */
.sp-login-main {
    position: relative;
    flex: 1 1 56%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: max(40px, env(safe-area-inset-top)) 48px max(28px, env(safe-area-inset-bottom));
    z-index: 2;
}
.sp-login-curves {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 90% at -20% 40%, transparent 55%, rgba(15,27,42,0.035) 55.3%, transparent 62%),
        radial-gradient(110% 80% at 110% 110%, transparent 58%, rgba(15,27,42,0.03) 58.3%, transparent 66%);
}
.sp-login-inner {
    position: relative;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}

/* Marka */
.sp-brand { text-align: center; margin-bottom: 44px; }
.sp-brand-logo { margin: 0; line-height: 0; }
.sp-brand-logo img { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto; }
.sp-brand-tagline {
    margin: 14px 0 0;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: #9aa0aa;
}

/* Giriş türü sekmeleri */
.sp-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 4px;
    margin-bottom: 30px;
    background: var(--sp-tabs);
    border-radius: 999px;
}
.sp-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--sp-ink);
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background .18s, color .18s, box-shadow .18s;
}
.sp-tab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; flex: none; }
.sp-tab:hover:not(.active) { background: rgba(15,27,42,0.05); }
.sp-tab.active {
    background: var(--sp-orange);
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(255,90,31,0.75);
}
.sp-tab:focus-visible { outline: 2px solid var(--sp-orange); outline-offset: 2px; }

/* Form */
.sp-form { display: flex; flex-direction: column; gap: 22px; }
.sp-field { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.sp-field-label { font-size: 0.95rem; font-weight: 600; color: var(--sp-navy); }
.sp-input-wrap { position: relative; display: flex; align-items: center; }
.sp-input-icon {
    position: absolute;
    left: 22px;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #4a5160;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
.sp-login .sp-input {
    width: 100%;
    height: 60px;
    padding: 0 56px 0 64px;
    border: 1.5px solid transparent;
    border-radius: 16px;
    background: var(--sp-field);
    color: var(--sp-ink);
    font-size: 1rem;
    outline: none;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.sp-login .sp-input::placeholder { color: #8f95a1; }
.sp-login .sp-input:focus {
    background: #fff;
    border-color: var(--sp-orange);
    box-shadow: 0 0 0 4px rgba(255,90,31,0.14);
}
.sp-login .sp-input:disabled { opacity: .65; }
.sp-eye {
    position: absolute;
    right: 14px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #4a5160;
    cursor: pointer;
}
.sp-eye .bs-ico { width: 22px; height: 22px; }
.sp-eye:hover { background: rgba(15,27,42,0.06); }

.sp-form-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: -4px; }
.sp-check { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: #4a5160; font-size: 0.95rem; cursor: pointer; }
.sp-check input {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    margin: 0;
    border: 1.5px solid #c5c9d0;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .15s, border-color .15s;
}
.sp-check input:checked { background: var(--sp-orange); border-color: var(--sp-orange); }
.sp-check input:checked::after {
    content: "";
    width: 6px;
    height: 11px;
    margin-top: -2px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.sp-check input:focus-visible { outline: 2px solid var(--sp-orange); outline-offset: 2px; }
.sp-link {
    border: 0;
    padding: 4px 0;
    background: none;
    color: var(--sp-navy);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}
.sp-link:hover { color: var(--sp-orange); }

.sp-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    height: 64px;
    margin-top: 4px;
    border: 0;
    border-radius: 999px;
    background: var(--sp-navy);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .18s, transform .12s, box-shadow .18s;
    box-shadow: 0 14px 28px -16px rgba(15,27,42,0.9);
}
.sp-submit svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s; }
.sp-submit:hover:not(:disabled) { background: #16273c; }
.sp-submit:hover:not(:disabled) svg { transform: translateX(4px); }
.sp-submit:active:not(:disabled) { transform: translateY(1px); }
.sp-submit:disabled { opacity: .75; cursor: progress; }
.sp-submit:focus-visible { outline: 3px solid var(--sp-orange); outline-offset: 3px; }

.sp-error {
    padding: 12px 16px;
    border-radius: 12px;
    background: #fdecea;
    color: #b42318;
    font-size: 0.9rem;
    line-height: 1.4;
}

.sp-login-footer {
    position: absolute;
    left: 56px;
    bottom: max(28px, env(safe-area-inset-bottom));
    font-size: 0.85rem;
    color: #6b7280;
}

/* ── Sağ: fotoğraf paneli (sol kenarı kavisli) ── */
.sp-login-visual {
    position: relative;
    flex: 0 0 44%;
    min-height: 100%;
    margin-left: -7%;
    clip-path: ellipse(100% 120% at 100% 50%);
    background: #1a1a1a;
}
.sp-login-photo {
    position: absolute;
    inset: 0;
    background: url("login-hero.jpg") center 20% / cover no-repeat;
}
.sp-login-visual::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 30%;
    background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
}
.sp-login-slogan {
    position: absolute;
    right: 56px;
    bottom: max(30px, env(safe-area-inset-bottom));
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.35em;
    text-transform: uppercase;
}
.sp-login-slogan span { width: 26px; height: 2px; background: var(--sp-orange); }

/* ── Tablet / telefon: fotoğraf üstte kavisli bant ── */
@media (max-width: 900px) {
    .sp-login { flex-direction: column; overflow: visible; }
    .sp-login-visual {
        order: -1;
        flex: 0 0 auto;
        height: 30vh;
        min-height: 190px;
        max-height: 300px;
        margin: 0;
        clip-path: ellipse(120% 100% at 50% 0%);
    }
    .sp-login-photo { background-position: center 22%; }
    .sp-login-slogan { display: none; }
    .sp-login-main { justify-content: flex-start; padding: 28px 22px max(24px, env(safe-area-inset-bottom)); }
    .sp-brand { margin-bottom: 28px; }
    .sp-brand-logo img { max-width: 280px; }
    .sp-brand-tagline { font-size: 0.7rem; letter-spacing: 0.32em; }
    .sp-tabs { margin-bottom: 24px; }
    .sp-login-footer { position: static; margin-top: 28px; text-align: center; }
}
@media (max-width: 480px) {
    .sp-tab { flex-direction: column; gap: 3px; min-height: 58px; font-size: 0.78rem; padding: 6px 4px; border-radius: 18px; }
    .sp-tabs { border-radius: 22px; }
    .sp-tab svg { width: 18px; height: 18px; }
    .sp-login .sp-input { height: 56px; }
    .sp-submit { height: 58px; }
}
@media (prefers-reduced-motion: reduce) {
    .sp-login * { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SPORION — ORTAK AÇIK SAYFA + SPOR SALONLARI (liste / ekle / detay)
   .sp-page: yeni tasarımın açık zeminli sayfa kabuğu (MainLayout içeriği). Ad alanı "sp-".
   Kırılımlar: ≤760px telefon (satır listesi, çipler, tam ekran form) · ≤1180px panel çekmece.
   ══════════════════════════════════════════════════════════════════════════ */
.bs-main > .sp-page { max-width: none; }
/* Yeni tasarımlı sayfalarda .bs-main'in alt boşluğu (alt menü payı) koyu gövde zeminini göstermesin. */
.bs-main:has(.sp-page) { background: #f6f7f9; }
.sp-page {
    --sp-orange: #ff5a1f;
    --sp-orange-2: #ff7a3d;
    --sp-orange-soft: #fff1ea;
    --sp-navy: #0f1b2a;
    --sp-ink: #1d2433;
    --sp-muted: #6b7280;
    --sp-line: #eceef2;
    --sp-field: #f1f3f6;
    --sp-bg: #f6f7f9;
    --sp-card: #ffffff;
    --sp-green: #1f9d55; --sp-green-soft: #e6f6ec;
    --sp-amber: #c27400; --sp-amber-soft: #fff3dd;
    --sp-gray: #5f6673; --sp-gray-soft: #eef0f3;
    --sp-red: #e5484d; --sp-red-soft: #fdecec;
    --sp-radius: 18px;
    --sp-shadow: 0 1px 2px rgba(15,27,42,.04), 0 8px 24px -12px rgba(15,27,42,.12);
    min-height: 100vh;
    min-height: 100dvh;
    padding: 34px 36px 40px;
    background: var(--sp-bg);
    color: var(--sp-ink);
    font-family: var(--bs-font);
    letter-spacing: -0.005em;
}
.sp-page svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sp-page button { font-family: inherit; }
.sp-h1 { margin: 0; font-size: 2.1rem; font-weight: 800; letter-spacing: -0.03em; color: var(--sp-navy); line-height: 1.15; }
.sp-h2 { margin: 0; font-size: 1.3rem; font-weight: 700; color: var(--sp-navy); letter-spacing: -0.02em; }
.sp-sub { margin: 6px 0 0; color: var(--sp-muted); font-size: 1rem; }
.sp-muted { color: var(--sp-muted); font-size: .9rem; }
.sp-link-btn { border: 0; background: none; color: var(--sp-orange); font-weight: 600; cursor: pointer; padding: 4px 0; }

/* Butonlar */
.sp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 50px; padding: 0 26px; border: 0; border-radius: 14px;
    font-size: 1rem; font-weight: 600; cursor: pointer; white-space: nowrap;
    transition: background .15s, box-shadow .15s, transform .1s, color .15s;
}
.sp-btn svg { width: 22px; height: 22px; }
.sp-btn:active:not(:disabled) { transform: translateY(1px); }
.sp-btn:disabled { opacity: .6; cursor: progress; }
.sp-btn--primary { background: var(--sp-orange); color: #fff; box-shadow: 0 10px 22px -12px rgba(255,90,31,.9); }
.sp-btn--primary:hover:not(:disabled) { background: #f04f16; }
.sp-btn--dark { background: var(--sp-navy); color: #fff; border-radius: 999px; box-shadow: 0 12px 26px -16px rgba(15,27,42,.9); }
.sp-btn--dark:hover:not(:disabled) { background: #16273c; }
.sp-btn--ghost { background: var(--sp-field); color: var(--sp-ink); }
.sp-btn--ghost:hover:not(:disabled) { background: #e7eaef; }
.sp-btn--danger { background: var(--sp-red); color: #fff; }
.sp-btn--soft { background: var(--sp-orange-soft); color: #d9480f; min-height: 40px; padding: 0 16px; font-size: .9rem; border-radius: 12px; }
.sp-btn--sm { min-height: 40px; padding: 0 16px; font-size: .9rem; border-radius: 12px; }
.sp-btn:focus-visible, .sp-icon-btn:focus-visible, .sp-chip:focus-visible, .sp-round-btn:focus-visible { outline: 2px solid var(--sp-orange); outline-offset: 2px; }
.sp-round-btn {
    display: grid; place-items: center; width: 46px; height: 46px; flex: none;
    border: 0; border-radius: 50%; background: #fff; color: var(--sp-navy);
    box-shadow: var(--sp-shadow); cursor: pointer;
}
.sp-round-btn svg { width: 22px; height: 22px; stroke-width: 2; }
.sp-x-btn { border: 0; background: none; color: var(--sp-muted); width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; }
.sp-x-btn:hover { background: var(--sp-field); color: var(--sp-ink); }
.sp-x-btn svg { width: 20px; height: 20px; }

/* Görünürlük yardımcıları */
.sp-only-narrow { display: none !important; }

/* Başlık */
.sp-sl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.sp-sl-add { min-width: 204px; }

/* Özet kartları */
.sp-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-bottom: 18px; }
.sp-stat {
    display: flex; align-items: center; gap: 18px; padding: 20px 22px;
    background: var(--sp-card); border-radius: var(--sp-radius); box-shadow: var(--sp-shadow);
}
.sp-stat strong { display: block; font-size: 1.6rem; font-weight: 800; color: var(--sp-navy); line-height: 1.1; }
.sp-stat small { display: block; margin-top: 2px; font-size: 1rem; color: #4a5160; }
.sp-stat-ico { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 16px; flex: none; }
.sp-stat-ico svg { width: 30px; height: 30px; }
.sp-stat-ico--orange { background: var(--sp-orange-soft); color: var(--sp-orange); }
.sp-stat-ico--green { background: var(--sp-green-soft); color: var(--sp-green); }
.sp-stat-ico--amber { background: var(--sp-amber-soft); color: #f0a100; }
.sp-stat-ico--gray { background: var(--sp-gray-soft); color: var(--sp-navy); }

/* Filtreler */
.sp-sl-filters { display: grid; grid-template-columns: minmax(0, 1fr) 222px 268px 60px; gap: 16px; margin-bottom: 26px; }
.sp-search, .sp-select {
    position: relative; display: flex; align-items: center; height: 50px;
    background: var(--sp-card); border-radius: 999px; box-shadow: var(--sp-shadow);
}
.sp-search svg { position: absolute; left: 20px; width: 22px; height: 22px; color: #4a5160; pointer-events: none; }
.sp-page .sp-search input {
    width: 100%; height: 100%; padding: 0 20px 0 58px; border: 0; background: transparent;
    font-size: 1rem; color: var(--sp-ink); outline: none; border-radius: 999px;
}
.sp-page .sp-search input::placeholder { color: #8f95a1; }
.sp-search:focus-within, .sp-select:focus-within { box-shadow: 0 0 0 3px rgba(255,90,31,.18), var(--sp-shadow); }
.sp-select { border-radius: 14px; }
.sp-page .sp-select select {
    width: 100%; height: 100%; padding: 0 44px 0 20px; border: 0; border-radius: 14px;
    appearance: none; -webkit-appearance: none; background: transparent; color: var(--sp-ink);
    font-size: 1rem; outline: none; cursor: pointer;
}
.sp-select::after {
    content: ""; position: absolute; right: 20px; width: 9px; height: 9px; margin-top: -5px;
    border: solid #4a5160; border-width: 0 2px 2px 0; transform: rotate(45deg); pointer-events: none;
}
.sp-page .sp-select select option { color: #1d2433; background: #fff; }
.sp-icon-btn {
    display: grid; place-items: center; height: 50px; border: 0; border-radius: 14px;
    background: var(--sp-card); color: var(--sp-navy); box-shadow: var(--sp-shadow); cursor: pointer;
}
.sp-icon-btn svg { width: 24px; height: 24px; }
.sp-icon-btn.is-on { background: var(--sp-orange); color: #fff; }

.sp-chips { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 -2px 10px; scrollbar-width: none; }
.sp-chips::-webkit-scrollbar { display: none; }
.sp-chip {
    flex: none; height: 42px; padding: 0 20px; border: 0; border-radius: 999px;
    background: #eceef2; color: var(--sp-ink); font-size: .9rem; font-weight: 500; cursor: pointer;
}
.sp-chip.active { background: var(--sp-orange); color: #fff; font-weight: 600; }

/* Gövde: liste + panel */
.sp-sl-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
.sp-sl.has-panel .sp-sl-body { grid-template-columns: minmax(0, 1fr) 360px; }
.sp-sl-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 0 4px; }
.sp-view-toggle {
    display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px;
    border: 0; border-radius: 10px; background: #eceef2; color: var(--sp-ink); font-size: .85rem; cursor: pointer;
}
.sp-view-toggle svg { width: 18px; height: 18px; }
.sp-empty {
    display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 20px;
    background: var(--sp-card); border-radius: var(--sp-radius); box-shadow: var(--sp-shadow);
    color: var(--sp-muted); text-align: center;
}
.sp-empty strong { color: var(--sp-ink); }

/* Kart ızgarası */
.sp-sl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.sp-card {
    display: flex; flex-direction: column; overflow: visible;
    background: var(--sp-card); border-radius: var(--sp-radius); box-shadow: var(--sp-shadow);
    transition: box-shadow .18s, transform .18s;
}
.sp-card:hover { box-shadow: 0 2px 4px rgba(15,27,42,.05), 0 18px 34px -16px rgba(15,27,42,.22); }
.sp-card-media {
    position: relative; display: block; width: calc(100% - 16px); margin: 8px 8px 0; padding: 0;
    aspect-ratio: 16 / 8.4; border: 0; border-radius: 12px; overflow: hidden; cursor: pointer; background: var(--sp-field);
}
.sp-card-media img, .sp-sd-hero img, .sp-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-card-media .sp-badge { position: absolute; left: 8px; bottom: 8px; }
.sp-media-ph { display: grid; place-items: center; width: 100%; height: 100%; }
.sp-media-ph svg { width: 44%; max-width: 64px; height: auto; stroke-width: 1.3; opacity: .9; }
.sp-media-ph--havuz { background: linear-gradient(135deg, #bfe3ff, #3aa0e8); color: #fff; }
.sp-media-ph--acik { background: linear-gradient(135deg, #c9efc1, #3f9d4a); color: #fff; }
.sp-media-ph--fitness { background: linear-gradient(135deg, #e6e8ee, #5b6272); color: #fff; }
.sp-media-ph--kapali { background: linear-gradient(135deg, #ffd9c2, #e0762f); color: #fff; }
.sp-card-body { padding: 12px 16px 8px; display: flex; flex-direction: column; gap: 8px; }
.sp-card-title {
    border: 0; background: none; padding: 0; text-align: left; cursor: pointer;
    font-size: 1.1rem; font-weight: 700; color: var(--sp-navy); letter-spacing: -0.01em;
}
.sp-card-title:hover { color: var(--sp-orange); }
.sp-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: #5a6170; font-size: .85rem; }
.sp-meta span { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.sp-meta svg { width: 17px; height: 17px; flex: none; }
.sp-meta--lg { font-size: .95rem; gap: 8px 22px; }
.sp-meta--lg svg { width: 20px; height: 20px; }
.sp-card-today { display: flex; align-items: center; gap: 7px; margin: 2px 0 0; font-size: .8rem; color: var(--sp-muted); }
.sp-card-today svg { width: 16px; height: 16px; flex: none; color: var(--sp-orange); }
.sp-card-actions {
    display: flex; align-items: center; gap: 4px; margin-top: auto; padding: 8px 10px 10px 14px;
    border-top: 1px solid var(--sp-line);
}
.sp-card-actions > button {
    display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 8px;
    border: 0; border-radius: 10px; background: none; color: #4a5160; font-size: .85rem; cursor: pointer;
}
.sp-card-actions > button:hover { background: var(--sp-field); color: var(--sp-ink); }
.sp-card-actions svg { width: 18px; height: 18px; }
.sp-card-actions .sp-menu { margin-left: auto; }

/* Durum rozetleri */
.sp-badge { display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border-radius: 999px; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.sp-badge--aktif { background: var(--sp-green-soft); color: var(--sp-green); }
.sp-badge--bakim { background: var(--sp-amber-soft); color: var(--sp-amber); }
.sp-badge--pasif { background: var(--sp-gray-soft); color: var(--sp-gray); }

/* ⋮ menü */
.sp-menu { position: relative; }
.sp-menu-btn { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: none; color: #4a5160; cursor: pointer; }
.sp-menu-btn:hover { background: var(--sp-field); }
.sp-menu-btn svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.sp-menu-backdrop { position: fixed; inset: 0; z-index: 60; }
.sp-menu-list {
    position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 61; min-width: 220px; padding: 6px;
    background: #fff; border-radius: 14px; box-shadow: 0 16px 40px -12px rgba(15,27,42,.35), 0 0 0 1px rgba(15,27,42,.05);
}
.sp-topbar .sp-menu-list { top: calc(100% + 8px); bottom: auto; }
.sp-menu-list button {
    display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: none;
    text-align: left; font-size: .92rem; color: var(--sp-ink); cursor: pointer;
}
.sp-menu-list button:hover { background: var(--sp-field); }
.sp-menu-list button.is-danger { color: var(--sp-red); }
.sp-menu-sep { height: 1px; margin: 4px 6px; background: var(--sp-line); }

/* Satır listesi */
.sp-sl-rows { display: flex; flex-direction: column; gap: 12px; }
.is-hidden-wide { display: none !important; }
.sp-row { background: var(--sp-card); border-radius: var(--sp-radius); box-shadow: var(--sp-shadow); }
.sp-row-main {
    display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 14px 10px 10px;
    border: 0; background: none; text-align: left; cursor: pointer; border-radius: var(--sp-radius);
}
.sp-row-thumb { flex: none; width: 80px; height: 74px; border-radius: 12px; overflow: hidden; background: var(--sp-field); }
.sp-row-thumb .sp-media-ph svg { width: 34px; }
.sp-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sp-row-text strong { font-size: 1rem; line-height: 1.25; color: var(--sp-navy); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.sp-row-sub { display: flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--sp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-row-sub svg { width: 15px; height: 15px; flex: none; }
.sp-row-chev { width: 20px; height: 20px; color: #9aa0aa; flex: none; }
.sp-row-actions { display: flex; align-items: center; gap: 4px; padding: 0 10px 8px 104px; }
.sp-row-actions > button { border: 0; background: none; padding: 6px 8px; border-radius: 8px; color: #4a5160; font-size: .82rem; cursor: pointer; }
.sp-row-actions > button:hover { background: var(--sp-field); }
.sp-row-actions .sp-menu { margin-left: auto; }

/* Mobil "Yeni Salon" kartı */
.sp-sl-promo {
    position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%;
    min-height: 106px; margin: 4px 0 24px; padding: 18px 20px; border: 0; border-radius: var(--sp-radius);
    background: radial-gradient(circle at 88% 50%, rgba(255,90,31,.22) 0 22%, transparent 23%), radial-gradient(circle at 96% 10%, rgba(255,90,31,.14) 0 30%, transparent 31%), linear-gradient(100deg, #ffffff 35%, #fff4ee);
    box-shadow: var(--sp-shadow); text-align: left; cursor: pointer; overflow: hidden;
}
.sp-sl-promo strong { display: block; font-size: 1.15rem; color: var(--sp-navy); }
.sp-sl-promo small { display: block; margin-top: 4px; color: #4a5160; font-size: .85rem; }
.sp-sl-promo-plus { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #fff; color: var(--sp-orange); box-shadow: var(--sp-shadow); }
.sp-sl-promo-plus svg { width: 28px; height: 28px; stroke-width: 2.4; }

/* Sağ panel (ekle/düzenle) */
.sp-panel {
    position: sticky; top: 20px; padding: 22px 22px 20px;
    background: var(--sp-card); border-radius: var(--sp-radius); box-shadow: var(--sp-shadow);
    max-height: calc(100vh - 40px); overflow-y: auto;
}
.sp-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sp-panel-head h2 { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--sp-navy); }

/* Form (SporSalonuForm) */
.sp-sf { display: flex; flex-direction: column; gap: 18px; }
.sp-sf--compact { gap: 14px; }
.sp-sf-group { display: flex; flex-direction: column; gap: 8px; margin: 0; min-width: 0; }
.sp-sf-label { font-size: 1rem; font-weight: 500; color: var(--sp-navy); }
.sp-sf--compact .sp-sf-label { font-size: .85rem; }
.sp-sf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sp-sf--compact .sp-sf-row { grid-template-columns: 1fr; }
.sp-sf-input { position: relative; display: flex; align-items: center; }
.sp-sf-input > svg { position: absolute; left: 18px; width: 22px; height: 22px; color: #4a5160; pointer-events: none; }
.sp-sf--compact .sp-sf-input > svg { left: 14px; width: 18px; height: 18px; }
.sp-page .sp-sf-input input, .sp-page .sp-sf-input select {
    width: 100%; height: 56px; padding: 0 16px 0 56px; border: 1.5px solid transparent; border-radius: 14px;
    background: var(--sp-field); color: var(--sp-ink); font-size: 1rem; outline: none;
    appearance: none; -webkit-appearance: none; -moz-appearance: textfield;
}
.sp-sf--compact .sp-sf-input input, .sp-sf--compact .sp-sf-input select { height: 44px; padding-left: 44px; font-size: .9rem; border-radius: 12px; }
.sp-page .sp-sf-input input::placeholder { color: #8f95a1; }
.sp-page .sp-sf-input input:focus, .sp-page .sp-sf-input select:focus { background: #fff; border-color: var(--sp-orange); box-shadow: 0 0 0 4px rgba(255,90,31,.12); }
.sp-sf-input input::-webkit-outer-spin-button, .sp-sf-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sp-sf-select::after {
    content: ""; position: absolute; right: 18px; width: 9px; height: 9px; margin-top: -5px;
    border: solid #4a5160; border-width: 0 2px 2px 0; transform: rotate(45deg); pointer-events: none;
}
.sp-page .sp-sf-select select { padding-right: 44px; cursor: pointer; }
.sp-page .sp-sf-select select.is-placeholder { color: #8f95a1; }
.sp-page .sp-sf-select select option { color: #1d2433; }

.sp-sf-photo {
    position: relative; display: grid; place-items: center; min-height: 170px; margin: 0;
    border-radius: 18px; overflow: hidden; cursor: pointer; color: #fff;
    background: #1f2937 center / cover no-repeat;
}
.sp-sf-photo.is-empty { background-image: radial-gradient(circle at 85% 20%, rgba(255,90,31,.55) 0 18%, transparent 19%), linear-gradient(135deg, #1b2a3d, #0f1b2a 70%); }
.sp-sf-photo::before { content: ""; position: absolute; inset: 0; background: rgba(15,27,42,.28); }
.sp-sf-photo-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 1rem; }
.sp-sf-photo-inner svg { width: 42px; height: 42px; stroke-width: 1.6; }
.sp-sf-photo-inner strong { font-weight: 600; }
.sp-sf-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.sp-sf--compact .sp-sf-photo { min-height: 80px; border-radius: 12px; color: var(--sp-ink); background-color: #fff; border: 1.5px dashed #d5d9e0; }
.sp-sf--compact .sp-sf-photo.is-empty { background-image: none; }
.sp-sf--compact .sp-sf-photo.is-empty::before { display: none; }
.sp-sf--compact .sp-sf-photo:not(.is-empty) { min-height: 120px; color: #fff; border: 0; }
.sp-sf--compact .sp-sf-photo-inner { font-size: .85rem; gap: 4px; }
.sp-sf--compact .sp-sf-photo-inner svg { width: 22px; height: 22px; }
.sp-sf--compact .sp-sf-photo-inner small { color: var(--sp-muted); font-size: .72rem; }
.sp-sf-photo-remove { align-self: flex-start; border: 0; background: none; color: var(--sp-red); font-size: .85rem; cursor: pointer; padding: 2px 0; }

.sp-sf-segment { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px; background: var(--sp-field); border-radius: 14px; }
.sp-sf-seg { height: 40px; border: 0; border-radius: 10px; background: none; color: #4a5160; font-size: .9rem; font-weight: 500; cursor: pointer; }
.sp-sf-seg.active { background: #fff; box-shadow: 0 1px 3px rgba(15,27,42,.12); font-weight: 600; }
.sp-sf-seg--aktif.active { color: var(--sp-green); }
.sp-sf-seg--bakim.active { color: var(--sp-amber); }
.sp-sf-seg--pasif.active { color: var(--sp-gray); }

.sp-sf-checks { display: flex; flex-wrap: wrap; gap: 10px; }
.sp-sf--compact .sp-sf-checks { display: grid; grid-template-columns: repeat(3, auto); gap: 10px 14px; justify-content: start; }
.sp-sf-check {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 0 16px 0 12px;
    border-radius: 999px; background: var(--sp-field); color: var(--sp-ink); font-size: .88rem; cursor: pointer;
}
.sp-sf--compact .sp-sf-check { min-height: 0; padding: 0; background: none; font-size: .82rem; }
.sp-sf-check input {
    appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; flex: none;
    border: 1.5px solid #c5c9d0; border-radius: 5px; background: #fff; display: grid; place-items: center; cursor: pointer;
}
.sp-sf-check input:checked { background: var(--sp-orange); border-color: var(--sp-orange); }
.sp-sf-check input:checked::after { content: ""; width: 5px; height: 10px; margin-top: -2px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sp-sf-check.active { background: var(--sp-orange-soft); }
.sp-sf--compact .sp-sf-check.active { background: none; }

.sp-sf-error { padding: 12px 14px; border-radius: 12px; background: var(--sp-red-soft); color: #b42318; font-size: .88rem; line-height: 1.4; }
.sp-sf-actions { display: flex; gap: 12px; margin-top: 4px; }
.sp-sf-actions .sp-btn { flex: 1; }
.sp-sf:not(.sp-sf--compact) .sp-sf-actions .sp-btn { min-height: 60px; font-size: 1.1rem; }
.sp-sf--compact .sp-sf-actions .sp-btn { border-radius: 999px; }

/* Üst çubuk (detay / form sayfası) */
.sp-topbar { display: grid; grid-template-columns: 46px 1fr 46px; align-items: center; gap: 12px; margin-bottom: 22px; }
.sp-topbar h1 { margin: 0; text-align: center; font-size: 1.35rem; font-weight: 700; color: var(--sp-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-topbar-spacer { width: 46px; }
.sp-form-page .sp-form-card { max-width: 720px; margin: 0 auto; padding: 22px; background: var(--sp-card); border-radius: 24px; box-shadow: var(--sp-shadow); }

/* Detay */
.sp-sd-layout { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 22px; align-items: start; }
.sp-sd-side { display: flex; flex-direction: column; gap: 14px; }
.sp-sd-hero { aspect-ratio: 16 / 9.4; border-radius: 20px; overflow: hidden; background: var(--sp-field); box-shadow: var(--sp-shadow); }
.sp-sd-hero .sp-media-ph svg { max-width: 90px; }
.sp-sd-card { padding: 18px 20px; background: var(--sp-card); border-radius: var(--sp-radius); box-shadow: var(--sp-shadow); }
.sp-sd-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sp-sd-title h2 { margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--sp-navy); }
.sp-sd-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px; }
.sp-sd-actions button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 84px;
    border: 0; border-radius: 16px; background: var(--sp-card); box-shadow: var(--sp-shadow);
    color: var(--sp-ink); font-size: .88rem; cursor: pointer;
}
.sp-sd-actions button svg { width: 24px; height: 24px; }
.sp-sd-actions button:hover { background: #fafbfc; }
.sp-sd-actions button.is-current { color: var(--sp-orange); }
.sp-sd-actions button.is-danger { background: var(--sp-red-soft); color: var(--sp-red); }
.sp-sd-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.sp-tabs-pill { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.sp-tabs-pill::-webkit-scrollbar { display: none; }
.sp-tabs-pill button {
    flex: none; height: 44px; padding: 0 20px; border: 0; border-radius: 999px;
    background: #eceef2; color: var(--sp-ink); font-size: .92rem; cursor: pointer;
}
.sp-tabs-pill button.active { background: var(--sp-orange); color: #fff; font-weight: 600; }
.sp-sd-panel { padding: 8px 20px 18px; background: var(--sp-card); border-radius: var(--sp-radius); box-shadow: var(--sp-shadow); }
.sp-sd-info dl { display: grid; grid-template-columns: minmax(110px, 36%) 1fr; margin: 0; }
.sp-sd-info dt, .sp-sd-info dd { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--sp-line); font-size: .95rem; }
.sp-sd-info dt { color: #4a5160; }
.sp-sd-info dd { color: var(--sp-ink); font-weight: 500; }
.sp-sd-info dt:last-of-type, .sp-sd-info dd:last-of-type { border-bottom: 0; }
.sp-feature-list { list-style: none; margin: 0; padding: 10px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.sp-feature-list li { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--sp-field); font-size: .92rem; }
.sp-feature-list svg { width: 18px; height: 18px; color: var(--sp-green); stroke-width: 2.2; }
.sp-sd-panel > .sp-muted { padding: 12px 0 2px; margin: 0; }
.sp-date-row { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px 0; }
.sp-date-row label { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; color: #4a5160; margin: 0; }
.sp-page .sp-date-row input { height: 44px; padding: 0 12px; border: 1.5px solid transparent; border-radius: 12px; background: var(--sp-field); color: var(--sp-ink); font-size: .92rem; outline: none; }
.sp-page .sp-date-row input:focus { border-color: var(--sp-orange); background: #fff; }
.sp-mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.sp-mini-stats div { padding: 12px 14px; border-radius: 14px; background: var(--sp-field); }
.sp-mini-stats strong { display: block; font-size: 1.35rem; font-weight: 800; color: var(--sp-navy); }
.sp-mini-stats small { font-size: .78rem; color: var(--sp-muted); }
.sp-plan-list { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.sp-plan { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--sp-line); }
.sp-plan > div:not(.sp-date-chip) { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.sp-plan strong { color: var(--sp-navy); font-size: .95rem; }
.sp-plan.is-past { opacity: .6; }
.sp-date-chip { flex: none !important; display: flex !important; flex-direction: column; align-items: center; width: 50px; }
.sp-date-chip strong { font-size: 1.2rem; color: var(--sp-orange); line-height: 1; }
.sp-date-chip small { font-size: .7rem; color: var(--sp-muted); text-transform: uppercase; }
.sp-panel-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0 4px; }

/* Onay penceresi */
.sp-dialog-backdrop { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px; background: rgba(15,27,42,.45); backdrop-filter: blur(2px); }
.sp-dialog { width: min(420px, 100%); padding: 24px; border-radius: 20px; background: #fff; color: var(--sp-ink); box-shadow: 0 30px 60px -20px rgba(15,27,42,.5); }
.sp-dialog h3 { margin: 0 0 10px; font-size: 1.2rem; color: var(--sp-navy); }
.sp-dialog p { margin: 0 0 20px; color: #4a5160; line-height: 1.5; font-size: .95rem; }
.sp-dialog-actions { display: flex; gap: 10px; justify-content: flex-end; }
.sp-dialog-actions .sp-btn { min-height: 44px; padding: 0 20px; border-radius: 12px; }

/* ── Tablet: panel sağdan çekmece ── */
@media (max-width: 1180px) {
    .sp-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .sp-sl-filters { grid-template-columns: minmax(0,1fr) 190px 190px 50px; }
    .sp-sl.has-panel .sp-sl-body { grid-template-columns: minmax(0, 1fr); }
    .sp-panel {
        position: fixed; top: 0; right: 0; bottom: 0; z-index: 1100; width: min(400px, 100vw);
        max-height: none; border-radius: 20px 0 0 20px; box-shadow: -20px 0 60px -20px rgba(15,27,42,.45);
    }
    .sp-sd-layout { grid-template-columns: 1fr; }
}

/* ── Telefon ── */
@media (max-width: 760px) {
    .sp-page { padding: 72px 16px calc(24px + env(safe-area-inset-bottom)); }
    .sp-only-wide { display: none !important; }
    .sp-only-narrow { display: revert !important; }
    .sp-chips.sp-only-narrow { display: flex !important; }
    .sp-sl-mobile-status.sp-only-narrow { display: flex !important; gap: 8px; flex-wrap: wrap; margin: -12px 0 14px; }
    .sp-sl-promo.sp-only-narrow { display: flex !important; }
    .is-hidden-wide { display: flex !important; }
    .sp-sl-grid { display: none !important; }
    .sp-h1 { font-size: 1.75rem; }
    .sp-sub { font-size: .92rem; }
    .sp-sl-head { margin-bottom: 16px; }
    .sp-sl-add { display: none; }
    .sp-stats { display: none; }
    .sp-sl-filters { grid-template-columns: minmax(0,1fr); gap: 0; margin-bottom: 16px; position: relative; }
    .sp-sl-filters .sp-icon-btn { position: absolute; right: 6px; top: 5px; height: 40px; width: 44px; box-shadow: none; background: transparent; border-radius: 12px; }
    .sp-sl-filters .sp-icon-btn.is-on { background: var(--sp-orange); }
    .sp-page .sp-search input { padding-right: 58px; }
    .sp-sl-list-head { padding: 0 2px; }
    .sp-sl-list-head .sp-h2 { font-size: 1.15rem; }
    .sp-row-actions { padding-left: 104px; }
    .sp-panel { width: 100vw; border-radius: 0; padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); background: var(--sp-bg); }
    .sp-panel-head { display: grid; grid-template-columns: 46px 1fr 46px; margin-bottom: 18px; }
    .sp-panel-head h2 { text-align: center; }
    .sp-sf-row { grid-template-columns: 1fr; }
    .sp-sf--compact .sp-sf-checks { grid-template-columns: repeat(2, auto); }
    .sp-form-page .sp-form-card { padding: 0; background: none; box-shadow: none; }
    .sp-topbar h1 { font-size: 1.2rem; }
    .sp-sd-actions { grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .sp-sd-actions button { min-height: 74px; font-size: .8rem; }
    .sp-mini-stats { grid-template-columns: 1fr; }
    .sp-plan { flex-wrap: wrap; }
    .sp-menu-list { bottom: auto; top: calc(100% + 6px); }
}
@media (prefers-reduced-motion: reduce) {
    .sp-page * { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SPORION — SOL MENÜ (MainLayout .bs-drawer.sp-side)
   Beyaz zemin, üstte logo, bölüm başlıkları, aktif öğe turuncu (sol çizgi + açık zemin),
   altta dil seçimi + kulüp/kullanıcı kartı. Masaüstü (≥1024px) kalıcı; altında çekmece.
   ══════════════════════════════════════════════════════════════════════════ */
.bs-drawer.sp-side .bs-drawer-inner {
    background: #ffffff;
    color: #1d2433;
    border-right: 1px solid #eceef2;
    box-shadow: none;
    padding: 0;
}
.bs-drawer.sp-side.open .bs-drawer-inner { box-shadow: 20px 0 60px -20px rgba(15,27,42,.35); }
.bs-drawer.sp-side .sp-side-head {
    position: relative;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: max(26px, calc(env(safe-area-inset-top) + 18px)) 22px 18px 26px;
    margin: 0; border: 0;
}
.sp-side-logo { display: block; line-height: 0; }
.sp-side-logo img { display: block; width: 172px; max-width: 100%; height: auto; }
.sp-side-close {
    display: none; place-items: center; width: 38px; height: 38px; flex: none;
    border: 0; border-radius: 10px; background: #f1f3f6; color: #4a5160; cursor: pointer;
}
.sp-side-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.bs-drawer.sp-side.open .sp-side-close { display: grid; }

.bs-drawer.sp-side .bs-drawer-nav { padding: 4px 14px 12px; gap: 2px; scrollbar-width: thin; scrollbar-color: #d5d9e0 transparent; }
.bs-drawer.sp-side .bs-nav-section {
    margin: 18px 0 6px; padding: 0 16px;
    font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: #8a909c;
}
/* Tasarımda ilk ("Genel") başlık yok: Ana Sayfa doğrudan logonun altında. */
.bs-drawer.sp-side .bs-drawer-nav > .bs-nav-section:first-child { display: none; }

.bs-drawer.sp-side .bs-nav-item {
    display: flex; align-items: center; gap: 16px;
    min-height: 48px; padding: 0 16px;
    border: 0; border-radius: 14px; background: transparent;
    color: #1d2433; font-size: .98rem; font-weight: 500; text-decoration: none;
}
.bs-drawer.sp-side .bs-nav-ico { width: 24px; height: 24px; color: #1d2433; }
.bs-drawer.sp-side .bs-nav-ico .bs-ico { width: 24px; height: 24px; stroke-width: 1.7; }
.bs-drawer.sp-side .bs-nav-item:hover { background: #f5f6f8; color: #0f1b2a; }
.bs-drawer.sp-side .bs-nav-item.active {
    background: #fff1ea; color: #ff5a1f; font-weight: 600; border: 0;
}
.bs-drawer.sp-side .bs-nav-item.active .bs-nav-ico { color: #ff5a1f; }
.bs-drawer.sp-side .bs-nav-item.active::before {
    left: -14px; width: 4px; height: 70%; border-radius: 0 4px 4px 0; background: #ff5a1f;
}
.bs-drawer.sp-side .bs-nav-item:focus-visible { outline: 2px solid #ff5a1f; outline-offset: -2px; }
.bs-drawer.sp-side .bs-nav-logout, .bs-drawer.sp-side .bs-nav-logout .bs-nav-ico { color: #e5484d; }
.bs-drawer.sp-side .bs-nav-logout:hover { background: #fdecec; color: #c52c32; }

/* Alt kart */
.sp-side-foot { padding: 10px 14px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid #f0f1f4; }
.bs-drawer.sp-side .sp-side-lang { display: flex; gap: 4px; width: max-content; margin: 0 0 10px 6px; padding: 3px; border-radius: 999px; background: #f1f3f6; }
.bs-drawer.sp-side .sp-side-lang .bs-lang-btn {
    min-width: 42px; height: 28px; padding: 0 10px; border: 0; border-radius: 999px;
    background: transparent; color: #5a6170; font-size: .75rem; font-weight: 700; cursor: pointer;
}
.bs-drawer.sp-side .sp-side-lang .bs-lang-btn.is-active { background: #ff5a1f; color: #fff; }
.sp-side-user {
    display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px;
    border-radius: 18px; background: #fff; text-decoration: none; color: #1d2433;
    box-shadow: 0 1px 2px rgba(15,27,42,.05), 0 10px 26px -14px rgba(15,27,42,.25);
    border: 1px solid #f0f1f4;
}
a.sp-side-user:hover { border-color: #ffd9c8; }
a.sp-side-user.active { border-color: #ff5a1f; }
.sp-side-club { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; overflow: hidden; background: #fff; }
.sp-side-club img { width: 100%; height: 100%; object-fit: contain; }
.sp-side-user-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-side-user-text strong { font-size: .9rem; font-weight: 600; color: #0f1b2a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-side-user-text small { font-size: .75rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-side-user-chev { width: 20px; height: 20px; flex: none; fill: none; stroke: #1d2433; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Mobil menü açma butonu: açık temaya uygun beyaz yuvarlak */
.bs-menu-toggle {
    background: #ffffff; color: #0f1b2a; border: 0; border-radius: 50%;
    box-shadow: 0 1px 2px rgba(15,27,42,.06), 0 8px 22px -10px rgba(15,27,42,.35);
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
.bs-menu-toggle:hover { background: #f5f6f8; }
.bs-drawer-backdrop { background: rgba(15,27,42,.4); }

/* ══════════════════════════════════════════════════════════════════════════
   SPORION — AKORDİYON MENÜ + MASAÜSTÜ ÜST ÇUBUK + ALT MENÜ (açık tema)
   ══════════════════════════════════════════════════════════════════════════ */
.bs-drawer.sp-side .bs-nav-section.sp-side-sec {
    display: flex; align-items: center; gap: 16px; width: 100%;
    min-height: 48px; margin: 6px 0 0; padding: 0 12px 0 16px;
    border: 0; border-radius: 14px; background: transparent; cursor: pointer;
    text-transform: none; letter-spacing: -0.005em;
    font-size: .98rem; font-weight: 600; color: #1d2433; text-align: left;
}
.bs-drawer.sp-side .bs-nav-section.sp-side-sec:hover { background: #f5f6f8; }
.bs-drawer.sp-side .bs-nav-section.sp-side-sec:focus-visible { outline: 2px solid #ff5a1f; outline-offset: -2px; }
.sp-side-sec-ico { display: grid; place-items: center; width: 24px; height: 24px; flex: none; }
.sp-side-sec-ico svg, .sp-side-sec-chev { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sp-side-sec-ico svg { width: 24px; height: 24px; }
.sp-side-sec-lbl { flex: 1; }
.sp-side-sec-chev { width: 18px; height: 18px; color: #8a909c; transition: transform .2s; }
.bs-drawer.sp-side .sp-side-sec.is-open .sp-side-sec-chev { transform: rotate(180deg); }
.bs-drawer.sp-side .sp-side-sec.has-active { color: #ff5a1f; }
.bs-drawer.sp-side .sp-side-sec.has-active .sp-side-sec-chev { color: #ff5a1f; }
.sp-side-group { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 6px; animation: spSideOpen .18s ease; }
@keyframes spSideOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.bs-drawer.sp-side .sp-side-group .bs-nav-item { min-height: 42px; padding-left: 28px; font-size: .92rem; font-weight: 500; gap: 14px; }
.bs-drawer.sp-side .sp-side-group .bs-nav-ico, .bs-drawer.sp-side .sp-side-group .bs-nav-ico .bs-ico { width: 20px; height: 20px; }
.bs-drawer.sp-side .sp-side-group .bs-nav-item.active { font-weight: 600; }

/* Masaüstü üst çubuk */
.sp-appbar { display: none; }
@media (min-width: 1024px) {
    .bs-main > .sp-appbar {
        max-width: none; margin: 0;
        display: flex; align-items: center; justify-content: space-between; gap: 20px;
        padding: 18px 36px; background: #f6f7f9; color: #1d2433; font-family: var(--bs-font);
    }
}
.sp-appbar svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sp-appbar-search {
    display: flex; align-items: center; gap: 14px; width: min(480px, 45vw); height: 50px; padding: 0 18px;
    border: 0; border-radius: 16px; background: #fff; color: #8a909c; font-size: .95rem; text-align: left; cursor: text;
    box-shadow: 0 1px 2px rgba(15,27,42,.04), 0 8px 24px -14px rgba(15,27,42,.18);
}
.sp-appbar-search svg { width: 22px; height: 22px; color: #4a5160; flex: none; }
.sp-appbar-search span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-appbar-search kbd { padding: 3px 8px; border-radius: 8px; background: #f1f3f6; color: #6b7280; font: 600 .72rem var(--bs-font); }
.sp-appbar-search:hover { box-shadow: 0 0 0 2px rgba(255,90,31,.25), 0 8px 24px -14px rgba(15,27,42,.18); }
.sp-appbar-right { display: flex; align-items: center; gap: 18px; }
.sp-appbar-bell { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #1d2433; }
.sp-appbar-bell:hover { background: #fff; }
.sp-appbar-bell svg { width: 24px; height: 24px; }
.sp-appbar-dot { position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #ff5a1f; color: #fff; font-size: .68rem; font-weight: 700; display: grid; place-items: center; border: 2px solid #f6f7f9; }
.sp-appbar-sep { width: 1px; height: 32px; background: #e3e6eb; }
.sp-appbar-user { display: flex; align-items: center; gap: 12px; padding: 4px 8px 4px 4px; border-radius: 999px; color: #1d2433; text-decoration: none; }
a.sp-appbar-user:hover { background: #fff; }
.sp-appbar-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #0f1b2a; color: #fff; font-weight: 700; font-size: .95rem; }
.sp-appbar-user-tx { display: flex; flex-direction: column; line-height: 1.2; }
.sp-appbar-user-tx strong { font-size: .95rem; font-weight: 600; color: #0f1b2a; }
.sp-appbar-user-tx small { font-size: .78rem; color: #6b7280; }
.sp-appbar-user > svg { width: 18px; height: 18px; color: #4a5160; }

/* Alt menü (mobil) — açık tema */
.bs-bottom-nav {
    background: rgba(255,255,255,.96) !important; border-top: 1px solid #eceef2 !important;
    box-shadow: 0 -10px 30px -18px rgba(15,27,42,.35) !important;
}
.bs-bottom-nav .bs-bnav-item { color: #5a6170; background: none; border: 0; font-family: inherit; cursor: pointer; }
.bs-bottom-nav .bs-bnav-item.active { color: #ff5a1f; }
.bs-bottom-nav .bs-bnav-item.active::before { background: #ff5a1f; box-shadow: none; }
.bs-bottom-nav .bs-bnav-fab {
    background: linear-gradient(135deg, #ff7a3d, #ff5a1f) !important;
    box-shadow: 0 10px 22px -8px rgba(255,90,31,.8), 0 0 0 4px #fff !important;
}
.sp-bnav-more { display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* ══════════════════════════════════════════════════════════════════════════
   SPORION — ANA SAYFA (Pages/Home.razor)
   ══════════════════════════════════════════════════════════════════════════ */
.bs-app:has(.sp-home) .bs-menu-toggle { display: none; }
.sp-home { padding-top: 8px; }
.sp-home-h2 { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--sp-navy); letter-spacing: -0.02em; }
.sp-tone-orange { --t: #ff5a1f; --tb: #fff1ea; }
.sp-tone-green  { --t: #1f9d55; --tb: #e6f6ec; }
.sp-tone-purple { --t: #7c5cff; --tb: #f0ecff; }
.sp-tone-amber  { --t: #f0a100; --tb: #fff4dc; }
.sp-tone-blue   { --t: #2f7cf6; --tb: #e9f1ff; }
.sp-tone-red    { --t: #e5484d; --tb: #fdecec; }
.sp-tone-cyan   { --t: #0ea5c6; --tb: #e2f6fb; }

/* Mobil üst çubuk */
.sp-home-appbar { display: none; }
.sp-home-logo { height: 40px; width: auto; }
.sp-home-appbar-right { display: flex; align-items: center; gap: 12px; }
.sp-bell, .sp-avatar { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; text-decoration: none; }
.sp-bell { background: #fff; color: #1d2433; box-shadow: var(--sp-shadow); }
.sp-bell svg { width: 22px; height: 22px; }
.sp-bell-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #ff5a1f; color: #fff; font-size: .62rem; font-weight: 700; display: grid; place-items: center; }
.sp-avatar { background: #0f1b2a; color: #fff; font-weight: 700; overflow: hidden; }
.sp-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Karşılama */
.sp-hero {
    position: relative; display: flex; justify-content: space-between; gap: 24px;
    min-height: 168px; padding: 30px 40px; margin-bottom: 16px; border-radius: 24px; overflow: hidden; color: #fff;
    background: #14161c;
    isolation: isolate;
}
/* Fotoğraf sağ bölümü kaplar; soldan koyu geçiş + sıcak (turuncu) ton metni okunur tutar */
.sp-hero::before {
    content: ""; position: absolute; inset: 0 0 0 34%; z-index: -2;
    background: url("login-hero.jpg") center 22% / cover no-repeat;
    filter: sepia(.35) saturate(1.3) brightness(.95);
}
.sp-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(90deg, #14161c 0%, #14161c 34%, rgba(20,22,28,.72) 46%, rgba(20,22,28,.15) 70%, rgba(20,22,28,.55) 100%),
        radial-gradient(circle at 62% 40%, rgba(255,120,40,.28), transparent 45%);
}
.sp-hero-text { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 10px; max-width: 560px; }
.sp-hero h1 { margin: 0; font-size: 2.3rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: #fff; }
.sp-hero h1 span { color: #ff6a2b; }
.sp-hero p { margin: 0; font-size: 1rem; color: rgba(255,255,255,.85); }
.sp-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.sp-hero-chips span { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.12); font-size: .82rem; color: rgba(255,255,255,.85); }
.sp-hero-chips strong { color: #fff; }
.sp-hero-side { position: relative; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 16px; }
.sp-hero-date { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-radius: 16px; background: rgba(255,255,255,.1); backdrop-filter: blur(6px); }
.sp-hero-date svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.6; }
.sp-hero-date strong { display: block; font-size: .95rem; }
.sp-hero-date small { display: block; font-size: .85rem; color: rgba(255,255,255,.7); text-transform: capitalize; }
.sp-hero-quote { margin: 0; text-align: right; font-size: .85rem; line-height: 1.5; color: rgba(255,255,255,.9); }
.sp-hero-quote span { display: inline-block; width: 22px; height: 2px; margin-right: 10px; vertical-align: middle; background: #ff5a1f; }

/* Özet kartları */
.sp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-bottom: 16px; }
.sp-kpi {
    display: flex; align-items: center; gap: 18px; padding: 16px 20px 16px 16px; min-width: 0;
    background: #fff; border-radius: 20px; box-shadow: var(--sp-shadow); color: var(--sp-ink); text-decoration: none;
    transition: box-shadow .18s, transform .18s;
}
a.sp-kpi:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(15,27,42,.05), 0 18px 34px -16px rgba(15,27,42,.22); }
.sp-kpi-ico { display: grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: 18px; background: var(--tb); color: var(--t); }
.sp-kpi-ico svg, .sp-today-ico svg, .sp-quick-ico svg, .sp-recent-ico svg, .sp-module-ico svg, .sp-module-row-ico svg, .sp-quick-badge svg, .sp-account-btn svg {
    width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.sp-kpi-tx { flex: 1; min-width: 0; }
.sp-kpi-tx strong { display: block; font-size: 1.7rem; font-weight: 800; color: var(--sp-navy); line-height: 1.1; }
.sp-kpi-tx small { display: block; font-size: .95rem; color: #4a5160; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-kpi-chev { width: 20px; height: 20px; flex: none; fill: none; stroke: #1d2433; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Sana özel */
.sp-today { display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: 16px; margin-bottom: 16px; padding: 14px 16px 14px 24px; background: #fff; border-radius: 20px; box-shadow: var(--sp-shadow); }
.sp-today .sp-home-h2 { font-size: 1.05rem; }
.sp-today-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.sp-today-row { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 14px; background: #f6f7f9; color: var(--sp-ink); text-decoration: none; }
a.sp-today-row:hover { background: #eff1f4; }
.sp-today-ico { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--tb); color: var(--t); }
.sp-today-ico svg { width: 22px; height: 22px; }
.sp-today-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sp-today-tx strong { font-size: .92rem; color: var(--sp-navy); }
.sp-today-tx small { font-size: .8rem; color: var(--sp-muted); }
.sp-today-badge { min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; background: #e5484d; color: #fff; font-size: .8rem; font-weight: 700; display: grid; place-items: center; }

/* Modül kartları */
.sp-modules { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-bottom: 16px; align-items: start; }
.sp-module { padding: 14px 16px 16px; background: #fff; border-radius: 22px; box-shadow: var(--sp-shadow); }
.sp-module-head { display: flex; align-items: center; gap: 16px; width: 100%; padding: 0 0 12px; border: 0; background: none; cursor: default; text-align: left; font-family: inherit; }
.sp-module-head h2 { flex: 1; margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--sp-navy); letter-spacing: -0.01em; }
.sp-module-ico { display: grid; place-items: center; width: 50px; height: 50px; flex: none; border-radius: 14px; background: var(--tb); color: var(--t); }
.sp-module-ico svg { width: 26px; height: 26px; }
.sp-module-chev { display: none; width: 20px; height: 20px; fill: none; stroke: #1d2433; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.sp-module-body { display: flex; flex-direction: column; gap: 8px; }
.sp-module-row {
    display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 14px 0 20px;
    border: 1px solid #eef0f3; border-radius: 14px; background: #fff; color: var(--sp-ink); text-decoration: none; font-size: .93rem;
    transition: background .15s, border-color .15s;
}
.sp-module-row:hover { background: #fafbfc; border-color: #e3e6eb; }
.sp-module-row-ico { display: grid; place-items: center; width: 24px; height: 24px; color: var(--t); flex: none; }
.sp-module-row-ico svg { width: 22px; height: 22px; }
.sp-module-row-l { flex: 1; min-width: 0; }
.sp-module-row .sp-kpi-chev { width: 16px; height: 16px; stroke: #4a5160; }

/* Hızlı işlemler (masaüstü: alt şerit) */
.sp-quick { display: flex; align-items: center; gap: 24px; padding: 16px 20px; margin-bottom: 16px; background: #fff; border-radius: 22px; box-shadow: var(--sp-shadow); }
.sp-quick-head { display: flex; align-items: center; gap: 18px; flex: none; }
.sp-quick-badge { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 16px; background: #f0ecff; color: #7c5cff; }
.sp-quick .sp-more-btn { display: none; }
.sp-quick-grid { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.sp-quick-item {
    display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 58px; padding: 0 16px;
    border-radius: 14px; background: var(--tb); color: var(--t); font-weight: 600; font-size: .95rem; text-decoration: none;
    transition: filter .15s, transform .15s;
}
.sp-quick-item:hover { filter: brightness(.97); transform: translateY(-1px); }
.sp-quick-ico { display: grid; place-items: center; }
.sp-quick-ico svg { width: 26px; height: 26px; }
.sp-more-btn { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border: 1px solid #e3e6eb; border-radius: 999px; background: #fff; color: var(--sp-ink); font: 500 .8rem var(--bs-font); cursor: pointer; }
.sp-more-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Son işlemler (yalnız mobil tasarımda) */
.sp-recent { display: none; }
.sp-recent-list { display: flex; flex-direction: column; background: #fff; border-radius: 18px; box-shadow: var(--sp-shadow); overflow: hidden; }
.sp-recent-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; color: var(--sp-ink); text-decoration: none; border-bottom: 1px solid #f0f1f4; }
.sp-recent-row:last-child { border-bottom: 0; }
.sp-recent-ico { display: grid; place-items: center; width: 50px; height: 50px; flex: none; border-radius: 14px; background: var(--tb); color: var(--t); }
.sp-recent-ico svg { width: 26px; height: 26px; }
.sp-recent-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sp-recent-tx strong { font-size: .95rem; color: var(--sp-navy); }
.sp-recent-tx small { font-size: .82rem; color: var(--sp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-recent-time { font-size: .8rem; color: var(--sp-muted); flex: none; }

/* Hesap */
.sp-account { display: flex; gap: 12px; justify-content: flex-end; }
.sp-account-btn { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border: 0; border-radius: 12px; background: #fff; color: var(--sp-ink); font: 500 .9rem var(--bs-font); text-decoration: none; box-shadow: var(--sp-shadow); cursor: pointer; }
.sp-account-btn svg { width: 18px; height: 18px; }
.sp-account-btn.is-danger { color: #e5484d; }

@media (max-width: 1180px) {
    .sp-modules { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .sp-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .sp-quick { flex-direction: column; align-items: stretch; }
}

/* ── Telefon ── */
@media (max-width: 760px) {
    .sp-page.sp-home { padding-top: 12px; }
    .sp-home-appbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
    .sp-hero { flex-direction: column; min-height: 170px; padding: 22px 20px; border-radius: 22px; }
    .sp-hero::before { inset: 0 0 0 30%; background-position: 40% 20%; }
    .sp-hero::after { background: linear-gradient(90deg, #14161c 0%, rgba(20,22,28,.85) 35%, rgba(20,22,28,.2) 75%, rgba(20,22,28,.35) 100%), radial-gradient(circle at 70% 40%, rgba(255,120,40,.3), transparent 50%); }
    .sp-hero h1 { font-size: 1.9rem; }
    .sp-hero h1 span { display: block; }
    .sp-hero p { font-size: .92rem; max-width: 70%; }
    .sp-hero-side, .sp-hero-chips { display: none; }
    .sp-kpis { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
    .sp-kpi { flex-direction: column; gap: 6px; padding: 12px 6px; text-align: center; border-radius: 16px; background: var(--tb, #fff); box-shadow: none; }
    .sp-kpis > .sp-kpi:nth-child(1) { --tb: #fff4ee; } .sp-kpis > .sp-kpi:nth-child(2) { --tb: #effaf3; }
    .sp-kpis > .sp-kpi:nth-child(3) { --tb: #f5f2ff; } .sp-kpis > .sp-kpi:nth-child(4) { --tb: #fff8e8; }
    .sp-kpi-ico { width: 34px; height: 34px; background: transparent; border-radius: 0; }
    .sp-kpi-ico svg { width: 28px; height: 28px; }
    .sp-kpi-tx strong { font-size: 1.15rem; }
    .sp-kpi-tx small { font-size: .7rem; white-space: normal; line-height: 1.2; }
    .sp-kpi-chev { display: none; }
    .sp-today { grid-template-columns: 1fr; padding: 14px; gap: 10px; }
    .sp-today-rows { grid-template-columns: 1fr; }
    .sp-quick { display: block; padding: 0; background: none; box-shadow: none; }
    .sp-quick-head { justify-content: space-between; margin-bottom: 12px; }
    .sp-quick-badge { display: none; }
    .sp-quick .sp-more-btn { display: inline-flex; }
    .sp-quick-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .sp-quick:not(.is-all) .sp-quick-item:nth-child(n+5) { display: none; }
    .sp-quick-item { justify-content: flex-start; min-height: 62px; background: #fff; color: var(--sp-ink); font-weight: 500; font-size: .9rem; box-shadow: var(--sp-shadow); }
    .sp-quick-item .sp-quick-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--tb); color: var(--t); }
    .sp-quick-item .sp-quick-ico svg { width: 22px; height: 22px; }
    .sp-recent { display: block; margin-bottom: 18px; }
    .sp-recent .sp-quick-head { margin-bottom: 12px; }
    .sp-modules { grid-template-columns: 1fr; gap: 12px; }
    .sp-module { padding: 0; overflow: hidden; }
    .sp-module-head { padding: 14px 16px; cursor: pointer; }
    .sp-module.is-open .sp-module-head { background: #fff4ee; }
    .sp-module-head h2 { font-size: 1.02rem; }
    .sp-module-ico { width: 44px; height: 44px; border-radius: 12px; }
    .sp-module-chev { display: block; }
    .sp-module.is-open .sp-module-chev { transform: rotate(180deg); }
    .sp-module:not(.is-open) .sp-module-body { display: none; }
    .sp-module-body { gap: 0; padding: 4px 12px 8px; }
    .sp-module-row { border: 0; border-bottom: 1px solid #f0f1f4; border-radius: 0; padding: 0 6px 0 10px; min-height: 50px; }
    .sp-module-row:last-child { border-bottom: 0; }
    .sp-module-row-ico { color: #4a5160; }
    .sp-account { justify-content: stretch; }
    .sp-account-btn { flex: 1; justify-content: center; }
}
/* Masaüstü sırası: … modüller → hızlı işlemler → hesap (mobilde hızlı işlemler üstte kalır) */
.sp-page.sp-home { display: flex; flex-direction: column; }
@media (min-width: 761px) {
    .sp-home > .sp-account { order: 2; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SPORION — SPORCULARIM (Pages/Sporcularim.razor)
   ══════════════════════════════════════════════════════════════════════════ */
.sp-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sp-stats--plain .sp-stat { padding: 18px 22px; border: 0; text-align: left; font-family: inherit; color: inherit; }
button.sp-stat { cursor: pointer; transition: box-shadow .18s, transform .18s; }
button.sp-stat:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(15,27,42,.05), 0 18px 34px -16px rgba(15,27,42,.22); }
.sp-stats--plain .sp-stat strong { font-size: 1.75rem; }
.sp-stat strong.is-green { color: var(--sp-green); }
.sp-stat strong.is-amber { color: #e08a00; }
.sp-stat strong.is-gray { color: var(--sp-gray); }

.sp-sp-tabs { margin-bottom: 16px; flex-wrap: wrap; }
.sp-sp-tabs button { background: #fff; box-shadow: var(--sp-shadow); }
.sp-sp-tabs button.active { background: var(--sp-orange); }
.sp-sp-filters { grid-template-columns: minmax(0, 1fr) 190px 190px 190px 50px; margin-bottom: 14px; }
.sp-page .sp-select select:disabled { opacity: .6; cursor: not-allowed; }
.sp-sp-more { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: -2px 0 16px; padding: 14px 16px; background: #fff; border-radius: 16px; box-shadow: var(--sp-shadow); }
.sp-sp-more .sp-select { width: 240px; box-shadow: none; background: var(--sp-field); }
.sp-toggle { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: .92rem; color: var(--sp-ink); cursor: pointer; }
.sp-toggle input { appearance: none; -webkit-appearance: none; width: 40px; height: 22px; margin: 0; border-radius: 999px; background: #d5d9e0; position: relative; cursor: pointer; transition: background .15s; flex: none; }
.sp-toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.sp-toggle input:checked { background: var(--sp-orange); }
.sp-toggle input:checked::after { transform: translateX(18px); }
.sp-info { margin: 0 0 14px; padding: 12px 16px; border-radius: 12px; background: #e9f1ff; color: #1d4f9c; font-size: .9rem; }

.sp-sp-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
.sp-sp.has-panel .sp-sp-body { grid-template-columns: minmax(0, 1fr) 340px; }
.sp-table-card { background: #fff; border-radius: var(--sp-radius); box-shadow: var(--sp-shadow); overflow: visible; }
.sp-table { display: flex; flex-direction: column; }
.sp-tr {
    display: grid; align-items: center; gap: 12px;
    grid-template-columns: minmax(200px, 2.2fr) 1fr 1fr 1fr 1.4fr .8fr 1.3fr 44px;
    padding: 10px 14px 10px 18px; border-bottom: 1px solid #f0f1f4; min-height: 64px;
}
.sp-tr:last-child { border-bottom: 0; }
.sp-th { min-height: 46px; font-size: .82rem; font-weight: 500; color: #5a6170; }
.sp-tr:not(.sp-th):hover { background: #fafbfc; }
.sp-tr.is-gelmeyen { box-shadow: inset 3px 0 0 #f0a100; }
.sp-td { font-size: .9rem; color: #3b4150; min-width: 0; }
.sp-td-name { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font-family: inherit; }
.sp-td-name > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.sp-td-name strong { font-size: .95rem; color: var(--sp-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-td-name:hover strong { color: var(--sp-orange); }
.sp-td-name small { font-size: .78rem; color: var(--sp-muted); }
.sp-td-note { display: block; margin-top: 4px; font-size: .74rem; color: var(--sp-muted); }
.sp-td .sp-badge { height: 26px; padding: 0 12px; font-size: .78rem; }
.sp-td .sp-badge + .sp-badge { margin-left: 4px; }
.sp-badge--kirmizi { background: var(--sp-red-soft); color: #d93036; }
.sp-td-menu { display: flex; justify-content: flex-end; }
.sp-avatar-s { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; overflow: hidden; background: #eef0f3; color: #4a5160; font-weight: 700; font-size: .85rem; }
.sp-avatar-s img { width: 100%; height: 100%; object-fit: cover; }
.sp-pill { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 8px; font-size: .78rem; font-weight: 500; white-space: nowrap; }
.sp-pill--blue { background: #e9f1ff; color: #2f6fe4; }
.sp-pill--red { background: #fdecec; color: #d93036; }
.sp-kalan { font-weight: 600; }
.sp-kalan--green { color: var(--sp-green); }
.sp-kalan--orange { color: #e07a00; }
.sp-kalan--red { color: #e5484d; }
.sp-kalan--muted { color: var(--sp-muted); font-weight: 400; }
.sp-menu-list.sp-menu-list--down { top: calc(100% + 4px); bottom: auto; }

.sp-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-top: 1px solid #f0f1f4; }
.sp-pager-btns { display: flex; align-items: center; gap: 8px; }
.sp-pager-btns button { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid #e3e6eb; border-radius: 10px; background: #fff; color: var(--sp-ink); font: 500 .9rem var(--bs-font); cursor: pointer; }
.sp-pager-btns button svg { width: 18px; height: 18px; }
.sp-pager-btns button.active { background: var(--sp-orange); border-color: var(--sp-orange); color: #fff; }
.sp-pager-btns button:disabled { opacity: .4; cursor: default; }
.sp-pager-gap { color: var(--sp-muted); padding: 0 4px; }

.sp-del-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid #f0f1f4; flex-wrap: wrap; }
.sp-del-row:last-child { border-bottom: 0; }
.sp-del-tx { flex: 1; min-width: 200px; display: flex; flex-direction: column; }
.sp-del-tx strong { color: var(--sp-navy); }
.sp-del-tx small { color: var(--sp-muted); font-size: .82rem; }

.sp-sp-panel-hint { margin: 0 0 14px; line-height: 1.45; }
.sp-sp-types { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.sp-sp-type {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 130px; padding: 14px 10px;
    border-radius: 16px; background: #f4f5f7; color: var(--sp-navy); text-align: center; text-decoration: none; border: 1.5px solid transparent;
    transition: border-color .15s, background .15s;
}
.sp-sp-type svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sp-sp-type strong { font-size: .9rem; }
.sp-sp-type small { font-size: .74rem; color: var(--sp-muted); }
.sp-sp-type:hover { border-color: #ffc9ae; }
.sp-sp-type.is-orange { background: #fff1ea; color: var(--sp-orange); }
.sp-sp-panel-close { width: 100%; }

@media (max-width: 1180px) {
    .sp-sp.has-panel .sp-sp-body { grid-template-columns: minmax(0, 1fr); }
    .sp-sp-filters { grid-template-columns: minmax(0,1fr) 1fr 1fr 1fr 50px; }
    .sp-tr { grid-template-columns: minmax(180px, 2fr) 1fr 1fr 1fr 1.2fr .8fr 1.2fr 44px; font-size: .85rem; }
}

/* Telefon + dar tablet: tablo → kart (ad + menü üstte, diğer alanlar etiketli satırlar) */
@media (max-width: 900px) {
    .sp-tr.sp-th { display: none; }
    .sp-tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 12px 12px 14px; }
    .sp-tr > .sp-td-name { flex: 1 1 calc(100% - 60px); order: 0; }
    .sp-tr > .sp-td-menu { flex: 0 0 auto; order: 1; }
    .sp-tr > .sp-td:not(.sp-td-name):not(.sp-td-menu) { order: 2; display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; }
    .sp-tr > .sp-td[data-l]::before { content: attr(data-l) ":"; color: var(--sp-muted); font-weight: 400; }
    .sp-tr > .sp-td[data-l="Kayıt"]::before, .sp-tr > .sp-td[data-l="Durum"]::before { content: none; }
    .sp-tr > .sp-td[data-l="Durum"] { flex-wrap: wrap; }
}@media (max-width: 760px) {
    .sp-sp-filters { grid-template-columns: 1fr 1fr; gap: 10px; position: static; }
    .sp-sp-filters .sp-search { grid-column: 1 / -1; }
    .sp-sp-filters .sp-icon-btn { position: static; width: auto; height: 50px; box-shadow: var(--sp-shadow); background: #fff; border-radius: 14px; }
    .sp-sp-filters .sp-icon-btn.is-on { background: var(--sp-orange); }
    .sp-sp-tabs { flex-wrap: nowrap; }
    .sp-stats.sp-stats--plain { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .sp-stats--plain .sp-stat { padding: 14px 16px; }
    .sp-stats--plain .sp-stat strong { font-size: 1.35rem; }
    .sp-stats--plain .sp-stat small { font-size: .85rem; }
    .sp-sp .sp-sl-add { display: inline-flex; min-width: 0; padding: 0 16px; }
    .sp-sp .sp-sl-add span { display: none; }
    .sp-pager { flex-direction: column; }
    .sp-sp-more .sp-select { width: 100%; }
}
/* Ana sayfa özet kartları ikonsuz: metin kartın sol kenarından başlar */
.sp-kpis .sp-kpi { padding: 20px 20px 20px 24px; min-height: 96px; }
@media (max-width: 760px) { .sp-kpis .sp-kpi { padding: 14px 6px; min-height: 0; justify-content: center; } }

/* Hızlı işlemler: sade (nötr) görünüm; üzerine gelince / odakta Sporion turuncusu */
.sp-quick .sp-quick-badge { background: #f1f3f6; color: #4a5160; }
.sp-quick .sp-quick-item {
    background: #f6f7f9; color: #1d2433; border: 1px solid #eceef2;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.sp-quick .sp-quick-item .sp-quick-ico { color: #4a5160; background: transparent; transition: color .15s, background .15s; }
.sp-quick .sp-quick-item:hover, .sp-quick .sp-quick-item:focus-visible {
    background: #ff5a1f; border-color: #ff5a1f; color: #fff; filter: none;
    box-shadow: 0 10px 22px -12px rgba(255,90,31,.8); outline: none;
}
.sp-quick .sp-quick-item:hover .sp-quick-ico, .sp-quick .sp-quick-item:focus-visible .sp-quick-ico { color: #fff; }
@media (max-width: 760px) {
    .sp-quick .sp-quick-item { background: #fff; border-color: #eceef2; }
    .sp-quick .sp-quick-item .sp-quick-ico { background: #f1f3f6; }
    .sp-quick .sp-quick-item:hover .sp-quick-ico, .sp-quick .sp-quick-item:focus-visible .sp-quick-ico { background: rgba(255,255,255,.2); }
}
/* Karşılamanın hemen altında: alt boşluk özet kartlarıyla aynı ritimde */
.sp-home > .sp-quick { margin-bottom: 16px; }
/* Hızlı işlemler geniş ekranda tek satır: daha dar sütun, metin bölünmez */
@media (min-width: 761px) {
    .sp-quick .sp-quick-grid { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
    .sp-quick .sp-quick-item { padding: 0 12px; gap: 8px; font-size: .88rem; white-space: nowrap; }
    .sp-quick .sp-quick-item .sp-quick-ico svg { width: 20px; height: 20px; }
    .sp-quick .sp-quick-head { gap: 14px; }
    .sp-quick .sp-quick-badge { width: 48px; height: 48px; border-radius: 14px; }
    .sp-quick .sp-quick-badge svg { width: 24px; height: 24px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SPORION — YÖNETİM PANELİ (Pages/Dashboard.razor) — sade/minimal
   ══════════════════════════════════════════════════════════════════════════ */
.sp-dash-head { margin-bottom: 22px; }
.sp-dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-bottom: 16px; }
.sp-dash-kpi { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px; background: #fff; border-radius: 20px; box-shadow: var(--sp-shadow); }
.sp-dash-kpi small { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8a909c; }
.sp-dash-kpi strong { font-size: 2rem; font-weight: 800; color: var(--sp-navy); line-height: 1.1; }
.sp-dash-kpi span { font-size: .9rem; color: #4a5160; }
.sp-dash-kpi.is-accent { background: var(--sp-navy); }
.sp-dash-kpi.is-accent small { color: rgba(255,255,255,.6); }
.sp-dash-kpi.is-accent strong { color: #ff6a2b; }
.sp-dash-kpi.is-accent span { color: rgba(255,255,255,.85); }
.sp-dash-split { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.sp-dash-split span { display: flex; align-items: baseline; gap: 8px; font-size: .9rem; line-height: 1.25; color: #4a5160; }
.sp-dash-split b { flex: none; min-width: 22px; font-size: 1.15rem; font-weight: 800; color: var(--sp-navy); }

.sp-dash-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.sp-dash-card { padding: 20px 22px; background: #fff; border-radius: 20px; box-shadow: var(--sp-shadow); }
.sp-dash-card h2 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; font-size: 1.1rem; font-weight: 700; color: var(--sp-navy); }
.sp-dash-card h2 small { font-size: .8rem; font-weight: 500; color: #8a909c; }
.sp-dash-rows { display: flex; flex-direction: column; }
.sp-dash-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f1f4; font-size: .92rem; color: #3b4150; }
.sp-dash-row:last-child { border-bottom: 0; }
.sp-dash-row strong { font-weight: 700; color: var(--sp-navy); }
.sp-dash-row--head { padding: 4px 0 8px; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8a909c; }
.sp-dash-row--head, .sp-dash-row--3 { display: grid; grid-template-columns: minmax(0,1fr) 64px 64px; }
.sp-dash-row--head span:not(:first-child), .sp-dash-row--3 strong { text-align: right; }
.sp-dash-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-dash-row strong.is-live { color: var(--sp-orange); }
.is-green { color: var(--sp-green) !important; }
.is-red { color: #e5484d !important; }
.sp-dash-total { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 14px 16px; border-radius: 14px; background: #f6f7f9; }
.sp-dash-total span { font-weight: 600; color: var(--sp-navy); }
.sp-dash-total strong { font-size: 1.35rem; font-weight: 800; color: var(--sp-navy); }
.sp-dash-empty { margin: 4px 0 2px; color: var(--sp-muted); font-size: .92rem; }

.sp-dash-brans-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.sp-dash-brans { padding: 14px 16px; border: 1px solid #eef0f3; border-radius: 16px; }
.sp-dash-brans h3 { margin: 0 0 6px; font-size: 1rem; font-weight: 700; color: var(--sp-orange); }
.sp-dash-grp { margin: 8px 0 0; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8a909c; }
.sp-dash-brans .sp-dash-row { padding: 7px 0; font-size: .88rem; }

@media (max-width: 1180px) {
    .sp-dash-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .sp-dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .sp-dash-kpis { gap: 10px; }
    .sp-dash-kpi { padding: 14px 16px; border-radius: 16px; }
    .sp-dash-kpi strong { font-size: 1.5rem; }
    .sp-dash-kpi span { font-size: .8rem; }
    .sp-dash-card { padding: 16px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SPORION — SPORCU KAYIT (SporcuKayitMerkezi + SporOkuluKayitPage/YarismaciKayitPage)
   ══════════════════════════════════════════════════════════════════════════ */
.sp-kayit-head { margin-bottom: 20px; }
.sp-kayit-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 760px; margin-bottom: 20px; }
.sp-kayit-tab {
    position: relative; display: flex; flex-direction: column; gap: 3px; padding: 16px 20px; text-align: left;
    border: 1.5px solid transparent; border-radius: 18px; background: #fff; box-shadow: var(--sp-shadow); cursor: pointer;
    transition: border-color .15s, background .15s;
}
.sp-kayit-tab strong { font-size: 1.02rem; font-weight: 700; color: var(--sp-navy); }
.sp-kayit-tab span { font-size: .86rem; color: var(--sp-muted); }
.sp-kayit-tab:hover:not(.active) { border-color: #ffd3c1; }
.sp-kayit-tab.active { border-color: var(--sp-orange); background: var(--sp-orange-soft); }
.sp-kayit-tab.active strong { color: #d9480f; }
.sp-kayit-tab:focus-visible { outline: 2px solid var(--sp-orange); outline-offset: 2px; }

.sp-kf { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.sp-kf-card { padding: 24px; background: #fff; border-radius: 20px; box-shadow: var(--sp-shadow); }
.sp-kf-sec + .sp-kf-sec { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--sp-line); }
.sp-kf-title { display: flex; align-items: baseline; gap: 8px; margin: 0 0 14px; font-size: 1.05rem; font-weight: 700; color: var(--sp-navy); }
.sp-kf-title small { font-size: .8rem; font-weight: 600; color: var(--sp-muted); }
.sp-kf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.sp-kf-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-kf-opts + .sp-kf-grid, .sp-kf-hint + .sp-kf-grid { margin-top: 14px; }
.sp-kf-grid + .sp-kf-uploads { margin-top: 14px; }
.sp-kf-span2 { grid-column: span 2; }
.sp-kf-field { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }
.sp-kf-field > span { font-size: .85rem; font-weight: 500; color: #4a5160; }
.sp-page .sp-kf-input {
    width: 100%; height: 48px; padding: 0 14px; border: 1.5px solid transparent; border-radius: 12px;
    background: var(--sp-field); color: var(--sp-ink); font-family: inherit; font-size: .95rem; outline: none;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.sp-page select.sp-kf-input {
    appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a5160' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center;
}
.sp-page .sp-kf-input::placeholder { color: #8f95a1; }
.sp-page .sp-kf-input:focus { background-color: #fff; border-color: var(--sp-orange); box-shadow: 0 0 0 4px rgba(255,90,31,.12); }
.sp-page .sp-kf-input:disabled { opacity: .65; cursor: not-allowed; }
.sp-kf-input::-webkit-outer-spin-button, .sp-kf-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sp-kf-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.sp-kf-hint { margin: 10px 0 0; color: var(--sp-muted); font-size: .85rem; }
.sp-kf-note { margin-bottom: 22px; padding: 16px 18px; border-radius: 14px; background: var(--sp-orange-soft); color: #5b3a2c; font-size: .9rem; }
.sp-kf-note p { margin: 6px 0 12px; line-height: 1.45; }
.sp-kf-note a.sp-btn { background: #fff; text-decoration: none; }
.sp-kf-note a.sp-btn:hover { background: #fff7f3; }
.sp-kf-uploads { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.sp-kf-upload {
    display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; text-align: left; cursor: pointer;
    border: 1.5px dashed #d5d9e0; border-radius: 14px; background: #fff; transition: border-color .15s, background .15s;
}
.sp-kf-upload strong { font-size: .95rem; font-weight: 600; color: var(--sp-navy); }
.sp-kf-upload span { font-size: .8rem; color: var(--sp-muted); }
.sp-kf-upload:hover { border-color: var(--sp-orange); background: #fffaf7; }
.sp-kf-upload.is-done { border-style: solid; border-color: #b7e4c7; background: var(--sp-green-soft); }
.sp-kf-upload.is-done strong { color: var(--sp-green); }
.sp-kf-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--sp-line); }
.sp-kf-actions p { flex: 1; margin: 0; }
.sp-kf-actions .sp-btn { min-width: 200px; }
.sp-kf-ok { padding: 12px 14px; border-radius: 12px; background: var(--sp-green-soft); color: #17803f; font-size: .88rem; font-weight: 500; }

.sp-kf-side { position: sticky; top: 20px; max-height: calc(100vh - 140px); overflow-y: auto; }
.sp-kf-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.sp-kf-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--sp-line); }
.sp-kf-item:last-child { border-bottom: 0; }
.sp-kf-item .sp-avatar-s { width: 38px; height: 38px; font-size: .8rem; }
.sp-kf-item-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sp-kf-item-text strong, .sp-kf-item-text span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sp-kf-item-text strong { font-size: .92rem; font-weight: 600; color: var(--sp-navy); }
.sp-kf-item-text span { font-size: .8rem; color: var(--sp-muted); }
.sp-kf-kalan { font-size: .78rem; color: #4a5160; white-space: nowrap; }
.sp-kf-del { flex: none; padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--sp-red); font-size: .82rem; font-weight: 600; cursor: pointer; }
.sp-kf-del:hover { background: var(--sp-red-soft); }

@media (max-width: 1100px) {
    .sp-kf { grid-template-columns: 1fr; }
    .sp-kf-side { position: static; max-height: 460px; }
}
@media (max-width: 640px) {
    .sp-kayit-tabs { gap: 8px; }
    .sp-kayit-tab { padding: 12px 14px; border-radius: 14px; }
    .sp-kayit-tab strong { font-size: .92rem; }
    .sp-kayit-tab { justify-content: center; text-align: center; }
    .sp-kayit-tab span { display: none; }
    .sp-kf-card { padding: 18px 16px; border-radius: 16px; }
    .sp-kf-grid, .sp-kf-grid--3 { grid-template-columns: 1fr; }
    .sp-kf-span2 { grid-column: auto; }
    .sp-kf-actions { flex-direction: column; align-items: stretch; }
    .sp-kf-actions .sp-btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SPORION — YOKLAMA (YoklamaMenu + AntrenmanSporOkuluYoklama/AntrenmanYarismaciYoklama/MusabakaYoklama)
   Sekmeler ve form alanları Sporcu Kayıt ile ortak (.sp-kayit-*, .sp-kf-*).
   ══════════════════════════════════════════════════════════════════════════ */
.sp-kayit-tabs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1040px; }
.sp-yk { display: flex; flex-direction: column; gap: 16px; }
.sp-yk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sp-yk-now { flex: none; padding: 4px 12px; border-radius: 999px; background: var(--sp-field); color: #4a5160; font-size: .82rem; font-weight: 600; }
.sp-yk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.sp-yk-slot { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; border: 1.5px solid var(--sp-line); border-radius: 16px; background: #fff; transition: border-color .15s, background .15s; }
.sp-yk-slot.is-active { border-color: var(--sp-orange); background: var(--sp-orange-soft); }
.sp-yk-slot-text { flex: 1; width: 100%; margin: 0; font-family: inherit; font-size: .88rem; line-height: 1.55; color: var(--sp-ink); white-space: pre-wrap; word-break: break-word; }
.sp-yk-done { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 8px; background: var(--sp-green-soft); color: var(--sp-green); font-size: .78rem; font-weight: 600; }
.sp-yk-gap { margin-top: 14px; }
.sp-page textarea.sp-kf-input.sp-kf-textarea { height: auto; min-height: 110px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.sp-yk-list { display: flex; flex-direction: column; margin-top: 18px; border-top: 1px solid var(--sp-line); }
.sp-yk-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--sp-line); }
.sp-yk-row:last-child { border-bottom: 0; }
.sp-yk-row .sp-avatar-s { width: 40px; height: 40px; font-size: .8rem; }
.sp-page .sp-yk .bs-yoklama-durum-btns { display: flex; flex: none; width: auto; gap: 4px; margin: 0; padding: 4px; border: 0; border-radius: 12px; background: var(--sp-field); }
.sp-page .sp-yk .bs-btn-yoklama-durum {
    min-width: 0; height: 36px; margin: 0; padding: 0 14px; border: 0; border-radius: 9px; background: none; box-shadow: none;
    color: #4a5160; font-family: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; transition: background .15s, color .15s;
}
.sp-page .sp-yk .bs-btn-yoklama-durum:hover:not(.bs-active):not(:disabled) { background: #fff; }
.sp-page .sp-yk .bs-btn-yoklama-katildi.bs-active { background: var(--sp-green); color: #fff; }
.sp-page .sp-yk .bs-btn-yoklama-izinli.bs-active { background: var(--sp-amber); color: #fff; }
.sp-page .sp-yk .bs-btn-yoklama-katilmadi.bs-active { background: var(--sp-red); color: #fff; }

@media (max-width: 640px) {
    .sp-kayit-tabs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .sp-kayit-tabs--3 .sp-kayit-tab { padding: 10px 8px; }
    .sp-kayit-tabs--3 .sp-kayit-tab strong { font-size: .8rem; }
    .sp-yk-head { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 12px; }
    .sp-yk-head .sp-kf-title { margin-bottom: 6px; }
    .sp-yk-slots { grid-template-columns: 1fr; }
    .sp-yk-row { flex-wrap: wrap; }
    .sp-page .sp-yk .bs-yoklama-durum-btns { width: 100%; }
    .sp-page .sp-yk .bs-btn-yoklama-durum { flex: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SPORION — ANTRENMAN / MÜSABAKA ATAMASI (AtamaMenu + AntrenmanAtamaPage)
   Sekmeler ve form alanları Sporcu Kayıt ile ortak (.sp-kayit-*, .sp-kf-*).
   ══════════════════════════════════════════════════════════════════════════ */
.sp-at-chip {
    display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px 0 8px;
    border: 1.5px solid transparent; border-radius: 999px; background: var(--sp-field); color: var(--sp-ink);
    font-family: inherit; font-size: .88rem; cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.sp-at-chip:hover:not(.active) { border-color: #ffd3c1; }
.sp-at-chip-tik { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #4a5160; font-size: .85rem; font-weight: 700; }
.sp-at-chip.active { border-color: var(--sp-orange); background: var(--sp-orange-soft); color: #d9480f; font-weight: 600; }
.sp-at-chip.active .sp-at-chip-tik { background: var(--sp-orange); color: #fff; }
.sp-at-chip:focus-visible { outline: 2px solid var(--sp-orange); outline-offset: 2px; }
.sp-at-note { margin-left: 4px; font-size: .75rem; font-weight: 500; color: var(--sp-muted); }

.sp-at-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.sp-at-day { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1.5px solid var(--sp-line); border-radius: 16px; background: #fff; }
.sp-at-day.is-off { background: #fafbfc; border-style: dashed; }
.sp-at-day-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.sp-at-day-head div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-at-day-head strong { font-size: .95rem; font-weight: 700; color: var(--sp-navy); }
.sp-at-day-head span { font-size: .8rem; color: var(--sp-muted); }
.sp-at-day.is-off .sp-at-day-head strong { color: var(--sp-muted); text-decoration: line-through; }
.sp-at-day-btn { flex: none; padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--sp-red); font-family: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.sp-at-day-btn:hover { background: var(--sp-red-soft); }
.sp-at-day-btn.geri { color: var(--sp-green); }
.sp-at-day-btn.geri:hover { background: var(--sp-green-soft); }
.sp-at-off-note { margin: 0; font-size: .82rem; color: var(--sp-muted); }
.sp-at-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sp-at-times .sp-kf-input { height: 44px; }
.sp-at .sp-kf-actions .sp-btn--ghost { min-width: 0; }

@media (max-width: 640px) {
    .sp-at-days { grid-template-columns: 1fr; }
    .sp-at-chip { font-size: .84rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SPORION — TAKVİM & REZERVASYON (Pages/Takvim.razor)
   ══════════════════════════════════════════════════════════════════════════ */
.sp-tk { display: flex; flex-direction: column; gap: 16px; }
.sp-tk-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.sp-tk-form .sp-kf-actions { margin-top: 18px; }
.sp-tk-listhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.sp-tk-listhead .sp-kf-title { margin: 0; }
.sp-tk-filter { gap: 6px; }
.sp-tk-filter button { height: 36px; padding: 0 14px; font-size: .84rem; background: var(--sp-field); }
.sp-tk-filter button span { margin-left: 4px; opacity: .6; font-size: .78rem; }
.sp-tk-filter button.active span { opacity: .85; }
.sp-tk-empty { margin: 14px 0 4px; }
.sp-tk-day + .sp-tk-day { margin-top: 6px; }
.sp-tk-dayhead { margin: 16px 0 4px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a909c; }
.sp-tk-item { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--sp-line); }
.sp-tk-day .sp-tk-item:last-child { border-bottom: 0; }
.sp-tk-date { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 52px; height: 52px; border-radius: 14px; background: var(--sp-orange-soft); }
.sp-tk-date strong { font-size: 1.15rem; font-weight: 800; line-height: 1; color: var(--sp-orange); }
.sp-tk-date span { margin-top: 2px; font-size: .66rem; font-weight: 600; text-transform: uppercase; color: #d9480f; }
.sp-tk-text { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
.sp-tk-text strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .95rem; font-weight: 600; color: var(--sp-navy); }
.sp-tk-text span { font-size: .84rem; color: var(--sp-muted); }
.sp-tk-tur { flex: none; display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 8px; font-size: .76rem; font-weight: 600; background: var(--sp-gray-soft); color: var(--sp-gray); }
.sp-tk-tur--antrenman { background: #e9f1ff; color: #2f6fe4; }
.sp-tk-tur--mac { background: var(--sp-orange-soft); color: #d9480f; }
.sp-tk-tur--etkinlik { background: var(--sp-green-soft); color: var(--sp-green); }
.sp-tk-del { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border: 0; border-radius: 10px; background: none; color: #8a909c; cursor: pointer; }
.sp-tk-del svg { width: 20px; height: 20px; }
.sp-tk-del:hover { background: var(--sp-red-soft); color: var(--sp-red); }

@media (max-width: 640px) {
    .sp-tk-head .sp-btn { width: 100%; }
    .sp-tk-item { position: relative; gap: 10px; flex-wrap: wrap; padding-right: 40px; }
    .sp-tk-del { position: absolute; top: 10px; right: 0; }
    .sp-tk-text { flex-basis: calc(100% - 64px); }
    .sp-tk-tur { margin-left: 62px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SPORION — BRANŞ / KATEGORİ (BransKategoriSalonMenu + BransKategori/BransKategoriKaldir/BransKategoriEdit)
   ══════════════════════════════════════════════════════════════════════════ */
.sp-bk-head-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sp-bk-head-actions a.sp-btn { text-decoration: none; }
.sp-bk-note { margin-bottom: 20px; line-height: 1.45; }
.sp-bk-nums { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-bk-nums--kredi { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
.sp-bk-num {
    min-width: 52px; height: 40px; padding: 0 14px; border: 1.5px solid transparent; border-radius: 12px;
    background: var(--sp-field); color: var(--sp-ink); font-family: inherit; font-size: .88rem; font-weight: 500; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.sp-bk-num:hover:not(.active) { border-color: #ffd3c1; }
.sp-bk-num.active { border-color: var(--sp-orange); background: var(--sp-orange); color: #fff; font-weight: 600; }
.sp-bk-nums + .sp-kf-title { margin-top: 20px; }
.sp-bk-edit { flex: none; padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--sp-navy); font-family: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.sp-bk-edit:hover { background: var(--sp-field); }
.sp-bk-back { display: inline-block; margin-bottom: 6px; font-size: .88rem; }
.sp-bk-edit-card { max-width: 760px; }
.sp-bk-rows { display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
.sp-bk-row { display: flex; align-items: center; gap: 10px; }
.sp-bk-row .sp-kf-input { flex: 1; }
.sp-bk-row .sp-btn { min-height: 48px; }
.sp-bk-liste { max-width: 760px; }
.sp-bk-lead { margin: -4px 0 18px; line-height: 1.45; }

/* Branş Listesi paneli (BransEkleKaldirPanel — koyu modalda da kullanıldığı için yalnız .sp-page içinde açık tema) */
.sp-page .bs-brans-ekle-kaldir-panel { display: flex; flex-direction: column; gap: 8px; }
.sp-page .bs-brans-ekle-kaldir-panel .bs-segment-row { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 260px; max-width: 100%; margin: 0 0 10px; padding: 4px; border: 0; border-radius: 14px; background: var(--sp-field); }
.sp-page .bs-brans-ekle-kaldir-panel .bs-segment { min-height: 0; height: 40px; margin: 0; border: 0; border-radius: 10px; background: none; box-shadow: none; color: #4a5160; font-family: inherit; font-size: .9rem; font-weight: 500; cursor: pointer; }
.sp-page .bs-brans-ekle-kaldir-panel .bs-segment.active { background: #fff; color: var(--sp-navy); font-weight: 600; box-shadow: 0 1px 3px rgba(15,27,42,.12); }
.sp-page .bs-brans-ekle-kaldir-panel .bs-label { margin: 6px 0 0; color: #4a5160; font-size: .85rem; font-weight: 500; }
.sp-page .bs-brans-ekle-kaldir-panel .bs-input {
    width: 100%; max-width: 520px; height: 48px; margin: 0; padding: 0 14px; border: 1.5px solid transparent; border-radius: 12px;
    background: var(--sp-field); color: var(--sp-ink); font-family: inherit; font-size: .95rem; box-shadow: none; outline: none;
}
.sp-page .bs-brans-ekle-kaldir-panel select.bs-input {
    appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a5160' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center;
}
.sp-page .bs-brans-ekle-kaldir-panel select.bs-input option { color: #1d2433; background: #fff; }
.sp-page .bs-brans-ekle-kaldir-panel .bs-input::placeholder { color: #8f95a1; }
.sp-page .bs-brans-ekle-kaldir-panel .bs-input:focus { background-color: #fff; border-color: var(--sp-orange); box-shadow: 0 0 0 4px rgba(255,90,31,.12); }
.sp-page .bs-brans-ekle-kaldir-panel .bs-btn-primary {
    align-self: flex-start; width: auto; min-height: 48px; margin-top: 10px; padding: 0 26px; border: 0; border-radius: 14px; text-transform: none; letter-spacing: normal;
    background: var(--sp-orange); color: #fff; font-family: inherit; font-size: 1rem; font-weight: 600; box-shadow: 0 10px 22px -12px rgba(255,90,31,.9); cursor: pointer;
}
.sp-page .bs-brans-ekle-kaldir-panel .bs-btn-primary:hover { background: #f04f16; }
.sp-page .bs-brans-ekle-kaldir-panel .bs-error { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--sp-red-soft); color: #b42318; font-size: .88rem; }
.sp-page .bs-brans-ekle-kaldir-panel .bs-success { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--sp-green-soft); color: #17803f; font-size: .88rem; }
.sp-page .bs-brans-ekle-kaldir-panel .bs-muted { color: var(--sp-muted); font-size: .9rem; }
.sp-page .bs-brans-ekle-kaldir-panel .bs-list { display: flex; flex-direction: column; max-width: 520px; margin: 8px 0 0; padding: 0; list-style: none; }
.sp-page .bs-brans-ekle-kaldir-panel .bs-list-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 0; border: 0; border-bottom: 1px solid var(--sp-line); border-radius: 0; background: none; box-shadow: none; color: var(--sp-navy); font-size: .92rem; font-weight: 500; }
.sp-page .bs-brans-ekle-kaldir-panel .bs-list-item:last-child { border-bottom: 0; }
.sp-page .bs-brans-ekle-kaldir-panel .bs-btn-danger-sm { flex: none; min-height: 0; padding: 6px 10px; border: 0; border-radius: 8px; background: none; box-shadow: none; color: var(--sp-red); font-family: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.sp-page .bs-brans-ekle-kaldir-panel .bs-btn-danger-sm:hover { background: var(--sp-red-soft); }

@media (max-width: 640px) {
    .sp-bk-head-actions { width: 100%; }
    .sp-bk-head-actions .sp-btn { flex: 1; }
    .sp-page .bs-brans-ekle-kaldir-panel .bs-btn-primary { align-self: stretch; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SPORION — FİNANS: MUHASEBE (MuhasebePanel), RAPORLAR, RAPOR LİSTESİ, PLANLI ÖDEMELER
   ══════════════════════════════════════════════════════════════════════════ */
.is-amber { color: var(--sp-amber, #c27400) !important; }
.sp-muh { display: flex; flex-direction: column; gap: 16px; }
.sp-muh .sp-dash-kpis, .sp-po .sp-dash-kpis, .sp-rl-kpis { margin-bottom: 0; }
.sp-po > * + *, .sp-rl-kpis { margin-top: 16px; }
.sp-dash-kpi span b { font-weight: 700; }

.sp-muh-chart-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sp-muh-chart-h .sp-kf-title { margin-bottom: 8px; }
.sp-muh-net { font-size: .9rem; font-weight: 700; }
.sp-muh-chart-svg { display: block; width: 100%; height: 140px; }
.sp-muh-chart-x { display: flex; justify-content: space-between; margin-top: 6px; font-size: .78rem; color: var(--sp-muted); text-transform: capitalize; }

.sp-muh-tabsrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sp-muh-sectitle { margin: 18px 0 12px; }
.sp-muh-filter { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--sp-line); }
.sp-muh-filter .sp-kf-field { width: 180px; }
.sp-muh-filter .sp-btn { min-height: 48px; }
.sp-muh-filter-sum { margin-left: auto; align-self: center; font-size: .88rem; color: var(--sp-muted); }
.sp-muh-list { display: flex; flex-direction: column; }
.sp-muh-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 14px 0; border-bottom: 1px solid var(--sp-line); }
.sp-muh-list .sp-muh-row:last-child { border-bottom: 0; }
.sp-muh-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.sp-muh-main strong { font-size: .95rem; font-weight: 600; color: var(--sp-navy); }
.sp-muh-main span { font-size: .86rem; color: #4a5160; word-break: break-word; }
.sp-muh-main small { font-size: .78rem; color: var(--sp-muted); }
.sp-muh-main .sp-yk-done { align-self: flex-start; margin-top: 4px; }
.sp-muh-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.sp-muh-side > strong { font-size: 1rem; font-weight: 700; color: var(--sp-navy); white-space: nowrap; }
.sp-muh-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; flex-basis: 100%; }
.sp-muh-actions select.sp-kf-input { width: auto; min-width: 200px; height: 40px; }
.sp-muh-row.is-done { opacity: .75; }
.sp-muh-file { position: relative; overflow: hidden; cursor: pointer; }
.sp-muh-file input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sp-muh-talep { margin-top: 4px; }
.sp-muh-dekont-img { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: 12px; }

/* Açık tema pop-up (BsModal PanelClass="sp-modal") */
.bs-modal-panel.sp-modal {
    --sp-orange: #ff5a1f; --sp-orange-soft: #fff1ea; --sp-navy: #0f1b2a; --sp-ink: #1d2433; --sp-muted: #6b7280;
    --sp-line: #eceef2; --sp-field: #f1f3f6; --sp-green: #1f9d55; --sp-green-soft: #e6f6ec; --sp-red: #e5484d; --sp-red-soft: #fdecec;
    max-width: 520px; padding: 24px; border: 0; border-radius: 20px; background: #fff; color: var(--sp-ink);
    backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 30px 80px -20px rgba(15,27,42,.45); font-family: var(--bs-font);
}
.bs-modal-panel.sp-modal--lg { max-width: 760px; }
.bs-modal-panel.sp-modal .bs-modal-header h2 { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--sp-navy); }
.bs-modal-panel.sp-modal .bs-modal-close { color: #8a909c; }
.bs-modal-panel.sp-modal .bs-modal-body { white-space: normal; color: #3b4150; }
.bs-modal-panel.sp-modal .bs-modal-body p { margin: 0 0 8px; line-height: 1.5; }
.bs-modal-panel.sp-modal .sp-muted { color: var(--sp-muted); font-size: .9rem; }
.bs-modal-panel.sp-modal .sp-kf-input {
    width: 100%; height: 48px; padding: 0 14px; border: 1.5px solid transparent; border-radius: 12px;
    background: var(--sp-field); color: var(--sp-ink); font-family: inherit; font-size: .95rem; outline: none;
}
.bs-modal-panel.sp-modal select.sp-kf-input {
    appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a5160' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 16px center;
}
.bs-modal-panel.sp-modal .sp-kf-input:focus { background-color: #fff; border-color: var(--sp-orange); box-shadow: 0 0 0 4px rgba(255,90,31,.12); }
.bs-modal-panel.sp-modal .sp-btn { min-height: 46px; }

.sp-po-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.sp-po-filter .sp-kf-field { flex: 1; min-width: 180px; }
.sp-po-filter .sp-btn { min-height: 48px; }
.sp-po-pair { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.sp-po-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
.sp-po-rapor { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sp-po-rapor .sp-kf-title { align-self: flex-start; }
.sp-po-donut { width: 180px; height: 180px; }
.sp-po-donut-pct { font-size: 20px; font-weight: 800; fill: var(--sp-navy); }
.sp-po-donut-sub { font-size: 10px; fill: var(--sp-muted); }
.sp-po-legend { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 14px; }
.sp-po-legend div { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: #4a5160; }
.sp-po-legend strong { margin-left: auto; color: var(--sp-navy); }
.sp-po-dot { width: 10px; height: 10px; border-radius: 50%; background: #d5d9e0; }
.sp-po-dot.is-in { background: var(--sp-green); }
.sp-po-dot.is-out { background: var(--sp-red); }
.sp-po-row .sp-muh-side { flex-direction: row; align-items: center; gap: 10px; }
.sp-po-form { display: flex; flex-direction: column; gap: 14px; }
.sp-po-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--sp-field); }
.sp-po-seg button { height: 40px; border: 0; border-radius: 10px; background: none; color: #4a5160; font-family: inherit; font-size: .9rem; font-weight: 500; cursor: pointer; }
.sp-po-seg button.active { background: #fff; font-weight: 700; box-shadow: 0 1px 3px rgba(15,27,42,.12); }
.sp-po-seg button.is-in { color: var(--sp-green); }
.sp-po-seg button.is-out { color: var(--sp-red); }
.sp-po-taksit-check { align-self: flex-start; }
.sp-modal .sp-sf-check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--sp-field); font-size: .88rem; cursor: pointer; }
.sp-modal .sp-sf-check.active { background: var(--sp-orange-soft); }
.sp-po-taksitler { display: flex; flex-direction: column; gap: 8px; }
.sp-po-taksit { display: grid; grid-template-columns: 26px 1fr 1fr; align-items: center; gap: 8px; }
.sp-po-taksit span { font-size: .85rem; font-weight: 600; color: var(--sp-muted); }
.sp-po-taksit-toplam { padding: 10px 12px; border-radius: 12px; background: var(--sp-green-soft); color: #17803f; font-size: .85rem; }
.sp-po-taksit-toplam.is-warn { background: var(--sp-red-soft); color: #b42318; }

.sp-rl-segs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.sp-rl-sub button { background: #fff; border: 1.5px solid var(--sp-line); }

.sp-rp-group { margin: 22px 0 10px; }
.sp-rp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.sp-rp-card {
    position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px 46px 20px 22px;
    border: 1.5px solid transparent; border-radius: 18px; background: #fff; box-shadow: var(--sp-shadow);
    color: inherit; text-decoration: none; transition: border-color .15s, transform .15s;
}
.sp-rp-card strong { font-size: 1.02rem; font-weight: 700; color: var(--sp-navy); }
.sp-rp-card span { font-size: .86rem; color: var(--sp-muted); }
.sp-rp-card em { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); font-style: normal; font-size: 1.1rem; color: #b6bcc6; transition: color .15s, right .15s; }
.sp-rp-card:hover { border-color: #ffd3c1; }
.sp-rp-card:hover em { right: 16px; color: var(--sp-orange); }

@media (max-width: 1100px) {
    .sp-po-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .sp-muh-filter .sp-kf-field { width: calc(50% - 6px); }
    .sp-muh-filter-sum { margin-left: 0; width: 100%; }
    .sp-muh-actions { justify-content: flex-start; }
    .sp-muh-actions select.sp-kf-input { width: 100%; }
    .sp-po-filter .sp-kf-field { min-width: 100%; }
    .sp-po-row .sp-muh-side { flex-direction: column; align-items: flex-end; }
    .bs-modal-panel.sp-modal { padding: 18px; border-radius: 18px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SPORION — YÖNETİM (Ekipman, Bildirim Gönder, Denetim Günlüğü, Hesap Oluştur)
   Kabuk, sekmeler ve form alanları Sporcu Kayıt / Takvim ile ortak (.sp-kayit-*, .sp-kf-*, .sp-tk-*).
   ══════════════════════════════════════════════════════════════════════════ */
.sp-yn .sp-kayit-tabs, .sp-hv .sp-kayit-tabs { margin-bottom: 0; }
.sp-yn-form { max-width: 820px; }

/* Denetim günlüğü satırı: saat kutusu + işlem rozeti */
.sp-yn-time {
    display: grid; place-items: center; flex: none; width: 58px; height: 40px; border-radius: 12px;
    background: var(--sp-field); color: var(--sp-navy); font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.sp-yn-user { font-weight: 600; color: #d9480f; }
.sp-yn-act--ok { background: var(--sp-green-soft); color: var(--sp-green); }
.sp-yn-act--bad { background: var(--sp-red-soft); color: #d93036; }
.sp-yn-act--warn { background: var(--sp-amber-soft); color: var(--sp-amber); }
.sp-yn-act--info { background: #e9f1ff; color: #2f6fe4; }
.sp-yn-act--muted { background: var(--sp-gray-soft); color: var(--sp-gray); }

/* Boş durum (kart içi) */
.sp-yn-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 16px; text-align: center; color: var(--sp-muted); font-size: .9rem; }
.sp-yn-empty strong { color: var(--sp-navy); font-size: 1rem; }
.sp-yn-empty .sp-btn { margin-top: 10px; text-decoration: none; }

/* Hesap Oluştur — kayıtlı hesaplar */
.sp-yn-filters { display: grid; grid-template-columns: minmax(0, 1fr) 220px 220px; gap: 12px; align-items: center; margin-bottom: 10px; }
.sp-yn-filters .sp-kf-title { margin: 0; }
.sp-yn-accs { display: flex; flex-direction: column; }
.sp-yn-acc { border-bottom: 1px solid var(--sp-line); }
.sp-yn-acc:last-child { border-bottom: 0; }
.sp-yn-acc.is-open { margin: 6px -12px; padding: 0 12px; border-radius: 16px; border-bottom-color: transparent; background: #fafbfc; box-shadow: 0 0 0 1.5px #ffd3c1; }
.sp-yn-acc-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.sp-yn-acc-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.sp-yn-acc-text strong { font-size: .95rem; font-weight: 600; color: var(--sp-navy); }
.sp-yn-acc-text span { font-size: .84rem; color: #4a5160; }
.sp-yn-acc-text small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .78rem; color: var(--sp-muted); }
.sp-yn-acc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.sp-yn-acc-side small { font-size: .76rem; color: var(--sp-muted); }
.sp-yn-manage { display: flex; flex-direction: column; gap: 14px; padding: 4px 0 16px 56px; }
.sp-yn-manage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sp-yn-inline { display: flex; gap: 8px; }
.sp-page .sp-yn-inline .sp-kf-input { flex: 1; min-width: 0; background-color: #fff; }
.sp-yn-inline .sp-btn { min-height: 48px; }
.sp-yn-manage-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-yn-danger-ghost { background: var(--sp-red-soft); color: #d93036; }
.sp-yn-danger-ghost:hover:not(:disabled) { background: #fbdcdc; }
.sp-yn-confirm { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--sp-red-soft); }
.sp-yn-confirm p { flex: 1; min-width: 200px; margin: 0; color: #b42318; font-size: .88rem; }

/* Hesap Oluştur — profil fotoğrafı */
.sp-yn-photo { display: flex; align-items: center; gap: 16px; }
.sp-yn-photo-prev { display: grid; place-items: center; flex: none; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: var(--sp-field); color: #9aa0aa; }
.sp-yn-photo-prev img { width: 100%; height: 100%; object-fit: cover; }
.sp-yn-photo-prev svg { width: 38px; height: 38px; }
.sp-yn-photo .sp-kf-upload { flex: 1; max-width: 360px; }

/* ══════════════════════════════════════════════════════════════════════════
   SPORION — HAVUZ (HavuzProgrami, HavuzKulvarDuzenle, HavuzMuhasebe)
   Haftalık ızgara, kulvar çipleri ve ücret kutusu .bs-havuz-* işaretlemesini korur;
   .sp-hv kapsamında açık temaya göre yeniden stillenir (ızgara mantığı değişmez).
   ══════════════════════════════════════════════════════════════════════════ */
.sp-hv-kpis { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 0; }

/* Hafta seçimi */
.sp-hv-week { padding: 16px 20px; }
.sp-hv-week-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.sp-hv-week-title small { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8a909c; }
.sp-hv-week-title strong { font-size: 1.15rem; font-weight: 700; color: var(--sp-navy); }
.sp-hv-week-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sp-hv-week-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 999px;
    background: var(--sp-field); color: var(--sp-ink); font-size: .88rem; font-weight: 500; cursor: pointer; transition: background .15s, color .15s;
}
.sp-hv-week-btn span { font-size: .6rem; opacity: .6; }
.sp-hv-week-btn.active { background: var(--sp-navy); color: #fff; }
.sp-hv-week-btn:focus-visible, .sp-hv-week-item:focus-visible { outline: 2px solid var(--sp-orange); outline-offset: 2px; }
.sp-hv-week-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; max-height: 260px; overflow-y: auto;
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--sp-line);
}
.sp-hv-week-list > p { grid-column: 1 / -1; margin: 0; }
.sp-hv-week-item {
    height: 40px; padding: 0 14px; border: 1.5px solid transparent; border-radius: 12px; background: var(--sp-field);
    color: var(--sp-ink); font-size: .85rem; font-weight: 500; text-align: left; cursor: pointer;
}
.sp-hv-week-item:hover:not(.active) { border-color: #ffd3c1; }
.sp-hv-week-item.active { border-color: var(--sp-orange); background: var(--sp-orange-soft); color: #d9480f; font-weight: 600; }

/* Liste satırı (Kulvar Düzenle / Havuz Muhasebe) */
.sp-hv-row { align-items: center; }
.sp-hv-dot { flex: none; width: 14px; height: 14px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(15,27,42,.12); }
.sp-hv-row-actions { display: flex; flex: none; gap: 4px; }
.sp-hv-week-pill { height: 22px; margin-left: 8px; padding: 0 10px; font-size: .72rem; vertical-align: middle; }
.sp-hv-week-pill--tekrar { background: var(--sp-gray-soft); color: var(--sp-gray); }

/* Program detay pop-up */
.sp-hv-detay { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--sp-line); }
.sp-hv-detay:last-child { border-bottom: 0; }
.sp-hv-detay-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.sp-hv-detay-body strong { font-size: .95rem; color: var(--sp-navy); }
.sp-hv-detay-body span { font-size: .85rem; color: #4a5160; }
.sp-hv-detay-body small { font-size: .82rem; font-weight: 600; color: var(--sp-navy); }
.sp-hv-detay .sp-btn { text-decoration: none; }

/* Rezervasyon formu (pop-up) */
.sp-hv-form { display: flex; flex-direction: column; gap: 16px; }
.sp-hv-form > .sp-muted { margin: -6px 0 0; font-size: .85rem; line-height: 1.45; }
.sp-hv-modal-field { margin: 12px 0 8px; }
.sp-hv-cakisma { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; padding-left: 18px; font-size: .9rem; color: #3b4150; }

/* Haftalık ızgara — açık tema */
.sp-hv .bs-havuz-legend { margin: 14px 2px 0; gap: 8px 16px; }
.sp-hv .bs-havuz-legend-item { font-size: .82rem; font-weight: 500; color: #4a5160; }
.sp-hv .bs-havuz-dot { width: 12px; height: 12px; border: 0; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(15,27,42,.12); }
.sp-hv .bs-havuz-scroll { border: 1px solid var(--sp-line); border-radius: 14px; background: #fff; box-shadow: none; }
.sp-hv .bs-havuz-table th, .sp-hv .bs-havuz-table td { border-right: 1px solid #f0f1f4; border-bottom: 1px solid #f0f1f4; }
.sp-hv .bs-havuz-table th.bs-havuz-gun-sinir, .sp-hv .bs-havuz-table td.bs-havuz-gun-sinir { border-right: 2px solid #dfe3e9; }
.sp-hv .bs-havuz-gun { padding: 10px 6px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; color: var(--sp-navy); background: #f6f7f9; }
.sp-hv .bs-havuz-kulvar-h { padding: 6px 2px; font-size: .7rem; font-weight: 600; color: var(--sp-muted); background: #fafbfc; }
.sp-hv .bs-havuz-saat { padding: 4px 10px; font-size: .72rem; font-weight: 600; color: #4a5160; background: #fff; border-right: 1px solid #e3e6eb !important; }
.sp-hv .bs-havuz-saat-h { background: #f6f7f9; color: var(--sp-navy); }
.sp-hv .bs-havuz-empty { height: 32px; }
.sp-hv .bs-havuz-blok { padding: 4px 6px; border-radius: 8px; box-shadow: inset 0 0 0 2px #fff; font-size: .68rem; font-weight: 700; transition: filter .12s; }
.sp-hv .bs-havuz-blok:hover { filter: brightness(1.06) saturate(1.05); }
.sp-hv .bs-havuz-salt .bs-havuz-scroll { opacity: .7; filter: grayscale(.4); }
.sp-hv .bs-havuz-salt::after { border-radius: 14px; background: rgba(246,247,249,.35); }
.sp-hv .bs-havuz-salt-rozet { padding: 6px 16px; border: 0; background: var(--sp-navy); color: #fff; font-size: .78rem; font-weight: 600; box-shadow: 0 10px 24px -12px rgba(15,27,42,.6); }

/* Kulvar / gün çipleri */
.sp-hv .bs-havuz-gunler { gap: 8px; }
.sp-hv .bs-havuz-kulvar-col { gap: 6px; }
.sp-hv .bs-havuz-chip {
    height: 40px; padding: 0 16px; border: 1.5px solid transparent; border-radius: 999px;
    background: var(--sp-field); color: var(--sp-ink); font-size: .88rem; font-weight: 500;
}
.sp-hv .bs-havuz-chip:hover:not(.sel) { border-color: #ffd3c1; }
.sp-hv .bs-havuz-chip.sel { border-color: var(--sp-orange); background: var(--sp-orange-soft); color: #d9480f; font-weight: 600; }
.sp-hv .bs-havuz-chip-yarim { height: 32px; padding: 0 12px; font-size: .78rem; }
.sp-hv .bs-havuz-chip-yarim.sel { border-color: #f0a100; background: #fff3dd; color: #c27400; }

/* İleriye dönük / ücretsiz anahtarları */
.sp-hv .bs-havuz-ileri-toggle {
    gap: 10px; min-height: 48px; margin: 0; padding: 0 16px; border: 1.5px dashed #d5d9e0; border-radius: 14px;
    background: #fff; color: var(--sp-ink); font-size: .92rem; font-weight: 600;
}
.sp-hv .bs-havuz-ileri-toggle:hover:not(.sel) { border-color: #ffd3c1; }
.sp-hv .bs-havuz-ileri-toggle.sel { border-style: solid; border-color: var(--sp-orange); background: var(--sp-orange-soft); color: #d9480f; }
.sp-hv .bs-havuz-ileri-tik { width: 22px; height: 22px; border-radius: 6px; font-size: .78rem; }
.sp-hv .bs-havuz-ileri-toggle.sel .bs-havuz-ileri-tik { border-color: var(--sp-orange); background: var(--sp-orange); color: #fff; }

/* Otomatik ödeme kutusu + renk paleti */
.sp-hv .bs-havuz-otoodeme { gap: 2px; margin: 0; padding: 14px 16px; border: 1px solid var(--sp-line); border-radius: 14px; background: #f6f7f9; }
.sp-hv .bs-havuz-otoodeme-l { font-size: .72rem; font-weight: 600; letter-spacing: .06em; color: #8a909c; }
.sp-hv .bs-havuz-otoodeme-v { font-size: 1.45rem; font-weight: 800; color: var(--sp-navy); }
.sp-hv .bs-havuz-otoodeme-f { font-size: .8rem; color: var(--sp-muted); }
.sp-hv .bs-havuz-pal { gap: 10px; }
.sp-hv .bs-havuz-sw { width: 32px; height: 32px; border-radius: 10px; }
.sp-hv .bs-havuz-sw.sel { border-color: #fff; box-shadow: 0 0 0 2px var(--sp-orange); }
.sp-hv .bs-havuz-sw-custom { width: 32px; height: 32px; border: 1.5px dashed #c5c9d0; border-radius: 10px; }

@media (max-width: 760px) {
    .sp-yn-filters { grid-template-columns: 1fr 1fr; }
    .sp-yn-filters .sp-kf-title { grid-column: 1 / -1; }
    .sp-yn-acc-row { flex-wrap: wrap; }
    .sp-yn-acc-text { flex-basis: calc(100% - 60px); }
    .sp-yn-acc-side { flex-direction: row; align-items: center; margin-left: 56px; }
    .sp-yn-acc-row > .sp-btn { margin-left: auto; }
    .sp-yn-manage { padding-left: 0; }
    .sp-yn-manage-grid { grid-template-columns: 1fr; }
    .sp-yn-photo { align-items: flex-start; }
    .sp-hv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sp-hv-week-actions { width: 100%; }
    .sp-hv-week-btn { flex: 1; justify-content: center; }
    .sp-hv-row-actions { width: 100%; justify-content: flex-end; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SPORION — HESABIM (Pages/Hesabim.razor)
   ══════════════════════════════════════════════════════════════════════════ */
.sp-hs-profile { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) auto; align-items: center; gap: 20px 28px; }
.sp-hs-who { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sp-hs-avatar {
    display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 50%;
    background: var(--sp-orange-soft); color: var(--sp-orange); font-size: 1.3rem; font-weight: 800;
}
.sp-hs-avatar svg { width: 32px; height: 32px; }
.sp-hs-who-text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.sp-hs-who-text strong { font-size: 1.25rem; font-weight: 700; color: var(--sp-navy); overflow-wrap: anywhere; }
.sp-hs-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 0; }
.sp-hs-info div { padding: 12px 14px; border-radius: 14px; background: var(--sp-field); min-width: 0; }
.sp-hs-info dt { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8a909c; }
.sp-hs-info dd { margin: 2px 0 0; font-size: .95rem; font-weight: 600; color: var(--sp-navy); overflow-wrap: anywhere; }
.sp-hs-actions { display: flex; flex-direction: column; gap: 10px; }
.sp-hs-sectitle { margin: 6px 0 12px; }
.sp-hs-pw { display: flex; flex-direction: column; gap: 14px; }
.sp-hs-pw p { margin: 0; }

@media (max-width: 1100px) {
    .sp-hs-profile { grid-template-columns: minmax(0, 1fr); }
    .sp-hs-actions { flex-direction: row; }
    .sp-hs-actions .sp-btn { flex: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SPORION — HESAP MENÜSÜ (MainLayout: alttaki kullanıcı kartı + masaüstü üst çubuk kullanıcısı)
   Sol menüdeki "Hesap" bölümü (Hesabım / Çıkış Yap) ve dil seçimi bu açılır menüye taşındı.
   ══════════════════════════════════════════════════════════════════════════ */
.sp-side-foot { position: relative; }
button.sp-side-user { width: 100%; font-family: inherit; text-align: left; cursor: pointer; }
button.sp-side-user:hover, button.sp-side-user.is-open { border-color: #ffd9c8; }
button.sp-side-user:focus-visible, button.sp-appbar-user:focus-visible { outline: 2px solid #ff5a1f; outline-offset: 2px; }
.sp-side-user-chev { transition: transform .2s; }
button.sp-side-user.is-open .sp-side-user-chev { transform: rotate(180deg); }

.sp-appbar-usermenu { position: relative; }
button.sp-appbar-user { border: 0; background: transparent; font-family: inherit; text-align: left; cursor: pointer; }
button.sp-appbar-user:hover, button.sp-appbar-user.is-open { background: #fff; }
button.sp-appbar-user > svg { transition: transform .2s; }
button.sp-appbar-user.is-open > svg { transform: rotate(180deg); }

.sp-umenu-backdrop { position: fixed; inset: 0; z-index: 1300; }
.sp-umenu {
    position: absolute; z-index: 1301; min-width: 260px; padding: 8px;
    background: #fff; color: #1d2433; border-radius: 18px; font-family: var(--bs-font);
    box-shadow: 0 24px 60px -18px rgba(15,27,42,.4), 0 0 0 1px rgba(15,27,42,.06);
    animation: spUmenuIn .14s ease;
}
.sp-umenu--up { left: 14px; right: 14px; bottom: calc(100% - 4px); }
.sp-umenu--down { right: 0; top: calc(100% + 8px); }
@keyframes spUmenuIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.sp-umenu svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.sp-umenu-head { display: flex; align-items: center; gap: 12px; padding: 8px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid #f0f1f4; }
.sp-umenu-head .sp-appbar-avatar { width: 40px; height: 40px; font-size: .85rem; }
.sp-umenu-head-tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sp-umenu-head-tx strong { font-size: .92rem; font-weight: 600; color: #0f1b2a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-umenu-head-tx small { font-size: .78rem; color: #6b7280; }

.sp-umenu-item {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 0 12px;
    border: 0; border-radius: 12px; background: none; color: #1d2433;
    font-family: inherit; font-size: .92rem; font-weight: 500; text-align: left; cursor: pointer;
}
.sp-umenu-item svg { color: #4a5160; }
.sp-umenu-item:hover, .sp-umenu-item:focus-visible { background: #f5f6f8; outline: none; }
.sp-umenu-item.is-danger, .sp-umenu-item.is-danger svg { color: #e5484d; }
.sp-umenu-item.is-danger:hover, .sp-umenu-item.is-danger:focus-visible { background: #fdecec; }

.sp-umenu-lang { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 0 8px 0 12px; }
.sp-umenu-lang > span { display: inline-flex; align-items: center; gap: 12px; font-size: .92rem; font-weight: 500; }
.sp-umenu-lang > span svg { color: #4a5160; }
.sp-umenu-seg { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: #f1f3f6; }
.sp-umenu-seg button {
    min-width: 40px; height: 28px; padding: 0 10px; border: 0; border-radius: 999px;
    background: transparent; color: #5a6170; font-family: inherit; font-size: .75rem; font-weight: 700; cursor: pointer;
}
.sp-umenu-seg button.is-active { background: #ff5a1f; color: #fff; }
.sp-umenu-seg button:focus-visible { outline: 2px solid #ff5a1f; outline-offset: 1px; }
.sp-umenu-sep { height: 1px; margin: 6px 4px; background: #f0f1f4; }

/* ══════════════════════════════════════════════════════════════════════════
   SPORION — HAVUZ SEKMELERİ (Components/HavuzSekmeler.razor)
   Büyük/Çocuk havuz geçişi + Haftalık Program / Kulvar Düzenle görünümleri.
   ══════════════════════════════════════════════════════════════════════════ */
.sp-hv-tabs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.sp-hv-pool, .sp-hv-view { display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: #fff; box-shadow: var(--sp-shadow); }
.sp-hv-tab {
    display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 12px;
    color: #4a5160; font-size: .92rem; font-weight: 500; text-decoration: none; white-space: nowrap;
    transition: background .15s, color .15s;
}
.sp-hv-tab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sp-hv-tab:hover:not(.active) { background: var(--sp-field); color: var(--sp-ink); }
.sp-hv-tab.active { background: var(--sp-orange); color: #fff; font-weight: 600; box-shadow: 0 8px 18px -10px rgba(255,90,31,.9); }
.sp-hv-view .sp-hv-tab.active { background: var(--sp-navy); box-shadow: none; }
.sp-hv-tab:focus-visible { outline: 2px solid var(--sp-orange); outline-offset: 2px; }

@media (max-width: 640px) {
    .sp-hv-pool, .sp-hv-view { width: 100%; }
    .sp-hv-tab { flex: 1; justify-content: center; padding: 0 10px; font-size: .86rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SPORION — VELİ PORTALI (Pages/VeliPortal.razor)
   Çocuk seçimi, çocuk özeti + sıradaki antrenman, gelecek/geçmiş antrenman listeleri.
   Liste satırları Takvim ile ortak (.sp-tk-item / .sp-tk-date / .sp-tk-text).
   ══════════════════════════════════════════════════════════════════════════ */
.sp-vp-empty-ico { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; border-radius: 50%; background: var(--sp-orange-soft); color: var(--sp-orange); }
.sp-vp-empty-ico svg { width: 30px; height: 30px; }

/* Çocuk seçimi */
.sp-vp-kids { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.sp-vp-kid {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1.5px solid transparent; border-radius: 18px;
    background: #fff; box-shadow: var(--sp-shadow); color: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s;
}
.sp-vp-kid:hover:not(.active) { border-color: #ffd3c1; }
.sp-vp-kid.active { border-color: var(--sp-orange); background: var(--sp-orange-soft); }
.sp-vp-kid:focus-visible { outline: 2px solid var(--sp-orange); outline-offset: 2px; }
.sp-vp-kid.active .sp-avatar-s { background: var(--sp-orange); color: #fff; }
.sp-vp-kid-tx { display: flex; flex-direction: column; min-width: 0; }
.sp-vp-kid-tx strong { font-size: .95rem; font-weight: 600; color: var(--sp-navy); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sp-vp-kid-tx small { font-size: .8rem; color: var(--sp-muted); }

/* Çocuk özeti */
.sp-vp-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; align-items: center; gap: 20px 28px; }
.sp-vp-who { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sp-vp-avatar { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--sp-orange-soft); color: var(--sp-orange); font-size: 1.3rem; font-weight: 800; }
.sp-vp-who-tx { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.sp-vp-who-tx strong { font-size: 1.25rem; font-weight: 700; color: var(--sp-navy); overflow-wrap: anywhere; }
.sp-vp-next { display: flex; flex-direction: column; gap: 3px; padding: 14px 18px; border-radius: 16px; background: var(--sp-navy); color: #fff; min-width: 0; }
.sp-vp-next small { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.sp-vp-next strong { font-size: 1.05rem; font-weight: 700; color: #ff7a3d; }
.sp-vp-next span { font-size: .88rem; color: rgba(255,255,255,.85); }
.sp-vp-next .sp-muted { color: rgba(255,255,255,.7); }
.sp-vp-stats { display: grid; grid-template-columns: repeat(3, minmax(70px, 1fr)); gap: 8px; }
.sp-vp-stats div { display: flex; flex-direction: column; align-items: center; padding: 10px 8px; border-radius: 14px; background: var(--sp-field); }
.sp-vp-stats strong { font-size: 1.35rem; font-weight: 800; line-height: 1.1; color: var(--sp-navy); }
.sp-vp-stats small { font-size: .74rem; color: var(--sp-muted); white-space: nowrap; }

/* Antrenman satırı + açılır detay */
.sp-vp-item { border-bottom: 1px solid var(--sp-line); }
.sp-vp-item:last-child { border-bottom: 0; }
.sp-vp-item .sp-tk-item { border-bottom: 0; }
.sp-vp-item.is-past .sp-tk-date { background: var(--sp-gray-soft); }
.sp-vp-item.is-past .sp-tk-date strong, .sp-vp-item.is-past .sp-tk-date span { color: var(--sp-gray); }
.sp-vp-item.is-past .sp-tk-text strong { color: #4a5160; }
.sp-vp-detail { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0 0 14px 66px; }
.sp-vp-detail div { padding: 10px 12px; border-radius: 12px; background: var(--sp-field); min-width: 0; }
.sp-vp-detail dt { font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #8a909c; }
.sp-vp-detail dd { margin: 2px 0 0; font-size: .9rem; font-weight: 600; color: var(--sp-navy); overflow-wrap: anywhere; }

@media (max-width: 1100px) {
    .sp-vp-hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .sp-vp .sp-tk-item { padding-right: 0; }
    .sp-vp-detail { margin-left: 0; grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SPORION — BASIC PANEL (/basic/*) + SÜPER ADMİN (/superadmin)
   Ad alanı "sp-bp-" (Basic) ve "sp-sa-" (Süper Admin). Pro paneldeki .sp-page token'larını
   (turuncu vurgu, lacivert başlık, açık zemin) aynen kullanır; yeni renk/font tanımlanmaz.
   ══════════════════════════════════════════════════════════════════════════ */
.sp-bp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.sp-bp-kicker { display: block; margin-bottom: 4px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sp-orange); }
.sp-bp-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; padding: 0; border: 0; background: none; color: var(--sp-muted); font-size: .88rem; font-weight: 600; cursor: pointer; text-decoration: none; }
.sp-bp-back:hover { color: var(--sp-orange); }
.sp-bp-back svg { width: 16px; height: 16px; }
.sp-bp-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sp-bp-actions .sp-btn { min-height: 46px; padding: 0 20px; }
.sp-btn--success { background: var(--sp-green); color: #fff; box-shadow: 0 10px 22px -14px rgba(31,157,85,.9); }
.sp-btn--success:hover:not(:disabled) { background: #188a49; }
.sp-btn--danger-soft { background: var(--sp-red-soft); color: #c4262c; }
.sp-btn--danger-soft:hover:not(:disabled) { background: #fbdcdc; }

.sp-bp-pos { color: var(--sp-green) !important; }
.sp-bp-neg { color: #d93036 !important; }
.sp-bp-warn { color: #e07a00 !important; }
.sp-badge--turuncu { background: var(--sp-amber-soft); color: var(--sp-amber); }
.sp-badge--mavi { background: #e9f1ff; color: #2f6fe4; }

/* Ay seçici: ◀ Ekim 2026 ▶ */
.sp-bp-month { display: inline-flex; align-items: center; gap: 4px; height: 50px; padding: 0 6px; background: #fff; border-radius: 999px; box-shadow: var(--sp-shadow); }
.sp-bp-month > button { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: none; color: var(--sp-navy); cursor: pointer; }
.sp-bp-month > button:hover { background: var(--sp-field); }
.sp-bp-month > button svg { width: 20px; height: 20px; stroke-width: 2; }
.sp-bp-month strong { min-width: 116px; text-align: center; font-size: .95rem; color: var(--sp-navy); }
.sp-bp-month .sp-bp-month-now { width: auto; height: 34px; padding: 0 12px; border-radius: 999px; background: var(--sp-orange-soft); color: #d9480f; font-size: .8rem; font-weight: 600; }

/* Araç çubuğu: arama + filtre + sekme */
.sp-bp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; }
.sp-bp-toolbar .sp-search { flex: 1 1 260px; min-width: 0; }
.sp-bp-toolbar .sp-select { flex: 0 0 200px; }
.sp-bp-toolbar .sp-tabs-pill button { height: 46px; }

/* KPI kartları (sp-dash-kpi ile aynı) */
.sp-bp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-bottom: 18px; }
.sp-bp-kpis--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.sp-bp-kpis .sp-dash-kpi strong small { font-size: .95rem; font-weight: 600; color: var(--sp-muted); }
.sp-bp-progress { display: block; height: 6px; margin-top: 8px; border-radius: 99px; background: var(--sp-field); overflow: hidden; }
.sp-bp-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--sp-green); transition: width .3s; }

/* Ana sayfa kahraman kartı */
.sp-bp-hero {
    position: relative; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; margin-bottom: 18px; padding: 26px 28px;
    border-radius: 22px; color: #fff; overflow: hidden;
    background: radial-gradient(120% 140% at 100% 0%, rgba(255,90,31,.38) 0%, transparent 46%), linear-gradient(135deg, #16273c 0%, #0f1b2a 100%);
    box-shadow: 0 24px 50px -28px rgba(15,27,42,.75);
}
.sp-bp-hero h1 { margin: 2px 0 4px; font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: #fff; }
.sp-bp-hero p { margin: 0; color: rgba(255,255,255,.7); }
.sp-bp-hero .sp-bp-kicker { color: #ff9a6b; }
.sp-bp-hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-top: 22px; }
.sp-bp-hero-stats div { padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.07); }
.sp-bp-hero-stats strong { display: block; font-size: 1.45rem; font-weight: 800; line-height: 1.1; }
.sp-bp-hero-stats span { font-size: .78rem; color: rgba(255,255,255,.65); }
.sp-bp-hero-kasa { align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 20px 22px; border-radius: 18px; background: rgba(255,255,255,.08); }
.sp-bp-hero-kasa small { font-size: .76rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.sp-bp-hero-kasa strong { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.sp-bp-hero-kasa strong.is-neg { color: #ff8c8f; }
.sp-bp-hero-kasa span { font-size: .88rem; color: rgba(255,255,255,.7); }
.sp-bp-hero-kasa b.is-pos { color: #7be3a6; font-weight: 700; }
.sp-bp-hero-kasa b.is-neg { color: #ff8c8f; font-weight: 700; }

.sp-bp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sp-bp-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Durum satırları (ana sayfa) */
.sp-bp-need { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid #f0f1f4; }
.sp-bp-need:last-child { border-bottom: 0; }
.sp-bp-need-ico { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; }
.sp-bp-need-ico svg { width: 22px; height: 22px; }
.sp-bp-need-ico.is-bad { background: var(--sp-red-soft); color: #d93036; }
.sp-bp-need-ico.is-warn { background: var(--sp-amber-soft); color: #e07a00; }
.sp-bp-need-ico.is-ok { background: var(--sp-green-soft); color: var(--sp-green); }
.sp-bp-need-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sp-bp-need-tx strong { font-size: .95rem; color: var(--sp-navy); }
.sp-bp-need-tx small { font-size: .82rem; color: var(--sp-muted); }
.sp-bp-count { min-width: 30px; height: 28px; padding: 0 10px; display: grid; place-items: center; border-radius: 999px; background: var(--sp-red-soft); color: #d93036; font-weight: 700; font-size: .85rem; }
.sp-bp-count.is-warn { background: var(--sp-amber-soft); color: #e07a00; }

.sp-bp-trio { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.sp-bp-trio + .sp-bp-trio { margin-top: 10px; }
.sp-bp-trio div { padding: 12px 14px; border-radius: 14px; background: var(--sp-bg); }
.sp-bp-trio strong { display: block; font-size: 1.25rem; font-weight: 800; color: var(--sp-navy); }
.sp-bp-trio span { font-size: .78rem; color: var(--sp-muted); }

.sp-bp-person { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f1f4; }
.sp-bp-person:last-child { border-bottom: 0; }
.sp-bp-person .sp-avatar-s { width: 38px; height: 38px; background: var(--sp-orange-soft); color: #d9480f; }
.sp-bp-person > small { margin-left: auto; color: var(--sp-muted); font-size: .8rem; white-space: nowrap; }

/* Branş dağılımı */
.sp-bp-dist + .sp-bp-dist { margin-top: 16px; padding-top: 16px; border-top: 1px solid #f0f1f4; }
.sp-bp-dist-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.sp-bp-dist-head strong { color: var(--sp-navy); }
.sp-bp-dist-head span { font-weight: 800; color: var(--sp-orange); }
.sp-bp-dist ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sp-bp-dist li { display: grid; grid-template-columns: minmax(80px, 30%) 1fr 32px; align-items: center; gap: 10px; font-size: .86rem; color: #4a5160; }
.sp-bp-dist li b { text-align: right; color: var(--sp-navy); }
.sp-bp-bar { height: 8px; border-radius: 99px; background: var(--sp-field); overflow: hidden; }
.sp-bp-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sp-orange), var(--sp-orange-2)); }

/* Tablo (div tabanlı, CSS değişkeniyle kolon şablonu) */
.sp-bp-table { display: flex; flex-direction: column; }
.sp-bp-tr {
    display: grid; grid-template-columns: var(--sp-bp-cols, 1fr); align-items: center; gap: 12px;
    padding: 12px 16px 12px 18px; border-bottom: 1px solid #f0f1f4; min-height: 60px; font-size: .9rem; color: #3b4150;
}
.sp-bp-tr:last-child { border-bottom: 0; }
.sp-bp-th { min-height: 44px; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #8a909c; }
.sp-bp-tr.is-click { cursor: pointer; }
.sp-bp-tr.is-click:hover, .sp-bp-tr.is-click:focus-visible { background: #fafbfc; outline: none; }
.sp-bp-tr.is-muted { opacity: .62; }
.sp-bp-tr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sp-bp-tr .sp-bp-r { text-align: right; }
.sp-bp-tr .sp-bp-name { display: flex; flex-direction: column; gap: 2px; }
.sp-bp-tr .sp-bp-name strong { color: var(--sp-navy); font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-bp-tr .sp-bp-name small { color: var(--sp-muted); font-size: .8rem; }
.sp-bp-tr .sp-badge { height: 26px; padding: 0 12px; font-size: .78rem; }
.sp-bp-amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-bp-src { margin-left: 6px; font-size: .74rem; font-weight: 600; color: var(--sp-orange); text-decoration: none; }
.sp-bp-icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: none; color: #6b7280; cursor: pointer; }
.sp-bp-icon-btn:hover { background: var(--sp-red-soft); color: #d93036; }
.sp-bp-icon-btn.is-plain:hover { background: var(--sp-field); color: var(--sp-ink); }
.sp-bp-icon-btn svg { width: 18px; height: 18px; }
.sp-bp-cell-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; flex-wrap: wrap; }
.sp-bp-empty-row { padding: 22px; text-align: center; color: var(--sp-muted); }

/* Liste satırı (aidat / envanter) */
.sp-bp-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid #f0f1f4; }
.sp-bp-row:last-child { border-bottom: 0; }
.sp-bp-row.is-paid { background: linear-gradient(90deg, rgba(31,157,85,.06), transparent 40%); }
.sp-bp-row-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sp-bp-row-tx a, .sp-bp-row-tx button.sp-bp-link { align-self: flex-start; padding: 0; border: 0; background: none; font: inherit; font-size: .98rem; font-weight: 700; color: var(--sp-navy); text-decoration: none; cursor: pointer; text-align: left; }
.sp-bp-row-tx a:hover, .sp-bp-row-tx button.sp-bp-link:hover { color: var(--sp-orange); }
.sp-bp-row-tx small { font-size: .82rem; color: var(--sp-muted); }
.sp-bp-row-side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.sp-bp-row-side .sp-btn { min-height: 38px; padding: 0 14px; font-size: .86rem; border-radius: 11px; }
.sp-bp-stock { min-width: 74px; text-align: right; }
.sp-bp-stock strong { font-size: 1.3rem; font-weight: 800; color: var(--sp-navy); }
.sp-bp-stock span { margin-left: 4px; font-size: .8rem; color: var(--sp-muted); }
.sp-bp-stock.is-out strong { color: #d93036; }

.sp-bp-section { margin-top: 18px; }
.sp-bp-section > h2 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; font-size: 1.1rem; font-weight: 700; color: var(--sp-navy); }
.sp-bp-section > h2 small { font-size: .8rem; font-weight: 500; color: #8a909c; }

/* Detay */
.sp-bp-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sp-bp-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.sp-bp-card-head h2 { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--sp-navy); }
.sp-bp-card-head small { color: var(--sp-muted); font-size: .82rem; }
.sp-bp-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin: 0; }
.sp-bp-dl div { min-width: 0; }
.sp-bp-dl dt { font-size: .74rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #8a909c; }
.sp-bp-dl dd { margin: 3px 0 0; font-size: .95rem; font-weight: 600; color: var(--sp-navy); overflow-wrap: anywhere; }
.sp-bp-dl .is-wide { grid-column: 1 / -1; }
.sp-bp-dl .is-hi { grid-column: 1 / -1; padding: 14px 16px; border-radius: 14px; background: var(--sp-orange-soft); }
.sp-bp-dl .is-hi dd { font-size: 1.4rem; font-weight: 800; }
.sp-bp-months { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sp-bp-months li { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f0f1f4; font-size: .9rem; }
.sp-bp-months li:last-child { border-bottom: 0; }
.sp-bp-months li > strong { color: var(--sp-navy); }
.sp-bp-months li > span { color: var(--sp-muted); font-size: .85rem; }
.sp-bp-months .sp-btn { min-height: 34px; padding: 0 12px; font-size: .82rem; border-radius: 10px; }
.sp-bp-given { list-style: none; margin: 0; padding: 0; }
.sp-bp-given li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 9px 0; border-bottom: 1px solid #f0f1f4; font-size: .88rem; }
.sp-bp-given li:last-child { border-bottom: 0; }
.sp-bp-foot { display: flex; justify-content: flex-start; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--sp-line); }

/* Yeni sporcu: kayıtta verilen malzemeler */
.sp-bp-mat { margin-top: 20px; padding: 18px; border-radius: 16px; background: var(--sp-bg); }
.sp-bp-mat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.sp-bp-mat-head strong { display: block; color: var(--sp-navy); }
.sp-bp-mat-head small { color: var(--sp-muted); font-size: .82rem; }
.sp-bp-mat-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 140px 40px; gap: 10px; align-items: end; padding: 12px 0; border-top: 1px solid var(--sp-line); }
.sp-bp-mat-row .sp-kf-input { background: #fff; }
.sp-bp-mat-stock { display: block; margin-top: 6px; font-size: .8rem; color: var(--sp-muted); }
.sp-bp-mat-stock.is-bad { color: #d93036; }
.sp-bp-mat-total { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--sp-line); font-size: .9rem; color: #4a5160; }
.sp-bp-mat-total strong { font-size: 1.15rem; color: var(--sp-navy); }

/* Diyalog genişlikleri + seçenek çipleri */
.sp-dialog.sp-dialog--form { width: min(560px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; text-align: left; }
.sp-dialog.sp-dialog--wide { width: min(760px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; }
.sp-dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.sp-dialog-head h3 { margin: 0; }
.sp-dialog-head p { margin: 4px 0 0 !important; font-size: .9rem !important; }
.sp-dialog .sp-kf-grid + .sp-kf-field, .sp-dialog .sp-kf-field + .sp-kf-grid, .sp-dialog .sp-kf-field + .sp-kf-field, .sp-dialog .sp-kf-grid + .sp-kf-grid { margin-top: 14px; }
.sp-dialog .sp-dialog-actions { margin-top: 20px; }
.sp-dialog .sp-sf-error, .sp-dialog .sp-kf-ok { margin-bottom: 14px; }
.sp-bp-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-bp-opts .sp-chip { height: 38px; padding: 0 14px; font-size: .86rem; }
.sp-bp-info { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--sp-bg); font-size: .88rem; color: #4a5160; }
.sp-bp-check { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: .92rem; color: var(--sp-ink); cursor: pointer; }
.sp-bp-check input { width: 18px; height: 18px; accent-color: var(--sp-orange); }
.sp-bp-money { position: relative; display: flex; align-items: center; }
.sp-bp-money > span { position: absolute; left: 14px; font-weight: 700; color: var(--sp-muted); pointer-events: none; }
.sp-page .sp-bp-money .sp-kf-input { padding-left: 32px; }
.sp-bp-fee { padding: 16px; border-radius: 16px; background: var(--sp-orange-soft); margin-bottom: 14px; }
.sp-bp-fee .sp-kf-input { height: 56px; font-size: 1.3rem; font-weight: 800; background: #fff; }
.sp-bp-fee .sp-bp-opts { margin-top: 10px; }
.sp-bp-fee small { display: block; margin-top: 8px; font-size: .8rem; color: #5b3a2c; }
textarea.sp-kf-input { height: auto !important; min-height: 76px; padding: 12px 14px !important; resize: vertical; }

/* Branş akordiyonu */
.sp-bp-add { display: flex; gap: 12px; align-items: flex-end; }
.sp-bp-add .sp-kf-field { flex: 1; }
.sp-bp-add .sp-btn { min-height: 48px; }
.sp-bp-acc { background: #fff; border-radius: 18px; box-shadow: var(--sp-shadow); overflow: hidden; }
.sp-bp-acc + .sp-bp-acc { margin-top: 10px; }
.sp-bp-acc-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 18px; border: 0; background: none; text-align: left; cursor: pointer; font-family: inherit; }
.sp-bp-acc-head:hover { background: #fafbfc; }
.sp-bp-acc-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--sp-orange-soft); color: var(--sp-orange); flex: none; }
.sp-bp-acc-ico svg { width: 20px; height: 20px; }
.sp-bp-acc-head > strong { flex: 1; font-size: 1rem; color: var(--sp-navy); }
.sp-bp-acc-head .sp-badge { height: 26px; font-size: .78rem; }
.sp-bp-acc-chev { width: 18px; height: 18px; color: #8a909c; transition: transform .2s; }
.sp-bp-acc.is-open .sp-bp-acc-chev { transform: rotate(180deg); }
.sp-bp-acc-body { padding: 4px 18px 18px; border-top: 1px solid var(--sp-line); }
.sp-bp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; padding: 0; list-style: none; }
.sp-bp-tags li { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 6px 0 14px; border-radius: 999px; background: var(--sp-field); font-size: .88rem; color: var(--sp-ink); }
.sp-bp-tags button { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: none; color: #8a909c; cursor: pointer; }
.sp-bp-tags button:hover { background: var(--sp-red-soft); color: #d93036; }
.sp-bp-tags svg { width: 14px; height: 14px; stroke-width: 2.2; }
.sp-bp-acc-foot { display: flex; justify-content: flex-end; margin-top: 14px; }

.sp-bp-toast { position: fixed; left: 50%; bottom: 96px; z-index: 1300; transform: translateX(-50%); max-width: min(520px, calc(100vw - 32px)); padding: 12px 18px; border-radius: 14px; background: #b42318; color: #fff; font-size: .9rem; box-shadow: 0 16px 36px -16px rgba(15,27,42,.6); cursor: pointer; }

/* ── Süper Admin ── */
.sp-sa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.sp-sa-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #fff; border-radius: 20px; box-shadow: var(--sp-shadow); }
.sp-sa-card.is-off { opacity: .72; }
.sp-sa-card-head { display: flex; align-items: flex-start; gap: 12px; }
.sp-sa-logo { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 14px; background: var(--sp-navy); color: #fff; font-weight: 800; font-size: 1rem; }
.sp-sa-card-head > div { flex: 1; min-width: 0; }
.sp-sa-card-head strong { display: block; font-size: 1.05rem; color: var(--sp-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-sa-card-head small { color: var(--sp-muted); font-size: .8rem; }
.sp-sa-panel { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 8px; font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sp-sa-panel--pro { background: var(--sp-navy); color: #fff; }
.sp-sa-panel--basic { background: var(--sp-orange-soft); color: #d9480f; }
.sp-sa-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 0; }
.sp-sa-meta dt { font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #8a909c; }
.sp-sa-meta dd { margin: 2px 0 0; font-size: .88rem; font-weight: 600; color: var(--sp-ink); overflow-wrap: anywhere; }
.sp-sa-card-foot { display: flex; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--sp-line); }
.sp-sa-card-foot .sp-btn { flex: 1; min-height: 40px; padding: 0 12px; font-size: .86rem; border-radius: 11px; }
.sp-sa-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sp-sa-choice .sp-kayit-tab ul { margin: 6px 0 0; padding-left: 18px; font-size: .8rem; color: var(--sp-muted); }
.sp-sa-form { max-width: 920px; }
.sp-sa-form .sp-kf-sec h3 { margin: 0 0 12px; font-size: .95rem; color: var(--sp-navy); }

@media (max-width: 1180px) {
    .sp-bp-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .sp-bp-kpis--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .sp-bp-hero { grid-template-columns: 1fr; }
    .sp-bp-grid, .sp-bp-detail { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .sp-bp-head { align-items: flex-start; }
    .sp-bp-actions { width: 100%; }
    .sp-bp-actions .sp-btn { flex: 1; }
    .sp-bp-kpis, .sp-bp-kpis--3 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
    .sp-bp-hero { padding: 20px; }
    .sp-bp-hero h1 { font-size: 1.5rem; }
    .sp-bp-hero-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .sp-bp-toolbar .sp-select { flex: 1 1 100%; }
    .sp-bp-tr { grid-template-columns: 1fr auto !important; gap: 4px 10px; padding: 12px 14px; }
    .sp-bp-th { display: none; }
    .sp-bp-tr > .sp-bp-hide-sm { display: none; }
    .sp-bp-table--3m .sp-bp-tr { grid-template-columns: minmax(0, 1fr) auto auto !important; }
    .sp-bp-tr .sp-bp-name small { white-space: normal; }
    .sp-bp-row { flex-wrap: wrap; padding: 12px 14px; }
    .sp-bp-row-side { width: 100%; justify-content: flex-start; }
    .sp-bp-dl { grid-template-columns: 1fr; }
    .sp-bp-months li { grid-template-columns: 1fr auto; }
    .sp-bp-months li > span { grid-column: 1 / -1; order: 3; }
    .sp-bp-mat-row { grid-template-columns: 1fr 1fr 40px; }
    .sp-bp-mat-row > :first-child { grid-column: 1 / -1; }
    .sp-bp-add { flex-direction: column; align-items: stretch; }
    .sp-sa-choice { grid-template-columns: 1fr; }
    .sp-sa-grid { grid-template-columns: 1fr; }
    .sp-dialog .sp-kf-grid { grid-template-columns: 1fr; }
    .sp-dialog .sp-kf-span2 { grid-column: auto; }
}